Feat/incubator dialog support size and custom header

demo/src/screens/incubatorScreens/IncubatorDialogScreen.tsx

@@ -1,6 +1,6 @@
+import {map} from 'lodash';
 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, Spacings} from 'react-native-ui-lib';
 
 interface Item {
@@ -31,23 +31,31 @@ const colors: Item[] = [
   {value: Colors.yellow70, label: 'Yellow70'}
 ];
 
+const styles = StyleSheet.create({
+  verticalScroll: {
+    paddingVertical: Spacings.s2
+  }
+});
+
+const SCROLLABLE_PROPS = {
+  enable: true,
+  showsVerticalScrollIndicator: false,
+  contentContainerStyle: styles.verticalScroll
+};
+
 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}) => {
+  renderItem = (item: Item) => {
     return (
-      <Text text50 marginH-s5 marginV-s2 color={item.value} onPress={this.closeDialog}>
+      <Text key={item.value} text50 marginH-s5 marginV-s2 color={item.value} onPress={this.closeDialog}>
         {item.label}
       </Text>
     );
   };
 
-  keyExtractor = (item: Item) => {
-    return item.value;
-  };
-
   openDialog = () => {
     this.setState({visible: true});
   };
@@ -77,24 +85,16 @@ export default class IncubatorDialogScreen extends Component {
           onDismiss={this.onDismiss}
           bottom
           centerH
+          height={'40%'}
           modalProps={this.modalProps}
           headerProps={this.headerProps}
+          scrollableProps={SCROLLABLE_PROPS}
         >
-          <FlatList
-            showsVerticalScrollIndicator={false}
-            contentContainerStyle={styles.verticalScroll}
-            data={colors}
-            renderItem={this.renderVerticalItem}
-            keyExtractor={this.keyExtractor}
-          />
+          {map(colors, color => {
+            return this.renderItem(color);
+          })}
         </Incubator.Dialog>
       </View>
     );
   }
 }
-
-const styles = StyleSheet.create({
-  verticalScroll: {
-    paddingVertical: Spacings.s2
-  }
-});

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

@@ -0,0 +1,10 @@
+import { StyleProp, ViewStyle } from 'react-native';
+import { StyleProps } from '../types';
+export declare function getSizeFromPercentage(size: string, totalSize: number): number | undefined;
+export declare function getSizeAsNumber(isWidth: boolean, size?: string | number): number | undefined;
+export declare function getSize(isWidth: boolean, defaultSize?: number, propSize?: string | number, style?: StyleProp<ViewStyle>): number | undefined;
+declare const useSizeStyle: (props: StyleProps) => {
+    width: number | undefined;
+    height: number | undefined;
+};
+export default useSizeStyle;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { DialogProps, DialogDirections, DialogDirectionsEnum, DialogHeaderProps } from './types';
-export { DialogProps, DialogDirections, DialogDirectionsEnum, DialogHeaderProps };
+export { DialogDirections, DialogDirectionsEnum, DialogProps, DialogHeaderProps };
 declare const _default: React.ComponentClass<DialogProps & {
     useCustomTheme?: boolean | undefined;
 }, any>;

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

@@ -4,10 +4,25 @@ import { AlignmentModifiers } from '../../commons/modifiers';
 import { ModalProps } from '../../components/modal';
 import { ViewProps } from '../../components/view';
 import { TextProps } from '../../components/text';
+import { FadedScrollViewProps } from '../../components/fadedScrollView';
 import { PanningDirections, PanningDirectionsEnum } from '../panView';
 declare type DialogDirections = PanningDirections;
 declare const DialogDirectionsEnum: typeof PanningDirectionsEnum;
 export { DialogDirections, DialogDirectionsEnum };
