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

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

@@ -0,0 +1,19 @@
+import { CascaderProps } from 'antd';
+import { CSSProperties, FC, ReactNode } from 'react';
+import './index.less';
+type Inexistent = {
+    inexistentText?: string;
+    inexistentColor?: string;
+    reserveOriginalValue?: boolean;
+};
+export type McCascaderProps = CascaderProps & {
+    style?: CSSProperties;
+    className?: string;
+    name?: string;
+    label?: ReactNode;
+    inexistent?: boolean | Inexistent;
+    city?: boolean;
+    [key: string]: any;
+};
+declare const McCascader: FC<McCascaderProps>;
+export default McCascader;

package/dist/esm/McCascader/index.js

@@ -0,0 +1,221 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["style", "className", "label", "inexistent", "city", "value", "onChange", "options", "multiple", "disabled", "fieldNames", "maxTagCount"];
+import { Cascader, Divider, Popover } from 'antd';
+import { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
+import { cityData } from "./city";
+import "./index.less";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var McCascader = /*#__PURE__*/forwardRef(function (props, ref) {
+  var style = props.style,
+    className = props.className,
+    label = props.label,
+    _props$inexistent = props.inexistent,
+    inexistent = _props$inexistent === void 0 ? false : _props$inexistent,
+    _props$city = props.city,
+    city = _props$city === void 0 ? false : _props$city,
+    value = props.value,
+    onChange = props.onChange,
+    options = props.options,
+    multiple = props.multiple,
+    disabled = props.disabled,
+    fieldNames = props.fieldNames,
+    maxTagCount = props.maxTagCount,
+    rest = _objectWithoutProperties(props, _excluded);
+  var _ref = typeof inexistent === 'boolean' ? {} : inexistent,
+    _ref$inexistentText = _ref.inexistentText,
+    inexistentText = _ref$inexistentText === void 0 ? '不存在' : _ref$inexistentText,
+    _ref$inexistentColor = _ref.inexistentColor,
+    inexistentColor = _ref$inexistentColor === void 0 ? '#ff4d4f' : _ref$inexistentColor,
+    _ref$reserveOriginalV = _ref.reserveOriginalValue,
+    reserveOriginalValue = _ref$reserveOriginalV === void 0 ? false : _ref$reserveOriginalV;
+  var _maxTagCount = useMemo(function () {
+    return props.hasOwnProperty('maxTagCount') ? maxTagCount : 1;
+  }, [maxTagCount]);
+
+  /* 对于城市级联的选项以及字段名处理 */
+  var _options = useMemo(function () {
+    return city ? cityData : options;
+  }, [city, options]);
+  var _fieldNames = useMemo(function () {
+    return city ? {
+      label: 'name',
+      value: 'name',
+      children: 'districts'
+    } : fieldNames;
+  }, [city, fieldNames]);
+
+  /* 获取label宽度 */
+  var labelRef = useRef();
+  var _useState = useState(11),
+    _useState2 = _slicedToArray(_useState, 2),
+    paddingLeft = _useState2[0],
+    setPaddingLeft = _useState2[1];
+  var labelResizeObserver = new ResizeObserver(function (entries) {
+    setPaddingLeft(entries[0].contentRect.width + 11);
+  });
+  useEffect(function () {
+    labelRef.current && labelResizeObserver.observe(labelRef.current);
+    return function () {
+      return labelResizeObserver.disconnect();
+    };
+  }, []);
+
+  /* 判断value值是否存在于options中 */
+  var _useState3 = useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    cascaderValue = _useState4[0],
+    setCascaderValue = _useState4[1];
+  var _inexistent = useRef(false);
+  // 获取所有备选项的值列表
+  var _values = useMemo(function () {
+    var _ref2 = _fieldNames || {},
+      _ref2$value = _ref2.value,
+      fieldValue = _ref2$value === void 0 ? 'value' : _ref2$value,
+      _ref2$children = _ref2.children,
+      fieldChildren = _ref2$children === void 0 ? 'children' : _ref2$children;
+    var values = [];
+    /* 递归获取当前节点的完整级联数据 */
+    var fn = function fn(list, parents) {
+      return list === null || list === void 0 ? void 0 : list.forEach(function (item) {
+        var v = [].concat(_toConsumableArray(parents), [item[fieldValue]]);
+        values.push(v.join(':'));
+        fn(item[fieldChildren], v);
+      });
+    };
+    fn(_options, []);
+    return values;
+  }, [_options, _fieldNames]);
+  // 监听值和值列表的变化（执行不存在值的判断逻辑）
+  useEffect(function () {
+    // 若已执行不存在外抛undefined逻辑，则不再向下执行后续代码，并重置标记
+    if (inexistent && _inexistent.current) {
+      _inexistent.current = false;
+      return;
+    }
+    var _v = value;
+    /* 若inexistent为true，判断不存在情况并重置值 */
+    if (inexistent) {
+      if (multiple) {
+        var _v2;
+        _v = ((_v2 = _v) === null || _v2 === void 0 ? void 0 : _v2.map(function (i) {
+          var _i$join;
+          if (_values.includes(i === null || i === void 0 || (_i$join = i.join) === null || _i$join === void 0 ? void 0 : _i$join.call(i, ':'))) {
+            return i;
+          } else {
+            var _i = _toConsumableArray(i);
+            _i[_i.length - 1] = _i[_i.length - 1] + "\u300C".concat(inexistentText, "\u300D");
+            return _i;
+          }
+        })) || [];
+      } else {
+        var _v3, _v3$join, _v$join, _v4;
+        _v = _v ? _values.includes((_v3 = _v) === null || _v3 === void 0 || (_v3$join = _v3.join) === null || _v3$join === void 0 ? void 0 : _v3$join.call(_v3, ':')) ? _v : [((_v$join = (_v4 = _v).join) === null || _v$join === void 0 ? void 0 : _v$join.call(_v4, ' / ')) + "\u300C".concat(inexistentText, "\u300D")] : undefined;
+      }
+    }
+    // 若当前value包含不存在值，且不保留原值时，则向外抛出undefined，并标记_inexistent为true
+    if (_v && JSON.stringify(_v).indexOf("\u300C".concat(inexistentText, "\u300D")) !== -1 && !reserveOriginalValue) {
+      _inexistent.current = true;
+      onChange === null || onChange === void 0 || onChange([], undefined);
+    }
+    setCascaderValue(_v);
+  }, [value, JSON.stringify(_values), inexistent, multiple]);
+  // 组件change事件
+  var change = function change(v, selectedOptions) {
+    var _v = v,
+      _selectedOptions = selectedOptions;
+    // 若inexistent为true，当重新触发change事件时，将不存在的项移除（仅多选时需处理）
+    if (inexistent && multiple) {
+      _v = v.filter(function (item) {
+        return !item.some(function (i) {
+          return ('' + i).indexOf("\u300C".concat(inexistentText, "\u300D")) !== -1;
+        });
+      });
+      _selectedOptions = selectedOptions.filter(function (item) {
+        return !item.some(function (i) {
+          return !i;
+        });
+      });
+    }
+    if (!props.hasOwnProperty('value')) {
+      setCascaderValue(_v);
+    }
+    onChange === null || onChange === void 0 || onChange(_v, _selectedOptions);
+  };
+  // 扩展全选功能 (继承原有插槽)
+  var dropdownRender = function dropdownRender(menus, _dropdownRender) {
+    return /*#__PURE__*/_jsxs("div", {
+      children: [menus, _dropdownRender, /*#__PURE__*/_jsx(Divider, {
+        style: {
+          margin: 0
+        }
+      }), /*#__PURE__*/_jsx("div", {
+        style: {
+          padding: 8
+        },
+        onClick: function onClick() {
+          // console.log(ref)
+        },
+        children: "\u5168\u9009"
+      })]
+    });
+  };
+  return /*#__PURE__*/_jsxs("div", {
+    style: _objectSpread({
+      position: label ? 'relative' : 'static',
+      height: multiple ? 'auto' : 32,
+      '--selector-pl': "".concat(paddingLeft, "px"),
+      '--inexistent-color': inexistentColor
+    }, style),
+    className: "mc-cascader ".concat(multiple && _maxTagCount === 1 ? 'mc-cascader--inline' : '', " ").concat(className || ''),
+    children: [label && /*#__PURE__*/_jsx("span", {
+      ref: labelRef,
+      className: "mc-cascader__label ".concat(disabled ? 'mc-cascader--disabled' : ''),
+      children: label
+    }), /*#__PURE__*/_jsx(Cascader, _objectSpread({
+      ref: ref,
+      className: "mc-cascader__content",
+      value: cascaderValue,
+      onChange: change,
+      options: _options,
+      multiple: multiple,
+      disabled: disabled,
+      fieldNames: _fieldNames
+      // dropdownRender={dropdownRender}
+      ,
+      placeholder: "\u8BF7\u9009\u62E9",
+      showSearch: true,
+      allowClear: true,
+      maxTagCount: _maxTagCount,
+      maxTagPlaceholder: function maxTagPlaceholder(v) {
+        return /*#__PURE__*/_jsx(Popover, {
+          overlayStyle: {
+            maxWidth: 300
+          },
+          content: v.map(function (_ref3, index) {
+            var _ref4;
+            var value = _ref3.value,
+              label = _ref3.label;
+            return /*#__PURE__*/_jsxs("span", {
+              children: [index !== 0 && /*#__PURE__*/_jsx("span", {
+                children: ", "
+              }), /*#__PURE__*/_jsx("span", {
+                style: {
+                  color: ((_ref4 = '' + value) === null || _ref4 === void 0 ? void 0 : _ref4.indexOf("\u300C".concat(inexistentText, "\u300D"))) === -1 ? 'rgba(0, 0, 0, 0.88)' : inexistentColor
+                },
+                children: label
+              })]
+            }, value);
+          }),
+          children: /*#__PURE__*/_jsx("span", {
+            children: '+' + v.length
+          })
+        });
+      }
+    }, rest))]
+  });
+});
+export default McCascader;

package/dist/esm/McCascader/index.less

@@ -0,0 +1,72 @@
+.mc-cascader {
+  &__label {
+    color: #262626;
+    font-size: 14px;
+    position: absolute;
+    top: 0;
+    left: 11px;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+
+    &::after {
+      content: '\FF1A';
+      margin-left: 2px;
+    }
+
+    &.mc-cascader--disabled {
+      color: rgba(0, 0, 0, 25%);
+      cursor: no-drop;
+    }
+  }
+
+  &__content {
+    width: 100%;
+    height: 100%;
+
+    &.ant-cascader.ant-select {
+      .ant-select-selector {
+        padding-left: var(--selector-pl);
+
+        .ant-select-selection-overflow-item-rest .ant-select-selection-item {
+          color: #fff;
+          background: #325cf7;
+          padding-left: 4px;
+
+          .ant-select-selection-item-content {
+            margin-right: 0;
+          }
+        }
+
+        .ant-select-selection-item[title*='「'][title$='」'] {
+          color: var(--inexistent-color);
+        }
+      }
+
+      &.ant-select-single .ant-select-selector .ant-select-selection-search {
+        left: var(--selector-pl);
+      }
+
+      &.ant-select-multiple .ant-select-selector {
+        .ant-select-selection-placeholder {
+          left: var(--selector-pl);
+        }
+
+        .ant-select-selection-search {
+          margin-left: 0;
+        }
+      }
+    }
+  }
+
+  &.mc-cascader--inline
+    .ant-select-selection-overflow-item:not(
+      .ant-select-selection-overflow-item-rest,
+      .ant-select-selection-overflow-item-suffix
+    ) {
+    flex: 1;
+    min-width: 0;
+    margin-right: 4px;
+  }
+}

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

@@ -0,0 +1,192 @@
+import { ButtonProps, TableProps } from 'antd';
+import { CSSProperties, ReactElement, ReactNode } from 'react';
+import './index.less';
+/** 请求参数 */
+type QueryParamsType<T = any> = {
+    /** 当前页码 */
+    current: number;
+    /** 每页显示的记录数 */
+    pageSize: number;
+} & T;
+/** 批量操作配置接口 */
+interface BatchConfig {
+    /** 是否显示批量操作按钮 */
+    show?: boolean;
+    /** 批量操作按钮的文本 */
+    buttonText?: string;
+    /** 批量操作按钮的属性 */
+    buttonProps?: ButtonProps;
+    /** 批量操作按钮在操作栏中的位置 */
+    order?: number;
+}
+/** McContainer 组件 Props 类型定义 */
+export interface McContainerProps<T> {
+    /** 组件的自定义样式 */
+    style?: CSSProperties;
+    /** 组件的自定义类名 */
+    className?: string;
+    /**
+     * 页面容器的高度
+     * @default 'calc(100vh - 88px)' 即视口高度-菜单header高度56px-页面上下内边距16px*2
+     */
+    height?: string;
+    /**
+     * 页面容器的背景色
+     * @default '#ffffff'
+     */
+    backgroundColor?: string;
+    /**
+     * 是否展示头部遮罩
+     * @default true
+     */
+    showCell?: boolean;
+    /**
+     * 是否触发首次查询
+     * @description 若使用场景为需自定义默认查询参数，可将该属性设置为false，
+     * 并手动调用setDefaultQueryParams方法重新设置默认查询参数，而后调用query方法触发查询
+     * @default true
+     */
+    immediateQuery?: boolean;
+    /**
+     * 加载中状态（已覆盖table组件的loading）
+     * @default false
+     */
+    loading?: boolean;
+    /** 加载loading下方的文案，默认为测试中 */
+    loadingText?: string;
+    /**
+     * 查询项（不受展开、收起按钮控制显示隐藏的查询项）
+     * @description 建议结合 McSelect、McCascader、McDateRange、McInput 等组件使用
+     */
+    queryItems?: ReactElement;
+    /**
+     * 是否显示查询按钮
+     * @default true
+     */
+    showQuery?: boolean;
+    /**
+     * 是否显示重置按钮
+     * @default true
+     */
+    showReset?: boolean;
+    /**
+     * 是否显示展开、收起按钮
+     * @default false
+     */
+    showCollapse?: boolean;
+    /** 可折叠的查询项（可通过展开、收起按钮控制显示隐藏的查询项） */
+    collapsibleQueryItems?: ReactElement;
+    /**
+     * 查询回调事件
+     * @param params - 分页参数
+     * @param filters - 过滤条件
+     * @param sorter - 排序条件
+     * @param extra - 额外信息，包含当前数据源和触发的操作类型
+     */
+    onQuery?: (params: QueryParamsType<T>, filters?: Record<string, any>, sorter?: Record<string, any>, extra?: {
+        currentDataSource: any[];
+        action: 'paginate' | 'sort' | 'filter';
+    }) => void;
+    /**
+     * 重置按钮回调事件
+     * @description 若设置该属性，则在点击重置按钮时不再触发onQuery事件
+     */
+    onReset?: (params?: QueryParamsType<T>) => void;
+    /**
+     * 查询区自定义渲染
+     * @description 若设置为null，则不显示查询区
+     */
+    queryRender?: ReactNode;
+    /**
+     * 操作栏
+     * @description 若未设置该项，则不显示
+     */
+    actionBar?: ReactElement;
+    /**
+     * 操作栏自定义渲染
+     * @param batchEl - 批量操作按钮实例
+     */
+    actionBarRender?: (batchEl: ReactNode) => ReactNode;
+    /**
+     * 批量操作已选项数量
+     * @description 当数量大于0时，显示批量操作栏
+     */
+    batchNum?: number;
+    /**
+     * 批量操作按钮区
+     * @description 若未设置该项，则不显示
+     */
+    batchBtns?: ReactNode;
+    /** 批量操作按钮配置 */
+    batch?: BatchConfig;
+    /** 批量操作取消按钮回调事件 */
+    onCancel?: () => void;
+    /** 表格组件属性 */
+    tableProps?: TableProps<any>;
+    /**
+     * 数据表格区自定义渲染
+     * @description 若设置为null，则不显示数据表格区
+     */
+    tableRender?: ReactNode;
+    /**
+     * 当前分页数据为空且非第一页时，是否自动会退到上一个分页
+     * @default false
+     */
+    autoBackPagination?: boolean;
+    /**
+     * 折叠事件的回调
+     * @param collapsed - 是否折叠
+     */
+    onCollapse?: (collapsed: boolean) => void;
+}
+/** McContainer 组件 Ref 类型定义 */
+export interface McContainerRef<T = any> {
+    /**
+     * 调用查询的方法
+     * @description 可通过传参更新查询参数的状态后触发查询，所设置的属性仅会覆盖原查询参数对应的属性
+     * @param params - 查询参数，仅支持设置过name属性的查询项
+     */
+    query: (params?: QueryParamsType<T>) => void;
+    /**
+     * 调用重置的方法
+     * @description 重置查询参数为默认值
+     */
+    reset: () => void;
+    /**
+     * 设置默认查询参数
+     * @description 用于重置使用，仅对设置过name属性的查询项有效
+     * 仅对设置过name属性的查询项（和current、pageSize）有效，查询项自身已绑定value属性的除外，需自行编写相关业务逻辑代码进行状态管理；
+     * 可通过该方法配置默认查询的分页参数；
+     * 设置的查询参数将覆盖原有默认值，如：setDefaultQueryParams({pageSize: 10, status: 1})，设置后的默认查询参数为{current: 1, pageSize: 10, status: 1}
+     * 原有默认值 {current: 1, pageSize: 20}（若未开启分页功能，默认值为{}
+     * @param params - 默认查询参数
+     */
+    setDefaultQueryParams: (params: QueryParamsType<T>) => void;
+    /**
+     * 设置单个查询项的参数
+     * @description 仅支持设置过name属性的查询项
+     * @param name - 查询项名称
+     * @param value - 查询项值
+     */
+    setQueryParam: (name: keyof QueryParamsType<T>, value: any) => void;
+    /**
+     * 获取单个查询项的参数
+     * @description 仅支持设置过name属性的查询项
+     * @param name - 查询项名称
+     */
+    getQueryParam: (name: keyof QueryParamsType<T>) => any;
+    /**
+     * 获取所有查询项的参数
+     * @returns 当前可见的查询项的参数集
+     */
+    getQueryParams: () => QueryParamsType<T>;
+    /**
+     * 重置查询参数
+     * @description 重置为默认查询参数
+     */
+    resetQueryParams: () => void;
+}
+declare const McContainer: <T>(props: McContainerProps<T> & {
+    ref?: React.ForwardedRef<McContainerRef<T>>;
+}) => JSX.Element;
+export default McContainer;