@povio/ui 2.2.9-rc.13 → 2.2.9-rc.14
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/components/inputs/DateTime/shared/CalendarCell.js +2 -2
- package/dist/components/inputs/Selection/Autocomplete/queryAutocomplete.types.d.ts +14 -4
- package/dist/hooks/useIntersectionObserver.d.ts +1 -1
- package/dist/hooks/useIntersectionObserver.js +29 -10
- package/dist/hooks/useQueryAutocomplete.js +7 -1
- package/dist/utils/query.utils.d.ts +4 -0
- package/dist/utils/query.utils.js +8 -0
- package/package.json +1 -1
|
@@ -17,12 +17,12 @@ var CalendarCell = ({ state, onApply, shouldCloseOnSelect = true, onDateSelectio
|
|
|
17
17
|
const onClick = useCallback((event) => {
|
|
18
18
|
buttonProps.onClick?.(event);
|
|
19
19
|
if (onDateSelection) onDateSelection(props.date);
|
|
20
|
-
if (
|
|
20
|
+
if (shouldCloseOnSelect && !isDisabled) onApply?.(props.date);
|
|
21
21
|
}, [
|
|
22
22
|
buttonProps,
|
|
23
23
|
onDateSelection,
|
|
24
24
|
props.date,
|
|
25
|
-
|
|
25
|
+
isDisabled,
|
|
26
26
|
shouldCloseOnSelect,
|
|
27
27
|
onApply
|
|
28
28
|
]);
|
|
@@ -11,11 +11,20 @@ export interface QueryAutocompleteInfinitePage<TSelectItem extends SelectItem =
|
|
|
11
11
|
export type QueryResult<TSelectItem extends SelectItem = SelectItem> = UseQueryResult<Array<TSelectItem>> | UseInfiniteQueryResult<QueryAutocompleteInfinitePage<TSelectItem>>;
|
|
12
12
|
export type QueryFn<TSelectItem extends SelectItem = SelectItem> = (...args: any[]) => QueryResult<TSelectItem>;
|
|
13
13
|
export type QueryAutocompleteExtractedData<TSelectItem extends SelectItem = SelectItem> = Array<TSelectItem>;
|
|
14
|
+
type QueryAutocompleteParams<TQueryFn extends QueryFn> = Parameters<TQueryFn>[0];
|
|
15
|
+
type QueryAutocompleteFilter = {
|
|
16
|
+
search?: string;
|
|
17
|
+
};
|
|
18
|
+
type QueryAutocompleteSearchParams = {
|
|
19
|
+
search?: string;
|
|
20
|
+
} | {
|
|
21
|
+
filter?: QueryAutocompleteFilter;
|
|
22
|
+
};
|
|
14
23
|
export type QueryAutocompleteProps<TFieldValues extends FieldValues, TSelectItem extends SelectItem<any>, TQueryFn extends QueryFn<TSelectItem>> = OmitDiscriminatedUnion<AutocompleteProps<TSelectItem["id"]>, "items" | "onSearchChange" | "isLoading" | keyof GroupedSelectProps> & GroupedSelectControlProps<TFieldValues, TSelectItem["id"]> & {
|
|
15
|
-
query:
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
24
|
+
query: QueryAutocompleteParams<TQueryFn> extends QueryAutocompleteSearchParams ? TQueryFn : never;
|
|
25
|
+
queryParams?: Omit<QueryAutocompleteParams<TQueryFn>, "search" | "limit"> & {
|
|
26
|
+
limit?: number;
|
|
27
|
+
};
|
|
19
28
|
queryOptions?: Parameters<TQueryFn>[1];
|
|
20
29
|
queryMap?: (data: QueryAutocompleteExtractedData<TSelectItem>) => SelectItem<TSelectItem["id"]>[];
|
|
21
30
|
isInitialQueryDisabled?: boolean;
|
|
@@ -28,3 +37,4 @@ export interface UseQueryAutocompleteOptions<TSelectItem extends SelectItem<any>
|
|
|
28
37
|
initialQueryState?: boolean;
|
|
29
38
|
search: string;
|
|
30
39
|
}
|
|
40
|
+
export {};
|
|
@@ -3,6 +3,6 @@ type UseIntersectionObserverProps = {
|
|
|
3
3
|
onIntersectionChange?: (entry: IntersectionObserverEntry) => void;
|
|
4
4
|
} & IntersectionObserverInit;
|
|
5
5
|
export declare const useIntersectionObserver: <T extends HTMLElement>({ onIntersection, onIntersectionChange, root, rootMargin, threshold, }: UseIntersectionObserverProps) => {
|
|
6
|
-
ref:
|
|
6
|
+
ref: (element: T | null) => void;
|
|
7
7
|
};
|
|
8
8
|
export {};
|
|
@@ -1,25 +1,44 @@
|
|
|
1
|
-
import { useEffect, useRef } from "react";
|
|
1
|
+
import { useCallback, useEffect, useMemo, useRef } from "react";
|
|
2
2
|
//#region src/hooks/useIntersectionObserver.ts
|
|
3
3
|
var useIntersectionObserver = ({ onIntersection, onIntersectionChange, root, rootMargin, threshold }) => {
|
|
4
|
-
const
|
|
4
|
+
const elementRef = useRef(null);
|
|
5
|
+
const observerRef = useRef(null);
|
|
6
|
+
const onIntersectionRef = useRef(onIntersection);
|
|
7
|
+
const onIntersectionChangeRef = useRef(onIntersectionChange);
|
|
8
|
+
useEffect(() => {
|
|
9
|
+
onIntersectionRef.current = onIntersection;
|
|
10
|
+
}, [onIntersection]);
|
|
11
|
+
useEffect(() => {
|
|
12
|
+
onIntersectionChangeRef.current = onIntersectionChange;
|
|
13
|
+
}, [onIntersectionChange]);
|
|
5
14
|
useEffect(() => {
|
|
6
15
|
const observer = new IntersectionObserver((entries) => {
|
|
7
|
-
if (entries.some((entry) => entry.isIntersecting))
|
|
8
|
-
|
|
16
|
+
if (entries.some((entry) => entry.isIntersecting)) onIntersectionRef.current?.();
|
|
17
|
+
onIntersectionChangeRef.current?.(entries[0]);
|
|
9
18
|
}, {
|
|
10
19
|
root,
|
|
11
20
|
rootMargin,
|
|
12
21
|
threshold
|
|
13
22
|
});
|
|
14
|
-
|
|
15
|
-
|
|
23
|
+
observerRef.current = observer;
|
|
24
|
+
if (elementRef.current) observer.observe(elementRef.current);
|
|
25
|
+
return () => {
|
|
26
|
+
if (elementRef.current) observer.unobserve(elementRef.current);
|
|
27
|
+
observer.disconnect();
|
|
28
|
+
observerRef.current = null;
|
|
29
|
+
};
|
|
16
30
|
}, [
|
|
17
|
-
ref,
|
|
18
31
|
root,
|
|
19
|
-
|
|
20
|
-
|
|
32
|
+
rootMargin,
|
|
33
|
+
threshold
|
|
21
34
|
]);
|
|
22
|
-
|
|
35
|
+
const ref = useCallback((element) => {
|
|
36
|
+
if (elementRef.current === element) return;
|
|
37
|
+
if (observerRef.current && elementRef.current) observerRef.current.unobserve(elementRef.current);
|
|
38
|
+
elementRef.current = element;
|
|
39
|
+
if (observerRef.current && elementRef.current) observerRef.current.observe(elementRef.current);
|
|
40
|
+
}, []);
|
|
41
|
+
return useMemo(() => ({ ref }), [ref]);
|
|
23
42
|
};
|
|
24
43
|
//#endregion
|
|
25
44
|
export { useIntersectionObserver };
|
|
@@ -1,10 +1,16 @@
|
|
|
1
|
+
import { ApiQueryUtils } from "../utils/query.utils.js";
|
|
1
2
|
import { useMemo, useState } from "react";
|
|
2
3
|
//#region src/hooks/useQueryAutocomplete.ts
|
|
3
4
|
var useQueryAutocomplete = ({ query, queryParams, queryOptions, mapItems, initialQueryState, search }) => {
|
|
4
5
|
const [isQueryEnabled, setIsQueryEnabled] = useState(!initialQueryState);
|
|
5
6
|
const queryResult = query(search === void 0 ? queryParams : {
|
|
7
|
+
...queryParams,
|
|
8
|
+
limit: queryParams?.limit ?? ApiQueryUtils.DEFAULT_LIMIT,
|
|
6
9
|
search,
|
|
7
|
-
|
|
10
|
+
filter: queryParams && "filter" in queryParams ? {
|
|
11
|
+
...queryParams.filter,
|
|
12
|
+
search
|
|
13
|
+
} : void 0
|
|
8
14
|
}, {
|
|
9
15
|
...queryOptions,
|
|
10
16
|
enabled: isQueryEnabled && (queryOptions?.enabled ?? true)
|