Skip to content

Commit

Permalink
🐛 Restrict keyboardTypes
Browse files Browse the repository at this point in the history
  • Loading branch information
Damian Sznajder committed Dec 7, 2019
1 parent 1540426 commit 5d64348
Show file tree
Hide file tree
Showing 7 changed files with 71 additions and 77 deletions.
4 changes: 2 additions & 2 deletions Example/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,14 +35,14 @@ export default class App extends Component<{}, { isFourDigit: boolean }> {
{this.state.isFourDigit ? (
<OtpInputs
ref={this.otpRef}
keyboardType="number-pad"
keyboardType="phone-pad"
numberOfInputs={4}
selectTextOnFocus={false}
clearTextOnFocus
defaultValue="1234"
/>
) : (
<OtpInputs keyboardType="number-pad" ref={this.otpRef} numberOfInputs={6} />
<OtpInputs keyboardType="phone-pad" ref={this.otpRef} numberOfInputs={6} />
)}
</SafeAreaView>
);
Expand Down
2 changes: 1 addition & 1 deletion Example/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
"dependencies": {
"react": "16.8.6",
"react-native": "0.60.5",
"react-native-keyevent": "0.2.2"
"react-native-keyevent": "0.2.6"
},
"devDependencies": {
"@babel/core": "^7.5.0",
Expand Down
8 changes: 4 additions & 4 deletions Example/yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4938,10 +4938,10 @@ react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6:
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.9.0.tgz#21ca9561399aad0ff1a7701c01683e8ca981edcb"
integrity sha512-tJBzzzIgnnRfEm046qRcURvwQnZVXmuCbscxUO5RWrGTXpon2d4c8mI0D8WE6ydVIm29JiLB6+RslkIvym9Rjw==

[email protected].2:
version "0.2.2"
resolved "https://registry.yarnpkg.com/react-native-keyevent/-/react-native-keyevent-0.2.2.tgz#9bc8a910b5a680a707a9c1db0782857fae145517"
integrity sha512-uKeZTsiGnEyvX95AbQx8Nupxn3oFjk2Pj0R8S5yfycAhrYgBfssDdXEN544nX9z161Qgm70GFJmIij8Xl4PHsQ==
[email protected].6:
version "0.2.6"
resolved "https://registry.yarnpkg.com/react-native-keyevent/-/react-native-keyevent-0.2.6.tgz#8e88c98e16bd1dde5db3954e6c104cf3c9a98e35"
integrity sha512-kW3BMgFGPX1HHVYSebw2bTNb11Z+yclLKN84CO5pzFG99Qx9Do+28LXVQ3uJKK7J5amoNo/pKiySROXA3q9O3A==

[email protected]:
version "0.60.5"
Expand Down
36 changes: 18 additions & 18 deletions docs/API.md
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,23 @@
# API

| Method | Type | Required | Default | Description |
| --------------------- | -------------- | ----------- | --------------------------------------- | ------------------------------------------------------------------- |
| autoCapitalize | string | false | 'none' | |
| clearTextOnFocus | boolean | false | false | |
| defaultValue | string | false | | Sets default value for otp inputs |
| handleChange | function | true | console.log | Returns otp code. |
| keyboardType | string | true | 'phone-pad' | |
| numberOfInputs | number | true (1..6) | 4 | Inputs count to render. |
| secureTextEntry | boolean | false | false | |
| selectTextOnFocus | boolean | false | true [iOS Only](./src/OtpInput.tsx#L56) | |
| testIDPrefix | string | false | otpInput-\${inputIndex} | Prefix for testID. |
| isRTL | boolean | false | false | Preferably I18nManager.isRTL. |
| placeholder | string | false | | Placeholder for the input boxes. |
| style | style (object) | false | [default](./src/index.tsx#L275) | Applied to whole container. |
| focusStyles | style (object) | false | [default](./src/index.tsx#L275) | Applied to the input on focus. |
| inputStyles | style(object) | false | [default](./src/index.tsx#L275) | Applied to single input. |
| inputContainerStyles | style (object) | false | [default](./src/index.tsx#L275) | Applied to each input container. |
| ...restTextInputProps | | | | [TextInput](https://facebook.github.io/react-native/docs/textinput) |
| Method | Type | Required | Default | Description |
| --------------------- | -------------- | ----------- | --------------------------------------- | ------------------------------------------------------------------------------------------------------------ |
| autoCapitalize | string | false | 'none' | |
| clearTextOnFocus | boolean | false | false | |
| defaultValue | string | false | | Sets default value for otp inputs |
| handleChange | function | true | console.log | Returns otp code. |
| keyboardType | string | true | 'phone-pad' | Do not use `numeric` `number-pad` or `decimal-pad` for android as it [won't work on android correctly](#213) |
| numberOfInputs | number | true (1..6) | 4 | Inputs count to render. |
| secureTextEntry | boolean | false | false | |
| selectTextOnFocus | boolean | false | true [iOS Only](./src/OtpInput.tsx#L56) | |
| testIDPrefix | string | false | otpInput-\${inputIndex} | Prefix for testID. |
| isRTL | boolean | false | false | Preferably I18nManager.isRTL. |
| placeholder | string | false | | Placeholder for the input boxes. |
| style | style (object) | false | [default](./src/index.tsx#L275) | Applied to whole container. |
| focusStyles | style (object) | false | [default](./src/index.tsx#L275) | Applied to the input on focus. |
| inputStyles | style(object) | false | [default](./src/index.tsx#L275) | Applied to single input. |
| inputContainerStyles | style (object) | false | [default](./src/index.tsx#L275) | Applied to each input container. |
| ...restTextInputProps | | | | [TextInput](https://facebook.github.io/react-native/docs/textinput) |

# Methods

Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@
"@react-native-community/bob": "0.7.0",
"@types/jest": "24.0.23",
"@types/react": "16.9.15",
"@types/react-native": "0.60.23",
"@types/react-native": "0.60.24",
"@types/react-test-renderer": "16.9.1",
"babel-jest": "24.9.0",
"codecov": "3.6.1",
Expand Down
88 changes: 41 additions & 47 deletions src/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,18 @@ import { ActionTypes, OtpInputsRef, ReducerState, Actions, KeyEventType } from '
import { fillOtpCode } from './helpers';

type Props = TextInputProps & {
keyboardType:
| 'default'
| 'email-address'
| 'phone-pad'
| 'visible-password'
| 'ascii-capable'
| 'numbers-and-punctuation'
| 'url'
| 'name-phone-pad'
| 'twitter'
| 'web-search'
| undefined;
style?: StyleProp<ViewStyle>;
focusStyles?: StyleProp<ViewStyle>;
defaultValue?: string;
Expand Down Expand Up @@ -83,20 +95,36 @@ const reducer = (state: ReducerState, action: Actions) => {
const OtpInputs = forwardRef<OtpInputsRef, Props>(
(
{
autoCapitalize,
clearTextOnFocus,
autoCapitalize = 'none',
clearTextOnFocus = false,
defaultValue,
focusStyles,
handleChange,
inputContainerStyles,
inputStyles,
isRTL,
keyboardType,
numberOfInputs,
placeholder,
secureTextEntry,
selectTextOnFocus,
style,
focusStyles = {
borderColor: '#00f',
},
handleChange = console.log,
inputContainerStyles = {
borderBottomWidth: 1,
height: 53,
margin: 10,
},
inputStyles = {
fontSize: 24,
paddingTop: 10,
textAlign: 'center',
width: 40,
},
isRTL = false,
keyboardType = 'phone-pad',
numberOfInputs = 4,
placeholder = '',
secureTextEntry = false,
selectTextOnFocus = true,
style = {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
},
testIDPrefix = 'otpInput',
...restProps
},
Expand Down Expand Up @@ -290,37 +318,3 @@ const OtpInputs = forwardRef<OtpInputsRef, Props>(

export { OtpInputsRef };
export default OtpInputs;

// @ts-ignore
OtpInputs.defaultProps = {
autoCapitalize: 'none',
clearTextOnFocus: false,
handleChange: console.log,
keyboardType: 'phone-pad',
numberOfInputs: 4,
secureTextEntry: false,
selectTextOnFocus: true,
testIDPrefix: 'otpInput',
isRTL: false,
placeholder: '',
style: {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
},
focusStyles: {
borderColor: '#00f',
},
inputStyles: {
fontSize: 24,
paddingTop: 10,
textAlign: 'center',
width: 40,
},
inputContainerStyles: {
borderBottomWidth: 1,
height: 53,
margin: 10,
},
};
8 changes: 4 additions & 4 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1198,10 +1198,10 @@
resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7"
integrity sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==

"@types/[email protected].23":
version "0.60.23"
resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.60.23.tgz#9270f91bbff822a1571feece56cd260f0a1b2831"
integrity sha512-hLRCWKNni/e6KEXSNtexXCg0u7CnHla6G6yeZYTMOlyG/bLE41GeLxP4dXJw1hyDsXJYN00Wc3Apr2XQ2TW1LA==
"@types/[email protected].24":
version "0.60.24"
resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.60.24.tgz#0648aff3a910f29b8a892cecd0ec3199697bd31f"
integrity sha512-wI4C39mrEWpnx2JHCGsDKKcB22CNCKUWjLO6Mwt2yzgKD7crawuTjeHpBej/OiD/3df2X8rluuSmJ1xRcOZNAg==
dependencies:
"@types/prop-types" "*"
"@types/react" "*"
Expand Down

0 comments on commit 5d64348

Please sign in to comment.