@zykj2024/much-library 1.0.9

package/dist/McContainer/demo/expand.js

@@ -0,0 +1,90 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+/**
+ * title: 树形数据展示
+ * description: 表格支持树形数据的展示，当数据中有 `children` 字段时会自动展示为树形表格，如果不需要或配置为其他字段可以用 `childrenColumnName` 进行配置，`rowKey`必须设置且唯一。
+ * transform: true
+ * compact: true
+ */
+
+import { McContainer, McInput } from "../..";
+import { useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+var tableData = Array.from({
+  length: 5
+}, function (_, index) {
+  return {
+    id: index + 1,
+    name: "\u59D3\u540D".concat(index + 1),
+    age: 10 + index,
+    children: Array.from({
+      length: 5
+    }, function (_, i) {
+      return {
+        id: 10 * (index + 1) + i,
+        name: "\u59D3\u540D".concat(10 * (index + 1) + i),
+        age: 10 * (index + 1) + i
+      };
+    })
+  };
+});
+export default (function () {
+  var _useState = useState(tableData),
+    _useState2 = _slicedToArray(_useState, 2),
+    dataSource = _useState2[0],
+    setDataSource = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    loading = _useState4[0],
+    setLoading = _useState4[1];
+  var columns = [{
+    title: 'ID',
+    dataIndex: 'id'
+  }, {
+    title: '姓名',
+    dataIndex: 'name'
+  }, {
+    title: '年龄',
+    dataIndex: 'age'
+  }, {
+    title: '操作',
+    dataIndex: 'option',
+    width: 100,
+    render: function render() {
+      return /*#__PURE__*/_jsx("a", {
+        children: "\u7F16\u8F91"
+      });
+    }
+  }];
+  var queryItems = /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx(McInput, {
+      label: "\u59D3\u540D",
+      name: "name",
+      style: {
+        width: 270
+      }
+    })
+  });
+  var onQuery = function onQuery() {
+    return new Promise(function (resolve) {
+      setLoading(true);
+      setTimeout(function () {
+        setDataSource(tableData);
+        setLoading(false);
+        resolve();
+      }, 1000);
+    });
+  };
+  return /*#__PURE__*/_jsx(McContainer, {
+    height: "100%",
+    immediateQuery: false,
+    loading: loading,
+    onQuery: onQuery,
+    queryItems: queryItems,
+    tableProps: {
+      columns: columns,
+      dataSource: dataSource,
+      rowKey: 'id'
+    }
+  });
+});

package/dist/McContainer/demo/pagination.d.ts

@@ -0,0 +1,7 @@
+/**
+ * title: 分页器配置
+ * description: 参考 ant deign [Pagination](https://ant-design.antgroup.com/components/pagination-cn#api)
+ * transform: true
+ */
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/McContainer/demo/pagination.js

@@ -0,0 +1,93 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+/**
+ * title: 分页器配置
+ * description: 参考 ant deign [Pagination](https://ant-design.antgroup.com/components/pagination-cn#api)
+ * transform: true
+ */
+
+import { Col, Row, Switch } from 'antd';
+import { McContainer } from "../..";
+import { useState } from 'react';
+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 tableData = Array.from({
+  length: 5
+}, function (_, index) {
+  return {
+    id: index + 1,
+    name: "\u59D3\u540D".concat(index + 1),
+    age: 18 + index
+  };
+});
+export default (function () {
+  var _useState = useState(tableData),
+    _useState2 = _slicedToArray(_useState, 2),
+    dataSource = _useState2[0],
+    setDataSource = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    loading = _useState4[0],
+    setLoading = _useState4[1];
+  var _useState5 = useState(0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    total = _useState6[0],
+    setTotal = _useState6[1];
+  var _useState7 = useState(true),
+    _useState8 = _slicedToArray(_useState7, 2),
+    showPagination = _useState8[0],
+    setShowPagination = _useState8[1];
+  var columns = [{
+    title: 'ID',
+    dataIndex: 'id'
+  }, {
+    title: '姓名',
+    dataIndex: 'name'
+  }, {
+    title: '年龄',
+    dataIndex: 'age'
+  }, {
+    title: '操作',
+    dataIndex: 'option',
+    width: 100,
+    render: function render() {
+      return /*#__PURE__*/_jsx("a", {
+        children: "\u7F16\u8F91"
+      });
+    }
+  }];
+  var onQuery = function onQuery() {
+    return new Promise(function (resolve) {
+      setLoading(true);
+      setTimeout(function () {
+        setDataSource(tableData);
+        setTotal(tableData === null || tableData === void 0 ? void 0 : tableData.length);
+        setLoading(false);
+        resolve();
+      }, 1000);
+    });
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Row, {
+      children: /*#__PURE__*/_jsxs(Col, {
+        children: ["\u662F\u5426\u5C55\u793A\u5206\u9875\u5668\uFF1A", /*#__PURE__*/_jsx(Switch, {
+          checked: showPagination,
+          onChange: setShowPagination
+        })]
+      })
+    }), /*#__PURE__*/_jsx(McContainer, {
+      height: "100%",
+      immediateQuery: false,
+      loading: loading,
+      onQuery: onQuery,
+      queryRender: null,
+      tableProps: {
+        columns: columns,
+        dataSource: dataSource,
+        pagination: showPagination ? {
+          total: total
+        } : false
+      }
+    })]
+  });
+});

