material-ui-slider/es5/src/slider/Slider.js

slider fro Material-UI 1.0.0

"use strict";

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
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 _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

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

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

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _lodash = _interopRequireDefault(require("lodash.isundefined"));

var _lodash2 = _interopRequireDefault(require("lodash.isequal"));

var _lodash3 = _interopRequireDefault(require("lodash.isnumber"));

var _lodash4 = _interopRequireDefault(require("lodash.debounce"));

var _styles = require("@material-ui/core/styles");

var _libs = require("../../libs");

var _slider = require("../helpers/slider");

var styles = function styles(theme) {
  return {
    warp: {
      position: "absolute",
      top: 0,
      right: 0,
      bottom: 0,
      left: 0
    },
    trackContainer: {
      width: "100%",
      height: "100%"
    },
    track: {
      position: "absolute",
      transition: "margin 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms, width 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms, height 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms, left 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms, right 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms, top 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms, bottom 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms"
    },
    pointer: {
      marginTop: 1,
      width: 12,
      height: 12,
      backgroundClip: "padding-box",
      border: "0px solid transparent",
      borderRadius: "50%",
      boxSizing: "border-box",
      position: "absolute",
      cursor: "pointer",
      pointerEvents: "inherit",
      transform: "translate(-50%, -50%)",
      transition: "background 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms, border-color 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms, width 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms, height 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms, left 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms, right 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms, top 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms, bottom 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms",
      overflow: "visible",
      outline: "none",
      zIndex: 1
    },
    pointerRight: {
      transform: "translate(50%, -50%)"
    },
    pointerVertical: {
      marginLeft: 1,
      transform: "translate(-50%, 50%)"
    },
    pointerVerticalTop: {
      transform: "translate(-50%, -50%)"
    },
    pointerOver: {
      "&:before": {
        content: '""',
        display: "block",
        border: "0 solid ".concat(theme.palette.action.hover),
        position: "absolute",
        overflow: "hidden",
        borderRadius: "inherit",
        boxSizing: "border-box",
        pointerEvents: "none",
        transition: "border 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, width 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, height 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, left 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, top 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, top 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, bottom 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
        zIndex: -1
      }
    },
    pointerHover: {
      "&:before": {
        width: 36,
        height: 36,
        borderWidth: 12,
        left: -12,
        top: -12
      }
    },
    pointerPressed: {
      "&:before": {
        width: 48,
        height: 48,
        borderWidth: 18,
        borderColor: theme.palette.action.selected,
        left: -18,
        top: -18
      }
    },
    pointerDisabled: {
      width: 8,
      height: 8
    },
    scale: {
      position: "absolute"
    }
  };
};

