Skip to content

Commit 2e598cd

Browse files
zombieJzombieJ
committed
fix prescision update
1 parent edb9518 commit 2e598cd

File tree

2 files changed

+105
-163
lines changed

2 files changed

+105
-163
lines changed

‎src/InputNumber.tsx‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -433,8 +433,15 @@ const InputNumber = React.forwardRef(
433433
setFocus(false);
434434
};
435435

436-
// ============================ Effect ============================
437-
// Controlled
436+
// ========================== Controlled ==========================
437+
// Input by precision
438+
useUpdateEffect(() => {
439+
if (!decimalValue.isInvalidate()) {
440+
setInputValue(decimalValue, false);
441+
}
442+
}, [precision]);
443+
444+
// Input by value
438445
useUpdateEffect(() => {
439446
const newValue = getMiniDecimal(value);
440447
setDecimalValue(newValue);
@@ -447,6 +454,7 @@ const InputNumber = React.forwardRef(
447454
}
448455
}, [value]);
449456

457+
// ============================ Cursor ============================
450458
React.useEffect(() => {
451459
if (formatter) {
452460
restoreCursor();

‎tests/github.test.tsx‎

Lines changed: 95 additions & 161 deletions
Original file line numberDiff line numberDiff line change
@@ -316,179 +316,113 @@ describe('InputNumber.Github', () => {
316316
expect(onChange).toHaveBeenCalledWith(8.1);
317317
});
318318

319-
// // https://github.com/ant-design/ant-design/issues/25614
320-
// it("focus value should be '' when clear the input", () => {
321-
// let targetValue;
322-
// class Demo extends React.Component {
323-
// state = {
324-
// value: 1,
325-
// };
326-
327-
// render() {
328-
// return (
329-
// <div>
330-
// <InputNumber
331-
// ref="inputNum"
332-
// min={1}
333-
// max={10}
334-
// onBlur={(e) => {
335-
// targetValue = e.target.value;
336-
// }}
337-
// value={this.state.value}
338-
// />
339-
// </div>
340-
// );
341-
// }
342-
// }
343-
// example = ReactDOM.render(<Demo />, container);
344-
// inputNumber = example.refs.inputNum;
345-
// inputElement = ReactDOM.findDOMNode(inputNumber.input);
346-
// expect(inputNumber.state.value).to.be(1);
347-
// Simulate.focus(inputElement);
348-
// Simulate.change(inputElement, { target: { value: '' } });
349-
// Simulate.blur(inputElement);
350-
// expect(targetValue).to.be('');
351-
// });
319+
// https://github.com/ant-design/ant-design/issues/25614
320+
it("focus value should be '' when clear the input", () => {
321+
let targetValue: string;
352322

353-
// it('should set input value as formatted when blur', () => {
354-
// let valueOnBlur;
355-
// function onBlur(e) {
356-
// valueOnBlur = e.target.value;
357-
// }
358-
// class Demo extends React.Component {
359-
// state = {
360-
// value: 1,
361-
// };
362-
363-
// render() {
364-
// return (
365-
// <div>
366-
// <InputNumber
367-
// ref="inputNum"
368-
// onBlur={onBlur}
369-
// formatter={(value) => `${value * 100}%`}
370-
// value={this.state.value}
371-
// />
372-
// </div>
373-
// );
374-
// }
375-
// }
376-
// example = ReactDOM.render(<Demo />, container);
377-
// inputNumber = example.refs.inputNum;
378-
// inputElement = ReactDOM.findDOMNode(inputNumber.input);
379-
// Simulate.blur(inputElement);
380-
// expect(inputElement.value).to.be('100%');
381-
// expect(valueOnBlur).to.be('100%');
382-
// });
323+
const wrapper = mount(
324+
<InputNumber
325+
min={1}
326+
max={10}
327+
onBlur={(e) => {
328+
targetValue = e.target.value;
329+
}}
330+
value={1}
331+
/>,
332+
);
333+
wrapper.focusInput();
334+
wrapper.changeValue('');
335+
wrapper.blurInput();
336+
expect(targetValue).toEqual('');
337+
});
383338

384-
// // https://github.com/ant-design/ant-design/issues/11574
385-
// it('should trigger onChange when max or min change', () => {
386-
// const onChange = sinon.spy();
387-
// class Demo extends Component {
388-
// state = {
389-
// value: 10,
390-
// min: 0,
391-
// max: 20,
392-
// };
393-
394-
// onChange = (value) => {
395-
// this.setValue(value);
396-
// onChange(value);
397-
// };
398-
399-
// setMax(max) {
400-
// this.setState({ max });
401-
// }
339+
it('should set input value as formatted when blur', () => {
340+
let valueOnBlur: string;
402341

403-
// setMin(min) {
404-
// this.setState({ min });
405-
// }
342+
const wrapper = mount(
343+
<InputNumber
344+
onBlur={(e) => {
345+
valueOnBlur = e.target.value;
346+
}}
347+
formatter={(value) => `${Number(value) * 100}%`}
348+
value={1}
349+
/>,
350+
);
406351

407-
// setValue(value) {
408-
// this.setState({ value });
409-
// }
352+
wrapper.blurInput();
353+
expect(wrapper.find('input').props().value).toEqual('100%');
354+
expect(valueOnBlur).toEqual('100%');
355+
});
410356

411-
// render() {
412-
// return (
413-
// <InputNumber
414-
// ref="inputNum"
415-
// value={this.state.value}
416-
// onChange={this.onChange}
417-
// max={this.state.max}
418-
// min={this.state.min}
419-
// />
420-
// );
421-
// }
422-
// }
423-
// example = ReactDOM.render(<Demo />, container);
424-
// inputNumber = example.refs.inputNum;
425-
// inputElement = ReactDOM.findDOMNode(inputNumber.input);
426-
// example.setMin(11);
427-
// expect(inputElement.value).to.be('11');
428-
// expect(onChange.calledWith(11)).to.be(true);
429-
430-
// example.setValue(15);
431-
432-
// example.setMax(14);
433-
// expect(inputElement.value).to.be('14');
434-
// expect(onChange.calledWith(14)).to.be(true);
435-
// });
357+
// https://github.com/ant-design/ant-design/issues/11574
358+
// Origin: should trigger onChange when max or min change
359+
it('warning UI when max or min change', () => {
360+
const onChange = jest.fn();
361+
const wrapper = mount(<InputNumber min={0} max={20} value={10} onChange={onChange} />);
436362

437-
// // https://github.com/react-component/input-number/issues/120
438-
// it('should not reset value when parent rerenders with the same `value` prop', () => {
439-
// class Demo extends React.Component {
440-
// state = { value: 40 };
363+
expect(wrapper.exists('.rc-input-number-out-of-range')).toBeFalsy();
441364

442-
// onChange = () => {
443-
// this.forceUpdate();
444-
// };
365+
wrapper.setProps({ min: 11 });
366+
wrapper.update();
367+
expect(wrapper.findInput().props().value).toEqual('10');
368+
expect(wrapper.exists('.rc-input-number-out-of-range')).toBeTruthy();
369+
expect(onChange).toHaveBeenCalledTimes(0);
445370

446-
// render() {
447-
// return <InputNumber ref="inputNum" value={this.state.value} onChange={this.onChange} />;
448-
// }
449-
// }
371+
wrapper.setProps({ value: 15 });
372+
wrapper.setProps({ max: 14 });
373+
wrapper.update();
450374

451-
// example = ReactDOM.render(<Demo />, container);
452-
// inputNumber = example.refs.inputNum;
453-
// inputElement = ReactDOM.findDOMNode(inputNumber.input);
375+
expect(wrapper.findInput().props().value).toEqual('15');
376+
expect(wrapper.exists('.rc-input-number-out-of-range')).toBeTruthy();
377+
expect(onChange).toHaveBeenCalledTimes(0);
378+
});
454379

455-
// Simulate.focus(inputElement);
456-
// Simulate.change(inputElement, { target: { value: '401' } });
380+
// https://github.com/react-component/input-number/issues/120
381+
it('should not reset value when parent re-render with the same `value` prop', () => {
382+
const Demo = () => {
383+
const [, forceUpdate] = React.useState({});
457384

458-
// // Demo rerenders and the `value` prop is still 40, but the user input should
459-
// // be retained
460-
// expect(inputElement.value).to.be('401');
461-
// });
385+
return (
386+
<InputNumber
387+
value={40}
388+
onChange={() => {
389+
forceUpdate({});
390+
}}
391+
/>
392+
);
393+
};
462394

463-
// // https://github.com/ant-design/ant-design/issues/16710
464-
// it('should use correct precision when change it to 0', () => {
465-
// class Demo extends React.Component {
466-
// state = {
467-
// precision: 2,
468-
// };
469-
470-
// onPrecisionChange = (precision) => {
471-
// this.setState({ precision });
472-
// };
473-
474-
// render() {
475-
// const { precision } = this.state;
476-
// return (
477-
// <div>
478-
// <InputNumber onChange={this.onPrecisionChange} />
479-
// <InputNumber mergedPPrecision={precision} defaultValue={1.23} />
480-
// </div>
481-
// );
482-
// }
483-
// }
484-
// example = ReactDOM.render(<Demo />, container);
485-
// const [precisionInput, numberInput] = scryRenderedDOMComponentsWithTag(example, 'input');
486-
// expect(numberInput.value).to.be('1.23');
487-
// Simulate.focus(precisionInput);
488-
// Simulate.change(precisionInput, { target: { value: '0' } });
489-
// Simulate.blur(precisionInput);
490-
// expect(numberInput.value).to.be('1');
491-
// });
395+
const wrapper = mount(<Demo />);
396+
wrapper.focusInput();
397+
wrapper.changeValue('401');
398+
399+
// Demo re-render and the `value` prop is still 40, but the user input should be retained
400+
expect(wrapper.findInput().props().value).toEqual('401');
401+
});
402+
403+
// https://github.com/ant-design/ant-design/issues/16710
404+
it('should use correct precision when change it to 0', () => {
405+
const Demo = () => {
406+
const [precision, setPrecision] = React.useState(2);
407+
408+
return (
409+
<div>
410+
<InputNumber
411+
onChange={(newPrecision: number) => {
412+
setPrecision(newPrecision);
413+
}}
414+
/>
415+
<InputNumber precision={precision} defaultValue={1.23} />
416+
</div>
417+
);
418+
};
419+
420+
const wrapper = mount(<Demo />);
421+
wrapper.find('input').last().simulate('change', { target: { value: '1.23' } });
422+
wrapper.find('input').first().simulate('change', { target: { value: '0' } });
423+
424+
expect(wrapper.find('input').last().props().value).toEqual('1');
425+
});
492426

493427
// // https://github.com/react-component/input-number/issues/235
494428
// describe('cursor position', () => {

0 commit comments

Comments
 (0)