@kdcloudjs/kdesign 1.6.21 → 1.6.23
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +43 -0
- package/dist/kdesign-complete.less +140 -8
- package/dist/kdesign.css +155 -10
- package/dist/kdesign.css.map +1 -1
- package/dist/kdesign.js +650 -61
- package/dist/kdesign.js.map +1 -1
- package/dist/kdesign.min.css +3 -3
- package/dist/kdesign.min.js +8 -8
- package/dist/kdesign.min.js.map +1 -1
- package/es/cascader/cascader.d.ts +7 -3
- package/es/cascader/cascader.js +243 -37
- package/es/cascader/style/index.css +144 -6
- package/es/cascader/style/index.less +122 -5
- package/es/cascader/style/token.less +3 -0
- package/es/cascader/util.d.ts +26 -0
- package/es/cascader/util.js +301 -0
- package/es/config-provider/compDefaultProps.d.ts +1 -0
- package/es/config-provider/compDefaultProps.js +1 -0
- package/es/date-picker/range-picker.js +8 -1
- package/es/radio/radio.js +1 -0
- package/es/stepper/style/index.css +10 -3
- package/es/stepper/style/index.less +12 -3
- package/es/stepper/style/token.less +3 -0
- package/lib/cascader/cascader.d.ts +7 -3
- package/lib/cascader/cascader.js +280 -56
- package/lib/cascader/style/index.css +144 -6
- package/lib/cascader/style/index.less +122 -5
- package/lib/cascader/style/token.less +3 -0
- package/lib/cascader/util.d.ts +26 -0
- package/lib/cascader/util.js +353 -0
- package/lib/config-provider/compDefaultProps.d.ts +1 -0
- package/lib/config-provider/compDefaultProps.js +1 -0
- package/lib/date-picker/range-picker.js +9 -1
- package/lib/radio/radio.js +1 -0
- package/lib/stepper/style/index.css +10 -3
- package/lib/stepper/style/index.less +12 -3
- package/lib/stepper/style/token.less +3 -0
- package/package.json +1 -1
package/lib/cascader/cascader.js
CHANGED
|
@@ -17,17 +17,21 @@ var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-s
|
|
|
17
17
|
|
|
18
18
|
var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
|
|
19
19
|
|
|
20
|
+
var _stringify = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/json/stringify"));
|
|
21
|
+
|
|
20
22
|
var _splice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/splice"));
|
|
21
23
|
|
|
22
24
|
var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
|
|
23
25
|
|
|
26
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
|
|
27
|
+
|
|
24
28
|
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/toConsumableArray"));
|
|
25
29
|
|
|
26
|
-
var
|
|
30
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
|
|
27
31
|
|
|
28
32
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
|
|
29
33
|
|
|
30
|
-
var
|
|
34
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
31
35
|
|
|
32
36
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
33
37
|
|
|
@@ -45,28 +49,40 @@ var _icon = _interopRequireDefault(require("../icon"));
|
|
|
45
49
|
|
|
46
50
|
var _empty = _interopRequireDefault(require("../empty"));
|
|
47
51
|
|
|
52
|
+
var _checkbox = _interopRequireDefault(require("../checkbox"));
|
|
53
|
+
|
|
54
|
+
var _tag = _interopRequireDefault(require("../tag"));
|
|
55
|
+
|
|
56
|
+
var _util = require("./util");
|
|
57
|
+
|
|
48
58
|
function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
49
59
|
|
|
50
60
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
51
61
|
|
|
52
62
|
var CascaderPlacement = (0, _type.tuple)('topLeft', 'topRight', 'bottomLeft', 'bottomRight');
|
|
53
63
|
exports.CascaderPlacement = CascaderPlacement;
|
|
54
|
-
|
|
55
|
-
|
|
64
|
+
|
|
65
|
+
var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
66
|
+
var _React$useContext = _react.default.useContext(_configProvider.ConfigContext),
|
|
56
67
|
getPrefixCls = _React$useContext.getPrefixCls,
|
|
57
68
|
pkgPrefixCls = _React$useContext.prefixCls,
|
|
58
69
|
userDefaultProps = _React$useContext.compDefaultProps; // 属性需要合并一遍用户定义的默认属性
|
|
59
70
|
|
|
60
71
|
|
|
61
72
|
var allProps = (0, _utils.getCompProps)('Cascader', userDefaultProps, props);
|
|
62
|
-
var
|
|
73
|
+
var mode = allProps.mode,
|
|
74
|
+
style = allProps.style,
|
|
63
75
|
options = allProps.options,
|
|
76
|
+
bordered = allProps.bordered,
|
|
77
|
+
disabled = allProps.disabled,
|
|
64
78
|
children = allProps.children,
|
|
65
79
|
loadData = allProps.loadData,
|
|
80
|
+
clearIcon = allProps.clearIcon,
|
|
66
81
|
className = allProps.className,
|
|
67
82
|
fieldNames = allProps.fieldNames,
|
|
68
83
|
placeholder = allProps.placeholder,
|
|
69
84
|
defaultValue = allProps.defaultValue,
|
|
85
|
+
maxTagPlaceholder = allProps.maxTagPlaceholder,
|
|
70
86
|
displayRender = allProps.displayRender,
|
|
71
87
|
expandTrigger = allProps.expandTrigger,
|
|
72
88
|
changeOnSelect = allProps.changeOnSelect,
|
|
@@ -79,44 +95,65 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
79
95
|
customPrefixcls = allProps.prefixCls; // className前缀
|
|
80
96
|
|
|
81
97
|
var prefixCls = getPrefixCls(pkgPrefixCls, 'cascader', customPrefixcls);
|
|
82
|
-
|
|
83
|
-
var
|
|
98
|
+
|
|
99
|
+
var pickerRef = _react.default.useRef();
|
|
100
|
+
|
|
101
|
+
var triggerRef = _react.default.useRef();
|
|
102
|
+
|
|
103
|
+
var wrapperRef = _react.default.useRef();
|
|
104
|
+
|
|
84
105
|
var mergeRef = ref || pickerRef;
|
|
85
106
|
|
|
86
|
-
var _React$useState =
|
|
107
|
+
var _React$useState = _react.default.useState(!!props.popperVisible || !!props.popupVisible || defaultPopupVisible),
|
|
87
108
|
_React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
|
|
88
109
|
visible = _React$useState2[0],
|
|
89
110
|
setVisible = _React$useState2[1];
|
|
90
111
|
|
|
91
|
-
|
|
112
|
+
_react.default.useEffect(function () {
|
|
92
113
|
setVisible(!!props.popperVisible || !!props.popupVisible);
|
|
93
114
|
}, [props.popperVisible, props.popupVisible]);
|
|
94
115
|
|
|
95
|
-
var _React$useState3 =
|
|
116
|
+
var _React$useState3 = _react.default.useState([options]),
|
|
96
117
|
_React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
|
|
97
118
|
menus = _React$useState4[0],
|
|
98
119
|
setMenus = _React$useState4[1];
|
|
99
120
|
|
|
100
|
-
var _React$useState5 =
|
|
121
|
+
var _React$useState5 = _react.default.useState([]),
|
|
101
122
|
_React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2),
|
|
102
123
|
currentOptions = _React$useState6[0],
|
|
103
124
|
setCurrentOptions = _React$useState6[1];
|
|
104
125
|
|
|
105
|
-
var _React$useState7 =
|
|
126
|
+
var _React$useState7 = _react.default.useState([]),
|
|
106
127
|
_React$useState8 = (0, _slicedToArray2.default)(_React$useState7, 2),
|
|
107
128
|
selectedOptions = _React$useState8[0],
|
|
108
129
|
setSelectedOptions = _React$useState8[1];
|
|
109
130
|
|
|
110
|
-
var _React$useState9 =
|
|
131
|
+
var _React$useState9 = _react.default.useState(props.value || defaultValue || []),
|
|
111
132
|
_React$useState10 = (0, _slicedToArray2.default)(_React$useState9, 2),
|
|
112
133
|
value = _React$useState10[0],
|
|
113
134
|
setValue = _React$useState10[1];
|
|
114
135
|
|
|
115
|
-
|
|
136
|
+
_react.default.useEffect(function () {
|
|
116
137
|
props.value && setValue(props.value);
|
|
117
138
|
}, [props.value]);
|
|
118
|
-
|
|
119
|
-
|
|
139
|
+
|
|
140
|
+
var isMultiple = (0, _react.useMemo)(function () {
|
|
141
|
+
return mode === 'multiple';
|
|
142
|
+
}, [mode]);
|
|
143
|
+
|
|
144
|
+
var _useMemo = (0, _react.useMemo)(function () {
|
|
145
|
+
return (0, _util.flattenAll)(options, []);
|
|
146
|
+
}, [options]),
|
|
147
|
+
flattenData = _useMemo.flattenData,
|
|
148
|
+
keysData = _useMemo.keysData;
|
|
149
|
+
|
|
150
|
+
var _useChecked = (0, _util.useChecked)(value, flattenData, keysData, isMultiple),
|
|
151
|
+
_useChecked2 = (0, _slicedToArray2.default)(_useChecked, 2),
|
|
152
|
+
checkedKeys = _useChecked2[0],
|
|
153
|
+
halfCheckedKeys = _useChecked2[1];
|
|
154
|
+
|
|
155
|
+
_react.default.useEffect(function () {
|
|
156
|
+
if (!isMultiple && value && (options === null || options === void 0 ? void 0 : options.length) > 0) {
|
|
120
157
|
var _currentOptions = [];
|
|
121
158
|
var _menus = [options];
|
|
122
159
|
|
|
@@ -140,18 +177,74 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
140
177
|
setMenus(_menus);
|
|
141
178
|
setCurrentOptions(_currentOptions);
|
|
142
179
|
}
|
|
143
|
-
}, [options, value, selectedOptions, fieldNames]);
|
|
144
|
-
|
|
180
|
+
}, [options, value, selectedOptions, fieldNames, isMultiple]);
|
|
181
|
+
|
|
182
|
+
_react.default.useEffect(function () {
|
|
183
|
+
if (isMultiple && value && (options === null || options === void 0 ? void 0 : options.length) > 0) {
|
|
184
|
+
var _currentOptions2 = [];
|
|
185
|
+
var lastselectedOptions = value[(value === null || value === void 0 ? void 0 : value.length) - 1] || [];
|
|
186
|
+
var _menus2 = [options];
|
|
187
|
+
|
|
188
|
+
var scanOptions = function scanOptions(options) {
|
|
189
|
+
options.forEach(function (option) {
|
|
190
|
+
var _a;
|
|
191
|
+
|
|
192
|
+
if ((0, _includes.default)(lastselectedOptions).call(lastselectedOptions, String(option[fieldNames.value]))) {
|
|
193
|
+
_currentOptions2.push(option);
|
|
194
|
+
|
|
195
|
+
if ((_a = option[fieldNames.children]) === null || _a === void 0 ? void 0 : _a.length) {
|
|
196
|
+
_menus2.push(option[fieldNames.children]);
|
|
197
|
+
|
|
198
|
+
scanOptions(option[fieldNames.children]);
|
|
199
|
+
}
|
|
200
|
+
}
|
|
201
|
+
});
|
|
202
|
+
};
|
|
203
|
+
|
|
204
|
+
scanOptions(options);
|
|
205
|
+
var newMultipleOptions = value === null || value === void 0 ? void 0 : (0, _map.default)(value).call(value, function (item) {
|
|
206
|
+
return Array.isArray(item) ? (0, _map.default)(item).call(item, function (key) {
|
|
207
|
+
return keysData[key];
|
|
208
|
+
}) : [];
|
|
209
|
+
});
|
|
210
|
+
setMenus(_menus2);
|
|
211
|
+
setCurrentOptions(newMultipleOptions);
|
|
212
|
+
}
|
|
213
|
+
}, [options, value, fieldNames, isMultiple]);
|
|
214
|
+
|
|
215
|
+
_react.default.useEffect(function () {
|
|
145
216
|
var _a;
|
|
146
217
|
|
|
147
218
|
if (allProps.autoFocus) {
|
|
148
219
|
(_a = mergeRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
149
220
|
}
|
|
150
221
|
}, [allProps.autoFocus, mergeRef]);
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
222
|
+
|
|
223
|
+
_react.default.useEffect(function () {
|
|
224
|
+
var _a;
|
|
225
|
+
|
|
226
|
+
(_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('mouseup', function (e) {
|
|
227
|
+
var _a;
|
|
228
|
+
|
|
229
|
+
var isCloseBtn = ((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.className.indexOf('kd-tag-close-icon')) > -1;
|
|
230
|
+
|
|
231
|
+
if (isCloseBtn) {
|
|
232
|
+
e.stopPropagation();
|
|
233
|
+
}
|
|
234
|
+
});
|
|
235
|
+
}, []);
|
|
236
|
+
|
|
237
|
+
var labels = (0, _react.useMemo)(function () {
|
|
238
|
+
return !isMultiple ? (0, _map.default)(currentOptions).call(currentOptions, function (_ref) {
|
|
239
|
+
var label = _ref[fieldNames.label];
|
|
240
|
+
return label;
|
|
241
|
+
}) : (0, _map.default)(currentOptions).call(currentOptions, function (option) {
|
|
242
|
+
return (0, _map.default)(option).call(option, function (_ref2) {
|
|
243
|
+
var label = _ref2[fieldNames.label];
|
|
244
|
+
return label;
|
|
245
|
+
});
|
|
246
|
+
});
|
|
247
|
+
}, [currentOptions, fieldNames.label, isMultiple]);
|
|
155
248
|
var allowClear = allProps.allowClear && value.length > 0;
|
|
156
249
|
var locatorProps = {
|
|
157
250
|
style: style,
|
|
@@ -159,7 +252,7 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
159
252
|
className: (0, _classnames.default)("".concat(prefixCls, "-picker"), className, {
|
|
160
253
|
expand: visible,
|
|
161
254
|
allowClear: allowClear,
|
|
162
|
-
disabled:
|
|
255
|
+
disabled: disabled
|
|
163
256
|
})
|
|
164
257
|
};
|
|
165
258
|
|
|
@@ -171,11 +264,11 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
171
264
|
value: value,
|
|
172
265
|
placeholder: placeholder,
|
|
173
266
|
readOnly: true,
|
|
174
|
-
disabled:
|
|
267
|
+
disabled: disabled,
|
|
175
268
|
className: (0, _classnames.default)("".concat(prefixCls, "-picker-input"), {
|
|
176
269
|
expand: visible
|
|
177
270
|
}),
|
|
178
|
-
suffix: props.suffixIcon || /*#__PURE__*/
|
|
271
|
+
suffix: props.suffixIcon || /*#__PURE__*/_react.default.createElement(_icon.default, {
|
|
179
272
|
type: "arrow-down",
|
|
180
273
|
className: (0, _classnames.default)({
|
|
181
274
|
expand: visible
|
|
@@ -183,45 +276,163 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
183
276
|
})
|
|
184
277
|
};
|
|
185
278
|
|
|
186
|
-
if (
|
|
279
|
+
if (bordered) {
|
|
187
280
|
inputProps.borderType = 'bordered';
|
|
188
281
|
}
|
|
189
282
|
|
|
190
|
-
var
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
283
|
+
var renderSuffix = function renderSuffix() {
|
|
284
|
+
var _classNames;
|
|
285
|
+
|
|
286
|
+
var suffixIcon = allProps.suffixIcon; // 选择器下拉icon样式
|
|
287
|
+
|
|
288
|
+
var arrowIconCls = (0, _classnames.default)((_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-icon-arrow"), true), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-icon-arrow-up"), visible), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-icon-arrow-down"), !visible), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-icon-arrow-focus"), visible), _classNames));
|
|
289
|
+
var iconShow = allowClear && !disabled && currentOptions.length > 0;
|
|
290
|
+
var clearIconCls = (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(prefixCls, "-icon-clear"), true));
|
|
291
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, iconShow && /*#__PURE__*/_react.default.createElement("span", {
|
|
292
|
+
onClick: handleClear,
|
|
293
|
+
className: clearIconCls
|
|
294
|
+
}, /*#__PURE__*/_react.default.createElement(_icon.default, {
|
|
295
|
+
type: "close-solid"
|
|
296
|
+
}) || clearIcon), /*#__PURE__*/_react.default.createElement("span", {
|
|
297
|
+
className: arrowIconCls
|
|
298
|
+
}, suffixIcon || /*#__PURE__*/_react.default.createElement(_icon.default, {
|
|
299
|
+
type: "arrow-down"
|
|
300
|
+
})));
|
|
301
|
+
};
|
|
302
|
+
|
|
303
|
+
var handleMaxTagHolder = (0, _react.useCallback)(function () {
|
|
304
|
+
if (typeof maxTagPlaceholder === 'function') {
|
|
305
|
+
return /*#__PURE__*/_react.default.createElement(_tag.default, {
|
|
306
|
+
type: "edit",
|
|
307
|
+
disabled: disabled
|
|
308
|
+
}, maxTagPlaceholder(currentOptions));
|
|
309
|
+
} else {
|
|
310
|
+
return /*#__PURE__*/_react.default.createElement(_tag.default, {
|
|
311
|
+
type: "edit",
|
|
312
|
+
disabled: disabled
|
|
313
|
+
}, maxTagPlaceholder);
|
|
314
|
+
}
|
|
315
|
+
}, [disabled, maxTagPlaceholder, currentOptions]);
|
|
316
|
+
|
|
317
|
+
var handleRemove = function handleRemove(e, opt) {
|
|
318
|
+
e.stopPropagation();
|
|
319
|
+
onMultipleChecked((0, _toConsumableArray2.default)(opt).pop(), false);
|
|
320
|
+
};
|
|
321
|
+
|
|
322
|
+
var renderMultiple = function renderMultiple() {
|
|
323
|
+
var _classNames3, _classNames4;
|
|
324
|
+
|
|
325
|
+
var maxTagCount = allProps.maxTagCount,
|
|
326
|
+
maxTagPlaceholder = allProps.maxTagPlaceholder;
|
|
327
|
+
var multipleCls = (0, _classnames.default)((_classNames3 = {
|
|
328
|
+
disabled: disabled
|
|
329
|
+
}, (0, _defineProperty2.default)(_classNames3, "".concat(prefixCls, "-multiple"), true), (0, _defineProperty2.default)(_classNames3, "".concat(prefixCls, "-bordered"), bordered), _classNames3));
|
|
330
|
+
var itemCls = (0, _classnames.default)((_classNames4 = {}, (0, _defineProperty2.default)(_classNames4, "".concat(prefixCls, "-selection-item"), true), (0, _defineProperty2.default)(_classNames4, "".concat(prefixCls, "-tag-describe"), true), _classNames4));
|
|
331
|
+
var TagStyle = {
|
|
332
|
+
margin: '2px 8px 2px 0',
|
|
333
|
+
maxWidth: '100%'
|
|
334
|
+
};
|
|
335
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
336
|
+
className: multipleCls,
|
|
337
|
+
ref: triggerRef,
|
|
338
|
+
style: style
|
|
339
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
340
|
+
className: "".concat(prefixCls, "-multiple-wrapper"),
|
|
341
|
+
ref: wrapperRef
|
|
342
|
+
}, Array.isArray(currentOptions) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (0, _map.default)(currentOptions).call(currentOptions, function (option, index) {
|
|
343
|
+
return /*#__PURE__*/_react.default.createElement("span", {
|
|
344
|
+
key: (0, _stringify.default)(labels[index]),
|
|
345
|
+
className: (0, _classnames.default)("".concat(prefixCls, "-selection-tag"))
|
|
346
|
+
}, (!maxTagCount || index <= maxTagCount - 1) && /*#__PURE__*/_react.default.createElement(_tag.default, {
|
|
347
|
+
type: "edit",
|
|
348
|
+
style: TagStyle,
|
|
349
|
+
closable: true,
|
|
350
|
+
onClose: function onClose(e) {
|
|
351
|
+
return handleRemove(e, option);
|
|
352
|
+
}
|
|
353
|
+
}, displayRender(labels[index], option)));
|
|
354
|
+
}), maxTagCount && currentOptions.length > maxTagCount ? maxTagPlaceholder ? handleMaxTagHolder() : /*#__PURE__*/_react.default.createElement("span", {
|
|
355
|
+
className: itemCls
|
|
356
|
+
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
357
|
+
className: "".concat(prefixCls, "-tag-describe-content")
|
|
358
|
+
}, "\u5171", currentOptions.length, "\u9879")) : null), /*#__PURE__*/_react.default.createElement("span", {
|
|
359
|
+
className: "".concat(prefixCls, "-placeholder")
|
|
360
|
+
}, !currentOptions.length && placeholder), /*#__PURE__*/_react.default.createElement("span", {
|
|
361
|
+
className: "".concat(prefixCls, "-suffix")
|
|
362
|
+
}, renderSuffix())));
|
|
363
|
+
};
|
|
364
|
+
|
|
365
|
+
var renderSingle = function renderSingle() {
|
|
366
|
+
return /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({}, locatorProps, {
|
|
367
|
+
ref: mergeRef
|
|
368
|
+
}), _react.default.Children.count(children) === 1 && children.type ? /*#__PURE__*/_react.default.cloneElement(children, {
|
|
369
|
+
ref: triggerRef
|
|
370
|
+
}) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
|
|
371
|
+
ref: triggerRef
|
|
372
|
+
}, /*#__PURE__*/_react.default.createElement(_input.default, (0, _extends2.default)({}, inputProps)), /*#__PURE__*/_react.default.createElement("span", {
|
|
373
|
+
className: "".concat(prefixCls, "-picker-label")
|
|
374
|
+
}, (labels === null || labels === void 0 ? void 0 : labels.length) ? displayRender(labels, currentOptions) : '')), allowClear && /*#__PURE__*/_react.default.createElement(_icon.default, {
|
|
375
|
+
type: "close-solid",
|
|
376
|
+
className: "".concat(prefixCls, "-picker-close"),
|
|
377
|
+
onClick: handleClear
|
|
378
|
+
})));
|
|
379
|
+
};
|
|
380
|
+
|
|
381
|
+
var cascaderLocator = isMultiple ? renderMultiple() : renderSingle();
|
|
203
382
|
|
|
204
383
|
var onExpend = function onExpend(index, opt, opts) {
|
|
205
384
|
(0, _splice.default)(selectedOptions).call(selectedOptions, index, selectedOptions.length - index, opt);
|
|
206
385
|
setSelectedOptions(selectedOptions);
|
|
386
|
+
|
|
387
|
+
if (!(opts === null || opts === void 0 ? void 0 : opts.length) && opt.isLeaf !== false || changeOnSelect) {
|
|
388
|
+
onChange(selectedOptions);
|
|
389
|
+
}
|
|
390
|
+
|
|
391
|
+
!(opts === null || opts === void 0 ? void 0 : opts.length) && opt.isLeaf !== false && setVisible(false);
|
|
207
392
|
var newMenus = (0, _toConsumableArray2.default)(menus);
|
|
208
393
|
|
|
209
394
|
if ((opts === null || opts === void 0 ? void 0 : opts.length) || opt.isLeaf === false) {
|
|
210
395
|
(0, _splice.default)(newMenus).call(newMenus, index + 1, newMenus.length - index + 1, opts);
|
|
211
396
|
}
|
|
212
397
|
|
|
213
|
-
|
|
214
|
-
|
|
398
|
+
setMenus(newMenus);
|
|
399
|
+
loadData && opt.isLeaf === false && !(opts === null || opts === void 0 ? void 0 : opts.length) && loadData(selectedOptions);
|
|
400
|
+
};
|
|
401
|
+
|
|
402
|
+
var onMultipleExpend = function onMultipleExpend(index, opt, opts) {
|
|
403
|
+
(0, _splice.default)(selectedOptions).call(selectedOptions, index, selectedOptions.length - index, opt);
|
|
404
|
+
setSelectedOptions(selectedOptions);
|
|
405
|
+
var newMenus = (0, _toConsumableArray2.default)(menus);
|
|
406
|
+
|
|
407
|
+
if ((opts === null || opts === void 0 ? void 0 : opts.length) || opt.isLeaf === false) {
|
|
408
|
+
(0, _splice.default)(newMenus).call(newMenus, index + 1, newMenus.length - index + 1, opts);
|
|
215
409
|
}
|
|
216
410
|
|
|
217
|
-
!(opts === null || opts === void 0 ? void 0 : opts.length) && opt.isLeaf !== false && setVisible(false);
|
|
218
411
|
setMenus(newMenus);
|
|
219
412
|
loadData && opt.isLeaf === false && !(opts === null || opts === void 0 ? void 0 : opts.length) && loadData(selectedOptions);
|
|
220
413
|
};
|
|
221
414
|
|
|
415
|
+
var onMultipleChecked = function onMultipleChecked(opt, checked) {
|
|
416
|
+
var _a;
|
|
417
|
+
|
|
418
|
+
var checkState = (0, _util.getAllCheckedKeys)(opt.value, checked, checkedKeys, keysData, halfCheckedKeys);
|
|
419
|
+
var newValue = (0, _util.getMultipleCheckValue)(value, opt, checked, flattenData, checkState.checkedKeys);
|
|
420
|
+
var newMultipleOptions = newValue === null || newValue === void 0 ? void 0 : (0, _map.default)(newValue).call(newValue, function (item) {
|
|
421
|
+
return Array.isArray(item) ? (0, _map.default)(item).call(item, function (key) {
|
|
422
|
+
return keysData[key];
|
|
423
|
+
}) : [];
|
|
424
|
+
});
|
|
425
|
+
|
|
426
|
+
if (!('value' in props)) {
|
|
427
|
+
setValue(newValue);
|
|
428
|
+
}
|
|
429
|
+
|
|
430
|
+
(_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, newValue, newMultipleOptions);
|
|
431
|
+
};
|
|
432
|
+
|
|
222
433
|
var onChange = function onChange(selectedOptions) {
|
|
223
|
-
var selectedValue = (0, _map.default)(selectedOptions).call(selectedOptions, function (
|
|
224
|
-
var value =
|
|
434
|
+
var selectedValue = (0, _map.default)(selectedOptions).call(selectedOptions, function (_ref3) {
|
|
435
|
+
var value = _ref3[fieldNames.value];
|
|
225
436
|
return value;
|
|
226
437
|
});
|
|
227
438
|
setCurrentOptions(selectedOptions);
|
|
@@ -236,8 +447,8 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
236
447
|
visible && setSelectedOptions((0, _slice.default)(currentOptions).call(currentOptions, 0));
|
|
237
448
|
};
|
|
238
449
|
|
|
239
|
-
var cascaderMenus = /*#__PURE__*/
|
|
240
|
-
return /*#__PURE__*/
|
|
450
|
+
var cascaderMenus = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (options === null || options === void 0 ? void 0 : options.length) ? (menus === null || menus === void 0 ? void 0 : menus.length) && (0, _map.default)(menus).call(menus, function (opts, index) {
|
|
451
|
+
return /*#__PURE__*/_react.default.createElement("ul", {
|
|
241
452
|
key: index,
|
|
242
453
|
className: "".concat(prefixCls, "-menu")
|
|
243
454
|
}, (opts === null || opts === void 0 ? void 0 : opts.length) && (0, _map.default)(opts).call(opts, function (opt) {
|
|
@@ -247,35 +458,47 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
247
458
|
label = opt[fieldNames.label],
|
|
248
459
|
children = opt[fieldNames.children];
|
|
249
460
|
var expendEvent = expandTrigger === 'click' || !(children && children.length) ? 'onClick' : 'onMouseEnter';
|
|
461
|
+
var selected = selectedOptions[index] && selectedOptions[index][fieldNames.value] === value;
|
|
250
462
|
var optionProps = {
|
|
251
463
|
role: 'menuitem',
|
|
252
464
|
className: (0, _classnames.default)("".concat(prefixCls, "-menu-item"), {
|
|
253
465
|
disabled: opt.disabled,
|
|
254
466
|
last: !(children === null || children === void 0 ? void 0 : children.length) && isLeaf !== false,
|
|
255
|
-
selected:
|
|
467
|
+
selected: selected
|
|
256
468
|
})
|
|
257
469
|
};
|
|
258
470
|
|
|
259
471
|
if (!opt.disabled) {
|
|
260
|
-
optionProps[expendEvent] = onExpend.bind(null, index, opt, children);
|
|
472
|
+
optionProps[expendEvent] = isMultiple ? onMultipleExpend.bind(null, index, opt, children) : onExpend.bind(null, index, opt, children);
|
|
261
473
|
}
|
|
262
474
|
|
|
263
|
-
|
|
264
|
-
key: value
|
|
265
|
-
}, optionProps, {
|
|
266
|
-
title: label
|
|
267
|
-
}), /*#__PURE__*/React.createElement("span", {
|
|
475
|
+
var node = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
|
|
268
476
|
className: "".concat(prefixCls, "-menu-item-label")
|
|
269
|
-
}, label), loading ? /*#__PURE__*/
|
|
477
|
+
}, label), loading ? /*#__PURE__*/_react.default.createElement(_icon.default, {
|
|
270
478
|
type: "loadding-circle",
|
|
271
479
|
spin: true
|
|
272
|
-
}) : ((children === null || children === void 0 ? void 0 : children.length) || isLeaf === false) && (props.expandIcon || /*#__PURE__*/
|
|
480
|
+
}) : ((children === null || children === void 0 ? void 0 : children.length) || isLeaf === false) && (props.expandIcon || /*#__PURE__*/_react.default.createElement(_icon.default, {
|
|
273
481
|
type: "arrow-right"
|
|
274
482
|
})));
|
|
483
|
+
|
|
484
|
+
return /*#__PURE__*/_react.default.createElement("li", (0, _extends2.default)({
|
|
485
|
+
key: value
|
|
486
|
+
}, optionProps, {
|
|
487
|
+
title: label
|
|
488
|
+
}), isMultiple ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_checkbox.default, {
|
|
489
|
+
checked: (0, _util.getChecked)(checkedKeys, value),
|
|
490
|
+
indeterminate: (0, _util.getHalfChecked)(halfCheckedKeys, value),
|
|
491
|
+
disabled: opt.disabled,
|
|
492
|
+
onChange: function onChange(e) {
|
|
493
|
+
return onMultipleChecked(opt, e.target.checked);
|
|
494
|
+
},
|
|
495
|
+
className: "".concat(prefixCls, "-checkbox")
|
|
496
|
+
}), node) : node);
|
|
275
497
|
}));
|
|
276
|
-
}) : /*#__PURE__*/
|
|
498
|
+
}) : /*#__PURE__*/_react.default.createElement(_empty.default, {
|
|
277
499
|
description: notFoundContent
|
|
278
500
|
}));
|
|
501
|
+
|
|
279
502
|
var cascaderPopper = dropdownRender(cascaderMenus);
|
|
280
503
|
var popperProps = (0, _extends2.default)((0, _extends2.default)({}, allProps), {
|
|
281
504
|
gap: 4,
|
|
@@ -292,6 +515,7 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
292
515
|
});
|
|
293
516
|
return (0, _usePopper.default)(cascaderLocator, cascaderPopper, popperProps);
|
|
294
517
|
});
|
|
518
|
+
|
|
295
519
|
Cascader.displayName = 'Cascader';
|
|
296
520
|
var _default = Cascader;
|
|
297
521
|
exports.default = _default;
|