@lemon-fe/components 1.4.12 → 1.4.13

package/es/data-grid/components/custom-panel/field-modal.d.ts

@@ -1,11 +1,13 @@
 /// <reference types="react" />
 import type { FieldCol, Node } from './typings';
+import type { ColGroupDef } from 'ag-grid-community';
 interface Props {
     enableSummary: boolean;
     open?: boolean | FieldCol;
     onCancel: () => void;
     onOk: (field: FieldCol) => void;
     nodes: Node[];
+    groups: ColGroupDef[];
 }
 export default function FieldModal(props: Props): JSX.Element;
 export {};

package/es/data-grid/components/custom-panel/field-modal.js

@@ -26,7 +26,8 @@ export default function FieldModal(props) {
     _onCancel = props.onCancel,
     nodes = props.nodes,
     onOk = props.onOk,
-    enableSummary = props.enableSummary;
+    enableSummary = props.enableSummary,
+    groups = props.groups;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     open = _useState2[0],
@@ -113,7 +114,8 @@ export default function FieldModal(props) {
             expression: '',
             summary: false,
             summaryType: 1,
-            decimalPlaces: 2
+            decimalPlaces: 2,
+            groupId: undefined
           });
         }
       } else {
@@ -121,7 +123,8 @@ export default function FieldModal(props) {
         setOpen(true);
         form.setFieldsValue(_objectSpread(_objectSpread({}, openProp), {}, {
           expression: formatExpression(openProp.expression),
-          decimalPlaces: (_openProp$decimalPlac = openProp.decimalPlaces) !== null && _openProp$decimalPlac !== void 0 ? _openProp$decimalPlac : 2
+          decimalPlaces: (_openProp$decimalPlac = openProp.decimalPlaces) !== null && _openProp$decimalPlac !== void 0 ? _openProp$decimalPlac : 2,
+          groupId: openProp.groupId
         }));
       }
     } else {
@@ -181,6 +184,17 @@ export default function FieldModal(props) {
       required: true
     }]
   }, /*#__PURE__*/React.createElement(Input, null)), /*#__PURE__*/React.createElement(Form.Item, {
+    label: fieldModal.customColumnParentHeaderText,
+    name: "groupId"
+  }, /*#__PURE__*/React.createElement(Select, {
+    options: groups.map(function (i) {
+      return {
+        label: i.headerName,
+        value: i.groupId
+      };
+    }),
+    allowClear: true
+  })), /*#__PURE__*/React.createElement(Form.Item, {
     label: fieldModal.customColumnExpressionText,
     name: 'expression',
     rules: [{

package/es/data-grid/components/custom-panel/index.js

@@ -66,82 +66,92 @@ export default function CustomColumnPanel(params) {
     setState(columnApi.getColumnState());
   }, 16);
   var handleChangeKeywords = useDebounce(setKeywords, 200);
-  var list = useMemo(function () {
-    var items = [];
-    var prevPath = [];
-    var isUserColGroup = function isUserColGroup(colGroupDef) {
-      if (colGroupDef !== null && Object.keys(colGroupDef).length > 0) {
-        return true;
-      }
-      return false;
-    };
-    state.forEach(function (item, idx) {
-      var column = columnApi.getColumn(item.colId);
-      if (column === null) {
-        return;
-      }
-      var def = column.getColDef();
-      if (def.suppressColumnsToolPanel) {
-        return;
-      }
-      var title = def.headerName || def.field || '';
-      var originNode = {
-        index: idx,
-        key: item.colId,
-        id: item.colId,
-        column: column,
-        title: title,
-        children: [],
-        leaf: [],
-        disabled: def.lockVisible || false,
-        visible: column.isVisible() ? 1 : 0
+  var _useMemo = useMemo(function () {
+      var items = [];
+      var prevPath = [];
+      var groupMap = new Map();
+      var isUserColGroup = function isUserColGroup(colGroupDef) {
+        if (colGroupDef !== null && Object.keys(colGroupDef).length > 0) {
+          return true;
+        }
+        return false;
       };
-      var node = originNode;
-      var path = [node];
-      var parent = column.getOriginalParent();
-      while (parent) {
-        var groupDef = parent.getColGroupDef();
-        if (!isUserColGroup(groupDef)) {
-          parent = parent.getOriginalParent();
-          continue;
+      state.forEach(function (item, idx) {
+        var column = columnApi.getColumn(item.colId);
+        if (column === null) {
+          return;
+        }
+        var def = column.getColDef();
+        if (def.suppressColumnsToolPanel) {
+          return;
         }
-        var id = "$$group-".concat(parent.getGroupId());
-        var parentNode = {
+        var title = def.headerName || def.field || '';
+        var originNode = {
           index: idx,
-          key: "".concat(id, "-").concat(item.colId),
-          id: id,
-          children: [node],
-          title: groupDef.headerName,
-          leaf: [originNode],
-          disabled: originNode.disabled,
-          visible: originNode.visible
+          key: item.colId,
+          id: item.colId,
+          column: column,
+          title: title,
+          children: [],
+          leaf: [],
+          disabled: def.lockVisible || false,
+          visible: column.isVisible() ? 1 : 0
         };
-        node = parentNode;
-        path.unshift(node);
-        parent = parent.getOriginalParent();
-      }
-      var mergeFlag = false;
-      for (var i = path.length - 1; i >= 0; i--) {
-        var node1 = prevPath[i];
-        var node2 = path[i];
-        if (node1 !== undefined && node2 !== undefined && node1.id === node2.id) {
-          if (!mergeFlag) {
-            node1.children = [].concat(_toConsumableArray(node1.children), _toConsumableArray(node2.children));
-            mergeFlag = true;
+        var node = originNode;
+        var path = [node];
+        var parent = column.getOriginalParent();
+        while (parent) {
+          var groupDef = parent.getColGroupDef();
+          if (!isUserColGroup(groupDef)) {
+            parent = parent.getOriginalParent();
+            continue;
           }
-          node1.leaf = [].concat(_toConsumableArray(node1.leaf), _toConsumableArray(node2.leaf));
-          node1.disabled = node1.disabled && node2.disabled;
-          node1.visible = node1.visible === 1 && node2.visible === 1 ? 1 : node1.visible === 1 || node2.visible === 1 ? 2 : 0;
-          path[i] = node1;
+          if (groupDef.groupId) {
+            var group = groupMap.get(groupDef.groupId);
+            if (!group) {
+              groupMap.set(groupDef.groupId, groupDef);
+            }
+          }
+          var id = "$$group-".concat(parent.getGroupId());
+          var parentNode = {
+            index: idx,
+            key: "".concat(id, "-").concat(item.colId),
+            id: id,
+            children: [node],
+            title: groupDef.headerName,
+            leaf: [originNode],
+            disabled: originNode.disabled,
+            visible: originNode.visible
+          };
+          node = parentNode;
+          path.unshift(node);
+          parent = parent.getOriginalParent();
         }
-      }
-      if (!mergeFlag) {
-        items.push(path[0]);
-      }
-      prevPath = path;
-    });
-    return items;
-  }, [state, columnApi]);
+        var mergeFlag = false;
+        for (var i = path.length - 1; i >= 0; i--) {
+          var node1 = prevPath[i];
+          var node2 = path[i];
+          if (node1 !== undefined && node2 !== undefined && node1.id === node2.id) {
+            if (!mergeFlag) {
+              node1.children = [].concat(_toConsumableArray(node1.children), _toConsumableArray(node2.children));
+              mergeFlag = true;
+            }
+            node1.leaf = [].concat(_toConsumableArray(node1.leaf), _toConsumableArray(node2.leaf));
+            node1.disabled = node1.disabled && node2.disabled;
+            node1.visible = node1.visible === 1 && node2.visible === 1 ? 1 : node1.visible === 1 || node2.visible === 1 ? 2 : 0;
+            path[i] = node1;
+          }
+        }
+        if (!mergeFlag) {
+          items.push(path[0]);
+        }
+        prevPath = path;
+      });
+      return [items, groupMap];
+    }, [state, columnApi]),
+    _useMemo2 = _slicedToArray(_useMemo, 2),
+    list = _useMemo2[0],
+    groups = _useMemo2[1];
   var handleSearch = function handleSearch() {
     var index = -1;
     var highlight = [];
@@ -399,6 +409,7 @@ export default function CustomColumnPanel(params) {
     open: field,
     enableSummary: enableSummary,
     nodes: list,
+    groups: _toConsumableArray(groups.values()),
     onCancel: function onCancel() {
       setField(false);
     },

package/es/data-grid/components/custom-panel/item.js

@@ -24,7 +24,7 @@ var Item = /*#__PURE__*/memo(function (props) {
   var column = node.column;
   var colDef = (column === null || column === void 0 ? void 0 : column.getColDef()) || {};
   var _useDraggable = useDraggable({
-      id: node.id,
+      id: node.key,
       data: node,
       disabled: colDef.lockPosition === true
     }),
@@ -32,7 +32,7 @@ var Item = /*#__PURE__*/memo(function (props) {
     listeners = _useDraggable.listeners,
     setDragRef = _useDraggable.setNodeRef;
   var _useDroppable = useDroppable({
-      id: node.id,
+      id: node.key,
       data: node,
       disabled: colDef.lockPosition === true
     }),

package/es/data-grid/components/custom-panel/typings.d.ts

@@ -25,4 +25,5 @@ export type FieldCol = {
   id: string;
   name: string;
   decimalPlaces?: number;
+  groupId?: string;
 };

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

@@ -17,7 +17,7 @@ declare const Editors: {
     Text: React.ForwardRefExoticComponent<import("ag-grid-community").ICellEditorParams<any, any, any> & import("./typings").TextEditorParams<any> & React.RefAttributes<import("ag-grid-react").ICellEditorReactComp>>;
     Date: React.ForwardRefExoticComponent<import("ag-grid-community").ICellEditorParams<any, any, any> & import("./typings").DateEditorParams<any> & React.RefAttributes<import("ag-grid-react").ICellEditorReactComp>>;
     Number: React.ForwardRefExoticComponent<import("ag-grid-community").ICellEditorParams<any, any, any> & import("./typings").NumberEditorParams<any> & React.RefAttributes<import("ag-grid-react").ICellEditorReactComp>>;
-    Select: React.ForwardRefExoticComponent<import("ag-grid-community").ICellEditorParams<any, any, any> & Pick<import("antd").SelectProps<any, import("antd/lib/select").BaseOptionType>, "disabled" | "allowClear" | "mode" | "showSearch" | "optionFilterProp" | "options" | "virtual" | "listHeight"> & {
+    Select: React.ForwardRefExoticComponent<import("ag-grid-community").ICellEditorParams<any, any, any> & Pick<import("antd").SelectProps<any, import("antd/lib/select").BaseOptionType>, "disabled" | "mode" | "allowClear" | "showSearch" | "optionFilterProp" | "options" | "virtual" | "listHeight"> & {
         fieldNames?: {
             label: string;
             value: string;

package/es/data-grid/index.js

@@ -590,11 +590,17 @@ var InternalDataGrid = /*#__PURE__*/function (_Component) {
       });
       if (idx >= 0) {
         newFields[idx] = field;
+        if (this.fields[idx].groupId !== field.groupId) {
+          newFields.splice(idx, 1);
+          newFields.push(_objectSpread(_objectSpread({}, field), {}, {
+            id: "$$field-".concat(Date.now())
+          }));
+        }
       } else {
         newFields.push(field);
       }
       this.fields = newFields;
-      this.updateColumnDefs(this.columnApi.getColumnState());
+      this.updateColumnDefs();
     }
   }, {
     key: "getField",
@@ -921,6 +927,7 @@ var InternalDataGrid = /*#__PURE__*/function (_Component) {
         rowSelection = _this$props8.rowSelection,
         locale = _this$props8.locale;
       var leafColIds = [];
+      var groups = new Map();
       var map = function map(cols) {
         return cols.map(function (item) {
           if (isColumn(item)) {
@@ -1085,7 +1092,11 @@ var InternalDataGrid = /*#__PURE__*/function (_Component) {
             } else if (_title !== undefined) {
               _opts.headerName = _title.toString();
             }
-            return _objectSpread(_objectSpread({}, _opts), rest);
+            var group = _objectSpread(_objectSpread({}, _opts), rest);
+            if (group.groupId) {
+              groups.set(group.groupId, group);
+            }
+            return group;
           }
         });
       };
@@ -1230,7 +1241,15 @@ var InternalDataGrid = /*#__PURE__*/function (_Component) {
           }
           return numericValueA - numericValueB;
         };
-        result.push(fieldCol);
+        if (field.groupId) {
+          fieldCol.spanHeaderHeight = false;
+          var group = groups.get(field.groupId);
+          if (group) {
+            group.children.push(fieldCol);
+          }
+        } else {
+          result.push(fieldCol);
+        }
       });
       if (rowSelection !== undefined) {
         var checkboxSelection = rowSelection.checkboxSelection;

package/es/data-grid/locale/en_US.js

@@ -32,6 +32,7 @@ var locale = {
     customColumnExpressionText: 'Expression',
     customColumnExpressionPlaceholder: 'Custom Expression length limit of 300',
     customColumnDecimalPlacesText: 'Decimal places',
+    customColumnParentHeaderText: 'The corresponding superior header',
     summaryText: 'Summary or not',
     summaryTypeText: 'Rule',
     summaryTypeContentText: "\n      <div>\n        <p>1. The sum of custom column data values to get the total value</p>\n        <p>\n          2. The total value is calculated based on the formula from the data source\n          <br />\n          Fields added in the formula are summed first, then the total is calculated based on the formula\n        </p>\n      </div>\n      ",

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

@@ -11,6 +11,7 @@ export interface DataGridLocale {
         customColumnExpressionText: string;
         customColumnExpressionPlaceholder: string;
         customColumnDecimalPlacesText: string;
+        customColumnParentHeaderText: string;
         summaryText: string;
         summaryTypeText: string;
         summaryTypeContentText: string;

package/es/data-grid/locale/vi.js

@@ -29,6 +29,7 @@ var locale = {
     customColumnExpressionText: 'Công thức tùy chỉnh',
     customColumnExpressionPlaceholder: 'Độ dài tối đa của công thức tùy chỉnh là 300',
     customColumnDecimalPlacesText: 'Số chữ số thập phân',
+    customColumnParentHeaderText: 'Tiêu đề bảng cấp trên mà nó thuộc về',
     summaryText: 'Có thống kê tổng cộng không?',
     summaryTypeText: 'Quy tắc tính tổng cộng',
     summaryTypeContentText: "\n    <div>\n      <p>1. T\xEDnh t\u1ED5ng gi\xE1 tr\u1ECB d\u1EEF li\u1EC7u c\u1EE7a c\u1ED9t t\xF9y ch\u1EC9nh \u0111\u1EC3 c\xF3 \u0111\u01B0\u1EE3c gi\xE1 tr\u1ECB t\u1ED5ng c\u1ED9ng.</p>\n      <p>\n        2. Ngu\u1ED3n d\u1EEF li\u1EC7u t\xEDnh to\xE1n gi\xE1 tr\u1ECB t\u1ED5ng c\u1ED9ng theo c\xF4ng th\u1EE9c t\xEDnh to\xE1n.\n        <br />\n        C\xE1c tr\u01B0\u1EDDng \u0111\u01B0\u1EE3c th\xEAm v\xE0o trong c\xF4ng th\u1EE9c s\u1EBD \u0111\u01B0\u1EE3c t\xEDnh t\u1ED5ng tr\u01B0\u1EDBc, sau \u0111\xF3 t\xEDnh to\xE1n gi\xE1 tr\u1ECB t\u1ED5ng c\u1ED9ng theo c\xF4ng th\u1EE9c.\n      </p>\n    </div>\n    ",

package/es/data-grid/locale/zh_CN.js

@@ -29,6 +29,7 @@ var locale = {
     customColumnExpressionText: '自定义公式',
     customColumnExpressionPlaceholder: '自定义公式长度上限300',
     customColumnDecimalPlacesText: '小数位数',
+    customColumnParentHeaderText: '所属上级表头',
     summaryText: '是否统计合计',
     summaryTypeText: '合计规则',
     summaryTypeContentText: "\n    <div>\n      <p>1\u3001\u81EA\u5B9A\u4E49\u5217\u6570\u636E\u503C\u6C42\u548C\u5F97\u51FA\u5408\u8BA1\u503C</p>\n      <p>\n        2\u3001\u6570\u636E\u6E90\u6839\u636E\u8BA1\u7B97\u516C\u5F0F\u5F97\u51FA\u5408\u8BA1\u503C\n        <br />\n        \u516C\u5F0F\u4E2D\u6DFB\u52A0\u7684\u5B57\u6BB5\u5148\u6C42\u548C\uFF0C\u518D\u6839\u636E\u8BA1\u7B97\u516C\u5F0F\u8BA1\u7B97\u51FA\u5408\u8BA1\n      </p>\n    </div>\n    ",

package/es/data-grid/locale/zh_Hant_HK.js

@@ -29,6 +29,7 @@ var locale = {
     customColumnExpressionText: '自定義公式',
     customColumnExpressionPlaceholder: '自定義公式長度上限300',
     customColumnDecimalPlacesText: '小數位數',
+    customColumnParentHeaderText: '所屬上級表頭',
     summaryText: '是否統計合計',
     summaryTypeText: '合計規則',
     summaryTypeContentText: "\n    <div>\n      <p>1\u3001\u81EA\u5B9A\u7FA9\u5217\u6578\u64DA\u503C\u6C42\u548C\u5F97\u51FA\u5408\u8A08\u503C</p>\n      <p>\n        2\u3001\u6578\u64DA\u6E90\u6839\u64DA\u8A08\u7B97\u516C\u5F0F\u5F97\u51FA\u5408\u8A08\u503C\n        <br />\n        \u516C\u5F0F\u4E2D\u6DFB\u52A0\u7684\u5B57\u6BB5\u5148\u6C42\u548C\uFF0C\u518D\u6839\u64DA\u8A08\u7B97\u516C\u5F0F\u8A08\u7B97\u51FA\u5408\u8A08\n      </p>\n    </div>\n    ",

package/es/sider-tree/index.d.ts

@@ -16,6 +16,10 @@ interface Props<KeyType> extends Omit<TreeProps, 'onSelect' | 'selectedKeys' | '
     defaultExpandedKeys?: KeyType[];
     active?: boolean;
     height?: number | 'auto';
+    /**
+     * @description 是否在搜索时保留父节点
+     */
+    filterKeepParents?: boolean;
 }
 declare function SiderTreeTabs(props: {
     tabs: {

package/es/sider-tree/index.js

@@ -1,5 +1,5 @@
 var _excluded = ["tabs", "children"],
-  _excluded2 = ["data", "showSearch", "placeholder", "onSelect", "filterNode", "operation", "header", "footer", "height"];
+  _excluded2 = ["data", "showSearch", "placeholder", "onSelect", "filterNode", "operation", "header", "footer", "height", "filterKeepParents"];
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
@@ -73,6 +73,7 @@ export default function SiderTree(props) {
     header = props.header,
     footer = props.footer,
     heightProp = props.height,
+    filterKeepParents = props.filterKeepParents,
     restProps = _objectWithoutProperties(props, _excluded2);
   var _useState = useState(''),
     _useState2 = _slicedToArray(_useState, 2),
@@ -87,14 +88,13 @@ export default function SiderTree(props) {
     SiderTreeLocale = _useLocaleReceiver2[0];
   var tree = useMemo(function () {
     var list = mData;
-    if (keywords) {
-      list = list.filter(function (item) {
-        if (filterNode) {
-          return filterNode(keywords, item);
-        } else {
-          return item.title.toString().toLowerCase().includes(keywords.toLowerCase());
-        }
-      });
+    var items = new Set();
+    var addedNodes = new Set();
+    var shouldInclude = function shouldInclude(item) {
+      return filterNode ? filterNode(keywords, item) : item.title.toString().toLowerCase().includes(keywords.toLowerCase());
+    };
+    if (keywords && !filterKeepParents) {
+      list = list.filter(shouldInclude);
     }
     var map = new Map(list.map(function (item) {
       return [item.key, {
@@ -102,30 +102,32 @@ export default function SiderTree(props) {
         parent: item.parent,
         icon: item.icon,
         data: item,
-        title: /*#__PURE__*/React.createElement(TreeNodeTitle, {
-          operation: operation,
-          node: item,
-          prefixCls: prefix()
-        })
+        title: item.title
       }];
     }));
-    var items = [];
-    _toConsumableArray(map.values()).forEach(function (item) {
-      var parent;
-      if (item.parent !== undefined) {
-        parent = map.get(item.parent);
+    list.forEach(function (item) {
+      if (keywords && !shouldInclude(item)) {
+        return;
       }
-      if (!parent) {
-        items.push(item);
-      } else {
-        if (parent.children === undefined) {
-          parent.children = [];
+      var parent;
+      var node = map.get(item.key);
+      while (node) {
+        if (addedNodes.has(node)) {
+          return;
+        }
+        parent = node.parent ? map.get(node.parent) : undefined;
+        if (parent) {
+          parent.children = parent.children || [];
+          parent.children.push(node);
+        } else {
+          items.add(node);
         }
-        parent.children.push(item);
+        addedNodes.add(node);
+        node = parent;
       }
     });
-    return items;
-  }, [mData, keywords]);
+    return _toConsumableArray(items);
+  }, [mData, keywords, filterKeepParents]);
   var handleChange = useDebounce(function (value) {
     setKeywords(value);
   }, 300);
@@ -141,14 +143,23 @@ export default function SiderTree(props) {
       prefix: /*#__PURE__*/React.createElement(Icons.Search, null)
     });
   }
+  var prefixCls = prefix();
   var bodyContent = tree.length <= 0 ? /*#__PURE__*/React.createElement("div", {
     className: prefix('empty')
   }, /*#__PURE__*/React.createElement(EmptyImage, null), /*#__PURE__*/React.createElement("div", null, SiderTreeLocale.noDataText)) : /*#__PURE__*/React.createElement(Tree, _extends({
+    // @ts-ignore antd Tree type error
     treeData: tree,
     itemHeight: 28,
     showLine: true,
     height: height,
-    onSelect: function onSelect(_, info) {
+    titleRender: function titleRender(node) {
+      return /*#__PURE__*/React.createElement(TreeNodeTitle, {
+        operation: operation,
+        node: node.data,
+        prefixCls: prefixCls
+      });
+    },
+    onSelect: function onSelect(keys, info) {
       if (_onSelect) {
         _onSelect(info.node.data, info);
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lemon-fe/components",
-  "version": "1.4.12",
+  "version": "1.4.13",
   "description": "> TODO: description",
   "homepage": "",
   "license": "MIT",
@@ -58,5 +58,5 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },
-  "gitHead": "3115130fcdb626142ac775355fc2ae79a79dd647"
+  "gitHead": "bdf13cf37730209f309871c203b8206526bcbdaf"
 }