go.charczuk.com@v0.0.0-20240327042549-bc490516bd1a/projects/nodes/static/_nextjs/src/components/editGraph.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 { FormGroup, InputGroup } from "@blueprintjs/core";
     6  import * as api from "../api/graphs";
     7  import { useEffect, useState } from "react";
     8  
     9  export interface EditGraphProps {
    10    graph: api.Graph;
    11    isCreate?: boolean;
    12    autoFocus?: boolean;
    13    onGraphChanged: (n: api.Graph) => void;
    14  }
    15  
    16  export function EditGraph(props: EditGraphProps) {
    17    const [label, setLabel] = useState<string>(props.graph.label)
    18  
    19    useEffect(() => { setLabel(props.graph.label) }, [props.graph.label])
    20  
    21    const onLabelChange = (e: any) => {
    22      setLabel(e.target.value);
    23      props.onGraphChanged({
    24        ...props.graph,
    25        label: e.target.value,
    26      })
    27    }
    28  
    29    return (
    30      <div className="edit-graph">
    31        <FormGroup label={"Label"} inline={true} labelFor={"label-value"}>
    32          <InputGroup autoFocus={props.autoFocus} tabIndex={1} id="label-value" name={"label"} value={label} onChange={onLabelChange} fill={true} />
    33        </FormGroup>
    34      </div>
    35    )
    36  }