@lemon-fe/kits 1.0.0-84 → 1.0.0-85

package/es/components/Actions/index.js

@@ -47,7 +47,7 @@ function Actions(props) {
     style: style
   }, /*#__PURE__*/React.createElement(Space, {
     direction: "horizontal",
-    size: 12
+    size: 8
   }, visibleBtns.map(function (item, index) {
     if (item === null) {
       return item;

package/es/components/DataGrid/cell-editors/Row.d.ts

@@ -7,6 +7,7 @@ export declare class RowEditorData<T> {
     constructor(data: T);
     getValue(): T;
 }
+export declare type RowEditorActionType = 'stop' | 'next';
 export interface RowEditorParams<T = any, K = any> {
     suppressEnterEvent?: boolean;
     isCancelAfterEnd?: (newValue: T, data: T) => boolean;
@@ -15,8 +16,8 @@ export interface RowEditorParams<T = any, K = any> {
             select?: () => void;
             focus?: () => void;
         } | null>;
-        onChange: (val: Partial<T>, action?: 'stop' | 'next') => void;
+        onChange: (val: Partial<T>, action?: RowEditorActionType) => void;
     }) => ReactElement | null;
 }
-declare const _default: React.ForwardRefExoticComponent<ICellEditorParams<any, any> & RowEditorParams<any, any> & React.RefAttributes<ICellEditorReactComp>>;
+declare const _default: React.ForwardRefExoticComponent<ICellEditorParams<any, any, any> & RowEditorParams<any, any> & React.RefAttributes<ICellEditorReactComp>>;
 export default _default;

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

@@ -69,6 +69,7 @@ export default class DataGrid<TData extends Record<string, any>> extends Compone
     private isClientMode;
     private clearReadyQueue;
     private afterReady;
+    private isPreserveSelected;
     private updateRowData;
     private getDataFromServer;
     private pagination;
@@ -97,5 +98,6 @@ export default class DataGrid<TData extends Record<string, any>> extends Compone
     private getMemoizedColumnTypes;
     private getMemoizedComponents;
     private getMemoizedDetailCellParams;
+    private getRowStyle;
     render(): JSX.Element;
 }

package/es/components/DataGrid/index.js

@@ -348,6 +348,19 @@ var DataGrid = /*#__PURE__*/function (_Component) {
       };
     }));
 
