Skip to content

Commit

Permalink
feat: add mode props
Browse files Browse the repository at this point in the history
  • Loading branch information
Hoà Phan authored and Hoà Phan committed Jan 17, 2023
1 parent 82b65a7 commit ba6bd31
Show file tree
Hide file tree
Showing 6 changed files with 11 additions and 59 deletions.
46 changes: 2 additions & 44 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,10 @@ or
### Demo
![](https://github.com/hoaphantn7604/file-upload/blob/master/document/textinput/demo.png)

#### TextInput extends TextInputProps
#### TextInput extends RNTextInputProps
| Props | Params | isRequire | default |
| ------------------ | -------------------- | --------- | ---------------------------------- |
| mode | default or numeric or password |No | Switch mode textinput |
| style | ViewStyle | No | Styling for container view |
| label | String | No | Label for textinput |
| labelStyle | TextStyle | No | Styling for label text |
Expand All @@ -36,7 +37,6 @@ or
| textErrorStyle | TextStyle | No | Styling for text error |
| showIcon | Boolean | No | Show or hide icon clear text |
| iconStyle | ImageStyle | No | Styling for icon clear text |
| numeric | Boolean | No | Input value is numeric |
| focusColor | String | No | Color when focus to textinput |
| fontFamily | String | No | Customize font style |
| renderLeftIcon | () => JSX.Element | No | Customize left icon for textinput |
Expand All @@ -45,20 +45,6 @@ or
#### HashtagInput extends TextInputProps
| Props | Params | isRequire | default |
| ------------------ | -------------------- | --------- | ---------------------------------- |
| style | ViewStyle | No | Styling for container view |
| label | String | No | Label for textinput |
| labelStyle | TextStyle | No | Styling for label text |
| placeholderStyle | TextStyle | No | Styling for placeholderStyle text |
| inputStyle | TextStyle | No | Styling for input view |
| textError | String | No | Text error |
| textErrorStyle | TextStyle | No | Styling for text error |
| showIcon | Boolean | No | Show or hide icon clear text |
| iconStyle | ImageStyle | No | Styling for icon clear text |
| numeric | Boolean | No | Input value is numeric |
| focusColor | String | No | Color when focus to textinput |
| fontFamily | String | No | Customize font style |
| renderLeftIcon | () => JSX.Element | No | Customize left icon for textinput |
| renderRightIcon | () => JSX.Element | No | Customize right icon for textinput |
| data | String[] | No | Data is a plain array |
| hashtagStyle | ViewStyle | No | Styling for hashtash container view|
| hashtagTextStyle | TextStyle | No | Styling for hashtag text |
Expand All @@ -68,20 +54,6 @@ or
#### TagsInput extends TextInputProps
| Props | Params | isRequire | default |
| ------------------ | -------------------- | --------- | ---------------------------------- |
| style | ViewStyle | No | Styling for container view |
| label | String | No | Label for textinput |
| labelStyle | TextStyle | No | Styling for label text |
| placeholderStyle | TextStyle | No | Styling for placeholderStyle text |
| inputStyle | TextStyle | No | Styling for input view |
| textError | String | No | Text error |
| textErrorStyle | TextStyle | No | Styling for text error |
| showIcon | Boolean | No | Show or hide icon clear text |
| iconStyle | ImageStyle | No | Styling for icon clear text |
| numeric | Boolean | No | Input value is numeric |
| focusColor | String | No | Color when focus to textinput |
| fontFamily | String | No | Customize font style |
| renderLeftIcon | () => JSX.Element | No | Customize left icon for textinput |
| renderRightIcon | () => JSX.Element | No | Customize right icon for textinput |
| data | String[] | No | Data is a plain array |
| tagsStyle | ViewStyle | No | Styling for hashtash container view|
| tagsTextStyle | TextStyle | No | Styling for hashtag text |
Expand All @@ -95,20 +67,6 @@ or
| Props | Params | isRequire | default |
| ------------------ | -----------------------------| --------- | ---------------------------------- |
| data | String[] | No | Data is a plain array |
| style | ViewStyle | No | Styling for container view |
| label | String | No | Label for textinput |
| labelStyle | TextStyle | No | Styling for label text |
| placeholderStyle | TextStyle | No | Styling for placeholderStyle text |
| inputStyle | TextStyle | No | Styling for input view |
| textError | String | No | Text error |
| textErrorStyle | TextStyle | No | Styling for text error |
| showIcon | Boolean | No | Show or hide icon clear text |
| iconStyle | ImageStyle | No | Styling for icon clear text |
| numeric | Boolean | No | Input value is numeric |
| focusColor | String | No | Color when focus to textinput |
| fontFamily | String | No | Customize font style |
| renderLeftIcon | () => JSX.Element | No | Customize left icon for textinput |
| renderRightIcon | () => JSX.Element | No | Customize right icon for textinput |
| renderItem | (item:string) => JSX.Element | No | Takes an item from data and renders it into the list |


Expand Down
2 changes: 1 addition & 1 deletion example/src/textinput/example3.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ const TextInputComponent = () => {
return (
<View style={styles.container}>
<TextInput
mode="password"
value={value}
style={styles.input}
inputStyle={styles.inputStyle}
Expand All @@ -17,7 +18,6 @@ const TextInputComponent = () => {
label="Password"
placeholder="Placeholder"
placeholderTextColor="gray"
secureTextEntry
onChangeText={(text) => {
setValue(text);
}}
Expand Down
4 changes: 0 additions & 4 deletions example/tsconfig.json
View file

This file was deleted.

15 changes: 7 additions & 8 deletions src/TextInput/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,11 +35,10 @@ const TextInputComponent: InputProps = (props) => {
textErrorStyle,
value,
label,
secureTextEntry,
placeholderTextColor = '#000',
placeholder = '',
showIcon,
numeric,
mode = 'default',
textError,
focusColor,
onFocus,
Expand All @@ -52,20 +51,20 @@ const TextInputComponent: InputProps = (props) => {
const [text, setText] = useState<string>('');
const [isFocus, setIsFocus] = useState<boolean>(false);
const [textEntry, setTextEntry] = useState<boolean>(
secureTextEntry ? true : false
mode === 'password' ? true : false
);

useEffect(() => {
if (value) {
if (numeric) {
if (mode === 'numeric') {
setText(formatNumeric(value));
} else {
setText(value);
}
} else {
setText('');
}
}, [numeric, value]);
}, [mode, value]);

const formatNumeric = (num: string) => {
const values = num.toString().replace(/\D/g, '');
Expand All @@ -80,7 +79,7 @@ const TextInputComponent: InputProps = (props) => {
};

const onChange = (text: string) => {
if (numeric) {
if (mode === 'numeric') {
setText(formatNumeric(text));
onChangeText(reConvertNumeric(text));
} else {
Expand All @@ -99,7 +98,7 @@ const TextInputComponent: InputProps = (props) => {
return renderRightIcon();
}
if (text.length > 0) {
if (secureTextEntry) {
if (mode === 'password') {
return (
<TouchableOpacity onPress={onChangeTextEntry}>
<Image
Expand Down Expand Up @@ -187,7 +186,7 @@ const TextInputComponent: InputProps = (props) => {
) : null}
<TextInput
secureTextEntry={textEntry}
{...props}
{...props}
style={[styles.input, inputStyle, font()]}
value={text}
placeholder={isFocus || !label ? placeholder : ''}
Expand Down
2 changes: 1 addition & 1 deletion src/TextInput/model.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import type {
} from 'react-native';

interface Props extends TextInputProps {
mode?: 'default' | 'numeric' | 'password'
fontFamily?: string;
style?: StyleProp<ViewStyle>;
inputStyle?: StyleProp<TextStyle>;
Expand All @@ -20,7 +21,6 @@ interface Props extends TextInputProps {
textError?: string;
label?: string;
showIcon?: boolean;
numeric?: boolean;
focusColor?: string;
onFocus?: (e: NativeSyntheticEvent<TextInputFocusEventData>) => void;
onBlur?: (e: NativeSyntheticEvent<TextInputFocusEventData>) => void;
Expand Down
1 change: 0 additions & 1 deletion src/__tests__/index.test.tsx
View file

This file was deleted.

0 comments on commit ba6bd31

Please sign in to comment.