1
This commit is contained in:
+70
@@ -0,0 +1,70 @@
|
||||
import * as React from 'react';
|
||||
import type { CollapseProps as RcCollapseProps } from '@rc-component/collapse';
|
||||
import type { SemanticClassNamesType, SemanticStylesType } from '../_util/hooks';
|
||||
import type { SizeType } from '../config-provider/SizeContext';
|
||||
import type { CollapsibleType } from './CollapsePanel';
|
||||
export type ExpandIconPlacement = 'start' | 'end';
|
||||
export type CollapseSemanticName = keyof CollapseSemanticClassNames & keyof CollapseSemanticStyles;
|
||||
export type CollapseSemanticClassNames = {
|
||||
root?: string;
|
||||
header?: string;
|
||||
title?: string;
|
||||
body?: string;
|
||||
icon?: string;
|
||||
};
|
||||
export type CollapseSemanticStyles = {
|
||||
root?: React.CSSProperties;
|
||||
header?: React.CSSProperties;
|
||||
title?: React.CSSProperties;
|
||||
body?: React.CSSProperties;
|
||||
icon?: React.CSSProperties;
|
||||
};
|
||||
export type CollapseClassNamesType = SemanticClassNamesType<CollapseProps, CollapseSemanticClassNames>;
|
||||
export type CollapseStylesType = SemanticStylesType<CollapseProps, CollapseSemanticStyles>;
|
||||
export interface CollapseProps extends Pick<RcCollapseProps, 'items'> {
|
||||
activeKey?: Array<string | number> | string | number;
|
||||
defaultActiveKey?: Array<string | number> | string | number;
|
||||
/** 手风琴效果 */
|
||||
accordion?: boolean;
|
||||
/** @deprecated Please use `destroyOnHidden` instead */
|
||||
destroyInactivePanel?: boolean;
|
||||
/**
|
||||
* @since 5.25.0
|
||||
*/
|
||||
destroyOnHidden?: boolean;
|
||||
onChange?: (key: string[]) => void;
|
||||
style?: React.CSSProperties;
|
||||
className?: string;
|
||||
rootClassName?: string;
|
||||
bordered?: boolean;
|
||||
prefixCls?: string;
|
||||
expandIcon?: (panelProps: PanelProps) => React.ReactNode;
|
||||
expandIconPlacement?: ExpandIconPlacement;
|
||||
/** @deprecated Please use `expandIconPlacement` instead */
|
||||
expandIconPosition?: ExpandIconPlacement;
|
||||
ghost?: boolean;
|
||||
size?: SizeType;
|
||||
collapsible?: CollapsibleType;
|
||||
/**
|
||||
* @deprecated use `items` instead
|
||||
*/
|
||||
children?: React.ReactNode;
|
||||
classNames?: CollapseClassNamesType;
|
||||
styles?: CollapseStylesType;
|
||||
}
|
||||
interface PanelProps {
|
||||
isActive?: boolean;
|
||||
header?: React.ReactNode;
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
showArrow?: boolean;
|
||||
forceRender?: boolean;
|
||||
extra?: React.ReactNode;
|
||||
collapsible?: CollapsibleType;
|
||||
classNames?: CollapseSemanticClassNames;
|
||||
styles?: CollapseSemanticStyles;
|
||||
}
|
||||
declare const _default: React.ForwardRefExoticComponent<CollapseProps & React.RefAttributes<HTMLDivElement>> & {
|
||||
Panel: React.ForwardRefExoticComponent<import("./CollapsePanel").CollapsePanelProps & React.RefAttributes<HTMLDivElement>>;
|
||||
};
|
||||
export default _default;
|
||||
+121
@@ -0,0 +1,121 @@
|
||||
"use strict";
|
||||
"use client";
|
||||
|
||||
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
||||
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.default = void 0;
|
||||
var React = _interopRequireWildcard(require("react"));
|
||||
var _RightOutlined = _interopRequireDefault(require("@ant-design/icons/RightOutlined"));
|
||||
var _collapse = _interopRequireDefault(require("@rc-component/collapse"));
|
||||
var _util = require("@rc-component/util");
|
||||
var _clsx = require("clsx");
|
||||
var _hooks = require("../_util/hooks");
|
||||
var _motion = _interopRequireDefault(require("../_util/motion"));
|
||||
var _reactNode = require("../_util/reactNode");
|
||||
var _warning = require("../_util/warning");
|
||||
var _context = require("../config-provider/context");
|
||||
var _useSize = _interopRequireDefault(require("../config-provider/hooks/useSize"));
|
||||
var _CollapsePanel = _interopRequireDefault(require("./CollapsePanel"));
|
||||
var _style = _interopRequireDefault(require("./style"));
|
||||
const Collapse = /*#__PURE__*/React.forwardRef((props, ref) => {
|
||||
const {
|
||||
getPrefixCls,
|
||||
direction,
|
||||
expandIcon: contextExpandIcon,
|
||||
className: contextClassName,
|
||||
style: contextStyle,
|
||||
classNames: contextClassNames,
|
||||
styles: contextStyles
|
||||
} = (0, _context.useComponentConfig)('collapse');
|
||||
const {
|
||||
prefixCls: customizePrefixCls,
|
||||
className,
|
||||
rootClassName,
|
||||
style,
|
||||
bordered = true,
|
||||
ghost,
|
||||
size: customizeSize,
|
||||
expandIconPlacement,
|
||||
expandIconPosition,
|
||||
children,
|
||||
destroyInactivePanel,
|
||||
destroyOnHidden,
|
||||
expandIcon,
|
||||
classNames,
|
||||
styles
|
||||
} = props;
|
||||
const mergedSize = (0, _useSize.default)(ctx => customizeSize ?? ctx ?? 'middle');
|
||||
const prefixCls = getPrefixCls('collapse', customizePrefixCls);
|
||||
const rootPrefixCls = getPrefixCls();
|
||||
const [hashId, cssVarCls] = (0, _style.default)(prefixCls);
|
||||
const mergedPlacement = expandIconPlacement ?? expandIconPosition ?? 'start';
|
||||
// =========== Merged Props for Semantic ===========
|
||||
const mergedProps = {
|
||||
...props,
|
||||
size: mergedSize,
|
||||
bordered,
|
||||
expandIconPlacement: mergedPlacement
|
||||
};
|
||||
const [mergedClassNames, mergedStyles] = (0, _hooks.useMergeSemantic)([contextClassNames, classNames], [contextStyles, styles], {
|
||||
props: mergedProps
|
||||
});
|
||||
const mergedExpandIcon = expandIcon ?? contextExpandIcon;
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
const warning = (0, _warning.devUseWarning)('Collapse');
|
||||
[['destroyInactivePanel', 'destroyOnHidden'], ['expandIconPosition', 'expandIconPlacement']].forEach(([deprecatedName, newName]) => {
|
||||
warning.deprecated(!(deprecatedName in props), deprecatedName, newName);
|
||||
});
|
||||
}
|
||||
const renderExpandIcon = React.useCallback((panelProps = {}) => {
|
||||
const icon = typeof mergedExpandIcon === 'function' ? mergedExpandIcon(panelProps) : (/*#__PURE__*/React.createElement(_RightOutlined.default, {
|
||||
rotate: panelProps.isActive ? direction === 'rtl' ? -90 : 90 : undefined,
|
||||
"aria-label": panelProps.isActive ? 'expanded' : 'collapsed'
|
||||
}));
|
||||
return (0, _reactNode.cloneElement)(icon, oriProps => ({
|
||||
className: (0, _clsx.clsx)(oriProps.className, `${prefixCls}-arrow`)
|
||||
}));
|
||||
}, [mergedExpandIcon, prefixCls, direction]);
|
||||
const collapseClassName = (0, _clsx.clsx)(`${prefixCls}-icon-placement-${mergedPlacement}`, {
|
||||
[`${prefixCls}-borderless`]: !bordered,
|
||||
[`${prefixCls}-rtl`]: direction === 'rtl',
|
||||
[`${prefixCls}-ghost`]: !!ghost,
|
||||
[`${prefixCls}-large`]: mergedSize === 'large',
|
||||
[`${prefixCls}-small`]: mergedSize === 'small'
|
||||
}, contextClassName, className, rootClassName, hashId, cssVarCls, mergedClassNames.root);
|
||||
const openMotion = React.useMemo(() => ({
|
||||
...(0, _motion.default)(rootPrefixCls),
|
||||
motionAppear: false,
|
||||
leavedClassName: `${prefixCls}-panel-hidden`
|
||||
}), [rootPrefixCls, prefixCls]);
|
||||
const items = React.useMemo(() => {
|
||||
if (children) {
|
||||
return (0, _util.toArray)(children).map(child => child);
|
||||
}
|
||||
return null;
|
||||
}, [children]);
|
||||
return /*#__PURE__*/React.createElement(_collapse.default, {
|
||||
ref: ref,
|
||||
openMotion: openMotion,
|
||||
...(0, _util.omit)(props, ['rootClassName']),
|
||||
expandIcon: renderExpandIcon,
|
||||
prefixCls: prefixCls,
|
||||
className: collapseClassName,
|
||||
style: {
|
||||
...mergedStyles.root,
|
||||
...contextStyle,
|
||||
...style
|
||||
},
|
||||
classNames: mergedClassNames,
|
||||
styles: mergedStyles,
|
||||
destroyOnHidden: destroyOnHidden ?? destroyInactivePanel
|
||||
}, items);
|
||||
});
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
Collapse.displayName = 'Collapse';
|
||||
}
|
||||
var _default = exports.default = Object.assign(Collapse, {
|
||||
Panel: _CollapsePanel.default
|
||||
});
|
||||
+17
@@ -0,0 +1,17 @@
|
||||
import * as React from 'react';
|
||||
export type CollapsibleType = 'header' | 'icon' | 'disabled';
|
||||
export interface CollapsePanelProps {
|
||||
key: string | number;
|
||||
header: React.ReactNode;
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
showArrow?: boolean;
|
||||
prefixCls?: string;
|
||||
forceRender?: boolean;
|
||||
id?: string;
|
||||
extra?: React.ReactNode;
|
||||
collapsible?: CollapsibleType;
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
declare const CollapsePanel: React.ForwardRefExoticComponent<CollapsePanelProps & React.RefAttributes<HTMLDivElement>>;
|
||||
export default CollapsePanel;
|
||||
+39
@@ -0,0 +1,39 @@
|
||||
"use strict";
|
||||
"use client";
|
||||
|
||||
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
||||
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.default = void 0;
|
||||
var React = _interopRequireWildcard(require("react"));
|
||||
var _collapse = _interopRequireDefault(require("@rc-component/collapse"));
|
||||
var _clsx = require("clsx");
|
||||
var _warning = require("../_util/warning");
|
||||
var _configProvider = require("../config-provider");
|
||||
const CollapsePanel = /*#__PURE__*/React.forwardRef((props, ref) => {
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
const warning = (0, _warning.devUseWarning)('Collapse.Panel');
|
||||
warning.deprecated(!('disabled' in props), 'disabled', 'collapsible="disabled"');
|
||||
}
|
||||
const {
|
||||
getPrefixCls
|
||||
} = React.useContext(_configProvider.ConfigContext);
|
||||
const {
|
||||
prefixCls: customizePrefixCls,
|
||||
className,
|
||||
showArrow = true
|
||||
} = props;
|
||||
const prefixCls = getPrefixCls('collapse', customizePrefixCls);
|
||||
const collapsePanelClassName = (0, _clsx.clsx)({
|
||||
[`${prefixCls}-no-arrow`]: !showArrow
|
||||
}, className);
|
||||
return /*#__PURE__*/React.createElement(_collapse.default.Panel, {
|
||||
ref: ref,
|
||||
...props,
|
||||
prefixCls: prefixCls,
|
||||
className: collapsePanelClassName
|
||||
});
|
||||
});
|
||||
var _default = exports.default = CollapsePanel;
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
import Collapse from './Collapse';
|
||||
export type { CollapseClassNamesType, CollapseProps, CollapseSemanticClassNames, CollapseSemanticName, CollapseSemanticStyles, CollapseStylesType, } from './Collapse';
|
||||
export type { CollapsePanelProps } from './CollapsePanel';
|
||||
export default Collapse;
|
||||
+10
@@ -0,0 +1,10 @@
|
||||
"use strict";
|
||||
"use client";
|
||||
|
||||
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.default = void 0;
|
||||
var _Collapse = _interopRequireDefault(require("./Collapse"));
|
||||
var _default = exports.default = _Collapse.default;
|
||||
+57
@@ -0,0 +1,57 @@
|
||||
import type { CSSProperties } from 'react';
|
||||
import type { CSSObject } from '@ant-design/cssinjs';
|
||||
import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
|
||||
/** Component only token. Which will handle additional calculation of alias token */
|
||||
export interface ComponentToken {
|
||||
/**
|
||||
* @desc 折叠面板头部内边距
|
||||
* @descEN Padding of header
|
||||
*/
|
||||
headerPadding: CSSProperties['padding'];
|
||||
/**
|
||||
* @desc 折叠面板头部背景
|
||||
* @descEN Background of header
|
||||
*/
|
||||
headerBg: string;
|
||||
/**
|
||||
* @desc 折叠面板内容内边距
|
||||
* @descEN Padding of content
|
||||
*/
|
||||
contentPadding: CSSProperties['padding'];
|
||||
/**
|
||||
* @desc 折叠面板内容背景
|
||||
* @descEN Background of content
|
||||
*/
|
||||
contentBg: string;
|
||||
/**
|
||||
* @desc 简约风格折叠面板的内容内边距
|
||||
* @descEN Padding of content in borderless style
|
||||
*/
|
||||
borderlessContentPadding: CSSProperties['padding'];
|
||||
/**
|
||||
* @desc 简约风格折叠面板的内容背景
|
||||
* @descEN Background of content in borderless style
|
||||
*/
|
||||
borderlessContentBg: string;
|
||||
}
|
||||
type CollapseToken = FullToken<'Collapse'> & {
|
||||
/**
|
||||
* @desc 小号折叠面板头部内边距
|
||||
* @descEN Padding of small header
|
||||
*/
|
||||
collapseHeaderPaddingSM: string;
|
||||
/**
|
||||
* @desc 大号折叠面板头部内边距
|
||||
* @descEN Padding of large header
|
||||
*/
|
||||
collapseHeaderPaddingLG: string;
|
||||
/**
|
||||
* @desc 折叠面板边框圆角
|
||||
* @descEN Border radius of collapse panel
|
||||
*/
|
||||
collapsePanelBorderRadius: number;
|
||||
};
|
||||
export declare const genBaseStyle: GenerateStyle<CollapseToken, CSSObject>;
|
||||
export declare const prepareComponentToken: GetDefaultToken<'Collapse'>;
|
||||
declare const _default: (prefixCls: string, rootCls?: string) => readonly [string, string];
|
||||
export default _default;
|
||||
+278
@@ -0,0 +1,278 @@
|
||||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.prepareComponentToken = exports.genBaseStyle = exports.default = void 0;
|
||||
var _cssinjs = require("@ant-design/cssinjs");
|
||||
var _style = require("../../style");
|
||||
var _motion = require("../../style/motion");
|
||||
var _internal = require("../../theme/internal");
|
||||
const genBaseStyle = token => {
|
||||
const {
|
||||
componentCls,
|
||||
contentBg,
|
||||
padding,
|
||||
headerBg,
|
||||
headerPadding,
|
||||
collapseHeaderPaddingSM,
|
||||
collapseHeaderPaddingLG,
|
||||
collapsePanelBorderRadius,
|
||||
lineWidth,
|
||||
lineType,
|
||||
colorBorder,
|
||||
colorText,
|
||||
colorTextHeading,
|
||||
colorTextDisabled,
|
||||
fontSizeLG,
|
||||
lineHeight,
|
||||
lineHeightLG,
|
||||
marginSM,
|
||||
paddingSM,
|
||||
paddingLG,
|
||||
paddingXS,
|
||||
motionDurationSlow,
|
||||
fontSizeIcon,
|
||||
contentPadding,
|
||||
fontHeight,
|
||||
fontHeightLG
|
||||
} = token;
|
||||
const borderBase = `${(0, _cssinjs.unit)(lineWidth)} ${lineType} ${colorBorder}`;
|
||||
return {
|
||||
[componentCls]: {
|
||||
...(0, _style.resetComponent)(token),
|
||||
backgroundColor: headerBg,
|
||||
border: borderBase,
|
||||
borderRadius: collapsePanelBorderRadius,
|
||||
'&-rtl': {
|
||||
direction: 'rtl'
|
||||
},
|
||||
[`& > ${componentCls}-item`]: {
|
||||
borderBottom: borderBase,
|
||||
'&:first-child': {
|
||||
[`
|
||||
&,
|
||||
& > ${componentCls}-header`]: {
|
||||
borderRadius: `${(0, _cssinjs.unit)(collapsePanelBorderRadius)} ${(0, _cssinjs.unit)(collapsePanelBorderRadius)} 0 0`
|
||||
}
|
||||
},
|
||||
'&:last-child': {
|
||||
[`
|
||||
&,
|
||||
& > ${componentCls}-header`]: {
|
||||
borderRadius: `0 0 ${(0, _cssinjs.unit)(collapsePanelBorderRadius)} ${(0, _cssinjs.unit)(collapsePanelBorderRadius)}`
|
||||
}
|
||||
},
|
||||
[`> ${componentCls}-header`]: {
|
||||
position: 'relative',
|
||||
// Compatible with old version of antd, should remove in next version
|
||||
display: 'flex',
|
||||
flexWrap: 'nowrap',
|
||||
alignItems: 'flex-start',
|
||||
padding: headerPadding,
|
||||
color: colorTextHeading,
|
||||
lineHeight,
|
||||
cursor: 'pointer',
|
||||
transition: `all ${motionDurationSlow}, visibility 0s`,
|
||||
...(0, _style.genFocusStyle)(token),
|
||||
[`> ${componentCls}-title`]: {
|
||||
flex: 'auto'
|
||||
},
|
||||
// >>>>> Arrow
|
||||
[`${componentCls}-expand-icon`]: {
|
||||
height: fontHeight,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
marginInlineEnd: marginSM
|
||||
},
|
||||
[`${componentCls}-arrow`]: {
|
||||
...(0, _style.resetIcon)(),
|
||||
fontSize: fontSizeIcon,
|
||||
// when `transform: rotate()` is applied to icon's root element
|
||||
transition: `transform ${motionDurationSlow}`,
|
||||
// when `transform: rotate()` is applied to icon's child element
|
||||
svg: {
|
||||
transition: `transform ${motionDurationSlow}`
|
||||
}
|
||||
},
|
||||
// >>>>> Text
|
||||
[`${componentCls}-title`]: {
|
||||
marginInlineEnd: 'auto'
|
||||
}
|
||||
},
|
||||
[`${componentCls}-collapsible-header`]: {
|
||||
cursor: 'default',
|
||||
[`${componentCls}-title`]: {
|
||||
flex: 'none',
|
||||
cursor: 'pointer'
|
||||
},
|
||||
[`${componentCls}-expand-icon`]: {
|
||||
cursor: 'pointer'
|
||||
}
|
||||
},
|
||||
[`${componentCls}-collapsible-icon`]: {
|
||||
cursor: 'unset',
|
||||
[`${componentCls}-expand-icon`]: {
|
||||
cursor: 'pointer'
|
||||
}
|
||||
}
|
||||
},
|
||||
[`${componentCls}-panel`]: {
|
||||
color: colorText,
|
||||
backgroundColor: contentBg,
|
||||
borderTop: borderBase,
|
||||
[`& > ${componentCls}-body`]: {
|
||||
padding: contentPadding
|
||||
},
|
||||
'&-hidden': {
|
||||
display: 'none'
|
||||
}
|
||||
},
|
||||
'&-small': {
|
||||
[`> ${componentCls}-item`]: {
|
||||
[`> ${componentCls}-header`]: {
|
||||
padding: collapseHeaderPaddingSM,
|
||||
paddingInlineStart: paddingXS,
|
||||
[`> ${componentCls}-expand-icon`]: {
|
||||
// Arrow offset
|
||||
marginInlineStart: token.calc(paddingSM).sub(paddingXS).equal()
|
||||
}
|
||||
},
|
||||
[`> ${componentCls}-panel > ${componentCls}-body`]: {
|
||||
padding: paddingSM
|
||||
}
|
||||
}
|
||||
},
|
||||
'&-large': {
|
||||
[`> ${componentCls}-item`]: {
|
||||
fontSize: fontSizeLG,
|
||||
lineHeight: lineHeightLG,
|
||||
[`> ${componentCls}-header`]: {
|
||||
padding: collapseHeaderPaddingLG,
|
||||
paddingInlineStart: padding,
|
||||
[`> ${componentCls}-expand-icon`]: {
|
||||
height: fontHeightLG,
|
||||
// Arrow offset
|
||||
marginInlineStart: token.calc(paddingLG).sub(padding).equal()
|
||||
}
|
||||
},
|
||||
[`> ${componentCls}-panel > ${componentCls}-body`]: {
|
||||
padding: paddingLG
|
||||
}
|
||||
}
|
||||
},
|
||||
[`${componentCls}-item:last-child`]: {
|
||||
borderBottom: 0,
|
||||
[`> ${componentCls}-panel`]: {
|
||||
borderRadius: `0 0 ${(0, _cssinjs.unit)(collapsePanelBorderRadius)} ${(0, _cssinjs.unit)(collapsePanelBorderRadius)}`
|
||||
}
|
||||
},
|
||||
[`& ${componentCls}-item-disabled > ${componentCls}-header`]: {
|
||||
'&, & > .arrow': {
|
||||
color: colorTextDisabled,
|
||||
cursor: 'not-allowed'
|
||||
}
|
||||
},
|
||||
// ========================== Icon Placement ==========================
|
||||
[`&${componentCls}-icon-placement-end`]: {
|
||||
[`& > ${componentCls}-item`]: {
|
||||
[`> ${componentCls}-header`]: {
|
||||
[`${componentCls}-expand-icon`]: {
|
||||
order: 1,
|
||||
marginInlineEnd: 0,
|
||||
marginInlineStart: marginSM
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
exports.genBaseStyle = genBaseStyle;
|
||||
const genArrowStyle = token => {
|
||||
const {
|
||||
componentCls
|
||||
} = token;
|
||||
const fixedSelector = `> ${componentCls}-item > ${componentCls}-header ${componentCls}-arrow`;
|
||||
return {
|
||||
[`${componentCls}-rtl`]: {
|
||||
[fixedSelector]: {
|
||||
transform: `rotate(180deg)`
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
const genBorderlessStyle = token => {
|
||||
const {
|
||||
componentCls,
|
||||
headerBg,
|
||||
borderlessContentPadding,
|
||||
borderlessContentBg,
|
||||
colorBorder
|
||||
} = token;
|
||||
return {
|
||||
[`${componentCls}-borderless`]: {
|
||||
backgroundColor: headerBg,
|
||||
border: 0,
|
||||
[`> ${componentCls}-item`]: {
|
||||
borderBottom: `1px solid ${colorBorder}`
|
||||
},
|
||||
[`
|
||||
> ${componentCls}-item:last-child,
|
||||
> ${componentCls}-item:last-child ${componentCls}-header
|
||||
`]: {
|
||||
borderRadius: 0
|
||||
},
|
||||
[`> ${componentCls}-item:last-child`]: {
|
||||
borderBottom: 0
|
||||
},
|
||||
[`> ${componentCls}-item > ${componentCls}-panel`]: {
|
||||
backgroundColor: borderlessContentBg,
|
||||
borderTop: 0
|
||||
},
|
||||
[`> ${componentCls}-item > ${componentCls}-panel > ${componentCls}-body`]: {
|
||||
padding: borderlessContentPadding
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
const genGhostStyle = token => {
|
||||
const {
|
||||
componentCls,
|
||||
paddingSM
|
||||
} = token;
|
||||
return {
|
||||
[`${componentCls}-ghost`]: {
|
||||
backgroundColor: 'transparent',
|
||||
border: 0,
|
||||
[`> ${componentCls}-item`]: {
|
||||
borderBottom: 0,
|
||||
[`> ${componentCls}-panel`]: {
|
||||
backgroundColor: 'transparent',
|
||||
border: 0,
|
||||
[`> ${componentCls}-body`]: {
|
||||
paddingBlock: paddingSM
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
const prepareComponentToken = token => ({
|
||||
headerPadding: `${token.paddingSM}px ${token.padding}px`,
|
||||
headerBg: token.colorFillAlter,
|
||||
contentPadding: `${token.padding}px 16px`,
|
||||
// Fixed Value
|
||||
contentBg: token.colorBgContainer,
|
||||
borderlessContentPadding: `${token.paddingXXS}px 16px ${token.padding}px`,
|
||||
borderlessContentBg: 'transparent'
|
||||
});
|
||||
exports.prepareComponentToken = prepareComponentToken;
|
||||
var _default = exports.default = (0, _internal.genStyleHooks)('Collapse', token => {
|
||||
const collapseToken = (0, _internal.mergeToken)(token, {
|
||||
collapseHeaderPaddingSM: `${(0, _cssinjs.unit)(token.paddingXS)} ${(0, _cssinjs.unit)(token.paddingSM)}`,
|
||||
collapseHeaderPaddingLG: `${(0, _cssinjs.unit)(token.padding)} ${(0, _cssinjs.unit)(token.paddingLG)}`,
|
||||
collapsePanelBorderRadius: token.borderRadiusLG
|
||||
});
|
||||
return [genBaseStyle(collapseToken), genBorderlessStyle(collapseToken), genGhostStyle(collapseToken), genArrowStyle(collapseToken), (0, _motion.genCollapseMotion)(collapseToken)];
|
||||
}, prepareComponentToken);
|
||||
Reference in New Issue
Block a user