feat(FormFields): use rifm to format CreditCard and Decimal fields #306
Conversation
| const format = (s?: string) => { | ||
| const sanitizedNumber = String(s ?? '').replace(/[^\d]/g, ''); | ||
| return sanitizedNumber.match(/.{1,4}/g)?.join(' ') ?? sanitizedNumber; | ||
| }; |
There was a problem hiding this comment.
I've changed the code of format function, now it is based on formatIban implementation, to keep them similar: https://github.com/Telefonica/mistica-web/blob/master/src/iban-field.tsx#L76-L79
|
Deploy preview for mistica-web ready! ✅ Preview Built with commit cdfa0e4. |
| defaultValue={defaultValue === undefined ? undefined : format(defaultValue)} | ||
| ref={inputRef} | ||
| maxLength={getCreditCardNumberLength(rifm.value) + 3} // We have to take in account formatting spaces | ||
| onChange={rifm.onChange} |
There was a problem hiding this comment.
I've changed the event to listen, as I think onChange event is preferred to onInput in react, and I've seen it used in other similar components
|
Accessibility report ℹ️ You can run this locally by executing |
anabelengp
force-pushed
the
anabelengp/WEB-83-rifm-lib-in-credit-card
branch
from
749c6ce to
33a958b
Compare
| @@ -48,19 +56,44 @@ export const DecimalInput: React.FC<DecimalInputProps> = ({inputRef, value, defa | |||
| return parts.shift() + localDecimalChar + parts.join(''); | |||
| }; | |||
|
|
|||
| const replace = (value: any) => String(value ?? '').replace(/[.,]/g, localDecimalChar); // use local decimal char | |||
There was a problem hiding this comment.
replace the localDecimalChar in a replace input for rifm to prevent the caret from being kept in the position before the delimiter: realadvisor/rifm#65 (comment)
| const format = (value: any) => { | ||
| const sanitized = String(value ?? '').replace(/[^.,\d]/g, ''); // remove non digits or decimal separator chars; | ||
| const firstSeparator = /[.,]/.exec(sanitized); | ||
| const parts = sanitized.split(/[.,]/); |
There was a problem hiding this comment.
do not make the localDecimalChar replacement here, instead, keep the one the user typed. Make that replacement in replace prost-processor
|
|
|
why don't we use |
|
mm I thought accepting a comma as first char was an agreed behaviour. I saw this other implmementation which I think is more convenient: https://realadvisor.github.io/rifm/. It is more restrictive. Shall I change it?? |
hmmm... well I'm not sure to be honest. Maybe we could accept |
pladaria
changed the title
|
🎉 This PR is included in version 9.11.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
related to #191
Applied to CreditCardInput and DecimalInput (used by CvvField). Not applied to CreditCardExpirationField since it provokes more problems than what it solves...
before
after
