es-grid-template 1.1.8 → 1.2.1

package/es/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/es/grid-component/table/Group.js

@@ -0,0 +1,154 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React, { Fragment } from 'react';
+import { GridStyle } from "../GridStyle";
+import TableGrid from "../TableGrid";
+// import type {ColumnsTable} from "../type";
+
+import { findAllChildrenKeys } from "../hooks";
+import { ColumnsGroup } from "../ColumnsGroup/ColumnsGroup";
+import { flatColumns2 } from "../hooks/columns";
+import { Collapse2, Expand2 } from "becoxy-icons";
+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.useState(() => {
+    if (defaultExpandedRowKeys) {
+      return defaultExpandedRowKeys;
+    }
+    if (defaultExpandAllRows) {
+      return findAllChildrenKeys(dataSource, getRowKey, childrenColumnName) ?? [];
+    }
+    return [];
+  });
+  const mergedExpandedKeys = React.useMemo(() => new Set(innerExpandedKeys || []), [innerExpandedKeys]);
+  const onTriggerExpand = React.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(findAllChildrenKeys(dataSource, getRowKey, childrenColumnName) ?? []);
+  };
+  const handleCollapseAllGroup = () => {
+    setInnerExpandedKeys([]);
+  };
+  const handleOnGroup = value => {
+    triggerGroupColumns?.(value);
+  };
+  const groupToolbar = () => {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        gap: '10px',
+        marginRight: 10
+      }
+    }, /*#__PURE__*/React.createElement(ColumnsGroup, {
+      t: t
+      // defaultGroupColumns={['name']}
+      ,
+      unClearableLevel: groupSetting?.unClearableLevel
+      // unClearableLevel={2}
+      ,
+      columns: columns ? flatColumns2(columns) : [],
+      columnsGrouped: groupColumns,
+      onSubmit: handleOnGroup
+    }), /*#__PURE__*/React.createElement(Fragment, null, innerExpandedKeys.length > 0 ? /*#__PURE__*/React.createElement(Collapse2, {
+      fontSize: 18,
+      color: '#555555',
+      onClick: handleCollapseAllGroup
+    }) : /*#__PURE__*/React.createElement(Expand2, {
+      fontSize: 18,
+      color: '#555555',
+      onClick: handleExpandAllGroup
+    })));
+  };
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(GridStyle, {
+    heightTable: height,
+    style: {
+      position: 'relative'
+    }
+  }, /*#__PURE__*/React.createElement(TableGrid, _extends({}, 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.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.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.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
+  }))));
+};
+export default Group;

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

@@ -3,12 +3,16 @@ import type React from "react";
 import type { IOperator } from "./hooks";
 import type { TypeFilter, TableProps as RcTableProps, TableColumnType as RcColumnType, EditType } from "rc-master-ui";
 import type { FilterOperator, TableRowSelection } from "rc-master-ui/es/table/interface";
-import type { ToolbarItem } from "rc-master-ui/es/toolbar";
+import type { ToolbarItem as RcToolbarItem } from "rc-master-ui/es/toolbar";
 import type { ItemType } from "rc-master-ui/es/menu/interface";
 import type { FieldNames, FilterFunc } from "rc-select/es/Select";
 import type { ColorPickerProps } from "antd";
 export type IColumnType = "number" | "time" | "date" | "week" | "month" | "file" | "quarter" | "year" | "datetime" | "string" | "boolean" | "checkbox" | "color" | null | undefined;
 export type AnyObject = Record<PropertyKey, any>;
+export type ToolbarItem = Omit<RcToolbarItem, 'position'> & {
+    position?: 'Top' | 'Bottom';
+    onClick?: (args: any) => void;
+};
 export type SelectMode = 'checkbox' | 'radio' | undefined;
 export type ITextAlign = 'center' | 'left' | 'right';
 export type Frozen = 'left' | 'right' | 'Left' | 'Right';
