Refactor modal options to replace _onShow and _onHide with _effect handling. Adjust Card props for consistency with prefixed variables. Update types and utilities for enhanced modal functionality.

imagine10255 · imagine10255 · commit 5dca6a1ee1cc · 2025-07-17T22:44:57.000+08:00
diff --git a/example/src/components/atoms/Card/Card.tsx b/example/src/components/atoms/Card/Card.tsx
@@ -34,9 +34,9 @@ const Card = ({
         <CardRoot style={style}
             className={className}
             onClick={onClick}
-            isGutter={isGutter}
+            $isGutter={isGutter}
         >
-            <CardBody direction={direction} fluid={fluid} className="gap-2">
+            <CardBody $direction={direction} $fluid={fluid} className="gap-2">
                 {title && <CardTitle>{title}</CardTitle>}
                 {children}
             </CardBody>
@@ -50,17 +50,17 @@ export default Card;
 
 
 const CardBody = styled.div<{
-    fluid?: boolean,
-    direction?: 'row'|'column',
+    $fluid?: boolean,
+    $direction?: 'row'|'column',
 }>`
     height: 100%;
     display: flex;
     //overflow: hidden; // 影響正常項目跑版
-    flex-direction: ${props => props.direction === 'column' ? 'column': 'row'};
-    padding: ${props => props.fluid ? 0: '5px 10px'};
+    flex-direction: ${props => props.$direction === 'column' ? 'column': 'row'};
+    padding: ${props => props.$fluid ? 0: '5px 10px'};
 
     ${props => media.lg`
-      padding: ${props.fluid ? 0: '10px 20px'};
+      padding: ${props.$fluid ? 0: '10px 20px'};
     `}
 `;
 
@@ -74,7 +74,7 @@ const CardTitle = styled.h3`
 `;
 
 const CardRoot = styled.div<{
-    isGutter: boolean,
+    $isGutter: boolean,
 }>`
 
   //margin-bottom: 15px;
@@ -92,7 +92,7 @@ const CardRoot = styled.div<{
   width: 100%;
 
 
-  ${props => props.isGutter && css`
+  ${props => props.$isGutter && css`
       border-color: transparent;
       background: transparent;
       ${CardBody}{
diff --git a/example/src/components/examples/ZoomInCenter/ZoomInCenter.tsx b/example/src/components/examples/ZoomInCenter/ZoomInCenter.tsx
@@ -28,11 +28,13 @@ export default createModal(
         animation: animation.zoomInCenter,
         isHideWithMaskClick: true,
         // isFixedDisabled: false,
-        _onShow: () => {
-            console.log('onShow');
-        },
-        _onHide: () => {
-            console.log('onHide');
+        _effect: {
+            onShow: () => {
+                console.log('event onShow');
+            },
+            onHide: () => {
+                console.log('event onHide');
+            }
         }
     }
 );
diff --git a/example/src/components/primary/CreateStageModal/CreateStateModalPrimary.tsx b/example/src/components/primary/CreateStageModal/CreateStateModalPrimary.tsx
@@ -35,7 +35,15 @@ export default createStateModal(
     CreateStateModalPrimary,
     {
         animation: animation.generateFadeInFromTop(),
-        className: 'p-3'
+        className: 'p-3',
+        _effect: {
+            onShow: () => {
+                console.log('event onShow');
+            },
+            onHide: () => {
+                console.log('event onHide');
+            }
+        }
     },
 );
 
diff --git a/src/Modal.tsx b/src/Modal.tsx
@@ -51,10 +51,12 @@ class Modal extends React.Component<IModalPortalProps, IState> {
      * (自動 QueueKey)
      * @param ModalComponent
      * @param args
+     * @param onHide
      */
-    show: TShow = (ModalComponent, args) => {
+    show: TShow = (ModalComponent, args, onHide) => {
         const queueKey = createQueueKey();
-        this.showWithKey(ModalComponent, queueKey, args);
+
+        this.showWithKey(ModalComponent, queueKey, args, onHide);
     };
 
     /**
@@ -63,17 +65,18 @@ class Modal extends React.Component<IModalPortalProps, IState> {
      * @param ModalComponent
      * @param queueKey
      * @param args
+     * @param onHide
      */
-    showWithKey: TShowWithKey = (ModalComponent, queueKey, args) => {
+    showWithKey: TShowWithKey = (ModalComponent, queueKey, args, onHide) => {
         this.setState(prev => {
-            if(this.typeProps._onShow){
-                this.typeProps._onShow(queueKey);
+            if(this.typeProps.onShow){
+                this.typeProps.onShow(queueKey);
             }
 
             const activeIdx = prev.rows.findIndex(row => row.queueKey === queueKey);
             if(activeIdx === -1){
                 return {
-                    rows: [...prev.rows, {queueKey, ModalComponent, args}],
+                    rows: [...prev.rows, {queueKey, ModalComponent, args, onHide}],
                 };
             }
 
@@ -94,13 +97,17 @@ class Modal extends React.Component<IModalPortalProps, IState> {
     hide: THidden = (queueKey) => {
         this.setState(prev => {
             const index = prev.rows.findIndex(row => row.queueKey === queueKey);
+
+            const {onHide} = prev.rows[index];
+            if(onHide) onHide(queueKey);
+
             return {
                 rows: removeByIndex(prev.rows, index),
             };
         });
 
-        if(this.typeProps._onHide){
-            this.typeProps._onHide(queueKey);
+        if(this.typeProps.onHide){
+            this.typeProps.onHide(queueKey);
         }
     };
 
diff --git a/src/MotionDrawer/MotionDrawer.tsx b/src/MotionDrawer/MotionDrawer.tsx
@@ -42,7 +42,7 @@ const MotionDrawer = ({
     modalOptions,
     children,
 }: IProps, ref?: ForwardedRef<HTMLDivElement>) => {
-    const {style, className, isMaskHidden, isHideWithMaskClick, isBodyScrollEnable, isFixedDisabled, animation, _onHide, _onShow} = modalOptions ?? {className: ''};
+    const {style, className, isMaskHidden, isHideWithMaskClick, isBodyScrollEnable, isFixedDisabled, animation} = modalOptions ?? {className: ''};
     const id = useId();
     const isPresent = useIsPresent();
 
@@ -67,14 +67,6 @@ const MotionDrawer = ({
         };
     }, []);
 
-    useEffect(() => {
-        if(_onShow) _onShow(id);
-
-        return () => {
-            if(_onHide) _onHide(id);
-        };
-    }, [_onShow, _onHide]);
-
 
     /**
      * 渲染主內容
diff --git a/src/compose/createModal.tsx b/src/compose/createModal.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 import {modal} from '../Modal';
 import MotionDrawer from '../MotionDrawer';
 import {IModalOptions} from '../types';
+import {createQueueKey} from '../utils';
 
 
 
@@ -50,13 +51,15 @@ type TMotionModal<T> =
  * @param modalOptions
  */
 function createModal<T = undefined>(ModalComponent: React.FC<T>, modalOptions?: IModalOptions): ICreateModal<T> {
+    const {_effect, ...options} = modalOptions ?? {} as IModalOptions;
+
     /**
      * Add framer motion
      * @param args
      */
     const MotionModal: TMotionModal<T> = (args?: T) => {
         return (
-            <MotionDrawer modalOptions={modalOptions}>
+            <MotionDrawer modalOptions={options}>
                 <ModalComponent {...args as T & {}} />
             </MotionDrawer>
         );
@@ -66,22 +69,26 @@ function createModal<T = undefined>(ModalComponent: React.FC<T>, modalOptions?:
     function show();
     function show(args: T): void;
     function show(args?: T): void {
+        const queueKey = createQueueKey();
+
         if (args) {
-            modal.show(MotionModal, args);
+            modal.showWithKey(MotionModal, queueKey, args, _effect?.onHide);
         } else {
-            modal.show(MotionModal);
+            modal.showWithKey(MotionModal, queueKey, undefined, _effect?.onHide);
         }
+        if(_effect?.onShow) _effect.onShow(queueKey);
     }
 
     // Overload signatures
     function showWithKey(queueKey: string);
     function showWithKey(queueKey: string, args: T): void;
     function showWithKey(queueKey: string, args?: T): void {
         if (args) {
-            modal.showWithKey(MotionModal, queueKey, args);
+            modal.showWithKey(MotionModal, queueKey, args, _effect?.onHide);
         } else {
-            modal.showWithKey(MotionModal, queueKey);
+            modal.showWithKey(MotionModal, queueKey, undefined, _effect?.onHide);
         }
+        if(_effect?.onShow) _effect.onShow(queueKey);
     }
 
     // Assign the overloaded function to MotionModal.show
diff --git a/src/compose/createStateModal.tsx b/src/compose/createStateModal.tsx
@@ -1,6 +1,6 @@
 import {ReactDidMountPortal} from '@acrool/react-portal';
 import {AnimatePresence} from 'framer-motion';
-import React, {useCallback, useEffect, useRef, useState} from 'react';
+import React, {useCallback, useEffect, useLayoutEffect, useRef, useState} from 'react';
 
 import {rootId} from '../config';
 import {ModalProviderContext} from '../ModalProvider';
@@ -34,9 +34,9 @@ function createStateModal<T>(ModalComponent: React.FC<T>, modalOptions?: IStageM
 
 
         useEffect(() => {
-            if(modalOptions?._onShow) modalOptions._onShow(queueKey);
+            if(modalOptions?._effect?.onShow) modalOptions._effect.onShow(queueKey);
             return () => {
-                if(modalOptions?._onHide) modalOptions._onHide(queueKey);
+                if(modalOptions?._effect?.onHide) modalOptions._effect.onHide(queueKey);
             };
         }, []);
 
diff --git a/src/types.ts b/src/types.ts
@@ -7,6 +7,7 @@ export interface IRow<T = any> {
     queueKey: string
     ModalComponent: React.FC<T>
     args?: T
+    onHide?: (queryKey: string) => void
 }
 
 export interface IModal {
@@ -16,17 +17,18 @@ export interface IModal {
     hideAll: THiddenAll
 }
 
+type TOnHide = (queryKey: string) => void
 
 
-export type TShow = <T>(children: React.FC<T>, args?: T) => void
-export type TShowWithKey = <T>(children: React.FC<T>, queueKey: string, args?: T) => void
+export type TShow = <T>(children: React.FC<T>, args?: T, onHide?: TOnHide) => void
+export type TShowWithKey = <T>(children: React.FC<T>, queueKey: string, args?: T, onHide?: TOnHide) => void
 export type THidden = (queueKey: string) => void;
 export type THiddenAll = (ignoreKeys?: string[]) => void;
 
 
 interface IControlVisibleStatus {
-    _onShow?: (queueKey: string) => void
-    _onHide?: (queueKey: string) => void
+    onShow?: (queueKey: string) => void
+    onHide?: (queueKey: string) => void
 }
 
 export interface IModalPortalProps extends IControlVisibleStatus{
@@ -48,14 +50,15 @@ export type TAnimationConfig = {
     transition?: Transition,
 }
 
-export interface IModalOptions extends IControlVisibleStatus{
+export interface IModalOptions{
     animation?: TAnimationConfig
     className?: string
     style?: CSS.Properties
     isMaskHidden?: boolean
     isHideWithMaskClick?: boolean
     isBodyScrollEnable?: boolean
     isFixedDisabled?: boolean
+    _effect?: IControlVisibleStatus
 }
 
 export interface IStageModalOptions extends IModalOptions{
