Create a Dialog that uses hooks (#2116)

* Create a Dialog that uses hooks

* Removed old unused file (HeaderContent)

* Move isEmpty check

* Move text props to header props and fix api

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

Author: M-i-k-e-l

demo/src/screens/incubatorScreens/IncubatorDialogScreen.tsx

@@ -34,7 +34,7 @@ const colors: Item[] = [
 export default class IncubatorDialogScreen extends Component {
   state = {visible: false};
   modalProps: ModalProps = {supportedOrientations: ['portrait', 'landscape']};
-  headerProps: Incubator.DialogHeaderProps = {text: {title: 'Title (swipe here)'}};
+  headerProps: Incubator.DialogHeaderProps = {title: 'Title (swipe here)'};
 
   renderVerticalItem = ({item}: {item: Item}) => {
     return (
@@ -66,7 +66,9 @@ export default class IncubatorDialogScreen extends Component {
     return (
       <View bg-$backgroundNeutralLight flex padding-20>
         <Card height={100} center padding-20>
-          <Text $textDefault text50>IncubatorDialogScreen</Text>
+          <Text $textDefault text50>
+            IncubatorDialogScreen
+          </Text>
         </Card>
         <View flex center>
           <Button marginV-s5 label="Open Dialog" onPress={this.openDialog}/>

src/incubator/Dialog/DialogHeader.tsx

@@ -4,11 +4,22 @@ import {StyleSheet} from 'react-native';
 import {asBaseComponent} from '../../commons/new';
 import {Spacings, Colors, BorderRadiuses, Dividers} from 'style';
 import View from '../../components/view';
-import HeaderContent from './HeaderContent';
+import Text from '../../components/text';
 import {DialogHeaderProps} from './types';
 
 const DialogHeader = (props: DialogHeaderProps = {}) => {
-  const {text = {}, renderContent, showKnob = true, showDivider = true, ...others} = props;
+  const {
+    title,
+    titleStyle,
+    titleProps,
+    subtitle,
+    subtitleStyle,
+    subtitleProps,
+    renderContent,
+    showKnob = true,
+    showDivider = true,
+    ...others
+  } = props;
 
   const knob = useMemo(() => {
     if (showKnob) {
@@ -21,9 +32,26 @@ const DialogHeader = (props: DialogHeaderProps = {}) => {
       return renderContent(props);
     }
 
-    return <HeaderContent text={text}/>;
+    if (!isEmpty(title) || !isEmpty(subtitle)) {
+      return (
+        <View marginH-s5 marginV-s1>
+          {title && (
+            <Text $textDefault {...titleProps} marginB-s3 style={titleStyle}>
+              {title}
+            </Text>
+          )}
+          {subtitle && (
+            <Text $textDefault {...subtitleProps} marginB-s3 style={subtitleStyle}>
+              {subtitle}
+            </Text>
+          )}
+        </View>
+      );
+    }
+
+    return null;
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [renderContent, text]);
+  }, [renderContent, title, titleStyle, titleProps, subtitle, subtitleStyle, subtitleProps]);
 
   const divider = useMemo(() => {
     if (showDivider) {

src/incubator/Dialog/HeaderContent.tsx

@@ -7,19 +7,33 @@
   "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/incubatorScreens/IncubatorDialogScreen.tsx",
   "props": [
     {"name": "visible", "type": "boolean", "description": "The visibility of the dialog"},
-    {"name": "onDismiss", "type": "(props?: ImperativeDialogProps) => void", "description": "Callback that is called after the dialog's dismiss (after the animation has ended)."},
+    {"name": "headerProps", "type": "DialogHeaderProps", "description": "The Dialog's header (title, subtitle etc)"},
+    {
+      "name": "containerStyle",
+      "type": "ViewStyle",
+      "description": "The Dialog`s container style (it is set to {position: 'absolute'})"
+    },
+    {
+      "name": "onDismiss",
+      "type": "(props?: DialogProps) => void",
+      "description": "Callback that is called after the dialog's dismiss (after the animation has ended)."
+    },
     {
       "name": "direction",
       "type": "up | down | left | right",
-      "description": "The direction from which and to which the dialog is animating \\ panning (default bottom).",
+      "description": "The direction from which and to which the dialog is animating \\ panning (default down).",
       "default": "down"
     },
     {"name": "ignoreBackgroundPress", "type": "boolean", "description": "Whether or not to ignore background press."},
     {"name": "modalProps", "type": "ModalProps", "description": "Pass props to the dialog modal"},
-    {"name": "testID", "type": "string", "description": "Used as a testing identifier"}
+    {
+      "name": "testID",
+      "type": "string",
+      "description": "Used to locate this view in end-to-end tests\nThe container has the unchanged id.\nCurrently supported inner IDs:\n<TestID>.modal - the Modal's id.\n<TestID>.overlayFadingBackground - the fading background id."
+    }
   ],
   "snippet": [
-    "<Dialog", 
+    "<Dialog",
     "  visible={this.state.visible$1}",
     "  onDismiss={() => console.log('dismissed')$2}",
     "  panDirection={PanningProvider.Directions.DOWN$3}",