fix: update mask component

package.json

@@ -84,6 +84,7 @@
     "webpack": "^5.73.0"
   },
   "dependencies": {
+    "@react-spring/web": "^9.5.2",
     "antd-mobile": "^5.20.0",
     "antd-mobile-icons": "^0.3.0",
     "classnames": "^2.3.1",

packages/dialog/index.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+export interface DialogProps {
+  header?: React.ReactNode;
+  title?: React.ReactNode;
+  content?: React.ReactNode;
+  /** Dialog关闭时的回调 */
+  onClose?: () => void;
+}
+
+const Dialog: React.FC<DialogProps> = () => {
+  return <>1</>;
+};
+
+Dialog.displayName = 'Dialog';
+
+export default Dialog;

packages/index.tsx

@@ -72,6 +72,9 @@ export { default as Selector } from '@/selector';
 export type { SliderProps } from '@/slider';
 export { default as Slider } from '@/slider';
 
+export type { DialogProps } from '@/dialog';
+export { default as Dialog } from '@/dialog';
+
 // hooks
 export { default as useMount } from '@/hooks/useMount';
 export { default as useEffectOnce } from '@/hooks/useEffectOnce';

packages/mask/index.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import cx from 'classnames';
-import { CSSTransition } from 'react-transition-group';
+import { useSpring, animated } from '@react-spring/web';
 
 import useScrollLock from '@/hooks/useScrollLock';
 
@@ -9,43 +8,41 @@ import './styles/index.scss';
 export interface MaskProps {
   /** 是否可见 */
   visible: boolean;
-  /** class name */
-  maskClassName?: string;
-  /** style属性 */
-  maskStyle?: React.CSSProperties;
   /** 点击蒙层触发回调 */
   onMaskClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+  style?: React.CSSProperties & Partial<Record<'--z-index' | '--background', string>>;
 }
 
-const Mask: React.FC<MaskProps> = React.memo(({ visible, maskClassName, maskStyle, onMaskClick }) => {
-  useScrollLock(visible);
+const classPrefix = 'ygm-mask';
+
+const Mask: React.FC<MaskProps> = (props) => {
+  useScrollLock(props.visible);
 
   const onMask = React.useCallback(
     (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
       e.stopPropagation();
-      onMaskClick?.(e);
+      props.onMaskClick?.(e);
     },
-    [onMaskClick]
+    [props.onMaskClick]
   );
 
+  const { opacity } = useSpring({
+    opacity: props.visible ? 1 : 0,
+    config: {
+      tension: 250,
+      friction: 30,
+      clamp: true,
+    },
+  });
+
   return (
-    <CSSTransition
-      in={visible}
-      timeout={300}
-      classNames={{
-        enter: 'ygm-mask-enter',
-        enterActive: 'ygm-mask-enter-active',
-        enterDone: 'ygm-mask-enter-done',
-        exit: 'ygm-mask-exit',
-        exitActive: 'ygm-mask-exit-active',
-        exitDone: 'ygm-mask-exit-done',
-      }}
-      unmountOnExit
-    >
-      <div style={maskStyle} className={cx('ygm-mask', maskClassName)} onClick={onMask} />
-    </CSSTransition>
+    <animated.div
+      className={classPrefix}
+      style={{ ...props.style, opacity, display: props.visible ? undefined : 'none' }}
+      onClick={onMask}
+    />
   );
-});
+};
 
 export default Mask;
 

packages/mask/styles/index.scss

@@ -1,37 +1,16 @@
-.ygm-mask {
-  z-index: 999;
+$class-prefix-mask: 'ygm-mask';
+
+.#{$class-prefix-mask} {
+  --z-index: 999;
+  --background: rgba(0, 0, 0, 0.55);
+
   position: fixed;
   top: 0;
   left: 0;
+  z-index: var(--z-index);
   width: 100%;
   height: 100%;
   display: block;
-  background: rgba(0, 0, 0, 0.55);
+  background: var(--background);
   overflow: hidden;
-
-  &-enter {
-    opacity: 0;
-  }
-
-  &-enter-active {
-    opacity: 1;
-    transition: opacity 0.3s ease-in;
-  }
-
-  &-enter-done {
-    opacity: 1;
-  }
-
-  &-exit {
-    opacity: 1;
-  }
-
-  &-exit-active {
-    opacity: 0;
-    transition: opacity 0.3s ease-in;
-  }
-
-  &-exit-done {
-    opacity: 0;
-  }
 }

stories/dialog/index.stories.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Meta } from '@storybook/react';
+
+import Dialog from '@/dialog';
+
+import DemoWrap from '../../demos/demo-wrap';
+import DemoBlock from '../../demos/demo-block';
+
+const DialogStory: Meta = {
+  title: '反馈/Dialog 弹出框',
+  component: Dialog,
+};
+
+export const Basic = () => {
+  return (
+    <DemoWrap>
+      <DemoBlock title="基础用法" style={{ padding: 20 }}>
+        <Dialog title="标题" content="代码是写出来给人看的，附带能在机器上运行" />
+      </DemoBlock>
+    </DemoWrap>
+  );
+};
+
+Basic.storyName = '基本用法';
+
+export default DialogStory;

stories/mask/index.stories.tsx

@@ -4,19 +4,33 @@ import { Meta } from '@storybook/react';
 import Mask from '@/mask';
 import Button from '@/button';
 
+import DemoWrap from '../../demos/demo-wrap';
+import DemoBlock from '../../demos/demo-block';
+
 const MaskStory: Meta = {
   title: '反馈/Mask 遮罩层',
   component: Mask,
 };
 
 export const Basic = () => {
-  const [visible, setVisible] = React.useState<boolean>(false);
-
+  const [visible1, setVisible1] = React.useState<boolean>(false);
+  const [visible2, setVisible2] = React.useState<boolean>(false);
   return (
-    <div>
-      <Button onClick={() => setVisible(true)}>显示遮罩层</Button>
-      <Mask visible={visible} onMaskClick={() => setVisible(false)} />
-    </div>
+    <DemoWrap>
+      <DemoBlock title="基本用法">
+        <Button onClick={() => setVisible1(true)}>显示遮罩</Button>
+        <Mask visible={visible1} onMaskClick={() => setVisible1(false)} />
+      </DemoBlock>
+
+      <DemoBlock title="自定义颜色">
+        <Button onClick={() => setVisible2(true)}>自定义颜色遮罩</Button>
+        <Mask
+          visible={visible2}
+          style={{ '--background': 'rgba(0, 0, 0, .2)' }}
+          onMaskClick={() => setVisible2(false)}
+        />
+      </DemoBlock>
+    </DemoWrap>
   );
 };