ant-design/components/date-picker/style/multiple.ts
希亚的西红柿 5716831849
fix: DatePicker with multiple support placeholder (#48387)
* feat: add placeholder option for multiple datepicker

* fix: update style

* chore: bump rc-picker

* test: update snapshot

---------

Co-authored-by: afc163 <afc163@gmail.com>
Co-authored-by: 二货机器人 <smith3816@gmail.com>
2024-04-16 14:54:19 +08:00

116 lines
3.6 KiB
TypeScript

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;