@desynova-digital/components 9.0.26 → 9.1.0

package/molecules/carousel/carousel.js

@@ -1,78 +1,46 @@
-'use strict';
+"use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _templateObject = _taggedTemplateLiteral(['\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n  padding: 20px 0;\n  position: relative;\n'], ['\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n  padding: 20px 0;\n  position: relative;\n']),
-    _templateObject2 = _taggedTemplateLiteral(['\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n  padding: 0 20px;\n  position: relative;\n  .carousel-arrow {\n    position: absolute;\n    width: 40px;\n    opacity: 0.5;\n    height: 100%;\n    top: 0;\n    background: #000000;\n    z-index: 3;\n    cursor: pointer;\n    &:hover {\n      opacity: 0.8;\n    }\n    &.carousel-left {\n      left: 0;\n    }\n    &.carousel-right {\n      right: 0;\n    }\n    ', ' {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n    }\n  }\n'], ['\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n  padding: 0 20px;\n  position: relative;\n  .carousel-arrow {\n    position: absolute;\n    width: 40px;\n    opacity: 0.5;\n    height: 100%;\n    top: 0;\n    background: #000000;\n    z-index: 3;\n    cursor: pointer;\n    &:hover {\n      opacity: 0.8;\n    }\n    &.carousel-left {\n      left: 0;\n    }\n    &.carousel-right {\n      right: 0;\n    }\n    ', ' {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n    }\n  }\n']),
-    _templateObject3 = _taggedTemplateLiteral(['\n  width: 100%;\n  margin-bottom: 20px;\n  padding: 0 20px;\n  .title {\n    font-family: SFUIText-Medium;\n    font-size: 16px;\n    line-height: 1;\n    vertical-align: middle;\n    color: #fff;\n    display: inline-block;\n  }\n  .child-count {\n    display: inline-block;\n    font-size: 10px;\n    color: #afb2ba;\n    font-family: SFUIText-Medium;\n    border: 1px solid #303f51;\n    border-radius: 2px;\n    vertical-align: middle;\n    margin-left: 15px;\n    padding: 3px;\n    min-width: 25px;\n    height: 18px;\n    text-align: center;\n  }\n'], ['\n  width: 100%;\n  margin-bottom: 20px;\n  padding: 0 20px;\n  .title {\n    font-family: SFUIText-Medium;\n    font-size: 16px;\n    line-height: 1;\n    vertical-align: middle;\n    color: #fff;\n    display: inline-block;\n  }\n  .child-count {\n    display: inline-block;\n    font-size: 10px;\n    color: #afb2ba;\n    font-family: SFUIText-Medium;\n    border: 1px solid #303f51;\n    border-radius: 2px;\n    vertical-align: middle;\n    margin-left: 15px;\n    padding: 3px;\n    min-width: 25px;\n    height: 18px;\n    text-align: center;\n  }\n']),
-    _templateObject4 = _taggedTemplateLiteral(['\n  display: inline-flex;\n  position: relative;\n  left: 0px;\n  transition: all 550ms cubic-bezier(0.02, 0.01, 0.47, 1);\n'], ['\n  display: inline-flex;\n  position: relative;\n  left: 0px;\n  transition: all 550ms cubic-bezier(0.02, 0.01, 0.47, 1);\n']),
-    _templateObject5 = _taggedTemplateLiteral(['\n  display: inline-block;\n  margin-right: 10px;\n'], ['\n  display: inline-block;\n  margin-right: 10px;\n']);
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _propTypes = require('prop-types');
-
-var _propTypes2 = _interopRequireDefault(_propTypes);
-
-var _styledComponents = require('styled-components');
-
-var _styledComponents2 = _interopRequireDefault(_styledComponents);
-
-var _icon = require('../../atoms/icon');
-
-var _icon2 = _interopRequireDefault(_icon);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-// import { colors } from '@ubaid-desynova/tokens';
-
-
+exports["default"] = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _icon = _interopRequireDefault(require("../../atoms/icon"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5; // import { colors } from '@ubaid-desynova/tokens';
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var propTypes = {
-  children: _propTypes2.default.arrayOf(_propTypes2.default.element),
-  headerTitle: _propTypes2.default.string,
+  children: _propTypes["default"].arrayOf(_propTypes["default"].element),
+  headerTitle: _propTypes["default"].string,
   // indicators: PropTypes.bool,
 
-  onChange: _propTypes2.default.func,
-  totalEntries: _propTypes2.default.number,
-  theme: _propTypes2.default.oneOf(['light', 'dark', 'nexc'])
+  onChange: _propTypes["default"].func,
+  totalEntries: _propTypes["default"].number,
+  theme: _propTypes["default"].oneOf(['light', 'dark', 'nexc'])
 };
-
 var defaultProps = {
   theme: 'light',
   children: []
 };
-
-var CarouselWrapper = _styledComponents2.default.div(_templateObject);
-
-var CarouselBlock = _styledComponents2.default.div(_templateObject2, _icon2.default.Element);
-
-var CarouselHeader = _styledComponents2.default.div(_templateObject3);
-
-var CarouselContainer = (0, _styledComponents2.default)('div')(_templateObject4);
-
-var CarouselItem = _styledComponents2.default.div(_templateObject5);
-
-var Carousel = function (_React$Component) {
-  _inherits(Carousel, _React$Component);
-
+var CarouselWrapper = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n  padding: 20px 0;\n  position: relative;\n"])));
+var CarouselBlock = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n  padding: 0 20px;\n  position: relative;\n  .carousel-arrow {\n    position: absolute;\n    width: 40px;\n    opacity: 0.5;\n    height: 100%;\n    top: 0;\n    background: #000000;\n    z-index: 3;\n    cursor: pointer;\n    &:hover {\n      opacity: 0.8;\n    }\n    &.carousel-left {\n      left: 0;\n    }\n    &.carousel-right {\n      right: 0;\n    }\n    ", " {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n    }\n  }\n"])), _icon["default"].Element);
+var CarouselHeader = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 100%;\n  margin-bottom: 20px;\n  padding: 0 20px;\n  .title {\n    font-family: SFUIText-Medium;\n    font-size: 16px;\n    line-height: 1;\n    vertical-align: middle;\n    color: #fff;\n    display: inline-block;\n  }\n  .child-count {\n    display: inline-block;\n    font-size: 10px;\n    color: #afb2ba;\n    font-family: SFUIText-Medium;\n    border: 1px solid #303f51;\n    border-radius: 2px;\n    vertical-align: middle;\n    margin-left: 15px;\n    padding: 3px;\n    min-width: 25px;\n    height: 18px;\n    text-align: center;\n  }\n"])));
+var CarouselContainer = (0, _styledComponents["default"])('div')(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-flex;\n  position: relative;\n  left: 0px;\n  transition: all 550ms cubic-bezier(0.02, 0.01, 0.47, 1);\n"])));
+var CarouselItem = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-block;\n  margin-right: 10px;\n"])));
+var Carousel = exports["default"] = /*#__PURE__*/function (_React$Component) {
   function Carousel(props) {
-    _classCallCheck(this, Carousel);
-
-    var _this = _possibleConstructorReturn(this, (Carousel.__proto__ || Object.getPrototypeOf(Carousel)).call(this, props));
-
+    var _this;
+    (0, _classCallCheck2["default"])(this, Carousel);
+    _this = _callSuper(this, Carousel, [props]);
     _this.setupCarousel = _this.setupCarousel.bind(_this);
     _this.state = {
       carouselItems: [],
@@ -82,28 +50,29 @@ var Carousel = function (_React$Component) {
     };
     return _this;
   }
-
-  _createClass(Carousel, [{
-    key: 'componentDidMount',
+  (0, _inherits2["default"])(Carousel, _React$Component);
+  return (0, _createClass2["default"])(Carousel, [{
+    key: "componentDidMount",
     value: function componentDidMount() {
-      var _props = this.props,
-          children = _props.children,
-          theme = _props.theme;
-
+      var _this$props = this.props,
+        children = _this$props.children,
+        theme = _this$props.theme;
       this.setupCarousel(children, theme);
     }
   }, {
-    key: 'componentDidUpdate',
+    key: "componentDidUpdate",
     value: function componentDidUpdate() {
       this.styleCarousel();
     }
   }, {
-    key: 'setupCarousel',
+    key: "setupCarousel",
     value: function setupCarousel(items, theme) {
       var carouselItems = [];
       if (items && items.length) {
-        carouselItems = _react2.default.Children.map(items, function (child) {
-          return child ? _react2.default.cloneElement(child, { theme: theme }) : null;
+        carouselItems = _react["default"].Children.map(items, function (child) {
+          return child ? /*#__PURE__*/_react["default"].cloneElement(child, {
+            theme: theme
+          }) : null;
         });
       }
       this.setState({
@@ -111,10 +80,9 @@ var Carousel = function (_React$Component) {
       });
     }
   }, {
-    key: 'styleCarousel',
+    key: "styleCarousel",
     value: function styleCarousel() {
       var totalSlides = this.state.totalSlides;
-
       var wrapperWidth = this._carouselWrapper.offsetWidth;
       var containerWidth = this._carouselContainer.offsetWidth;
       var childCount = this._carouselContainer.childElementCount;
@@ -132,14 +100,13 @@ var Carousel = function (_React$Component) {
       }
     }
   }, {
-    key: 'carouselAction',
+    key: "carouselAction",
     value: function carouselAction(action) {
       var onChange = this.props.onChange;
-      var _state = this.state,
-          viewWidth = _state.viewWidth,
-          currentSlide = _state.currentSlide,
-          totalSlides = _state.totalSlides;
-
+      var _this$state = this.state,
+        viewWidth = _this$state.viewWidth,
+        currentSlide = _this$state.currentSlide,
+        totalSlides = _this$state.totalSlides;
       var containerLeft = parseInt(this._carouselContainer.style.left);
       switch (action) {
         case 'left':
@@ -150,7 +117,6 @@ var Carousel = function (_React$Component) {
                 left = containerLeft;
               }
               left = left + viewWidth;
-
               this._carouselContainer.style.left = left + 'px';
               this.setState(function (state) {
                 return {
@@ -169,7 +135,6 @@ var Carousel = function (_React$Component) {
                 _left = containerLeft;
               }
               _left = _left - viewWidth;
-
               this._carouselContainer.style.left = _left + 'px';
               this.setState(function (state) {
                 return {
@@ -181,145 +146,94 @@ var Carousel = function (_React$Component) {
           }
           break;
       }
-
       if (onChange) {
         onChange(action, totalSlides, currentSlide);
       }
     }
   }, {
-    key: 'UNSAFE_componentWillReceiveProps',
+    key: "UNSAFE_componentWillReceiveProps",
     value: function UNSAFE_componentWillReceiveProps(newProps) {
       var children = newProps.children,
-          theme = newProps.theme;
-
+        theme = newProps.theme;
       this.setupCarousel(children, theme);
     }
   }, {
-    key: 'render',
+    key: "render",
     value: function render() {
       var _this2 = this;
-
-      var _props2 = this.props,
-          headerTitle = _props2.headerTitle,
-          addNew = _props2.addNew,
-          totalEntries = _props2.totalEntries;
-      var _state2 = this.state,
-          carouselItems = _state2.carouselItems,
-          currentSlide = _state2.currentSlide,
-          totalSlides = _state2.totalSlides;
-
-      return _react2.default.createElement(
-        CarouselWrapper,
-        {
-          className: 'carousel-wrapper ' + this.props.className,
-          ref: function ref(carouselWrapper) {
-            _this2._carouselWrapper = carouselWrapper;
+      var _this$props2 = this.props,
+        headerTitle = _this$props2.headerTitle,
+        addNew = _this$props2.addNew,
+        totalEntries = _this$props2.totalEntries;
+      var _this$state2 = this.state,
+        carouselItems = _this$state2.carouselItems,
+        currentSlide = _this$state2.currentSlide,
+        totalSlides = _this$state2.totalSlides;
+      return /*#__PURE__*/_react["default"].createElement(CarouselWrapper, {
+        className: 'carousel-wrapper ' + this.props.className,
+        ref: function ref(carouselWrapper) {
+          _this2._carouselWrapper = carouselWrapper;
+        }
+      }, /*#__PURE__*/_react["default"].createElement(CarouselHeader, {
+        className: "carousel-header"
+      }, this.props.rightPart ? /*#__PURE__*/_react["default"].createElement("div", {
+        style: {
+          display: 'flex',
+          justifyContent: 'space-between'
+        }
+      }, ' ', /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("p", {
+        className: "title"
+      }, headerTitle), /*#__PURE__*/_react["default"].createElement("p", {
+        className: "child-count"
+      }, addNew ? totalEntries - 1 : totalEntries)), /*#__PURE__*/_react["default"].createElement("div", {
+        className: "carousel-header-right"
+      }, this.props.rightPart)) : addNew || totalEntries || headerTitle ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("p", {
+        className: "title"
+      }, headerTitle), /*#__PURE__*/_react["default"].createElement("p", {
+        className: "child-count"
+      }, addNew ? totalEntries - 1 : totalEntries)) : null), /*#__PURE__*/_react["default"].createElement(CarouselBlock, {
+        className: "carousel-block"
+      }, currentSlide > 1 ? /*#__PURE__*/_react["default"].createElement("div", {
+        className: "carousel-arrow carousel-left",
+        role: "presentation",
+        onClick: function onClick() {
+          _this2.carouselAction('left');
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+        width: 14,
+        height: 30,
+        name: "angle-left",
+        color: "none",
+        stroke: "#fff"
+      })) : null, currentSlide < totalSlides ? /*#__PURE__*/_react["default"].createElement("div", {
+        className: "carousel-arrow carousel-right",
+        role: "presentation",
+        onClick: function onClick() {
+          _this2.carouselAction('right');
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+        width: 14,
+        height: 30,
+        name: "angle-right",
+        color: "none",
+        stroke: "#fff"
+      })) : null, /*#__PURE__*/_react["default"].createElement(CarouselContainer, {
+        className: "carousel-container",
+        ref: function ref(carouselContainer) {
+          _this2._carouselContainer = carouselContainer;
+        }
+      }, carouselItems.map(function (item) {
+        return /*#__PURE__*/_react["default"].createElement(CarouselItem, {
+          className: "carousel-item",
+          key: item.key || item.props.id,
+          ref: function ref(carouselItem) {
+            _this2._carouselItem = carouselItem;
           }
-        },
-        _react2.default.createElement(
-          CarouselHeader,
-          { className: 'carousel-header' },
-          this.props.rightPart ? _react2.default.createElement(
-            'div',
-            {
-              style: {
-                display: 'flex',
-                justifyContent: 'space-between'
-              }
-            },
-            ' ',
-            _react2.default.createElement(
-              'div',
-              null,
-              _react2.default.createElement(
-                'p',
-                { className: 'title' },
-                headerTitle
-              ),
-              _react2.default.createElement(
-                'p',
-                { className: 'child-count' },
-                addNew ? totalEntries - 1 : totalEntries
-              )
-            ),
-            _react2.default.createElement(
-              'div',
-              { className: 'carousel-header-right' },
-              this.props.rightPart
-            )
-          ) : addNew || totalEntries || headerTitle ? _react2.default.createElement(
-            'div',
-            null,
-            _react2.default.createElement(
-              'p',
-              { className: 'title' },
-              headerTitle
-            ),
-            _react2.default.createElement(
-              'p',
-              { className: 'child-count' },
-              addNew ? totalEntries - 1 : totalEntries
-            )
-          ) : null
-        ),
-        _react2.default.createElement(
-          CarouselBlock,
-          { className: 'carousel-block' },
-          currentSlide > 1 ? _react2.default.createElement(
-            'div',
-            {
-              className: 'carousel-arrow carousel-left',
-              role: 'presentation',
-              onClick: function onClick() {
-                _this2.carouselAction('left');
-              }
-            },
-            _react2.default.createElement(_icon2.default, { width: 14, height: 30, name: 'angle-left', color: 'none', stroke: '#fff' })
-          ) : null,
-          currentSlide < totalSlides ? _react2.default.createElement(
-            'div',
-            {
-              className: 'carousel-arrow carousel-right',
-              role: 'presentation',
-              onClick: function onClick() {
-                _this2.carouselAction('right');
-              }
-            },
-            _react2.default.createElement(_icon2.default, { width: 14, height: 30, name: 'angle-right', color: 'none', stroke: '#fff' })
-          ) : null,
-          _react2.default.createElement(
-            CarouselContainer,
-            {
-              className: 'carousel-container',
-              ref: function ref(carouselContainer) {
-                _this2._carouselContainer = carouselContainer;
-              }
-            },
-            carouselItems.map(function (item) {
-              return _react2.default.createElement(
-                CarouselItem,
-                {
-                  className: 'carousel-item',
-                  key: item.key || item.props.id,
-                  ref: function ref(carouselItem) {
-                    _this2._carouselItem = carouselItem;
-                  }
-                },
-                item
-              );
-            })
-          )
-        )
-      );
+        }, item);
+      }))));
     }
   }]);
-
-  return Carousel;
-}(_react2.default.Component);
-
-exports.default = Carousel;
-
-
+}(_react["default"].Component);
 Carousel.Item = CarouselItem;
 Carousel.Header = CarouselHeader;
 Carousel.propTypes = propTypes;