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

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

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import * as React from "react";
import styled, { css } from "styled-components";
import { convertHexToRgba } from "@kiwicom/orbit-design-tokens";
import useLockScrolling from "../hooks/useLockScrolling";
import transition from "../utils/transition";
import mq from "../utils/mediaQuery";
import defaultTheme from "../defaultTheme";
import DrawerClose from "./components/DrawerClose";
import POSITIONS from "./consts";
import getPosition from "./helpers/getPosition";
import getTransitionAnimation from "./helpers/getTransitionAnimation";
import useTheme from "../hooks/useTheme";
import Stack from "../Stack";
import useStateWithTimeout from "../hooks/useStateWithTimeout";
import Heading from "../Heading";
import { rtlSpacing } from "../utils/rtl";

var getPadding = function getPadding(_ref) {
  var noPadding = _ref.noPadding,
      theme = _ref.theme,
      hasTopPadding = _ref.hasTopPadding;

  var padding = function padding(space) {
    return !hasTopPadding ? rtlSpacing("0 ".concat(space, " ").concat(space)) : space;
  };

  return !noPadding && css(["padding:", ";", ";"], padding(theme.orbit.spaceMedium), mq.largeMobile(css(["padding:", "};"], padding(theme.orbit.spaceXLarge))));
};

var StyledDrawer = styled.div.withConfig({
  displayName: "Drawer__StyledDrawer",
  componentId: "sc-1auf65o-0"
})(["display:flex;visibility:", ";position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;background-color:", ";z-index:825;transition:", ";"], function (_ref2) {
  var overlayShown = _ref2.overlayShown;
  return overlayShown ? "visible" : "hidden";
}, function (_ref3) {
  var theme = _ref3.theme,
      shown = _ref3.shown;
  return shown ? convertHexToRgba(theme.orbit.paletteInkNormal, 50) : "transparent";
}, transition(["background-color"], "fast", "ease-in-out")); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledDrawer.defaultProps = {
  theme: defaultTheme
};
var StyledDrawerSide = styled( /*#__PURE__*/React.forwardRef(function (_ref4, ref) {
  var theme = _ref4.theme,
      width = _ref4.width,
      position = _ref4.position,
      shown = _ref4.shown,
      suppressed = _ref4.suppressed,
      props = _objectWithoutProperties(_ref4, ["theme", "width", "position", "shown", "suppressed"]);

  return /*#__PURE__*/React.createElement("aside", _extends({
    ref: ref
  }, props));
})).withConfig({
  displayName: "Drawer__StyledDrawerSide",
  componentId: "sc-1auf65o-1"
})(["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%;", ";", ";", ";"], function (_ref5) {
  var theme = _ref5.theme;
  return theme.orbit.fontFamily;
}, function (_ref6) {
  var theme = _ref6.theme;
  return theme.orbit.boxShadowRaised;
}, function (_ref7) {
  var theme = _ref7.theme,
      suppressed = _ref7.suppressed;
  return suppressed ? theme.orbit.paletteCloudLight : theme.orbit.paletteWhite;
}, transition(["transform"], "normal", "ease-in-out"), mq.largeMobile(css(["max-width:", ";"], function (_ref8) {
  var width = _ref8.width;
  return width;
})), getPosition, getTransitionAnimation); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledDrawerSide.defaultProps = {
  theme: defaultTheme
};
var StyledDrawerContent = styled(function (_ref9) {
  var theme = _ref9.theme,
      type = _ref9.type,
      hasTopPadding = _ref9.hasTopPadding,
      noPadding = _ref9.noPadding,
      hasClose = _ref9.hasClose,
      props = _objectWithoutProperties(_ref9, ["theme", "type", "hasTopPadding", "noPadding", "hasClose"]);

  return /*#__PURE__*/React.createElement("div", props);
}).withConfig({
  displayName: "Drawer__StyledDrawerContent",
  componentId: "sc-1auf65o-2"
})(["", ";margin-bottom:", ";margin-top:", ";"], getPadding, function (_ref10) {
  var theme = _ref10.theme,
      noPadding = _ref10.noPadding;
  return noPadding && theme.orbit.spaceLarge;
}, function (_ref11) {
  var hasClose = _ref11.hasClose,
      theme = _ref11.theme,
      noPadding = _ref11.noPadding;
  return !hasClose && noPadding && theme.orbit.spaceLarge;
}); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledDrawerContent.defaultProps = {
  theme: defaultTheme
};
var StyledDrawerHeader = styled.div.withConfig({
  displayName: "Drawer__StyledDrawerHeader",
  componentId: "sc-1auf65o-3"
})(["display:flex;justify-content:", ";align-items:center;background:", ";height:64px;box-sizing:border-box;", ";", ";"], function (_ref12) {
  var onlyIcon = _ref12.onlyIcon;
  return onlyIcon ? "flex-end" : "space-between";
}, function (_ref13) {
  var suppressed = _ref13.suppressed,
      bordered = _ref13.bordered,
      theme = _ref13.theme;
  return suppressed && !bordered ? theme.orbit.paletteCloudLight : theme.orbit.paletteWhite;
}, function (_ref14) {
  var bordered = _ref14.bordered,
      theme = _ref14.theme;
  return bordered && css(["border-bottom:1px solid ", ";"], theme.orbit.paletteCloudNormal);
}, function (_ref15) {
  var noPadding = _ref15.noPadding,
      theme = _ref15.theme;
  return !noPadding && css(["padding:0 ", ";", ";"], theme.orbit.spaceMedium, mq.largeMobile(css(["padding:", ";"], rtlSpacing("0 ".concat(theme.orbit.spaceLarge, " 0 ").concat(theme.orbit.spaceXLarge)))));
}); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledDrawerHeader.defaultProps = {
  theme: defaultTheme
};

