@zykj2024/much-library 1.1.6-beta.1 → 1.1.7-beta.1

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.
Files changed (49) hide show
  1. package/dist/McContainer/demo/generic.d.ts +8 -0
  2. package/dist/McContainer/demo/generic.js +91 -0
  3. package/dist/McContainer/index.d.ts +147 -108
  4. package/dist/McContainer/index.js +16 -7
  5. package/dist/McEllipsis/demo/base.d.ts +6 -0
  6. package/dist/McEllipsis/demo/base.js +22 -0
  7. package/dist/McEllipsis/demo/middle.d.ts +6 -0
  8. package/dist/McEllipsis/demo/middle.js +24 -0
  9. package/dist/McEllipsis/demo/table.d.ts +5 -0
  10. package/dist/McEllipsis/demo/table.js +93 -0
  11. package/dist/McEllipsis/demo/tooltip-size.d.ts +6 -0
  12. package/dist/McEllipsis/demo/tooltip-size.js +20 -0
  13. package/dist/McEllipsis/demo/tooltip.d.ts +6 -0
  14. package/dist/McEllipsis/demo/tooltip.js +53 -0
  15. package/dist/McEllipsis/index.css +4 -0
  16. package/dist/McEllipsis/index.d.ts +40 -0
  17. package/dist/McEllipsis/index.js +115 -0
  18. package/dist/McGroupPanel/index.css +8 -3
  19. package/dist/McGroupPanel/index.d.ts +1 -0
  20. package/dist/McGroupPanel/index.js +156 -141
  21. package/dist/McInputNumber/index.d.ts +3 -0
  22. package/dist/McInputNumber/index.js +16 -9
  23. package/dist/McListSelect/comps/ListSelect.d.ts +67 -0
  24. package/dist/McListSelect/comps/ListSelect.js +289 -0
  25. package/dist/McListSelect/comps/ListSelectPanel.d.ts +138 -0
  26. package/dist/McListSelect/comps/ListSelectPanel.js +451 -0
  27. package/dist/McListSelect/comps/SelectedItem.d.ts +17 -0
  28. package/dist/McListSelect/comps/SelectedItem.js +76 -0
  29. package/dist/McListSelect/demo/base.d.ts +6 -0
  30. package/dist/McListSelect/demo/base.js +125 -0
  31. package/dist/McListSelect/demo/inexistent.d.ts +6 -0
  32. package/dist/McListSelect/demo/inexistent.js +111 -0
  33. package/dist/McListSelect/demo/layout.d.ts +6 -0
  34. package/dist/McListSelect/demo/layout.js +70 -0
  35. package/dist/McListSelect/demo/other.d.ts +6 -0
  36. package/dist/McListSelect/demo/other.js +68 -0
  37. package/dist/McListSelect/demo/panel-inexistent.d.ts +6 -0
  38. package/dist/McListSelect/demo/panel-inexistent.js +86 -0
  39. package/dist/McListSelect/index.css +273 -0
  40. package/dist/McListSelect/index.d.ts +10 -0
  41. package/dist/McListSelect/index.js +5 -0
  42. package/dist/McListSelect/mock/index.d.ts +1 -0
  43. package/dist/McListSelect/mock/index.js +27 -0
  44. package/dist/McModalProvider/index.d.ts +2 -2
  45. package/dist/McThemeConfig/layoutStyle.d.ts +1 -1
  46. package/dist/McThemeConfig/layoutStyle.js +1 -1
  47. package/dist/index.d.ts +3 -0
  48. package/dist/index.js +3 -0
  49. package/package.json +3 -1
