@lemon-fe/kits 1.0.0-67 → 1.0.0-68

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { type Selection } from '../utils';
+declare const _default: React.NamedExoticComponent<{
+    selection: Selection<any>;
+    onClear: () => void;
+}>;
+export default _default;

package/es/components/DataGrid/components/Selected.js

@@ -0,0 +1,32 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import React, { useEffect, useState, memo } from 'react';
+import { prefix } from "../utils";
+export default /*#__PURE__*/memo(function Selected(props) {
+  var selection = props.selection,
+      onClear = props.onClear;
+
+  var _useState = useState(selection.getKeys()),
+      _useState2 = _slicedToArray(_useState, 2),
+      keys = _useState2[0],
+      setKeys = _useState2[1];
+
+  useEffect(function () {
+    return selection.listen(setKeys);
+  }, []);
+  return /*#__PURE__*/React.createElement("span", {
+    className: prefix('selected')
+  }, "\u5DF2\u9009", keys.length, "\u6761 ", /*#__PURE__*/React.createElement("a", {
+    onClick: onClear
+  }, "\u6E05\u7A7A\u5DF2\u9009"));
+});

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

@@ -91,7 +91,7 @@ export default class DataGrid<TData extends Record<string, any>> extends Compone
     private blurTimer;
     private handleBlur;
     private handleFocus;
-    private unsort;
+    private handleClearSelected;
     private getMemoizedDefaultColDef;
     private getMemoizedColumnTypes;
     private getMemoizedComponents;

package/es/components/DataGrid/index.js

@@ -89,6 +89,7 @@ import SelectEditor from "./cell-editors/Select";
 import RowEditor, { RowEditorData } from "./cell-editors/Row";
 import EditorWrapper from "./cell-editors/Wrapper";
 import memoizeOne from 'memoize-one';
+import Selected from "./components/Selected";
 ModuleRegistry.registerModules([ClientSideRowModelModule, RowGroupingModule, InfiniteRowModelModule, ClipboardModule, MenuModule, SideBarModule, ColumnsToolPanelModule], false);
 var defaultColDef = {
   resizable: true,
@@ -104,6 +105,10 @@ var defaultComponents = {
   'row-editor': RowEditor
 };
 
+function unsort() {
+  return 0;
+}
+
 var DataGrid = /*#__PURE__*/function (_Component) {
   _inherits(DataGrid, _Component);
 
@@ -293,13 +298,21 @@ var DataGrid = /*#__PURE__*/function (_Component) {
       }
     });
 
