index.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250
  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. // TODO: 4.0 - codemod should help to change `filterOption` to support node props.
  11. import * as React from 'react';
  12. import cls from 'classnames';
  13. import RcSelect, { OptGroup, Option } from 'rc-select';
  14. import omit from "rc-util/es/omit";
  15. import { useZIndex } from '../_util/hooks/useZIndex';
  16. import { getTransitionName } from '../_util/motion';
  17. import genPurePanel from '../_util/PurePanel';
  18. import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils';
  19. import { devUseWarning } from '../_util/warning';
  20. import { ConfigContext } from '../config-provider';
  21. import { useComponentConfig } from '../config-provider/context';
  22. import DefaultRenderEmpty from '../config-provider/defaultRenderEmpty';
  23. import DisabledContext from '../config-provider/DisabledContext';
  24. import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
  25. import useSize from '../config-provider/hooks/useSize';
  26. import { FormItemInputContext } from '../form/context';
  27. import useVariants from '../form/hooks/useVariants';
  28. import { useCompactItemContext } from '../space/Compact';
  29. import { useToken } from '../theme/internal';
  30. import mergedBuiltinPlacements from './mergedBuiltinPlacements';
  31. import useStyle from './style';
  32. import useIcons from './useIcons';
  33. import usePopupRender from './usePopupRender';
  34. import useShowArrow from './useShowArrow';
  35. const SECRET_COMBOBOX_MODE_DO_NOT_USE = 'SECRET_COMBOBOX_MODE_DO_NOT_USE';
  36. const InternalSelect = (props, ref) => {
  37. var _a, _b, _c, _d, _e;
  38. const {
  39. prefixCls: customizePrefixCls,
  40. bordered,
  41. className,
  42. rootClassName,
  43. getPopupContainer,
  44. popupClassName,
  45. dropdownClassName,
  46. listHeight = 256,
  47. placement,
  48. listItemHeight: customListItemHeight,
  49. size: customizeSize,
  50. disabled: customDisabled,
  51. notFoundContent,
  52. status: customStatus,
  53. builtinPlacements,
  54. dropdownMatchSelectWidth,
  55. popupMatchSelectWidth,
  56. direction: propDirection,
  57. style,
  58. allowClear,
  59. variant: customizeVariant,
  60. dropdownStyle,
  61. transitionName,
  62. tagRender,
  63. maxCount,
  64. prefix,
  65. dropdownRender,
  66. popupRender,
  67. onDropdownVisibleChange,
  68. onOpenChange,
  69. styles,
  70. classNames
  71. } = props,
  72. rest = __rest(props, ["prefixCls", "bordered", "className", "rootClassName", "getPopupContainer", "popupClassName", "dropdownClassName", "listHeight", "placement", "listItemHeight", "size", "disabled", "notFoundContent", "status", "builtinPlacements", "dropdownMatchSelectWidth", "popupMatchSelectWidth", "direction", "style", "allowClear", "variant", "dropdownStyle", "transitionName", "tagRender", "maxCount", "prefix", "dropdownRender", "popupRender", "onDropdownVisibleChange", "onOpenChange", "styles", "classNames"]);
  73. const {
  74. getPopupContainer: getContextPopupContainer,
  75. getPrefixCls,
  76. renderEmpty,
  77. direction: contextDirection,
  78. virtual,
  79. popupMatchSelectWidth: contextPopupMatchSelectWidth,
  80. popupOverflow
  81. } = React.useContext(ConfigContext);
  82. const {
  83. showSearch,
  84. style: contextStyle,
  85. styles: contextStyles,
  86. className: contextClassName,
  87. classNames: contextClassNames
  88. } = useComponentConfig('select');
  89. const [, token] = useToken();
  90. const listItemHeight = customListItemHeight !== null && customListItemHeight !== void 0 ? customListItemHeight : token === null || token === void 0 ? void 0 : token.controlHeight;
  91. const prefixCls = getPrefixCls('select', customizePrefixCls);
  92. const rootPrefixCls = getPrefixCls();
  93. const direction = propDirection !== null && propDirection !== void 0 ? propDirection : contextDirection;
  94. const {
  95. compactSize,
  96. compactItemClassnames
  97. } = useCompactItemContext(prefixCls, direction);
  98. const [variant, enableVariantCls] = useVariants('select', customizeVariant, bordered);
  99. const rootCls = useCSSVarCls(prefixCls);
  100. const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
  101. const mode = React.useMemo(() => {
  102. const {
  103. mode: m
  104. } = props;
  105. if (m === 'combobox') {
  106. return undefined;
  107. }
  108. if (m === SECRET_COMBOBOX_MODE_DO_NOT_USE) {
  109. return 'combobox';
  110. }
  111. return m;
  112. }, [props.mode]);
  113. const isMultiple = mode === 'multiple' || mode === 'tags';
  114. const showSuffixIcon = useShowArrow(props.suffixIcon, props.showArrow);
  115. const mergedPopupMatchSelectWidth = (_a = popupMatchSelectWidth !== null && popupMatchSelectWidth !== void 0 ? popupMatchSelectWidth : dropdownMatchSelectWidth) !== null && _a !== void 0 ? _a : contextPopupMatchSelectWidth;
  116. const mergedPopupStyle = ((_b = styles === null || styles === void 0 ? void 0 : styles.popup) === null || _b === void 0 ? void 0 : _b.root) || ((_c = contextStyles.popup) === null || _c === void 0 ? void 0 : _c.root) || dropdownStyle;
  117. const mergedPopupRender = usePopupRender(popupRender || dropdownRender);
  118. const mergedOnOpenChange = onOpenChange || onDropdownVisibleChange;
  119. // ===================== Form Status =====================
  120. const {
  121. status: contextStatus,
  122. hasFeedback,
  123. isFormItemInput,
  124. feedbackIcon
  125. } = React.useContext(FormItemInputContext);
  126. const mergedStatus = getMergedStatus(contextStatus, customStatus);
  127. // ===================== Empty =====================
  128. let mergedNotFound;
  129. if (notFoundContent !== undefined) {
  130. mergedNotFound = notFoundContent;
  131. } else if (mode === 'combobox') {
  132. mergedNotFound = null;
  133. } else {
  134. mergedNotFound = (renderEmpty === null || renderEmpty === void 0 ? void 0 : renderEmpty('Select')) || /*#__PURE__*/React.createElement(DefaultRenderEmpty, {
  135. componentName: "Select"
  136. });
  137. }
  138. // ===================== Icons =====================
  139. const {
  140. suffixIcon,
  141. itemIcon,
  142. removeIcon,
  143. clearIcon
  144. } = useIcons(Object.assign(Object.assign({}, rest), {
  145. multiple: isMultiple,
  146. hasFeedback,
  147. feedbackIcon,
  148. showSuffixIcon,
  149. prefixCls,
  150. componentName: 'Select'
  151. }));
  152. const mergedAllowClear = allowClear === true ? {
  153. clearIcon
  154. } : allowClear;
  155. const selectProps = omit(rest, ['suffixIcon', 'itemIcon']);
  156. const mergedPopupClassName = cls(((_d = classNames === null || classNames === void 0 ? void 0 : classNames.popup) === null || _d === void 0 ? void 0 : _d.root) || ((_e = contextClassNames === null || contextClassNames === void 0 ? void 0 : contextClassNames.popup) === null || _e === void 0 ? void 0 : _e.root) || popupClassName || dropdownClassName, {
  157. [`${prefixCls}-dropdown-${direction}`]: direction === 'rtl'
  158. }, rootClassName, contextClassNames.root, classNames === null || classNames === void 0 ? void 0 : classNames.root, cssVarCls, rootCls, hashId);
  159. const mergedSize = useSize(ctx => {
  160. var _a;
  161. return (_a = customizeSize !== null && customizeSize !== void 0 ? customizeSize : compactSize) !== null && _a !== void 0 ? _a : ctx;
  162. });
  163. // ===================== Disabled =====================
  164. const disabled = React.useContext(DisabledContext);
  165. const mergedDisabled = customDisabled !== null && customDisabled !== void 0 ? customDisabled : disabled;
  166. const mergedClassName = cls({
  167. [`${prefixCls}-lg`]: mergedSize === 'large',
  168. [`${prefixCls}-sm`]: mergedSize === 'small',
  169. [`${prefixCls}-rtl`]: direction === 'rtl',
  170. [`${prefixCls}-${variant}`]: enableVariantCls,
  171. [`${prefixCls}-in-form-item`]: isFormItemInput
  172. }, getStatusClassNames(prefixCls, mergedStatus, hasFeedback), compactItemClassnames, contextClassName, className, contextClassNames.root, classNames === null || classNames === void 0 ? void 0 : classNames.root, rootClassName, cssVarCls, rootCls, hashId);
  173. // ===================== Placement =====================
  174. const memoPlacement = React.useMemo(() => {
  175. if (placement !== undefined) {
  176. return placement;
  177. }
  178. return direction === 'rtl' ? 'bottomRight' : 'bottomLeft';
  179. }, [placement, direction]);
  180. // ====================== Warning ======================
  181. if (process.env.NODE_ENV !== 'production') {
  182. const warning = devUseWarning('Select');
  183. const deprecatedProps = {
  184. dropdownMatchSelectWidth: 'popupMatchSelectWidth',
  185. dropdownStyle: 'styles.popup.root',
  186. dropdownClassName: 'classNames.popup.root',
  187. popupClassName: 'classNames.popup.root',
  188. dropdownRender: 'popupRender',
  189. onDropdownVisibleChange: 'onOpenChange',
  190. bordered: 'variant'
  191. };
  192. Object.entries(deprecatedProps).forEach(([oldProp, newProp]) => {
  193. warning.deprecated(!(oldProp in props), oldProp, newProp);
  194. });
  195. process.env.NODE_ENV !== "production" ? warning(!('showArrow' in props), 'deprecated', '`showArrow` is deprecated which will be removed in next major version. It will be a default behavior, you can hide it by setting `suffixIcon` to null.') : void 0;
  196. process.env.NODE_ENV !== "production" ? warning(!(typeof maxCount !== 'undefined' && !isMultiple), 'usage', '`maxCount` only works with mode `multiple` or `tags`') : void 0;
  197. }
  198. // ====================== zIndex =========================
  199. const [zIndex] = useZIndex('SelectLike', mergedPopupStyle === null || mergedPopupStyle === void 0 ? void 0 : mergedPopupStyle.zIndex);
  200. // ====================== Render =======================
  201. return wrapCSSVar(/*#__PURE__*/React.createElement(RcSelect, Object.assign({
  202. ref: ref,
  203. virtual: virtual,
  204. showSearch: showSearch
  205. }, selectProps, {
  206. style: Object.assign(Object.assign(Object.assign(Object.assign({}, contextStyles.root), styles === null || styles === void 0 ? void 0 : styles.root), contextStyle), style),
  207. dropdownMatchSelectWidth: mergedPopupMatchSelectWidth,
  208. transitionName: getTransitionName(rootPrefixCls, 'slide-up', transitionName),
  209. builtinPlacements: mergedBuiltinPlacements(builtinPlacements, popupOverflow),
  210. listHeight: listHeight,
  211. listItemHeight: listItemHeight,
  212. mode: mode,
  213. prefixCls: prefixCls,
  214. placement: memoPlacement,
  215. direction: direction,
  216. prefix: prefix,
  217. suffixIcon: suffixIcon,
  218. menuItemSelectedIcon: itemIcon,
  219. removeIcon: removeIcon,
  220. allowClear: mergedAllowClear,
  221. notFoundContent: mergedNotFound,
  222. className: mergedClassName,
  223. getPopupContainer: getPopupContainer || getContextPopupContainer,
  224. dropdownClassName: mergedPopupClassName,
  225. disabled: mergedDisabled,
  226. dropdownStyle: Object.assign(Object.assign({}, mergedPopupStyle), {
  227. zIndex
  228. }),
  229. maxCount: isMultiple ? maxCount : undefined,
  230. tagRender: isMultiple ? tagRender : undefined,
  231. dropdownRender: mergedPopupRender,
  232. onDropdownVisibleChange: mergedOnOpenChange
  233. })));
  234. };
  235. if (process.env.NODE_ENV !== 'production') {
  236. InternalSelect.displayName = 'Select';
  237. }
  238. const Select = /*#__PURE__*/React.forwardRef(InternalSelect);
  239. // We don't care debug panel
  240. /* istanbul ignore next */
  241. const PurePanel = genPurePanel(Select, 'dropdownAlign');
  242. Select.SECRET_COMBOBOX_MODE_DO_NOT_USE = SECRET_COMBOBOX_MODE_DO_NOT_USE;
  243. Select.Option = Option;
  244. Select.OptGroup = OptGroup;
  245. Select._InternalPanelDoNotUseOrYouWillBeFired = PurePanel;
  246. if (process.env.NODE_ENV !== 'production') {
  247. Select.displayName = 'Select';
  248. }
  249. export default Select;