feat (IDE-555): Add infinite scroll to table component (#140)

* feat (IDE-555): Add infinite scroll to table component * fix: simplify code * chore: comment * chore: comment * chore: uncommect * feat: add example * chore: disable loader * fix: remove unused sentinel * refactor: move static data to data.tsx * fix: remove unused ref * chore: remove comment * feat: add loader in the table end * feat: add loader in the table end * chore: make sure row and col keys are different * feat: add faker js * chore: remove ununsed import * chore: increase per page data * chore: remove loader
raystack · Sep 2, 2024 · 26f6c32 · 26f6c32
1 parent f13da1a
commit 26f6c32
Show file tree

Hide file tree

Showing 8 changed files with 9,813 additions and 7,626 deletions.
diff --git a/apps/www/examples/shield-ts/assets.tsx b/apps/www/examples/shield-ts/assets.tsx
@@ -1,3 +1,5 @@
+import React, { useState, useCallback, useEffect } from "react";
+import dayjs from "dayjs";
 import {
   ApsaraColumnDef,
   Checkbox,
@@ -8,54 +10,9 @@ import {
   Text,
   useTable,
 } from "@raystack/apsara";
-import dayjs from "dayjs";
-import * as React from "react";
-
-const data: Payment[] = [
-  {
-    id: "m5gr84i9",
-    amount: 316,
-    status: "success",
-    email: "[email protected]",
-    created_at: "2023-10-10T13:02:56.12Z",
-  },
-  {
-    id: "3u1reuv4",
-    amount: 242,
-    status: "success",
-    email: "[email protected]",
-    created_at: "2023-09-15T11:55:46.28Z",
-  },
-  {
-    id: "derv1ws0",
-    amount: 837,
-    status: "processing",
-    email: "[email protected]",
-    created_at: "2023-07-01T10:02:50.60Z",
-  },
-  {
-    id: "5kma53ae",
-    amount: 874,
-    status: "success",
-    email: "[email protected]",
-    created_at: "2023-05-30T09:02:26.49Z",
-  },
-  {
-    id: "bhqecj4p",
-    amount: 721,
-    status: "failed",
-    email: "[email protected]",
-    created_at: "2024-04-20T21:02:01.25Z",
-  },
-];
 
-export type Payment = {
-  id: string;
-  amount: number;
-  status: "pending" | "processing" | "success" | "failed";
-  email: string;
-  created_at: string;
-};
+import { getData, Payment } from "./data";
+const TOTAL_PAGES = 100;
 
 export const columns: ApsaraColumnDef<Payment>[] = [
   {
@@ -135,31 +92,51 @@ export const columns: ApsaraColumnDef<Payment>[] = [
 ];
 
 export const Assets = () => {
-  const [isLoading, setIsLoading] = React.useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [page, setPage] = useState(1);
+  const [hasMoreData, setHasMoreData] = useState(true);
+  const [data, setData] = useState<Payment[]>([]);
+
+  const loadMoreData = useCallback(() => {
+    if (!isLoading && hasMoreData) {
+      setIsLoading(true);
+      // API simulation call to fetch more data
+      setTimeout(() => {
+        const moreData = getData();
+        setData((prevData) => [...prevData, ...moreData]);
+        setPage((prevPage) => prevPage + 1);
+        setIsLoading(false);
+        if (page >= TOTAL_PAGES) {
+          setHasMoreData(false);
+        }
+      }, 1000);
+    }
+  }, [isLoading, hasMoreData, page]);
 
-  function onSwitchChange() {
-    setIsLoading((prev) => !prev);
-  }
+  useEffect(() => {
+    setData(getData())
+  }, [])
 
   return (
     <DataTable
       columns={columns}
       data={data}
       initialState={{ sorting: [{ id: "amount", desc: true }] }}
       isLoading={isLoading}
+      onLoadMore={loadMoreData}
     >
       <DataTable.Toolbar>
-        <AssetsHeader onSwitchChange={onSwitchChange} />
+        <AssetsHeader />
         <DataTable.FilterChips />
       </DataTable.Toolbar>
       <DataTable.Footer>
-        <AssetsFooter />
+        <></>
       </DataTable.Footer>
     </DataTable>
   );
 };
 
-const AssetsHeader = ({ onSwitchChange }) => {
+const AssetsHeader = () => {
   const { filteredColumns, table } = useTable();
   const isFiltered = filteredColumns.length > 0;
   return (
@@ -170,12 +147,9 @@ const AssetsHeader = ({ onSwitchChange }) => {
     >
       <Flex gap="extra-large" align="center">
         <Text style={{ fontWeight: 500 }}>Assets</Text>
-        <Flex gap="small" align="center">
-          <Label>Show Loader</Label>
-          <Switch onCheckedChange={onSwitchChange} />
-        </Flex>
       </Flex>
       <Flex gap="small">
+        <AssetsFooter />
         {isFiltered ? <DataTable.ClearFilter /> : <DataTable.FilterOptions />}
         <DataTable.ViewOptions />
         <DataTable.GloabalSearch placeholder="Search assets..." />
@@ -191,7 +165,7 @@ const AssetsFooter = () => {
     <Flex align="center" justify="between" style={{ width: "100%" }}>
       <Text>
         {table.getFilteredSelectedRowModel().rows.length} of{" "}
-        {table.getFilteredRowModel().rows.length} row(s) selected.
+        {getData().length * (TOTAL_PAGES + 1)} row(s) selected.
       </Text>
     </Flex>
   );

diff --git a/apps/www/examples/shield-ts/data.tsx b/apps/www/examples/shield-ts/data.tsx
@@ -0,0 +1,84 @@
+const { faker } = require('@faker-js/faker');
+import {
+  BlendingModeIcon,
+  BoxIcon,
+  Component2Icon,
+  FaceIcon,
+  Half2Icon,
+  InfoCircledIcon,
+  Link2Icon,
+  ReaderIcon,
+  TargetIcon,
+} from "@radix-ui/react-icons";
+
+export type Payment = {
+    id: string;
+    amount: number;
+    status: "pending" | "processing" | "success" | "failed";
+    email: string;
+    created_at: string;
+  };
+
+  function createRandomData() {
+    return {
+      id: faker.string.uuid(),
+      amount: faker.number.int(),
+      status: faker.string.alpha(5),
+      email: faker.internet.email(),
+      created_at: faker.date.birthdate()
+    };
+  }
+
+  export const getData = () => faker.helpers.multiple(createRandomData, {
+    count: 35,
+  });
+
+
+export const navigationList = [
+  {
+    href: "#shield",
+    leadingIcon: <InfoCircledIcon />,
+    name: "Inbox",
+  },
+  {
+    active: true,
+    href: "#assets",
+    leadingIcon: <BlendingModeIcon />,
+    name: "Assets",
+  },
+  {
+    leadingIcon: <BoxIcon />,
+    name: "Lineage",
+    disabled: true,
+  },
+  {
+    leadingIcon: <Component2Icon />,
+    name: "Appeals",
+    disabled: true,
+  },
+  {
+    leadingIcon: <TargetIcon />,
+    name: "Grants",
+    disabled: true,
+  },
+  {
+    leadingIcon: <Half2Icon />,
+    name: "Policies",
+    disabled: true,
+  },
+  {
+    leadingIcon: <ReaderIcon />,
+    name: "Reports",
+    disabled: true,
+  },
+  {
+    leadingIcon: <FaceIcon />,
+    name: "Teams",
+    disabled: true,
+  },
+  {
+    leadingIcon: <Link2Icon />,
+    name: "Connections",
+    disabled: true,
+  },
+];
diff --git a/apps/www/examples/shield-ts/shield.tsx b/apps/www/examples/shield-ts/shield.tsx
@@ -1,68 +1,13 @@
+import React from "react";
 import {
-  BlendingModeIcon,
-  BoxIcon,
-  Component2Icon,
-  DotsVerticalIcon,
-  FaceIcon,
-  Half2Icon,
-  InfoCircledIcon,
-  Link2Icon,
-  ReaderIcon,
-  TargetIcon,
+  DotsVerticalIcon
 } from "@radix-ui/react-icons";
+
 import { Flex, ScrollArea, Sidebar } from "@raystack/apsara";
-import "@raystack/apsara/index.css";
-import React from "react";
 import { Assets } from "./assets";
+import { navigationList } from "./data";
 
-const navigationList = [
-  {
-    href: "#shield",
-    leadingIcon: <InfoCircledIcon />,
-    name: "Inbox",
-  },
-  {
-    active: true,
-    href: "#assets",
-    leadingIcon: <BlendingModeIcon />,
-    name: "Assets",
-  },
-  {
-    leadingIcon: <BoxIcon />,
-    name: "Lineage",
-    disabled: true,
-  },
-  {
-    leadingIcon: <Component2Icon />,
-    name: "Appeals",
-    disabled: true,
-  },
-  {
-    leadingIcon: <TargetIcon />,
-    name: "Grants",
-    disabled: true,
-  },
-  {
-    leadingIcon: <Half2Icon />,
-    name: "Policies",
-    disabled: true,
-  },
-  {
-    leadingIcon: <ReaderIcon />,
-    name: "Reports",
-    disabled: true,
-  },
-  {
-    leadingIcon: <FaceIcon />,
-    name: "Teams",
-    disabled: true,
-  },
-  {
-    leadingIcon: <Link2Icon />,
-    name: "Connections",
-    disabled: true,
-  },
-];
+import "@raystack/apsara/index.css";
 
 export const Shield = () => {
   return (
@@ -74,7 +19,6 @@ export const Shield = () => {
             // @ts-ignore
             style={{
               marginTop: "22px",
-              maxHeight: "calc(100vh - 280px)",
             }}
           >
             <ScrollArea style={{ paddingRight: "var(--mr-16)" }}>
@@ -93,10 +37,10 @@ export const Shield = () => {
           </Sidebar.Navigations>
         </Flex>
         <Sidebar.Footer action={<DotsVerticalIcon />}>
-          pyadav9678@gmail.com
+          john.doe@apsara.com
         </Sidebar.Footer>
       </Sidebar>
-      <Flex style={{ flex: 1, width: "100%", overflow: "hidden" }}>
+      <Flex style={{ flex: 1, width: "100%", overflow: "auto" }}>
         <Assets />
       </Flex>
     </Flex>

diff --git a/apps/www/package.json b/apps/www/package.json
@@ -24,6 +24,7 @@
     "tslib": "^2.5.0"
   },
   "devDependencies": {
+    "@faker-js/faker": "^8.4.1",
     "@mapbox/rehype-prism": "^0.8.0",
     "@radix-ui/react-scroll-area": "^1.0.3",
     "@types/mapbox__rehype-prism": "^0.8.0",

diff --git a/apps/www/pages/examples/index.tsx b/apps/www/pages/examples/index.tsx
@@ -5,15 +5,11 @@ export default function ShieldExample() {
   return (
     <>
       <Container
-        size="large"
+        size="none"
         style={{
           padding: 0,
-          height: "calc(100vh - 120px)",
-          margin: "30px auto",
+          height: "calc(100vh - 75px)",
           fontSize: "var(--fs-200)",
-          border: "2px solid var(--border-base)",
-          borderRadius: "var(--pd-8)",
-          marginTop: "var(--mr-16)",
         }}
       >
         <Shield />

diff --git a/packages/raystack/package.json b/packages/raystack/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@raystack/apsara",
-  "version": "0.11.11",
+  "version": "0.18.6",
   "types": "dist/index.d.ts",
   "sideEffects": false,
   "engines": {