@noya-app/noya-designsystem 0.1.63 → 0.1.65

package/src/components/ListNavigator.tsx

@@ -0,0 +1,106 @@
+"use client";
+
+import React from "react";
+import { isSubMenuItem, SubMenuItem } from "./internal/Menu";
+import { ListMenu, ListMenuProps } from "./ListMenu";
+import { createNavigator, NavigatorProps } from "./Navigator";
+
+export type ListNavigatorProps<T extends string> = Pick<
+  ListMenuProps<T>,
+  "items" | "renderRight" | "selectedIds"
+> &
+  Pick<NavigatorProps<any, any>, "className" | "style"> & {
+    title?: React.ReactNode;
+    onSelect: (item: T, { popToRoot }: { popToRoot: () => void }) => void;
+    renderHeader?: ({
+      title,
+      onBack,
+    }: {
+      title?: React.ReactNode;
+      onBack?: () => void;
+    }) => React.ReactNode;
+  };
+
+const ListNavigatorInternal = createNavigator<{
+  screen: { id: string | undefined };
+}>();
+
+export function ListNavigator<T extends string>({
+  title,
+  items,
+  onSelect,
+  className,
+  style,
+  renderRight,
+  renderHeader,
+  selectedIds,
+}: ListNavigatorProps<T>) {
+  return (
+    <ListNavigatorInternal
+      initialRoute={{ name: "screen", params: { id: undefined } }}
+      renderHeader={
+        renderHeader &&
+        (({ route, onBack }) => {
+          const parentItem = items.find(
+            (item): item is SubMenuItem<T> =>
+              isSubMenuItem(item) && item.id === route.params.id
+          );
+
+          return renderHeader({
+            title: parentItem?.title ?? title,
+            onBack: parentItem ? onBack : undefined,
+          });
+        })
+      }
+      // Always show header if there is a renderHeader or title.
+      // Otherwise, show header if there is more than one item in the stack.
+      showHeader={
+        Boolean(renderHeader) ||
+        Boolean(title) ||
+        (({ stack }) => stack.length > 1)
+      }
+      cardClassName="n-py-1"
+      className={className}
+      style={style}
+    >
+      <ListNavigatorInternal.Screen
+        name="screen"
+        title={({ route }) => {
+          const nestedItem = items.find(
+            (item): item is SubMenuItem<T> =>
+              isSubMenuItem(item) && item.id === route.params.id
+          );
+
+          return nestedItem?.title ?? title ?? null;
+        }}
+      >
+        {({ route, navigation }) => {
+          const nestedItem = items.find(
+            (item): item is SubMenuItem<T> =>
+              isSubMenuItem(item) && item.id === route.params.id
+          );
+
+          return (
+            <ListMenu
+              items={nestedItem?.items ?? items}
+              selectedIds={selectedIds}
+              onSelect={(itemId) => {
+                const nestedItem = items.find(
+                  (item): item is SubMenuItem<T> =>
+                    isSubMenuItem(item) && item.id === itemId
+                );
+
+                if (nestedItem) {
+                  navigation.push("screen", { id: nestedItem.id });
+                } else {
+                  onSelect(itemId as T, { popToRoot: () => navigation.pop() });
+                }
+              }}
+              renderRight={renderRight}
+            />
+          );
+        }}
+      </ListNavigatorInternal.Screen>
+    </ListNavigatorInternal>
+  );
+}