|
@@ -28,6 +28,8 @@ export interface ModalStoreState {
|
|
|
currentModal: ModalItem[]
|
|
currentModal: ModalItem[]
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+const indent = 8
|
|
|
|
|
+
|
|
|
const ModalStore: React.FC<ModalStoreProps> = props => {
|
|
const ModalStore: React.FC<ModalStoreProps> = props => {
|
|
|
const dispatch = useDispatch()
|
|
const dispatch = useDispatch()
|
|
|
const [state, setState] = useState<ModalStoreState>({
|
|
const [state, setState] = useState<ModalStoreState>({
|
|
@@ -80,8 +82,11 @@ const ModalStore: React.FC<ModalStoreProps> = props => {
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
function push(key: string, compState: any) {
|
|
function push(key: string, compState: any) {
|
|
|
|
|
+ console.log(key)
|
|
|
|
|
+
|
|
|
|
|
+ const isDrawer = key.startsWith('D')
|
|
|
// eslint-disable-next-line no-param-reassign
|
|
// eslint-disable-next-line no-param-reassign
|
|
|
- key = compState?.dataId ? `${key}@${compState?.dataId}` : key
|
|
|
|
|
|
|
+ key = isDrawer && compState?.dataId ? `${key}@${compState?.dataId}` : key
|
|
|
const { visiblePropName, onClosePropName, destroyOnClose } = getModalConfig(key)
|
|
const { visiblePropName, onClosePropName, destroyOnClose } = getModalConfig(key)
|
|
|
|
|
|
|
|
setModalState(prevModals => {
|
|
setModalState(prevModals => {
|
|
@@ -89,11 +94,7 @@ const ModalStore: React.FC<ModalStoreProps> = props => {
|
|
|
[visiblePropName]: key.startsWith('D') ? false : true,
|
|
[visiblePropName]: key.startsWith('D') ? false : true,
|
|
|
[onClosePropName]: getCloseFunction(key, compState?.[onClosePropName])
|
|
[onClosePropName]: getCloseFunction(key, compState?.[onClosePropName])
|
|
|
}
|
|
}
|
|
|
- compState?.dataId &&
|
|
|
|
|
- dispatch({
|
|
|
|
|
- type: 'refresh/commitAction',
|
|
|
|
|
- payload: compState.dataId
|
|
|
|
|
- })
|
|
|
|
|
|
|
+
|
|
|
if (destroyOnClose) {
|
|
if (destroyOnClose) {
|
|
|
const prop = typeof destroyOnClose === 'string' ? destroyOnClose : onClosePropName
|
|
const prop = typeof destroyOnClose === 'string' ? destroyOnClose : onClosePropName
|
|
|
|
|
|
|
@@ -113,17 +114,23 @@ const ModalStore: React.FC<ModalStoreProps> = props => {
|
|
|
const index = nextModals.findIndex(item => item.key === key)
|
|
const index = nextModals.findIndex(item => item.key === key)
|
|
|
|
|
|
|
|
if (index !== -1) {
|
|
if (index !== -1) {
|
|
|
- if (key.startsWith('D')) {
|
|
|
|
|
|
|
+ if (isDrawer) {
|
|
|
message.warning('当前窗口正在运行中,请勿重复打开')
|
|
message.warning('当前窗口正在运行中,请勿重复打开')
|
|
|
return prevModals
|
|
return prevModals
|
|
|
}
|
|
}
|
|
|
nextModals.splice(index, 1)
|
|
nextModals.splice(index, 1)
|
|
|
|
|
+ compState?.dataId &&
|
|
|
|
|
+ dispatch({
|
|
|
|
|
+ type: 'refresh/commitAction',
|
|
|
|
|
+ payload: compState.dataId
|
|
|
|
|
+ })
|
|
|
}
|
|
}
|
|
|
nextModals.push(newModal)
|
|
nextModals.push(newModal)
|
|
|
|
|
|
|
|
return nextModals
|
|
return nextModals
|
|
|
})
|
|
})
|
|
|
- if (key.startsWith('D')) {
|
|
|
|
|
|
|
+ if (isDrawer) {
|
|
|
|
|
+ if (state.currentModal.find(item => item.key === key)) return
|
|
|
// 利用事件循环,先让dom元素渲染出来再使其展示动画(否则可能导致抽屉无动画直接出现)
|
|
// 利用事件循环,先让dom元素渲染出来再使其展示动画(否则可能导致抽屉无动画直接出现)
|
|
|
setTimeout(() => {
|
|
setTimeout(() => {
|
|
|
setModalState(prevModals =>
|
|
setModalState(prevModals =>
|
|
@@ -153,24 +160,30 @@ const ModalStore: React.FC<ModalStoreProps> = props => {
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
function renderMaskProps(item: ModalItem) {
|
|
function renderMaskProps(item: ModalItem) {
|
|
|
- // 没有dataId 不是抽屉
|
|
|
|
|
- if (!item.dataId) return item
|
|
|
|
|
- const drawerStore = state.currentModal.filter(modal => modal.dataId).map(modal => modal.dataId)
|
|
|
|
|
|
|
+ const newItem = { ...item }
|
|
|
|
|
+ const isModal = item.key.startsWith('M')
|
|
|
|
|
+ const maskStyle: CSSProperties = {}
|
|
|
|
|
+ if (state.currentModal.findIndex(modal => modal.key === item.key) > 0) {
|
|
|
|
|
+ maskStyle.opacity = 0
|
|
|
|
|
+ maskStyle.animation = 'none'
|
|
|
|
|
+ newItem.maskStyle = maskStyle
|
|
|
|
|
+ }
|
|
|
|
|
+ if (isModal && !item.dataId) return newItem
|
|
|
|
|
+ const drawerStore = state.currentModal
|
|
|
|
|
+ .filter(modal => modal.key.startsWith('D'))
|
|
|
|
|
+ .map(modal => modal.dataId)
|
|
|
const len = drawerStore.length
|
|
const len = drawerStore.length
|
|
|
- if (len === 1) return item
|
|
|
|
|
- // 抽屉至少2个
|
|
|
|
|
const currentIdx = drawerStore.findIndex(modal => modal === item.dataId)
|
|
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
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ if (len - 1 === currentIdx) return newItem
|
|
|
|
|
+ // 抽屉大于2个
|
|
|
|
|
+
|
|
|
|
|
+ return {
|
|
|
|
|
+ ...item,
|
|
|
|
|
+ style: {
|
|
|
|
|
+ transform: `translateX(-${indent * (len - currentIdx - 1)}px)`
|
|
|
|
|
+ },
|
|
|
|
|
+ maskStyle
|
|
|
}
|
|
}
|
|
|
- return item
|
|
|
|
|
}
|
|
}
|
|
|
const { currentModal } = state
|
|
const { currentModal } = state
|
|
|
const { children } = props
|
|
const { children } = props
|