index.js 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227
  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. exports.prepareComponentToken = exports.default = void 0;
  6. var _cssinjs = require("@ant-design/cssinjs");
  7. var _style = require("../../input/style");
  8. var _variants = require("../../input/style/variants");
  9. var _style2 = require("../../style");
  10. var _internal = require("../../theme/internal");
  11. const genMentionsStyle = token => {
  12. const {
  13. componentCls,
  14. antCls,
  15. colorTextDisabled,
  16. controlItemBgHover,
  17. controlPaddingHorizontal,
  18. colorText,
  19. motionDurationSlow,
  20. lineHeight,
  21. controlHeight,
  22. paddingInline,
  23. paddingBlock,
  24. fontSize,
  25. fontSizeIcon,
  26. colorIcon,
  27. colorTextQuaternary,
  28. colorBgElevated,
  29. paddingXXS,
  30. borderRadius,
  31. borderRadiusLG,
  32. boxShadowSecondary,
  33. itemPaddingVertical,
  34. calc
  35. } = token;
  36. return {
  37. [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)), {
  38. position: 'relative',
  39. display: 'inline-block',
  40. height: 'auto',
  41. padding: `0 ${(0, _cssinjs.unit)(token.paddingInline)}`,
  42. overflow: 'hidden',
  43. lineHeight,
  44. whiteSpace: 'pre-wrap',
  45. verticalAlign: 'bottom'
  46. }), (0, _variants.genOutlinedStyle)(token)), (0, _variants.genFilledStyle)(token)), (0, _variants.genBorderlessStyle)(token)), {
  47. '&-affix-wrapper': Object.assign(Object.assign({}, (0, _style.genBasicInputStyle)(token)), {
  48. display: 'inline-flex',
  49. paddingBlock: 0,
  50. paddingInlineStart: 0,
  51. paddingInlineEnd: token.paddingInline,
  52. '&::before': {
  53. display: 'inline-block',
  54. width: 0,
  55. visibility: 'hidden',
  56. content: '"\\a0"'
  57. },
  58. [`${componentCls}-suffix`]: {
  59. display: 'inline-flex',
  60. alignItems: 'center',
  61. // 当页面中存在 feedback-icon 时,给 clear-icon 添加右边距
  62. [`&:has(${antCls}-form-item-feedback-icon) ${componentCls}-clear-icon`]: {
  63. marginInlineEnd: token.marginXS
  64. },
  65. [`${antCls}-form-item-feedback-icon`]: {
  66. display: 'inline-flex',
  67. alignItems: 'center',
  68. justifyContent: 'center'
  69. }
  70. },
  71. [`${componentCls}-clear-icon`]: {
  72. insetInlineEnd: 0,
  73. insetBlockStart: calc(fontSize).mul(lineHeight).mul(0.5).add(paddingBlock).equal(),
  74. padding: 0,
  75. lineHeight: 0,
  76. color: colorTextQuaternary,
  77. fontSize: fontSizeIcon,
  78. verticalAlign: -1,
  79. // https://github.com/ant-design/ant-design/pull/18151
  80. // https://codesandbox.io/s/wizardly-sun-u10br
  81. cursor: 'pointer',
  82. transition: `color ${motionDurationSlow}`,
  83. border: 'none',
  84. outline: 'none',
  85. backgroundColor: 'transparent',
  86. '&:hover': {
  87. color: colorIcon
  88. },
  89. '&:active': {
  90. color: colorText
  91. },
  92. '&-hidden': {
  93. visibility: 'hidden'
  94. }
  95. }
  96. })
  97. }), (0, _variants.genUnderlinedStyle)(token)), {
  98. '&-disabled': {
  99. '> textarea': Object.assign({}, (0, _variants.genDisabledStyle)(token))
  100. },
  101. // ================= Input Area =================
  102. [`&, &-affix-wrapper > ${componentCls}`]: {
  103. [`> textarea, ${componentCls}-measure`]: {
  104. color: colorText,
  105. boxSizing: 'border-box',
  106. minHeight: token.calc(controlHeight).sub(2).equal(),
  107. margin: 0,
  108. padding: `${(0, _cssinjs.unit)(paddingBlock)} ${(0, _cssinjs.unit)(paddingInline)}`,
  109. overflow: 'inherit',
  110. overflowX: 'hidden',
  111. overflowY: 'auto',
  112. fontWeight: 'inherit',
  113. fontSize: 'inherit',
  114. fontFamily: 'inherit',
  115. fontStyle: 'inherit',
  116. fontVariant: 'inherit',
  117. fontSizeAdjust: 'inherit',
  118. fontStretch: 'inherit',
  119. lineHeight: 'inherit',
  120. direction: 'inherit',
  121. letterSpacing: 'inherit',
  122. whiteSpace: 'inherit',
  123. textAlign: 'inherit',
  124. verticalAlign: 'top',
  125. wordWrap: 'break-word',
  126. wordBreak: 'inherit',
  127. tabSize: 'inherit'
  128. },
  129. '> textarea': Object.assign(Object.assign({
  130. width: '100%',
  131. border: 'none',
  132. outline: 'none',
  133. resize: 'none',
  134. backgroundColor: 'transparent'
  135. }, (0, _style.genPlaceholderStyle)(token.colorTextPlaceholder)), {
  136. padding: `${(0, _cssinjs.unit)(token.paddingBlock)} 0`
  137. }),
  138. [`${componentCls}-measure`]: {
  139. position: 'absolute',
  140. top: 0,
  141. insetInlineEnd: 0,
  142. bottom: 0,
  143. insetInlineStart: 0,
  144. zIndex: -1,
  145. color: 'transparent',
  146. pointerEvents: 'none',
  147. '> span': {
  148. display: 'inline-block',
  149. minHeight: '1em'
  150. }
  151. }
  152. },
  153. // ================== Dropdown ==================
  154. '&-dropdown': Object.assign(Object.assign({}, (0, _style2.resetComponent)(token)), {
  155. position: 'absolute',
  156. top: -9999,
  157. insetInlineStart: -9999,
  158. zIndex: token.zIndexPopup,
  159. boxSizing: 'border-box',
  160. fontSize,
  161. fontVariant: 'initial',
  162. padding: paddingXXS,
  163. backgroundColor: colorBgElevated,
  164. borderRadius: borderRadiusLG,
  165. outline: 'none',
  166. boxShadow: boxShadowSecondary,
  167. '&-hidden': {
  168. display: 'none'
  169. },
  170. [`${componentCls}-dropdown-menu`]: {
  171. maxHeight: token.dropdownHeight,
  172. margin: 0,
  173. paddingInlineStart: 0,
  174. // Override default ul/ol
  175. overflow: 'auto',
  176. listStyle: 'none',
  177. outline: 'none',
  178. '&-item': Object.assign(Object.assign({}, _style2.textEllipsis), {
  179. position: 'relative',
  180. display: 'block',
  181. minWidth: token.controlItemWidth,
  182. padding: `${(0, _cssinjs.unit)(itemPaddingVertical)} ${(0, _cssinjs.unit)(controlPaddingHorizontal)}`,
  183. color: colorText,
  184. borderRadius,
  185. fontWeight: 'normal',
  186. lineHeight,
  187. cursor: 'pointer',
  188. transition: `background ${motionDurationSlow} ease`,
  189. '&:hover': {
  190. backgroundColor: controlItemBgHover
  191. },
  192. '&-disabled': {
  193. color: colorTextDisabled,
  194. cursor: 'not-allowed',
  195. '&:hover': {
  196. color: colorTextDisabled,
  197. backgroundColor: controlItemBgHover,
  198. cursor: 'not-allowed'
  199. }
  200. },
  201. '&-selected': {
  202. color: colorText,
  203. fontWeight: token.fontWeightStrong,
  204. backgroundColor: controlItemBgHover
  205. },
  206. '&-active': {
  207. backgroundColor: controlItemBgHover
  208. }
  209. })
  210. }
  211. })
  212. })
  213. };
  214. };
  215. const prepareComponentToken = token => Object.assign(Object.assign({}, (0, _style.initComponentToken)(token)), {
  216. dropdownHeight: 250,
  217. controlItemWidth: 100,
  218. zIndexPopup: token.zIndexPopupBase + 50,
  219. itemPaddingVertical: (token.controlHeight - token.fontHeight) / 2
  220. });
  221. // ============================== Export ==============================
  222. exports.prepareComponentToken = prepareComponentToken;
  223. var _default = exports.default = (0, _internal.genStyleHooks)('Mentions', token => {
  224. const mentionsToken = (0, _internal.mergeToken)(token, (0, _style.initInputToken)(token));
  225. return genMentionsStyle(mentionsToken);
  226. }, prepareComponentToken);