feat(spinner): support spinner type

Author: guoyunhe

assets/index.less

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

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,
@@ -607,7 +610,7 @@ const InternalInputNumber = React.forwardRef(
         onCompositionEnd={onCompositionEnd}
         onBeforeInput={onBeforeInput}
       >
-        {controls && (
+        {type === 'input' && controls && (
           <StepHandler
             prefixCls={prefixCls}
             upNode={upHandler}
@@ -617,6 +620,17 @@ const InternalInputNumber = React.forwardRef(
             onStep={onInternalStep}
           />
         )}
+
+        {type === 'spinner' && (
+          <StepHandler
+            prefixCls={prefixCls}
+            downNode={downHandler}
+            downDisabled={downDisabled}
+            upHidden
+            onStep={onInternalStep}
+          />
+        )}
+
         <div className={`${inputClassName}-wrap`}>
           <input
             autoComplete="off"
@@ -634,13 +648,24 @@ const InternalInputNumber = React.forwardRef(
             readOnly={readOnly}
           />
         </div>
+
+        {type === 'spinner' && (
+          <StepHandler
+            prefixCls={prefixCls}
+            upNode={upHandler}
+            upDisabled={upDisabled}
+            downHidden
+            onStep={onInternalStep}
+          />
+        )}
       </div>
     );
   },
 );
 
 const InputNumber = React.forwardRef<InputNumberRef, InputNumberProps>((props, ref) => {
   const {
+    type = 'input',
     disabled,
     style,
     prefixCls = 'rc-input-number',
@@ -675,7 +700,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 +721,7 @@ const InputNumber = React.forwardRef<InputNumberRef, InputNumberProps>((props, r
         ref={holderRef}
       >
         <InternalInputNumber
+          type={type}
           prefixCls={prefixCls}
           disabled={disabled}
           ref={inputFocusRef}

src/StepHandler.tsx

@@ -19,7 +19,9 @@ export interface StepHandlerProps {
   upNode?: React.ReactNode;
   downNode?: React.ReactNode;
   upDisabled?: boolean;
+  upHidden?: boolean;
   downDisabled?: boolean;
+  downHidden?: boolean;
   onStep: (up: boolean, emitter: 'handler' | 'keyboard' | 'wheel') => void;
 }
 
@@ -29,6 +31,8 @@ export default function StepHandler({
   downNode,
   upDisabled,
   downDisabled,
+  upHidden,
+  downHidden,
   onStep,
 }: StepHandlerProps) {
   // ======================== Step ========================
@@ -98,28 +102,33 @@ 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>
+      {!upHidden && (
+        <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>
+      )}
+
+      {!downHidden && (
+        <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>
   );
 }