@antscorp/antsomi-ui 1.3.5-beta.921 → 1.3.5-beta.922

package/es/components/organism/DataTable/hooks/index.d.ts

@@ -1,2 +1,3 @@
 export * from './useDataTable';
 export * from './useDataTableListing';
+export { useCDPTable } from './useCDPTable/useCDPTable';

package/es/components/organism/DataTable/hooks/index.js

@@ -1,2 +1,3 @@
 export * from './useDataTable';
 export * from './useDataTableListing';
+export { useCDPTable } from './useCDPTable/useCDPTable';

package/es/components/organism/DataTable/hooks/useCDPTable/useCDPTable.d.ts

@@ -0,0 +1,58 @@
+import { PaginationProps, TableProps } from 'antd';
+import { FilterProps } from '../../../Filter';
+import { TColumnActionButton, TGridViewActionButton, TGroupByActionButton, TSearchActionButton } from '../../types';
+import { useGetColumnMetrics, useGetFilterMetricList, useGetModifyColumnList, useGetSavedFilterList, useGetSearchListing, useGetTableListing } from '@antscorp/antsomi-ui/es/queries';
+import { UseDataTableListingProps } from '../useDataTableListing/types';
+import React from 'react';
+export declare const getColumnWidthsState: (key: any) => any;
+export declare const setColumnWidthsState: (key: any, value: any) => void;
+interface TUseDataTableListing<TTableType = any> {
+    modifyColumn: TColumnActionButton;
+    filter: FilterProps;
+    pagination: PaginationProps;
+    table: TableProps<TTableType>;
+    search: TSearchActionButton;
+    gridView: TGridViewActionButton;
+    groupBy: TGroupByActionButton;
+    /**
+     * This selectedRowKeys is deprecated. Use selectedRow.keys instead.
+     * @deprecated
+     */
+    selectedRowKeys: React.Key[];
+    selectedRow: {
+        keys: React.Key[];
+        rows: TTableType[];
+    };
+    queries: {
+        getTableListing: ReturnType<typeof useGetTableListing>;
+        getModifyColumnList: ReturnType<typeof useGetModifyColumnList>;
+        getSavedFilterList: ReturnType<typeof useGetSavedFilterList>;
+        getColumnMetrics: ReturnType<typeof useGetColumnMetrics>;
+        getFilterMetricList: ReturnType<typeof useGetFilterMetricList>;
+        getSearchListing: ReturnType<typeof useGetSearchListing>;
+    };
+    /**
+     * Function to refetch table listing
+     * @returns void
+     */
+    refetchTableListing: () => void;
+    onChangeSelectedRow: (selectedRowKeys: React.Key[], selectedRows?: TTableType[]) => void;
+    setDatTableListingState: React.Dispatch<React.SetStateAction<any>>;
+}
+interface ExtendCDPTableProps {
+    columns: any;
+    data: any;
+    selectedRows: any;
+    expanded: any;
+    initSortBy: any;
+    moduleConfig: any;
+    isSelectedAll: any;
+    isTableSelectCurrentPage: any;
+    maxSelectedRows: any;
+    noCheckboxAction: any;
+    setSelectedRow: any;
+    sizeCheckbox: any;
+    onSelectAllPage: any;
+}
+export declare const useCDPTable: <TTableType extends Object = Record<string, any>, TSearchType = any>(props: UseDataTableListingProps<TTableType, TSearchType> & ExtendCDPTableProps) => TUseDataTableListing<TTableType>;
+export {};

package/es/components/organism/DataTable/hooks/useCDPTable/useCDPTable.js

