@teamix/pro 1.1.4 → 1.1.8

package/lib/table/index.js

@@ -3,15 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _exportNames = {
-  ActionButton: true
-};
-Object.defineProperty(exports, "ActionButton", {
-  enumerable: true,
-  get: function get() {
-    return _actions.default;
-  }
-});
+var _exportNames = {};
 exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
@@ -40,7 +32,7 @@ var _Fullscreen = _interopRequireDefault(require("./components/ToolBar/Fullscree
 
 var _form = require("../form");
 
-var _actions = _interopRequireWildcard(require("../actions"));
+var _actions = require("../actions");
 
 Object.keys(_actions).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -71,10 +63,7 @@ Object.keys(_typing).forEach(function (key) {
     }
   });
 });
-
-var _ahooks = require("ahooks");
-
-var _excluded = ["header", "className", "tableClassName", "mainAction", "quickAction", "dataFilter", "toolBar", "columns", "useRowSelection", "rowSelection", "onChangeRowSelection", "getRowSelection", "primaryKey", "footerAction", "url", "pageKey", "pageSizeKey", "method", "params", "formatSort", "formatParams", "formatResult", "requestWhenMount", "showPagination", "pageSizeList", "showSkeleton", "skeletonSize", "actionRef", "dataSource", "filterDebounce", "footerSuction"];
+var _excluded = ["header", "className", "tableClassName", "mainAction", "quickAction", "dataFilter", "toolBar", "columns", "useRowSelection", "rowSelection", "onChangeRowSelection", "getRowSelection", "primaryKey", "footerAction", "url", "pageKey", "pageSizeKey", "method", "params", "formatSort", "formatParams", "formatResult", "requestWhenMount", "showPagination", "pageSizeList", "showSkeleton", "skeletonSize", "actionRef", "dataSource", "filterDebounce", "footerSuction", "autoRefresh"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -114,7 +103,9 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
+// import { useSize } from 'ahooks';
 var cls = (0, _utils.baseClass)('teamix-pro-table');
+var toJS = _form.formilyReactive.toJS;
 /**
  * 处理原生传入的 columns 以便于 选择列 方便处理
  * @param columns 原生传入的 columns
@@ -163,7 +154,7 @@ var ProTable = function ProTable(props) {
       pageKey = props.pageKey,
       pageSizeKey = props.pageSizeKey,
       _props$method = props.method,
-      method = _props$method === void 0 ? 'post' : _props$method,
+      method = _props$method === void 0 ? 'get' : _props$method,
       _props$params = props.params,
       propsParams = _props$params === void 0 ? {} : _props$params,
       formatSort = props.formatSort,
@@ -188,6 +179,10 @@ var ProTable = function ProTable(props) {
       filterDebounce = _props$filterDebounce === void 0 ? 300 : _props$filterDebounce,
       _props$footerSuction = props.footerSuction,
       footerSuction = _props$footerSuction === void 0 ? false : _props$footerSuction,
+      _props$autoRefresh = props.autoRefresh,
+      autoRefresh = _props$autoRefresh === void 0 ? function () {
+    return false;
+  } : _props$autoRefresh,
       otherProps = _objectWithoutProperties(props, _excluded);
 
   var targetPageKey = pageKey || globalPageKey;
@@ -238,9 +233,16 @@ var ProTable = function ProTable(props) {
   var _useState15 = (0, _react.useState)('medium'),
       _useState16 = _slicedToArray(_useState15, 2),
       size = _useState16[0],
-      _setSize = _useState16[1]; // 获取header高度，用作全屏吸底吸顶高度计算
+      _setSize = _useState16[1];
+
+  var _useState17 = (0, _react.useState)(true),
+      _useState18 = _slicedToArray(_useState17, 2),
+      showLoading = _useState18[0],
+      setShowLoading = _useState18[1]; // 存储定时器 id
 
 
+  var autoRefreshTimerRef = (0, _react.useRef)(); // 获取header高度，用作全屏吸底吸顶高度计算
+
   var getHeaderHeight = function getHeaderHeight() {
     var _tableDom$getElements, _tableDom$getElements2;
 
@@ -260,30 +262,30 @@ var ProTable = function ProTable(props) {
   }; // header 区域高度。用作全屏计算吸顶吸底高度。默认不做计算
 
 
-  var _useState17 = (0, _react.useState)(0),
-      _useState18 = _slicedToArray(_useState17, 2),
-      headerHeight = _useState18[0],
-      setHeaderHeight = _useState18[1]; // 全屏显示 className
-
-
-  var _useState19 = (0, _react.useState)(false),
+  var _useState19 = (0, _react.useState)(0),
       _useState20 = _slicedToArray(_useState19, 2),
-      fullscreenState = _useState20[0],
-      setFullscreenState = _useState20[1]; // 父元素位置。用作非全屏模式下的吸底
+      headerHeight = _useState20[0],
+      setHeaderHeight = _useState20[1]; // 全屏显示 className
 
 
-  var _useState21 = (0, _react.useState)(),
+  var _useState21 = (0, _react.useState)(false),
       _useState22 = _slicedToArray(_useState21, 2),
-      parentPosition = _useState22[0],
-      setParentPosition = _useState22[1];
+      fullscreenState = _useState22[0],
+      setFullscreenState = _useState22[1]; // 父元素位置。用作非全屏模式下的吸底
+
+
+  var _useState23 = (0, _react.useState)(),
+      _useState24 = _slicedToArray(_useState23, 2),
+      parentPosition = _useState24[0],
+      setParentPosition = _useState24[1];
   /** 筛选区域 form */
 
 
   var dataFilterForm = (0, _react.useMemo)(function () {
     return (0, _form.createForm)();
   }, []); // 获取表格大小
-
-  var tableSize = (0, _ahooks.useSize)(tableRef); // 获取父元素位置
+  // const tableSize = useSize(tableRef);
+  // 获取父元素位置
 
   var getParentPosition = function getParentPosition() {
     // 暂时仅支持使用全家桶
@@ -297,12 +299,12 @@ var ProTable = function ProTable(props) {
       });
     }
   }; // 监听表格大小动态改变吸底footer大小
