@antscorp/antsomi-ui 1.3.5-beta.426 → 1.3.5-beta.427

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

@@ -16,7 +16,7 @@ import { cloneDeep } from 'lodash';
 import { useShallow } from 'zustand/react/shallow';
 // Components
 import { ResizableCell } from './ResizableCell';
-import { Spin } from '@antscorp/antsomi-ui/es/components/atoms';
+import { Spin, Icon } from '@antscorp/antsomi-ui/es/components/atoms';
 // Hooks
 import { useDeepCompareEffect } from '@antscorp/antsomi-ui/es/hooks';
 // Styled
@@ -25,12 +25,13 @@ import { StyledTable } from './styled';
 import { useDataTableContext } from '../../contexts/DataTableContext';
 // Constants
 import { DEFAULT_COLUMN_WIDTH, DEFAULT_COLUMN_WIDTHS, DEFAULT_ROW_SELECTION_WIDTH, } from '../../constants';
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 export const Table = memo(() => {
-    var _a, _b;
+    var _a;
     // Store
     const tableProps = useDataTableContext(useShallow(store => store.table));
     const setTable = useDataTableContext(useShallow(store => store.setTable));
-    const _c = tableProps || {}, { rowSelection } = _c, restOfTable = __rest(_c, ["rowSelection"]);
+    const _b = tableProps || {}, { rowSelection } = _b, restOfTable = __rest(_b, ["rowSelection"]);
     // State
     const [state, setState] = useState({
         columns: [],
@@ -63,12 +64,12 @@ export const Table = memo(() => {
                     }) }));
             });
         }
