@bouko/react 3.0.5 → 3.0.7

package/dist/components/layout/flex.d.ts

@@ -7,6 +7,7 @@ type Props = Component & Hoverable & {
     center?: boolean;
     centerX?: boolean;
     centerY?: boolean;
+    equal?: boolean;
 };
 /**
  * Flex containers with configurable alignment and styling.

package/dist/components/layout/flex.js

@@ -29,7 +29,8 @@ const row = tv({
     variants: {
         centerX: { true: "justify-center" },
         centerY: { true: "items-center" },
-        center: { true: "items-center justify-center" }
+        center: { true: "items-center justify-center" },
+        equal: { true: "[&>*]:flex-1" }
     }
 });
 const column = tv({
@@ -37,6 +38,7 @@ const column = tv({
     variants: {
         centerX: { true: "items-center" },
         centerY: { true: "justify-center" },
-        center: { true: "items-center justify-center" }
+        center: { true: "items-center justify-center" },
+        equal: { true: "[&>*]:flex-1" }
     }
 });

package/dist/hooks/index.d.ts

@@ -6,3 +6,12 @@ export { default as useSound } from "./audio/sound";
 export { withAudio, type DivRef, type AudioRef } from "./element/with-audio";
 export * from "./router/params";
 export * from "./auth";
+export declare function useObjectUrl(): {
+    setFromBlob: (blob: Blob) => string;
+    revoke: () => void;
+    current: import("react").RefObject<string | null>;
+};
+export declare function useRequestGate(): {
+    next: () => number;
+    isLatest: (id: number) => boolean;
+};

package/dist/hooks/index.js

@@ -1,3 +1,4 @@
+import { useRef, useCallback, useEffect } from "react";
 export { default as useElement } from "./element";
 export { default as useContainer } from "./element/container";
 export { default as useResize } from "./element/resize";
@@ -6,3 +7,26 @@ export { default as useSound } from "./audio/sound";
 export { withAudio } from "./element/with-audio";
 export * from "./router/params";
 export * from "./auth";
+export function useObjectUrl() {
+    const urlRef = useRef(null);
+    const revoke = useCallback(() => {
+        if (!urlRef.current)
+            return;
+        URL.revokeObjectURL(urlRef.current);
+        urlRef.current = null;
+    }, []);
+    const setFromBlob = useCallback((blob) => {
+        revoke();
+        const url = URL.createObjectURL(blob);
+        urlRef.current = url;
+        return url;
+    }, [revoke]);
+    useEffect(() => revoke, [revoke]);
+    return { setFromBlob, revoke, current: urlRef };
+}
+export function useRequestGate() {
+    const idRef = useRef(0);
+    const next = useCallback(() => ++idRef.current, []);
+    const isLatest = useCallback((id) => id === idRef.current, []);
+    return { next, isLatest };
+}

package/dist/hooks/router/params.d.ts

@@ -15,5 +15,6 @@ export declare function usePagination<T>({ fetcher, pageSize }: Options<T>): {
     prev: () => void;
     next: () => void;
     refresh: () => Promise<void>;
+    fetchedAt: Date | null;
 };
 export {};

package/dist/hooks/router/params.js

@@ -8,6 +8,7 @@ export function usePagination({ fetcher, pageSize }) {
     const [params, setParams] = useSearchParams();
     const [items, setItems] = useState([]);
     const [loading, setLoading] = useState(false);
+    const [fetchedAt, setFetchedAt] = useState(null);
     const raw = params.get("page");
     const page = Math.max(1, Number(raw) || 1);
     const setPage = (nextPage) => {
@@ -16,9 +17,14 @@ export function usePagination({ fetcher, pageSize }) {
     };
     const fetchPage = useCallback(async (refresh = false) => {
         setLoading(true);
-        fetcher({ page, pageSize, refresh })
-            .then(setItems)
-            .finally(() => setLoading(false));
+        const result = await fetcher({
+            page,
+            pageSize,
+            refresh
+        });
+        setItems(result);
+        setFetchedAt(new Date());
+        setLoading(false);
     }, [page, pageSize]);
     useEffect(() => {
         fetchPage(false);
@@ -29,6 +35,7 @@ export function usePagination({ fetcher, pageSize }) {
         page,
         prev: () => page > 1 ? setPage(page - 1) : undefined,
         next: () => !(page > 1 && items.length === 0) ? setPage(page + 1) : undefined,
-        refresh: () => fetchPage(true)
+        refresh: () => fetchPage(true),
+        fetchedAt
     };
 }

package/package.json

@@ -1,7 +1,7 @@
 {
 
   "name": "@bouko/react",
-  "version": "3.0.5",
+  "version": "3.0.7",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "license": "MIT",