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

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

@@ -0,0 +1,289 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { Button, Popover, Select } from 'antd';
+import classNames from 'classnames';
+import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import "../index.less";
+import ListSelectPanel, { isLabelInValue } from "./ListSelectPanel";
+
+/**
+ * @author: wangzt
+ * @description: 下拉列表选择器-仅支持多选
+ */
+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 McListSelect = /*#__PURE__*/forwardRef(function (props, ref) {
+  /* 获取label宽度 */
+  var labelRef = useRef();
+  var _useState = useState(11),
+    _useState2 = _slicedToArray(_useState, 2),
+    paddingLeft = _useState2[0],
+    setPaddingLeft = _useState2[1];
+  useEffect(function () {
+    var labelResizeObserver = new ResizeObserver(function (entries) {
+      setPaddingLeft(entries[0].contentRect.width + 11);
+    });
+    labelRef.current && labelResizeObserver.observe(labelRef.current);
+    return function () {
+      return labelResizeObserver.disconnect();
+    };
+  }, []);
+  var label = props.label,
+    _props$placeholder = props.placeholder,
+    placeholder = _props$placeholder === void 0 ? '请选择' : _props$placeholder,
+    maxTagCount = props.maxTagCount,
+    _props$allowClear = props.allowClear,
+    allowClear = _props$allowClear === void 0 ? true : _props$allowClear,
+    title = props.title,
+    options = props.options,
+    fetchOptions = props.fetchOptions,
+    pageSize = props.pageSize,
+    extra = props.extra,
+    immediateInit = 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$initOnOpen = props.initOnOpen,
+    initOnOpen = _props$initOnOpen === void 0 ? true : _props$initOnOpen,
+    _props$inexistent = props.inexistent,
+    inexistent = _props$inexistent === void 0 ? false : _props$inexistent,
+    selectedLayout = props.selectedLayout,
+    value = props.value,
+    onChange = props.onChange,
+    style = props.style,
+    className = props.className;
+  var maxTagCount0 = props.hasOwnProperty('maxTagCount') ? maxTagCount : 1;
+  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$reserveOriginalV = _ref.reserveOriginalValue,
+    reserveOriginalValue = _ref$reserveOriginalV === void 0 ? false : _ref$reserveOriginalV;
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    selectValue = _useState4[0],
+    setSelectValue = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    open = _useState6[0],
+    setOpen = _useState6[1];
+  var _useState7 = useState([]),
+    _useState8 = _slicedToArray(_useState7, 2),
+    panelValue = _useState8[0],
+    setPanelValue = _useState8[1];
+  var valueMap0 = useRef();
+  var changeUndefinedFlag = useRef(false);
+  var panelRef = useRef();
+
+  // 格式化下拉选择器的值
+  var selectValue0 = useMemo(function () {
+    return selectValue.map(function (_ref2) {
+      var _valueMap0$current;
+      var value = _ref2.value,
+        label = _ref2.label;
+      return {
+        value: value,
+        label: label + (inexistent0 && !((_valueMap0$current = valueMap0.current) !== null && _valueMap0$current !== void 0 && _valueMap0$current[value]) ? "\u300C".concat(text, "\u300D") : '')
+      };
+    });
+  }, [selectValue, inexistent0]);
+
+  /* 回显 */
+  var echo = function echo() {
+    // 若已执行向外抛出undefined，则不执行后续代码并重置标记
+    if (changeUndefinedFlag.current) {
+      changeUndefinedFlag.current = false;
+      return;
+    }
+    var inexistentFlag = false;
+    var value1 = (value === null || value === void 0 ? void 0 : value.map(function (item) {
+      var _valueMap0$current2;
+      var v = isLabelInValue(item) ? item.value : item;
+      if ((_valueMap0$current2 = valueMap0.current) !== null && _valueMap0$current2 !== void 0 && _valueMap0$current2[v]) {
+        return valueMap0.current[v];
+      } else {
+        inexistentFlag = true;
+        return isLabelInValue(item) ? item : {
+          value: v,
+          label: v
+        };
+      }
+    })) || [];
+    setSelectValue(value1);
+    // 若当前有不存在的值，则向外抛出undefined并标记
+    if (inexistent0 && !reserveOriginalValue && value && valueMap0.current && inexistentFlag) {
+      changeUndefinedFlag.current = true;
+      onChange === null || onChange === void 0 || onChange(undefined);
+    }
+  };
+
+  /* 监听value变化，触发回显 */
+  useEffect(function () {
+    echo();
+  }, [value]);
+
+  /* 备选项初始化 */
+  var optionsInit = function optionsInit() {
+    // 非异步查询时
+    if (!fetchOptions && options) {
+      // 获取value映射集合
+      var map = {};
+      options === null || options === void 0 || options.forEach(function (item) {
+        return map[item.value] = item;
+      });
+      valueMap0.current = map;
+      // 更新回显数据
+      echo();
+    }
+  };
+
+  /* 监听options变化，触发备选项初始化 */
+  useEffect(function () {
+    optionsInit();
+  }, [options]);
+
+  /* 改变值的方法 */
+  var changeHandle = function changeHandle(v) {
+    // 若inexistent为true且非异步查询时，将不存在的项移除
+    var v1 = v.filter(function (_ref3) {
+      var _valueMap0$current3;
+      var value = _ref3.value;
+      return inexistent0 ? !!((_valueMap0$current3 = valueMap0.current) !== null && _valueMap0$current3 !== void 0 && _valueMap0$current3[value]) : true;
+    });
+    (!props.hasOwnProperty('value') || inexistent0) && setSelectValue(v1);
+    onChange === null || onChange === void 0 || onChange(!!v1.length ? v1.map(function (i) {
+      return labelInValue ? i : i.value;
+    }) : undefined);
+  };
+  useImperativeHandle(ref, function () {
+    return {
+      init: function init() {
+        var _panelRef$current;
+        setOpen(true);
+        (_panelRef$current = panelRef.current) === null || _panelRef$current === void 0 || _panelRef$current.init();
+      }
+    };
+  });
+  return /*#__PURE__*/_jsxs("div", {
+    style: _objectSpread({
+      position: label ? 'relative' : 'static',
+      height: 'auto',
+      '--selector-pl': "".concat(paddingLeft, "px"),
+      '--inexistent-color': color
+    }, style),
+    className: classNames('mc-list-select', maxTagCount0 === 1 && 'mc-list-select--inline', className),
+    children: [label && /*#__PURE__*/_jsx("span", {
+      ref: labelRef,
+      className: classNames('mc-list-select__label', disabled && 'mc-list-select--disabled'),
+      children: label
+    }), /*#__PURE__*/_jsx(Select, {
+      className: "mc-list-select__content",
+      placeholder: placeholder,
+      mode: "multiple",
+      showSearch: false,
+      maxTagCount: maxTagCount0,
+      maxTagPlaceholder: function maxTagPlaceholder(v) {
+        return /*#__PURE__*/_jsx(Popover, {
+          overlayStyle: {
+            maxWidth: 300
+          },
+          content: v.map(function (_ref4, index) {
+            var _ref5;
+            var label = _ref4.label;
+            return /*#__PURE__*/_jsxs("span", {
+              children: [index !== 0 && /*#__PURE__*/_jsx("span", {
+                children: ", "
+              }), /*#__PURE__*/_jsx("span", {
+                style: {
+                  color: ((_ref5 = '' + label) === null || _ref5 === void 0 ? void 0 : _ref5.indexOf("\u300C".concat(text, "\u300D"))) === -1 ? 'rgba(0, 0, 0, 0.88)' : color
+                },
+                children: label
+              })]
+            }, index);
+          }),
+          children: /*#__PURE__*/_jsx("span", {
+            children: '+' + v.length
+          })
+        });
+      },
+      allowClear: allowClear,
+      disabled: disabled,
+      open: open,
+      onDropdownVisibleChange: function onDropdownVisibleChange(o) {
+        setOpen(o);
+        if (o) {
+          var _panelRef$current2;
+          setPanelValue(selectValue);
+          initOnOpen && ((_panelRef$current2 = panelRef.current) === null || _panelRef$current2 === void 0 ? void 0 : _panelRef$current2.init());
+        }
+      },
+      labelInValue: true,
+      value: selectValue0,
+      onClear: function onClear() {
+        return changeHandle([]);
+      },
+      onDeselect: function onDeselect(o) {
+        return changeHandle(selectValue.filter(function (_ref6) {
+          var value = _ref6.value;
+          return value !== o.value;
+        }));
+      },
+      dropdownStyle: {
+        width: 'auto',
+        padding: '16px 16px 0'
+      },
+      dropdownRender: function dropdownRender() {
+        return /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx(ListSelectPanel, {
+            ref: panelRef,
+            title: title,
+            options: options,
+            fetchOptions: fetchOptions,
+            pageSize: pageSize,
+            extra: extra,
+            immediateInit: immediateInit,
+            disabled: disabled,
+            labelInValue: true,
+            allowClear: allowClear,
+            inexistent: inexistent,
+            selectedLayout: selectedLayout,
+            value: panelValue,
+            onChange: function onChange(v) {
+              setPanelValue(v || []);
+              // 异步查询时，更新value映射集合
+              if (fetchOptions) {
+                var map = {};
+                v === null || v === void 0 || v.forEach(function (item) {
+                  return map[item.value] = item;
+                });
+                valueMap0.current = Object.assign(valueMap0.current || {}, map);
+              }
+            }
+          }), /*#__PURE__*/_jsxs("div", {
+            className: "mc-list-select__dropdown-footer",
+            children: [/*#__PURE__*/_jsx(Button, {
+              size: "small",
+              onClick: function onClick() {
+                return setOpen(false);
+              },
+              children: "\u53D6\u6D88"
+            }), /*#__PURE__*/_jsx(Button, {
+              type: "primary",
+              size: "small",
+              onClick: function onClick() {
+                changeHandle(panelValue);
+                setOpen(false);
+              },
+              children: "\u786E\u5B9A"
+            })]
+          })]
+        });
+      }
+    })]
+  });
+});
+export default McListSelect;

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

