Feat/incubator dialog more props and fixes (wix#2251)

* Handle visible undefined

* Change value to correspond for the new name

* Support width and height in Dialog and a few more props in DialogHeader

* Add center to the Dialog style

* Better test for Header existence

* Allow migrating ActionSheet to Incubator.Dialog

* Allow Incubator.WheelPicker to be inside Incubator.Dialog

* Migrate a couple of screens to Incubator.Dialog

* Fix tests

* Review fixes

Author: M-i-k-e-l

demo/src/screens/componentScreens/ActionSheetScreen.tsx

@@ -64,6 +64,7 @@ export default class ActionSheetScreen extends Component {
           cancelButtonIndex={3}
           destructiveButtonIndex={0}
           useNativeIOS={false}
+          migrateDialog
           options={[
             {label: 'option 1', onPress: () => this.pickOption('option 1')},
             {label: 'option 2', onPress: () => this.pickOption('option 2')},
@@ -79,6 +80,7 @@ export default class ActionSheetScreen extends Component {
           message={'Message of action sheet'}
           cancelButtonIndex={3}
           destructiveButtonIndex={0}
+          migrateDialog
           options={[
             {label: 'option 1', onPress: () => this.pickOption('option 1'), iconSource: collectionsIcon},
             {label: 'option 2', onPress: () => this.pickOption('option 2'), iconSource: shareIcon},

demo/src/screens/componentScreens/ChipScreen.tsx

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import React, {Component} from 'react';
 import {Alert} from 'react-native';
-import {Chip, Colors, Spacings, Text, Typography, View, Dialog, WheelPickerDialog, Image} from 'react-native-ui-lib';
+import {Chip, Colors, Spacings, Text, Typography, View, Incubator, WheelPickerDialog, Image} from 'react-native-ui-lib';
 
 const avatarImage = {
   uri: 'https://randomuser.me/api/portraits/women/24.jpg'
@@ -72,9 +72,9 @@ export default class ChipScreen extends Component {
     const {showDialog} = this.state;
 
     return (
-      <Dialog visible={showDialog} useSafeArea bottom onDismiss={this.closeDialog}>
+      <Incubator.Dialog visible={showDialog} useSafeArea bottom onDismiss={this.closeDialog}>
         {this.renderContent()}
-      </Dialog>
+      </Incubator.Dialog>
     );
   };
 
@@ -90,7 +90,7 @@ export default class ChipScreen extends Component {
   render() {
     return (
       <View style={{padding: 20}}>
-        {this.state.showDialog && this.renderPickerDialog()}
+        {this.renderPickerDialog()}
         <Text marginB-20 text40 $textDefault>
           Chip
         </Text>

demo/src/screens/componentScreens/PickerScreen.tsx

@@ -1,11 +1,11 @@
 import _ from 'lodash';
 import React, {Component} from 'react';
-import {ScrollView} from 'react-native';
+import {ScrollView} from 'react-native-gesture-handler';
 import {
   View,
   Colors,
   Icon,
-  Dialog,
+  Incubator,
   Text,
   Picker,
   Avatar,
@@ -14,7 +14,6 @@ import {
   Typography,
   PickerProps,
   PickerMethods,
-  DialogProps,
   Button
 } from 'react-native-ui-lib'; //eslint-disable-line
 import contactsData from '../../data/conversations';
@@ -61,20 +60,11 @@ export default class PickerScreen extends Component {
     contact: 0
   };
 
-  dialogHeader: DialogProps['renderPannableHeader'] = props => {
-    const {title} = props;
-    return (
-      <Text margin-15 text60 $textDefault>
-        {title}
-      </Text>
-    );
-  };
-
   renderDialog: PickerProps['renderCustomModal'] = modalProps => {
     const {visible, children, toggleModal, onDone} = modalProps;
 
     return (
-      <Dialog
+      <Incubator.Dialog
         visible={visible}
         onDismiss={() => {
           onDone();
@@ -85,12 +75,11 @@ export default class PickerScreen extends Component {
         bottom
         useSafeArea
         containerStyle={{backgroundColor: Colors.$backgroundDefault}}
-        renderPannableHeader={this.dialogHeader}
-        panDirection={PanningProvider.Directions.DOWN}
-        pannableHeaderProps={{title: 'Custom modal'}}
+        direction={PanningProvider.Directions.DOWN}
+        headerProps={{title: 'Custom modal'}}
       >
         <ScrollView>{children}</ScrollView>
-      </Dialog>
+      </Incubator.Dialog>
     );
   };
 

demo/src/screens/incubatorScreens/WheelPickerScreen.tsx

@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import React, {useCallback, useState} from 'react';
-import {View, Text, Incubator, Colors, Typography, Button, Dialog} from 'react-native-ui-lib';
+import {View, Text, Incubator, Colors, Typography, Button} from 'react-native-ui-lib';
 
 const monthItems = _.map([
   'January',
@@ -88,9 +88,15 @@ export default () => {
       <View center marginT-40>
         <Text h3 marginB-20>Days</Text>
         <Button size="small" label={'Pick Days'} onPress={onPickDaysPress}/>
-        <Dialog width={'90%'} height={260} bottom visible={showDialog} onDismiss={onDialogDismissed}>
+        <Incubator.Dialog
+          width={'90%'}
+          bottom
+          visible={showDialog}
+          onDismiss={onDialogDismissed}
+          headerProps={{showKnob: false, showDivider: false}}
+        >
           <Incubator.WheelPicker initialValue={5} label={'Days'} items={dayItems}/>
-        </Dialog>
+        </Incubator.Dialog>
       </View>
     </View>
   );

jest-setup.js

@@ -16,7 +16,11 @@ jest.mock('react-native-reanimated', () => {
   return reactNativeReanimated;
 });
 global.__reanimatedWorkletInit = jest.fn();
-jest.mock('react-native-gesture-handler', () => {});
+jest.mock('react-native-gesture-handler',
+  () => ({
+    FlatList: require('react-native').FlatList
+  }),
+  {virtual: true});
 jest.mock('@react-native-picker/picker', () => ({Picker: {Item: {}}}));
 jest.mock('react-native', () => {
   const reactNative = jest.requireActual('react-native');

src/components/actionSheet/index.tsx

@@ -11,11 +11,17 @@ import Image from '../image';
 //@ts-ignore
 import ListItem from '../listItem';
 import PanningProvider from '../panningViews/panningProvider';
+import {Dialog as IncubatorDialog, DialogProps as IncubatorDialogProps} from '../../incubator';
+import {LogService} from '../../services';
 
 const VERTICAL_PADDING = 8;
 type ActionSheetOnOptionPress = (index: number) => void;
 
 type ActionSheetProps = {
+  /**
+   * Migrate to the Incubator.Dialog component
+   */
+  migrateDialog?: boolean;
   /**
    * Whether to show the action sheet or not
    */
@@ -76,6 +82,7 @@ type ActionSheetProps = {
    */
   renderAction?: (option: ButtonProps, index: number, onOptionPress: ActionSheetOnOptionPress) => JSX.Element;
   /**
+   * @deprecated
    * Called once the modal has been dismissed completely
    */
   onModalDismissed?: DialogProps['onDialogDismissed'];
@@ -89,7 +96,7 @@ type ActionSheetProps = {
   dialogProps?: Omit<
     DialogProps,
     'useSafeArea' | 'testID' | 'containerStyle' | 'visible' | 'onDismiss' | 'onDialogDismissed'
-  >;
+  > | IncubatorDialogProps;
   /**
    * testID for e2e tests
    */
@@ -213,7 +220,7 @@ class ActionSheet extends Component<ActionSheetProps> {
     );
   }
 
-  render() {
+  renderOldDialog() {
     const {useNativeIOS, visible, onDismiss, dialogStyle, onModalDismissed, testID, useSafeArea, dialogProps} =
       this.props;
 
@@ -239,6 +246,41 @@ class ActionSheet extends Component<ActionSheetProps> {
       </Dialog>
     );
   }
+
+  renderNewDialog() {
+    const {visible, onDismiss, dialogStyle, onModalDismissed, testID, useSafeArea, dialogProps} = this.props;
+
+    if (onModalDismissed) {
+      LogService.deprecationWarn({component: 'ActionSheet', oldProp: 'onModalDismissed', newProp: 'onDismiss'});
+    }
+
+    return (
+      // @ts-expect-error height might be null here
+      <IncubatorDialog
+        bottom
+        centerH
+        width="100%"
+        direction={PanningProvider.Directions.DOWN}
+        {...dialogProps}
+        useSafeArea={useSafeArea}
+        testID={testID}
+        containerStyle={[styles.incubatorDialog, dialogStyle]}
+        visible={visible}
+        onDismiss={onDismiss}
+      >
+        {this.renderSheet()}
+      </IncubatorDialog>
+    );
+  }
+
+  render() {
+    const {migrateDialog} = this.props;
+    if (migrateDialog) {
+      return this.renderNewDialog();
+    } else {
+      return this.renderOldDialog();
+    }
+  }
 }
 
 export default asBaseComponent<ActionSheetProps>(ActionSheet);
@@ -250,6 +292,10 @@ const styles = StyleSheet.create({
   dialog: {
     backgroundColor: Colors.white
   },
+  incubatorDialog: {
+    backgroundColor: Colors.white,
+    marginBottom: 0
+  },
   listWithTitle: {
     paddingBottom: VERTICAL_PADDING
   },

src/incubator/Dialog/DialogHeader.tsx

@@ -4,6 +4,7 @@ import {StyleSheet} from 'react-native';
 import {asBaseComponent} from '../../commons/new';
 import {Spacings, Colors, BorderRadiuses, Dividers} from 'style';
 import View from '../../components/view';
+import TouchableOpacity from '../../components/touchableOpacity';
 import Text from '../../components/text';
 import {DialogHeaderProps} from './types';
 
@@ -18,6 +19,12 @@ const DialogHeader = (props: DialogHeaderProps = {}) => {
     renderContent,
     showKnob = true,
     showDivider = true,
+    leadingAccessory,
+    trailingAccessory,
+    contentContainerStyle,
+    onPress,
+    bottomAccessory,
+    style,
     ...others
   } = props;
 
@@ -32,9 +39,10 @@ const DialogHeader = (props: DialogHeaderProps = {}) => {
       return renderContent(props);
     }
 
+    const Container = onPress ? TouchableOpacity : View;
     if (!isEmpty(title) || !isEmpty(subtitle)) {
       return (
-        <View marginH-s5 marginV-s1>
+        <Container onPress={onPress} center flex>
           {title && (
             <Text $textDefault {...titleProps} marginB-s3 style={titleStyle}>
               {title}
@@ -45,25 +53,40 @@ const DialogHeader = (props: DialogHeaderProps = {}) => {
               {subtitle}
             </Text>
           )}
-        </View>
+        </Container>
       );
     }
 
     return null;
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [renderContent, title, titleStyle, titleProps, subtitle, subtitleStyle, subtitleProps]);
 
+  const content = useMemo(() => {
+    if (headerContent || leadingAccessory || trailingAccessory) {
+      return (
+        <View marginH-s5 marginV-s1 style={contentContainerStyle} row spread>
+          {leadingAccessory}
+          {headerContent}
+          {trailingAccessory}
+        </View>
+      );
+    }
+
+    return null;
+  }, [headerContent, leadingAccessory, trailingAccessory, contentContainerStyle]);
+
   const divider = useMemo(() => {
     if (showDivider) {
       return <View style={Dividers.d10}/>;
     }
   }, [showDivider]);
 
-  if (!isEmpty(props)) {
+  if (knob || content || bottomAccessory || divider) {
     return (
-      <View {...others}>
+      <View {...others} style={style}>
         {knob}
-        {headerContent}
+        {content}
+        {bottomAccessory}
         {divider}
       </View>
     );
@@ -72,6 +95,8 @@ const DialogHeader = (props: DialogHeaderProps = {}) => {
   return null;
 };
 
+DialogHeader.displayName = 'Incubator.Dialog.Header';
+
 export default asBaseComponent<DialogHeaderProps>(DialogHeader);
 
 const styles = StyleSheet.create({

src/incubator/Dialog/dialogHeader.api.json

@@ -0,0 +1,37 @@
+{
+  "name": "Dialog.Header",
+  "category": "incubator",
+  "description": "Component for displaying the header of a popup dialog",
+  "props": [
+    {"name": "title", "type": "string", "description": "Title"},
+    {"name": "titleStyle", "type": "StyleProp<TextStyle>", "description": "Title text style"},
+    {"name": "titleProps", "type": "TextProps", "description": "Title extra props"},
+    {"name": "subtitle", "type": "string", "description": "Subtitle"},
+    {"name": "subtitleStyle", "type": "StyleProp<TextStyle>", "description": "Subtitle text style"},
+    {"name": "subtitleProps", "type": "TextProps", "description": "Subtitle extra props"},
+    {
+      "name": "renderContent",
+      "type": "(props: DialogHeaderProps) => React.ReactElement",
+      "description": "Replace the header's default content (Dialog.Text)"
+    },
+    {"name": "showKnob", "type": "boolean", "description": "Show the header's knob", "default": "true"},
+    {"name": "showDivider", "type": "boolean", "description": "Show the header's divider", "default": "true"},
+    {"name": "leadingAccessory", "type": "ReactElement", "description": "Pass to render a leading element"},
+    {"name": "trailingAccessory", "type": "ReactElement", "description": "Pass to render a trailing element"},
+    {
+      "name": "contentContainerStyle",
+      "type": "ViewProps['style']",
+      "description": "Style for the leading + content + trailing components (without the bottomAccessory)"
+    },
+    {
+      "name": "onPress",
+      "type": "() => void",
+      "description": "onPress callback for the inner content"
+    },
+    {
+      "name": "bottomAccessory",
+      "type": "ReactElement",
+      "description": "Pass to render a bottom element below the input"
+    }
+  ]
+}