mh-rn-component/module/Dialog/useDialog.js

function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

import React, { createContext, useState, useMemo, useContext, useRef, useCallback } from 'react';
import Dialog from './index';
const DialogContext = /*#__PURE__*/createContext({
  dialogList: {},
  visibleDialogs: {},
  setDialog: () => {},
  hideDialog: () => {},
  hideAll: () => {}
});

const CustiomDialog = () => {
  const {
    dialogList,
    visibleDialogs,
    hideDialog
  } = useContext(DialogContext);

  const DialogListIds = () => {
    return Object.keys(visibleDialogs);
  };

  return /*#__PURE__*/React.createElement(React.Fragment, null, DialogListIds().map(id => {
    return /*#__PURE__*/React.createElement(Dialog, _extends({
      key: id,
      onChange: hideDialog,
      show: visibleDialogs[id]
    }, dialogList[id]));
  }));
};

export const DialogProvider = _ref => {
  let {
    children
  } = _ref;
  const [dialogList, setDialogList] = useState({});
  const [visibleDialogs, setVisibleDialogs] = useState({});
  const dialogIndex = useRef(9000);
  const hideDialog = useCallback(id => {
    setVisibleDialogs(prev => {
      return { ...prev,
        [id]: false
      };
    });
  }, [setVisibleDialogs]);
  const hideAll = useCallback(() => {
    setVisibleDialogs({});
  }, [setVisibleDialogs]);
  const setDialog = useCallback(props => {
    const {
      id = dialogIndex.current++,
      ...rest
    } = props;
    setDialogList(prev => {
      return { ...prev,
        [id]: {
          id,
          ...rest
        }
      };
    });
    setVisibleDialogs(prev => {
      return { ...prev,
        [id]: true
      };
    });
    return id;
  }, [dialogList, visibleDialogs, hideDialog]);
  const contextValue = useMemo(() => {
    return {
      dialogList,
      visibleDialogs,
      setDialog,
      hideDialog,
      hideAll
    };
  }, [dialogList, visibleDialogs, setDialog, hideDialog, hideAll]);
  return /*#__PURE__*/React.createElement(DialogContext.Provider, {
    value: contextValue
  }, children, /*#__PURE__*/React.createElement(CustiomDialog, null));
};
export const useDialog = () => {
  const {
    setDialog,
    hideDialog,
    hideAll
  } = useContext(DialogContext);
  const dialog = useMemo(() => ({
    show: setDialog,
    close: hideDialog,
    closeAll: hideAll
  }), [setDialog, hideDialog, hideAll]);
  return dialog;
};
//# sourceMappingURL=useDialog.js.map