+    _defineProperty(_assertThisInitialized(_this), "getRowStyle", function (params) {
+      var getRowStyle = _this.props.getRowStyle;
+      var style = getRowStyle === null || getRowStyle === void 0 ? void 0 : getRowStyle(params);
+
+      if (params.node.rowPinned === 'bottom') {
+        return _objectSpread({
+          fontWeight: 'bold'
+        }, style);
+      }
+
+      return style;
+    });
+
     _this.state = _objectSpread({
       colDefs: _this.getColumDefs(),
       loading: props.loading || false
@@ -829,6 +842,21 @@ var DataGrid = /*#__PURE__*/function (_Component) {
         this.readyQueue.push(cb);
       }
     }
+  }, {
+    key: "isPreserveSelected",
+    value: function isPreserveSelected() {
+      var rowSelection = this.props.rowSelection;
+
+      if (rowSelection === undefined) {
+        return false;
+      }
+
+      if (rowSelection.preserveSelectedRowKeys === undefined) {
+        return !this.isClientMode();
+      }
+
+      return rowSelection.preserveSelectedRowKeys;
+    }
   }, {
     key: "updateRowData",
     value: function updateRowData() {
@@ -840,21 +868,45 @@ var DataGrid = /*#__PURE__*/function (_Component) {
 
         _this4.api.setRowData(data);
 
-        _this4.api.forEachNode(function (node) {
-          if (node.id && _this4.selected.has(node.id)) {
-            var rowData = _this4.selected.get(node.id);
+        if (_this4.isPreserveSelected()) {
+          _this4.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.data !== undefined && rowData !== node.data) {
+                _this4.selected.set(node.id, node.data);
+              }
+
+              if (!node.isSelected()) {
+                node.setSelected(true, false, true);
+              }
             }
+          });
+        } else {
+          var keys = new Set(data.map(function (item) {
+            return _this4.getRowId({
+              data: item
+            });
+          }));
 
-            node.setSelected(true, false, true);
-          }
-        });
+          _this4.selected.forEach(function (id) {
+            if (!keys.has(id)) {
+              _this4.selected.delete(id);
+            } else {
+              var node = _this4.api.getRowNode(id);
 
-        _this4.api.dispatchEvent({
-          type: 'selectionChanged'
-        });
+              if (node !== undefined && !node.isSelected()) {
+                node.setSelected(true, false, true);
+              }
+            }
+          });
+        }
+
+        if (_this4.selected.isDirty()) {
+          _this4.api.dispatchEvent({
+            type: 'selectionChanged'
+          });
+        }
       });
     }
   }, {
@@ -1173,7 +1225,44 @@ var DataGrid = /*#__PURE__*/function (_Component) {
           total = _this$state2.total,
           loading = _this$state2.loading;
       var mPage = _typeof(pagination) === 'object' ? pagination : {};
-      var enableSelection = rowSelection !== undefined;
+      var enableFooterSelection = this.isPreserveSelected();
+      var footer = [];
+
+      if (enableFooterSelection) {
+        footer.push( /*#__PURE__*/React.createElement(Selected, {
+          selection: this.selected,
+          onClear: this.handleClearSelected,
+          key: "selection"
+        }));
+      }
+
+      if (enablePagination) {
+        footer.push( /*#__PURE__*/React.createElement(Pagination, _extends({
+          key: "pagination",
+          size: "small",
+          showPrevNextJumpers: true,
+          showSizeChanger: true,
+          showQuickJumper: true,
+          showTotal: function showTotal(val) {
+            return "\u5171".concat(val, "\u6761");
+          },
+          defaultCurrent: 1,
+          defaultPageSize: 20,
+          pageSizeOptions: ['10', '20', '50', '100']
+        }, mPage, {
+          pageSize: pageSize,
+          current: page,
+          total: total,
+          onChange: function onChange(curr, limit) {
+            _this10.pagination(curr, limit);
+
+            if (mPage.onChange) {
+              mPage.onChange(curr, limit);
+            }
+          }
+        })));
+      }
+
       return /*#__PURE__*/React.createElement(GridStoreContext.Provider, {
         value: this.store
       }, /*#__PURE__*/React.createElement("div", {
@@ -1196,6 +1285,7 @@ var DataGrid = /*#__PURE__*/function (_Component) {
         pinnedBottomRowData: Array.isArray(summary) ? summary : summary ? [summary] : undefined,
         masterDetail: detailCell !== undefined
       }, this.getMemoizedDetailCellParams(detailCell, detailCellRendererParams), restProps, {
+        getRowStyle: this.getRowStyle,
         stopEditingWhenCellsLoseFocus: false,
         onRowDataUpdated: this.rowDataUpdated,
         onCellValueChanged: this.cellValueChanged,
@@ -1206,38 +1296,13 @@ var DataGrid = /*#__PURE__*/function (_Component) {
         getRowId: this.getRowId,
         onGridReady: this.init,
         context: context,
-        rowSelection: enableSelection ? rowSelection.type !== 'radio' ? 'multiple' : 'single' : undefined,
+        rowSelection: rowSelection !== undefined ? rowSelection.type !== 'radio' ? 'multiple' : 'single' : undefined,
         components: this.getMemoizedComponents(componentsProp),
         defaultColDef: this.getMemoizedDefaultColDef(defaultColDefProp),
         columnTypes: this.getMemoizedColumnTypes(columnTypesProp)
-      })), /*#__PURE__*/React.createElement("div", {
+      })), footer.length > 0 && /*#__PURE__*/React.createElement("div", {
         className: prefix('bottom')
-      }, /*#__PURE__*/React.createElement("div", null, enableSelection ? /*#__PURE__*/React.createElement(Selected, {
-        selection: this.selected,
-        onClear: this.handleClearSelected
-      }) : null), enablePagination && /*#__PURE__*/React.createElement(Pagination, _extends({
-        size: "small",
-        showPrevNextJumpers: true,
-        showSizeChanger: true,
-        showQuickJumper: true,
-        showTotal: function showTotal(val) {
-          return "\u5171".concat(val, "\u6761");
-        },
-        defaultCurrent: 1,
-        defaultPageSize: 20,
-        pageSizeOptions: ['10', '20', '50', '100']
-      }, mPage, {
-        pageSize: pageSize,
-        current: page,
-        total: total,
-        onChange: function onChange(curr, limit) {
-          _this10.pagination(curr, limit);
-
-          if (mPage.onChange) {
-            mPage.onChange(curr, limit);
-          }
-        }
-      }))), loading && /*#__PURE__*/React.createElement(Spin, {
+      }, footer), loading && /*#__PURE__*/React.createElement(Spin, {
         className: prefix('spin')
       })));
     }

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

