handle to actions

Author: thinkasany

src/InputNumber.tsx

@@ -54,7 +54,7 @@ const getDecimalIfValidate = (value: ValueType) => {
   return decimal.isInvalidate() ? null : decimal;
 };
 
-type SemanticName = 'handle' | 'input';
+type SemanticName = 'actions' | 'input';
 export interface InputNumberProps<T extends ValueType = ValueType>
   extends Omit<
     React.InputHTMLAttributes<HTMLInputElement>,
@@ -619,7 +619,10 @@ const InternalInputNumber = React.forwardRef(
             onStep={onInternalStep}
           />
         )}
-        <div className={clsx(`${inputClassName}-wrap`, classNames?.handle)} style={styles?.handle}>
+        <div
+          className={clsx(`${inputClassName}-wrap`, classNames?.actions)}
+          style={styles?.actions}
+        >
           <input
             autoComplete="off"
             role="spinbutton"
@@ -673,9 +676,9 @@ const InputNumber = React.forwardRef<InputNumberRef, InputNumberProps>((props, r
       nativeElement: holderRef.current.nativeElement || inputNumberDomRef.current,
     }),
   );
-
+  const memoizedValue = React.useMemo(() => ({ classNames, styles }), [classNames, styles]);
   return (
-    <SemanticContext.Provider value={{ classNames, styles }}>
+    <SemanticContext.Provider value={memoizedValue}>
       <BaseInput
         className={className}
         triggerFocus={focus}

src/StepHandler.tsx

@@ -100,7 +100,7 @@ export default function StepHandler({
   };
 
   return (
-    <div className={cls(`${handlerClassName}-wrap`, classNames?.handle)} style={styles?.handle}>
+    <div className={cls(`${handlerClassName}-wrap`, classNames?.actions)} style={styles?.actions}>
       <span
         {...sharedHandlerProps}
         onMouseDown={(e) => {

tests/semantic.test.tsx

@@ -8,13 +8,13 @@ describe('InputNumber.Semantic', () => {
       prefix: 'test-prefix',
       input: 'test-input',
       suffix: 'test-suffix',
-      handle: 'test-handle',
+      actions: 'test-handle',
     };
     const testStyles = {
       prefix: { color: 'red' },
       input: { color: 'blue' },
       suffix: { color: 'green' },
-      handle: { color: 'yellow' },
+      actions: { color: 'yellow' },
     };
     const { container } = render(
       <InputNumber
@@ -28,14 +28,14 @@ describe('InputNumber.Semantic', () => {
     const input = container.querySelector('.rc-input-number')!;
     const prefix = container.querySelector('.rc-input-number-prefix')!;
     const suffix = container.querySelector('.rc-input-number-suffix')!;
-    const handle = container.querySelector('.rc-input-number-input-wrap')!;
+    const actions = container.querySelector('.rc-input-number-input-wrap')!;
     expect(input.className).toContain(testClassNames.input);
     expect(prefix.className).toContain(testClassNames.prefix);
     expect(suffix.className).toContain(testClassNames.suffix);
-    expect(handle.className).toContain(testClassNames.handle);
+    expect(actions.className).toContain(testClassNames.actions);
     expect(prefix.style.color).toBe(testStyles.prefix.color);
     expect(input.style.color).toBe(testStyles.input.color);
     expect(suffix.style.color).toBe(testStyles.suffix.color);
-    expect(handle.style.color).toBe(testStyles.handle.color);
+    expect(actions.style.color).toBe(testStyles.actions.color);
   });
 });