@@ -80,6 +84,7 @@ export type ToolbarClick = {
 };
 export type ColumnType<RecordType> = Omit<RcColumnType<RecordType>, 'headerTemplate'> & {
     field?: string;
+    key?: any;
     type?: IColumnType;
     isSummary?: boolean;
     summaryTemplate?: (data: number, key: string) => ReactElement | ReactNode;
@@ -92,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);
@@ -103,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;
@@ -122,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>;
@@ -163,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;
@@ -183,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;
@@ -246,3 +286,4 @@ export type IFormat = {
 };
 export type GetRowKey<RecordType> = (record: RecordType, index?: number) => Key;
 export type Presets = Required<ColorPickerProps>['presets'][number];
+export {};

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

@@ -2,6 +2,7 @@ import React from "react";
 import type { ColumnsTable } from "./type";
 export type IColumnsChoose<RecordType> = {
     columns: ColumnsTable<RecordType>;
+    columnsGroup?: string[];
     triggerChangeColumns?: (columns: ColumnsTable<RecordType>, type: string) => void;
     t?: any;
 };

package/lib/grid-component/ColumnsChoose.js

@@ -12,6 +12,7 @@ var _icons = require("@ant-design/icons");
 var _hooks = require("./hooks");
 var _tree = _interopRequireDefault(require("rc-master-ui/es/tree"));
 var _SearchOutlined = _interopRequireDefault(require("@ant-design/icons/SearchOutlined"));
+var _useMergedState = _interopRequireDefault(require("rc-util/lib/hooks/useMergedState"));
 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 {TableColumnsType} from "rc-master-ui";