package/dist/McContainer/demo/search.d.ts

@@ -0,0 +1,7 @@
+/**
+ * title: 搜索栏区域
+ * description: 将 `queryRender` 设置为 `null` 则不显示；设置 `queryRender` 可自定义搜索区。`showQuery` 控制查询按钮显隐；`showReset` 控制重置按钮显隐。
+ * transform: true
+ */
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/McContainer/demo/search.js

@@ -0,0 +1,101 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+/**
+ * title: 搜索栏区域
+ * description: 将 `queryRender` 设置为 `null` 则不显示；设置 `queryRender` 可自定义搜索区。`showQuery` 控制查询按钮显隐；`showReset` 控制重置按钮显隐。
+ * transform: true
+ */
+
+import { Col, Row, Switch } from 'antd';
+import { McCascader, McContainer, McDateRange, McInput } from "../..";
+import { useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default (function () {
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    showQuery = _useState2[0],
+    setShowQuery = _useState2[1];
+  var _useState3 = useState(true),
+    _useState4 = _slicedToArray(_useState3, 2),
+    showReset = _useState4[0],
+    setShowReset = _useState4[1];
+  var dataSource = Array.from({
+    length: 5
+  }, function (_, index) {
+    return {
+      id: index + 1,
+      name: "\u59D3\u540D".concat(index + 1),
+      city: "\u57CE\u5E02".concat(index + 1),
+      date: "2024-01-0".concat(index + 1, " 12:00:00")
+    };
+  });
+  var columns = [{
+    title: 'ID',
+    dataIndex: 'id'
+  }, {
+    title: '姓名',
+    dataIndex: 'name'
+  }, {
+    title: '城市',
+    dataIndex: 'city'
+  }, {
+    title: '日期',
+    dataIndex: 'date'
+  }, {
+    title: '操作',
+    dataIndex: 'option',
+    width: 100,
+    render: function render() {
+      return /*#__PURE__*/_jsx("a", {
+        children: "\u7F16\u8F91"
+      });
+    }
+  }];
+  var queryItems = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(McInput.Search, {
+      name: "name",
+      style: {
+        width: 270
+      }
+    }), /*#__PURE__*/_jsx(McCascader, {
+      label: "\u57CE\u5E02",
+      name: "city",
+      city: true,
+      style: {
+        width: 270
+      }
+    }), /*#__PURE__*/_jsx(McDateRange, {
+      label: "\u65E5\u671F",
+      name: "date",
+      style: {
+        width: 270
+      }
+    })]
+  });
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(Row, {
+      gutter: 24,
+      children: [/*#__PURE__*/_jsxs(Col, {
+        children: ["\u662F\u5426\u5C55\u793A\u67E5\u8BE2\u6309\u94AE\uFF1A", /*#__PURE__*/_jsx(Switch, {
+          checked: showQuery,
+          onChange: setShowQuery
+        })]
+      }), /*#__PURE__*/_jsxs(Col, {
+        children: ["\u662F\u5426\u5C55\u793A\u91CD\u7F6E\u6309\u94AE\uFF1A", /*#__PURE__*/_jsx(Switch, {
+          checked: showReset,
+          onChange: setShowReset
+        })]
+      })]
+    }), /*#__PURE__*/_jsx(McContainer, {
+      height: "100%",
+      showReset: showReset,
+      showQuery: showQuery,
+      queryItems: queryItems,
+      tableProps: {
+        columns: columns,
+        dataSource: dataSource
+      }
+    })]
+  });
+});

package/dist/McContainer/demo/standard.d.ts

@@ -0,0 +1,7 @@
+/**
+ * title: 标准用法
+ * description: 标准用法功能全面，可以直接用于常规页面
+ * transform: true
+ */
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/McContainer/demo/standard.js

