@kiwicom/orbit-components/lib/HorizontalScroll/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 _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

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

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

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

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

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

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

var _useScroll = _interopRequireDefault(require("./useScroll"));

var _Stack = _interopRequireDefault(require("../Stack"));

var StyledWrapper = _styledComponents.default.div.withConfig({
  displayName: "HorizontalScroll__StyledWrapper",
  componentId: "sc-1ao5qgr-0"
})(["", ""], function (_ref) {
  var isDragging = _ref.isDragging,
      minHeight = _ref.minHeight;
  return (0, _styledComponents.css)(["position:relative;width:100%;min-height:", "px;cursor:", ";overflow:hidden;"], minHeight, isDragging ? "grabbing" : "grab");
});

var getSnap = function getSnap(_ref2) {
  var scrollSnap = _ref2.scrollSnap;
  if (scrollSnap === "mandatory") return "x mandatory";
  if (scrollSnap === "proximity") return "x proximity";
  return scrollSnap;
};

var StyledOverflow = _styledComponents.default.div.withConfig({
  displayName: "HorizontalScroll__StyledOverflow",
  componentId: "sc-1ao5qgr-1"
})(["", ""], function (_ref3) {
  var isDragging = _ref3.isDragging,
      scrollPadding = _ref3.scrollPadding;
  return (0, _styledComponents.css)(["width:100%;height:100%;overflow-y:hidden;overflow-x:scroll;scroll-snap-type:", ";scroll-padding:", ";box-sizing:border-box;-ms-overflow-style:none;overflow:-moz-scrollbars-none;scrollbar-width:none;::-webkit-scrollbar{display:none;}"], isDragging ? "none" : getSnap, scrollPadding && "".concat(scrollPadding, "px"));
});

var StyledContainer = _styledComponents.default.div.withConfig({
  displayName: "HorizontalScroll__StyledContainer",
  componentId: "sc-1ao5qgr-2"
})(["", ""], function (_ref4) {
  var isDragging = _ref4.isDragging;
  return (0, _styledComponents.css)(["height:100%;display:inline-flex;pointer-events:", ";"], isDragging && "none");
});

var HorizontalScroll = function HorizontalScroll(_ref5) {
  var children = _ref5.children,
      _ref5$spacing = _ref5.spacing,
      spacing = _ref5$spacing === void 0 ? "small" : _ref5$spacing,
      _ref5$scrollSnap = _ref5.scrollSnap,
      scrollSnap = _ref5$scrollSnap === void 0 ? "none" : _ref5$scrollSnap,
      scrollPadding = _ref5.scrollPadding,
      dataTest = _ref5.dataTest,
      minHeight = _ref5.minHeight,
      props = (0, _objectWithoutProperties2.default)(_ref5, ["children", "spacing", "scrollSnap", "scrollPadding", "dataTest", "minHeight"]);
  var scrollWrapper = React.useRef(null);

  var _useScrollBox = (0, _useScroll.default)(scrollWrapper),
      isDragging = _useScrollBox.isDragging;

  return /*#__PURE__*/React.createElement(StyledWrapper, (0, _extends2.default)({}, props, {
    isDragging: isDragging,
    minHeight: minHeight,
    "data-test": dataTest
  }), /*#__PURE__*/React.createElement(StyledOverflow, {
    ref: scrollWrapper,
    scrollSnap: scrollSnap,
    scrollPadding: scrollPadding,
    isDragging: isDragging
  }, /*#__PURE__*/React.createElement(StyledContainer, {
    isDragging: isDragging
  }, /*#__PURE__*/React.createElement(_Stack.default, {
    inline: true,
    spacing: spacing
  }, children))));
};

var _default = HorizontalScroll;
exports.default = _default;