fix(docs): added ts example for infinite pagination (#2718)

* fix(docs): added ts example for infinite pagination * fix(docs): changed the condition of showOpenInCodeSandbox in CodeDemo * chore(docs): add bun command * chore(docs): add bun command --------- Co-authored-by: WK Wong <wingkwong.code@gmail.com>
heroui-inc · Sep 4, 2024 · 26d8f01 · 26d8f01
1 parent 87336c7
commit 26d8f01
Show file tree

Hide file tree

Showing 8 changed files with 119 additions and 7 deletions.
diff --git a/apps/docs/components/docs/components/code-demo/code-demo.tsx b/apps/docs/components/docs/components/code-demo/code-demo.tsx
@@ -58,7 +58,7 @@ export const CodeDemo: React.FC<CodeDemoProps> = ({
   isPreviewCentered = false,
   // when false .js files will be used
   typescriptStrict = false,
-  showOpenInCodeSandbox,
+  showOpenInCodeSandbox = true,
   isGradientBox = false,
   previewHeight = "auto",
   overflow = "visible",
@@ -139,7 +139,7 @@ export const CodeDemo: React.FC<CodeDemoProps> = ({
         files={files}
         highlightedLines={highlightedLines}
         showEditor={showEditor}
-        showOpenInCodeSandbox={showOpenInCodeSandbox || showPreview}
+        showOpenInCodeSandbox={showOpenInCodeSandbox}
         showPreview={showSandpackPreview}
         typescriptStrict={typescriptStrict}
       />

diff --git a/apps/docs/content/components/table/infinite-pagination.ts b/apps/docs/content/components/table/infinite-pagination.ts
@@ -67,10 +67,98 @@ export default function App() {
   );
 }`;
 
+const AppTs = `import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, Pagination, Spinner, getKeyValue} from "@nextui-org/react";
+import { useInfiniteScroll } from "@nextui-org/use-infinite-scroll";
+import { useAsyncList } from "@react-stately/data";
+
+interface SWCharacter {
+  name: string;
+  height: string;
+  mass: string;
+  birth_year: string;
+}
+
+export default function App() {
+  const [isLoading, setIsLoading] = React.useState<boolean>(true);
+  const [hasMore, setHasMore] = React.useState<boolean>(false);
+
+  let list = useAsyncList<SWCharacter>({
+    async load({ signal, cursor }) {
+      if (cursor) {
+        setIsLoading(false);
+      }
+
+      // If no cursor is available, then we're loading the first page.
+      // Otherwise, the cursor is the next URL to load, as returned from the previous page.
+      const res = await fetch(
+        cursor || "https://swapi.py4e.com/api/people/?search=",
+        { signal }
+      );
+      let json = await res.json();
+
+      setHasMore(json.next !== null);
+
+      return {
+        items: json.results,
+        cursor: json.next,
+      };
+    },
+  });
+
+  const [loaderRef, scrollerRef] = useInfiniteScroll({
+    hasMore,
+    onLoadMore: list.loadMore,
+  });
+
+  return (
+    <Table
+      isHeaderSticky
+      aria-label="Example table with infinite pagination"
+      baseRef={scrollerRef}
+      bottomContent={
+        hasMore ? (
+          <div className="flex w-full justify-center">
+            <Spinner ref={loaderRef} color="white" />
+          </div>
+        ) : null
+      }
+      classNames={{
+        base: "max-h-[520px] overflow-scroll",
+        table: "min-h-[400px]",
+      }}
+    >
+      <TableHeader>
+        <TableColumn key="name">Name</TableColumn>
+        <TableColumn key="height">Height</TableColumn>
+        <TableColumn key="mass">Mass</TableColumn>
+        <TableColumn key="birth_year">Birth year</TableColumn>
+      </TableHeader>
+      <TableBody
+        isLoading={isLoading}
+        items={list.items}
+        loadingContent={<Spinner color="white" />}
+      >
+        {(item: SWCharacter) => (
+          <TableRow key={item.name}>
+            {(columnKey) => (
+              <TableCell>{getKeyValue(item, columnKey)}</TableCell>
+            )}
+          </TableRow>
+        )}
+      </TableBody>
+    </Table>
+  );
+}`;
+
 const react = {
   "/App.jsx": App,
 };
 
+const reactTs = {
+  "/App.tsx": AppTs,
+};
+
 export default {
   ...react,
+  ...reactTs,
 };
diff --git a/apps/docs/content/docs/components/autocomplete.mdx b/apps/docs/content/docs/components/autocomplete.mdx
@@ -226,6 +226,7 @@ import {useFilter} from "@react-aria/i18n";
 <CodeDemo
   title="Fully Controlled"
   showPreview={false}
+  showOpenInCodeSandbox={false}
   highlightedLines="63-64,67,69-71"
   files={autocompleteContent.fullyControlled}
 />
@@ -281,6 +282,7 @@ import {useAsyncList} from "@react-stately/data";
   typescriptStrict={true}
   title="Asynchronous Filtering"
   showPreview={false}
+  showOpenInCodeSandbox={false}
   highlightedLines="27-29,33"
   files={autocompleteContent.asyncFiltering}
 />
@@ -307,6 +309,7 @@ import {useInfiniteScroll} from "@nextui-org/use-infinite-scroll";
 
 <CodeDemo
   showPreview={false}
+  showOpenInCodeSandbox={false}
   typescriptStrict={true}
   title="Asynchronous Loading"
   highlightedLines="21-22,25,27"

diff --git a/apps/docs/content/docs/components/avatar.mdx b/apps/docs/content/docs/components/avatar.mdx
@@ -90,7 +90,8 @@ You can also provide a custom fallback component to be displayed when the `src`
 
 In case you need to customize the avatar even further, you can use the `useAvatar` hook to create your own implementation.
 
-<CodeDemo showPreview={false} title="Custom implementation" files={avatarContent.customImpl} />
+<CodeDemo showPreview={false} showOpenInCodeSandbox={false} title="Custom implementation" files={avatarContent.customImpl} />
+
 
 ### Custom initials logic
 
@@ -134,7 +135,7 @@ By passing the `isGrid` prop to the `AvatarGroup` component, the avatars will be
 In case you need to customize the avatar group even further, you can use the `useAvatarGroup` hook and the
 `AvatarGroupProvider` to create your own implementation.
 
-<CodeDemo showPreview={false} title="Custom implementation" files={avatarContent.groupCustomImpl} />
+<CodeDemo showPreview={false} showOpenInCodeSandbox={false} title="Custom implementation" files={avatarContent.groupCustomImpl} />
 
 ## Slots
 

diff --git a/apps/docs/content/docs/components/button.mdx b/apps/docs/content/docs/components/button.mdx
@@ -101,7 +101,7 @@ You can customize the `Button` component by passing custom Tailwind CSS classes
 
 You can also use the `useButton` hook to create your own button component.
 
-<CodeDemo showPreview={false} title="Custom Implementation" files={buttonContent.customImpl} />
+<CodeDemo showPreview={false} showOpenInCodeSandbox={false} title="Custom Implementation" files={buttonContent.customImpl} />
 
 ## Button Group
 

diff --git a/apps/docs/content/docs/components/image.mdx b/apps/docs/content/docs/components/image.mdx
@@ -79,7 +79,7 @@ You can use the `fallbackSrc` prop to display a fallback image when:
 Next.js provides an optimized [Image](https://nextjs.org/docs/app/api-reference/components/image) component,
 you can use it with NextUI `Image` component as well.
 
-<CodeDemo showPreview={false} title="With Next.js Image" files={imageContent.nextjs} />
+<CodeDemo showPreview={false} showOpenInCodeSandbox={false} title="With Next.js Image" files={imageContent.nextjs} />
 
 > **Note**: NextUI's `Image` component is `client-side`, using hooks like `useState` for loading states
 > and animations. Use Next.js `Image` alone if these features aren't required.

diff --git a/apps/docs/content/docs/components/link.mdx b/apps/docs/content/docs/components/link.mdx
@@ -102,7 +102,7 @@ function App() {
 
 In case you need to customize the link even further, you can use the `useLink` hook to create your own implementation.
 
-<CodeDemo showPreview={false} title="Custom implementation" files={linkContent.customImpl} />
+<CodeDemo showPreview={false} showOpenInCodeSandbox={false} title="Custom implementation" files={linkContent.customImpl} />
 
 <Spacer y={4} />
 

diff --git a/apps/docs/content/docs/components/table.mdx b/apps/docs/content/docs/components/table.mdx
@@ -223,6 +223,7 @@ sure to install it before using the sorting feature.
     npm: "npm install @react-stately/data",
     yarn: "yarn add @react-stately/data",
     pnpm: "pnpm add @react-stately/data",
+    bun: "bun add @react-stately/data",
   }}
 />
 
@@ -288,13 +289,32 @@ It is also possible to use the [Pagination](/components/pagination) component to
 Table also supports infinite pagination. To do so, you can use the `useAsyncList` hook from [@react-stately/data](https://react-spectrum.adobe.com/react-stately/useAsyncList.html) and
 [@nextui-org/use-infinite-scroll](https://www.npmjs.com/package/@nextui-org/use-infinite-scroll) hook.
 
+<PackageManagers
+  commands={{
+    npm: "npm install @react-stately/data @nextui-org/use-infinite-scroll",
+    yarn: "yarn add @react-stately/data @nextui-org/use-infinite-scroll",
+    pnpm: "pnpm add @react-stately/data @nextui-org/use-infinite-scroll",
+    bun: "bun add @react-stately/data @nextui-org/use-infinite-scroll",
+  }}
+/>
+
+```jsx
+import { useInfiniteScroll } from "@nextui-org/use-infinite-scroll";
+
+import { useAsyncList } from "@react-stately/data";
+```
+
+<Spacer y={2} />
+
 <CodeDemo
   asIframe
   title="Infinite Paginated Table"
   resizeEnabled={false}
   files={tableContent.infinitePagination}
   previewHeight="620px"
   displayMode="visible"
+  showPreview={true}
+  showOpenInCodeSandbox={false}
   iframeSrc="/examples/table/infinite-pagination"
 />