es-grid-template 1.1.5-3 → 1.1.6

package/es/grid-component/InternalTable.js

@@ -5,9 +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 { booleanOperator, getTypeFilter, numberOperator, stringOperator, translateOption, updateArrayByKey } from "./hooks";
+import { 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';
@@ -56,6 +56,7 @@ const InternalTable = props => {
     onFilterClick,
     editAble,
     rowKey,
+    format,
     onDataChange,
     sortMultiple,
     ...rest
@@ -115,27 +116,23 @@ 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,
           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(operatorOptions, t),
+        options: translateOption(numberOperator, t),
         style: {
           width: '100%',
           marginBottom: 8
@@ -166,17 +163,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,
@@ -194,7 +187,7 @@ const InternalTable = props => {
         }
       }
     }
-  }), [buddhistLocale, dataSourceFilter, onFilterCallback, onFilterClick, t]);
+  }), [onFilterCallback, onFilterClick, renderFilter, t]);
   const handleResize = indexPath => (e, {
     size
   }) => {
@@ -248,7 +241,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,31 +250,52 @@ 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,
+          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);
   };
@@ -300,6 +314,7 @@ const InternalTable = props => {
         cell: allowResizing ? ResizableTitle : undefined
       }
     },
+    format: format,
     columns: mergedColumns
     // columns={columns}
     ,

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 '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,21 +83,6 @@ 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,
@@ -133,7 +105,7 @@ const TableGrid = props => {
     selectionSettings,
     rowSelection,
     rowSelected,
-    rowKey,
+    rowKey = 'id',
     pagination,
     scroll,
     onFilterClick,
@@ -141,7 +113,7 @@ const TableGrid = props => {
     loading,
     triggerChangeColumns,
     summary,
-    getRowKey,
+    showToolbar,
     onSorter,
     ...rest
   } = props;
@@ -151,13 +123,11 @@ const TableGrid = props => {
   const {
     mode,
     type,
-    // checkboxOnly,
+    checkboxOnly,
     hideSelectAll,
     columnWidth,
     selectedRowKeys,
     defaultSelectedRowKeys
-    // getCheckboxProps,
-    // checkStrictly = true
   } = selectionSettings || {};
   const clickRef = useRef(null);
   const menuRef = useRef(null);
@@ -172,10 +142,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 +223,18 @@ const TableGrid = props => {
       });
     }
   };
+  const handleRowClick = () => () => {
+    if (checkboxOnly !== true) {
+      if (type === 'single') {}
+    }
+    if (clickRef.current) return;
+
+    // @ts-ignore
+    clickRef.current = setTimeout(() => {
+      // console.log("Single Click:", record);
+      clickRef.current = null;
+    }, 250);
+  };
   const handleRowDoubleClick = (record, index) => e => {
     if (clickRef.current) {
       clearTimeout(clickRef.current);
@@ -276,10 +263,9 @@ const TableGrid = props => {
           rowData: selectedRow
         });
       } else {
-        // @ts-ignore
         setMergedSelectedKeys(keys);
         rowSelected?.({
-          selected: [selectedRow],
+          selected: selectedRows,
           type: 'rowSelected',
           rowData: selectedRow
         });
@@ -288,8 +274,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: {
@@ -319,7 +303,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 +317,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 +378,48 @@ 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: pagination && pagination.onChange && pagination?.position && pagination?.position[0] === 'topRight' ? `calc(100% - 650px` : `calc(100% - 50px`
         },
         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)));
-    }
-
-    // rowClassName={(record) => (selectionSettings?.getCheckboxProps(record).disabled ? "row-disabled" : "")}
-    ,
-    rowClassName: record => {
-      const originalOnCell = selectionSettings?.getCheckboxProps?.(record) || {};
-      return originalOnCell.disabled ? 'row-disabled' : '';
+      }))));
     }
-  }, rest)), pagination && pagination.onChange && /*#__PURE__*/React.createElement(Pagination
+  }, rest)), 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;

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

