useDetail

React

/**
 * @description: 可用于弹框 / 抽屉等
 * @author: NHF
 */
import { useState, useCallback } from 'react';
export interface DetailState<T, U> {
  visible: boolean;
  data: T;
  type?: U;
}
export interface DetailActions<T, U> {
  show?: (data?: T, type?: U) => void;
  hide?: () => void;
  setState?: React.Dispatch<React.SetStateAction<DetailState<T, U>>>;
}
const useDetail = <T, U = BaseModalType>(
  initialState: T = {} as T,
  type?: U,
): [DetailState<T, U>, DetailActions<T, U>] => {
  const [state, setState] = useState<DetailState<T, U>>({
    type,
    visible: false,
    data: initialState,
  });
  const show = useCallback(
    (data?: T, showType?: U) => {
      setState({
        type: showType,
        visible: true,
        data: data as T,
      });
    },
    [setState],
  );
  const hide = useCallback(() => {
    setState({
      type: undefined,
      visible: false,
      data: initialState,
    });
  }, [setState, initialState]);
  return [state, { show, hide, setState }];
};
export default useDetail;