es-grid-template 1.2.0 → 1.2.2

package/lib/grid-component/table/Group.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { ColumnsTable, GridTableProps } from "../type";
+import type { GetRowKey } from "../type";
+type Props<T> = GridTableProps<T> & {
+    tableRef: any;
+    triggerChangeColumns?: (columns: ColumnsTable<T>, type: string) => void;
+    triggerChangeData?: (newData: T[], type: string) => void;
+    getRowKey: GetRowKey<T>;
+    triggerGroupColumns?: (groupedColumns: string[]) => void;
+    triggerPaste?: (pastedRows: T[], pastedColumnsArray: string[], newData: T[]) => void;
+};
+declare const Group: <RecordType extends object>(props: Props<RecordType>) => React.JSX.Element;
+export default Group;

package/lib/grid-component/table/Group.js

@@ -0,0 +1,163 @@
+"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 _GridStyle = require("../GridStyle");
+var _TableGrid = _interopRequireDefault(require("../TableGrid"));
+var _hooks = require("../hooks");
+var _ColumnsGroup = require("../ColumnsGroup/ColumnsGroup");
+var _columns = require("../hooks/columns");
+var _becoxyIcons = require("becoxy-icons");
+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 {ColumnsTable} from "../type";
+
+const Group = props => {
+  const {
+    t,
+    columns,
+    height,
+    style,
+    rowHoverable,
+    groupAble,
+    expandable,
+    dataSource,
+    getRowKey,
+    groupSetting,
+    groupColumns,
+    triggerGroupColumns,
+    ...rest
+  } = props;
+  const {
+    defaultExpandedRowKeys,
+    defaultExpandAllRows
+  } = expandable || {};
+  const childrenColumnName = 'children';
+  const [innerExpandedKeys, setInnerExpandedKeys] = _react.default.useState(() => {
+    if (defaultExpandedRowKeys) {
+      return defaultExpandedRowKeys;
+    }
+    if (defaultExpandAllRows) {
+      return (0, _hooks.findAllChildrenKeys)(dataSource, getRowKey, childrenColumnName) ?? [];
+    }
+    return [];
+  });
+  const mergedExpandedKeys = _react.default.useMemo(() => new Set(innerExpandedKeys || []), [innerExpandedKeys]);
+  const onTriggerExpand = _react.default.useCallback(record => {
+    const key = getRowKey(record, dataSource.indexOf(record));
+    let newExpandedKeys;
+    const hasKey = mergedExpandedKeys.has(key);
+    if (hasKey) {
+      mergedExpandedKeys.delete(key);
+      newExpandedKeys = [...mergedExpandedKeys];
+    } else {
+      newExpandedKeys = [...mergedExpandedKeys, key];
+    }
+    setInnerExpandedKeys(newExpandedKeys);
+  }, [getRowKey, mergedExpandedKeys, dataSource]);
+  const handleExpandAllGroup = () => {
+    setInnerExpandedKeys((0, _hooks.findAllChildrenKeys)(dataSource, getRowKey, childrenColumnName) ?? []);
+  };
+  const handleCollapseAllGroup = () => {
+    setInnerExpandedKeys([]);
+  };
+  const handleOnGroup = value => {
+    triggerGroupColumns?.(value);
+  };
+  const groupToolbar = () => {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        display: 'flex',
+        gap: '10px',
+        marginRight: 10
+      }
+    }, /*#__PURE__*/_react.default.createElement(_ColumnsGroup.ColumnsGroup, {
+      t: t
+      // defaultGroupColumns={['name']}
+      ,
+      unClearableLevel: groupSetting?.unClearableLevel
+      // unClearableLevel={2}
+      ,
+      columns: columns ? (0, _columns.flatColumns2)(columns) : [],
+      columnsGrouped: groupColumns,
+      onSubmit: handleOnGroup
+    }), /*#__PURE__*/_react.default.createElement(_react.Fragment, null, innerExpandedKeys.length > 0 ? /*#__PURE__*/_react.default.createElement(_becoxyIcons.Collapse2, {
+      fontSize: 18,
+      color: '#555555',
+      onClick: handleCollapseAllGroup
+    }) : /*#__PURE__*/_react.default.createElement(_becoxyIcons.Expand2, {
+      fontSize: 18,
+      color: '#555555',
+      onClick: handleExpandAllGroup
+    })));
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_GridStyle.GridStyle, {
+    heightTable: height,
+    style: {
+      position: 'relative'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_TableGrid.default, (0, _extends2.default)({}, rest, {
+    t: t,
+    columns: columns,
+    style: {
+      ...style,
+      minHeight: height
+    },
+    rowHoverable: rowHoverable ?? true,
+    dataSource: dataSource,
+    getRowKey: getRowKey,
+    groupAble: groupAble,
+    groupSetting: groupSetting,
+    expandable: {
+      expandIconColumnIndex: 3,
+      defaultExpandAllRows: true,
+      indentSize: 25,
+      expandIcon: args => {
+        const {
+          record,
+          expanded,
+          onExpand
+        } = args;
+
+        // @ts-ignore
+        if (record?.children?.length > 0 || record?.isChildren) {
+          return expanded ? /*#__PURE__*/_react.default.createElement("button", {
+            onClick: e => {
+              e.preventDefault();
+              e.stopPropagation();
+              onExpand(record, e);
+              if (groupAble) {
+                onTriggerExpand(record);
+              }
+            },
+            className: 'ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-expanded'
+          }) : /*#__PURE__*/_react.default.createElement("button", {
+            onClick: e => {
+              e.preventDefault();
+              e.stopPropagation();
+              onExpand(record, e);
+              if (groupAble) {
+                onTriggerExpand(record);
+              }
+            },
+            className: 'ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-collapsed'
+          });
+        } else {
+          return /*#__PURE__*/_react.default.createElement("button", {
+            className: 'ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-spaced'
+          });
+        }
+      },
+      expandedRowKeys: groupAble ? innerExpandedKeys : undefined,
+      ...expandable
+    },
+    groupToolbar: groupToolbar,
+    groupColumns: groupColumns
+  }))));
+};
+var _default = exports.default = Group;

