fix(ui): use design controls and adjust docs menu layout (#7872)

Author: jikkai

packages/design/src/components/input-number/InputNumber.tsx

@@ -72,15 +72,18 @@ export const InputNumber = forwardRef<HTMLInputElement, IInputNumberProps>(
     ) => {
         const { locale } = useContext(ConfigContext);
         const [internalValue, setInternalValue] = useState<number | null>(
-            value !== undefined ? value : defaultValue !== undefined ? defaultValue : null
+            () => {
+                if (value !== undefined) {
+                    return value;
+                }
+                return defaultValue ?? null;
+            }
         );
         const lastValidValueRef = useRef<number | null>(internalValue);
         const [inputValue, setInputValue] = useState<string>(() => formatValue(internalValue));
         const inputRef = useRef<HTMLInputElement>(null);
-        const longPressTimerRef = useRef<NodeJS.Timeout | null>(null);
-        const longPressIntervalRef = useRef<NodeJS.Timeout | null>(null);
 
-        const mergedRef = (node: HTMLInputElement) => {
+        const mergedRef = (node: HTMLInputElement | null) => {
             if (ref) {
                 if (typeof ref === 'function') {
                     ref(node);
@@ -107,20 +110,10 @@ export const InputNumber = forwardRef<HTMLInputElement, IInputNumberProps>(
             }
         }, [internalValue]);
 
-        // Clean up timers when component unmounts
-        useEffect(() => {
-            return () => {
-                if (longPressTimerRef.current) {
-                    clearTimeout(longPressTimerRef.current);
-                }
-                if (longPressIntervalRef.current) {
-                    clearInterval(longPressIntervalRef.current);
-                }
-            };
-        }, []);
-
         function formatValue(val: number | null): string {
-            if (val === null || val === undefined) return '';
+            if (val === null || val === undefined) {
+                return '';
+            }
 
             let formattedValue: string | number = val;
 
@@ -138,7 +131,9 @@ export const InputNumber = forwardRef<HTMLInputElement, IInputNumberProps>(
         }
 
         function parseNumberValue(val: string): number | null {
-            if (!val) return null;
+            if (!val) {
+                return null;
+            }
 
             let parsedValue = val;
 
@@ -183,13 +178,15 @@ export const InputNumber = forwardRef<HTMLInputElement, IInputNumberProps>(
                 }
 
                 return result;
-            } catch (e) {
+            } catch {
                 return null;
             }
         }
 
         function clampValue(val: number | null): number | null {
-            if (val === null) return null;
+            if (val === null) {
+                return null;
+            }
 
             if (max !== undefined && val > max) {
                 return max;
@@ -201,10 +198,6 @@ export const InputNumber = forwardRef<HTMLInputElement, IInputNumberProps>(
             return val;
         }
 
-        function parseValue(val: string): number | null {
-            return clampValue(parseNumberValue(val));
-        }
-
         function handleInputChange(value: string) {
             if (allowEmpty && value === '') {
                 setInputValue(value);
@@ -273,7 +266,9 @@ export const InputNumber = forwardRef<HTMLInputElement, IInputNumberProps>(
         }
 
         function handleStep(isUp: boolean) {
-            if (disabled) return;
+            if (disabled) {
+                return;
+            }
 
             const stepValue = isUp ? step : -step;
 
@@ -299,7 +294,9 @@ export const InputNumber = forwardRef<HTMLInputElement, IInputNumberProps>(
                 newValue = min;
             }
             // If we've hit a limit, don't change the value
-            if (newValue === currentValue) return;
+            if (newValue === currentValue) {
+                return;
+            }
             setInternalValue(newValue);
             lastValidValueRef.current = newValue;
             setInputValue(formatValue(newValue));
@@ -309,7 +306,9 @@ export const InputNumber = forwardRef<HTMLInputElement, IInputNumberProps>(
 
         // Handle key down events for arrow keys
         function handleKeyDown(e: KeyboardEvent<HTMLInputElement>) {
-            if (disabled) return;
+            if (disabled) {
+                return;
+            }
 
             onKeyDown?.(e);
 
@@ -325,7 +324,9 @@ export const InputNumber = forwardRef<HTMLInputElement, IInputNumberProps>(
         }
 
         function handleClick(isUp: boolean) {
-            if (disabled) return;
+            if (disabled) {
+                return;
+            }
 
             handleStep(isUp);