@zykj2024/much-library 1.0.9

package/dist/McContainer/index.js

@@ -0,0 +1,407 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { Button, Spin, Table } from 'antd';
+import { CaretDownFilled, DoubleLeftOutlined } from 'much-icons';
+import { Children, cloneElement, forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import "./index.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var McContainer = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _tableProps$dataSourc;
+  var style = props.style,
+    className = props.className,
+    _props$height = props.height,
+    height = _props$height === void 0 ? 'calc(100vh - 88px)' : _props$height,
+    _props$backgroundColo = props.backgroundColor,
+    backgroundColor = _props$backgroundColo === void 0 ? '#ffffff' : _props$backgroundColo,
+    _props$immediateQuery = props.immediateQuery,
+    immediateQuery = _props$immediateQuery === void 0 ? true : _props$immediateQuery,
+    _props$loading = props.loading,
+    loading = _props$loading === void 0 ? false : _props$loading,
+    queryItems = props.queryItems,
+    _props$showQuery = props.showQuery,
+    showQuery = _props$showQuery === void 0 ? true : _props$showQuery,
+    _props$showReset = props.showReset,
+    showReset = _props$showReset === void 0 ? true : _props$showReset,
+    _props$showCollapse = props.showCollapse,
+    showCollapse = _props$showCollapse === void 0 ? false : _props$showCollapse,
+    collapsibleQueryItems = props.collapsibleQueryItems,
+    onQuery = props.onQuery,
+    onReset = props.onReset,
+    queryRender = props.queryRender,
+    actionBar = props.actionBar,
+    _props$batchNum = props.batchNum,
+    batchNum = _props$batchNum === void 0 ? 0 : _props$batchNum,
+    batchBtns = props.batchBtns,
+    onCancel = props.onCancel,
+    tableProps = props.tableProps,
+    tableRender = props.tableRender;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    collapse = _useState2[0],
+    setCollapse = _useState2[1];
+  var allNamesRef = useRef([]);
+  var _useState3 = useState({}),
+    _useState4 = _slicedToArray(_useState3, 2),
+    queryParams = _useState4[0],
+    setQueryParams = _useState4[1];
+  var queryParamsRef = useRef({});
+  var defaultQueryParamsRef = useRef({});
+  var initializedRef = useRef(false);
+
+  /* 获取actionBar高度 */
+  var actionBarRef = useRef();
+  var _useState5 = useState(0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    actionBarHeight = _useState6[0],
+    setActionBarHeight = _useState6[1];
+  var actionBarResizeObserver = new ResizeObserver(function (entries) {
+    setActionBarHeight(entries[0].contentRect.height + 40);
+  });
+  useEffect(function () {
+    if (actionBarRef.current) {
+      actionBarResizeObserver.observe(actionBarRef.current);
+    }
+    return function () {
+      return actionBarResizeObserver.disconnect();
+    };
+  }, []);
+
+  // 为设置过name属性的查询项添加value属性和onChange事件，从而收集查询项的值（查询项自身已绑定value属性的除外，需自行编写相关业务逻辑代码进行状态管理）
+  var mapQuerys = function mapQuerys(items) {
+    var ELs = null;
+    if (items) {
+      ELs = Children.map(items.props.children ? items.props.children : items, function (item) {
+        if (item !== null && item !== void 0 && item.props) {
+          var _item$props = item.props,
+            _name = _item$props.name,
+            _onChange = _item$props.onChange;
+          var canCollect = _name && !item.props.hasOwnProperty('value');
+          if (canCollect) {
+            if (!allNamesRef.current.includes(_name)) {
+              allNamesRef.current.push(_name);
+            }
+            return /*#__PURE__*/cloneElement(item, {
+              value: queryParams[_name],
+              onChange: function onChange(v) {
+                var _params = _objectSpread(_objectSpread({}, queryParamsRef.current), {}, _defineProperty({}, _name, v));
+                queryParamsRef.current = _params;
+                setQueryParams(_params);
+                for (var _len = arguments.length, rest = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+                  rest[_key - 1] = arguments[_key];
+                }
+                _onChange === null || _onChange === void 0 || _onChange.apply(void 0, [v].concat(rest));
+              }
+            });
+          }
+        }
+        return item;
+      });
+    }
+    return ELs;
+  };
+
+  // 格式化查询参数（返回当前可见的查询项的参数集）
+  var formatQueryParams = function formatQueryParams() {
+    var _tableProps$paginatio;
+    var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    var _params = tableRender || tableRender === null || (tableProps === null || tableProps === void 0 ? void 0 : tableProps.pagination) === false || tableProps !== null && tableProps !== void 0 && (_tableProps$paginatio = tableProps.pagination) !== null && _tableProps$paginatio !== void 0 && _tableProps$paginatio.hasOwnProperty('onChange') || tableProps !== null && tableProps !== void 0 && tableProps.hasOwnProperty('onChange') ? {} : {
+      current: params.current,
+      pageSize: params.pageSize
+    };
+    var fn = function fn(items) {
+      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+      items && Children.map(items.props.children ? items.props.children : items, function (item) {
+        if (item !== null && item !== void 0 && item.props) {
+          var _item$props2;
+          var _name2 = (_item$props2 = item.props) === null || _item$props2 === void 0 ? void 0 : _item$props2.name;
+          if (_name2 && !item.props.hasOwnProperty('value')) {
+            _params[_name2] = params[_name2];
+          }
+        }
+      });
+    };
+    fn(queryItems);
+    fn(collapsibleQueryItems);
+    return _params;
+  };
+
+  // 查询
+  var query = function query(params) {
+    if (params) {
+      var _params = _objectSpread({}, queryParamsRef.current);
+      // 仅支持设置过name属性的查询项（和current、pageSize）
+      Object.entries(params).forEach(function (_ref) {
+        var _ref2 = _slicedToArray(_ref, 2),
+          key = _ref2[0],
+          value = _ref2[1];
+        if (allNamesRef.current.includes(key)) {
+          _params[key] = value;
+        }
+      });
+      queryParamsRef.current = _params;
+      setQueryParams(_params);
+      onQuery === null || onQuery === void 0 || onQuery(formatQueryParams(_params));
+    } else {
+      onQuery === null || onQuery === void 0 || onQuery(formatQueryParams(queryParamsRef.current));
+    }
+  };
+
+  // 重置
+  var reset = function reset() {
+    var _params = _objectSpread({}, defaultQueryParamsRef.current);
+    queryParamsRef.current = _params;
+    setQueryParams(_params);
+    if (props.hasOwnProperty('onReset')) {
+      onReset === null || onReset === void 0 || onReset(formatQueryParams(_params));
+    } else {
+      onQuery === null || onQuery === void 0 || onQuery(formatQueryParams(_params));
+    }
+  };
+
+  // 表格分页、排序、筛选变化时触发
+  var tableChange = function tableChange(pagination, filters, sorter, extra) {
+    var _tableProps$onChange;
+    if (tableProps !== null && tableProps !== void 0 && tableProps.pagination && tableProps.pagination.hasOwnProperty('onChange')) return;
+    var current = pagination.current,
+      pageSize = pagination.pageSize;
+    var _params = _objectSpread(_objectSpread({}, queryParamsRef.current), {}, {
+      current: current,
+      pageSize: pageSize
+    });
+    queryParamsRef.current = _params;
+    setQueryParams(_params);
+    onQuery === null || onQuery === void 0 || onQuery(formatQueryParams(_params), filters, sorter, extra);
+    tableProps === null || tableProps === void 0 || (_tableProps$onChange = tableProps.onChange) === null || _tableProps$onChange === void 0 || _tableProps$onChange.call(tableProps, pagination, filters, sorter, extra);
+  };
+
+  // 设置默认查询参数
+  var setDefaultQueryParams = function setDefaultQueryParams() {
+    var _tableProps$paginatio2;
+    var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    var _params = tableRender || tableRender === null || (tableProps === null || tableProps === void 0 ? void 0 : tableProps.pagination) === false || tableProps !== null && tableProps !== void 0 && (_tableProps$paginatio2 = tableProps.pagination) !== null && _tableProps$paginatio2 !== void 0 && _tableProps$paginatio2.hasOwnProperty('onChange') || tableProps !== null && tableProps !== void 0 && tableProps.hasOwnProperty('onChange') ? {} : {
+      current: 1,
+      pageSize: 20
+    };
+    Object.keys(_params).forEach(function (k) {
+      return !allNamesRef.current.includes(k) && allNamesRef.current.push(k);
+    });
+    // 仅支持设置过name属性的查询项（和current、pageSize）
+    Object.entries(params).forEach(function (_ref3) {
+      var _ref4 = _slicedToArray(_ref3, 2),
+        key = _ref4[0],
+        value = _ref4[1];
+      if (allNamesRef.current.includes(key)) {
+        _params[key] = value;
+      }
+    });
+    defaultQueryParamsRef.current = _params;
+    queryParamsRef.current = _params;
+    setQueryParams(_params);
+  };
+
+  // 设置单个查询项的参数
+  var setQueryParam = function setQueryParam(name, value) {
+    if (allNamesRef.current.includes(name)) {
+      var _params = _objectSpread(_objectSpread({}, queryParamsRef.current), {}, _defineProperty({}, name, value));
+      queryParamsRef.current = _params;
+      setQueryParams(_params);
+    }
+  };
+
+  // 获取单个查询项的参数
+  var getQueryParam = function getQueryParam(name) {
+    if (allNamesRef.current.includes(name)) {
+      return formatQueryParams(queryParamsRef.current)[name];
+    } else {
+      console.error("\u672A\u627E\u5230\u4E0E'".concat(name, "'\u76F8\u5173\u7684\u67E5\u8BE2\u53C2\u6570"));
+    }
+  };
+
+  // 获取所有查询项的参数
+  var getQueryParams = function getQueryParams() {
+    return formatQueryParams(queryParamsRef.current);
+  };
+
+  // 重置查询参数（重置为默认查询参数）
+  var resetQueryParams = function resetQueryParams() {
+    var _params = _objectSpread({}, defaultQueryParamsRef.current);
+    queryParamsRef.current = _params;
+    setQueryParams(_params);
+  };
+
+  // 监听immediateQuery，初始设置默认查询参数并判断是否触发首次查询
+  useEffect(function () {
+    if (!initializedRef.current) {
+      initializedRef.current = true;
+      // 初始设置默认查询参数
+      setDefaultQueryParams();
+      // 触发首次查询
+      if (immediateQuery) {
+        query();
+      }
+    }
+  }, [immediateQuery]);
+  useImperativeHandle(ref, function () {
+    return {
+      query: query,
+      reset: reset,
+      setDefaultQueryParams: setDefaultQueryParams,
+      setQueryParam: setQueryParam,
+      getQueryParam: getQueryParam,
+      getQueryParams: getQueryParams,
+      resetQueryParams: resetQueryParams
+    };
+  });
+  return /*#__PURE__*/_jsx(Spin, {
+    style: {
+      maxHeight: 'none'
+    },
+    spinning: loading,
+    children: /*#__PURE__*/_jsxs("div", {
+      className: "mc-container ".concat(className || ''),
+      style: _objectSpread({
+        height: height,
+        backgroundColor: backgroundColor
+      }, style),
+      children: [/*#__PURE__*/_jsx("div", {
+        className: "mc-container__ceiling",
+        style: {
+          backgroundColor: backgroundColor
+        }
+      }), /*#__PURE__*/_jsxs("div", {
+        className: "mc-container__wrapper",
+        style: {
+          paddingBottom: tableRender || tableRender === null || (tableProps === null || tableProps === void 0 ? void 0 : tableProps.pagination) === false ? 24 : 64
+        },
+        children: [queryRender || queryRender === null ? queryRender : /*#__PURE__*/_jsxs("div", {
+          className: "mc-container__query",
+          children: [mapQuerys(queryItems), !collapse && mapQuerys(collapsibleQueryItems), (showQuery || showReset || showCollapse) && /*#__PURE__*/_jsxs("div", {
+            style: {
+              marginLeft: 'auto'
+            },
+            children: [showQuery && /*#__PURE__*/_jsx(Button, {
+              type: "primary",
+              onClick: function onClick() {
+                return query({
+                  current: 1
+                });
+              },
+              children: "\u67E5\u8BE2"
+            }), showReset && /*#__PURE__*/_jsx(Button, {
+              style: {
+                marginLeft: 8
+              },
+              onClick: reset,
+              children: "\u91CD\u7F6E"
+            }), showCollapse && /*#__PURE__*/_jsxs(Button, {
+              type: "link",
+              style: {
+                marginLeft: 16,
+                fontSize: 12,
+                padding: 0
+              },
+              onClick: function onClick() {
+                return setCollapse(function (os) {
+                  return !os;
+                });
+              },
+              children: [collapse ? '展开' : '收起', /*#__PURE__*/_jsx(DoubleLeftOutlined, {
+                style: {
+                  fontSize: 12,
+                  marginLeft: 2
+                },
+                rotate: collapse ? -90 : 90
+              })]
+            })]
+          })]
+        }), queryRender !== null && /*#__PURE__*/_jsx("div", {
+          className: "mc-container__divider"
+        }), actionBar && /*#__PURE__*/_jsx("div", {
+          ref: actionBarRef,
+          className: "mc-container__action-bar",
+          style: {
+            backgroundColor: backgroundColor
+          },
+          children: actionBar
+        }), batchNum > 0 && /*#__PURE__*/_jsx("div", {
+          className: "mc-container__batch-bar",
+          style: {
+            backgroundColor: backgroundColor,
+            top: actionBarHeight ? actionBarHeight - 24 : 0
+          },
+          children: /*#__PURE__*/_jsxs("div", {
+            className: "mc-container__batch-bar__inner",
+            children: [/*#__PURE__*/_jsxs("span", {
+              className: "mc-container__batch-num",
+              children: ["\u5DF2\u9009\u62E9 ", batchNum, " \u9879"]
+            }), batchBtns && /*#__PURE__*/_jsx("div", {
+              className: "mc-container__batch-btns",
+              children: batchBtns
+            }), /*#__PURE__*/_jsx(Button, {
+              style: {
+                marginLeft: 'auto'
+              },
+              onClick: onCancel,
+              children: "\u53D6\u6D88"
+            })]
+          })
+        }), tableRender || tableRender === null ? tableRender : /*#__PURE__*/_jsx(Table, _objectSpread(_objectSpread({
+          className: "mc-container__table",
+          size: "small",
+          sticky: {
+            offsetHeader: (actionBarHeight ? actionBarHeight - 24 : 0) + (batchNum > 0 ? 48 : 0)
+          },
+          scroll: {
+            x: (tableProps === null || tableProps === void 0 || (_tableProps$dataSourc = tableProps.dataSource) === null || _tableProps$dataSourc === void 0 ? void 0 : _tableProps$dataSourc.length) > 0 ? 'max-content' : '100%'
+          },
+          onChange: tableChange
+        }, tableProps), {}, {
+          loading: false,
+          pagination: (tableProps === null || tableProps === void 0 ? void 0 : tableProps.pagination) === false ? false : _objectSpread({
+            className: 'mc-container__pagination',
+            style: {
+              backgroundColor: backgroundColor
+            },
+            showSizeChanger: true,
+            showQuickJumper: true,
+            showTotal: function showTotal(total) {
+              return "\u5171 ".concat(total, " \u6761\u8BB0\u5F55");
+            },
+            current: queryParams.current,
+            pageSize: queryParams.pageSize
+          }, tableProps === null || tableProps === void 0 ? void 0 : tableProps.pagination),
+          expandable: _objectSpread({
+            expandIcon: function expandIcon(_ref5) {
+              var _tableProps$dataSourc2, _record$children;
+              var expanded = _ref5.expanded,
+                onExpand = _ref5.onExpand,
+                record = _ref5.record;
+              return tableProps !== null && tableProps !== void 0 && (_tableProps$dataSourc2 = tableProps.dataSource) !== null && _tableProps$dataSourc2 !== void 0 && _tableProps$dataSourc2.some(function (_ref6) {
+                var children = _ref6.children;
+                return (children === null || children === void 0 ? void 0 : children.length) > 0;
+              }) ? ((_record$children = record.children) === null || _record$children === void 0 ? void 0 : _record$children.length) > 0 ? /*#__PURE__*/_jsx(CaretDownFilled, {
+                className: "mc-container__table__expand-icon",
+                style: {
+                  margin: '0 8px',
+                  fontSize: 16
+                },
+                rotate: expanded ? 0 : -90,
+                onClick: function onClick(e) {
+                  return onExpand(record, e);
+                }
+              }) : /*#__PURE__*/_jsx(CaretDownFilled, {
+                style: {
+                  margin: '0 8px',
+                  color: 'transparent'
+                }
+              }) : null;
+            }
+          }, tableProps === null || tableProps === void 0 ? void 0 : tableProps.expandable)
+        }))]
+      })]
+    })
+  });
+});
+export default McContainer;

