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

package/dist/esm/McGroupPanel/index.js

@@ -0,0 +1,426 @@
+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.less";
+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;

package/dist/esm/McGroupPanel/index.less

@@ -0,0 +1,161 @@
+.disabled(@background: rgba(228, 228, 228, 0.3)) {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 9;
+  border-radius: 4px;
+  background: @background;
+  cursor: no-drop;
+}
+
+.mc-group-panel {
+  width: 100%;
+  height: 341px;
+  display: flex;
+  column-gap: 8px;
+  position: relative;
+
+  .card() {
+    border-radius: 4px;
+    border: 1px solid #ebebeb;
+    overflow: hidden;
+  }
+
+  &__card-header {
+    height: 40px;
+    background: #fafafa;
+    padding: 0 8px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  &__card-title {
+    color: rgba(0, 0, 0, 84.7%);
+    font-weight: 600;
+    font-size: 14px;
+  }
+
+  &__card-icon {
+    color: #8c8c8c ;
+  }
+
+  &__card-body {
+    height: calc(100% - 40px);
+    overflow: auto;
+    padding: 8px;
+  }
+
+  &__options {
+    .card();
+    flex: 1;
+
+    &-wrapper {
+      display: flex;
+      height: calc(100% - 40px);
+    }
+
+    &-groups {
+      flex: 1 1 44%;
+      overflow: auto;
+    }
+
+    &-items {
+      flex: 1 1 56%;
+      border-left: 1px solid #ebebeb;
+      overflow: auto;
+      padding-bottom: 20px;
+    }
+
+    &-list {
+      height: calc(100% - 40px);
+      overflow: auto;
+    }
+  }
+
+  &__search-bar {
+    padding: 0 12px;
+  }
+
+  &__checkbox-wrapper {
+    width: 100%;
+    height: 40px;
+    line-height: 40px;
+    padding: 0 12px;
+    display: flex;
+    align-items: center;
+
+    &:not(.mc-group-panel__check-all):hover {
+      background: #f6f6f6;
+      cursor: pointer;
+    }
+  }
+
+  &__checkbox {
+    width: 100%;
+    height: 40px;
+    align-items: center;
+    padding: 0 12px;
+
+    .ant-checkbox + span {
+      overflow: hidden;
+    }
+
+    &:hover {
+      background: #f6f6f6;
+    }
+  }
+
+  &__selected {
+    .card();
+    width: 240px;
+
+    &-item {
+      width: 100%;
+      height: 40px;
+      display: flex;
+      align-items: center;
+      padding: 0 8px;
+      background: #f5f5f5;
+      border-radius: 4px;
+      overflow: hidden;
+      position: relative;
+
+      &:not(:first-child) {
+        margin-top: 8px;
+      }
+
+      &__drag {
+        flex-shrink: 0;
+        color: #8c8c8c;
+        padding: 5px 0 3px;
+
+        &:hover {
+          background: rgba(38, 38, 38, 0.15) !important;
+          cursor: move;
+        }
+      }
+
+      &__remove {
+        flex-shrink: 0;
+        color: #8c8c8c;
+        margin-left: 8px;
+
+        &:hover {
+          cursor: pointer;
+          color: #262626;
+        }
+      }
+
+      &--disabled {
+        .disabled(@background: rgba(246, 246, 246, 0.66));
+      }
+    }
+  }
+
+  &--disabled {
+    .disabled();
+  }
+}