ultra-design/lib/drawer/drawer.js

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var _pt = require('prop-types');
var _regeneratorRuntime = require('@babel/runtime/regenerator');
var React = require('react');
var reactTransitionGroup = require('react-transition-group');
var overlay = require('../overlay/overlay.js');
var drawerStyle = require('./drawer-style.js');
var react = require('@icon-park/react');
var mergeProps = require('../utils/mergeProps.js');
var clsx = require('clsx');
var winhooks = require('winhooks');
var withStyle = require('../utils/withStyle.js');
var drawerTransform = require('./drawer-transform.js');
var jsxRuntime = require('@emotion/react/jsx-runtime');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var _asyncToGenerator__default = /*#__PURE__*/_interopDefaultLegacy(_asyncToGenerator);
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
var _pt__default = /*#__PURE__*/_interopDefaultLegacy(_pt);
var _regeneratorRuntime__default = /*#__PURE__*/_interopDefaultLegacy(_regeneratorRuntime);
var clsx__default = /*#__PURE__*/_interopDefaultLegacy(clsx);

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__default["default"](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 = mergeProps.useMergeProps(defaultProps, _objectSpread({}, p));
  var getWidthOrHeight = React.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$1 = props.overlay,
      closeOnClickOverlay = props.closeOnClickOverlay,
      beforeClose = props.beforeClose,
      showClose = props.showClose,
      children = props.children;

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

  var transition = React.useMemo(function () {
    return drawerTransform["default"](placement, transitionClassNames);
  }, [placement]);

  var closeHandler = /*#__PURE__*/function () {
    var _ref = _asyncToGenerator__default["default"]( /*#__PURE__*/_regeneratorRuntime__default["default"].mark(function _callee(e) {
      var cancelClose;
      return _regeneratorRuntime__default["default"].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);
  };

  React.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 jsxRuntime.jsxs(Portal, {
    children: [overlay$1 && jsxRuntime.jsx(overlay["default"], {
      visible: visible,
      timeout: 300,
      onClick: onClickOverlay
    }), jsxRuntime.jsx("div", {
      css: drawerStyle.drawerWrapperStyles(props),
      className: clsx__default["default"]('ultra-drawer-wrapper', "ultra-drawer-wrapper--".concat(placement), props.className),
      children: jsxRuntime.jsx(reactTransitionGroup.CSSTransition, {
        "in": visible,
        unmountOnExit: true,
        timeout: 300,
        classNames: transitionClassNames,
        children: jsxRuntime.jsxs("div", {
          className: "ultra-drawer",
          css: transition,
          style: getWidthOrHeight,
          children: [jsxRuntime.jsxs("div", {
            className: "ultra-drawer-header",
            children: [showClose && jsxRuntime.jsx(react.Close, {
              className: "ultra-drawer-header__close",
              onClick: closeHandler
            }), title && jsxRuntime.jsx("h4", {
              className: "ultra-drawer-header__title",
              children: title
            })]
          }), jsxRuntime.jsx("div", {
            className: "ultra-drawer-body",
            children: children
          })]
        })
      })
    })]
  });
};

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

exports["default"] = Drawer$1;
exports.transitionClassNames = transitionClassNames;