Skip to content

Commit eef6e11

Browse files
weinanyang潕量
weinanyang
authored and
潕量
committed
fix(Range): repair browser count float issue, close alibaba-fusion#3652 
1 parent 1ff2b73 commit eef6e11

File tree

1 file changed

+32
-133
lines changed

1 file changed

+32
-133
lines changed

‎src/range/view/range.jsx

+32-133
Original file line numberDiff line numberDiff line change
@@ -21,15 +21,7 @@ function _isMultiple(slider, isFixedWidth) {
2121
}
2222

2323
function LowerSlider(props) {
24-
const {
25-
hasTip,
26-
value,
27-
tipRender,
28-
slider,
29-
tooltipVisible,
30-
onTooltipVisibleChange,
31-
tooltipAnimation,
32-
} = props;
24+
const { hasTip, value, tipRender, slider, tooltipVisible, onTooltipVisibleChange, tooltipAnimation } = props;
3325

3426
if (_isMultiple(slider)) {
3527
return hasTip ? (
@@ -58,25 +50,14 @@ LowerSlider.propTypes = {
5850
tooltipVisible: PropTypes.bool,
5951
onTooltipVisibleChange: PropTypes.func,
6052
tooltipAnimation: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
61-
value: PropTypes.oneOfType([
62-
PropTypes.number,
63-
PropTypes.arrayOf(PropTypes.number),
64-
]),
53+
value: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number)]),
6554
tipRender: PropTypes.func,
6655
slider: PropTypes.oneOf(['single', 'double']),
6756
};
6857

