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

package/dist/esm/McContainer/index.js

@@ -0,0 +1,522 @@
+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 { useUpdateEffect } from '@zykj2024/much-hooks';
+import { Button, Spin, Table } from 'antd';
+import { isNumber } from 'lodash';
+import { CaretDownFilled, DoubleLeftOutlined } from 'much-icons';
+import { Children, cloneElement, forwardRef, isValidElement, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import "./index.less";
+
+/** 请求参数 */
+
+/** 批量操作配置接口 */
+
+/** McContainer 组件 Props 类型定义 */
+
+/** McContainer 组件 Ref 类型定义 */
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * McContainer 组件
+ * @description 一个通用的容器组件，支持查询、表格、批量操作等功能
+ */
+var ContainerPanel = function ContainerPanel(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$showCell = props.showCell,
+    showCell = _props$showCell === void 0 ? true : _props$showCell,
+    _props$immediateQuery = props.immediateQuery,
+    immediateQuery = _props$immediateQuery === void 0 ? true : _props$immediateQuery,
+    _props$loading = props.loading,
+    loading = _props$loading === void 0 ? false : _props$loading,
+    _props$loadingText = props.loadingText,
+    loadingText = _props$loadingText === void 0 ? '' : _props$loadingText,
+    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,
+    _props$autoBackPagina = props.autoBackPagination,
+    autoBackPagination = _props$autoBackPagina === void 0 ? false : _props$autoBackPagina,
+    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,
+    batch = props.batch,
+    actionBarRender = props.actionBarRender,
+    onCancel = props.onCancel,
+    tableProps = props.tableProps,
+    tableRender = props.tableRender,
+    onCollapse = props.onCollapse;
+  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);
+  var containerRef = useRef(null);
+
+  /* 批量操作相关 */
+  var _ref = batch || {},
+    _ref$buttonText = _ref.buttonText,
+    buttonText = _ref$buttonText === void 0 ? '批量操作' : _ref$buttonText,
+    buttonProps = _ref.buttonProps,
+    _ref$show = _ref.show,
+    batchShow = _ref$show === void 0 ? false : _ref$show,
+    batchOrder = _ref.order;
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    showBatchBar = _useState6[0],
+    setShowBatchBar = _useState6[1];
+
+  /* 获取actionBar高度 */
+  var actionBarRef = useRef();
+  var _useState7 = useState(0),
+    _useState8 = _slicedToArray(_useState7, 2),
+    actionBarHeight = _useState8[0],
+    setActionBarHeight = _useState8[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();
+    };
+  }, []);
+  useEffect(function () {
+    onCollapse === null || onCollapse === void 0 || onCollapse(collapse);
+  }, [collapse]);
+
+  // 为设置过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 handelBatchClick = function handelBatchClick() {
+    if (showBatchBar) {
+      onCancel === null || onCancel === void 0 || onCancel();
+    }
+    setShowBatchBar(!showBatchBar);
+  };
+
+  // 批量操作按钮
+  var batchEl = /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
+    onClick: handelBatchClick
+  }, buttonProps), {}, {
+    children: buttonText
+  }));
+
+  // 生成 actionBar
+  var mapActionBar = function mapActionBar() {
+    var Els;
+    // 是否展示批量操作按钮
+    if (batchShow) {
+      // 是否配置actionBar
+      if (actionBar) {
+        var _actionBar$props;
+        // 判断是否为合法的React节点
+        var itemsCount = /*#__PURE__*/isValidElement(actionBar) ? Children.count(actionBar === null || actionBar === void 0 || (_actionBar$props = actionBar.props) === null || _actionBar$props === void 0 ? void 0 : _actionBar$props.children) : 1;
+        var newEls = Children.toArray(itemsCount > 1 ? actionBar.props.children : actionBar);
+        var _batchOrder = isNumber(batchOrder) && batchOrder >= 0 && batchOrder <= itemsCount ? batchOrder : itemsCount;
+        // 插入批量操作按钮，默认放在actionBar操作项后面
+        newEls.splice(_batchOrder, 0, batchEl);
+        Els = /*#__PURE__*/cloneElement(itemsCount > 1 ? actionBar : /*#__PURE__*/_jsx(_Fragment, {}), {}, newEls);
+      } else {
+        Els = batchEl;
+      }
+    } else {
+      Els = actionBar;
+    }
+    return Els;
+  };
+
+  // 格式化查询参数（返回当前可见的查询项的参数集）
+  var formatQueryParams = function formatQueryParams(params) {
+    var _tableProps$paginatio;
+    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) {
+      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);
+      Object.entries(params).forEach(function (_ref2) {
+        var _ref3 = _slicedToArray(_ref2, 2),
+          key = _ref3[0],
+          value = _ref3[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);
+    });
+    Object.entries(params).forEach(function (_ref4) {
+      var _ref5 = _slicedToArray(_ref4, 2),
+        key = _ref5[0],
+        value = _ref5[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);
+  };
+  useEffect(function () {
+    setShowBatchBar(batchNum > 0);
+  }, [batchNum]);
+
+  // 监听immediateQuery，初始设置默认查询参数并判断是否触发首次查询
+  useEffect(function () {
+    if (!initializedRef.current) {
+      initializedRef.current = true;
+      // 初始设置默认查询参数
+      setDefaultQueryParams();
+      // 触发首次查询
+      if (immediateQuery) {
+        query();
+      }
+    }
+  }, [immediateQuery]);
+  useUpdateEffect(function () {
+    var _ref6 = tableProps !== null && tableProps !== void 0 ? tableProps : {},
+      pagination = _ref6.pagination,
+      dataSource = _ref6.dataSource;
+    var _ref7 = pagination || {},
+      total = _ref7.total;
+    var _ref8 = queryParams !== null && queryParams !== void 0 ? queryParams : {},
+      current = _ref8.current,
+      pageSize = _ref8.pageSize;
+    // 判断条件
+    // 1. 开启自动回退分页功能
+    // 2. 开启分页功能
+    // 3. 表格当前页数据为空 & 当前页大于1 & 总数据大于分页数据
+    if (autoBackPagination && !!pagination && (dataSource === null || dataSource === void 0 ? void 0 : dataSource.length) === 0 && current > 1 && total && pageSize && total >= pageSize) {
+      query(_objectSpread(_objectSpread({}, queryParams), {}, {
+        current: Math.min(current - 1, Math.floor(total / pageSize))
+      }));
+    }
+  }, [tableProps === null || tableProps === void 0 ? void 0 : tableProps.dataSource]);
+  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,
+    tip: loadingText,
+    children: /*#__PURE__*/_jsxs("div", {
+      className: "mc-container ".concat(className || ''),
+      style: _objectSpread({
+        height: height,
+        backgroundColor: backgroundColor
+      }, style),
+      children: [showCell && /*#__PURE__*/_jsx("div", {
+        className: "mc-container__ceiling",
+        style: {
+          backgroundColor: backgroundColor,
+          top: 0
+        }
+      }), /*#__PURE__*/_jsxs("div", {
+        ref: containerRef,
+        className: "mc-container__wrapper",
+        style: {
+          paddingBottom: tableRender || tableRender === null || (tableProps === null || tableProps === void 0 ? void 0 : tableProps.pagination) === false ? 16 : 50
+        },
+        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,
+                gap: 4
+              },
+              onClick: function onClick() {
+                return setCollapse(function (os) {
+                  return !os;
+                });
+              },
+              children: [collapse ? '展开' : '收起', /*#__PURE__*/_jsx(DoubleLeftOutlined, {
+                style: {
+                  fontSize: 12
+                },
+                rotate: collapse ? -90 : 90
+              })]
+            })]
+          })]
+        }), queryRender !== null && /*#__PURE__*/_jsx("div", {
+          className: "mc-container__divider"
+        }), actionBarRender ? actionBarRender(batchEl) : (!!actionBar || !!batchShow) && /*#__PURE__*/_jsx("div", {
+          ref: actionBarRef,
+          className: "mc-container__action-bar",
+          style: {
+            backgroundColor: backgroundColor
+          },
+          children: mapActionBar()
+        }), showBatchBar && /*#__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: function onClick() {
+                onCancel === null || onCancel === void 0 || onCancel();
+                setShowBatchBar(false);
+              },
+              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),
+            getContainer: function getContainer() {
+              return containerRef.current;
+            }
+          },
+          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(_ref9) {
+              var _tableProps$dataSourc2, _record$children;
+              var expanded = _ref9.expanded,
+                onExpand = _ref9.onExpand,
+                record = _ref9.record;
+              return tableProps !== null && tableProps !== void 0 && (_tableProps$dataSourc2 = tableProps.dataSource) !== null && _tableProps$dataSourc2 !== void 0 && _tableProps$dataSourc2.some(function (_ref10) {
+                var children = _ref10.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)
+        }))]
+      }), !(tableProps !== null && tableProps !== void 0 && tableProps.pagination) && !tableRender && /*#__PURE__*/_jsx("div", {
+        className: "mc-container__ceiling",
+        style: {
+          backgroundColor: backgroundColor,
+          height: 16,
+          bottom: 0
+        }
+      })]
+    })
+  });
+};
+var McContainer = /*#__PURE__*/forwardRef(ContainerPanel);
+export default McContainer;