@@ -55,6 +55,10 @@ export declare type ColsType<T> = (ColType<T> | ColGroupType<T>)[];
 export declare type RowSelectionType<T = any> = {
     type?: 'checkbox' | 'radio';
     selectedRowKeys?: string[];
+    /**
+     * @description 数据源更改是否保留所选项，远程模式默认开启，非远程模式默认关闭
+     */
+    preserveSelectedRowKeys?: boolean;
     defaultSelectedRowKeys?: string[];
     fixed?: boolean;
     checkboxSelection?: boolean;

package/es/components/DataGrid/utils.js

@@ -251,10 +251,10 @@ export var Selection = /*#__PURE__*/function () {
 }();
 export var columnTypes = {
   datetime: {
-    initialWidth: 159
+    initialWidth: 160
   },
   date: {
-    initialWidth: 129,
+    initialWidth: 130,
     valueFormatter: function valueFormatter(_ref) {
       var value = _ref.value;
 
@@ -293,6 +293,11 @@ export var columnTypes = {
     cellRenderer: CellIndexRender,
     initialWidth: 45,
     suppressMenu: true,
-    cellClass: prefix('cell-align-center')
+    valueGetter: function valueGetter(_ref3) {
+      var node = _ref3.node;
+      return node === null || node === void 0 ? void 0 : node.rowIndex;
+    },
+    cellClass: prefix('cell-align-center'),
+    sortable: false
   }
 };

package/es/components/DurationPicker/index.js

@@ -70,7 +70,7 @@ var defaultOptions = [{
 }];
 
 function DurationPicker(props) {
-  var _result$type, _result$option, _result$option2;
+  var _result$type, _result$option;
 
   var _props$prefixCls = props.prefixCls,
       prefixCls = _props$prefixCls === void 0 ? PREFIX_CLS : _props$prefixCls,
@@ -145,7 +145,7 @@ function DurationPicker(props) {
       var newDurationPickerValue = _objectSpread(_objectSpread({}, value), {}, {
         dates: item.value !== null ? item.value().map(function (date) {
           return date.format(dateFormat);
-        }) : undefined,
+        }) : value.dates,
         option: item.label
       });
 
@@ -205,8 +205,7 @@ function DurationPicker(props) {
     className: "".concat(prefixCls, "-duration-option")
   }, (_result$option = result.option) === null || _result$option === void 0 ? void 0 : _result$option.label, /*#__PURE__*/React.createElement(Down, null))), /*#__PURE__*/React.createElement(DatePicker.RangePicker, _extends({
     value: result.dates,
-    onChange: handleChangeDates,
-    disabled: ((_result$option2 = result.option) === null || _result$option2 === void 0 ? void 0 : _result$option2.value) !== null
+    onChange: handleChangeDates
   }, restProps))));
 }
 

package/es/components/Filter/index.js

@@ -42,9 +42,9 @@ import classNames from 'classnames';
 import Icons from "../Icons";
 import DurationPicker from "../DurationPicker";
 import FormLayout from "../FormLayout";
-import { PREFIX_CLS } from "../../constants";
 import TabBar from "../TabBar";
 import Dropdown from "../Dropdown";
