feat: add baseMask components & format demo

Author: Wxh16144

.eslintrc

@@ -9,7 +9,8 @@
         "**/demo/**/*.jsx"
       ],
       "rules": {
-        "no-console": "off"
+        "no-console": "off",
+        "no-alert": "off"
       }
     }
   ]

config/menus/mobile.ts

@@ -10,6 +10,7 @@ const mobileComponent: ComponentMenus = {
   dataEntry: [],
   feedback: [
     'src/base-popup',
+    'src/base-mask',
   ],
   guidance: [],
   other: [],

packages/mobile-ui/src/base-mask/demo/Base.tsx

@@ -0,0 +1,32 @@
+import React, { useRef } from 'react'
+import type { UseModalEnhancedAction, UseModalEnhancedContext } from '@template-pro/mobile-ui'
+import { BaseMask, Button } from '@template-pro/mobile-ui'
+import styles from './style.less'
+
+const Content = ({ enhancedAction }: Partial<UseModalEnhancedContext>) => (
+  <div className={styles.overlayContent}>
+    <h3>这是背景蒙层内容</h3>
+    <Button onClick={enhancedAction?.close}>
+      点击关闭背景蒙层
+    </Button>
+  </div>
+)
+
+function App() {
+  const maskRef = useRef<UseModalEnhancedAction>(null)
+  return (
+    <>
+      <BaseMask
+        trigger={<Button>打开背景蒙层</Button>}
+        actionRef={maskRef}
+        onMaskClick={() => window.console.log('点击了背景蒙层')}
+      >
+        <Content />
+      </BaseMask>
+
+      <Button onClick={() => maskRef.current?.open()}>App ref 打开背景蒙层</Button>
+    </>
+  )
+}
+
+export default App

packages/mobile-ui/src/base-mask/demo/Event.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import { BaseMask } from '@template-pro/mobile-ui'
+import { Button, Toast } from 'antd-mobile'
+import styles from './style.less'
+
+export default () => (
+  <>
+    <BaseMask
+      trigger={<Button>Click me</Button>}
+      onClick={(event, action) => {
+        window.console.log({ event, action })
+        Toast.show({
+          content: '1秒后打开背景蒙层',
+          icon: 'loading',
+          duration: 1000,
+          afterClose() {
+            action.open()
+            setTimeout(() => {
+              Toast.show({
+                content: '1秒后关闭背景蒙层',
+                duration: 1000,
+                afterClose: action.close,
+              })
+            }, 500)
+          },
+        })
+      }}
+    >
+      <div className={styles.overlayContent}>这是背景蒙层内容</div>
+    </BaseMask>
+  </>
+)

packages/mobile-ui/src/base-mask/demo/style.less

@@ -0,0 +1,15 @@
+.overlayContent {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-around;
+  width: 200px;
+  height: 200px;
+  margin-top: -100px;
+  margin-left: -100px;
+  background: white;
+  border-radius: 16px;
+}

packages/mobile-ui/src/base-mask/index.md

@@ -0,0 +1,9 @@
+# BaseMask
+
+## 基础用法
+
+<code hideActions='["CSB", "EXTERNAL"]' src="./demo/Base.tsx" />
+
+## 通过事件手动控制打开
+
+<code hideActions='["CSB", "EXTERNAL"]' src="./demo/Event.tsx" />

packages/mobile-ui/src/base-mask/index.tsx

@@ -0,0 +1,53 @@
+import React from 'react'
+import classNames from 'classnames'
+import type { MaskProps } from 'antd-mobile/es/components/mask'
+import Mask from 'antd-mobile/es/components/mask'
+import type { UseModalEnhancedProps } from '@template-pro/utils'
+import { useModalEnhanced } from '@template-pro/utils'
+import { defaultPrefixCls } from '../constants'
+
+export type BaseMaskProps = MaskProps & Omit<UseModalEnhancedProps, 'content'> & {
+  trigger?: React.ReactNode
+}
+
+const BaseMask = (props: BaseMaskProps) => {
+  const {
+    className,
+    children,
+    trigger: propsTrigger,
+    afterClose,
+    ...restProps
+  } = props
+
+  const [
+    visible,
+    { close },
+    { trigger, content },
+  ] = useModalEnhanced({
+    children: propsTrigger,
+    content: children,
+    ...restProps,
+  })
+
+  const handleMaskClose = () => {
+    afterClose?.()
+    close()
+  }
+
+  return (
+    <>
+      {trigger}
+      <Mask
+        visible={visible}
+        afterClose={handleMaskClose}
+        className={classNames(`${defaultPrefixCls}-base-mask`, className)}
+        destroyOnClose
+        {...restProps}
+      >
+        {content}
+      </Mask>
+    </>
+  )
+}
+
+export default BaseMask

packages/mobile-ui/src/base-mask/style/index.less

@@ -0,0 +1,6 @@
+@import (less) '~antd-mobile/es/components/mask/mask.css';
+@import '../../styles/themes/default.less';
+
+.@{cls-prefix}-base-mask {
+ 
+}

packages/mobile-ui/src/base-mask/style/index.tsx

@@ -0,0 +1 @@
+import './index.less'

packages/mobile-ui/src/base-popup/demo/Base.tsx

@@ -1,7 +1,6 @@
 import React, { useRef } from 'react'
-import { Button } from 'antd-mobile'
 import type { UseModalEnhancedAction, UseModalEnhancedContext } from '@template-pro/mobile-ui'
-import { BasePopup } from '@template-pro/mobile-ui'
+import { BasePopup, Button } from '@template-pro/mobile-ui'
 
 const Content = ({ enhancedAction }: Partial<UseModalEnhancedContext>) => (
   <div style={{ padding: 24 }}>
@@ -13,16 +12,22 @@ const Content = ({ enhancedAction }: Partial<UseModalEnhancedContext>) => (
 )
 
 function App() {
-  const drawerRef = useRef<UseModalEnhancedAction>(null)
+  const popupRef = useRef<UseModalEnhancedAction>(null)
 
   return (
-    <BasePopup
-      content={<Content />}
-      bodyStyle={{ height: '40vh' }}
-      actionRef={drawerRef}
-    >
-      <Button>打开弹出层</Button>
-    </BasePopup>
+    <>
+      <BasePopup
+        content={<Content />}
+        bodyStyle={{ height: '40vh' }}
+        actionRef={popupRef}
+      >
+        <Button>打开弹出层</Button>
+      </BasePopup>
+
+      <Button onClick={() => popupRef.current?.open()}>
+        App ref 打开弹出层
+      </Button>
+    </>
   )
 }
 

packages/mobile-ui/src/base-popup/demo/Event.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import { BasePopup } from '@template-pro/mobile-ui'
-import { Button, Toast } from 'antd-mobile'
+import { BasePopup, Button } from '@template-pro/mobile-ui'
+import { Toast } from 'antd-mobile'
 
 export default () => (
   <>

packages/mobile-ui/src/button/style/index.less

@@ -2,5 +2,5 @@
 @import '../../styles/themes/default.less';
 
 .@{cls-prefix}-button {
-  box-sizing: border-box;
+  
 }

packages/mobile-ui/src/index.tsx

@@ -4,6 +4,9 @@ export { default as Button } from './button'
 export type { BasePopupProps } from './base-popup'
 export { default as BasePopup } from './base-popup'
 
+export type { BaseMaskProps } from './base-mask'
+export { default as BaseMask } from './base-mask'
+
 // Third-party library
 export { ConditionInput } from '@template-pro/rc-ui'
 export type { ConditionInputProps, ConditionInputCoverProps } from '@template-pro/rc-ui'

tsconfig.json

@@ -17,6 +17,7 @@
       "@template-pro/utils": ["./packages/utils/src/index"]
     },
     "types": ["node", "jest"],
+    "typeRoots": ["./typings", "./node_modules/@types"],
     "allowSyntheticDefaultImports": true,
     "skipLibCheck": true,
     "declaration": false,

typings/index.d.ts

@@ -0,0 +1,6 @@
+declare module '*.less' {
+  const value: {
+    [key: string]: string
+  }
+  export = value
+}