feat: add className *-mask-blur

Author: 刘欢

README.md

@@ -65,7 +65,7 @@ ReactDOM.render(
 | title | String\|React.Element |  | Title of the dialog |  |
 | footer | React.Element |  | footer of the dialog |  |
 | closable | Boolean \| ({ closeIcon?: React.ReactNode; disabled?: boolean, afterClose:function } & React.AriaAttributes) | true | whether show close button |  |
-| mask | Boolean | true | whether show mask |  |
+| mask | Boolean \| `blur` | true | whether show mask |  |
 | maskClosable | Boolean | true | whether click mask to close |  |
 | keyboard | Boolean | true | whether support press esc to close |  |
 | mousePosition | {x:number,y:number} |  | set pageX and pageY of current mouse(it will cause transform origin to be set). |  |
@@ -104,8 +104,7 @@ open coverage/ dir
 
 rc-dialog is released under the MIT license.
 
-
-## 🤝 Contributing 
+## 🤝 Contributing
 
 <a href="https://openomy.app/github/react-component/dialog" target="_blank" style="display: block; width: 100%;" align="center">
   <img src="https://www.openomy.app/svg?repo=react-component/dialog&chart=bubble&latestMonth=24" target="_blank" alt="Contribution Leaderboard" style="display: block; width: 100%;" />

assets/index/Mask.less

@@ -10,7 +10,9 @@
     height: 100%;
     filter: alpha(opacity=50);
     z-index: 1050;
-
+    &&-blur {
+      backdrop-filter: blur(4px);
+    }
     &-hidden {
       display: none;
     }
@@ -22,7 +24,8 @@
     animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2);
   }
 
-  &-fade-enter,&-fade-appear {
+  &-fade-enter,
+  &-fade-appear {
     opacity: 0;
     .fade-effect();
     animation-play-state: paused;
@@ -33,7 +36,8 @@
     animation-play-state: paused;
   }
 
-  &-fade-enter&-fade-enter-active,&-fade-appear&-fade-appear-active  {
+  &-fade-enter&-fade-enter-active,
+  &-fade-appear&-fade-appear-active {
     animation-name: rcDialogFadeIn;
     animation-play-state: running;
   }

src/Dialog/Mask.tsx

@@ -9,10 +9,11 @@ export type MaskProps = {
   style?: React.CSSProperties;
   maskProps?: React.HTMLAttributes<HTMLDivElement>;
   className?: string;
+  mask?: boolean | 'blur';
 };
 
 const Mask: React.FC<MaskProps> = (props) => {
-  const { prefixCls, style, visible, maskProps, motionName, className } = props;
+  const { prefixCls, style, visible, maskProps, motionName, className, mask } = props;
   return (
     <CSSMotion
       key="mask"
@@ -24,7 +25,12 @@ const Mask: React.FC<MaskProps> = (props) => {
         <div
           ref={ref}
           style={{ ...motionStyle, ...style }}
-          className={classNames(`${prefixCls}-mask`, motionClassName, className)}
+          className={classNames(
+            `${prefixCls}-mask`,
+            motionClassName,
+            className,
+            mask === 'blur' && `${prefixCls}-mask-blur`,
+          )}
           {...maskProps}
         />
       )}

src/Dialog/index.tsx

@@ -198,6 +198,7 @@ const Dialog: React.FC<IDialogPropTypes> = (props) => {
         style={{ zIndex, ...maskStyle, ...modalStyles?.mask }}
         maskProps={maskProps}
         className={modalClassNames?.mask}
+        mask={mask}
       />
       <div
         tabIndex={-1}

src/IDialogPropTypes.tsx

@@ -1,7 +1,14 @@
 import type { GetContainer } from '@rc-component/util/lib/PortalWrapper';
 import type { CSSProperties, ReactNode, SyntheticEvent } from 'react';
 
-export type SemanticName = 'header' | 'body' | 'footer' | 'container' | 'title' | 'wrapper' | 'mask';
+export type SemanticName =
+  | 'header'
+  | 'body'
+  | 'footer'
+  | 'container'
+  | 'title'
+  | 'wrapper'
+  | 'mask';
 
 export type ModalClassNames = Partial<Record<SemanticName, string>>;
 
@@ -18,7 +25,7 @@ export type IDialogPropTypes = {
   keyboard?: boolean;
   style?: CSSProperties;
   rootStyle?: CSSProperties;
-  mask?: boolean;
+  mask?: boolean | 'blur';
   children?: React.ReactNode;
   afterClose?: () => any;
   afterOpenChange?: (open: boolean) => void;

tests/index.spec.tsx

@@ -752,4 +752,11 @@ describe('dialog', () => {
     expect(document.querySelector('.rc-dialog')).toBeTruthy();
     expect(document.querySelector('.rc-dialog-close')).toBeFalsy();
   });
+
+  it('Dialog mask blur', () => {
+    render(<Dialog mask="blur" visible/>);
+    jest.runAllTimers();
+    expect(document.querySelector('.rc-dialog-root')).toBeTruthy();
+    expect(document.querySelector('.rc-dialog-mask-blur')).toBeTruthy();
+  });
 });