Skip to content

Commit dfd8e1b

Browse files
guoyunheguoyunhe
committed
fix: dom
1 parent 6b2bdec commit dfd8e1b

3 files changed

Lines changed: 68 additions & 55 deletions

File tree

‎assets/index.less‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -139,23 +139,18 @@
139139
align-items: center;
140140
}
141141

142-
&-type-spinner &-handler-wrap {
143-
flex: 0 0 20px;
144-
border-left: 0;
145-
}
146-
147142
&-type-spinner &-handler {
143+
flex: 0 0 20px;
148144
line-height: 26px;
145+
height: 100%;
149146
}
150147

151148
&-type-spinner &-handler-up {
152149
border-bottom: 0;
153150
border-left: 1px solid #d9d9d9;
154-
height: 100%;
155151
}
156152
&-type-spinner &-handler-down {
157153
border-top: 0;
158154
border-right: 1px solid #d9d9d9;
159-
height: 100%;
160155
}
161156
}

‎src/StepHandler.tsx‎

Lines changed: 39 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -100,35 +100,47 @@ export default function StepHandler({
100100
onMouseLeave: safeOnStopStep,
101101
};
102102

103+
const upHandle = (
104+
<span
105+
{...sharedHandlerProps}
106+
onMouseDown={(e) => {
107+
onStepMouseDown(e, true);
108+
}}
109+
aria-label="Increase Value"
110+
aria-disabled={upDisabled}
111+
className={upClassName}
112+
>
113+
{upNode || <span unselectable="on" className={`${prefixCls}-handler-up-inner`} />}
114+
</span>
115+
);
116+
117+
const downHandle = (
118+
<span
119+
{...sharedHandlerProps}
120+
onMouseDown={(e) => {
121+
onStepMouseDown(e, false);
122+
}}
123+
aria-label="Decrease Value"
124+
aria-disabled={downDisabled}
125+
className={downClassName}
126+
>
127+
{downNode || <span unselectable="on" className={`${prefixCls}-handler-down-inner`} />}
128+
</span>
129+
);
130+
131+
if (upHidden) {
132+
return downHandle;
133+
}
134+
135+
if (downHidden) {
136+
return upHandle;
137+
}
138+
103139
return (
104140
<div className={clsx(`${handlerClassName}-wrap`, classNames?.actions)} style={styles?.actions}>
105-
{!upHidden && (
106-
<span
107-
{...sharedHandlerProps}
108-
onMouseDown={(e) => {
109-
onStepMouseDown(e, true);
110-
}}
111-
aria-label="Increase Value"
112-
aria-disabled={upDisabled}
113-
className={upClassName}
114-
>
115-
{upNode || <span unselectable="on" className={`${prefixCls}-handler-up-inner`} />}
116-
</span>
117-
)}
118-
119-
{!downHidden && (
120-
<span
121-
{...sharedHandlerProps}
122-
onMouseDown={(e) => {
123-
onStepMouseDown(e, false);
124-
}}
125-
aria-label="Decrease Value"
126-
aria-disabled={downDisabled}
127-
className={downClassName}
128-
>
129-
{downNode || <span unselectable="on" className={`${prefixCls}-handler-down-inner`} />}
130-
</span>
131-
)}
141+
{upHandle}
142+
143+
{downHandle}
132144
</div>
133145
);
134146
}

‎tests/props.test.tsx‎

Lines changed: 27 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,10 @@ import React from 'react';
22
import '@testing-library/jest-dom';
33
import { render, fireEvent } from '@testing-library/react';
44
import KeyCode from '@rc-component/util/lib/KeyCode';
5-
import type { ValueType } from '../src'
5+
import type { ValueType } from '../src';
66
import InputNumber from '../src';
77

