mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-05 13:37:52 +08:00
fe314589ed
* chore: init * chore: link picker * chore: move files * chore: update style * chore: update types * test: update snapshot * test: update snapshot * test: update snapshot * test: update snapshot * test: update snapshot * test: fix test case * test: update snapshot * test: update snapshot * test: update snapshot * test: update snapshot * chore: clesn up useless types * chore: update types * chore: fix types * chore: fix types * chore: fix types * chore: fix types * chore: fix types * chore: fix types * chore: fix types * chore: fix types * chore: fix types * chore: update style * chore: clean up * chore: update types * test: update snapshot * test: update snapshot * test: update snapshot * test: update snapshot * fix: format * chore: update deps * chore: feature merge master (#46794) * fix: Fix typo s/Notificaiton/Notification/ (#46775) * docs: supplement form preserve field description (#46788) close https://github.com/ant-design/ant-design/issues/46773 * docs: tweak changelog drawer width in small screen (#46791) * docs: Update compatible-style.zh-CN.md (#46790) Signed-off-by: afc163 <afc163@gmail.com> --------- Signed-off-by: afc163 <afc163@gmail.com> Co-authored-by: hugo-syn <61210734+hugo-syn@users.noreply.github.com> Co-authored-by: Shunze Chen <qianlonwork@outlook.com> Co-authored-by: afc163 <afc163@gmail.com> * chore: update locale size * chore: lock dumi * test: update snapshot * test: update snapshot * test: update snapshot * test: update snapshot * test: update snapshot * test: update snapshot * chore: bump version * test: update snapshot * test: update snapshot * chore: bump version * chore: update limit * test: update snapshot * docs: update 7 days sample * chore: rm useless style * chore: clean up style * docs: add buddihist era demo * refactor: interface * chore: add multiple types * docs: add demo * chore: init style * chore: init style * chore: fill style * chore: fill style * chore: style * chore: size of it * chore: size style * docs: add align demo * docs: needConfirm * chore: fix showWeek style * test: update snapshot * chore: fix ts * chore: fix ts * chore: fix ts * chore: fix ts * fix: week style * docs: update dayjs note * fix: style missing * chore: fix footer extra style missing * test: update snapshot * test: update snapshot * test: update snapshot * test: update snapshot --------- Signed-off-by: afc163 <afc163@gmail.com> Signed-off-by: lijianan <574980606@qq.com> Co-authored-by: hugo-syn <61210734+hugo-syn@users.noreply.github.com> Co-authored-by: Shunze Chen <qianlonwork@outlook.com> Co-authored-by: afc163 <afc163@gmail.com> Co-authored-by: lijianan <574980606@qq.com>
298 lines
8.9 KiB
TypeScript
298 lines
8.9 KiB
TypeScript
import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
|
|
import { unit } from '@ant-design/cssinjs';
|
|
|
|
import { resetIcon } from '../../style';
|
|
import { mergeToken, type AliasToken } from '../../theme/internal';
|
|
import type { TokenWithCommonCls } from '../../theme/util/genComponentStyleHook';
|
|
import type { SelectToken } from './token';
|
|
|
|
const FIXED_ITEM_MARGIN = 2;
|
|
|
|
type SelectItemToken = Pick<
|
|
SelectToken,
|
|
| 'multipleSelectItemHeight'
|
|
| 'multipleSelectorBgDisabled'
|
|
| 'multipleItemColorDisabled'
|
|
| 'multipleItemBorderColorDisabled'
|
|
| 'selectHeight'
|
|
| 'lineWidth'
|
|
| 'calc'
|
|
| 'inputPaddingHorizontalBase'
|
|
>;
|
|
|
|
const getSelectItemStyle = (token: SelectItemToken): number | string => {
|
|
const { multipleSelectItemHeight, selectHeight, lineWidth } = token;
|
|
const selectItemDist = token
|
|
.calc(selectHeight)
|
|
.sub(multipleSelectItemHeight)
|
|
.div(2)
|
|
.sub(lineWidth)
|
|
.equal();
|
|
return selectItemDist;
|
|
};
|
|
|
|
export const genSelectionStyle = (
|
|
token: TokenWithCommonCls<AliasToken> & SelectItemToken,
|
|
suffix?: string,
|
|
): CSSObject => {
|
|
const { componentCls, iconCls } = token;
|
|
|
|
const selectOverflowPrefixCls = `${componentCls}-selection-overflow`;
|
|
|
|
const selectItemHeight = token.multipleSelectItemHeight;
|
|
const selectItemDist = getSelectItemStyle(token);
|
|
|
|
const suffixCls = suffix ? `${componentCls}-${suffix}` : '';
|
|
|
|
return {
|
|
[`${componentCls}-multiple${suffixCls}`]: {
|
|
// fontSize: token.fontSize,
|
|
|
|
/**
|
|
* Do not merge `height` & `line-height` under style with `selection` & `search`, since chrome
|
|
* may update to redesign with its align logic.
|
|
*/
|
|
// =========================== Overflow ===========================
|
|
[selectOverflowPrefixCls]: {
|
|
position: 'relative',
|
|
display: 'flex',
|
|
flex: 'auto',
|
|
flexWrap: 'wrap',
|
|
maxWidth: '100%',
|
|
|
|
'&-item': {
|
|
flex: 'none',
|
|
alignSelf: 'center',
|
|
maxWidth: '100%',
|
|
display: 'inline-flex',
|
|
},
|
|
},
|
|
|
|
// ========================= Selector =========================
|
|
[`${componentCls}-selector`]: {
|
|
display: 'flex',
|
|
flexWrap: 'wrap',
|
|
alignItems: 'center',
|
|
height: '100%',
|
|
// Multiple is little different that horizontal is follow the vertical
|
|
paddingInline: token.calc(FIXED_ITEM_MARGIN).mul(2).equal(),
|
|
paddingBlock: token.calc(selectItemDist).sub(FIXED_ITEM_MARGIN).equal(),
|
|
borderRadius: token.borderRadius,
|
|
|
|
// [`${componentCls}-show-search&`]: {
|
|
// cursor: 'text',
|
|
// },
|
|
|
|
[`${componentCls}-disabled&`]: {
|
|
background: token.multipleSelectorBgDisabled,
|
|
cursor: 'not-allowed',
|
|
},
|
|
|
|
'&:after': {
|
|
display: 'inline-block',
|
|
width: 0,
|
|
margin: `${unit(FIXED_ITEM_MARGIN)} 0`,
|
|
lineHeight: unit(selectItemHeight),
|
|
visibility: 'hidden',
|
|
content: '"\\a0"',
|
|
},
|
|
},
|
|
|
|
// [`
|
|
// &${componentCls}-show-arrow ${componentCls}-selector,
|
|
// &${componentCls}-allow-clear ${componentCls}-selector
|
|
// `]: {
|
|
// paddingInlineEnd: token
|
|
// .calc(token.fontSizeIcon)
|
|
// .add(token.controlPaddingHorizontal)
|
|
// .equal(),
|
|
// },
|
|
|
|
// ======================== Selections ========================
|
|
[`${componentCls}-selection-item`]: {
|
|
display: 'flex',
|
|
alignSelf: 'center',
|
|
flex: 'none',
|
|
boxSizing: 'border-box',
|
|
maxWidth: '100%',
|
|
height: selectItemHeight,
|
|
marginTop: FIXED_ITEM_MARGIN,
|
|
marginBottom: FIXED_ITEM_MARGIN,
|
|
lineHeight: unit(
|
|
token.calc(selectItemHeight).sub(token.calc(token.lineWidth).mul(2)).equal(),
|
|
),
|
|
borderRadius: token.borderRadiusSM,
|
|
cursor: 'default',
|
|
transition: `font-size ${token.motionDurationSlow}, line-height ${token.motionDurationSlow}, height ${token.motionDurationSlow}`,
|
|
marginInlineEnd: token.calc(FIXED_ITEM_MARGIN).mul(2).equal(),
|
|
paddingInlineStart: token.paddingXS,
|
|
paddingInlineEnd: token.calc(token.paddingXS).div(2).equal(),
|
|
|
|
[`${componentCls}-disabled&`]: {
|
|
color: token.multipleItemColorDisabled,
|
|
borderColor: token.multipleItemBorderColorDisabled,
|
|
cursor: 'not-allowed',
|
|
},
|
|
|
|
// It's ok not to do this, but 24px makes bottom narrow in view should adjust
|
|
'&-content': {
|
|
display: 'inline-block',
|
|
marginInlineEnd: token.calc(token.paddingXS).div(2).equal(),
|
|
overflow: 'hidden',
|
|
whiteSpace: 'pre', // fix whitespace wrapping. custom tags display all whitespace within.
|
|
textOverflow: 'ellipsis',
|
|
},
|
|
|
|
'&-remove': {
|
|
...resetIcon(),
|
|
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
color: token.colorIcon,
|
|
fontWeight: 'bold',
|
|
fontSize: 10,
|
|
lineHeight: 'inherit',
|
|
cursor: 'pointer',
|
|
|
|
[`> ${iconCls}`]: {
|
|
verticalAlign: '-0.2em',
|
|
},
|
|
|
|
'&:hover': {
|
|
color: token.colorIconHover,
|
|
},
|
|
},
|
|
},
|
|
|
|
// ========================== Input ==========================
|
|
[`${selectOverflowPrefixCls}-item + ${selectOverflowPrefixCls}-item`]: {
|
|
[`${componentCls}-selection-search`]: {
|
|
marginInlineStart: 0,
|
|
},
|
|
},
|
|
|
|
// https://github.com/ant-design/ant-design/issues/44754
|
|
[`${selectOverflowPrefixCls}-item-suffix`]: {
|
|
height: '100%',
|
|
},
|
|
|
|
[`${componentCls}-selection-search`]: {
|
|
display: 'inline-flex',
|
|
position: 'relative',
|
|
maxWidth: '100%',
|
|
marginInlineStart: token.calc(token.inputPaddingHorizontalBase).sub(selectItemDist).equal(),
|
|
|
|
[`
|
|
&-input,
|
|
&-mirror
|
|
`]: {
|
|
height: selectItemHeight,
|
|
fontFamily: token.fontFamily,
|
|
lineHeight: unit(selectItemHeight),
|
|
transition: `all ${token.motionDurationSlow}`,
|
|
},
|
|
|
|
'&-input': {
|
|
width: '100%',
|
|
minWidth: 4.1, // fix search cursor missing
|
|
},
|
|
|
|
'&-mirror': {
|
|
position: 'absolute',
|
|
top: 0,
|
|
insetInlineStart: 0,
|
|
insetInlineEnd: 'auto',
|
|
zIndex: 999,
|
|
whiteSpace: 'pre', // fix whitespace wrapping caused width calculation bug
|
|
visibility: 'hidden',
|
|
},
|
|
},
|
|
|
|
// ======================= Placeholder =======================
|
|
[`${componentCls}-selection-placeholder`]: {
|
|
position: 'absolute',
|
|
top: '50%',
|
|
insetInlineStart: token.inputPaddingHorizontalBase,
|
|
insetInlineEnd: token.inputPaddingHorizontalBase,
|
|
transform: 'translateY(-50%)',
|
|
transition: `all ${token.motionDurationSlow}`,
|
|
},
|
|
},
|
|
};
|
|
};
|
|
|
|
function genSizeStyle(token: SelectToken, suffix?: string): CSSInterpolation {
|
|
const { componentCls } = token;
|
|
|
|
const suffixCls = suffix ? `${componentCls}-${suffix}` : '';
|
|
|
|
const rawStyle: CSSObject = {
|
|
[`${componentCls}-multiple${suffixCls}`]: {
|
|
fontSize: token.fontSize,
|
|
|
|
// ========================= Selector =========================
|
|
[`${componentCls}-selector`]: {
|
|
[`${componentCls}-show-search&`]: {
|
|
cursor: 'text',
|
|
},
|
|
},
|
|
|
|
[`
|
|
&${componentCls}-show-arrow ${componentCls}-selector,
|
|
&${componentCls}-allow-clear ${componentCls}-selector
|
|
`]: {
|
|
paddingInlineEnd: token
|
|
.calc(token.fontSizeIcon)
|
|
.add(token.controlPaddingHorizontal)
|
|
.equal(),
|
|
},
|
|
},
|
|
};
|
|
|
|
return [genSelectionStyle(token, suffix), rawStyle];
|
|
}
|
|
|
|
const genMultipleStyle = (token: SelectToken): CSSInterpolation => {
|
|
const { componentCls } = token;
|
|
|
|
const smallToken = mergeToken<SelectToken>(token, {
|
|
selectHeight: token.controlHeightSM,
|
|
multipleSelectItemHeight: token.controlHeightXS,
|
|
borderRadius: token.borderRadiusSM,
|
|
borderRadiusSM: token.borderRadiusXS,
|
|
});
|
|
|
|
const largeToken = mergeToken<SelectToken>(token, {
|
|
fontSize: token.fontSizeLG,
|
|
selectHeight: token.controlHeightLG,
|
|
multipleSelectItemHeight: token.multipleItemHeightLG,
|
|
borderRadius: token.borderRadiusLG,
|
|
borderRadiusSM: token.borderRadius,
|
|
});
|
|
|
|
return [
|
|
genSizeStyle(token),
|
|
// ======================== Small ========================
|
|
genSizeStyle(smallToken, 'sm'),
|
|
|
|
// Padding
|
|
{
|
|
[`${componentCls}-multiple${componentCls}-sm`]: {
|
|
[`${componentCls}-selection-placeholder`]: {
|
|
insetInline: token.calc(token.controlPaddingHorizontalSM).sub(token.lineWidth).equal(),
|
|
},
|
|
|
|
// https://github.com/ant-design/ant-design/issues/29559
|
|
[`${componentCls}-selection-search`]: {
|
|
marginInlineStart: 2, // Magic Number
|
|
},
|
|
},
|
|
},
|
|
|
|
// ======================== Large ========================
|
|
genSizeStyle(largeToken, 'lg'),
|
|
];
|
|
};
|
|
|
|
export default genMultipleStyle;
|