refactor: cssinjs for textarea (#34484)

* refactor: cssinjs for textarea

* chore: code clean

* refactor: better code style

* test: fix lint

* chore: code clean

* test: fix rtl warning

components/_util/theme/index.tsx

@@ -119,6 +119,7 @@ export interface DerivativeToken extends Omit<DesignToken, 'duration'> {
   paddingSM: number;
   paddingXS: number;
   paddingXXS: number;
+  paddingLG: number;
   marginXS: number;
   marginLG: number;
   marginXXS: number;
@@ -182,6 +183,7 @@ function derivative(designToken: DesignToken): DerivativeToken {
     paddingSM,
     paddingXS,
     paddingXXS: designToken.padding * 0.25,
+    paddingLG: designToken.padding * 1.5,
     marginXS: designToken.margin * 0.5,
     marginLG: designToken.margin * 1.5,
     marginXXS: designToken.margin * 0.25,

components/input-number/index.tsx

@@ -31,7 +31,7 @@ export interface InputNumberProps<T extends ValueType = ValueType>
 }
 
 const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props, ref) => {
-  const { getPrefixCls, direction } = React.useContext(ConfigContext);
+  const { getPrefixCls, direction, iconPrefixCls } = React.useContext(ConfigContext);
   const size = React.useContext(SizeContext);
   const [focused, setFocus] = React.useState(false);
   const inputRef = React.useRef<HTMLInputElement>(null);
@@ -55,7 +55,7 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props,
   const prefixCls = getPrefixCls('input-number', customizePrefixCls);
 
   // Style
-  const [wrapSSR, hashId] = useStyle(prefixCls);
+  const [wrapSSR, hashId] = useStyle(prefixCls, iconPrefixCls);
 
   let upIcon = <UpOutlined className={`${prefixCls}-handler-up-inner`} />;
   let downIcon = <DownOutlined className={`${prefixCls}-handler-down-inner`} />;

components/input-number/style/index.tsx

@@ -20,7 +20,6 @@ import {
 } from '../../input/style';
 
 interface InputNumberToken extends InputToken {
-  prefixCls: string;
   inputNumberCls: string;
   inputNumberHandlerActiveBgColor: string;
 }
@@ -48,14 +47,13 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
     componentBackground,
     durationMid,
     textColorDisabled,
-    prefixCls,
   } = token;
 
   return {
     [inputNumberCls]: {
       ...resetComponent(token),
-      ...genBasicInputStyle(prefixCls, token),
-      ...genStatusStyle(prefixCls, token),
+      ...genBasicInputStyle(token),
+      ...genStatusStyle(token),
 
       display: 'inline-block',
       width: 90, // FIXME: magic number
@@ -132,7 +130,7 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
       // Style for input-group: input with label, with button or dropdown...
       '&-group': {
         ...resetComponent(token),
-        ...genInputGroupStyle(prefixCls, token),
+        ...genInputGroupStyle(token),
 
         '&-wrapper': {
           display: 'inline-block',
@@ -222,12 +220,12 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
           // https://github.com/ant-design/ant-design/issues/14367
           [`${inputNumberCls}-handler`]: {
             [`${inputNumberCls}-handler-up-inner,
-          ${inputNumberCls}-handler-down-inner`]: {
+              ${inputNumberCls}-handler-down-inner`]: {
               display: 'flex',
               alignItems: 'center',
               justifyContent: 'center',
               minWidth: 'auto',
-              marginRight: 0,
+              marinInlineEnd: 0,
               fontSize: 7, // FIXME: magic
             },
           },
@@ -290,12 +288,12 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
 };
 
 const genAffixWrapperStyles: GenerateStyle<InputNumberToken> = (token: InputNumberToken) => {
-  const { inputNumberCls, inputPaddingHorizontal, inputAffixMargin, prefixCls } = token;
+  const { inputNumberCls, inputPaddingHorizontal, inputAffixMargin } = token;
 
   return {
     [`${inputNumberCls}-affix-wrapper`]: {
-      ...genBasicInputStyle(prefixCls, token),
-      ...genStatusStyle(prefixCls, token),
+      ...genBasicInputStyle(token),
+      ...genStatusStyle(token),
       // or number handler will cover form status
       position: 'relative',
       display: 'inline-flex',
@@ -369,12 +367,14 @@ const genAffixWrapperStyles: GenerateStyle<InputNumberToken> = (token: InputNumb
 };
 
 // ============================== Export ==============================
-export default function useStyle(prefixCls: string): UseComponentStyleResult {
+export default function useStyle(
+  prefixCls: string,
+  iconPrefixCls: string,
+): UseComponentStyleResult {
   const [theme, token, hashId] = useToken();
 
   const inputNumberToken: InputNumberToken = {
-    ...initInputToken(token),
-    prefixCls,
+    ...initInputToken(token, prefixCls, iconPrefixCls),
     inputNumberCls: `.${prefixCls}`,
     inputNumberHandlerActiveBgColor: '#f4f4f4', // FIXME: magic number
   };

components/input/ClearableLabeledInput.tsx

@@ -42,6 +42,7 @@ export interface ClearableInputProps extends BasicProps {
   addonAfter?: React.ReactNode;
   triggerFocus?: () => void;
   status?: InputStatus;
+  hashId?: string;
 }
 
 class ClearableLabeledInput extends React.Component<ClearableInputProps> {
@@ -81,6 +82,7 @@ class ClearableLabeledInput extends React.Component<ClearableInputProps> {
       bordered,
       hidden,
       status: customStatus,
+      hashId,
     } = this.props;
 
     const { status: contextStatus, hasFeedback } = statusContext;
@@ -104,6 +106,7 @@ class ClearableLabeledInput extends React.Component<ClearableInputProps> {
         // className will go to addon wrapper
         [`${className}`]: !hasAddon(this.props) && className,
       },
+      hashId,
     );
     return (
       <span className={affixWrapperCls} style={style} hidden={hidden}>

components/input/TextArea.tsx

@@ -15,6 +15,7 @@ import {
 } from '../_util/statusUtils';
 import ClearableLabeledInput from './ClearableLabeledInput';
 import { fixControlledValue, InputFocusOptions, resolveOnChange, triggerFocus } from './Input';
+import useStyle from './style';
 
 interface ShowCountProps {
   formatter: (args: { count: number; maxLength?: number }) => string;
@@ -76,7 +77,7 @@ const TextArea = React.forwardRef<TextAreaRef, TextAreaProps>(
     },
     ref,
   ) => {
-    const { getPrefixCls, direction } = React.useContext(ConfigContext);
+    const { getPrefixCls, direction, iconPrefixCls } = React.useContext(ConfigContext);
     const size = React.useContext(SizeContext);
 
     const { status: contextStatus, hasFeedback } = React.useContext(FormItemStatusContext);
@@ -162,6 +163,9 @@ const TextArea = React.forwardRef<TextAreaRef, TextAreaProps>(
 
     const prefixCls = getPrefixCls('input', customizePrefixCls);
 
+    // Style
+    const [wrapSSR, hashId] = useStyle(prefixCls, iconPrefixCls);
+
     React.useImperativeHandle(ref, () => ({
       resizableTextArea: innerRef.current?.resizableTextArea,
       focus: (option?: InputFocusOptions) => {
@@ -181,6 +185,7 @@ const TextArea = React.forwardRef<TextAreaRef, TextAreaProps>(
             [`${prefixCls}-lg`]: size === 'large' || customizeSize === 'large',
           },
           getStatusClassNames(prefixCls, mergedStatus),
+          hashId,
         )}
         style={showCount ? undefined : style}
         prefixCls={prefixCls}
@@ -212,6 +217,7 @@ const TextArea = React.forwardRef<TextAreaRef, TextAreaProps>(
         bordered={bordered}
         status={customStatus}
         style={showCount ? undefined : style}
+        hashId={hashId}
       />
     );
 
@@ -237,6 +243,7 @@ const TextArea = React.forwardRef<TextAreaRef, TextAreaProps>(
             },
             getStatusClassNames(`${prefixCls}-textarea`, mergedStatus, hasFeedback),
             className,
+            hashId,
           )}
           style={style}
           data-count={dataCount}
@@ -247,7 +254,7 @@ const TextArea = React.forwardRef<TextAreaRef, TextAreaProps>(
       );
     }
 
-    return textareaNode;
+    return wrapSSR(textareaNode);
   },
 );