Implement tab renaming.

2022-07-20 16:56:55 +05:30
parent bf792f1495
commit 6a3ff3e1d7
7 changed files with 156 additions and 51 deletions
--- a/components/ContextMenu/index.tsx
+++ b/components/ContextMenu/index.tsx
@@ -15,37 +15,11 @@ import {
  ContextMenuTriggerItem,
 } from "./primitive";

-[
-  {
-    label: "Show bookmarks",
-    type: "checkbox",
-    checked: true,
-    indicator: "*",
-    onCheckedChange: () => {},
-  },
-  {
-    type: "radio",
-    label: "People",
-    value: "pedro",
-    onValueChange: () => {},
-    options: [
-      {
-        value: "pedro",
-        label: "Pedro Duarte",
-      },
-      {
-        value: "colm",
-        label: "Colm Tuite",
-      },
-    ],
-  },
-];
-
 export type TextOption = {
  type: "text";
  label: ReactNode;
-  onClick?: () => any;
-  children?: Option[];
+  onSelect?: () => any;
+  children?: ContentMenuOption[];
 };
 export type SeparatorOption = { type: "separator" };
 export type CheckboxOption = {
@@ -64,11 +38,16 @@ export type RadioOption<T extends string = string> = {

 type WithCommons = { key: string; disabled?: boolean };

-type Option = (TextOption | SeparatorOption | CheckboxOption | RadioOption) &
+export type ContentMenuOption = (
+  | TextOption
+  | SeparatorOption
+  | CheckboxOption
+  | RadioOption
+) &
  WithCommons;

-interface IContextMenu {
-  options?: Option[];
+export interface IContextMenu {
+  options?: ContentMenuOption[];
  isNested?: boolean;
 }
 export const ContextMenu: FC<IContextMenu> = ({
@@ -83,11 +62,11 @@ export const ContextMenu: FC<IContextMenu> = ({
      ) : (
        <ContextMenuTrigger>{children}</ContextMenuTrigger>
      )}
-      {options && (
+      {options && options.length && (
        <ContextMenuContent sideOffset={isNested ? 2 : 5}>
          {options.map(({ key, ...option }) => {
            if (option.type === "text") {
-              const { children, label } = option;
+              const { children, label, onSelect } = option;
              if (children)
                return (
                  <ContextMenu isNested key={key} options={children}>
@@ -97,7 +76,11 @@ export const ContextMenu: FC<IContextMenu> = ({
                    </Flex>
                  </ContextMenu>
                );
-              return <ContextMenuItem key={key}>{label}</ContextMenuItem>;
+              return (
+                <ContextMenuItem key={key} onSelect={onSelect}>
+                  {label}
+                </ContextMenuItem>
+              );
            }
            if (option.type === "checkbox") {
              const { label, checked, onCheckedChange } = option;
--- a/components/HooksEditor.tsx
+++ b/components/HooksEditor.tsx
@@ -22,6 +22,7 @@ import docs from "../xrpl-hooks-docs/docs";
 import Monaco from "./Monaco";
 import { saveAllFiles } from "../state/actions/saveFile";
 import { Tab, Tabs } from "./Tabs";
+import { renameFile } from "../state/actions/createNewFile";

 const validateWritability = (editor: monaco.editor.IStandaloneCodeEditor) => {
  const currPath = editor.getModel()?.uri.path;
@@ -129,6 +130,7 @@ const HooksEditor = () => {
      extensionRequired
      onCreateNewTab={createNewFile}
      onCloseTab={idx => state.files.splice(idx, 1)}
+      onRenameTab={(idx, nwName, oldName = "") => renameFile(oldName, nwName)}
      headerExtraValidation={{
        regex: /^[A-Za-z0-9_-]+[.][A-Za-z0-9]{1,4}$/g,
        error:
--- a/components/Tabs.tsx
+++ b/components/Tabs.tsx
@@ -6,7 +6,7 @@ import React, {
  useCallback,
 } from "react";
 import type { ReactNode, ReactElement } from "react";
-import { Box, Button, Flex, Input, Label, Stack, Text } from ".";
+import { Box, Button, Flex, Input, Label, Pre, Stack, Text } from ".";
 import {
  Dialog,
  DialogTrigger,
@@ -18,7 +18,7 @@ import {
 import { Plus, X } from "phosphor-react";
 import { styled } from "../stitches.config";
 import { capitalize } from "../utils/helpers";
-import ContextMenu from "./ContextMenu";
+import ContextMenu, { ContentMenuOption } from "./ContextMenu";

 const ErrorText = styled(Text, {
  color: "$error",
@@ -26,6 +26,8 @@ const ErrorText = styled(Text, {
  display: "block",
 });

+type Nullable<T> = T | null | undefined | false;
+
 interface TabProps {
  header: string;
  children?: ReactNode;
@@ -47,6 +49,7 @@ interface Props {
    error: string;
  };
  onCreateNewTab?: (name: string) => any;
+  onRenameTab?: (index: number, nwName: string, oldName?: string) => any;
  onCloseTab?: (index: number, header?: string) => any;
  onChangeActive?: (index: number, header?: string) => any;
 }
@@ -63,6 +66,7 @@ export const Tabs = ({
  onCreateNewTab,
  onCloseTab,
  onChangeActive,
+  onRenameTab,
  headerExtraValidation,
  extensionRequired,
  defaultExtension = "",
@@ -72,8 +76,9 @@ export const Tabs = ({
  const tabs: TabProps[] = children.map(elem => elem.props);

  const [isNewtabDialogOpen, setIsNewtabDialogOpen] = useState(false);
+  const [renamingTab, setRenamingTab] = useState<number | null>(null);
  const [tabname, setTabname] = useState("");
-  const [newtabError, setNewtabError] = useState<string | null>(null);
+  const [tabnameError, setTabnameError] = useState<string | null>(null);

  useEffect(() => {
    if (activeIndex) setActive(activeIndex);
@@ -89,8 +94,8 @@ export const Tabs = ({

  // when filename changes, reset error
  useEffect(() => {
-    setNewtabError(null);
-  }, [tabname, setNewtabError]);
+    setTabnameError(null);
+  }, [tabname, setTabnameError]);

  const validateTabname = useCallback(
    (tabname: string): { error: string | null } => {
@@ -136,10 +141,41 @@ export const Tabs = ({
    [onChangeActive]
  );

+  const handleRenameTab = useCallback(() => {
+    if (renamingTab === null) return;
+
+    const chk = validateTabname(tabname);
+    if (chk.error) {
+      setTabnameError(`Error: ${chk.error}`);
+      return;
+    }
+
+    let _tabname = tabname;
+    if (defaultExtension && !_tabname.endsWith(defaultExtension)) {
+      _tabname = `${_tabname}.${defaultExtension}`;
+    }
+
+    setRenamingTab(null);
+    setTabname("");
+
+    const oldName = tabs[renamingTab]?.header;
+    onRenameTab?.(renamingTab, _tabname, oldName);
+
+    handleActiveChange(renamingTab);
+  }, [
+    defaultExtension,
+    handleActiveChange,
+    onRenameTab,
+    renamingTab,
+    tabname,
+    tabs,
+    validateTabname,
+  ]);
+
  const handleCreateTab = useCallback(() => {
    const chk = validateTabname(tabname);
    if (chk.error) {
-      setNewtabError(`Error: ${chk.error}`);
+      setTabnameError(`Error: ${chk.error}`);
      return;
    }
    let _tabname = tabname;
@@ -175,6 +211,20 @@ export const Tabs = ({
    [active, handleActiveChange, onCloseTab, tabs]
  );

+  const closeOption = (idx: number): Nullable<ContentMenuOption> =>
+    onCloseTab && {
+      type: "text",
+      label: "Close",
+      key: "close",
+      onSelect: () => handleCloseTab(idx),
+    };
+  const renameOption = (idx: number): Nullable<ContentMenuOption> =>
+    onRenameTab && {
+      type: "text",
+      label: "Rename",
+      key: "rename",
+      onSelect: () => setRenamingTab(idx),
+    };
  return (
    <>
      {!headless && (
@@ -189,7 +239,14 @@ export const Tabs = ({
          }}
        >
          {tabs.map((tab, idx) => (
-            <ContextMenu key={tab.header}>
+            <ContextMenu
+              key={tab.header}
+              options={
+                [closeOption(idx), renameOption(idx)].filter(
+                  Boolean
+                ) as ContentMenuOption[]
+              }
+            >
              <Button
                role="tab"
                tabIndex={idx}
@@ -261,7 +318,7 @@ export const Tabs = ({
                      }
                    }}
                  />
-                  <ErrorText>{newtabError}</ErrorText>
+                  <ErrorText>{tabnameError}</ErrorText>
                </DialogDescription>

                <Flex
@@ -286,6 +343,51 @@ export const Tabs = ({
              </DialogContent>
            </Dialog>
          )}
+          {onRenameTab && (
+            <Dialog
+              open={renamingTab !== null}
+              onOpenChange={() => setRenamingTab(null)}
+            >
+              <DialogContent>
+                <DialogTitle>
+                  Rename <Pre>{tabs[renamingTab || 0]?.header}</Pre>
+                </DialogTitle>
+                <DialogDescription>
+                  <Label>Enter new name</Label>
+                  <Input
+                    value={tabname}
+                    onChange={e => setTabname(e.target.value)}
+                    onKeyPress={e => {
+                      if (e.key === "Enter") {
+                        handleRenameTab();
+                      }
+                    }}
+                  />
+                  <ErrorText>{tabnameError}</ErrorText>
+                </DialogDescription>
+
+                <Flex
+                  css={{
+                    marginTop: 25,
+                    justifyContent: "flex-end",
+                    gap: "$3",
+                  }}
+                >
+                  <DialogClose asChild>
+                    <Button outline>Cancel</Button>
+                  </DialogClose>
+                  <Button variant="primary" onClick={handleRenameTab}>
+                    Confirm
+                  </Button>
+                </Flex>
+                <DialogClose asChild>
+                  <Box css={{ position: "absolute", top: "$3", right: "$3" }}>
+                    <X size="20px" />
+                  </Box>
+                </DialogClose>
+              </DialogContent>
+            </Dialog>
+          )}
        </Stack>
      )}
      {keepAllAlive
--- a/components/Transaction/index.tsx
+++ b/components/Transaction/index.tsx
@@ -5,7 +5,7 @@ import state from "../../state";
 import {
  defaultTransactionType,
  getTxFields,
-  modifyTransaction,
+  modifyTxState,
  prepareState,
  prepareTransaction,
  SelectOption,
@@ -42,7 +42,7 @@ const Transaction: FC<TransactionProps> = ({

  const setState = useCallback(
    (pTx?: Partial<TransactionState>) => {
-      return modifyTransaction(header, pTx);
+      return modifyTxState(header, pTx);
    },
    [header]
  );
@@ -164,7 +164,7 @@ const Transaction: FC<TransactionProps> = ({
      }
      nwState.txFields = fields;

-      const state = modifyTransaction(header, nwState, { replaceState: true });
+      const state = modifyTxState(header, nwState, { replaceState: true });
      const editorValue = getJsonString(state);
      return setState({ editorValue });
    },
--- a/pages/test/[[...slug]].tsx
+++ b/pages/test/[[...slug]].tsx
@@ -3,12 +3,12 @@ import Split from "react-split";
 import { useSnapshot } from "valtio";
 import { Box, Container, Flex, Tab, Tabs } from "../../components";
 import Transaction from "../../components/Transaction";
-import state from "../../state";
+import state, { renameTxState } from "../../state";
 import { getSplit, saveSplit } from "../../state/actions/persistSplits";
-import { transactionsState, modifyTransaction } from "../../state";
+import { transactionsState, modifyTxState } from "../../state";
 import { useEffect, useState } from "react";
 import { FileJs } from "phosphor-react";
-import RunScript from '../../components/RunScript';
+import RunScript from "../../components/RunScript";

 const DebugStream = dynamic(() => import("../../components/DebugStream"), {
  ssr: false,
@@ -96,9 +96,12 @@ const Test = () => {
                keepAllAlive
                defaultExtension="json"
                allowedExtensions={["json"]}
-                onCreateNewTab={header => modifyTransaction(header, {})}
+                onCreateNewTab={header => modifyTxState(header, {})}
+                onRenameTab={(idx, nwName, oldName = "") =>
+                  renameTxState(oldName, nwName)
+                }
                onCloseTab={(idx, header) =>
-                  header && modifyTransaction(header, undefined)
+                  header && modifyTxState(header, undefined)
                }
              >
                {transactions.map(({ header, state }) => (
--- a/state/actions/createNewFile.ts
+++ b/state/actions/createNewFile.ts
@@ -14,4 +14,11 @@ export const createNewFile = (name: string) => {
  const emptyFile: IFile = { name, language: languageMapping[fileExt as 'ts' | 'js' | 'md' | 'c' | 'h' | 'other'], content: "" };
  state.files.push(emptyFile);
  state.active = state.files.length - 1;
+};
+
+export const renameFile = (oldName: string, nwName: string) => {
+  const file = state.files.find(file => file.name === oldName)
+  if (!file) throw Error(`No file exists with name ${oldName}`)
+
+  file.name = nwName
 };
--- a/state/transactions.ts
+++ b/state/transactions.ts
@@ -48,13 +48,21 @@ export const transactionsState = proxy({
    activeHeader: "test1.json"
 });

+export const renameTxState = (oldName: string, nwName: string) => {
+    const tx = transactionsState.transactions.find(tx => tx.header === oldName);
+
+    if (!tx) throw Error(`No transaction state exists with given header name ${oldName}`);
+
+    tx.header = nwName
+}
+
 /**
 * Simple transaction state changer
 * @param header Unique key and tab name for the transaction tab
 * @param partialTx partial transaction state, `undefined` deletes the transaction
 * 
 */
-export const modifyTransaction = (
+export const modifyTxState = (
    header: string,
    partialTx?: Partial<TransactionState>,
    opts: { replaceState?: boolean } = {}