@lemon-fe/components 1.5.7-alpha.0 → 1.5.7-alpha.2

package/es/data-grid/components/selected.d.ts

@@ -1,7 +1,13 @@
-import React from 'react';
+import { type ReactNode, type ReactElement } from 'react';
 import { type Selection } from '../utils';
-declare const _default: React.NamedExoticComponent<{
-    selection: Selection<any>;
+declare type SelectedProps<T> = {
+    selection: Selection<T>;
     onClear: () => void;
-}>;
-export default _default;
+    renderSelected?: (params: {
+        selectedKeys: string[];
+        selectedRows: T[];
+        clearNode: ReactElement;
+    }) => ReactNode;
+};
+declare const Selected: <T = unknown>(props: SelectedProps<T>) => ReactElement | null;
+export default Selected;

package/es/data-grid/components/selected.js

@@ -4,28 +4,54 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 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(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import React, { useEffect, useState, memo } from 'react';
+import React, { useEffect, useState, memo, useMemo } from 'react';
 import { useLocaleReceiver } from "../../locale-receiver";
 import { parseLocalTemplate } from "../../locale/locale";
 import { prefix } from "../utils";
-export default /*#__PURE__*/memo(function Selected(props) {
+function SelectedImpl(props) {
   var selection = props.selection,
-    onClear = props.onClear;
-  var _useState = useState(selection.getKeys()),
+    onClear = props.onClear,
+    renderSelected = props.renderSelected;
+  var _useState = useState(function () {
+      return selection.getSelected();
+    }),
     _useState2 = _slicedToArray(_useState, 2),
-    keys = _useState2[0],
-    setKeys = _useState2[1];
+    selected = _useState2[0],
+    setSelected = _useState2[1];
   var _useLocaleReceiver = useLocaleReceiver('DataGrid'),
     _useLocaleReceiver2 = _slicedToArray(_useLocaleReceiver, 1),
     dataGridLocale = _useLocaleReceiver2[0];
   useEffect(function () {
-    return selection.listen(setKeys);
-  }, []);
-  return keys.length > 0 ? /*#__PURE__*/React.createElement("span", {
-    className: prefix('selected')
-  }, parseLocalTemplate(dataGridLocale.selectedTipText, {
-    length: keys.length
-  }), /*#__PURE__*/React.createElement("a", {
+    return selection.listen(function () {
+      setSelected(new Map(selection.getSelected()));
+    });
+  }, [selection]);
+  var _useMemo = useMemo(function () {
+      var keys = [];
+      var rows = [];
+      selected.forEach(function (val, key) {
+        if (val) {
+          rows.push(val);
+        }
+        keys.push(key);
+      });
+      return [keys, rows];
+    }, [selected]),
+    _useMemo2 = _slicedToArray(_useMemo, 2),
+    selectedKeys = _useMemo2[0],
+    selectedRows = _useMemo2[1];
+  var clearNode = /*#__PURE__*/React.createElement("a", {
     onClick: onClear
-  }, dataGridLocale.clearSelectedText)) : null;
-});
+  }, dataGridLocale.clearSelectedText);
+  return selected.size > 0 ? /*#__PURE__*/React.createElement("span", {
+    className: prefix('selected')
+  }, renderSelected ? renderSelected({
+    clearNode: clearNode,
+    selectedKeys: selectedKeys,
+    selectedRows: selectedRows
+  }) : /*#__PURE__*/React.createElement(React.Fragment, null, clearNode, parseLocalTemplate(dataGridLocale.selectedTipText, {
+    length: selected.size
+  }))) : null;
+}
+var Selected = /*#__PURE__*/memo(SelectedImpl);
+export default Selected;

package/es/data-grid/index.js

@@ -114,6 +114,7 @@ var defaultColDef = {
   initialWidth: 140,
   suppressMenu: true
 };
+var ESTIMATE_INITIAL_COLUMN_MAX_WIDTH = 400;
 var defaultComponents = {
   agColumnHeader: HeaderRenderer,
   agColumnGroupHeader: HeaderRenderer,
@@ -1094,7 +1095,7 @@ var InternalDataGrid = /*#__PURE__*/function (_Component) {
               opts.headerName = title.toString();
             }
             if (enableEstimateInitialColumnWidth && opts.headerName && !keepInitialWidthWhenEstimate) {
-              opts.initialWidth = getTextWidth(opts.headerName) * 14 + 36 + (opts.headerComponentParams !== undefined ? 24 : 0);
+              opts.initialWidth = Math.min(getTextWidth(opts.headerName) * 14 + 36 + (opts.headerComponentParams !== undefined ? 24 : 0), ESTIMATE_INITIAL_COLUMN_MAX_WIDTH);
             }
 
             // render
@@ -1862,7 +1863,8 @@ var InternalDataGrid = /*#__PURE__*/function (_Component) {
           footer.push( /*#__PURE__*/React.createElement(Selected, {
             selection: this.selected,
             onClear: this.handleClearSelected,
-            key: "selection"
+            key: "selection",
+            renderSelected: rowSelection.renderSelected
           }));
         }
       } else {

package/es/data-grid/index.less

@@ -340,7 +340,7 @@
     color: #333;
 
     a {
-      margin-left: @space-h;
+      margin-right: @space-h;
     }
   }
 

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

