@lemon-fe/components 1.2.8 → 1.2.9-alpha.1

package/es/data-grid/hooks.js

@@ -50,16 +50,11 @@ export function useDataGrid() {
     }
     if (ref.current !== null) {
       var grid = ref.current;
-      var delay = function delay() {
+      grid.afterReady(function () {
         if (mounted.current) {
-          if (grid.ready()) {
-            cb(grid);
-          } else {
-            requestAnimationFrame(delay);
-          }
+          cb(grid);
         }
-      };
-      delay();
+      });
     }
   };
   return useMemo(function () {

package/es/data-grid/index.d.ts

@@ -45,6 +45,7 @@ declare class InternalDataGrid<TData extends Record<string, any>> extends Compon
     private prevFocusedCell;
     private fields;
     private fieldSuffix;
+    private customColumnData;
     constructor(props: InternaleDataGridProps<TData>);
     setField(field: FieldCol): void;
     getField(id: string): FieldCol | undefined;
@@ -69,6 +70,13 @@ declare class InternalDataGrid<TData extends Record<string, any>> extends Compon
     private isPreserveSelected;
     private updateRowData;
     private getSummaryRowData;
+    private loadingTiming;
+    /**
+     *
+     * @param flag
+     * @param ignoreClientMode 为了解决明细页面出现2个loading动画的问题，非远程模式加载列定制数据的时候暂定出现表格内部加载动画
+     */
+    private loadingChange;
     private getDataFromServer;
     private pagination;
     private init;

package/es/data-grid/index.js

@@ -161,6 +161,7 @@ var InternalDataGrid = /*#__PURE__*/function (_Component) {
   _inherits(InternalDataGrid, _Component);
   var _super = _createSuper(InternalDataGrid);
   function InternalDataGrid(props) {
+    var _props$customColumnPa, _props$customColumnPa2;
     var _this;
     _classCallCheck(this, InternalDataGrid);
     _this = _super.call(this, props);
@@ -191,6 +192,7 @@ var InternalDataGrid = /*#__PURE__*/function (_Component) {
     _defineProperty(_assertThisInitialized(_this), "prevFocusedCell", null);
     _defineProperty(_assertThisInitialized(_this), "fields", []);
     _defineProperty(_assertThisInitialized(_this), "fieldSuffix", /(%)$/);
+    _defineProperty(_assertThisInitialized(_this), "customColumnData", null);
     _defineProperty(_assertThisInitialized(_this), "getFieldsSummary", memoizeOne(function (dataSource, fields) {
       var summaryField = fields.filter(function (field) {
         return field.summary;
@@ -238,21 +240,46 @@ var InternalDataGrid = /*#__PURE__*/function (_Component) {
       });
       return summary;
     }));
+    _defineProperty(_assertThisInitialized(_this), "loadingTiming", null);
     _defineProperty(_assertThisInitialized(_this), "init", /*#__PURE__*/function () {
       var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(args) {
-        var api, columnApi, onGridReady;
+        var api, columnApi, _this$props, onGridReady, autoLoad, customColumnData, state, data;
         return _regeneratorRuntime().wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
               api = args.api, columnApi = args.columnApi;
               _this.api = api;
               _this.columnApi = columnApi;
-              _this.isReady = true;
-              _this.clearReadyQueue();
-              onGridReady = _this.props.onGridReady;
+              _this$props = _this.props, onGridReady = _this$props.onGridReady, autoLoad = _this$props.autoLoad;
               if (onGridReady !== undefined) {
                 onGridReady(args);
               }
+              _context.next = 7;
+              return _this.customColumnData;
+            case 7:
+              customColumnData = _context.sent;
+              if (customColumnData) {
+                try {
+                  data = customColumnData;
+                  if (data) {
+                    _this.fields = data.fields;
+                    state = data.columState;
+                  }
+                } catch (err) {
+                  console.log('获取列定制失败', err.message);
+                }
+                _this.updateColumnDefs(state, true);
+              } else {
+                _this.updateColumnDefs();
+              }
+              _this.isReady = true;
+              _this.syncColRender();
+              _this.syncSelection();
+              if (_this.isClientMode()) {
+                _this.syncRowData();
+              } else if (autoLoad) {
+                _this.getDataFromServer();
+              }
               api.addEventListener('sortChanged', function () {
                 if (!_this.isClientMode()) {
                   _this.getDataFromServer();
@@ -280,9 +307,10 @@ var InternalDataGrid = /*#__PURE__*/function (_Component) {
               });
               api.addEventListener('selectionChanged', function () {
                 var rowSelection = _this.props.rowSelection;
-                if (_this.selected.isDirty() && rowSelection !== undefined && rowSelection.onChange !== undefined) {
+                if (_this.selected.isDirty()) {
+                  var _rowSelection$onChang;
                   var result = _this.selected.flush();
-                  rowSelection.onChange(result[0], result[1].filter(Boolean));
+                  rowSelection === null || rowSelection === void 0 || (_rowSelection$onChang = rowSelection.onChange) === null || _rowSelection$onChang === void 0 || _rowSelection$onChang.call(rowSelection, result[0], result[1].filter(Boolean));
                 }
               });
               api.addEventListener('paginationChanged', function () {
@@ -292,7 +320,8 @@ var InternalDataGrid = /*#__PURE__*/function (_Component) {
                   });
                 }
               });
-            case 11:
+              _this.clearReadyQueue();
+            case 18:
             case "end":
               return _context.stop();
           }
@@ -313,9 +342,9 @@ var InternalDataGrid = /*#__PURE__*/function (_Component) {
       return String(result !== null && result !== void 0 ? result : '').toString();
     });
     _defineProperty(_assertThisInitialized(_this), "cellValueChanged", function (evt) {
-      var _this$props = _this.props,
-        onDataSourceChange = _this$props.onDataSourceChange,
-        onCellValueChanged = _this$props.onCellValueChanged;
+      var _this$props2 = _this.props,
+        onDataSourceChange = _this$props2.onDataSourceChange,
+        onCellValueChanged = _this$props2.onCellValueChanged;
       if (onCellValueChanged) {
         onCellValueChanged(evt);
       }
@@ -333,9 +362,9 @@ var InternalDataGrid = /*#__PURE__*/function (_Component) {
       if (!_this.isReady) {
         return;
       }
-      var _this$props2 = _this.props,
-        onDataSourceChange = _this$props2.onDataSourceChange,
-        onRowDataUpdated = _this$props2.onRowDataUpdated;
+      var _this$props3 = _this.props,
+        onDataSourceChange = _this$props3.onDataSourceChange,
+        onRowDataUpdated = _this$props3.onRowDataUpdated;
       var data = [];
       if (onRowDataUpdated !== undefined) {
         onRowDataUpdated(evt);
@@ -478,12 +507,8 @@ var InternalDataGrid = /*#__PURE__*/function (_Component) {
       context: props.context,
       grid: _assertThisInitialized(_this)
     });
-    var _props$rowSelection = props.rowSelection,
-      _props$rowSelection2 = _props$rowSelection === void 0 ? {} : _props$rowSelection,
-      _props$rowSelection2$ = _props$rowSelection2.selectedRowKeys,
-      selectedRowKeys = _props$rowSelection2$ === void 0 ? [] : _props$rowSelection2$;
-    _this.selected = new Selection(selectedRowKeys);
-    _this.syncColRender();
+    _this.selected = new Selection([]);
+    _this.customColumnData = ((_props$customColumnPa = props.customColumnPanelStorage) === null || _props$customColumnPa === void 0 || (_props$customColumnPa2 = _props$customColumnPa.get) === null || _props$customColumnPa2 === void 0 ? void 0 : _props$customColumnPa2.call(_props$customColumnPa)) || null;
     return _this;
   }
   _createClass(InternalDataGrid, [{
@@ -566,9 +591,9 @@ var InternalDataGrid = /*#__PURE__*/function (_Component) {
   }, {
     key: "getPagination",
     value: function getPagination() {
-      var _this$props3 = this.props,
-        pagination = _this$props3.pagination,
-        fetch = _this$props3.fetch;
+      var _this$props4 = this.props,
+        pagination = _this$props4.pagination,
+        fetch = _this$props4.fetch;
       var page = 1;
       var pageSize = 50;
       var total = 0;
@@ -597,25 +622,30 @@ var InternalDataGrid = /*#__PURE__*/function (_Component) {
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
-      var _this2 = this,
-        _prevProps$rowSelecti;
-      var _this$props4 = this.props,
-        columns = _this$props4.columns,
-        rowSelection = _this$props4.rowSelection,
-        dataSource = _this$props4.dataSource,
-        context = _this$props4.context;
+      var _prevProps$rowSelecti;
+      var _this$props5 = this.props,
+        columns = _this$props5.columns,
+        rowSelection = _this$props5.rowSelection,
+        dataSource = _this$props5.dataSource,
+        context = _this$props5.context;
+      if (!shallowEqual(context, prevProps.context)) {
+        this.store.setState({
+          context: context
+        });
+      }
+      if (!this.isReady) {
+        return;
+      }
       if (columns !== prevProps.columns) {
         this.syncColRender();
-        this.afterReady(function () {
-          _this2.updateColumnDefs(_this2.columnApi.getColumnState());
-          if (_this2.fields.length > 0) {
-            _this2.api.refreshCells({
-              columns: _this2.fields.map(function (item) {
-                return item.id;
-              })
-            });
-          }
-        });
+        this.updateColumnDefs(this.columnApi.getColumnState());
+        if (this.fields.length > 0) {
+          this.api.refreshCells({
+            columns: this.fields.map(function (item) {
+              return item.id;
+            })
+          });
+        }
       }
       if ((rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.selectedRowKeys) !== ((_prevProps$rowSelecti = prevProps.rowSelection) === null || _prevProps$rowSelecti === void 0 ? void 0 : _prevProps$rowSelecti.selectedRowKeys)) {
         this.syncSelection();
@@ -623,11 +653,6 @@ var InternalDataGrid = /*#__PURE__*/function (_Component) {
       if (dataSource !== prevProps.dataSource) {
         this.syncRowData();
       }
-      if (!shallowEqual(context, prevProps.context)) {
-        this.store.setState({
-          context: context
-        });
-      }
     }
   }, {
     key: "componentWillUnmount",
@@ -639,50 +664,22 @@ var InternalDataGrid = /*#__PURE__*/function (_Component) {
     key: "componentDidMount",
     value: function () {
       var _componentDidMount = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
-        var _this$props5, customColumnPanelStorage, autoLoad, state, data;
         return _regeneratorRuntime().wrap(function _callee3$(_context3) {
           while (1) switch (_context3.prev = _context3.next) {
             case 0:
               window.addEventListener('blur', this.handleFocus);
+              this.loadingChange(true, true);
 
-              /** 加载定制列数据如果接口很慢的话，可能会存在列更新的时序问题，尝试过阻塞其他操作，但在明细页面依旧会出现2个加载动画的情况。未来尝试解决 */
-              _this$props5 = this.props, customColumnPanelStorage = _this$props5.customColumnPanelStorage, autoLoad = _this$props5.autoLoad;
-              if (!customColumnPanelStorage) {
-                _context3.next = 16;
-                break;
-              }
-              _context3.prev = 3;
-              _context3.next = 6;
-              return customColumnPanelStorage.get();
-            case 6:
-              data = _context3.sent;
-              if (data) {
-                this.fields = data.fields;
-                state = data.columState;
-              }
-              _context3.next = 13;
-              break;
-            case 10:
-              _context3.prev = 10;
-              _context3.t0 = _context3["catch"](3);
-              console.log('获取列定制失败', _context3.t0.message);
-            case 13:
-              this.updateColumnDefs(state, true);
-              _context3.next = 17;
-              break;
-            case 16:
-              this.updateColumnDefs();
-            case 17:
-              if (this.isClientMode()) {
-                this.syncRowData();
-              } else if (autoLoad) {
-                this.getDataFromServer();
-              }
-            case 18:
+              // 放在componentDidMount 执行时间比onGridReady早
+              _context3.next = 4;
+              return this.customColumnData;
+            case 4:
+              this.loadingChange(false, true);
+            case 5:
             case "end":
               return _context3.stop();
           }
-        }, _callee3, this, [[3, 10]]);
+        }, _callee3, this);
       }));
       function componentDidMount() {
         return _componentDidMount.apply(this, arguments);
@@ -736,34 +733,32 @@ var InternalDataGrid = /*#__PURE__*/function (_Component) {
   }, {
     key: "syncSelection",
     value: function syncSelection() {
-      var _this3 = this;
-      this.afterReady(function () {
-        var _this3$props$rowSelec = _this3.props.rowSelection,
-          _this3$props$rowSelec2 = _this3$props$rowSelec === void 0 ? {} : _this3$props$rowSelec,
-          selectedRowKeys = _this3$props$rowSelec2.selectedRowKeys;
-        if (selectedRowKeys !== undefined && !_this3.selected.isSameKeys(selectedRowKeys)) {
-          var newSelected = new Map();
-          _this3.selected.forEach(function (id) {
-            var node = _this3.api.getRowNode(id);
-            if (node !== undefined) {
-              node.setSelected(false, false, true);
-            }
-          });
-          selectedRowKeys.forEach(function (id) {
-            var node = _this3.api.getRowNode(id);
-            var data;
-            if (node !== undefined) {
-              node.setSelected(true, false, true);
-              data = node.data;
-            }
-            newSelected.set(id, data || _this3.selected.get(id) || null);
-          });
-          _this3.selected.clone(newSelected);
-          _this3.api.dispatchEvent({
-            type: 'selectionChanged'
-          });
-        }
-      });
+      var _this2 = this;
+      var _this$props$rowSelect = this.props.rowSelection,
+        _this$props$rowSelect2 = _this$props$rowSelect === void 0 ? {} : _this$props$rowSelect,
+        selectedRowKeys = _this$props$rowSelect2.selectedRowKeys;
+      if (selectedRowKeys !== undefined && !this.selected.isSameKeys(selectedRowKeys)) {
+        var newSelected = new Map();
+        this.selected.forEach(function (id) {
+          var node = _this2.api.getRowNode(id);
+          if (node !== undefined) {
+            node.setSelected(false, false, true);
+          }
+        });
+        selectedRowKeys.forEach(function (id) {
+          var node = _this2.api.getRowNode(id);
+          var data;
+          if (node !== undefined) {
+            node.setSelected(true, false, true);
+            data = node.data;
+          }
+          newSelected.set(id, data || _this2.selected.get(id) || null);
+        });
+        this.selected.clone(newSelected);
+        this.api.dispatchEvent({
+          type: 'selectionChanged'
+        });
+      }
     }
   }, {
     key: "syncRowData",
@@ -776,48 +771,45 @@ var InternalDataGrid = /*#__PURE__*/function (_Component) {
   }, {
     key: "updateColumnDefs",
     value: function updateColumnDefs(state) {
-      var _this4 = this;
       var allState = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-      this.afterReady(function () {
-        var _this4$getColumnDefs = _this4.getColumnDefs(),
-          _this4$getColumnDefs2 = _slicedToArray(_this4$getColumnDefs, 2),
-          defs = _this4$getColumnDefs2[0],
-          leafColIds = _this4$getColumnDefs2[1];
-        _this4.api.setColumnDefs(defs);
-        if (state) {
-          /**
-           * 表格初始化列抖动问题：先调用setColumnDefs，后applyColumnState，会产生列移动动画，所以先禁用列移动的动画
-           */
-          _this4.api.__setProperty('suppressColumnMoveAnimation', true);
-          var newState = _toConsumableArray(state);
-          leafColIds.forEach(function (colId, index) {
-            if (!colId) {
-              return;
-            }
-            var idx = state.findIndex(function (item) {
-              return item.colId === colId;
-            });
-            if (idx < 0) {
-              newState.splice(index, 0, {
-                colId: colId
-              });
-            }
+      var _this$getColumnDefs3 = this.getColumnDefs(),
+        _this$getColumnDefs4 = _slicedToArray(_this$getColumnDefs3, 2),
+        defs = _this$getColumnDefs4[0],
+        leafColIds = _this$getColumnDefs4[1];
+      this.api.setColumnDefs(defs);
+      if (state) {
+        /**
+         * 表格初始化列抖动问题：先调用setColumnDefs，后applyColumnState，会产生列移动动画，所以先禁用列移动的动画
+         */
+        this.api.__setProperty('suppressColumnMoveAnimation', true);
+        var newState = _toConsumableArray(state);
+        leafColIds.forEach(function (colId, index) {
+          if (!colId) {
+            return;
+          }
+          var idx = state.findIndex(function (item) {
+            return item.colId === colId;
           });
+          if (idx < 0) {
+            newState.splice(index, 0, {
+              colId: colId
+            });
+          }
+        });
 
-          /**
-           * 初始化的时候，需要使用存储的columnState，不仅仅是顺序，其他情况由于在defs里已经有列的状态控制了
-           */
-          _this4.columnApi.applyColumnState({
-            state: allState ? newState : newState.map(function (item) {
-              return {
-                colId: item.colId
-              };
-            }),
-            applyOrder: true
-          });
-          _this4.api.__setProperty('suppressColumnMoveAnimation', !!_this4.props.suppressColumnMoveAnimation);
-        }
-      });
+        /**
+         * 初始化的时候，需要使用存储的columnState，不仅仅是顺序，其他情况由于在defs里已经有列的状态控制了
+         */
+        this.columnApi.applyColumnState({
+          state: allState ? newState : newState.map(function (item) {
+            return {
+              colId: item.colId
+            };
+          }),
+          applyOrder: true
+        });
+        this.api.__setProperty('suppressColumnMoveAnimation', !!this.props.suppressColumnMoveAnimation);
+      }
     }
   }, {
     key: "getFullColumnDef",
@@ -848,7 +840,7 @@ var InternalDataGrid = /*#__PURE__*/function (_Component) {
   }, {
     key: "getColumnDefs",
     value: function getColumnDefs() {
-      var _this5 = this,
+      var _this3 = this,
         _this$props$customCol;
       var _this$props7 = this.props,
         _this$props7$columns = _this$props7.columns,
@@ -874,7 +866,7 @@ var InternalDataGrid = /*#__PURE__*/function (_Component) {
             if (field !== undefined) {
               opts.field = getColField(item);
             }
-            var def = _this5.getFullColumnDef(opts);
+            var def = _this3.getFullColumnDef(opts);
 
             /** 部分列由于使用type 可能存在colId以及field都不存在, maintainColumnOrder下updateColumnDefs有问题，故从merge后的def中提取field或者colId */
             opts.colId = def.colId || def.field;
@@ -1033,14 +1025,14 @@ var InternalDataGrid = /*#__PURE__*/function (_Component) {
         if (suppressFieldValueGetter) {
           fieldCol.field = field.id;
         } else {
-          var _this5$fieldSuffix$ex;
+          var _this3$fieldSuffix$ex;
           /**
            * 预校验是否可以进行四则运算，可能会有边界情况没考虑到
            */
           var scopeMap = {};
           var reg = /\$\{([^{}]+)\}/g;
-          var expressionSuffix = ((_this5$fieldSuffix$ex = _this5.fieldSuffix.exec(field.expression)) === null || _this5$fieldSuffix$ex === void 0 ? void 0 : _this5$fieldSuffix$ex[1]) || '';
-          var expression = field.expression.replace(_this5.fieldSuffix, '').replace(reg, function (match, p1) {
+          var expressionSuffix = ((_this3$fieldSuffix$ex = _this3.fieldSuffix.exec(field.expression)) === null || _this3$fieldSuffix$ex === void 0 ? void 0 : _this3$fieldSuffix$ex[1]) || '';
+          var expression = field.expression.replace(_this3.fieldSuffix, '').replace(reg, function (match, p1) {
             if (p1) {
               var mapKey = "a".concat(Object.keys(scopeMap).length);
               scopeMap[mapKey] = p1;
@@ -1077,7 +1069,7 @@ var InternalDataGrid = /*#__PURE__*/function (_Component) {
               if (isSummaryRow({
                 node: node
               }) && field.summaryType === 1) {
-                var summary = _this5.getFieldsSummary(_this5.dataSource, _this5.fields);
+                var summary = _this3.getFieldsSummary(_this3.dataSource, _this3.fields);
                 return get(summary, field.id);
               }
               var getValue = function getValue(colId) {
@@ -1110,7 +1102,7 @@ var InternalDataGrid = /*#__PURE__*/function (_Component) {
                   return null;
                 }
               } else {
-                return field.expression.replace(_this5.fieldSuffix, '').replace(reg, function (match, p1) {
+                return field.expression.replace(_this3.fieldSuffix, '').replace(reg, function (match, p1) {
                   if (p1) {
                     return getValue(p1) || '';
                   }
@@ -1217,51 +1209,49 @@ var InternalDataGrid = /*#__PURE__*/function (_Component) {
   }, {
     key: "updateRowData",
     value: function updateRowData() {
-      var _this6 = this;
+      var _this4 = this;
       var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-      this.afterReady(function () {
-        _this6.dataSource = data;
-        _this6.api.setRowData(data);
-        if (_this6.isPreserveSelected()) {
-          _this6.api.forEachNode(function (node) {
-            if (node.id && _this6.selected.has(node.id)) {
-              var rowData = _this6.selected.get(node.id);
-              if (node.data !== undefined && rowData !== node.data) {
-                _this6.selected.set(node.id, node.data);
+      this.dataSource = data;
+      this.api.setRowData(data);
+      if (this.isPreserveSelected()) {
+        this.api.forEachNode(function (node) {
+          if (node.id && _this4.selected.has(node.id)) {
+            var rowData = _this4.selected.get(node.id);
+            if (node.data !== undefined && rowData !== node.data) {
+              _this4.selected.set(node.id, node.data);
+            }
+            if (!node.isSelected()) {
+              node.setSelected(true, false, true);
+            }
+          }
+        });
+      } else {
+        var keys = new Map(data.map(function (item) {
+          return [_this4.getRowId({
+            data: item
+          }), item];
+        }));
+        this.selected.forEach(function (id) {
+          if (!keys.has(id)) {
+            _this4.selected.delete(id);
+          } else {
+            var node = _this4.api.getRowNode(id);
+            if (node !== undefined) {
+              if (node.data !== undefined && _this4.selected.get(id) !== node.data) {
+                _this4.selected.set(id, node.data);
               }
               if (!node.isSelected()) {
                 node.setSelected(true, false, true);
               }
             }
-          });
-        } else {
-          var keys = new Map(data.map(function (item) {
-            return [_this6.getRowId({
-              data: item
-            }), item];
-          }));
-          _this6.selected.forEach(function (id) {
-            if (!keys.has(id)) {
-              _this6.selected.delete(id);
-            } else {
-              var node = _this6.api.getRowNode(id);
-              if (node !== undefined) {
-                if (node.data !== undefined && _this6.selected.get(id) !== node.data) {
-                  _this6.selected.set(id, node.data);
-                }
-                if (!node.isSelected()) {
-                  node.setSelected(true, false, true);
-                }
-              }
-            }
-          });
-        }
-        if (_this6.selected.isDirty()) {
-          _this6.api.dispatchEvent({
-            type: 'selectionChanged'
-          });
-        }
-      });
+          }
+        });
+      }
+      if (this.selected.isDirty()) {
+        this.api.dispatchEvent({
+          type: 'selectionChanged'
+        });
+      }
     }
   }, {
     key: "getSummaryRowData",
@@ -1285,102 +1275,121 @@ var InternalDataGrid = /*#__PURE__*/function (_Component) {
       });
     }
   }, {
-    key: "getDataFromServer",
-    value: function getDataFromServer() {
-      var _this7 = this;
-      var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-      this.afterReady(function () {
-        var _this7$props = _this7.props,
-          fetch = _this7$props.fetch,
-          onLoading = _this7$props.onLoading,
-          onLoad = _this7$props.onLoad;
-        var loadingChange = function loadingChange(flag) {
-          if (onLoading) {
-            onLoading(flag);
+    key: "loadingChange",
+    value:
+    /**
+     *
+     * @param flag
+     * @param ignoreClientMode 为了解决明细页面出现2个loading动画的问题，非远程模式加载列定制数据的时候暂定出现表格内部加载动画
+     */
+    function loadingChange(flag) {
+      var _this5 = this;
+      var ignoreClientMode = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+      if (this.loadingTiming) {
+        clearTimeout(this.loadingTiming);
+        this.loadingTiming = null;
+      }
+      this.loadingTiming = setTimeout(function () {
+        var onLoading = _this5.props.onLoading;
+        if (onLoading) {
+          onLoading(flag);
+        } else {
+          if (_this5.isClientMode() && ignoreClientMode) {
+            // noop
           } else {
-            _this7.setState({
+            _this5.setState({
               loading: flag
             });
           }
-        };
-        if (typeof fetch === 'function') {
-          if (_this7.requestId < Number.MAX_SAFE_INTEGER) {
-            _this7.requestId += 1;
+        }
+        _this5.loadingTiming = null;
+      }, 16);
+    }
+  }, {
+    key: "getDataFromServer",
+    value: function getDataFromServer() {
+      var _this6 = this;
+      var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      var _this$props8 = this.props,
+        fetch = _this$props8.fetch,
+        onLoad = _this$props8.onLoad;
+      if (typeof fetch === 'function') {
+        if (this.requestId < Number.MAX_SAFE_INTEGER) {
+          this.requestId += 1;
+        }
+        var _this$state2 = this.state,
+          page = _this$state2.page,
+          pageSize = _this$state2.pageSize;
+        var columnState = this.columnApi.getColumnState();
+        var id = this.requestId;
+        this.loadingChange(true);
+        fetch({
+          current: page,
+          pageSize: pageSize,
+          sort: columnState.filter(function (item) {
+            return item.sort !== undefined && item.sort !== null;
+          }).map(function (item) {
+            return {
+              field: item.colId,
+              order: item.sort
+            };
+          })
+        }).then(function (res) {
+          if (id !== _this6.requestId) {
+            return;
           }
-          var _this7$state = _this7.state,
-            page = _this7$state.page,
-            pageSize = _this7$state.pageSize;
-          var columnState = _this7.columnApi.getColumnState();
-          var id = _this7.requestId;
-          loadingChange(true);
-          fetch({
-            current: page,
-            pageSize: pageSize,
-            sort: columnState.filter(function (item) {
-              return item.sort !== undefined && item.sort !== null;
-            }).map(function (item) {
-              return {
-                field: item.colId,
-                order: item.sort
-              };
-            })
-          }).then(function (res) {
-            if (id !== _this7.requestId) {
-              return;
-            }
-            loadingChange(false);
-            if (res.total !== undefined) {
-              _this7.setState({
-                page: page,
-                pageSize: pageSize,
-                total: res.total
-              });
-            }
-            var summary = _this7.props.summary;
-            _this7.updateRowData(res.data);
-            _this7.api.setPinnedBottomRowData(_this7.getSummaryRowData(summary, res.summary));
-            if (res.data.length > 0 && !params.refresh) {
-              _this7.api.ensureIndexVisible(0);
-            }
-            if (onLoad) {
-              onLoad(res.extra);
-            }
-            _this7.store.setState({
-              fetchError: undefined
+          _this6.loadingChange(false);
+          if (res.total !== undefined) {
+            _this6.setState({
+              page: page,
+              pageSize: pageSize,
+              total: res.total
             });
-          }).catch(function (err) {
-            _this7.store.setState({
-              fetchError: err
-            });
-            loadingChange(false);
+          }
+          var summary = _this6.props.summary;
+          _this6.updateRowData(res.data);
+          _this6.api.setPinnedBottomRowData(_this6.getSummaryRowData(summary, res.summary));
+          if (res.data.length > 0 && !params.refresh) {
+            _this6.api.ensureIndexVisible(0);
+          }
+          if (onLoad) {
+            onLoad(res.extra);
+          }
+          _this6.store.setState({
+            fetchError: undefined
+          });
+        }).catch(function (err) {
+          _this6.store.setState({
+            fetchError: err
+          });
+          _this6.loadingChange(false);
 
-            /** 如果当前是在第一页说明根本没有数据，会误杀其他情况，但不重要 */
-            _this7.setState(function (prev) {
-              return {
-                total: prev.page === 1 ? 0 : prev.total
-              };
-            });
-            _this7.updateRowData([]);
-            _this7.api.setPinnedBottomRowData([]);
+          /** 如果当前是在第一页说明根本没有数据，会误杀其他情况，但不重要 */
+          _this6.setState(function (prev) {
+            return {
+              total: prev.page === 1 ? 0 : prev.total
+            };
           });
-        }
-      });
+          _this6.updateRowData([]);
+          _this6.api.setPinnedBottomRowData([]);
+        });
+      }
     }
   }, {
     key: "pagination",
     value: function pagination(page, pageSize) {
-      var _this8 = this;
+      var _this7 = this;
       this.setState({
         page: page,
         pageSize: pageSize
       }, function () {
-        if (_this8.isClientMode()) {
+        if (_this7.isClientMode()) {
           withSyncRender(function () {
-            _this8.api.paginationGoToPage(page - 1);
-            _this8.api.paginationSetPageSize(pageSize);
+            _this7.api.paginationGoToPage(page - 1);
+            _this7.api.paginationSetPageSize(pageSize);
           });
         } else {
-          _this8.getDataFromServer();
+          _this7.getDataFromServer();
         }
       });
     }
@@ -1403,7 +1412,7 @@ var InternalDataGrid = /*#__PURE__*/function (_Component) {
   }, {
     key: "validateRecord",
     value: function validateRecord(record) {
-      var _this9 = this;
+      var _this8 = this;
       if (this.validator === null) {
         return;
       }
@@ -1411,26 +1420,26 @@ var InternalDataGrid = /*#__PURE__*/function (_Component) {
         data: record
       });
       return this.validator.validate(record).then(function () {
-        var errors = new Map(_this9.store.getState().errors);
+        var errors = new Map(_this8.store.getState().errors);
         var error = errors.get(rowId);
         if (error === undefined) {
           return;
         }
         errors.delete(rowId);
-        _this9.store.setState({
+        _this8.store.setState({
           errors: errors
         });
       }).catch(function (res) {
         var fields = res.fields;
-        var errors = new Map(_this9.store.getState().errors);
+        var errors = new Map(_this8.store.getState().errors);
         var error = new Map();
         Object.entries(fields).forEach(function (item) {
           error.set(item[0], item[1].map(function (err) {
-            return _this9.getFieldErrMessage(err, item[0]);
+            return _this8.getFieldErrMessage(err, item[0]);
           }));
         });
         errors.set(rowId, error);
-        _this9.store.setState({
+        _this8.store.setState({
           errors: errors
         });
       });
@@ -1439,7 +1448,7 @@ var InternalDataGrid = /*#__PURE__*/function (_Component) {
     key: "validate",
     value: function () {
       var _validate = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4() {
-        var _this10 = this;
+        var _this9 = this;
         var promises, result, flag, errors, failed;
         return _regeneratorRuntime().wrap(function _callee4$(_context4) {
           while (1) switch (_context4.prev = _context4.next) {
@@ -1450,13 +1459,13 @@ var InternalDataGrid = /*#__PURE__*/function (_Component) {
                 if (record === undefined) {
                   return;
                 }
-                var rowId = _this10.getRowId({
+                var rowId = _this9.getRowId({
                   data: record
                 });
-                if (_this10.validator === null) {
+                if (_this9.validator === null) {
                   promises.push(Promise.resolve(true));
                 } else {
-                  promises.push(_this10.validator.validate(record).catch(function (_ref8) {
+                  promises.push(_this9.validator.validate(record).catch(function (_ref8) {
                     var fields = _ref8.fields;
                     return Promise.reject({
                       id: rowId,
@@ -1486,7 +1495,7 @@ var InternalDataGrid = /*#__PURE__*/function (_Component) {
                       field = _ref11[0],
                       errs = _ref11[1];
                     error.set(field, errs.map(function (err) {
-                      return _this10.getFieldErrMessage(err, field);
+                      return _this9.getFieldErrMessage(err, field);
                     }));
                   });
                   errors.set(id, error);
@@ -1518,12 +1527,14 @@ var InternalDataGrid = /*#__PURE__*/function (_Component) {
   }, {
     key: "fetch",
     value: function fetch(page) {
-      var _this11 = this;
+      var _this10 = this;
       var curr = page || 1;
       this.setState({
         page: curr
       }, function () {
-        _this11.getDataFromServer();
+        _this10.afterReady(function () {
+          _this10.getDataFromServer();
+        });
       });
     }
   }, {
@@ -1567,35 +1578,35 @@ var InternalDataGrid = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this12 = this;
-      var _this$props8 = this.props,
-        rowKey = _this$props8.rowKey,
-        fetch = _this$props8.fetch,
-        dataSource = _this$props8.dataSource,
-        rowActions = _this$props8.rowActions,
-        columns = _this$props8.columns,
-        autoLoad = _this$props8.autoLoad,
-        loadingProp = _this$props8.loading,
-        summary = _this$props8.summary,
-        detailCell = _this$props8.detailCell,
-        pagination = _this$props8.pagination,
-        rowSelection = _this$props8.rowSelection,
-        columnTypesProp = _this$props8.columnTypes,
-        defaultColDefProp = _this$props8.defaultColDef,
-        componentsProp = _this$props8.components,
-        sideBarProp = _this$props8.sideBar,
-        detailCellRendererParams = _this$props8.detailCellRendererParams,
-        context = _this$props8.context,
-        showSearch = _this$props8.showSearch,
-        cellDisplayFlex = _this$props8.cellDisplayFlex,
-        locale = _this$props8.locale,
-        restProps = _objectWithoutProperties(_this$props8, _excluded4);
-      var _this$state2 = this.state,
-        enablePagination = _this$state2.pagination,
-        page = _this$state2.page,
-        pageSize = _this$state2.pageSize,
-        total = _this$state2.total,
-        loading = _this$state2.loading;
+      var _this11 = this;
+      var _this$props9 = this.props,
+        rowKey = _this$props9.rowKey,
+        fetch = _this$props9.fetch,
+        dataSource = _this$props9.dataSource,
+        rowActions = _this$props9.rowActions,
+        columns = _this$props9.columns,
+        autoLoad = _this$props9.autoLoad,
+        loadingProp = _this$props9.loading,
+        summary = _this$props9.summary,
+        detailCell = _this$props9.detailCell,
+        pagination = _this$props9.pagination,
+        rowSelection = _this$props9.rowSelection,
+        columnTypesProp = _this$props9.columnTypes,
+        defaultColDefProp = _this$props9.defaultColDef,
+        componentsProp = _this$props9.components,
+        sideBarProp = _this$props9.sideBar,
+        detailCellRendererParams = _this$props9.detailCellRendererParams,
+        context = _this$props9.context,
+        showSearch = _this$props9.showSearch,
+        cellDisplayFlex = _this$props9.cellDisplayFlex,
+        locale = _this$props9.locale,
+        restProps = _objectWithoutProperties(_this$props9, _excluded4);
+      var _this$state3 = this.state,
+        enablePagination = _this$state3.pagination,
+        page = _this$state3.page,
+        pageSize = _this$state3.pageSize,
+        total = _this$state3.total,
+        loading = _this$state3.loading;
       var mPage = _typeof(pagination) === 'object' ? pagination : {};
       var footer = [];
       var gridRowSelection;
@@ -1639,7 +1650,7 @@ var InternalDataGrid = /*#__PURE__*/function (_Component) {
           current: page,
           total: total,
           onChange: function onChange(curr, limit) {
-            _this12.pagination(curr, limit);
+            _this11.pagination(curr, limit);
             if (mPage.onChange) {
               mPage.onChange(curr, limit);
             }
@@ -1657,7 +1668,7 @@ var InternalDataGrid = /*#__PURE__*/function (_Component) {
           if (e.currentTarget.contains(e.relatedTarget)) {
             return;
           }
-          _this12.handleBlur();
+          _this11.handleBlur();
         },
         onFocus: this.handleFocus
       }, /*#__PURE__*/React.createElement(AgGridReact, _extends({

package/es/data-grid/index.less

@@ -320,7 +320,6 @@
   &-bottom {
     display: flex;
     align-items: center;
-    justify-content: space-between;
     margin-top: @space-v;
     background-color: var(--ag-background-color);
 
@@ -330,6 +329,7 @@
   }
 
   &-selected {
+    margin-right: @padding-md;
     color: #333;
 
     a {

package/es/data-grid/utils.js

@@ -276,7 +276,8 @@ export var columnTypes = {
     suppressColumnsToolPanel: true,
     spanHeaderHeight: true,
     sortable: false,
-    lockPinned: true
+    lockPinned: true,
+    pinned: 'left'
   },
   delete: {
     colId: '$$delete',

package/es/sider-tree/index.js

@@ -170,7 +170,9 @@ export default function SiderTree(props) {
     className: prefix('header')
   }, mHeader), heightProp === 'auto' ? /*#__PURE__*/React.createElement(ResizeObserver, {
     onResize: function onResize(e) {
-      return setHeight(e.height);
+      if (e.height) {
+        setHeight(e.height);
+      }
     }
   }, /*#__PURE__*/React.createElement("div", {
     className: prefix('body'),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lemon-fe/components",
-  "version": "1.2.8",
+  "version": "1.2.9-alpha.1",
   "description": "> TODO: description",
   "homepage": "",
   "license": "ISC",
@@ -67,5 +67,5 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },
-  "gitHead": "6cda44ae5c46b758e48a544a0a40a41420263817"
+  "gitHead": "ae4063a85960a12bbbc469fa46eaba09184d7638"
 }