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

package/dist/esm/McListSelect/comps/ListSelectPanel.js

@@ -0,0 +1,451 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _typeof from "@babel/runtime/helpers/esm/typeof";
+import { DndContext } from '@dnd-kit/core';
+import { SortableContext, arrayMove, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { useAsync } from '@zykj2024/much-hooks';
+import { McEllipsis, McInput } from "../..";
+import { Button, Checkbox, Empty, Pagination, Spin } from 'antd';
+import classNames from 'classnames';
+import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import "../index.less";
+import SelectedItem from "./SelectedItem";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var isLabelInValue = function isLabelInValue(value) {
+  return _typeof(value) === 'object' && value !== null && 'value' in value;
+};
+
+/**
+ * 列表选择面板组件属性
+ */
+
+var ListSelectPanel = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _props$title = props.title,
+    title = _props$title === void 0 ? '可选项' : _props$title,
+    options = props.options,
+    fetchOptions = props.fetchOptions,
+    _props$pageSize = props.pageSize,
+    pageSize = _props$pageSize === void 0 ? 20 : _props$pageSize,
+    extra = props.extra,
+    _props$immediateInit = props.immediateInit,
+    immediateInit = _props$immediateInit === void 0 ? true : _props$immediateInit,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    _props$labelInValue = props.labelInValue,
+    labelInValue = _props$labelInValue === void 0 ? false : _props$labelInValue,
+    _props$allowClear = props.allowClear,
+    allowClear = _props$allowClear === void 0 ? true : _props$allowClear,
+    _props$inexistent = props.inexistent,
+    inexistent = _props$inexistent === void 0 ? false : _props$inexistent,
+    _props$selectedLayout = props.selectedLayout,
+    selectedLayout = _props$selectedLayout === void 0 ? 'block' : _props$selectedLayout,
+    value = props.value,
+    onChange = props.onChange,
+    style = props.style,
+    className = props.className;
+  var inexistent0 = fetchOptions ? false : inexistent;
+  var _ref = typeof inexistent0 === 'boolean' ? {} : inexistent0,
+    _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),
+    keyword = _useState4[0],
+    setKeyword = _useState4[1];
+  var _useState5 = useState({}),
+    _useState6 = _slicedToArray(_useState5, 2),
+    valueMap = _useState6[0],
+    setValueMap = _useState6[1];
+  var _useState7 = useState({}),
+    _useState8 = _slicedToArray(_useState7, 2),
+    inexistentValueMap = _useState8[0],
+    setInexistentValueMap = _useState8[1];
+  var optionsRef = useRef();
+  var initFlag = useRef(false);
+
+  /* 备选列表搜索方法 */
+  var _useAsync = useAsync( /*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(params) {
+        var _optionsRef$current;
+        var keyword, current, options1, total1, _yield$fetchOptions, data, _total, filteredOptions;
+        return _regeneratorRuntime().wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              keyword = params.keyword, current = params.current;
+              options1 = [], total1 = 0;
+              if (!fetchOptions) {
+                _context.next = 18;
+                break;
+              }
+              _context.prev = 3;
+              _context.next = 6;
+              return fetchOptions({
+                current: current,
+                pageSize: pageSize,
+                keyword: keyword,
+                extra: extra
+              });
+            case 6:
+              _yield$fetchOptions = _context.sent;
+              data = _yield$fetchOptions.data;
+              _total = _yield$fetchOptions.total;
+              options1 = data;
+              total1 = _total;
+              // 更新value映射集合
+              setValueMap(function (os) {
+                var map = _objectSpread({}, os);
+                data === null || data === void 0 || data.forEach(function (item) {
+                  return map[item.value] = item;
+                });
+                return map;
+              });
+              _context.next = 16;
+              break;
+            case 14:
+              _context.prev = 14;
+              _context.t0 = _context["catch"](3);
+            case 16:
+              _context.next = 21;
+              break;
+            case 18:
+              // 非异步查询
+              filteredOptions = (options || []).filter(function (_ref3) {
+                var label = _ref3.label;
+                return keyword ? label.includes(keyword) : true;
+              });
+              options1 = filteredOptions.slice((current - 1) * pageSize, current * pageSize);
+              total1 = filteredOptions.length;
+            case 21:
+              // 滚动到顶部
+              if ((_optionsRef$current = optionsRef.current) !== null && _optionsRef$current !== void 0 && _optionsRef$current.scrollTop) optionsRef.current.scrollTop = 0;
+              return _context.abrupt("return", {
+                options0: options1,
+                current: current,
+                total: total1
+              });
+            case 23:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, null, [[3, 14]]);
+      }));
+      return function (_x) {
+        return _ref2.apply(this, arguments);
+      };
+    }(), {
+      manual: true
+    }),
+    loading = _useAsync.loading,
+    search = _useAsync.run,
+    _useAsync$data = _useAsync.data,
+    _useAsync$data2 = _useAsync$data === void 0 ? {} : _useAsync$data,
+    _useAsync$data2$optio = _useAsync$data2.options0,
+    options0 = _useAsync$data2$optio === void 0 ? [] : _useAsync$data2$optio,
+    _useAsync$data2$curre = _useAsync$data2.current,
+    current = _useAsync$data2$curre === void 0 ? 1 : _useAsync$data2$curre,
+    _useAsync$data2$total = _useAsync$data2.total,
+    total = _useAsync$data2$total === void 0 ? 0 : _useAsync$data2$total;
+
+  // 全选
+  var checkall0 = useMemo(function () {
+    return !!options0.length && options0.every(function (_ref4) {
+      var value = _ref4.value;
+      return selected.includes(value);
+    });
+  }, [options0, selected]);
+  // 半选
+  var indeterminate0 = useMemo(function () {
+    return !checkall0 && options0.some(function (_ref5) {
+      var value = _ref5.value;
+      return selected.includes(value);
+    });
+  }, [checkall0, options0, selected]);
+
+  /* 获取不存在值映射集合 */
+  var getInexistentValueMap = function getInexistentValueMap() {
+    if (!!(value !== null && value !== void 0 && value.length) && !!(options !== null && options !== void 0 && options.length)) {
+      var inexistentMap1 = {};
+      var existentMap1 = {};
+      options.forEach(function (item) {
+        return existentMap1[item.value] = item;
+      });
+      value.forEach(function (item) {
+        var v = isLabelInValue(item) ? item.value : item;
+        var item1 = isLabelInValue(item) ? item : {
+          value: v,
+          label: v
+        };
+        if (!existentMap1[v]) inexistentMap1[v] = item1;
+      });
+      setInexistentValueMap(inexistentMap1);
+    }
+  };
+
+  /* 回显 */
+  var echo = function echo() {
+    setSelected((value === null || value === void 0 ? void 0 : value.map(function (item) {
+      return isLabelInValue(item) ? item.value : item;
+    })) || []);
+    if (fetchOptions) {
+      // 异步查询时，更新value映射集合
+      setValueMap(function (os) {
+        var map = _objectSpread({}, os);
+        value === null || value === void 0 || value.forEach(function (item) {
+          var v = isLabelInValue(item) ? item.value : item;
+          var item1 = isLabelInValue(item) ? item : {
+            value: v,
+            label: v
+          };
+          // 若不存在时则使用value内的数据
+          map[v] = map[v] || item1;
+        });
+        return map;
+      });
+    } else {
+      // 非异步查询时，获取不存在值映射集合
+      getInexistentValueMap();
+    }
+  };
+
+  /* 监听value变化，触发回显 */
+  useEffect(function () {
+    echo();
+  }, [value]);
+
+  /* 初始化（重置查询并获取值映射集合） */
+  var init = function init() {
+    if (immediateInit || initFlag.current) {
+      setKeyword(undefined);
+      search({
+        keyword: undefined,
+        current: 1
+      });
+      // 非异步查询时，获取value映射集合和不存在值映射集合
+      if (!fetchOptions) {
+        setValueMap(function () {
+          var map = {};
+          options === null || options === void 0 || options.forEach(function (item) {
+            return map[item.value] = item;
+          });
+          return map;
+        });
+        getInexistentValueMap();
+      }
+    }
+    initFlag.current = true;
+  };
+
+  /* 监听options变化，触发初始化 */
+  useEffect(function () {
+    init();
+  }, [options, extra]);
+
+  /* 改变值的方法 */
+  var changeHandle = function changeHandle(v) {
+    // 若无需保留不存在值，则将不存在的项移除
+    var v1 = v.filter(function (i) {
+      return reserved ? true : !!valueMap[i];
+    });
+    !props.hasOwnProperty('value') && setSelected(v1);
+    onChange === null || onChange === void 0 || onChange(!!v1.length ? v1.map(function (i) {
+      return labelInValue ? valueMap[i] || inexistentValueMap[i] : i;
+    }) : undefined);
+  };
+
+  /* 拖拽结束事件 */
+  var dragEnd = function dragEnd(dragItem) {
+    var active = dragItem.active,
+      over = dragItem.over;
+    if (!active || !over) return;
+    if (active.id !== over.id) {
+      var selected1 = _toConsumableArray(selected);
+      var activeIndex = selected1.findIndex(function (v) {
+        return v === active.id;
+      });
+      var overIndex = selected1.findIndex(function (v) {
+        return v === over.id;
+      });
+      changeHandle(arrayMove(selected1, activeIndex, overIndex));
+    }
+  };
+  useImperativeHandle(ref, function () {
+    return {
+      init: init
+    };
+  });
+  return /*#__PURE__*/_jsx(Spin, {
+    spinning: loading,
+    children: /*#__PURE__*/_jsxs("div", {
+      style: style,
+      className: classNames('mc-list-select-panel', className),
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: "mc-list-select-panel__card mc-list-select-panel__card__left",
+        children: [/*#__PURE__*/_jsx("div", {
+          className: "mc-list-select-panel__card__header",
+          children: /*#__PURE__*/_jsx("span", {
+            className: "mc-list-select-panel__title",
+            children: title
+          })
+        }), /*#__PURE__*/_jsx("div", {
+          className: "mc-list-select-panel__card__search",
+          children: /*#__PURE__*/_jsx(McInput.Search, {
+            value: keyword,
+            onChange: setKeyword,
+            onSearch: function onSearch() {
+              return search({
+                keyword: keyword,
+                current: 1
+              });
+            },
+            onClear: function onClear() {
+              return search({
+                keyword: undefined,
+                current: 1
+              });
+            },
+            disabled: disabled
+          })
+        }), /*#__PURE__*/_jsx("div", {
+          className: "mc-list-select-panel__card__checkall",
+          children: !!options0.length && /*#__PURE__*/_jsx(Checkbox, {
+            className: "mc-list-select-panel__card__checkall__inner",
+            checked: checkall0,
+            indeterminate: indeterminate0,
+            onChange: function onChange(e) {
+              return changeHandle(e.target.checked ? Array.from(new Set([].concat(_toConsumableArray(selected), _toConsumableArray(options0.filter(function (_ref6) {
+                var disabled = _ref6.disabled;
+                return !disabled;
+              }).map(function (_ref7) {
+                var value = _ref7.value;
+                return value;
+              }))))) : _toConsumableArray(selected).filter(function (i) {
+                return !options0.some(function (_ref8) {
+                  var value = _ref8.value;
+                  return value === i;
+                });
+              }));
+            },
+            disabled: disabled,
+            children: "\u5168\u9009"
+          })
+        }), !!options0.length ? /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx("div", {
+            ref: optionsRef,
+            className: "mc-list-select-panel__options",
+            children: options0.map(function (item) {
+              return /*#__PURE__*/_jsx(Checkbox, {
+                className: "mc-list-select-panel__option",
+                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 || item.disabled,
+                children: /*#__PURE__*/_jsx(McEllipsis, {
+                  text: item.label,
+                  middle: true
+                })
+              }, item.value);
+            })
+          }), /*#__PURE__*/_jsx("div", {
+            className: "mc-list-select-panel__card__footer",
+            children: /*#__PURE__*/_jsx(Pagination, {
+              size: "small",
+              current: current,
+              pageSize: pageSize,
+              total: total,
+              showSizeChanger: false,
+              showTotal: function showTotal(total) {
+                return "\u5171".concat(total, "\u6761\u8BB0\u5F55");
+              },
+              simple: true,
+              onChange: function onChange(current) {
+                return search({
+                  keyword: keyword,
+                  current: current
+                });
+              },
+              disabled: disabled
+            })
+          })]
+        }) : /*#__PURE__*/_jsx(Empty, {
+          className: "mc-list-select-panel__card__empty",
+          image: Empty.PRESENTED_IMAGE_SIMPLE
+        })]
+      }), /*#__PURE__*/_jsxs("div", {
+        className: "mc-list-select-panel__card mc-list-select-panel__card__right",
+        children: [/*#__PURE__*/_jsxs("div", {
+          className: "mc-list-select-panel__card__header",
+          children: [/*#__PURE__*/_jsxs("span", {
+            children: ["\u5DF2\u9009", selected.length, "\u9879"]
+          }), allowClear && /*#__PURE__*/_jsx(Button, {
+            style: {
+              height: 'auto',
+              padding: 0
+            },
+            type: "link",
+            disabled: disabled || !selected.length,
+            onClick: function onClick() {
+              return changeHandle(reserved ? selected.filter(function (i) {
+                return !valueMap[i];
+              }) : []);
+            },
+            children: "\u6E05\u7A7A"
+          })]
+        }), !!selected.length ? /*#__PURE__*/_jsx(DndContext, {
+          onDragEnd: dragEnd,
+          children: /*#__PURE__*/_jsx(SortableContext, {
+            items: selected,
+            strategy: verticalListSortingStrategy,
+            children: /*#__PURE__*/_jsx("div", {
+              className: "mc-list-select-panel__selected-list-wrapper",
+              children: /*#__PURE__*/_jsx("div", {
+                className: "mc-list-select-panel__selected-list",
+                children: selected.map(function (v) {
+                  return /*#__PURE__*/_jsx(SelectedItem, {
+                    style: {
+                      width: selectedLayout === 'inline' ? 'auto' : '100%',
+                      height: selectedLayout === 'inline' ? 32 : 40
+                    },
+                    sortable: selectedLayout === 'sortable',
+                    valueMap: valueMap,
+                    inexistent: inexistent0,
+                    text: text,
+                    color: color,
+                    reserved: reserved,
+                    inexistentValueMap: inexistentValueMap,
+                    value: v,
+                    onRemove: function onRemove() {
+                      return changeHandle(selected.filter(function (i) {
+                        return i !== v;
+                      }));
+                    }
+                  }, v);
+                })
+              })
+            })
+          })
+        }) : /*#__PURE__*/_jsx(Empty, {
+          className: "mc-list-select-panel__card__empty",
+          image: Empty.PRESENTED_IMAGE_SIMPLE
+        })]
+      }), disabled && /*#__PURE__*/_jsx("div", {
+        className: "mc-list-select-panel--disabled"
+      })]
+    })
+  });
+});
+export default /*#__PURE__*/memo(ListSelectPanel);

