@antscorp/antsomi-ui 1.3.5-beta.414 → 1.3.5-beta.415

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

@@ -22,6 +22,7 @@ const StyledAddButton = styled(Flex) `
   height: 30px;
   background-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.colorPrimary};
   color: #fff;
+  flex-shrink: 0;
   cursor: pointer;
 `;
 export const AddButton = memo(props => {

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

@@ -38,7 +38,13 @@ export const Toolbar = memo(() => {
         if (addButtonComponent) {
             return (React.createElement(React.Fragment, null,
                 addButtonComponent,
-                React.createElement(Divider, { dashed: true, type: "vertical", style: { height: 38, margin: '0px 10px', borderWidth: 2, borderSpacing: 5 } })));
+                React.createElement(Divider, { dashed: true, type: "vertical", style: {
+                        height: 38,
+                        margin: '0px 10px',
+                        borderWidth: 2,
+                        borderSpacing: 5,
+                        borderLeftStyle: 'dotted',
+                    } })));
         }
         return null;
     };
@@ -54,6 +60,7 @@ export const Toolbar = memo(() => {
                         margin: '0px 5px',
                         borderWidth: 2,
                         borderSpacing: 5,
+                        borderLeftStyle: 'dotted',
                     } }),
                 React.createElement(CollapseButton, { "$collapsed": !!collapsed, onClick: () => onCollapse && onCollapse(!collapsed) },
                     React.createElement(Icon, { type: "icon-ants-angle-down", size: 12 })))))) : (React.createElement(FilterActionButton, null))));

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

@@ -47,6 +47,9 @@ export interface UseDataTableListingProps<TTableType = any, TSearchType = any> {
         itemMapKeys: Record<keyof Omit<TSearchItem, 'icon' | 'link'>, keyof TSearchType>;
         render?: (record: TSearchType, index: number, node: ReactNode) => ReactNode;
     };
+    filter?: {
+        externalFilters?: FilterItem[];
+    };
 }
 export interface DataTableLocalStorage {
     filter?: {

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

@@ -54,7 +54,7 @@ const initialState = {
 };
 export function useDataTableListing(props) {
     // Props
-    const { config, name = 'default', table: tableProps, search: searchProps } = props || {};
+    const { config, name = 'default', table: tableProps, search: searchProps, filter: filterProps, } = props || {};
     // Hooks
     const { appConfig } = useAppConfigContext();
     // State
@@ -67,6 +67,7 @@ export function useDataTableListing(props) {
     const _c = apiListing || {}, { url: listingUrl = '', enabled: enabledApiListing = true } = _c, restOfApiListingRequest = __rest(_c, ["url", "enabled"]);
     const _d = apiSearch || {}, { url: searchUrl = '', enabled: enabledApiSearch = true } = _d, restOfApiSearchRequest = __rest(_d, ["url", "enabled"]);
     const { filters, selectedFilterId, pagination, selectedRowKeys, searchValue } = state;
+    const { externalFilters } = filterProps || {};
     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 });
@@ -129,7 +130,7 @@ export function useDataTableListing(props) {
             params: {
                 limit: pagination.pageSize,
                 page: pagination.page,
-                filter: JSON.stringify(mapFiltersToApiFilters(filters || [])),
+                filter: JSON.stringify(mapFiltersToApiFilters([...(filters || []), ...(externalFilters || [])])),
             },
             request: restOfApiListingRequest,
         },
@@ -285,6 +286,12 @@ export function useDataTableListing(props) {
             setState(prev => (Object.assign(Object.assign({}, prev), { pagination })));
         }
     }, [localStorageValues]);
+    // /** Update filters from external filters */
+    // useDeepCompareEffect(() => {
+    //   if (externalFilters) {
+    //     setState(prev => ({ ...prev, filters: [...(filters || []), ...externalFilters] }));
+    //   }
+    // }, [externalFilters]);
     // Handlers
     /* Modify Column */
     const handleUpdatePagination = useCallback((pagination) => {

package/es/constants/queries.d.ts

@@ -28,6 +28,7 @@ export declare const QUERY_KEYS: {
     GET_RECENT_ACCOUNT: string;
     GET_ABSTRACT_USERS: string;
     GET_COLUMN_METRICS: string;
+    GET_DATA_TABLE_LISTING: string;
     GET_MODIFY_COLUMN_LIST: string;
     GET_SAVED_FILTER_LIST: string;
     GET_FILTER_METRIC_LIST: string;

package/es/constants/queries.js

@@ -41,6 +41,7 @@ export const QUERY_KEYS = {
     GET_ABSTRACT_USERS: 'GET_ABSTRACT_USERS',
     // DATA TABLE
     GET_COLUMN_METRICS: 'GET_COLUMN_METRICS',
+    GET_DATA_TABLE_LISTING: 'GET_DATA_TABLE_LISTING',
     GET_MODIFY_COLUMN_LIST: 'GET_MODIFY_COLUMN_LIST',
     GET_SAVED_FILTER_LIST: 'GET_SAVED_FILTER_LIST',
     GET_FILTER_METRIC_LIST: 'GET_FILTER_METRIC_LIST',

package/es/queries/DataTable/index.js

@@ -4,7 +4,7 @@ import { useMutation, useQuery, useQueryClient, } from '@tanstack/react-query';
 import { dataTableServices, } from '../../services/DataTable';
 // Constants
 import { QUERY_KEYS } from '../../constants';
-const { GET_COLUMN_METRICS, GET_MODIFY_COLUMN_LIST, GET_SAVED_FILTER_LIST, GET_FILTER_METRIC_LIST, GET_SEARCH_LIST, } = QUERY_KEYS;
+const { GET_COLUMN_METRICS, GET_MODIFY_COLUMN_LIST, GET_SAVED_FILTER_LIST, GET_FILTER_METRIC_LIST, GET_SEARCH_LIST, GET_DATA_TABLE_LISTING, } = QUERY_KEYS;
 /* Column */
 export const useGetColumnMetrics = (params) => {
     const { args, options } = params;
@@ -80,7 +80,7 @@ export const useDeleteSavedFilter = (params) => {
 /* Table Listing */
 export const useGetTableListing = (params) => {
     const { options, args } = params || {};
-    return useQuery(Object.assign({ queryKey: [GET_FILTER_METRIC_LIST, args === null || args === void 0 ? void 0 : args.params, args === null || args === void 0 ? void 0 : args.request], queryFn: () => dataTableServices.listing.getTableListing(args) }, options));
+    return useQuery(Object.assign({ queryKey: [GET_DATA_TABLE_LISTING, args === null || args === void 0 ? void 0 : args.params, args === null || args === void 0 ? void 0 : args.request], queryFn: () => dataTableServices.listing.getTableListing(args) }, options));
 };
 export const useGetSearchListing = (params) => {
     const { args, options } = params || {};

package/package.json

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