123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227 |
- "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");
- const genMentionsStyle = token => {
- const {
- componentCls,
- antCls,
- colorTextDisabled,
- controlItemBgHover,
- controlPaddingHorizontal,
- colorText,
- motionDurationSlow,
- lineHeight,
- controlHeight,
- paddingInline,
- paddingBlock,
- fontSize,
- fontSizeIcon,
- colorIcon,
- colorTextQuaternary,
- colorBgElevated,
- paddingXXS,
- borderRadius,
- borderRadiusLG,
- boxShadowSecondary,
- itemPaddingVertical,
- calc
- } = token;
- return {
- [componentCls]: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (0, _style2.resetComponent)(token)), (0, _style.genBasicInputStyle)(token)), {
- position: 'relative',
- display: 'inline-block',
- height: 'auto',
- padding: `0 ${(0, _cssinjs.unit)(token.paddingInline)}`,
- overflow: 'hidden',
- lineHeight,
- whiteSpace: 'pre-wrap',
- verticalAlign: 'bottom'
- }), (0, _variants.genOutlinedStyle)(token)), (0, _variants.genFilledStyle)(token)), (0, _variants.genBorderlessStyle)(token)), {
- '&-affix-wrapper': Object.assign(Object.assign({}, (0, _style.genBasicInputStyle)(token)), {
- display: 'inline-flex',
- paddingBlock: 0,
- paddingInlineStart: 0,
- paddingInlineEnd: token.paddingInline,
- '&::before': {
- display: 'inline-block',
- width: 0,
- visibility: 'hidden',
- content: '"\\a0"'
- },
- [`${componentCls}-suffix`]: {
- display: 'inline-flex',
- alignItems: 'center',
- // 当页面中存在 feedback-icon 时,给 clear-icon 添加右边距
- [`&:has(${antCls}-form-item-feedback-icon) ${componentCls}-clear-icon`]: {
- marginInlineEnd: token.marginXS
- },
- [`${antCls}-form-item-feedback-icon`]: {
- display: 'inline-flex',
- alignItems: 'center',
- justifyContent: 'center'
- }
- },
- [`${componentCls}-clear-icon`]: {
- insetInlineEnd: 0,
- insetBlockStart: calc(fontSize).mul(lineHeight).mul(0.5).add(paddingBlock).equal(),
- padding: 0,
- lineHeight: 0,
- color: colorTextQuaternary,
- fontSize: fontSizeIcon,
- verticalAlign: -1,
- // https://github.com/ant-design/ant-design/pull/18151
- // https://codesandbox.io/s/wizardly-sun-u10br
- cursor: 'pointer',
- transition: `color ${motionDurationSlow}`,
- border: 'none',
- outline: 'none',
- backgroundColor: 'transparent',
- '&:hover': {
- color: colorIcon
- },
- '&:active': {
- color: colorText
- },
- '&-hidden': {
- visibility: 'hidden'
- }
- }
- })
- }), (0, _variants.genUnderlinedStyle)(token)), {
- '&-disabled': {
- '> textarea': Object.assign({}, (0, _variants.genDisabledStyle)(token))
- },
- // ================= Input Area =================
- [`&, &-affix-wrapper > ${componentCls}`]: {
- [`> textarea, ${componentCls}-measure`]: {
- color: colorText,
- boxSizing: 'border-box',
- minHeight: token.calc(controlHeight).sub(2).equal(),
- margin: 0,
- padding: `${(0, _cssinjs.unit)(paddingBlock)} ${(0, _cssinjs.unit)(paddingInline)}`,
- 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'
- },
- '> textarea': Object.assign(Object.assign({
- width: '100%',
- border: 'none',
- outline: 'none',
- resize: 'none',
- backgroundColor: 'transparent'
- }, (0, _style.genPlaceholderStyle)(token.colorTextPlaceholder)), {
- padding: `${(0, _cssinjs.unit)(token.paddingBlock)} 0`
- }),
- [`${componentCls}-measure`]: {
- position: 'absolute',
- top: 0,
- insetInlineEnd: 0,
- bottom: 0,
- insetInlineStart: 0,
- zIndex: -1,
- color: 'transparent',
- pointerEvents: 'none',
- '> span': {
- display: 'inline-block',
- minHeight: '1em'
- }
- }
- },
- // ================== Dropdown ==================
- '&-dropdown': Object.assign(Object.assign({}, (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': Object.assign(Object.assign({}, _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 ${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 prepareComponentToken = token => Object.assign(Object.assign({}, (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);
- }, prepareComponentToken);
|