File size: 2,042 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 62 63 64 65 66 67 68 69 70 |
import React from "react";
import { Button, HoverCard } from "@mantine/core";
import { styled, DefaultTheme } from "styled-components";
import _get from "lodash.get";
import { VscEdit } from "react-icons/vsc";
import { KeyPath } from "react-json-tree";
import useJson from "src/store/useJson";
interface LabelProps {
keyPath: KeyPath;
nodeType: string;
setOpened: React.Dispatch<React.SetStateAction<boolean>>;
setSelectedValue: React.Dispatch<React.SetStateAction<string | number | null>>;
setPath: React.Dispatch<React.SetStateAction<(string | number)[]>>;
setValue: React.Dispatch<React.SetStateAction<string>>;
}
function getLabelColor({ $type, theme }: { $type?: string; theme: DefaultTheme }) {
if ($type === "Object") return theme.NODE_COLORS.PARENT_OBJ;
if ($type === "Array") return theme.NODE_COLORS.PARENT_ARR;
return theme.NODE_COLORS.PARENT_OBJ;
}
const StyledLabel = styled.span<{ $nodeType?: string }>`
color: ${({ theme, $nodeType }) => getLabelColor({ theme, $type: $nodeType })};
&:hover {
filter: brightness(1.5);
transition: filter 0.2s ease-in-out;
}
`;
export const Label = ({
keyPath,
nodeType,
setOpened,
setSelectedValue,
setPath,
setValue,
}: LabelProps) => {
const getJson = useJson(state => state.getJson);
return (
<HoverCard shadow="sm" openDelay={50} closeDelay={250} withArrow position="left">
<HoverCard.Target>
<StyledLabel $nodeType={nodeType}>{keyPath[0]}:</StyledLabel>
</HoverCard.Target>
<HoverCard.Dropdown py={4}>
<Button
variant="transparent"
size="xs"
onClick={() => {
setOpened(true);
setSelectedValue(keyPath[0]);
const path = keyPath.toReversed();
const value = _get(JSON.parse(getJson()), path);
setPath(path);
setValue(JSON.stringify(value));
}}
leftSection={<VscEdit size="12" />}
>
Edit
</Button>
</HoverCard.Dropdown>
</HoverCard>
);
};
|