CustomInputField
Usage#
<RefactoredCustomInputField value="Value" onChange={(value : string, error : boolean, silentError: boolean) => console.log("Value", value, "hasError", error)}/>The 'error' is for telling when the user is shown an error, while the 'silentError' is updated on every time the input changes, which can be used to prevent the user from submitting.
Placeholder#
When the input is empty a placeholder can be shown.
<RefactoredCustomInputField placeholder="Placeholder"/>Required#
To mark the field required, simply pass the required props. It also runs automatically runs the internal validation to ensure the input has been filled out.
<RefactoredCustomInputField required/>Variant (Keyboard Type)#
The Variant determines which keyboard type should be opened.
note
Currently there is no restrictions to the input e.g. 'numeric' will also allow for letters. In the future input restrictions will be added to ensure when using e.g 'numeric' only numbers is allowed to be inputted.
AutoFill#
It is possible to try to autofill the input field with user's data such as the display name, email etc.
<RefactoredCustomInputField autoFill="email"/>Developer Info
The data that is prefilled is retrieved from the Redux Store
Prefix / Suffix#
// Phone<RefactoredCustomInputField prefix="+45"/>
// Weight<RefactoredCustomInputField suffix="KG"/>note
JSX Elements and icons will be supported later
HelperText#
Helper text is used to give the user more information regarding what is expected of the input, how it will be use etc. e.g "We will not save your CPR number"
<RefactoredCustomInputField helperText="We will not save your CPR number."/>Pattern#
A pattern formats the displayed value to fit the pattern. In a pattern, the # means that the original input will be displayed in those spots.
// Simple phone pattern<RefactoredCustomInputField pattern="## ## ## ##"/> // '12345678' becomes "12 34 56 78"
// (unrealistic) Complex pattern<RefactoredCustomInputField pattern="(+99) ### / ### KG!"/> // '123456' becomes "(+99) 123 / 456 KG!"
Validation#
To perform validation it is possible to either use premade validations using the InputValidator, or create custom validations.
Validation is run every time the user stops typing in the inputfield.
Premade Validations#
Email validation using the InputValidator.
<RefactoredCustomInputField validation={(value) => new InputValidator(value).email("Custom Error Text").result }/>tip
See InputValidator for detailed information
Custom Validations#
For custom validation requires the validation callback funtion to return false when there are no errors. When the callback return true it means there is an error and the default error text will be used (if it exists). if a custom error text is desired, return a string instead of true when there is an error.
<RefactoredCustomInputField errorText="Default Error Text" validation={(value : string) : string | boolean => { if (value === "incorrect"){ return "Custom Error Text" // "Custom Error Text will be displayed } else if (value === "also incorrect"){ return true // "Default Error Text" will be displayed } return false } }/>Clickable Text#
If some clickable text is desired underneath the input, it can be added using the clickableText prop.
<RefactoredCustomInputField clickableText={{text: "This text is clickable", onPress: () => console.log("Clickable Text Pressed")}}/>Props#
| Name | Type | Default | Description |
|---|---|---|---|
label | string | undefined | Input field label text |
value | string | undefined | The unformatted default value or controlled value. If using autoFill, the auto fill value is used as the default value |
variant | text, numeric, email,cpr, phone | undefined | Determines which type of keyboard will be opened. Some variants come with their own premade patterns as well (see pattern prop). |
placeholder | string | undefined | The unformatted placeholder value (seen when the input value is empty) |
secureTextEntry | boolean | false | Replaces input with *** for e.g. password |
prefix | string | undefined | A piece of text before the value in the input field e.g. "+45" |
suffix | string | undefined | A piece of text after the value in the input field e.g. "KG" |
helperText | string | undefined | A piece of text to give the user a small piece of information |
clickableText | {text: string, onPress: function () => any} | undefined | A clickable text that is displayed underneath the input field |
maxLength | number | undefined | Limits the amount of characters in the input field. If a pattern is used, the max length will be the pattern length |
fontSize | 'xs', 'sm' | 'sm' | Font size for the input text |
required | boolean | false | Is the input field required. Adds a small * next to the label, also adds internal validation if it is |
errorText | string | undefined | Default error text if a validation function is used and no specific error message is returned |
validation | function (value) => boolean | string | undefined | If validation is wanted, this function will be called when the user stops typing. If the function returns false then no errors was found. If it returns true the default error text will be used. If it returns a string, the string will be used as the error text. |
autoFill | 'displayName', 'email', 'address', 'phone','cpr' | undefined | Automatically fills the default value with the desired value taken from the Redux store. Only works when the user is logged in |
autoCompleteType | 'off' , 'email' , 'name', 'password' , 'username', 'postal'-code , street-'address', 'tel', 'cc-csc' , 'cc-exp' , 'cc-exp-month' , 'cc-exp-year' , 'cc-number' | undefined | (ANDROID ONLY) Tries to auto complete the input. Use 'autoFill' over this if possible. |
textContentType | 'none' , 'URL' , 'addressCity' , 'addressCityAndState' , 'addressState' , 'countryName' ,'creditCardNumber' , 'emailAddress' , 'familyName' , 'fullStreetAddress' ,'givenName' , 'jobTitle' ,'location' , 'middleName' , 'name' , 'namePrefix' , 'nameSuffix' , 'nickname' , 'organizationName' ,'postalCode' , 'streetAddressLine1' ,'streetAddressLine2' , 'sublocality' , 'telephoneNumber' , 'username' , 'password' | undefined | (iOS ONLY) Tries to auto complete the input. Use 'autoFill' over this if possible. |
autoCorrect | boolean | true | Should the phone's auto correct be used |
autoFocus | boolean | false | Should the input field start focused / selected |
pattern | string | undefined | Format text input with a pattern E.g. for phone number: "## ## ## ##" The following variants comes with premade patterns: 'phone' , 'cpr' |
onChange | function (newValue: string, error: boolean) => any | undefined | Function that is called when the input changes. It is called with the new value and if the new value has an error or not |
onSubmitEditing | function (value: string, error: boolean) => any | undefined | Function that is called when the form is submitted. It is called with the current value and if the current value has an error or not |