ant-design/components/style/compact-item.ts

105 lines
2.7 KiB
TypeScript
Raw Normal View History

/* eslint-disable import/prefer-default-export */
import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
import type { AliasToken, FullToken } from '../theme/internal';
import type { CSSUtil, OverrideComponent } from '../theme/util/genComponentStyleHook';
interface CompactItemOptions {
focus?: boolean;
/**
* Some component borders are implemented on child elements
* like `Select`
*/
borderElCls?: string;
/**
* Some components have special `focus` className especially with popovers
* like `Select` and `DatePicker`
*/
focusElCls?: string;
}
// handle border collapse
function compactItemBorder(
token: AliasToken & CSSUtil,
parentCls: string,
options: CompactItemOptions,
): CSSObject {
const { focusElCls, focus, borderElCls } = options;
const childCombinator = borderElCls ? '> *' : '';
const hoverEffects = ['hover', focus ? 'focus' : null, 'active']
.filter(Boolean)
.map((n) => `&:${n} ${childCombinator}`)
.join(',');
return {
[`&-item:not(${parentCls}-last-item)`]: {
marginInlineEnd: token.calc(token.lineWidth).mul(-1).equal(),
},
'&-item': {
[hoverEffects]: {
zIndex: 2,
},
...(focusElCls
? {
[`&${focusElCls}`]: {
zIndex: 2,
},
}
: {}),
[`&[disabled] ${childCombinator}`]: {
zIndex: 0,
},
},
};
}
// handle border-radius
function compactItemBorderRadius(
prefixCls: string,
parentCls: string,
options: CompactItemOptions,
): CSSObject {
const { borderElCls } = options;
const childCombinator = borderElCls ? `> ${borderElCls}` : '';
return {
[`&-item:not(${parentCls}-first-item):not(${parentCls}-last-item) ${childCombinator}`]: {
borderRadius: 0,
},
[`&-item:not(${parentCls}-last-item)${parentCls}-first-item`]: {
[`& ${childCombinator}, &${prefixCls}-sm ${childCombinator}, &${prefixCls}-lg ${childCombinator}`]:
{
borderStartEndRadius: 0,
borderEndEndRadius: 0,
},
},
[`&-item:not(${parentCls}-first-item)${parentCls}-last-item`]: {
[`& ${childCombinator}, &${prefixCls}-sm ${childCombinator}, &${prefixCls}-lg ${childCombinator}`]:
{
borderStartStartRadius: 0,
borderEndStartRadius: 0,
},
},
};
}
export function genCompactItemStyle<T extends OverrideComponent>(
token: FullToken<T>,
options: CompactItemOptions = { focus: true },
): CSSInterpolation {
const { componentCls } = token;
const compactCls = `${componentCls}-compact`;
return {
[compactCls]: {
...compactItemBorder(token, compactCls, options),
...compactItemBorderRadius(componentCls, compactCls, options),
},
};
}