package/dist/McDateRange/demo/base.d.ts

@@ -0,0 +1,6 @@
+/**
+ * title: 基础用法
+ * description: 除值传递方式为字符串数组外，基本使用方法和antd的<a href='https://ant-design.antgroup.com/components/date-picker-cn#components-date-picker-demo-preset-ranges' target='_blank'>DatePicker.RangePicker</a>组件使用方法一致。
+ */
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/McDateRange/demo/base.js

@@ -0,0 +1,22 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+/**
+ * title: 基础用法
+ * description: 除值传递方式为字符串数组外，基本使用方法和antd的<a href='https://ant-design.antgroup.com/components/date-picker-cn#components-date-picker-demo-preset-ranges' target='_blank'>DatePicker.RangePicker</a>组件使用方法一致。
+ */
+
+import { McDateRange } from "../..";
+import { useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default (function () {
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  return /*#__PURE__*/_jsx(McDateRange, {
+    value: value,
+    style: {
+      width: '330px'
+    },
+    onChange: setValue
+  });
+});

package/dist/McDateRange/demo/cancelPresets.d.ts

@@ -0,0 +1,6 @@
+/**
+ * title: 取消当前快捷设置
+ * description: 通过手动取消当前组件内部自定义的时间段预设可以将组件变为为一个值传递格式为字符串数组的普通时间段选择器。
+ */
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/McDateRange/demo/cancelPresets.js

@@ -0,0 +1,23 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+/**
+ * title: 取消当前快捷设置
+ * description: 通过手动取消当前组件内部自定义的时间段预设可以将组件变为为一个值传递格式为字符串数组的普通时间段选择器。
+ */
+
+import { McDateRange } from "../..";
+import { useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default (function () {
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  return /*#__PURE__*/_jsx(McDateRange, {
+    value: value,
+    onChange: setValue,
+    style: {
+      width: '330px'
+    },
+    presets: false
+  });
+});

package/dist/McDateRange/demo/overlap.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/McDateRange/demo/overlap.js

@@ -0,0 +1,32 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+/**
+ * title: 覆盖默认预设
+ * description: 因为组件本质上就是提供了常用的时间段预设，所以可以使用自定义的时间段预设对其进行覆盖。
+ */
+import dayjs from 'dayjs';
+import { McDateRange } from "../..";
+import { useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default (function () {
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  return /*#__PURE__*/_jsx(McDateRange, {
+    value: value,
+    onChange: setValue,
+    style: {
+      width: '330px'
+    },
+    presets: [{
+      label: 'Yesterday',
+      value: [dayjs().add(-1, 'd'), dayjs()]
+    }, {
+      label: 'Last Week',
+      value: [dayjs().add(-7, 'd'), dayjs()]
+    }, {
+      label: 'Last Month',
+      value: [dayjs().add(-1, 'month'), dayjs()]
+    }]
+  });
+});

package/dist/McDateRange/index.css

@@ -0,0 +1,31 @@
+.mc-date-range__label {
+  color: #262626;
+  font-size: 14px;
+  position: absolute;
+  top: 0;
+  left: 11px;
+  z-index: 2;
+  height: 100%;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+.mc-date-range__label::after {
+  content: '：';
+  margin-left: 2px;
+}
+.mc-date-range__label.mc-date-range--disabled {
+  color: rgba(0, 0, 0, 0.25);
+  cursor: no-drop;
+}
+.mc-date-range__content {
+  width: 100%;
+  height: 100%;
+}
+.mc-date-range__preset-label {
+  margin: -1px -8px;
+  padding: 1px 8px;
+}

package/dist/McDateRange/index.d.ts

@@ -0,0 +1,28 @@
+import { RangePickerProps } from 'antd/es/date-picker';
+import dayjs from 'dayjs';
+import { CSSProperties, FC, ReactNode } from 'react';
+import './index.less';
+declare const shortcutValueMap: {
+    today: string[];
+    yesterday: string[];
+    last7days: string[];
+    last30days: string[];
+    last60days: string[];
+    last90days: string[];
+};
+export declare const SHORTCUTprivateValue_MAP: typeof shortcutValueMap & {
+    [key: string]: any;
+};
+export type McDateRangeProps = Omit<RangePickerProps, 'value' | 'onChange'> & {
+    style?: CSSProperties;
+    className?: string;
+    name?: string;
+    label?: ReactNode;
+    valueFormat?: string;
+    value?: string[];
+    onChange?: (value?: string[] | null, dayjsValue?: [dayjs.Dayjs, dayjs.Dayjs] | null) => void;
+    onShortcut?: (value?: 'today' | 'yesterday' | 'last7days' | 'last30days' | 'last60days' | 'last90days') => void;
+    [key: string]: any;
+};
+declare const McDateRange: FC<McDateRangeProps>;
+export default McDateRange;