es-grid-template 1.1.5 → 1.1.7

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

@@ -11,7 +11,7 @@ type Props = {
     showFilter?: boolean;
     onSelect?: (value: any) => void;
     selectedKeys: string[];
-    locale: TableLocale;
+    locale?: TableLocale;
     filterMode?: 'menu' | 'tree';
     searchValue: string;
     setSearchValue: (value: any) => void;

package/es/grid-component/CheckboxFilter.js

@@ -106,7 +106,7 @@ const CheckboxFilter = props => {
   });
   const empty = /*#__PURE__*/React.createElement(Empty, {
     image: Empty.PRESENTED_IMAGE_SIMPLE,
-    description: locale.filterEmptyText,
+    description: locale?.filterEmptyText,
     imageStyle: {
       height: 24
     },
@@ -193,7 +193,7 @@ const CheckboxFilter = props => {
       indeterminate: selectedKeys.length > 0 && selectedKeys.length < flattenKeys(options).length,
       className: `${tablePrefixCls}-filter-dropdown-checkall`,
       onChange: onCheckAll
-    }, locale.filterCheckall) : /*#__PURE__*/React.createElement(Empty, null), /*#__PURE__*/React.createElement(Tree, {
+    }, locale?.filterCheckall) : /*#__PURE__*/React.createElement(Empty, null), /*#__PURE__*/React.createElement(Tree, {
       checkable: true,
       selectable: false,
       blockNode: true,

package/es/grid-component/ContextMenu.js

@@ -94,9 +94,7 @@ const ContextMenu = props => {
           items: contextMenuItems,
           style: {
             minWidth: 200,
-            maxWidth: 400,
-            maxHeight: pos.viewportHeight - 20,
-            width: 200
+            maxHeight: pos.viewportHeight - 20
           },
           rootClassName: 'popup-context-menu',
           onClick: e => {

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

@@ -6,7 +6,7 @@ interface FilterSearchProps<RecordType = AnyObject> {
     onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
     filterSearch: FilterSearchType<RecordType>;
     tablePrefixCls: string;
-    locale: TableLocale;
+    locale?: TableLocale;
 }
 declare const FilterSearch: <RecordType extends AnyObject = AnyObject>(props: FilterSearchProps<RecordType>) => React.JSX.Element;
 export default FilterSearch;

package/es/grid-component/FilterSearch.js

@@ -20,7 +20,7 @@ const FilterSearch = props => {
     }
   }, /*#__PURE__*/React.createElement(Input, {
     suffix: /*#__PURE__*/React.createElement(SearchOutlined, null),
-    placeholder: locale.filterSearchPlaceholder,
+    placeholder: locale?.filterSearchPlaceholder,
     onChange: onChange,
     value: value,
     autoFocus: true

package/es/grid-component/InternalTable.js

@@ -5,9 +5,11 @@ import { Button, Space } from "antd";
 import { SearchOutlined } from "@ant-design/icons";
 import { Resizable } from "react-resizable";
 import customParseFormat from 'dayjs/plugin/customParseFormat';
-import { booleanOperator, getTypeFilter, numberOperator, stringOperator, translateOption, updateArrayByKey } from "./hooks";
+import {
+// findAllChildrenKeys,
+numberOperator, translateOption, updateArrayByKey } from "./hooks";
 import { FilterFill } from "becoxy-icons";
-import { renderFilter } from "./hooks/useColumns";
+import { renderContent, renderFilter } from "./hooks/useColumns";
 import dayjs from "dayjs";
 import 'dayjs/locale/es';
 import 'dayjs/locale/vi';
@@ -16,6 +18,8 @@ import vi from 'rc-master-ui/es/date-picker/locale/vi_VN';
 import "./styles.scss";
 import GridEdit from "./table/GridEdit";
 import Grid from "./table/Grid";
+// import useMergedState from "rc-util/lib/hooks/useMergedState";
+
 dayjs.extend(customParseFormat);
 const ResizableTitle = props => {
   const {
@@ -50,30 +54,45 @@ const InternalTable = props => {
     t,
     columns: propsColumns,
     lang,
+    locale,
     dataSource,
     allowResizing,
     dataSourceFilter: propDataSourceFilter,
     onFilterClick,
     editAble,
     rowKey,
+    format,
     onDataChange,
     sortMultiple,
+    expandable,
     ...rest
   } = props;
-  const locale = lang && lang === 'en' ? en : vi;
+  const local = lang && lang === 'en' ? en : vi;
   const buddhistLocale = {
-    ...locale,
+    ...local,
     lang: {
-      ...locale.lang
+      ...local.lang
     }
   };
+
+  // const [mergedColumns, setMergedColumns] = useMergedState(
+  //   propsColumns,
+  //   {
+  //     value: propsColumns,
+  //   },
+  // );
+
+  // console.log('mergedColumns', mergedColumns)
+
   const tableRef = useRef(null);
-  const [data, setData] = useState(dataSource);
+  const [data, setData] = useState([]);
   const [columns, setColumns] = useState([]);
   const [isManualUpdate, setIsManualUpdate] = useState(false);
+  // const [expandKeys, setExpandKeys] = useState<string[]>([]);
   const [dataSourceFilter, setDataSourceFilter] = useState(propDataSourceFilter ?? []);
   useEffect(() => {
     const rs = propsColumns ? [Table.SELECTION_COLUMN, ...propsColumns] : [];
+    // const  rs = propsColumns ? [...propsColumns] : []
     setColumns(rs);
   }, [propsColumns]);
   useEffect(() => {
@@ -81,7 +100,14 @@ const InternalTable = props => {
       setData(dataSource || []);
     }
     setIsManualUpdate(false);
-  }, [dataSource]);
+  }, [dataSource, isManualUpdate]);
+
+  // const [columns, setColumns] = useMergedState(
+  //   propsColumns ? [Table.SELECTION_COLUMN, ...propsColumns] : [],
+  //   {
+  //     value: propsColumns ? [Table.SELECTION_COLUMN, ...propsColumns] : [],
+  //   },
+  // );
 
   // ============================ RowKey ============================
   const getRowKey = React.useMemo(() => {
@@ -91,6 +117,12 @@ const InternalTable = props => {
     // @ts-ignore
     return record => record?.[rowKey];
   }, [rowKey]);
+
+  // useEffect(() => {
+  //   const rrr = findAllChildrenKeys<any>(dataSource, getRowKey, 'children');
+  //   setExpandKeys(rrr as any)
+  // }, [dataSource, getRowKey])
+
   const handleSearch = (selectedKeys, confirm) => {
     confirm();
   };
@@ -115,17 +147,13 @@ const InternalTable = props => {
       setSelectedKeys,
       selectedKeys,
       confirm,
-      // close,
+      close,
       setOperatorKey,
       operatorKey,
       visible,
       searchValue,
       setSearchValue
     }) => {
-      const type = 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') ? booleanOperator : !type || type === 'Text' ? stringOperator : numberOperator;
       return /*#__PURE__*/React.createElement("div", {
         style: {
           padding: 8,
@@ -135,7 +163,7 @@ const InternalTable = props => {
       }, column?.showOperator !== false && column?.typeFilter !== 'DateRange' && column?.typeFilter !== 'NumberRange' && /*#__PURE__*/React.createElement("div", {
         className: 'mb-1'
       }, /*#__PURE__*/React.createElement(Select, {
-        options: translateOption(operatorOptions, t),
+        options: translateOption(numberOperator, t),
         style: {
           width: '100%',
           marginBottom: 8
@@ -148,7 +176,7 @@ const InternalTable = props => {
         style: {
           marginBottom: 8
         }
-      }, renderFilter(column, selectedKeys, setSelectedKeys, confirm, visible, searchValue, setSearchValue, dataSourceFilter, buddhistLocale)), /*#__PURE__*/React.createElement(Space, {
+      }, renderFilter(column, selectedKeys, setSelectedKeys, confirm, visible, searchValue, setSearchValue, dataSourceFilter, buddhistLocale, locale, t)), /*#__PURE__*/React.createElement(Space, {
         style: {
           justifyContent: 'end',
           width: '100%'
@@ -166,17 +194,13 @@ const InternalTable = props => {
         style: {
           width: 90
         }
-      }, t ? t('Filter') : 'Filter'), /*#__PURE__*/React.createElement(Button, {
+      }, "Filter"), /*#__PURE__*/React.createElement(Button, {
         type: "link",
         size: "small",
         onClick: () => {
-          // setSearchValue('')
-          setSelectedKeys([]);
-          confirm();
-          // handleSearch()
-          // close()
+          close();
         }
-      }, t ? t("Clear") : 'Clear')));
+      }, "close")));
     },
     filterIcon: filtered => /*#__PURE__*/React.createElement(FilterFill, {
       fontSize: 12,
@@ -248,7 +272,7 @@ const InternalTable = props => {
         key: col.field ?? col.dataIndex ?? col.key,
         title: t ? t(col.headerText ?? col.title) : col.headerText ?? col.title,
         ellipsis: col.ellipsis !== false,
-        align: col.textAlign ?? col.align ?? col.type === 'number' ? 'right' : undefined,
+        align: col.textAlign ?? col.align,
         fixed: col.frozen ? col.frozen.toLowerCase() : col.fixed
       };
       if (col.children) {
@@ -257,51 +281,80 @@ const InternalTable = props => {
           children: transformColumns(col.children, currentPath)
         };
       }
-      if (col.dataIndex === 'index' || col.field === 'index' || col.dataIndex === '#' || col.field === '#' || col.allowFiltering === false || col.field === 'command') {
+
+      // @ts-ignore
+      if (["index", "#"].includes(transformedColumn.dataIndex)) {
         return {
-          ...transformedColumn
+          ...transformedColumn,
+          onCell: () => ({
+            className: 'cell-number'
+          }),
+          render: (_, __, rowIndex) => rowIndex + 1
+        };
+      }
+      if (col.field === 'command') {
+        return {
+          ...transformedColumn,
+          onCell: () => ({
+            className: col.field === 'command' ? "ui-rc-cell-command" : ''
+          }),
+          onHeaderCell: () => ({
+            width: col.width,
+            onResize: handleResize(currentPath)
+          })
         };
       }
       return {
-        ...getColumnSearchProps(col),
+        ...(col.allowFiltering === false ? {} : {
+          ...getColumnSearchProps(col)
+        }),
         ...transformedColumn,
         onFilter: value => {
           return value;
         },
-        sorter: {
+        sorter: col.sorter === false ? undefined : {
           compare: a => a,
           multiple: sortMultiple ? index : undefined
         },
         onHeaderCell: () => ({
           width: col.width,
           onResize: handleResize(currentPath)
-        })
+        }),
+        render: (value, record, rowIndex) => renderContent(col, value, record, rowIndex, format)
       };
     });
-  }, [getColumnSearchProps, sortMultiple, t]);
+  }, [getColumnSearchProps]);
   const mergedColumns = React.useMemo(() => {
     return transformColumns(columns);
   }, [transformColumns, columns]);
+
+  // console.log('mergedColumns', mergedColumns)
+
   const triggerChangeColumns = newColumns => {
     setColumns(newColumns);
   };
   const triggerChangeData = newData => {
     setIsManualUpdate(true);
     setData(newData);
+    // setMergedData(newData)
     onDataChange?.(newData);
   };
   const TableComponent = editAble ? GridEdit : Grid;
   return /*#__PURE__*/React.createElement(TableComponent, _extends({}, rest, {
     t: t,
+    locale: locale,
     tableRef: tableRef,
-    dataSource: data,
+    dataSource: data
+    // mergedData={mergedData}
+    ,
     components: {
       header: {
         cell: allowResizing ? ResizableTitle : undefined
       }
     },
+    format: format,
     columns: mergedColumns
-    // columns={columns}
+    // defaultColumns={mergedColumns}
     ,
     showSorterTooltip: {
       target: 'sorter-icon'

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

@@ -6,7 +6,6 @@ type GridProps<T> = GridTableProps<T> & {
     triggerChangeColumns?: (columns: ColumnsTable<T>, type: string) => void;
     triggerChangeData?: () => void;
     tableRef: any;
-    getRowKey: any;
 };
 declare const TableGrid: <RecordType extends object>(props: GridProps<RecordType>) => React.JSX.Element;
 export default TableGrid;

package/es/grid-component/TableGrid.js

@@ -2,12 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { Fragment, useLayoutEffect, useRef } from 'react';
 import { createStyles } from 'antd-style';
 import { numericFormatter } from "react-numeric-component";
-// import type {CheckboxProps} from "rc-master-ui";
-import { Table, Toolbar } from "rc-master-ui";
-// import { conductCheck } from 'rc-tree/lib/utils/conductUtil';
-// import { devUseWarning } from '../../_util/warning';
-// import { arrAdd, arrDel } from 'rc-tree/lib/util';
-
+import { Empty, Table, Toolbar } from "rc-master-ui";
 import 'dayjs/locale/es';
 import 'dayjs/locale/vi';
 import ContextMenu from "./ContextMenu";
@@ -20,15 +15,7 @@ import { flatColumns } from "./hooks/useColumns";
 import Pagination from "rc-master-ui/es/pagination";
 import ComponentSpinner from "./LoadingSpinner";
 import { ColumnsChoose } from "./ColumnsChoose";
-// import {useMergedState} from "rc-util";
 import useMergedState from "rc-util/es/hooks/useMergedState";
-// import {convertDataToEntities} from "rc-tree/lib/utils/treeUtil";
-// import type {DataNode} from "rc-tree/lib/interface";
-// import {devUseWarning} from "antd/es/_util/warning";
-// import type {GetCheckDisabled} from "rc-tree/es/interface";
-// import useLazyKVMap from "antd/es/table/hooks/useLazyKVMap";
-// import useMultipleSelect from "rc-master-ui/es/_util/hooks/useMultipleSelect";
-
 const convertFilters = filters => {
   const result = [];
   filters.forEach(({
@@ -96,26 +83,14 @@ const useStyle = createStyles(({
 // type OnChange = NonNullable<TableProps<any>['onChange']>;
 
 const EMPTY_LIST = [];
-
-// const flattenData = <RecordType extends AnyObject = AnyObject>(
-//   childrenColumnName: keyof RecordType,
-//   data?: RecordType[],
-// ): RecordType[] => {
-//   let list: RecordType[] = [];
-//   (data || []).forEach((record) => {
-//     list.push(record);
-//     if (record && typeof record === 'object' && childrenColumnName in record) {
-//       list = [...list, ...flattenData<RecordType>(childrenColumnName, record[childrenColumnName])];
-//     }
-//   });
-//   return list;
-// };
-
 const TableGrid = props => {
   const {
     columns,
     tableRef,
     dataSource,
+    locale,
+    expandable,
+    // mergedData,
     title,
     format,
     virtual = true,
@@ -133,7 +108,7 @@ const TableGrid = props => {
     selectionSettings,
     rowSelection,
     rowSelected,
-    rowKey,
+    rowKey = 'id',
     pagination,
     scroll,
     onFilterClick,
@@ -141,7 +116,7 @@ const TableGrid = props => {
     loading,
     triggerChangeColumns,
     summary,
-    getRowKey,
+    showToolbar,
     onSorter,
     ...rest
   } = props;
@@ -151,18 +126,22 @@ const TableGrid = props => {
   const {
     mode,
     type,
-    // checkboxOnly,
+    checkboxOnly,
     hideSelectAll,
     columnWidth,
     selectedRowKeys,
     defaultSelectedRowKeys
-    // getCheckboxProps,
-    // checkStrictly = true
   } = selectionSettings || {};
   const clickRef = useRef(null);
   const menuRef = useRef(null);
   const viewportWidth = window.innerWidth;
   const viewportHeight = window.innerHeight;
+
+  // const defaultSelected = useMemo(() => {
+  //   return defaultSelectedRowKeys ?? []
+  //
+  // }, [defaultSelectedRowKeys])
+
   const [menuVisible, setMenuVisible] = React.useState(false);
   const [selectedRowData, setSelectedRowData] = React.useState(null);
   const [position, setPosition] = React.useState({
@@ -172,10 +151,15 @@ const TableGrid = props => {
     viewportHeight
   });
 
+  // const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>(defaultSelected);
+
   // ========================= Keys =========================
   const [mergedSelectedKeys, setMergedSelectedKeys] = useMergedState(selectedRowKeys || defaultSelectedRowKeys || EMPTY_LIST, {
     value: selectedRowKeys
   });
+
+  // Reset if rowSelection reset
+
   React.useEffect(() => {
     if (!selectionSettings) {
       setMergedSelectedKeys(EMPTY_LIST);
@@ -248,6 +232,19 @@ const TableGrid = props => {
       });
     }
   };
+  const handleRowClick = () => () => {
+    // const key = getRowKey(record, index);
+
+    if (checkboxOnly !== true) {
+      if (type === 'single') {}
+    }
+    if (clickRef.current) return;
+
+    // @ts-ignore
+    clickRef.current = setTimeout(() => {
+      clickRef.current = null;
+    }, 250);
+  };
   const handleRowDoubleClick = (record, index) => e => {
     if (clickRef.current) {
       clearTimeout(clickRef.current);
@@ -279,7 +276,7 @@ const TableGrid = props => {
         // @ts-ignore
         setMergedSelectedKeys(keys);
         rowSelected?.({
-          selected: [selectedRow],
+          selected: selectedRows,
           type: 'rowSelected',
           rowData: selectedRow
         });
@@ -288,8 +285,6 @@ const TableGrid = props => {
   };
   const handleChange = sorter => {
     onSorter?.(sorter);
-    // setFilteredInfo(filters);
-    // setSortedInfo(sorter as Sorts);
   };
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(ConfigProvider, {
     theme: {
@@ -310,7 +305,15 @@ const TableGrid = props => {
     contextMenuClick: contextMenuClick,
     rowData: selectedRowData
   }), /*#__PURE__*/React.createElement(Table, _extends({
-    ref: tableRef,
+    ref: tableRef
+  }, rest, {
+    locale: {
+      ...locale,
+      emptyText: /*#__PURE__*/React.createElement(Empty, {
+        image: Empty.PRESENTED_IMAGE_SIMPLE,
+        description: locale?.emptyText
+      })
+    },
     loading: {
       spinning: columns && columns.length === 0 || loading === true,
       indicator: /*#__PURE__*/React.createElement(ComponentSpinner, null)
@@ -319,7 +322,7 @@ const TableGrid = props => {
     // className={styles.customTable}
     ,
     className: classNames(className, {
-      'table-none-column-select': mode === undefined && type !== 'multiple'
+      'table-none-column-select': selectionSettings?.mode === undefined && selectionSettings?.type !== 'multiple'
     }, styles.customTable),
     bordered: true,
     virtual: virtual,
@@ -333,18 +336,17 @@ const TableGrid = props => {
     onRow: (data, index) => {
       return {
         onDoubleClick: handleRowDoubleClick(data, index),
-        // onClick: handleRowClick(data, index),
+        // onClick: handleRowClick,
+        onClick: handleRowClick(),
         onContextMenu: onContextMenu(data)
       };
     },
     rowSelection: {
       ...selectionSettings,
-      type: mode === 'checkbox' || type === 'multiple' ? 'checkbox' : "radio",
+      type: selectionSettings?.mode === 'checkbox' || type === 'multiple' ? 'checkbox' : "radio",
       columnWidth: !mode ? 0.0000001 : columnWidth ?? 50,
       onChange: onSelectChange,
       // selectedRowKeys: mode === 'checkbox' && type === 'single' ? selectedRowKeys : undefined,
-      // selectedRowKeys: mode === 'checkbox' && type === 'single' ? mergedSelectedKeys : undefined,
-
       selectedRowKeys: mergedSelectedKeys,
       defaultSelectedRowKeys: selectionSettings?.defaultSelectedRowKeys,
       preserveSelectedRowKeys: true,
@@ -395,43 +397,80 @@ const TableGrid = props => {
       onFilter?.(convertFilters(val));
     },
     onChange: (paging, filters, sorter) => handleChange(sorter),
-    title: () => {
-      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, title?.(dataSource)), (toolbarItems || showColumnChoose !== false) && /*#__PURE__*/React.createElement("div", {
+    title: showToolbar === false ? undefined : () => {
+      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, title?.(dataSource)), /*#__PURE__*/React.createElement("div", {
         style: {
           display: 'flex',
-          justifyContent: 'space-between'
+          justifyContent: 'space-between',
+          alignItems: 'center'
         }
-      }, /*#__PURE__*/React.createElement(Toolbar, {
+      }, toolbarItems && toolbarItems?.length > 0 && /*#__PURE__*/React.createElement(Toolbar
+      // @ts-ignore
+      , {
         style: {
-          width: '100%'
+          width: `calc(100% - 650px`
         },
         items: toolbarItems ?? [],
-        mode: 'responsive'
-        // mode={'scroll'}
-        // onClick={(val: any) => {
-        // }}
-      }), showColumnChoose && /*#__PURE__*/React.createElement(ColumnsChoose, {
+        mode: 'scroll'
+      }), /*#__PURE__*/React.createElement("div", {
+        style: {
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center'
+        }
+      }, pagination && pagination.onChange && pagination?.position && pagination?.position[0] === 'topRight' && /*#__PURE__*/React.createElement(Pagination, _extends({
+        showSizeChanger: true,
+        responsive: true,
+        size: 'small',
+        rootClassName: 'top-pagination'
+        // @ts-ignore
+        ,
+        showTotal: (total, range) => `${range[0]}-${range[1]} / ${total} ${t ? t(pagination?.locale?.items ?? 'items') : 'items'}`
+      }, pagination)), showColumnChoose && /*#__PURE__*/React.createElement(ColumnsChoose, {
         columns: columns,
         t: t,
         triggerChangeColumns: triggerChangeColumns
-      }), /*#__PURE__*/React.createElement("div", null)));
-    }
+      }))));
+    },
+    expandable: {
+      expandIconColumnIndex: 3,
+      defaultExpandAllRows: true,
+      indentSize: 25,
+      ...expandable,
+      expandIcon: args => {
+        const {
+          record,
+          expanded,
+          onExpand
+        } = args;
 
-    // rowClassName={(record) => (selectionSettings?.getCheckboxProps(record).disabled ? "row-disabled" : "")}
-    ,
-    rowClassName: record => {
-      const originalOnCell = selectionSettings?.getCheckboxProps?.(record) || {};
-      return originalOnCell.disabled ? 'row-disabled' : '';
+        // @ts-ignore
+        if (record?.children && record?.children?.length > 0 || record?.isChildren) {
+          return expanded ? /*#__PURE__*/React.createElement("button", {
+            onClick: e => {
+              e.preventDefault();
+              e.stopPropagation();
+              onExpand(record, e);
+            },
+            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);
+            },
+            className: 'ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-collapsed'
+          });
+        }
+      }
     }
-  }, rest)), pagination && pagination.onChange && /*#__PURE__*/React.createElement(Pagination
+  })), pagination && pagination.onChange && !pagination.position && /*#__PURE__*/React.createElement(Pagination
   // style={{padding: '0.75rem 1rem'}}
   , _extends({
     showSizeChanger: true,
     responsive: true,
-    size: 'small'
-    // @ts-ignore
-    ,
-    showTotal: (total, range) => `${range[0]}-${range[1]} / ${total} ${t ? t(pagination?.locale?.items ?? 'items') : 'items'}`
+    size: 'small',
+    showTotal: (total, range) => `${range[0]}-${range[1]} / ${total} items`
   }, pagination))));
 };
 export default TableGrid;