antd
Version:
An enterprise-class UI design language and React components implementation
258 lines (257 loc) • 8.43 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.prepareComponentToken = exports.default = void 0;
var _cssinjs = require("@ant-design/cssinjs");
var _style = require("../../input/style");
var _variants = require("../../input/style/variants");
var _style2 = require("../../style");
var _internal = require("../../theme/internal");
var _genStyleUtils = require("../../theme/util/genStyleUtils");
// ============================= Mentions =============================
const genDropdownStyle = token => {
const {
componentCls,
fontSize,
paddingXXS,
colorBgElevated,
borderRadiusLG,
boxShadowSecondary,
itemPaddingVertical,
controlPaddingHorizontal,
colorText,
borderRadius,
lineHeight,
colorTextDisabled,
controlItemBgHover,
motionDurationSlow
} = token;
return {
[componentCls]: {
// ================== Dropdown ==================
'&-dropdown': {
// Ref select dropdown style
...(0, _style2.resetComponent)(token),
position: 'absolute',
top: -9999,
insetInlineStart: -9999,
zIndex: token.zIndexPopup,
boxSizing: 'border-box',
fontSize,
fontVariant: 'initial',
padding: paddingXXS,
backgroundColor: colorBgElevated,
borderRadius: borderRadiusLG,
outline: 'none',
boxShadow: boxShadowSecondary,
'&-hidden': {
display: 'none'
},
[`${componentCls}-dropdown-menu`]: {
maxHeight: token.dropdownHeight,
margin: 0,
paddingInlineStart: 0,
// Override default ul/ol
overflow: 'auto',
listStyle: 'none',
outline: 'none',
'&-item': {
..._style2.textEllipsis,
position: 'relative',
display: 'block',
minWidth: token.controlItemWidth,
padding: `${(0, _cssinjs.unit)(itemPaddingVertical)} ${(0, _cssinjs.unit)(controlPaddingHorizontal)}`,
color: colorText,
borderRadius,
fontWeight: 'normal',
lineHeight,
cursor: 'pointer',
transition: `background-color ${motionDurationSlow} ease`,
'&:hover': {
backgroundColor: controlItemBgHover
},
'&-disabled': {
color: colorTextDisabled,
cursor: 'not-allowed',
'&:hover': {
color: colorTextDisabled,
backgroundColor: controlItemBgHover,
cursor: 'not-allowed'
}
},
'&-selected': {
color: colorText,
fontWeight: token.fontWeightStrong,
backgroundColor: controlItemBgHover
},
'&-active': {
backgroundColor: controlItemBgHover
}
}
}
}
}
};
};
const genMentionsStyle = token => {
const {
componentCls,
colorText,
antCls,
colorTextDisabled,
calc
} = token;
const [varName, varRef] = (0, _genStyleUtils.genCssVar)(antCls, 'cmp-mentions');
return {
[componentCls]: [
// =========================== Common ===========================
(0, _style2.resetComponent)(token), (0, _style.genBasicInputStyle)(token, {
largeStyle: {
padding: 0
},
smallStyle: {
padding: 0
}
}),
// ========================== Variants ==========================
(0, _variants.genOutlinedStyle)(token), (0, _variants.genFilledStyle)(token), (0, _variants.genBorderlessStyle)(token), (0, _variants.genUnderlinedStyle)(token),
// ========================== Mentions ==========================
{
[varName('padding-inline')]: token.paddingInline,
[varName('padding-block')]: token.paddingBlock,
[varName('control-height')]: token.controlHeight,
display: 'flex',
padding: 0,
whiteSpace: 'pre-wrap',
// ========================= Textarea =========================
'> textarea': [(0, _style2.resetComponent)(token), (0, _style.genPlaceholderStyle)(token.colorTextPlaceholder), {
background: 'transparent',
border: 'none',
borderRadius: 'inherit',
outline: 'none',
flex: 'auto',
minWidth: 0,
resize: 'none',
'&:disabled': {
color: colorTextDisabled
}
}],
[`> textarea, ${componentCls}-measure`]: {
color: colorText,
boxSizing: 'border-box',
margin: 0,
minHeight: calc(varRef('control-height')).sub(calc(token.lineWidth).mul(2).equal()).equal(),
paddingInline: varRef('padding-inline'),
paddingBlock: varRef('padding-block'),
overflow: 'inherit',
overflowX: 'hidden',
overflowY: 'auto',
fontWeight: 'inherit',
fontSize: 'inherit',
fontFamily: 'inherit',
fontStyle: 'inherit',
fontVariant: 'inherit',
fontSizeAdjust: 'inherit',
fontStretch: 'inherit',
lineHeight: 'inherit',
direction: 'inherit',
letterSpacing: 'inherit',
whiteSpace: 'inherit',
textAlign: 'inherit',
verticalAlign: 'top',
wordWrap: 'break-word',
wordBreak: 'inherit',
tabSize: 'inherit'
},
// ========================= Measure ==========================
[`${componentCls}-measure`]: {
position: 'absolute',
inset: 0,
zIndex: -1,
color: 'transparent',
pointerEvents: 'none',
'> span': {
display: 'inline-block',
minHeight: '1em'
}
},
// ========================== Suffix ==========================
[`${componentCls}-suffix`]: {
display: 'inline-flex',
alignItems: 'center',
flex: 'none',
color: token.colorTextQuaternary,
fontSize: token.fontSizeIcon,
lineHeight: 1,
position: 'absolute',
top: '50%',
transform: 'translateY(-50%)',
insetInlineEnd: varRef('padding-inline'),
columnGap: token.marginXS,
[`${componentCls}-clear-icon`]: {
// https://github.com/ant-design/ant-design/pull/18151
// https://codesandbox.io/s/wizardly-sun-u10br
cursor: 'pointer',
border: 0,
background: 'transparent',
'&:hover': {
color: token.colorIcon
},
'&:active': {
color: token.colorText
},
'&-hidden': {
visibility: 'hidden'
}
},
[`${antCls}-form-item-feedback-icon`]: {
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center'
}
}
},
// ========================= AllowClear =========================
{
'&-has-suffix': {
'> textarea': {
paddingInlineEnd: calc(token.paddingXXS).mul(1.5).add(token.fontSizeIcon).add(varRef('padding-inline')).equal()
}
}
},
// ========================== Disabled ==========================
{
'&-disabled': {
'> textarea': {
...(0, _variants.genDisabledStyle)(token)
}
}
}, {
'&-lg': {
[varName('padding-inline')]: token.paddingInlineLG,
[varName('padding-block')]: token.paddingBlockLG,
[varName('control-height')]: token.controlHeightLG
},
'&-sm': {
[varName('padding-inline')]: token.paddingInlineSM,
[varName('padding-block')]: token.paddingBlockSM,
[varName('control-height')]: token.controlHeightSM
}
}]
};
};
// ============================== Tokens ==============================
const prepareComponentToken = token => ({
...(0, _style.initComponentToken)(token),
dropdownHeight: 250,
controlItemWidth: 100,
zIndexPopup: token.zIndexPopupBase + 50,
itemPaddingVertical: (token.controlHeight - token.fontHeight) / 2
});
// ============================== Export ==============================
exports.prepareComponentToken = prepareComponentToken;
var _default = exports.default = (0, _internal.genStyleHooks)('Mentions', token => {
const mentionsToken = (0, _internal.mergeToken)(token, (0, _style.initInputToken)(token));
return [genMentionsStyle(mentionsToken), genDropdownStyle(mentionsToken)];
}, prepareComponentToken);