refactor: InputNumber support css var (ant-design#45839)

wanghui2021 · Nov 13, 2023 · 86e3d37 · 86e3d37
1 parent 2cd9362
commit 86e3d37
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 37 deletions.
diff --git a/components/input-number/index.tsx b/components/input-number/index.tsx
@@ -13,6 +13,8 @@ import useSize from '../config-provider/hooks/useSize';
 import { FormItemInputContext, NoFormStyle } from '../form/context';
 import { NoCompactStyle, useCompactItemContext } from '../space/Compact';
 import useStyle from './style';
+import useCSSVar from './style/cssVar';
+import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
 
 export interface InputNumberProps<T extends ValueType = ValueType>
   extends Omit<RcInputNumberProps<T>, 'prefix' | 'size' | 'controls'> {
@@ -54,7 +56,9 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props,
   const prefixCls = getPrefixCls('input-number', customizePrefixCls);
 
   // Style
-  const [wrapSSR, hashId] = useStyle(prefixCls);
+  const [, hashId] = useStyle(prefixCls);
+  const cssVarCls = useCSSVarCls(prefixCls);
+  const wrapCSSVar = useCSSVar(cssVarCls);
 
   const { compactSize, compactItemClassnames } = useCompactItemContext(prefixCls, direction);
   let upIcon = <UpOutlined className={`${prefixCls}-handler-up-inner`} />;
@@ -110,7 +114,7 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props,
     <RcInputNumber
       ref={inputRef}
       disabled={mergedDisabled}
-      className={classNames(className, rootClassName, compactItemClassnames)}
+      className={classNames(cssVarCls, className, rootClassName, compactItemClassnames)}
       upHandler={upIcon}
       downHandler={downIcon}
       prefixCls={prefixCls}
@@ -171,7 +175,7 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props,
     />
   );
 
-  return wrapSSR(element);
+  return wrapCSSVar(element);
 });
 
 const TypedInputNumber = InputNumber as unknown as (<T extends ValueType = ValueType>(

diff --git a/components/input-number/style/cssVar.ts b/components/input-number/style/cssVar.ts
@@ -0,0 +1,4 @@
+import { genCSSVarRegister } from '../../theme/internal';
+import { prepareComponentToken } from '.';
+
+export default genCSSVarRegister('InputNumber', prepareComponentToken);
diff --git a/components/input-number/style/index.ts b/components/input-number/style/index.ts
@@ -10,8 +10,9 @@ import {
 } from '../../input/style';
 import { resetComponent, resetIcon } from '../../style';
 import { genCompactItemStyle } from '../../style/compact-item';
-import type { FullToken, GenerateStyle } from '../../theme/internal';
+import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
+import { unit } from '@ant-design/cssinjs';
 
 export interface ComponentToken extends SharedComponentToken {
   /**
@@ -105,6 +106,7 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
     controlWidth,
     handleVisible,
     handleBorderColor,
+    calc,
   } = token;
 
   return [
@@ -118,7 +120,7 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
         width: controlWidth,
         margin: 0,
         padding: 0,
-        border: `${lineWidth}px ${lineType} ${colorBorder}`,
+        border: `${unit(lineWidth)} ${lineType} ${colorBorder}`,
         borderRadius,
 
         '&-rtl': {
@@ -135,7 +137,7 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
           borderRadius: borderRadiusLG,
 
           [`input${componentCls}-input`]: {
-            height: controlHeightLG - 2 * lineWidth,
+            height: calc(controlHeightLG).sub(calc(lineWidth).mul(2)).equal(),
           },
         },
 
@@ -144,8 +146,8 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
           borderRadius: borderRadiusSM,
 
           [`input${componentCls}-input`]: {
-            height: controlHeightSM - 2 * lineWidth,
-            padding: `0 ${paddingInlineSM}px`,
+            height: calc(controlHeightSM).sub(calc(lineWidth).mul(2)).equal(),
+            padding: `0 ${unit(paddingInlineSM)}`,
           },
         },
 
@@ -199,7 +201,7 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
           '&-input': {
             ...resetComponent(token),
             width: '100%',
-            padding: `${paddingBlock}px ${paddingInline}px`,
+            padding: `${unit(paddingBlock)} ${unit(paddingInline)}`,
             textAlign: 'start',
             backgroundColor: 'transparent',
             border: 0,
@@ -274,7 +276,7 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
           lineHeight: 0,
           textAlign: 'center',
           cursor: 'pointer',
-          borderInlineStart: `${lineWidth}px ${lineType} ${handleBorderColor}`,
+          borderInlineStart: `${unit(lineWidth)} ${lineType} ${handleBorderColor}`,
           transition: `all ${motionDurationMid} linear`,
           '&:active': {
             background: handleActiveBg,
@@ -306,7 +308,7 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
         },
 
         [`${componentCls}-handler-down`]: {
-          borderBlockStart: `${lineWidth}px ${lineType} ${handleBorderColor}`,
+          borderBlockStart: `${unit(lineWidth)} ${lineType} ${handleBorderColor}`,
           borderEndEndRadius: borderRadius,
         },
 
@@ -407,7 +409,7 @@ const genAffixWrapperStyles: GenerateStyle<InputNumberToken> = (token: InputNumb
       },
 
       [`input${componentCls}-input`]: {
-        padding: `${paddingBlock}px 0`,
+        padding: `${unit(paddingBlock)} 0`,
       },
 
       '&::before': {
@@ -448,6 +450,18 @@ const genAffixWrapperStyles: GenerateStyle<InputNumberToken> = (token: InputNumb
 };
 
 // ============================== Export ==============================
+export const prepareComponentToken: GetDefaultToken<'InputNumber'> = (token) => ({
+  ...initComponentToken(token),
+  controlWidth: 90,
+  handleWidth: token.controlHeightSM - token.lineWidth * 2,
+  handleFontSize: token.fontSize / 2,
+  handleVisible: 'auto',
+  handleActiveBg: token.colorFillAlter,
+  handleBg: token.colorBgContainer,
+  handleHoverColor: token.colorPrimary,
+  handleBorderColor: token.colorBorder,
+});
+
 export default genComponentStyleHook(
   'InputNumber',
   (token) => {
@@ -461,15 +475,5 @@ export default genComponentStyleHook(
       genCompactItemStyle(inputNumberToken),
     ];
   },
-  (token) => ({
-    ...initComponentToken(token),
-    controlWidth: 90,
-    handleWidth: token.controlHeightSM - token.lineWidth * 2,
-    handleFontSize: token.fontSize / 2,
-    handleVisible: 'auto',
-    handleActiveBg: token.colorFillAlter,
-    handleBg: token.colorBgContainer,
-    handleHoverColor: token.colorPrimary,
-    handleBorderColor: token.colorBorder,
-  }),
+  prepareComponentToken,
 );
diff --git a/scripts/check-cssinjs.tsx b/scripts/check-cssinjs.tsx
@@ -36,7 +36,6 @@ async function checkCSSVar() {
     'badge',
     'breadcrumb',
     'calendar',
-    'card',
     'carousel',
     'cascader',
     'checkbox',
@@ -47,46 +46,33 @@ async function checkCSSVar() {
     'divider',
     'drawer',
     'dropdown',
-    'empty',
-    'flex',
     'float-button',
     'form',
     'grid',
     'icon',
     'image',
-    'input-number',
     'layout',
-    'list',
-    'mentions',
     'message',
-    'modal',
     'notification',
     'pagination',
     'popconfirm',
-    'popover',
     'progress',
     'qr-code',
     'radio',
-    'result',
-    'segmented',
     'select',
     'skeleton',
     'slider',
     'space',
-    'spin',
     'statistic',
     'steps',
     'switch',
     'table',
     'tabs',
     'tag',
     'timeline',
-    'transfer',
     'tree',
     'tree-select',
-    'typography',
     'upload',
-    'watermark',
   ];
 
   await generateCssinjs({