1
This commit is contained in:
+352
@@ -0,0 +1,352 @@
|
||||
"use strict";
|
||||
|
||||
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.default = void 0;
|
||||
var _cssinjs = require("@ant-design/cssinjs");
|
||||
var _style = require("../../style");
|
||||
var _genStyleUtils = require("../../theme/util/genStyleUtils");
|
||||
var _selectInputCustomize = _interopRequireDefault(require("./select-input-customize"));
|
||||
var _selectInputMultiple = _interopRequireDefault(require("./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] = (0, _genStyleUtils.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 ${(0, _cssinjs.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] = (0, _genStyleUtils.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 ==
|
||||
// ==========================================================
|
||||
...(0, _style.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`]: {
|
||||
..._style.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`]: {
|
||||
..._style.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 ==
|
||||
// ============================================================
|
||||
(0, _selectInputMultiple.default)(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 ==
|
||||
// ============================================================
|
||||
(0, _selectInputCustomize.default)(token)]
|
||||
};
|
||||
};
|
||||
var _default = exports.default = genSelectInputStyle;
|
||||
Reference in New Issue
Block a user