@@ -87,6 +87,20 @@ export declare type RowSelectionType<T = any> = {
      * @description 是否按页面显示的数据进行全选
      */
     headerCheckboxSelectionFilteredOnly?: boolean;
+    /**
+     * @description 自定义已选结果显示
+     * @param params.selectedKeys 当前选中的行 key 列表（包含没有加载数据的 key）
+     * @param params.selectedRows 当前已有数据的选中行列表（已过滤掉为 null 的项）
+     * @param params.clearNode 触发清空选中项的交互节点
+     * 为什么选择 keys 和 rows 分成两个属性：
+     * 因为 rowSelection 的初始 selectedRowKeys 可能会被赋值，此时部分已选择项由于没有数据都是 null，
+     * 为了便于外部处理，selectedRows 中已经过滤掉了这些项。
+     */
+    renderSelected?: (params: {
+        selectedKeys: string[];
+        selectedRows: T[];
+        clearNode: ReactElement;
+    }) => ReactNode;
 };
 export declare type PaginationType = {
     current?: number;

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

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

package/es/data-grid/utils/index.js

@@ -116,21 +116,20 @@ 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);
     _defineProperty(this, "record", void 0);
     _defineProperty(this, "keys", void 0);
     _defineProperty(this, "dirty", false);
     _defineProperty(this, "observers", new Set());
-    this.record = new Map(_keys.map(function (key) {
+    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 = [];
@@ -141,7 +140,7 @@ export var Selection = /*#__PURE__*/function () {
       this.keys = keys;
       this.dirty = false;
       _toConsumableArray(this.observers).forEach(function (cb) {
-        return cb(_this2.keys);
+        return cb();
       });
       return [keys, values];
     }
@@ -185,6 +184,8 @@ export var Selection = /*#__PURE__*/function () {
       if (this.dirty) {
         this.flush();
       }
+
+      /** 提高比较的效率，浅比较虽然比较安全，但是大部分场景这样足矣 */
       return this.keys === keys;
     }
   }, {
@@ -193,22 +194,24 @@ export var Selection = /*#__PURE__*/function () {
       return this.dirty;
     }
   }, {
-    key: "getKeys",
-    value: function getKeys() {
-      return this.keys;
+    key: "getSelected",
+    value: function getSelected() {
+      return this.record;
     }
   }, {
     key: "forEach",
     value: function forEach(cb) {
-      this.keys.forEach(cb);
+      this.record.forEach(function (val, key) {
+        return cb(key);
+      });
     }
   }, {
     key: "listen",
     value: function listen(cb) {
-      var _this3 = this;
+      var _this2 = this;
       this.observers.add(cb);
       return function () {
-        _this3.observers.delete(cb);
+        _this2.observers.delete(cb);
       };
     }
   }]);

package/es/data-grid/utils/text-width.js

@@ -21,13 +21,13 @@ export function getTextWidth(text) {
         continue;
       }
 
-      // 泰文、高棉文、缅甸文、老挝文；马来文 / 英文使用拉丁字符规则
+      // 泰文、高棉文、缅甸文、老挝文；马来文 / 越南语 / 英文使用拉丁字符规则
       if (isSEAComplexScript(code)) {
         width += 1;
         continue;
       }
 
-      // 拉丁字母、数字、标点
+      // 拉丁字母、数字、标点；覆盖英文、马来文、越南语预组合字符
       width += 0.6;
     }
   } catch (err) {
@@ -64,7 +64,7 @@ function isSEAComplexScript(code) {
 }
 function isCombiningMark(code) {
   return code >= 0x0300 && code <= 0x036f ||
-  // Combining Diacritical Marks
+  // Vietnamese and other Latin combining marks
   code === 0x0e31 || code >= 0x0e34 && code <= 0x0e3a || code >= 0x0e47 && code <= 0x0e4e ||
   // Thai vowels and tones
   code === 0x0eb1 || code >= 0x0eb4 && code <= 0x0ebc || code >= 0x0ec8 && code <= 0x0ece ||

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lemon-fe/components",
-  "version": "1.5.7-alpha.0",
+  "version": "1.5.7-alpha.2",
   "description": "> TODO: description",
   "homepage": "",
   "license": "MIT",
@@ -58,5 +58,5 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },
-  "gitHead": "f9d9bc687268ce21388513f69bda29c79f7aa6b6"
+  "gitHead": "f4344479e739f297b7901b3ed3f3d91e45b5074a"
 }