feat: 1

src/components/ModalStore/src/CreateProvider.tsx

@@ -1,4 +1,5 @@
 import { message } from 'antd'
+import type { CSSProperties } from 'react'
 import React from 'react'
 import { ModalContext } from './context'
 export interface ModalFullConfig<T = any> {
@@ -104,6 +105,8 @@ class ModalStore extends React.Component<ModalStoreProps, ModalStoreState> {
         ...defaultProps,
         key
       }
+      // console.log(key)
+
       const nextModals = prevModals.slice()
 
       const index = nextModals.findIndex(item => item.key === key)
@@ -136,20 +139,45 @@ class ModalStore extends React.Component<ModalStoreProps, ModalStoreState> {
 
   private renderModal = (item: ModalItem) => {
     const { config } = this.getModalConfig(item.key)
+    const nodeProps = this.renderMaskProps(item)
     if (config) {
       // 弹窗
       if ('component' in config) {
-        return React.createElement(config.component, item)
+        return React.createElement(config.component, nodeProps)
       }
       // 抽屉
-      return React.createElement(config, item)
+      return React.createElement(config, nodeProps)
     }
     return null
   }
 
+  private renderMaskProps = (item: ModalItem) => {
+    // 没有dataId 不是抽屉
+    if (!item.dataId) return item
+    const drawerStore = this.state.currentModal
+      .filter(modal => modal.dataId)
+      .map(modal => modal.dataId)
+    const len = drawerStore.length
+    if (len === 1) return item
+    // 抽屉至少2个
+    const currentIdx = drawerStore.findIndex(modal => modal === item.dataId)
+    if (currentIdx === 0) return item
+    if (currentIdx > 0) {
+      // 大于0说明是第二或以上的抽屉了
+      console.log(len, currentIdx)
+
+      return {
+        ...item,
+        maskStyle: { opacity: 0, animation: 'none' } as CSSProperties
+        // style: { transform: `translateX(-${(len - currentIdx) * 10}px)` }
+      }
+    }
+    return item
+  }
   render() {
     const { currentModal } = this.state
     const { children } = this.props
+
     return (
       <ModalContext.Provider value={this.push}>
         {children}