+  // useEffect(() => {
+  //   getParentPosition();
+  // }, [tableSize]);
+  // rowSelection 相关
 
 
-  (0, _react.useEffect)(function () {
-    getParentPosition();
-  }, [tableSize]); // rowSelection 相关
-
   var rowSelectionHook = (0, _useTableSelection.default)(_objectSpread(_objectSpread({}, propsRowSelection), {}, {
     onChange: onChangeRowSelection
   }), primaryKey);
@@ -414,6 +416,25 @@ var ProTable = function ProTable(props) {
 
   if (propsActionRef) {
     propsActionRef.current = actionRef.current;
+  }
+
+  function onFormatResult(next) {
+    var _next$data;
+
+    props.onFormatResult && props.onFormatResult(next);
+    var time = autoRefresh ? autoRefresh(next.data) : false;
+
+    if (Number.isInteger(time) && time >= 1000) {
+      autoRefreshTimerRef.current = setTimeout(function () {
+        // 自动刷新不显示 loading
+        _request({}, true);
+      }, Number(time));
+    } // 设置 dataSource、total
+
+
+    setData(next.data || []);
+    setTotal(next.total || ((_next$data = next.data) === null || _next$data === void 0 ? void 0 : _next$data.length));
+    setShowSkeleton(false);
   } // 请求表格数据工具函数
 
 
@@ -444,16 +465,6 @@ var ProTable = function ProTable(props) {
         }
       }
 
