fui-material 2.8.19 → 2.8.21

package/dist/f-ui-kit.es.js

@@ -4925,6 +4925,92 @@ const FStatusBadge = ({
     /* @__PURE__ */ jsx("span", { children })
   ] });
 };
+function FProgressiveList({
+  items,
+  chunkSize = 6,
+  estimatedItemHeight = 280,
+  keyExtractor,
+  className,
+  st,
+  showProgress = true,
+  renderProgress,
+  children,
+  onLoadMore,
+  hasMore = false,
+  isLoadingMore = false,
+  loader: loader2,
+  threshold = 250
+}) {
+  const totalCount = items.length;
+  const [renderedCount, setRenderedCount] = useState(() => Math.min(chunkSize, totalCount));
+  const sentinelRef = useRef(null);
+  const prevFirstKeyRef = useRef(void 0);
+  const prevTotalCountRef = useRef(totalCount);
+  useEffect(() => {
+    const currentFirstKey = items.length > 0 ? keyExtractor(items[0], 0) : void 0;
+    const isReset = currentFirstKey !== prevFirstKeyRef.current || totalCount < prevTotalCountRef.current;
+    if (isReset) {
+      setRenderedCount(Math.min(chunkSize, totalCount));
+    }
+    prevFirstKeyRef.current = currentFirstKey;
+    prevTotalCountRef.current = totalCount;
+  }, [items, keyExtractor, chunkSize, totalCount]);
+  useEffect(() => {
+    if (renderedCount >= totalCount) return;
+    const frameId = requestAnimationFrame(() => {
+      setRenderedCount((prev) => Math.min(prev + chunkSize, totalCount));
+    });
+    return () => cancelAnimationFrame(frameId);
+  }, [renderedCount, totalCount, chunkSize]);
+  useEffect(() => {
+    if (!onLoadMore || !hasMore || isLoadingMore) return;
+    if (renderedCount < totalCount) return;
+    const sentinelEl = sentinelRef.current;
+    if (!sentinelEl) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const [entry] = entries;
+        if (entry && entry.isIntersecting) {
+          onLoadMore();
+        }
+      },
+      {
+        rootMargin: `0px 0px ${threshold}px 0px`,
+        threshold: 0
+      }
+    );
+    observer.observe(sentinelEl);
+    return () => {
+      observer.disconnect();
+    };
+  }, [onLoadMore, hasMore, isLoadingMore, renderedCount, totalCount, threshold]);
+  const visibleItems = items.slice(0, renderedCount);
+  const itemWrapperStyle = {
+    contentVisibility: "auto",
+    containIntrinsicSize: `0 ${estimatedItemHeight}px`,
+    marginBottom: 16
+  };
+  return /* @__PURE__ */ jsxs("div", { className, style: st, children: [
+    visibleItems.map((item, index) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: itemWrapperStyle,
+        children: children(item, index)
+      },
+      keyExtractor(item, index)
+    )),
+    showProgress && renderProgress && renderedCount < totalCount && /* @__PURE__ */ jsx("div", { style: { textAlign: "center", padding: "8px 0" }, children: renderProgress(renderedCount, totalCount) }),
+    onLoadMore && hasMore && /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: sentinelRef,
+        style: { height: 1, width: "100%", pointerEvents: "none", visibility: "hidden" },
+        "aria-hidden": "true"
+      }
+    ),
+    isLoadingMore && /* @__PURE__ */ jsx("div", { style: { padding: "16px 0", textAlign: "center" }, children: loader2 ?? /* @__PURE__ */ jsx(FProgress, {}) })
+  ] });
+}
 const FPlusIcon = React.forwardRef(({
   color = "primary",
   size = 30,
@@ -9750,9 +9836,16 @@ const useFApiQuery = (queryKey, url, config, options) => {
 function useFManualApiQuery(queryKey, url, initialParams, config, options) {
   const { apiService } = useFLibraryContext();
   const queryClient = useQueryClient();
+  const abortControllerRef = useRef(null);
   const [params, setParams] = useState(initialParams);
   const [urlParams, setUrlParams] = useState(options == null ? void 0 : options.urlParams);
   const [dopUrl, setDopUrl] = useState(void 0);
+  useEffect(() => {
+    return () => {
+      var _a;
+      (_a = abortControllerRef.current) == null ? void 0 : _a.abort();
+    };
+  }, []);
   const {
     onErrorNotification = false,
     onErrorLog = false,
@@ -9789,6 +9882,9 @@ function useFManualApiQuery(queryKey, url, initialParams, config, options) {
     ...restOptions
   });
   const handleSideErrors = useCallback((error2) => {
+    if (axios.isCancel(error2)) {
+      return;
+    }
     if (onErrorNotification) {
       fNotification({
         variant: "error",
@@ -9810,10 +9906,21 @@ function useFManualApiQuery(queryKey, url, initialParams, config, options) {
     newParams,
     newUrlParams,
     preserveParams = false,
+    mergeParams = false,
     dopUrl: newDopUrl,
     preserveUrlParams = false
   } = {}) => {
-    const updatedParams = preserveParams && newParams === void 0 ? params : newParams;
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+    }
+    abortControllerRef.current = new AbortController();
+    const activeSignal = abortControllerRef.current.signal;
+    let updatedParams;
+    if (mergeParams && params && typeof params === "object" && newParams && typeof newParams === "object") {
+      updatedParams = { ...params, ...newParams };
+    } else {
+      updatedParams = preserveParams && newParams === void 0 ? params : newParams;
+    }
     const updatedUrlParams = newUrlParams === void 0 ? urlParams : preserveUrlParams ? { ...urlParams, ...newUrlParams } : newUrlParams;
     const updatedDopUrl = newDopUrl !== void 0 ? newDopUrl : dopUrl;
     setParams(updatedParams);
@@ -9825,7 +9932,20 @@ function useFManualApiQuery(queryKey, url, initialParams, config, options) {
     try {
       const rawResult = await queryClient.fetchQuery({
         queryKey: nextQueryKey,
-        queryFn: ({ signal }) => fetcher(updatedParams, updatedUrlParams, updatedDopUrl, signal),
+        queryFn: ({ signal }) => {
+          var _a;
+          if (signal) {
+            if (signal.aborted) {
+              (_a = abortControllerRef.current) == null ? void 0 : _a.abort();
+            } else {
+              signal.addEventListener("abort", () => {
+                var _a2;
+                (_a2 = abortControllerRef.current) == null ? void 0 : _a2.abort();
+              }, { once: true });
+            }
+          }
+          return fetcher(updatedParams, updatedUrlParams, updatedDopUrl, activeSignal);
+        },
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         staleTime: restOptions.staleTime
       });
@@ -9840,6 +9960,244 @@ function useFManualApiQuery(queryKey, url, initialParams, config, options) {
   }, [params, urlParams, dopUrl, queryKey, fetcher, queryClient, restOptions, handleSideErrors]);
   return { ...query, run, params, urlParams };
 }
+function extractDefaultData(raw) {
+  if (!raw || typeof raw !== "object") {
+    return raw;
+  }
+  const record = raw;
+  const candidate = record.result ?? record.items ?? record.content ?? record.data;
+  return candidate !== void 0 ? candidate : raw;
+}
+function extractDefaultPageMeta(raw, defaultSize, currentPage) {
+  if (!raw || typeof raw !== "object") return void 0;
+  const record = raw;
+  const p = record.page ?? record.pagination;
+  if (!p || typeof p !== "object") return void 0;
+  const totalItems = Number(p.totalItems ?? p.totalElements ?? p.totalCount ?? p.total ?? 0);
+  const size = Number(p.size ?? p.pageSize ?? p.limit ?? defaultSize);
+  const totalPages = Number(p.totalPages ?? p.pageCount ?? (size > 0 ? Math.ceil(totalItems / size) : 1));
+  const number = Number(p.number ?? p.currentPage ?? p.page ?? currentPage);
+  return { totalItems, size, totalPages, number };
+}
+function autoMergeAccumulatedData(prev, next) {
+  if (!prev) return next;
+  if (Array.isArray(next)) {
+    const prevArray = Array.isArray(prev) ? prev : [];
+    return [...prevArray, ...next];
+  }
+  if (next && typeof next === "object" && prev && typeof prev === "object") {
+    const nextObj = next;
+    const prevObj = prev;
+    const commonArrayKeys = ["result", "items", "content", "data", "posts", "rows", "list"];
+    for (const key of commonArrayKeys) {
+      if (Array.isArray(nextObj[key])) {
+        return {
+          ...nextObj,
+          [key]: [
+            ...Array.isArray(prevObj[key]) ? prevObj[key] : [],
+            ...nextObj[key]
+          ]
+        };
+      }
+    }
+    if (nextObj.result && typeof nextObj.result === "object" && !Array.isArray(nextObj.result)) {
+      const nextResult = nextObj.result;
+      const prevResult = prevObj.result && typeof prevObj.result === "object" ? prevObj.result : {};
+      const mergedResult = { ...nextResult };
+      let hasArray = false;
+      for (const subKey of Object.keys(nextResult)) {
+        if (Array.isArray(nextResult[subKey])) {
+          hasArray = true;
+          mergedResult[subKey] = [
+            ...Array.isArray(prevResult[subKey]) ? prevResult[subKey] : [],
+            ...nextResult[subKey]
+          ];
+        }
+      }
+      if (hasArray) {
+        return {
+          ...nextObj,
+          result: mergedResult
+        };
+      }
+    }
+  }
+  return next;
+}
+function useFManualPagination(options) {
+  const {
+    queryKey,
+    url,
+    defaultPageSize = 20,
+    initialFilters,
+    method = "POST",
+    config,
+    mode = "pagination",
+    select,
+    selectPage,
+    appendData,
+    onErrorNotification = true,
+    onErrorLog = false,
+    onLoadingLog = false,
+    onSuccessNotification = false,
+    notificationTitle,
+    notificationBody,
+    loadingNotificationTitle,
+    loadingNotificationBody,
+    successNotificationTitle,
+    successNotificationBody
+  } = options;
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(defaultPageSize);
+  const [accumulatedData, setAccumulatedData] = useState(void 0);
+  const [isFetchingMore, setIsFetchingMore] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const isInfinite = mode === "infinite";
+  useEffect(() => {
+    setPageSize(defaultPageSize);
+  }, [defaultPageSize]);
+  const query = useFManualApiQuery(
+    queryKey,
+    url,
+    initialFilters ? { ...initialFilters, page: 1, size: defaultPageSize } : void 0,
+    config,
+    {
+      method,
+      onErrorNotification,
+      onErrorLog,
+      onLoadingLog,
+      onSuccessNotification,
+      notificationTitle,
+      notificationBody,
+      loadingNotificationTitle,
+      loadingNotificationBody,
+      successNotificationTitle,
+      successNotificationBody
+    }
+  );
+  const rawData = query.data;
+  const pageMeta = useMemo(() => {
+    if (!rawData) return void 0;
+    if (selectPage) return selectPage(rawData);
+    return extractDefaultPageMeta(rawData, pageSize, page);
+  }, [rawData, selectPage, pageSize, page]);
+  const currentExtractedData = useMemo(() => {
+    if (!rawData) return void 0;
+    if (select) return select(rawData);
+    return extractDefaultData(rawData);
+  }, [rawData, select]);
+  const meta = useMemo(() => {
+    if (!rawData || typeof rawData !== "object") return void 0;
+    return rawData.meta;
+  }, [rawData]);
+  const data = isInfinite ? accumulatedData : currentExtractedData;
+  const extractResult = useCallback((rawResult) => {
+    if (select) return select(rawResult);
+    return extractDefaultData(rawResult);
+  }, [select]);
+  const defaultAppend = useCallback((prev, next) => {
+    if (appendData) return appendData(prev, next);
+    return autoMergeAccumulatedData(prev, next);
+  }, [appendData]);
+  const submitFilters = useCallback(async ({
+    payload,
+    resetPage = true,
+    dopUrl
+  }) => {
+    const targetPage = resetPage ? 1 : page;
+    if (resetPage) {
+      setPage(1);
+      if (isInfinite) {
+        setAccumulatedData(void 0);
+      }
+    }
+    setIsSubmitting(true);
+    try {
+      const rawResponse = await query.run({
+        newParams: { ...payload, page: targetPage, size: pageSize },
+        dopUrl
+      });
+      const extracted = extractResult(rawResponse);
+      if (isInfinite) {
+        setAccumulatedData(extracted);
+      }
+      return extracted;
+    } finally {
+      setIsSubmitting(false);
+    }
+  }, [query, page, pageSize, isInfinite, extractResult]);
+  const changePage = useCallback(async (newPage) => {
+    if (isInfinite) {
+      setIsFetchingMore(true);
+      try {
+        const rawResponse = await query.run({
+          newParams: { page: newPage, size: pageSize },
+          mergeParams: true
+        });
+        const extracted = extractResult(rawResponse);
+        setAccumulatedData((prev) => defaultAppend(prev, extracted));
+        setPage(newPage);
+        return extracted;
+      } finally {
+        setIsFetchingMore(false);
+      }
+    } else {
+      setPage(newPage);
+      const rawResponse = await query.run({
+        newParams: { page: newPage, size: pageSize },
+        mergeParams: true
+      });
+      return extractResult(rawResponse);
+    }
+  }, [query, pageSize, isInfinite, extractResult, defaultAppend]);
+  const hasMore = useMemo(() => {
+    if (!pageMeta) return false;
+    return pageMeta.number < pageMeta.totalPages;
+  }, [pageMeta]);
+  const loadMore = useCallback(async () => {
+    if (query.isFetching || isFetchingMore || !hasMore) {
+      return void 0;
+    }
+    const nextPage = ((pageMeta == null ? void 0 : pageMeta.number) ?? page) + 1;
+    return changePage(nextPage);
+  }, [query.isFetching, isFetchingMore, hasMore, pageMeta, page, changePage]);
+  const paginationProps = useMemo(() => ({
+    currentPage: (pageMeta == null ? void 0 : pageMeta.number) ?? page,
+    totalCount: (pageMeta == null ? void 0 : pageMeta.totalItems) ?? 0,
+    pageSize: (pageMeta == null ? void 0 : pageMeta.size) ?? pageSize,
+    siblingCount: 1,
+    onPageChange: (newPage) => {
+      if (typeof newPage === "number") {
+        changePage(newPage).catch(() => {
+        });
+      } else if (newPage === "prev") {
+        changePage(Math.max(1, ((pageMeta == null ? void 0 : pageMeta.number) ?? page) - 1)).catch(() => {
+        });
+      } else if (newPage === "next") {
+        const max = (pageMeta == null ? void 0 : pageMeta.totalPages) ?? page;
+        changePage(Math.min(max, ((pageMeta == null ? void 0 : pageMeta.number) ?? page) + 1)).catch(() => {
+        });
+      }
+    }
+  }), [pageMeta, page, pageSize, changePage]);
+  const isLoading = isInfinite ? isSubmitting || query.isLoading && !accumulatedData : isSubmitting || query.isLoading && !currentExtractedData;
+  return {
+    data,
+    result: data,
+    rawResponse: rawData,
+    meta,
+    pageMeta,
+    isLoading,
+    isFetching: query.isFetching,
+    isFetchingMore,
+    hasMore,
+    error: query.error,
+    submitFilters,
+    changePage,
+    loadMore,
+    paginationProps
+  };
+}
 const waterError = "_waterError_10t7p_1";
 const scene = "_scene_10t7p_12";
 const waves = "_waves_10t7p_18";
@@ -9985,6 +10343,7 @@ export {
   FPlusIcon,
   FPreloader,
   FProgress,
+  FProgressiveList,
   FRadioButton,
   FReloadIcon,
   FSafeIcon,
@@ -10045,6 +10404,7 @@ export {
   useFApiQuery,
   useFLibraryContext,
   useFLibraryContextOptional,
-  useFManualApiQuery
+  useFManualApiQuery,
+  useFManualPagination
 };
 //# sourceMappingURL=f-ui-kit.es.js.map