var Slider =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2.default)(Slider, _Component);

  function Slider(props) {
    var _this;

    (0, _classCallCheck2.default)(this, Slider);
    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(Slider).call(this, props));
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "min", void 0);
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "max", void 0);
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "activePointer", "left");
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "calcDefaultValue", function (defaultValue) {
      var range = _this.props.range;

      var _assertThisInitialize = (0, _assertThisInitialized2.default)(_this),
          min = _assertThisInitialize.min,
          max = _assertThisInitialize.max;

      if (range) {
        var value = _this.state ? _this.state.value : [min, max];

        if (Array.isArray(defaultValue)) {
          var value1 = (0, _lodash3.default)(defaultValue[0]) ? defaultValue[0] : min;
          var value2 = (0, _lodash3.default)(defaultValue[1]) ? defaultValue[1] : max;
          var valueMin = Math.min(value1, value2);
          var valueMax = Math.max(value1, value2);
          value[0] = _this.calcScaleValue(valueMin >= min && valueMin <= max ? valueMin : min);
          value[1] = _this.calcScaleValue(valueMax >= min && valueMax <= max ? valueMax : max);
        } else if ((0, _lodash3.default)(defaultValue)) {
          var _valueMin = _this.calcScaleValue(defaultValue);

          if (_valueMin <= value[1]) value[0] = _valueMin;else value[1] = _valueMin;
        }

        return value;
      } else {
        return _this.calcScaleValue((0, _lodash3.default)(defaultValue) && defaultValue >= min && defaultValue <= max ? defaultValue : min);
      }
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "calcScaleValue", function (value) {
      var scaleLength = _this.props.scaleLength;

      var _assertThisInitialize2 = (0, _assertThisInitialized2.default)(_this),
          min = _assertThisInitialize2.min,
          max = _assertThisInitialize2.max;

      if (scaleLength > 0) {
        value -= min;
        var halfScaleLength = scaleLength / 2;

        if ((max - min) % scaleLength > 0 && value / scaleLength > Math.floor((max - min) / scaleLength)) {
          halfScaleLength = (max - min) % scaleLength / 2;
        }

        if (value % scaleLength > halfScaleLength) {
          var upValue = min + Math.ceil(value / scaleLength) * scaleLength;
          return upValue > max ? max : upValue;
        } else {
          return min + Math.floor(value / scaleLength) * scaleLength;
        }
      } else return value;
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "triggerChange", function (event) {
      _this.props.onChangeComplete && _this.debounce(_this.props.onChangeComplete, _this.state.value, event);
      _this.props.onChange && _this.props.onChange(_this.state.value, event);
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleChange", function (e, skip) {
      var _this$props = _this.props,
          decimals = _this$props.decimals,
          scaleLength = _this$props.scaleLength,
          range = _this$props.range,
          disabled = _this$props.disabled;

      var _assertThisInitialize3 = (0, _assertThisInitialized2.default)(_this),
          min = _assertThisInitialize3.min,
          max = _assertThisInitialize3.max;

      if (disabled) return;
      var offset = (0, _slider.calculateChange)(e, skip, _this.props, _this.container); //保留小数位数

      var decimal = Math.abs(decimals); //如果scaleLength 为小数，保留相同小数位

      decimal = decimal === 0 && scaleLength > 0 && String(scaleLength).indexOf('.') > 0 ? String(scaleLength).split('.')[1].length : decimal;
      var value = offset / 100 * (max - min) + min;

      if (decimal > 0) {
        var pow = Math.pow(10, decimal);
        value = Math.round(value * pow) / pow;
      } else {
        value = Math.round(value);
      }

      var oldValue = _this.state.value;

      var newValue = _this.calcScaleValue(value);

      if (range) {
        if (_this.activePointer === "left" && oldValue[0] !== newValue && newValue < oldValue[1] || newValue <= oldValue[0]) {
          _this.activePointer === "right" && (_this.activePointer = "left");

          _this.setState({
            value: [newValue, oldValue[1]]
          }, function () {
            _this.triggerChange(e);
          });
        } else if (_this.activePointer === "right" && oldValue[1] !== newValue && newValue > oldValue[0] || newValue >= oldValue[1]) {
          _this.activePointer === "left" && (_this.activePointer = "right");

          _this.setState({
            value: [oldValue[0], newValue]
          }, function () {
            _this.triggerChange(e);
          });
        }
      } else {
        if (oldValue !== newValue) {
          _this.setState({
            value: newValue
          }, function () {
            _this.triggerChange(e);
          });
        }
      }
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleMouseOver", function () {
      _this.setState({
        hover: true
      });
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleMouseOut", function () {
      _this.setState({
        hover: false
      });
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleTouchStart", function (e, skip) {
      _this.setState({
        pressed: true
      });

      _this.handleChange(e, skip);

      window.addEventListener("touchend", _this.handleMouseUp);
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleMouseDown", function (e) {
      _this.setState({
        pressed: true
      });

      _this.handleChange(e, true);

      window.addEventListener("mousemove", _this.handleChange);
      window.addEventListener("mouseup", _this.handleMouseUp);
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleMouseUp", function () {
      _this.setState({
        pressed: false
      });

      _this.unbindEventListeners();
    });
    var _min = props.min,
        _max = props.max,
        _defaultValue = props.defaultValue,
        _value = props.value;
    _this.min = Math.min(_min, _max);
    _this.max = Math.max(_min, _max);
    _this.state = {
      value: _this.calcDefaultValue(_value || _defaultValue),
      hover: false,
      pressed: false
    };
    _this.debounce = (0, _lodash4.default)(function (fn, data, event) {
      fn(data, event);
    }, 100);
    return _this;
  }

  (0, _createClass2.default)(Slider, [{
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      this.unbindEventListeners();
    }
  }, {
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(nextProps) {
      var min = nextProps.min,
          max = nextProps.max;
      this.min = Math.min(min, max);
      this.max = Math.max(min, max);

      if (!(0, _lodash.default)(nextProps.value) && !(0, _lodash2.default)(nextProps.value, this.props.value)) {
        this.setState({
          value: this.calcDefaultValue(nextProps.value)
        });
      }
    }
  }, {
    key: "unbindEventListeners",
    value: function unbindEventListeners() {
      window.removeEventListener("mousemove", this.handleChange);
      window.removeEventListener("mouseup", this.handleMouseUp);
      window.removeEventListener("touchend", this.handleMouseUp);
    }
  }, {
    key: "render",
    value: function render() {
      var _this2 = this;

      var _this$props2 = this.props,
          classes = _this$props2.classes,
          theme = _this$props2.theme,
          range = _this$props2.range,
          scaleLength = _this$props2.scaleLength,
          direction = _this$props2.direction,
          color = _this$props2.color,
          disabled = _this$props2.disabled;
      var _this$state = this.state,
          value = _this$state.value,
          hover = _this$state.hover,
          pressed = _this$state.pressed;
      var min = this.min,
          max = this.max;
      var trackColor = disabled ? theme.palette.grey[700] : color || theme.palette.primary[theme.palette.type];
      var vertical = direction === "vertical";
      var rootStyle = Object.assign({
        position: "relative",
        width: "100%",
        height: 48,
        display: "inline-block"
      }, vertical && {
        width: 48,
        height: "100%"
      });
      var containerStyle = Object.assign({
        position: "absolute",
        top: 23,
        left: 0,
        width: "100%",
        height: 2
      }, vertical && {
        top: 0,
        left: 23,
        height: "100%",
        width: 2
      });
      var trackEl;
      var thumbEl;

      if (range) {
        var offsetLeft = Math.round((value[0] - min) / (max - min) * 100);
        var offsetRight = 100 - Math.round((value[1] - min) / (max - min) * 100);
        var trackActiveStyle = Object.assign({
          backgroundColor: trackColor
        }, vertical ? {
          width: "100%",
          bottom: "".concat(offsetLeft, "%"),
          top: "".concat(offsetRight, "%"),
          marginTop: disabled ? 6 : 0,
          marginBottom: disabled ? 6 : 0
        } : {
          height: "100%",
          left: "".concat(offsetLeft, "%"),
          right: "".concat(offsetRight, "%"),
          marginRight: disabled ? 6 : 0,
          marginLeft: disabled ? 6 : 0
        });
        var trackLeftStyle = Object.assign({
          backgroundColor: trackColor,
          opacity: ".38"
        }, vertical ? {
          width: "100%",
          height: disabled ? "calc(".concat(offsetLeft, "% - 6px)") : "calc(".concat(offsetLeft, "%)"),
          marginTop: disabled ? 6 : 0,
          bottom: 0
        } : {
          height: "100%",
          width: disabled ? "calc(".concat(offsetLeft, "% - 6px)") : "calc(".concat(offsetLeft, "%)"),
          marginRight: disabled ? 6 : 0,
          left: 0
        });
        var trackRightStyle = Object.assign({
          backgroundColor: trackColor,
          opacity: ".38"
        }, vertical ? {
          width: "100%",
          height: disabled ? "calc(".concat(offsetRight, "% - 6px)") : "calc(".concat(offsetRight, "%)"),
          marginBottom: disabled ? 6 : 0,
          top: 0
        } : {
          height: "100%",
          width: disabled ? "calc(".concat(offsetRight, "% - 6px)") : "calc(".concat(offsetRight, "%)"),
          marginLeft: disabled ? 6 : 0,
          right: 0
        });
        var thumbLeftStyle = Object.assign({
          backgroundColor: trackColor
        }, vertical ? {
          left: 0,
          bottom: "".concat(offsetLeft, "%")
        } : {
          top: 0,
          left: "".concat(offsetLeft, "%")
        });
        var thumbLeftClass = this.classNames(classes.pointer, disabled && classes.pointerDisabled, vertical && classes.pointerVertical, this.activePointer === "left" && !disabled && (hover || pressed) && classes.pointerOver, this.activePointer === "left" && !disabled && hover && classes.pointerHover, this.activePointer === "left" && !disabled && pressed && classes.pointerPressed);
        var thumbRightStyle = Object.assign({
          backgroundColor: trackColor
        }, vertical ? {
          left: 0,
          top: "".concat(offsetRight, "%")
        } : {
          top: 0,
          right: "".concat(offsetRight, "%")
        });
        var thumbRightClass = this.classNames(classes.pointer, classes.pointerRight, disabled && classes.pointerDisabled, vertical && classes.pointerVertical, vertical && classes.pointerVerticalTop, this.activePointer === "right" && !disabled && (hover || pressed) && classes.pointerOver, this.activePointer === "right" && !disabled && hover && classes.pointerHover, this.activePointer === "right" && !disabled && pressed && classes.pointerPressed);
        trackEl = _react.default.createElement("div", null, _react.default.createElement("div", {
          className: classes.track,
          style: trackLeftStyle
        }), _react.default.createElement("div", {
          className: classes.track,
          style: trackActiveStyle
        }), _react.default.createElement("div", {
          className: classes.track,
          style: trackRightStyle
        }));
        thumbEl = _react.default.createElement("div", null, _react.default.createElement("div", {
          className: thumbLeftClass,
          style: thumbLeftStyle,
          onMouseOver: function onMouseOver() {
            _this2.activePointer = "left";
          },
          onTouchStart: function onTouchStart() {
            _this2.activePointer = "left";
          }
        }), _react.default.createElement("div", {
          className: thumbRightClass,
          style: thumbRightStyle,
          onMouseOver: function onMouseOver() {
            _this2.activePointer = "right";
          },
          onTouchStart: function onTouchStart() {
            _this2.activePointer = "right";
          }
        }));
      } else {
        var offset = Math.round((value - min) / (max - min) * 100);

        var _trackActiveStyle = Object.assign({
          backgroundColor: trackColor
        }, vertical ? {
          width: "100%",
          height: disabled ? "calc(".concat(offset, "% - 6px)") : "calc(".concat(offset, "%)"),
          marginTop: disabled ? 6 : 0,
          bottom: 0
        } : {
          height: "100%",
          width: disabled ? "calc(".concat(offset, "% - 6px)") : "calc(".concat(offset, "%)"),
          marginRight: disabled ? 6 : 0,
          left: 0
        });

        var trackStyle = Object.assign({
          backgroundColor: trackColor,
          opacity: ".38"
        }, vertical ? {
          width: "100%",
          height: disabled ? "calc(".concat(100 - offset, "% - 6px)") : "calc(".concat(100 - offset, "%)"),
          marginBottom: disabled ? 6 : 0,
          top: 0
        } : {
          height: "100%",
          width: disabled ? "calc(".concat(100 - offset, "% - 6px)") : "calc(".concat(100 - offset, "%)"),
          marginLeft: disabled ? 6 : 0,
          right: 0
        });
        var thumbStyle = Object.assign({
          backgroundColor: trackColor
        }, vertical ? {
          left: 0,
          bottom: "".concat(offset, "%")
        } : {
          top: 0,
          left: "".concat(offset, "%")
        });
        var thumbClass = this.classNames(classes.pointer, disabled && classes.pointerDisabled, vertical && classes.pointerVertical, !disabled && (hover || pressed) && classes.pointerOver, !disabled && hover && classes.pointerHover, pressed && classes.pointerPressed);
        trackEl = _react.default.createElement("div", null, _react.default.createElement("div", {
          className: classes.track,
          style: _trackActiveStyle
        }), _react.default.createElement("div", {
          className: classes.track,
          style: trackStyle
        }));
        thumbEl = _react.default.createElement("div", {
          className: thumbClass,
          style: thumbStyle
        });
      }

      var scaleEl;

      if (scaleLength > 0 && scaleLength < max - min) {
        var scaleCount = Math.floor((max - min) / scaleLength);
        var scaleArray = Array.from(new Array(scaleCount + ((max - min) % scaleLength === 0 ? 1 : 2)), function (val, index) {
          return index;
        });
        scaleEl = _react.default.createElement("div", null, scaleArray.map(function (i) {
          var scaleValue = scaleLength * i + min;
          var scaleOffset = 0;

          if (i === scaleArray.length - 1) {
            scaleOffset = 100;
          } else if (i > 0) {
            scaleOffset = (1 - (max - min) % scaleLength / (max - min)) * 100 / scaleCount * i;
          }

          var scaleStyle = Object.assign({
            backgroundColor: trackColor
          }, vertical ? {
            width: "100%",
            height: 2,
            left: 0,
            bottom: "".concat(scaleOffset, "%")
          } : {
            height: "100%",
            width: 2,
            top: 0,
            left: "".concat(scaleOffset, "%")
          });

          if (range && scaleValue > value[0] && scaleValue < value[1] || !range && scaleValue < value) {
            Object.assign(scaleStyle, {
              backgroundColor: "rgba(255,255,255,.38)"
            });
          }

          return _react.default.createElement("span", {
            key: i,
            className: classes.scale,
            style: scaleStyle
          });
        }));
      }

      return _react.default.createElement("div", {
        className: this.className("slider"),
        style: this.style(rootStyle)
      }, _react.default.createElement("div", {
        className: classes.warp,
        ref: function ref(container) {
          return _this2.container = container;
        },
        onMouseOver: this.handleMouseOver,
        onMouseOut: this.handleMouseOut,
        onMouseDown: this.handleMouseDown,
        onTouchMove: this.handleChange,
        onTouchStart: this.handleTouchStart
      }, _react.default.createElement("div", {
        style: containerStyle
      }, trackEl, scaleEl, thumbEl)));
    }
  }]);
  return Slider;
}(_libs.Component);

(0, _defineProperty2.default)(Slider, "defaultProps", {
  min: 0,
  max: 100,
  defaultValue: 0,
  decimals: 0,
  range: false,
  scale: 0,
  direction: "horizontal",
  onChange: function onChange() {},
  onChangeComplete: function onChangeComplete() {}
});

var _default = (0, _styles.withStyles)(styles, {
  withTheme: true
})(Slider);

exports.default = _default;