1
This commit is contained in:
+4
@@ -0,0 +1,4 @@
|
||||
import type { GenerateStyle } from '../../theme/internal';
|
||||
import type { SelectToken } from './token';
|
||||
declare const genSingleStyle: GenerateStyle<SelectToken>;
|
||||
export default genSingleStyle;
|
||||
+146
@@ -0,0 +1,146 @@
|
||||
import { resetComponent, textEllipsis } from '../../style';
|
||||
import { initMoveMotion, initSlideMotion, slideDownIn, slideDownOut, slideUpIn, slideUpOut } from '../../style/motion';
|
||||
const genItemStyle = token => {
|
||||
const {
|
||||
optionHeight,
|
||||
optionFontSize,
|
||||
optionLineHeight,
|
||||
optionPadding
|
||||
} = token;
|
||||
return {
|
||||
position: 'relative',
|
||||
display: 'block',
|
||||
minHeight: optionHeight,
|
||||
padding: optionPadding,
|
||||
color: token.colorText,
|
||||
fontWeight: 'normal',
|
||||
fontSize: optionFontSize,
|
||||
lineHeight: optionLineHeight,
|
||||
boxSizing: 'border-box'
|
||||
};
|
||||
};
|
||||
const genSingleStyle = token => {
|
||||
const {
|
||||
antCls,
|
||||
componentCls
|
||||
} = token;
|
||||
const selectItemCls = `${componentCls}-item`;
|
||||
const slideUpEnterActive = `&${antCls}-slide-up-enter${antCls}-slide-up-enter-active`;
|
||||
const slideUpAppearActive = `&${antCls}-slide-up-appear${antCls}-slide-up-appear-active`;
|
||||
const slideUpLeaveActive = `&${antCls}-slide-up-leave${antCls}-slide-up-leave-active`;
|
||||
const dropdownPlacementCls = `${componentCls}-dropdown-placement-`;
|
||||
const selectedItemCls = `${selectItemCls}-option-selected`;
|
||||
return [{
|
||||
[`${componentCls}-dropdown`]: {
|
||||
// ========================== Popup ==========================
|
||||
...resetComponent(token),
|
||||
position: 'absolute',
|
||||
top: -9999,
|
||||
zIndex: token.zIndexPopup,
|
||||
boxSizing: 'border-box',
|
||||
padding: token.paddingXXS,
|
||||
overflow: 'hidden',
|
||||
fontSize: token.fontSize,
|
||||
// Fix select render lag of long text in chrome
|
||||
// https://github.com/ant-design/ant-design/issues/11456
|
||||
// https://github.com/ant-design/ant-design/issues/11843
|
||||
fontVariant: 'initial',
|
||||
backgroundColor: token.colorBgElevated,
|
||||
borderRadius: token.borderRadiusLG,
|
||||
outline: 'none',
|
||||
boxShadow: token.boxShadowSecondary,
|
||||
[`
|
||||
${slideUpEnterActive}${dropdownPlacementCls}bottomLeft,
|
||||
${slideUpAppearActive}${dropdownPlacementCls}bottomLeft
|
||||
`]: {
|
||||
animationName: slideUpIn
|
||||
},
|
||||
[`
|
||||
${slideUpEnterActive}${dropdownPlacementCls}topLeft,
|
||||
${slideUpAppearActive}${dropdownPlacementCls}topLeft,
|
||||
${slideUpEnterActive}${dropdownPlacementCls}topRight,
|
||||
${slideUpAppearActive}${dropdownPlacementCls}topRight
|
||||
`]: {
|
||||
animationName: slideDownIn
|
||||
},
|
||||
[`${slideUpLeaveActive}${dropdownPlacementCls}bottomLeft`]: {
|
||||
animationName: slideUpOut
|
||||
},
|
||||
[`
|
||||
${slideUpLeaveActive}${dropdownPlacementCls}topLeft,
|
||||
${slideUpLeaveActive}${dropdownPlacementCls}topRight
|
||||
`]: {
|
||||
animationName: slideDownOut
|
||||
},
|
||||
'&-hidden': {
|
||||
display: 'none'
|
||||
},
|
||||
[selectItemCls]: {
|
||||
...genItemStyle(token),
|
||||
cursor: 'pointer',
|
||||
transition: `background-color ${token.motionDurationSlow} ease`,
|
||||
borderRadius: token.borderRadiusSM,
|
||||
// =========== Group ============
|
||||
'&-group': {
|
||||
color: token.colorTextDescription,
|
||||
fontSize: token.fontSizeSM,
|
||||
cursor: 'default'
|
||||
},
|
||||
// =========== Option ===========
|
||||
'&-option': {
|
||||
display: 'flex',
|
||||
'&-content': {
|
||||
flex: 'auto',
|
||||
...textEllipsis
|
||||
},
|
||||
'&-state': {
|
||||
flex: 'none',
|
||||
display: 'flex',
|
||||
alignItems: 'center'
|
||||
},
|
||||
[`&-active:not(${selectItemCls}-option-disabled)`]: {
|
||||
backgroundColor: token.optionActiveBg
|
||||
},
|
||||
[`&-selected:not(${selectItemCls}-option-disabled)`]: {
|
||||
color: token.optionSelectedColor,
|
||||
fontWeight: token.optionSelectedFontWeight,
|
||||
backgroundColor: token.optionSelectedBg,
|
||||
[`${selectItemCls}-option-state`]: {
|
||||
color: token.colorPrimary
|
||||
}
|
||||
},
|
||||
'&-disabled': {
|
||||
[`&${selectItemCls}-option-selected`]: {
|
||||
backgroundColor: token.colorBgContainerDisabled
|
||||
},
|
||||
color: token.colorTextDisabled,
|
||||
cursor: 'not-allowed'
|
||||
},
|
||||
'&-grouped': {
|
||||
paddingInlineStart: token.calc(token.controlPaddingHorizontal).mul(2).equal()
|
||||
}
|
||||
},
|
||||
'&-empty': {
|
||||
...genItemStyle(token),
|
||||
color: token.colorTextDisabled
|
||||
}
|
||||
},
|
||||
// https://github.com/ant-design/ant-design/pull/46646
|
||||
[`${selectedItemCls}:has(+ ${selectedItemCls})`]: {
|
||||
borderEndStartRadius: 0,
|
||||
borderEndEndRadius: 0,
|
||||
[`& + ${selectedItemCls}`]: {
|
||||
borderStartStartRadius: 0,
|
||||
borderStartEndRadius: 0
|
||||
}
|
||||
},
|
||||
// =========================== RTL ===========================
|
||||
'&-rtl': {
|
||||
direction: 'rtl'
|
||||
}
|
||||
}
|
||||
},
|
||||
// Follow code may reuse in other components
|
||||
initSlideMotion(token, 'slide-up'), initSlideMotion(token, 'slide-down'), initMoveMotion(token, 'move-up'), initMoveMotion(token, 'move-down')];
|
||||
};
|
||||
export default genSingleStyle;
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
import type { ComponentToken } from './token';
|
||||
export type { ComponentToken };
|
||||
declare const _default: (prefixCls: string, rootCls?: string) => readonly [string, string];
|
||||
export default _default;
|
||||
+139
@@ -0,0 +1,139 @@
|
||||
import { resetComponent, textEllipsis } from '../../style';
|
||||
import { genCompactItemStyle } from '../../style/compact-item';
|
||||
import { genStyleHooks, mergeToken } from '../../theme/internal';
|
||||
import genDropdownStyle from './dropdown';
|
||||
import genSelectInputStyle from './select-input';
|
||||
import { prepareComponentToken } from './token';
|
||||
// =============================== Base ===============================
|
||||
const genBaseStyle = token => {
|
||||
const {
|
||||
antCls,
|
||||
componentCls,
|
||||
motionDurationMid,
|
||||
inputPaddingHorizontalBase
|
||||
} = token;
|
||||
const hoverShowClearStyle = {
|
||||
[`${componentCls}-clear`]: {
|
||||
opacity: 1,
|
||||
background: token.colorBgBase,
|
||||
borderRadius: '50%'
|
||||
}
|
||||
};
|
||||
return {
|
||||
[componentCls]: {
|
||||
...resetComponent(token),
|
||||
// ======================== Selection ========================
|
||||
[`${componentCls}-selection-item`]: {
|
||||
flex: 1,
|
||||
fontWeight: 'normal',
|
||||
position: 'relative',
|
||||
userSelect: 'none',
|
||||
...textEllipsis,
|
||||
// https://github.com/ant-design/ant-design/issues/40421
|
||||
[`> ${antCls}-typography`]: {
|
||||
display: 'inline'
|
||||
}
|
||||
},
|
||||
// ========================= Prefix ==========================
|
||||
[`${componentCls}-prefix`]: {
|
||||
flex: 'none',
|
||||
marginInlineEnd: token.selectAffixPadding
|
||||
},
|
||||
// ========================== Clear ==========================
|
||||
[`${componentCls}-clear`]: {
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
insetInlineStart: 'auto',
|
||||
insetInlineEnd: inputPaddingHorizontalBase,
|
||||
zIndex: 1,
|
||||
display: 'inline-block',
|
||||
width: token.fontSizeIcon,
|
||||
height: token.fontSizeIcon,
|
||||
marginTop: token.calc(token.fontSizeIcon).mul(-1).div(2).equal(),
|
||||
color: token.colorTextQuaternary,
|
||||
fontSize: token.fontSizeIcon,
|
||||
fontStyle: 'normal',
|
||||
lineHeight: 1,
|
||||
textAlign: 'center',
|
||||
textTransform: 'none',
|
||||
cursor: 'pointer',
|
||||
opacity: 0,
|
||||
transition: ['color', 'opacity'].map(prop => `${prop} ${motionDurationMid} ease`).join(', '),
|
||||
textRendering: 'auto',
|
||||
// https://github.com/ant-design/ant-design/issues/54205
|
||||
// Force GPU compositing on Safari to prevent flickering on opacity/transform transitions
|
||||
transform: 'translateZ(0)',
|
||||
'&:before': {
|
||||
display: 'block'
|
||||
},
|
||||
'&:hover': {
|
||||
color: token.colorIcon
|
||||
}
|
||||
},
|
||||
'@media(hover:none)': hoverShowClearStyle,
|
||||
'&:hover': hoverShowClearStyle
|
||||
},
|
||||
// ========================= Feedback ==========================
|
||||
[`${componentCls}-status`]: {
|
||||
'&-error, &-warning, &-success, &-validating': {
|
||||
[`&${componentCls}-has-feedback`]: {
|
||||
[`${componentCls}-clear`]: {
|
||||
insetInlineEnd: token.calc(inputPaddingHorizontalBase).add(token.fontSize).add(token.paddingXS).equal()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
// ============================== Styles ==============================
|
||||
const genSelectStyle = token => {
|
||||
const {
|
||||
componentCls
|
||||
} = token;
|
||||
return [{
|
||||
[componentCls]: {
|
||||
// ==================== In Form ====================
|
||||
[`&${componentCls}-in-form-item`]: {
|
||||
width: '100%'
|
||||
}
|
||||
}
|
||||
},
|
||||
// =====================================================
|
||||
// == LTR ==
|
||||
// =====================================================
|
||||
// Base
|
||||
genBaseStyle(token),
|
||||
// Dropdown
|
||||
genDropdownStyle(token),
|
||||
// =====================================================
|
||||
// == RTL ==
|
||||
// =====================================================
|
||||
{
|
||||
[`${componentCls}-rtl`]: {
|
||||
direction: 'rtl'
|
||||
}
|
||||
},
|
||||
// =====================================================
|
||||
// == Space Compact ==
|
||||
// =====================================================
|
||||
genCompactItemStyle(token, {
|
||||
focusElCls: `${componentCls}-focused`
|
||||
})];
|
||||
};
|
||||
// ============================== Export ==============================
|
||||
export default genStyleHooks('Select', (token, {
|
||||
rootPrefixCls
|
||||
}) => {
|
||||
const selectToken = mergeToken(token, {
|
||||
rootPrefixCls,
|
||||
inputPaddingHorizontalBase: token.calc(token.paddingSM).sub(token.lineWidth).equal(),
|
||||
multipleSelectItemHeight: token.multipleItemHeight,
|
||||
selectHeight: token.controlHeight
|
||||
});
|
||||
return [genSelectStyle(selectToken), genSelectInputStyle(selectToken)];
|
||||
}, prepareComponentToken, {
|
||||
unitless: {
|
||||
optionLineHeight: true,
|
||||
optionSelectedFontWeight: true
|
||||
}
|
||||
});
|
||||
+5
@@ -0,0 +1,5 @@
|
||||
import type { CSSObject } from '@ant-design/cssinjs';
|
||||
import type { GenerateStyle } from '../../theme/interface';
|
||||
import type { SelectToken } from './token';
|
||||
declare const genSelectInputCustomizeStyle: GenerateStyle<SelectToken, CSSObject>;
|
||||
export default genSelectInputCustomizeStyle;
|
||||
+24
@@ -0,0 +1,24 @@
|
||||
const genSelectInputCustomizeStyle = token => {
|
||||
const {
|
||||
componentCls
|
||||
} = token;
|
||||
return {
|
||||
[`&${componentCls}-customize`]: {
|
||||
border: 0,
|
||||
padding: 0,
|
||||
fontSize: 'inherit',
|
||||
lineHeight: 'inherit',
|
||||
[`${componentCls}-placeholder`]: {
|
||||
display: 'none'
|
||||
},
|
||||
[`${componentCls}-content`]: {
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
'&-value': {
|
||||
display: 'none'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
export default genSelectInputCustomizeStyle;
|
||||
+5
@@ -0,0 +1,5 @@
|
||||
import type { CSSObject } from '@ant-design/cssinjs';
|
||||
import type { GenerateStyle } from '../../theme/interface';
|
||||
import type { SelectToken } from './token';
|
||||
declare const genSelectInputMultipleStyle: GenerateStyle<SelectToken, CSSObject>;
|
||||
export default genSelectInputMultipleStyle;
|
||||
+137
@@ -0,0 +1,137 @@
|
||||
import { resetIcon, textEllipsis } from '../../style';
|
||||
import { genCssVar } from '../../theme/util/genStyleUtils';
|
||||
const FIXED_INPUT_MIN_WIDTH = 4;
|
||||
const genSelectInputMultipleStyle = token => {
|
||||
const {
|
||||
componentCls,
|
||||
calc,
|
||||
iconCls,
|
||||
paddingXS,
|
||||
paddingXXS,
|
||||
INTERNAL_FIXED_ITEM_MARGIN,
|
||||
lineWidth,
|
||||
colorIcon,
|
||||
colorIconHover,
|
||||
inputPaddingHorizontalBase,
|
||||
antCls
|
||||
} = token;
|
||||
const [varName, varRef] = genCssVar(antCls, 'select');
|
||||
return {
|
||||
'&-multiple': {
|
||||
[varName('multi-item-background')]: token.multipleItemBg,
|
||||
[varName('multi-item-border-color')]: 'transparent',
|
||||
[varName('multi-item-border-radius')]: token.borderRadiusSM,
|
||||
[varName('multi-item-height')]: token.multipleItemHeight,
|
||||
[varName('multi-padding-base')]: `calc((${varRef('height')} - ${varRef('multi-item-height')}) / 2)`,
|
||||
[varName('multi-padding-vertical')]: `calc(${varRef('multi-padding-base')} - ${INTERNAL_FIXED_ITEM_MARGIN} - ${lineWidth})`,
|
||||
[varName('multi-item-padding-horizontal')]: `calc(${inputPaddingHorizontalBase} - ${varRef('multi-padding-vertical')} - ${lineWidth} * 2)`,
|
||||
// ========================================================
|
||||
// == Base ==
|
||||
// ========================================================
|
||||
// ========================= Root =========================
|
||||
paddingBlock: varRef('multi-padding-vertical'),
|
||||
paddingInlineStart: `calc(${varRef('multi-padding-base')} - ${lineWidth})`,
|
||||
// ======================== Prefix ========================
|
||||
[`${componentCls}-prefix`]: {
|
||||
marginInlineStart: varRef('multi-item-padding-horizontal')
|
||||
},
|
||||
[`${componentCls}-prefix + ${componentCls}-content`]: {
|
||||
[`${componentCls}-placeholder`]: {
|
||||
insetInlineStart: 0
|
||||
},
|
||||
[`${componentCls}-content-item${componentCls}-content-item-suffix`]: {
|
||||
marginInlineStart: 0
|
||||
}
|
||||
},
|
||||
// ===================== Placeholder ======================
|
||||
[`${componentCls}-placeholder`]: {
|
||||
position: 'absolute',
|
||||
lineHeight: varRef('line-height'),
|
||||
insetInlineStart: varRef('multi-item-padding-horizontal'),
|
||||
width: `calc(100% - ${varRef('multi-item-padding-horizontal')})`,
|
||||
top: '50%',
|
||||
transform: 'translateY(-50%)'
|
||||
},
|
||||
// ======================= Content ========================
|
||||
[`${componentCls}-content`]: {
|
||||
flexWrap: 'wrap',
|
||||
alignItems: 'center',
|
||||
lineHeight: 1,
|
||||
'&-item-prefix': {
|
||||
height: varRef('font-size')
|
||||
},
|
||||
'&-item': {
|
||||
lineHeight: 1,
|
||||
maxWidth: `calc(100% - ${FIXED_INPUT_MIN_WIDTH}px)`
|
||||
},
|
||||
[`${componentCls}-content-item-prefix + ${componentCls}-content-item-suffix,
|
||||
${componentCls}-content-item-suffix:first-child`]: {
|
||||
marginInlineStart: varRef('multi-item-padding-horizontal')
|
||||
},
|
||||
[`${componentCls}-selection-item`]: {
|
||||
lineHeight: `calc(${varRef('multi-item-height')} - ${lineWidth} * 2)`,
|
||||
border: `${lineWidth} solid ${varRef('multi-item-border-color')}`,
|
||||
display: 'flex',
|
||||
marginBlock: INTERNAL_FIXED_ITEM_MARGIN,
|
||||
marginInlineEnd: calc(INTERNAL_FIXED_ITEM_MARGIN).mul(2).equal(),
|
||||
background: varRef('multi-item-background'),
|
||||
borderRadius: varRef('multi-item-border-radius'),
|
||||
paddingInlineStart: paddingXS,
|
||||
paddingInlineEnd: paddingXXS,
|
||||
transition: ['height', 'line-height', 'padding'].map(key => `${key} ${token.motionDurationSlow}`).join(','),
|
||||
// >>> Content
|
||||
'&-content': {
|
||||
...textEllipsis,
|
||||
marginInlineEnd: paddingXXS
|
||||
},
|
||||
// >>> Remove
|
||||
'&-remove': {
|
||||
...resetIcon(),
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
color: colorIcon,
|
||||
fontWeight: 'bold',
|
||||
fontSize: 10,
|
||||
lineHeight: 'inherit',
|
||||
cursor: 'pointer',
|
||||
[`> ${iconCls}`]: {
|
||||
verticalAlign: '-0.2em'
|
||||
},
|
||||
'&:hover': {
|
||||
color: colorIconHover
|
||||
}
|
||||
}
|
||||
},
|
||||
[`${componentCls}-input`]: {
|
||||
lineHeight: calc(INTERNAL_FIXED_ITEM_MARGIN).mul(2).add(varRef('multi-item-height')).equal(),
|
||||
width: `calc(var(--select-input-width, 0) * 1px)`,
|
||||
minWidth: FIXED_INPUT_MIN_WIDTH,
|
||||
maxWidth: '100%',
|
||||
transition: `line-height ${token.motionDurationSlow}`
|
||||
}
|
||||
},
|
||||
// ========================================================
|
||||
// == Size ==
|
||||
// ========================================================
|
||||
[`&${componentCls}-sm`]: {
|
||||
[varName('multi-item-height')]: token.multipleItemHeightSM,
|
||||
[varName('multi-item-border-radius')]: token.borderRadiusXS
|
||||
},
|
||||
[`&${componentCls}-lg`]: {
|
||||
[varName('multi-item-height')]: token.multipleItemHeightLG,
|
||||
[varName('multi-item-border-radius')]: token.borderRadius
|
||||
},
|
||||
// ========================================================
|
||||
// == Variants ==
|
||||
// ========================================================
|
||||
[`&${componentCls}-filled`]: {
|
||||
[varName('multi-item-border-color')]: token.colorSplit,
|
||||
[varName('multi-item-background')]: token.colorBgContainer,
|
||||
[`&${componentCls}-disabled`]: {
|
||||
[varName('multi-item-border-color')]: 'transparent'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
export default genSelectInputMultipleStyle;
|
||||
+5
@@ -0,0 +1,5 @@
|
||||
import type { CSSObject } from '@ant-design/cssinjs';
|
||||
import type { GenerateStyle } from '../../theme/interface';
|
||||
import type { SelectToken } from './token';
|
||||
declare const genSelectInputStyle: GenerateStyle<SelectToken, CSSObject>;
|
||||
export default genSelectInputStyle;
|
||||
+345
@@ -0,0 +1,345 @@
|
||||
import { unit } from '@ant-design/cssinjs';
|
||||
import { resetComponent, textEllipsis } from '../../style';
|
||||
import { genCssVar } from '../../theme/util/genStyleUtils';
|
||||
import genSelectInputCustomizeStyle from './select-input-customize';
|
||||
import genSelectInputMultipleStyle from './select-input-multiple';
|
||||
/** Set CSS variables and hover/focus styles for a Select input based on provided colors. */
|
||||
const genSelectInputVariableStyle = (token, colors) => {
|
||||
const {
|
||||
componentCls,
|
||||
antCls
|
||||
} = token;
|
||||
const [varName] = genCssVar(antCls, 'select');
|
||||
const {
|
||||
border,
|
||||
borderHover,
|
||||
borderActive,
|
||||
borderOutline
|
||||
} = colors;
|
||||
const baseBG = colors.background || token.selectorBg || token.colorBgContainer;
|
||||
return {
|
||||
[varName('border-color')]: border,
|
||||
[varName('background-color')]: baseBG,
|
||||
[varName('color')]: colors.color || token.colorText,
|
||||
[`&:not(${componentCls}-disabled)`]: {
|
||||
'&:hover': {
|
||||
[varName('border-color')]: borderHover,
|
||||
[varName('background-color')]: colors.backgroundHover || baseBG
|
||||
},
|
||||
[`&${componentCls}-focused`]: {
|
||||
[varName('border-color')]: borderActive,
|
||||
[varName('background-color')]: colors.backgroundActive || baseBG,
|
||||
boxShadow: `0 0 0 ${unit(token.controlOutlineWidth)} ${borderOutline}`
|
||||
}
|
||||
},
|
||||
[`&${componentCls}-disabled`]: {
|
||||
[varName('border-color')]: colors.borderDisabled || colors.border,
|
||||
[varName('background-color')]: colors.backgroundDisabled || colors.background
|
||||
}
|
||||
};
|
||||
};
|
||||
/** Generate variant-scoped variable styles and status overrides for a Select input. */
|
||||
const genSelectInputVariantStyle = (token, variant, colors, errorColors = {}, warningColors = {}, patchStyle) => {
|
||||
const {
|
||||
componentCls
|
||||
} = token;
|
||||
return {
|
||||
[`&${componentCls}-${variant}`]: [genSelectInputVariableStyle(token, colors), {
|
||||
[`&${componentCls}-status-error`]: genSelectInputVariableStyle(token, {
|
||||
...colors,
|
||||
color: errorColors.color || token.colorError,
|
||||
...errorColors
|
||||
}),
|
||||
[`&${componentCls}-status-warning`]: genSelectInputVariableStyle(token, {
|
||||
...colors,
|
||||
color: warningColors.color || token.colorWarning,
|
||||
...warningColors
|
||||
})
|
||||
}, patchStyle]
|
||||
};
|
||||
};
|
||||
const genSelectInputStyle = token => {
|
||||
const {
|
||||
componentCls,
|
||||
fontHeight,
|
||||
controlHeight,
|
||||
iconCls,
|
||||
antCls,
|
||||
calc
|
||||
} = token;
|
||||
const [varName, varRef] = genCssVar(antCls, 'select');
|
||||
return {
|
||||
[componentCls]: [{
|
||||
// Border
|
||||
[varName('border-radius')]: token.borderRadius,
|
||||
[varName('border-color')]: '#000',
|
||||
[varName('border-size')]: token.lineWidth,
|
||||
// Background
|
||||
[varName('background-color')]: token.colorBgContainer,
|
||||
// Font
|
||||
[varName('font-size')]: token.fontSize,
|
||||
[varName('line-height')]: token.lineHeight,
|
||||
[varName('font-height')]: fontHeight,
|
||||
[varName('color')]: token.colorText,
|
||||
// Size
|
||||
[varName('height')]: controlHeight,
|
||||
[varName('padding-horizontal')]: calc(token.paddingSM).sub(token.lineWidth).equal(),
|
||||
[varName('padding-vertical')]: `calc((${varRef('height')} - ${varRef('font-height')}) / 2 - ${varRef('border-size')})`,
|
||||
// ==========================================================
|
||||
// == Base ==
|
||||
// ==========================================================
|
||||
...resetComponent(token, true),
|
||||
display: 'inline-flex',
|
||||
// gap: calc(token.paddingXXS).mul(1.5).equal(),
|
||||
flexWrap: 'nowrap',
|
||||
position: 'relative',
|
||||
transition: `all ${token.motionDurationSlow}`,
|
||||
alignItems: 'flex-start',
|
||||
outline: 0,
|
||||
cursor: 'pointer',
|
||||
// Border
|
||||
borderRadius: varRef('border-radius'),
|
||||
borderWidth: varRef('border-size'),
|
||||
borderStyle: token.lineType,
|
||||
borderColor: varRef('border-color'),
|
||||
// Background
|
||||
background: varRef('background-color'),
|
||||
// Font
|
||||
fontSize: varRef('font-size'),
|
||||
lineHeight: varRef('line-height'),
|
||||
color: varRef('color'),
|
||||
// Padding
|
||||
paddingInline: varRef('padding-horizontal'),
|
||||
paddingBlock: varRef('padding-vertical'),
|
||||
// ========================= Prefix =========================
|
||||
[`${componentCls}-prefix`]: {
|
||||
flex: 'none',
|
||||
lineHeight: 1
|
||||
},
|
||||
// ====================== Placeholder =======================
|
||||
[`${componentCls}-placeholder`]: {
|
||||
...textEllipsis,
|
||||
color: token.colorTextPlaceholder,
|
||||
pointerEvents: 'none',
|
||||
zIndex: 1
|
||||
},
|
||||
// ======================== Content =========================
|
||||
[`${componentCls}-content`]: {
|
||||
flex: 'auto',
|
||||
minWidth: 0,
|
||||
position: 'relative',
|
||||
display: 'flex',
|
||||
marginInlineEnd: calc(token.paddingXXS).mul(1.5).equal(),
|
||||
'&:before': {
|
||||
content: '"\\a0"',
|
||||
width: 0,
|
||||
overflow: 'hidden'
|
||||
},
|
||||
// >>> Value
|
||||
'&-value': {
|
||||
visibility: 'inherit'
|
||||
},
|
||||
// >>> Input: should only take effect for not customize mode
|
||||
// input element with readOnly use cursor pointer
|
||||
'input[readonly]': {
|
||||
cursor: 'inherit',
|
||||
caretColor: 'transparent'
|
||||
}
|
||||
},
|
||||
// ========================= Suffix =========================
|
||||
[`${componentCls}-suffix`]: {
|
||||
flex: 'none',
|
||||
color: token.colorTextQuaternary,
|
||||
fontSize: token.fontSizeIcon,
|
||||
lineHeight: 1,
|
||||
'> :not(:last-child)': {
|
||||
marginInlineEnd: token.marginXS
|
||||
}
|
||||
},
|
||||
[`${componentCls}-prefix, ${componentCls}-suffix`]: {
|
||||
alignSelf: 'center',
|
||||
[iconCls]: {
|
||||
verticalAlign: 'top'
|
||||
}
|
||||
},
|
||||
// ==========================================================
|
||||
// == Disabled ==
|
||||
// ==========================================================
|
||||
'&-disabled': {
|
||||
background: token.colorBgContainerDisabled,
|
||||
color: token.colorTextDisabled,
|
||||
cursor: 'not-allowed',
|
||||
input: {
|
||||
cursor: 'not-allowed'
|
||||
}
|
||||
},
|
||||
// ==========================================================
|
||||
// == Size ==
|
||||
// ==========================================================
|
||||
'&-sm': {
|
||||
[varName('height')]: token.controlHeightSM,
|
||||
[varName('padding-horizontal')]: calc(token.paddingXS).sub(token.lineWidth).equal(),
|
||||
[varName('border-radius')]: token.borderRadiusSM,
|
||||
[`${componentCls}-clear`]: {
|
||||
insetInlineEnd: varRef('padding-horizontal')
|
||||
}
|
||||
},
|
||||
'&-lg': {
|
||||
[varName('height')]: token.controlHeightLG,
|
||||
[varName('font-size')]: token.fontSizeLG,
|
||||
[varName('line-height')]: token.lineHeightLG,
|
||||
[varName('font-height')]: token.fontHeightLG,
|
||||
[varName('border-radius')]: token.borderRadiusLG
|
||||
}
|
||||
},
|
||||
// ============================================================
|
||||
// == Input ==
|
||||
// ============================================================
|
||||
{
|
||||
[`&:not(${componentCls}-customize)`]: {
|
||||
[`${componentCls}-input`]: {
|
||||
outline: 'none',
|
||||
background: 'transparent',
|
||||
appearance: 'none',
|
||||
border: 0,
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
color: varRef('color'),
|
||||
'&::-webkit-search-cancel-button': {
|
||||
display: 'none',
|
||||
appearance: 'none'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
// ============================================================
|
||||
// == Single ==
|
||||
// ============================================================
|
||||
{
|
||||
[`&-single:not(${componentCls}-customize)`]: {
|
||||
[`${componentCls}-input`]: {
|
||||
position: 'absolute',
|
||||
inset: 0,
|
||||
lineHeight: `calc(${varRef('font-height')} + ${varRef('padding-vertical')} * 2)`
|
||||
},
|
||||
// Content center align
|
||||
[`${componentCls}-content`]: {
|
||||
...textEllipsis,
|
||||
alignSelf: 'center',
|
||||
'&-has-value': {
|
||||
display: 'block',
|
||||
'&:before': {
|
||||
display: 'none'
|
||||
}
|
||||
},
|
||||
'&-has-search-value': {
|
||||
color: 'transparent'
|
||||
},
|
||||
// >>> Value
|
||||
'&-value': {
|
||||
transition: `all ${token.motionDurationMid} ${token.motionEaseInOut}`,
|
||||
zIndex: 1
|
||||
}
|
||||
},
|
||||
[`&${componentCls}-open ${componentCls}-content`]: {
|
||||
color: token.colorTextPlaceholder,
|
||||
'&-has-search-value': {
|
||||
color: 'transparent'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
// ======================== Show Search =======================
|
||||
{
|
||||
[`&-show-search:not(${componentCls}-customize-input):not(${componentCls}-disabled)`]: {
|
||||
cursor: 'text'
|
||||
}
|
||||
},
|
||||
// ============================================================
|
||||
// == Multiple ==
|
||||
// ============================================================
|
||||
genSelectInputMultipleStyle(token),
|
||||
// ========================= Variant ==========================
|
||||
// >>> Outlined
|
||||
genSelectInputVariantStyle(token, 'outlined', {
|
||||
border: token.colorBorder,
|
||||
borderHover: token.hoverBorderColor,
|
||||
borderActive: token.activeBorderColor,
|
||||
borderOutline: token.activeOutlineColor,
|
||||
borderDisabled: token.colorBorderDisabled
|
||||
},
|
||||
// Error
|
||||
{
|
||||
border: token.colorError,
|
||||
borderHover: token.colorErrorHover,
|
||||
borderActive: token.colorError,
|
||||
borderOutline: token.colorErrorOutline
|
||||
},
|
||||
// Warning
|
||||
{
|
||||
border: token.colorWarning,
|
||||
borderHover: token.colorWarningHover,
|
||||
borderActive: token.colorWarning,
|
||||
borderOutline: token.colorWarningOutline
|
||||
}),
|
||||
// >>> Filled
|
||||
genSelectInputVariantStyle(token, 'filled', {
|
||||
border: 'transparent',
|
||||
borderHover: 'transparent',
|
||||
borderActive: token.activeBorderColor,
|
||||
borderOutline: 'transparent',
|
||||
borderDisabled: token.colorBorderDisabled,
|
||||
background: token.colorFillTertiary,
|
||||
backgroundHover: token.colorFillSecondary,
|
||||
backgroundActive: token.colorBgContainer
|
||||
},
|
||||
// Error
|
||||
{
|
||||
background: token.colorErrorBg,
|
||||
backgroundHover: token.colorErrorBgHover,
|
||||
borderActive: token.colorError
|
||||
},
|
||||
// Warning
|
||||
{
|
||||
background: token.colorWarningBg,
|
||||
backgroundHover: token.colorWarningBgHover,
|
||||
borderActive: token.colorWarning
|
||||
}),
|
||||
// >>> Borderless
|
||||
genSelectInputVariantStyle(token, 'borderless', {
|
||||
border: 'transparent',
|
||||
borderHover: 'transparent',
|
||||
borderActive: 'transparent',
|
||||
borderOutline: 'transparent',
|
||||
background: 'transparent'
|
||||
}),
|
||||
// Underlined
|
||||
genSelectInputVariantStyle(token, 'underlined', {
|
||||
border: token.colorBorder,
|
||||
borderHover: token.hoverBorderColor,
|
||||
borderActive: token.activeBorderColor,
|
||||
borderOutline: 'transparent'
|
||||
},
|
||||
// Error
|
||||
{
|
||||
border: token.colorError,
|
||||
borderHover: token.colorErrorHover,
|
||||
borderActive: token.colorError
|
||||
},
|
||||
// Warning
|
||||
{
|
||||
border: token.colorWarning,
|
||||
borderHover: token.colorWarningHover,
|
||||
borderActive: token.colorWarning
|
||||
}, {
|
||||
borderRadius: 0,
|
||||
borderTopColor: 'transparent',
|
||||
borderInlineColor: 'transparent'
|
||||
}),
|
||||
// ============================================================
|
||||
// == Custom ==
|
||||
// ============================================================
|
||||
genSelectInputCustomizeStyle(token)]
|
||||
};
|
||||
};
|
||||
export default genSelectInputStyle;
|
||||
+138
@@ -0,0 +1,138 @@
|
||||
import type { CSSProperties } from 'react';
|
||||
import type { FullToken, GetDefaultToken } from 'antd/es/theme/internal';
|
||||
export interface MultipleSelectorToken {
|
||||
/**
|
||||
* @desc 多选标签背景色
|
||||
* @descEN Background color of multiple tag
|
||||
*/
|
||||
multipleItemBg: string;
|
||||
/**
|
||||
* @desc 多选标签边框色
|
||||
* @descEN Border color of multiple tag
|
||||
*/
|
||||
multipleItemBorderColor: string;
|
||||
/**
|
||||
* @desc 多选标签高度
|
||||
* @descEN Height of multiple tag
|
||||
*/
|
||||
multipleItemHeight: number;
|
||||
/**
|
||||
* @desc 小号多选标签高度
|
||||
* @descEN Height of multiple tag with small size
|
||||
*/
|
||||
multipleItemHeightSM: number;
|
||||
/**
|
||||
* @desc 大号多选标签高度
|
||||
* @descEN Height of multiple tag with large size
|
||||
*/
|
||||
multipleItemHeightLG: number;
|
||||
/**
|
||||
* @desc 多选框禁用背景
|
||||
* @descEN Background color of multiple selector when disabled
|
||||
*/
|
||||
multipleSelectorBgDisabled: string;
|
||||
/**
|
||||
* @desc 多选标签禁用文本颜色
|
||||
* @descEN Text color of multiple tag when disabled
|
||||
*/
|
||||
multipleItemColorDisabled: string;
|
||||
/**
|
||||
* @desc 多选标签禁用边框色
|
||||
* @descEN Border color of multiple tag when disabled
|
||||
*/
|
||||
multipleItemBorderColorDisabled: string;
|
||||
}
|
||||
export interface ComponentToken extends MultipleSelectorToken {
|
||||
/**
|
||||
* @desc 下拉菜单 z-index
|
||||
* @descEN z-index of dropdown
|
||||
*/
|
||||
zIndexPopup: number;
|
||||
/**
|
||||
* @desc 选项选中时文本颜色
|
||||
* @descEN Text color when option is selected
|
||||
*/
|
||||
optionSelectedColor: string;
|
||||
/**
|
||||
* @desc 选项选中时文本字重
|
||||
* @descEN Font weight when option is selected
|
||||
*/
|
||||
optionSelectedFontWeight: CSSProperties['fontWeight'];
|
||||
/**
|
||||
* @desc 选项选中时背景色
|
||||
* @descEN Background color when option is selected
|
||||
*/
|
||||
optionSelectedBg: string;
|
||||
/**
|
||||
* @desc 选项激活态时背景色
|
||||
* @descEN Background color when option is active
|
||||
*/
|
||||
optionActiveBg: string;
|
||||
/**
|
||||
* @desc 选项内间距
|
||||
* @descEN Padding of option
|
||||
*/
|
||||
optionPadding: CSSProperties['padding'];
|
||||
/**
|
||||
* @desc 选项字体大小
|
||||
* @descEN Font size of option
|
||||
*/
|
||||
optionFontSize: number;
|
||||
/**
|
||||
* @desc 选项行高
|
||||
* @descEN Line height of option
|
||||
*/
|
||||
optionLineHeight: CSSProperties['lineHeight'];
|
||||
/**
|
||||
* @desc 选项高度
|
||||
* @descEN Height of option
|
||||
*/
|
||||
optionHeight: number;
|
||||
/**
|
||||
* @desc 选框背景色
|
||||
* @descEN Background color of selector
|
||||
*/
|
||||
selectorBg: string;
|
||||
/**
|
||||
* @desc 清空按钮背景色
|
||||
* @descEN Background color of clear button
|
||||
*/
|
||||
clearBg: string;
|
||||
/**
|
||||
* @desc 单选大号回填项高度
|
||||
* @descEN Height of single selected item with large size
|
||||
*/
|
||||
singleItemHeightLG: number;
|
||||
/**
|
||||
* @desc 箭头的行末内边距
|
||||
* @descEN Inline end padding of arrow
|
||||
*/
|
||||
showArrowPaddingInlineEnd: number;
|
||||
/**
|
||||
* @desc 悬浮态边框色
|
||||
* @descEN Hover border color
|
||||
*/
|
||||
hoverBorderColor: string;
|
||||
/**
|
||||
* @desc 激活态边框色
|
||||
* @descEN Active border color
|
||||
*/
|
||||
activeBorderColor: string;
|
||||
/**
|
||||
* @desc 激活态 outline 颜色
|
||||
* @descEN Active outline color
|
||||
*/
|
||||
activeOutlineColor: string;
|
||||
}
|
||||
export interface SelectorToken {
|
||||
selectAffixPadding: number | string;
|
||||
inputPaddingHorizontalBase: number | string;
|
||||
multipleSelectItemHeight: number;
|
||||
selectHeight: number;
|
||||
}
|
||||
export interface SelectToken extends FullToken<'Select'>, SelectorToken {
|
||||
rootPrefixCls: string;
|
||||
/** @private Used for internal calculation */
|
||||
INTERNAL_FIXED_ITEM_MARGIN: number;
|
||||
}
|
||||
export declare const prepareComponentToken: GetDefaultToken<'Select'>;
|
||||
+62
@@ -0,0 +1,62 @@
|
||||
export const prepareComponentToken = token => {
|
||||
const {
|
||||
fontSize,
|
||||
lineHeight,
|
||||
lineWidth,
|
||||
controlHeight,
|
||||
controlHeightSM,
|
||||
controlHeightLG,
|
||||
paddingXXS,
|
||||
controlPaddingHorizontal,
|
||||
zIndexPopupBase,
|
||||
colorText,
|
||||
fontWeightStrong,
|
||||
controlItemBgActive,
|
||||
controlItemBgHover,
|
||||
colorBgContainer,
|
||||
colorFillSecondary,
|
||||
colorBgContainerDisabled,
|
||||
colorTextDisabled,
|
||||
colorPrimaryHover,
|
||||
colorPrimary,
|
||||
controlOutline
|
||||
} = token;
|
||||
// Item height default use `controlHeight - 2 * paddingXXS`,
|
||||
// but some case `paddingXXS=0`.
|
||||
// Let's fallback it.
|
||||
const dblPaddingXXS = paddingXXS * 2;
|
||||
const dblLineWidth = lineWidth * 2;
|
||||
const multipleItemHeight = Math.min(controlHeight - dblPaddingXXS, controlHeight - dblLineWidth);
|
||||
const multipleItemHeightSM = Math.min(controlHeightSM - dblPaddingXXS, controlHeightSM - dblLineWidth);
|
||||
const multipleItemHeightLG = Math.min(controlHeightLG - dblPaddingXXS, controlHeightLG - dblLineWidth);
|
||||
// FIXED_ITEM_MARGIN is a hardcode calculation since calc not support rounding
|
||||
const INTERNAL_FIXED_ITEM_MARGIN = Math.floor(paddingXXS / 2);
|
||||
return {
|
||||
INTERNAL_FIXED_ITEM_MARGIN,
|
||||
zIndexPopup: zIndexPopupBase + 50,
|
||||
optionSelectedColor: colorText,
|
||||
optionSelectedFontWeight: fontWeightStrong,
|
||||
optionSelectedBg: controlItemBgActive,
|
||||
optionActiveBg: controlItemBgHover,
|
||||
optionPadding: `${(controlHeight - fontSize * lineHeight) / 2}px ${controlPaddingHorizontal}px`,
|
||||
optionFontSize: fontSize,
|
||||
optionLineHeight: lineHeight,
|
||||
optionHeight: controlHeight,
|
||||
selectorBg: colorBgContainer,
|
||||
clearBg: colorBgContainer,
|
||||
singleItemHeightLG: controlHeightLG,
|
||||
multipleItemBg: colorFillSecondary,
|
||||
multipleItemBorderColor: 'transparent',
|
||||
multipleItemHeight,
|
||||
multipleItemHeightSM,
|
||||
multipleItemHeightLG,
|
||||
multipleSelectorBgDisabled: colorBgContainerDisabled,
|
||||
multipleItemColorDisabled: colorTextDisabled,
|
||||
multipleItemBorderColorDisabled: 'transparent',
|
||||
showArrowPaddingInlineEnd: Math.ceil(token.fontSize * 1.25),
|
||||
hoverBorderColor: colorPrimaryHover,
|
||||
activeBorderColor: colorPrimary,
|
||||
activeOutlineColor: controlOutline,
|
||||
selectAffixPadding: paddingXXS
|
||||
};
|
||||
};
|
||||
Reference in New Issue
Block a user