@@ -10,29 +10,29 @@ export const numberOperator = [{
   key: '>'
 }, {
   value: 'greaterthanorequal',
-  label: 'Greater than or equal',
+  label: 'Greater Than or Equal',
   key: '>='
 }, {
   value: 'lessthan',
-  label: 'Less than',
+  label: 'Less Than',
   key: '<'
 }, {
   value: 'lessthanorequal',
-  label: 'Less than or equal',
+  label: 'Less Than Or Equal',
   key: '<='
 }, {
   value: 'notequal',
-  label: 'Not equal',
+  label: 'Not Equal',
   key: '!='
 }];
 export const stringOperator = [{
   value: 'startswith',
   key: '_=',
-  label: 'Starts with'
+  label: 'Starts With'
 }, {
   value: 'endswith',
   key: '|=',
-  label: 'Ends with'
+  label: 'Ends With'
 }, {
   value: 'contains',
   key: '~=',
@@ -44,7 +44,7 @@ export const stringOperator = [{
 }, {
   value: 'notequal',
   key: '!=',
-  label: 'Not equal'
+  label: 'Not Equal'
 }];
 export const dateOperator = [{
   value: 'equal',
@@ -53,15 +53,15 @@ export const dateOperator = [{
 }, {
   value: 'notequal',
   key: '!=',
-  label: 'Not equal'
+  label: 'Not Equal'
 }, {
   value: 'greaterthan',
   key: '>',
-  label: 'Greater than'
+  label: 'Greater Than'
 }, {
   value: 'lessthan',
   key: '<',
-  label: 'Less than'
+  label: 'Less Than'
 }];
 export const dateTimeOperator = [{
   value: 'equal',
@@ -70,15 +70,15 @@ export const dateTimeOperator = [{
 }, {
   value: 'notequal',
   key: '!=',
-  label: 'Not equal'
+  label: 'Not Equal'
 }, {
   value: 'greaterthan',
   key: '>',
-  label: 'Greater than'
+  label: 'Greater Than'
 }, {
   value: 'lessthan',
   key: '<',
-  label: 'Less than'
+  label: 'Less Than'
 }];
 export const booleanOperator = [{
   value: 'equal',
@@ -87,7 +87,7 @@ export const booleanOperator = [{
 }, {
   value: 'notequal',
   key: '!=',
-  label: 'Not equal'
+  label: 'Not Equal'
 }];
 export const translateOption = (options, t) => {
   if (!t) {

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

@@ -96,8 +96,8 @@ export const renderContent = (column, value, record, index, format) => {
 export const renderFilter = (column, selectedKeys, setSelectedKeys, confirm, visible, searchValue, setSearchValue, dataSourceFilter, buddhistLocale) => {
   const type = getTypeFilter(column);
   const dateFormat = getDatepickerFormat(column?.typeFilter ?? column?.type, column) ?? 'DD/MM/YYYY';
-  const dateRangeFormat = 'DD/MM/YYYY';
-  const find = dataSourceFilter?.find(it => it.key === (column?.field || column.dataIndex));
+  const dateRangeFormat = getDatepickerFormat(column?.type, column) ?? 'DD/MM/YYYY';
+  const find = dataSourceFilter?.find(it => it.key === column?.key);
   const options = find ? find.data : [];
   switch (type) {
     case 'Number':
@@ -182,8 +182,7 @@ export const renderFilter = (column, selectedKeys, setSelectedKeys, confirm, vis
         format: {
           format: dateRangeFormat,
           type: 'mask'
-        },
-        locale: buddhistLocale
+        }
         // defaultValue={dateRangeValue}
         ,
         value: dateRangeValue,
@@ -405,9 +404,7 @@ export const renderFilter = (column, selectedKeys, setSelectedKeys, confirm, vis
         showFilter: column.showFilterSearch,
         selectedKeys: selectedKeys,
         onSelect: setSelectedKeys,
-        options: options
-        // options={[]}
-        ,
+        options: options,
         filterMultiple: true,
         open: visible,
         searchValue: searchValue,

package/es/grid-component/styles.scss

@@ -506,28 +506,48 @@ $boxShadowColor: rgba(5, 5, 5, 0.09) !default;
   margin: 0;
 }
 
+.ui-rc-table-wrapper {
+  .ui-rc-table {
+    .#{$prefix}-pagination {
+      &::before {
+        content: "";
+        position: absolute;
+        border-left: 1px solid $tableBorderColor;
+        height: 55px;
+        bottom: 0;
+        left: 0;
+      }
 
-.#{$prefix}-pagination {
-  &::before {
-    content: "";
-    position: absolute;
-    border-left: 1px solid $tableBorderColor;
-    height: 55px;
-    bottom: 0;
-    left: 0;
-  }
+      &::after {
+        content: "";
+        position: absolute;
+        border-left: 1px solid $tableBorderColor;
+        height: 55px;
+        bottom: 0;
+        visibility: visible;
+        right: 0;
+      }
 
-  &::after {
-    content: "";
-    position: absolute;
-    border-left: 1px solid $tableBorderColor;
-    height: 55px;
-    bottom: 0;
-    visibility: visible;
-    right: 0;
+      &.top-pagination {
+        border: none;
+        padding-top: 0;
+        padding-bottom: 0;
+        .ui-rc-pagination-total-text {
+          margin-left: auto;
+        }
+      }
+      border-bottom: 1px solid $tableBorderColor;
+
+    }
   }
+}
+
 
-  border-bottom: 1px solid $tableBorderColor;
+.#{$prefix}-pagination {
+
+  .ui-rc-pagination-total-text {
+    white-space: nowrap;
+  }
 
   .#{$prefix}-pagination-item-active {
     border-color: $primary;

package/es/grid-component/table/Grid.d.ts

@@ -1,10 +1,7 @@
 import React from 'react';
-import type { ColumnsTable } from "../type";
-import type { GridTableProps } from "../type";
+import type { ColumnsTable, GridTableProps } from "../type";
 type Props<T> = GridTableProps<T> & {
-    setColumns?: any;
     tableRef: any;
-    getRowKey: any;
     triggerChangeColumns?: (columns: ColumnsTable<T>, type: string) => void;
 };
 declare const Grid: <RecordType extends object>(props: Props<RecordType>) => React.JSX.Element;