ad-manage/src/models/useOperating/useMaterialModal.ts

import { useCallback, useReducer } from 'react'
type State = {
    visible: boolean,//弹窗开关
    actionUrl?: string,//选中的图片
    file?: File//上传的文件
}
export type Action = {
    type: 'hide' | 'show' | 'action' | 'file',
    params?: any
}
export function reducer(state: State, action: Action) {
    let { type, params } = action
    switch (type) {
        case 'show':
            return { ...state, visible: true }
        case 'hide':
            return { ...state, visible: false }
        case 'action':
            return { ...state, actionUrl: params.url }
        case 'file':
            return { ...state, file: params.file }
        default:
            return state;
    }
}

export default function useMaterialModal() {
    const [state, dispatch] = useReducer(reducer, { visible: false })
    const show = useCallback(() => {
        dispatch({ type: 'show' })
    }, [])
    const hide = useCallback(() => {
        dispatch({ type: 'hide' })
    }, [])
    const action = useCallback((url) => {
        dispatch({ type: 'action', params: { url } })
    }, [])
    return {
        state,
        show,
        hide,
        action,
        dispatch
    }
}