Skip to content
Merged
Show file tree
Hide file tree
Changes from 1 commit
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
4 changes: 2 additions & 2 deletions tests/props.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -409,8 +409,8 @@ 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');
const { container } = render(<InputNumber value={1} mode="spinner" />);
expect(container.querySelector('.rc-input-number')).toHaveClass('rc-input-number-mode-spinner');
});
});

Expand Down