improve TextField example screen (#618)

* improve TextField example screen

* move validation and error examples to InputValidation screen

Author: ethanshar

demo/src/navigation.js

@@ -0,0 +1,39 @@
+import {Navigation} from 'react-native-navigation';
+
+export const pushScreen = ({componentId, name, title, passProps}) => {
+  Navigation.push(componentId, {
+    component: {
+      name,
+      passProps,
+      options: {
+        topBar: {
+          title: {
+            text: title
+          }
+        }
+      }
+    }
+  });
+};
+
+export const showModal = ({name, title, passProps}) => {
+  Navigation.showModal({
+    stack: {
+      children: [
+        {
+          component: {
+            name,
+            passProps,
+            options: {
+              topBar: {
+                title: {
+                  text: title
+                }
+              }
+            }
+          }
+        }
+      ]
+    }
+  });
+};

demo/src/screens/MenuStructure.js

@@ -52,7 +52,7 @@ export const navigationData = {
       {title: 'Checkbox', tags: 'checkbox toggle controls', screen: 'unicorn.components.CheckboxScreen'},
       {title: 'Color Picker', tags: 'color picker control', screen: 'unicorn.components.ColorPickerScreen'},
       {title: 'Color Swatch', tags: 'color swatch and palette', screen: 'unicorn.components.ColorSwatchScreen'},
-      {title: 'TextField', tags: 'text input field form', screen: 'unicorn.components.InputsScreen'},
+      {title: 'TextField', tags: 'text input field form', screen: 'unicorn.components.TextFieldScreen'},
       {title: 'Picker', tags: 'picker form', screen: 'unicorn.components.PickerScreen'},
       {title: 'DateTimePicker', tags: 'date time picker form', screen: 'unicorn.components.DateTimePickerScreen'},
       {title: 'RadioButton', tags: 'radio button group controls', screen: 'unicorn.components.RadioButtonScreen'},

demo/src/screens/componentScreens/TextFieldScreen/CustomInputsScreen.js

@@ -0,0 +1,54 @@
+import React, {Component} from 'react';
+import {StyleSheet, ScrollView} from 'react-native';
+import {View, Text, TextField, Colors, Spacings} from 'react-native-ui-lib';
+import {Navigation} from 'react-native-navigation';
+
+class CustomInputsScreen extends Component {
+  state = {};
+  render() {
+    return (
+      <ScrollView>
+        <View padding-s5>
+          <Text text40 marginB-s5>
+            Custom Inputs
+          </Text>
+          <TextField title="Default" placeholder="Enter Text" enableErrors={false} containerStyle={styles.input}/>
+          <TextField
+            title="Square"
+            placeholder="Enter Text"
+            hideUnderline
+            containerStyle={styles.input}
+            style={{padding: 10, borderWidth: 1, borderColor: Colors.grey50, borderRadius: 4}}
+            enableErrors={false}
+          />
+          <TextField
+            placeholder="Enter text"
+            title="Rounded"
+            text70
+            containerStyle={styles.input}
+            style={{
+              backgroundColor: Colors.grey60,
+              height: '100%',
+              paddingHorizontal: 15,
+              paddingVertical: 8,
+              borderRadius: 20
+            }}
+            hideUnderline
+            enableErrors={false}
+            titleStyle={{marginLeft: 10}}
+          />
+        </View>
+      </ScrollView>
+    );
+  }
+}
+
+export default CustomInputsScreen;
+
+Navigation.registerComponent('unicorn.components.CustomInputsScreen', () => CustomInputsScreen);
+
+const styles = StyleSheet.create({
+  input: {
+    marginBottom: Spacings.s4
+  }
+});

demo/src/screens/componentScreens/TextFieldScreen/InputValidationsScreen.js

@@ -0,0 +1,108 @@
+import React, {Component} from 'react';
+import {StyleSheet, ScrollView} from 'react-native';
+import {View, Text, TextField, Button, Spacings} from 'react-native-ui-lib';
+import {Navigation} from 'react-native-navigation';
+import {KeyboardAwareInsetsView} from 'react-native-keyboard-tracking-view';
+
+class InputValidationsScreen extends Component {
+  state = {
+    useTopErrors: false
+  };
+
+  toggleTopErrors = () => {
+    this.setState({useTopErrors: !this.state.useTopErrors});
+  };
+
+  render() {
+    const {useTopErrors} = this.state;
+    return (
+      <View flex>
+        <View paddingH-s5 paddingT-s5 left/>
+        <ScrollView>
+          <View padding-s5>
+            <View row centerV spread marginB-s5>
+              <Text text40 >
+                Validations
+              </Text>
+              <Button
+                size="small"
+                label={`TopError : ${useTopErrors ? 'ON' : 'OFF'}`}
+                outline={!useTopErrors}
+                onPress={this.toggleTopErrors}
+              />
+            </View>
+            <TextField
+              title="Required Field"
+              containerStyle={styles.input}
+              placeholder="Enter Text"
+              validate="required"
+              errorMessage="This is a mandatory field "
+              useTopErrors={useTopErrors}
+            />
+            <TextField
+              title="Email"
+              containerStyle={styles.input}
+              placeholder="Enter valid email"
+              validate="email"
+              errorMessage="email is invalid"
+              useTopErrors={useTopErrors}
+              validateOnChange
+            />
+            <TextField
+              title="Price"
+              containerStyle={styles.input}
+              placeholder="Enter price"
+              validate="price"
+              errorMessage="Price is invalid"
+              useTopErrors={useTopErrors}
+            />
+            <TextField
+              title="Number"
+              containerStyle={styles.input}
+              placeholder="Enter a Number"
+              validate="number"
+              errorMessage="Number is invalid"
+              useTopErrors={useTopErrors}
+            />
+            <TextField
+              title="URL"
+              containerStyle={styles.input}
+              placeholder="Enter a url"
+              validate="url"
+              errorMessage="Url is invalid"
+              useTopErrors={useTopErrors}
+            />
+
+            <TextField
+              title="Required Email (2 validations)"
+              containerStyle={styles.input}
+              placeholder="Enter an email"
+              validate={['required', 'email']}
+              errorMessage={['This field is required', 'Email is invalid']}
+              useTopErrors={useTopErrors}
+            />
+            <TextField
+              title="Custom Validation"
+              containerStyle={styles.input}
+              placeholder="Enter a text that starts with B"
+              validate={value => /^B.*/.test(value)}
+              errorMessage={'Text does not start with "B"'}
+              useTopErrors={useTopErrors}
+            />
+          </View>
+          <KeyboardAwareInsetsView/>
+        </ScrollView>
+      </View>
+    );
+  }
+}
+
+export default InputValidationsScreen;
+
+Navigation.registerComponent('unicorn.components.InputValidationsScreen', () => InputValidationsScreen);
+
+const styles = StyleSheet.create({
+  input: {
+    marginBottom: Spacings.s2
+  }
+});

demo/src/screens/componentScreens/InputsScreen.js renamed to demo/src/screens/componentScreens/TextFieldScreen/InputsScreen.js

@@ -2,15 +2,15 @@ import React, {Component} from 'react';
 import {ScrollView, StyleSheet, Alert} from 'react-native';
 import {Colors, Typography, View, Text, TextField, TextArea, Modal, Button} from 'react-native-ui-lib'; //eslint-disable-line
 import {KeyboardAwareInsetsView} from 'react-native-keyboard-tracking-view';
+import {Navigation} from 'react-native-navigation';
 
-
-const richText = require('../../assets/icons/richText.png');
-const dropDown = require('../../assets/icons/chevronDown.png');
-const star = require('../../assets/icons/star.png');
+const richText = require('../../../assets/icons/richText.png');
+const dropDown = require('../../../assets/icons/chevronDown.png');
+const star = require('../../../assets/icons/star.png');
 const LONG_TEXT =
   'Concept, edition and design direction for the editorial piece “La Forma Bruta” by the photographer' +
   'Martín Bollati. In this piece';
-const transformPrice = (value) => {
+const transformPrice = value => {
   let cleanValue;
   let priceText = '';
   if (value) {
@@ -27,12 +27,11 @@ export default class InputsScreen extends Component {
 
     this.state = {
       error: '',
-      topError: false,
       customExpandableValue: 'Custom Expandable'
     };
   }
 
-  onChangeText = (text) => {
+  onChangeText = text => {
     let message = '';
     if (text === '') {
       message = 'This field is mandatory';
@@ -41,22 +40,17 @@ export default class InputsScreen extends Component {
       message = 'Please enter a valid text';
     }
     this.setState({error: message});
-  }
-
-  onButtonPressed = () => {
-    const {topError} = this.state;
-    this.setState({topError: !topError});
-  }
+  };
 
   onPressInfo = () => {
     Alert.alert('Info button pressed');
-  }
+  };
 
   onPress = () => {
     this.setState({customExpandableValue: 'New Value'}, () => {
       this.input.toggleExpandableModal(false);
     });
-  }
+  };
 
   renderExpandable = () => {
     return (
@@ -65,20 +59,13 @@ export default class InputsScreen extends Component {
           <Text marginB-20 text50>
             Do Whatever you want here
           </Text>
-          <Button
-            label="Close Me"
-            onPress={this.onPress}
-          />
+          <Button label="Close Me" onPress={this.onPress}/>
         </View>
       </Modal>
     );
-  }
+  };
 
   render() {
-    const {topError} = this.state;
-    const state = topError ? 'On' : 'Off';
-    const btnLabel = `Top Errors: ${state}`;
-    
     return (
       <View flex>
         <ScrollView
@@ -90,23 +77,13 @@ export default class InputsScreen extends Component {
           <Text style={{marginBottom: 20, marginRight: 20}} text40>
             Inputs
           </Text>
-          <Button
-            style={{height: 28, alignSelf: 'flex-start', marginBottom: 20}}
-            outline={!topError}
-            size="small"
-            label={btnLabel}
-            onPress={this.onButtonPressed}
-          />
 
           <TextField
             text70
             containerStyle={{marginBottom: INPUT_SPACING}}
             floatingPlaceholder
-            placeholder="FloatingPlaceholder & validator"
+            placeholder="FloatingPlaceholder"
             onChangeText={this.onChangeText}
-            validate={'required'}
-            errorMessage={'Required field!'}
-            useTopErrors={this.state.topError}
             floatOnFocus
           />
 
@@ -130,8 +107,6 @@ export default class InputsScreen extends Component {
             placeholder="With helperText"
             helperText="this is an helper text"
             onChangeText={this.onChangeText}
-            error={this.state.error}
-            useTopErrors={this.state.topError}
           />
 
           <TextField
@@ -151,8 +126,6 @@ export default class InputsScreen extends Component {
             maxLength={3}
             showCharacterCounter
             onChangeText={this.onChangeText}
-            error={this.state.error}
-            useTopErrors={this.state.topError}
           />
 
           <TextField
@@ -162,11 +135,9 @@ export default class InputsScreen extends Component {
             titleStyle={{fontSize: Typography.text70.fontSize}}
             placeholder="Multiline & titleStyle"
             multiline
-            maxLength={32}
+            maxLength={150}
             showCharacterCounter
             onChangeText={this.onChangeText}
-            error={this.state.error}
-            useTopErrors={this.state.topError}
             autoCapitalize="words"
           />
 
@@ -189,7 +160,6 @@ export default class InputsScreen extends Component {
             placeholder="Underline colors & error"
             onChangeText={this.onChangeText}
             error={this.state.error}
-            useTopErrors={this.state.topError}
             underlineColor={{focus: Colors.purple50, error: Colors.yellow60}}
           />
 
@@ -213,7 +183,7 @@ export default class InputsScreen extends Component {
             containerStyle={{marginBottom: INPUT_SPACING}}
             placeholder="Share your story"
             value={
-              "Share Your Story exists to provide spaces to hear people's stories, in order to inspire us to" +
+              'Share Your Story exists to provide spaces to hear people\'s stories, in order to inspire us to' +
               'live better ones ourselves.'
             }
             multiline
@@ -262,7 +232,7 @@ export default class InputsScreen extends Component {
             multiline
             rightButtonProps={{iconSource: richText, onPress: this.onPressInfo, iconColor: Colors.red30}}
           />
-          
+
           <TextField
             text70
             containerStyle={{marginBottom: INPUT_SPACING}}
@@ -280,7 +250,9 @@ export default class InputsScreen extends Component {
             rightIconSource={dropDown}
           />
 
-          <Text dark10 marginB-5>Text Area</Text>
+          <Text dark10 marginB-5>
+            Text Area
+          </Text>
           <View
             style={{
               height: 150,
@@ -343,3 +315,5 @@ const styles = StyleSheet.create({
     marginVertical: 20
   }
 });
+
+Navigation.registerComponent('unicorn.components.InputsScreen', () => InputsScreen);