Create a new component - ExpandableInput (#1484)

* Create a new component - ExpandableInput

* add generatedTypes

* PR review fixes

* Rename ExpandableInput to ExpanableOverlay

Author: ethanshar

demo/src/screens/MenuStructure.js

@@ -157,6 +157,7 @@ export const navigationData = {
     screens: [
       {title: 'Native TouchableOpacity', tags: 'touchable native', screen: 'unicorn.incubator.TouchableOpacityScreen'},
       {title: '(New) TextField', tags: 'text field input', screen: 'unicorn.components.IncubatorTextFieldScreen'},
+      {title: 'ExpandableOverlay', tags: 'text field expandable input picker', screen: 'unicorn.components.IncubatorExpandableOverlayScreen'},
       {title: 'WheelPicker (Incubator)', tags: 'wheel picker spinner experimental', screen: 'unicorn.incubator.WheelPickerScreen'},
       {title: 'Pan View', tags: 'pan swipe drag', screen: 'unicorn.incubator.PanViewScreen'}
     ]

demo/src/screens/incubatorScreens/IncubatorExpandableOverlayScreen.tsx

@@ -0,0 +1,143 @@
+import React, {Component} from 'react';
+import {StyleSheet, ScrollView} from 'react-native';
+import {Colors, View, Text, Incubator, TouchableOpacity} from 'react-native-ui-lib'; //eslint-disable-line
+import _ from 'lodash';
+
+const COLOR_OPTIONS: {[key: string]: string} = {
+  red: Colors.red30,
+  green: Colors.green30,
+  yellow: Colors.yellow30,
+  blue: Colors.blue30
+};
+
+export default class TextFieldScreen extends Component {
+  expandableInputRef = React.createRef();
+  expandablePickerRef = React.createRef();
+
+  state = {
+    textFieldValueDraft: '',
+    textFieldValue: '',
+    selectedColor: 'red'
+  };
+
+  updateText = (value: string) => this.setState({textFieldValueDraft: value});
+
+  onDone = () => {
+    this.setState({textFieldValue: this.state.textFieldValueDraft});
+    this.expandableInputRef.current.closeExpandable();
+  };
+  onCancel = () => {
+    this.setState({textFieldValueDraft: this.state.textFieldValue});
+    this.expandableInputRef.current.closeExpandable();
+  };
+
+  onPickItem = ({customValue: color}: {customValue: string}) => {
+    this.setState({selectedColor: color});
+    this.expandablePickerRef.current.closeExpandable();
+  };
+
+  renderInputModal = () => {
+    const {textFieldValueDraft} = this.state;
+    return (
+      <>
+        <View bg-white br20 padding-s4>
+          <Incubator.TextField
+            autoFocus
+            preset={null}
+            value={textFieldValueDraft}
+            multiline
+            placeholder="Enter text"
+            containerStyle={{minHeight: 300}}
+            onChangeText={this.updateText}
+          />
+        </View>
+      </>
+    );
+  };
+
+  renderColorRow = (colorKey: string) => {
+    return (
+      <View row centerV height={48}>
+        <View width={20} height={20} br100 backgroundColor={COLOR_OPTIONS[colorKey]}/>
+        <Text marginL-s2 body style={styles.colorRowText}>
+          {colorKey}
+        </Text>
+      </View>
+    );
+  };
+
+  renderPickerContent = () => {
+    return (
+      <View bg-white br20 padding-s3 paddingB-60>
+        {_.map(COLOR_OPTIONS, (_color, key) => {
+          return (
+            <TouchableOpacity key={key} customValue={key} onPress={this.onPickItem}>
+              {this.renderColorRow(key)}
+            </TouchableOpacity>
+          );
+        })}
+      </View>
+    );
+  };
+
+  renderExpandableFieldExample() {
+    const {textFieldValue} = this.state;
+    return (
+      <>
+        <Text h3 marginB-s4 primary>
+          Expandable TextField
+        </Text>
+        <Incubator.ExpandableOverlay
+          ref={this.expandableInputRef}
+          modalProps={{animationType: 'slide'}}
+          expandableContent={this.renderInputModal()}
+          showTopBar
+          topBarProps={{title: 'Edit Input', doneLabel: 'Done', onCancel: this.onCancel, onDone: this.onDone}}
+          dialogProps={{bottom: true}}
+        >
+          <Incubator.TextField placeholder="Expandable input" value={textFieldValue}/>
+        </Incubator.ExpandableOverlay>
+      </>
+    );
+  }
+
+  renderExpandablePickerExample() {
+    const {selectedColor} = this.state;
+    return (
+      <>
+        <Text h3 marginB-s4 primary>
+          Expandable Picker
+        </Text>
+        <Incubator.ExpandableOverlay
+          ref={this.expandablePickerRef}
+          useDialog
+          expandableContent={this.renderPickerContent()}
+          dialogProps={{bottom: true}}
+        >
+          {this.renderColorRow(selectedColor)}
+        </Incubator.ExpandableOverlay>
+      </>
+    );
+  }
+
+  render() {
+    return (
+      <ScrollView keyboardShouldPersistTaps="always">
+        <View padding-page>
+          <Text h2 marginB-s5>
+            ExpandableOverlay
+          </Text>
+
+          {this.renderExpandableFieldExample()}
+          {this.renderExpandablePickerExample()}
+        </View>
+      </ScrollView>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  colorRowText: {
+    textTransform: 'capitalize'
+  }
+});

demo/src/screens/incubatorScreens/index.js

@@ -3,6 +3,7 @@ import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
 export function registerScreens(registrar) {
   registrar('unicorn.incubator.TouchableOpacityScreen', () =>
     gestureHandlerRootHOC(require('./TouchableOpacityScreen').default));
+  registrar('unicorn.components.IncubatorExpandableOverlayScreen', () => require('./IncubatorExpandableOverlayScreen').default);
   registrar('unicorn.components.IncubatorTextFieldScreen', () => require('./IncubatorTextFieldScreen').default);
   registrar('unicorn.incubator.WheelPickerScreen', () => gestureHandlerRootHOC(require('./WheelPickerScreen').default));
   registrar('unicorn.incubator.PanViewScreen', () => require('./PanViewScreen').default);

generatedTypes/src/incubator/TextField/index.d.ts

@@ -68,7 +68,7 @@ export declare type TextFieldProps = MarginModifiers & PaddingModifiers & Typogr
     /**
      * Predefined preset to use for styling the field
      */
-    preset?: 'default' | undefined;
+    preset?: 'default' | null;
 };
 export declare type InternalTextFieldProps = TextFieldProps & BaseComponentInjectedProps & ForwardRefInjectedProps;
 interface StaticMembers {

generatedTypes/src/incubator/expandableOverlay/index.d.ts

@@ -0,0 +1,63 @@
+import React, { PropsWithChildren } from 'react';
+import { TouchableOpacityProps } from '../../components/touchableOpacity';
+import { ModalProps, ModalTopBarProps } from '../../components/modal';
+import { DialogProps } from '../../components/dialog';
+export declare type ExpandableOverlayProps = TouchableOpacityProps & PropsWithChildren<{
+    /**
+     * The content to render inside the expandable modal/dialog
+     */
+    expandableContent?: React.ReactElement;
+    /**
+     * Whether to use a dialog as expandable container (by default the container will be a full screen modal)
+     */
+    useDialog?: boolean;
+    /**
+     * The props to pass to the modal expandable container
+     */
+    modalProps?: ModalProps;
+    /**
+     * The props to pass to the dialog expandable container
+     */
+    dialogProps?: DialogProps;
+    /**
+     * Whether to render a modal top bar (relevant only for modal)
+     */
+    showTopBar?: boolean;
+    /**
+     * The modal top bar props to pass on
+     */
+    topBarProps?: ModalTopBarProps;
+}>;
+interface ExpandableOverlayMethods {
+    openExpandable: () => void;
+    closeExpandable: () => void;
+}
+declare const _default: React.ForwardRefExoticComponent<TouchableOpacityProps & {
+    /**
+     * The content to render inside the expandable modal/dialog
+     */
+    expandableContent?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
+    /**
+     * Whether to use a dialog as expandable container (by default the container will be a full screen modal)
+     */
+    useDialog?: boolean | undefined;
+    /**
+     * The props to pass to the modal expandable container
+     */
+    modalProps?: ModalProps | undefined;
+    /**
+     * The props to pass to the dialog expandable container
+     */
+    dialogProps?: DialogProps | undefined;
+    /**
+     * Whether to render a modal top bar (relevant only for modal)
+     */
+    showTopBar?: boolean | undefined;
+    /**
+     * The modal top bar props to pass on
+     */
+    topBarProps?: ModalTopBarProps | undefined;
+} & {
+    children?: React.ReactNode;
+} & React.RefAttributes<ExpandableOverlayMethods>>;
+export default _default;

generatedTypes/src/incubator/index.d.ts

@@ -1,3 +1,4 @@
+export { default as ExpandableOverlay } from './expandableOverlay';
 export { default as TabController } from './TabController';
 export { default as TextField, TextFieldProps, FieldContextType } from './TextField';
 export { default as TouchableOpacity, TouchableOpacityProps } from './TouchableOpacity';

src/incubator/TextField/index.tsx

@@ -92,7 +92,7 @@ export type TextFieldProps = MarginModifiers &
     /**
      * Predefined preset to use for styling the field
      */
-    preset?: 'default' | undefined;
+    preset?: 'default' | null;
   };
 
 export type InternalTextFieldProps = TextFieldProps &

src/incubator/expandableOverlay/index.tsx

@@ -0,0 +1,81 @@
+import React, {useCallback, useState, forwardRef, PropsWithChildren, useImperativeHandle} from 'react';
+
+import TouchableOpacity, {TouchableOpacityProps} from '../../components/touchableOpacity';
+import View from '../../components/view';
+import Modal, {ModalProps, ModalTopBarProps} from '../../components/modal';
+import Dialog, {DialogProps} from '../../components/dialog';
+
+export type ExpandableOverlayProps = TouchableOpacityProps &
+  PropsWithChildren<{
+    /**
+     * The content to render inside the expandable modal/dialog
+     */
+    expandableContent?: React.ReactElement;
+    /**
+     * Whether to use a dialog as expandable container (by default the container will be a full screen modal)
+     */
+    useDialog?: boolean;
+    /**
+     * The props to pass to the modal expandable container
+     */
+    modalProps?: ModalProps;
+    /**
+     * The props to pass to the dialog expandable container
+     */
+    dialogProps?: DialogProps;
+    /**
+     * Whether to render a modal top bar (relevant only for modal)
+     */
+    showTopBar?: boolean;
+    /**
+     * The modal top bar props to pass on
+     */
+    topBarProps?: ModalTopBarProps;
+  }>;
+
+interface ExpandableOverlayMethods {
+  openExpandable: () => void;
+  closeExpandable: () => void;
+}
+
+const ExpandableOverlay = (props: ExpandableOverlayProps, ref: any) => {
+  const {children, expandableContent, useDialog, modalProps, dialogProps, showTopBar, topBarProps, ...others} = props;
+  const [expandableVisible, setExpandableVisible] = useState(false);
+  const showExpandable = useCallback(() => setExpandableVisible(true), []);
+  const hideExpandable = useCallback(() => setExpandableVisible(false), []);
+
+  useImperativeHandle(ref, () => ({
+    openExpandable: () => {
+      showExpandable();
+    },
+    closeExpandable: () => {
+      hideExpandable();
+    }
+  }));
+
+  const renderModal = () => {
+    return (
+      <Modal {...modalProps} visible={expandableVisible} onDismiss={hideExpandable}>
+        {showTopBar && <Modal.TopBar onDone={hideExpandable} {...topBarProps}/>}
+        {expandableContent}
+      </Modal>
+    );
+  };
+
+  const renderDialog = () => {
+    return (
+      <Dialog {...dialogProps} visible={expandableVisible} onDismiss={hideExpandable}>
+        {expandableContent}
+      </Dialog>
+    );
+  };
+
+  return (
+    <TouchableOpacity {...others} onPress={showExpandable}>
+      <View pointerEvents="none">{children}</View>
+      {useDialog ? renderDialog() : renderModal()}
+    </TouchableOpacity>
+  );
+};
+
+export default forwardRef<ExpandableOverlayMethods, ExpandableOverlayProps>(ExpandableOverlay);

src/incubator/index.ts

@@ -1,3 +1,4 @@
+export {default as ExpandableOverlay} from './expandableOverlay';
 // @ts-ignore
 export {default as TabController} from './TabController';
 export {default as TextField, TextFieldProps, FieldContextType} from './TextField';