Skip to content

Support passing a custom formatter to TextField #1528

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Oct 4, 2021
Merged

Support passing a custom formatter to TextField #1528

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
155189d
Support passing a static validation message (#1486)
ethanshar Aug 24, 2021
749b671
Add leading accessory to example
ethanshar Sep 9, 2021
ce95959
Merge branch 'master' into feat/TextFieldFormatter
ethanshar Oct 4, 2021
fcfe4bd
Update TextField formatter signature
ethanshar Oct 4, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 18 additions & 1 deletion demo/src/screens/incubatorScreens/IncubatorTextFieldScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ import {Assets, Colors, Spacings, Typography, View, Text, Button, Keyboard, Incu
const {TextField} = Incubator;
const {KeyboardAwareInsetsView} = Keyboard;

const priceFormatter = Intl.NumberFormat('en-US');

export default class TextFieldScreen extends Component {
input = React.createRef<TextInput>();
input2 = React.createRef<TextInput>();
Expand Down Expand Up @@ -47,7 +49,7 @@ export default class TextFieldScreen extends Component {
}

render() {
const {errorPosition, shouldDisable} = this.state;
const {errorPosition, shouldDisable, price} = this.state;
return (
<ScrollView keyboardShouldPersistTaps="always">
<View flex padding-page>
Expand Down Expand Up @@ -218,6 +220,21 @@ export default class TextFieldScreen extends Component {
hint="1-6 chars including numeric chars"
fieldStyle={styles.withUnderline}
/>
<Text h3 blue50 marginV-s4>
Formatter
</Text>
<TextField
value={price}
onChangeText={value => this.setState({price: value})}
label="Price"
placeholder="Enter price"
validate={'number'}
validationMessage="Invalid price"
// @ts-expect-error
formatter={(value) => (isNaN(value) ? value : priceFormatter.format(Number(value)))}
leadingAccessory={<Text marginR-s1 grey30>$</Text>}
fieldStyle={styles.withUnderline}
/>
</View>
<KeyboardAwareInsetsView/>
</ScrollView>
Expand Down
6 changes: 5 additions & 1 deletion generatedTypes/src/incubator/TextField/Input.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,13 @@ export interface InputProps extends Omit<TextInputProps, 'placeholderTextColor'>
* placeholder text color
*/
placeholderTextColor?: ColorType;
/**
* Custom formatter for the input value (used only when input if not focused)
*/
formatter?: (value?: string) => string;
}
declare const Input: {
({ style, hint, color, forwardedRef, ...props }: InputProps & ForwardRefInjectedProps): JSX.Element;
({ style, hint, color, forwardedRef, formatter, ...props }: InputProps & ForwardRefInjectedProps): JSX.Element;
displayName: string;
};
export default Input;
3 changes: 3 additions & 0 deletions generatedTypes/src/incubator/TextField/usePreset.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
hint?: string | undefined;
color?: import("./types").ColorType | undefined;
placeholderTextColor?: import("./types").ColorType | undefined;
formatter?: ((value?: string | undefined) => string) | undefined;
style?: import("react-native").StyleProp<import("react-native").TextStyle>;
testID?: string | undefined;
removeClippedSubviews?: boolean | undefined;
Expand Down Expand Up @@ -351,6 +352,7 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
hint?: string | undefined;
color?: import("./types").ColorType | undefined;
placeholderTextColor?: import("./types").ColorType | undefined;
formatter?: ((value?: string | undefined) => string) | undefined;
style?: import("react-native").StyleProp<import("react-native").TextStyle>;
testID?: string | undefined;
removeClippedSubviews?: boolean | undefined;
Expand Down Expand Up @@ -683,6 +685,7 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
hint?: string | undefined;
color?: import("./types").ColorType | undefined;
placeholderTextColor?: import("./types").ColorType | undefined;
formatter?: ((value?: string | undefined) => string) | undefined;
style: false | import("react-native").TextStyle | import("react-native").RegisteredStyle<import("react-native").TextStyle> | import("react-native").RecursiveArray<import("react-native").TextStyle | import("react-native").Falsy | import("react-native").RegisteredStyle<import("react-native").TextStyle>> | {
lineHeight: undefined;
height: number | undefined;
Expand Down
3 changes: 2 additions & 1 deletion src/components/textField/TextFieldMigrator.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,8 @@ const propsMigrationMap: Dictionary<string> = {
titleColor: 'labelColor',
titleStyle: 'labelStyle',
/* CHAR COUNTER */
showCharacterCounter: 'showCharCounter'
showCharacterCounter: 'showCharCounter',
transformer: 'formatter'
};

const specialMigrationMap: Dictionary<string> = {
Expand Down
8 changes: 8 additions & 0 deletions src/incubator/TextField/Input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,13 +27,18 @@ export interface InputProps
* placeholder text color
*/
placeholderTextColor?: ColorType;
/**
* Custom formatter for the input value (used only when input if not focused)
*/
formatter?: (value?: string) => string;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is it possible for the formatter to return undefined?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do you mean whether we should have the following signature?
(value?: string) => string | undefined;?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, in second thought, when you format something and it's not correct, you return the same value + an error, right?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Well it's really up to the user implementation.. they can do whatever..
Technically, we can support returning undefined since it's a valid value for TextField.
I'll change it

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed

}

const Input = ({
style,
hint,
color = DEFAULT_INPUT_COLOR,
forwardedRef,
formatter,
...props
}: InputProps & ForwardRefInjectedProps) => {
const inputRef = useImperativeInputHandle(forwardedRef);
Expand All @@ -42,10 +47,13 @@ const Input = ({
const inputColor = getColorByState(color, context);
const placeholderTextColor = getColorByState(props.placeholderTextColor, context);

const value = formatter && !context.isFocused ? formatter(props.value) : props.value;

return (
<TextInput
style={[styles.input, !!inputColor && {color: inputColor}, style]}
{...props}
value={value}
placeholder={placeholder}
placeholderTextColor={placeholderTextColor}
// @ts-expect-error
Expand Down