@7span/react-list 0.0.5 → 1.0.0

package/src/components/load-more.jsx

@@ -0,0 +1,39 @@
+import { memo, useCallback, useMemo } from "react";
+import { useListContext } from "../context/list-provider";
+
+export const ReactListLoadMore = memo(({ children }) => {
+  const { listState } = useListContext();
+  const { data, count, pagination, setPage, loader, error } = listState;
+  const { page, perPage } = pagination;
+  const { isLoading } = loader;
+
+  const hasMoreItems = useMemo(
+    () => page * perPage < count,
+    [page, perPage, count]
+  );
+
+  const loadMore = useCallback(() => {
+    if (hasMoreItems && !isLoading) {
+      setPage(page + 1);
+    }
+  }, [hasMoreItems, isLoading, setPage, page]);
+
+  const scope = useMemo(
+    () => ({
+      isLoading,
+      loadMore,
+      hasMoreItems,
+    }),
+    [isLoading, loadMore, hasMoreItems]
+  );
+
+  if (!data || data.length === 0) {
+    return null;
+  }
+
+  if (error) {
+    return null;
+  }
+
+  return children(scope);
+});

package/src/components/loader.jsx

@@ -0,0 +1,29 @@
+import { memo, useMemo } from "react";
+import { useListContext } from "../context/list-provider";
+
+export const ReactListLoader = memo(({ children, position = "overlay" }) => {
+  const { listState } = useListContext();
+  const { loader } = listState;
+  const { isLoading, initializingState } = loader;
+
+  const scope = useMemo(
+    () => ({
+      isLoading,
+    }),
+    [isLoading]
+  );
+
+  if (!initializingState && !isLoading) {
+    return null;
+  }
+
+  return (
+    <div>
+      {children || (
+        <div>
+          <p>Loading...</p>
+        </div>
+      )}
+    </div>
+  );
+});

package/src/components/pagination.jsx