package/lib/grid-component/type.d.ts

@@ -82,8 +82,9 @@ export type ToolbarClick = {
     item: any;
     column: any;
 };
-export type ColumnType<RecordType> = Omit<RcColumnType<RecordType>, 'headerTemplate'> & {
+export type ColumnType<RecordType> = Omit<RcColumnType<RecordType>, 'headerTemplate' | 'title'> & {
     field?: string;
+    key?: any;
     type?: IColumnType;
     isSummary?: boolean;
     summaryTemplate?: (data: number, key: string) => ReactElement | ReactNode;
@@ -96,8 +97,11 @@ export type ColumnType<RecordType> = Omit<RcColumnType<RecordType>, 'headerTempl
     placeholder?: string;
     showInColumnChoose?: boolean;
     typeFilter?: TypeFilter;
+    source?: any[];
     showFilterSearch?: boolean;
     headerText?: string;
+    headerTooltip?: boolean | string | (() => ReactNode | ReactElement);
+    columnGroupText?: string;
     textAlign?: ITextAlign;
     frozen?: Frozen;
     template?: ReactNode | ReactElement | ((value: any, record: RecordType, index: number) => ReactNode | ReactElement);
@@ -107,7 +111,7 @@ export type ColumnType<RecordType> = Omit<RcColumnType<RecordType>, 'headerTempl
     commandItems?: CommandItem[];
     children?: ColumnType<RecordType>[];
 };
-export type ColumnEditType<RecordType> = Omit<ColumnType<RecordType>, 'children'> & {
+export type ColumnEditType<RecordType = AnyObject> = Omit<ColumnType<RecordType>, 'children'> & {
     editType?: EditType | ((rowData?: RecordType) => EditType);
     disable?: boolean | ((rowData: any) => boolean);
     isClearable?: boolean;
@@ -126,6 +130,11 @@ export type ColumnTable<RecordType = AnyObject> = ColumnEditType<RecordType> | C
 export type ColumnsTable<RecordType = AnyObject> = (ColumnType<RecordType> | ColumnEditType<RecordType>)[];
 export interface TableProps<RecordType> extends Omit<RcTableProps<RecordType>, 'columns' | 'rowSelection' | 'loading' | 'dataSource' | 'summary'> {
     editAble?: boolean;
+    groupAble?: boolean;
+    groupColumns?: string[];
+    groupSetting?: IGroupSetting;
+    onChooseColumns?: (props: IOnChooseColumns) => void;
+    showCustomTooltip?: boolean;
     sortMultiple?: boolean;
     dataSource: RecordType[];
     columns: ColumnsTable<RecordType>;
@@ -167,13 +176,24 @@ export interface TableProps<RecordType> extends Omit<RcTableProps<RecordType>, '
     allowResizing?: boolean;
     showToolbar?: boolean;
     onDataChange?: (data: RecordType[]) => void;
+    defaultValue?: AnyObject | (() => AnyObject);
     summary?: boolean | ((data: readonly RecordType[]) => React.ReactNode);
 }
 export interface TableEditProps<RecordType = AnyObject> extends Omit<TableProps<RecordType>, 'columns'> {
     columns: ColumnsTable<RecordType>;
     onCellPaste?: ICellPasteModel<RecordType>;
     onCellChange?: (args: CellChangeArgs<RecordType>, handleCallback: (rowData: any, index: any, value?: any) => void) => void;
+    onCellClick?: (args: ICellClick, callback?: any) => void;
 }
+export type ICellClick = {
+    index: number;
+    indexCol?: number;
+    rowId: string | number;
+    type: 'Editing' | 'Default';
+    field: string;
+    cellValue: any;
+    rowData: any;
+};
 export type GridTableProps<RecordType = AnyObject> = TableProps<RecordType> | TableEditProps<RecordType>;
 export interface CommandItem {
     id: string;
@@ -187,6 +207,22 @@ export interface CommandItem {
     client?: boolean;
     confirmDialog?: boolean;
 }
+export type IGroupSetting = {
+    client?: boolean;
+    onGroup?: (props: IOnGroup) => void;
+    hiddenColumnGroup?: boolean;
+    unClearableLevel?: 1 | 2 | 3 | undefined;
+};
+type IOnGroup = {
+    columnGrouped: string[];
+    columns: ColumnsTable;
+    flattenColumns: ColumnsTable;
+};
+export type IOnChooseColumns = {
+    columns: ColumnsTable;
+    showColumns: ColumnsTable;
+    flattenColumns: ColumnsTable;
+};
 export type CellChangeArgs<T> = {
     type: 'onPaste' | 'onChange' | 'onCellPaste';
     value: any;
@@ -250,3 +286,4 @@ export type IFormat = {
 };
 export type GetRowKey<RecordType> = (record: RecordType, index?: number) => Key;
 export type Presets = Required<ColorPickerProps>['presets'][number];
+export {};

package/package.json

@@ -1,105 +1,106 @@
-{
-  "name": "es-grid-template",
-  "version": "1.2.0",
-  "description": "es-grid-template",
-  "keywords": [
-    "react",
-    "react-component",
-    "grid",
-    "table"
-  ],
-  "license": "MIT",
-  "main": "lib/index",
-  "module": "es/index",
-  "files": [
-    "lib",
-    "es",
-    "assets/*.css",
-    "assets/*.less"
-  ],
-  "scripts": {
-    "compile": "father build",
-    "docs:build": "dumi build",
-    "__docs:deploy": "gh-pages -d dist",
-    "lint": "eslint src/ --ext .tsx,.ts,.jsx,.js",
-    "now-build": "npm run docs:build",
-    "prepare": "dumi setup",
-    "prepublishOnly": "npm run compile",
-    "postpublish": "npm run docs:build",
-    "__postpublish": "npm run docs:build && npm run docs:deploy",
-    "start": "dumi dev",
-    "test": "vitest --watch false",
-    "coverage": "vitest run --coverage"
-  },
-  "dependencies": {
-    "@ant-design/colors": "^8.0.0",
-    "@ant-design/cssinjs": "^1.22.0",
-    "@ant-design/cssinjs-utils": "^1.1.1",
-    "@ant-design/icons": "^5.5.2",
-    "@babel/runtime": "^7.11.2",
-    "@core-rc/rc-select": "^0.0.8",
-    "@ctrl/tinycolor": "^3.6.1",
-    "@faker-js/faker": "^9.5.0",
-    "@floating-ui/react": "^0.27.5",
-    "@rc-component/color-picker": "^2.0.1",
-    "@rc-component/father-plugin": "^2.0.1",
-    "@rc-component/trigger": "^2.0.0",
-    "@rc-component/util": "^1.0.1",
-    "@types/react-resizable": "^3.0.8",
-    "@types/styled-components": "^5.1.34",
-    "@vitest/coverage-v8": "^2.0.5",
-    "antd": "^5.24.1",
-    "antd-style": "^3.7.1",
-    "becoxy-icons": "^1.9.9",
-    "classnames": "^2.3.1",
-    "dayjs": "^1.11.13",
-    "lodash": "^4.17.21",
-    "moment": "^2.30.1",
-    "postcss": "^8.4.35",
-    "rc-checkbox": "^3.5.0",
-    "rc-dropdown": "^4.2.1",
-    "rc-field-form": "^2.6.0",
-    "rc-master-ui": "^1.1.15-5",
-    "rc-select": "^14.16.3",
-    "rc-tooltip": "^6.3.0",
-    "rc-tree": "^5.10.1",
-    "rc-tree-select": "^5.24.5",
-    "react-hook-form": "^7.54.2",
-    "react-hot-toast": "^2.5.2",
-    "react-numeric-component": "^1.0.7",
-    "react-resizable": "^3.0.5",
-    "sass": "^1.81.0",
-    "styled-components": "^6.1.15",
-    "throttle-debounce": "^5.0.2",
-    "vitest": "^2.0.5"
-  },
-  "devDependencies": {
-    "@babel/cli": "^7.26.4",
-    "@babel/preset-env": "^7.26.9",
-    "@rc-component/np": "^1.0.3",
-    "@testing-library/react": "^14.0.0",
-    "@types/jest": "^29.4.0",
-    "@types/react": "^18.0.26",
-    "@types/react-dom": "^18.0.10",
-    "@types/warning": "^3.0.0",
-    "cross-env": "^7.0.0",
-    "dumi": "^2.2.13",
-    "eslint": "^8.56.0",
-    "eslint-plugin-unicorn": "^55.0.0",
-    "father": "^4.0.0",
-    "gh-pages": "^3.1.0",
-    "less": "^4.1.1",
-    "np": "^7.1.0",
-    "rc-test": "^7.0.9",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "typescript": "^4.0.5"
-  },
-  "peerDependencies": {
-    "react": ">=16.9.0",
-    "react-dom": ">=16.9.0"
-  },
-  "umi": {
-    "configFile": "config.ts"
-  }
-}
+{
+  "name": "es-grid-template",
+  "version": "1.2.2",
+  "description": "es-grid-template",
+  "keywords": [
+    "react",
+    "react-component",
+    "grid",
+    "table"
+  ],
+  "license": "MIT",
+  "main": "lib/index",
+  "module": "es/index",
+  "files": [
+    "lib",
+    "es",
+    "assets/*.css",
+    "assets/*.scss"
+  ],
+  "scripts": {
+    "__compile": "father build && ",
+    "compile": "father build && sass assets/index.scss assets/index.css",
+    "docs:build": "dumi build",
+    "__docs:deploy": "gh-pages -d dist",
+    "lint": "eslint src/ --ext .tsx,.ts,.jsx,.js",
+    "now-build": "npm run docs:build",
+    "prepare": "dumi setup",
+    "prepublishOnly": "npm run compile",
+    "postpublish": "npm run docs:build",
+    "__postpublish": "npm run docs:build && npm run docs:deploy",
+    "start": "dumi dev",
+    "test": "vitest --watch false",
+    "coverage": "vitest run --coverage"
+  },
+  "dependencies": {
+    "@ant-design/colors": "^8.0.0",
+    "@ant-design/cssinjs": "^1.22.0",
+    "@ant-design/cssinjs-utils": "^1.1.1",
+    "@ant-design/icons": "^5.5.2",
+    "@babel/runtime": "^7.11.2",
+    "@core-rc/rc-select": "^0.0.8",
+    "@ctrl/tinycolor": "^3.6.1",
+    "@faker-js/faker": "^9.5.0",
+    "@floating-ui/react": "^0.27.5",
+    "@rc-component/color-picker": "^2.0.1",
+    "@rc-component/father-plugin": "^2.0.1",
+    "@rc-component/trigger": "^2.0.0",
+    "@rc-component/util": "^1.0.1",
+    "@types/react-resizable": "^3.0.8",
+    "@types/styled-components": "^5.1.34",
+    "@vitest/coverage-v8": "^2.0.5",
+    "antd": "^5.24.1",
+    "antd-style": "^3.7.1",
+    "becoxy-icons": "^2.0.1",
+    "classnames": "^2.3.1",
+    "dayjs": "^1.11.13",
+    "lodash": "^4.17.21",
+    "moment": "^2.30.1",
+    "postcss": "^8.4.35",
+    "rc-checkbox": "^3.5.0",
+    "rc-dropdown": "^4.2.1",
+    "rc-field-form": "^2.6.0",
+    "rc-master-ui": "^1.1.21",
+    "rc-select": "^14.16.3",
+    "rc-tooltip": "^6.3.0",
+    "rc-tree": "^5.10.1",
+    "rc-tree-select": "^5.24.5",
+    "react-hook-form": "^7.54.2",
+    "react-hot-toast": "^2.5.2",
+    "react-numeric-component": "^1.0.7",
+    "react-resizable": "^3.0.5",
+    "sass": "^1.81.0",
+    "styled-components": "^6.1.15",
+    "throttle-debounce": "^5.0.2",
+    "vitest": "^2.0.5"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.26.4",
+    "@babel/preset-env": "^7.26.9",
+    "@rc-component/np": "^1.0.3",
+    "@testing-library/react": "^14.0.0",
+    "@types/jest": "^29.4.0",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.10",
+    "@types/warning": "^3.0.0",
+    "cross-env": "^7.0.0",
+    "dumi": "^2.2.13",
+    "eslint": "^8.56.0",
+    "eslint-plugin-unicorn": "^55.0.0",
+    "father": "^4.0.0",
+    "gh-pages": "^3.1.0",
+    "less": "^4.1.1",
+    "np": "^7.1.0",
+    "rc-test": "^7.0.9",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^4.0.5"
+  },
+  "peerDependencies": {
+    "react": ">=16.9.0",
+    "react-dom": ">=16.9.0"
+  },
+  "umi": {
+    "configFile": "config.ts"
+  }
+}