@ntragas/pouncejstest/dist/esm/components/SideSheet/SideSheet.js

A collection of UI components from Panther labs

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
import React from 'react';
import { animated, useTransition } from 'react-spring';
import Box from '../Box';
import IconButton from '../IconButton';
import { DialogContent, DialogOverlay } from '@reach/dialog';
var AnimatedDialogOverlay = animated(DialogOverlay);
var AnimatedDialogContent = animated(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 = _objectWithoutPropertiesLoose(_ref, ["children", "open", "onClose"]);

  var transitions = 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.createElement(React.Fragment, null, transitions.map(function (_ref2) {
    var item = _ref2.item,
        key = _ref2.key,
        styles = _ref2.props;
    return item && /*#__PURE__*/React.createElement(AnimatedDialogOverlay, {
      key: key,
      isOpen: item,
      onDismiss: onClose,
      style: {
        overflow: 'visible',
        opacity: styles.opacity
      },
      as: 'div'
    }, /*#__PURE__*/React.createElement(AnimatedDialogContent, _extends({}, rest, {
      style: _extends({
        outline: 'none'
      }, styles),
      as: 'div'
    }), /*#__PURE__*/React.createElement(Box, {
      p: 10,
      minWidth: "560px",
      bg: "navyblue-400",
      position: "absolute",
      top: "0",
      right: "0",
      height: "100vh",
      shadow: "dark200",
      overflow: "auto"
    }, /*#__PURE__*/React.createElement(Box, {
      position: "absolute",
      top: 35,
      right: 35,
      zIndex: 1
    }, /*#__PURE__*/React.createElement(IconButton, {
      icon: "close",
      "aria-label": "Dismiss Dialog",
      variant: "ghost",
      variantColor: "navyblue",
      onClick: onClose
    })), children)));
  }));
};

export default SideSheet;