|
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228 |
- import _extends from 'babel-runtime/helpers/extends';
- import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
- import _createClass from 'babel-runtime/helpers/createClass';
- import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
- import _inherits from 'babel-runtime/helpers/inherits';
- /* eslint-disable react/prop-types */
- import React from 'react';
- import PropTypes from 'prop-types';
- import warning from 'warning';
- import Track from './common/Track';
- import createSlider from './common/createSlider';
- import * as utils from './utils';
-
- var Slider = function (_React$Component) {
- _inherits(Slider, _React$Component);
-
- function Slider(props) {
- _classCallCheck(this, Slider);
-
- var _this = _possibleConstructorReturn(this, (Slider.__proto__ || Object.getPrototypeOf(Slider)).call(this, props));
-
- _this.onEnd = function (force) {
- var dragging = _this.state.dragging;
-
- _this.removeDocumentEvents();
- if (dragging || force) {
- _this.props.onAfterChange(_this.getValue());
- }
- _this.setState({ dragging: false });
- };
-
- var defaultValue = props.defaultValue !== undefined ? props.defaultValue : props.min;
- var value = props.value !== undefined ? props.value : defaultValue;
-
- _this.state = {
- value: _this.trimAlignValue(value),
- dragging: false
- };
-
- warning(!('minimumTrackStyle' in props), 'minimumTrackStyle will be deprecated, please use trackStyle instead.');
- warning(!('maximumTrackStyle' in props), 'maximumTrackStyle will be deprecated, please use railStyle instead.');
- return _this;
- }
-
- _createClass(Slider, [{
- key: 'componentDidUpdate',
- value: function componentDidUpdate(prevProps, prevState) {
- if (!('value' in this.props || 'min' in this.props || 'max' in this.props)) {
- return;
- }
- var _props = this.props,
- value = _props.value,
- onChange = _props.onChange;
-
- var theValue = value !== undefined ? value : prevState.value;
- var nextValue = this.trimAlignValue(theValue, this.props);
- if (nextValue !== prevState.value) {
- // eslint-disable-next-line
- this.setState({ value: nextValue });
- if (utils.isValueOutOfRange(theValue, this.props)) {
- onChange(nextValue);
- }
- }
- }
- }, {
- key: 'onChange',
- value: function onChange(state) {
- var props = this.props;
- var isNotControlled = !('value' in props);
- var nextState = state.value > this.props.max ? _extends({}, state, { value: this.props.max }) : state;
- if (isNotControlled) {
- this.setState(nextState);
- }
-
- var changedValue = nextState.value;
- props.onChange(changedValue);
- }
- }, {
- key: 'onStart',
- value: function onStart(position) {
- this.setState({ dragging: true });
- var props = this.props;
- var prevValue = this.getValue();
- props.onBeforeChange(prevValue);
-
- var value = this.calcValueByPos(position);
- this.startValue = value;
- this.startPosition = position;
-
- if (value === prevValue) return;
-
- this.prevMovedHandleIndex = 0;
-
- this.onChange({ value: value });
- }
- }, {
- key: 'onMove',
- value: function onMove(e, position) {
- utils.pauseEvent(e);
- var oldValue = this.state.value;
-
- var value = this.calcValueByPos(position);
- if (value === oldValue) return;
-
- this.onChange({ value: value });
- }
- }, {
- key: 'onKeyboard',
- value: function onKeyboard(e) {
- var _props2 = this.props,
- reverse = _props2.reverse,
- vertical = _props2.vertical;
-
- var valueMutator = utils.getKeyboardValueMutator(e, vertical, reverse);
- if (valueMutator) {
- utils.pauseEvent(e);
- var state = this.state;
- var oldValue = state.value;
- var mutatedValue = valueMutator(oldValue, this.props);
- var value = this.trimAlignValue(mutatedValue);
- if (value === oldValue) return;
-
- this.onChange({ value: value });
- this.props.onAfterChange(value);
- this.onEnd();
- }
- }
- }, {
- key: 'getValue',
- value: function getValue() {
- return this.state.value;
- }
- }, {
- key: 'getLowerBound',
- value: function getLowerBound() {
- return this.props.min;
- }
- }, {
- key: 'getUpperBound',
- value: function getUpperBound() {
- return this.state.value;
- }
- }, {
- key: 'trimAlignValue',
- value: function trimAlignValue(v) {
- var nextProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-
- if (v === null) {
- return null;
- }
-
- var mergedProps = _extends({}, this.props, nextProps);
- var val = utils.ensureValueInRange(v, mergedProps);
- return utils.ensureValuePrecision(val, mergedProps);
- }
- }, {
- key: 'render',
- value: function render() {
- var _this2 = this;
-
- var _props3 = this.props,
- prefixCls = _props3.prefixCls,
- vertical = _props3.vertical,
- included = _props3.included,
- disabled = _props3.disabled,
- minimumTrackStyle = _props3.minimumTrackStyle,
- trackStyle = _props3.trackStyle,
- handleStyle = _props3.handleStyle,
- tabIndex = _props3.tabIndex,
- min = _props3.min,
- max = _props3.max,
- reverse = _props3.reverse,
- handleGenerator = _props3.handle;
- var _state = this.state,
- value = _state.value,
- dragging = _state.dragging;
-
- var offset = this.calcOffset(value);
- var handle = handleGenerator({
- className: prefixCls + '-handle',
- prefixCls: prefixCls,
- vertical: vertical,
- offset: offset,
- value: value,
- dragging: dragging,
- disabled: disabled,
- min: min,
- max: max,
- reverse: reverse,
- index: 0,
- tabIndex: tabIndex,
- style: handleStyle[0] || handleStyle,
- ref: function ref(h) {
- return _this2.saveHandle(0, h);
- }
- });
-
- var _trackStyle = trackStyle[0] || trackStyle;
- var track = React.createElement(Track, {
- className: prefixCls + '-track',
- vertical: vertical,
- included: included,
- offset: 0,
- reverse: reverse,
- length: offset,
- style: _extends({}, minimumTrackStyle, _trackStyle)
- });
-
- return { tracks: track, handles: handle };
- }
- }]);
-
- return Slider;
- }(React.Component);
-
- Slider.propTypes = {
- defaultValue: PropTypes.number,
- value: PropTypes.number,
- disabled: PropTypes.bool,
- autoFocus: PropTypes.bool,
- tabIndex: PropTypes.number,
- reverse: PropTypes.bool,
- min: PropTypes.number,
- max: PropTypes.number
- };
-
-
- export default createSlider(Slider);
|