1 | "use client";
|
2 |
|
3 | import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
|
4 | var __rest = this && this.__rest || function (s, e) {
|
5 | var t = {};
|
6 | for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
|
7 | if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
8 | if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
|
9 | }
|
10 | return t;
|
11 | };
|
12 | import * as React from 'react';
|
13 | import classNames from 'classnames';
|
14 | import RcCascader from 'rc-cascader';
|
15 | import omit from "rc-util/es/omit";
|
16 | import { useZIndex } from '../_util/hooks/useZIndex';
|
17 | import { getTransitionName } from '../_util/motion';
|
18 | import genPurePanel from '../_util/PurePanel';
|
19 | import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils';
|
20 | import { devUseWarning } from '../_util/warning';
|
21 | import { ConfigContext } from '../config-provider';
|
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 useVariant from '../form/hooks/useVariants';
|
28 | import mergedBuiltinPlacements from '../select/mergedBuiltinPlacements';
|
29 | import useSelectStyle from '../select/style';
|
30 | import useIcons from '../select/useIcons';
|
31 | import useShowArrow from '../select/useShowArrow';
|
32 | import { useCompactItemContext } from '../space/Compact';
|
33 | import useBase from './hooks/useBase';
|
34 | import useCheckable from './hooks/useCheckable';
|
35 | import useColumnIcons from './hooks/useColumnIcons';
|
36 | import CascaderPanel from './Panel';
|
37 | import useStyle from './style';
|
38 | const {
|
39 | SHOW_CHILD,
|
40 | SHOW_PARENT
|
41 | } = RcCascader;
|
42 | function highlightKeyword(str, lowerKeyword, prefixCls) {
|
43 | const cells = str.toLowerCase().split(lowerKeyword).reduce((list, cur, index) => index === 0 ? [cur] : [].concat(_toConsumableArray(list), [lowerKeyword, cur]), []);
|
44 | const fillCells = [];
|
45 | let start = 0;
|
46 | cells.forEach((cell, index) => {
|
47 | const end = start + cell.length;
|
48 | let originWorld = str.slice(start, end);
|
49 | start = end;
|
50 | if (index % 2 === 1) {
|
51 | originWorld =
|
52 |
|
53 |
|
54 | React.createElement("span", {
|
55 | className: `${prefixCls}-menu-item-keyword`,
|
56 | key: `separator-${index}`
|
57 | }, originWorld);
|
58 | }
|
59 | fillCells.push(originWorld);
|
60 | });
|
61 | return fillCells;
|
62 | }
|
63 | const defaultSearchRender = (inputValue, path, prefixCls, fieldNames) => {
|
64 | const optionList = [];
|
65 |
|
66 | const lower = inputValue.toLowerCase();
|
67 | path.forEach((node, index) => {
|
68 | if (index !== 0) {
|
69 | optionList.push(' / ');
|
70 | }
|
71 | let label = node[fieldNames.label];
|
72 | const type = typeof label;
|
73 | if (type === 'string' || type === 'number') {
|
74 | label = highlightKeyword(String(label), lower, prefixCls);
|
75 | }
|
76 | optionList.push(label);
|
77 | });
|
78 | return optionList;
|
79 | };
|
80 | const Cascader = React.forwardRef((props, ref) => {
|
81 | var _a;
|
82 | const {
|
83 | prefixCls: customizePrefixCls,
|
84 | size: customizeSize,
|
85 | disabled: customDisabled,
|
86 | className,
|
87 | rootClassName,
|
88 | multiple,
|
89 | bordered = true,
|
90 | transitionName,
|
91 | choiceTransitionName = '',
|
92 | popupClassName,
|
93 | dropdownClassName,
|
94 | expandIcon,
|
95 | placement,
|
96 | showSearch,
|
97 | allowClear = true,
|
98 | notFoundContent,
|
99 | direction,
|
100 | getPopupContainer,
|
101 | status: customStatus,
|
102 | showArrow,
|
103 | builtinPlacements,
|
104 | style,
|
105 | variant: customVariant
|
106 | } = props,
|
107 | 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"]);
|
108 | const restProps = omit(rest, ['suffixIcon']);
|
109 | const {
|
110 | getPopupContainer: getContextPopupContainer,
|
111 | getPrefixCls,
|
112 | popupOverflow,
|
113 | cascader
|
114 | } = React.useContext(ConfigContext);
|
115 |
|
116 | const {
|
117 | status: contextStatus,
|
118 | hasFeedback,
|
119 | isFormItemInput,
|
120 | feedbackIcon
|
121 | } = React.useContext(FormItemInputContext);
|
122 | const mergedStatus = getMergedStatus(contextStatus, customStatus);
|
123 |
|
124 | if (process.env.NODE_ENV !== 'production') {
|
125 | const warning = devUseWarning('Cascader');
|
126 | warning.deprecated(!dropdownClassName, 'dropdownClassName', 'popupClassName');
|
127 | 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;
|
128 | warning.deprecated(!('bordered' in props), 'bordered', 'variant');
|
129 | }
|
130 |
|
131 | const [prefixCls, cascaderPrefixCls, mergedDirection, renderEmpty] = useBase(customizePrefixCls, direction);
|
132 | const isRtl = mergedDirection === 'rtl';
|
133 | const rootPrefixCls = getPrefixCls();
|
134 | const rootCls = useCSSVarCls(prefixCls);
|
135 | const [wrapSelectCSSVar, hashId, cssVarCls] = useSelectStyle(prefixCls, rootCls);
|
136 | const cascaderRootCls = useCSSVarCls(cascaderPrefixCls);
|
137 | const [wrapCascaderCSSVar] = useStyle(cascaderPrefixCls, cascaderRootCls);
|
138 | const {
|
139 | compactSize,
|
140 | compactItemClassnames
|
141 | } = useCompactItemContext(prefixCls, direction);
|
142 | const [variant, enableVariantCls] = useVariant(customVariant, bordered);
|
143 |
|
144 | const mergedNotFoundContent = notFoundContent || (renderEmpty === null || renderEmpty === void 0 ? void 0 : renderEmpty('Cascader')) || ( React.createElement(DefaultRenderEmpty, {
|
145 | componentName: "Cascader"
|
146 | }));
|
147 |
|
148 | const mergedDropdownClassName = classNames(popupClassName || dropdownClassName, `${cascaderPrefixCls}-dropdown`, {
|
149 | [`${cascaderPrefixCls}-dropdown-rtl`]: mergedDirection === 'rtl'
|
150 | }, rootClassName, rootCls, cascaderRootCls, hashId, cssVarCls);
|
151 |
|
152 | const mergedShowSearch = React.useMemo(() => {
|
153 | if (!showSearch) {
|
154 | return showSearch;
|
155 | }
|
156 | let searchConfig = {
|
157 | render: defaultSearchRender
|
158 | };
|
159 | if (typeof showSearch === 'object') {
|
160 | searchConfig = Object.assign(Object.assign({}, searchConfig), showSearch);
|
161 | }
|
162 | return searchConfig;
|
163 | }, [showSearch]);
|
164 |
|
165 | const mergedSize = useSize(ctx => {
|
166 | var _a;
|
167 | return (_a = customizeSize !== null && customizeSize !== void 0 ? customizeSize : compactSize) !== null && _a !== void 0 ? _a : ctx;
|
168 | });
|
169 |
|
170 | const disabled = React.useContext(DisabledContext);
|
171 | const mergedDisabled = customDisabled !== null && customDisabled !== void 0 ? customDisabled : disabled;
|
172 |
|
173 | const [mergedExpandIcon, loadingIcon] = useColumnIcons(prefixCls, isRtl, expandIcon);
|
174 |
|
175 | const checkable = useCheckable(cascaderPrefixCls, multiple);
|
176 |
|
177 | const showSuffixIcon = useShowArrow(props.suffixIcon, showArrow);
|
178 | const {
|
179 | suffixIcon,
|
180 | removeIcon,
|
181 | clearIcon
|
182 | } = useIcons(Object.assign(Object.assign({}, props), {
|
183 | hasFeedback,
|
184 | feedbackIcon,
|
185 | showSuffixIcon,
|
186 | multiple,
|
187 | prefixCls,
|
188 | componentName: 'Cascader'
|
189 | }));
|
190 |
|
191 | const memoPlacement = React.useMemo(() => {
|
192 | if (placement !== undefined) {
|
193 | return placement;
|
194 | }
|
195 | return isRtl ? 'bottomRight' : 'bottomLeft';
|
196 | }, [placement, isRtl]);
|
197 | const mergedAllowClear = allowClear === true ? {
|
198 | clearIcon
|
199 | } : allowClear;
|
200 |
|
201 | const [zIndex] = useZIndex('SelectLike', (_a = restProps.dropdownStyle) === null || _a === void 0 ? void 0 : _a.zIndex);
|
202 |
|
203 | const renderNode = React.createElement(RcCascader, Object.assign({
|
204 | prefixCls: prefixCls,
|
205 | className: classNames(!customizePrefixCls && cascaderPrefixCls, {
|
206 | [`${prefixCls}-lg`]: mergedSize === 'large',
|
207 | [`${prefixCls}-sm`]: mergedSize === 'small',
|
208 | [`${prefixCls}-rtl`]: isRtl,
|
209 | [`${prefixCls}-${variant}`]: enableVariantCls,
|
210 | [`${prefixCls}-in-form-item`]: isFormItemInput
|
211 | }, getStatusClassNames(prefixCls, mergedStatus, hasFeedback), compactItemClassnames, cascader === null || cascader === void 0 ? void 0 : cascader.className, className, rootClassName, rootCls, cascaderRootCls, hashId, cssVarCls),
|
212 | disabled: mergedDisabled,
|
213 | style: Object.assign(Object.assign({}, cascader === null || cascader === void 0 ? void 0 : cascader.style), style)
|
214 | }, restProps, {
|
215 | builtinPlacements: mergedBuiltinPlacements(builtinPlacements, popupOverflow),
|
216 | direction: mergedDirection,
|
217 | placement: memoPlacement,
|
218 | notFoundContent: mergedNotFoundContent,
|
219 | allowClear: mergedAllowClear,
|
220 | showSearch: mergedShowSearch,
|
221 | expandIcon: mergedExpandIcon,
|
222 | suffixIcon: suffixIcon,
|
223 | removeIcon: removeIcon,
|
224 | loadingIcon: loadingIcon,
|
225 | checkable: checkable,
|
226 | dropdownClassName: mergedDropdownClassName,
|
227 | dropdownPrefixCls: customizePrefixCls || cascaderPrefixCls,
|
228 | dropdownStyle: Object.assign(Object.assign({}, restProps.dropdownStyle), {
|
229 | zIndex
|
230 | }),
|
231 | choiceTransitionName: getTransitionName(rootPrefixCls, '', choiceTransitionName),
|
232 | transitionName: getTransitionName(rootPrefixCls, 'slide-up', transitionName),
|
233 | getPopupContainer: getPopupContainer || getContextPopupContainer,
|
234 | ref: ref
|
235 | }));
|
236 | return wrapCascaderCSSVar(wrapSelectCSSVar(renderNode));
|
237 | });
|
238 | if (process.env.NODE_ENV !== 'production') {
|
239 | Cascader.displayName = 'Cascader';
|
240 | }
|
241 |
|
242 |
|
243 | const PurePanel = genPurePanel(Cascader);
|
244 | Cascader.SHOW_PARENT = SHOW_PARENT;
|
245 | Cascader.SHOW_CHILD = SHOW_CHILD;
|
246 | Cascader.Panel = CascaderPanel;
|
247 | Cascader._InternalPanelDoNotUseOrYouWillBeFired = PurePanel;
|
248 | export default Cascader; |
\ | No newline at end of file |