@antscorp/antsomi-ui 1.3.5-beta.623 → 1.3.5-beta.624

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

@@ -41,6 +41,8 @@ export type TConfig<TTableType = any> = {
         type: number;
         objectId: number;
     };
+    /** Disable local storage cache  */
+    disabledCache?: boolean;
 };
 type TGeneralTableColumnType<TTableType> = Omit<ColumnType<TTableType>, 'render'> & {
     link?: ((record: TTableType) => string) | string;
@@ -104,6 +106,8 @@ export interface UseDataTableListingProps<TTableType = any, TSearchType = any> {
     };
     search?: TSearchProps<TSearchType>;
     filter?: {
+        /** Init default filters, this filter will show in UI instead of external filters */
+        defaultFilters?: FilterItem[];
         externalFilters?: FilterItem[];
         includeDataType?: boolean;
         matchesAny?: {

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

@@ -78,14 +78,14 @@ export function useDataTableListing(props) {
     // State
     const [state, setState] = useState(initialState);
     // Variables
-    const { env = appConfig === null || appConfig === void 0 ? void 0 : appConfig.env, auth = appConfig === null || appConfig === void 0 ? void 0 : appConfig.auth, api, object } = config;
+    const { env = appConfig === null || appConfig === void 0 ? void 0 : appConfig.env, auth = appConfig === null || appConfig === void 0 ? void 0 : appConfig.auth, api, object, disabledCache } = config;
     const { column: apiColumn, filter: apiFilter, listing: apiListing, search: apiSearch, matchesAny: apiMatchesAny, } = api || {};
     const _d = apiColumn || {}, { url: columnUrl = `${COLUMN_DOMAIN[env || 'development']}/api/column`, enabled: enabledApiColumn = true } = _d, restOfApiColumnRequest = __rest(_d, ["url", "enabled"]);
     const _e = apiFilter || {}, { url: filterUrl = `${COLUMN_DOMAIN[env || 'development']}/api/filter`, enabled: enabledApiFilter = true } = _e, restOfApiFilterRequest = __rest(_e, ["url", "enabled"]);
     const _f = apiListing || {}, { url: listingUrl = '', enabled: enabledApiListing = true } = _f, restOfApiListingRequest = __rest(_f, ["url", "enabled"]);
     const _g = apiSearch || {}, { url: searchUrl = '', enabled: enabledApiSearch = true } = _g, restOfApiSearchRequest = __rest(_g, ["url", "enabled"]);
     const { filters, selectedFilterId, pagination, selectedRowKeys, searchValue, table, sorter, selectedRow, selectedFilterItem, expandedRowKeys, groupBy, modeView, } = state;
-    const { externalFilters, includeDataType = false, matchesAny, formatFilterValue, } = filterProps || {};
+    const { externalFilters, defaultFilters, includeDataType = false, matchesAny, formatFilterValue, } = filterProps || {};
     const { sortDirectionKey = 'az', mainColumnKey, expandColumnKey, expandable } = tableProps || {};
     const { itemProps: gridViewItemProps } = gridViewProps || {};
     const { columnKeys: groupByColumnKeys, defaultSelectedKey: groupByDefaultSelectedKey } = groupByProps || {};
@@ -325,12 +325,21 @@ export function useDataTableListing(props) {
         }
         return children;
     }, [expandColumnKey, expandable, expandedRowKeys, mainColumnKey]);
+    const handleUpdateLocalStorage = useCallback((dataTableLocalStorage) => {
+        if (disabledCache) {
+            return;
+        }
+        const localStorageValues = parseJSONFromLocalStorage(localStorageKey) || {};
+        // Set Local Storage
+        localStorage.setItem(localStorageKey, JSON.stringify(Object.assign(Object.assign({}, localStorageValues), dataTableLocalStorage)));
+    }, [disabledCache, localStorageKey]);
     const handleUpdateGroupBy = useCallback((groupBy) => {
         const localStorageValues = parseJSONFromLocalStorage(localStorageKey) || {};
         setState(prev => (Object.assign(Object.assign({}, prev), { groupBy: Object.assign(Object.assign({}, prev.groupBy), groupBy) })));
-        // Set Local Storage
-        localStorage.setItem(localStorageKey, JSON.stringify(Object.assign(Object.assign({}, localStorageValues), { groupBy: Object.assign(Object.assign({}, localStorageValues.groupBy), groupBy) })));
-    }, [localStorageKey]);
+        handleUpdateLocalStorage({
+            groupBy: Object.assign(Object.assign({}, localStorageValues.groupBy), groupBy),
+        });
+    }, [handleUpdateLocalStorage, localStorageKey]);
     const tableColumns = useDeepCompareMemo(() => {
         let data = [];
         const { columns } = tableProps || {};
@@ -478,6 +487,10 @@ export function useDataTableListing(props) {
      */
     useDeepCompareEffect(() => {
         const { filter, pagination, table, sorter, groupBy } = localStorageValues || {};
+        // If disabled cache then do nothing
+        if (disabledCache) {
+            return;
+        }
         if (!isEmpty(filter)) {
             const { filters, selectedFilterId } = filter || {};
             setState(prev => (Object.assign(Object.assign({}, prev), { selectedFilterId,
@@ -575,30 +588,33 @@ export function useDataTableListing(props) {
         const localStorageValues = parseJSONFromLocalStorage(localStorageKey) || {};
         // Set State
         setState(prev => (Object.assign(Object.assign({}, prev), { pagination: Object.assign(Object.assign({}, prev.pagination), pagination) })));
-        // Set Local Storage
-        localStorage.setItem(localStorageKey, JSON.stringify(Object.assign(Object.assign({}, localStorageValues), { pagination: Object.assign(Object.assign({}, localStorageValues === null || localStorageValues === void 0 ? void 0 : localStorageValues.pagination), pagination) })));
-    }, [localStorageKey]);
+        handleUpdateLocalStorage({
+            pagination: Object.assign(Object.assign({}, localStorageValues === null || localStorageValues === void 0 ? void 0 : localStorageValues.pagination), pagination),
+        });
+    }, [handleUpdateLocalStorage, localStorageKey]);
     const handleUpdateFilter = useCallback((filter) => {
         const localStorageValues = parseJSONFromLocalStorage(localStorageKey) || {};
         // Set State
         setState(prev => (Object.assign(Object.assign(Object.assign({}, prev), filter), { pagination: Object.assign(Object.assign({}, prev.pagination), { page: 1 }) })));
-        // Set Local Storage
-        localStorage.setItem(localStorageKey, JSON.stringify(Object.assign(Object.assign({}, localStorageValues), { filter: Object.assign(Object.assign({}, localStorageValues === null || localStorageValues === void 0 ? void 0 : localStorageValues.filter), filter), 
+        handleUpdateLocalStorage({
+            filter: Object.assign(Object.assign({}, localStorageValues === null || localStorageValues === void 0 ? void 0 : localStorageValues.filter), filter),
             // Reset page to 1
-            pagination: Object.assign(Object.assign({}, localStorageValues === null || localStorageValues === void 0 ? void 0 : localStorageValues.pagination), { page: 1 }) })));
-    }, [localStorageKey]);
+            pagination: Object.assign(Object.assign({}, localStorageValues === null || localStorageValues === void 0 ? void 0 : localStorageValues.pagination), { page: 1 }),
+        });
+    }, [handleUpdateLocalStorage, localStorageKey]);
     const handleUpdateTable = useCallback((table) => {
         const localStorageValues = parseJSONFromLocalStorage(localStorageKey) || {};
         setState(prev => (Object.assign(Object.assign({}, prev), { table: Object.assign(Object.assign({}, prev.table), table) })));
-        // 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]);
+        handleUpdateLocalStorage({
+            table: Object.assign(Object.assign({}, localStorageValues === null || localStorageValues === void 0 ? void 0 : localStorageValues.table), table),
+        });
+    }, [handleUpdateLocalStorage, localStorageKey]);
     const handleUpdateSorter = useCallback((sorter) => {
-        const localStorageValues = parseJSONFromLocalStorage(localStorageKey) || {};
         setState(prev => (Object.assign(Object.assign({}, prev), { sorter })));
-        // Set Local Storage
-        localStorage.setItem(localStorageKey, JSON.stringify(Object.assign(Object.assign({}, localStorageValues), { sorter })));
-    }, [localStorageKey]);
+        handleUpdateLocalStorage({
+            sorter,
+        });
+    }, [handleUpdateLocalStorage]);
     /* Filter */
     const onChangeFilters = useCallback((filters) => {
         handleUpdateFilter({
@@ -689,6 +705,15 @@ export function useDataTableListing(props) {
             fetchNextPage();
         }
     }, [fetchNextPage, isFetchingNextPage]);
+    // Handle Effects
+    /**
+     * Update filters from default filters
+     * */
+    useDeepCompareEffect(() => {
+        if (defaultFilters) {
+            handleUpdateFilter({ filters: defaultFilters || [] });
+        }
+    }, [defaultFilters, handleUpdateFilter]);
     return {
         /* Modify Column */
         modifyColumn: {

package/package.json

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