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

package/dist/McLazyLoader/demo/table.js

@@ -1,73 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-/**
- * title: 在Antd Table翻页场景中使用
- * description: 翻页后的数据会重新进入懒加载流程
- */
-import { Table } from 'antd';
-import { McLazyLoader } from "../..";
-import { useState } from 'react';
-import { jsx as _jsx } from "react/jsx-runtime";
-var getTextList = function getTextList(cur) {
-  return Array.from({
-    length: 40
-  }, function (_, index) {
-    return {
-      key: index + cur,
-      value: index
-    };
-  });
-};
-export default (function () {
-  var _useState = useState(1),
-    _useState2 = _slicedToArray(_useState, 2),
-    cur = _useState2[0],
-    setCur = _useState2[1];
-  console.log(cur);
-  return /*#__PURE__*/_jsx("div", {
-    children: /*#__PURE__*/_jsx(Table, {
-      dataSource: getTextList(cur),
-      scroll: {
-        y: 200
-      },
-      pagination: {
-        pageSize: 40,
-        current: cur,
-        total: 120
-      },
-      onChange: function onChange(info) {
-        var _info$current;
-        setCur((_info$current = info === null || info === void 0 ? void 0 : info.current) !== null && _info$current !== void 0 ? _info$current : 1);
-      },
-      components: {
-        body: function body(data) {
-          return /*#__PURE__*/_jsx(McLazyLoader, {
-            style: {
-              height: 200,
-              width: 430,
-              overflow: 'auto',
-              display: 'flex',
-              flexWrap: 'wrap'
-            },
-            onItemVisible: function onItemVisible(index) {
-              console.log('visible', index);
-            },
-            itemMinHeight: 50
-            // 不加这个的话，水平排列的元素不占空间，没有懒加载
-            ,
-            itemMinWidth: 200,
-            children: data.map(function (x) {
-              return /*#__PURE__*/_jsx("img", {
-                width: "auto",
-                height: 50,
-                onLoad: function onLoad() {
-                  console.log('[window root: loaded]', new Date(), x.key, cur);
-                },
-                src: "http://pre.data.muchcloud.com/static/img/logo-t.34c4816d.png"
-              }, x.key + '_' + cur);
-            })
-          });
-        }
-      }
-    })
-  });
-});

package/dist/McLazyLoader/index.d.ts

@@ -1,39 +0,0 @@
-import React from 'react';
-interface ObserverInsertionWrapperProps {
-    children: React.ReactNode[];
-    /**
-     * @description 最小高度，不能为0。为0时懒加载可能会无效
-     * @default 20
-     */
-    itemMinHeight: number;
-    /**
-     * @description 最小宽度，水平排列时不能为0
-     * @default unset
-     */
-    itemMinWidth?: number;
-    /**
-     * @description 元素进入视图回调
-     */
-    onItemVisible?: (index: number, key: string) => void;
-    /**
-     * @description 距离视图多少像素时触发。出于用户体验考虑，建议设置一个正数
-     * @default 0
-     */
-    offset?: number;
-    /**
-     * @description 重叠比例为多少时触发
-     * @default 0
-     */
-    threshold?: number;
-    /**
-     * @description 监听的根元素，不传则监听浏览器窗口
-     * @default null
-     */
-    root?: Element | Document | null;
-    /**
-     * @description 外层容器样式
-     */
-    style?: React.CSSProperties;
-}
-declare const ObserverInsertionWrapper: React.FC<ObserverInsertionWrapperProps>;
-export default ObserverInsertionWrapper;

package/dist/McLazyLoader/index.js