6958
function UpperSlider(props) {
7059
const newprop = Object.assign({}, props);
71-
const {
72-
hasTip,
73-
value,
74-
tipRender,
75-
slider,
76-
tooltipVisible,
77-
onTooltipVisibleChange,
78-
tooltipAnimation,
79-
} = newprop;
60+
const { hasTip, value, tipRender, slider, tooltipVisible, onTooltipVisibleChange, tooltipAnimation } = newprop;
8061
if (_isMultiple(slider)) {
8162
delete newprop.onKeyDown;
8263
return hasTip ? (
@@ -125,10 +106,7 @@ UpperSlider.propTypes = {
125106
tooltipVisible: PropTypes.bool,
126107
onTooltipVisibleChange: PropTypes.func,
127108
tooltipAnimation: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
128-
value: PropTypes.oneOfType([
129-
PropTypes.number,
130-
PropTypes.arrayOf(PropTypes.number),
131-
]),
109+
value: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number)]),
132110
tipRender: PropTypes.func,
133111
slider: PropTypes.oneOf(['single', 'double']),
134112
};
@@ -176,21 +154,12 @@ class Range extends React.Component {
176154
/**
177155
* 设置当前取值。当 `slider` 为 `single` 时，使用 `Number`，否则用 `[Number, Number]`
178156
*/
179-
value: PropTypes.oneOfType([
180-
PropTypes.number,
181-
PropTypes.arrayOf(PropTypes.number),
182-
]),
183-
tempValue: PropTypes.oneOfType([
184-
PropTypes.number,
185-
PropTypes.arrayOf(PropTypes.number),
186-
]),
157+
value: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number)]),
158+
tempValue: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number)]),
187159
/**
188160
* 设置初始取值。当 `slider` 为 `single` 时，使用 `Number`，否则用 `[Number, Number]`
189161
*/
190-
defaultValue: PropTypes.oneOfType([
191-
PropTypes.number,
192-
PropTypes.arrayOf(PropTypes.number),
193-
]),
162+
defaultValue: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number)]),
194163
/**
195164
* 刻度数值显示逻辑（false 代表不显示，array 枚举显示的值，number 代表按 number 平分，object 表示按 key 划分，value 值显示）
196165
*/
@@ -285,8 +254,7 @@ class Range extends React.Component {
285254
super(props);
286255
const { min } = props;
287256
const initialValue = _isMultiple(props.slider) ? [min, min] : min;
288-
const defaultValue =
289-
'defaultValue' in props ? props.defaultValue : initialValue;
257+
const defaultValue = 'defaultValue' in props ? props.defaultValue : initialValue;
290258
const value = props.value !== undefined ? props.value : defaultValue;
291259

292260
this.state = {
@@ -298,11 +266,7 @@ class Range extends React.Component {
298266
tooltipAnimation: true,
299267
};
300268

301-
bindCtx(this, [
302-
'handleLowerTooltipVisibleChange',
303-
'handleUpperTooltipVisibleChange',
304-
'onKeyDown',
305-
]);
269+
bindCtx(this, ['handleLowerTooltipVisibleChange', 'handleUpperTooltipVisibleChange', 'onKeyDown']);
306270
}
307271

308272
static getDerivedStateFromProps(props, state) {
@@ -409,10 +373,7 @@ class Range extends React.Component {
409373
onKeyDown(e) {
410374
if (this.props.disabled) return;
411375

412-
if (
413-
e.keyCode === KEYCODE.LEFT_ARROW ||
414-
e.keyCode === KEYCODE.RIGHT_ARROW
415-
) {
376+
if (e.keyCode === KEYCODE.LEFT_ARROW || e.keyCode === KEYCODE.RIGHT_ARROW) {
416377
e.stopPropagation();
417378
e.preventDefault();
418379
let newValue;
@@ -495,8 +456,7 @@ class Range extends React.Component {
495456
}
496457

497458
_move(e) {
498-
const position =
499-
e.type === 'mousemove' ? e.pageX : e.targetTouches[0].pageX;
459+
const position = e.type === 'mousemove' ? e.pageX : e.targetTouches[0].pageX;
500460
this._onProcess(position);
501461
}
502462

@@ -521,18 +481,12 @@ class Range extends React.Component {
521481
upperTooltipVisible: this._moving.dragging === 'upper',
522482
tooltipAnimation: false,
523483
});
524-
} else if (
525-
this.oldDragging === 'lower' &&
526-
this._moving.dragging === 'upper'
527-
) {
484+
} else if (this.oldDragging === 'lower' && this._moving.dragging === 'upper') {
528485
this.setState({
529486
upperTooltipVisible: true,
530487
lowerTooltipVisible: false,
531488
});
532-
} else if (
533-
this.oldDragging === 'upper' &&
534-
this._moving.dragging === 'lower'
535-
) {
489+
} else if (this.oldDragging === 'upper' && this._moving.dragging === 'lower') {
536490
this.setState({
537491
upperTooltipVisible: false,
538492
lowerTooltipVisible: true,
@@ -541,12 +495,7 @@ class Range extends React.Component {
541495

542496
this.oldDragging = this._moving.dragging;
543497

544-
const nextValue = this._currentToValue(
545-
current,
546-
tempValue,
547-
this.lastPosition,
548-
this.isFixedWidth
549-
); //计算range的新value,可能是数组,可能是单个值
498+
const nextValue = this._currentToValue(current, tempValue, this.lastPosition, this.isFixedWidth); //计算range的新value,可能是数组,可能是单个值
550499
this.lastPosition = current;
551500

552501
if (!isEqual(nextValue, tempValue)) {
@@ -558,29 +507,13 @@ class Range extends React.Component {
558507
}
559508

560509
_addDocumentMouseEvents() {
561-
this._onMouseMoveListener = events.on(
562-
document,
563-
'mousemove',
564-
this._move.bind(this)
565-
);
566-
this._onMouseUpListener = events.on(
567-
document,
568-
'mouseup',
569-
this._end.bind(this)
570-
);
510+
this._onMouseMoveListener = events.on(document, 'mousemove', this._move.bind(this));
511+
this._onMouseUpListener = events.on(document, 'mouseup', this._end.bind(this));
571512
}
572513

573514
_addDocumentTouchEvents() {
574-
this._onTouchMoveListener = events.on(
575-
document,
576-
'touchmove',
577-
this._move.bind(this)
578-
);
579-
this._onTouchEndListener = events.on(
580-
document,
581-
'touchend',
582-
this._end.bind(this)
583-
);
515+
this._onTouchMoveListener = events.on(document, 'touchmove', this._move.bind(this));
516+
this._onTouchEndListener = events.on(document, 'touchend', this._end.bind(this));
584517
}
585518

586519
_removeDocumentEvents() {
@@ -619,12 +552,11 @@ class Range extends React.Component {
619552
percent = rtl ? 100 - percent : percent;
620553
// reset by step
621554
const newValue = parseFloat(
622-
(Math.round(((percent / 100) * (max - min)) / step) * step).toFixed(
623-
getPrecision(step)
624-
)
555+
(Math.round(((percent / 100) * (max - min)) / step) * step).toFixed(getPrecision(step))
625556
);
557+
const currentValue = (min + newValue).toFixed(getPrecision(step));
626558

627-
return min + newValue;
559+
return Number(currentValue);
628560
}
629561

630562
_currentToValue(current, preValue, lastPosition, isFixedWidth) {
@@ -641,12 +573,8 @@ class Range extends React.Component {
641573
const newLeft = +(+preValue[0] + diff).toFixed(precision);
642574
const newRight = +(+preValue[1] + diff).toFixed(precision);
643575

644-
const newMaxLeft = +(max - preValue[1] + preValue[0]).toFixed(
645-
precision
646-
);
647-
const newMinRight = +(min + preValue[1] - preValue[0]).toFixed(
648-
precision
649-
);
576+
const newMaxLeft = +(max - preValue[1] + preValue[0]).toFixed(precision);
577+
const newMinRight = +(min + preValue[1] - preValue[0]).toFixed(precision);
650578

651579
if (isFixedWidth) {
652580
if (newLeft < min) {
@@ -754,36 +682,21 @@ class Range extends React.Component {
754682
};
755683

756684
this.isFixedWidth =
757-
fixedWidth &&
758-
(value
759-
? Array.isArray(value)
760-
: defaultValue
761-
? Array.isArray(defaultValue)
762-
: false);
685+
fixedWidth && (value ? Array.isArray(value) : defaultValue ? Array.isArray(defaultValue) : false);
763686

764687
if (isPreview) {
765688
const previewCls = classNames(className, `${prefix}form-preview`);
766689

767690
if ('renderPreview' in this.props) {
768691
return (
769-
<div
770-
id={id}
771-
dir={rtl ? 'rtl' : 'ltr'}
772-
{...others}
773-
className={previewCls}
774-
>
692+
<div id={id} dir={rtl ? 'rtl' : 'ltr'} {...others} className={previewCls}>
775693
{renderPreview(value, this.props)}
776694
</div>
777695
);
778696
}
779697

780698
return (
781-
<p
782-
id={id}
783-
dir={rtl ? 'rtl' : 'ltr'}
784-
{...others}
785-
className={previewCls}
786-
>
699+
<p id={id} dir={rtl ? 'rtl' : 'ltr'} {...others} className={previewCls}>
787700
{Array.isArray(value) ? value.join('~') : value}
788701
</p>
789702
);
@@ -816,17 +729,10 @@ class Range extends React.Component {
816729
<LowerSlider
817730
{...commonProps}
818731
hasMovingClass={
819-
this.state.hasMovingClass &&
820-
this._moving &&
821-
this._moving.dragging === 'lower'
822-
}
823-
tooltipVisible={
824-
tooltipVisible ||
825-
this.state.lowerTooltipVisible
826-
}
827-
onTooltipVisibleChange={
828-
this.handleLowerTooltipVisibleChange
732+
this.state.hasMovingClass && this._moving && this._moving.dragging === 'lower'
829733
}
734+
tooltipVisible={tooltipVisible || this.state.lowerTooltipVisible}
735+
onTooltipVisibleChange={this.handleLowerTooltipVisibleChange}
830736
tooltipAnimation={
831737
this.state.tooltipAnimation
832738
? {
@@ -840,17 +746,10 @@ class Range extends React.Component {
840746
{...commonProps}
841747
onKeyDown={this.onKeyDown}
842748
hasMovingClass={
843-
this.state.hasMovingClass &&
844-
this._moving &&
845-
this._moving.dragging === 'upper'
846-
}
847-
tooltipVisible={
848-
tooltipVisible ||
849-
this.state.upperTooltipVisible
850-
}
851-
onTooltipVisibleChange={
852-
this.handleUpperTooltipVisibleChange
749+
this.state.hasMovingClass && this._moving && this._moving.dragging === 'upper'
853750
}
751+
tooltipVisible={tooltipVisible || this.state.upperTooltipVisible}
752+
onTooltipVisibleChange={this.handleUpperTooltipVisibleChange}
854753
tooltipAnimation={
855754
this.state.tooltipAnimation
856755
? {

0 commit comments

Comments
 (0)