258 lines
8.2 KiB
JavaScript
258 lines
8.2 KiB
JavaScript
"use strict";
|
|
|
|
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); |