Infra/custom datetime picker input (#1127)

* Added support for toggle from custom input

* added datetime-picker custom input demo

* added relevant prop

* Made a better demo

* rename to renderInput

* return the demo value back

* Added scroll view as a wrapping component for visibility

Co-authored-by: Ethan Sharabi <[email protected]>

Author: mendyEdri

demo/src/screens/componentScreens/DateTimePickerScreen.js

@@ -1,10 +1,36 @@
 import React, {Component} from 'react';
-import {DateTimePicker, View, Text} from 'react-native-ui-lib'; // eslint-disable-line
+import {ScrollView} from 'react-native';
+import {DateTimePicker, Text, TouchableOpacity, Colors} from 'react-native-ui-lib'; // eslint-disable-line
 
 export default class DateTimePickerScreen extends Component {
+
+  getCustomInputValue = value => {
+    if (!value) {
+      return 'Default';
+    }
+    return value.includes(new Date().getFullYear() + 1) ? 'Next Year' : value;
+  };
+
+  renderCustomInput = (props, toggle) => {
+    const {value} = props;
+    return (
+      <TouchableOpacity
+        flex
+        row
+        spread
+        onPress={() => {
+          toggle(true);
+        }}
+      >
+        <Text>Valid from</Text>
+        <Text absR color={Colors.primary} text80BO>{this.getCustomInputValue(value)}</Text>
+      </TouchableOpacity>
+    );
+  };
+
   render() {
     return (
-      <View flex padding-s5>
+      <ScrollView style={{padding: 14}}>
         <Text text40>Date Time Picker</Text>
         <DateTimePicker
           containerStyle={{marginVertical: 20}}
@@ -37,7 +63,18 @@ export default class DateTimePickerScreen extends Component {
           placeholder={'Select time'}
           value={new Date('2015-03-25T12:00:00-06:30')}
         />
-      </View>
+        <Text text60R marginT-40>
+          Custom Input
+        </Text>
+        <DateTimePicker
+          containerStyle={{marginVertical: 20}}
+          title={'Date'}
+          placeholder={'Select a date'}
+          renderExpandableInput={this.renderCustomInput}
+          dateFormat={'MMM D, YYYY'}
+          // value={new Date('2015-03-25T12:00:00-06:30')}
+        />
+      </ScrollView>
     );
   }
 }

src/components/dateTimePicker/index.js

@@ -93,7 +93,11 @@ class DateTimePicker extends Component {
     /**
      * style to apply to the iOS dialog header
      */
-    headerStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.number])
+    headerStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.number]),
+    /**
+     * Render custom input
+     */
+    renderInput: PropTypes.elementType
   };
 
   static defaultProps = {

src/components/textField/index.js

@@ -559,7 +559,7 @@ export default class TextField extends BaseInput {
     const {renderExpandableInput, testID} = this.getThemeProps();
 
     if (_.isFunction(renderExpandableInput)) {
-      return renderExpandableInput(this.getThemeProps());
+      return renderExpandableInput(this.getThemeProps(), this.toggleExpandableModal);
     }
 
     return (