@codella-software/react 2.2.27 → 2.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/filters-and-sort/useFiltersAndSort.d.ts +103 -20
- package/dist/filters-and-sort/useFiltersAndSort.d.ts.map +1 -1
- package/dist/index.cjs +273 -52
- package/dist/index.cjs.map +1 -1
- package/dist/index.mjs +274 -53
- package/dist/index.mjs.map +1 -1
- package/package.json +2 -2
|
@@ -1,37 +1,76 @@
|
|
|
1
|
-
import { FiltersAndSortService } from '@codella-software/utils';
|
|
1
|
+
import { FiltersAndSortService, FilterAndSortState, SortDirection } from '@codella-software/utils';
|
|
2
|
+
/**
|
|
3
|
+
* Configuration for creating a new FiltersAndSortService instance
|
|
4
|
+
*/
|
|
5
|
+
export interface FiltersAndSortConfig<T extends Record<string, any> = Record<string, any>> {
|
|
6
|
+
/** Unique storage key for persistence */
|
|
7
|
+
storageKey: string;
|
|
8
|
+
/** Whether to persist state to storage (default: true) */
|
|
9
|
+
persistToStorage?: boolean;
|
|
10
|
+
/** Initial state override */
|
|
11
|
+
initialState?: Partial<FilterAndSortState<T>>;
|
|
12
|
+
/** Default filter values used when clearing filters */
|
|
13
|
+
defaultFilters?: T;
|
|
14
|
+
/** Skip hydrating state from storage on init */
|
|
15
|
+
skipStorageHydration?: boolean;
|
|
16
|
+
/** Debounce time for storage persistence in ms (default: 300) */
|
|
17
|
+
storageDebounceMs?: number;
|
|
18
|
+
/** Optional storage key prefix */
|
|
19
|
+
storageKeyPrefix?: string;
|
|
20
|
+
}
|
|
2
21
|
/**
|
|
3
22
|
* Hook options for useFiltersAndSort
|
|
4
23
|
*/
|
|
5
|
-
export interface UseFiltersAndSortOptions {
|
|
6
|
-
/** FiltersAndSortService instance */
|
|
7
|
-
service
|
|
24
|
+
export interface UseFiltersAndSortOptions<T extends Record<string, any> = Record<string, any>> {
|
|
25
|
+
/** An existing FiltersAndSortService instance to use */
|
|
26
|
+
service?: FiltersAndSortService<T>;
|
|
27
|
+
/** Configuration to create a new service instance (mutually exclusive with service) */
|
|
28
|
+
config?: FiltersAndSortConfig<T>;
|
|
29
|
+
/** Enable debug logging */
|
|
30
|
+
debug?: boolean;
|
|
31
|
+
/** Custom equality function for state comparison */
|
|
32
|
+
isEqual?: (prev: FilterAndSortState<T>, next: FilterAndSortState<T>) => boolean;
|
|
8
33
|
}
|
|
9
34
|
/**
|
|
10
35
|
* Hook return value for useFiltersAndSort
|
|
11
36
|
*/
|
|
12
|
-
export interface UseFiltersAndSortReturn {
|
|
37
|
+
export interface UseFiltersAndSortReturn<T extends Record<string, any> = Record<string, any>> {
|
|
13
38
|
/** Current filter state */
|
|
14
|
-
filters:
|
|
39
|
+
filters: T;
|
|
15
40
|
/** Current sort field */
|
|
16
41
|
sortBy: string | null;
|
|
17
42
|
/** Current sort direction */
|
|
18
|
-
sortDirection:
|
|
43
|
+
sortDirection: SortDirection;
|
|
19
44
|
/** Current page (0-based) */
|
|
20
45
|
page: number;
|
|
21
46
|
/** Page size */
|
|
22
47
|
pageSize: number;
|
|
23
48
|
/** Current search query */
|
|
24
49
|
query: string;
|
|
25
|
-
/**
|
|
26
|
-
|
|
27
|
-
/**
|
|
28
|
-
|
|
29
|
-
/**
|
|
50
|
+
/** Full state object for advanced use cases */
|
|
51
|
+
state: FilterAndSortState<T>;
|
|
52
|
+
/** Set a single filter value */
|
|
53
|
+
setFilter: <K extends keyof T>(key: K, value: T[K]) => void;
|
|
54
|
+
/** Set multiple filters at once */
|
|
55
|
+
setFilters: (filters: Partial<T>) => void;
|
|
56
|
+
/** Clear a specific filter */
|
|
57
|
+
clearFilter: <K extends keyof T>(key: K) => void;
|
|
58
|
+
/** Clear all filters (resets to defaultFilters) */
|
|
30
59
|
clearAllFilters: () => void;
|
|
60
|
+
/** Check if a specific filter is active */
|
|
61
|
+
hasFilter: <K extends keyof T>(key: K) => boolean;
|
|
62
|
+
/** Check if any filters are active */
|
|
63
|
+
hasAnyFilters: () => boolean;
|
|
64
|
+
/** Get count of active filters */
|
|
65
|
+
activeFilterCount: number;
|
|
31
66
|
/** Set/toggle sort (auto-toggles between asc -> desc -> none) */
|
|
32
67
|
setSort: (field: string) => void;
|
|
33
68
|
/** Toggle sort direction for field (alias for setSort) */
|
|
34
69
|
toggleSort: (field: string) => void;
|
|
70
|
+
/** Clear current sort */
|
|
71
|
+
clearSort: () => void;
|
|
72
|
+
/** Check if a field is currently sorted */
|
|
73
|
+
isSortedBy: (field: string) => boolean;
|
|
35
74
|
/** Set page */
|
|
36
75
|
setPage: (page: number) => void;
|
|
37
76
|
/** Set page size */
|
|
@@ -40,34 +79,78 @@ export interface UseFiltersAndSortReturn {
|
|
|
40
79
|
nextPage: () => void;
|
|
41
80
|
/** Go to previous page */
|
|
42
81
|
prevPage: () => void;
|
|
82
|
+
/** Go to first page */
|
|
83
|
+
firstPage: () => void;
|
|
84
|
+
/** Check if on first page */
|
|
85
|
+
isFirstPage: boolean;
|
|
86
|
+
/** Calculate offset for API requests */
|
|
87
|
+
offset: number;
|
|
43
88
|
/** Set search query */
|
|
44
89
|
setQuery: (query: string) => void;
|
|
90
|
+
/** Clear search query */
|
|
91
|
+
clearQuery: () => void;
|
|
45
92
|
/** Reset to initial state */
|
|
46
93
|
reset: () => void;
|
|
94
|
+
/** Clear storage and reset */
|
|
95
|
+
clearStorageAndReset: () => void;
|
|
96
|
+
/** Get the storage key being used */
|
|
97
|
+
storageKey: string;
|
|
98
|
+
/** Direct access to the underlying service (for advanced use cases) */
|
|
99
|
+
getService: () => FiltersAndSortService<T>;
|
|
47
100
|
}
|
|
48
101
|
/**
|
|
49
|
-
* React hook that wraps FiltersAndSortService
|
|
102
|
+
* React hook that wraps FiltersAndSortService with enhanced functionality
|
|
50
103
|
*
|
|
51
|
-
* @
|
|
104
|
+
* @typeParam T - The filters object type
|
|
105
|
+
* @param options - Hook options including service instance or config
|
|
52
106
|
* @returns Filters and sort state with control methods
|
|
53
107
|
*
|
|
54
108
|
* @example
|
|
55
109
|
* ```tsx
|
|
56
|
-
*
|
|
110
|
+
* // Option 1: Create service externally (recommended for sharing between components)
|
|
111
|
+
* const service = new FiltersAndSortService<MyFilters>({ storageKey: 'my-filters' });
|
|
57
112
|
*
|
|
58
113
|
* function MyTable() {
|
|
59
|
-
* const
|
|
114
|
+
* const {
|
|
115
|
+
* filters,
|
|
116
|
+
* setFilter,
|
|
117
|
+
* clearAllFilters,
|
|
118
|
+
* hasAnyFilters,
|
|
119
|
+
* activeFilterCount
|
|
120
|
+
* } = useFiltersAndSort({ service });
|
|
121
|
+
*
|
|
60
122
|
* return (
|
|
61
123
|
* <div>
|
|
62
124
|
* <input
|
|
63
|
-
* value={filters.
|
|
64
|
-
* onChange={(e) =>
|
|
125
|
+
* value={filters.name || ''}
|
|
126
|
+
* onChange={(e) => setFilter('name', e.target.value)}
|
|
65
127
|
* />
|
|
66
|
-
*
|
|
128
|
+
* {hasAnyFilters() && (
|
|
129
|
+
* <button onClick={clearAllFilters}>
|
|
130
|
+
* Clear ({activeFilterCount})
|
|
131
|
+
* </button>
|
|
132
|
+
* )}
|
|
67
133
|
* </div>
|
|
68
134
|
* );
|
|
69
135
|
* }
|
|
136
|
+
*
|
|
137
|
+
* // Option 2: Let the hook create the service (simpler for single-component use)
|
|
138
|
+
* function SimpleTable() {
|
|
139
|
+
* const filters = useFiltersAndSort({
|
|
140
|
+
* config: {
|
|
141
|
+
* storageKey: 'simple-table',
|
|
142
|
+
* defaultFilters: { status: 'all' }
|
|
143
|
+
* }
|
|
144
|
+
* });
|
|
145
|
+
* // ...
|
|
146
|
+
* }
|
|
70
147
|
* ```
|
|
71
148
|
*/
|
|
72
|
-
export declare function useFiltersAndSort(options: UseFiltersAndSortOptions): UseFiltersAndSortReturn
|
|
149
|
+
export declare function useFiltersAndSort<T extends Record<string, any> = Record<string, any>>(options: UseFiltersAndSortOptions<T>): UseFiltersAndSortReturn<T>;
|
|
150
|
+
/**
|
|
151
|
+
* Convenience hook for creating a filters service with simpler API
|
|
152
|
+
* Equivalent to useFiltersAndSort({ config: ... })
|
|
153
|
+
*/
|
|
154
|
+
export declare function useFilters<T extends Record<string, any> = Record<string, any>>(storageKey: string, options?: Omit<FiltersAndSortConfig<T>, 'storageKey'>): UseFiltersAndSortReturn<T>;
|
|
155
|
+
export type { FilterAndSortState, SortDirection };
|
|
73
156
|
//# sourceMappingURL=useFiltersAndSort.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFiltersAndSort.d.ts","sourceRoot":"","sources":["../../src/filters-and-sort/useFiltersAndSort.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useFiltersAndSort.d.ts","sourceRoot":"","sources":["../../src/filters-and-sort/useFiltersAndSort.ts"],"names":[],"mappings":"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"}
|
package/dist/index.cjs
CHANGED
|
@@ -1,77 +1,298 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const utils = require("@codella-software/utils");
|
|
3
4
|
const react = require("react");
|
|
4
5
|
const jsxRuntime = require("react/jsx-runtime");
|
|
5
6
|
const liveUpdates = require("@codella-software/utils/live-updates");
|
|
6
7
|
const richContent = require("@codella-software/utils/rich-content");
|
|
7
8
|
const tabs = require("@codella-software/utils/tabs");
|
|
9
|
+
function defaultIsEqual(prev, next) {
|
|
10
|
+
if (prev === next) return true;
|
|
11
|
+
if (prev.query !== next.query) return false;
|
|
12
|
+
if (prev.pagination.page !== next.pagination.page) return false;
|
|
13
|
+
if (prev.pagination.limit !== next.pagination.limit) return false;
|
|
14
|
+
const prevSort = prev.sort;
|
|
15
|
+
const nextSort = next.sort;
|
|
16
|
+
if ((prevSort == null ? void 0 : prevSort.fieldName) !== (nextSort == null ? void 0 : nextSort.fieldName)) return false;
|
|
17
|
+
if ((prevSort == null ? void 0 : prevSort.direction) !== (nextSort == null ? void 0 : nextSort.direction)) return false;
|
|
18
|
+
const prevFilters = prev.filters;
|
|
19
|
+
const nextFilters = next.filters;
|
|
20
|
+
const prevKeys = Object.keys(prevFilters);
|
|
21
|
+
const nextKeys = Object.keys(nextFilters);
|
|
22
|
+
if (prevKeys.length !== nextKeys.length) return false;
|
|
23
|
+
for (const key of prevKeys) {
|
|
24
|
+
if (prevFilters[key] !== nextFilters[key]) return false;
|
|
25
|
+
}
|
|
26
|
+
return true;
|
|
27
|
+
}
|
|
28
|
+
function countActiveFilters(filters, defaultFilters) {
|
|
29
|
+
let count = 0;
|
|
30
|
+
const keys = Object.keys(filters);
|
|
31
|
+
for (const key of keys) {
|
|
32
|
+
const value = filters[key];
|
|
33
|
+
const defaultValue = defaultFilters == null ? void 0 : defaultFilters[key];
|
|
34
|
+
const isDefault = value === defaultValue;
|
|
35
|
+
const isEmpty = value === null || value === void 0 || value === "";
|
|
36
|
+
const isEmptyArray = Array.isArray(value) && value.length === 0;
|
|
37
|
+
if (!isEmpty && !isEmptyArray && !isDefault) {
|
|
38
|
+
count++;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
return count;
|
|
42
|
+
}
|
|
8
43
|
function useFiltersAndSort(options) {
|
|
9
|
-
const { service } = options;
|
|
10
|
-
if (!
|
|
11
|
-
throw new Error(
|
|
44
|
+
const { service: externalService, config, debug = false, isEqual = defaultIsEqual } = options;
|
|
45
|
+
if (!externalService && !config) {
|
|
46
|
+
throw new Error(
|
|
47
|
+
"useFiltersAndSort: either `service` or `config` must be provided. Pass an existing FiltersAndSortService instance via `service`, or provide a `config` object to create a new service."
|
|
48
|
+
);
|
|
12
49
|
}
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
50
|
+
if (externalService && config) {
|
|
51
|
+
if (debug) {
|
|
52
|
+
console.warn(
|
|
53
|
+
"useFiltersAndSort: both `service` and `config` were provided. The `service` will be used and `config` will be ignored."
|
|
54
|
+
);
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
const ownsServiceRef = react.useRef(false);
|
|
58
|
+
const serviceRef = react.useRef(null);
|
|
59
|
+
const isEqualRef = react.useRef(isEqual);
|
|
16
60
|
react.useEffect(() => {
|
|
17
|
-
|
|
18
|
-
|
|
61
|
+
isEqualRef.current = isEqual;
|
|
62
|
+
}, [isEqual]);
|
|
63
|
+
if (!serviceRef.current) {
|
|
64
|
+
if (externalService) {
|
|
65
|
+
serviceRef.current = externalService;
|
|
66
|
+
ownsServiceRef.current = false;
|
|
67
|
+
} else if (config) {
|
|
68
|
+
serviceRef.current = new utils.FiltersAndSortService({
|
|
69
|
+
storageKey: config.storageKey,
|
|
70
|
+
persistToStorage: config.persistToStorage,
|
|
71
|
+
initialState: config.initialState,
|
|
72
|
+
defaultFilters: config.defaultFilters,
|
|
73
|
+
skipStorageHydration: config.skipStorageHydration,
|
|
74
|
+
storageDebounceMs: config.storageDebounceMs,
|
|
75
|
+
storageKeyPrefix: config.storageKeyPrefix
|
|
76
|
+
});
|
|
77
|
+
ownsServiceRef.current = true;
|
|
78
|
+
if (debug) {
|
|
79
|
+
console.log(`useFiltersAndSort: created service with key "${config.storageKey}"`);
|
|
80
|
+
}
|
|
19
81
|
}
|
|
20
|
-
|
|
21
|
-
|
|
82
|
+
}
|
|
83
|
+
const svc = serviceRef.current;
|
|
84
|
+
const defaultFiltersRef = react.useRef(config == null ? void 0 : config.defaultFilters);
|
|
85
|
+
const subscribe = react.useCallback(
|
|
86
|
+
(onStoreChange) => {
|
|
87
|
+
const subscription = svc.getState().subscribe(() => {
|
|
88
|
+
onStoreChange();
|
|
89
|
+
});
|
|
90
|
+
return () => subscription.unsubscribe();
|
|
91
|
+
},
|
|
92
|
+
[svc]
|
|
93
|
+
);
|
|
94
|
+
const getSnapshot = react.useCallback(() => svc.getCurrentState(), [svc]);
|
|
95
|
+
const getServerSnapshot = react.useCallback(() => svc.getDefaultState(), [svc]);
|
|
96
|
+
const state = react.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
|
|
97
|
+
react.useEffect(() => {
|
|
98
|
+
if (!debug) return;
|
|
99
|
+
const sub = svc.getState().subscribe((newState) => {
|
|
100
|
+
console.log(`useFiltersAndSort [${svc.getStorageKey()}]:`, newState);
|
|
22
101
|
});
|
|
23
|
-
return () =>
|
|
24
|
-
}, [
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
102
|
+
return () => sub.unsubscribe();
|
|
103
|
+
}, [svc, debug]);
|
|
104
|
+
react.useEffect(() => {
|
|
105
|
+
return () => {
|
|
106
|
+
if (ownsServiceRef.current && serviceRef.current) {
|
|
107
|
+
if (debug) {
|
|
108
|
+
console.log(`useFiltersAndSort: destroying owned service "${serviceRef.current.getStorageKey()}"`);
|
|
109
|
+
}
|
|
110
|
+
serviceRef.current.destroy();
|
|
111
|
+
serviceRef.current = null;
|
|
112
|
+
}
|
|
113
|
+
};
|
|
114
|
+
}, [debug]);
|
|
115
|
+
const setFilter = react.useCallback(
|
|
116
|
+
(key, value) => {
|
|
117
|
+
svc.setFilters({ [key]: value });
|
|
28
118
|
},
|
|
29
|
-
|
|
30
|
-
|
|
119
|
+
[svc]
|
|
120
|
+
);
|
|
121
|
+
const setFilters = react.useCallback(
|
|
122
|
+
(filters) => {
|
|
123
|
+
svc.setFilters(filters);
|
|
31
124
|
},
|
|
32
|
-
|
|
33
|
-
|
|
125
|
+
[svc]
|
|
126
|
+
);
|
|
127
|
+
const clearFilter = react.useCallback(
|
|
128
|
+
(key) => {
|
|
129
|
+
svc.removeFilter(key);
|
|
34
130
|
},
|
|
35
|
-
|
|
36
|
-
|
|
131
|
+
[svc]
|
|
132
|
+
);
|
|
133
|
+
const clearAllFilters = react.useCallback(() => {
|
|
134
|
+
svc.clearFilters();
|
|
135
|
+
}, [svc]);
|
|
136
|
+
const hasFilter = react.useCallback(
|
|
137
|
+
(key) => {
|
|
138
|
+
var _a;
|
|
139
|
+
const value = svc.getCurrentState().filters[key];
|
|
140
|
+
const defaultValue = (_a = defaultFiltersRef.current) == null ? void 0 : _a[key];
|
|
141
|
+
if (value === defaultValue) return false;
|
|
142
|
+
if (value === null || value === void 0 || value === "") return false;
|
|
143
|
+
if (Array.isArray(value) && value.length === 0) return false;
|
|
144
|
+
return true;
|
|
37
145
|
},
|
|
38
|
-
|
|
39
|
-
|
|
146
|
+
[svc]
|
|
147
|
+
);
|
|
148
|
+
const hasAnyFilters = react.useCallback(() => {
|
|
149
|
+
return countActiveFilters(svc.getCurrentState().filters, defaultFiltersRef.current) > 0;
|
|
150
|
+
}, [svc]);
|
|
151
|
+
const setSort = react.useCallback(
|
|
152
|
+
(field) => {
|
|
153
|
+
svc.setSort(field);
|
|
40
154
|
},
|
|
41
|
-
|
|
42
|
-
|
|
155
|
+
[svc]
|
|
156
|
+
);
|
|
157
|
+
const clearSort = react.useCallback(() => {
|
|
158
|
+
svc.setSort("");
|
|
159
|
+
}, [svc]);
|
|
160
|
+
const isSortedBy = react.useCallback(
|
|
161
|
+
(field) => {
|
|
162
|
+
var _a;
|
|
163
|
+
return ((_a = svc.getCurrentState().sort) == null ? void 0 : _a.fieldName) === field;
|
|
43
164
|
},
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
165
|
+
[svc]
|
|
166
|
+
);
|
|
167
|
+
const setPage = react.useCallback(
|
|
168
|
+
(page) => {
|
|
169
|
+
if (page < 0) {
|
|
170
|
+
if (debug) {
|
|
171
|
+
console.warn("useFiltersAndSort: setPage called with negative value, clamping to 0");
|
|
172
|
+
}
|
|
173
|
+
page = 0;
|
|
174
|
+
}
|
|
175
|
+
svc.setPagination(page);
|
|
47
176
|
},
|
|
48
|
-
|
|
49
|
-
|
|
177
|
+
[svc, debug]
|
|
178
|
+
);
|
|
179
|
+
const setPageSize = react.useCallback(
|
|
180
|
+
(size) => {
|
|
181
|
+
if (size < 1) {
|
|
182
|
+
if (debug) {
|
|
183
|
+
console.warn("useFiltersAndSort: setPageSize called with value < 1, clamping to 1");
|
|
184
|
+
}
|
|
185
|
+
size = 1;
|
|
186
|
+
}
|
|
187
|
+
const currentPage = svc.getCurrentState().pagination.page;
|
|
188
|
+
svc.setPagination(currentPage, size);
|
|
50
189
|
},
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
190
|
+
[svc, debug]
|
|
191
|
+
);
|
|
192
|
+
const nextPage = react.useCallback(() => {
|
|
193
|
+
svc.setPagination(svc.getCurrentState().pagination.page + 1);
|
|
194
|
+
}, [svc]);
|
|
195
|
+
const prevPage = react.useCallback(() => {
|
|
196
|
+
const newPage = Math.max(0, svc.getCurrentState().pagination.page - 1);
|
|
197
|
+
svc.setPagination(newPage);
|
|
198
|
+
}, [svc]);
|
|
199
|
+
const firstPage = react.useCallback(() => {
|
|
200
|
+
svc.setPagination(0);
|
|
201
|
+
}, [svc]);
|
|
202
|
+
const setQuery = react.useCallback(
|
|
203
|
+
(query) => {
|
|
204
|
+
svc.setQuery(query);
|
|
54
205
|
},
|
|
55
|
-
|
|
56
|
-
|
|
206
|
+
[svc]
|
|
207
|
+
);
|
|
208
|
+
const clearQuery = react.useCallback(() => {
|
|
209
|
+
svc.setQuery("");
|
|
210
|
+
}, [svc]);
|
|
211
|
+
const reset = react.useCallback(() => {
|
|
212
|
+
svc.reset();
|
|
213
|
+
}, [svc]);
|
|
214
|
+
const clearStorageAndReset = react.useCallback(() => {
|
|
215
|
+
svc.clearStorage();
|
|
216
|
+
svc.reset();
|
|
217
|
+
}, [svc]);
|
|
218
|
+
const getService = react.useCallback(() => svc, [svc]);
|
|
219
|
+
const activeFilterCount = react.useMemo(
|
|
220
|
+
() => countActiveFilters(state.filters, defaultFiltersRef.current),
|
|
221
|
+
[state.filters]
|
|
222
|
+
);
|
|
223
|
+
const isFirstPage = state.pagination.page === 0;
|
|
224
|
+
const offset = state.pagination.page * state.pagination.limit;
|
|
225
|
+
return react.useMemo(
|
|
226
|
+
() => {
|
|
227
|
+
var _a, _b;
|
|
228
|
+
return {
|
|
229
|
+
// State
|
|
230
|
+
filters: state.filters,
|
|
231
|
+
sortBy: ((_a = state.sort) == null ? void 0 : _a.fieldName) ?? null,
|
|
232
|
+
sortDirection: ((_b = state.sort) == null ? void 0 : _b.direction) ?? "asc",
|
|
233
|
+
page: state.pagination.page,
|
|
234
|
+
pageSize: state.pagination.limit,
|
|
235
|
+
query: state.query,
|
|
236
|
+
state,
|
|
237
|
+
// Filter actions
|
|
238
|
+
setFilter,
|
|
239
|
+
setFilters,
|
|
240
|
+
clearFilter,
|
|
241
|
+
clearAllFilters,
|
|
242
|
+
hasFilter,
|
|
243
|
+
hasAnyFilters,
|
|
244
|
+
activeFilterCount,
|
|
245
|
+
// Sort actions
|
|
246
|
+
setSort,
|
|
247
|
+
toggleSort: setSort,
|
|
248
|
+
clearSort,
|
|
249
|
+
isSortedBy,
|
|
250
|
+
// Pagination actions
|
|
251
|
+
setPage,
|
|
252
|
+
setPageSize,
|
|
253
|
+
nextPage,
|
|
254
|
+
prevPage,
|
|
255
|
+
firstPage,
|
|
256
|
+
isFirstPage,
|
|
257
|
+
offset,
|
|
258
|
+
// Query actions
|
|
259
|
+
setQuery,
|
|
260
|
+
clearQuery,
|
|
261
|
+
// General actions
|
|
262
|
+
reset,
|
|
263
|
+
clearStorageAndReset,
|
|
264
|
+
storageKey: svc.getStorageKey(),
|
|
265
|
+
// Service access
|
|
266
|
+
getService
|
|
267
|
+
};
|
|
57
268
|
},
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
269
|
+
[
|
|
270
|
+
state,
|
|
271
|
+
setFilter,
|
|
272
|
+
setFilters,
|
|
273
|
+
clearFilter,
|
|
274
|
+
clearAllFilters,
|
|
275
|
+
hasFilter,
|
|
276
|
+
hasAnyFilters,
|
|
277
|
+
activeFilterCount,
|
|
278
|
+
setSort,
|
|
279
|
+
clearSort,
|
|
280
|
+
isSortedBy,
|
|
281
|
+
setPage,
|
|
282
|
+
setPageSize,
|
|
283
|
+
nextPage,
|
|
284
|
+
prevPage,
|
|
285
|
+
firstPage,
|
|
286
|
+
isFirstPage,
|
|
287
|
+
offset,
|
|
288
|
+
setQuery,
|
|
289
|
+
clearQuery,
|
|
290
|
+
reset,
|
|
291
|
+
clearStorageAndReset,
|
|
292
|
+
svc,
|
|
293
|
+
getService
|
|
294
|
+
]
|
|
295
|
+
);
|
|
75
296
|
}
|
|
76
297
|
function useFormBuilder(options) {
|
|
77
298
|
const { builder } = options;
|