package/dist/esm/McContainer/index.less

@@ -0,0 +1,132 @@
+@wrapper-width: calc(100% - 40px);
+
+.mc-container {
+  position: relative;
+
+  &__ceiling {
+    width: @wrapper-width;
+    height: 24px;
+    position: absolute;
+    left: 16px;
+    z-index: 9;
+  }
+
+  &__wrapper {
+    height: 100%;
+    padding: 24px 24px 50px 16px;
+    overflow-y: auto;
+    border-top-right-radius: 12px;
+  }
+
+  &__query {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+
+    .mc-input,
+    .mc-search,
+    .mc-select,
+    .mc-cascader,
+    .mc-input-number {
+      width: 270px;
+    }
+
+    .mc-date-range {
+      width: 330px;
+    }
+  }
+
+  &__divider {
+    height: 1px;
+    margin: 24px 0;
+    background: #ebebeb;
+  }
+
+  &__action-bar {
+    position: sticky;
+    top: -24px;
+    z-index: 9;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+    align-items: center;
+    padding: 24px 0 16px;
+    margin-top: -24px;
+    overflow: hidden;
+  }
+
+  &__batch-bar {
+    position: sticky;
+    z-index: 9;
+    padding-bottom: 8px;
+
+    &__inner {
+      display: flex;
+      align-items: center;
+      height: 40px;
+      padding: 0 16px;
+      background: #325cf7;
+      border-radius: 4px;
+
+      button.ant-btn {
+        background: transparent;
+        color: #fff;
+        border-color: transparent;
+        padding: 4px;
+        margin-left: 16px;
+
+        &:hover {
+          background-color: transparent !important;
+          color: #fff !important;
+          border-color: transparent !important;
+        }
+      }
+    }
+  }
+
+  &__batch-num {
+    color: #fff;
+    font-size: 14px;
+    opacity: 0.8;
+  }
+
+  &__batch-btns {
+    position: relative;
+    margin-left: 16px;
+
+    &::before {
+      position: absolute;
+      top: calc(50% - 12px);
+      left: 0;
+      display: block;
+      width: 1px;
+      height: 24px;
+      background: rgba(255, 255, 255, 30%);
+      content: '';
+    }
+  }
+
+  &__table {
+    .ant-spin-nested-loading {
+      position: static;
+
+      .ant-spin-container {
+        position: static;
+      }
+    }
+
+    &__expand-icon > svg {
+      transition: all 0.3s;
+    }
+  }
+
+  &__pagination {
+    padding: 8px 0 16px;
+    margin: 0 !important;
+    width: @wrapper-width;
+    position: absolute;
+    left: 16px;
+    bottom: 0;
+    z-index: 9;
+  }
+}

package/dist/esm/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 SHORTCUT_VALUE_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;