+import { prefixClassName } from "../utils";
 var components = [{
   type: 'input',
   render: function render(item) {
@@ -121,7 +121,7 @@ function Filter(props) {
       simple = props.simple,
       _props$defaultCollaps = props.defaultCollapsed,
       defaultCollapsed = _props$defaultCollaps === void 0 ? true : _props$defaultCollaps;
-  var prefixCls = "".concat(PREFIX_CLS, "-filter");
+  var prefix = prefixClassName('filter');
   var emptyValue = useMemo(function () {
     return Object.fromEntries(data.map(function (item) {
       return [item.key, undefined];
@@ -413,31 +413,45 @@ function Filter(props) {
       return [getSet(result), false];
     }
 
-    var btnsWidth = simple ? 208 : 248;
+    var btnWidth = simple ? 204 : 240;
     var btnsVisible = false;
-    var size = 0;
-    var end = 0;
+    var end = result.length;
+    var row = 0;
+    var space = width;
 
     for (var i = 0; i < result.length; i++) {
       var _compMap$get;
 
       var item = result[i];
       var itemWidth = getColStyle(item.colSpan || (item.type ? (_compMap$get = compMap.get(item.type)) === null || _compMap$get === void 0 ? void 0 : _compMap$get.colSpan : 1)).width;
-      size += itemWidth;
 
-      if (size > width - btnsWidth) {
+      if (space <= itemWidth) {
+        row += 1;
+
+        if (space < width) {
+          if (itemWidth > width) {
+            row += 1;
+            space = width;
+          } else {
+            space = width - itemWidth;
+          }
+        }
+      } else {
+        space -= itemWidth;
+      }
+
+      if (btnWidth > space && row === 1 || row === 2) {
         btnsVisible = true;
+        end = i;
         break;
       }
-
-      end = i;
     }
 
     if (!collapsed) {
       return [getSet(result), btnsVisible];
     }
 
-    return [getSet(result.slice(0, end + 1)), btnsVisible];
+    return [getSet(result.slice(0, end)), btnsVisible];
   }, [data, width, collapsed, simple, activeKeys]),
       _useMemo2 = _slicedToArray(_useMemo, 2),
       cols = _useMemo2[0],
@@ -450,7 +464,7 @@ function Filter(props) {
       }
     }
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames(prefixCls, _defineProperty({}, "".concat(prefixCls, "-simple"), simple)),
+    className: classNames(prefix(), _defineProperty({}, prefix('simple'), simple)),
     style: style
   }, /*#__PURE__*/React.createElement(Modal, {
     destroyOnClose: true,
@@ -485,11 +499,16 @@ function Filter(props) {
     onTabClick: function onTabClick(_, index) {
       return handleTabChange(index);
     },
-    className: "".concat(prefixCls, "-tab-bar")
+    className: prefix('tab-bar')
   }), /*#__PURE__*/React.createElement(FormLayout, {
-    direction: "row"
+    direction: "row",
+    layout: "flex",
+    style: !width ? {
+      maxHeight: 72,
+      overflowY: 'hidden'
+    } : undefined
   }, data.map(function (item) {
-    var className = classNames("".concat(prefixCls, "-form-item"), {
+    var className = classNames(prefix('form-item'), {
       hidden: !cols.has(item.key) ? true : false
     });
 
@@ -521,9 +540,9 @@ function Filter(props) {
       initialValue: item.initialValue
     }, target.render(item)));
   }), /*#__PURE__*/React.createElement("div", {
-    className: "".concat(prefixCls, "-btns")
+    className: prefix('btns')
   }, /*#__PURE__*/React.createElement("div", {
-    className: "".concat(prefixCls, "-submit")
+    className: prefix('submit')
   }, /*#__PURE__*/React.createElement(Button, {
     type: "primary",
     htmlType: "submit"
@@ -542,7 +561,7 @@ function Filter(props) {
       fill: "none",
       fillRule: "evenodd"
     })),
-    className: "".concat(prefixCls, "-reset ").concat(prefixCls, "-btn"),
+    className: "".concat(prefix('reset'), " ").concat(prefix('btn')),
     onClick: handleReset
   }) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Dropdown, {
     actions: [{
@@ -559,22 +578,22 @@ function Filter(props) {
     icon: /*#__PURE__*/React.createElement(Icons.More, null)
   })), /*#__PURE__*/React.createElement(Popover, {
     trigger: "click",
-    overlayClassName: "".concat(prefixCls, "-popover"),
+    overlayClassName: prefix('popover'),
     destroyTooltipOnHide: true,
     content: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Input, {
       placeholder: "\u641C\u7D22\u9009\u9879",
       allowClear: true,
-      className: "".concat(prefixCls, "-items-search"),
+      className: prefix('items-search'),
       prefix: /*#__PURE__*/React.createElement(Icons.Search, null),
       onChange: function onChange(e) {
         return handleChangeKeywords(e.currentTarget.value);
       }
     }), /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-items")
+      className: prefix('items')
     }, items.length > 0 ? items.map(function (item) {
       return /*#__PURE__*/React.createElement("div", {
         key: item.key,
-        className: "".concat(prefixCls, "-item")
+        className: prefix('item')
       }, /*#__PURE__*/React.createElement(Checkbox, {
         checked: activeKeys.has(item.key),
         onChange: function onChange(e) {
@@ -586,7 +605,7 @@ function Filter(props) {
     }))),
     placement: "bottomRight"
   }, /*#__PURE__*/React.createElement(Button, {
-    className: "".concat(prefixCls, "-btn"),
+    className: prefix('btn'),
     onClick: function onClick() {
       setKeywords('');
     },
@@ -601,7 +620,7 @@ function Filter(props) {
       });
     },
     type: "link",
-    className: "".concat(prefixCls, "-collapse")
+    className: prefix('collapse')
   }, collapsed ? '高级搜索' : '收起搜索', /*#__PURE__*/React.createElement("svg", {
     width: "10",
     height: "10",

package/package.json

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