+export interface StyleProps {
+    /**
+     * The dialog width
+     */
+    width?: string | number;
+    /**
+     * The dialog height
+     */
+    height?: string | number;
+    /**
+     * The Dialog`s container style
+     */
+    containerStyle?: StyleProp<ViewStyle>;
+}
 export interface _DialogProps extends AlignmentModifiers, Pick<ViewProps, 'useSafeArea'> {
     /**
      * The initial visibility of the dialog.
@@ -88,7 +103,13 @@ export interface DialogHeaderProps extends ViewProps {
      */
     showDivider?: boolean;
 }
-export interface DialogProps extends Omit<ImperativeDialogProps, 'initialVisibility'> {
+export interface ScrollableProps extends FadedScrollViewProps {
+    /**
+     * Enable the scrollable content
+     */
+    enable?: boolean;
+}
+export interface DialogProps extends Omit<ImperativeDialogProps, 'initialVisibility'>, StyleProps {
     /**
      * The visibility of the dialog.
      */
@@ -98,7 +119,11 @@ export interface DialogProps extends Omit<ImperativeDialogProps, 'initialVisibil
      */
     headerProps?: DialogHeaderProps;
     /**
-     * The Dialog`s container style (it is set to {position: 'absolute'})
+     * Add scrollability to the content
      */
-    containerStyle?: StyleProp<ViewStyle>;
+    scrollableProps?: ScrollableProps;
+    /**
+     * Replace the header with your custom component
+     */
+    customHeader?: React.ReactElement;
 }

src/incubator/Dialog/__tests__/useSizeStyle.spec.js

@@ -0,0 +1,109 @@
+import * as uut from '../helpers/useSizeStyle';
+
+describe('Dialog:useSizeStyle', () => {
+  describe('getSizeFromPercentage', () => {
+    it('should handle 100%', () => {
+      expect(uut.getSizeFromPercentage('100%', 500)).toEqual(500);
+    });
+
+    it('should handle two digits', () => {
+      expect(uut.getSizeFromPercentage('40%', 200)).toEqual(80);
+    });
+
+    it('should handle one digit', () => {
+      expect(uut.getSizeFromPercentage('5%', 360)).toEqual(18);
+    });
+  });
+
+  describe('getSizeAsNumber', () => {
+    it('width | undefined', () => {
+      expect(uut.getSizeAsNumber(true, undefined)).toEqual(undefined);
+    });
+
+    it('width | number', () => {
+      expect(uut.getSizeAsNumber(true, 38)).toEqual(38);
+    });
+
+    it('width | string', () => {
+      expect(uut.getSizeAsNumber(true, '30%')).toEqual(225);
+    });
+
+    it('height | undefined', () => {
+      expect(uut.getSizeAsNumber(false, undefined)).toEqual(undefined);
+    });
+
+    it('height | number', () => {
+      expect(uut.getSizeAsNumber(false, 38)).toEqual(38);
+    });
+
+    it('height | string', () => {
+      expect(uut.getSizeAsNumber(false, '30%')).toEqual(400.2);
+    });
+  });
+
+  describe('getSize', () => {
+    it('width | no default | no width | no style', () => {
+      expect(uut.getSize(true, undefined, undefined, {backgroundColor: 'red'})).toEqual(undefined);
+    });
+
+    it('width | default | no width | no style', () => {
+      expect(uut.getSize(true, 250, undefined, {backgroundColor: 'red'})).toEqual(250);
+    });
+
+    it('width | default | no width | no style (has height)', () => {
+      expect(uut.getSize(true, 250, undefined, {backgroundColor: 'red', height: 40})).toEqual(250);
+    });
+
+    it('width | default | width | no style', () => {
+      expect(uut.getSize(true, 250, 30, {backgroundColor: 'red'})).toEqual(30);
+    });
+
+    it('width | default | width | style', () => {
+      expect(uut.getSize(true, 250, 30, {backgroundColor: 'red', width: 15})).toEqual(30);
+    });
+
+    it('width | default | width (percentage) | style', () => {
+      expect(uut.getSize(true, 250, '10%', {backgroundColor: 'red', width: 15})).toEqual(75);
+    });
+
+    it('width | default | no width | style', () => {
+      expect(uut.getSize(true, 250, undefined, {backgroundColor: 'red', width: 15})).toEqual(15);
+    });
+
+    it('width | default | no width | style (percentage)', () => {
+      expect(uut.getSize(true, 250, undefined, {backgroundColor: 'red', width: '15%'})).toEqual(112.5);
+    });
+
+    it('height | no default | no height | no style', () => {
+      expect(uut.getSize(false, undefined, undefined, {backgroundColor: 'red'})).toEqual(undefined);
+    });
+
+    it('height | default | no height | no style', () => {
+      expect(uut.getSize(false, 250, undefined, {backgroundColor: 'red'})).toEqual(250);
+    });
+
+    it('height | default | no height | no style (has width)', () => {
+      expect(uut.getSize(false, 250, undefined, {backgroundColor: 'red', width: 40})).toEqual(250);
+    });
+
+    it('height | default | height | no style', () => {
+      expect(uut.getSize(false, 250, 30, {backgroundColor: 'red'})).toEqual(30);
+    });
+
+    it('height | default | height (percentage) | style', () => {
+      expect(uut.getSize(false, 250, '10%', {backgroundColor: 'red', height: 15})).toEqual(133.4);
+    });
+
+    it('height | default | height | style', () => {
+      expect(uut.getSize(false, 250, 30, {backgroundColor: 'red', height: 15})).toEqual(30);
+    });
+
+    it('height | default | no height | style', () => {
+      expect(uut.getSize(false, 250, undefined, {backgroundColor: 'red', height: 15})).toEqual(15);
+    });
+
+    it('height | default | no height | style (percentage)', () => {
+      expect(uut.getSize(false, 250, undefined, {backgroundColor: 'red', height: '15%'})).toEqual(200.1);
+    });
+  });
+});

src/incubator/Dialog/helpers/useSizeStyle.tsx

@@ -0,0 +1,65 @@
+import {isUndefined} from 'lodash';
+import {useMemo} from 'react';
+import {StyleSheet, StyleProp, ViewStyle} from 'react-native';
+import {Constants} from '../../../commons/new';
+import {StyleProps} from '../types';
+
+const PERCENTAGE_STRING_REGEX = '([0-9]*)%';
+// exporting for tests
+export function getSizeFromPercentage(size: string, totalSize: number) {
+  const matches = size.match(PERCENTAGE_STRING_REGEX);
+  if (matches && matches.length > 0) {
+    return (Number(matches[1]) * totalSize) / 100;
+  }
+}
+
+// exporting for tests
+export function getSizeAsNumber(isWidth: boolean, size?: string | number) {
+  if (size) {
+    if (typeof size === 'number') {
+      return size;
+    } else {
+      const result = getSizeFromPercentage(size, isWidth ? Constants.screenWidth : Constants.screenHeight);
+      if (result) {
+        return result;
+      }
+    }
+  }
+}
+
+// exporting for tests
+export function getSize(isWidth: boolean,
+  defaultSize?: number,
+  propSize?: string | number,
+  style?: StyleProp<ViewStyle>) {
+  const size = getSizeAsNumber(isWidth, propSize);
+  if (!isUndefined(size)) {
+    return size;
+  }
+
+  if (style) {
+    const flattenedStyle = StyleSheet.flatten(style);
+    const size = getSizeAsNumber(isWidth, isWidth ? flattenedStyle.width : flattenedStyle.height);
+    if (!isUndefined(size)) {
+      return size;
+    }
+  }
+
+  return defaultSize;
+}
+
+const useSizeStyle = (props: StyleProps) => {
+  const {width: propsWidth, height: propsHeight, containerStyle} = props;
+
+  const width = useMemo(() => {
+    return getSize(true, 250, propsWidth, containerStyle);
+  }, [propsWidth, containerStyle]);
+
+  const height = useMemo(() => {
+    return getSize(false, undefined, propsHeight, containerStyle);
+  }, [propsHeight, containerStyle]);
+
+  return {width, height};
+};
+
+export default useSizeStyle;