feat: add insert value menu (#8)

outerbase · Feb 20, 2024 · 475a152 · 475a152
1 parent 0c76961
commit 475a152
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 3 deletions.
diff --git a/src/app/(components)/ContentMenuHandler.tsx b/src/app/(components)/ContentMenuHandler.tsx
@@ -41,7 +41,10 @@ function ContextMenuList({ menu }: { menu: OpenContextMenuList }) {
       return (
         <ContextMenuSub key={menuIndex}>
           <ContextMenuSubTrigger inset>{item.title}</ContextMenuSubTrigger>
-          <ContextMenuSubContent className="w-48">
+          <ContextMenuSubContent
+            className={!item.subWidth ? "w-48" : ""}
+            style={{ width: item.subWidth ? undefined : item.subWidth }}
+          >
             <ContextMenuList menu={item.sub} />
           </ContextMenuSubContent>
         </ContextMenuSub>

diff --git a/src/app/(components)/OptimizeTable/OptimizeTableState.tsx b/src/app/(components)/OptimizeTable/OptimizeTableState.tsx
@@ -111,7 +111,9 @@ export default class OptimizeTableState {
   getValue(y: number, x: number): unknown {
     const rowChange = this.data[y]?.change;
     if (rowChange) {
-      return rowChange[this.headers[x].name] ?? this.getOriginalValue(y, x);
+      return this.headers[x].name in rowChange
+        ? rowChange[this.headers[x].name]
+        : this.getOriginalValue(y, x);
     }
     return this.getOriginalValue(y, x);
   }

diff --git a/src/components/result/ResultTable.tsx b/src/components/result/ResultTable.tsx
@@ -86,7 +86,64 @@ export default function ResultTable({ data, tableName }: ResultTableProps) {
       state: OptimizeTableState;
       event: React.MouseEvent;
     }) => {
+      const randomUUID = crypto.randomUUID();
+      const timestamp = Math.floor(Date.now() / 1000).toString();
+      const hasFocus = !!state.getFocus();
+
+      function setFocusValue(newValue: unknown) {
+        const focusCell = state.getFocus();
+        if (focusCell) {
+          state.changeValue(focusCell.y, focusCell.x, newValue);
+        }
+      }
+
       openContextMenuFromEvent([
+        {
+          title: "Insert Value",
+          disabled: !hasFocus,
+          subWidth: 200,
+          sub: [
+            {
+              title: <pre>NULL</pre>,
+              onClick: () => {
+                setFocusValue(null);
+              },
+            },
+            {
+              title: <pre>DEFAULT</pre>,
+              onClick: () => {
+                setFocusValue(undefined);
+              },
+            },
+            { separator: true },
+            {
+              title: (
+                <div className="flex flex-col">
+                  <span className="text-xs text-gray-500">Unix Timestamp</span>
+                  <span>{timestamp}</span>
+                </div>
+              ),
+              onClick: () => {
+                setFocusValue(timestamp);
+              },
+            },
+            { separator: true },
+            {
+              title: (
+                <div className="flex flex-col">
+                  <span className="text-xs text-gray-500">UUID </span>
+                  <span>{randomUUID}</span>
+                </div>
+              ),
+              onClick: () => {
+                setFocusValue(randomUUID);
+              },
+            },
+          ],
+        },
+        {
+          separator: true,
+        },
         {
           title: "Copy Cell Value",
           shortcut: KEY_BINDING.copy.toString(),

diff --git a/src/messages/openContextMenu.tsx b/src/messages/openContextMenu.tsx
@@ -5,13 +5,14 @@ import { LucideIcon } from "lucide-react";
 export type OpenContextMenuList = {
   type?: "check";
   checked?: boolean;
-  title?: string;
+  title?: string | JSX.Element;
   shortcut?: string;
   separator?: boolean;
   disabled?: boolean;
   destructive?: boolean;
   onClick?: () => void;
   sub?: OpenContextMenuList;
+  subWidth?: number;
   icon?: LucideIcon;
 }[];