es-grid-template 1.1.8 → 1.2.1

package/lib/grid-component/hooks/{useColumns → columns}/index.js

@@ -17,8 +17,6 @@ var _CheckboxFilter = _interopRequireDefault(require("../../CheckboxFilter"));
 var _useSelection = require("rc-master-ui/es/table/hooks/useSelection");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-// import * as React from 'react'
-
 const {
   RangePicker
 } = _rcMasterUi.DatePicker;
@@ -45,15 +43,16 @@ function flatColumns(columns, parentKey = 'key') {
     }];
   }, []);
 }
-function flatColumns2(columns, parentKey = 'key') {
+function flatColumns2(columns
+// parentKey = 'key'
+) {
   // @ts-ignore
-  return columns.reduce((list, column, index) => {
-    const {
-      fixed
-    } = column;
+  return columns.reduce((list, column) => {
+    // const { fixed } = column
     // Convert `fixed='true'` to `fixed='left'` instead
-    const parsedFixed = fixed === true ? 'left' : fixed;
-    const mergedKey = `${parentKey}-${index}`;
+    // const parsedFixed = fixed === true ? 'left' : fixed
+    // const mergedKey = `${parentKey}-${index}`
+
     const subColumns = column.children;
     if (column === _useSelection.SELECTION_COLUMN) {
       return [...list, {
@@ -61,15 +60,15 @@ function flatColumns2(columns, parentKey = 'key') {
       }];
     }
     if (subColumns && subColumns.length > 0) {
-      return [...list, ...flatColumns(subColumns, mergedKey).map(subColum => ({
-        fixed: parsedFixed,
+      return [...list, ...flatColumns(subColumns).map(subColum => ({
+        // fixed: parsedFixed,
         ...subColum
       }))];
     }
     return [...list, {
-      key: mergedKey,
-      ...column,
-      fixed: parsedFixed
+      // key: mergedKey,
+      ...column
+      // fixed: parsedFixed
     }];
   }, []);
 }
@@ -138,8 +137,13 @@ const renderFilter = (column, selectedKeys, setSelectedKeys, confirm, visible, s
   const type = (0, _utils.getTypeFilter)(column);
   const dateFormat = (0, _utils.getDatepickerFormat)(column?.typeFilter ?? column?.type, column) ?? 'DD/MM/YYYY';
   const dateRangeFormat = (0, _utils.getDatepickerFormat)(column?.type, column) ?? 'DD/MM/YYYY';
-  const find = dataSourceFilter?.find(it => it.key === column?.key);
+  const find = dataSourceFilter?.find(it => it.key === column?.field);
   const options = find ? find.data : [];
+
+  // console.log('dataSourceFilter', dataSourceFilter)
+  // console.log('options', options)
+  // console.log('column', column)
+
   switch (type) {
     case 'Number':
       return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
@@ -374,7 +378,7 @@ const renderFilter = (column, selectedKeys, setSelectedKeys, confirm, visible, s
       }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Select
       // options={translateOption(numberOperator, t)}
       , {
-        options: options,
+        options: find ? options : column.source ?? [],
         style: {
           width: '100%',
           marginBottom: 8

package/lib/grid-component/hooks/content/HeaderContent.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import type { ColumnTable } from "../../type";
+type Props = {
+    t?: any;
+    content?: string;
+    column?: ColumnTable;
+    template?: React.ReactElement | React.ReactNode | (() => React.ReactElement | React.ReactNode);
+    tooltip?: string | number | React.ReactElement | React.ReactNode | (() => React.ReactElement | React.ReactNode);
+};
+declare const HeaderContent: (props: Props) => React.JSX.Element;
+export default HeaderContent;

package/lib/grid-component/hooks/content/HeaderContent.js

@@ -0,0 +1,87 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react2 = require("@floating-ui/react");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _utils = require("../utils");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const TooltipStyle = _styledComponents.default.div.withConfig({
+  displayName: "TooltipStyle",
+  componentId: "es-grid-template__sc-ibhq66-0"
+})(["width:max-content;background-color:#444;color:white;font-size:90%;padding:4px 8px;border-radius:4px;opacity:0.9;z-index:9999;max-width:450px;"]);
+const HeaderContent = props => {
+  const {
+    t
+  } = props;
+  const {
+    headerTooltip,
+    headerText,
+    columnGroupText,
+    headerTemplate,
+    title
+  } = props.column ?? {};
+  const text = _react.default.useMemo(() => {
+    return columnGroupText ?? headerText ?? title;
+  }, [columnGroupText, headerText, title]);
+  const tooltip = _react.default.useMemo(() => {
+    return headerTooltip ?? columnGroupText ?? headerText ?? title;
+  }, [columnGroupText, headerText, headerTooltip, title]);
+  const [isOpen, setIsOpen] = (0, _react.useState)(false);
+  const {
+    refs,
+    floatingStyles,
+    context
+  } = (0, _react2.useFloating)({
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    placement: "top",
+    whileElementsMounted: _react2.autoUpdate,
+    middleware: [(0, _react2.offset)(5), (0, _react2.flip)({
+      fallbackAxisSideDirection: "start"
+    }), (0, _react2.shift)()]
+  });
+  const hover = (0, _react2.useHover)(context, {
+    move: false
+  });
+  const focus = (0, _react2.useFocus)(context);
+  const dismiss = (0, _react2.useDismiss)(context);
+  const role = (0, _react2.useRole)(context, {
+    role: "tooltip"
+  });
+  const {
+    getReferenceProps,
+    getFloatingProps
+  } = (0, _react2.useInteractions)([hover, focus, dismiss, role]);
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+    ref: refs.setReference
+  }, getReferenceProps(), {
+    tabIndex: -1,
+    style: {
+      flex: 1,
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      wordBreak: 'keep-all'
+    }
+    // style={{flex: 1}}
+    ,
+    className: (0, _classnames.default)('', {})
+  }), headerTemplate ? (0, _utils.getTemplate)(headerTemplate) : t ? t(text) : text), isOpen && (headerTooltip !== false || headerTemplate || headerTooltip || columnGroupText || headerText || title) && /*#__PURE__*/_react.default.createElement(_react2.FloatingPortal, {
+    root: document.body
+  }, /*#__PURE__*/_react.default.createElement(TooltipStyle, (0, _extends2.default)({
+    className: "Tooltip",
+    ref: refs.setFloating,
+    style: {
+      ...floatingStyles,
+      zIndex: 1999
+    }
+  }, getFloatingProps()), headerTooltip && typeof headerTooltip === 'function' ? headerTooltip() : t ? t(tooltip) : tooltip)));
+};
+var _default = exports.default = HeaderContent;

package/lib/grid-component/hooks/content/TooltipContent.d.ts

@@ -0,0 +1,13 @@
+import React, { ReactElement, ReactNode } from "react";
+type Props = {
+    t?: any;
+    content?: any;
+    value?: any;
+    record?: any;
+    rowIndex?: any;
+    template?: React.ReactElement | React.ReactNode | (() => React.ReactElement | React.ReactNode);
+    tooltip?: ReactNode | ReactElement | ((value: any, record: any, index: number) => ReactNode | ReactElement);
+    showTooltip?: boolean;
+};
+declare const TooltipContent: (props: Props) => React.JSX.Element;
+export default TooltipContent;

package/lib/grid-component/hooks/content/TooltipContent.js

@@ -0,0 +1,81 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react2 = require("@floating-ui/react");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _useIsOverflow = require("../useIsOverflow");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+// import {getTemplate} from "../utils";
+
+const TooltipStyle = _styledComponents.default.div.withConfig({
+  displayName: "TooltipStyle",
+  componentId: "es-grid-template__sc-7yfbzv-0"
+})(["width:max-content;background-color:#444;color:white;font-size:90%;padding:4px 8px;border-radius:4px;opacity:0.9;z-index:9999;max-width:450px;"]);
+const TooltipContent = props => {
+  const {
+    content,
+    tooltip,
+    value,
+    record,
+    rowIndex,
+    showTooltip
+  } = props;
+  const [isOpen, setIsOpen] = (0, _react.useState)(false);
+  const {
+    refs,
+    floatingStyles,
+    context
+  } = (0, _react2.useFloating)({
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    placement: "top",
+    whileElementsMounted: _react2.autoUpdate,
+    middleware: [(0, _react2.offset)(5), (0, _react2.flip)({
+      fallbackAxisSideDirection: "start"
+    }), (0, _react2.shift)()]
+  });
+  const isOverflow = (0, _useIsOverflow.useIsOverflow)(refs.reference);
+  const hover = (0, _react2.useHover)(context, {
+    move: false
+  });
+  const focus = (0, _react2.useFocus)(context);
+  const dismiss = (0, _react2.useDismiss)(context);
+  const role = (0, _react2.useRole)(context, {
+    role: "tooltip"
+  });
+  const {
+    getReferenceProps,
+    getFloatingProps
+  } = (0, _react2.useInteractions)([hover, focus, dismiss, role]);
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+    ref: refs.setReference
+  }, getReferenceProps(), {
+    style: {
+      flex: 1,
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      wordBreak: 'keep-all'
+    },
+    className: (0, _classnames.default)('', {})
+  }), content()), isOpen && showTooltip !== false && isOverflow &&
+  /*#__PURE__*/
+  // {true  && (
+  _react.default.createElement(_react2.FloatingPortal, {
+    root: document.body
+  }, /*#__PURE__*/_react.default.createElement(TooltipStyle, (0, _extends2.default)({
+    className: "Tooltip",
+    ref: refs.setFloating,
+    style: {
+      ...floatingStyles
+    }
+  }, getFloatingProps()), tooltip && typeof tooltip === 'function' ? tooltip(value, record, rowIndex) : tooltip ?? content())));
+};
+var _default = exports.default = TooltipContent;

package/lib/grid-component/hooks/useColumns.d.ts

@@ -0,0 +1,16 @@
+import type { AnyObject, IGroupSetting } from "../type";
+export declare const SELECTION_COLUMN: {};
+interface UseColumnsConfig {
+    t?: any;
+    buddhistLocale?: any;
+    dataSourceFilter?: any;
+    locale?: any;
+    format?: any;
+    handleResize?: any;
+    sortMultiple?: boolean;
+    groupAble?: boolean;
+    groupSetting?: IGroupSetting;
+    groupColumns?: string[];
+}
+declare const useColumns: <RecordType extends AnyObject = AnyObject>(config: UseColumnsConfig) => readonly [any];
+export default useColumns;

package/lib/grid-component/hooks/useColumns.js

@@ -0,0 +1,283 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SELECTION_COLUMN = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _antd = require("antd");
+var _rcMasterUi = require("rc-master-ui");
+var _utils = require("./utils");
+var _constant = require("./constant");
+var _columns = require("./columns");
+var _icons = require("@ant-design/icons");
+var _becoxyIcons = require("becoxy-icons");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _HeaderContent = _interopRequireDefault(require("./content/HeaderContent"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+// import type {Key} from 'react';
+
+// import Command from "../Command";
+
+const ASCEND = 'ascend';
+const DESCEND = 'descend';
+const SELECTION_COLUMN = exports.SELECTION_COLUMN = {};
+
+// const EMPTY_LIST: React.Key[] = [];
+
+const useColumns = config => {
+  // const {
+  //   preserveSelectedRowKeys,
+  //   selectedRowKeys,
+  //   defaultSelectedRowKeys,
+  //   onSelectMultiple,
+  //   columnWidth: selectionColWidth,
+  //   type: selectionType,
+  //   selections,
+  //   fixed,
+  // } = rowSelection || {};
+
+  const {
+    t,
+    dataSourceFilter,
+    buddhistLocale,
+    locale,
+    sortMultiple,
+    format,
+    handleResize,
+    groupAble,
+    groupColumns,
+    groupSetting
+  } = config;
+
+  // ====================== Selections ======================
+
+  const handleSearch = (selectedKeys, confirm) => {
+    confirm();
+  };
+  const getColumnSearchProps = (0, _react.useCallback)(column => ({
+    filterDropdown: ({
+      setSelectedKeys,
+      selectedKeys,
+      confirm,
+      // close,
+      setOperatorKey,
+      operatorKey,
+      visible,
+      searchValue,
+      setSearchValue
+    }) => {
+      const type = (0, _utils.getTypeFilter)(column);
+      // const operatorOptions  = !type || type === 'Text' ? stringOperator : numberOperator
+      // const operatorOptions  = type === 'Checkbox' || type === 'Dropdown' || type === 'DropTree' || ty
+      const operatorOptions = type === ('Checkbox' || 'Dropdown' || 'DropTree' || 'CheckboxDropdown') ? _constant.booleanOperator : !type || type === 'Text' ? _constant.stringOperator : _constant.numberOperator;
+      return /*#__PURE__*/React.createElement("div", {
+        style: {
+          padding: 8,
+          minWidth: 275
+        },
+        onKeyDown: e => e.stopPropagation()
+      }, column?.showOperator !== false && column?.typeFilter !== 'DateRange' && column?.typeFilter !== 'NumberRange' && /*#__PURE__*/React.createElement("div", {
+        className: 'mb-1'
+      }, /*#__PURE__*/React.createElement(_rcMasterUi.Select, {
+        options: (0, _constant.translateOption)(operatorOptions, t),
+        style: {
+          width: '100%',
+          marginBottom: 8
+        },
+        value: operatorKey,
+        onChange: val => {
+          setOperatorKey(val);
+        }
+      })), /*#__PURE__*/React.createElement("div", {
+        style: {
+          marginBottom: 8
+        }
+      }, (0, _columns.renderFilter)(column, selectedKeys, setSelectedKeys, confirm, visible, searchValue, setSearchValue, dataSourceFilter, buddhistLocale, locale, t)), /*#__PURE__*/React.createElement(_antd.Space, {
+        style: {
+          justifyContent: 'end',
+          width: '100%'
+        }
+      }, /*#__PURE__*/React.createElement(_antd.Button, {
+        type: "primary",
+        onClick: () => {
+          confirm({
+            closeDropdown: false
+          });
+          handleSearch(selectedKeys, confirm);
+        },
+        icon: /*#__PURE__*/React.createElement(_icons.SearchOutlined, null),
+        size: "small",
+        style: {
+          width: 90
+        }
+      }, t ? t('Filter') : 'Filter'), /*#__PURE__*/React.createElement(_antd.Button, {
+        type: "link",
+        size: "small",
+        onClick: () => {
+          // setSearchValue('')
+          setSelectedKeys([]);
+          confirm();
+          // handleSearch()
+          // close()
+        }
+      }, t ? t("Clear") : 'Clear')));
+    },
+    filterIcon: filtered => /*#__PURE__*/React.createElement(_becoxyIcons.FilterFill, {
+      fontSize: 12
+      // onClick={() => {
+      //   onFilterClick?.(column, onFilterCallback)
+      // }}
+      ,
+      style: {
+        color: filtered ? '#E3165B' : '#283046'
+      }
+    }),
+    filterDropdownProps: {
+      onOpenChange(open) {
+        if (open) {
+          // setTimeout(() => searchInput.current?.select(), 100)
+        }
+      }
+    }
+  }), [buddhistLocale, dataSourceFilter, locale, t]);
+
+  // ======================= Columns ========================
+  const transformColumns = (0, _react.useCallback)(columns => {
+    // >>>>>>>>>>> Support selection
+    const cloneColumns = [...columns];
+    const firstNonGroupColumn = (0, _columns.flatColumns2)(cloneColumns).find(col => col.field && !groupColumns?.includes(col.field) && col.hidden !== true);
+    const nonGroupColumns = (0, _columns.flatColumns2)(cloneColumns).filter(col => col.field && !groupColumns?.includes(col.field) && col.hidden !== true);
+
+    // ===================== Render =====================
+
+    const convertColumns = cols => {
+      return cols.map(col => {
+        const colIndex = (0, _columns.flatColumns2)(cols).findIndex(it => it.field === col.field);
+        if (col === SELECTION_COLUMN) {
+          return SELECTION_COLUMN;
+        }
+        const transformedColumn = {
+          ...col,
+          dataIndex: col.field ?? col.dataIndex,
+          key: col.field ?? col.dataIndex ?? col.key,
+          // title: t ? t(col.columnGroupText ?? col.headerText ?? col.title) : col.columnGroupText ?? col.headerText ?? col.title,
+          // title: () => (<span>aaa</span>),
+          title: () => /*#__PURE__*/React.createElement(_HeaderContent.default, {
+            column: col,
+            t: t
+          }),
+          // title: () => (<span>{t ? t(col.columnGroupText ?? col.headerText ?? col.title) : col.columnGroupText ?? col.headerText ?? col.title}</span>),
+          ellipsis: col.ellipsis !== false,
+          align: col.textAlign ?? col.align,
+          fixed: col.frozen ? col.frozen.toLowerCase() : col.fixed
+        };
+        if (transformedColumn.children && transformedColumn.children?.length) {
+          return {
+            ...transformedColumn,
+            children: convertColumns(transformedColumn.children)
+          };
+        }
+        if (["index", "#"].includes(col.field)) {
+          return {
+            ...transformedColumn,
+            onCell: () => ({
+              className: 'cell-number'
+            }),
+            render: (_, __, rowIndex) => rowIndex + 1
+          };
+        }
+        if (col.key === 'command') {
+          return {
+            ...transformedColumn
+          };
+        }
+        return {
+          ...transformedColumn,
+          ...(transformedColumn.allowFiltering === false ? {} : {
+            ...getColumnSearchProps(col)
+          }),
+          sorter: col.sorter === false ? undefined : {
+            compare: a => a,
+            multiple: sortMultiple ? colIndex : undefined
+          },
+          sortIcon: args => {
+            const {
+              sortOrder
+            } = args;
+            return /*#__PURE__*/React.createElement(_react.Fragment, null, !sortOrder && /*#__PURE__*/React.createElement(_becoxyIcons.ArrowUp, {
+              fontSize: 15,
+              style: {
+                display: 'flex',
+                opacity: 0,
+                marginLeft: 4
+              },
+              className: (0, _classnames.default)(`ui-rc-table-column-sorter-up`, {
+                active: true
+              })
+            }), sortOrder === ASCEND && /*#__PURE__*/React.createElement("span", {
+              className: (0, _classnames.default)(`ui-rc-table-column-sorter-up`, {
+                active: sortOrder === ASCEND
+              }),
+              style: {
+                display: 'flex',
+                marginLeft: 4
+              }
+            }, /*#__PURE__*/React.createElement(_becoxyIcons.ArrowUp, {
+              fontSize: 15,
+              color: '#000'
+            })), sortOrder === DESCEND && /*#__PURE__*/React.createElement("span", {
+              className: (0, _classnames.default)(`ui-rc-table-column-sorter-up`, {
+                active: sortOrder === DESCEND
+              }),
+              style: {
+                display: 'flex',
+                marginLeft: 4
+              }
+            }, /*#__PURE__*/React.createElement(_becoxyIcons.ArrowDown, {
+              fontSize: 15,
+              color: '#000'
+            })));
+          },
+          onHeaderCell: () => ({
+            width: col.width,
+            onResize: handleResize?.(col)
+          }),
+          onCell: data => {
+            return {
+              colSpan: data.children && col.field === firstNonGroupColumn?.field ? 2 : data.children && nonGroupColumns[1].field === col.field ? 0 : 1,
+              zIndex: data.children && col.field === firstNonGroupColumn?.field ? 11 : undefined,
+              className: (0, _classnames.default)('', {
+                'cell-group': data.children,
+                'cell-group-fixed': data.children && col.field === firstNonGroupColumn?.field
+              })
+            };
+          },
+          render: (value, record, rowIndex) => {
+            if (groupSetting && groupSetting.hiddenColumnGroup === false) {
+              if (record.children) {
+                return (0, _columns.renderContent)(col, value, record, rowIndex, format);
+              }
+              if (groupColumns?.includes(col.field)) {
+                return '';
+              }
+              return (0, _columns.renderContent)(col, value, record, rowIndex, format);
+            }
+            if (col.field === firstNonGroupColumn?.field && record.children) {
+              const currentGroupColumn = (0, _columns.flatColumns2)(cols).find(it => it.field === record.field);
+              return /*#__PURE__*/React.createElement("span", null, currentGroupColumn?.headerText, ": ", (0, _columns.renderContent)(currentGroupColumn, record[record.field], record, rowIndex, format));
+            }
+            return (0, _columns.renderContent)(col, value, record, rowIndex, format);
+          },
+          hidden: groupSetting && groupSetting.hiddenColumnGroup === false ? col.hidden : groupAble && groupColumns && groupColumns.includes(col.field) ? true : col.hidden
+        };
+      });
+    };
+    return convertColumns(cloneColumns);
+  }, [format, getColumnSearchProps, groupAble, groupColumns, groupSetting, handleResize, sortMultiple, t]);
+  return [transformColumns];
+};
+var _default = exports.default = useColumns;

package/lib/grid-component/hooks/utils.d.ts

@@ -4,7 +4,8 @@ import type { EditType, IColumnType, TypeFilter } from "rc-master-ui";
 import type { ColumnEditType, ColumnsType, ColumnTable, GetRowKey } from "../type";
 import type { SelectionSettings } from "../type";
 import type { AnyObject } from "../type";
-import { Key } from "react";
+import type { Key } from "react";
+import type { ColumnsTable } from "../type";
 export declare const newGuid: () => any;
 export declare const sumDataByField: (data: any[], field: string) => any;
 export declare const checkThousandSeparator: (thousandSeparator: string | undefined, decimalSeparator: string | undefined) => string;
@@ -19,6 +20,7 @@ export declare const getAllVisibleKeys: (columns: any[]) => any[];
 export declare const getVisibleColumnKeys: (columns: any[]) => string[];
 export declare function getHiddenParentKeys(columns: any[], parentKeys?: string[]): string[];
 export declare const updateColumns: (columns: any[], includes: string[]) => any[];
+export declare const updateColumnsByGroup: (columns: any[], columnsGroup: string[]) => any[];
 export declare const getDatepickerFormat: (type: EditType | TypeFilter | IColumnType, col: ColumnTable<any>) => string;
 export declare const customWeekStartEndFormat: (value: any, weekFormat: string) => string;
 export declare const getTypeFilter: (col: ColumnTable<any>) => TypeFilter;
@@ -37,3 +39,50 @@ export declare const updateData: <Record_1 = AnyObject>(initData: Record_1[], ro
 export declare const parseBooleanToValue: (value: boolean, type: 'boolean' | 'number') => number | boolean;
 export declare const genPresets: (presets?: import("@ant-design/colors").PalettesProps) => import("antd/es/color-picker/interface").PresetsItem[];
 export declare function findAllChildrenKeys<RecordType>(data: readonly RecordType[], getRowKey: GetRowKey<RecordType>, childrenColumnName: string): Key[];
+export declare const flattenArray: <RecordType extends AnyObject = AnyObject>(arr: any[]) => RecordType[];
+export declare const flattenData: <RecordType extends AnyObject = AnyObject>(childrenColumnName: string, data?: RecordType[]) => RecordType[];
+export declare const countItemsBeforeIndex: (array: any[], index: number) => number;
+export declare const getRowNumber: (array: any[], rowKey: any, key: any) => number;
+export declare const getDefaultValue: (defaultValue: any) => AnyObject;
+export declare const addRowIdArray: (inputArray: any[]) => any[];
+export declare const findItemByKey: (array: any, key: string | number, value: any) => any;
+export declare const getLastSelectCell: (selectCells: any) => {
+    row: number;
+    col: number;
+};
+export declare const getFirstSelectCell: (selectCells: any) => {
+    row: number;
+    col: number;
+};
+export declare const getRowsPasteIndex: (pasteRows: any) => number[];
+export declare const mmm: (string | number | boolean)[][];
+export declare function cloneRows(array: any[], numRows: number): any[];
+export declare function addRows1(arr: any[], n: number): any[];
+export declare function addRows2(arr: any[], n: number): {
+    newArr: any[];
+    addedRows: any[];
+};
+export declare function addRows(arr: any[], n: number): {
+    newArr: any[];
+    addedRows: any[];
+};
+export declare function addRows4(arr: any[], n: number): {
+    newArr: any[];
+    addedRows: any[];
+};
+export declare function addRows6(arr: any, n: number): {
+    newArr: any[];
+    addedRows: any[];
+};
+export declare function addRows7(arr: any, n: number): any;
+export declare function addRows8(arr: any, n: number): {
+    combined: any;
+    addedRows: any[];
+} | {
+    combined: any[];
+    addedRows: any[];
+};
+export declare const transformColumns: <RecordType>(cols: ColumnsTable<RecordType>, convertColumns: any[], t?: any) => ColumnsTable<RecordType>;
+export declare const transformColumns1: <RecordType>(cols: ColumnsTable<RecordType>, sortMultiple?: boolean) => ColumnsTable<RecordType>;
+export declare const removeColumns: <RecordType>(columns: ColumnsTable, groupColumns: string[]) => ColumnsTable<RecordType>;
+export declare const convertFlatColumn: (array: ColumnsTable) => ColumnsTable[];