@@ -24,7 +25,8 @@ const ColumnsChoose = props => {
   const {
     columns: propsColumns,
     triggerChangeColumns,
-    t
+    t,
+    columnsGroup
   } = props;
 
   // const dataList: { key: React.Key; title: string }[] = [];
@@ -37,8 +39,10 @@ const ColumnsChoose = props => {
   // const searchRef: any = useRef()
 
   // const [columns, setColumns] = useState<TableColumnsType>([])
-  const [selectedKeys, setSelectedKeys] = (0, _react.useState)([]);
-  const [isManualUpdate, setIsManualUpdate] = (0, _react.useState)(false);
+
+  // const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
+
+  // const [isManualUpdate, setIsManualUpdate] = useState(false);
 
   // useEffect(() => {
   //
@@ -48,24 +52,42 @@ const ColumnsChoose = props => {
   // }, [propsColumns])
 
   const columns = (0, _react.useMemo)(() => {
-    return propsColumns.filter(it => it.key || it.dataIndex && it.showInColumnChoose !== false);
+    // return  propsColumns.filter((it) => (it.key || it.dataIndex) && it.showInColumnChoose !== false && !columnsGroup?.includes(it.field as string))
+    return propsColumns.filter(it => (it.key || it.dataIndex) && it.showInColumnChoose !== false);
     // setColumns(defaultColumns as TableColumnsType)
-  }, [propsColumns]);
-  (0, _react.useEffect)(() => {
-    const defaultColumns = propsColumns.filter(it => it.key || it.dataIndex && it.showInColumnChoose !== false);
-    const defaultSelectedKeys = (0, _hooks.getVisibleColumnKeys)(defaultColumns);
-    if (!isManualUpdate) {
-      setSelectedKeys(defaultSelectedKeys);
-    }
-    setIsManualUpdate(false);
-  }, [propsColumns]);
-  const defaultSelectedKeys = (0, _react.useMemo)(() => {
-    return (0, _hooks.getVisibleColumnKeys)(propsColumns);
-  }, [propsColumns]);
+  }, [columnsGroup, propsColumns]);
+
+  // useEffect(() => {
+  //
+  //   const defaultColumns = propsColumns.filter((it) => it.key || it.dataIndex && it.showInColumnChoose !== false)
+  //
+  //   const defaultSelectedKeys = getVisibleColumnKeys(defaultColumns)
+  //
+  //   if (!isManualUpdate) {
+  //     setSelectedKeys(defaultSelectedKeys)
+  //   }
+  //   setIsManualUpdate(false);
+  //
+  //
+  // }, [isManualUpdate, propsColumns])
+
+  const defaultSelectedKeys = _react.default.useMemo(() => {
+    const rs = propsColumns.filter(it => (it.key || it.dataIndex) && it.showInColumnChoose !== false && !columnsGroup?.includes(it.field));
+    return (0, _hooks.getVisibleColumnKeys)(rs);
+  }, [columnsGroup, propsColumns]);
+  const [mergedSelectedKeys, setMergedSelectedKeys] = (0, _useMergedState.default)(defaultSelectedKeys || [], {
+    value: defaultSelectedKeys
+  });
+
+  //
+  // const defaultSelectedKeys = useMemo(() => {
+  //
+  //   return getVisibleColumnKeys(propsColumns)
+  //
+  // }, [propsColumns])
+
   const [clicked, setClicked] = (0, _react.useState)(false);
   const [autoExpandParent, setAutoExpandParent] = (0, _react.useState)(true);
-  // const [expandedKeys, setExpandedKeys] = useState<React.Key[]>([]);
-  // const [searchValue, setSearchValue] = useState('');
 
   // const treeData = useMemo(() => {
   //   const loop = (data: TreeDataNode[]): TreeDataNode[] =>
@@ -141,16 +163,19 @@ const ColumnsChoose = props => {
     setAutoExpandParent(true);
   };
   const onCheck = keys => {
-    setSelectedKeys(keys);
-    setIsManualUpdate(true);
+    console.log('keys', keys);
+    // setSelectedKeys(keys)
+    setMergedSelectedKeys(keys);
+    // setIsManualUpdate(true)
   };
   const handleAccept = () => {
-    const rs1 = (0, _hooks.updateColumns)(propsColumns, selectedKeys);
+    // const rs1  =  updateColumns(propsColumns, selectedKeys)
+    const rs1 = (0, _hooks.updateColumns)(propsColumns, mergedSelectedKeys);
     triggerChangeColumns?.(rs1, 'columnChoose');
     hide();
   };
   const handleCancel = () => {
-    setSelectedKeys(defaultSelectedKeys);
+    // setSelectedKeys(defaultSelectedKeys)
     hide();
   };
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_antd.Popover, {
@@ -163,7 +188,7 @@ const ColumnsChoose = props => {
       style: {
         marginBottom: 8
       },
-      placeholder: "Search",
+      placeholder: t ? t("Search") : 'Search',
       prefix: /*#__PURE__*/_react.default.createElement(_SearchOutlined.default, null),
       onChange: onChange
     }), /*#__PURE__*/_react.default.createElement(_tree.default, {
@@ -197,12 +222,15 @@ const ColumnsChoose = props => {
       // }}
       ,
       onCheck: keys => onCheck(keys),
-      multiple: true,
-      checkedKeys: selectedKeys,
-      defaultCheckedKeys: selectedKeys
+      multiple: true
+      // checkedKeys={selectedKeys}
+      ,
+
+      defaultCheckedKeys: mergedSelectedKeys
       // defaultCheckedKeys={defaultSelectedKeys}
+      // selectedKeys={[]}
       ,
-      selectedKeys: [],
+
       height: window.innerHeight - 200
     }), /*#__PURE__*/_react.default.createElement(BoxAction, {
       className: 'px-1'
@@ -224,6 +252,13 @@ const ColumnsChoose = props => {
   }, /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
     arrow: false,
     title: 'Cài đặt'
-  }, /*#__PURE__*/_react.default.createElement(_icons.SettingOutlined, null))));
+  }, /*#__PURE__*/_react.default.createElement(_icons.SettingOutlined, {
+    size: 16,
+    color: '#555555',
+    style: {
+      fontSize: 16,
+      color: '#555555'
+    }
+  }))));
 };
 exports.ColumnsChoose = ColumnsChoose;

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

@@ -0,0 +1,12 @@
+import React from "react";
+type IColumnsGroup = {
+    columns: any[];
+    dataSource?: string[];
+    onSubmit: (value: any) => void;
+    t?: any;
+    columnsGrouped?: string[];
+    unClearableLevel?: number;
+    defaultGroupColumns?: string[];
+};
+export declare const ColumnsGroup: (props: IColumnsGroup) => React.JSX.Element;
+export {};