Refactor Button props to use prefixed variables and enhance modal options with _onShow and _onHide handlers. Add updated framer-motion dependencies.

Author: imagine10255

example/src/components/atoms/Button/Button.tsx

@@ -61,11 +61,11 @@ const Button = ({
             className={className}
             type={type}
             style={style}
-            color={color}
-            size={size}
-            isBlock={isBlock}
-            isOutline={isOutline}
-            isLink={isLink}
+            $color={color}
+            $size={size}
+            $isBlock={isBlock}
+            $isOutline={isOutline}
+            $isLink={isLink}
             onClick={handleClick}
             onMouseDown={onMouseDown}
             disabled={disabled}
@@ -82,11 +82,11 @@ export default Button;
 
 
 const ButtonRoot = styled.button<{
-    isBlock?: boolean,
-    isOutline?: boolean,
-    isLink?: boolean,
-    color?: TThemeColor,
-    size?: TLabelSize,
+    $isBlock?: boolean,
+    $isOutline?: boolean,
+    $isLink?: boolean,
+    $color?: TThemeColor,
+    $size?: TLabelSize,
     onClick?: any,
 }>`
 
@@ -102,13 +102,13 @@ const ButtonRoot = styled.button<{
     border-radius: .25rem;
     transition: background .15s ease-in-out, color .15s ease-in-out,background-color .15s ease-in-out,box-shadow .15s ease-in-out, transform .15s;
     border: 0 solid #444;
-    width: ${props => props.isBlock ? '100%': 'auto'};
+    width: ${props => props.$isBlock ? '100%': 'auto'};
     white-space:nowrap;
     box-shadow: none;
 
 
-    ${props => getThemeColor(props.color)}
-    ${props => getSize(props.size)}
+    ${props => getThemeColor(props.$color)}
+    ${props => getSize(props.$size)}
 
 
 
@@ -125,7 +125,7 @@ const ButtonRoot = styled.button<{
 
 
 
-    ${props => props.isOutline && css`
+    ${props => props.$isOutline && css`
         color: var(--button-bg-color);
         border-color: var(--button-bg-color);
         background-color: transparent;

example/src/components/examples/ZoomInCenter/ZoomInCenter.tsx

@@ -28,6 +28,12 @@ export default createModal(
         animation: animation.zoomInCenter,
         isHideWithMaskClick: true,
         // isFixedDisabled: false,
+        _onShow: () => {
+            console.log('onShow');
+        },
+        _onHide: () => {
+            console.log('onHide');
+        }
     }
 );
 

example/yarn.lock

@@ -2149,6 +2149,15 @@ framer-motion@12:
     motion-utils "^12.12.1"
     tslib "^2.4.0"
 
+framer-motion@^12.x:
+  version "12.23.6"
+  resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-12.23.6.tgz#29a78d0b05081fda3fdfd2f3eb4f570d7989d2e8"
+  integrity sha512-dsJ389QImVE3lQvM8Mnk99/j8tiZDM/7706PCqvkQ8sSCnpmWxsgX+g0lj7r5OBVL0U36pIecCTBoIWcM2RuKw==
+  dependencies:
+    motion-dom "^12.23.6"
+    motion-utils "^12.23.6"
+    tslib "^2.4.0"
+
 fsevents@~2.3.2, fsevents@~2.3.3:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
@@ -2581,11 +2590,23 @@ motion-dom@^12.12.1:
   dependencies:
     motion-utils "^12.12.1"
 
+motion-dom@^12.23.6:
+  version "12.23.6"
+  resolved "https://registry.yarnpkg.com/motion-dom/-/motion-dom-12.23.6.tgz#03856178d92a3b460797b57fa3b20e06847f8dab"
+  integrity sha512-G2w6Nw7ZOVSzcQmsdLc0doMe64O/Sbuc2bVAbgMz6oP/6/pRStKRiVRV4bQfHp5AHYAKEGhEdVHTM+R3FDgi5w==
+  dependencies:
+    motion-utils "^12.23.6"
+
 motion-utils@^12.12.1:
   version "12.12.1"
   resolved "https://registry.yarnpkg.com/motion-utils/-/motion-utils-12.12.1.tgz#63e28751325cb9d1cd684f3c273a570022b0010e"
   integrity sha512-f9qiqUHm7hWSLlNW8gS9pisnsN7CRFRD58vNjptKdsqFLpkVnX00TNeD6Q0d27V9KzT7ySFyK1TZ/DShfVOv6w==
 
+motion-utils@^12.23.6:
+  version "12.23.6"
+  resolved "https://registry.yarnpkg.com/motion-utils/-/motion-utils-12.23.6.tgz#fafef80b4ea85122dd0d6c599a0c63d72881f312"
+  integrity sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==
+
 ms@^2.1.3:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"

src/MotionDrawer/MotionDrawer.tsx

@@ -42,7 +42,7 @@ const MotionDrawer = ({
     modalOptions,
     children,
 }: IProps, ref?: ForwardedRef<HTMLDivElement>) => {
-    const {style, className, isMaskHidden, isHideWithMaskClick, isBodyScrollEnable, isFixedDisabled, animation} = modalOptions ?? {className: ''};
+    const {style, className, isMaskHidden, isHideWithMaskClick, isBodyScrollEnable, isFixedDisabled, animation, _onHide, _onShow} = modalOptions ?? {className: ''};
     const id = useId();
     const isPresent = useIsPresent();
 
@@ -67,6 +67,14 @@ const MotionDrawer = ({
         };
     }, []);
 
+    useEffect(() => {
+        if(_onShow) _onShow(id);
+
+        return () => {
+            if(_onHide) _onHide(id);
+        };
+    }, [_onShow, _onHide]);
+
 
     /**
      * 渲染主內容

src/types.ts

@@ -48,7 +48,7 @@ export type TAnimationConfig = {
     transition?: Transition,
 }
 
-export interface IModalOptions {
+export interface IModalOptions extends IControlVisibleStatus{
     animation?: TAnimationConfig
     className?: string
     style?: CSS.Properties
@@ -58,7 +58,7 @@ export interface IModalOptions {
     isFixedDisabled?: boolean
 }
 
-export interface IStageModalOptions extends IModalOptions, IControlVisibleStatus{
+export interface IStageModalOptions extends IModalOptions{
     queueKey?: string
     animatePresenceMode?: AnimatePresenceProps['mode']
 }