@confi/conflux-react-ui-test-package/esm/modal/modal.js

Modern and minimalist React UI library.

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React, { useEffect, useMemo } from 'react';
import { createPortal } from 'react-dom';
import usePortal from '../utils/use-portal';
import ModalWrapper from './modal-wrapper';
import ModalAction from './modal-action';
import ModalActions from './modal-actions';
import Backdrop from '../shared/backdrop';
import { ModalContext } from './modal-context';
import { pickChild } from '../utils/collections';
import useBodyScroll from '../utils/use-body-scroll';
import useCurrentState from '../utils/use-current-state';
var defaultProps = {
  width: '26rem',
  wrapClassName: '',
  disableBackdropClick: false
};

var Modal = function Modal(_ref) {
  var children = _ref.children,
      disableBackdropClick = _ref.disableBackdropClick,
      onClose = _ref.onClose,
      onOpen = _ref.onOpen,
      open = _ref.open,
      wrapperWidth = _ref.width,
      wrapClassName = _ref.wrapClassName;
  var portal = usePortal('modal');

  var _useBodyScroll = useBodyScroll(),
      _useBodyScroll2 = _slicedToArray(_useBodyScroll, 2),
      setBodyHidden = _useBodyScroll2[1];

  var _useCurrentState = useCurrentState(false),
      _useCurrentState2 = _slicedToArray(_useCurrentState, 3),
      visible = _useCurrentState2[0],
      setVisible = _useCurrentState2[1],
      visibleRef = _useCurrentState2[2];

  var _pickChild = pickChild(children, ModalAction),
      _pickChild2 = _slicedToArray(_pickChild, 2),
      withoutActionsChildren = _pickChild2[0],
      ActionsChildren = _pickChild2[1];

  var hasActions = ActionsChildren && React.Children.count(ActionsChildren) > 0;

  var closeModal = function closeModal() {
    onClose && onClose();
    setVisible(false);
    setBodyHidden(false);
  };

  useEffect(function () {
    if (open === undefined) return;

    if (open) {
      onOpen && onOpen();
    }

    if (!open && visibleRef.current) {
      onClose && onClose();
    }

    setVisible(open);
    setBodyHidden(open);
  }, [open]);

  var closeFromBackdrop = function closeFromBackdrop() {
    if (disableBackdropClick && hasActions) return;
    closeModal();
  };

  var modalConfig = useMemo(function () {
    return {
      close: closeModal
    };
  }, []);
  if (!portal) return null;
  return createPortal( /*#__PURE__*/React.createElement(ModalContext.Provider, {
    value: modalConfig
  }, /*#__PURE__*/React.createElement(Backdrop, {
    onClick: closeFromBackdrop,
    visible: visible
  }, /*#__PURE__*/React.createElement(ModalWrapper, {
    visible: visible,
    className: wrapClassName,
    width: wrapperWidth
  }, withoutActionsChildren, hasActions && /*#__PURE__*/React.createElement(ModalActions, null, ActionsChildren)))), portal);
};

Modal.defaultProps = defaultProps;
export default Modal;