go.charczuk.com@v0.0.0-20240327042549-bc490516bd1a/projects/nodes/static/_nextjs/src/components/dialogEditGraph.tsx (about)

     1  /**
     2   * Copyright (c) 2024 - Present. Will Charczuk. All rights reserved.
     3   * Use of this source code is governed by a MIT license that can be found in the LICENSE file at the root of the repository.
     4   */
     5  import { useEffect, useState } from "react";
     6  import { Button, Dialog, DialogBody, DialogFooter, Intent, Tooltip, getKeyCombo } from "@blueprintjs/core";
     7  import { MODIFIER_BIT_MASKS } from "@blueprintjs/core/lib/esm/components/hotkeys/hotkeyParser";
     8  import * as api from '../api/graphs';
     9  import { EditGraph } from "./editGraph";
    10  
    11  export interface DialogEditGraphProps {
    12    isOpen: boolean;
    13    graph: api.Graph;
    14    onClose: () => void;
    15    onSave: (n: api.Graph) => void;
    16  }
    17  
    18  export function DialogEditGraph(props: DialogEditGraphProps) {
    19    const [graph, setGraph] = useState<api.Graph>(props.graph);
    20  
    21    useEffect(() => { setGraph(props.graph) }, [props.graph])
    22  
    23    const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
    24      const combo = getKeyCombo(e.nativeEvent);
    25      if (combo.key === "enter" && combo.modifiers === MODIFIER_BIT_MASKS['shift']) {
    26        e.preventDefault();
    27        e.stopPropagation();
    28        props.onSave(graph);
    29      }
    30    }
    31  
    32    return (
    33      <div onKeyDown={handleKeyDown}>
    34        <Dialog
    35          title={`Edit ${props.graph.label}`}
    36          autoFocus={false}
    37          enforceFocus={true}
    38          canOutsideClickClose={true}
    39          isOpen={props.isOpen}
    40          onClose={props.onClose}
    41          canEscapeKeyClose={false}
    42          icon="edit"
    43          isCloseButtonShown={true}
    44          style={{ width: 'max-content' }}
    45        >
    46          <DialogBody>
    47            <EditGraph autoFocus={true} graph={graph} onGraphChanged={g => setGraph(g)} isCreate={false} />
    48          </DialogBody>
    49          <DialogFooter actions={<>
    50            <Tooltip content="Close the dialog and cancel creating a node">
    51              <Button tabIndex={0} onClick={props.onClose} icon="cross">Cancel</Button>
    52            </Tooltip>
    53            <Tooltip intent={Intent.PRIMARY} content={<div><p>Save the node changes.</p><p>You can also use <code>shift+enter</code> to submit the form.</p></div>}>
    54              <Button tabIndex={0} intent={Intent.PRIMARY} onClick={() => { props.onSave(graph) }} icon="floppy-disk">Save</Button>
    55            </Tooltip>
    56          </>
    57          } />
    58        </Dialog>
    59      </div>
    60    )
    61  }