@douyinfe/semi-foundation 2.1.1 → 2.1.5

package/lib/cjs/slider/foundation.js

@@ -0,0 +1,734 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = void 0;
+
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _isArray = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/is-array"));
+
+var _foundation = _interopRequireDefault(require("../base/foundation"));
+
+var _touchPolyfill = _interopRequireDefault(require("../utils/touchPolyfill"));
+
+/* eslint-disable no-param-reassign */
+
+/* eslint-disable max-len */
+
+/* eslint-disable no-nested-ternary */
+class SliderFoundation extends _foundation.default {
+  constructor(adapter) {
+    var _this;
+
+    super((0, _assign.default)((0, _assign.default)({}, SliderFoundation.defaultAdapter), adapter));
+    _this = this;
+
+    /**
+     * Calculate the percentage corresponding to the current value for style calculation
+     * @{}
+     *
+     * @memberof SliderFoundation
+     */
+    this.getMinAndMaxPercent = value => {
+      // debugger
+      const {
+        range,
+        min,
+        max
+      } = this._adapter.getProps();
+
+      const minPercent = range ? (value[0] - min) / (max - min) : (value - min) / (max - min);
+      const maxPercent = range ? (value[1] - min) / (max - min) : 1;
+      return {
+        min: this._checkValidity(minPercent),
+        max: this._checkValidity(maxPercent)
+      };
+    };
+    /**
+     * Check if value is out of range
+     * @memberof SliderFoundation
+     */
+
+
+    this._checkValidity = function (value) {
+      let min = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+      let max = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+      const checked = value > max ? max : value < min ? min : value;
+      return checked;
+    };
+    /**
+     * When render handle, the display and content of the tooltip are calculated according to the conditions
+     * @visible:  props passed in by the component
+     * @formatter: tooltip content formatting function
+     * @memberof SliderFoundation
+     */
+
+
+    this.computeHandleVisibleVal = (visible, formatter, range) => {
+      // debugger;
+      const {
+        focusPos,
+        currentValue
+      } = this._adapter.getStates();
+
+      const tipVisible = {
+        min: false,
+        max: false
+      };
+      let tipChildren;
+
+      if (formatter) {
+        tipChildren = {
+          min: range ? formatter(this.outPutValue(currentValue[0])) : formatter(this.outPutValue(currentValue)),
+          max: range ? formatter(this.outPutValue(currentValue[1])) : null
+        };
+      } else {
+        tipChildren = {
+          min: range ? this.outPutValue(currentValue[0]) : this.outPutValue(currentValue),
+          max: range ? this.outPutValue(currentValue[1]) : null
+        };
+      }
+
+      if (visible) {
+        tipVisible.min = true;
+        tipVisible.max = true;
+      } else if (typeof visible === 'undefined' && formatter) {
+        if (focusPos === 'min') {
+          tipVisible.min = true;
+        } else if (focusPos === 'max') {
+          tipVisible.max = true;
+        }
+      }
+
+      const result = {
+        tipVisible,
+        tipChildren
+      };
+      return result;
+    };
+    /**
+     * Calculate whether the value passed in is valid
+     *
+     * @memberof SliderFoundation
+     */
+
+
+    this.valueFormatIsCorrect = value => {
+      if ((0, _isArray.default)(value)) {
+        return typeof value[0] === 'number' && typeof value[0] === 'number';
+      } else {
+        return typeof value === 'number';
+      }
+    };
+    /**
+     * Fix the mouse position to position the parent container relative to the position
+     *
+     * @memberof SliderFoundation
+     */
+
+
+    this.handleMousePos = (pageX, pageY) => {
+      const parentRect = this._adapter.getParentRect();
+
+      const scrollParent = this._adapter.getScrollParentVal();
+
+      const parentX = parentRect ? parentRect.left : 0;
+      const parentY = parentRect ? parentRect.top : 0;
+      return {
+        x: pageX - parentX + scrollParent.scrollLeft,
+        y: pageY - parentY + scrollParent.scrollTop
+      };
+    };
+    /**
+     * Provides the nearest scrollable parent node of the current node, which is used to calculate the scrollTop and scrollLeft attributes
+     *
+     * @memberof SliderFoundation
+     */
+
+
+    this.getScrollParent = element => {
+      // TODO: move window document out of foundation.
+      const el = element;
+      const regex = /(auto|scroll)/;
+
+      const style = (node, prop) => window.getComputedStyle(node, null).getPropertyValue(prop);
+
+      const scroll = node => regex.test(style(node, 'overflow') + style(node, 'overflow-y') + style(node, 'overflow-x'));
+
+      const scrollParent = node => !node || node === document.body ? document.body : scroll(node) ? node : scrollParent(node.parentNode);
+
+      return scrollParent(el);
+    };
+    /**
+     * Fixed the event location, beyond the maximum, minimum, left and right, etc. directly modified to the effective location
+     *
+     * @memberof SliderFoundation
+     */
+
+
+    this.checkMeetMinMax = position => {
+      // Returns the length of the distance to the left
+      const {
+        vertical,
+        verticalReverse,
+        range
+      } = this._adapter.getProps();
+
+      const value = this._adapter.getState('currentValue');
+
+      const currentPos = this.transValueToPos(value);
+
+      const {
+        sliderX,
+        sliderY,
+        sliderWidth,
+        sliderHeight
+      } = this._adapter.getSliderLengths();
+
+      const {
+        chooseMovePos,
+        isDrag
+      } = this._adapter.getStates();
+
+      const len = vertical ? sliderHeight : sliderWidth;
+      let startPos;
+
+      if (vertical && verticalReverse) {
+        startPos = sliderY + len;
+      } else {
+        startPos = vertical ? sliderY : sliderX;
+      }
+
+      startPos = chooseMovePos === 'max' && isDrag ? currentPos[0] : startPos; // eslint-disable-next-line one-var
+
+      let endPos;
+
+      if (vertical && verticalReverse) {
+        endPos = sliderY;
+      } else {
+        endPos = vertical ? sliderY + sliderHeight : sliderX + sliderWidth;
+      }
+
+      endPos = chooseMovePos === 'min' && isDrag && range ? currentPos[1] : endPos;
+
+      if (vertical && verticalReverse) {
+        if (position >= startPos) {
+          position = startPos;
+        } else if (position <= endPos) {
+          position = endPos;
+        }
+      } else {
+        if (position <= startPos) {
+          position = startPos;
+        } else if (position >= endPos) {
+          position = endPos;
+        }
+      }
+
+      return position;
+    };
+    /**
+     * Converting location information to value requires processing if step is not 1 (invalid move returns false)
+     *
+     * @memberof SliderFoundation
+     */
+
+
+    this.transPosToValue = (mousePos, isMin) => {
+      const pos = this.checkMeetMinMax(mousePos);
+
+      const {
+        min,
+        max,
+        currentValue
+      } = this._adapter.getStates();
+
+      const {
+        range,
+        vertical,
+        step,
+        verticalReverse
+      } = this._adapter.getProps();
+
+      const {
+        sliderX,
+        sliderY,
+        sliderWidth,
+        sliderHeight
+      } = this._adapter.getSliderLengths();
+
+      const startPos = vertical ? sliderY : sliderX;
+      const len = vertical ? sliderHeight : sliderWidth;
+      let stepValue;
+
+      if (vertical && verticalReverse) {
+        isMin = !isMin;
+        stepValue = (startPos + len - pos) / len * (max - min) + min;
+      } else {
+        stepValue = (pos - startPos) / len * (max - min) + min;
+      } // debugger
+      // eslint-disable-next-line one-var
+
+
+      let compareValue;
+
+      if (range) {
+        compareValue = isMin ? currentValue[0] : currentValue[1];
+      } else {
+        compareValue = currentValue;
+      }
+
+      if (step !== 1) {
+        // Existence step
+        if (stepValue > compareValue && Math.round(stepValue / step) * step >= stepValue) {
+          // Move right
+          stepValue = Math.round(stepValue / step) * step;
+        } else if (stepValue < compareValue && Math.round(stepValue / step) * step <= stepValue) {
+          // Move left
+          stepValue = Math.round(stepValue / step) * step;
+        } else {
+          // Other moves are invalid, click valid
+          stepValue = compareValue;
+        }
+      }
+
+      if (range && stepValue !== compareValue) {
+        if (vertical && verticalReverse) {
+          return isMin ? [currentValue[0], stepValue] : [stepValue, currentValue[1]];
+        } else {
+          return isMin ? [stepValue, currentValue[1]] : [currentValue[0], stepValue];
+        }
+      } else if (!range && stepValue !== compareValue) {
+        return stepValue;
+      } else {
+        return false;
+      }
+    };
+    /**
+     * Convert value values into location information
+     *
+     * @memberof SliderFoundation
+     */
+
+
+    this.transValueToPos = value => {
+      const {
+        min,
+        max
+      } = this._adapter.getStates();
+
+      const {
+        vertical,
+        range,
+        verticalReverse
+      } = this._adapter.getProps();
+
+      const {
+        sliderX,
+        sliderY,
+        sliderWidth,
+        sliderHeight
+      } = this._adapter.getSliderLengths();
+
+      const startPos = vertical ? sliderY : sliderX;
+      const len = vertical ? sliderHeight : sliderWidth;
+
+      if (range) {
+        if (vertical && verticalReverse) {
+          return [startPos + len - (value[0] - min) * len / (max - min), startPos + len - (value[1] - min) * len / (max - min)];
+        } else {
+          return [(value[0] - min) * len / (max - min) + startPos, (value[1] - min) * len / (max - min) + startPos];
+        }
+      } else {
+        return (value - min) * len / (max - min) + startPos;
+      }
+    };
+    /**
+     * Determine whether the mark should be highlighted: valid interval and include = false
+     *
+     * @memberof SliderFoundation
+     */
+
+
+    this.isMarkActive = mark => {
+      const {
+        min,
+        max,
+        range,
+        included
+      } = this._adapter.getProps();
+
+      const currentValue = this._adapter.getState('currentValue');
+
+      if (typeof (mark / 1) === 'number' && mark >= min && mark <= max) {
+        if (range) {
+          return (mark > currentValue[1] || mark < currentValue[0]) && included ? 'unActive' : 'active';
+        } else {
+          return mark <= currentValue && included ? 'active' : 'unActive';
+        }
+      } else {
+        return false;
+      }
+    };
+    /**
+     * onchange output conversion, default rounding without decimal, step less than 1 has decimal
+     *
+     * @memberof SliderFoundation
+     */
+
+
+    this.outPutValue = inputValue => {
+      const step = this._adapter.getProp('step');
+
+      let transWay = Math.round;
+
+      if (step < 1 && step >= 0.1) {
+        transWay = value => Math.round(value * 10) / 10;
+      } else if (step < 0.1 && step >= 0.01) {
+        transWay = value => Math.round(value * 100) / 100;
+      } else if (step < 0.01 && step >= 0.001) {
+        transWay = value => Math.round(value * 1000) / 1000;
+      }
+
+      if ((0, _isArray.default)(inputValue)) {
+        return [transWay(inputValue[0]), transWay(inputValue[1])];
+      } else {
+        return transWay(inputValue);
+      }
+    };
+
+    this.handleDisabledChange = disabled => {
+      this._adapter.updateDisabled(disabled);
+    };
+
+    this.checkAndUpdateIsInRenderTreeState = () => this._adapter.checkAndUpdateIsInRenderTreeState();
+    /**
+     *
+     *
+     * @memberof SliderFoundation
+     */
+
+
+    this.handleValueChange = (prevValue, nextValue) => {
+      const {
+        min,
+        max
+      } = this._adapter.getStates();
+
+      let resultState = null;
+      const disableState = {};
+
+      if (this.valueFormatIsCorrect(nextValue)) {
+        if ((0, _isArray.default)(prevValue) && (0, _isArray.default)(nextValue)) {
+          nextValue = [nextValue[0] < min ? min : nextValue[0], nextValue[1] > max ? max : nextValue[1] // Math.round(nextValue[1])
+          ]; // this._adapter.notifyChange(this.outPutValue(nextValue));
+
+          resultState = (0, _assign.default)(disableState, {
+            currentValue: nextValue
+          });
+        }
+
+        if (typeof prevValue === 'number' && typeof nextValue === 'number') {
+          if (nextValue > max) {
+            nextValue = max;
+          } else {
+            nextValue = nextValue < min ? min : nextValue; // Math.round(nextValue);
+          } // this._adapter.notifyChange(this.outPutValue(nextValue));
+
+
+          resultState = (0, _assign.default)(disableState, {
+            currentValue: nextValue
+          });
+        }
+      } else {
+        resultState = disableState;
+      }
+
+      if (resultState) {
+        this._adapter.transNewPropsToState(resultState);
+      }
+    };
+
+    this.onHandleDown = (e, handler) => {
+      this._adapter.onHandleDown(e);
+
+      const disabled = this._adapter.getState('disabled');
+
+      const {
+        vertical
+      } = this._adapter.getProps();
+
+      const {
+        dragging
+      } = this._adapter.getOverallVars();
+
+      if (disabled) {
+        return false;
+      }
+
+      this._adapter.setStateVal('isDrag', true);
+
+      this._adapter.setStateVal('chooseMovePos', handler);
+
+      if (handler === 'min') {
+        this._adapter.setDragging([true, dragging[1]]);
+      } else {
+        this._adapter.setDragging([dragging[0], true]);
+      }
+
+      const mousePos = this.handleMousePos(e.pageX, e.pageY);
+      let pos = vertical ? mousePos.y : mousePos.x;
+
+      if (!this._adapter.isEventFromHandle(e)) {
+        this._dragOffset = 0;
+      } else {
+        const handlePosition = this._getHandleCenterPosition(vertical, e.target);
+
+        this._dragOffset = vertical ? pos - handlePosition : pos - handlePosition;
+        pos = handlePosition;
+      }
+
+      return true;
+    };
+
+    this.onHandleMove = e => {
+      this._adapter.setEventDefault(e);
+
+      const {
+        disabled,
+        chooseMovePos
+      } = this._adapter.getStates();
+
+      const {
+        vertical
+      } = this._adapter.getProps();
+
+      const {
+        dragging
+      } = this._adapter.getOverallVars();
+
+      if (disabled) {
+        return false;
+      }
+
+      this.onHandleEnter(chooseMovePos);
+      const mousePos = this.handleMousePos(e.pageX, e.pageY);
+      let pagePos = vertical ? mousePos.y : mousePos.x;
+      pagePos = pagePos - this._dragOffset;
+
+      if (chooseMovePos === 'min' && dragging[0] || chooseMovePos === 'max' && dragging[1]) {
+        this._adapter.onHandleMove(pagePos, chooseMovePos === 'min');
+      }
+
+      return true;
+    }; // run when user touch left or right handle.
+
+
+    this.onHandleTouchStart = (e, handler) => {
+      const handleMinDom = this._adapter.getMinHandleEl().current;
+
+      const handleMaxDom = this._adapter.getMaxHandleEl().current;
+
+      if (e.target === handleMinDom || e.target === handleMaxDom) {
+        e.preventDefault();
+        e.stopPropagation();
+        const touch = (0, _touchPolyfill.default)(e.touches[0], e);
+        this.onHandleDown(touch, handler);
+      }
+    };
+
+    this.onHandleTouchMove = e => {
+      const handleMinDom = this._adapter.getMinHandleEl().current;
+
+      const handleMaxDom = this._adapter.getMaxHandleEl().current;
+
+      if (e.target === handleMinDom || e.target === handleMaxDom) {
+        const touch = (0, _touchPolyfill.default)(e.touches[0], e);
+        this.onHandleMove(touch);
+      }
+    };
+
+    this.onHandleEnter = pos => {
+      // debugger;
+      // this._adapter.setEventDefault(e);
+      const {
+        disabled,
+        focusPos
+      } = this._adapter.getStates();
+
+      if (!disabled) {
+        if (!focusPos && pos !== focusPos) {
+          this._adapter.onHandleEnter(pos);
+        }
+      }
+    };
+
+    this.onHandleLeave = () => {
+      // this._adapter.setEventDefault(e);
+      const disabled = this._adapter.getState('disabled');
+
+      if (!disabled) {
+        this._adapter.onHandleLeave();
+      }
+    };
+
+    this.onHandleUp = e => {
+      this._adapter.onHandleUpBefore(e); // const value = this._adapter.getProp('value');
+
+
+      const {
+        disabled,
+        chooseMovePos
+      } = this._adapter.getStates();
+
+      const {
+        dragging
+      } = this._adapter.getOverallVars();
+
+      if (disabled) {
+        return false;
+      }
+
+      if (chooseMovePos === 'min') {
+        this._adapter.setDragging([false, dragging[1]]);
+      } else {
+        this._adapter.setDragging([dragging[0], false]);
+      }
+
+      this._adapter.setStateVal('isDrag', false); // this._adapter.setStateVal('chooseMovePos', '');
+
+
+      this._adapter.onHandleLeave();
+
+      this._adapter.onHandleUpAfter();
+
+      return true;
+    };
+
+    this.handleWrapClick = e => {
+      const {
+        disabled,
+        isDrag
+      } = this._adapter.getStates();
+
+      if (isDrag || disabled || this._adapter.isEventFromHandle(e)) {
+        return;
+      }
+
+      const {
+        vertical
+      } = this.getProps();
+      const mousePos = this.handleMousePos(e.pageX, e.pageY);
+      const position = vertical ? mousePos.y : mousePos.x;
+      const isMin = this.checkWhichHandle(position);
+      this.setHandlePos(position, isMin, true);
+    };
+    /**
+     * Move the slider to the current click position
+     *
+     * @memberof SliderFoundation
+     */
+
+
+    this.setHandlePos = function (position, isMin) {
+      let clickTrack = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+
+      _this._adapter.onHandleMove(position, isMin, () => _this._adapter.onHandleUpAfter(), clickTrack);
+    };
+    /**
+     * Determine which slider should be moved currently
+     *
+     * @memberof SliderFoundation
+     */
+
+
+    this.checkWhichHandle = pagePos => {
+      const {
+        vertical,
+        verticalReverse
+      } = this.getProps();
+
+      const {
+        currentValue
+      } = this._adapter.getStates();
+
+      const currentPos = this.transValueToPos(currentValue);
+      let isMin = true;
+
+      if ((0, _isArray.default)(currentPos)) {
+        // Slide on both sides
+        if (pagePos > currentPos[1] || Math.abs(pagePos - currentPos[0]) > Math.abs(pagePos - currentPos[1])) {
+          isMin = false;
+        }
+      }
+
+      if (vertical && verticalReverse) {
+        isMin = !isMin;
+      }
+
+      return isMin;
+    };
+
+    this.handleWrapperEnter = () => {
+      this._adapter.setStateVal('showBoundary', true);
+    };
+
+    this.handleWrapperLeave = () => {
+      this._adapter.setStateVal('showBoundary', false);
+    };
+  }
+
+  init() {
+    this._checkCurrentValue();
+
+    this._dragOffset = 0;
+  }
+
+  _checkCurrentValue() {
+    const {
+      currentValue,
+      min,
+      max
+    } = this.getStates();
+    let checked;
+
+    if ((0, _isArray.default)(currentValue)) {
+      checked = [];
+      checked[0] = this._checkValidity(currentValue[0], min, max);
+      checked[1] = this._checkValidity(currentValue[1], min, max);
+    } else {
+      checked = this._checkValidity(currentValue, min, max);
+    }
+
+    this._adapter.updateCurrentValue(checked);
+  }
+  /**
+   * Untie event
+   * @memberof SliderFoundation
+   */
+
+
+  destroy() {
+    // debugger
+    this._adapter.unSubscribeEventListener();
+  }
+
+  _getHandleCenterPosition(vertical, handle) {
+    const pos = handle.getBoundingClientRect();
+    const {
+      x,
+      y
+    } = this.handleMousePos(pos.left + pos.width * 0.5, pos.top + pos.height * 0.5);
+    return vertical ? y : x;
+  }
+
+}
+
+exports.default = SliderFoundation;