index.js 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183
  1. "use client";
  2. var __rest = this && this.__rest || function (s, e) {
  3. var t = {};
  4. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  5. if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
  6. if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  7. }
  8. return t;
  9. };
  10. import * as React from 'react';
  11. import classNames from 'classnames';
  12. import RcMentions from 'rc-mentions';
  13. import { composeRef } from "rc-util/es/ref";
  14. import getAllowClear from '../_util/getAllowClear';
  15. import genPurePanel from '../_util/PurePanel';
  16. import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils';
  17. import toList from '../_util/toList';
  18. import { devUseWarning } from '../_util/warning';
  19. import { ConfigContext } from '../config-provider';
  20. import DefaultRenderEmpty from '../config-provider/defaultRenderEmpty';
  21. import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
  22. import { FormItemInputContext } from '../form/context';
  23. import useVariant from '../form/hooks/useVariants';
  24. import Spin from '../spin';
  25. import useStyle from './style';
  26. export const {
  27. Option
  28. } = RcMentions;
  29. function loadingFilterOption() {
  30. return true;
  31. }
  32. const InternalMentions = /*#__PURE__*/React.forwardRef((props, ref) => {
  33. const {
  34. prefixCls: customizePrefixCls,
  35. className,
  36. rootClassName,
  37. disabled,
  38. loading,
  39. filterOption,
  40. children,
  41. notFoundContent,
  42. options,
  43. status: customStatus,
  44. allowClear = false,
  45. popupClassName,
  46. style,
  47. variant: customVariant
  48. } = props,
  49. restProps = __rest(props, ["prefixCls", "className", "rootClassName", "disabled", "loading", "filterOption", "children", "notFoundContent", "options", "status", "allowClear", "popupClassName", "style", "variant"]);
  50. const [focused, setFocused] = React.useState(false);
  51. const innerRef = React.useRef(null);
  52. const mergedRef = composeRef(ref, innerRef);
  53. // =================== Warning =====================
  54. if (process.env.NODE_ENV !== 'production') {
  55. const warning = devUseWarning('Mentions');
  56. warning.deprecated(!children, 'Mentions.Option', 'options');
  57. }
  58. const {
  59. getPrefixCls,
  60. renderEmpty,
  61. direction,
  62. mentions: contextMentions
  63. } = React.useContext(ConfigContext);
  64. const {
  65. status: contextStatus,
  66. hasFeedback,
  67. feedbackIcon
  68. } = React.useContext(FormItemInputContext);
  69. const mergedStatus = getMergedStatus(contextStatus, customStatus);
  70. const onFocus = (...args) => {
  71. if (restProps.onFocus) {
  72. restProps.onFocus.apply(restProps, args);
  73. }
  74. setFocused(true);
  75. };
  76. const onBlur = (...args) => {
  77. if (restProps.onBlur) {
  78. restProps.onBlur.apply(restProps, args);
  79. }
  80. setFocused(false);
  81. };
  82. const notFoundContentEle = React.useMemo(() => {
  83. if (notFoundContent !== undefined) {
  84. return notFoundContent;
  85. }
  86. return (renderEmpty === null || renderEmpty === void 0 ? void 0 : renderEmpty('Select')) || /*#__PURE__*/React.createElement(DefaultRenderEmpty, {
  87. componentName: "Select"
  88. });
  89. }, [notFoundContent, renderEmpty]);
  90. const mentionOptions = React.useMemo(() => {
  91. if (loading) {
  92. return /*#__PURE__*/React.createElement(Option, {
  93. value: "ANTD_SEARCHING",
  94. disabled: true
  95. }, /*#__PURE__*/React.createElement(Spin, {
  96. size: "small"
  97. }));
  98. }
  99. return children;
  100. }, [loading, children]);
  101. const mergedOptions = loading ? [{
  102. value: 'ANTD_SEARCHING',
  103. disabled: true,
  104. label: /*#__PURE__*/React.createElement(Spin, {
  105. size: "small"
  106. })
  107. }] : options;
  108. const mentionsfilterOption = loading ? loadingFilterOption : filterOption;
  109. const prefixCls = getPrefixCls('mentions', customizePrefixCls);
  110. const mergedAllowClear = getAllowClear(allowClear);
  111. // Style
  112. const rootCls = useCSSVarCls(prefixCls);
  113. const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
  114. const [variant, enableVariantCls] = useVariant('mentions', customVariant);
  115. const suffixNode = hasFeedback && /*#__PURE__*/React.createElement(React.Fragment, null, feedbackIcon);
  116. const mergedClassName = classNames(contextMentions === null || contextMentions === void 0 ? void 0 : contextMentions.className, className, rootClassName, cssVarCls, rootCls);
  117. const mentions = /*#__PURE__*/React.createElement(RcMentions, Object.assign({
  118. silent: loading,
  119. prefixCls: prefixCls,
  120. notFoundContent: notFoundContentEle,
  121. className: mergedClassName,
  122. disabled: disabled,
  123. allowClear: mergedAllowClear,
  124. direction: direction,
  125. style: Object.assign(Object.assign({}, contextMentions === null || contextMentions === void 0 ? void 0 : contextMentions.style), style)
  126. }, restProps, {
  127. filterOption: mentionsfilterOption,
  128. onFocus: onFocus,
  129. onBlur: onBlur,
  130. dropdownClassName: classNames(popupClassName, rootClassName, hashId, cssVarCls, rootCls),
  131. ref: mergedRef,
  132. options: mergedOptions,
  133. suffix: suffixNode,
  134. classNames: {
  135. mentions: classNames({
  136. [`${prefixCls}-disabled`]: disabled,
  137. [`${prefixCls}-focused`]: focused,
  138. [`${prefixCls}-rtl`]: direction === 'rtl'
  139. }, hashId),
  140. variant: classNames({
  141. [`${prefixCls}-${variant}`]: enableVariantCls
  142. }, getStatusClassNames(prefixCls, mergedStatus)),
  143. affixWrapper: hashId
  144. }
  145. }), mentionOptions);
  146. return wrapCSSVar(mentions);
  147. });
  148. const Mentions = InternalMentions;
  149. if (process.env.NODE_ENV !== 'production') {
  150. Mentions.displayName = 'Mentions';
  151. }
  152. Mentions.Option = Option;
  153. // We don't care debug panel
  154. /* istanbul ignore next */
  155. const PurePanel = genPurePanel(Mentions, undefined, undefined, 'mentions');
  156. Mentions._InternalPanelDoNotUseOrYouWillBeFired = PurePanel;
  157. Mentions.getMentions = (value = '', config = {}) => {
  158. const {
  159. prefix = '@',
  160. split = ' '
  161. } = config;
  162. const prefixList = toList(prefix);
  163. return value.split(split).map((str = '') => {
  164. let hitPrefix = null;
  165. prefixList.some(prefixStr => {
  166. const startStr = str.slice(0, prefixStr.length);
  167. if (startStr === prefixStr) {
  168. hitPrefix = prefixStr;
  169. return true;
  170. }
  171. return false;
  172. });
  173. if (hitPrefix !== null) {
  174. return {
  175. prefix: hitPrefix,
  176. value: str.slice(hitPrefix.length)
  177. };
  178. }
  179. return null;
  180. }).filter(entity => !!entity && !!entity.value);
  181. };
  182. export default Mentions;