add search in files

bangle-io · Dec 9, 2023 · b4dfd13 · b4dfd13
1 parent e43980b
commit b4dfd13
Showing 1 changed file with 74 additions and 55 deletions.
diff --git a/packages/lib-window/ui/Tables/FilesTable.tsx b/packages/lib-window/ui/Tables/FilesTable.tsx
@@ -3,16 +3,18 @@ import {
   Cell,
   Column,
   Content,
+  Flex,
   Heading,
   IllustratedMessage,
   Row,
+  SearchField,
   TableBody,
   TableHeader,
   TableView,
 } from '@adobe/react-spectrum';
 import { SortDescriptor, SortDirection } from '@react-types/shared';
 import NotFound from '@spectrum-icons/illustrations/NotFound';
-import React from 'react';
+import React, { useState } from 'react';
 
 import { resolvePath } from '@bangle.io/ws-path';
 
@@ -41,12 +43,18 @@ export function FilesTable({
     column: COLUMN_NAME,
     direction: 'ascending',
   });
+  const [searchInput, setSearchInput] = useState<string>('');
 
   const sortedWsPathsInfo = React.useMemo(() => {
     if (!wsPathsInfo) {
       return undefined;
     }
-    return wsPathsInfo.sort((a, b) => {
+
+    const filteredWsPathsInfo = wsPathsInfo.filter((wsPathInfo) =>
+      wsPathInfo.wsPath.toLowerCase().includes(searchInput.toLowerCase()),
+    );
+
+    return filteredWsPathsInfo.sort((a, b) => {
       if (sortDescriptor.column === COLUMN_NAME) {
         if (sortDescriptor.direction === 'ascending') {
           return a.fileNameWithoutExt.localeCompare(b.fileNameWithoutExt);
@@ -62,67 +70,78 @@ export function FilesTable({
 
       return 0;
     });
-  }, [wsPathsInfo, sortDescriptor]);
+  }, [wsPathsInfo, sortDescriptor, searchInput]);
 
   if (!sortedWsPathsInfo) {
     return null;
   }
 
   return (
-    <TableView
-      isQuiet
-      aria-label="Files"
-      selectionMode="single"
-      selectionStyle="highlight"
-      sortDescriptor={sortDescriptor}
-      onSortChange={(sortDescriptor: SortDescriptor) => {
-        setSortDescriptor(sortDescriptor);
-      }}
-      selectedKeys={selectedKey ? [selectedKey] : []}
-      onSelectionChange={(selection) => {
-        if (selection !== 'all' && selection.size === 1) {
-          updateSelectedKey(selection.values().next().value);
-        }
-      }}
-      onAction={(selection) => {
-        goToWsPath(selection.toString());
-      }}
-      maxHeight={widescreen ? '50vh' : undefined}
-      minHeight="size-4600"
-      renderEmptyState={() => {
-        return (
-          <IllustratedMessage>
-            <NotFound />
-            <Heading>No Notes Found</Heading>
-            <Content>
-              <Button variant="secondary" style="fill" onPress={createNote}>
-                Create a new note
-              </Button>
-            </Content>
-          </IllustratedMessage>
-        );
-      }}
-    >
-      <TableHeader>
-        <Column key={COLUMN_NAME} allowsSorting>
-          Name
-        </Column>
-        <Column key={COLUMN_PATH} allowsSorting>
-          Path
-        </Column>
-        <Column align="end">Last Modified</Column>
-      </TableHeader>
-      <TableBody items={sortedWsPathsInfo}>
-        {(wsPathInfo) => {
+    <Flex direction="column" gap="size-100">
+      <Flex direction="row" justifyContent="space-between" gap="size-100">
+        <SearchField
+          label=""
+          labelPosition="side"
+          defaultValue=""
+          width="size-3600"
+          onChange={(value) => setSearchInput(value)}
+        />
+      </Flex>
+      <TableView
+        isQuiet
+        aria-label="Files"
+        selectionMode="single"
+        selectionStyle="highlight"
+        sortDescriptor={sortDescriptor}
+        onSortChange={(sortDescriptor: SortDescriptor) => {
+          setSortDescriptor(sortDescriptor);
+        }}
+        selectedKeys={selectedKey ? [selectedKey] : []}
+        onSelectionChange={(selection) => {
+          if (selection !== 'all' && selection.size === 1) {
+            updateSelectedKey(selection.values().next().value);
+          }
+        }}
+        onAction={(selection) => {
+          goToWsPath(selection.toString());
+        }}
+        maxHeight={widescreen ? '50vh' : undefined}
+        minHeight="size-4600"
+        renderEmptyState={() => {
           return (
-            <Row key={wsPathInfo.wsPath}>
-              <Cell>{wsPathInfo.fileNameWithoutExt}</Cell>
-              <Cell>{wsPathInfo.dirPath}</Cell>
-              <Cell> </Cell>
-            </Row>
+            <IllustratedMessage>
+              <NotFound />
+              <Heading>No Notes Found</Heading>
+              <Content>
+                <Button variant="secondary" style="fill" onPress={createNote}>
+                  Create a new note
+                </Button>
+              </Content>
+            </IllustratedMessage>
           );
         }}
-      </TableBody>
-    </TableView>
+      >
+        <TableHeader>
+          <Column key={COLUMN_NAME} allowsSorting>
+            Name
+          </Column>
+          <Column key={COLUMN_PATH} allowsSorting>
+            Path
+          </Column>
+          <Column align="end">Last Modified</Column>
+        </TableHeader>
+        <TableBody items={sortedWsPathsInfo}>
+          {(wsPathInfo) => {
+            return (
+              <Row key={wsPathInfo.wsPath}>
+                <Cell>{wsPathInfo.fileNameWithoutExt}</Cell>
+                <Cell>{wsPathInfo.dirPath}</Cell>
+                <Cell> </Cell>
+              </Row>
+            );
+          }}
+        </TableBody>
+      </TableView>
+    </Flex>
   );
 }