feat(spinner): support spinner type

assets/index.less

@@ -133,4 +133,24 @@
       .handler-disabled();
     }
   }
+
+  &-type-spinner {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  &-type-spinner &-handler {
+    flex: 0 0 20px;
+    line-height: 26px;
+    height: 100%;
+  }
+
+  &-type-spinner &-handler-up {
+    border-bottom: 0;
+    border-left: 1px solid #d9d9d9;
+  }
+  &-type-spinner &-handler-down {
+    border-top: 0;
+    border-right: 1px solid #d9d9d9;
+  }
 }

docs/demo/spinner.tsx

@@ -0,0 +1,78 @@
+/* eslint no-console:0 */
+import InputNumber from '@rc-component/input-number';
+import React from 'react';
+import '../../assets/index.less';
+
+export default () => {
+  const [disabled, setDisabled] = React.useState(false);
+  const [readOnly, setReadOnly] = React.useState(false);
+  const [keyboard, setKeyboard] = React.useState(true);
+  const [wheel, setWheel] = React.useState(true);
+  const [stringMode, setStringMode] = React.useState(false);
+  const [value, setValue] = React.useState<string | number>(93);
+
+  const onChange = (val: number) => {
+    console.warn('onChange:', val, typeof val);
+    setValue(val);
+  };
+
+  return (
+    <div style={{ margin: 10 }}>
+      <h3>Controlled</h3>
+      <InputNumber
+        type="spinner"
+        aria-label="Simple number input example"
+        min={-8}
+        max={10}
+        style={{ width: 100 }}
+        value={value}
+        onChange={onChange}
+        readOnly={readOnly}
+        disabled={disabled}
+        keyboard={keyboard}
+        changeOnWheel={wheel}
+        stringMode={stringMode}
+      />
+      <p>
+        <button type="button" onClick={() => setDisabled(!disabled)}>
+          toggle Disabled ({String(disabled)})
+        </button>
+        <button type="button" onClick={() => setReadOnly(!readOnly)}>
+          toggle readOnly ({String(readOnly)})
+        </button>
+        <button type="button" onClick={() => setKeyboard(!keyboard)}>
+          toggle keyboard ({String(keyboard)})
+        </button>
+        <button type="button" onClick={() => setStringMode(!stringMode)}>
+          toggle stringMode ({String(stringMode)})
+        </button>
+        <button type="button" onClick={() => setWheel(!wheel)}>
+          toggle wheel ({String(wheel)})
+        </button>
+      </p>
+
+      <hr />
+      <h3>Uncontrolled</h3>
+      <InputNumber
+        type="spinner"
+        style={{ width: 100 }}
+        onChange={onChange}
+        min={-99}
+        max={99}
+        defaultValue={33}
+      />
+
+      <hr />
+      <h3>!changeOnBlur</h3>
+      <InputNumber
+        type="spinner"
+        style={{ width: 100 }}
+        min={-9}
+        max={9}
+        defaultValue={10}
+        onChange={onChange}
+        changeOnBlur={false}
+      />
+    </div>
+  );
+};

docs/example.md

@@ -52,3 +52,7 @@ nav:
 ## focus
 
 <code src="./demo/focus.tsx"></code>
+
+## spinner
+
+<code src="./demo/spinner.tsx"></code>

src/InputNumber.tsx

@@ -63,6 +63,8 @@ export interface InputNumberProps<T extends ValueType = ValueType>
   /** value will show as string */
   stringMode?: boolean;
 
+  type?: 'input' | 'spinner';
+
   defaultValue?: T;
   value?: T | null;
 
