es-grid-template 1.1.6 → 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,7 +5,9 @@ import { Button, Space } from "antd";
 import { SearchOutlined } from "@ant-design/icons";
 import { Resizable } from "react-resizable";
 import customParseFormat from 'dayjs/plugin/customParseFormat';
-import { numberOperator, translateOption, updateArrayByKey } from "./hooks";
+import {
+// findAllChildrenKeys,
+numberOperator, translateOption, updateArrayByKey } from "./hooks";
 import { FilterFill } from "becoxy-icons";
 import { renderContent, renderFilter } from "./hooks/useColumns";
 import dayjs from "dayjs";
@@ -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,6 +54,7 @@ const InternalTable = props => {
     t,
     columns: propsColumns,
     lang,
+    locale,
     dataSource,
     allowResizing,
     dataSourceFilter: propDataSourceFilter,
@@ -59,22 +64,35 @@ const InternalTable = props => {
     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(() => {
@@ -82,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(() => {
@@ -92,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();
   };
@@ -129,7 +160,7 @@ const InternalTable = props => {
           minWidth: 275
         },
         onKeyDown: e => e.stopPropagation()
-      }, (column?.showOperator !== false || column?.typeFilter !== 'DateRange' && column?.typeFilter !== 'NumberRange') && /*#__PURE__*/React.createElement("div", {
+      }, column?.showOperator !== false && column?.typeFilter !== 'DateRange' && column?.typeFilter !== 'NumberRange' && /*#__PURE__*/React.createElement("div", {
         className: 'mb-1'
       }, /*#__PURE__*/React.createElement(Select, {
         options: translateOption(numberOperator, t),
@@ -145,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%'
@@ -187,7 +218,7 @@ const InternalTable = props => {
         }
       }
     }
-  }), [onFilterCallback, onFilterClick, renderFilter, t]);
+  }), [buddhistLocale, dataSourceFilter, onFilterCallback, onFilterClick, t]);
   const handleResize = indexPath => (e, {
     size
   }) => {
@@ -255,6 +286,9 @@ const InternalTable = props => {
       if (["index", "#"].includes(transformedColumn.dataIndex)) {
         return {
           ...transformedColumn,
+          onCell: () => ({
+            className: 'cell-number'
+          }),
           render: (_, __, rowIndex) => rowIndex + 1
         };
       }
@@ -302,13 +336,17 @@ const InternalTable = props => {
   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
@@ -316,7 +354,7 @@ const InternalTable = props => {
     },
     format: format,
     columns: mergedColumns
-    // columns={columns}
+    // defaultColumns={mergedColumns}
     ,
     showSorterTooltip: {
       target: 'sorter-icon'

package/es/grid-component/TableGrid.js

@@ -2,7 +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 { Table, Toolbar } from "rc-master-ui";
+import { Empty, Table, Toolbar } from "rc-master-ui";
 import 'dayjs/locale/es';
 import 'dayjs/locale/vi';
 import ContextMenu from "./ContextMenu";
@@ -88,6 +88,9 @@ const TableGrid = props => {
     columns,
     tableRef,
     dataSource,
+    locale,
+    expandable,
+    // mergedData,
     title,
     format,
     virtual = true,
@@ -133,6 +136,12 @@ const TableGrid = props => {
   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({
@@ -224,6 +233,8 @@ const TableGrid = props => {
     }
   };
   const handleRowClick = () => () => {
+    // const key = getRowKey(record, index);
+
     if (checkboxOnly !== true) {
       if (type === 'single') {}
     }
@@ -231,7 +242,6 @@ const TableGrid = props => {
 
     // @ts-ignore
     clickRef.current = setTimeout(() => {
-      // console.log("Single Click:", record);
       clickRef.current = null;
     }, 250);
   };
@@ -263,6 +273,7 @@ const TableGrid = props => {
           rowData: selectedRow
         });
       } else {
+        // @ts-ignore
         setMergedSelectedKeys(keys);
         rowSelected?.({
           selected: selectedRows,
@@ -294,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)
@@ -389,7 +408,7 @@ const TableGrid = props => {
       // @ts-ignore
       , {
         style: {
-          width: pagination && pagination.onChange && pagination?.position && pagination?.position[0] === 'topRight' ? `calc(100% - 650px` : `calc(100% - 50px`
+          width: `calc(100% - 650px`
         },
         items: toolbarItems ?? [],
         mode: 'scroll'
@@ -412,8 +431,40 @@ const TableGrid = props => {
         t: t,
         triggerChangeColumns: triggerChangeColumns
       }))));
+    },
+    expandable: {
+      expandIconColumnIndex: 3,
+      defaultExpandAllRows: true,
+      indentSize: 25,
+      ...expandable,
+      expandIcon: args => {
+        const {
+          record,
+          expanded,
+          onExpand
+        } = args;
+
+        // @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 && !pagination.position && /*#__PURE__*/React.createElement(Pagination
+  })), pagination && pagination.onChange && !pagination.position && /*#__PURE__*/React.createElement(Pagination
   // style={{padding: '0.75rem 1rem'}}
   , _extends({
     showSizeChanger: true,

package/es/grid-component/hooks/useColumns/index.d.ts

@@ -1,6 +1,7 @@
 import type { ColumnsType, ColumnType, IFormat } from "../../type";
 import React from "react";
+import { TableLocale } from "rc-master-ui/lib/table/interface";
 export declare function flatColumns<RecordType>(columns: ColumnsType<RecordType>, parentKey?: string): ColumnType<RecordType>[];
 export declare const getValueCell: <T>(column: ColumnType<T>, value: any, format?: IFormat) => any;
 export declare const renderContent: <RecordType>(column: ColumnType<RecordType>, value: any, record: RecordType, index: number, format?: IFormat) => React.JSX.Element;
-export declare const renderFilter: <RecordType>(column: ColumnType<RecordType>, selectedKeys: string[], setSelectedKeys: any, confirm: any, visible: boolean, searchValue: string, setSearchValue: any, dataSourceFilter: any[], buddhistLocale: any) => React.JSX.Element;
+export declare const renderFilter: <RecordType>(column: ColumnType<RecordType>, selectedKeys: string[], setSelectedKeys: any, confirm: any, visible: boolean, searchValue: string, setSearchValue: any, dataSourceFilter: any[], buddhistLocale: any, locale?: TableLocale, t?: any) => React.JSX.Element;

package/es/grid-component/hooks/useColumns/index.js

@@ -5,7 +5,7 @@ import { NumericFormat, numericFormatter } from "react-numeric-component";
 import dayjs from "dayjs";
 import moment from "moment/moment";
 import React, { Fragment } from "react";
-import { DatePicker, Input, Select } from "rc-master-ui";
+import { DatePicker, Empty, Input, Select } from "rc-master-ui";
 import CheckboxFilter from "../../CheckboxFilter";
 // import {ColorPicker} from "antd";
 const {
@@ -93,7 +93,7 @@ export const renderContent = (column, value, record, index, format) => {
   const content = getValueCell(column, cellValue, format);
   return /*#__PURE__*/React.createElement(Fragment, null, column?.template ? typeof column.template === "function" ? column.template(value, record, index) : column.template : content);
 };
-export const renderFilter = (column, selectedKeys, setSelectedKeys, confirm, visible, searchValue, setSearchValue, dataSourceFilter, buddhistLocale) => {
+export const renderFilter = (column, selectedKeys, setSelectedKeys, confirm, visible, searchValue, setSearchValue, dataSourceFilter, buddhistLocale, locale, t) => {
   const type = getTypeFilter(column);
   const dateFormat = getDatepickerFormat(column?.typeFilter ?? column?.type, column) ?? 'DD/MM/YYYY';
   const dateRangeFormat = getDatepickerFormat(column?.type, column) ?? 'DD/MM/YYYY';
@@ -136,7 +136,7 @@ export const renderFilter = (column, selectedKeys, setSelectedKeys, confirm, vis
         //   onChangeValueFilter(type, values.floatValue, 'min')
         // }}
         ,
-        placeholder: 'Min',
+        placeholder: t ? t('Min') : 'Min',
         autoFocus: true
       })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(NumericFormat, {
         value: selectedKeys[1]
@@ -149,7 +149,7 @@ export const renderFilter = (column, selectedKeys, setSelectedKeys, confirm, vis
         onValueChange: () => {
           // onChangeValueFilter(type, values.floatValue, 'max')
         },
-        placeholder: 'Max'
+        placeholder: t ? t('Max') : 'Max'
       })))));
     case 'Date':
       const dateValue = selectedKeys[0] ? convertDateToDayjs(new Date(selectedKeys[0]), dateFormat) : null;
@@ -186,7 +186,9 @@ export const renderFilter = (column, selectedKeys, setSelectedKeys, confirm, vis
         // defaultValue={dateRangeValue}
         ,
         value: dateRangeValue,
-        placeholder: ['Ngày bắt đầu', 'Ngày kết thúc'],
+        locale: buddhistLocale
+        // placeholder={['Ngày bắt đầu', 'Ngày kết thúc']}
+        ,
         popupStyle: {
           zIndex: 9999
         },
@@ -337,6 +339,10 @@ export const renderFilter = (column, selectedKeys, setSelectedKeys, confirm, vis
           marginBottom: 8
         },
         value: selectedKeys[0],
+        notFoundContent: /*#__PURE__*/React.createElement(Empty, {
+          image: Empty.PRESENTED_IMAGE_SIMPLE,
+          description: locale?.emptyText
+        }),
         onChange: val => {
           // setOperatorKey(val)
           setSelectedKeys(val ? [val] : []);
@@ -395,13 +401,12 @@ export const renderFilter = (column, selectedKeys, setSelectedKeys, confirm, vis
       return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
         className: 'mb-1'
       }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CheckboxFilter
-      // column={column}
+      // locale={{
+      //   filterTitle: 'Chọn tất cả',
+      //   filterCheckall: 'Chọn tất cả'
+      // }}
       , {
-        locale: {
-          filterTitle: 'Chọn tất cả',
-          filterCheckall: 'Chọn tất cả'
-        },
-        showFilter: column.showFilterSearch,
+        locale: locale,
         selectedKeys: selectedKeys,
         onSelect: setSelectedKeys,
         options: options,
@@ -415,7 +420,7 @@ export const renderFilter = (column, selectedKeys, setSelectedKeys, confirm, vis
       return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
         className: 'mb-1'
       }, /*#__PURE__*/React.createElement(Input, {
-        placeholder: `Search`,
+        placeholder: t ? t('Search') : `Search`,
         value: selectedKeys[0],
         onChange: e => setSelectedKeys(e.target.value ? [e.target.value] : [])
         // onPressEnter={() => handleSearch(selectedKeys as string[], confirm)}

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

@@ -1,9 +1,10 @@
 import type * as React from "react";
 import dayjs from "dayjs";
 import type { EditType, IColumnType, TypeFilter } from "rc-master-ui";
-import type { ColumnEditType, ColumnsType, ColumnTable } from "../type";
+import type { ColumnEditType, ColumnsType, ColumnTable, GetRowKey } from "../type";
 import type { SelectionSettings } from "../type";
 import type { AnyObject } from "../type";
+import { Key } from "react";
 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;
@@ -35,3 +36,4 @@ export declare const getColumnsVisible: <T>(columns: ColumnsType<T>, index: numb
 export declare const updateData: <Record_1 = AnyObject>(initData: Record_1[], rows: Record_1[], key: keyof Record_1) => Record_1[];
 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[];

package/es/grid-component/hooks/utils.js

@@ -328,4 +328,15 @@ export const genPresets = (presets = presetPalettes) => {
     colors,
     key: label
   }));
-};
+};
+export function findAllChildrenKeys(data, getRowKey, childrenColumnName) {
+  const keys = [];
+  function dig(list) {
+    (list || []).forEach((item, index) => {
+      keys.push(getRowKey(item, index));
+      dig(item[childrenColumnName]);
+    });
+  }
+  dig(data);
+  return keys;
+}