@swan-io/lake 4.6.0 → 4.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swan-io/lake",
-  "version": "4.6.0",
+  "version": "4.7.0",
   "engines": {
     "node": ">=18.0.0",
     "yarn": "^1.22.0"

package/src/components/Filters.js

@@ -182,7 +182,7 @@ function FilterInput({ label, initialValue = "", noValueText, submitText, autoOp
             }
         });
     };
-    return (_jsxs(View, { style: styles.container, children: [_jsx(FilterTag, { label: label, onPress: toggle, ref: inputRef, onPressRemove: onPressRemove, isActive: visible, value: value === "" ? noValueText : value }), _jsx(Popover, { role: "listbox", matchReferenceWidth: false, onDismiss: close, referenceRef: inputRef, returnFocus: false, visible: visible, children: _jsxs(View, { style: [styles.dropdown, styles.inputContent], children: [_jsx(Field, { name: "input", children: ({ error, value, onChange }) => (_jsx(LakeLabel, { label: label, render: id => (_jsx(LakeTextInput, { nativeID: id, error: error, style: styles.input, placeholder: placeholder, value: value, onChangeText: onChange })) })) }), _jsx(LakeButton, { size: "small", color: "current", onPress: onSubmit, children: submitText })] }) })] }));
+    return (_jsxs(View, { style: styles.container, children: [_jsx(FilterTag, { label: label, onPress: toggle, ref: inputRef, onPressRemove: onPressRemove, isActive: visible, value: value === "" ? noValueText : value }), _jsx(Popover, { role: "listbox", matchReferenceWidth: false, onDismiss: close, referenceRef: inputRef, returnFocus: false, visible: visible, children: _jsxs(View, { style: [styles.dropdown, styles.inputContent], children: [_jsx(Field, { name: "input", children: ({ error, value, onChange }) => (_jsx(LakeLabel, { label: label, render: id => (_jsx(LakeTextInput, { id: id, error: error, style: styles.input, placeholder: placeholder, value: value, onChangeText: onChange, onSubmitEditing: onSubmit })) })) }), _jsx(LakeButton, { size: "small", color: "current", onPress: onSubmit, children: submitText })] }) })] }));
 }
 function FilterBooleanTag({ children, onAdd, onPressRemove }) {
     useEffect(onAdd, []); // eslint-disable-line react-hooks/exhaustive-deps

package/src/components/FixedListView.js

@@ -635,7 +635,7 @@ export const FixedListView = ({ data: originalData, mode = "tile", keyExtractor,
             }
         }
     }, [viewId]);