88
describe('InputNumber.Props', () => {
9-
109
it('max', () => {
1110
const onChange = jest.fn();
1211
const { container } = render(<InputNumber max={10} onChange={onChange} />);
@@ -61,7 +60,6 @@ describe('InputNumber.Props', () => {
6160
expect(input).toHaveFocus();
6261
done();
6362
}, 500);
64-
6563
});
6664

6765
describe('step', () => {
@@ -96,8 +94,8 @@ describe('InputNumber.Props', () => {
9694
<InputNumber
9795
stringMode
9896
onChange={onChange}
99-
step='0.000000001'
100-
defaultValue='0.000000001'
97+
step="0.000000001"
98+
defaultValue="0.000000001"
10199
/>,
102100
);
103101

@@ -114,8 +112,8 @@ describe('InputNumber.Props', () => {
114112
<InputNumber
115113
stringMode
116114
onChange={onChange}
117-
step='0.0000000001' // 1e-10
118-
defaultValue='0.000000001' // 1e-9
115+
step="0.0000000001" // 1e-10
116+
defaultValue="0.000000001" // 1e-9
119117
/>,
120118
);
121119

@@ -186,7 +184,7 @@ describe('InputNumber.Props', () => {
186184
return (
187185
<div>
188186
<button
189-
type='button'
187+
type="button"
190188
onClick={() => {
191189
setValue('103aa');
192190
}}
@@ -215,7 +213,7 @@ describe('InputNumber.Props', () => {
215213
return (
216214
<div>
217215
<button
218-
type='button'
216+
type="button"
219217
onClick={() => {
220218
setValue(undefined);
221219
}}
@@ -276,35 +274,39 @@ describe('InputNumber.Props', () => {
276274
});
277275

278276
it('default value can be a string greater than 16 characters', () => {
279-
const { container } = render(<InputNumber<ValueType> max={10} defaultValue='-3.637978807091713e-12' />);
277+
const { container } = render(
278+
<InputNumber<ValueType> max={10} defaultValue="-3.637978807091713e-12" />,
279+
);
280280
const input = container.querySelector('input');
281281
expect(input.value).toEqual('-0.000000000003637978807091713');
282282
});
283283

284284
it('invalidate defaultValue', () => {
285-
const { container } = render(<InputNumber defaultValue='light' />);
285+
const { container } = render(<InputNumber defaultValue="light" />);
286286
const input = container.querySelector('input');
287287
expect(input.value).toEqual('light');
288288
});
289289
});
290290

291291
describe('value', () => {
292-
it('value shouldn\'t higher than max', () => {
292+
it("value shouldn't higher than max", () => {
293293
const { container } = render(<InputNumber min={0} max={10} value={13} />);
294294
const input = container.querySelector('input');
295295
expect(input.value).toEqual('13');
296296
expect(container.querySelector('.rc-input-number-out-of-range')).toBeTruthy();
297297
});
298298

299-
it('value shouldn\'t lower than min', () => {
299+
it("value shouldn't lower than min", () => {
300300
const { container } = render(<InputNumber min={0} max={10} value={-1} />);
301301
const input = container.querySelector('input');
302302
expect(input.value).toEqual('-1');
303303
expect(container.querySelector('.rc-input-number-out-of-range')).toBeTruthy();
304304
});
305305

306306
it('value can be a string greater than 16 characters', () => {
307-
const { container } = render(<InputNumber<ValueType> max={10} value='-3.637978807091713e-12' />);
307+
const { container } = render(
308+
<InputNumber<ValueType> max={10} value="-3.637978807091713e-12" />,
309+
);
308310
const input = container.querySelector('input');
309311
expect(input.value).toEqual('-0.000000000003637978807091713');
310312
});
@@ -384,14 +386,13 @@ describe('InputNumber.Props', () => {
384386

385387
describe('Pattern prop', () => {
386388
it(`should render with a pattern attribute if the pattern prop is supplied`, () => {
387-
const { container } = render(<InputNumber pattern='\d*' />);
389+
const { container } = render(<InputNumber pattern="\d*" />);
388390
expect(container.querySelector('input')).toHaveAttribute('pattern', '\\d*');
389391
});
390392

391393
it(`should render with no pattern attribute if the pattern prop is not supplied`, () => {
392394
const { container } = render(<InputNumber />);
393395
expect(container.querySelector('input')).not.toHaveAttribute('pattern', '\\d*');
394-
395396
});
396397
});
397398

@@ -406,9 +407,16 @@ describe('InputNumber.Props', () => {
406407
});
407408
});
408409

410+
describe('type props', () => {
411+
it('render spinner type', () => {
412+
const { container } = render(<InputNumber value={1} type="spinner" />);
413+
expect(container.querySelector('.rc-input-number')).toHaveClass('rc-input-number-type-spinner');
414+
});
415+
});
416+
409417
describe('aria and data props', () => {
410418
it('passes data-* attributes', () => {
411-
const { container } = render(<InputNumber value={1} data-test='test-id' data-id='12345' />);
419+
const { container } = render(<InputNumber value={1} data-test="test-id" data-id="12345" />);
412420
const input = container.querySelector('input');
413421

414422
expect(input).toHaveAttribute('data-test', 'test-id');
@@ -417,18 +425,16 @@ describe('InputNumber.Props', () => {
417425

418426
it('passes aria-* attributes', () => {
419427
const { container } = render(
420-
<InputNumber value={1} aria-labelledby='test-id' aria-label='some-label' />,
428+
<InputNumber value={1} aria-labelledby="test-id" aria-label="some-label" />,
421429
);
422430
const input = container.querySelector('input');
423431
expect(input).toHaveAttribute('aria-labelledby', 'test-id');
424432
expect(input).toHaveAttribute('aria-label', 'some-label');
425-
426433
});
427434

428435
it('passes role attribute', () => {
429-
const { container } = render(<InputNumber value={1} role='searchbox' />);
436+
const { container } = render(<InputNumber value={1} role="searchbox" />);
430437
expect(container.querySelector('input')).toHaveAttribute('role', 'searchbox');
431-
432438
});
433439
});
434440
});

0 commit comments

Comments
 (0)