refactor: step handler

Author: guoyunhe

src/InputNumber.tsx

@@ -157,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);
@@ -629,8 +631,8 @@ const InternalInputNumber = React.forwardRef(
       >
         {type === 'input' && controls && (
           <div
-            className={clsx(`${prefixCls}-handler-wrap`, props.classNames?.actions)}
-            style={props.styles?.actions}
+            className={clsx(`${prefixCls}-handler-wrap`, classNames?.actions)}
+            style={styles?.actions}
           >
             {upNode}
             {downNode}

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.
@@ -36,8 +35,6 @@ export default function StepHandler({
   const onStepRef = React.useRef<StepHandlerProps['onStep']>();
   onStepRef.current = onStep;
 
-  const { classNames, styles } = React.useContext(SemanticContext) || {};
-
   const onStopStep = () => {
     clearTimeout(stepTimeoutRef.current);
   };
@@ -73,7 +70,7 @@ export default function StepHandler({
   // ======================= Render =======================
   const handlerClassName = `${prefixCls}-handler`;
 
-  const className = clsx(handlerClassName, `${handlerClassName}-up`, {
+  const className = clsx(handlerClassName, `${handlerClassName}-${action}`, {
     [`${handlerClassName}-${action}-disabled`]: disabled,
   });
 
@@ -104,10 +101,4 @@ export default function StepHandler({
       {children || <span unselectable="on" className={`${prefixCls}-handler-${action}-inner`} />}
     </span>
   );
-
-  return (
-    <div className={clsx(`${handlerClassName}-wrap`, classNames?.actions)} style={styles?.actions}>
-      //
-    </div>
-  );
 }