@lemon-fe/kits 1.0.0-4 → 1.0.0-5

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

@@ -9,6 +9,7 @@ export default class DataGrid<TData> extends Component<DataGridProps<TData>, {
     page: number;
     pageSize: number;
     total: number;
+    loading: boolean;
 }> {
     api: GridApi<any>;
     private selected;

package/es/components/DataGrid/index.js

@@ -195,7 +195,8 @@ var DataGrid = /*#__PURE__*/function (_Component) {
     });
 
     _this.state = _objectSpread({
-      colDefs: _this.getColumDefs()
+      colDefs: _this.getColumDefs(),
+      loading: false
     }, _this.getPagination());
     _this.store = new Store({
       errors: new Map(),
@@ -665,7 +666,9 @@ var DataGrid = /*#__PURE__*/function (_Component) {
             pageSize = _this$state.pageSize;
         var columnState = this.columnApi.getColumnState();
         var id = this.requestId;
-        this.api.showLoadingOverlay();
+        this.setState({
+          loading: true
+        });
         fetch({
           current: page,
           pageSize: pageSize,
@@ -678,7 +681,9 @@ var DataGrid = /*#__PURE__*/function (_Component) {
             };
           })
         }).then(function (res) {
-          _this6.api.hideOverlay();
+          _this6.setState({
+            loading: false
+          });
 
           if (id !== _this6.requestId) {
             return;
@@ -710,7 +715,9 @@ var DataGrid = /*#__PURE__*/function (_Component) {
           } // 重置滚动条
 
 
-          _this6.api.setRowData([]);
+          var bean = _this6.api.__getContext().getBean('ctrlsService');
+
+          bean.getGridBodyCtrl().getScrollFeature().scrollToTop();
 
           _this6.api.setPinnedBottomRowData(pinned);
 
@@ -720,7 +727,9 @@ var DataGrid = /*#__PURE__*/function (_Component) {
             onLoad(res.extra);
           }
         }).catch(function () {
-          _this6.api.hideOverlay();
+          _this6.setState({
+            loading: false
+          });
         });
       }
     }
@@ -944,7 +953,8 @@ var DataGrid = /*#__PURE__*/function (_Component) {
           enablePagination = _this$state2.pagination,
           page = _this$state2.page,
           pageSize = _this$state2.pageSize,
-          total = _this$state2.total;
+          total = _this$state2.total,
+          loading = _this$state2.loading;
       var mPage = _typeof(pagination) === 'object' ? pagination : {};
       return /*#__PURE__*/React.createElement(GridContext.Provider, {
         value: this.store
@@ -999,7 +1009,9 @@ var DataGrid = /*#__PURE__*/function (_Component) {
             mPage.onChange(page, pageSize);
           }
         }
-      })))));
+      }))), loading && /*#__PURE__*/React.createElement(Spin, {
+        className: prefix('spin')
+      })));
     }
   }]);
 

package/es/components/DataGrid/index.less

@@ -151,7 +151,7 @@
 
     .ag-cell-inline-editing & {
       padding: 0;
-      box-shadow: 0 0 0 2px var(--ant-primary-5) inset;
+      box-shadow: 0 0 0 2px ~'var(--@{ant-prefix}-primary-5)' inset;
     }
 
     &-text {
@@ -181,7 +181,7 @@
     left: -6px;
     z-index: 10;
     border: 6px solid transparent;
-    border-top-color: var(--ant-error-color-active);
+    border-top-color: ~'var(--@{ant-prefix}-error-color-active)';
     transform: rotate(135deg);
   }
 
@@ -196,6 +196,18 @@
       vertical-align: top;
     }
   }