@@ -1,88 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { jsx as _jsx } from "react/jsx-runtime";
-var getKey = function getKey(child, index) {
-  var _child$key;
-  return /*#__PURE__*/React.isValidElement(child) ? String((_child$key = child.key) !== null && _child$key !== void 0 ? _child$key : index) : String(index);
-};
-var ObserverInsertionWrapper = function ObserverInsertionWrapper(_ref) {
-  var children = _ref.children,
-    style = _ref.style,
-    _ref$offset = _ref.offset,
-    offset = _ref$offset === void 0 ? 0 : _ref$offset,
-    _ref$threshold = _ref.threshold,
-    threshold = _ref$threshold === void 0 ? 0 : _ref$threshold,
-    _ref$root = _ref.root,
-    root = _ref$root === void 0 ? null : _ref$root,
-    _ref$itemMinHeight = _ref.itemMinHeight,
-    itemMinHeight = _ref$itemMinHeight === void 0 ? 20 : _ref$itemMinHeight,
-    itemMinWidth = _ref.itemMinWidth,
-    onItemVisible = _ref.onItemVisible;
-  var wrapperRef = useRef(null);
-
-  // 已经显示过的 key 列表
-  var _useState = useState(new Set()),
-    _useState2 = _slicedToArray(_useState, 2),
-    visibleItems = _useState2[0],
-    setVisibleItems = _useState2[1];
-
-  // 为避免 children 每次渲染变化导致 useEffect 重复执行，构建一个 keyList 哈希
-  var keyListHash = useMemo(function () {
-    var list = React.Children.toArray(children).map(function (child, index) {
-      return getKey(child, index);
-    });
-    return JSON.stringify(list);
-  }, [children]);
-
-  // 每次 keyList 变动重置显示列表
-  useEffect(function () {
-    setVisibleItems(new Set());
-  }, [keyListHash]);
-  useEffect(function () {
-    var _wrapperRef$current;
-    var observer = new IntersectionObserver(function (entries) {
-      entries.forEach(function (entry) {
-        var index = Number(entry.target.getAttribute('data-index'));
-        var key = String(entry.target.getAttribute('data-key'));
-        if (entry.isIntersecting && !visibleItems.has(key)) {
-          setVisibleItems(function (prev) {
-            var next = new Set(prev);
-            next.add(key);
-            onItemVisible === null || onItemVisible === void 0 || onItemVisible(index, key);
-            return next;
-          });
-        }
-      });
-    }, {
-      root: root,
-      rootMargin: "".concat(offset, "px"),
-      threshold: threshold
-    });
-    var elements = (_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 ? void 0 : _wrapperRef$current.children;
-    elements && Array.from(elements).forEach(function (element) {
-      observer.observe(element);
-    });
-    return function () {
-      elements && Array.from(elements).forEach(function (element) {
-        observer.unobserve(element);
-      });
-    };
-  }, [offset, threshold, root, keyListHash, visibleItems]);
-  return /*#__PURE__*/_jsx("div", {
-    ref: wrapperRef,
-    style: style,
-    children: React.Children.map(children, function (child, index) {
-      var key = getKey(child, index);
-      return /*#__PURE__*/_jsx("div", {
-        "data-key": key,
-        "data-index": index,
-        style: {
-          minHeight: itemMinHeight,
-          minWidth: itemMinWidth !== null && itemMinWidth !== void 0 ? itemMinWidth : 'unset'
-        },
-        children: visibleItems.has(key) ? child : null
-      }, key);
-    })
-  });
-};
-export default ObserverInsertionWrapper;

package/dist/McListSelect/comps/ListSelect.d.ts

@@ -1,67 +0,0 @@
-import { FC } from 'react';
-import '../index.less';
-import { McListSelectPanelProps } from './ListSelectPanel';
-/**
- * @author: wangzt
- * @description: 下拉列表选择器-仅支持多选
- */
-interface Inexistent {
-    /**
-     * 不存在值的文字描述
-     * @defaultValue '不存在'
-     */
-    text?: string;
-    /**
-     * 不存在值的文字颜色
-     * @defaultValue '#ff4d4f'
-     */
-    color?: string;
-    /**
-     * 是否保留原值
-     * @remarks 若为 true，则在执行不存在值的处理逻辑时，不向外抛出 undefined
-     * @defaultValue false
-     */
-    reserveOriginalValue?: boolean;
-}
-export type McListSelectProps = Omit<McListSelectPanelProps, 'PanelInexistent'> & {
-    /**
-     * 查询项的字段名
-     * @remarks 配合 McContainer 组件的查询功能使用
-     */
-    name?: string;
-    /**
-     * 查询项的标签文字
-     * @remarks 若未设置，样式为表单项形态
-     */
-    label?: React.ReactNode;
-    /**
-     * 选择框默认文本
-     * @defaultValue '请选择'
-     */
-    placeholder?: string;
-    /**
-     * 最多显示多少个 tag
-     * @remarks 响应式模式会对性能产生损耗
-     * @defaultValue 1
-     */
-    maxTagCount?: number | 'responsive';
-    /**
-     * 是否每次展开下拉菜单时都初始化（重置查询）
-     * @defaultValue true
-     */
-    initOnOpen?: boolean;
-    /**
-     * 是否执行不存在值的处理逻辑
-     * @remarks
-     * - 异步查询时无效
-     * - 为保证该属性的相关功能生效，options 无数据的情况下请配置为空数组 []
-     * @defaultValue false
-     */
-    inexistent?: boolean | Inexistent;
-};
-export type McListSelectRef = {
-    /** 初始化方法（显示下拉菜单并重置查询） */
-    init: () => void;
-};
-declare const McListSelect: FC<McListSelectProps>;
-export default McListSelect;

package/dist/McListSelect/comps/ListSelect.js

@@ -1,289 +0,0 @@
-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.css";
-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/McListSelect/comps/ListSelectPanel.d.ts

@@ -1,138 +0,0 @@
-/// <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;