Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions assets/index.less
Original file line number Diff line number Diff line change
Expand Up @@ -134,22 +134,22 @@
}
}

&-type-spinner {
&-mode-spinner {
display: inline-flex;
align-items: center;
}

&-type-spinner &-handler {
&-mode-spinner &-handler {
flex: 0 0 20px;
line-height: 26px;
height: 100%;
}

&-type-spinner &-handler-up {
&-mode-spinner &-handler-up {
border-bottom: 0;
border-left: 1px solid #d9d9d9;
}
&-type-spinner &-handler-down {
&-mode-spinner &-handler-down {
border-top: 0;
border-right: 1px solid #d9d9d9;
}
Expand Down
6 changes: 3 additions & 3 deletions docs/demo/spinner.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export default () => {
<div style={{ margin: 10 }}>
<h3>Controlled</h3>
<InputNumber
type="spinner"
mode="spinner"
aria-label="Simple number input example"
min={-8}
max={10}
Expand Down Expand Up @@ -54,7 +54,7 @@ export default () => {
<hr />
<h3>Uncontrolled</h3>
<InputNumber
type="spinner"
mode="spinner"
style={{ width: 100 }}
onChange={onChange}
min={-99}
Expand All @@ -65,7 +65,7 @@ export default () => {
<hr />
<h3>!changeOnBlur</h3>
<InputNumber
type="spinner"
mode="spinner"
style={{ width: 100 }}
min={-9}
max={9}
Expand Down
28 changes: 10 additions & 18 deletions src/InputNumber.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ export interface InputNumberProps<T extends ValueType = ValueType>
/** value will show as string */
stringMode?: boolean;

type?: 'input' | 'spinner';
mode?: 'input' | 'spinner';

defaultValue?: T;
value?: T | null;
Expand Down Expand Up @@ -122,7 +122,7 @@ type InternalInputNumberProps = Omit<InputNumberProps, 'prefix' | 'suffix'> & {
const InternalInputNumber = React.forwardRef(
(props: InternalInputNumberProps, ref: React.Ref<HTMLInputElement>) => {
const {
type,
mode,
prefixCls,
className,
style,
Expand Down Expand Up @@ -601,21 +601,13 @@ const InternalInputNumber = React.forwardRef(
};

const upNode = (
<StepHandler
{...sharedHandlerProps}
action="up"
disabled={upDisabled}
>
<StepHandler {...sharedHandlerProps} action="up" disabled={upDisabled}>
{upHandler}
</StepHandler>
);

const downNode = (
<StepHandler
{...sharedHandlerProps}
action="down"
disabled={downDisabled}
>
<StepHandler {...sharedHandlerProps} action="down" disabled={downDisabled}>
{downHandler}
</StepHandler>
);
Expand All @@ -642,7 +634,7 @@ const InternalInputNumber = React.forwardRef(
onCompositionEnd={onCompositionEnd}
onBeforeInput={onBeforeInput}
>
{type === 'input' && controls && (
{mode === 'input' && controls && (
<div
className={clsx(`${prefixCls}-handler-wrap`, classNames?.actions)}
style={styles?.actions}
Expand All @@ -652,7 +644,7 @@ const InternalInputNumber = React.forwardRef(
</div>
)}

{type === 'spinner' && controls && downNode}
{mode === 'spinner' && controls && downNode}

<div className={`${inputClassName}-wrap`}>
<input
Expand All @@ -672,15 +664,15 @@ const InternalInputNumber = React.forwardRef(
/>
</div>

{type === 'spinner' && controls && upNode}
{mode === 'spinner' && controls && upNode}
</div>
);
},
);

const InputNumber = React.forwardRef<InputNumberRef, InputNumberProps>((props, ref) => {
const {
type = 'input',
mode = 'input',
disabled,
style,
prefixCls = 'rc-input-number',
Expand Down Expand Up @@ -715,7 +707,7 @@ const InputNumber = React.forwardRef<InputNumberRef, InputNumberProps>((props, r
return (
<SemanticContext.Provider value={memoizedValue}>
<BaseInput
className={clsx(`${prefixCls}-type-${type}`, className)}
className={clsx(`${prefixCls}-mode-${mode}`, className)}
triggerFocus={focus}
prefixCls={prefixCls}
value={value}
Expand All @@ -736,7 +728,7 @@ const InputNumber = React.forwardRef<InputNumberRef, InputNumberProps>((props, r
ref={holderRef}
>
<InternalInputNumber
type={type}
mode={mode}
prefixCls={prefixCls}
disabled={disabled}
ref={inputFocusRef}
Expand Down
6 changes: 3 additions & 3 deletions tests/__snapshots__/baseInput.test.tsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ exports[`baseInput addon should render properly 1`] = `
<div>
<div>
<div
class="rc-input-group-wrapper rc-input-type-input"
class="rc-input-group-wrapper rc-input-mode-input"
>
<div
class="rc-input-wrapper rc-input-group"
Expand Down Expand Up @@ -64,7 +64,7 @@ exports[`baseInput addon should render properly 1`] = `
<br />
<br />
<div
class="rc-input-group-wrapper rc-input-type-input"
class="rc-input-group-wrapper rc-input-mode-input"
>
<div
class="rc-input-wrapper rc-input-group"
Expand Down Expand Up @@ -128,7 +128,7 @@ exports[`baseInput addon should render properly 1`] = `
exports[`baseInput prefix should render properly 1`] = `
<div>
<div
class="rc-input-affix-wrapper rc-input-type-input"
class="rc-input-affix-wrapper rc-input-mode-input"
>
<span
class="rc-input-prefix"
Expand Down
8 changes: 4 additions & 4 deletions tests/props.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -407,10 +407,10 @@ describe('InputNumber.Props', () => {
});
});

describe('type props', () => {
it('render spinner type', () => {
const { container } = render(<InputNumber value={1} type="spinner" />);
expect(container.querySelector('.rc-input-number')).toHaveClass('rc-input-number-type-spinner');
describe('mode props', () => {
it('render spinner mode', () => {
const { container } = render(<InputNumber value={1} mode="spinner" />);
expect(container.querySelector('.rc-input-number')).toHaveClass('rc-input-number-mode-spinner');
});
});

Expand Down