@lemon-fe/kits 1.0.0-141 → 1.0.0-142

package/es/components/DataGrid/index.js

@@ -82,6 +82,7 @@ import TextEditor from "./cell-editors/Text";
 import EditorWrapper from "./cell-editors/Wrapper";
 import Selected from "./components/Selected";
 import GridStoreContext from "./context/GridStore";
+import { useGridStore } from "./hooks";
 import { ClipboardModule } from "./modules/clipboard/main";
 import { ColumnsToolPanelModule } from "./modules/column-tool-panel/main";
 import { MasterDetailModule } from "./modules/master-detail/main";
@@ -114,6 +115,15 @@ function unsort() {
   return 0;
 }
 
+function EmptyOverlay(props) {
+  var err = useGridStore(function (state) {
+    return state.fetchError;
+  });
+  return /*#__PURE__*/React.createElement(Empty, {
+    description: err ? err.message : props.desc
+  });
+}
+
 var DataGrid = /*#__PURE__*/function (_Component) {
   _inherits(DataGrid, _Component);
 
@@ -227,9 +237,8 @@ var DataGrid = /*#__PURE__*/function (_Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "NoRowsOverlay", function () {
-      var error = _this.state.error;
-      return /*#__PURE__*/React.createElement(Empty, {
-        description: error ? error.message : _this.props.emptyText
+      return /*#__PURE__*/React.createElement(EmptyOverlay, {
+        desc: _this.props.emptyText
       });
     });
 
@@ -389,7 +398,7 @@ var DataGrid = /*#__PURE__*/function (_Component) {
         return;
       }
 
-      var node = api.getDisplayedRowAtIndex(rowIndex);
+      var node = api.getModel().getRow(rowIndex);
 
       if (node === undefined || !node.id) {
         _this.prevFocusedCell = null;
@@ -1022,9 +1031,12 @@ var DataGrid = /*#__PURE__*/function (_Component) {
             onLoad(res.extra);
           }
         }).catch(function (err) {
+          _this5.store.setState({
+            fetchError: err
+          });
+
           _this5.setState({
-            loading: false,
-            error: err
+            loading: false
           });
         });
       }

package/es/components/DataGrid/renderer/CellIndexRenderer.js

@@ -40,7 +40,7 @@ export default function CellIndexRender(props) {
   }
 
   if (type === 'childIndex') {
-    return index;
+    return index + 1;
   }
 
   var _ref = store.getState(),

package/es/components/DataGrid/typings.d.ts

@@ -1,12 +1,12 @@
-import type { AgGridReactProps } from '@ag-grid-community/react';
 import type { ColDef, ColGroupDef, EditableCallbackParams, ICellEditorParams, ICellRendererParams, IHeaderParams, AgGridEvent } from '@ag-grid-community/core';
+import type { AgGridReactProps } from '@ag-grid-community/react';
 import type { RuleItem } from 'async-validator/dist-types/interface';
 import type { ReactElement, ReactNode } from 'react';
-import type { TextEditorParams } from './cell-editors/Text';
-import type { NumberEditorParams } from './cell-editors/Number';
 import type { DateEditorParams } from './cell-editors/Date';
-import type { SelectEditorParams } from './cell-editors/Select';
+import type { NumberEditorParams } from './cell-editors/Number';
 import type { RowEditorParams } from './cell-editors/Row';
+import type { SelectEditorParams } from './cell-editors/Select';
+import type { TextEditorParams } from './cell-editors/Text';
 import type DataGrid from './index';
 export type { TextEditorParams } from './cell-editors/Text';
 export type { NumberEditorParams } from './cell-editors/Number';
@@ -92,6 +92,7 @@ export declare type GridStore = {
     errors: Map<string, Map<string, string[]>>;
     context?: any;
     grid: DataGrid<any>;
+    fetchError?: Error;
 };
 export interface RowAction<T> {
     /**

package/es/components/EditableTable/Table.js

@@ -24,12 +24,12 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-import React, { cloneElement, createContext, useContext, useEffect, useMemo, useState, memo, isValidElement, forwardRef, useImperativeHandle, useRef } from 'react';
 import { get, isEqual } from 'lodash';
+import React, { cloneElement, createContext, useContext, useEffect, useMemo, useState, memo, isValidElement, forwardRef, useImperativeHandle, useRef } from 'react';
 import BaseTable from "../BaseTable";
+import EditableCell from "./EditableCell";
 import { FormStore } from "./util";
 import { PREFIX_CLS } from "../../constants";
-import EditableCell from "./EditableCell";
 var Context = /*#__PURE__*/createContext(null);
 
 var getColKey = function getColKey(name) {
@@ -185,7 +185,7 @@ function EditableTable(props, ref) {
                   onFocus: opts.onFocus
                 }, /*#__PURE__*/cloneElement(renderFormItem, {
                   bordered: false,
-                  val: val,
+                  value: value,
                   onChange: function onChange(e) {
                     var result = e;
 

package/es/hooks/useBatchOperator/index.js

@@ -32,11 +32,12 @@ import { PlayCircleOutlined, PauseCircleOutlined, ReloadOutlined } from '@ant-de
 import { useThrottle } from '@lemon-fe/hooks';
 import { ConfigProvider, Modal, Row, Spin } from 'antd';
 import { get } from 'lodash';
-import React, { useMemo, useState, useRef, useEffect, useContext } from 'react';
+import React, { useMemo, useState, useRef, useEffect, useContext, useCallback } from 'react';
 import { render } from 'react-dom';
 import { unmountComponentAtNode } from 'react-dom';
 import Actions from "../../components/Actions";
 import DataGrid from "../../components/DataGrid";
+import { useDataGrid } from "../../components/DataGrid/hooks";
 import Icons from "../../components/Icons";
 import Layout from "../../components/Layout";
 import Section from "../../components/Section";
@@ -71,7 +72,7 @@ function BatchOperate(props) {
       results = _useState6[0],
       setResults = _useState6[1];
 
-  var _useState7 = useState(-1),
+  var _useState7 = useState(null),
       _useState8 = _slicedToArray(_useState7, 2),
       active = _useState8[0],
       setActive = _useState8[1];
@@ -83,6 +84,7 @@ function BatchOperate(props) {
 
   var mounted = useRef(false);
   var pausedRef = useRef(paused);
+  var grid = useDataGrid();
   pausedRef.current = paused;
   useEffect(function () {
     mounted.current = visible;
@@ -92,15 +94,8 @@ function BatchOperate(props) {
   }, [visible]);
 
   var getRowKey = function getRowKey(record) {
-    if (typeof rowKey === 'function') {
-      return rowKey(record);
-    }
-
-    if (rowKey !== undefined) {
-      return get(record, rowKey);
-    }
-
-    return get(record, 'key');
+    var result = typeof rowKey === 'function' ? rowKey(record) : get(record, rowKey);
+    return String(result !== null && result !== void 0 ? result : '').toString();
   };
 
   var changeResult = function changeResult(key, val) {
@@ -149,73 +144,85 @@ function BatchOperate(props) {
     };
   }(), 500);
 
-  var start = useThrottle( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
-    var i, item, key, res;
-    return _regeneratorRuntime().wrap(function _callee2$(_context2) {
-      while (1) {
-        switch (_context2.prev = _context2.next) {
-          case 0:
-            setPaused(false);
-            i = active + 1;
-
-          case 2:
-            if (!(i < data.length)) {
-              _context2.next = 23;
-              break;
-            }
+  var run = useCallback( /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(node) {
+      var item, id, res, index, nextNode;
+      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              item = node.data, id = node.id;
+              grid.use(function (curr) {
+                return curr.api.ensureNodeVisible(node);
+              });
 
-            setActive(i);
-            item = data[i];
-            key = getRowKey(item);
-            _context2.prev = 6;
-            _context2.next = 9;
-            return handler(item, params);
-
-          case 9:
-            res = _context2.sent;
-            changeResult(key, res);
-            _context2.next = 16;
-            break;
-
-          case 13:
-            _context2.prev = 13;
-            _context2.t0 = _context2["catch"](6);
-            changeResult(key, _context2.t0);
-
-          case 16:
-            if (!pausedRef.current) {
-              _context2.next = 18;
-              break;
-            }
+              if (!(!item || !id)) {
+                _context2.next = 4;
+                break;
+              }
 
-            return _context2.abrupt("return");
+              return _context2.abrupt("return");
 
-          case 18:
-            if (mounted.current) {
-              _context2.next = 20;
+            case 4:
+              setActive(id);
+              _context2.prev = 5;
+              _context2.next = 8;
+              return handler(item, params);
+
+            case 8:
+              res = _context2.sent;
+              changeResult(id, res);
+              _context2.next = 15;
               break;
-            }
 
-            return _context2.abrupt("break", 23);
+            case 12:
+              _context2.prev = 12;
+              _context2.t0 = _context2["catch"](5);
+              changeResult(id, _context2.t0);
 
-          case 20:
-            i += 1;
-            _context2.next = 2;
-            break;
+            case 15:
+              index = node.rowIndex;
 
-          case 23:
-            if (mounted.current) {
-              setActive(-1);
-              setPaused(true);
-            }
+              if (!(pausedRef.current || !mounted.current || index === null)) {
+                _context2.next = 18;
+                break;
+              }
+
+              return _context2.abrupt("return");
 
-          case 24:
-          case "end":
-            return _context2.stop();
+            case 18:
+              nextNode = grid.use(function (curr) {
+                return curr.api.getModel().getRow(index + 1);
+              });
+
+              if (nextNode) {
+                run(nextNode);
+              } else {
+                setActive(null);
+                setPaused(true);
+              }
+
+            case 20:
+            case "end":
+              return _context2.stop();
+          }
         }
-      }
-    }, _callee2, null, [[6, 13]]);
-  })), 500);
+      }, _callee2, null, [[5, 12]]);
+    }));
+
+    return function (_x3) {
+      return _ref2.apply(this, arguments);
+    };
+  }(), [params]);
+  var start = useThrottle(function () {
+    setPaused(false);
+
+    if (data.length > 0) {
+      run(grid.use(function (curr) {
+        return curr.api.getRowNode(getRowKey(data[0]));
+      }));
+    }
+  }, 500);
 
   var handleClose = /*#__PURE__*/function () {
     var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
@@ -288,16 +295,17 @@ function BatchOperate(props) {
       dataIndex: typeof rowKey === 'string' ? rowKey : undefined,
       render: function render(_1, _2, _3, _ref6) {
         var node = _ref6.node;
-        return node.id || '';
+        return node.id;
       }
     }];
     cols.unshift({
       title: '',
       colId: '__delete__',
       width: 32,
-      render: function render(_1, _2, index, _ref7) {
+      render: function render(_1, _2, _3, _ref7) {
         var context = _ref7.context,
-            node = _ref7.node;
+            node = _ref7.node,
+            api = _ref7.api;
         var key = node.id;
         return /*#__PURE__*/React.createElement(Icons.Delete, {
           onClick: function onClick() {
@@ -305,12 +313,8 @@ function BatchOperate(props) {
               return;
             }
 
-            setActive(function (prev) {
-              if (prev >= index) {
-                return prev - 1;
-              }
-
-              return prev;
+            api.applyTransaction({
+              remove: [node.data]
             });
             setResults(function (prev) {
               if (prev.has(key)) {
@@ -321,12 +325,6 @@ function BatchOperate(props) {
 
               return prev;
             });
-            setData(function (prev) {
-              var next = _toConsumableArray(prev);
-
-              next.splice(index, 1);
-              return next;
-            });
           }
         });
       }
@@ -336,13 +334,13 @@ function BatchOperate(props) {
       dataIndex: 'status',
       flex: 1,
       resizable: false,
-      render: function render(_, record, index, _ref8) {
+      render: function render(_1, record, _2, _ref8) {
         var context = _ref8.context,
             node = _ref8.node;
         var key = node.id;
         var result = context.results.get(key);
 
-        if (context.active === index && !context.paused || result === loading) {
+        if (context.active === key && !context.paused || result === loading) {
           return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Spin, {
             size: "small",
             style: {
@@ -412,7 +410,7 @@ function BatchOperate(props) {
     afterClose: function afterClose() {
       setResults(new Map());
       setPaused(true);
-      setActive(-1);
+      setActive(null);
       setData([]);
 
       _afterClose();
@@ -426,7 +424,7 @@ function BatchOperate(props) {
       actions: [paused ? {
         disabled: data.length <= 0 || results.size >= data.length,
         icon: /*#__PURE__*/React.createElement(PlayCircleOutlined, null),
-        text: active >= 0 ? '继续执行' : '开始执行',
+        text: active ? '继续执行' : '开始执行',
         onClick: start
       } : {
         disabled: data.length <= 0,
@@ -441,11 +439,13 @@ function BatchOperate(props) {
     flex: 1
   }, /*#__PURE__*/React.createElement(DataGrid, {
     pagination: false,
+    ref: grid.ref,
     context: {
       results: results,
       paused: paused,
       active: active
     },
+    onDataSourceChange: setData,
     dataSource: data,
     columns: mCols,
     rowKey: rowKey

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lemon-fe/kits",
-  "version": "1.0.0-141",
+  "version": "1.0.0-142",
   "scripts": {
     "start": "dumi dev",
     "docs:build": "dumi build",