@@ -119,6 +121,7 @@ type InternalInputNumberProps = Omit<InputNumberProps, 'prefix' | 'suffix'> & {
 const InternalInputNumber = React.forwardRef(
   (props: InternalInputNumberProps, ref: React.Ref<HTMLInputElement>) => {
     const {
+      type,
       prefixCls,
       className,
       style,
@@ -154,6 +157,8 @@ const InternalInputNumber = React.forwardRef(
       ...inputProps
     } = props;
 
+    const { classNames, styles } = React.useContext(SemanticContext) || {};
+
     const inputClassName = `${prefixCls}-input`;
 
     const inputRef = React.useRef<HTMLInputElement>(null);
@@ -586,6 +591,23 @@ const InternalInputNumber = React.forwardRef(
     }, [inputValue]);
 
     // ============================ Render ============================
+    const upNode = (
+      <StepHandler action="up" prefixCls={prefixCls} disabled={upDisabled} onStep={onInternalStep}>
+        {upHandler}
+      </StepHandler>
+    );
+
+    const downNode = (
+      <StepHandler
+        action="down"
+        prefixCls={prefixCls}
+        disabled={downDisabled}
+        onStep={onInternalStep}
+      >
+        {downHandler}
+      </StepHandler>
+    );
+
     return (
       <div
         ref={domRef}
@@ -607,16 +629,18 @@ const InternalInputNumber = React.forwardRef(
         onCompositionEnd={onCompositionEnd}
         onBeforeInput={onBeforeInput}
       >
-        {controls && (
-          <StepHandler
-            prefixCls={prefixCls}
-            upNode={upHandler}
-            downNode={downHandler}
-            upDisabled={upDisabled}
-            downDisabled={downDisabled}
-            onStep={onInternalStep}
-          />
+        {type === 'input' && controls && (
+          <div
+            className={clsx(`${prefixCls}-handler-wrap`, classNames?.actions)}
+            style={styles?.actions}
+          >
+            {upNode}
+            {downNode}
+          </div>
         )}
+
+        {type === 'spinner' && controls && downNode}
+
         <div className={`${inputClassName}-wrap`}>
           <input
             autoComplete="off"
@@ -634,13 +658,16 @@ const InternalInputNumber = React.forwardRef(
             readOnly={readOnly}
           />
         </div>
+
+        {type === 'spinner' && controls && upNode}
       </div>
     );
   },
 );
 
 const InputNumber = React.forwardRef<InputNumberRef, InputNumberProps>((props, ref) => {
   const {
+    type = 'input',
     disabled,
     style,
     prefixCls = 'rc-input-number',
@@ -675,7 +702,7 @@ const InputNumber = React.forwardRef<InputNumberRef, InputNumberProps>((props, r
   return (
     <SemanticContext.Provider value={memoizedValue}>
       <BaseInput
-        className={className}
+        className={clsx(`${prefixCls}-type-${type}`, className)}
         triggerFocus={focus}
         prefixCls={prefixCls}
         value={value}
@@ -696,6 +723,7 @@ const InputNumber = React.forwardRef<InputNumberRef, InputNumberProps>((props, r
         ref={holderRef}
       >
         <InternalInputNumber
+          type={type}
           prefixCls={prefixCls}
           disabled={disabled}
           ref={inputFocusRef}

src/StepHandler.tsx

@@ -2,7 +2,6 @@
 import * as React from 'react';
 import { clsx } from 'clsx';
 import raf from '@rc-component/util/lib/raf';
-import SemanticContext from './SemanticContext';
 
 /**
  * When click and hold on a button - the speed of auto changing the value.
@@ -16,19 +15,17 @@ const STEP_DELAY = 600;
 
 export interface StepHandlerProps {
   prefixCls: string;
-  upNode?: React.ReactNode;
-  downNode?: React.ReactNode;
-  upDisabled?: boolean;
-  downDisabled?: boolean;
+  action: 'up' | 'down';
+  children?: React.ReactNode;
+  disabled?: boolean;
   onStep: (up: boolean, emitter: 'handler' | 'keyboard' | 'wheel') => void;
 }
 
 export default function StepHandler({
   prefixCls,
-  upNode,
-  downNode,
-  upDisabled,
-  downDisabled,
+  action,
+  children,
+  disabled,
   onStep,
 }: StepHandlerProps) {
   // ======================== Step ========================
@@ -38,22 +35,20 @@ export default function StepHandler({
   const onStepRef = React.useRef<StepHandlerProps['onStep']>();
   onStepRef.current = onStep;
 
-  const { classNames, styles } = React.useContext(SemanticContext) || {};
-
   const onStopStep = () => {
     clearTimeout(stepTimeoutRef.current);
   };
 
   // We will interval update step when hold mouse down
-  const onStepMouseDown = (e: React.MouseEvent, up: boolean) => {
+  const onStepMouseDown = (e: React.MouseEvent) => {
     e.preventDefault();
     onStopStep();
 
-    onStepRef.current(up, 'handler');
+    onStepRef.current(action === 'up', 'handler');
 
     // Loop step for interval
     function loopStep() {
-      onStepRef.current(up, 'handler');
+      onStepRef.current(action === 'up', 'handler');
 
       stepTimeoutRef.current = setTimeout(loopStep, STEP_INTERVAL);
     }
@@ -75,11 +70,8 @@ export default function StepHandler({
   // ======================= Render =======================
   const handlerClassName = `${prefixCls}-handler`;
 
-  const upClassName = clsx(handlerClassName, `${handlerClassName}-up`, {
-    [`${handlerClassName}-up-disabled`]: upDisabled,
-  });
-  const downClassName = clsx(handlerClassName, `${handlerClassName}-down`, {
-    [`${handlerClassName}-down-disabled`]: downDisabled,
+  const className = clsx(handlerClassName, `${handlerClassName}-${action}`, {
+    [`${handlerClassName}-${action}-disabled`]: disabled,
   });
 
   // fix: https://github.com/ant-design/ant-design/issues/43088
@@ -97,29 +89,16 @@ export default function StepHandler({
   };
 
   return (
-    <div className={clsx(`${handlerClassName}-wrap`, classNames?.actions)} style={styles?.actions}>
-      <span
-        {...sharedHandlerProps}
-        onMouseDown={(e) => {
-          onStepMouseDown(e, true);
-        }}
-        aria-label="Increase Value"
-        aria-disabled={upDisabled}
-        className={upClassName}
-      >
-        {upNode || <span unselectable="on" className={`${prefixCls}-handler-up-inner`} />}
-      </span>
-      <span
-        {...sharedHandlerProps}
-        onMouseDown={(e) => {
-          onStepMouseDown(e, false);
-        }}
-        aria-label="Decrease Value"
-        aria-disabled={downDisabled}
-        className={downClassName}
-      >
-        {downNode || <span unselectable="on" className={`${prefixCls}-handler-down-inner`} />}
-      </span>
-    </div>
+    <span
+      {...sharedHandlerProps}
+      onMouseDown={(e) => {
+        onStepMouseDown(e);
+      }}
+      aria-label={action === 'up' ? 'Increase Value' : 'Decrease Value'}
+      aria-disabled={disabled}
+      className={className}
+    >
+      {children || <span unselectable="on" className={`${prefixCls}-handler-${action}-inner`} />}
+    </span>
   );
 }

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"
+      class="rc-input-group-wrapper rc-input-type-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"
+      class="rc-input-group-wrapper rc-input-type-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"
+    class="rc-input-affix-wrapper rc-input-type-input"
   >
     <span
       class="rc-input-prefix"