@lemon-fe/components 1.5.6 → 1.5.7-alpha.1

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

@@ -57,6 +57,7 @@ import CellRenderer from "./renderer/cell-renderer";
 import DetailCellRenderer from "./renderer/detali-cell-renderer";
 import HeaderRenderer from "./renderer/header-renderer";
 import { prefix, getColField, isColumn, withSyncRender, Store, Selection, getDefaultColumnTypes } from "./utils";
+import { getTextWidth } from "./utils/text-width";
 import { GridApi, ColumnApi } from 'ag-grid-community';
 import 'ag-grid-enterprise';
 import { AgGridReact } from 'ag-grid-react';
@@ -1052,7 +1053,9 @@ var InternalDataGrid = /*#__PURE__*/function (_Component) {
         columns = _this$props8$columns === void 0 ? [] : _this$props8$columns,
         rowActions = _this$props8.rowActions,
         rowSelection = _this$props8.rowSelection,
-        locale = _this$props8.locale;
+        locale = _this$props8.locale,
+        enableEstimateInitialColumnWidth = _this$props8.enableEstimateInitialColumnWidth,
+        keepInitialWidthWhenEstimate = _this$props8.keepInitialWidthWhenEstimate;
       var leafColIds = [];
       var groups = new Map();
       var map = function map(cols) {
@@ -1090,6 +1093,9 @@ var InternalDataGrid = /*#__PURE__*/function (_Component) {
             } else if (title !== undefined) {
               opts.headerName = title.toString();
             }
+            if (enableEstimateInitialColumnWidth && opts.headerName && !keepInitialWidthWhenEstimate) {
+              opts.initialWidth = getTextWidth(opts.headerName) * 14 + 36 + (opts.headerComponentParams !== undefined ? 24 : 0);
+            }
 
             // render
             if (render !== undefined) {
@@ -1856,7 +1862,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;
@@ -282,4 +296,12 @@ export interface DataGridProps<TData> extends Omit<AgGridReactProps<TData>, 'row
     defaultColDef?: ColDef<TData> & {
         useValueFormatterForExport?: boolean;
     };
+    /**
+     * @depscription 启用预估初始列宽 启用后根据字符长度计算宽度
+     */
+    enableEstimateInitialColumnWidth?: boolean;
+    /**
+     * @depscription 与enableEstimateInitialColumnWidth搭配使用，如果col传入了initialWidth，则不会进行预估初始列宽设置
+     */
+    keepInitialWidthWhenEstimate?: boolean;
 }

package/es/data-grid/{utils.d.ts → utils/index.d.ts}

@@ -1,5 +1,5 @@
-import type { DataGridLocale } from './locale/locale';
-import type { ColType, ColGroupType, PathType } from './typings';
+import type { DataGridLocale } from '../locale/locale';
+import type { ColType, ColGroupType, PathType } from '../typings';
 import { Subject } from '@lemon-fe/utils';
 import type { ColDef, ColGroupDef } from 'ag-grid-community';
 export declare const prefix: (val?: string | undefined) => string;
@@ -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.js → utils/index.js}

@@ -13,9 +13,9 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-import { prefixClassName } from "../utils";
-import CellDeleteRender from "./renderer/cell-delete-renderer";
-import CellIndexRender from "./renderer/cell-index-renderer";
+import { prefixClassName } from "../../utils";
+import CellDeleteRender from "../renderer/cell-delete-renderer";
+import CellIndexRender from "../renderer/cell-index-renderer";
 import { Subject } from '@lemon-fe/utils';
 import { get as _get, set as _set } from 'lodash';
 import moment from 'moment';
@@ -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.d.ts

@@ -0,0 +1 @@
+export declare function getTextWidth(text: string): number;

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

@@ -0,0 +1,79 @@
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+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; }
+export function getTextWidth(text) {
+  var width = 0;
+  var _iterator = _createForOfIteratorHelper(text),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var char = _step.value;
+      var code = char.codePointAt(0);
+
+      // 东南亚文字中的组合音标 / 附加符号不单独占宽
+      if (isCombiningMark(code)) {
+        continue;
+      }
+
+      // CJK 中文、日文、韩文及其全角标点 / 符号
+      if (isCJK(code) || isCJKSymbol(code) || isFullWidthSymbol(code)) {
+        width += 1;
+        continue;
+      }
+
+      // 泰文、高棉文、缅甸文、老挝文；马来文 / 越南语 / 英文使用拉丁字符规则
+      if (isSEAComplexScript(code)) {
+        width += 1;
+        continue;
+      }
+
+      // 拉丁字母、数字、标点；覆盖英文、马来文、越南语预组合字符
+      width += 0.6;
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return width;
+}
+function isCJK(code) {
+  return code >= 0x3400 && code <= 0x4dbf ||
+  // CJK扩展
+  code >= 0x4e00 && code <= 0x9fff ||
+  // 中文
+  code >= 0x20000 && code <= 0x2ebef ||
+  // CJK扩展B-I
+  code >= 0x3040 && code <= 0x30ff ||
+  // 日文
+  code >= 0xac00 && code <= 0xd7af // 韩文
+  ;
+}
+function isCJKSymbol(code) {
+  return code >= 0x3000 && code <= 0x303f;
+}
+function isSEAComplexScript(code) {
+  return code >= 0x0e00 && code <= 0x0e7f ||
+  // Thai
+  code >= 0x1780 && code <= 0x17ff ||
+  // Khmer
+  code >= 0x1000 && code <= 0x109f ||
+  // Myanmar
+  code >= 0x0e80 && code <= 0x0eff // Lao
+  ;
+}
+function isCombiningMark(code) {
+  return code >= 0x0300 && code <= 0x036f ||
+  // 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 ||
+  // Lao vowels and tones
+  code >= 0x102b && code <= 0x103e ||
+  // Myanmar vowel signs and marks
+  code >= 0x17b4 && code <= 0x17d3 // Khmer vowel signs and signs
+  ;
+}
+function isFullWidthSymbol(code) {
+  return code >= 0xff01 && code <= 0xff60;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lemon-fe/components",
-  "version": "1.5.6",
+  "version": "1.5.7-alpha.1",
   "description": "> TODO: description",
   "homepage": "",
   "license": "MIT",
@@ -58,5 +58,5 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },
-  "gitHead": "1098e017cce5db0a5353967a7deac0b690f37572"
+  "gitHead": "71b81afd6fac9ca7e66b3f527c9e6f104e9e30bd"
 }