@@ -0,0 +1,168 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+/**
+ * title: 标准用法
+ * description: 标准用法功能全面，可以直接用于常规页面
+ * transform: true
+ */
+
+import { Button, Col, Row, Space } from 'antd';
+import { AddOutlined } from 'much-icons';
+import { McCascader, McContainer, McDateRange, McInput, McPopoverButton } from "../..";
+import { useEffect, useRef, useState } from 'react';
+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 tableData = Array.from({
+  length: 5
+}, function (_, index) {
+  return {
+    id: index + 1,
+    name: "\u59D3\u540D".concat(index + 1),
+    age: 18 + index,
+    city: "\u57CE\u5E02".concat(index + 1),
+    date: "2024-01-0".concat(index + 1, " 12:00:00")
+  };
+});
+export default (function () {
+  var _selectedRows$length;
+  var mcContainerRef = useRef();
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    total = _useState2[0],
+    setTotal = _useState2[1];
+  var _useState3 = useState(tableData),
+    _useState4 = _slicedToArray(_useState3, 2),
+    dataSource = _useState4[0],
+    setDataSource = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    loading = _useState6[0],
+    setLoading = _useState6[1];
+  var _useState7 = useState([]),
+    _useState8 = _slicedToArray(_useState7, 2),
+    selectedRows = _useState8[0],
+    setSelectedRows = _useState8[1];
+  var _useState9 = useState(),
+    _useState10 = _slicedToArray(_useState9, 2),
+    searchJsonStr = _useState10[0],
+    setSearchJsonStr = _useState10[1];
+  var columns = [{
+    title: 'ID',
+    dataIndex: 'id'
+  }, {
+    title: '姓名',
+    dataIndex: 'name'
+  }, {
+    title: '年龄',
+    dataIndex: 'age'
+  }, {
+    title: '城市',
+    dataIndex: 'city'
+  }, {
+    title: '日期',
+    dataIndex: 'date'
+  }, {
+    title: '操作',
+    dataIndex: 'option',
+    width: 100,
+    render: function render() {
+      return /*#__PURE__*/_jsxs(Space, {
+        size: 16,
+        children: [/*#__PURE__*/_jsx("a", {
+          children: "\u7F16\u8F91"
+        }), /*#__PURE__*/_jsx(McPopoverButton, {
+          onConfirm: function onConfirm() {
+            var _mcContainerRef$curre;
+            return (_mcContainerRef$curre = mcContainerRef.current) === null || _mcContainerRef$curre === void 0 ? void 0 : _mcContainerRef$curre.query();
+          }
+        })]
+      });
+    }
+  }];
+  var queryItems = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(McInput, {
+      label: "\u59D3\u540D",
+      name: "name",
+      style: {
+        width: 270
+      }
+    }), /*#__PURE__*/_jsx(McCascader, {
+      label: "\u57CE\u5E02",
+      name: "city",
+      city: true,
+      style: {
+        width: 270
+      }
+    }), /*#__PURE__*/_jsx(McDateRange, {
+      label: "\u65E5\u671F",
+      name: "date",
+      style: {
+        width: 270
+      }
+    })]
+  });
+  useEffect(function () {
+    var _mcContainerRef$curre2;
+    (_mcContainerRef$curre2 = mcContainerRef.current) === null || _mcContainerRef$curre2 === void 0 || _mcContainerRef$curre2.setDefaultQueryParams({
+      name: '姓名1'
+    });
+  }, []);
+  var onQuery = function onQuery(values) {
+    setSearchJsonStr(JSON.stringify(values !== null && values !== void 0 ? values : {}));
+    return new Promise(function (resolve) {
+      setLoading(true);
+      setTimeout(function () {
+        setDataSource(tableData);
+        setTotal(tableData === null || tableData === void 0 ? void 0 : tableData.length);
+        setLoading(false);
+        resolve();
+      }, 1000);
+    });
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Row, {
+      children: /*#__PURE__*/_jsxs(Col, {
+        children: ["\u641C\u7D22\u53C2\u6570\uFF1A", /*#__PURE__*/_jsx("span", {
+          children: searchJsonStr
+        })]
+      })
+    }), /*#__PURE__*/_jsx(McContainer, {
+      ref: mcContainerRef,
+      height: "100%",
+      loading: loading,
+      immediateQuery: false,
+      onQuery: onQuery,
+      queryItems: queryItems,
+      actionBar: /*#__PURE__*/_jsx(Button, {
+        type: "primary",
+        icon: /*#__PURE__*/_jsx(AddOutlined, {}),
+        children: "\u65B0\u589E"
+      }),
+      batchNum: (_selectedRows$length = selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.length) !== null && _selectedRows$length !== void 0 ? _selectedRows$length : 0,
+      onCancel: function onCancel() {
+        return setSelectedRows([]);
+      },
+      batchBtns: /*#__PURE__*/_jsx(Button, {
+        type: "primary",
+        children: "\u6279\u91CF\u5220\u9664"
+      }),
+      tableProps: {
+        columns: columns,
+        dataSource: dataSource,
+        rowKey: 'id',
+        pagination: {
+          total: total
+        },
+        rowSelection: {
+          selectedRowKeys: selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.map(function (item) {
+            return item.id;
+          }),
+          preserveSelectedRowKeys: true,
+          onChange: function onChange(selectedRowKeys, selectedRows) {
+            return setSelectedRows(selectedRows);
+          }
+        }
+      }
+    })]
+  });
+});