@@ -0,0 +1,126 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useSticky } from 'react-table-sticky';
+// import { useReactTable } from '@tanstack/react-table';
+import { useTable, useFlexLayout, useResizeColumns, useSortBy, useExpanded } from 'react-table';
+import { safeParse } from '@antscorp/antsomi-ui/es/utils';
+import React from 'react';
+import { Checkbox } from '@antscorp/antsomi-ui/es/components/atoms';
+// import { TState } from '@antscorp/antsomi-ui/es/components/molecules/SelectAccount/type';
+export const getColumnWidthsState = key => safeParse(JSON.parse(localStorage.getItem(`column-widths-${key}`) || ''), {});
+export const setColumnWidthsState = (key, value) => localStorage.setItem(`column-widths-${key}`, JSON.stringify(value));
+const CellCheckbox = React.forwardRef((props, ref) => {
+    const defaultRef = React.useRef();
+    const resolvedRef = ref || defaultRef;
+    const { selectedRows, original, isSelectedAll, maxSelectedRows, setSelectedRow } = props;
+    // React.useEffect(() => {}, [resolvedRef, props]);
+    // console.log('--- CellCheckbox', selectedRows, original);
+    // isNotChecked ???
+    const isChecked = !selectedRows.has(original.id);
+    const onCheckBox = () => {
+        // console.log('onChange', { original, isChecked });
+        setSelectedRow({ original, isChecked });
+    };
+    // disable khi row chưa có trong max selectedRows && maxSelectedRows == size
+    const disabled = (isChecked && maxSelectedRows === selectedRows.size) || original.disabledCheckbox;
+    return (_jsx(Checkbox, { onClick: onCheckBox, checked: selectedRows.has(original.id) || isSelectedAll, disabled: disabled, ref: resolvedRef }));
+});
+const HeaderCheckbox = React.forwardRef((props, ref) => {
+    const defaultRef = React.useRef();
+    const resolvedRef = ref || defaultRef;
+    const { data, selectedRows, limit, isTableSelectCurrentPage, maxSelectedRows, global, disabledHeaderCheckbox, onSelectAllPage, } = props;
+    // check quyen disable permission
+    const { disabledCheckBoxAll = false } = global;
+    // disable khi có props maxSelectedRows và chưa có row nào được select
+    const disabled = (selectedRows.size === 0 && !!maxSelectedRows) || disabledCheckBoxAll;
+    const onCheckBox = () => {
+        let isChecked = false;
+        const countDisableCheckbox = data.filter(row => row.disabledCheckbox).length;
+        const limitTable = limit - countDisableCheckbox;
+        // nếu có props maxSelectedRows => luôn cho isCheck là false (bỏ check all)
+        if (selectedRows.size === limitTable || !!maxSelectedRows) {
+            isChecked = false;
+        }
+        else {
+            isChecked = true;
+        }
+        props.onSelectAllPage({ data, isChecked });
+    };
+    return (
+    // <WrapperDisable disabled={data.length === 0}>
+    _jsx(Checkbox, { type: "checkbox", 
+        // selecting={selectedRows.size > 0 && selectedRows.size !== limit}
+        onClick: onCheckBox, checked: isTableSelectCurrentPage, onChange: () => { }, ref: resolvedRef, disabled: disabledHeaderCheckbox || disabled })
+    // </WrapperDisable>
+    );
+});
+export const useCDPTable = (props) => {
+    const { config, name = 'default', table: tableProps, search: searchProps, filter: filterProps, gridView: gridViewProps, groupBy: groupByProps, queryOptions, columns, data, selectedRows, expanded: initSortByProps, initSortBy, moduleConfig, isSelectedAll, isTableSelectCurrentPage, maxSelectedRows, noCheckboxAction, setSelectedRow, sizeCheckbox, onSelectAllPage, } = props || {};
+    // const {
+    //   getTableProps,
+    //   getTableBodyProps,
+    //   headerGroups,
+    //   footerGroups,
+    //   prepareRow,
+    //   visibleColumns,
+    //   rows,
+    //   state: { sortBy, columnResizing, expanded },
+    // } = useTable(
+    const result = useTable({
+        columns,
+        autoResetResize: false,
+        data,
+        selectedRows,
+        initialState: {
+            expanded: initSortByProps,
+            sortBy: initSortBy, // cai này đang gây ra lỗi
+            columnResizing: {
+                columnWidths: getColumnWidthsState(moduleConfig.key),
+            },
+        },
+        manualSortBy: true,
+        disableSortRemove: true,
+        autoResetSelectedRows: false,
+        autoResetExpanded: false,
+        manualRowSelectedKey: true,
+        isSelectedAll,
+        isTableSelectCurrentPage,
+        limit: data.length,
+        maxSelectedRows,
+        // defaultExpanded: { 1: true },
+    }, useFlexLayout, useResizeColumns, useSortBy, useSticky, useExpanded, hooks => {
+        hooks.visibleColumns.push(columnsHook => {
+            if (noCheckboxAction) {
+                return columnsHook;
+            }
+            return [
+                {
+                    id: 'selection',
+                    Header: ({ ...headerProps }) => (_jsx("div", { children: _jsx(HeaderCheckbox, { ...{
+                                ...headerProps,
+                                onSelectAllPage,
+                                global,
+                            } }) })),
+                    // return (
+                    // <div>
+                    //   <HeaderCheckbox
+                    //     {...{
+                    //       ...headerProps,
+                    //       onSelectAllPage,
+                    //       global,
+                    //     }}
+                    //     disabledHeaderCheckbox={disabledHeaderCheckbox}
+                    //   />
+                    // </div>
+                    // );
+                    // },
+                    width: sizeCheckbox,
+                    className: 'hiden-expanded-style',
+                    // eslint-disable-next-line no-shadow
+                    Cell: ({ row: { original }, selectedRows, isSelectedAll, maxSelectedRows }) => (_jsx("div", { children: _jsx(CellCheckbox, { selectedRows: selectedRows, isSelectedAll: isSelectedAll, setSelectedRow: setSelectedRow, original: original, maxSelectedRows: maxSelectedRows }) })),
+                },
+                ...columnsHook,
+            ];
+        });
+    });
+    return result;
+};

package/es/components/organism/DataTable/index.d.ts

@@ -1,5 +1,5 @@
 export { DataTable } from './DataTable';
 export type { DataTableProps, TableProps as DataTableTable, TSearchItem } from './types';
 export type { FilterMetricItem as FilterMetic } from '../Filter';
-export { useDataTableListing } from './hooks';
+export { useDataTableListing, useCDPTable } from './hooks';
 export { CDP_DATA_TABLE_SAMPLE, METRICS as FILTER_METRICS } from './constants';

package/es/components/organism/DataTable/index.js

@@ -1,5 +1,5 @@
 export { DataTable } from './DataTable';
 // Hooks
-export { useDataTableListing } from './hooks';
+export { useDataTableListing, useCDPTable } from './hooks';
 // Constants
 export { CDP_DATA_TABLE_SAMPLE, METRICS as FILTER_METRICS } from './constants';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.921",
+  "version": "1.3.5-beta.922",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",
@@ -78,6 +78,7 @@
     "@swiper/core": "^0.0.21",
     "@tanstack/react-query": "4.20.4",
     "@tanstack/react-query-devtools": "4.20.4",
+    "@tanstack/react-table": "^8.20.5",
     "@tinymce/tinymce-react": "^3.7.0",
     "@types/currency-formatter": "1.5.1",
     "@types/react-custom-scrollbars": "^4.0.13",
@@ -126,6 +127,8 @@
     "react-markdown": "^8.0.7",
     "react-resizable": "^3.0.5",
     "react-syntax-highlighter": "^15.5.0",
+    "react-table": "7.2.2",
+    "react-table-sticky": "1.1.2",
     "react-virtualized-auto-sizer": "^1.0.24",
     "react-window": "^1.8.10",
     "rehype-highlight": "^6.0.0",