import type { CSSInterpolation } from '@ant-design/cssinjs'; import { unit } from '@ant-design/cssinjs'; import { genOverflowStyle, getMultipleSelectorUnit } from '../../select/style/multiple'; import { mergeToken } from '../../theme/internal'; import type { GenerateStyle } from '../../theme/internal'; import type { PickerToken } from './token'; const genSize = (token: PickerToken, suffix?: string): CSSInterpolation => { const { componentCls, controlHeight } = token; const suffixCls = suffix ? `${componentCls}-${suffix}` : ''; const multipleSelectorUnit = getMultipleSelectorUnit(token); return [ // genSelectionStyle(token, suffix), { [`${componentCls}-multiple${suffixCls}`]: { paddingBlock: multipleSelectorUnit.containerPadding, paddingInlineStart: multipleSelectorUnit.basePadding, minHeight: controlHeight, // ======================== Selections ======================== [`${componentCls}-selection-item`]: { height: multipleSelectorUnit.itemHeight, lineHeight: unit(multipleSelectorUnit.itemLineHeight), }, }, }, ]; }; const genPickerMultipleStyle: GenerateStyle<PickerToken> = (token) => { const { componentCls, calc, lineWidth } = token; const smallToken = mergeToken<PickerToken>(token, { fontHeight: token.fontSize, selectHeight: token.controlHeightSM, multipleSelectItemHeight: token.multipleItemHeightSM, borderRadius: token.borderRadiusSM, borderRadiusSM: token.borderRadiusXS, controlHeight: token.controlHeightSM, }); const largeToken = mergeToken<PickerToken>(token, { fontHeight: calc(token.multipleItemHeightLG) .sub(calc(lineWidth).mul(2).equal()) .equal() as number, fontSize: token.fontSizeLG, selectHeight: token.controlHeightLG, multipleSelectItemHeight: token.multipleItemHeightLG, borderRadius: token.borderRadiusLG, borderRadiusSM: token.borderRadius, controlHeight: token.controlHeightLG, }); return [ // ======================== Size ======================== genSize(smallToken, 'small'), genSize(token), genSize(largeToken, 'large'), // ====================== Selection ====================== { [`${componentCls}${componentCls}-multiple`]: { width: '100%', cursor: 'text', // ==================== Selector ===================== [`${componentCls}-selector`]: { flex: 'auto', padding: 0, position: 'relative', '&:after': { margin: 0, }, // ================== placeholder ================== [`${componentCls}-selection-placeholder`]: { position: 'absolute', top: '50%', insetInlineStart: token.inputPaddingHorizontalBase, insetInlineEnd: 0, transform: 'translateY(-50%)', transition: `all ${token.motionDurationSlow}`, overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis', flex: 1, color: token.colorTextPlaceholder, pointerEvents: 'none', }, }, // ===================== Overflow ==================== ...genOverflowStyle(token), // ====================== Input ====================== // Input is `readonly`, which is used for a11y only [`${componentCls}-multiple-input`]: { width: 0, height: 0, border: 0, visibility: 'hidden', position: 'absolute', zIndex: -1, }, }, }, ]; }; export default genPickerMultipleStyle;