@@ -0,0 +1,451 @@
1
+ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
2
+ import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
3
+ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
4
+ import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
5
+ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
6
+ import _typeof from "@babel/runtime/helpers/esm/typeof";
7
+ import { DndContext } from '@dnd-kit/core';
8
+ import { arrayMove, SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
9
+ import { useAsync } from '@zykj2024/much-hooks';
10
+ import { Button, Checkbox, Empty, Pagination, Spin } from 'antd';
11
+ import classNames from 'classnames';
12
+ import { McEllipsis, McInput } from "../..";
13
+ import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
14
+ import "../index.css";
15
+ import SelectedItem from "./SelectedItem";
16
+ import { jsx as _jsx } from "react/jsx-runtime";
17
+ import { Fragment as _Fragment } from "react/jsx-runtime";
18
+ import { jsxs as _jsxs } from "react/jsx-runtime";
19
+ export var isLabelInValue = function isLabelInValue(value) {
20
+ return _typeof(value) === 'object' && value !== null && 'value' in value;
21
+ };
22
+
23
+ /**
24
+ * 列表选择面板组件属性
25
+ */
26
+
27
+ var ListSelectPanel = /*#__PURE__*/forwardRef(function (props, ref) {
28
+ var _props$title = props.title,
29
+ title = _props$title === void 0 ? '可选项' : _props$title,
30
+ options = props.options,
31
+ fetchOptions = props.fetchOptions,
32
+ _props$pageSize = props.pageSize,
33
+ pageSize = _props$pageSize === void 0 ? 20 : _props$pageSize,
34
+ extra = props.extra,
35
+ _props$immediateInit = props.immediateInit,
36
+ immediateInit = _props$immediateInit === void 0 ? true : _props$immediateInit,
37
+ _props$disabled = props.disabled,
38
+ disabled = _props$disabled === void 0 ? false : _props$disabled,
39
+ _props$labelInValue = props.labelInValue,
40
+ labelInValue = _props$labelInValue === void 0 ? false : _props$labelInValue,
41
+ _props$allowClear = props.allowClear,
42
+ allowClear = _props$allowClear === void 0 ? true : _props$allowClear,
43
+ _props$inexistent = props.inexistent,
44
+ inexistent = _props$inexistent === void 0 ? false : _props$inexistent,
45
+ _props$selectedLayout = props.selectedLayout,
46
+ selectedLayout = _props$selectedLayout === void 0 ? 'block' : _props$selectedLayout,
47
+ value = props.value,
48
+ onChange = props.onChange,
49
+ style = props.style,
50
+ className = props.className;
51
+ var inexistent0 = fetchOptions ? false : inexistent;
52
+ var _ref = typeof inexistent0 === 'boolean' ? {} : inexistent0,
53
+ _ref$text = _ref.text,
54
+ text = _ref$text === void 0 ? '不存在' : _ref$text,
55
+ _ref$color = _ref.color,
56
+ color = _ref$color === void 0 ? '#ff4d4f' : _ref$color,
57
+ _ref$reserved = _ref.reserved,
58
+ reserved = _ref$reserved === void 0 ? false : _ref$reserved;
59
+ var _useState = useState([]),
60
+ _useState2 = _slicedToArray(_useState, 2),
61
+ selected = _useState2[0],
62
+ setSelected = _useState2[1];
63
+ var _useState3 = useState(),
64
+ _useState4 = _slicedToArray(_useState3, 2),
65
+ keyword = _useState4[0],
66
+ setKeyword = _useState4[1];
67
+ var _useState5 = useState({}),
68
+ _useState6 = _slicedToArray(_useState5, 2),
69
+ valueMap = _useState6[0],
70
+ setValueMap = _useState6[1];
71
+ var _useState7 = useState({}),
72
+ _useState8 = _slicedToArray(_useState7, 2),
73
+ inexistentValueMap = _useState8[0],
74
+ setInexistentValueMap = _useState8[1];
75
+ var optionsRef = useRef();
76
+ var initFlag = useRef(false);
77
+
78
+ /* 备选列表搜索方法 */
79
+ var _useAsync = useAsync( /*#__PURE__*/function () {
80
+ var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(params) {
81
+ var _optionsRef$current;
82
+ var keyword, current, options1, total1, _yield$fetchOptions, data, _total, filteredOptions;
83
+ return _regeneratorRuntime().wrap(function _callee$(_context) {
84
+ while (1) switch (_context.prev = _context.next) {
85
+ case 0:
86
+ keyword = params.keyword, current = params.current;
87
+ options1 = [], total1 = 0;
88
+ if (!fetchOptions) {
89
+ _context.next = 18;
90
+ break;
91
+ }
92
+ _context.prev = 3;
93
+ _context.next = 6;
94
+ return fetchOptions({
95
+ current: current,
96
+ pageSize: pageSize,
97
+ keyword: keyword,
98
+ extra: extra
99
+ });
100
+ case 6:
101
+ _yield$fetchOptions = _context.sent;
102
+ data = _yield$fetchOptions.data;
103
+ _total = _yield$fetchOptions.total;
104
+ options1 = data;
105
+ total1 = _total;
106
+ // 更新value映射集合
107
+ setValueMap(function (os) {
108
+ var map = _objectSpread({}, os);
109
+ data === null || data === void 0 || data.forEach(function (item) {
110
+ return map[item.value] = item;
111
+ });
112
+ return map;
113
+ });
114
+ _context.next = 16;
115
+ break;
116
+ case 14:
117
+ _context.prev = 14;
118
+ _context.t0 = _context["catch"](3);
119
+ case 16:
120
+ _context.next = 21;
121
+ break;
122
+ case 18:
123
+ // 非异步查询
124
+ filteredOptions = (options || []).filter(function (_ref3) {
125
+ var label = _ref3.label;
126
+ return keyword ? label.includes(keyword) : true;
127
+ });
128
+ options1 = filteredOptions.slice((current - 1) * pageSize, current * pageSize);
129
+ total1 = filteredOptions.length;
130
+ case 21:
131
+ // 滚动到顶部
132
+ if ((_optionsRef$current = optionsRef.current) !== null && _optionsRef$current !== void 0 && _optionsRef$current.scrollTop) optionsRef.current.scrollTop = 0;
133
+ return _context.abrupt("return", {
134
+ options0: options1,
135
+ current: current,
136
+ total: total1
137
+ });
138
+ case 23:
139
+ case "end":
140
+ return _context.stop();
141
+ }
142
+ }, _callee, null, [[3, 14]]);
143
+ }));
144
+ return function (_x) {
145
+ return _ref2.apply(this, arguments);
146
+ };
147
+ }(), {
148
+ manual: true
149
+ }),
150
+ loading = _useAsync.loading,
151
+ search = _useAsync.run,
152
+ _useAsync$data = _useAsync.data,
153
+ _useAsync$data2 = _useAsync$data === void 0 ? {} : _useAsync$data,
154
+ _useAsync$data2$optio = _useAsync$data2.options0,
155
+ options0 = _useAsync$data2$optio === void 0 ? [] : _useAsync$data2$optio,
156
+ _useAsync$data2$curre = _useAsync$data2.current,
157
+ current = _useAsync$data2$curre === void 0 ? 1 : _useAsync$data2$curre,
158
+ _useAsync$data2$total = _useAsync$data2.total,
159
+ total = _useAsync$data2$total === void 0 ? 0 : _useAsync$data2$total;
160
+
161
+ // 全选
162
+ var checkall0 = useMemo(function () {
163
+ return !!options0.length && options0.every(function (_ref4) {
164
+ var value = _ref4.value;
165
+ return selected.includes(value);
166
+ });
167
+ }, [options0, selected]);
168
+ // 半选
169
+ var indeterminate0 = useMemo(function () {
170
+ return !checkall0 && options0.some(function (_ref5) {
171
+ var value = _ref5.value;
172
+ return selected.includes(value);
173
+ });
174
+ }, [checkall0, options0, selected]);
175
+
176
+ /* 获取不存在值映射集合 */
177
+ var getInexistentValueMap = function getInexistentValueMap() {
178
+ if (!!(value !== null && value !== void 0 && value.length) && !!(options !== null && options !== void 0 && options.length)) {
179
+ var inexistentMap1 = {};
180
+ var existentMap1 = {};
181
+ options.forEach(function (item) {
182
+ return existentMap1[item.value] = item;
183
+ });
184
+ value.forEach(function (item) {
185
+ var v = isLabelInValue(item) ? item.value : item;
186
+ var item1 = isLabelInValue(item) ? item : {
187
+ value: v,
188
+ label: v
189
+ };
190
+ if (!existentMap1[v]) inexistentMap1[v] = item1;
191
+ });
192
+ setInexistentValueMap(inexistentMap1);
193
+ }
194
+ };
195
+
196
+ /* 回显 */
197
+ var echo = function echo() {
198
+ setSelected((value === null || value === void 0 ? void 0 : value.map(function (item) {
199
+ return isLabelInValue(item) ? item.value : item;
200
+ })) || []);
201
+ if (fetchOptions) {
202
+ // 异步查询时,更新value映射集合
203
+ setValueMap(function (os) {
204
+ var map = _objectSpread({}, os);
205
+ value === null || value === void 0 || value.forEach(function (item) {
206
+ var v = isLabelInValue(item) ? item.value : item;
207
+ var item1 = isLabelInValue(item) ? item : {
208
+ value: v,
209
+ label: v
210
+ };
211
+ // 若不存在时则使用value内的数据
212
+ map[v] = map[v] || item1;
213
+ });
214
+ return map;
215
+ });
216
+ } else {
217
+ // 非异步查询时,获取不存在值映射集合
218
+ getInexistentValueMap();
219
+ }
220
+ };
221
+
222
+ /* 监听value变化,触发回显 */
223
+ useEffect(function () {
224
+ echo();
225
+ }, [value]);
226
+
227
+ /* 初始化(重置查询并获取值映射集合) */
228
+ var init = function init() {
229
+ if (immediateInit || initFlag.current) {
230
+ setKeyword(undefined);
231
+ search({
232
+ keyword: undefined,
233
+ current: 1
234
+ });
235
+ // 非异步查询时,获取value映射集合和不存在值映射集合
236
+ if (!fetchOptions) {
237
+ setValueMap(function () {
238
+ var map = {};
239
+ options === null || options === void 0 || options.forEach(function (item) {
240
+ return map[item.value] = item;
241
+ });
242
+ return map;
243
+ });
244
+ getInexistentValueMap();
245
+ }
246
+ }
247
+ initFlag.current = true;
248
+ };
249
+
250
+ /* 监听options变化,触发初始化 */
251
+ useEffect(function () {
252
+ init();
253
+ }, [options, extra]);
254
+
255
+ /* 改变值的方法 */
256
+ var changeHandle = function changeHandle(v) {
257
+ // 若无需保留不存在值,则将不存在的项移除
258
+ var v1 = v.filter(function (i) {
259
+ return reserved ? true : !!valueMap[i];
260
+ });
261
+ !props.hasOwnProperty('value') && setSelected(v1);
262
+ onChange === null || onChange === void 0 || onChange(!!v1.length ? v1.map(function (i) {
263
+ return labelInValue ? valueMap[i] || inexistentValueMap[i] : i;
264
+ }) : undefined);
265
+ };
266
+
267
+ /* 拖拽结束事件 */
268
+ var dragEnd = function dragEnd(dragItem) {
269
+ var active = dragItem.active,
270
+ over = dragItem.over;
271
+ if (!active || !over) return;
272
+ if (active.id !== over.id) {
273
+ var selected1 = _toConsumableArray(selected);
274
+ var activeIndex = selected1.findIndex(function (v) {
275
+ return v === active.id;
276
+ });
277
+ var overIndex = selected1.findIndex(function (v) {
278
+ return v === over.id;
279
+ });
280
+ changeHandle(arrayMove(selected1, activeIndex, overIndex));
281
+ }
282
+ };
283
+ useImperativeHandle(ref, function () {
284
+ return {
285
+ init: init
286
+ };
287
+ });
288
+ return /*#__PURE__*/_jsx(Spin, {
289
+ spinning: loading,
290
+ children: /*#__PURE__*/_jsxs("div", {
291
+ style: style,
292
+ className: classNames('mc-list-select-panel', className),
293
+ children: [/*#__PURE__*/_jsxs("div", {
294
+ className: "mc-list-select-panel__card mc-list-select-panel__card__left",
295
+ children: [/*#__PURE__*/_jsx("div", {
296
+ className: "mc-list-select-panel__card__header",
297
+ children: /*#__PURE__*/_jsx("span", {
298
+ className: "mc-list-select-panel__title",
299
+ children: title
300
+ })
301
+ }), /*#__PURE__*/_jsx("div", {
302
+ className: "mc-list-select-panel__card__search",
303
+ children: /*#__PURE__*/_jsx(McInput.Search, {
304
+ value: keyword,
305
+ onChange: setKeyword,
306
+ onSearch: function onSearch() {
307
+ return search({
308
+ keyword: keyword,
309
+ current: 1
310
+ });
311
+ },
312
+ onClear: function onClear() {
313
+ return search({
314
+ keyword: undefined,
315
+ current: 1
316
+ });
317
+ },
318
+ disabled: disabled
319
+ })
320
+ }), /*#__PURE__*/_jsx("div", {
321
+ className: "mc-list-select-panel__card__checkall",
322
+ children: !!options0.length && /*#__PURE__*/_jsx(Checkbox, {
323
+ className: "mc-list-select-panel__card__checkall__inner",
324
+ checked: checkall0,
325
+ indeterminate: indeterminate0,
326
+ onChange: function onChange(e) {
327
+ return changeHandle(e.target.checked ? Array.from(new Set([].concat(_toConsumableArray(selected), _toConsumableArray(options0.filter(function (_ref6) {
328
+ var disabled = _ref6.disabled;
329
+ return !disabled;
330
+ }).map(function (_ref7) {
331
+ var value = _ref7.value;
332
+ return value;
333
+ }))))) : _toConsumableArray(selected).filter(function (i) {
334
+ return !options0.some(function (_ref8) {
335
+ var value = _ref8.value;
336
+ return value === i;
337
+ });
338
+ }));
339
+ },
340
+ disabled: disabled,
341
+ children: "\u5168\u9009"
342
+ })
343
+ }), !!options0.length ? /*#__PURE__*/_jsxs(_Fragment, {
344
+ children: [/*#__PURE__*/_jsx("div", {
345
+ ref: optionsRef,
346
+ className: "mc-list-select-panel__options",
347
+ children: options0.map(function (item) {
348
+ return /*#__PURE__*/_jsx(Checkbox, {
349
+ className: "mc-list-select-panel__option",
350
+ checked: selected.includes(item.value),
351
+ onChange: function onChange(e) {
352
+ return changeHandle(e.target.checked ? [].concat(_toConsumableArray(selected), [item.value]) : selected.filter(function (i) {
353
+ return i !== item.value;
354
+ }));
355
+ },
356
+ disabled: disabled || item.disabled,
357
+ children: /*#__PURE__*/_jsx(McEllipsis, {
358
+ text: item.label,
359
+ middle: true
360
+ })
361
+ }, item.value);
362
+ })
363
+ }), /*#__PURE__*/_jsx("div", {
364
+ className: "mc-list-select-panel__card__footer",
365
+ children: /*#__PURE__*/_jsx(Pagination, {
366
+ size: "small",
367
+ current: current,
368
+ pageSize: pageSize,
369
+ total: total,
370
+ showSizeChanger: false,
371
+ showTotal: function showTotal(total) {
372
+ return "\u5171".concat(total, "\u6761\u8BB0\u5F55");
373
+ },
374
+ simple: true,
375
+ onChange: function onChange(current) {
376
+ return search({
377
+ keyword: keyword,
378
+ current: current
379
+ });
380
+ },
381
+ disabled: disabled
382
+ })
383
+ })]
384
+ }) : /*#__PURE__*/_jsx(Empty, {
385
+ className: "mc-list-select-panel__card__empty",
386
+ image: Empty.PRESENTED_IMAGE_SIMPLE
387
+ })]
388
+ }), /*#__PURE__*/_jsxs("div", {
389
+ className: "mc-list-select-panel__card mc-list-select-panel__card__right",
390
+ children: [/*#__PURE__*/_jsxs("div", {
391
+ className: "mc-list-select-panel__card__header",
392
+ children: [/*#__PURE__*/_jsxs("span", {
393
+ children: ["\u5DF2\u9009", selected.length, "\u9879"]
394
+ }), allowClear && /*#__PURE__*/_jsx(Button, {
395
+ style: {
396
+ height: 'auto',
397
+ padding: 0
398
+ },
399
+ type: "link",
400
+ disabled: disabled || !selected.length,
401
+ onClick: function onClick() {
402
+ return changeHandle(reserved ? selected.filter(function (i) {
403
+ return !valueMap[i];
404
+ }) : []);
405
+ },
406
+ children: "\u6E05\u7A7A"
407
+ })]
408
+ }), !!selected.length ? /*#__PURE__*/_jsx(DndContext, {
409
+ onDragEnd: dragEnd,
410
+ children: /*#__PURE__*/_jsx(SortableContext, {
411
+ items: selected,
412
+ strategy: verticalListSortingStrategy,
413
+ children: /*#__PURE__*/_jsx("div", {
414
+ className: "mc-list-select-panel__selected-list-wrapper",
415
+ children: /*#__PURE__*/_jsx("div", {
416
+ className: "mc-list-select-panel__selected-list",
417
+ children: selected.map(function (v) {
418
+ return /*#__PURE__*/_jsx(SelectedItem, {
419
+ style: {
420
+ width: selectedLayout === 'inline' ? 'auto' : '100%',
421
+ height: selectedLayout === 'inline' ? 32 : 40
422
+ },
423
+ sortable: selectedLayout === 'sortable',
424
+ valueMap: valueMap,
425
+ inexistent: inexistent0,
426
+ text: text,
427
+ color: color,
428
+ reserved: reserved,
429
+ inexistentValueMap: inexistentValueMap,
430
+ value: v,
431
+ onRemove: function onRemove() {
432
+ return changeHandle(selected.filter(function (i) {
433
+ return i !== v;
434
+ }));
435
+ }
436
+ }, v);
437
+ })
438
+ })
439
+ })
440
+ })
441
+ }) : /*#__PURE__*/_jsx(Empty, {
442
+ className: "mc-list-select-panel__card__empty",
443
+ image: Empty.PRESENTED_IMAGE_SIMPLE
444
+ })]
445
+ }), disabled && /*#__PURE__*/_jsx("div", {
446
+ className: "mc-list-select-panel--disabled"
447
+ })]
448
+ })
449
+ });
450
+ });
451
+ export default /*#__PURE__*/memo(ListSelectPanel);
@@ -0,0 +1,17 @@
1
+ import { CSSProperties } from 'react';
2
+ import '../index.less';
3
+ import { BaseValueType, MapType, PanelInexistent } from './ListSelectPanel';
4
+ type PropsType = {
5
+ sortable: boolean;
6
+ valueMap: MapType;
7
+ inexistent: boolean | PanelInexistent;
8
+ text: string;
9
+ color: string;
10
+ reserved: boolean;
11
+ inexistentValueMap: MapType;
12
+ value: BaseValueType;
13
+ onRemove: () => void;
14
+ style?: CSSProperties;
15
+ };
16
+ declare const _default: import("react").NamedExoticComponent<PropsType>;
17
+ export default _default;
@@ -0,0 +1,76 @@
1
+ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
2
+ import { useSortable } from '@dnd-kit/sortable';
3
+ import { Button } from 'antd';
4
+ import { MenuOutlined } from 'much-icons';
5
+ import { McEllipsis, McIconFont } from "../..";
6
+ import { memo } from 'react';
7
+ import "../index.css";
8
+ import { jsx as _jsx } from "react/jsx-runtime";
9
+ import { jsxs as _jsxs } from "react/jsx-runtime";
10
+ var SelectedItem = function SelectedItem(_ref) {
11
+ var _valueMap$value, _valueMap$value2, _inexistentValueMap$v, _inexistentValueMap$v2, _valueMap$value3;
12
+ var sortable = _ref.sortable,
13
+ valueMap = _ref.valueMap,
14
+ inexistent = _ref.inexistent,
15
+ text = _ref.text,
16
+ color = _ref.color,
17
+ reserved = _ref.reserved,
18
+ inexistentValueMap = _ref.inexistentValueMap,
19
+ value = _ref.value,
20
+ onRemove = _ref.onRemove,
21
+ _ref$style = _ref.style,
22
+ style = _ref$style === void 0 ? {} : _ref$style;
23
+ var label = ((_valueMap$value = valueMap[value]) === null || _valueMap$value === void 0 ? void 0 : _valueMap$value.label) || ((_valueMap$value2 = valueMap[value]) === null || _valueMap$value2 === void 0 ? void 0 : _valueMap$value2.value) || "".concat(((_inexistentValueMap$v = inexistentValueMap[value]) === null || _inexistentValueMap$v === void 0 ? void 0 : _inexistentValueMap$v.label) || ((_inexistentValueMap$v2 = inexistentValueMap[value]) === null || _inexistentValueMap$v2 === void 0 ? void 0 : _inexistentValueMap$v2.value)).concat(inexistent && !reserved ? "\u300C".concat(text, "\u300D") : '');
24
+ var disabled = !!((_valueMap$value3 = valueMap[value]) !== null && _valueMap$value3 !== void 0 && _valueMap$value3.disabled) || !valueMap[value] && reserved;
25
+ var getColor = function getColor() {
26
+ var defaultColor = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '#262626';
27
+ return disabled ? '#8c8c8c' : !valueMap[value] && inexistent && !reserved ? color : defaultColor;
28
+ };
29
+ var _useSortable = useSortable({
30
+ id: value
31
+ }),
32
+ setNodeRef = _useSortable.setNodeRef,
33
+ attributes = _useSortable.attributes,
34
+ listeners = _useSortable.listeners,
35
+ transform = _useSortable.transform,
36
+ transition = _useSortable.transition,
37
+ isDragging = _useSortable.isDragging;
38
+ var style0 = transform ? _objectSpread({
39
+ transform: "translate3d(".concat(transform.x, "px, ").concat(transform.y, "px, 0)"),
40
+ transition: isDragging ? 'unset' : transition
41
+ }, style) : _objectSpread({
42
+ transition: 'unset'
43
+ }, style);
44
+ return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
45
+ ref: setNodeRef,
46
+ style: style0
47
+ }, attributes), {}, {
48
+ className: "mc-list-select-panel__selected-item",
49
+ children: [sortable && !disabled && /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({}, listeners), {}, {
50
+ className: "mc-list-select-panel__selected-item__drag",
51
+ type: "text",
52
+ icon: /*#__PURE__*/_jsx(MenuOutlined, {})
53
+ })), /*#__PURE__*/_jsx(McEllipsis, {
54
+ style: {
55
+ margin: '0 auto 0 4px',
56
+ color: getColor()
57
+ },
58
+ text: label,
59
+ tooltip: {
60
+ title: /*#__PURE__*/_jsx("span", {
61
+ style: {
62
+ color: getColor('#ffffff')
63
+ },
64
+ children: label
65
+ })
66
+ },
67
+ middle: true,
68
+ disabled: disabled
69
+ }), !disabled && /*#__PURE__*/_jsx(McIconFont, {
70
+ className: "mc-list-select-panel__selected-item__remove",
71
+ type: "icon-CloseOutlined",
72
+ onClick: onRemove
73
+ })]
74
+ }));
75
+ };
76
+ export default /*#__PURE__*/memo(SelectedItem);
@@ -0,0 +1,6 @@
1
+ /**
2
+ * title: 基本使用
3
+ * description: 通过 `options` 设置备选项<br>设置含有禁用项的备选项<br>通过 `fetchOptions` 实现远端异步分页查询<br>设置 `initOnOpen` 为 false 时,展开下拉菜单会保留上次查询结果
4
+ */
5
+ declare const _default: () => import("react/jsx-runtime").JSX.Element;
6
+ export default _default;
@@ -0,0 +1,125 @@
1
+ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
2
+ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
3
+ import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
4
+ import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
5
+ /**
6
+ * title: 基本使用
7
+ * description: 通过 `options` 设置备选项<br>设置含有禁用项的备选项<br>通过 `fetchOptions` 实现远端异步分页查询<br>设置 `initOnOpen` 为 false 时,展开下拉菜单会保留上次查询结果
8
+ */
9
+
10
+ import { McListSelect } from "../..";
11
+ import { useEffect, useState } from 'react';
12
+ import { mockList } from "../mock";
13
+ import { jsx as _jsx } from "react/jsx-runtime";
14
+ import { Fragment as _Fragment } from "react/jsx-runtime";
15
+ import { jsxs as _jsxs } from "react/jsx-runtime";
16
+ var fetchOptions = /*#__PURE__*/function () {
17
+ var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(_ref) {
18
+ var current, pageSize, keyword, _data$records, _yield$mockList, data;
19
+ return _regeneratorRuntime().wrap(function _callee$(_context) {
20
+ while (1) switch (_context.prev = _context.next) {
21
+ case 0:
22
+ current = _ref.current, pageSize = _ref.pageSize, keyword = _ref.keyword;
23
+ _context.prev = 1;
24
+ _context.next = 4;
25
+ return mockList({
26
+ current: current,
27
+ pageSize: pageSize,
28
+ keyword: keyword
29
+ });
30
+ case 4:
31
+ _yield$mockList = _context.sent;
32
+ data = _yield$mockList.data;
33
+ return _context.abrupt("return", {
34
+ data: (data === null || data === void 0 || (_data$records = data.records) === null || _data$records === void 0 ? void 0 : _data$records.map(function (_ref3) {
35
+ var id = _ref3.id,
36
+ name = _ref3.name;
37
+ return {
38
+ value: id,
39
+ label: name
40
+ };
41
+ })) || [],
42
+ total: (data === null || data === void 0 ? void 0 : data.total) || 0
43
+ });
44
+ case 9:
45
+ _context.prev = 9;
46
+ _context.t0 = _context["catch"](1);
47
+ return _context.abrupt("return", {
48
+ data: [],
49
+ total: 0
50
+ });
51
+ case 12:
52
+ case "end":
53
+ return _context.stop();
54
+ }
55
+ }, _callee, null, [[1, 9]]);
56
+ }));
57
+ return function fetchOptions(_x) {
58
+ return _ref2.apply(this, arguments);
59
+ };
60
+ }();
61
+ export default (function () {
62
+ var _useState = useState(),
63
+ _useState2 = _slicedToArray(_useState, 2),
64
+ options = _useState2[0],
65
+ setOptions = _useState2[1];
66
+ var _useState3 = useState(),
67
+ _useState4 = _slicedToArray(_useState3, 2),
68
+ hasDisabledOptions = _useState4[0],
69
+ setHasDisabledOptions = _useState4[1];
70
+ var initOptions = /*#__PURE__*/function () {
71
+ var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
72
+ var _data$records2;
73
+ var _yield$mockList2, data, options, hasDisabledOptions;
74
+ return _regeneratorRuntime().wrap(function _callee2$(_context2) {
75
+ while (1) switch (_context2.prev = _context2.next) {
76
+ case 0:
77
+ _context2.next = 2;
78
+ return mockList({
79
+ current: 1,
80
+ pageSize: 999
81
+ });
82
+ case 2:
83
+ _yield$mockList2 = _context2.sent;
84
+ data = _yield$mockList2.data;
85
+ options = data === null || data === void 0 || (_data$records2 = data.records) === null || _data$records2 === void 0 ? void 0 : _data$records2.map(function (_ref5) {
86
+ var id = _ref5.id,
87
+ name = _ref5.name;
88
+ return {
89
+ value: id,
90
+ label: name
91
+ };
92
+ });
93
+ hasDisabledOptions = options === null || options === void 0 ? void 0 : options.map(function (item, index) {
94
+ return _objectSpread(_objectSpread({}, item), {}, {
95
+ disabled: (index + 1) % 3 === 0
96
+ });
97
+ });
98
+ setOptions(options);
99
+ setHasDisabledOptions(hasDisabledOptions);
100
+ case 8:
101
+ case "end":
102
+ return _context2.stop();
103
+ }
104
+ }, _callee2);
105
+ }));
106
+ return function initOptions() {
107
+ return _ref4.apply(this, arguments);
108
+ };
109
+ }();
110
+ useEffect(function () {
111
+ initOptions();
112
+ }, []);
113
+ return /*#__PURE__*/_jsxs(_Fragment, {
114
+ children: [/*#__PURE__*/_jsx(McListSelect, {
115
+ options: options
116
+ }), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx(McListSelect, {
117
+ options: hasDisabledOptions
118
+ }), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx(McListSelect, {
119
+ fetchOptions: fetchOptions
120
+ }), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx(McListSelect, {
121
+ fetchOptions: fetchOptions,
122
+ initOnOpen: false
123
+ })]
124
+ });
125
+ });
@@ -0,0 +1,6 @@
1
+ /**
2
+ * title: 不存在值的回显
3
+ * description: 设置 `inexistent` 为 true,执行不存在值的处理逻辑,若需保留原值,需设置 `reserveOriginalValue` 为 true,涉及回显场景时,建议将 `labelInValue` 设置为 true
4
+ */
5
+ declare const _default: () => import("react/jsx-runtime").JSX.Element;
6
+ export default _default;