DINGO-212: Add mask to react-native-bpk-component-text-input

Skyscanner · Jul 18, 2018 · 2c71431 · 2c71431
1 parent 6e689b5
commit 2c71431
Show file tree

Hide file tree

Showing 11 changed files with 553 additions and 4 deletions.
diff --git a/flow-typed/npm/tinymask_vx.x.x.js b/flow-typed/npm/tinymask_vx.x.x.js
@@ -0,0 +1,18 @@
+// flow-typed signature: c27cfe57f5073fdc01508ea638e7c5ba
+// flow-typed version: <<STUB>>/tinymask_v1.0.2/flow_v0.75.0
+
+/**
+ * This is an autogenerated libdef stub for:
+ *
+ *   'tinymask'
+ *
+ * Fill this stub out by replacing all the `any` types.
+ *
+ * Once filled out, we encourage you to share your work with the
+ * community by sending a pull request to:
+ * https://github.com/flowtype/flow-typed
+ */
+
+declare module 'tinymask' {
+  declare module.exports: any;
+}
diff --git a/native/packages/react-native-bpk-component-text-input/package-lock.json b/native/packages/react-native-bpk-component-text-input/package-lock.json
diff --git a/native/packages/react-native-bpk-component-text-input/package.json b/native/packages/react-native-bpk-component-text-input/package.json
@@ -17,6 +17,7 @@
     "bpk-tokens": "^27.0.4",
     "prop-types": "^15.5.8",
     "react-native-bpk-component-icon": "^1.9.1",
-    "react-native-bpk-component-text": "^2.1.43"
+    "react-native-bpk-component-text": "^2.1.43",
+    "tinymask": "^1.0.2"
   }
 }
diff --git a/native/packages/react-native-bpk-component-text-input/readme.md b/native/packages/react-native-bpk-component-text-input/readme.md
@@ -80,6 +80,18 @@ export default class App extends Component {
           keyboardType="phone-pad"
           value="+441234567890"
         />
+        <BpkTextInput
+          label="Date"
+          mask="99/99"
+          maxLength={5}
+          style={styles.input}
+        />
+        <BpkTextInput
+          label="Card number"
+          mask="9999-9999-9999-9999"
+          maxLength={19}
+          style={styles.input}
+        />
       </View>
     );
   }
@@ -95,8 +107,13 @@ export default class App extends Component {
 | clearButtonMode (iOS only)  | oneOf('never', 'while-editing', 'unless-editing', 'always') | false    | while-editing |
 | description                 | string                                                      | false    | null          |
 | editable                    | bool                                                        | false    | true          |
+| mask                        | string                                                      | false    | null          |
 | inputRef                    | func                                                        | false    | null          |
 | valid                       | oneOf(true, false, null)                                    | false    | null          |
 | validationMessage           | string                                                      | false    | null          |
 | style                       | style                                                       | false    | null          |
 | accessoryView               | node                                                        | false    | null          |
+
+## Mask
+
+More details abot how to use and define a mask can be found here: https://github.com/benhurott/tinymask
diff --git a/native/packages/react-native-bpk-component-text-input/src/BpkTextInput-test.common.js b/native/packages/react-native-bpk-component-text-input/src/BpkTextInput-test.common.js
@@ -156,6 +156,26 @@ const commonTests = () => {
 
       expect(testRenderer.toJSON()).toMatchSnapshot();
     });
+
+    it('should render correctly with mask="99/99"', () => {
+      const testRenderer = TestRenderer.create(
+        <BpkTextInput label="Name" value="1234" mask="99/99" />,
+      );
+
+      expect(testRenderer.toJSON()).toMatchSnapshot();
+    });
+
+    it('should render correctly with mask="9999-9999-9999-9999"', () => {
+      const testRenderer = TestRenderer.create(
+        <BpkTextInput
+          label="Name"
+          value="1234123412341234"
+          mask="9999-9999-9999-9999"
+        />,
+      );
+
+      expect(testRenderer.toJSON()).toMatchSnapshot();
+    });
   });
 };
 

diff --git a/native/packages/react-native-bpk-component-text-input/src/BpkTextInput.js b/native/packages/react-native-bpk-component-text-input/src/BpkTextInput.js
@@ -29,6 +29,7 @@ import {
 } from 'react-native';
 import BpkText from 'react-native-bpk-component-text';
 import { animationDurationSm } from 'bpk-tokens/tokens/base.react.native';
+import TinyMask from 'tinymask';
 import { ValidIcon, InvalidIcon } from './BpkTextInputIcons';
 import { getLabelStyle, getInputContainerStyle, styles } from './styles';
 
