mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-08-06 16:06:28 +08:00
Code Issues Actions 17 Packages Projects Releases Wiki Activity

refactor(Input): make TextArea style tree shakeable (#52570)

Browse Source
This commit is contained in:
Guo Yunhe 2025-01-26 12:43:36 +08:00 committed by GitHub
parent 9955f43f44
commit e9a37033aa
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 110 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/input/TextArea.tsx
View File

@ -18,7 +18,7 @@ import { FormItemInputContext } from '../form/context';
import useVariant from '../form/hooks/useVariants';
import type { InputFocusOptions } from './Input';
import { triggerFocus } from './Input';
import useStyle from './style';
import useStyle from './style/textarea';
export interface TextAreaProps extends Omit<RcTextAreaProps, 'suffix'> {
/** @deprecated Use `variant` instead */

90
components/input/style/index.ts
View File

@ -375,7 +375,7 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => {
};
};
const genInputStyle: GenerateStyle<InputToken> = (token: InputToken) => {
export const genInputStyle: GenerateStyle<InputToken> = (token: InputToken) => {
const { componentCls, controlHeightSM, lineWidth, calc } = token;
const FIXED_CHROME_COLOR_HEIGHT = 16;
@ -454,7 +454,7 @@ const genAllowClearStyle = (token: InputToken): CSSObject => {
};
};
const genAffixStyle: GenerateStyle<InputToken> = (token: InputToken) => {
export const genAffixStyle: GenerateStyle<InputToken> = (token: InputToken) => {
const {
componentCls,
inputAffixPadding,
@ -779,91 +779,6 @@ const genSearchInputStyle: GenerateStyle<InputToken> = (token: InputToken) => {
};
};
const genTextAreaStyle: GenerateStyle<InputToken> = (token) => {
const { componentCls, paddingLG } = token;
const textareaPrefixCls = `${componentCls}-textarea`;
return {
[textareaPrefixCls]: {
position: 'relative',
'&-show-count': {
// https://github.com/ant-design/ant-design/issues/33049
[`> ${componentCls}`]: {
height: '100%',
},
[`${componentCls}-data-count`]: {
position: 'absolute',
bottom: token.calc(token.fontSize).mul(token.lineHeight).mul(-1).equal(),
insetInlineEnd: 0,
color: token.colorTextDescription,
whiteSpace: 'nowrap',
pointerEvents: 'none',
},
},
[`
&-allow-clear > ${componentCls},
&-affix-wrapper${textareaPrefixCls}-has-feedback ${componentCls}
`]: {
paddingInlineEnd: paddingLG,
},
[`&-affix-wrapper${componentCls}-affix-wrapper`]: {
padding: 0,
[`> textarea${componentCls}`]: {
fontSize: 'inherit',
border: 'none',
outline: 'none',
background: 'transparent',
'&:focus': {
boxShadow: 'none !important',
},
},
[`${componentCls}-suffix`]: {
margin: 0,
'> *:not(:last-child)': {
marginInline: 0,
},
// Clear Icon
[`${componentCls}-clear-icon`]: {
position: 'absolute',
insetInlineEnd: token.paddingInline,
insetBlockStart: token.paddingXS,
},
// Feedback Icon
[`${textareaPrefixCls}-suffix`]: {
position: 'absolute',
top: 0,
insetInlineEnd: token.paddingInline,
bottom: 0,
zIndex: 1,
display: 'inline-flex',
alignItems: 'center',
margin: 'auto',
pointerEvents: 'none',
},
},
},
[`&-affix-wrapper${componentCls}-affix-wrapper-sm`]: {
[`${componentCls}-suffix`]: {
[`${componentCls}-clear-icon`]: {
insetInlineEnd: token.paddingInlineSM,
},
},
},
},
};
};
// ============================== Range ===============================
const genRangeStyle: GenerateStyle<InputToken> = (token) => {
const { componentCls } = token;
@ -885,7 +800,6 @@ export default genStyleHooks(
return [
genInputStyle(inputToken),
genTextAreaStyle(inputToken),
genAffixStyle(inputToken),
genGroupStyle(inputToken),
genSearchInputStyle(inputToken),

107
components/input/style/textarea.ts Normal file
View File

@ -0,0 +1,107 @@
import { genAffixStyle, genInputStyle } from '.';
import type { GenerateStyle } from '../../theme/internal';
import { genStyleHooks, mergeToken } from '../../theme/internal';
import type { ComponentToken, InputToken } from './token';
import { initComponentToken, initInputToken } from './token';
export type { ComponentToken };
export { initComponentToken, initInputToken };
const genTextAreaStyle: GenerateStyle<InputToken> = (token) => {
const { componentCls, paddingLG } = token;
const textareaPrefixCls = `${componentCls}-textarea`;
return {
[textareaPrefixCls]: {
position: 'relative',
'&-show-count': {
// https://github.com/ant-design/ant-design/issues/33049
[`> ${componentCls}`]: {
height: '100%',
},
[`${componentCls}-data-count`]: {
position: 'absolute',
bottom: token.calc(token.fontSize).mul(token.lineHeight).mul(-1).equal(),
insetInlineEnd: 0,
color: token.colorTextDescription,
whiteSpace: 'nowrap',
pointerEvents: 'none',
},
},
[`
&-allow-clear > ${componentCls},
&-affix-wrapper${textareaPrefixCls}-has-feedback ${componentCls}
`]: {
paddingInlineEnd: paddingLG,
},
[`&-affix-wrapper${componentCls}-affix-wrapper`]: {
padding: 0,
[`> textarea${componentCls}`]: {
fontSize: 'inherit',
border: 'none',
outline: 'none',
background: 'transparent',
'&:focus': {
boxShadow: 'none !important',
},
},
[`${componentCls}-suffix`]: {
margin: 0,
'> *:not(:last-child)': {
marginInline: 0,
},
// Clear Icon
[`${componentCls}-clear-icon`]: {
position: 'absolute',
insetInlineEnd: token.paddingInline,
insetBlockStart: token.paddingXS,
},
// Feedback Icon
[`${textareaPrefixCls}-suffix`]: {
position: 'absolute',
top: 0,
insetInlineEnd: token.paddingInline,
bottom: 0,
zIndex: 1,
display: 'inline-flex',
alignItems: 'center',
margin: 'auto',
pointerEvents: 'none',
},
},
},
[`&-affix-wrapper${componentCls}-affix-wrapper-sm`]: {
[`${componentCls}-suffix`]: {
[`${componentCls}-clear-icon`]: {
insetInlineEnd: token.paddingInlineSM,
},
},
},
},
};
};
// ============================== Export ==============================
export default genStyleHooks(
'Input',
(token) => {
const inputToken = mergeToken<InputToken>(token, initInputToken(token));
return [genInputStyle(inputToken), genAffixStyle(inputToken), genTextAreaStyle(inputToken)];
},
initComponentToken,
{
resetFont: false,
},
);