@@ -0,0 +1,158 @@
+import { memo, useMemo } from "react";
+import { useListContext } from "../context/list-provider";
+
+export const ReactListPagination = memo(
+  ({
+    children,
+    pageLinks = 5,
+    renderFirst,
+    renderPrev,
+    renderPages,
+    renderPage,
+    renderNext,
+    renderLast,
+  }) => {
+    const { listState } = useListContext();
+    const { data, count, pagination, setPage, loader, error } = listState;
+    const { page, perPage } = pagination;
+    const { initialLoading, isLoading } = loader;
+
+    const paginationState = useMemo(() => {
+      const pagesCount = Math.ceil(count / perPage);
+      const halfWay = Math.floor(pageLinks / 2);
+      const hasNext = page * perPage < count;
+      const hasPrev = page !== 1;
+      return { pagesCount, halfWay, hasNext, hasPrev };
+    }, [count, perPage, page, pageLinks]);
+
+    const pagesToDisplay = useMemo(() => {
+      const { pagesCount, halfWay } = paginationState;
+      const pages = Array.from({ length: Math.min(pageLinks, pagesCount) });
+
+      if (page <= halfWay) {
+        return pages.map((_, index) => index + 1);
+      } else if (pagesCount - page < halfWay) {
+        return pages.map((_, index) => pagesCount - index).reverse();
+      } else {
+        return pages.map((_, index) => page - halfWay + index);
+      }
+    }, [page, pageLinks, paginationState]);
+
+    const navigation = useMemo(
+      () => ({
+        prev: () => setPage(page - 1),
+        next: () => setPage(page + 1),
+        first: () => setPage(1),
+        last: () => setPage(paginationState.pagesCount),
+        setPage: (newPage) => setPage(newPage),
+      }),
+      [setPage, page, paginationState.pagesCount]
+    );
+
+    const scope = useMemo(
+      () => ({
+        page,
+        perPage,
+        count,
+        ...paginationState,
+        pagesToDisplay,
+        ...navigation,
+      }),
+      [page, perPage, count, paginationState, pagesToDisplay, navigation]
+    );
+
+    if (initialLoading) return null;
+
+    if (!data || data.length === 0) {
+      return null;
+    }
+
+    if (error) {
+      return null;
+    }
+
+    if (children) {
+      return children(scope);
+    }
+
+    return (
+      <div className="react-list-pagination">
+        {renderFirst ? (
+          renderFirst(scope)
+        ) : (
+          <button
+            type="button"
+            disabled={!paginationState.hasPrev}
+            onClick={navigation.first}
+          >
+            First
+          </button>
+        )}
+
+        {renderPrev ? (
+          renderPrev(scope)
+        ) : (
+          <button
+            type="button"
+            disabled={!paginationState.hasPrev}
+            onClick={navigation.prev}
+          >
+            Prev
+          </button>
+        )}
+
+        {renderPages ? (
+          renderPages(scope)
+        ) : (
+          <div>
+            {pagesToDisplay.map((pageNum) => {
+              const isActive = pageNum === page;
+              const pageScope = { ...scope, page: pageNum, isActive };
+
+              return renderPage ? (
+                renderPage(pageScope)
+              ) : (
+                <div key={`page-${pageNum}`}>
+                  {isActive ? (
+                    <span>{pageNum}</span>
+                  ) : (
+                    <button
+                      type="button"
+                      onClick={() => navigation.setPage(pageNum)}
+                    >
+                      {pageNum}
+                    </button>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        )}
+
+        {renderNext ? (
+          renderNext(scope)
+        ) : (
+          <button
+            type="button"
+            disabled={!paginationState.hasNext}
+            onClick={navigation.next}
+          >
+            Next
+          </button>
+        )}
+
+        {renderLast ? (
+          renderLast(scope)
+        ) : (
+          <button
+            type="button"
+            disabled={!paginationState.hasNext}
+            onClick={navigation.last}
+          >
+            Last
+          </button>
+        )}
+      </div>
+    );
+  }
+);

package/src/components/per-page.jsx

@@ -0,0 +1,65 @@
+import { memo, useCallback, useMemo } from "react";
+import { useListContext } from "../context/list-provider";
+
+export const ReactListPerPage = memo(
+  ({ children, options = [10, 25, 50, 100] }) => {
+    const { listState } = useListContext();
+    const { data, pagination, setPerPage, loader, error } = listState;
+    const { perPage } = pagination;
+    const { initialLoading } = loader;
+
+    const serializedOptions = useMemo(() => {
+      return options.map((item) => {
+        if (typeof item !== "object") {
+          return {
+            value: item,
+            label: item,
+          };
+        }
+        return item;
+      });
+    }, [options]);
+
+    const handlePerPageChange = useCallback(
+      (e) => {
+        setPerPage(Number(e.target.value));
+      },
+      [setPerPage]
+    );
+
+    const scope = useMemo(
+      () => ({
+        perPage,
+        setPerPage,
+        options: serializedOptions,
+      }),
+      [perPage, setPerPage, serializedOptions]
+    );
+
+    if (initialLoading) return null;
+
+    if (!data || data.length === 0) {
+      return null;
+    }
+
+    if (error) {
+      return null;
+    }
+
+    return (
+      <div className="react-list-per-page">
+        {children ? (
+          children(scope)
+        ) : (
+          <select value={perPage} onChange={handlePerPageChange}>
+            {serializedOptions.map((option) => (
+              <option key={`option-${option.value}`} value={option.value}>
+                {option.label} items per page
+              </option>
+            ))}
+          </select>
+        )}
+      </div>
+    );
+  }
+);

package/src/components/refresh.jsx

@@ -0,0 +1,34 @@
+import { memo, useCallback, useMemo } from "react";
+import { useListContext } from "../context/list-provider";
+
+export const ReactListRefresh = memo(({ children }) => {
+  const { listState } = useListContext();
+  const { loader, refresh } = listState;
+  const { isLoading, initialLoading } = loader;
+
+  const handleRefresh = useCallback(() => {
+    refresh({ isRefresh: true });
+  }, [refresh]);
+
+  const scope = useMemo(
+    () => ({
+      isLoading,
+      refresh: handleRefresh,
+    }),
+    [isLoading, handleRefresh]
+  );
+
+  if (initialLoading) return null;
+
+  if (children) {
+    return children(scope);
+  }
+
+  return (
+    <div className="react-list-refresh">
+      <button onClick={handleRefresh} disabled={isLoading}>
+        {isLoading ? "Loading..." : "Refresh"}
+      </button>
+    </div>
+  );
+});

package/src/components/search.jsx

@@ -0,0 +1,59 @@
+import { memo, useEffect, useRef, useState } from "react";
+import { useListContext } from "../context/list-provider";
+
+export const ReactListSearch = memo(({ children, debounceTime = 500 }) => {
+  const { listState } = useListContext();
+  const { search, setSearch } = listState;
+  const [localSearch, setLocalSearch] = useState(search ?? "");
+  const debounceTimerRef = useRef(null);
+
+  // Sync local state with context when search prop changes
+  useEffect(() => {
+    if (search !== localSearch) {
+      setLocalSearch(search ?? "");
+    }
+  }, [search]);
+
+  const handleChange = (value) => {
+    setLocalSearch(value);
+
+    // Clear any existing timer
+    if (debounceTimerRef.current) {
+      clearTimeout(debounceTimerRef.current);
+    }
+
+    // Set a new timer
+    debounceTimerRef.current = setTimeout(() => {
+      setSearch(value);
+    }, debounceTime);
+  };
+
+  // Clean up timer on unmount
+  useEffect(() => {
+    return () => {
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+    };
+  }, []);
+
+  const scope = {
+    search: localSearch,
+    setSearch: handleChange,
+  };
+
+  return (
+    <div className="react-list-search">
+      {children ? (
+        children(scope)
+      ) : (
+        <input
+          type="text"
+          value={localSearch}
+          onChange={(e) => handleChange(e.target.value)}
+          placeholder="Search..."
+        />
+      )}
+    </div>
+  );
+});

package/src/components/summary.jsx

@@ -0,0 +1,51 @@
+import { memo, useMemo } from "react";
+import { useListContext } from "../context/list-provider";
+
+export const ReactListSummary = memo(({ children }) => {
+  const { listState } = useListContext();
+  const { data, count, pagination, loader, error } = listState;
+  const { page, perPage } = pagination;
+  const { initialLoading, isLoading } = loader;
+
+  const summaryData = useMemo(() => {
+    const from = page * perPage - perPage + 1;
+    const to = Math.min(page * perPage, count);
+    const visibleCount = data?.length || 0;
+
+    return { from, to, visibleCount };
+  }, [page, perPage, count, data]);
+
+  const scope = useMemo(
+    () => ({
+      ...summaryData,
+      count,
+    }),
+    [summaryData, count]
+  );
+
+  if (initialLoading) return null;
+
+  if (!data || data.length === 0) {
+    return null;
+  }
+
+  if (error) {
+    return null;
+  }
+
+  return (
+    <div className="react-list-summary">
+      {children ? (
+        children(scope)
+      ) : (
+        <span>
+          Showing <span>{summaryData.visibleCount}</span> items (
+          <span>
+            {summaryData.from} - {summaryData.to}
+          </span>
+          ) out of <span>{count}</span>
+        </span>
+      )}
+    </div>
+  );
+});

package/src/components/utils.js

@@ -0,0 +1,42 @@
+export const deepEqual = (obj1, obj2) => {
+  if (obj1 === obj2) return true;
+
+  if (obj1 == null || obj2 == null) return obj1 === obj2;
+
+  if (typeof obj1 !== "object" || typeof obj2 !== "object")
+    return obj1 === obj2;
+
+  if (Array.isArray(obj1) && Array.isArray(obj2)) {
+    if (obj1.length !== obj2.length) return false;
+    for (let i = 0; i < obj1.length; i++) {
+      if (!deepEqual(obj1[i], obj2[i])) return false;
+    }
+    return true;
+  }
+
+  if (Array.isArray(obj1) || Array.isArray(obj2)) return false;
+
+  const keys1 = Object.keys(obj1).filter((key) => obj1[key] !== undefined);
+  const keys2 = Object.keys(obj2).filter((key) => obj2[key] !== undefined);
+
+  if (keys1.length !== keys2.length) return false;
+
+  for (let key of keys1) {
+    if (!keys2.includes(key)) return false;
+    if (!deepEqual(obj1[key], obj2[key])) return false;
+  }
+
+  return true;
+};
+
+export const hasActiveFilters = (currentFilters, initialFilters) => {
+  if (!initialFilters || Object.keys(initialFilters).length === 0) {
+    return currentFilters && Object.keys(currentFilters).length > 0;
+  }
+
+  if (!currentFilters || Object.keys(currentFilters).length === 0) {
+    return false;
+  }
+
+  return !deepEqual(currentFilters, initialFilters);
+};

package/src/context/list-provider.jsx

@@ -0,0 +1,55 @@
+import { createContext, useContext, useMemo, useState } from "react";
+
+const ListContext = createContext(null);
+
+export const ReactListProvider = ({ children, config }) => {
+  const { requestHandler, stateManager = {} } = config;
+  const [listState, setListState] = useState({
+    data: [],
+    response: null,
+    error: null,
+    count: 0,
+    selection: [],
+    pagination: {
+      page: 1,
+      perPage: 25,
+    },
+    loader: {
+      isLoading: false,
+      initialLoading: true,
+    },
+    sort: {
+      sortBy: null,
+      sortOrder: "desc",
+    },
+    search: "",
+    filters: {},
+    attrs: [],
+    isEmpty: true,
+    isInitializing: true,
+  });
+
+  if (!requestHandler) {
+    throw new Error("ListProvider: requestHandler is required.");
+  }
+
+  const value = useMemo(
+    () => ({
+      requestHandler,
+      stateManager,
+      listState,
+      setListState,
+    }),
+    [requestHandler, stateManager, listState]
+  );
+
+  return <ListContext.Provider value={value}>{children}</ListContext.Provider>;
+};
+
+export const useListContext = () => {
+  const context = useContext(ListContext);
+  if (!context) {
+    throw new Error("useListContext must be used within a ListProvider");
+  }
+  return context;
+};

package/src/index.js

@@ -0,0 +1,15 @@
+export { ReactListAttributes } from "./components/attributes";
+export { ReactListEmpty } from "./components/empty";
+export { ReactListError } from "./components/error";
+export { ReactListGoTo } from "./components/go-to";
+export { ReactListInitialLoader } from "./components/initial-loader";
+export { ReactListItems } from "./components/items";
+export { default } from "./components/list";
+export { ReactListLoadMore } from "./components/load-more";
+export { ReactListLoader } from "./components/loader";
+export { ReactListPagination } from "./components/pagination";
+export { ReactListPerPage } from "./components/per-page";
+export { ReactListRefresh } from "./components/refresh";
+export { ReactListSearch } from "./components/search";
+export { ReactListSummary } from "./components/summary";
+export { ReactListProvider } from "./context/list-provider";