fix: type to mode (#725)

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>

Author: guoyunhe

assets/index.less

@@ -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;
   }

docs/demo/spinner.tsx

@@ -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}
@@ -54,7 +54,7 @@ export default () => {
       <hr />
       <h3>Uncontrolled</h3>
       <InputNumber
-        type="spinner"
+        mode="spinner"
         style={{ width: 100 }}
         onChange={onChange}
         min={-99}
@@ -65,7 +65,7 @@ export default () => {
       <hr />
       <h3>!changeOnBlur</h3>
       <InputNumber
-        type="spinner"
+        mode="spinner"
         style={{ width: 100 }}
         min={-9}
         max={9}

src/InputNumber.tsx

@@ -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;
@@ -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,
@@ -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>
     );
@@ -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}
@@ -652,7 +644,7 @@ const InternalInputNumber = React.forwardRef(
           </div>
         )}
 
-        {type === 'spinner' && controls && downNode}
+        {mode === 'spinner' && controls && downNode}
 
         <div className={`${inputClassName}-wrap`}>
           <input
@@ -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',
@@ -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}
@@ -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}

tests/__snapshots__/baseInput.test.tsx.snap

@@ -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"
@@ -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"
@@ -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"

tests/props.test.tsx

@@ -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');
     });
   });