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.

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