-    }, [(_a = tableProps.columns) === null || _a === void 0 ? void 0 : _a.map(col => col.width), columnWidths]);
+    }, [tableProps.columns, columnWidths]);
     return (React.createElement(ConfigProvider, { theme: { token: { motion: false } } },
-        React.createElement(StyledTable, Object.assign({}, restOfTable, { virtual: true, ref: ref => {
+        React.createElement(StyledTable, Object.assign({}, restOfTable, { ref: ref => {
                 tableRef.current = ref === null || ref === void 0 ? void 0 : ref.nativeElement;
             }, scroll: Object.assign(Object.assign({}, scroll), { y: (scroll === null || scroll === void 0 ? void 0 : scroll.y) || '500px', x: (scroll === null || scroll === void 0 ? void 0 : scroll.x) || '100%' }), components: {
-                header: Object.assign({ cell: ResizableCell }, (_b = tableProps === null || tableProps === void 0 ? void 0 : tableProps.components) === null || _b === void 0 ? void 0 : _b.header),
+                header: Object.assign({ cell: ResizableCell }, (_a = tableProps === null || tableProps === void 0 ? void 0 : tableProps.components) === null || _a === void 0 ? void 0 : _a.header),
             } }, (Array.isArray(tableProps === null || tableProps === void 0 ? void 0 : tableProps.dataSource) &&
             (tableProps === null || tableProps === void 0 ? void 0 : tableProps.dataSource.length) &&
             !!rowSelection && {
@@ -79,7 +80,12 @@ export const Table = memo(() => {
                     });
                     (_a = rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.onChange) === null || _a === void 0 ? void 0 : _a.call(rowSelection, selectedRowKeys, selectedRows, info);
                 } }),
-        }), { columns: columns === null || columns === void 0 ? void 0 : columns.map((col, index) => (Object.assign(Object.assign({}, col), { onHeaderCell: (column) => ({
+        }), { columns: columns === null || columns === void 0 ? void 0 : columns.map((col, index) => (Object.assign(Object.assign({}, col), { sortIcon(props) {
+                    const { sortOrder } = props;
+                    if (!sortOrder)
+                        return null;
+                    return (React.createElement(Icon, { type: `icon-ants-${sortOrder === 'ascend' ? 'arrow-up-square' : 'arrow-down-square'}`, size: 16, color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8 }));
+                }, onHeaderCell: (column) => ({
                     tableRef,
                     disableResize: index === ((columns === null || columns === void 0 ? void 0 : columns.length) || 1) - 1,
                     fixed: column.fixed,

package/es/components/organism/DataTable/constants/theme.js

@@ -10,6 +10,7 @@ export const DATA_TABLE_THEME = {
             headerBg: '#F9F9F9',
             fontWeightStrong: 700,
             cellPaddingBlock: 10,
+            cellPaddingInline: 10,
             borderColor: '#E5E5E5',
             rowHoverBg: '#DEEFFE',
             borderRadius: 0,

package/es/components/organism/DataTable/hooks/useDataTableListing/types.d.ts

@@ -5,6 +5,7 @@ import { FilterItem, TSearchActionButton, TSearchItem, TableProps } from '../../
 import { PaginationProps } from '../../components';
 import { ColumnType } from 'antd/es/table';
 import { ReactNode } from 'react';
+import { SorterResult } from 'antd/es/table/interface';
 export type TApiGlobal = AxiosRequestConfig<any> & {
     enabled?: boolean;
 };
@@ -28,6 +29,7 @@ type TGeneralTableColumnType<TTableType> = Omit<ColumnType<TTableType>, 'render'
 };
 type TToggleColumnType<TTableType> = TGeneralTableColumnType<TTableType> & {
     value?: ((record: TTableType) => boolean) | boolean;
+    disabled?: ((record: TTableType) => boolean) | boolean;
     valueKey?: keyof TTableType;
     onChange?: (checked: boolean, record: TTableType) => void;
 };
@@ -40,6 +42,7 @@ export interface UseDataTableListingProps<TTableType = any, TSearchType = any> {
         columns?: {
             [K in keyof TTableType | 'toggle']?: TTableColumnType<TTableType, K>;
         };
+        sortDirectionKey?: string;
     };
     search?: Partial<Pick<TSearchActionButton, 'addFilterInfo' | 'isClientSearch' | 'isAddFilterFromSearchItem' | 'onClickSearchItem'>> & {
         link?: ((record: TSearchType) => string) | string;
@@ -59,5 +62,6 @@ export interface DataTableLocalStorage<TTableType = any> {
     };
     table?: TableProps<TTableType>;
     pagination?: PaginationProps;
+    sorter?: SorterResult<TTableType>;
 }
 export {};

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

@@ -75,6 +75,7 @@ export function useDataTableListing(props) {
     const _f = apiSearch || {}, { url: searchUrl = '', enabled: enabledApiSearch = true } = _f, restOfApiSearchRequest = __rest(_f, ["url", "enabled"]);
     const { filters, selectedFilterId, pagination, selectedRowKeys, searchValue, table, sorter, selectedRow, } = state;
     const { externalFilters, includeDataType = false } = filterProps || {};
+    const { sortDirectionKey = 'az' } = tableProps || {};
     const modifyColumnAuth = Object.assign(Object.assign({}, auth), { url: columnUrl });
     const filterAuth = Object.assign(Object.assign({}, auth), { url: filterUrl });
     const listingAuth = Object.assign(Object.assign({}, auth), { url: listingUrl });
@@ -140,7 +141,7 @@ export function useDataTableListing(props) {
             params: Object.assign({ limit: pagination.pageSize, page: pagination.page, filter: JSON.stringify(mapFiltersToApiFilters([...(filters || []), ...(externalFilters || [])], includeDataType)), columns: JSON.stringify(((_b = (_a = modifyColumnsData === null || modifyColumnsData === void 0 ? void 0 : modifyColumnsData.find(modifyColumnItem => modifyColumnItem.modifyColId === modifyColumnSelected)) === null || _a === void 0 ? void 0 : _a.columns) === null || _b === void 0 ? void 0 : _b.map(col => { var _a; return (_a = col.metricCode) === null || _a === void 0 ? void 0 : _a.toUpperCase(); })) || []) }, ((sorter === null || sorter === void 0 ? void 0 : sorter.order) &&
                 (sorter === null || sorter === void 0 ? void 0 : sorter.columnKey) && {
                 sort: sorter.columnKey.toString(),
-                az: SORT_MAP[sorter.order],
+                [sortDirectionKey]: SORT_MAP[sorter.order],
             })),
             request: restOfApiListingRequest,
         },
@@ -239,15 +240,16 @@ export function useDataTableListing(props) {
         const { columns } = tableProps || {};
         // Check if has column toggle then add toggle switch column
         if (columns === null || columns === void 0 ? void 0 : columns.toggle) {
-            const { key, dataIndex, valueKey, title, value, onChange } = columns.toggle || {};
+            const { key, dataIndex, valueKey, title, value, disabled, onChange } = columns.toggle || {};
             data.push(Object.assign(Object.assign({ key: 'toggle' || key, fixed: 'left', align: 'center', dataIndex: 'toggle' || dataIndex, title: 'Toggle' || title, width: DEFAULT_TOGGLE_WIDTH }, columns.toggle), { render: (_, record) => {
                     const checked = value
                         ? typeof value === 'function'
                             ? value(record)
                             : value
                         : !!record[valueKey];
+                    const switchDisabled = typeof disabled === 'function' ? disabled(record) : disabled;
                     return (React.createElement(Flex, { align: "center", justify: "center" },
-                        React.createElement(Switch, { checked: checked, onChange: checked => {
+                        React.createElement(Switch, { checked: checked, disabled: switchDisabled, onChange: checked => {
                                 if (onChange) {
                                     onChange(checked, record);
                                 }
@@ -256,7 +258,7 @@ export function useDataTableListing(props) {
         }
         data = data.concat((tableHeader === null || tableHeader === void 0 ? void 0 : tableHeader.map(headerCol => {
             const { name, label, fixColumn, sortable } = headerCol;
-            return Object.assign(Object.assign({ key: name, dataIndex: name, title: label, fixed: fixColumn ? 'left' : undefined, sorter: !!sortable }, columns === null || columns === void 0 ? void 0 : columns[name]), { render(value, record, index) {
+            return Object.assign(Object.assign({ key: name, dataIndex: name, title: label, fixed: fixColumn ? 'left' : undefined, sorter: !!sortable, sortOrder: (sorter === null || sorter === void 0 ? void 0 : sorter.columnKey) === name ? sorter === null || sorter === void 0 ? void 0 : sorter.order : undefined }, columns === null || columns === void 0 ? void 0 : columns[name]), { render(value, record, index) {
                     var _a;
                     const { link } = (columns === null || columns === void 0 ? void 0 : columns[name]) || {};
                     const RenderComponent = (React.createElement(Text, { ellipsis: { tooltip: true }, style: Object.assign({}, (link
@@ -275,7 +277,7 @@ export function useDataTableListing(props) {
                 } });
         })) || []);
         return data;
-    }, [tableHeader, tableProps]);
+    }, [tableHeader, tableProps, sorter]);
     const tableData = useDeepCompareMemo(() => (tableBody === null || tableBody === void 0 ? void 0 : tableBody.map((row) => (Object.assign(Object.assign({}, row), { key: row === null || row === void 0 ? void 0 : row[tableProps === null || tableProps === void 0 ? void 0 : tableProps.mainColumnKey] })))) || [], [tableBody]);
     const searchList = useDeepCompareMemo(() => {
         const { itemMapKeys, icon, link } = searchProps || {};
@@ -286,7 +288,7 @@ export function useDataTableListing(props) {
      * Update values from local storage to state
      */
     useDeepCompareEffect(() => {
-        const { filter, pagination, table } = localStorageValues || {};
+        const { filter, pagination, table, sorter } = localStorageValues || {};
         if (!isEmpty(filter)) {
             const { filters, selectedFilterId } = filter || {};
             setState(prev => (Object.assign(Object.assign({}, prev), { selectedFilterId,
@@ -298,6 +300,9 @@ export function useDataTableListing(props) {
         if (!isEmpty(table)) {
             setState(prev => (Object.assign(Object.assign({}, prev), { table })));
         }
+        if (!isEmpty(sorter)) {
+            setState(prev => (Object.assign(Object.assign({}, prev), { sorter })));
+        }
     }, [localStorageValues]);
     // /** Update filters from external filters */
     // useDeepCompareEffect(() => {
@@ -394,6 +399,11 @@ export function useDataTableListing(props) {
         // Set Local Storage
         localStorage.setItem(localStorageKey, JSON.stringify(Object.assign(Object.assign({}, localStorageValues), { table: Object.assign(Object.assign({}, localStorageValues === null || localStorageValues === void 0 ? void 0 : localStorageValues.table), table) })));
     }, [localStorageKey, localStorageValues]);
+    const handleUpdateSorter = useCallback((sorter) => {
+        setState(prev => (Object.assign(Object.assign({}, prev), { sorter })));
+        // Set Local Storage
+        localStorage.setItem(localStorageKey, JSON.stringify(Object.assign(Object.assign({}, localStorageValues), { sorter })));
+    }, [localStorageKey, localStorageValues]);
     const onChangeFilters = useCallback((filters) => {
         handleUpdateFilter({
             filters,
@@ -451,9 +461,9 @@ export function useDataTableListing(props) {
     /* Table */
     const onChangeTable = useCallback((_pagination, _filters, sorter, _extra) => {
         if (sorter) {
-            setState(prev => (Object.assign(Object.assign({}, prev), { sorter })));
+            handleUpdateSorter(sorter);
         }
-    }, []);
+    }, [handleUpdateSorter]);
     /* Pagination */
     const onChangePagination = useCallback(({ page, pageSize }) => {
         handleUpdatePagination({

package/es/services/DataTable/index.d.ts

@@ -80,6 +80,7 @@ export type TGetTableListingArgs = {
         filter?: string;
         sort?: string;
         az?: string;
+        sortDirection?: string;
     };
     request?: AxiosRequestConfig<any>;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.426",
+  "version": "1.3.5-beta.427",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",