@7span/react-list 0.0.6 → 1.0.0

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";