pouncejs/dist/cjs/components/SideSheet/SideSheet.js

A collection of UI components from Panther labs

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));

var _react = _interopRequireDefault(require("react"));

var _reactSpring = require("react-spring");

var _Box = _interopRequireDefault(require("../Box"));

var _IconButton = _interopRequireDefault(require("../IconButton"));

var _dialog = require("@reach/dialog");

var AnimatedDialogOverlay = (0, _reactSpring.animated)(_dialog.DialogOverlay);
var AnimatedDialogContent = (0, _reactSpring.animated)(_dialog.DialogContent);

/**
 * A dialog variation that helps with grabbing the user's attention by blurring the background and
 * presenting an element that requires action from the user
 */
var SideSheet = function SideSheet(_ref) {
  var children = _ref.children,
      open = _ref.open,
      onClose = _ref.onClose,
      rest = (0, _objectWithoutPropertiesLoose2.default)(_ref, ["children", "open", "onClose"]);
  var transitions = (0, _reactSpring.useTransition)(open, null, {
    from: {
      transform: 'translate3d(700px, 0, 0)',
      opacity: 0
    },
    enter: {
      transform: 'translate3d(0, 0, 0)',
      opacity: 1
    },
    leave: {
      transform: 'translate3d(700px, 0, 0)',
      opacity: 0,
      pointerEvents: 'none'
    }
  });
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, transitions.map(function (_ref2) {
    var item = _ref2.item,
        key = _ref2.key,
        styles = _ref2.props;
    return item && /*#__PURE__*/_react.default.createElement(AnimatedDialogOverlay, {
      key: key,
      isOpen: item,
      onDismiss: onClose,
      style: {
        overflow: 'visible',
        opacity: styles.opacity
      },
      as: 'div'
    }, /*#__PURE__*/_react.default.createElement(AnimatedDialogContent, (0, _extends2.default)({}, rest, {
      style: (0, _extends2.default)({
        outline: 'none'
      }, styles),
      as: 'div'
    }), /*#__PURE__*/_react.default.createElement(_Box.default, {
      p: 10,
      minWidth: "560px",
      bg: "navyblue-400",
      position: "absolute",
      top: "0",
      right: "0",
      height: "100vh",
      shadow: "dark200",
      overflow: "auto"
    }, /*#__PURE__*/_react.default.createElement(_Box.default, {
      position: "absolute",
      top: 35,
      right: 35,
      zIndex: 1
    }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
      icon: "close",
      "aria-label": "Dismiss Dialog",
      variant: "ghost",
      variantColor: "navyblue-300",
      onClick: onClose
    })), children)));
  }));
};

var _default = SideSheet;
exports.default = _default;