Refactor: unify autoFocus prop and add autoCorrect prop into the Tags…

…Input
kiwicom · Feb 22, 2019 · 0fbdb90 · 0fbdb90
1 parent 4bbfed9
commit 0fbdb90
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 12 deletions.
diff --git a/src/TagsInput/TagsInput.js b/src/TagsInput/TagsInput.js
@@ -25,7 +25,8 @@ type Props = {|
   +onKeyPress?: (e: Event) => void,
   +placeholder?: string,
   +value?: string,
-  +autofocus: boolean,
+  +autoFocus: boolean,
+  +autoCorrect: boolean,
 |};
 
 type State = {
@@ -50,7 +51,8 @@ export default class TagsInput extends React.Component<Props, State> {
   static defaultProps = {
     fontSize: parseFloat(defaultTokens.fontSizeButtonLarge),
     tags: [],
-    autofocus: false,
+    autoFocus: false,
+    autoCorrect: false,
   };
 
   constructor(props: Props) {
@@ -60,7 +62,7 @@ export default class TagsInput extends React.Component<Props, State> {
 
     this.state = {
       value: props.value || '',
-      isFocus: props.autofocus,
+      isFocus: props.autoFocus,
     };
   }
 
@@ -119,7 +121,8 @@ export default class TagsInput extends React.Component<Props, State> {
       label,
       onKeyPress,
       tags,
-      autofocus,
+      autoFocus,
+      autoCorrect,
     } = this.props;
     const { isFocus, value } = this.state;
 
@@ -156,7 +159,8 @@ export default class TagsInput extends React.Component<Props, State> {
           >
             <TagsContainer tags={tags} fontSize={fontSize} />
             <InputField
-              autofocus={autofocus}
+              autoCorrect={autoCorrect}
+              autoFocus={autoFocus}
               onKeyPress={onKeyPress}
               onFocus={this.handleOnFocus}
               onBlur={this.handleOnBlur}

diff --git a/src/TagsInput/TagsInput.stories.js b/src/TagsInput/TagsInput.stories.js
@@ -3,7 +3,13 @@
 import React from 'react';
 import { View } from 'react-native';
 import { storiesOf } from '@storybook/react-native';
-import { text, withKnobs, object, number } from '@storybook/addon-knobs';
+import {
+  text,
+  withKnobs,
+  object,
+  number,
+  boolean,
+} from '@storybook/addon-knobs';
 import { action } from '@storybook/addon-actions';
 
 import TagsInput from './TagsInput';
@@ -18,7 +24,7 @@ storiesOf('TagsInput', module)
         onChangeText={action('onChangeText')}
         label="From:"
         placeholder="Departure point"
-        autofocus
+        autoFocus
       />
     </View>
   ))
@@ -29,7 +35,7 @@ storiesOf('TagsInput', module)
         onChangeText={action('onChangeText')}
         label="From:"
         placeholder="Departure point"
-        autofocus
+        autoFocus
       />
     </View>
   ))
@@ -42,12 +48,14 @@ storiesOf('TagsInput', module)
       step: 1,
     });
     const label = text('Label', 'From:');
+    const autoCorrect = boolean('Auto correct', false);
 
     const placeholder = text('Placeholder', 'Departure point');
     return (
       <View style={{ margin: 20 }}>
         <TagsInput
-          autofocus
+          autoCorrect={autoCorrect}
+          autoFocus
           fontSize={fontSize}
           tags={tags}
           onChangeText={action('onChangeText')}

diff --git a/src/TagsInput/components/InputField.js b/src/TagsInput/components/InputField.js
@@ -21,7 +21,8 @@ type Props = {|
   +maxWidth?: number,
   +placeholder?: string,
   +onKeyPress?: (e: ViewLayoutEvent) => void,
-  +autofocus?: boolean,
+  +autoFocus?: boolean,
+  +autoCorrect?: boolean,
 |};
 
 type State = {|
@@ -100,7 +101,8 @@ class InputField extends React.Component<Props, State> {
       onFocus,
       onBlur,
       onKeyPress,
-      autofocus,
+      autoFocus,
+      autoCorrect,
     } = this.props;
     const { componentWidth } = this.state;
 
@@ -116,7 +118,8 @@ class InputField extends React.Component<Props, State> {
     return (
       <View style={styles.container}>
         <TextInput
-          autoFocus={autofocus}
+          autoCorrect={autoCorrect}
+          autoFocus={autoFocus}
           onKeyPress={onKeyPress}
           onBlur={onBlur}
           onFocus={onFocus}