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 }