This commit is contained in:
2026-05-25 17:08:18 +08:00
parent df501f6151
commit f1259b71b5
9178 changed files with 1626125 additions and 0 deletions
+70
View File
@@ -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
View File
@@ -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
View File
@@ -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
View File
@@ -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
View File
@@ -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
View File
@@ -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
View File
@@ -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
View File
@@ -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);