You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

228 lines
6.6 KiB

  1. import _extends from 'babel-runtime/helpers/extends';
  2. import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
  3. import _createClass from 'babel-runtime/helpers/createClass';
  4. import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
  5. import _inherits from 'babel-runtime/helpers/inherits';
  6. /* eslint-disable react/prop-types */
  7. import React from 'react';
  8. import PropTypes from 'prop-types';
  9. import warning from 'warning';
  10. import Track from './common/Track';
  11. import createSlider from './common/createSlider';
  12. import * as utils from './utils';
  13. var Slider = function (_React$Component) {
  14. _inherits(Slider, _React$Component);
  15. function Slider(props) {
  16. _classCallCheck(this, Slider);
  17. var _this = _possibleConstructorReturn(this, (Slider.__proto__ || Object.getPrototypeOf(Slider)).call(this, props));
  18. _this.onEnd = function (force) {
  19. var dragging = _this.state.dragging;
  20. _this.removeDocumentEvents();
  21. if (dragging || force) {
  22. _this.props.onAfterChange(_this.getValue());
  23. }
  24. _this.setState({ dragging: false });
  25. };
  26. var defaultValue = props.defaultValue !== undefined ? props.defaultValue : props.min;
  27. var value = props.value !== undefined ? props.value : defaultValue;
  28. _this.state = {
  29. value: _this.trimAlignValue(value),
  30. dragging: false
  31. };
  32. warning(!('minimumTrackStyle' in props), 'minimumTrackStyle will be deprecated, please use trackStyle instead.');
  33. warning(!('maximumTrackStyle' in props), 'maximumTrackStyle will be deprecated, please use railStyle instead.');
  34. return _this;
  35. }
  36. _createClass(Slider, [{
  37. key: 'componentDidUpdate',
  38. value: function componentDidUpdate(prevProps, prevState) {
  39. if (!('value' in this.props || 'min' in this.props || 'max' in this.props)) {
  40. return;
  41. }
  42. var _props = this.props,
  43. value = _props.value,
  44. onChange = _props.onChange;
  45. var theValue = value !== undefined ? value : prevState.value;
  46. var nextValue = this.trimAlignValue(theValue, this.props);
  47. if (nextValue !== prevState.value) {
  48. // eslint-disable-next-line
  49. this.setState({ value: nextValue });
  50. if (utils.isValueOutOfRange(theValue, this.props)) {
  51. onChange(nextValue);
  52. }
  53. }
  54. }
  55. }, {
  56. key: 'onChange',
  57. value: function onChange(state) {
  58. var props = this.props;
  59. var isNotControlled = !('value' in props);
  60. var nextState = state.value > this.props.max ? _extends({}, state, { value: this.props.max }) : state;
  61. if (isNotControlled) {
  62. this.setState(nextState);
  63. }
  64. var changedValue = nextState.value;
  65. props.onChange(changedValue);
  66. }
  67. }, {
  68. key: 'onStart',
  69. value: function onStart(position) {
  70. this.setState({ dragging: true });
  71. var props = this.props;
  72. var prevValue = this.getValue();
  73. props.onBeforeChange(prevValue);
  74. var value = this.calcValueByPos(position);
  75. this.startValue = value;
  76. this.startPosition = position;
  77. if (value === prevValue) return;
  78. this.prevMovedHandleIndex = 0;
  79. this.onChange({ value: value });
  80. }
  81. }, {
  82. key: 'onMove',
  83. value: function onMove(e, position) {
  84. utils.pauseEvent(e);
  85. var oldValue = this.state.value;
  86. var value = this.calcValueByPos(position);
  87. if (value === oldValue) return;
  88. this.onChange({ value: value });
  89. }
  90. }, {
  91. key: 'onKeyboard',
  92. value: function onKeyboard(e) {
  93. var _props2 = this.props,
  94. reverse = _props2.reverse,
  95. vertical = _props2.vertical;
  96. var valueMutator = utils.getKeyboardValueMutator(e, vertical, reverse);
  97. if (valueMutator) {
  98. utils.pauseEvent(e);
  99. var state = this.state;
  100. var oldValue = state.value;
  101. var mutatedValue = valueMutator(oldValue, this.props);
  102. var value = this.trimAlignValue(mutatedValue);
  103. if (value === oldValue) return;
  104. this.onChange({ value: value });
  105. this.props.onAfterChange(value);
  106. this.onEnd();
  107. }
  108. }
  109. }, {
  110. key: 'getValue',
  111. value: function getValue() {
  112. return this.state.value;
  113. }
  114. }, {
  115. key: 'getLowerBound',
  116. value: function getLowerBound() {
  117. return this.props.min;
  118. }
  119. }, {
  120. key: 'getUpperBound',
  121. value: function getUpperBound() {
  122. return this.state.value;
  123. }
  124. }, {
  125. key: 'trimAlignValue',
  126. value: function trimAlignValue(v) {
  127. var nextProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  128. if (v === null) {
  129. return null;
  130. }
  131. var mergedProps = _extends({}, this.props, nextProps);
  132. var val = utils.ensureValueInRange(v, mergedProps);
  133. return utils.ensureValuePrecision(val, mergedProps);
  134. }
  135. }, {
  136. key: 'render',
  137. value: function render() {
  138. var _this2 = this;
  139. var _props3 = this.props,
  140. prefixCls = _props3.prefixCls,
  141. vertical = _props3.vertical,
  142. included = _props3.included,
  143. disabled = _props3.disabled,
  144. minimumTrackStyle = _props3.minimumTrackStyle,
  145. trackStyle = _props3.trackStyle,
  146. handleStyle = _props3.handleStyle,
  147. tabIndex = _props3.tabIndex,
  148. min = _props3.min,
  149. max = _props3.max,
  150. reverse = _props3.reverse,
  151. handleGenerator = _props3.handle;
  152. var _state = this.state,
  153. value = _state.value,
  154. dragging = _state.dragging;
  155. var offset = this.calcOffset(value);
  156. var handle = handleGenerator({
  157. className: prefixCls + '-handle',
  158. prefixCls: prefixCls,
  159. vertical: vertical,
  160. offset: offset,
  161. value: value,
  162. dragging: dragging,
  163. disabled: disabled,
  164. min: min,
  165. max: max,
  166. reverse: reverse,
  167. index: 0,
  168. tabIndex: tabIndex,
  169. style: handleStyle[0] || handleStyle,
  170. ref: function ref(h) {
  171. return _this2.saveHandle(0, h);
  172. }
  173. });
  174. var _trackStyle = trackStyle[0] || trackStyle;
  175. var track = React.createElement(Track, {
  176. className: prefixCls + '-track',
  177. vertical: vertical,
  178. included: included,
  179. offset: 0,
  180. reverse: reverse,
  181. length: offset,
  182. style: _extends({}, minimumTrackStyle, _trackStyle)
  183. });
  184. return { tracks: track, handles: handle };
  185. }
  186. }]);
  187. return Slider;
  188. }(React.Component);
  189. Slider.propTypes = {
  190. defaultValue: PropTypes.number,
  191. value: PropTypes.number,
  192. disabled: PropTypes.bool,
  193. autoFocus: PropTypes.bool,
  194. tabIndex: PropTypes.number,
  195. reverse: PropTypes.bool,
  196. min: PropTypes.number,
  197. max: PropTypes.number
  198. };
  199. export default createSlider(Slider);