261 lines
7.8 KiB
JavaScript
261 lines
7.8 KiB
JavaScript
|
"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]: Object.assign(Object.assign({}, (0, _style.resetComponent)(token)), {
|
||
|
|
backgroundColor: headerBg,
|
||
|
|
border: borderBase,
|
||
|
|
borderRadius: collapsePanelBorderRadius,
|
||
|
|
'&-rtl': {
|
||
|
|
direction: 'rtl'
|
||
|
|
},
|
||
|
|
[`& > ${componentCls}-item`]: {
|
||
|
|
borderBottom: borderBase,
|
||
|
|
'&: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`,
|
||
|
|
[`> ${componentCls}-header-text`]: {
|
||
|
|
flex: 'auto'
|
||
|
|
},
|
||
|
|
'&:focus': {
|
||
|
|
outline: 'none'
|
||
|
|
},
|
||
|
|
// >>>>> Arrow
|
||
|
|
[`${componentCls}-expand-icon`]: {
|
||
|
|
height: fontHeight,
|
||
|
|
display: 'flex',
|
||
|
|
alignItems: 'center',
|
||
|
|
paddingInlineEnd: marginSM
|
||
|
|
},
|
||
|
|
[`${componentCls}-arrow`]: Object.assign(Object.assign({}, (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}-header-text`]: {
|
||
|
|
marginInlineEnd: 'auto'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
[`${componentCls}-icon-collapsible-only`]: {
|
||
|
|
cursor: 'unset',
|
||
|
|
[`${componentCls}-expand-icon`]: {
|
||
|
|
cursor: 'pointer'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
[`${componentCls}-content`]: {
|
||
|
|
color: colorText,
|
||
|
|
backgroundColor: contentBg,
|
||
|
|
borderTop: borderBase,
|
||
|
|
[`& > ${componentCls}-content-box`]: {
|
||
|
|
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}-content > ${componentCls}-content-box`]: {
|
||
|
|
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}-content > ${componentCls}-content-box`]: {
|
||
|
|
padding: paddingLG
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
[`${componentCls}-item:last-child`]: {
|
||
|
|
borderBottom: 0,
|
||
|
|
[`> ${componentCls}-content`]: {
|
||
|
|
borderRadius: `0 0 ${(0, _cssinjs.unit)(collapsePanelBorderRadius)} ${(0, _cssinjs.unit)(collapsePanelBorderRadius)}`
|
||
|
|
}
|
||
|
|
},
|
||
|
|
[`& ${componentCls}-item-disabled > ${componentCls}-header`]: {
|
||
|
|
[`
|
||
|
|
&,
|
||
|
|
& > .arrow
|
||
|
|
`]: {
|
||
|
|
color: colorTextDisabled,
|
||
|
|
cursor: 'not-allowed'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// ========================== Icon Position ==========================
|
||
|
|
[`&${componentCls}-icon-position-end`]: {
|
||
|
|
[`& > ${componentCls}-item`]: {
|
||
|
|
[`> ${componentCls}-header`]: {
|
||
|
|
[`${componentCls}-expand-icon`]: {
|
||
|
|
order: 1,
|
||
|
|
paddingInlineEnd: 0,
|
||
|
|
paddingInlineStart: 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,
|
||
|
|
paddingXXS,
|
||
|
|
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}-content`]: {
|
||
|
|
backgroundColor: 'transparent',
|
||
|
|
borderTop: 0
|
||
|
|
},
|
||
|
|
[`> ${componentCls}-item > ${componentCls}-content > ${componentCls}-content-box`]: {
|
||
|
|
paddingTop: paddingXXS
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
};
|
||
|
|
const genGhostStyle = token => {
|
||
|
|
const {
|
||
|
|
componentCls,
|
||
|
|
paddingSM
|
||
|
|
} = token;
|
||
|
|
return {
|
||
|
|
[`${componentCls}-ghost`]: {
|
||
|
|
backgroundColor: 'transparent',
|
||
|
|
border: 0,
|
||
|
|
[`> ${componentCls}-item`]: {
|
||
|
|
borderBottom: 0,
|
||
|
|
[`> ${componentCls}-content`]: {
|
||
|
|
backgroundColor: 'transparent',
|
||
|
|
border: 0,
|
||
|
|
[`> ${componentCls}-content-box`]: {
|
||
|
|
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
|
||
|
|
});
|
||
|
|
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);
|