feat: added data to present modal api (#942)

* feat: added data api for modal present * fix: updated rendering children approach
gorhom · May 14, 2022 · 8a3d138 · 8a3d138
1 parent ce15894
commit 8a3d138
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 12 deletions.
diff --git a/src/components/bottomSheet/BottomSheet.tsx b/src/components/bottomSheet/BottomSheet.tsx
@@ -153,7 +153,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
       backdropComponent,
       backgroundComponent,
       footerComponent,
-      children,
+      children: Content,
     } = props;
     //#endregion
 
@@ -1621,9 +1621,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
                     key="BottomSheetRootDraggableView"
                     style={contentContainerStyle}
                   >
-                    {typeof children === 'function'
-                      ? (children as Function)()
-                      : children}
+                    {typeof Content === 'function' ? <Content /> : Content}
 
                     {footerComponent && (
                       <BottomSheetFooterContainer

diff --git a/src/components/bottomSheetModal/BottomSheetModal.tsx b/src/components/bottomSheetModal/BottomSheetModal.tsx
@@ -21,6 +21,14 @@ import type { BottomSheetModalProps } from './types';
 
 type BottomSheetModal = BottomSheetModalMethods;
 
+const INITIAL_STATE: {
+  mount: boolean;
+  data: any;
+} = {
+  mount: false,
+  data: undefined,
+};
+
 const BottomSheetModalComponent = forwardRef<
   BottomSheetModal,
   BottomSheetModalProps
@@ -41,12 +49,12 @@ const BottomSheetModalComponent = forwardRef<
     onChange: _providedOnChange,
 
     // components
-    children,
+    children: Content,
     ...bottomSheetProps
   } = props;
 
   //#region state
-  const [mount, setMount] = useState(false);
+  const [{ mount, data }, setState] = useState(INITIAL_STATE);
   //#endregion
 
   //#region hooks
@@ -103,7 +111,7 @@ const BottomSheetModalComponent = forwardRef<
 
       // unmount the node, if sheet is still mounted
       if (_mounted) {
-        setMount(false);
+        setState(INITIAL_STATE);
       }
 
       // fire `onDismiss` callback
@@ -161,9 +169,12 @@ const BottomSheetModalComponent = forwardRef<
 
   //#region bottom sheet modal methods
   const handlePresent = useCallback(
-    function handlePresent() {
+    function handlePresent(_data?: any) {
       requestAnimationFrame(() => {
-        setMount(true);
+        setState({
+          mount: true,
+          data: _data,
+        });
         mountSheet(key, ref, stackBehavior);
 
         print({
@@ -348,7 +359,7 @@ const BottomSheetModalComponent = forwardRef<
   //#endregion
 
   // render
-  // console.log('BottomSheetModal', index, snapPoints)
+  // console.log('BottomSheetModal', index, mount, data);
   return mount ? (
     <Portal
       key={key}
@@ -368,7 +379,9 @@ const BottomSheetModalComponent = forwardRef<
         containerOffset={containerOffset}
         onChange={handleBottomSheetOnChange}
         onClose={handleBottomSheetOnClose}
-        children={children}
+        children={
+          typeof Content === 'function' ? <Content data={data} /> : Content
+        }
         $modal={true}
       />
     </Portal>

diff --git a/src/components/bottomSheetModal/types.d.ts b/src/components/bottomSheetModal/types.d.ts
@@ -1,3 +1,4 @@
+import type React from 'react';
 import type { BottomSheetProps } from '../bottomSheet';
 import type { MODAL_STACK_BEHAVIOR } from '../../constants';
 
@@ -43,4 +44,13 @@ export interface BottomSheetModalProps
    * @type () => void;
    */
   onDismiss?: () => void;
+
+  /**
+   * A scrollable node or normal view.
+   * @type React.ReactNode[] | React.ReactNode
+   */
+  children:
+    | (({ data: any }?) => React.ReactNode)
+    | React.ReactNode[]
+    | React.ReactNode;
 }
diff --git a/src/types.d.ts b/src/types.d.ts
@@ -78,8 +78,9 @@ export interface BottomSheetMethods {
 export interface BottomSheetModalMethods extends BottomSheetMethods {
   /**
    * Mount and present the bottom sheet modal to the initial snap point.
+   * @param data to be passed to the modal.
    */
-  present: () => void;
+  present: (data?: any) => void;
   /**
    * Close and unmount the bottom sheet modal.
    * @param animationConfigs snap animation configs.