-    useEffect(() => {
+    useLayoutEffect(() => {
         const renderedRangeStartIndex = Math.max(0, Math.floor((currentScrollY.current - renderThreshold) / totalRowHeight));
         const renderedRangeEndIndex = Math.min(originalData.length, renderedRangeStartIndex +
             Math.ceil((lastKnownHeight.current + renderThreshold * 2) / totalRowHeight));

package/src/hooks/useUrqlMutation.d.ts

@@ -1,3 +1,3 @@
 import { AsyncData, Future, Result } from "@swan-io/boxed";
 import { AnyVariables, CombinedError, OperationContext, TypedDocumentNode } from "urql";
-export declare const useUrqlMutation: <Data, Variables extends AnyVariables>(query: TypedDocumentNode<Data, Variables>) => readonly [AsyncData<Result<Data, Error>>, (input: Variables, context?: Partial<OperationContext>) => Future<Result<Data, Error | CombinedError>>];
+export declare const useUrqlMutation: <Data, Variables extends AnyVariables>(query: TypedDocumentNode<Data, Variables>) => readonly [AsyncData<Result<Data, CombinedError>>, (variables: Variables, context?: Partial<OperationContext>) => Future<Result<Data, CombinedError>>];

package/src/hooks/useUrqlMutation.js

@@ -23,8 +23,8 @@ export const useUrqlMutation = (query) => {
             }
             return AsyncData.Done(toResult({ data, error }));
         }, [fetching, data, error]),
-        useCallback((input, context) => Future.fromPromise(execute(input, context))
-            .mapError(error => error) // Only used to cast error
+        useCallback((variables, context) => Future.fromPromise(execute(variables, context))
+            .mapError(error => error)
             .mapOkToResult(toResult), [execute]),
     ];
 };

package/src/hooks/useUrqlQuery.d.ts

@@ -1,19 +1,19 @@
 import { AsyncData, Result } from "@swan-io/boxed";
 import { DependencyList } from "react";
-import { AnyVariables, UseQueryArgs } from "urql";
+import { AnyVariables, CombinedError, UseQueryArgs } from "urql";
 type Query<Data> = {
-    data: AsyncData<Result<Data, Error>>;
-    nextData: AsyncData<Result<Data, Error>>;
     isForceReloading: boolean;
+    data: AsyncData<Result<Data, CombinedError>>;
+    nextData: AsyncData<Result<Data, CombinedError>>;
     reload: () => void;
 };
-export declare const useUrqlQuery: <Data, Variables extends AnyVariables>(args: UseQueryArgs<Variables, Data>, dependencyList: DependencyList) => Query<Data>;
+export declare const useUrqlQuery: <Data, Variables extends AnyVariables>(args: UseQueryArgs<Variables, Data>, dependencyList?: DependencyList) => Query<Data>;
 type PaginatedQuery<Data> = {
-    data: AsyncData<Result<Data, Error>>;
-    nextData: AsyncData<Result<Data, Error>>;
     isForceReloading: boolean;
+    data: AsyncData<Result<Data, CombinedError>>;
+    nextData: AsyncData<Result<Data, CombinedError>>;
     reload: () => void;
     setAfter: (cursor: string | undefined) => void;
 };
-export declare const useUrqlPaginatedQuery: <Data, Variables extends AnyVariables>(args: UseQueryArgs<Variables, Data>, dependencyList: DependencyList) => PaginatedQuery<Data>;
+export declare const useUrqlPaginatedQuery: <Data, Variables extends AnyVariables>(args: UseQueryArgs<Variables, Data>, dependencyList?: DependencyList) => PaginatedQuery<Data>;
 export {};

package/src/hooks/useUrqlQuery.js

@@ -2,72 +2,82 @@ import { AsyncData, Result } from "@swan-io/boxed";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useQuery } from "urql";
 import { isNotNullish, isNullish } from "../utils/nullish";
