index.js 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288
  1. "use strict";
  2. "use client";
  3. var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
  4. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
  5. Object.defineProperty(exports, "__esModule", {
  6. value: true
  7. });
  8. exports.default = void 0;
  9. var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
  10. var React = _interopRequireWildcard(require("react"));
  11. var _classnames = _interopRequireDefault(require("classnames"));
  12. var _rcCascader = _interopRequireDefault(require("rc-cascader"));
  13. var _omit = _interopRequireDefault(require("rc-util/lib/omit"));
  14. var _useZIndex = require("../_util/hooks/useZIndex");
  15. var _motion = require("../_util/motion");
  16. var _PurePanel = _interopRequireDefault(require("../_util/PurePanel"));
  17. var _statusUtils = require("../_util/statusUtils");
  18. var _warning = require("../_util/warning");
  19. var _configProvider = require("../config-provider");
  20. var _context = require("../config-provider/context");
  21. var _defaultRenderEmpty = _interopRequireDefault(require("../config-provider/defaultRenderEmpty"));
  22. var _DisabledContext = _interopRequireDefault(require("../config-provider/DisabledContext"));
  23. var _useCSSVarCls = _interopRequireDefault(require("../config-provider/hooks/useCSSVarCls"));
  24. var _useSize = _interopRequireDefault(require("../config-provider/hooks/useSize"));
  25. var _context2 = require("../form/context");
  26. var _useVariants = _interopRequireDefault(require("../form/hooks/useVariants"));
  27. var _mergedBuiltinPlacements = _interopRequireDefault(require("../select/mergedBuiltinPlacements"));
  28. var _style = _interopRequireDefault(require("../select/style"));
  29. var _useIcons = _interopRequireDefault(require("../select/useIcons"));
  30. var _usePopupRender = _interopRequireDefault(require("../select/usePopupRender"));
  31. var _useShowArrow = _interopRequireDefault(require("../select/useShowArrow"));
  32. var _Compact = require("../space/Compact");
  33. var _useBase = _interopRequireDefault(require("./hooks/useBase"));
  34. var _useCheckable = _interopRequireDefault(require("./hooks/useCheckable"));
  35. var _useColumnIcons = _interopRequireDefault(require("./hooks/useColumnIcons"));
  36. var _Panel = _interopRequireDefault(require("./Panel"));
  37. var _style2 = _interopRequireDefault(require("./style"));
  38. var __rest = void 0 && (void 0).__rest || function (s, e) {
  39. var t = {};
  40. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  41. if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
  42. if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  43. }
  44. return t;
  45. };
  46. const {
  47. SHOW_CHILD,
  48. SHOW_PARENT
  49. } = _rcCascader.default;
  50. function highlightKeyword(str, lowerKeyword, prefixCls) {
  51. const cells = str.toLowerCase().split(lowerKeyword).reduce((list, cur, index) => index === 0 ? [cur] : [].concat((0, _toConsumableArray2.default)(list), [lowerKeyword, cur]), []);
  52. const fillCells = [];
  53. let start = 0;
  54. cells.forEach((cell, index) => {
  55. const end = start + cell.length;
  56. let originWorld = str.slice(start, end);
  57. start = end;
  58. if (index % 2 === 1) {
  59. originWorld =
  60. /*#__PURE__*/
  61. // eslint-disable-next-line react/no-array-index-key
  62. React.createElement("span", {
  63. className: `${prefixCls}-menu-item-keyword`,
  64. key: `separator-${index}`
  65. }, originWorld);
  66. }
  67. fillCells.push(originWorld);
  68. });
  69. return fillCells;
  70. }
  71. const defaultSearchRender = (inputValue, path, prefixCls, fieldNames) => {
  72. const optionList = [];
  73. // We do lower here to save perf
  74. const lower = inputValue.toLowerCase();
  75. path.forEach((node, index) => {
  76. if (index !== 0) {
  77. optionList.push(' / ');
  78. }
  79. let label = node[fieldNames.label];
  80. const type = typeof label;
  81. if (type === 'string' || type === 'number') {
  82. label = highlightKeyword(String(label), lower, prefixCls);
  83. }
  84. optionList.push(label);
  85. });
  86. return optionList;
  87. };
  88. const Cascader = /*#__PURE__*/React.forwardRef((props, ref) => {
  89. var _a, _b, _c, _d;
  90. const {
  91. prefixCls: customizePrefixCls,
  92. size: customizeSize,
  93. disabled: customDisabled,
  94. className,
  95. rootClassName,
  96. multiple,
  97. bordered = true,
  98. transitionName,
  99. choiceTransitionName = '',
  100. popupClassName,
  101. dropdownClassName,
  102. expandIcon,
  103. placement,
  104. showSearch,
  105. allowClear = true,
  106. notFoundContent,
  107. direction,
  108. getPopupContainer,
  109. status: customStatus,
  110. showArrow,
  111. builtinPlacements,
  112. style,
  113. variant: customVariant,
  114. dropdownRender,
  115. onDropdownVisibleChange,
  116. dropdownMenuColumnStyle,
  117. popupRender,
  118. dropdownStyle,
  119. popupMenuColumnStyle,
  120. onOpenChange,
  121. styles,
  122. classNames
  123. } = props,
  124. rest = __rest(props, ["prefixCls", "size", "disabled", "className", "rootClassName", "multiple", "bordered", "transitionName", "choiceTransitionName", "popupClassName", "dropdownClassName", "expandIcon", "placement", "showSearch", "allowClear", "notFoundContent", "direction", "getPopupContainer", "status", "showArrow", "builtinPlacements", "style", "variant", "dropdownRender", "onDropdownVisibleChange", "dropdownMenuColumnStyle", "popupRender", "dropdownStyle", "popupMenuColumnStyle", "onOpenChange", "styles", "classNames"]);
  125. const restProps = (0, _omit.default)(rest, ['suffixIcon']);
  126. const {
  127. getPrefixCls,
  128. getPopupContainer: getContextPopupContainer,
  129. className: contextClassName,
  130. style: contextStyle,
  131. classNames: contextClassNames,
  132. styles: contextStyles
  133. } = (0, _context.useComponentConfig)('cascader');
  134. const {
  135. popupOverflow
  136. } = React.useContext(_configProvider.ConfigContext);
  137. // =================== Form =====================
  138. const {
  139. status: contextStatus,
  140. hasFeedback,
  141. isFormItemInput,
  142. feedbackIcon
  143. } = React.useContext(_context2.FormItemInputContext);
  144. const mergedStatus = (0, _statusUtils.getMergedStatus)(contextStatus, customStatus);
  145. // =================== Warning =====================
  146. if (process.env.NODE_ENV !== 'production') {
  147. const warning = (0, _warning.devUseWarning)('Cascader');
  148. // v5 deprecated dropdown api
  149. const deprecatedProps = {
  150. dropdownClassName: 'classNames.popup.root',
  151. dropdownStyle: 'styles.popup.root',
  152. dropdownRender: 'popupRender',
  153. dropdownMenuColumnStyle: 'popupMenuColumnStyle',
  154. onDropdownVisibleChange: 'onOpenChange',
  155. bordered: 'variant'
  156. };
  157. Object.entries(deprecatedProps).forEach(([oldProp, newProp]) => {
  158. warning.deprecated(!(oldProp in props), oldProp, newProp);
  159. });
  160. 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;
  161. }
  162. // ==================== Prefix =====================
  163. const [prefixCls, cascaderPrefixCls, mergedDirection, renderEmpty] = (0, _useBase.default)(customizePrefixCls, direction);
  164. const isRtl = mergedDirection === 'rtl';
  165. const rootPrefixCls = getPrefixCls();
  166. const rootCls = (0, _useCSSVarCls.default)(prefixCls);
  167. const [wrapSelectCSSVar, hashId, cssVarCls] = (0, _style.default)(prefixCls, rootCls);
  168. const cascaderRootCls = (0, _useCSSVarCls.default)(cascaderPrefixCls);
  169. const [wrapCascaderCSSVar] = (0, _style2.default)(cascaderPrefixCls, cascaderRootCls);
  170. const {
  171. compactSize,
  172. compactItemClassnames
  173. } = (0, _Compact.useCompactItemContext)(prefixCls, direction);
  174. const [variant, enableVariantCls] = (0, _useVariants.default)('cascader', customVariant, bordered);
  175. // =================== No Found ====================
  176. const mergedNotFoundContent = notFoundContent || (renderEmpty === null || renderEmpty === void 0 ? void 0 : renderEmpty('Cascader')) || (/*#__PURE__*/React.createElement(_defaultRenderEmpty.default, {
  177. componentName: "Cascader"
  178. }));
  179. // =================== Dropdown ====================
  180. const mergedPopupClassName = (0, _classnames.default)(((_a = classNames === null || classNames === void 0 ? void 0 : classNames.popup) === null || _a === void 0 ? void 0 : _a.root) || ((_b = contextClassNames.popup) === null || _b === void 0 ? void 0 : _b.root) || popupClassName || dropdownClassName, `${cascaderPrefixCls}-dropdown`, {
  181. [`${cascaderPrefixCls}-dropdown-rtl`]: mergedDirection === 'rtl'
  182. }, rootClassName, rootCls, contextClassNames.root, classNames === null || classNames === void 0 ? void 0 : classNames.root, cascaderRootCls, hashId, cssVarCls);
  183. const mergedPopupRender = (0, _usePopupRender.default)(popupRender || dropdownRender);
  184. const mergedPopupMenuColumnStyle = popupMenuColumnStyle || dropdownMenuColumnStyle;
  185. const mergedOnOpenChange = onOpenChange || onDropdownVisibleChange;
  186. const mergedPopupStyle = ((_c = styles === null || styles === void 0 ? void 0 : styles.popup) === null || _c === void 0 ? void 0 : _c.root) || ((_d = contextStyles.popup) === null || _d === void 0 ? void 0 : _d.root) || dropdownStyle;
  187. // ==================== Search =====================
  188. const mergedShowSearch = React.useMemo(() => {
  189. if (!showSearch) {
  190. return showSearch;
  191. }
  192. let searchConfig = {
  193. render: defaultSearchRender
  194. };
  195. if (typeof showSearch === 'object') {
  196. searchConfig = Object.assign(Object.assign({}, searchConfig), showSearch);
  197. }
  198. return searchConfig;
  199. }, [showSearch]);
  200. // ===================== Size ======================
  201. const mergedSize = (0, _useSize.default)(ctx => {
  202. var _a;
  203. return (_a = customizeSize !== null && customizeSize !== void 0 ? customizeSize : compactSize) !== null && _a !== void 0 ? _a : ctx;
  204. });
  205. // ===================== Disabled =====================
  206. const disabled = React.useContext(_DisabledContext.default);
  207. const mergedDisabled = customDisabled !== null && customDisabled !== void 0 ? customDisabled : disabled;
  208. // ===================== Icon ======================
  209. const [mergedExpandIcon, loadingIcon] = (0, _useColumnIcons.default)(prefixCls, isRtl, expandIcon);
  210. // =================== Multiple ====================
  211. const checkable = (0, _useCheckable.default)(cascaderPrefixCls, multiple);
  212. // ===================== Icons =====================
  213. const showSuffixIcon = (0, _useShowArrow.default)(props.suffixIcon, showArrow);
  214. const {
  215. suffixIcon,
  216. removeIcon,
  217. clearIcon
  218. } = (0, _useIcons.default)(Object.assign(Object.assign({}, props), {
  219. hasFeedback,
  220. feedbackIcon,
  221. showSuffixIcon,
  222. multiple,
  223. prefixCls,
  224. componentName: 'Cascader'
  225. }));
  226. // ===================== Placement =====================
  227. const memoPlacement = React.useMemo(() => {
  228. if (placement !== undefined) {
  229. return placement;
  230. }
  231. return isRtl ? 'bottomRight' : 'bottomLeft';
  232. }, [placement, isRtl]);
  233. const mergedAllowClear = allowClear === true ? {
  234. clearIcon
  235. } : allowClear;
  236. // ============================ zIndex ============================
  237. const [zIndex] = (0, _useZIndex.useZIndex)('SelectLike', mergedPopupStyle === null || mergedPopupStyle === void 0 ? void 0 : mergedPopupStyle.zIndex);
  238. // ==================== Render =====================
  239. const renderNode = /*#__PURE__*/React.createElement(_rcCascader.default, Object.assign({
  240. prefixCls: prefixCls,
  241. className: (0, _classnames.default)(!customizePrefixCls && cascaderPrefixCls, {
  242. [`${prefixCls}-lg`]: mergedSize === 'large',
  243. [`${prefixCls}-sm`]: mergedSize === 'small',
  244. [`${prefixCls}-rtl`]: isRtl,
  245. [`${prefixCls}-${variant}`]: enableVariantCls,
  246. [`${prefixCls}-in-form-item`]: isFormItemInput
  247. }, (0, _statusUtils.getStatusClassNames)(prefixCls, mergedStatus, hasFeedback), compactItemClassnames, contextClassName, className, rootClassName, classNames === null || classNames === void 0 ? void 0 : classNames.root, contextClassNames.root, rootCls, cascaderRootCls, hashId, cssVarCls),
  248. disabled: mergedDisabled,
  249. style: Object.assign(Object.assign(Object.assign(Object.assign({}, contextStyles.root), styles === null || styles === void 0 ? void 0 : styles.root), contextStyle), style)
  250. }, restProps, {
  251. builtinPlacements: (0, _mergedBuiltinPlacements.default)(builtinPlacements, popupOverflow),
  252. direction: mergedDirection,
  253. placement: memoPlacement,
  254. notFoundContent: mergedNotFoundContent,
  255. allowClear: mergedAllowClear,
  256. showSearch: mergedShowSearch,
  257. expandIcon: mergedExpandIcon,
  258. suffixIcon: suffixIcon,
  259. removeIcon: removeIcon,
  260. loadingIcon: loadingIcon,
  261. checkable: checkable,
  262. dropdownClassName: mergedPopupClassName,
  263. dropdownPrefixCls: customizePrefixCls || cascaderPrefixCls,
  264. dropdownStyle: Object.assign(Object.assign({}, mergedPopupStyle), {
  265. zIndex
  266. }),
  267. dropdownRender: mergedPopupRender,
  268. dropdownMenuColumnStyle: mergedPopupMenuColumnStyle,
  269. onOpenChange: mergedOnOpenChange,
  270. choiceTransitionName: (0, _motion.getTransitionName)(rootPrefixCls, '', choiceTransitionName),
  271. transitionName: (0, _motion.getTransitionName)(rootPrefixCls, 'slide-up', transitionName),
  272. getPopupContainer: getPopupContainer || getContextPopupContainer,
  273. ref: ref
  274. }));
  275. return wrapCascaderCSSVar(wrapSelectCSSVar(renderNode));
  276. });
  277. if (process.env.NODE_ENV !== 'production') {
  278. Cascader.displayName = 'Cascader';
  279. }
  280. // We don't care debug panel
  281. /* istanbul ignore next */
  282. const PurePanel = (0, _PurePanel.default)(Cascader, 'dropdownAlign', props => (0, _omit.default)(props, ['visible']));
  283. Cascader.SHOW_PARENT = SHOW_PARENT;
  284. Cascader.SHOW_CHILD = SHOW_CHILD;
  285. Cascader.Panel = _Panel.default;
  286. Cascader._InternalPanelDoNotUseOrYouWillBeFired = PurePanel;
  287. var _default = exports.default = Cascader;