package/dist/McContainer/index.css

@@ -0,0 +1,123 @@
+.mc-container {
+  position: relative;
+}
+.mc-container__ceiling {
+  width: calc(100% - 48px);
+  height: 24px;
+  position: absolute;
+  top: 0;
+  left: 24px;
+  z-index: 9;
+}
+.mc-container__wrapper {
+  height: 100%;
+  padding: 24px 24px 64px;
+  overflow: auto;
+}
+.mc-container__query {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+.mc-container__query .mc-input,
+.mc-container__query .mc-search,
+.mc-container__query .mc-select,
+.mc-container__query .mc-cascader,
+.mc-container__query .mc-input-number {
+  width: 280px;
+}
+.mc-container__query .mc-date-range {
+  width: 330px;
+}
+.mc-container__divider {
+  height: 1px;
+  margin: 24px 0;
+  background: #ebebeb;
+}
+.mc-container__action-bar {
+  position: sticky;
+  top: -24px;
+  z-index: 9;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  gap: 16px;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  padding: 24px 0 16px;
+  margin-top: -24px;
+  overflow: hidden;
+}
+.mc-container__batch-bar {
+  position: sticky;
+  z-index: 9;
+  padding-bottom: 8px;
+}
+.mc-container__batch-bar__inner {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  height: 40px;
+  padding: 0 16px;
+  background: #325cf7;
+  border-radius: 4px;
+}
+.mc-container__batch-bar__inner button.ant-btn {
+  background: transparent;
+  color: #fff;
+  border-color: transparent;
+  padding: 4px;
+  margin-left: 16px;
+}
+.mc-container__batch-bar__inner button.ant-btn:hover {
+  background-color: transparent !important;
+  color: #fff !important;
+  border-color: transparent !important;
+}
+.mc-container__batch-num {
+  color: #fff;
+  font-size: 14px;
+  opacity: 0.8;
+}
+.mc-container__batch-btns {
+  position: relative;
+  margin-left: 16px;
+}
+.mc-container__batch-btns::before {
+  position: absolute;
+  top: calc(50% - 12px);
+  left: 0;
+  display: block;
+  width: 1px;
+  height: 24px;
+  background: rgba(255, 255, 255, 0.3);
+  content: '';
+}
+.mc-container__table .ant-spin-nested-loading {
+  position: static;
+}
+.mc-container__table .ant-spin-nested-loading .ant-spin-container {
+  position: static;
+}
+.mc-container__table__expand-icon > svg {
+  -webkit-transition: all 0.3s;
+  transition: all 0.3s;
+}
+.mc-container__pagination {
+  padding: 16px 0 24px;
+  margin: 0 !important;
+  width: calc(100% - 48px);
+  position: absolute;
+  left: 24px;
+  bottom: 0;
+  z-index: 9;
+}

package/dist/McContainer/index.d.ts

@@ -0,0 +1,49 @@
+import { TableProps } from 'antd';
+import { CSSProperties, FC, ReactElement, ReactNode } from 'react';
+import './index.less';
+export type PropsType = {
+    style?: CSSProperties;
+    className?: string;
+    height?: string;
+    backgroundColor?: string;
+    immediateQuery?: boolean;
+    loading?: boolean;
+    queryItems?: ReactElement;
+    showQuery?: boolean;
+    showReset?: boolean;
+    showCollapse?: boolean;
+    collapsibleQueryItems?: ReactElement;
+    onQuery?: (params: {
+        current?: number;
+        pageSize?: number;
+        [key: string]: any;
+    }, filters?: any, sorter?: any, extra?: any) => void;
+    onReset?: (params?: {
+        current?: number;
+        pageSize?: number;
+        [key: string]: any;
+    }) => void;
+    queryRender?: ReactNode;
+    actionBar?: ReactNode;
+    batchNum?: number;
+    batchBtns?: ReactNode;
+    onCancel?: () => void;
+    tableProps?: TableProps<any>;
+    tableRender?: ReactNode;
+    [key: string]: any;
+};
+export type McContainerRef = {
+    query: (params?: {
+        [key: string]: any;
+    }) => void;
+    reset: () => void;
+    setDefaultQueryParams: (params: {
+        [key: string]: any;
+    }) => void;
+    setQueryParam: (name: string, value: any) => void;
+    getQueryParam: (name: string) => any;
+    getQueryParams: () => any;
+    resetQueryParams: () => void;
+};
+declare const McContainer: FC<PropsType>;
+export default McContainer;