Infra/picker expandable overlay

demo/src/screens/componentScreens/PickerScreen.js

@@ -171,7 +171,7 @@ export default class PickerScreen extends Component {
             onChange={filter => this.setState({filter})}
             renderPicker={({label}) => {
               return (
-                <View row center>
+                <View row>
                   <Image style={{marginRight: 1, height: 16, resizeMode: 'contain'}} source={tagIcon}/>
                   <Text grey10 text80>
                     {label} Posts
@@ -194,7 +194,7 @@ export default class PickerScreen extends Component {
             getItemValue={contact => contact.name}
             renderPicker={contact => {
               return (
-                <View row center>
+                <View row>
                   <Avatar size={30} source={{uri: contact.thumbnail}}/>
                   <Text text70 marginL-10>
                     {contact.name}

demo/src/screens/incubatorScreens/IncubatorExpandableOverlayScreen.tsx

@@ -89,11 +89,10 @@ export default class TextFieldScreen extends Component {
         </Text>
         <Incubator.ExpandableOverlay
           ref={this.expandableInputRef}
-          modalProps={{animationType: 'slide'}}
+          modalProps={{animationType: 'slide', onDismiss: () => console.warn('Modal is dismissed')}}
           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>
@@ -112,7 +111,7 @@ export default class TextFieldScreen extends Component {
           ref={this.expandablePickerRef}
           useDialog
           expandableContent={this.renderPickerContent()}
-          dialogProps={{bottom: true}}
+          dialogProps={{bottom: true, onDismiss: () => console.warn('Dialog is dismissed')}}
         >
           {this.renderColorRow(selectedColor)}
         </Incubator.ExpandableOverlay>

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

@@ -2,6 +2,12 @@ import React, { PropsWithChildren } from 'react';
 import { TouchableOpacityProps } from '../../components/touchableOpacity';
 import { ModalProps, ModalTopBarProps } from '../../components/modal';
 import { DialogProps } from '../../components/dialog';
+export interface RenderCustomOverlayProps {
+    visible: boolean;
+    openExpandable: () => void;
+    closeExpandable: () => void;
+    toggleExpandable: () => void;
+}
 export declare type ExpandableOverlayProps = TouchableOpacityProps & PropsWithChildren<{
     /**
      * The content to render inside the expandable modal/dialog
@@ -27,6 +33,10 @@ export declare type ExpandableOverlayProps = TouchableOpacityProps & PropsWithCh
      * The modal top bar props to pass on
      */
     topBarProps?: ModalTopBarProps;
+    /**
+     * A custom overlay to render instead of Modal or Dialog components
+     */
+    renderCustomOverlay?: (props: RenderCustomOverlayProps) => React.ReactElement | undefined;
 }>;
 interface ExpandableOverlayMethods {
     openExpandable: () => void;
@@ -57,6 +67,10 @@ declare const _default: React.ForwardRefExoticComponent<TouchableOpacityProps &
      * The modal top bar props to pass on
      */
     topBarProps?: ModalTopBarProps | undefined;
+    /**
+     * A custom overlay to render instead of Modal or Dialog components
+     */
+    renderCustomOverlay?: ((props: RenderCustomOverlayProps) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined) | undefined;
 } & {
     children?: React.ReactNode;
 } & React.RefAttributes<ExpandableOverlayMethods>>;

src/components/picker/PickerModal.js

@@ -1,8 +1,10 @@
+// TODO: This should be renamed to PickerOverlayContent cause it's
+// not responsible for rendering the Modal anymore 
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React from 'react';
 import {StyleSheet, FlatList, TextInput} from 'react-native';
-import {Constants} from '../../helpers';
+// import {Constants} from '../../helpers';
 import {Typography, Colors} from '../../style';
 import Assets from '../../assets';
 import {BaseComponent} from '../../commons';
@@ -80,17 +82,18 @@ class PickerModal extends BaseComponent {
   };
 
   render() {
-    const {visible, enableModalBlur, topBarProps, listProps, children, onShow, pickerModalProps} = this.props;
+    const {/* visible, enableModalBlur,  */topBarProps, listProps, children/* , onShow, pickerModalProps */} = this.props;
     return (
-      <Modal
-        animationType={'slide'}
-        transparent={Constants.isIOS && enableModalBlur}
-        enableModalBlur={Constants.isIOS && enableModalBlur}
-        visible={visible}
-        onRequestClose={topBarProps.onCancel}
-        onShow={onShow}
-        {...pickerModalProps}
-      >
+      <>
+        {/* <Modal
+         animationType={'slide'}
+         transparent={Constants.isIOS && enableModalBlur}
+         enableModalBlur={Constants.isIOS && enableModalBlur}
+         visible={visible}
+         onRequestClose={topBarProps.onCancel}
+         onShow={onShow}
+         {...pickerModalProps}
+       > */}
         <Modal.TopBar {...topBarProps}/>
         {this.renderSearchInput()}
 
@@ -100,7 +103,8 @@ class PickerModal extends BaseComponent {
           keyExtractor={this.keyExtractor}
           {...listProps}
         />
-      </Modal>
+      </>
+      // </Modal>
     );
   }
 }

src/components/picker/__tests__/index.spec.js

@@ -22,16 +22,4 @@ describe('Picker', () => {
       expect(uut.getLabelValueText()).toEqual(`${countries[2].label}, ${countries[4].label}`);
     });
   });
-
-  describe('handlePickerOnPress', () => {
-    it('should get label out of an array of items', () => {
-      const onPress = jest.fn(() => {});
-      const uut = new Picker({value: countries[0], onPress});
-      uut.toggleExpandableModal = jest.fn(uut.toggleExpandableModal);
-
-      uut.handlePickerOnPress();
-      expect(onPress).toHaveBeenCalled();
-      expect(uut.toggleExpandableModal).toHaveBeenCalled();
-    });
-  });
 });