ultra-design/es/drawer/drawer.js

import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _pt from 'prop-types';
import _regeneratorRuntime from '@babel/runtime/regenerator';
import { useMemo, useEffect } from 'react';
import { CSSTransition } from 'react-transition-group';
import Overlay from '../overlay/overlay.js';
import { drawerWrapperStyles } from './drawer-style.js';
import { Close } from '@icon-park/react';
import { useMergeProps } from '../utils/mergeProps.js';
import clsx from 'clsx';
import { usePortal } from 'winhooks';
import withStyle from '../utils/withStyle.js';
import getDrawerTransform from './drawer-transform.js';
import { jsxs, jsx } from '@emotion/react/jsx-runtime';

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
var defaultProps = {
  placement: 'right',
  keyboard: true,
  overlay: true,
  closeOnClickOverlay: true
};
var transitionClassNames = 'ultra-drawer-transition';

var Drawer = function Drawer(p) {
  var props = useMergeProps(defaultProps, _objectSpread({}, p));
  var getWidthOrHeight = useMemo(function () {
    if (['top', 'bottom'].includes(props.placement)) {
      return {
        height: 200
      };
    } else if (['left', 'right'].includes(props.placement)) {
      return {
        width: 200
      };
    }

    return {
      width: 200
    };
  }, [p.placement]);
  var placement = props.placement,
      title = props.title,
      visible = props.visible,
      onClose = props.onClose,
      keyboard = props.keyboard,
      overlay = props.overlay,
      closeOnClickOverlay = props.closeOnClickOverlay,
      beforeClose = props.beforeClose,
      showClose = props.showClose,
      children = props.children;

  var _usePortal = usePortal({
    id: 'ultra-drawer'
  }),
      Portal = _usePortal.Portal;

  var transition = useMemo(function () {
    return getDrawerTransform(placement, transitionClassNames);
  }, [placement]);

  var closeHandler = /*#__PURE__*/function () {
    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(e) {
      var cancelClose;
      return _regeneratorRuntime.wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              if (!beforeClose) {
                _context.next = 7;
                break;
              }

              _context.next = 3;
              return beforeClose();

            case 3:
              _context.t0 = _context.sent;
              cancelClose = _context.t0 === false;

              if (!cancelClose) {
                _context.next = 7;
                break;
              }

              return _context.abrupt("return");

            case 7:
              onClose === null || onClose === void 0 ? void 0 : onClose(e);

            case 8:
            case "end":
              return _context.stop();
          }
        }
      }, _callee);
    }));

    return function closeHandler(_x) {
      return _ref.apply(this, arguments);
    };
  }();

  var onClickOverlay = function onClickOverlay(e) {
    closeOnClickOverlay && closeHandler(e);
  };

  useEffect(function () {
    if (!keyboard) return;

    var listenEscKeyDown = function listenEscKeyDown(e) {
      if (e.code === 'Escape') {
        closeHandler(e);
      }
    };

    window.addEventListener('keydown', listenEscKeyDown);
    return function () {
      window.removeEventListener('keydown', listenEscKeyDown);
    };
  }, []);
  return jsxs(Portal, {
    children: [overlay && jsx(Overlay, {
      visible: visible,
      timeout: 300,
      onClick: onClickOverlay
    }), jsx("div", {
      css: drawerWrapperStyles(props),
      className: clsx('ultra-drawer-wrapper', "ultra-drawer-wrapper--".concat(placement), props.className),
      children: jsx(CSSTransition, {
        "in": visible,
        unmountOnExit: true,
        timeout: 300,
        classNames: transitionClassNames,
        children: jsxs("div", {
          className: "ultra-drawer",
          css: transition,
          style: getWidthOrHeight,
          children: [jsxs("div", {
            className: "ultra-drawer-header",
            children: [showClose && jsx(Close, {
              className: "ultra-drawer-header__close",
              onClick: closeHandler
            }), title && jsx("h4", {
              className: "ultra-drawer-header__title",
              children: title
            })]
          }), jsx("div", {
            className: "ultra-drawer-body",
            children: children
          })]
        })
      })
    })]
  });
};

Drawer.propTypes = {
  title: _pt.node,
  visible: _pt.bool.isRequired,
  placement: _pt.oneOf(['top', 'left', 'bottom', 'right']),
  onClose: _pt.func,
  beforeClose: _pt.func,
  width: _pt.oneOfType([_pt.string, _pt.number]),
  height: _pt.oneOfType([_pt.string, _pt.number]),
  keyboard: _pt.bool,
  overlay: _pt.bool,
  closeOnClickOverlay: _pt.bool,
  showClose: _pt.bool,
  children: _pt.node,
  className: _pt.string
};
Drawer.displayName = 'UltraDrawer';
var Drawer$1 = withStyle(Drawer);

export { Drawer$1 as default, transitionClassNames };