Feat/incubator dialog add header (#1727)

* Add ImperativeDialog - fix bug while keeping simple

* Add alignment support

* Refactor (add useFadeView) and fix pointerEvents

* Fix onRequestClose

* Support useSafeArea

* Add supportedOrientations and accessibilityLabel

* Revert "Add supportedOrientations and accessibilityLabel"

This reverts commit 9d8b588.

* Add modalProps.supportedOrientations to the screen

* Bring back containerStyle

* Workaround useSafeArea performance issue

* Fix types

* Remove containerStyle again

* Add api

* IncubatorDialog - add header and default style

* Improve render

* Fix screen

* Fix Constants import

Author: M-i-k-e-l

demo/src/screens/incubatorScreens/IncubatorDialogScreen.tsx

@@ -1,7 +1,7 @@
 import React, {Component} from 'react';
 import {StyleSheet, ModalProps} from 'react-native';
 import {FlatList} from 'react-native-gesture-handler';
-import {View, Text, Card, Button, Incubator, Colors, BorderRadiuses, Constants} from 'react-native-ui-lib'; //eslint-disable-line
+import {View, Text, Card, Button, Incubator, Colors, Spacings} from 'react-native-ui-lib';
 
 interface Item {
   value: string;
@@ -34,10 +34,11 @@ 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)'}};
 
   renderVerticalItem = ({item}: {item: Item}) => {
     return (
-      <Text text50 margin-20 color={item.value} onPress={this.closeDialog}>
+      <Text text50 marginH-s5 marginV-s2 color={item.value} onPress={this.closeDialog}>
         {item.label}
       </Text>
     );
@@ -63,12 +64,12 @@ export default class IncubatorDialogScreen extends Component {
     const {visible} = this.state;
 
     return (
-      <View bg-dark80 flex padding-20>
+      <View bg-grey80 flex padding-20>
         <Card height={100} center padding-20>
           <Text text50>IncubatorDialogScreen</Text>
         </Card>
         <View flex center>
-          <Button marginV-20 label="Open Dialog" onPress={this.openDialog}/>
+          <Button marginV-s5 label="Open Dialog" onPress={this.openDialog}/>
         </View>
         <Incubator.Dialog
           useSafeArea
@@ -77,35 +78,23 @@ export default class IncubatorDialogScreen extends Component {
           bottom
           centerH
           modalProps={this.modalProps}
+          headerProps={this.headerProps}
         >
-          <View style={styles.dialog}>
-            <Text text60 margin-s2>
-              Title (swipe here)
-            </Text>
-            <View height={1} bg-grey40/>
-            <FlatList
-              showsVerticalScrollIndicator={false}
-              style={styles.verticalScroll}
-              data={colors}
-              renderItem={this.renderVerticalItem}
-              keyExtractor={this.keyExtractor}
-            />
-          </View>
+          <FlatList
+            showsVerticalScrollIndicator={false}
+            contentContainerStyle={styles.verticalScroll}
+            data={colors}
+            renderItem={this.renderVerticalItem}
+            keyExtractor={this.keyExtractor}
+          />
         </Incubator.Dialog>
       </View>
     );
   }
 }
 
 const styles = StyleSheet.create({
-  dialog: {
-    marginBottom: 20,
-    backgroundColor: Colors.white,
-    maxHeight: Constants.screenHeight * 0.8,
-    width: 300,
-    borderRadius: BorderRadiuses.br20
-  },
   verticalScroll: {
-    marginTop: 20
+    paddingVertical: Spacings.s2
   }
 });

generatedTypes/src/incubator/Dialog/DialogDivider.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { DialogHeaderProps } from './types';
+declare const _default: React.MemoExoticComponent<(props: Pick<DialogHeaderProps, "showDivider">) => JSX.Element | null>;
+export default _default;

generatedTypes/src/incubator/Dialog/DialogHeader.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { DialogHeaderProps } from './types';
+declare const DialogHeader: (props?: DialogHeaderProps) => JSX.Element | null;
+export default DialogHeader;

generatedTypes/src/incubator/Dialog/DialogKnob.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { DialogHeaderProps } from './types';
+declare const _default: React.MemoExoticComponent<(props: Pick<DialogHeaderProps, "showKnob">) => JSX.Element | null>;
+export default _default;

generatedTypes/src/incubator/Dialog/DialogText.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { DialogHeaderProps } from './types';
+declare const _default: React.MemoExoticComponent<(props: Pick<DialogHeaderProps, "text">) => JSX.Element | null>;
+export default _default;

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

@@ -1,15 +1,28 @@
-/// <reference types="react" />
-import { ImperativeDialogProps, DialogDirections, DialogDirectionsEnum } from './types';
-export { DialogDirections, DialogDirectionsEnum };
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import { ImperativeDialogProps, DialogDirections, DialogDirectionsEnum, DialogHeaderProps, DialogTextProps } from './types';
+export { DialogDirections, DialogDirectionsEnum, DialogHeaderProps, DialogTextProps };
 export interface DialogProps extends Omit<ImperativeDialogProps, 'initialVisibility'> {
     /**
      * The visibility of the dialog.
      */
     visible?: boolean;
+    /**
+     * The Dialog's header
+     */
+    headerProps?: DialogHeaderProps;
+    /**
+     * The Dialog`s container style (it is set to {position: 'absolute'})
+     */
+    containerStyle?: StyleProp<ViewStyle>;
 }
 declare const Dialog: {
     (props: DialogProps): JSX.Element;
     displayName: string;
     directions: typeof import("../panView").PanningDirectionsEnum;
+    Header: (props?: DialogHeaderProps) => JSX.Element | null;
+    Text: React.MemoExoticComponent<(props: Pick<DialogHeaderProps, "text">) => JSX.Element | null>;
+    Knob: React.MemoExoticComponent<(props: Pick<DialogHeaderProps, "showKnob">) => JSX.Element | null>;
+    Divider: React.MemoExoticComponent<(props: Pick<DialogHeaderProps, "showDivider">) => JSX.Element | null>;
 };
 export default Dialog;

generatedTypes/src/incubator/Dialog/types.d.ts

@@ -1,7 +1,9 @@
 import { PropsWithChildren } from 'react';
+import { StyleProp, TextStyle } from 'react-native';
 import { AlignmentModifiers } from '../../commons/modifiers';
 import { ModalProps } from '../../components/modal';
 import { ViewProps } from '../../components/view';
+import { TextProps } from '../../components/text';
 import { PanningDirections, PanningDirectionsEnum } from '../panView';
 declare type DialogDirections = PanningDirections;
 declare const DialogDirectionsEnum: typeof PanningDirectionsEnum;
@@ -42,3 +44,52 @@ export interface ImperativeDialogMethods {
     open: () => void;
     close: () => void;
 }
+/**
+ * It is available as `Dialog.Text`
+ */
+export interface DialogTextProps {
+    /**
+     * Title
+     */
+    title?: string;
+    /**
+     * Title text style
+     */
+    titleStyle?: StyleProp<TextStyle>;
+    /**
+     * Title extra props
+     */
+    titleProps?: TextProps;
+    /**
+     * Subtitle
+     */
+    subtitle?: string;
+    /**
+     * Subtitle text style
+     */
+    subtitleStyle?: StyleProp<TextStyle>;
+    /**
+     * Subtitle extra props
+     */
+    subtitleProps?: TextProps;
+}
+export interface DialogHeaderProps extends ViewProps {
+    /**
+     * The dialog's default content (Dialog.Text)
+     */
+    text?: DialogTextProps;
+    /**
+     * Replace the header's default content (Dialog.Text)
+     */
+    renderContent?: (props: DialogHeaderProps) => React.ReactElement;
+    /**
+     * Show the header's knob (default is true)
+     * It is available as `Dialog.Knob`
+     */
+    showKnob?: boolean;
+    /**
+     * Show the header's divider (default is true)
+     * It is available as `Dialog.Divider`
+     */
+    showDivider?: boolean;
+}

generatedTypes/src/incubator/index.d.ts

@@ -6,4 +6,4 @@ export { default as TouchableOpacity, TouchableOpacityProps } from './TouchableO
 export { default as WheelPicker, WheelPickerProps, WheelPickerAlign, WheelPickerItemProps } from './WheelPicker';
 export { default as PanView, PanViewProps, PanViewDirections, PanViewDismissThreshold } from './panView';
 export { default as TransitionView, TransitionViewProps, TransitionViewDirection, TransitionViewDirectionEnum, TransitionViewAnimationType } from './TransitionView';
-export { default as Dialog, DialogProps } from './Dialog';
+export { default as Dialog, DialogProps, DialogHeaderProps, DialogTextProps } from './Dialog';

src/incubator/Dialog/DialogDivider.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import {Dividers} from 'style';
+import View from '../../components/view';
+import {DialogHeaderProps} from './types';
+
+const DialogDivider = (props: Pick<DialogHeaderProps, 'showDivider'>) => {
+  const {showDivider = true} = props;
+
+  if (showDivider) {
+    return <View style={Dividers.d10}/>;
+  }
+
+  return null;
+};
+
+export default React.memo(DialogDivider);

src/incubator/Dialog/DialogHeader.tsx

@@ -0,0 +1,34 @@
+import {isEmpty} from 'lodash';
+import React, {useMemo} from 'react';
+import View from '../../components/view';
+import DialogText from './DialogText';
+import DialogKnob from './DialogKnob';
+import DialogDivider from './DialogDivider';
+import {DialogHeaderProps} from './types';
+
+const DialogHeader = (props: DialogHeaderProps = {}) => {
+  const {text = {}, renderContent, showKnob = true, showDivider = true, ...others} = props;
+
+  const _renderContent = useMemo(() => {
+    if (renderContent) {
+      return renderContent(props);
+    }
+
+    return <DialogText text={text}/>;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [renderContent, text]);
+
+  if (!isEmpty(props)) {
+    return (
+      <View {...others}>
+        <DialogKnob showKnob={showKnob}/>
+        {_renderContent}
+        <DialogDivider showDivider={showDivider}/>
+      </View>
+    );
+  }
+
+  return null;
+};
+
+export default DialogHeader;

src/incubator/Dialog/DialogKnob.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import {StyleSheet} from 'react-native';
+import {Spacings, Colors, BorderRadiuses} from 'style';
+import View from '../../components/view';
+import {DialogHeaderProps} from './types';
+
+const DialogKnob = (props: Pick<DialogHeaderProps, 'showKnob'>) => {
+  const {showKnob = true} = props;
+
+  if (showKnob) {
+    return <View style={styles.knob}/>;
+  }
+
+  return null;
+};
+
+export default React.memo(DialogKnob);
+
+const styles = StyleSheet.create({
+  knob: {
+    alignSelf: 'center',
+    width: 44,
+    height: Spacings.s1,
+    marginTop: Spacings.s2,
+    marginBottom: Spacings.s2,
+    backgroundColor: Colors.grey60,
+    borderRadius: BorderRadiuses.br10
+  }
+});

src/incubator/Dialog/DialogText.tsx

@@ -0,0 +1,31 @@
+import {isEmpty} from 'lodash';
+import React from 'react';
+import View from '../../components/view';
+import Text from '../../components/text';
+import {DialogHeaderProps} from './types';
+
+const DialogText = (props: Pick<DialogHeaderProps, 'text'>) => {
+  const {text = {}} = props;
+  const {title, titleStyle, titleProps, subtitle, subtitleStyle, subtitleProps} = text;
+
+  if (title || subtitle) {
+    return (
+      <View marginH-s5 marginV-s1>
+        {!isEmpty(title) && (
+          <Text {...titleProps} marginB-s3 style={titleStyle}>
+            {title}
+          </Text>
+        )}
+        {!isEmpty(subtitle) && (
+          <Text {...subtitleProps} marginB-s3 style={subtitleStyle}>
+            {subtitle}
+          </Text>
+        )}
+      </View>
+    );
+  }
+
+  return null;
+};
+
+export default React.memo(DialogText);