File size: 1,655 Bytes
f909d7c |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
import React from "react";
import { useTheme } from "styled-components";
import { JSONTree } from "react-json-tree";
import useJson from "src/store/useJson";
import { EditModal } from "./EditModal";
import { Label } from "./Label";
import { Value } from "./Value";
export const TreeView = () => {
const theme = useTheme();
const json = useJson(state => state.json);
const [opened, setOpened] = React.useState(false);
const [selectedValue, setSelectedValue] = React.useState<string | number | null>(null);
const [path, setPath] = React.useState<(string | number)[]>([]);
const [value, setValue] = React.useState("");
const [errorMessage, setErrorMessage] = React.useState<string | null>(null);
return (
<>
<JSONTree
hideRoot
data={JSON.parse(json)}
valueRenderer={(valueAsString, value) => <Value {...{ valueAsString, value }} />}
labelRenderer={(keyPath, nodeType) => (
<Label
{...{
keyPath,
nodeType,
setOpened,
setSelectedValue,
setPath,
setValue,
}}
/>
)}
theme={{
extend: {
overflow: "scroll",
height: "100%",
scheme: "monokai",
author: "wimer hazenberg (http://www.monokai.nl)",
base00: theme.GRID_BG_COLOR,
},
}}
/>
<EditModal
{...{
opened,
setOpened,
selectedValue,
path,
value,
setValue,
errorMessage,
setErrorMessage,
}}
/>
</>
);
};
|