-const NO_SUSPENSE_CONTEXT = { suspense: false };
-export const useUrqlQuery = (args, dependencyList) => {
-    const [haveParamsChanged, setHaveParamsChanged] = useState(false);
+const EMPTY_DEPENDENCY_LIST = [];
+export const useUrqlQuery = (args, dependencyList = EMPTY_DEPENDENCY_LIST) => {
+    const hasDependencyList = dependencyList !== EMPTY_DEPENDENCY_LIST;
+    const [isDepsListUpdate, setIsDepsListUpdate] = useState(hasDependencyList);
     const [isForceReloading, setIsForceReloading] = useState(false);
     const [{ data, fetching, error }, reexecute] = useQuery({
         ...args,
-        context: NO_SUSPENSE_CONTEXT,
+        context: useMemo(() => ({ ...args.context, suspense: false }), [args.context]),
     });
-    const reload = useCallback(() => {
-        setIsForceReloading(true);
-        reexecute({ requestPolicy: "network-only" });
-    }, [reexecute]);
     useEffect(() => {
-        setHaveParamsChanged(true);
+        if (hasDependencyList) {
+            setIsDepsListUpdate(true);
+        }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, dependencyList);
     useEffect(() => {
         if (!fetching) {
-            setHaveParamsChanged(false);
+            setIsDepsListUpdate(false);
             setIsForceReloading(false);
         }
     }, [fetching]);
-    const okResult = useMemo(() => AsyncData.Done(Result.Ok(data)), [data]);
-    const errorResult = useMemo(() => AsyncData.Done(Result.Error(error)), [error]);
-    const shouldResetState = isForceReloading || haveParamsChanged;
-    if (((isNullish(data) && isNullish(error)) || shouldResetState) && fetching) {
+    const reload = useCallback(() => {
+        setIsForceReloading(true);
+        reexecute({ requestPolicy: "network-only" });
+    }, [reexecute]);
+    const okResult = useMemo(() => (isNullish(data) ? null : AsyncData.Done(Result.Ok(data))), [data]);
+    const errorResult = useMemo(() => (isNullish(error) ? null : AsyncData.Done(Result.Error(error))), [error]);
+    const initialFetching = isNullish(okResult) && isNullish(errorResult);
+    const shouldResetState = isDepsListUpdate || isForceReloading;
+    if (fetching && (initialFetching || shouldResetState)) {
         return {
+            isForceReloading,
             data: AsyncData.Loading(),
             nextData: AsyncData.Loading(),
-            isForceReloading,
             reload,
         };
     }
-    if (isNotNullish(error)) {
+    if (isNotNullish(errorResult)) {
         return {
+            isForceReloading,
             data: errorResult,
             nextData: errorResult,
-            isForceReloading,
             reload,
         };
     }
-    if (isNotNullish(data)) {
+    if (isNotNullish(okResult)) {
         return {
+            isForceReloading,
             data: okResult,
             nextData: fetching ? AsyncData.Loading() : okResult,
-            isForceReloading,
             reload,
         };
     }
     return {
+        isForceReloading,
         data: AsyncData.NotAsked(),
         nextData: AsyncData.NotAsked(),
-        isForceReloading,
         reload,
     };
 };
-export const useUrqlPaginatedQuery = (args, dependencyList) => {
-    const [after, setAfter] = useState(undefined);
-    const { data, nextData, isForceReloading, reload: originalReload, } = useUrqlQuery({ ...args, variables: { ...args.variables, after } }, dependencyList);
+export const useUrqlPaginatedQuery = (args, dependencyList = EMPTY_DEPENDENCY_LIST) => {
+    const [after, setAfter] = useState();
+    const { isForceReloading, data, nextData, reload: baseReload, } = useUrqlQuery({ ...args, variables: { ...args.variables, after } }, dependencyList);
     useEffect(() => {
         setAfter(undefined);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, dependencyList);
     const reload = useCallback(() => {
         setAfter(undefined);
-        originalReload();
-    }, [originalReload]);
-    return { data, nextData, isForceReloading, reload, setAfter };
+        baseReload();
+    }, [baseReload]);
+    return {
+        isForceReloading,
+        data,
+        nextData,
+        reload,
+        setAfter,
+    };
 };

package/src/utils/function.d.ts

@@ -3,4 +3,5 @@ export declare const noop: () => void;
 export declare const stubFalse: () => false;
 export declare const stubTrue: () => true;
 export declare const unionToArray: <T extends PropertyKey>(object: Record<T, true>) => T[];
+export declare const getUnionGuard: <T extends PropertyKey>(object: Record<T, true>) => (value: unknown) => value is T;
 export declare const memoize: <Input extends unknown[], Output>(func: (...input: Input) => Output, getCacheKey: (...input: Input) => string) => (...input: Input) => Output;

package/src/utils/function.js

@@ -4,6 +4,10 @@ export const noop = () => { };
 export const stubFalse = () => false;
 export const stubTrue = () => true;
 export const unionToArray = (object) => Dict.keys(object);
+export const getUnionGuard = (object) => {
+    const set = new Set(unionToArray(object));
+    return (value) => set.has(value);
+};
 export const memoize = (func, getCacheKey) => {
     const cache = new Map();
     return (...input) => {