Skip to content

Commit f40f464

Browse files
authored
feat(TextInput): iban formatter (#426)
## Short description This pull request introduces support for handling IBAN input types in the text input components ## List of changes proposed in this pull request - Extended the `InputType` type to include "iban" as a valid input type - Added a case for the `iban` input type in the `getInputPropsByType` function, including formatting and input properties specific to IBAN ## How to test Check the example in `TextInputs` section ## Preview https://github.com/user-attachments/assets/873ebed5-dc74-4499-a170-06b70f288e01
1 parent 51578f5 commit f40f464

File tree

3 files changed

+19
-3
lines changed

3 files changed

+19
-3
lines changed

example/src/pages/TextInputs.tsx

+5
Original file line numberDiff line numberDiff line change
@@ -124,6 +124,11 @@ export const TextInputs = () => (
124124
inputType={"credit-card"}
125125
bottomMessage="Handles credit card input type"
126126
/>
127+
<InputComponentWrapper
128+
placeholder={"Base input"}
129+
inputType={"iban"}
130+
bottomMessage="Handles IBAN input type"
131+
/>
127132
<H5>Base input with validation</H5>
128133
<InputValidationComponentWrapper
129134
placeholder={"Base input"}

src/utils/textInput/index.ts

+12
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,18 @@ export const getInputPropsByType = (
3838
returnKeyType: "done"
3939
}
4040
};
41+
case "iban":
42+
return {
43+
valueFormat: v => v.replace(/\s/g, "").replace(/.{4}/g, "$& ").trim(),
44+
textInputProps: {
45+
autoComplete: "off",
46+
keyboardType: "default",
47+
textContentType: "none",
48+
inputMode: "text",
49+
returnKeyType: "done",
50+
autoCapitalize: "characters"
51+
}
52+
};
4153
default:
4254
return undefined;
4355
}

src/utils/types.ts

+2-3
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export type XOR<T, U> = T | U extends object
2929
? (Without<T, U> & U) | (Without<U, T> & T)
3030
: T | U;
3131

32-
export type InputType = "credit-card" | "default";
32+
export type InputType = "credit-card" | "iban" | "default";
3333

3434
// Biometrics type used in io-app code base
3535
// https://github.com/pagopa/io-app/blob/master/ts/utils/biometrics.ts#L31
@@ -45,5 +45,4 @@ export type Nullable<T> = T | null;
4545
*/
4646
export type Optional<T> = T | undefined;
4747

48-
49-
export type TextInputValidationRefProps = { validateInput: () => void };
48+
export type TextInputValidationRefProps = { validateInput: () => void };

0 commit comments

Comments
 (0)