-      function onFormatResult(next) {
-        var _next$data;
-
-        props.onFormatResult && props.onFormatResult(next); // 设置 dataSource、total
-
-        setData(next.data || []);
-        setTotal(next.total || ((_next$data = next.data) === null || _next$data === void 0 ? void 0 : _next$data.length));
-        setShowSkeleton(false);
-      }
-
       if (nextData instanceof Promise) {
         nextData.then(function (res) {
           onFormatResult(res);
@@ -475,19 +486,25 @@ var ProTable = function ProTable(props) {
     }
   }); // 请求函数
 
-  function _request(params) {
+  function _request(params, noLoading) {
     var _actionRef$current, _actionRef$current$se, _objectSpread2;
 
-    // 请求前需要优先清空列过滤条件
+    var nextShowLoading = !noLoading;
+    nextShowLoading !== showLoading && setShowLoading(nextShowLoading); // 请求前需要优先清空列过滤条件
+
     (_actionRef$current = actionRef.current) === null || _actionRef$current === void 0 ? void 0 : (_actionRef$current$se = _actionRef$current.setFilterRules) === null || _actionRef$current$se === void 0 ? void 0 : _actionRef$current$se.call(_actionRef$current, {});
     var sortParams = targetFormatSort(sort); // 筛选区请求参数
 
-    var dataFilterParams = (0, _form.toJS)(dataFilterForm.values); // 格式化后的请求参数
+    var dataFilterParams = toJS(dataFilterForm.values); // 格式化后的请求参数
 
     var requestData = formatParams(_objectSpread(_objectSpread({}, !showPagination ? _objectSpread(_objectSpread(_objectSpread({}, dataFilterParams), propsParams), sortParams) : _objectSpread(_objectSpread(_objectSpread((_objectSpread2 = {}, _defineProperty(_objectSpread2, targetPageKey, currentPage), _defineProperty(_objectSpread2, targetPageSizeKey, pageSize), _objectSpread2), dataFilterParams), propsParams), sortParams)), params));
 
     if (requestData) {
-      // console.log('requestData', requestData);
+      if (autoRefreshTimerRef.current) {
+        clearTimeout(autoRefreshTimerRef.current);
+        autoRefreshTimerRef.current = null;
+      }
+
       getData.run(requestData);
     }
   }
@@ -496,6 +513,12 @@ var ProTable = function ProTable(props) {
     if (requestWhenMount) {
       _request();
     }
+
+    return function () {
+      if (autoRefreshTimerRef.current) {
+        clearTimeout(autoRefreshTimerRef.current);
+      }
+    };
   }, []);
 
   function onSort(dataIndex, order) {
@@ -509,7 +532,7 @@ var ProTable = function ProTable(props) {
 
   var dataFilter = _objectSpread(_objectSpread({}, propsDataFilter), {}, {
     onFilter: (0, _lodash.default)(function () {
-      (propsDataFilter === null || propsDataFilter === void 0 ? void 0 : propsDataFilter.onFilter) && (propsDataFilter === null || propsDataFilter === void 0 ? void 0 : propsDataFilter.onFilter(_objectSpread({}, (0, _form.toJS)(dataFilterForm.values))));
+      (propsDataFilter === null || propsDataFilter === void 0 ? void 0 : propsDataFilter.onFilter) && (propsDataFilter === null || propsDataFilter === void 0 ? void 0 : propsDataFilter.onFilter(_objectSpread({}, toJS(dataFilterForm.values))));
       setCurrentPage(1);
 
       _request(_defineProperty({}, targetPageKey, 1));
@@ -541,7 +564,7 @@ var ProTable = function ProTable(props) {
         hasBorder: false,
         dataSource: showSkeleton ? skeletonDataSource : data || props.dataSource,
         columns: (0, _genProColumnToColumn.default)(filteredColumns, showSkeleton, actionRef),
-        loading: !showSkeleton && (getData.loading || props.loading),
+        loading: showLoading && !showSkeleton && (getData.loading || props.loading),
         className: (0, _classnames.default)('teamix-pro-table', tableClassName, {
           'with-row-select': rowSelection
         }),
@@ -622,8 +645,8 @@ var ProTable = function ProTable(props) {
           'footer-has-rowSelection': rowSelection
         }),
         style: {
-          left: "".concat((_parentPosition$offse = parentPosition === null || parentPosition === void 0 ? void 0 : parentPosition.offsetLeft) !== null && _parentPosition$offse !== void 0 ? _parentPosition$offse : 0, "px"),
-          right: "".concat((_parentPosition$offse2 = parentPosition === null || parentPosition === void 0 ? void 0 : parentPosition.offsetRight) !== null && _parentPosition$offse2 !== void 0 ? _parentPosition$offse2 : 0, "px")
+          left: "".concat(fullscreenState ? 0 : (_parentPosition$offse = parentPosition === null || parentPosition === void 0 ? void 0 : parentPosition.offsetLeft) !== null && _parentPosition$offse !== void 0 ? _parentPosition$offse : 0, "px"),
+          right: "".concat(fullscreenState ? 0 : (_parentPosition$offse2 = parentPosition === null || parentPosition === void 0 ? void 0 : parentPosition.offsetRight) !== null && _parentPosition$offse2 !== void 0 ? _parentPosition$offse2 : 0, "px")
         }
       }, renderRowSelection(), /*#__PURE__*/_react.default.createElement("div", {
         className: cls('footer-right-wrapper')
@@ -663,19 +686,7 @@ var ProTable = function ProTable(props) {
     }),
     ref: tableRef
   }, renderTable(), renderFooter()));
-}; // 注册 action 里面的弹层表格
-
+};
 
-(0, _actions.registerActionHandler)('dialog-table', 'dialog', {
-  component: ProTable,
-  closeable: true,
-  size: 'medium'
-});
-(0, _actions.registerActionHandler)('drawer-table', 'dialog', {
-  component: ProTable,
-  closeable: true,
-  dialogType: 'drawer',
-  size: 'medium'
-});
 var _default = ProTable;
 exports.default = _default;

package/lib/table/index.scss

@@ -99,6 +99,5 @@ $fullscreenPadding: 24px;
     background-color: var(--table-row-bg, #ffffff);
     margin: 0;
     z-index: 2;
-    transition: width .3s;
   }
 }

package/lib/table/typing.d.ts

@@ -103,8 +103,10 @@ export declare type ProTableProps = {
     skeletonSize?: number;
     /** 表格主题 className */
     tableClassName?: string;
-    /** 非全屏模式下是否吸底 默认状态下取用 ProPageContainer 作为参照物。如果传入了Dom，则取用Dom作为参照物 */
+    /** 非全屏模式下是否吸底 默认状态下取用 ProPageContainer 作为参照物。如果传入了 Dom，则取用 Dom 作为参照物 */
     footerSuction?: boolean | Element;
+    /** 当满足条件时开启自动刷新，返回值为自动刷新间隔时间，如果返回 0 或 false 则停止自动刷新，每次触发翻页、搜索都将重置时间 */
+    autoRefresh?: (dataSource: any[]) => number | boolean;
 } & Omit<TableProps, 'columns'> & ProTableTopAreaProps;
 export declare type rowSelectionType = {
     getProps?: (record: any, index: number) => any;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@teamix/pro",
-  "version": "1.1.4",
-  "description": "pro大包",
+  "version": "1.1.8",
+  "description": "TeamixPro大包",
   "repository": "http://gitlab.alibaba-inc.com/teamix/pro",
   "author": "Velociraptor(迅猛龙)",
   "license": "MIT",
@@ -36,14 +36,14 @@
     "lodash.clonedeep": "^4.5.0",
     "lodash.debounce": "^4.0.8",
     "lodash.isempty": "^4.4.0",
-    "react-helmet": "^6.1.0",
-    "react-router-dom": "^5.3.0"
+    "react-helmet": "^6.1.0"
   },
   "devDependencies": {
     "@types/lodash.clonedeep": "^4.4.6",
     "@types/lodash.debounce": "^4.0.6",
     "@types/lodash.isempty": "^4.4.6",
-    "@types/react-helmet": "^6.1.4"
+    "@types/react-helmet": "^6.1.4",
+    "react-router-dom": "^5.3.0"
   },
   "peerDependencies": {
     "@alicloudfe/components": "^1.1.94",