@multiplatform.one/frappe-ui 7.4.0 → 7.5.0

package/src/FileBrowser/index.tsx

@@ -0,0 +1,724 @@
+import {
+  AsyncBoundary,
+  Breadcrumbs,
+  DropdownMenu,
+  ImageGrid,
+  List,
+  TreeView,
+  ViewSwitcher,
+  type TreeNode,
+} from "@multiplatform.one/components";
+import { Button, Checkbox, FileUpload, Input } from "@multiplatform.one/forms";
+import { DataTable, type DataTableColumn } from "@multiplatform.one/table";
+import { OVERLAY_BREAKPOINT, useResolvedKnobs } from "@multiplatform.one/theme";
+import {
+  CaretLeftIcon,
+  CheckIcon,
+  DotsThreeVerticalIcon,
+  DownloadSimpleIcon,
+  EyeIcon,
+  FileIcon,
+  FileArchiveIcon,
+  FileImageIcon,
+  FileTextIcon,
+  FileVideoIcon,
+  FolderIcon,
+  ListIcon,
+  MagnifyingGlassIcon,
+  PencilSimpleIcon,
+  SquaresFourIcon,
+  TrashIcon,
+  UploadSimpleIcon,
+  XIcon,
+} from "@phosphor-icons/react";
+import { useCallback, useMemo, useState, type ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+import { Text, XStack, YStack, useWindowDimensions } from "tamagui";
+import {
+  ancestorFolderIds,
+  breadcrumbItems,
+  buildFolderTree,
+  childrenOf,
+  fileKind,
+  isFolder,
+  parentFolder,
+} from "./folderTree";
+import type {
+  FileBrowserBulkBarPlacement,
+  FileBrowserFile,
+  FileBrowserLayout,
+  FileBrowserPaneStatus,
+  FileBrowserProps,
+  FileBrowserSelectAllScope,
+  FileBrowserSelectionMode,
+  FileBrowserView,
+} from "./types";
+import { readPersistedView, writePersistedView } from "./viewPersistence";
+
+export type {
+  FileBrowserBulkBarPlacement,
+  FileBrowserFile,
+  FileBrowserLayout,
+  FileBrowserPaneStatus,
+  FileBrowserProps,
+  FileBrowserSelectAllScope,
+  FileBrowserSelectionMode,
+  FileBrowserView,
+};
+
+const RAIL_WIDTH = 240;
+
+function KindIcon({ kind, size = 16 }: { kind: ReturnType<typeof fileKind>; size?: number }) {
+  const props = { size, color: "$color9" as const };
+  if (kind === "folder") return <FolderIcon {...props} />;
+  if (kind === "image") return <FileImageIcon {...props} />;
+  if (kind === "video") return <FileVideoIcon {...props} />;
+  if (kind === "text") return <FileTextIcon {...props} />;
+  if (kind === "zip") return <FileArchiveIcon {...props} />;
+  return <FileIcon {...props} />;
+}
+
+function formatSize(bytes?: number): string {
+  if (bytes == null || Number.isNaN(bytes)) return "—";
+  if (bytes === 0) return "0 B";
+  const units = ["B", "KB", "MB", "GB"];
+  const i = Math.min(units.length - 1, Math.floor(Math.log(bytes) / Math.log(1024)));
+  return `${(bytes / 1024 ** i).toFixed(i === 0 ? 0 : 1)} ${units[i]}`;
+}
+
+function resolveStatus(
+  status: FileBrowserPaneStatus | undefined,
+  items: unknown[],
+  error?: boolean | string | Error,
+): FileBrowserPaneStatus {
+  if (error) return "error";
+  if (status) return status;
+  return items.length === 0 ? "empty" : "ready";
+}
+
+function FileRowMenu({
+  file,
+  onOpen,
+  onDownload,
+  onRename,
+  onMove,
+  onDelete,
+}: {
+  file: FileBrowserFile;
+  onOpen?: (file: FileBrowserFile) => void;
+  onDownload?: (files: FileBrowserFile[]) => void;
+  onRename?: (file: FileBrowserFile) => void;
+  onMove?: (files: FileBrowserFile[]) => void;
+  onDelete?: (files: FileBrowserFile[]) => void;
+}) {
+  const { t } = useTranslation();
+  return (
+    <DropdownMenu
+      placement="bottom-start"
+      items={[
+        {
+          key: "open",
+          label: t("Open"),
+          icon: <EyeIcon size={16} />,
+          onSelect: () => onOpen?.(file),
+        },
+        {
+          key: "download",
+          label: t("Download"),
+          icon: <DownloadSimpleIcon size={16} />,
+          onSelect: () => onDownload?.([file]),
+        },
+        {
+          key: "rename",
+          label: t("Rename"),
+          icon: <PencilSimpleIcon size={16} />,
+          onSelect: () => onRename?.(file),
+        },
+        {
+          key: "move",
+          label: t("Move to…"),
+          icon: <UploadSimpleIcon size={16} />,
+          onSelect: () => onMove?.([file]),
+        },
+        { separator: true },
+        {
+          key: "delete",
+          label: t("Delete"),
+          icon: <TrashIcon size={16} />,
+          destructive: true,
+          onSelect: () => onDelete?.([file]),
+        },
+      ]}
+    >
+      <Button
+        chromeless
+        size="$2"
+        icon={DotsThreeVerticalIcon}
+        aria-label={t("Actions")}
+        data-filebrowser-kebab
+      />
+    </DropdownMenu>
+  );
+}
+
+function BulkBar({
+  count,
+  placement,
+  onDownload,
+  onMove,
+  onDelete,
+  onClear,
+}: {
+  count: number;
+  placement: FileBrowserBulkBarPlacement;
+  onDownload?: () => void;
+  onMove?: () => void;
+  onDelete?: () => void;
+  onClear?: () => void;
+}) {
+  const { t } = useTranslation();
+  const { knobProps } = useResolvedKnobs();
+  if (count === 0) return null;
+  return (
+    <XStack
+      data-filebrowser-bulk
+      data-filebrowser-bulk-placement={placement}
+      alignItems="center"
+      {...knobProps.gap}
+      {...knobProps.panelPadding}
+      borderWidth={1}
+      borderColor="$color6"
+      backgroundColor="$color2"
+      {...knobProps.containerRadius}
+      marginHorizontal="$4"
+      marginTop={placement === "top" ? "$3" : 0}
+      marginBottom={placement === "bottom" ? "$3" : 0}
+    >
+      <Text fontWeight="600" fontSize="$3">
+        {t("{{count}} selected", { count })}
+      </Text>
+      <Button size="$4" chromeless icon={DownloadSimpleIcon} onPress={onDownload}>
+        {t("Download")}
+      </Button>
+      <Button size="$4" chromeless icon={UploadSimpleIcon} onPress={onMove}>
+        {t("Move")}
+      </Button>
+      <Button size="$4" chromeless icon={TrashIcon} onPress={onDelete}>
+        {t("Delete")}
+      </Button>
+      <XStack flex={1} />
+      <Button size="$4" chromeless icon={XIcon} onPress={onClear}>
+        {t("Clear")}
+      </Button>
+    </XStack>
+  );
+}
+
+export function FileBrowser({
+  files = [],
+  foldersStatus,
+  filesStatus,
+  foldersError,
+  filesError,
+  onFoldersRetry,
+  onFilesRetry,
+  view: viewProp,
+  defaultView = "list",
+  onViewChange,
+  surfaceId,
+  selectionMode = "multi",
+  selectedIds: selectedIdsProp,
+  onSelectedIdsChange,
+  currentValue,
+  onPick,
+  currentFolder: currentFolderProp,
+  onCurrentFolderChange,
+  tileSize = "md",
+  mediaAspect = "square",
+  selectAllScope = "page",
+  bulkBarPlacement = "top",
+  tableZebra = false,
+  layout: layoutProp,
+  onUpload,
+  search: searchProp,
+  onSearchChange,
+  onOpen,
+  onDownload,
+  onRename,
+  onMove,
+  onDelete,
+  accept,
+}: FileBrowserProps) {
+  const { t } = useTranslation();
+  const { knobProps } = useResolvedKnobs();
+  const { width } = useWindowDimensions();
+  const layout: FileBrowserLayout = layoutProp ?? (width < OVERLAY_BREAKPOINT ? "drill" : "split");
+
+  const persisted = readPersistedView(surfaceId);
+  const [uncontrolledView, setUncontrolledView] = useState<FileBrowserView>(
+    viewProp ?? persisted ?? defaultView,
+  );
+  const view = viewProp ?? uncontrolledView;
+  const setView = useCallback(
+    (next: FileBrowserView) => {
+      if (viewProp === undefined) setUncontrolledView(next);
+      writePersistedView(surfaceId, next);
+      onViewChange?.(next);
+    },
+    [onViewChange, surfaceId, viewProp],
+  );
+
+  const [uncontrolledFolder, setUncontrolledFolder] = useState(currentFolderProp ?? "Home");
+  const currentFolder = currentFolderProp ?? uncontrolledFolder;
+  const setFolder = useCallback(
+    (next: string) => {
+      if (currentFolderProp === undefined) setUncontrolledFolder(next);
+      onCurrentFolderChange?.(next);
+    },
+    [currentFolderProp, onCurrentFolderChange],
+  );
+
+  const [uncontrolledSelected, setUncontrolledSelected] = useState<string[]>(selectedIdsProp ?? []);
+  const selectedIds = selectedIdsProp ?? uncontrolledSelected;
+  const setSelectedIds = useCallback(
+    (next: string[]) => {
+      if (selectedIdsProp === undefined) setUncontrolledSelected(next);
+      onSelectedIdsChange?.(next);
+    },
+    [onSelectedIdsChange, selectedIdsProp],
+  );
+
+  const [uncontrolledSearch, setUncontrolledSearch] = useState(searchProp ?? "");
+  const search = searchProp ?? uncontrolledSearch;
+  const setSearch = useCallback(
+    (next: string) => {
+      if (searchProp === undefined) setUncontrolledSearch(next);
+      onSearchChange?.(next);
+    },
+    [onSearchChange, searchProp],
+  );
+
+  const [uploadOpen, setUploadOpen] = useState(false);
+
+  const folderNodes = useMemo(() => buildFolderTree(files), [files]);
+  const paneFiles = useMemo(() => {
+    const kids = childrenOf(files, currentFolder);
+    if (!search.trim()) return kids;
+    const q = search.trim().toLowerCase();
+    return kids.filter((file) => file.file_name.toLowerCase().includes(q));
+  }, [currentFolder, files, search]);
+
+  const folderStatus = resolveStatus(foldersStatus, folderNodes, foldersError);
+  const fileStatus = resolveStatus(filesStatus, paneFiles, filesError);
+  const single = selectionMode === "single";
+
+  const toggleSelected = useCallback(
+    (id: string) => {
+      setSelectedIds(
+        selectedIds.includes(id) ? selectedIds.filter((item) => item !== id) : [...selectedIds, id],
+      );
+    },
+    [selectedIds, setSelectedIds],
+  );
+
+  const handleFileActivate = useCallback(
+    (file: FileBrowserFile) => {
+      if (isFolder(file)) {
+        setFolder(file.name);
+        return;
+      }
+      if (single) {
+        onPick?.(file);
+        return;
+      }
+      onOpen?.(file);
+    },
+    [onOpen, onPick, setFolder, single],
+  );
+
+  const selectedFiles = paneFiles.filter((file) => selectedIds.includes(file.name));
+  const crumbs = breadcrumbItems(currentFolder);
+  const parent = parentFolder(currentFolder);
+
+  const columns = useMemo<DataTableColumn<FileBrowserFile & { id: string }>[]>(
+    () => [
+      {
+        accessorKey: "file_name",
+        header: t("Name"),
+        cell: ({ row }) => {
+          const file = row.original;
+          const current =
+            currentValue != null &&
+            (currentValue === file.file_url ||
+              currentValue === file.name ||
+              currentValue === file.file_name);
+          return (
+            <XStack alignItems="center" gap="$2" minWidth={0} flex={1}>
+              <KindIcon kind={fileKind(file)} />
+              <Text
+                fontSize="$3"
+                flex={1}
+                minWidth={0}
+                {...({ numberOfLines: 1, title: file.file_name } as Record<string, unknown>)}
+              >
+                {file.file_name}
+              </Text>
+              {single && current ? (
+                <CheckIcon size={14} data-filebrowser-current-check aria-hidden />
+              ) : null}
+            </XStack>
+          );
+        },
+      },
+      {
+        accessorKey: "modified",
+        header: t("Modified"),
+      },
+      {
+        accessorKey: "file_size",
+        header: t("Size"),
+        cell: ({ row }) => (
+          <Text fontSize="$3" fontFamily="$mono">
+            {isFolder(row.original) ? "—" : formatSize(row.original.file_size)}
+          </Text>
+        ),
+      },
+      ...(single
+        ? []
+        : [
+            {
+              id: "actions",
+              header: "",
+              enableSorting: false,
+              cell: ({ row }: { row: { original: FileBrowserFile } }) => (
+                <FileRowMenu
+                  file={row.original}
+                  onOpen={onOpen}
+                  onDownload={onDownload}
+                  onRename={onRename}
+                  onMove={onMove}
+                  onDelete={onDelete}
+                />
+              ),
+            } satisfies DataTableColumn<FileBrowserFile & { id: string }>,
+          ]),
+    ],
+    [currentValue, onDelete, onDownload, onMove, onOpen, onRename, single, t],
+  );
+
+  const tableRows = useMemo(
+    () => paneFiles.map((file) => ({ ...file, id: file.name })),
+    [paneFiles],
+  );
+
+  const toolbar = (
+    <XStack
+      data-filebrowser-toolbar
+      alignItems="center"
+      {...knobProps.gap}
+      paddingHorizontal="$4"
+      paddingVertical="$3"
+      borderBottomWidth={1}
+      borderColor="$borderColor"
+    >
+      {layout === "drill" ? (
+        <Button
+          chromeless
+          size="$4"
+          icon={CaretLeftIcon}
+          disabled={!parent}
+          aria-label={t("Back")}
+          data-filebrowser-back
+          onPress={() => parent && setFolder(parent)}
+        >
+          {crumbs[crumbs.length - 1]?.label ?? t("Home")}
+        </Button>
+      ) : (
+        <XStack flex={1} minWidth={0}>
+          <Breadcrumbs items={crumbs} maxVisible={4} onNavigate={(href) => setFolder(href)} />
+        </XStack>
+      )}
+      {layout === "split" ? (
+        <Input
+          value={search}
+          onChangeText={setSearch}
+          placeholder={t("Search files")}
+          leftIcon={<MagnifyingGlassIcon size={16} />}
+          labelHidden
+          aria-label={t("Search files")}
+        />
+      ) : null}
+      <YStack data-filebrowser-view-switcher>
+        <ViewSwitcher
+          currentView={view}
+          onViewChange={(next) => setView(next as FileBrowserView)}
+          views={[
+            { type: "list", label: t("List"), icon: ListIcon, iconOnly: true },
+            { type: "grid", label: t("Grid"), icon: SquaresFourIcon, iconOnly: true },
+          ]}
+        />
+      </YStack>
+      {onUpload ? (
+        <Button size="$4" icon={UploadSimpleIcon} onPress={() => setUploadOpen(true)}>
+          {t("Upload")}
+        </Button>
+      ) : null}
+    </XStack>
+  );
+
+  const bulk = !single ? (
+    <BulkBar
+      count={selectedIds.length}
+      placement={bulkBarPlacement}
+      onDownload={() => onDownload?.(selectedFiles)}
+      onMove={() => onMove?.(selectedFiles)}
+      onDelete={() => onDelete?.(selectedFiles)}
+      onClear={() => setSelectedIds([])}
+    />
+  ) : null;
+
+  const renderGridItem = (file: FileBrowserFile): ReactNode => {
+    const kind = fileKind(file);
+    const current =
+      currentValue != null &&
+      (currentValue === file.file_url ||
+        currentValue === file.name ||
+        currentValue === file.file_name);
+    const checked = selectedIds.includes(file.name);
+    return (
+      <YStack data-filebrowser-tile={file.name} gap="$2">
+        <YStack position="relative">
+          {!single ? (
+            <YStack
+              position="absolute"
+              top="$2"
+              left="$2"
+              zIndex={2}
+              onPress={(event) => {
+                event.stopPropagation();
+                toggleSelected(file.name);
+              }}
+            >
+              <Checkbox
+                checked={checked}
+                onCheckedChange={() => toggleSelected(file.name)}
+                aria-label={t("Select {{name}}", { name: file.file_name })}
+                data-filebrowser-checkbox
+              />
+            </YStack>
+          ) : null}
+          <YStack
+            aspectRatio={1}
+            backgroundColor="$color2"
+            borderWidth={1}
+            borderColor="$borderColor"
+            {...knobProps.containerRadius}
+            alignItems="center"
+            justifyContent="center"
+          >
+            {kind === "image" && file.file_url ? (
+              // eslint-disable-next-line jsx-a11y/alt-text
+              <img
+                src={file.file_url}
+                alt=""
+                style={{ width: "100%", height: "100%", objectFit: "cover" }}
+              />
+            ) : (
+              <KindIcon kind={kind} size={28} />
+            )}
+          </YStack>
+        </YStack>
+        <XStack alignItems="center" gap="$2">
+          <Text
+            fontSize="$3"
+            flex={1}
+            {...({ numberOfLines: 1, title: file.file_name } as Record<string, unknown>)}
+          >
+            {file.file_name}
+          </Text>
+          {single && current ? (
+            <CheckIcon size={14} data-filebrowser-current-check aria-hidden />
+          ) : null}
+        </XStack>
+        <Text fontSize="$2" fontFamily="$mono" color="$color10">
+          {isFolder(file) ? "—" : formatSize(file.file_size)}
+        </Text>
+      </YStack>
+    );
+  };
+
+  const filesPaneReady =
+    view === "grid" ? (
+      <YStack data-filebrowser-files-view="grid" data-filebrowser-tile-size={tileSize} flex={1}>
+        <ImageGrid
+          items={paneFiles}
+          tileSize={tileSize}
+          mediaAspect={mediaAspect}
+          renderItem={renderGridItem}
+          onItemClick={handleFileActivate}
+          emptyMessage={t("No files")}
+        />
+      </YStack>
+    ) : layout === "drill" ? (
+      <List
+        items={paneFiles}
+        aria-label={t("Files")}
+        renderItem={(file) => (
+          <XStack alignItems="center" gap="$3" flex={1} minWidth={0} width="100%">
+            <KindIcon kind={fileKind(file)} />
+            <Text
+              fontSize="$3"
+              flex={1}
+              minWidth={0}
+              {...({ numberOfLines: 1, title: file.file_name } as Record<string, unknown>)}
+            >
+              {file.file_name}
+            </Text>
+            {isFolder(file) ? null : (
+              <Text fontSize="$2" fontFamily="$mono" color="$color10">
+                {formatSize(file.file_size)}
+              </Text>
+            )}
+          </XStack>
+        )}
+        onItemClick={handleFileActivate}
+        emptyMessage={t("No files")}
+      />
+    ) : (
+      <YStack data-filebrowser-files-view="list" flex={1}>
+        <DataTable
+          data={tableRows}
+          columns={columns}
+          enableRowSelection={!single}
+          selectAllScope={selectAllScope}
+          enableFiltering={false}
+          enableGlobalSearch={false}
+          enablePagination={false}
+          enableColumnVisibility={false}
+          enableSorting
+          onRowPress={(row) => handleFileActivate(row)}
+          rowLabel={(row) => row.file_name}
+          aria-label={t("Files")}
+          bulkActions={
+            single
+              ? undefined
+              : [
+                  {
+                    id: "download",
+                    label: t("Download"),
+                    onExecute: (rows) => onDownload?.(rows),
+                  },
+                  {
+                    id: "move",
+                    label: t("Move"),
+                    onExecute: (rows) => onMove?.(rows),
+                  },
+                  {
+                    id: "delete",
+                    label: t("Delete"),
+                    onExecute: (rows) => onDelete?.(rows),
+                  },
+                ]
+          }
+        />
+      </YStack>
+    );
+
+  const filesBody = (
+    <YStack data-filebrowser-files data-filebrowser-files-state={fileStatus} flex={1} minWidth={0}>
+      {fileStatus === "loading" && view === "grid" ? (
+        <ImageGrid
+          items={[]}
+          isLoading
+          tileSize={tileSize}
+          mediaAspect={mediaAspect}
+          renderItem={() => null}
+        />
+      ) : (
+        <AsyncBoundary
+          layout={view === "grid" ? "generic" : "table"}
+          loading={fileStatus === "loading"}
+          empty={fileStatus === "empty"}
+          error={fileStatus === "error" ? (filesError ?? true) : null}
+          onRetry={onFilesRetry}
+          emptyTitle={t("No files")}
+          errorTitle={t("Couldn't load files")}
+          compact
+        >
+          {filesPaneReady}
+        </AsyncBoundary>
+      )}
+    </YStack>
+  );
+
+  const foldersBody = (
+    <YStack
+      data-filebrowser-folders
+      data-filebrowser-folders-state={folderStatus}
+      width={layout === "split" ? RAIL_WIDTH : "100%"}
+      flexGrow={layout === "split" ? 0 : 1}
+      flexShrink={0}
+      borderRightWidth={layout === "split" ? 1 : 0}
+      borderColor="$borderColor"
+      minWidth={0}
+    >
+      <AsyncBoundary
+        layout="list"
+        loading={folderStatus === "loading"}
+        empty={folderStatus === "empty"}
+        error={folderStatus === "error" ? (foldersError ?? true) : null}
+        onRetry={onFoldersRetry}
+        emptyTitle={t("No folders")}
+        errorTitle={t("Couldn't load folders")}
+        compact
+      >
+        <TreeView
+          nodes={folderNodes}
+          selectedId={currentFolder}
+          defaultExpandedIds={ancestorFolderIds(currentFolder)}
+          ariaLabel={t("Folders")}
+          display="default"
+          showExpansionArrows
+          onNodeSelect={(node: TreeNode<FileBrowserFile>) => setFolder(node.id)}
+          emptyMessage={t("No folders")}
+        />
+      </AsyncBoundary>
+    </YStack>
+  );
+
+  return (
+    <YStack
+      data-filebrowser
+      data-filebrowser-layout={layout}
+      data-filebrowser-view={view}
+      data-filebrowser-selection={selectionMode}
+      data-filebrowser-tile-size={tileSize}
+      data-filebrowser-zebra={tableZebra ? "on" : "off"}
+      borderWidth={1}
+      borderColor="$color5"
+      backgroundColor="$color2"
+      overflow="visible"
+      {...knobProps.containerRadius}
+      minHeight={280}
+    >
+      {toolbar}
+      {bulkBarPlacement === "top" ? bulk : null}
+      {layout === "split" ? (
+        <XStack flex={1} alignItems="stretch" minHeight={200}>
+          {foldersBody}
+          {filesBody}
+        </XStack>
+      ) : (
+        <YStack flex={1} minHeight={200}>
+          {filesBody}
+        </YStack>
+      )}
+      {bulkBarPlacement === "bottom" ? bulk : null}
+      {uploadOpen && onUpload ? (
+        <YStack data-filebrowser-upload padding="$4">
+          <FileUpload accept={accept} multiple />
+        </YStack>
+      ) : null}
+    </YStack>
+  );
+}