@kiwicom/orbit-components/lib/Drawer/index.js

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
exports.__esModule = true;
exports.default = void 0;
var React = _interopRequireWildcard(require("react"));
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _orbitDesignTokens = require("@kiwicom/orbit-design-tokens");
var _keyMaps = _interopRequireDefault(require("../common/keyMaps"));
var _useFocusTrap = _interopRequireDefault(require("../hooks/useFocusTrap"));
var _useLockScrolling = _interopRequireDefault(require("../hooks/useLockScrolling"));
var _transition = _interopRequireDefault(require("../utils/transition"));
var _mediaQuery = _interopRequireDefault(require("../utils/mediaQuery"));
var _defaultTheme = _interopRequireDefault(require("../defaultTheme"));
var _DrawerClose = _interopRequireDefault(require("./components/DrawerClose"));
var _consts = _interopRequireDefault(require("./consts"));
var _getPosition = _interopRequireDefault(require("./helpers/getPosition"));
var _getTransitionAnimation = _interopRequireDefault(require("./helpers/getTransitionAnimation"));
var _useTheme = _interopRequireDefault(require("../hooks/useTheme"));
var _Stack = _interopRequireDefault(require("../Stack"));
var _useStateWithTimeout = _interopRequireDefault(require("../hooks/useStateWithTimeout"));
var _Heading = _interopRequireDefault(require("../Heading"));
var _rtl = require("../utils/rtl");
const getPadding = ({
  noPadding,
  theme,
  hasTopPadding
}) => {
  const padding = space => !hasTopPadding ? (0, _rtl.rtlSpacing)(`0 ${space} ${space}`) : space;
  return !noPadding && (0, _styledComponents.css)(["padding:", ";", ";"], padding(theme.orbit.spaceMedium), _mediaQuery.default.largeMobile((0, _styledComponents.css)(["padding:", ";"], padding(theme.orbit.spaceXLarge))));
};
const StyledDrawer = _styledComponents.default.div.withConfig({
  displayName: "Drawer__StyledDrawer",
  componentId: "sc-cgbot0-0"
})(["", ""], ({
  theme,
  overlayShown,
  shown
}) => (0, _styledComponents.css)(["display:flex;visibility:", ";position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;background-color:", ";z-index:", ";transition:", ";"], overlayShown ? "visible" : "hidden", shown ? (0, _orbitDesignTokens.convertHexToRgba)(theme.orbit.paletteInkDark, 50) : "transparent", theme.orbit.zIndexDrawer, (0, _transition.default)(["background-color"], "fast", "ease-in-out")));
StyledDrawer.defaultProps = {
  theme: _defaultTheme.default
};
const StyledDrawerSide = _styledComponents.default.aside.withConfig({
  displayName: "Drawer__StyledDrawerSide",
  componentId: "sc-cgbot0-1"
})(["", ""], ({
  theme,
  suppressed,
  width
}) => (0, _styledComponents.css)(["display:block;position:absolute;box-sizing:border-box;top:0;bottom:0;height:100%;font-family:", ";overflow-y:auto;box-shadow:", ";background:", ";transition:", ";width:100%;", ";", ";", ";"], theme.orbit.fontFamily, theme.orbit.boxShadowRaised, suppressed ? theme.orbit.paletteCloudLight : theme.orbit.paletteWhite, (0, _transition.default)(["transform"], "normal", "ease-in-out"), _mediaQuery.default.largeMobile((0, _styledComponents.css)(["max-width:", ";"], width)), _getPosition.default, _getTransitionAnimation.default));
StyledDrawerSide.defaultProps = {
  theme: _defaultTheme.default
};
const StyledDrawerContent = _styledComponents.default.div.withConfig({
  displayName: "Drawer__StyledDrawerContent",
  componentId: "sc-cgbot0-2"
})(["", ""], ({
  theme,
  noPadding,
  hasClose,
  hasTopPadding
}) => (0, _styledComponents.css)(["", ";margin-bottom:", ";margin-top:", ";"], getPadding({
  noPadding,
  hasTopPadding,
  theme
}), noPadding && theme.orbit.spaceLarge, !hasClose && noPadding && theme.orbit.spaceLarge));
StyledDrawerContent.defaultProps = {
  theme: _defaultTheme.default
};
const StyledDrawerHeader = _styledComponents.default.div.withConfig({
  displayName: "Drawer__StyledDrawerHeader",
  componentId: "sc-cgbot0-3"
})(["", ""], ({
  theme,
  fixedHeader,
  suppressed,
  bordered,
  noPadding,
  onlyIcon
}) => (0, _styledComponents.css)(["display:flex;", " justify-content:", ";align-items:center;background:", ";height:64px;box-sizing:border-box;border-bottom:", ";", ";"], fixedHeader && (0, _styledComponents.css)(["position:sticky;top:0;z-index:", ";"], theme.orbit.zIndexSticky), onlyIcon ? "flex-end" : "space-between", suppressed && !bordered ? theme.orbit.paletteCloudLight : theme.orbit.paletteWhite, bordered && `1px solid ${theme.orbit.paletteCloudNormal}`, !noPadding && (0, _styledComponents.css)(["padding:0 ", ";", ";"], theme.orbit.spaceMedium, _mediaQuery.default.largeMobile((0, _styledComponents.css)(["padding:", ";"], (0, _rtl.rtlSpacing)(`0 ${theme.orbit.spaceLarge} 0 ${theme.orbit.spaceXLarge}`))))));
StyledDrawerHeader.defaultProps = {
  theme: _defaultTheme.default
};
const Drawer = ({
  children,
  onClose,
  lockScrolling = true,
  fixedHeader,
  labelHide = "Hide",
  shown = true,
  width = "320px",
  position = _consts.default.RIGHT,
  dataTest,
  id,
  noPadding,
  suppressed,
  title,
  actions
}) => {
  const theme = (0, _useTheme.default)();
  const overlayRef = React.useRef(null);
  const closeButtonRef = React.useRef(null);
  const scrollableRef = React.useRef(null);
  const [overlayShown, setOverlayShown, setOverlayShownWithTimeout] = (0, _useStateWithTimeout.default)(shown, parseFloat(theme.orbit.durationNormal) * 1000);
  const handleOnClose = React.useCallback(ev => {
    if (onClose && ev.target === overlayRef.current) {
      onClose();
    }
  }, [onClose]);
  (0, _useFocusTrap.default)(scrollableRef);
  (0, _useLockScrolling.default)(scrollableRef, lockScrolling && overlayShown);
  React.useEffect(() => {
    closeButtonRef.current?.focus();
    if (overlayShown !== shown) {
      if (shown) {
        setOverlayShown(true);
      } else if (!shown) {
        setOverlayShownWithTimeout(false);
      }
    }
    const handleKeyDown = ev => {
      if (ev.keyCode === _keyMaps.default.ESC && onClose) {
        onClose();
      }
    };
    window.addEventListener("keydown", handleKeyDown);
    return () => window.removeEventListener("keydown", handleKeyDown);
  }, [overlayShown, setOverlayShown, setOverlayShownWithTimeout, shown, onClose]);
  return /*#__PURE__*/React.createElement(StyledDrawer, {
    role: "button",
    overlayShown: overlayShown,
    shown: shown,
    onClick: handleOnClose,
    "data-test": dataTest,
    id: id,
    "aria-hidden": !shown,
    ref: overlayRef
  }, /*#__PURE__*/React.createElement(StyledDrawerSide, {
    ref: scrollableRef,
    shown: shown,
    width: width,
    position: position,
    role: "navigation",
    suppressed: suppressed
  }, (title || actions || onClose) && /*#__PURE__*/React.createElement(StyledDrawerHeader, {
    onlyIcon: !title && !actions,
    bordered: !!(title || actions),
    suppressed: !!suppressed,
    fixedHeader: !!fixedHeader
  }, title && /*#__PURE__*/React.createElement(_Heading.default, {
    type: "title2"
  }, title), actions && /*#__PURE__*/React.createElement(_Stack.default, {
    spacing: "none",
    justify: "end",
    flex: true,
    shrink: true
  }, actions), onClose && /*#__PURE__*/React.createElement(_DrawerClose.default, {
    onClick: onClose,
    ref: closeButtonRef,
    title: labelHide
  })), /*#__PURE__*/React.createElement(StyledDrawerContent, {
    noPadding: noPadding,
    hasClose: !!onClose,
    hasTopPadding: !!(title || actions)
  }, children)));
};
var _default = Drawer;
exports.default = _default;