@zykj2024/much-library 1.0.9

package/dist/McGroupPanel/index.js

@@ -0,0 +1,411 @@
+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 { SearchOutlined } from 'much-icons';
+import { Utils } from "./..";
+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,
+    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 Utils.debounce(fn, 350);
+  }, [options]);
+  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);
+  };
+
+  /* 回显 */
+  useEffect(function () {
+    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-header mc-group-panel__search-bar",
+        children: /*#__PURE__*/_jsx(Input, {
+          prefix: /*#__PURE__*/_jsx(SearchOutlined, {}),
+          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);
+            if (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",
+            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__*/_jsx("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,
+                  children: /*#__PURE__*/_jsx(Typography.Paragraph, {
+                    style: {
+                      margin: 0
+                    },
+                    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",
+              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, {
+          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;