mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-24 02:59:58 +08:00
feat: Collapse support cssVar (#45862)
* feat: collapse support cssVar * Update components/collapse/style/index.ts Co-authored-by: MadCcc <madccc@foxmail.com> Signed-off-by: 红果汁 <pingfj77@gmail.com> * chore: clean code * Update components/collapse/style/index.ts Co-authored-by: MadCcc <madccc@foxmail.com> Signed-off-by: 红果汁 <pingfj77@gmail.com> * fix: add missing fontHeightLG * fix: lineHeight to lineHeightLG * fix: css * fix: css --------- Signed-off-by: 红果汁 <pingfj77@gmail.com> Co-authored-by: MadCcc <madccc@foxmail.com>
This commit is contained in:
红果汁
GitHub
parent
58aa57b79b
commit
ec288bc39c
@ -16,6 +16,7 @@ import type { SizeType } from '../config-provider/SizeContext';
|
||||
import type { CollapsibleType } from './CollapsePanel';
|
||||
import CollapsePanel from './CollapsePanel';
|
||||
import useStyle from './style';
|
||||
import useCSSVar from './style/cssVar';
|
||||
|
||||
/** @deprecated Please use `start` | `end` instead */
|
||||
type ExpandIconPositionLegacy = 'left' | 'right';
|
||||
@ -76,7 +77,8 @@ const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>((props, ref) =>
|
||||
const mergedSize = useSize((ctx) => customizeSize ?? ctx ?? 'middle');
|
||||
const prefixCls = getPrefixCls('collapse', customizePrefixCls);
|
||||
const rootPrefixCls = getPrefixCls();
|
||||
const [wrapSSR, hashId] = useStyle(prefixCls);
|
||||
const [, hashId] = useStyle(prefixCls);
|
||||
const wrapCSSVar = useCSSVar(prefixCls);
|
||||
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
const warning = devUseWarning('Collapse');
|
||||
@ -153,7 +155,7 @@ const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>((props, ref) =>
|
||||
[children],
|
||||
);
|
||||
|
||||
return wrapSSR(
|
||||
return wrapCSSVar(
|
||||
<RcCollapse
|
||||
ref={ref}
|
||||
openMotion={openMotion}
|
||||
|
||||
4
components/collapse/style/cssVar.ts
Normal file
4
components/collapse/style/cssVar.ts
Normal file
@ -0,0 +1,4 @@
|
||||
import { prepareComponentToken } from '.';
|
||||
import { genCSSVarRegister } from '../../theme/internal';
|
||||
|
||||
export default genCSSVarRegister('Collapse', prepareComponentToken);
|
||||
@ -1,7 +1,9 @@
|
||||
import type { CSSProperties } from 'react';
|
||||
import { unit } from '@ant-design/cssinjs';
|
||||
|
||||
import { resetComponent, resetIcon } from '../../style';
|
||||
import { genCollapseMotion } from '../../style/motion';
|
||||
import type { FullToken, GenerateStyle } from '../../theme/internal';
|
||||
import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
|
||||
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
|
||||
|
||||
/** Component only token. Which will handle additional calculation of alias token */
|
||||
@ -52,9 +54,9 @@ export const genBaseStyle: GenerateStyle<CollapseToken> = (token) => {
|
||||
colorText,
|
||||
colorTextHeading,
|
||||
colorTextDisabled,
|
||||
fontSize,
|
||||
fontSizeLG,
|
||||
lineHeight,
|
||||
lineHeightLG,
|
||||
marginSM,
|
||||
paddingSM,
|
||||
paddingLG,
|
||||
@ -62,9 +64,11 @@ export const genBaseStyle: GenerateStyle<CollapseToken> = (token) => {
|
||||
motionDurationSlow,
|
||||
fontSizeIcon,
|
||||
contentPadding,
|
||||
fontHeight,
|
||||
fontHeightLG,
|
||||
} = token;
|
||||
|
||||
const borderBase = `${lineWidth}px ${lineType} ${colorBorder}`;
|
||||
const borderBase = `${unit(lineWidth)} ${lineType} ${colorBorder}`;
|
||||
|
||||
return {
|
||||
[componentCls]: {
|
||||
@ -72,7 +76,7 @@ export const genBaseStyle: GenerateStyle<CollapseToken> = (token) => {
|
||||
backgroundColor: headerBg,
|
||||
border: borderBase,
|
||||
borderBottom: 0,
|
||||
borderRadius: `${collapsePanelBorderRadius}px`,
|
||||
borderRadius: collapsePanelBorderRadius,
|
||||
|
||||
[`&-rtl`]: {
|
||||
direction: 'rtl',
|
||||
@ -84,7 +88,9 @@ export const genBaseStyle: GenerateStyle<CollapseToken> = (token) => {
|
||||
[`
|
||||
&,
|
||||
& > ${componentCls}-header`]: {
|
||||
borderRadius: `0 0 ${collapsePanelBorderRadius}px ${collapsePanelBorderRadius}px`,
|
||||
borderRadius: `0 0 ${unit(collapsePanelBorderRadius)} ${unit(
|
||||
collapsePanelBorderRadius,
|
||||
)}`,
|
||||
},
|
||||
},
|
||||
|
||||
@ -109,7 +115,7 @@ export const genBaseStyle: GenerateStyle<CollapseToken> = (token) => {
|
||||
|
||||
// >>>>> Arrow
|
||||
[`${componentCls}-expand-icon`]: {
|
||||
height: fontSize * lineHeight,
|
||||
height: fontHeight,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
paddingInlineEnd: marginSM,
|
||||
@ -170,7 +176,7 @@ export const genBaseStyle: GenerateStyle<CollapseToken> = (token) => {
|
||||
|
||||
[`> ${componentCls}-expand-icon`]: {
|
||||
// Arrow offset
|
||||
marginInlineStart: paddingSM - paddingXS,
|
||||
marginInlineStart: token.calc(paddingSM).sub(paddingXS).equal(),
|
||||
},
|
||||
},
|
||||
[`> ${componentCls}-content > ${componentCls}-content-box`]: {
|
||||
@ -182,15 +188,15 @@ export const genBaseStyle: GenerateStyle<CollapseToken> = (token) => {
|
||||
[`&-large`]: {
|
||||
[`> ${componentCls}-item`]: {
|
||||
fontSize: fontSizeLG,
|
||||
|
||||
lineHeight: lineHeightLG,
|
||||
[`> ${componentCls}-header`]: {
|
||||
padding: collapseHeaderPaddingLG,
|
||||
paddingInlineStart: padding,
|
||||
|
||||
[`> ${componentCls}-expand-icon`]: {
|
||||
height: fontSizeLG * lineHeight,
|
||||
height: fontHeightLG,
|
||||
// Arrow offset
|
||||
marginInlineStart: paddingLG - padding,
|
||||
marginInlineStart: token.calc(paddingLG).sub(padding).equal(),
|
||||
},
|
||||
},
|
||||
[`> ${componentCls}-content > ${componentCls}-content-box`]: {
|
||||
@ -201,7 +207,7 @@ export const genBaseStyle: GenerateStyle<CollapseToken> = (token) => {
|
||||
|
||||
[`${componentCls}-item:last-child`]: {
|
||||
[`> ${componentCls}-content`]: {
|
||||
borderRadius: `0 0 ${collapsePanelBorderRadius}px ${collapsePanelBorderRadius}px`,
|
||||
borderRadius: `0 0 ${unit(collapsePanelBorderRadius)} ${unit(collapsePanelBorderRadius)}`,
|
||||
},
|
||||
},
|
||||
|
||||
@ -307,12 +313,19 @@ const genGhostStyle: GenerateStyle<CollapseToken> = (token) => {
|
||||
};
|
||||
};
|
||||
|
||||
export const prepareComponentToken: GetDefaultToken<'Collapse'> = (token) => ({
|
||||
headerPadding: `${token.paddingSM}px ${token.padding}px`,
|
||||
headerBg: token.colorFillAlter,
|
||||
contentPadding: `${token.padding}px 16px`, // Fixed Value
|
||||
contentBg: token.colorBgContainer,
|
||||
});
|
||||
|
||||
export default genComponentStyleHook(
|
||||
'Collapse',
|
||||
(token) => {
|
||||
const collapseToken = mergeToken<CollapseToken>(token, {
|
||||
collapseHeaderPaddingSM: `${token.paddingXS}px ${token.paddingSM}px`,
|
||||
collapseHeaderPaddingLG: `${token.padding}px ${token.paddingLG}px`,
|
||||
collapseHeaderPaddingSM: `${unit(token.paddingXS)} ${unit(token.paddingSM)}`,
|
||||
collapseHeaderPaddingLG: `${unit(token.padding)} ${unit(token.paddingLG)}`,
|
||||
collapsePanelBorderRadius: token.borderRadiusLG,
|
||||
});
|
||||
|
||||
@ -324,10 +337,5 @@ export default genComponentStyleHook(
|
||||
genCollapseMotion(collapseToken),
|
||||
];
|
||||
},
|
||||
(token) => ({
|
||||
headerPadding: `${token.paddingSM}px ${token.padding}px`,
|
||||
headerBg: token.colorFillAlter,
|
||||
contentPadding: `${token.padding}px 16px`, // Fixed Value
|
||||
contentBg: token.colorBgContainer,
|
||||
}),
|
||||
prepareComponentToken,
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user