var Drawer = function Drawer(_ref16) {
  var children = _ref16.children,
      onClose = _ref16.onClose,
      _ref16$lockScrolling = _ref16.lockScrolling,
      lockScrolling = _ref16$lockScrolling === void 0 ? true : _ref16$lockScrolling,
      _ref16$shown = _ref16.shown,
      shown = _ref16$shown === void 0 ? true : _ref16$shown,
      _ref16$width = _ref16.width,
      width = _ref16$width === void 0 ? "320px" : _ref16$width,
      _ref16$position = _ref16.position,
      position = _ref16$position === void 0 ? POSITIONS.RIGHT : _ref16$position,
      dataTest = _ref16.dataTest,
      noPadding = _ref16.noPadding,
      suppressed = _ref16.suppressed,
      title = _ref16.title,
      actions = _ref16.actions;
  var theme = useTheme();
  var overlayRef = React.useRef(null);
  var scrollableRef = React.useRef(null);
  var timeoutLength = React.useMemo(function () {
    return parseFloat(theme.orbit.durationNormal) * 1000;
  }, [theme.orbit.durationNormal]);

  var _useStateWithTimeout = useStateWithTimeout(shown, timeoutLength),
      _useStateWithTimeout2 = _slicedToArray(_useStateWithTimeout, 3),
      overlayShown = _useStateWithTimeout2[0],
      setOverlayShown = _useStateWithTimeout2[1],
      setOverlayShownWithTimeout = _useStateWithTimeout2[2];

  var handleOnClose = React.useCallback(function (ev) {
    if (onClose && ev.target === overlayRef.current) {
      onClose();
    }
  }, [onClose]);
  useLockScrolling(scrollableRef, lockScrolling && overlayShown);
  React.useEffect(function () {
    if (overlayShown !== shown) {
      if (shown) {
        setOverlayShown(true);
      } else if (!shown) {
        setOverlayShownWithTimeout(false);
      }
    }
  }, [overlayShown, setOverlayShown, setOverlayShownWithTimeout, shown]);
  return /*#__PURE__*/React.createElement(StyledDrawer, {
    role: "button",
    overlayShown: overlayShown,
    shown: shown,
    onClick: handleOnClose,
    "data-test": dataTest,
    "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
  }, title && /*#__PURE__*/React.createElement(Heading, {
    type: "title2"
  }, title), actions && /*#__PURE__*/React.createElement(Stack, {
    spacing: "none",
    justify: "end",
    flex: true,
    shrink: true
  }, actions), onClose && /*#__PURE__*/React.createElement(DrawerClose, {
    onClick: onClose
  })), /*#__PURE__*/React.createElement(StyledDrawerContent, {
    noPadding: noPadding,
    hasClose: !!onClose,
    hasTopPadding: title || actions
  }, children)));
};

export default Drawer;