index.js 12 KB

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