@@ -0,0 +1,138 @@
+/// <reference types="react" />
+import '../index.less';
+export type BaseValueType = string | number;
+export interface Option {
+    value: BaseValueType;
+    label: string;
+    disabled?: boolean;
+    [key: string]: any;
+}
+export type MapType = Record<BaseValueType, Option>;
+export type McListSelectFetchOptions = (params: {
+    current: number;
+    pageSize: number;
+    keyword?: string;
+    extra?: any;
+}) => Promise<{
+    data: Option[];
+    total: number;
+}>;
+export interface PanelInexistent {
+    /**
+     * 不存在值的文字描述
+     * @defaultValue '不存在'
+     */
+    text?: string;
+    /**
+     * 不存在值的文字颜色
+     * @defaultValue '#ff4d4f'
+     */
+    color?: string;
+    /**
+     * 是否保留不存在的项并禁止其移除
+     * @defaultValue false
+     */
+    reserved?: boolean;
+}
+export type LabelInValueType = {
+    value: BaseValueType;
+    label: string;
+};
+type SelectValueType = BaseValueType | LabelInValueType;
+export declare const isLabelInValue: (value: SelectValueType) => value is LabelInValueType;
+/**
+ * 列表选择面板组件属性
+ */
+export interface McListSelectPanelProps {
+    /**
+     * 面板标题
+     * @defaultValue '可选项'
+     */
+    title?: React.ReactNode;
+    /**
+     * 可选数据列表
+     */
+    options?: Option[];
+    /**
+     * 异步分页获取选项的方法
+     * @remarks
+     * - 设置后将忽略原 options 属性
+     * - 不执行不存在值的处理逻辑
+     * - 涉及回显的场景（如表单）建议设置为 true 以对象形式交互
+     */
+    fetchOptions?: McListSelectFetchOptions;
+    /**
+     * 分页每页数量
+     * @defaultValue 20
+     */
+    pageSize?: number;
+    /**
+     * 分页查询的额外参数
+     * @remarks 参数变化时会触发 init 方法重置查询
+     */
+    extra?: any;
+    /**
+     * 是否立即初始化
+     * @defaultValue true
+     * @remarks 使用异步分页且存在 extra 参数时可设为 false，通过 extra 变化触发初始化避免重复
+     */
+    immediateInit?: boolean;
+    /**
+     * 是否禁用组件
+     * @defaultValue false
+     */
+    disabled?: boolean;
+    /**
+     * 是否将选项标签等信息包装到值中
+     * @defaultValue false
+     * @remarks 涉及回显的场景（如表单）建议设置为 true
+     */
+    labelInValue?: boolean;
+    /**
+     * 是否允许清空选择
+     * @defaultValue true
+     */
+    allowClear?: boolean;
+    /**
+     * 是否处理不存在值
+     * @defaultValue false
+     * @remarks 异步查询时无效
+     */
+    inexistent?: boolean | PanelInexistent;
+    /**
+     * 已选项布局方式
+     * @defaultValue 'block'
+     * @remarks
+     * - 'block': 每项独占一行
+     * - 'inline': 行内排列
+     * - 'sortable': 每项独占一行且可排序
+     */
+    selectedLayout?: 'block' | 'inline' | 'sortable';
+    /**
+     * 当前选中的值
+     */
+    value?: SelectValueType[];
+    /**
+     * 选择变化时的回调函数
+     * @param value - 新选中的值数组
+     */
+    onChange?: (value?: SelectValueType[]) => void;
+    /**
+     * 自定义样式
+     */
+    style?: React.CSSProperties;
+    /**
+     * 自定义类名
+     */
+    className?: string;
+    /**
+     * 组件引用
+     */
+    ref?: any;
+}
+export type McListSelectPanelRef = {
+    /** 初始化方法（重置查询） */
+    init: () => void;
+};
+declare const _default: import("react").NamedExoticComponent<McListSelectPanelProps>;
+export default _default;