@@ -39,6 +40,7 @@ export type Props = {
   editable: boolean,
   description: ?string,
   inputRef: ?(Node) => void,
+  mask: ?string,
   onBlur: ?() => void,
   onFocus: ?() => void,
   placeholder: ?string,
@@ -56,6 +58,7 @@ export const propTypes = {
   description: PropTypes.string,
   editable: PropTypes.bool,
   inputRef: PropTypes.func,
+  mask: PropTypes.string,
   onBlur: PropTypes.func,
   onFocus: PropTypes.func,
   placeholder: PropTypes.string,
@@ -70,6 +73,7 @@ export const defaultProps = {
   description: null,
   editable: true,
   inputRef: null,
+  mask: null,
   onBlur: null,
   onFocus: null,
   placeholder: null,
@@ -86,6 +90,8 @@ type State = {
 class BpkTextInput extends Component<Props, State> {
   animatedValues: { color: AnimatedValue, labelPosition: AnimatedValue };
 
+  tinymask: TinyMask;
+
   static propTypes = { ...propTypes };
 
   static defaultProps = { ...defaultProps };
@@ -101,6 +107,8 @@ class BpkTextInput extends Component<Props, State> {
       color: new Animated.Value(this.getColorAnimatedValue()),
       labelPosition: new Animated.Value(this.getLabelPositionAnimatedValue()),
     };
+
+    this.tinymask = new TinyMask(props.mask || '');
   }
 
   componentDidUpdate() {
@@ -156,6 +164,7 @@ class BpkTextInput extends Component<Props, State> {
       editable,
       label,
       value,
+      mask,
       style: userStyle,
       valid,
       onFocus,
@@ -164,7 +173,8 @@ class BpkTextInput extends Component<Props, State> {
       ...rest
     } = this.props;
     const hasAccessoryView = accessoryView !== null;
-    const placeholerValue = isFocused || hasAccessoryView ? placeholder : null;
+    const placeholerValue =
+      isFocused || hasAccessoryView ? placeholder || mask : null;
 
     const validityIcon = valid ? (
       <ValidIcon />
@@ -210,7 +220,7 @@ class BpkTextInput extends Component<Props, State> {
           <Animated.View style={animatedInputStyle}>
             <TextInput
               editable={editable}
-              value={value || ''}
+              value={mask ? this.tinymask.mask(value) : value || ''}
               style={styles.input}
               onFocus={this.onFocus}
               onBlur={this.onBlur}

diff --git a/...ges/react-native-bpk-component-text-input/src/__snapshots__/BpkTextInput-RTL-test.js.snap b/...ges/react-native-bpk-component-text-input/src/__snapshots__/BpkTextInput-RTL-test.js.snap
@@ -769,6 +769,160 @@ exports[`RTL BpkTextInput should render correctly with inputRef set 1`] = `
 </View>
 `;
 
+exports[`RTL BpkTextInput should render correctly with mask="99/99" 1`] = `
+<View
+  style={
+    Array [
+      undefined,
+      null,
+    ]
+  }
+>
+  <View
+    style={
+      Object {
+        "flexDirection": "row",
+        "paddingTop": 18,
+      }
+    }
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      collapsable={undefined}
+      ellipsizeMode="tail"
+      style={
+        Object {
+          "color": "rgba(129, 123, 143, 1)",
+          "fontFamily": "System",
+          "fontSize": 13,
+          "fontWeight": "400",
+          "lineHeight": 18,
+          "position": "absolute",
+          "top": 0,
+        }
+      }
+    >
+      Name
+    </Text>
+    <View
+      collapsable={undefined}
+      style={
+        Object {
+          "alignItems": "center",
+          "borderBottomColor": "rgba(230, 228, 235, 1)",
+          "borderBottomWidth": 1,
+          "flex": 1,
+          "flexDirection": "row",
+        }
+      }
+    >
+      <TextInput
+        allowFontScaling={true}
+        clearButtonMode="while-editing"
+        editable={true}
+        onBlur={[Function]}
+        onFocus={[Function]}
+        placeholder={null}
+        style={
+          Object {
+            "borderBottomWidth": 0,
+            "color": "rgb(82, 76, 97)",
+            "flex": 1,
+            "fontSize": 15,
+            "fontWeight": "400",
+            "lineHeight": 20,
+            "minHeight": 28,
+            "paddingHorizontal": 0,
+            "paddingVertical": 4,
+            "textAlign": "right",
+          }
+        }
+        underlineColorAndroid="transparent"
+        value="12/34"
+      />
+    </View>
+  </View>
+</View>
+`;
+
+exports[`RTL BpkTextInput should render correctly with mask="9999-9999-9999-9999" 1`] = `
+<View
+  style={
+    Array [
+      undefined,
+      null,
+    ]
+  }
+>
+  <View
+    style={
+      Object {
+        "flexDirection": "row",
+        "paddingTop": 18,
+      }
+    }
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      collapsable={undefined}
+      ellipsizeMode="tail"
+      style={
+        Object {
+          "color": "rgba(129, 123, 143, 1)",
+          "fontFamily": "System",
+          "fontSize": 13,
+          "fontWeight": "400",
+          "lineHeight": 18,
+          "position": "absolute",
+          "top": 0,
+        }
+      }
+    >
+      Name
+    </Text>
+    <View
+      collapsable={undefined}
+      style={
+        Object {
+          "alignItems": "center",
+          "borderBottomColor": "rgba(230, 228, 235, 1)",
+          "borderBottomWidth": 1,
+          "flex": 1,
+          "flexDirection": "row",
+        }
+      }
+    >
+      <TextInput
+        allowFontScaling={true}
+        clearButtonMode="while-editing"
+        editable={true}
+        onBlur={[Function]}
+        onFocus={[Function]}
+        placeholder={null}
+        style={
+          Object {
+            "borderBottomWidth": 0,
+            "color": "rgb(82, 76, 97)",
+            "flex": 1,
+            "fontSize": 15,
+            "fontWeight": "400",
+            "lineHeight": 20,
+            "minHeight": 28,
+            "paddingHorizontal": 0,
+            "paddingVertical": 4,
+            "textAlign": "right",
+          }
+        }
+        underlineColorAndroid="transparent"
+        value="1234-1234-1234-1234"
+      />
+    </View>
+  </View>
+</View>
+`;
+
 exports[`RTL BpkTextInput should render correctly with valid 1`] = `
 <View
   style={