ant-design/components/tree-select/style/index.tsx
MadCcc 8e27cf986f
chore: rm component less file (#36244)
* chore: rm component less file

* refactor: less file

* refactor: rm less

* refactor: rm page-header and comment

* chore: rm less in components

* chore: update dist config

* chore: update image test

* chore: update dekko

* chore: rm lib dekko

* chore: update dist dekko

* chore: udpate bundle size

* test: update snapshot

* test: rm theme test

* test: update snapshot

* test: update snapshot

* chore: copy reset.css

* test: update image test

* chore: copy reset.css to es

* chore: update site script
2022-07-05 21:55:21 +08:00

74 lines
2.3 KiB
TypeScript

import { getStyle as getCheckboxStyle } from '../../checkbox/style';
import type { AliasToken, FullToken, GenerateStyle } from '../../theme';
import { genComponentStyleHook, mergeToken } from '../../theme';
import { genTreeStyle } from '../../tree/style';
interface TreeSelectToken extends FullToken<'TreeSelect'> {
treePrefixCls: string;
}
// =============================== Base ===============================
const genBaseStyle: GenerateStyle<TreeSelectToken> = token => {
const { componentCls, treePrefixCls, colorBgElevated } = token;
const treeCls = `.${treePrefixCls}`;
return [
// ======================================================
// == Dropdown ==
// ======================================================
{
[`${componentCls}-dropdown`]: [
{
padding: `${token.paddingXS}px ${token.paddingXS / 2}px`,
},
// ====================== Tree ======================
genTreeStyle(
treePrefixCls,
mergeToken<AliasToken>(token, { colorBgContainer: colorBgElevated }),
),
{
[treeCls]: {
borderRadius: 0,
'&-list-holder-inner': {
alignItems: 'stretch',
[`${treeCls}-treenode`]: {
[`${treeCls}-node-content-wrapper`]: {
flex: 'auto',
},
},
},
},
},
// ==================== Checkbox ====================
getCheckboxStyle(`${treePrefixCls}-checkbox`, token),
// ====================== RTL =======================
{
'&-rtl': {
direction: 'rtl',
[`${treeCls}-switcher${treeCls}-switcher_close`]: {
[`${treeCls}-switcher-icon svg`]: {
transform: 'rotate(90deg)',
},
},
},
},
],
},
];
};
// ============================== Export ==============================
export default function useTreeSelectStyle(prefixCls: string, treePrefixCls: string) {
return genComponentStyleHook('TreeSelect', token => {
const treeSelectToken = mergeToken<TreeSelectToken>(token, {
treePrefixCls,
});
return [genBaseStyle(treeSelectToken)];
})(prefixCls);
}