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

package/es/components/molecules/AccountSelection/AccountListing.js

@@ -44,5 +44,5 @@ export const AccountListing = React.forwardRef((props, ref) => {
                     accountData.filter(account => !(recentData === null || recentData === void 0 ? void 0 : recentData.value.includes(account.userId)) &&
                         searchStringQuery(account.userName, searchValue)).map(account => (React.createElement(AccountItem, { key: account.userId, userName: account.userName, userId: account.userId, onClick: handleSelectAccount, isSelected: +currentAccount === account.userId })))))),
         showAllAccount ? (React.createElement(Text, { className: `all-account ${isAllAccount ? 'is-selected' : ''}`, onClick: () => handleSelectAccount('all') },
-            React.createElement("strong", null, "All account"))) : null));
+            React.createElement("strong", null, "All accounts"))) : null));
 });

package/es/components/molecules/AccountSelection/AccountSelection.js

@@ -31,7 +31,7 @@ export const AccountSelection = props => {
     useEffect(() => {
         var _a;
         const newLabel = currentAccount === 'all'
-            ? 'All account'
+            ? 'All accounts'
             : ((_a = accountData === null || accountData === void 0 ? void 0 : accountData.find(account => account.userId === +currentAccount)) === null || _a === void 0 ? void 0 : _a.userName) || '';
         setInputLabel(newLabel);
     }, [currentAccount, accountData]);

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/es/components/template/TemplateListing/components/CategoryListing/styled.js

@@ -98,6 +98,9 @@ export const CustomLabelStyled = styled.div `
       span:nth-child(2) {
         flex: 1 1 0%;
         overflow: auto;
+        & > span {
+          vertical-align: middle;
+        }
       }
     }
   }

package/package.json

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