mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-22 22:48:29 +08:00
5716831849
* 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>
116 lines
3.6 KiB
TypeScript
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;
|