GitHub/jsoncrack.com
1
0
Fork 0
mirror of https://github.com/AykutSarac/jsoncrack.com.git synced 2025-01-27 15:22:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

add colorization

Browse Source
This commit is contained in:
Aykut Saraç 2022-02-09 16:50:38 +03:00
parent 53b61da68c
commit fb89f2275f
1 changed files with 39 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/containers/LiveEditor/CustomNode.tsx
View File

@ -4,7 +4,6 @@ import styled from "styled-components";
const StyledNode = styled(Node)`
stroke: black;
fill: ${({ theme }) => theme.BLACK_PRIMARY};
stroke-width: 1;
`;
@ -34,6 +33,11 @@ const StyledForeignObject = styled.foreignObject<{
height: ${({ height }) => height + "px"};
`;
const StyledKey = styled.span<{ bond?: boolean; arrayValue?: boolean }>`
color: ${({ theme, bond, arrayValue }) =>
bond ? theme.SEAGREEN : arrayValue ? theme.ORANGE : theme.BLURPLE};
`;
const baseLabelStyle = {
fill: "transparent",
stroke: "transparent",
@ -56,11 +60,44 @@ const CustomNode = ({ nodeProps }) => {
{(nodeProps: NodeChildProps) => {
const { width, height } = nodeProps;
if (data.text instanceof Object) {
const entries = Object.entries(data.text);
if (Object.keys(data.text).every((val) => !isNaN(+val))) {
return (
<StyledForeignObject width={width} height={height} x={0} y={0}>
<StyledTextWrapper>
<StyledText width={width} height={height}>
<StyledKey arrayValue>
{Object.values(data.text).join("")}
</StyledKey>
</StyledText>
</StyledTextWrapper>
</StyledForeignObject>
);
}
return (
<StyledForeignObject width={width} height={height} x={0} y={0}>
<StyledTextWrapper>
<StyledText width={width} height={height}>
{entries.map((val) => (
<div style={{ height: "fit-content" }}>
<StyledKey>{val[0]}: </StyledKey>
{val[1]}
</div>
))}
</StyledText>
</StyledTextWrapper>
</StyledForeignObject>
);
}
return (
<StyledForeignObject width={width} height={height} x={0} y={0}>
<StyledTextWrapper>
<StyledText width={width} height={height}>
{data.text}
<StyledKey bond>{data.text}</StyledKey>
</StyledText>
</StyledTextWrapper>
</StyledForeignObject>