@yncoder/element-react/dist/npm/es6/src/slider/Button.js

Element UI for React

import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
import _inherits from 'babel-runtime/helpers/inherits';
import * as React from 'react';
import { Component, PropTypes } from '../../libs';

import Tooltip from '../tooltip';

var SliderButton = function (_Component) {
  _inherits(SliderButton, _Component);

  function SliderButton(props) {
    _classCallCheck(this, SliderButton);

    var _this = _possibleConstructorReturn(this, _Component.call(this, props));

    _this.handleMouseEnter = function () {
      _this.setState({
        hovering: true
      });
    };

    _this.handleMouseLeave = function () {
      _this.setState({
        hovering: false
      });
    };

    _this.onDragStart = function (event) {
      if (_this.disabled()) return;

      var position = parseInt(_this.currentPosition(), 10);

      _this.setState({
        dragging: true,
        startX: event.clientX,
        startY: event.clientY,
        startPosition: position,
        newPosition: position
      });

      window.addEventListener('mousemove', _this.onDragging);
      window.addEventListener('mouseup', _this.onDragEnd);
      window.addEventListener('contextmenu', _this.onDragEnd);
    };

    _this.onDragging = function (event) {
      var _this$state = _this.state,
          dragging = _this$state.dragging,
          startY = _this$state.startY,
          startX = _this$state.startX,
          startPosition = _this$state.startPosition;
      var vertical = _this.props.vertical;

      if (!dragging) {
        return;
      }
      var diff = vertical ? startY - event.clientY : event.clientX - startX;

      if (!diff) {
        return;
      }

      var newPosition = startPosition + diff / _this.parent().sliderSize() * 100;
      _this.setState({
        newPosition: newPosition
      });

      _this.setPosition(newPosition);
    };

    _this.onDragEnd = function () {
      var _this$state2 = _this.state,
          dragging = _this$state2.dragging,
          newPosition = _this$state2.newPosition;

      if (dragging) {
        /*
         * 防止在 mouseup 后立即触发 click，导致滑块有几率产生一小段位移
         * 不使用 preventDefault 是因为 mouseup 和 click 没有注册在同一个 DOM 上
         */
        setTimeout(function () {
          _this.setState({
            dragging: false
          }, function () {
            _this.setPosition(newPosition);
          });
        }, 0);

        window.removeEventListener('mousemove', _this.onDragging);
        window.removeEventListener('mouseup', _this.onDragEnd);
        window.removeEventListener('contextmenu', _this.onDragEnd);
      }
    };

    _this.state = {
      hovering: false,
      dragging: false,
      startX: 0,
      startY: 0,
      startPosition: 0,
      newPosition: 0
    };
    return _this;
  }

  SliderButton.prototype.parent = function parent() {
    return this.context.component;
  };

  SliderButton.prototype.setPosition = function setPosition(newPosition) {
    var onChange = this.props.onChange;

    if (newPosition < 0) {
      newPosition = 0;
    } else if (newPosition > 100) {
      newPosition = 100;
    }

    var lengthPerStep = 100 / ((this.max() - this.min()) / this.step());
    var steps = Math.round(newPosition / lengthPerStep);
    var value = steps * lengthPerStep * (this.max() - this.min()) * 0.01 + this.min();

    onChange(parseFloat(value.toFixed(this.precision())));
  };

  /* Computed Methods */

  SliderButton.prototype.formatValue = function formatValue() {
    var formatTooltip = this.parent().props.formatTooltip;


    if (formatTooltip instanceof Function) {
      return formatTooltip(this.props.value);
    }

    return this.props.value;
  };

  SliderButton.prototype.disabled = function disabled() {
    return this.parent().props.disabled;
  };

  SliderButton.prototype.max = function max() {
    return this.parent().props.max;
  };

  SliderButton.prototype.min = function min() {
    return this.parent().props.min;
  };

  SliderButton.prototype.step = function step() {
    return this.parent().props.step;
  };

  SliderButton.prototype.precision = function precision() {
    return this.parent().state.precision;
  };

  SliderButton.prototype.currentPosition = function currentPosition() {
    return (this.props.value - this.min()) / (this.max() - this.min()) * 100 + '%';
  };

  SliderButton.prototype.wrapperStyle = function wrapperStyle() {
    return this.props.vertical ? { bottom: this.currentPosition() } : { left: this.currentPosition() };
  };

  SliderButton.prototype.render = function render() {
    var _state = this.state,
        hovering = _state.hovering,
        dragging = _state.dragging;


    return React.createElement(
      'div',
      {
        className: this.classNames('el-slider__button-wrapper', {
          'hover': hovering,
          'dragging': dragging
        }),
        style: this.wrapperStyle(),
        onMouseEnter: this.handleMouseEnter,
        onMouseLeave: this.handleMouseLeave,
        onMouseDown: this.onDragStart },
      React.createElement(
        Tooltip,
        {
          placement: 'top',
          content: React.createElement(
            'span',
            null,
            this.formatValue()
          ),
          disabled: !this.parent().props.showTooltip
        },
        React.createElement('div', {
          className: this.classNames('el-slider__button', {
            'hover': hovering,
            'dragging': dragging
          })
        })
      )
    );
  };

  return SliderButton;
}(Component);

SliderButton.defaultProps = {
  value: 0
};
export default SliderButton;


SliderButton.contextTypes = {
  component: PropTypes.any
};

SliderButton.propTypes = {
  onChange: PropTypes.func.isRequired,
  value: PropTypes.number,
  vertical: PropTypes.bool
};