@megafon/ui-shared 2.0.0-beta.24 → 2.0.0-beta.240

package/dist/es/components/ProductSwitcher/ProductSwitcher.js

@@ -1,612 +0,0 @@
-import "core-js/modules/es.array.filter";
-import "core-js/modules/es.array.map";
-import "core-js/modules/es.array.some";
-import "core-js/modules/es.date.to-string";
-import "core-js/modules/es.object.keys";
-import "core-js/modules/es.object.to-string";
-import "core-js/modules/es.reflect.construct";
-import "core-js/modules/es.regexp.to-string";
-import "core-js/modules/web.timers";
-import _extends from "@babel/runtime/helpers/extends";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-
-function _createSuper(Derived) { return function () { var Super = _getPrototypeOf(Derived), result; if (_isNativeReflectConstruct()) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
-
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-import { cnCreate, detectTouch } from '@megafon/ui-core';
-import "./ProductSwitcher.css";
-var cn = cnCreate('mfui-beta-product-switcher');
-
-var ProductSwitcher = /*#__PURE__*/function (_React$Component) {
-  _inherits(ProductSwitcher, _React$Component);
-
-  var _super = _createSuper(ProductSwitcher);
-
-  function ProductSwitcher(props) {
-    var _this;
-
-    _classCallCheck(this, ProductSwitcher);
-
-    _this = _super.call(this, props);
-    _this.isTouch = detectTouch();
-
-    _this.handleWindowSize = function () {
-      clearTimeout(_this.timer);
-      _this.timer = window.setTimeout(function () {
-        _this.movePointer(_this.state.currentValue);
-      }, 300);
-    };
-
-    _this.handleClickItem = function (value, index) {
-      return function (e) {
-        var onChange = _this.props.onChange;
-        var currentValue = _this.state.currentValue;
-        e.preventDefault();
-
-        if (value === currentValue) {
-          return;
-        }
-
-        onChange(e, value, index);
-
-        _this.setState({
-          currentValue: value,
-          currentIndex: index
-        });
-
-        _this.movePointer(value);
-      };
-    };
-
-    _this.setHandlers = function () {
-      window.addEventListener('resize', _this.handleWindowSize, true);
-
-      if (!_this.pointerNode || !_this.rootNode) {
-        return;
-      }
-
-      var pointerNode = _this.pointerNode;
-      var rootNode = _this.rootNode;
-
-      if (_this.isTouch) {
-        pointerNode.addEventListener('touchstart', _this.setPointerState);
-        rootNode.addEventListener('touchmove', _this.handleTouchMove);
-        rootNode.addEventListener('touchend', _this.handleTouchEnd);
-        return;
-      }
-
-      pointerNode.addEventListener('mousedown', _this.setPointerState);
-      rootNode.addEventListener('mousemove', _this.handleMouseMove);
-      rootNode.addEventListener('mouseleave', _this.handleMouseLeave);
-      rootNode.addEventListener('mouseup', _this.handleMouseUp);
-      document.body.addEventListener('mouseup', _this.handleBodyMouseUp);
-    };
-
-    _this.removeHandlers = function () {
-      window.removeEventListener('resize', _this.handleWindowSize, true);
-
-      if (!_this.pointerNode || !_this.rootNode) {
-        return;
-      }
-
-      var pointerNode = _this.pointerNode;
-      var rootNode = _this.rootNode;
-
-      if (_this.isTouch) {
-        pointerNode.removeEventListener('touchstart', _this.setPointerState);
-        rootNode.removeEventListener('touchmove', _this.handleTouchMove);
-        rootNode.removeEventListener('touchend', _this.handleTouchEnd);
-        return;
-      }
-
-      pointerNode.removeEventListener('mousedown', _this.setPointerState);
-      rootNode.removeEventListener('mousemove', _this.handleMouseMove);
-      rootNode.removeEventListener('mouseleave', _this.handleMouseLeave);
-      rootNode.removeEventListener('mouseup', _this.handleMouseUp);
-      document.body.removeEventListener('mouseup', _this.handleBodyMouseUp);
-    };
-
-    _this.setPointerState = function (e) {
-      e.stopPropagation();
-
-      _this.setState(function (prevState) {
-        return {
-          isPointerPressed: !prevState.isPointerPressed
-        };
-      });
-    };
-
-    _this.handleTouchMove = function (e) {
-      var isPointerPressed = _this.state.isPointerPressed;
-
-      if (!_this.rootNode || !isPointerPressed) {
-        return;
-      }
-
-      e.stopPropagation();
-      e.preventDefault();
-
-      var _this$getRangeWrapper = _this.getRangeWrapperCoords(_this.rootNode),
-          top = _this$getRangeWrapper.top,
-          bottom = _this$getRangeWrapper.bottom;
-
-      var eventXCoord = e.changedTouches[0].clientX;
-      var eventYCoord = e.changedTouches[0].clientY;
-
-      if (eventYCoord < top || eventYCoord > bottom) {
-        _this.handleTouchEnd(e);
-
-        return;
-      }
-
-      _this.moveSwitcher(e, eventXCoord);
-    };
-
-    _this.handleMouseMove = function (e) {
-      var isPointerPressed = _this.state.isPointerPressed;
-
-      if (!isPointerPressed) {
-        return;
-      }
-
-      e.stopPropagation();
-
-      _this.moveSwitcher(e, e.clientX);
-    };
-
-    _this.handleMouseLeave = function (e) {
-      var isPointerPressed = _this.state.isPointerPressed;
-
-      if (!isPointerPressed || !_this.rootNode) {
-        return;
-      }
-
-      e.stopPropagation();
-
-      var _this$getRangeWrapper2 = _this.getRangeWrapperCoords(_this.rootNode),
-          _this$getRangeWrapper3 = _this$getRangeWrapper2.left,
-          startPoint = _this$getRangeWrapper3 === void 0 ? 0 : _this$getRangeWrapper3,
-          _this$getRangeWrapper4 = _this$getRangeWrapper2.right,
-          endPoint = _this$getRangeWrapper4 === void 0 ? 0 : _this$getRangeWrapper4,
-          top = _this$getRangeWrapper2.top,
-          bottom = _this$getRangeWrapper2.bottom;
-
-      var eventYCoord = e.clientY;
-      var eventXCoord = e.clientX;
-
-      if (eventYCoord < top || eventYCoord > bottom) {
-        _this.handleMouseUp(e);
-
-        return;
-      }
-
-      if (eventXCoord < startPoint || eventXCoord > endPoint) {
-        _this.setState({
-          isPressedPointerLeaveBlock: true
-        });
-      }
-    };
-
-    _this.handleMouseUp = function (e) {
-      var _this$state = _this.state,
-          isPointerPressed = _this$state.isPointerPressed,
-          isPressedPointerLeaveBlock = _this$state.isPressedPointerLeaveBlock;
-
-      if (!isPointerPressed) {
-        return;
-      }
-
-      if (isPressedPointerLeaveBlock) {
-        _this.setState({
-          isPressedPointerLeaveBlock: false
-        });
-      }
-
-      _this.handleEndSwitchActions(e, e.clientX);
-    };
-
-    _this.handleBodyMouseUp = function (e) {
-      var isPressedPointerLeaveBlock = _this.state.isPressedPointerLeaveBlock;
-
-      if (!isPressedPointerLeaveBlock) {
-        return;
-      }
-
-      _this.handleMouseUp(e);
-    };
-
-    _this.handleTouchEnd = function (e) {
-      var isPointerPressed = _this.state.isPointerPressed;
-
-      if (!isPointerPressed) {
-        return;
-      }
-
-      _this.handleEndSwitchActions(e, e.changedTouches[0].clientX);
-    };
-
-    _this.moveSwitcher = function (e, eventXCoord) {
-      if (!_this.pointerNode || !_this.colorRowNode || !_this.rootNode) {
-        return;
-      }
-
-      var _this$getRangeWrapper5 = _this.getRangeWrapperCoords(_this.rootNode),
-          _this$getRangeWrapper6 = _this$getRangeWrapper5.left,
-          startPoint = _this$getRangeWrapper6 === void 0 ? 0 : _this$getRangeWrapper6,
-          _this$getRangeWrapper7 = _this$getRangeWrapper5.right,
-          endPoint = _this$getRangeWrapper7 === void 0 ? 0 : _this$getRangeWrapper7,
-          _this$getRangeWrapper8 = _this$getRangeWrapper5.width,
-          width = _this$getRangeWrapper8 === void 0 ? 0 : _this$getRangeWrapper8;
-
-      var onChange = _this.props.onChange;
-      var currentValue = _this.state.currentValue;
-      var pointerPosition = Math.round(eventXCoord - startPoint);
-      var pointerHalfWidth = _this.pointerNode.offsetWidth / 2 || 0;
-
-      var _this$getRowItemsInfo = _this.getRowItemsInfo().filter(function (el) {
-        var entryPointsRange = _this.getEntryPointsRange(el.coord);
-
-        return entryPointsRange.some(function (point) {
-          var isPointerCenterMatched = point === pointerPosition;
-          var isPointerLeftBorderMatched = point === pointerPosition - pointerHalfWidth;
-          var isPointerRightBorderMatched = point === pointerPosition + pointerHalfWidth;
-          return isPointerCenterMatched || isPointerLeftBorderMatched || isPointerRightBorderMatched;
-        });
-      }),
-          _this$getRowItemsInfo2 = _slicedToArray(_this$getRowItemsInfo, 1),
-          chosenPoint = _this$getRowItemsInfo2[0];
-
-      switch (true) {
-        case eventXCoord < startPoint + pointerHalfWidth:
-          _this.pointerNode.style.transform = 'translateX(0px)';
-          _this.colorRowNode.style.width = '0px';
-          break;
-
-        case eventXCoord >= endPoint - pointerHalfWidth:
-          _this.pointerNode.style.transform = "translateX(".concat(width - pointerHalfWidth * 2, "px)");
-          _this.colorRowNode.style.width = "".concat(width - pointerHalfWidth, "px");
-          break;
-
-        default:
-          _this.pointerNode.style.transform = "translateX(".concat(pointerPosition - pointerHalfWidth, "px)");
-          _this.colorRowNode.style.width = "".concat(pointerPosition, "px");
-      }
-
-      if (!chosenPoint || chosenPoint.value === currentValue) {
-        return;
-      }
-
-      onChange(e, chosenPoint.value, chosenPoint.item);
-
-      _this.setState({
-        currentValue: chosenPoint.value,
-        currentIndex: chosenPoint.item
-      });
-    };
-
-    _this.handleEndSwitchActions = function (e, eventXCoord) {
-      if (!_this.rootNode) {
-        return;
-      }
-
-      var onChange = _this.props.onChange;
-      var currentValue = _this.state.currentValue;
-
-      var _this$getRangeWrapper9 = _this.getRangeWrapperCoords(_this.rootNode),
-          _this$getRangeWrapper10 = _this$getRangeWrapper9.left,
-          startPoint = _this$getRangeWrapper10 === void 0 ? 0 : _this$getRangeWrapper10;
-
-      var outRowPoint = eventXCoord - startPoint;
-
-      var _this$getNearPoint = _this.getNearPoint(outRowPoint),
-          _this$getNearPoint2 = _slicedToArray(_this$getNearPoint, 1),
-          nearPoint = _this$getNearPoint2[0];
-
-      _this.movePointer(nearPoint.value);
-
-      if (nearPoint.value === currentValue) {
-        _this.setState(function (prevState) {
-          return {
-            isPointerPressed: !prevState.isPointerPressed
-          };
-        });
-
-        return;
-      }
-
-      onChange(e, nearPoint.value, nearPoint.item);
-
-      _this.setState(function (prevState) {
-        return {
-          currentValue: nearPoint.value,
-          currentIndex: nearPoint.item,
-          isPointerPressed: !prevState.isPointerPressed
-        };
-      });
-    };
-
-    _this.getEntryPointsRange = function (centralСoordinate) {
-      return [centralСoordinate - 1, centralСoordinate, centralСoordinate + 1];
-    };
-
-    _this.getNearPoint = function (outRowPoint) {
-      var switcherStep = _this.getSwitcherStep();
-
-      if (!switcherStep) {
-        return [];
-      }
-
-      var rowItemsInfo = _this.getRowItemsInfo();
-
-      return rowItemsInfo.filter(function (el, ind, arr) {
-        var prevEl = arr[ind - 1];
-
-        if (ind === 0) {
-          return outRowPoint <= switcherStep / 2;
-        }
-
-        if (ind === arr.length - 1) {
-          return outRowPoint >= prevEl.coord + switcherStep / 2;
-        }
-
-        return outRowPoint >= el.coord - switcherStep / 2 && outRowPoint <= el.coord + switcherStep / 2;
-      });
-    };
-
-    _this.getRangeWrapperCoords = function (node) {
-      return node && node.getBoundingClientRect();
-    };
-
-    _this.getSwitcherStep = function () {
-      if (!_this.rootNode) {
-        return;
-      }
-
-      var items = _this.props.items;
-
-      var _this$getRangeWrapper11 = _this.getRangeWrapperCoords(_this.rootNode),
-          width = _this$getRangeWrapper11.width;
-
-      return Math.round(width) / (items.length - 1);
-    };
-
-    _this.getRowItemsInfo = function () {
-      if (!_this.rootNode) {
-        return [];
-      }
-
-      var items = _this.props.items;
-      var itemsLength = items.length;
-
-      var _this$getRangeWrapper12 = _this.getRangeWrapperCoords(_this.rootNode),
-          _this$getRangeWrapper13 = _this$getRangeWrapper12.width,
-          rowWidth = _this$getRangeWrapper13 === void 0 ? 0 : _this$getRangeWrapper13;
-
-      rowWidth = Math.round(rowWidth);
-      return items.map(function (item, index) {
-        if (index === 0) {
-          return _extends(_extends({}, item), {
-            item: 0,
-            coord: 0
-          });
-        }
-
-        if (index === itemsLength - 1) {
-          return _extends(_extends({}, item), {
-            item: itemsLength - 1,
-            coord: rowWidth
-          });
-        }
-
-        return _extends(_extends({}, item), {
-          item: index,
-          coord: Math.floor(rowWidth / (itemsLength - 1) * index)
-        });
-      });
-    };
-
-    _this.moveSwipePointer = function (value) {
-      if (!_this.pointerNode || !_this.colorRowNode) {
-        return;
-      }
-
-      var rowItemsInfo = _this.getRowItemsInfo();
-
-      var _rowItemsInfo$filter = rowItemsInfo.filter(function (el) {
-        return el.value === value;
-      }),
-          _rowItemsInfo$filter2 = _slicedToArray(_rowItemsInfo$filter, 1),
-          checkedItem = _rowItemsInfo$filter2[0];
-
-      var switchPointOffsetValue;
-      var switchRowWidth;
-
-      switch (!!checkedItem) {
-        case checkedItem.item === 0:
-          switchPointOffsetValue = 0;
-          switchRowWidth = 0;
-          break;
-
-        case checkedItem.item === rowItemsInfo.length - 1:
-          switchPointOffsetValue = checkedItem.coord - _this.pointerNode.offsetWidth;
-          switchRowWidth = checkedItem.coord - _this.pointerNode.offsetWidth / 2;
-          break;
-
-        default:
-          switchPointOffsetValue = checkedItem.coord - _this.pointerNode.offsetWidth / 2;
-          switchRowWidth = checkedItem.coord;
-      }
-
-      _this.pointerNode.style.transform = "translateX(".concat(switchPointOffsetValue, "px)");
-      _this.colorRowNode.style.width = "".concat(switchRowWidth, "px");
-    };
-
-    _this.getRootNode = function (node) {
-      _this.rootNode = node;
-    };
-
-    _this.getLabelNodes = function (value) {
-      return function (node) {
-        _this.labelNodes[value] = node;
-      };
-    };
-
-    _this.getPointerNode = function (node) {
-      _this.pointerNode = node;
-    };
-
-    _this.getColorRowNode = function (node) {
-      _this.colorRowNode = node;
-    };
-
-    var items = props.items,
-        _props$startIndex = props.startIndex,
-        startIndex = _props$startIndex === void 0 ? 0 : _props$startIndex;
-
-    var safeStartIndex = _this.getSafeStartIndex(startIndex, items);
-
-    _this.labelNodes = {};
-    _this.state = {
-      currentValue: items[safeStartIndex].value,
-      currentIndex: safeStartIndex,
-      isPointerPressed: false,
-      isPressedPointerLeaveBlock: false
-    };
-    return _this;
-  }
-
-  _createClass(ProductSwitcher, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.movePointer(this.state.currentValue);
-      this.setHandlers();
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.removeHandlers();
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      if (!this.rootNode) {
-        return;
-      }
-
-      var _this$props = this.props,
-          _this$props$startInde = _this$props.startIndex,
-          startIndex = _this$props$startInde === void 0 ? 0 : _this$props$startInde,
-          items = _this$props.items;
-
-      if (startIndex !== prevProps.startIndex) {
-        var newIndex = this.getSafeStartIndex(startIndex, items);
-        var newValue = items[newIndex].value;
-        this.setState({
-          currentValue: newValue,
-          currentIndex: newIndex
-        });
-        this.movePointer(newValue);
-        return;
-      }
-
-      var _this$getRangeWrapper14 = this.getRangeWrapperCoords(this.rootNode),
-          width = _this$getRangeWrapper14.width;
-
-      var isSwipeRowWidthChanged = this.swipeRowWidth !== width;
-
-      if (!isSwipeRowWidthChanged) {
-        return;
-      }
-
-      this.swipeRowWidth = width;
-      this.movePointer(this.state.currentValue);
-    }
-  }, {
-    key: "getSafeStartIndex",
-    value: function getSafeStartIndex(startIndex, items) {
-      return startIndex <= items.length - 1 ? startIndex : 0;
-    }
-  }, {
-    key: "movePointer",
-    value: function movePointer(value) {
-      var theme = this.props.theme;
-
-      if (theme === 'with-color-row') {
-        this.moveSwipePointer(value);
-        return;
-      }
-
-      var rootOffsetLeft = this.rootNode ? this.rootNode.getBoundingClientRect().left : 0;
-      var hasLabelProp = Object.keys(this.labelNodes).length !== 0;
-      var targetLabelOffsetLeft = hasLabelProp ? this.labelNodes[value].getBoundingClientRect().left : 0;
-      var offsetValue = targetLabelOffsetLeft - rootOffsetLeft;
-
-      if (this.pointerNode) {
-        this.pointerNode.style.transform = "translateX(".concat(offsetValue, "px)");
-      }
-
-      if (this.colorRowNode) {
-        this.colorRowNode.style.width = "".concat(offsetValue, "px");
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      var _this$props2 = this.props,
-          items = _this$props2.items,
-          theme = _this$props2.theme,
-          className = _this$props2.className;
-      return /*#__PURE__*/React.createElement("div", {
-        className: cn('', {
-          theme: theme
-        }, className),
-        ref: this.getRootNode
-      }, /*#__PURE__*/React.createElement("div", {
-        className: cn('row')
-      }, items.map(function (item, index) {
-        return /*#__PURE__*/React.createElement("div", {
-          className: cn('item', {
-            active: item.value === _this2.state.currentValue,
-            disabled: index < _this2.state.currentIndex
-          }),
-          key: item.title + item.value,
-          onClick: _this2.handleClickItem(item.value, index)
-        }, /*#__PURE__*/React.createElement("div", {
-          className: cn('label'),
-          ref: _this2.getLabelNodes(item.value)
-        }, item.title, item.unit && /*#__PURE__*/React.createElement("span", {
-          className: cn('label-unit')
-        }, item.unit)));
-      })), /*#__PURE__*/React.createElement("div", {
-        className: cn('pointer'),
-        ref: this.getPointerNode
-      }), /*#__PURE__*/React.createElement("div", {
-        className: cn('color-row'),
-        ref: this.getColorRowNode
-      }));
-    }
-  }]);
-
-  return ProductSwitcher;
-}(React.Component);
-
-ProductSwitcher.propTypes = {
-  items: PropTypes.array.isRequired,
-  startIndex: PropTypes.number,
-  onChange: PropTypes.func,
-  theme: PropTypes.oneOf(['tariff-showcase', 'with-unit-values', 'with-color-row'])
-};
-ProductSwitcher.defaultProps = {
-  startIndex: 0
-};
-export default ProductSwitcher;