Add alignment support

Author: M-i-k-e-l

demo/src/screens/incubatorScreens/IncubatorDialogScreen.tsx

@@ -69,7 +69,7 @@ export default class IncubatorDialogScreen extends Component {
         <View flex center>
           <Button marginV-20 label="Open Dialog" onPress={this.openDialog}/>
         </View>
-        <Incubator.Dialog visible={visible} onDismiss={this.onDismiss} bottom containerStyle={styles.dialogContainer}>
+        <Incubator.Dialog visible={visible} onDismiss={this.onDismiss} bottom centerH>
           <View style={styles.dialog}>
             <Text text60 margin-s2>
               Title (swipe here)
@@ -90,11 +90,8 @@ export default class IncubatorDialogScreen extends Component {
 }
 
 const styles = StyleSheet.create({
-  dialogContainer: {
-    bottom: 20,
-    alignSelf: 'center'
-  },
   dialog: {
+    margin: 20,
     backgroundColor: Colors.white,
     width: 200,
     height: 300,

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

@@ -1,52 +1,7 @@
-import React, { PropsWithChildren } from 'react';
-import { StyleProp, ViewStyle } from 'react-native';
-import { PanningDirections, PanningDirectionsEnum } from '../panView';
-import { ModalProps } from '../../components/modal';
-import { AlignmentModifiers } from '../../commons/modifiers';
-declare type DialogDirections = PanningDirections;
-declare const DialogDirectionsEnum: typeof PanningDirectionsEnum;
+import React from 'react';
+import { ImperativeDialogMethods, DialogDirections, DialogDirectionsEnum } from './types';
 export { DialogDirections, DialogDirectionsEnum };
-interface _DialogProps extends AlignmentModifiers {
-    /**
-     * The initial visibility of the dialog.
-     */
-    initialVisibility?: boolean;
-    /**
-     * Callback that is called after the dialog's dismiss (after the animation has ended).
-     */
-    onDismiss?: (props?: ImperativeDialogProps) => void;
-    /**
-     * The direction from which and to which the dialog is animating \ panning (default bottom).
-     */
-    direction?: DialogDirections;
-    /**
-     * The Dialog`s container style (it is set to {position: 'absolute'})
-     */
-    containerStyle?: StyleProp<ViewStyle>;
-    /**
-     * Whether or not to ignore background press.
-     */
-    ignoreBackgroundPress?: boolean;
-    /**
-     * Additional props for the modal.
-     */
-    modalProps?: ModalProps;
-    /**
-     * Used to locate this view in end-to-end tests
-     * The container has the unchanged id.
-     * Currently supported inner IDs:
-     * TODO: add missing <TestID>(s?)
-     * <TestID>.modal - the Modal's id.
-     * <TestID>.overlayFadingBackground - the fading background id.
-     */
-    testID?: string;
-}
-export declare type ImperativeDialogProps = PropsWithChildren<_DialogProps>;
-export interface ImperativeDialogMethods {
-    open: () => void;
-    close: () => void;
-}
-declare const _default: React.ForwardRefExoticComponent<_DialogProps & {
+declare const _default: React.ForwardRefExoticComponent<import("./types")._DialogProps & {
     children?: React.ReactNode;
 } & React.RefAttributes<ImperativeDialogMethods>>;
 export default _default;

generatedTypes/src/incubator/Dialog/helpers/useAlignmentStyle.d.ts

@@ -0,0 +1,5 @@
+import { AlignmentModifiers } from '../../../commons/modifiers';
+declare const useAlignmentStyle: (props: AlignmentModifiers) => {
+    alignmentStyle: any[];
+};
+export default useAlignmentStyle;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ImperativeDialogProps, DialogDirections, DialogDirectionsEnum } from './ImperativeDialog';
+import { ImperativeDialogProps, DialogDirections, DialogDirectionsEnum } from './types';
 export { DialogDirections, DialogDirectionsEnum };
 export interface DialogProps extends Omit<ImperativeDialogProps, 'initialVisibility'> {
     /**

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

@@ -0,0 +1,43 @@
+import { PropsWithChildren } from 'react';
+import { AlignmentModifiers } from '../../commons/modifiers';
+import { ModalProps } from '../../components/modal';
+import { PanningDirections, PanningDirectionsEnum } from '../panView';
+declare type DialogDirections = PanningDirections;
+declare const DialogDirectionsEnum: typeof PanningDirectionsEnum;
+export { DialogDirections, DialogDirectionsEnum };
+export interface _DialogProps extends AlignmentModifiers {
+    /**
+     * The initial visibility of the dialog.
+     */
+    initialVisibility?: boolean;
+    /**
+     * Callback that is called after the dialog's dismiss (after the animation has ended).
+     */
+    onDismiss?: (props?: ImperativeDialogProps) => void;
+    /**
+     * The direction from which and to which the dialog is animating \ panning (default bottom).
+     */
+    direction?: DialogDirections;
+    /**
+     * Whether or not to ignore background press.
+     */
+    ignoreBackgroundPress?: boolean;
+    /**
+     * Additional props for the modal.
+     */
+    modalProps?: ModalProps;
+    /**
+     * Used to locate this view in end-to-end tests
+     * The container has the unchanged id.
+     * Currently supported inner IDs:
+     * TODO: add missing <TestID>(s?)
+     * <TestID>.modal - the Modal's id.
+     * <TestID>.overlayFadingBackground - the fading background id.
+     */
+    testID?: string;
+}
+export declare type ImperativeDialogProps = PropsWithChildren<_DialogProps>;
+export interface ImperativeDialogMethods {
+    open: () => void;
+    close: () => void;
+}

src/incubator/Dialog/ImperativeDialog.tsx

@@ -1,58 +1,14 @@
-import React, {PropsWithChildren, useMemo, useCallback, useState, useImperativeHandle, forwardRef} from 'react';
-import {StyleSheet, StyleProp, ViewStyle} from 'react-native';
+import React, {useMemo, useCallback, useState, useImperativeHandle, forwardRef} from 'react';
+import {StyleSheet} from 'react-native';
 import {useSharedValue, withTiming, useAnimatedStyle} from 'react-native-reanimated';
-import TransitionView, {TransitionViewAnimationType} from '../TransitionView';
-import PanView, {PanningDirections, PanningDirectionsEnum} from '../panView';
 import View from '../../components/view';
-import Modal, {ModalProps} from '../../components/modal';
-import {AlignmentModifiers} from '../../commons/modifiers';
-type DialogDirections = PanningDirections;
-const DialogDirectionsEnum = PanningDirectionsEnum;
+import Modal from '../../components/modal';
+import TransitionView, {TransitionViewAnimationType} from '../TransitionView';
+import PanView from '../panView';
+import useAlignmentStyle from './helpers/useAlignmentStyle';
+import {ImperativeDialogProps, ImperativeDialogMethods, DialogDirections, DialogDirectionsEnum} from './types';
 export {DialogDirections, DialogDirectionsEnum};
 
-interface _DialogProps extends AlignmentModifiers {
-  /**
-   * The initial visibility of the dialog.
-   */
-  initialVisibility?: boolean;
-  /**
-   * Callback that is called after the dialog's dismiss (after the animation has ended).
-   */
-  onDismiss?: (props?: ImperativeDialogProps) => void;
-  /**
-   * The direction from which and to which the dialog is animating \ panning (default bottom).
-   */
-  direction?: DialogDirections;
-  /**
-   * The Dialog`s container style (it is set to {position: 'absolute'})
-   */
-  containerStyle?: StyleProp<ViewStyle>;
-  /**
-   * Whether or not to ignore background press.
-   */
-  ignoreBackgroundPress?: boolean;
-  /**
-   * Additional props for the modal.
-   */
-  modalProps?: ModalProps;
-  /**
-   * Used to locate this view in end-to-end tests
-   * The container has the unchanged id.
-   * Currently supported inner IDs:
-   * TODO: add missing <TestID>(s?)
-   * <TestID>.modal - the Modal's id.
-   * <TestID>.overlayFadingBackground - the fading background id.
-   */
-  testID?: string;
-}
-
-export type ImperativeDialogProps = PropsWithChildren<_DialogProps>;
-
-export interface ImperativeDialogMethods {
-  open: () => void;
-  close: () => void;
-}
-
 import {Colors} from 'style';
 const DEFAULT_OVERLAY_BACKGROUND_COLORS = Colors.rgba(Colors.black, 0.2);
 
@@ -62,7 +18,6 @@ const ImperativeDialog = (props: ImperativeDialogProps, ref: any) => {
     onDismiss,
     direction = DialogDirectionsEnum.DOWN,
     children,
-    containerStyle,
     ignoreBackgroundPress,
     modalProps = {},
     testID
@@ -71,6 +26,7 @@ const ImperativeDialog = (props: ImperativeDialogProps, ref: any) => {
   const {overlayBackgroundColor = DEFAULT_OVERLAY_BACKGROUND_COLORS, ...otherModalProps} = modalProps;
   const fadeOpacity = useSharedValue<number>(Number(initialVisibility));
   const [visible, setVisible] = useState(initialVisibility);
+  const {alignmentStyle} = useAlignmentStyle(props);
 
   const open = useCallback(() => {
     if (!visible) {
@@ -117,39 +73,25 @@ const ImperativeDialog = (props: ImperativeDialogProps, ref: any) => {
   },
   [onDismiss, setVisible]);
 
-  const panStyle = useMemo(() => {
-    return [containerStyle, styles.panView];
-  }, [containerStyle]);
-
   const fadeStyle = useAnimatedStyle(() => {
     return {
       opacity: fadeOpacity.value,
       backgroundColor: overlayBackgroundColor
     };
   }, [overlayBackgroundColor]);
 
-  return (
-    <Modal
-      transparent
-      animationType={'none'}
-      {...otherModalProps}
-      testID={`${testID}.modal`}
-      useGestureHandlerRootView
-      visible={visible}
-      onBackgroundPress={ignoreBackgroundPress ? undefined : onBackgroundPress}
-      onRequestClose={onBackgroundPress}
-      onDismiss={undefined}
-    >
-      <View testID={`${testID}.overlayFadingBackground`} absF reanimated style={fadeStyle} pointerEvents="none"/>
-      {/* TODO: remove?
-        {this.renderDialogView()}
-      {addBottomSafeArea && <View style={{marginTop: bottomInsets}}/>} */}
-
+  const renderDialog = () => {
+    {
+      /* TODO: remove?
+      {this.renderDialogView()}
+    {addBottomSafeArea && <View style={{marginTop: bottomInsets}}/>} */
+    }
+    return (
       <PanView
         directions={directions}
         dismissible
         animateToOrigin
-        containerStyle={panStyle}
+        containerStyle={styles.panView}
         onDismiss={onPanViewDismiss}
       >
         <TransitionView
@@ -162,6 +104,23 @@ const ImperativeDialog = (props: ImperativeDialogProps, ref: any) => {
           {children}
         </TransitionView>
       </PanView>
+    );
+  };
+
+  return (
+    <Modal
+      transparent
+      animationType={'none'}
+      {...otherModalProps}
+      testID={`${testID}.modal`}
+      useGestureHandlerRootView
+      visible={visible}
+      onBackgroundPress={ignoreBackgroundPress ? undefined : onBackgroundPress}
+      onRequestClose={onBackgroundPress}
+      onDismiss={undefined}
+    >
+      <View testID={`${testID}.overlayFadingBackground`} absF reanimated style={fadeStyle} pointerEvents="none"/>
+      <View pointerEvents={'none'} style={alignmentStyle}>{renderDialog()}</View>
     </Modal>
   );
 };

src/incubator/Dialog/helpers/useAlignmentStyle.tsx

@@ -0,0 +1,31 @@
+import {isEmpty} from 'lodash';
+import {useMemo} from 'react';
+import {StyleSheet} from 'react-native';
+import {AlignmentModifiers, extractAlignmentsValues} from '../../../commons/modifiers';
+
+const useAlignmentStyle = (props: AlignmentModifiers) => {
+  const getAlignments = () => {
+    const alignments = extractAlignmentsValues(props);
+    return isEmpty(alignments) ? styles.defaultAlignment : alignments;
+  };
+
+  const alignments = getAlignments();
+
+  const alignmentStyle = useMemo(() => {
+    return [styles.container, alignments];
+  }, [alignments]);
+
+  return {alignmentStyle};
+};
+
+export default useAlignmentStyle;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  defaultAlignment: {
+    justifyContent: 'center',
+    alignItems: 'center'
+  }
+});

src/incubator/Dialog/index.tsx

@@ -1,11 +1,7 @@
 import React, {useRef} from 'react';
 import {useDidUpdate} from 'hooks';
-import ImperativeDialog, {
-  ImperativeDialogProps,
-  DialogDirections,
-  DialogDirectionsEnum,
-  ImperativeDialogMethods
-} from './ImperativeDialog';
+import ImperativeDialog from './ImperativeDialog';
+import {ImperativeDialogProps, DialogDirections, DialogDirectionsEnum, ImperativeDialogMethods} from './types';
 export {DialogDirections, DialogDirectionsEnum};
 
 export interface DialogProps extends Omit<ImperativeDialogProps, 'initialVisibility'> {

src/incubator/Dialog/types.ts

@@ -0,0 +1,46 @@
+import {PropsWithChildren} from 'react';
+import {AlignmentModifiers} from '../../commons/modifiers';
+import {ModalProps} from '../../components/modal';
+import {PanningDirections, PanningDirectionsEnum} from '../panView';
+type DialogDirections = PanningDirections;
+const DialogDirectionsEnum = PanningDirectionsEnum;
+export {DialogDirections, DialogDirectionsEnum};
+
+export interface _DialogProps extends AlignmentModifiers {
+  /**
+   * The initial visibility of the dialog.
+   */
+  initialVisibility?: boolean;
+  /**
+   * Callback that is called after the dialog's dismiss (after the animation has ended).
+   */
+  onDismiss?: (props?: ImperativeDialogProps) => void;
+  /**
+   * The direction from which and to which the dialog is animating \ panning (default bottom).
+   */
+  direction?: DialogDirections;
+  /**
+   * Whether or not to ignore background press.
+   */
+  ignoreBackgroundPress?: boolean;
+  /**
+   * Additional props for the modal.
+   */
+  modalProps?: ModalProps;
+  /**
+   * Used to locate this view in end-to-end tests
+   * The container has the unchanged id.
+   * Currently supported inner IDs:
+   * TODO: add missing <TestID>(s?)
+   * <TestID>.modal - the Modal's id.
+   * <TestID>.overlayFadingBackground - the fading background id.
+   */
+  testID?: string;
+}
+
+export type ImperativeDialogProps = PropsWithChildren<_DialogProps>;
+
+export interface ImperativeDialogMethods {
+  open: () => void;
+  close: () => void;
+}