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

package/dist/McGroupPanel/index.js

@@ -1,426 +0,0 @@
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import { DndContext } from '@dnd-kit/core';
-import { SortableContext, arrayMove, verticalListSortingStrategy } from '@dnd-kit/sortable';
-import { Button, Checkbox, Empty, Input, Typography } from 'antd';
-import debounce from 'lodash/debounce';
-import { SearchOutlined } from 'much-icons';
-import { useEffect, useMemo, useState } from 'react';
-import SelectedItem from "./comps/SelectedItem";
-import "./index.css";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-var McGroupPanel = function McGroupPanel(props) {
-  var _groupMap$activeGroup, _groupMap$activeGroup2, _groupMap$activeGroup3;
-  var style = props.style,
-    className = props.className,
-    options = props.options,
-    disabled = props.disabled,
-    labelInValue = props.labelInValue,
-    _props$inexistent = props.inexistent,
-    inexistent = _props$inexistent === void 0 ? false : _props$inexistent,
-    sortable = props.sortable,
-    _props$title = props.title,
-    title = _props$title === void 0 ? '标题' : _props$title,
-    value = props.value,
-    onChange = props.onChange;
-  var _ref = typeof inexistent === 'boolean' ? {} : inexistent,
-    _ref$text = _ref.text,
-    text = _ref$text === void 0 ? '不存在' : _ref$text,
-    _ref$color = _ref.color,
-    color = _ref$color === void 0 ? '#ff4d4f' : _ref$color,
-    _ref$reserved = _ref.reserved,
-    reserved = _ref$reserved === void 0 ? false : _ref$reserved;
-  var _useState = useState([]),
-    _useState2 = _slicedToArray(_useState, 2),
-    selected = _useState2[0],
-    setSelected = _useState2[1];
-  var _useState3 = useState(''),
-    _useState4 = _slicedToArray(_useState3, 2),
-    searchValue = _useState4[0],
-    setSearchValue = _useState4[1];
-  var _useState5 = useState([]),
-    _useState6 = _slicedToArray(_useState5, 2),
-    _options = _useState6[0],
-    set_options = _useState6[1];
-  var _useState7 = useState([]),
-    _useState8 = _slicedToArray(_useState7, 2),
-    allValues = _useState8[0],
-    setAllValues = _useState8[1];
-  var _useState9 = useState({}),
-    _useState10 = _slicedToArray(_useState9, 2),
-    groupMap = _useState10[0],
-    setGroupMap = _useState10[1];
-  var _useState11 = useState(),
-    _useState12 = _slicedToArray(_useState11, 2),
-    activeGroup = _useState12[0],
-    setActiveGroup = _useState12[1];
-  var _useState13 = useState({}),
-    _useState14 = _slicedToArray(_useState13, 2),
-    itemMap = _useState14[0],
-    setItemMap = _useState14[1];
-  var _useState15 = useState({}),
-    _useState16 = _slicedToArray(_useState15, 2),
-    inexistentItemMap = _useState16[0],
-    setInexistentItemMap = _useState16[1];
-
-  /* 监听options变化，重置搜索关键词、分组列表、当前全部值列表、分组映射集合、选中组、选项映射集合 */
-  useEffect(function () {
-    var _options$;
-    var _groupMap = {},
-      _itemMap = {},
-      _allValues = [],
-      _options = (options === null || options === void 0 ? void 0 : options.map(function (group) {
-        var _group$children;
-        var children = (group === null || group === void 0 || (_group$children = group.children) === null || _group$children === void 0 ? void 0 : _group$children.map(function (item) {
-          var _item = _objectSpread({}, item);
-          _itemMap[_item.value] = _item;
-          _allValues.push(_item.value);
-          return _item;
-        })) || [];
-        _groupMap[group.value] = children;
-        return _objectSpread(_objectSpread({}, group), {}, {
-          children: children
-        });
-      })) || [];
-    setSearchValue('');
-    set_options(_options);
-    setAllValues(_allValues);
-    setGroupMap(_groupMap);
-    setActiveGroup(_options === null || _options === void 0 || (_options$ = _options[0]) === null || _options$ === void 0 ? void 0 : _options$.value);
-    setItemMap(_itemMap);
-  }, [options]);
-
-  /* 防抖的搜索方法 */
-  var debounceSearch = useMemo(function () {
-    // 根据关键词过滤，重置分组列表、当前全部值列表、分组映射集合、选中组
-    var fn = function fn(keyword) {
-      var _options$2;
-      var _groupMap = {},
-        _allValues = [],
-        _options = (options === null || options === void 0 ? void 0 : options.filter(function (group) {
-          var _group$children2;
-          var children = (group === null || group === void 0 || (_group$children2 = group.children) === null || _group$children2 === void 0 ? void 0 : _group$children2.filter(function (item) {
-            if (item.label.includes(keyword)) {
-              _allValues.push(item.value);
-              return true;
-            } else {
-              return false;
-            }
-          })) || [];
-          if (children.length > 0) {
-            _groupMap[group.value] = children;
-            return _objectSpread(_objectSpread({}, group), {}, {
-              children: children
-            });
-          } else {
-            return false;
-          }
-        })) || [];
-      set_options(_options);
-      setAllValues(_allValues);
-      setGroupMap(_groupMap);
-      setActiveGroup(_options === null || _options === void 0 || (_options$2 = _options[0]) === null || _options$2 === void 0 ? void 0 : _options$2.value);
-    };
-    return debounce(fn, 350);
-  }, [options]);
-
-  /* 回显 */
-  useEffect(function () {
-    var echo = function echo(value) {
-      var _inexistentItemMap = {};
-      value === null || value === void 0 || value.forEach(function (item) {
-        var v = labelInValue ? item.value : item,
-          l = labelInValue ? item.label || item.value : item;
-        if (!itemMap[v]) _inexistentItemMap[v] = {
-          value: v,
-          label: l
-        };
-      });
-      setSelected(value ? labelInValue ? value.map(function (item) {
-        return item.value;
-      }) : value : []);
-      setInexistentItemMap(_inexistentItemMap);
-    };
-    echo(value);
-  }, [value]);
-
-  /* 更新选中项状态并触发change事件 */
-  var changeHandle = function changeHandle(v) {
-    // 若无需保留不存在值，则将不存在的项移除
-    var _v = reserved ? _toConsumableArray(v) : v.filter(function (i) {
-      return !!itemMap[i];
-    });
-    setSelected(_v);
-    onChange === null || onChange === void 0 || onChange(_v.length > 0 ? labelInValue ? _v.map(function (i) {
-      return itemMap[i] || inexistentItemMap[i];
-    }) : _v : undefined);
-  };
-
-  /* 拖拽结束事件 */
-  var dragEnd = function dragEnd(dragItem) {
-    var active = dragItem.active,
-      over = dragItem.over;
-    if (!active || !over) return;
-    if (active.id !== over.id) {
-      var _selected = _toConsumableArray(selected);
-      var activeIndex = _selected.findIndex(function (v) {
-        return v === active.id;
-      });
-      var overIndex = _selected.findIndex(function (v) {
-        return v === over.id;
-      });
-      changeHandle(arrayMove(_selected, activeIndex, overIndex));
-    }
-  };
-  return /*#__PURE__*/_jsxs("div", {
-    style: style,
-    className: "mc-group-panel ".concat(className || ''),
-    children: [/*#__PURE__*/_jsxs("div", {
-      className: "mc-group-panel__options",
-      children: [/*#__PURE__*/_jsx("div", {
-        className: "mc-group-panel__card-title mc-group-panel__card-header mc-group-panel__search-bar",
-        children: title
-      }), /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx("div", {
-          style: {
-            padding: 12
-          },
-          children: /*#__PURE__*/_jsx(Input, {
-            prefix: /*#__PURE__*/_jsx(SearchOutlined, {
-              className: "mc-group-panel__card-icon"
-            }),
-            placeholder: "\u8BF7\u8F93\u5165\u5173\u952E\u8BCD",
-            allowClear: true,
-            autoComplete: "off",
-            value: searchValue,
-            onChange: function onChange(e) {
-              var v = e.target.value.trim();
-              setSearchValue(v);
-              v !== searchValue && debounceSearch(v);
-            }
-          })
-        }), _options.length > 0 ? /*#__PURE__*/_jsxs("div", {
-          className: "mc-group-panel__options-wrapper",
-          children: [/*#__PURE__*/_jsxs("div", {
-            className: "mc-group-panel__options-groups",
-            children: [/*#__PURE__*/_jsx("div", {
-              className: "mc-group-panel__checkbox-wrapper mc-group-panel__check-all",
-              children: /*#__PURE__*/_jsx(Checkbox, {
-                checked: allValues.length > 0 && allValues.every(function (v) {
-                  return selected.includes(v);
-                }),
-                indeterminate: allValues.length > 0 && !allValues.every(function (v) {
-                  return selected.includes(v);
-                }) && allValues.some(function (v) {
-                  return selected.includes(v);
-                }),
-                onChange: function onChange(e) {
-                  return changeHandle(e.target.checked ? Array.from(new Set([].concat(_toConsumableArray(selected), _toConsumableArray(allValues)))) : reserved ? selected.filter(function (i) {
-                    return !itemMap[i];
-                  }) : []);
-                },
-                disabled: disabled,
-                children: "\u5168\u9009"
-              })
-            }), /*#__PURE__*/_jsx("div", {
-              className: "mc-group-panel__options-list",
-              children: _options.map(function (item) {
-                var _groupMap$item$value, _groupMap$item$value2;
-                return /*#__PURE__*/_jsxs("div", {
-                  className: "mc-group-panel__checkbox-wrapper",
-                  style: {
-                    background: activeGroup === item.value ? '#EAEEFE' : ''
-                  },
-                  onClick: function onClick() {
-                    return setActiveGroup(item.value);
-                  },
-                  children: [/*#__PURE__*/_jsx(Checkbox, {
-                    checked: ((_groupMap$item$value = groupMap[item.value]) === null || _groupMap$item$value === void 0 ? void 0 : _groupMap$item$value.length) > 0 && groupMap[item.value].every(function (_ref2) {
-                      var value = _ref2.value;
-                      return selected.includes(value);
-                    }),
-                    indeterminate: ((_groupMap$item$value2 = groupMap[item.value]) === null || _groupMap$item$value2 === void 0 ? void 0 : _groupMap$item$value2.length) > 0 && !groupMap[item.value].every(function (_ref3) {
-                      var value = _ref3.value;
-                      return selected.includes(value);
-                    }) && groupMap[item.value].some(function (_ref4) {
-                      var value = _ref4.value;
-                      return selected.includes(value);
-                    }),
-                    onChange: function onChange(e) {
-                      var _groupMap$item$value3;
-                      return changeHandle(e.target.checked ? Array.from(new Set([].concat(_toConsumableArray(selected), _toConsumableArray(((_groupMap$item$value3 = groupMap[item.value]) === null || _groupMap$item$value3 === void 0 ? void 0 : _groupMap$item$value3.map(function (_ref5) {
-                        var value = _ref5.value;
-                        return value;
-                      })) || [])))) : selected.filter(function (i) {
-                        var _groupMap$item$value4;
-                        return !((_groupMap$item$value4 = groupMap[item.value]) !== null && _groupMap$item$value4 !== void 0 && _groupMap$item$value4.some(function (_ref6) {
-                          var value = _ref6.value;
-                          return value === i;
-                        }));
-                      }));
-                    },
-                    disabled: disabled,
-                    onClick: function onClick(e) {
-                      return e.stopPropagation();
-                    }
-                  }), /*#__PURE__*/_jsx(Typography.Paragraph, {
-                    style: {
-                      margin: '0 0 0 8px'
-                    },
-                    ellipsis: {
-                      tooltip: item.label
-                    },
-                    children: item.label
-                  })]
-                }, item.value);
-              })
-            })]
-          }), /*#__PURE__*/_jsx("div", {
-            className: "mc-group-panel__options-items",
-            children: ((_groupMap$activeGroup = groupMap[activeGroup]) === null || _groupMap$activeGroup === void 0 ? void 0 : _groupMap$activeGroup.length) > 0 ? /*#__PURE__*/_jsxs(_Fragment, {
-              children: [/*#__PURE__*/_jsx("div", {
-                className: "mc-group-panel__checkbox-wrapper mc-group-panel__check-all",
-                children: /*#__PURE__*/_jsx(Checkbox, {
-                  checked: ((_groupMap$activeGroup2 = groupMap[activeGroup]) === null || _groupMap$activeGroup2 === void 0 ? void 0 : _groupMap$activeGroup2.length) > 0 && groupMap[activeGroup].every(function (_ref7) {
-                    var value = _ref7.value;
-                    return selected.includes(value);
-                  }),
-                  indeterminate: ((_groupMap$activeGroup3 = groupMap[activeGroup]) === null || _groupMap$activeGroup3 === void 0 ? void 0 : _groupMap$activeGroup3.length) > 0 && !groupMap[activeGroup].every(function (_ref8) {
-                    var value = _ref8.value;
-                    return selected.includes(value);
-                  }) && groupMap[activeGroup].some(function (_ref9) {
-                    var value = _ref9.value;
-                    return selected.includes(value);
-                  }),
-                  onChange: function onChange(e) {
-                    var _groupMap$activeGroup4;
-                    return changeHandle(e.target.checked ? Array.from(new Set([].concat(_toConsumableArray(selected), _toConsumableArray(((_groupMap$activeGroup4 = groupMap[activeGroup]) === null || _groupMap$activeGroup4 === void 0 ? void 0 : _groupMap$activeGroup4.map(function (_ref10) {
-                      var value = _ref10.value;
-                      return value;
-                    })) || [])))) : selected.filter(function (i) {
-                      var _groupMap$activeGroup5;
-                      return !((_groupMap$activeGroup5 = groupMap[activeGroup]) !== null && _groupMap$activeGroup5 !== void 0 && _groupMap$activeGroup5.some(function (_ref11) {
-                        var value = _ref11.value;
-                        return value === i;
-                      }));
-                    }));
-                  },
-                  disabled: disabled,
-                  children: "\u5168\u9009"
-                })
-              }), /*#__PURE__*/_jsx("div", {
-                className: "mc-group-panel__options-list",
-                children: groupMap[activeGroup].map(function (item) {
-                  return /*#__PURE__*/_jsx(Checkbox, {
-                    className: "mc-group-panel__checkbox",
-                    checked: selected.includes(item.value),
-                    onChange: function onChange(e) {
-                      return changeHandle(e.target.checked ? [].concat(_toConsumableArray(selected), [item.value]) : selected.filter(function (i) {
-                        return i !== item.value;
-                      }));
-                    },
-                    disabled: disabled,
-                    children: /*#__PURE__*/_jsx(Typography.Paragraph, {
-                      style: {
-                        margin: 0
-                      },
-                      ellipsis: {
-                        tooltip: item.label
-                      },
-                      children: item.label
-                    })
-                  }, item.value);
-                })
-              })]
-            }) : /*#__PURE__*/_jsx("div", {
-              style: {
-                height: '100%',
-                display: 'grid',
-                placeItems: 'center'
-              },
-              children: /*#__PURE__*/_jsx(Empty, {
-                image: Empty.PRESENTED_IMAGE_SIMPLE
-              })
-            })
-          })]
-        }) : /*#__PURE__*/_jsx("div", {
-          style: {
-            height: 'calc(100% - 40px)',
-            display: 'grid',
-            placeItems: 'center'
-          },
-          children: /*#__PURE__*/_jsx(Empty, {
-            image: Empty.PRESENTED_IMAGE_SIMPLE
-          })
-        })]
-      })]
-    }), /*#__PURE__*/_jsxs("div", {
-      className: "mc-group-panel__selected",
-      children: [/*#__PURE__*/_jsxs("div", {
-        className: "mc-group-panel__card-header",
-        children: [/*#__PURE__*/_jsxs("div", {
-          className: "mc-group-panel__card-title",
-          children: ["\u5DF2\u9009", selected.length, "\u9879"]
-        }), /*#__PURE__*/_jsx(Button, {
-          className: "mc-group-panel__card-button",
-          style: {
-            padding: 0
-          },
-          type: "link",
-          onClick: function onClick() {
-            return changeHandle(reserved ? selected.filter(function (i) {
-              return !itemMap[i];
-            }) : []);
-          },
-          disabled: disabled,
-          children: "\u6E05\u7A7A"
-        })]
-      }), selected.length > 0 ? /*#__PURE__*/_jsx(DndContext, {
-        onDragEnd: dragEnd,
-        children: /*#__PURE__*/_jsx(SortableContext, {
-          items: selected,
-          strategy: verticalListSortingStrategy,
-          children: /*#__PURE__*/_jsx("div", {
-            style: {
-              overflowX: 'hidden'
-            },
-            className: "mc-group-panel__card-body",
-            children: selected.map(function (v) {
-              return /*#__PURE__*/_jsx(SelectedItem, {
-                sortable: sortable,
-                itemMap: itemMap,
-                inexistent: inexistent,
-                text: text,
-                color: color,
-                reserved: reserved,
-                inexistentItemMap: inexistentItemMap,
-                value: v,
-                onRemove: function onRemove() {
-                  return changeHandle(selected.filter(function (i) {
-                    return i !== v;
-                  }));
-                }
-              }, v);
-            })
-          })
-        })
-      }) : /*#__PURE__*/_jsx("div", {
-        style: {
-          height: 'calc(100% - 40px)',
-          display: 'grid',
-          placeItems: 'center'
-        },
-        children: /*#__PURE__*/_jsx(Empty, {
-          image: Empty.PRESENTED_IMAGE_SIMPLE,
-          description: "\u8BF7\u9009\u62E9"
-        })
-      })]
-    }), disabled && /*#__PURE__*/_jsx("div", {
-      className: "mc-group-panel--disabled"
-    })]
-  });
-};
-export default McGroupPanel;