refactor: overlay(v2.0)

migrate-from-v1.md

@@ -25,6 +25,11 @@
 #### Icon
 #### Image
 #### Overlay
+- `overlayClass` 重命名为 `className`
+- `overlayStyle` 重命名为 `style`
+- `closeOnClickOverlay` 重命名为 `closeOnOverlayClick`
+- 增加 afterClose和afterShow，用于完全关闭后触发的回调和完全展示后触发的回调
+- 完善overlay的demo示例
 #### Popup
 
 ### 布局组件

package.json

@@ -202,4 +202,4 @@
     "@types/react": "18",
     "@types/react-dom": "18"
   }
-}
+}

src/packages/menuitem/menuitem.taro.tsx

@@ -146,11 +146,11 @@ export const MenuItem = forwardRef((props: Partial<MenuItemProps>, ref) => {
         onClick={() => parent.toggleItemShow(orderKey)}
       />
       <Overlay
-        overlayClass="nut-menu__overlay"
+        className="nut-menu__overlay"
         style={getPosition()}
         lockScroll={parent.lockScroll}
         visible={_showPopup}
-        closeOnClickOverlay={parent.closeOnClickOverlay}
+        closeOnOverlayClick={parent.closeOnClickOverlay}
         onClick={() => {
           parent.closeOnClickOverlay && parent.toggleItemShow(orderKey)
         }}

src/packages/menuitem/menuitem.tsx

@@ -144,11 +144,11 @@ export const MenuItem = forwardRef((props: Partial<MenuItemProps>, ref) => {
         onClick={() => parent.toggleItemShow(orderKey)}
       />
       <Overlay
-        overlayClass="nut-menu__overlay"
+        className="nut-menu__overlay"
         style={getPosition()}
         lockScroll={parent.lockScroll}
         visible={_showPopup}
-        closeOnClickOverlay={parent.closeOnClickOverlay}
+        closeOnOverlayClick={parent.closeOnClickOverlay}
         onClick={() => {
           parent.closeOnClickOverlay && parent.toggleItemShow(orderKey)
         }}

src/packages/overlay/__tests__/overlay.spec.tsx

@@ -24,7 +24,7 @@ test('prop close-on-click-overlay test', () => {
     <Overlay
       data-testid="overlay-closeFalsy"
       visible
-      closeOnClickOverlay={false}
+      closeOnOverlayClick={false}
       onClick={onClose}
     />
   )
@@ -38,7 +38,7 @@ test('event click test', () => {
     <Overlay
       data-testid="overlay-click"
       visible
-      closeOnClickOverlay
+      closeOnOverlayClick
       onClick={onClose}
     />
   )

src/packages/overlay/demo.taro.tsx

@@ -8,38 +8,53 @@ import Header from '@/sites/components/header'
 interface T {
   '84aa6bce': string
   '2a9e4928': string
+  duration: string
+  lockscroll: string
   abbf9359: string
   ec0d7acf: string
   ce1e18a2: string
+  closeClickLay: string
 }
 const OverlayDemo = () => {
   const [translated] = useTranslate<T>({
     'zh-CN': {
       '84aa6bce': '基础用法',
       '2a9e4928': '显示遮罩层',
+      duration: '设置动画时间',
+      lockscroll: '锁定背景滚动',
       abbf9359: '遮罩样式',
       ec0d7acf: '嵌套内容',
       ce1e18a2: '这里是正文',
+      closeClickLay: '点击遮罩不关闭',
     },
     'zh-TW': {
       '84aa6bce': '基礎用法',
       '2a9e4928': '顯示遮罩層',
+      duration: '設置動畫時間',
+      lockscroll: '鎖定背景滾動',
       abbf9359: '遮罩樣式',
       ec0d7acf: '嵌套內容',
       ce1e18a2: '這裡是正文',
+      closeClickLay: '點擊遮罩不關閉',
     },
     'en-US': {
       '84aa6bce': 'Basic usage',
-      '2a9e4928': 'show mask layer',
-      abbf9359: 'mask style',
+      '2a9e4928': 'Show mask layer',
+      duration: 'Set animation time',
+      lockscroll: 'Lock background scrolling',
+      abbf9359: 'Mask style',
       ec0d7acf: 'nested content',
       ce1e18a2: 'here is the text',
+      closeClickLay: 'Click the mask not to close',
     },
   })
 
   const [visible, setVisible] = useState(false)
   const [visible2, setVisible2] = useState(false)
   const [visible3, setVisible3] = useState(false)
+  const [visible4, setVisible4] = useState(false)
+  const [visible5, setVisible5] = useState(false)
+  const [visible6, setVisible6] = useState(false)
 
   const handleToggleShow = () => {
     setVisible(true)
@@ -48,8 +63,18 @@ const OverlayDemo = () => {
     setVisible2(true)
   }
   const handleToggleShow3 = () => {
+    console.log('visible3', visible3)
     setVisible3(true)
   }
+  const handleToggleShow4 = () => {
+    setVisible4(true)
+  }
+  const handleToggleShow5 = () => {
+    setVisible5(true)
+  }
+  const handleToggleShow6 = () => {
+    setVisible6(true)
+  }
 
   const onClose = () => {
     setVisible(false)
@@ -60,6 +85,15 @@ const OverlayDemo = () => {
   const onClose3 = () => {
     setVisible3(false)
   }
+  const onClose4 = () => {
+    setVisible4(false)
+  }
+  const onClose5 = () => {
+    setVisible5(false)
+  }
+  const onClose6 = () => {
+    setVisible6(false)
+  }
   return (
     <>
       <Header />
@@ -71,32 +105,83 @@ const OverlayDemo = () => {
           <Button type="primary" onClick={handleToggleShow}>
             {translated['2a9e4928']}
           </Button>
-          <Overlay visible={visible} onClick={onClose} />
+          <Overlay
+            visible={visible}
+            onClick={onClose}
+            zIndex={2020}
+            lockScroll
+            afterShow={() => {
+              console.log('afterShow')
+            }}
+          />
         </Cell>
+
         <h2>{translated.abbf9359}</h2>
         <Cell>
           <Button type="primary" onClick={handleToggleShow2}>
-            {translated['2a9e4928']}
+            {translated['abbf9359']}
           </Button>
           <Overlay
             visible={visible2}
             onClick={onClose2}
-            overlayStyle={{
-              backgroundColor: '#38333333',
+            zIndex={2000}
+            style={{
+              backgroundColor: 'rgba(0, 0, 0, .2)',
             }}
           />
         </Cell>
+
+        <h2>{translated.duration}</h2>
+        <Cell>
+          <Button type="primary" onClick={handleToggleShow3}>
+            {translated['duration']}
+          </Button>
+          <Overlay
+            visible={visible3}
+            onClick={onClose3}
+            duration={2.5}
+            afterShow={() => {
+              console.log('afterShow')
+            }}
+            afterClose={() => {
+              console.log('afterClose')
+            }}
+          />
+        </Cell>
+
+        <h2>{translated.lockscroll}</h2>
+        <Cell>
+          <Button type="primary" onClick={handleToggleShow4}>
+            {translated['lockscroll']}
+          </Button>
+          <Overlay visible={visible4} onClick={onClose4} lockScroll />
+        </Cell>
+
         <h2>{translated.ec0d7acf}</h2>
         <Cell>
-          <Button type="success" onClick={handleToggleShow3}>
+          <Button type="success" onClick={handleToggleShow5}>
             {translated.ec0d7acf}
           </Button>
-          <Overlay visible={visible3} onClick={onClose3}>
+          <Overlay visible={visible5} onClick={onClose5}>
             <div className="wrapper">
               <div className="content">{translated.ce1e18a2}</div>
             </div>
           </Overlay>
         </Cell>
+
+        <h2>{translated.closeClickLay}</h2>
+        <Cell>
+          <Button type="primary" onClick={handleToggleShow6}>
+            {translated.closeClickLay}
+          </Button>
+          <Overlay visible={visible6} lockScroll closeOnOverlayClick={false}>
+            <div className="wrapper">
+              <div className="content" onClick={onClose6}>
+                {translated.ce1e18a2}
+              </div>
+            </div>
+          </Overlay>
+        </Cell>
       </div>
     </>
   )