Support clearing MaskedInput and make it more responsive to touch (#1240)

Author: ethanshar

demo/src/screens/componentScreens/MaskedInputScreen.js

@@ -1,14 +1,15 @@
 import _ from 'lodash';
 import React, {Component} from 'react';
 import {ScrollView, StyleSheet} from 'react-native';
-import {Typography, View, Text, MaskedInput} from 'react-native-ui-lib'; //eslint-disable-line
+import {Typography, View, Text, MaskedInput, Button} from 'react-native-ui-lib'; //eslint-disable-line
 
 export default class MaskedInputScreen extends Component {
   constructor(props) {
     super(props);
 
     this.state = {
       error: '',
+      timeValue: '15'
     };
   }
 
@@ -18,6 +19,11 @@ export default class MaskedInputScreen extends Component {
     }, 500);
   }
 
+  clearInputs = () => {
+    this.minput.clear();
+    this.priceInput.clear();
+  };
+
   renderTimeText(value) {
     const paddedValue = _.padStart(value, 4, '0');
     const hours = paddedValue.substr(0, 2);
@@ -51,12 +57,11 @@ export default class MaskedInputScreen extends Component {
   }
 
   render() {
+    const {timeValue} = this.state;
+
     return (
       <View flex>
-        <ScrollView
-          contentContainerStyle={styles.container}
-          keyboardShouldPersistTaps='always'
-        >
+        <ScrollView contentContainerStyle={styles.container} keyboardShouldPersistTaps="always">
           <Text text40 marginB-20>
             Masked Inputs
           </Text>
@@ -69,16 +74,21 @@ export default class MaskedInputScreen extends Component {
             renderMaskedText={this.renderTimeText}
             keyboardType={'numeric'}
             maxLength={4}
-            value={'15'}
+            value={timeValue}
+            onChangeText={value => this.setState({timeValue: value})}
           />
 
           <Text text70 marginT-40>
             Price/Discount
           </Text>
           <MaskedInput
+            ref={r => (this.priceInput = r)}
             renderMaskedText={this.renderPrice}
             keyboardType={'numeric'}
           />
+          <View centerH marginT-100>
+            <Button label="Clear All" onPress={this.clearInputs}/>
+          </View>
         </ScrollView>
       </View>
     );
@@ -89,13 +99,13 @@ const styles = StyleSheet.create({
   container: {
     flexDirection: 'column',
     justifyContent: 'flex-start',
-    padding: 25,
+    padding: 25
   },
   title: {
-    ...Typography.text20,
+    ...Typography.text20
   },
   header: {
     ...Typography.text60,
-    marginVertical: 20,
-  },
+    marginVertical: 20
+  }
 });

src/components/maskedInput/index.js

@@ -6,6 +6,7 @@ import BaseInput from '../baseInput';
 import TextField from '../textField';
 import View from '../view';
 import Text from '../text';
+import TouchableOpacity from '../touchableOpacity';
 
 /**
  * @description: Mask Input to create custom looking inputs with custom formats
@@ -38,6 +39,11 @@ export default class MaskedInput extends BaseInput {
     this.keyboardDidHideListener.remove();
   }
 
+  clear() {
+    this.setState({value: ''});
+    this.input.clear();
+  }
+
   renderMaskedText() {
     const {renderMaskedText} = this.props;
     const {value} = this.state;
@@ -53,7 +59,7 @@ export default class MaskedInput extends BaseInput {
     const TextInputProps = TextField.extractOwnProps(this.props, ['containerStyle', 'style']);
 
     return (
-      <View style={containerStyle}>
+      <TouchableOpacity style={containerStyle} activeOpacity={1} onPress={() => this.input.focus()}>
         <TextField
           {...this.props}
           ref={r => (this.input = r)}
@@ -68,7 +74,7 @@ export default class MaskedInput extends BaseInput {
           onChangeText={this.onChangeText}
         />
         <View style={styles.maskedInputWrapper}>{this.renderMaskedText()}</View>
-      </View>
+      </TouchableOpacity>
     );
   }
 }