+
+  &-spin {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: rgba(255, 255, 255, 0.6);
+  }
 }
 
 .ag-theme-@{prefixCls} {
@@ -217,13 +229,13 @@
   --ag-header-column-resize-handle-color: #bbb;
   --ag-cell-horizontal-padding: 8px;
   --ag-icon-font-family: agGridAlpine;
-  --ag-selected-row-background-color: var(--ant-primary-1);
+  --ag-selected-row-background-color: ~'var(--@{ant-prefix}-primary-1)';
   --ag-selected-tab-underline-width: 2px;
-  --ag-range-selection-border-color: var(--ant-primary-5);
-  --ag-range-selection-highlight-color: var(--ant-primary-1);
+  --ag-range-selection-border-color: ~'var(--@{ant-prefix}-primary-5)';
+  --ag-range-selection-highlight-color: ~'var(--@{ant-prefix}-primary-1)';
   --ag-checkbox-unchecked-color: #ccc;
   --ag-checkbox-background-color: var(--ag-background-color);
-  --ag-checkbox-checked-color: var(--ant-primary-color);
+  --ag-checkbox-checked-color: 'var(--@{ant-prefix}-primary-color)';
   --ag-input-border-color: transparent;
   --ag-input-focus-border-color: transparent;
 
@@ -263,7 +275,7 @@
       bottom: 0;
       left: 0;
       display: block;
-      border: 2px solid var(--ant-primary-5);
+      border: 2px solid ~'var(--@{ant-prefix}-primary-5)';
       border-radius: 4px;
       content: '';
       pointer-events: none;
@@ -291,7 +303,7 @@
   }
 
   .ag-tab-selected {
-    color: var(--ant-primary-color);
+    color: ~'var(--@{ant-prefix}-primary-color)';
   }
 
   .ag-tabs-header {

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

@@ -2,6 +2,7 @@ import type { AgGridReactProps } from '@ag-grid-community/react';
 import type { ColDef, ColGroupDef, ICellRendererParams, IHeaderParams } from '@ag-grid-community/core';
 import type { RuleItem } from 'async-validator/dist-types/interface';
 import type { ReactElement, ReactNode, RefObject } from 'react';
+export type { ColDef, ColGroupDef, ColumnState } from '@ag-grid-community/core';
 export declare type GetRowKey<T> = string | ((data: T) => string);
 export declare type PathType = string | (string | number)[];
 export declare type ValidateRule<T> = Pick<RuleItem, 'required' | 'message' | 'pattern' | 'min' | 'max' | 'len' | 'type'> & {

package/es/components/Layout/index.d.ts

@@ -28,6 +28,7 @@ declare namespace Layout {
         children?: React.ReactNode;
         left?: React.ReactNode;
         tab?: string | undefined;
+        forceRender?: boolean | undefined;
     } & Pick<Props, "onCollapse">) => JSX.Element;
 }
 export default Layout;

package/es/components/Layout/index.js

@@ -156,7 +156,8 @@ function LayoutTabs(props) {
     var tab = tabs[index];
     return /*#__PURE__*/React.createElement(Tabs.TabPane, {
       tab: (_get = get(node, ['props', 'tab'])) !== null && _get !== void 0 ? _get : tab.title,
-      key: (_get2 = get(node, 'key')) !== null && _get2 !== void 0 ? _get2 : getKey(tab)
+      key: (_get2 = get(node, 'key')) !== null && _get2 !== void 0 ? _get2 : getKey(tab),
+      forceRender: get(node, ['props', 'forceRender'])
     }, node);
   });
   return /*#__PURE__*/React.createElement(Layout, _extends({

package/es/components/Section/index.d.ts

@@ -32,6 +32,7 @@ interface Props extends Pick<TabsProps, 'activeKey' | 'onTabClick'> {
     tabs?: {
         title?: string;
         key: string;
+        forceRender?: boolean;
     }[];
     /**
      * @description body元素的样式

package/es/components/Section/index.js

@@ -66,12 +66,14 @@ export default function Section(props) {
   }, mapChildren(children, function (child, index) {
     var _tabs$index = tabs[index],
         tab = _tabs$index.title,
-        key = _tabs$index.key;
+        key = _tabs$index.key,
+        forceRender = _tabs$index.forceRender;
     return /*#__PURE__*/React.createElement(Tabs.TabPane, {
       tab: tab,
       key: key,
       className: "".concat(prefixCls, "-body"),
-      style: bodyStyle
+      style: bodyStyle,
+      forceRender: true
     }, child);
   })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TabBar, {
     activeKey: activeKey,

package/package.json

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