-    _defineProperty(_assertThisInitialized(_this), "unsort", function () {
-      return 0;
+    _defineProperty(_assertThisInitialized(_this), "handleClearSelected", function () {
+      _this.selected.clear();
+
+      _this.api.getSelectedNodes().forEach(function (node) {
+        node.setSelected(false, false, true);
+      });
+
+      _this.api.dispatchEvent({
+        type: 'selectionChanged'
+      });
     });
 
     _defineProperty(_assertThisInitialized(_this), "getMemoizedDefaultColDef", memoizeOne(function (defaultColDefProp) {
       return _objectSpread(_objectSpread({
-        comparator: _this.isClientMode() ? undefined : _this.unsort
+        comparator: _this.isClientMode() ? undefined : unsort
       }, defaultColDef), defaultColDefProp);
     }));
 
@@ -1112,6 +1125,7 @@ var DataGrid = /*#__PURE__*/function (_Component) {
           total = _this$state2.total,
           loading = _this$state2.loading;
       var mPage = _typeof(pagination) === 'object' ? pagination : {};
+      var enableSelection = rowSelection !== undefined;
       return /*#__PURE__*/React.createElement(GridStoreContext.Provider, {
         value: this.store
       }, /*#__PURE__*/React.createElement("div", {
@@ -1144,13 +1158,16 @@ var DataGrid = /*#__PURE__*/function (_Component) {
         getRowId: this.getRowId,
         onGridReady: this.init,
         context: context,
-        rowSelection: rowSelection !== undefined ? rowSelection.type !== 'radio' ? 'multiple' : 'single' : undefined,
+        rowSelection: enableSelection ? rowSelection.type !== 'radio' ? 'multiple' : 'single' : undefined,
         components: this.getMemoizedComponents(componentsProp),
         defaultColDef: this.getMemoizedDefaultColDef(defaultColDefProp),
         columnTypes: this.getMemoizedColumnTypes(columnTypesProp)
       })), /*#__PURE__*/React.createElement("div", {
         className: prefix('bottom')
-      }, /*#__PURE__*/React.createElement("div", null), enablePagination && /*#__PURE__*/React.createElement(Pagination, _extends({
+      }, /*#__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,

package/es/components/DataGrid/index.less

@@ -30,11 +30,20 @@
 
   &-bottom {
     display: flex;
+    align-items: center;
     justify-content: space-between;
     margin-top: @space-v;
     background-color: var(--ag-background-color);
   }
 
+  &-selected {
+    color: #a5a5a5;
+
+    a {
+      margin-left: @space-h;
+    }
+  }
+
   &-operator {
     position: absolute;
     top: 4px;

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

@@ -31,15 +31,19 @@ export declare class Selection<T> {
     private record;
     private keys;
     private dirty;
+    private observers;
     constructor(keys?: string[]);
+    flush(): readonly [string[], T[]];
     get(id: string): T | undefined;
     has(id: string): boolean;
     set(id: string, data: T): void;
     delete(id: string): void;
+    clear(): void;
+    clone(data: Map<string, T>): void;
     isSameKeys(keys: string[]): boolean;
     isDirty(): boolean;
-    flush(): readonly [string[], T[]];
+    getKeys(): string[];
     forEach(cb: (key: string) => void): void;
-    clone(data: Map<string, T>): void;
+    listen(cb: (keys: string[]) => void): () => void;
 }
 export declare const columnTypes: Record<string, ColDef>;

package/es/components/DataGrid/utils.js

@@ -137,7 +137,7 @@ export var Store = /*#__PURE__*/function () {
 }();
 export var Selection = /*#__PURE__*/function () {
   function Selection() {
-    var keys = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    var _keys = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
 
     _classCallCheck(this, Selection);
 
@@ -147,13 +147,37 @@ export var Selection = /*#__PURE__*/function () {
 
     _defineProperty(this, "dirty", false);
 
-    this.record = new Map(keys.map(function (key) {
+    _defineProperty(this, "observers", new Set());
+
+    this.record = new Map(_keys.map(function (key) {
       return [key, null];
     }));
-    this.keys = keys;
+    this.keys = _keys;
   }
 
   _createClass(Selection, [{
+    key: "flush",
+    value: function flush() {
+      var _this2 = this;
+
+      var result = _toConsumableArray(this.record);
+
+      var keys = [];
+      var values = [];
+      result.forEach(function (item) {
+        keys.push(item[0]);
+        values.push(item[1]);
+      });
+      this.keys = keys;
+      this.dirty = false;
+
+      _toConsumableArray(this.observers).forEach(function (cb) {
+        return cb(_this2.keys);
+      });
+
+      return [keys, values];
+    }
+  }, {
     key: "get",
     value: function get(id) {
       return this.record.get(id);
@@ -175,6 +199,18 @@ export var Selection = /*#__PURE__*/function () {
       this.record.delete(id);
       this.dirty = true;
     }
+  }, {
+    key: "clear",
+    value: function clear() {
+      this.record = new Map();
+      this.dirty = true;
+    }
+  }, {
+    key: "clone",
+    value: function clone(data) {
+      this.record = data;
+      this.flush();
+    }
   }, {
     key: "isSameKeys",
     value: function isSameKeys(keys) {
@@ -190,19 +226,9 @@ export var Selection = /*#__PURE__*/function () {
       return this.dirty;
     }
   }, {
-    key: "flush",
-    value: function flush() {
-      var result = _toConsumableArray(this.record);
-
-      var keys = [];
-      var values = [];
-      result.forEach(function (item) {
-        keys.push(item[0]);
-        values.push(item[1]);
-      });
-      this.keys = keys;
-      this.dirty = false;
-      return [keys, values];
+    key: "getKeys",
+    value: function getKeys() {
+      return this.keys;
     }
   }, {
     key: "forEach",
@@ -210,10 +236,14 @@ export var Selection = /*#__PURE__*/function () {
       this.keys.forEach(cb);
     }
   }, {
-    key: "clone",
-    value: function clone(data) {
-      this.record = data;
-      this.flush();
+    key: "listen",
+    value: function listen(cb) {
+      var _this3 = this;
+
+      this.observers.add(cb);
+      return function () {
+        _this3.observers.delete(cb);
+      };
     }
   }]);
 

package/package.json

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