1 | import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
|
2 | import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
|
3 | import _inherits from 'babel-runtime/helpers/inherits';
|
4 | import _extends from 'babel-runtime/helpers/extends';
|
5 |
|
6 | var _class, _temp;
|
7 |
|
8 | import classNames from 'classnames';
|
9 | import React from 'react';
|
10 | import PropTypes from 'prop-types';
|
11 | import { polyfill } from 'react-lifecycles-compat';
|
12 | import { events, func, KEYCODE, dom, obj } from '../../util';
|
13 | import Balloon from '../../balloon';
|
14 | import { getPercent, getPrecision, isEqual, getDragging } from '../utils';
|
15 | import Scale from './scale';
|
16 | import Track from './track';
|
17 | import Selected from './selected';
|
18 | import Mark from './mark';
|
19 | import Slider from './slider';
|
20 | import FixedSlider from './fixedSlider';
|
21 |
|
22 | var Tooltip = Balloon.Tooltip;
|
23 | var noop = func.noop,
|
24 | bindCtx = func.bindCtx;
|
25 | var pickOthers = obj.pickOthers;
|
26 |
|
27 |
|
28 | function _isMultiple(slider, isFixedWidth) {
|
29 | return isFixedWidth || slider === 'double';
|
30 | }
|
31 |
|
32 | function LowerSlider(props) {
|
33 | var hasTip = props.hasTip,
|
34 | value = props.value,
|
35 | tipRender = props.tipRender,
|
36 | slider = props.slider,
|
37 | tooltipVisible = props.tooltipVisible,
|
38 | onTooltipVisibleChange = props.onTooltipVisibleChange,
|
39 | tooltipAnimation = props.tooltipAnimation;
|
40 |
|
41 |
|
42 | if (_isMultiple(slider)) {
|
43 | return hasTip ? React.createElement(
|
44 | Tooltip,
|
45 | {
|
46 | popupContainer: function popupContainer(target) {
|
47 | return target.parentNode;
|
48 | },
|
49 | popupProps: {
|
50 | visible: tooltipVisible,
|
51 | onVisibleChange: onTooltipVisibleChange,
|
52 | animation: tooltipAnimation,
|
53 | needAdjust: false
|
54 | },
|
55 | trigger: Slider(_extends({}, props, { value: value[0] })),
|
56 | align: 't'
|
57 | },
|
58 | tipRender('' + value[0])
|
59 | ) : Slider(_extends({}, props, { value: value[0] }));
|
60 | }
|
61 | return null;
|
62 | }
|
63 |
|
64 | LowerSlider.propTypes = {
|
65 | hasTip: PropTypes.bool,
|
66 | tooltipVisible: PropTypes.bool,
|
67 | onTooltipVisibleChange: PropTypes.func,
|
68 | tooltipAnimation: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
|
69 | value: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number)]),
|
70 | tipRender: PropTypes.func,
|
71 | slider: PropTypes.oneOf(['single', 'double'])
|
72 | };
|
73 |
|
74 | function UpperSlider(props) {
|
75 | var newprop = _extends({}, props);
|
76 | var hasTip = newprop.hasTip,
|
77 | value = newprop.value,
|
78 | tipRender = newprop.tipRender,
|
79 | slider = newprop.slider,
|
80 | tooltipVisible = newprop.tooltipVisible,
|
81 | onTooltipVisibleChange = newprop.onTooltipVisibleChange,
|
82 | tooltipAnimation = newprop.tooltipAnimation;
|
83 |
|
84 | if (_isMultiple(slider)) {
|
85 | delete newprop.onKeyDown;
|
86 | return hasTip ? React.createElement(
|
87 | Tooltip,
|
88 | {
|
89 | popupContainer: function popupContainer(target) {
|
90 | return target.parentNode;
|
91 | },
|
92 | popupProps: {
|
93 | visible: tooltipVisible,
|
94 | onVisibleChange: onTooltipVisibleChange,
|
95 | animation: tooltipAnimation,
|
96 | needAdjust: false
|
97 | },
|
98 | trigger: Slider(_extends({}, newprop, { value: value[1] })),
|
99 | align: 't'
|
100 | },
|
101 | tipRender(value[1])
|
102 | ) : Slider(_extends({}, newprop, { value: value[1] }));
|
103 | }
|
104 | return hasTip ? React.createElement(
|
105 | Tooltip,
|
106 | {
|
107 | popupContainer: function popupContainer(target) {
|
108 | return target.parentNode;
|
109 | },
|
110 | popupProps: {
|
111 | visible: tooltipVisible,
|
112 | onVisibleChange: onTooltipVisibleChange,
|
113 | animation: tooltipAnimation,
|
114 | needAdjust: false
|
115 | },
|
116 | animation: {
|
117 | in: 'fadeInUp',
|
118 | out: 'fadeOutDown'
|
119 | },
|
120 | trigger: Slider(newprop),
|
121 | align: 't'
|
122 | },
|
123 | tipRender(value)
|
124 | ) : Slider(newprop);
|
125 | }
|
126 |
|
127 | UpperSlider.propTypes = {
|
128 | hasTip: PropTypes.bool,
|
129 | tooltipVisible: PropTypes.bool,
|
130 | onTooltipVisibleChange: PropTypes.func,
|
131 | tooltipAnimation: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
|
132 | value: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number)]),
|
133 | tipRender: PropTypes.func,
|
134 | slider: PropTypes.oneOf(['single', 'double'])
|
135 | };
|
136 |
|
137 | function pauseEvent(e) {
|
138 | e.stopPropagation();
|
139 | e.preventDefault();
|
140 | }
|
141 |
|
142 |
|
143 | var Range = (_temp = _class = function (_React$Component) {
|
144 | _inherits(Range, _React$Component);
|
145 |
|
146 | function Range(props) {
|
147 | _classCallCheck(this, Range);
|
148 |
|
149 | var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));
|
150 |
|
151 | var min = props.min;
|
152 |
|
153 | var initialValue = _isMultiple(props.slider) ? [min, min] : min;
|
154 | var defaultValue = 'defaultValue' in props ? props.defaultValue : initialValue;
|
155 | var value = props.value !== undefined ? props.value : defaultValue;
|
156 |
|
157 | _this.state = {
|
158 | value: value,
|
159 | tempValue: value,
|
160 | hasMovingClass: false,
|
161 | lowerTooltipVisible: false,
|
162 | upperTooltipVisible: false,
|
163 | tooltipAnimation: true
|
164 | };
|
165 |
|
166 | bindCtx(_this, ['handleLowerTooltipVisibleChange', 'handleUpperTooltipVisibleChange', 'onKeyDown']);
|
167 | return _this;
|
168 | }
|
169 |
|
170 | Range.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {
|
171 | if ('value' in props) {
|
172 | var min = props.min,
|
173 | slider = props.slider,
|
174 | value = props.value;
|
175 | var hasMovingClass = state.hasMovingClass;
|
176 |
|
177 | var newState = {
|
178 | value: value
|
179 | };
|
180 |
|
181 | if (value === undefined) {
|
182 | newState.value = _isMultiple(slider) ? [min, min] : min;
|
183 | }
|
184 |
|
185 | if (!hasMovingClass) {
|
186 | newState.tempValue = newState.value;
|
187 | }
|
188 |
|
189 | return newState;
|
190 | }
|
191 | return null;
|
192 | };
|
193 |
|
194 | Range.prototype._marksToScales = function _marksToScales(marks) {
|
195 | var result = [];
|
196 | if (Object.prototype.toString.call(marks) === '[object Object]') {
|
197 | for (var key in marks) {
|
198 | if (Object.hasOwnProperty.call(marks, key)) {
|
199 | result.push(parseInt(key));
|
200 | }
|
201 | }
|
202 | } else {
|
203 | result = marks;
|
204 | }
|
205 | return result;
|
206 | };
|
207 |
|
208 | Range.prototype._calcScales = function _calcScales() {
|
209 | var _props = this.props,
|
210 | min = _props.min,
|
211 | max = _props.max,
|
212 | marks = _props.marks;
|
213 |
|
214 | var scales = this._marksToScales(marks);
|
215 |
|
216 | if (scales !== false) {
|
217 | if (Array.isArray(scales)) {
|
218 | return scales;
|
219 | } else {
|
220 | var pace = (max - min) / scales;
|
221 | var result = [];
|
222 |
|
223 | result.push(min);
|
224 | for (var i = 1; i < scales; i++) {
|
225 | result.push(min + i * pace);
|
226 | }
|
227 | result.push(max);
|
228 | return result;
|
229 | }
|
230 | } else {
|
231 | return [];
|
232 | }
|
233 | };
|
234 |
|
235 | Range.prototype._calcMarks = function _calcMarks() {
|
236 | var _props2 = this.props,
|
237 | min = _props2.min,
|
238 | max = _props2.max,
|
239 | marks = _props2.marks;
|
240 |
|
241 |
|
242 | var result = {};
|
243 |
|
244 | if (Array.isArray(marks)) {
|
245 | marks.forEach(function (m) {
|
246 | result[m] = m.toString();
|
247 | });
|
248 | } else if (typeof marks === 'number') {
|
249 | var pace = (max - min) / marks;
|
250 |
|
251 | result[min] = min;
|
252 | for (var i = 1; i < marks; i++) {
|
253 | var mark = min + i * pace;
|
254 | var precision = getPrecision(mark);
|
255 | if (precision > 2) {
|
256 | precision = 2;
|
257 | }
|
258 | mark = mark.toFixed(precision);
|
259 | result[mark] = mark;
|
260 | }
|
261 | result[max] = max;
|
262 | } else {
|
263 | result = marks;
|
264 | }
|
265 | return result;
|
266 | };
|
267 |
|
268 | Range.prototype._onMouseDown = function _onMouseDown(e) {
|
269 | if (e.button === 0) {
|
270 | this._start(e.pageX);
|
271 | this._addDocumentMouseEvents();
|
272 | pauseEvent(e);
|
273 | }
|
274 | };
|
275 |
|
276 | Range.prototype._onTouchStart = function _onTouchStart(e) {
|
277 | this._start(e.targetTouches[0].pageX);
|
278 | this._addDocumentTouchEvents();
|
279 | e.stopPropagation();
|
280 | };
|
281 |
|
282 | Range.prototype.onKeyDown = function onKeyDown(e) {
|
283 | if (this.props.disabled) return;
|
284 |
|
285 | if (e.keyCode === KEYCODE.LEFT_ARROW || e.keyCode === KEYCODE.RIGHT_ARROW) {
|
286 | e.stopPropagation();
|
287 | e.preventDefault();
|
288 | var newValue = void 0;
|
289 | if (e.keyCode === KEYCODE.LEFT_ARROW) {
|
290 | newValue = this.state.value - this.props.step;
|
291 | } else {
|
292 | newValue = this.state.value + this.props.step;
|
293 | }
|
294 | if (newValue > this.props.max) {
|
295 | newValue = this.props.max;
|
296 | }
|
297 | if (newValue < this.props.min) {
|
298 | newValue = this.props.min;
|
299 | }
|
300 | if (newValue !== this.state.value) {
|
301 | this.setState({
|
302 | value: newValue
|
303 | });
|
304 | this.props.onChange(newValue);
|
305 | }
|
306 | }
|
307 | };
|
308 |
|
309 | Range.prototype._start = function _start(position) {
|
310 | this.setState({
|
311 | hasMovingClass: true
|
312 | });
|
313 |
|
314 | var tempValue = this.state.tempValue;
|
315 |
|
316 | var range = this.dom;
|
317 | var start = dom.getOffset(range).left;
|
318 |
|
319 | var width = range.clientWidth;
|
320 | if (!width) {
|
321 | if (range.style.width) {
|
322 | var index = range.style.width.indexOf('px');
|
323 | if (index !== -1) {
|
324 | width = Number(range.style.width.slice(0, index));
|
325 | }
|
326 | }
|
327 | }
|
328 |
|
329 | this._moving = {
|
330 | start: start,
|
331 | end: start + width,
|
332 | startValue: tempValue
|
333 | };
|
334 |
|
335 |
|
336 | this._onProcess(position, true);
|
337 | };
|
338 |
|
339 | Range.prototype._end = function _end() {
|
340 | var startValue = this._moving.startValue;
|
341 | var _state = this.state,
|
342 | tempValue = _state.tempValue,
|
343 | value = _state.value;
|
344 |
|
345 | this._moving = null;
|
346 | this._removeDocumentEvents();
|
347 | this.setState({
|
348 | hasMovingClass: false,
|
349 | lowerTooltipVisible: false,
|
350 | upperTooltipVisible: false,
|
351 | tooltipAnimation: true
|
352 | });
|
353 |
|
354 | if (!isEqual(tempValue, startValue)) {
|
355 |
|
356 | if (!('value' in this.props)) {
|
357 | this.setState({
|
358 | value: tempValue
|
359 | });
|
360 | } else {
|
361 | this.setState({
|
362 |
|
363 | tempValue: value,
|
364 | value: value
|
365 | });
|
366 | }
|
367 | this.props.onChange(tempValue);
|
368 | }
|
369 | };
|
370 |
|
371 | Range.prototype._move = function _move(e) {
|
372 | var position = e.type === 'mousemove' ? e.pageX : e.targetTouches[0].pageX;
|
373 | this._onProcess(position);
|
374 | };
|
375 |
|
376 | Range.prototype._onProcess = function _onProcess(position, start) {
|
377 | var tempValue = this.state.tempValue;
|
378 |
|
379 | var current = this._positionToCurrent(position);
|
380 |
|
381 | if (this.isFixedWidth) {
|
382 | if (start) {
|
383 | this.lastPosition = current;
|
384 | }
|
385 | } else if (start) {
|
386 | this.lastPosition = current;
|
387 | if (_isMultiple(this.props.slider)) {
|
388 | this._moving.dragging = getDragging(current, tempValue);
|
389 | } else {
|
390 | this._moving.dragging = 'upper';
|
391 | }
|
392 |
|
393 | this.setState({
|
394 | lowerTooltipVisible: this._moving.dragging === 'lower',
|
395 | upperTooltipVisible: this._moving.dragging === 'upper',
|
396 | tooltipAnimation: false
|
397 | });
|
398 | } else if (this.oldDragging === 'lower' && this._moving.dragging === 'upper') {
|
399 | this.setState({
|
400 | upperTooltipVisible: true,
|
401 | lowerTooltipVisible: false
|
402 | });
|
403 | } else if (this.oldDragging === 'upper' && this._moving.dragging === 'lower') {
|
404 | this.setState({
|
405 | upperTooltipVisible: false,
|
406 | lowerTooltipVisible: true
|
407 | });
|
408 | }
|
409 |
|
410 | this.oldDragging = this._moving.dragging;
|
411 |
|
412 | var nextValue = this._currentToValue(current, tempValue, this.lastPosition, this.isFixedWidth);
|
413 | this.lastPosition = current;
|
414 |
|
415 | if (!isEqual(nextValue, tempValue)) {
|
416 | this.setState({
|
417 | tempValue: nextValue
|
418 | });
|
419 | this.props.onProcess(nextValue);
|
420 | }
|
421 | };
|
422 |
|
423 | Range.prototype._addDocumentMouseEvents = function _addDocumentMouseEvents() {
|
424 | this._onMouseMoveListener = events.on(document, 'mousemove', this._move.bind(this));
|
425 | this._onMouseUpListener = events.on(document, 'mouseup', this._end.bind(this));
|
426 | };
|
427 |
|
428 | Range.prototype._addDocumentTouchEvents = function _addDocumentTouchEvents() {
|
429 | this._onTouchMoveListener = events.on(document, 'touchmove', this._move.bind(this));
|
430 | this._onTouchEndListener = events.on(document, 'touchend', this._end.bind(this));
|
431 | };
|
432 |
|
433 | Range.prototype._removeDocumentEvents = function _removeDocumentEvents() {
|
434 | if (this._onMouseMoveListener) {
|
435 | this._onMouseMoveListener.off();
|
436 | this._onMouseMoveListener = null;
|
437 | }
|
438 |
|
439 | if (this._onMouseUpListener) {
|
440 | this._onMouseUpListener.off();
|
441 | this._onMouseUpListener = null;
|
442 | }
|
443 |
|
444 | if (this._onTouchMoveListener) {
|
445 | this._onTouchMoveListener.off();
|
446 | this._onTouchMoveListener = null;
|
447 | }
|
448 |
|
449 | if (this._onTouchEndListener) {
|
450 | this._onTouchEndListener.off();
|
451 | this._onTouchEndListener = null;
|
452 | }
|
453 | };
|
454 |
|
455 |
|
456 |
|
457 |
|
458 | Range.prototype._positionToCurrent = function _positionToCurrent(position) {
|
459 | var _moving = this._moving,
|
460 | start = _moving.start,
|
461 | end = _moving.end;
|
462 | var _props3 = this.props,
|
463 | step = _props3.step,
|
464 | min = _props3.min,
|
465 | max = _props3.max,
|
466 | rtl = _props3.rtl;
|
467 |
|
468 |
|
469 | if (position < start) {
|
470 | position = start;
|
471 | } else if (position > end) {
|
472 | position = end;
|
473 | }
|
474 | var percent = getPercent(start, end, position);
|
475 | percent = rtl ? 100 - percent : percent;
|
476 |
|
477 | var newValue = parseFloat((Math.round(percent / 100 * (max - min) / step) * step).toFixed(getPrecision(step)));
|
478 | var currentValue = (min + newValue).toFixed(getPrecision(step));
|
479 |
|
480 | return Number(currentValue);
|
481 | };
|
482 |
|
483 | Range.prototype._currentToValue = function _currentToValue(current, preValue, lastPosition, isFixedWidth) {
|
484 | var dragging = this._moving.dragging;
|
485 | var _props4 = this.props,
|
486 | min = _props4.min,
|
487 | max = _props4.max;
|
488 |
|
489 |
|
490 | if (!_isMultiple(this.props.slider, isFixedWidth)) {
|
491 | return current;
|
492 | } else {
|
493 | var result = void 0;
|
494 |
|
495 | var precision = getPrecision(this.props.step);
|
496 | var diff = current - lastPosition;
|
497 | var newLeft = +(+preValue[0] + diff).toFixed(precision);
|
498 | var newRight = +(+preValue[1] + diff).toFixed(precision);
|
499 |
|
500 | var newMaxLeft = +(max - preValue[1] + preValue[0]).toFixed(precision);
|
501 | var newMinRight = +(min + preValue[1] - preValue[0]).toFixed(precision);
|
502 |
|
503 | if (isFixedWidth) {
|
504 | if (newLeft < min) {
|
505 | result = [min, newMinRight];
|
506 | } else if (newRight > max) {
|
507 | result = [newMaxLeft, max];
|
508 | } else {
|
509 | result = [newLeft, newRight];
|
510 | }
|
511 | } else if (dragging === 'lower') {
|
512 | if (current > preValue[1]) {
|
513 | result = [preValue[1], current];
|
514 | this._moving.dragging = 'upper';
|
515 | } else {
|
516 | result = [current, preValue[1]];
|
517 | }
|
518 | } else if (dragging === 'upper') {
|
519 | if (current < preValue[0]) {
|
520 | result = [current, preValue[0]];
|
521 | this._moving.dragging = 'lower';
|
522 | } else {
|
523 | result = [preValue[0], current];
|
524 | }
|
525 | }
|
526 |
|
527 | return result;
|
528 | }
|
529 | };
|
530 |
|
531 | Range.prototype.handleLowerTooltipVisibleChange = function handleLowerTooltipVisibleChange(visible) {
|
532 | if (this.state.hasMovingClass) {
|
533 | return;
|
534 | }
|
535 | this.setState({
|
536 | lowerTooltipVisible: visible
|
537 | });
|
538 | };
|
539 |
|
540 | Range.prototype.handleUpperTooltipVisibleChange = function handleUpperTooltipVisibleChange(visible) {
|
541 | if (this.state.hasMovingClass) {
|
542 | return;
|
543 | }
|
544 | this.setState({
|
545 | upperTooltipVisible: visible
|
546 | });
|
547 | };
|
548 |
|
549 | Range.prototype.render = function render() {
|
550 | var _classNames,
|
551 | _this2 = this;
|
552 |
|
553 | var value = this._moving ? this.state.tempValue : this.state.value;
|
554 |
|
555 | var _props5 = this.props,
|
556 | prefix = _props5.prefix,
|
557 | min = _props5.min,
|
558 | max = _props5.max,
|
559 | disabled = _props5.disabled,
|
560 | style = _props5.style,
|
561 | id = _props5.id,
|
562 | slider = _props5.slider,
|
563 | reverse = _props5.reverse,
|
564 | className = _props5.className,
|
565 | marks = _props5.marks,
|
566 | marksPosition = _props5.marksPosition,
|
567 | hasTip = _props5.hasTip,
|
568 | tipRender = _props5.tipRender,
|
569 | fixedWidth = _props5.fixedWidth,
|
570 | defaultValue = _props5.defaultValue,
|
571 | tooltipVisible = _props5.tooltipVisible,
|
572 | rtl = _props5.rtl,
|
573 | isPreview = _props5.isPreview,
|
574 | renderPreview = _props5.renderPreview;
|
575 |
|
576 |
|
577 | var others = pickOthers(Object.keys(Range.propTypes), this.props);
|
578 |
|
579 | var classes = classNames((_classNames = {}, _classNames[prefix + 'range'] = true, _classNames.disabled = disabled, _classNames[className] = className, _classNames));
|
580 |
|
581 | if (Array.isArray(value)) {
|
582 | value.forEach(function (item, index) {
|
583 | if (item > max) {
|
584 | value[index] = max;
|
585 | }
|
586 | });
|
587 | } else if (value > max) {
|
588 | value = max;
|
589 | }
|
590 |
|
591 | var commonProps = {
|
592 | prefix: prefix,
|
593 | min: min,
|
594 | max: max,
|
595 | value: value,
|
596 | reverse: reverse,
|
597 | slider: slider,
|
598 | hasTip: hasTip,
|
599 | tipRender: tipRender,
|
600 | marksPosition: marksPosition,
|
601 | tooltipVisible: tooltipVisible,
|
602 | hasMovingClass: this.state.hasMovingClass,
|
603 | disabled: disabled,
|
604 | rtl: rtl
|
605 | };
|
606 |
|
607 | this.isFixedWidth = fixedWidth && (value ? Array.isArray(value) : defaultValue ? Array.isArray(defaultValue) : false);
|
608 |
|
609 | if (isPreview) {
|
610 | var previewCls = classNames(className, prefix + 'form-preview');
|
611 |
|
612 | if ('renderPreview' in this.props) {
|
613 | return React.createElement(
|
614 | 'div',
|
615 | _extends({ id: id, dir: rtl ? 'rtl' : 'ltr' }, others, { className: previewCls }),
|
616 | renderPreview(value, this.props)
|
617 | );
|
618 | }
|
619 |
|
620 | return React.createElement(
|
621 | 'p',
|
622 | _extends({ id: id, dir: rtl ? 'rtl' : 'ltr' }, others, { className: previewCls }),
|
623 | Array.isArray(value) ? value.join('~') : value
|
624 | );
|
625 | }
|
626 |
|
627 | return React.createElement(
|
628 | 'div',
|
629 | _extends({
|
630 | ref: function ref(dom) {
|
631 | _this2.dom = dom;
|
632 | }
|
633 | }, others, {
|
634 | style: style,
|
635 | className: classes,
|
636 | id: id,
|
637 | dir: rtl ? 'rtl' : 'ltr',
|
638 | onMouseDown: disabled ? noop : this._onMouseDown.bind(this),
|
639 | onTouchStart: disabled ? noop : this._onTouchStart.bind(this)
|
640 | }),
|
641 | marks !== false && marksPosition === 'above' ? React.createElement(Mark, _extends({}, commonProps, { marks: this._calcMarks() })) : null,
|
642 | React.createElement(
|
643 | 'div',
|
644 | { className: prefix + 'range-inner' },
|
645 | React.createElement(Scale, _extends({}, commonProps, { scales: this._calcScales() })),
|
646 | React.createElement(Track, commonProps),
|
647 | this.isFixedWidth ? React.createElement(FixedSlider, commonProps) : React.createElement(
|
648 | 'div',
|
649 | null,
|
650 | React.createElement(Selected, commonProps),
|
651 | React.createElement(LowerSlider, _extends({}, commonProps, {
|
652 | hasMovingClass: this.state.hasMovingClass && this._moving && this._moving.dragging === 'lower',
|
653 | tooltipVisible: tooltipVisible || this.state.lowerTooltipVisible,
|
654 | onTooltipVisibleChange: this.handleLowerTooltipVisibleChange,
|
655 | tooltipAnimation: this.state.tooltipAnimation ? {
|
656 | in: 'expandInUp',
|
657 | out: 'expandOutDown'
|
658 | } : false
|
659 | })),
|
660 | React.createElement(UpperSlider, _extends({}, commonProps, {
|
661 | onKeyDown: this.onKeyDown,
|
662 | hasMovingClass: this.state.hasMovingClass && this._moving && this._moving.dragging === 'upper',
|
663 | tooltipVisible: tooltipVisible || this.state.upperTooltipVisible,
|
664 | onTooltipVisibleChange: this.handleUpperTooltipVisibleChange,
|
665 | tooltipAnimation: this.state.tooltipAnimation ? {
|
666 | in: 'expandInUp',
|
667 | out: 'expandOutDown'
|
668 | } : false
|
669 | }))
|
670 | )
|
671 | ),
|
672 | marks !== false && marksPosition === 'below' ? React.createElement(Mark, _extends({}, commonProps, { marks: this._calcMarks() })) : null
|
673 | );
|
674 | };
|
675 |
|
676 | return Range;
|
677 | }(React.Component), _class.contextTypes = {
|
678 | prefix: PropTypes.string
|
679 | }, _class.propTypes = {
|
680 | |
681 |
|
682 |
|
683 | prefix: PropTypes.string,
|
684 | |
685 |
|
686 |
|
687 | className: PropTypes.string,
|
688 | |
689 |
|
690 |
|
691 | style: PropTypes.object,
|
692 | |
693 |
|
694 |
|
695 |
|
696 | slider: PropTypes.oneOf(['single', 'double']),
|
697 | |
698 |
|
699 |
|
700 | min: PropTypes.number,
|
701 | |
702 |
|
703 |
|
704 | max: PropTypes.number,
|
705 | |
706 |
|
707 |
|
708 | step: PropTypes.number,
|
709 | |
710 |
|
711 |
|
712 | value: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number)]),
|
713 | tempValue: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number)]),
|
714 | |
715 |
|
716 |
|
717 | defaultValue: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number)]),
|
718 | |
719 |
|
720 |
|
721 | marks: PropTypes.oneOfType([PropTypes.bool, PropTypes.number, PropTypes.arrayOf(PropTypes.number), PropTypes.object]),
|
722 | |
723 |
|
724 |
|
725 | marksPosition: PropTypes.oneOf(['above', 'below']),
|
726 | |
727 |
|
728 |
|
729 | disabled: PropTypes.bool,
|
730 | |
731 |
|
732 |
|
733 |
|
734 | onChange: PropTypes.func,
|
735 | |
736 |
|
737 |
|
738 |
|
739 | onProcess: PropTypes.func,
|
740 | |
741 |
|
742 |
|
743 | hasTip: PropTypes.bool,
|
744 | |
745 |
|
746 |
|
747 |
|
748 |
|
749 | tipRender: PropTypes.func,
|
750 | id: PropTypes.string,
|
751 | |
752 |
|
753 |
|
754 | reverse: PropTypes.bool,
|
755 | |
756 |
|
757 |
|
758 | pure: PropTypes.bool,
|
759 | |
760 |
|
761 |
|
762 | fixedWidth: PropTypes.bool,
|
763 | |
764 |
|
765 |
|
766 | tooltipVisible: PropTypes.bool,
|
767 | |
768 |
|
769 |
|
770 | rtl: PropTypes.bool,
|
771 | |
772 |
|
773 |
|
774 | isPreview: PropTypes.bool,
|
775 | |
776 |
|
777 |
|
778 |
|
779 | renderPreview: PropTypes.func
|
780 | }, _class.defaultProps = {
|
781 | prefix: 'next-',
|
782 | slider: 'single',
|
783 | min: 0,
|
784 | max: 100,
|
785 | step: 1,
|
786 | marks: false,
|
787 | disabled: false,
|
788 | fixedWidth: false,
|
789 | tooltipVisible: false,
|
790 | hasTip: true,
|
791 | onChange: noop,
|
792 | onProcess: noop,
|
793 | tipRender: function tipRender(value) {
|
794 | return value;
|
795 | },
|
796 | reverse: false,
|
797 | pure: false,
|
798 | marksPosition: 'above',
|
799 | rtl: false,
|
800 | isPreview: false
|
801 | }, _temp);
|
802 | Range.displayName = 'Range';
|
803 |
|
804 |
|
805 | export default polyfill(Range); |
\ | No newline at end of file |