2022-03-09 15:33:39 +08:00
|
|
|
import { getStyle as getCheckboxStyle } from '../../checkbox/style';
|
2022-11-23 20:22:38 +08:00
|
|
|
import type { AliasToken, FullToken, GenerateStyle } from '../../theme/internal';
|
|
|
|
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
|
2022-03-09 15:33:39 +08:00
|
|
|
import { genTreeStyle } from '../../tree/style';
|
|
|
|
|
2022-04-07 12:20:34 +08:00
|
|
|
interface TreeSelectToken extends FullToken<'TreeSelect'> {
|
2022-03-09 15:33:39 +08:00
|
|
|
treePrefixCls: string;
|
|
|
|
}
|
|
|
|
|
|
|
|
// =============================== Base ===============================
|
2022-11-19 13:47:33 +08:00
|
|
|
const genBaseStyle: GenerateStyle<TreeSelectToken> = (token) => {
|
2022-06-21 11:06:06 +08:00
|
|
|
const { componentCls, treePrefixCls, colorBgElevated } = token;
|
2022-03-09 15:33:39 +08:00
|
|
|
const treeCls = `.${treePrefixCls}`;
|
|
|
|
|
|
|
|
return [
|
|
|
|
// ======================================================
|
|
|
|
// == Dropdown ==
|
|
|
|
// ======================================================
|
|
|
|
{
|
2022-04-07 12:20:34 +08:00
|
|
|
[`${componentCls}-dropdown`]: [
|
2022-03-09 15:33:39 +08:00
|
|
|
{
|
|
|
|
padding: `${token.paddingXS}px ${token.paddingXS / 2}px`,
|
|
|
|
},
|
|
|
|
|
|
|
|
// ====================== Tree ======================
|
2022-06-21 11:06:06 +08:00
|
|
|
genTreeStyle(
|
|
|
|
treePrefixCls,
|
2022-06-28 20:33:01 +08:00
|
|
|
mergeToken<AliasToken>(token, { colorBgContainer: colorBgElevated }),
|
2022-06-21 11:06:06 +08:00
|
|
|
),
|
2022-03-09 15:33:39 +08:00
|
|
|
{
|
|
|
|
[treeCls]: {
|
|
|
|
borderRadius: 0,
|
|
|
|
'&-list-holder-inner': {
|
|
|
|
alignItems: 'stretch',
|
|
|
|
|
|
|
|
[`${treeCls}-treenode`]: {
|
|
|
|
[`${treeCls}-node-content-wrapper`]: {
|
|
|
|
flex: 'auto',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
// ==================== Checkbox ====================
|
2022-04-21 02:06:22 +08:00
|
|
|
getCheckboxStyle(`${treePrefixCls}-checkbox`, token),
|
2022-03-09 15:33:39 +08:00
|
|
|
|
|
|
|
// ====================== RTL =======================
|
|
|
|
{
|
|
|
|
'&-rtl': {
|
|
|
|
direction: 'rtl',
|
|
|
|
|
|
|
|
[`${treeCls}-switcher${treeCls}-switcher_close`]: {
|
|
|
|
[`${treeCls}-switcher-icon svg`]: {
|
|
|
|
transform: 'rotate(90deg)',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
],
|
|
|
|
},
|
|
|
|
];
|
|
|
|
};
|
|
|
|
|
|
|
|
// ============================== Export ==============================
|
2022-04-07 12:20:34 +08:00
|
|
|
export default function useTreeSelectStyle(prefixCls: string, treePrefixCls: string) {
|
2022-11-19 13:47:33 +08:00
|
|
|
return genComponentStyleHook('TreeSelect', (token) => {
|
2022-04-11 16:04:00 +08:00
|
|
|
const treeSelectToken = mergeToken<TreeSelectToken>(token, {
|
2022-04-07 12:20:34 +08:00
|
|
|
treePrefixCls,
|
2022-04-11 16:04:00 +08:00
|
|
|
});
|
2022-04-21 02:06:22 +08:00
|
|
|
return [genBaseStyle(treeSelectToken)];
|
2022-04-07 12:20:34 +08:00
|
|
|
})(prefixCls);
|
2022-03-09 15:33:39 +08:00
|
|
|
}
|