@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";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

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

var _styledComponents = _interopRequireWildcard(require("styled-components"));

var _convertHexToRgba = _interopRequireDefault(require("@kiwicom/orbit-design-tokens/lib/convertHexToRgba"));

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 _useStateWithTimeout3 = _interopRequireDefault(require("../hooks/useStateWithTimeout"));

var _Heading = _interopRequireDefault(require("../Heading"));

var _rtl = require("../utils/rtl");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }

function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

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

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

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

var StyledDrawer = _styledComponents.default.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:background-color ", " ease-in-out;"], function (_ref2) {
  var overlayShown = _ref2.overlayShown;
  return overlayShown ? "visible" : "hidden";
}, function (_ref3) {
  var theme = _ref3.theme,
      shown = _ref3.shown;
  return shown ? (0, _convertHexToRgba.default)(theme.orbit.paletteInkNormal, 50) : "transparent";
}, function (_ref4) {
  var theme = _ref4.theme;
  return theme.orbit.durationFast;
});

StyledDrawer.defaultProps = {
  theme: _defaultTheme.default
};
var StyledDrawerSide = (0, _styledComponents.default)(function (_ref5) {
  var theme = _ref5.theme,
      width = _ref5.width,
      position = _ref5.position,
      shown = _ref5.shown,
      suppressed = _ref5.suppressed,
      props = _objectWithoutProperties(_ref5, ["theme", "width", "position", "shown", "suppressed"]);

  return _react.default.createElement("aside", 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:transform ", " ease-in-out;width:100%;", ";", ";", ";"], function (_ref6) {
  var theme = _ref6.theme;
  return theme.orbit.fontFamily;
}, function (_ref7) {
  var theme = _ref7.theme;
  return theme.orbit.boxShadowRaised;
}, function (_ref8) {
  var theme = _ref8.theme,
      suppressed = _ref8.suppressed;
  return suppressed ? theme.orbit.paletteCloudLight : theme.orbit.paletteWhite;
}, function (_ref9) {
  var theme = _ref9.theme;
  return theme.orbit.durationNormal;
}, _mediaQuery.default.largeMobile((0, _styledComponents.css)(["max-width:", ";"], function (_ref10) {
  var width = _ref10.width;
  return width;
})), _getPosition.default, _getTransitionAnimation.default);
StyledDrawerSide.defaultProps = {
  theme: _defaultTheme.default
};
var StyledDrawerContent = (0, _styledComponents.default)(function (_ref11) {
  var theme = _ref11.theme,
      type = _ref11.type,
      hasTopPadding = _ref11.hasTopPadding,
      noPadding = _ref11.noPadding,
      hasClose = _ref11.hasClose,
      props = _objectWithoutProperties(_ref11, ["theme", "type", "hasTopPadding", "noPadding", "hasClose"]);

  return _react.default.createElement("div", props);
}).withConfig({
  displayName: "Drawer__StyledDrawerContent",
  componentId: "sc-1auf65o-2"
})(["", ";margin-bottom:", ";margin-top:", ";"], getPadding, function (_ref12) {
  var theme = _ref12.theme,
      noPadding = _ref12.noPadding;
  return noPadding && theme.orbit.spaceLarge;
}, function (_ref13) {
  var hasClose = _ref13.hasClose,
      theme = _ref13.theme,
      noPadding = _ref13.noPadding;
  return !hasClose && noPadding && theme.orbit.spaceLarge;
});
StyledDrawerContent.defaultProps = {
  theme: _defaultTheme.default
};

var StyledDrawerHeader = _styledComponents.default.div.withConfig({
  displayName: "Drawer__StyledDrawerHeader",
  componentId: "sc-1auf65o-3"
})(["display:flex;justify-content:flex-end;align-items:center;background:", ";height:64px;box-sizing:border-box;", ";", ";"], function (_ref14) {
  var suppressed = _ref14.suppressed,
      bordered = _ref14.bordered,
      theme = _ref14.theme;
  return suppressed && !bordered ? theme.orbit.paletteCloudLight : theme.orbit.paletteWhite;
}, function (_ref15) {
  var bordered = _ref15.bordered,
      theme = _ref15.theme;
  return bordered && (0, _styledComponents.css)(["border-bottom:1px solid ", ";"], theme.orbit.paletteCloudNormal);
}, function (_ref16) {
  var noPadding = _ref16.noPadding,
      theme = _ref16.theme;
  return !noPadding && (0, _styledComponents.css)(["padding:0 ", ";", ";"], theme.orbit.spaceMedium, _mediaQuery.default.largeMobile((0, _styledComponents.css)(["padding:", ";"], (0, _rtl.rtlSpacing)("0 ".concat(theme.orbit.spaceMedium, " 0 ").concat(theme.orbit.spaceXLarge)))));
});

StyledDrawerHeader.defaultProps = {
  theme: _defaultTheme.default
};

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

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

  var handleOnClose = (0, _react.useCallback)(function (ev) {
    if (onClose && ev.target === overlayRef.current) {
      onClose();
    }
  }, [onClose]);
  (0, _react.useEffect)(function () {
    if (overlayShown !== shown) {
      if (shown) {
        setOverlayShown(true);
      } else if (!shown) {
        setOverlayShownWithTimeout(false);
      }
    }
  }, [overlayShown, setOverlayShown, setOverlayShownWithTimeout, shown]);
  return _react.default.createElement(StyledDrawer, {
    role: "button",
    overlayShown: overlayShown,
    shown: shown,
    onClick: handleOnClose,
    "data-test": dataTest,
    "aria-hidden": !shown,
    ref: overlayRef
  }, _react.default.createElement(StyledDrawerSide, {
    shown: shown,
    width: width,
    position: position,
    role: "navigation",
    suppressed: suppressed
  }, (title || actions || onClose) && _react.default.createElement(StyledDrawerHeader, {
    bordered: title || actions,
    suppressed: suppressed
  }, title && _react.default.createElement(_Heading.default, {
    type: "title2"
  }, title), actions && _react.default.createElement(_Stack.default, {
    spacing: "none",
    justify: "end",
    flex: true,
    shrink: true
  }, actions), onClose && _react.default.createElement(_DrawerClose.default, {
    onClick: onClose
  })), _react.default.createElement(StyledDrawerContent, {
    noPadding: noPadding,
    hasClose: !!onClose,
    hasTopPadding: title || actions
  }, children)));
};

var _default = Drawer;
exports.default = _default;