package/dist/esm/McListSelect/comps/SelectedItem.d.ts

@@ -0,0 +1,17 @@
+import { CSSProperties } from 'react';
+import '../index.less';
+import { BaseValueType, MapType, PanelInexistent } from './ListSelectPanel';
+type PropsType = {
+    sortable: boolean;
+    valueMap: MapType;
+    inexistent: boolean | PanelInexistent;
+    text: string;
+    color: string;
+    reserved: boolean;
+    inexistentValueMap: MapType;
+    value: BaseValueType;
+    onRemove: () => void;
+    style?: CSSProperties;
+};
+declare const _default: import("react").NamedExoticComponent<PropsType>;
+export default _default;

package/dist/esm/McListSelect/comps/SelectedItem.js

@@ -0,0 +1,76 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { useSortable } from '@dnd-kit/sortable';
+import { MenuOutlined } from '@zykj2024/much-icons';
+import { McEllipsis, McIconFont } from "../..";
+import { Button } from 'antd';
+import { memo } from 'react';
+import "../index.less";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var SelectedItem = function SelectedItem(_ref) {
+  var _valueMap$value, _valueMap$value2, _inexistentValueMap$v, _inexistentValueMap$v2, _valueMap$value3;
+  var sortable = _ref.sortable,
+    valueMap = _ref.valueMap,
+    inexistent = _ref.inexistent,
+    text = _ref.text,
+    color = _ref.color,
+    reserved = _ref.reserved,
+    inexistentValueMap = _ref.inexistentValueMap,
+    value = _ref.value,
+    onRemove = _ref.onRemove,
+    _ref$style = _ref.style,
+    style = _ref$style === void 0 ? {} : _ref$style;
+  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") : '');
+  var disabled = !!((_valueMap$value3 = valueMap[value]) !== null && _valueMap$value3 !== void 0 && _valueMap$value3.disabled) || !valueMap[value] && reserved;
+  var getColor = function getColor() {
+    var defaultColor = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '#262626';
+    return disabled ? '#8c8c8c' : !valueMap[value] && inexistent && !reserved ? color : defaultColor;
+  };
+  var _useSortable = useSortable({
+      id: value
+    }),
+    setNodeRef = _useSortable.setNodeRef,
+    attributes = _useSortable.attributes,
+    listeners = _useSortable.listeners,
+    transform = _useSortable.transform,
+    transition = _useSortable.transition,
+    isDragging = _useSortable.isDragging;
+  var style0 = transform ? _objectSpread({
+    transform: "translate3d(".concat(transform.x, "px, ").concat(transform.y, "px, 0)"),
+    transition: isDragging ? 'unset' : transition
+  }, style) : _objectSpread({
+    transition: 'unset'
+  }, style);
+  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
+    ref: setNodeRef,
+    style: style0
+  }, attributes), {}, {
+    className: "mc-list-select-panel__selected-item",
+    children: [sortable && !disabled && /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({}, listeners), {}, {
+      className: "mc-list-select-panel__selected-item__drag",
+      type: "text",
+      icon: /*#__PURE__*/_jsx(MenuOutlined, {})
+    })), /*#__PURE__*/_jsx(McEllipsis, {
+      style: {
+        margin: '0 auto 0 4px',
+        color: getColor()
+      },
+      text: label,
+      tooltip: {
+        title: /*#__PURE__*/_jsx("span", {
+          style: {
+            color: getColor('#ffffff')
+          },
+          children: label
+        })
+      },
+      middle: true,
+      disabled: disabled
+    }), !disabled && /*#__PURE__*/_jsx(McIconFont, {
+      className: "mc-list-select-panel__selected-item__remove",
+      type: "icon-CloseOutlined",
+      onClick: onRemove
+    })]
+  }));
+};
+export default /*#__PURE__*/memo(SelectedItem);

package/dist/esm/McListSelect/index.d.ts

@@ -0,0 +1,10 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+import type { McListSelectProps, McListSelectRef } from './comps/ListSelect';
+import ListSelectPanel from './comps/ListSelectPanel';
+export type { McListSelectProps, McListSelectRef } from './comps/ListSelect';
+export type { McListSelectFetchOptions, McListSelectPanelProps, McListSelectPanelRef, } from './comps/ListSelectPanel';
+type CompoundedComponent = ForwardRefExoticComponent<McListSelectProps & RefAttributes<McListSelectRef>> & {
+    Panel: typeof ListSelectPanel;
+};
+declare const McListSelect: CompoundedComponent;
+export default McListSelect;

package/dist/esm/McListSelect/index.js

@@ -0,0 +1,5 @@
+import ListSelect from "./comps/ListSelect";
+import ListSelectPanel from "./comps/ListSelectPanel";
+var McListSelect = ListSelect;
+McListSelect.Panel = ListSelectPanel;
+export default McListSelect;