@twreporter/react-article-components 2.2.0-rc.0 → 2.2.0-rc.1

package/lib/components/body/slider/index.js

@@ -1,54 +1,35 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.Rail = exports.Progress = exports.Indicator = void 0;
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _color = require("@twreporter/core/lib/constants/color");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a 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); } }
-
+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, _toPropertyKey(descriptor.key), descriptor); } }
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
 function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
 function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
-
 function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-var Rail = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+var Rail = exports.Rail = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "slider__Rail",
   componentId: "sc-1pt06t8-0"
 })(["width:100%;height:100%;background:", ";position:relative;cursor:", ";"], _color.colorGrayscale.gray400, function (props) {
   return props.$isHeld ? 'grabbing' : 'pointer';
 });
-
-exports.Rail = Rail;
-
-var Progress = /*#__PURE__*/_styledComponents["default"].div.attrs(function (_ref) {
+var Progress = exports.Progress = /*#__PURE__*/_styledComponents["default"].div.attrs(function (_ref) {
   var w = _ref.w;
   return {
     style: {
@@ -59,10 +40,7 @@ var Progress = /*#__PURE__*/_styledComponents["default"].div.attrs(function (_re
   displayName: "slider__Progress",
   componentId: "sc-1pt06t8-1"
 })(["background:white;height:100%;position:absolute;top:0;left:0;"]);
-
-exports.Progress = Progress;
-
-var Indicator = /*#__PURE__*/_styledComponents["default"].div.attrs(function (_ref2) {
+var Indicator = exports.Indicator = /*#__PURE__*/_styledComponents["default"].div.attrs(function (_ref2) {
   var x = _ref2.x;
   return {
     style: {
@@ -75,19 +53,15 @@ var Indicator = /*#__PURE__*/_styledComponents["default"].div.attrs(function (_r
 })(["width:10px;height:100%;background:", ";position:absolute;top:0;cursor:", ";"], _color.colorGrayscale.black, function (props) {
   return props.$isHeld ? 'grabbing' : 'grab';
 });
-
-exports.Indicator = Indicator;
-
 function funcWarn(funcName, err) {
   console.warn("Error on `".concat(funcName, "`"), err);
 }
+
 /**
  * Get the x coordinate (in pixel) of the left edge of browser viewport relative to the left edge of document.
  *
  * @returns {number}
  */
-
-
 function getViewportPositionX() {
   try {
     // `window.pageXOffset` works at most modern browsers.
@@ -100,14 +74,13 @@ function getViewportPositionX() {
     return 0;
   }
 }
+
 /**
  * Get the x coordinate (in pixel) of the mouse position relative to the left edge of document
  *
  * @param {MouseEvent} mouseEvent
  * @returns {number}
  */
-
-
 function getMousePositionX(mouseEvent) {
   try {
     return mouseEvent.pageX || mouseEvent.clientX + getViewportPositionX();
@@ -116,14 +89,13 @@ function getMousePositionX(mouseEvent) {
     return 0;
   }
 }
+
 /**
  * Get the x coordinate (in pixel) of the touch position relative to the left edge of document
  *
  * @param {TouchEvent} touchEvent
  * @returns {number}
  */
-
-
 function getTouchPositionX(touchEvent) {
   try {
     return touchEvent.touches[0].pageX;
@@ -132,14 +104,13 @@ function getTouchPositionX(touchEvent) {
     return 0;
   }
 }
+
 /**
  * Get the x coordinates (in pixel) of left and right edges of the element relative to document.
  *
  * @param {Element} element
  * @returns {Object}
  */
-
-
 function getHorizontalEdgeOfElement(element) {
   try {
     var elementEdgeRelaToViewport = element.getBoundingClientRect();
@@ -153,14 +124,13 @@ function getHorizontalEdgeOfElement(element) {
     return {};
   }
 }
+
 /**
  * Get the element out bound width (includes border) in pixel
  *
  * @param {Element} element
  * @returns {number}
  */
-
-
 function getElementOutBoundWidth(element) {
   try {
     var bound = element.getBoundingClientRect();
@@ -170,6 +140,7 @@ function getElementOutBoundWidth(element) {
     return 0;
   }
 }
+
 /**
  * Calculate the relative position in target range with the same ratio in source range.
  *
@@ -180,55 +151,44 @@ function getElementOutBoundWidth(element) {
  * @param {number} targetMax
  * @returns
  */
-
-
 function project(sourceValue, sourceMin, sourceMax, targetMin, targetMax) {
   if (sourceValue === sourceMin) return targetMin;
   if (sourceValue === sourceMax) return targetMax;
   var targetSourceRatio = (targetMax - targetMin) / (sourceMax - sourceMin);
   return sourceValue * targetSourceRatio + targetMin;
 }
+
 /**
  *
  *
  * @param {Event} e
  */
-
-
 function pauseEvent(e) {
   e.stopPropagation();
   e.preventDefault();
 }
+
 /**
  * Return the boolean value indicating that if there are multiple fingers on device
  *
  * @param {TouchEvent} e
  * @returns {Boolean}
  */
-
-
 function isNotSimpleTouch(e) {
   return e.touches.length > 1 || e.type.toLowerCase() === 'touchend' && e.touches.length > 0;
 }
-
 function ensureValueInRange(value, min, max) {
   if (value < min) return min;
   if (value > max) return max;
   return value;
 }
-
 function noop() {}
-
-var Slider = /*#__PURE__*/function (_React$Component) {
+var Slider = exports["default"] = /*#__PURE__*/function (_React$Component) {
   _inherits(Slider, _React$Component);
-
   var _super = _createSuper(Slider);
-
   function Slider(props) {
     var _this;
-
     _classCallCheck(this, Slider);
-
     _this = _super.call(this, props);
     _this.state = {
       isIndicatorHeld: false,
@@ -238,8 +198,8 @@ var Slider = /*#__PURE__*/function (_React$Component) {
       indicatorXMax: 10,
       // The distance between the left edge of indicator at start and the left edge of it at end
       indicatorOffset: 0 // The distance between where mousedown invoked and the left edge of indicator
-
     };
+
     _this._rail = /*#__PURE__*/_react["default"].createRef();
     _this._indicator = /*#__PURE__*/_react["default"].createRef();
     _this.handleResize = _this._handleResize.bind(_assertThisInitialized(_this));
@@ -252,21 +212,17 @@ var Slider = /*#__PURE__*/function (_React$Component) {
     _this.preventNativeDragging = _this._preventNativeDragging.bind(_assertThisInitialized(_this));
     return _this;
   }
-
   _createClass(Slider, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       this._setIndicatorXMaxToStateIfChanged();
-
       window.addEventListener('resize', this.handleResize);
     }
   }, {
     key: "componentWillUnMount",
     value: function componentWillUnMount() {
       window.removeEventListener('resize', this.handleResize);
-
       this._removeDocumentMouseEvent();
-
       this._removeDocumentTouchEvent();
     }
   }, {
@@ -297,10 +253,9 @@ var Slider = /*#__PURE__*/function (_React$Component) {
     key: "_calcIndicatorXByValue",
     value: function _calcIndicatorXByValue(value) {
       var _value = value || this.props.value;
-
       var _this$props = this.props,
-          min = _this$props.min,
-          max = _this$props.max;
+        min = _this$props.min,
+        max = _this$props.max;
       var indicatorXMax = this.state.indicatorXMax;
       return project(_value, min, max, 0, indicatorXMax);
     }
@@ -308,19 +263,18 @@ var Slider = /*#__PURE__*/function (_React$Component) {
     key: "_calcValueByIndicatorX",
     value: function _calcValueByIndicatorX(indicatorX) {
       var _indicatorX = indicatorX || this.state.indicatorX;
-
       var indicatorXMax = this.state.indicatorXMax;
       var _this$props2 = this.props,
-          min = _this$props2.min,
-          max = _this$props2.max;
+        min = _this$props2.min,
+        max = _this$props2.max;
       return project(_indicatorX, 0, indicatorXMax, min, max);
     }
   }, {
     key: "_calcIndicatorXByPointerX",
     value: function _calcIndicatorXByPointerX(pointerX, forcedOffset) {
       var _this$state = this.state,
-          indicatorOffset = _this$state.indicatorOffset,
-          indicatorXMax = _this$state.indicatorXMax;
+        indicatorOffset = _this$state.indicatorOffset,
+        indicatorXMax = _this$state.indicatorXMax;
       var indicatorX = pointerX - (forcedOffset || indicatorOffset) - getHorizontalEdgeOfElement(this._rail.current).left;
       return ensureValueInRange(indicatorX, 0, indicatorXMax);
     }
@@ -333,14 +287,12 @@ var Slider = /*#__PURE__*/function (_React$Component) {
     key: "_setIndicatorXMaxToStateIfChanged",
     value: function _setIndicatorXMaxToStateIfChanged() {
       var railRect = this._rail.current.getBoundingClientRect();
-
       var nextIndicatorMax = railRect.right - railRect.left - getElementOutBoundWidth(this._indicator.current);
       var _this$props3 = this.props,
-          value = _this$props3.value,
-          defaultValue = _this$props3.defaultValue,
-          min = _this$props3.min,
-          max = _this$props3.max;
-
+        value = _this$props3.value,
+        defaultValue = _this$props3.defaultValue,
+        min = _this$props3.min,
+        max = _this$props3.max;
       if (nextIndicatorMax !== this.state.indicatorXMax) {
         this.setState({
           indicatorX: project(value || defaultValue, min, max, 0, nextIndicatorMax),
@@ -352,7 +304,6 @@ var Slider = /*#__PURE__*/function (_React$Component) {
     key: "_handlePointerStart",
     value: function _handlePointerStart(pointerOnIndicator, pointerX) {
       var _this2 = this;
-
       var indicatorOffset = pointerOnIndicator ? this._calcGrabOffset(pointerX) : getElementOutBoundWidth(this._indicator.current) / 2;
       this.setState({
         isIndicatorHeld: true,
@@ -366,12 +317,9 @@ var Slider = /*#__PURE__*/function (_React$Component) {
     key: "_handleMouseDown",
     value: function _handleMouseDown(e) {
       if (e.button !== 0) return; // Do nothing if it's not the main button be clicked
-
       var isMouseOnIndicator = e.target === this._indicator.current;
       var mouseX = getMousePositionX(e);
-
       this._handlePointerStart(isMouseOnIndicator, mouseX);
-
       this._addDocumentMouseEvent();
     }
   }, {
@@ -380,24 +328,19 @@ var Slider = /*#__PURE__*/function (_React$Component) {
       if (isNotSimpleTouch(e)) return;
       var isTouchOnIndicator = e.target === this._indicator.current;
       var touchX = getTouchPositionX(e);
-
       this._handlePointerStart(isTouchOnIndicator, touchX);
-
       this._addDocumentTouchEvent();
-
       pauseEvent(e); // Prevent `onmousedown` event to be triggered
     }
   }, {
     key: "_handlePointerMove",
     value: function _handlePointerMove(nextIndicatorX) {
       var _this3 = this;
-
       if (this.state.indicatorX !== nextIndicatorX) {
         this.setState({
           indicatorX: nextIndicatorX
         }, function () {
           var onSeeking = _this3.props.onSeeking;
-
           if (onSeeking !== noop) {
             onSeeking({
               value: _this3._calcValueByIndicatorX()
@@ -410,14 +353,12 @@ var Slider = /*#__PURE__*/function (_React$Component) {
     key: "_handleMouseMove",
     value: function _handleMouseMove(e) {
       var nextIndicatorX = this._calcIndicatorXByPointerX(getMousePositionX(e));
-
       this._handlePointerMove(nextIndicatorX);
     }
   }, {
     key: "_handleTouchMove",
     value: function _handleTouchMove(e) {
       var nextIndicatorX = this._calcIndicatorXByPointerX(getTouchPositionX(e));
-
       this._handlePointerMove(nextIndicatorX);
     }
   }, {
@@ -435,26 +376,22 @@ var Slider = /*#__PURE__*/function (_React$Component) {
     key: "_handleMouseUp",
     value: function _handleMouseUp(e) {
       this._handlePointerEnd();
-
       this._removeDocumentMouseEvent();
     }
   }, {
     key: "_handleTouchEnd",
     value: function _handleTouchEnd(e) {
       this._handlePointerEnd();
-
       this._removeDocumentTouchEvent();
     }
   }, {
     key: "_calcGrabOffset",
     value: function _calcGrabOffset(pointerX) {
       var indicatorEdge = getHorizontalEdgeOfElement(this._indicator.current);
-
       if (pointerX < indicatorEdge.left || pointerX > indicatorEdge.right) {
         console.warn('Error on `_calcGrabOffset`: The pointer is not located in the indicator, return grab offset as 0.');
         return 0;
       }
-
       return pointerX - indicatorEdge.left;
     }
   }, {
@@ -481,12 +418,8 @@ var Slider = /*#__PURE__*/function (_React$Component) {
       }));
     }
   }]);
-
   return Slider;
 }(_react["default"].Component);
-
-exports["default"] = Slider;
-
 _defineProperty(Slider, "propTypes", {
   // The `defaultValue`, `value`, `min`, and `max` share the same unit given by the consumer of this component.
   defaultValue: _propTypes["default"].number,
@@ -504,7 +437,6 @@ _defineProperty(Slider, "propTypes", {
   onSeekStart: _propTypes["default"].func,
   onSeeking: _propTypes["default"].func
 });
-
 _defineProperty(Slider, "defaultProps", {
   defaultValue: 0,
   min: 0,