GitHub/jsoncrack.com
1
0
Fork 0
mirror of https://github.com/AykutSarac/jsoncrack.com.git synced 2025-01-20 05:12:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

code cleanup

Browse Source
This commit is contained in:
Aykut Saraç 2022-02-20 15:09:04 +03:00
parent d16b04e35a
commit 242e16e67a
6 changed files with 161 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,124 +0,0 @@
import React from "react";
import { Label, Node, Port, NodeProps } from "reaflow";
import styled from "styled-components";
const StyledTextWrapper = styled.div`
position: absolute;
display: flex;
justify-content: center;
align-items: center;
font-size: 12px;
width: 100%;
height: 100%;
overflow: hidden;
cursor: pointer;
`;
const StyledText = styled.pre<{ width: number; height: number }>`
display: flex;
justify-content: center;
flex-direction: column;
width: ${({ width }) => width};
height: ${({ height }) => height};
color: ${({ theme }) => theme.SILVER};
`;
const StyledForeignObject = styled.foreignObject<{
width: number;
height: number;
}>`
position: "relative" !important;
pointer-events: "none" !important;
width: ${({ width }) => width + "px"};
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",
strokeWidth: 0,
};
const basePortStyle = {
fill: "black",
};
export const CustomNode = (nodeProps: NodeProps) => {
const { properties: data } = nodeProps;
return (
<Node
{...nodeProps}
label={<Label style={baseLabelStyle} />}
port={<Port style={basePortStyle} rx={10} ry={10} />}
>
{(nodeProps: NodeProps) => {
const { width, height } = nodeProps;
if (data.text instanceof Object) {
const entries = Object.entries(data.text);
if (Object.keys(data.text).every((val) => !isNaN(+val))) {
const text = Object.values(data.text).join("");
return (
<StyledForeignObject width={width} height={height} x={0} y={0}>
<StyledTextWrapper>
<StyledText width={width} height={height}>
<StyledKey arrayValue>{text}</StyledKey>
</StyledText>
</StyledTextWrapper>
</StyledForeignObject>
);
}
return (
<StyledForeignObject width={width} height={height} x={0} y={0}>
<StyledTextWrapper>
<StyledText width={width} height={height}>
{entries.map(
(val, idx) =>
val[1] !== null && (
<div
key={idx}
style={{
height: "fit-content",
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
padding: "0 auto",
width: width - 20,
}}
>
<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}>
<StyledKey bond>{data.text}</StyledKey>
</StyledText>
</StyledTextWrapper>
</StyledForeignObject>
);
}}
</Node>
);
};

17
src/containers/LiveEditor/CustomNode/ArrayNode.tsx Normal file
View File

@ -0,0 +1,17 @@
import React from "react";
import { CustomNodeProps } from ".";
import * as Styled from "./styles";
const ArrayNode: React.FC<CustomNodeProps<string>> = ({ width, height, value }) => {
return (
<Styled.StyledForeignObject width={width} height={height} x={0} y={0}>
<Styled.StyledTextWrapper>
<Styled.StyledText width={width} height={height}>
<Styled.StyledKey arrayValue>{value}</Styled.StyledKey>
</Styled.StyledText>
</Styled.StyledTextWrapper>
</Styled.StyledForeignObject>
);
};
export default ArrayNode;

17
src/containers/LiveEditor/CustomNode/BondNode.tsx Normal file
View File

@ -0,0 +1,17 @@
import React from "react";
import { CustomNodeProps } from ".";
import * as Styled from "./styles";
const BondNode: React.FC<CustomNodeProps<string>> = ({ width, height, value }) => {
return (
<Styled.StyledForeignObject width={width} height={height} x={0} y={0}>
<Styled.StyledTextWrapper>
<Styled.StyledText width={width} height={height}>
<Styled.StyledKey bond>{value}</Styled.StyledKey>
</Styled.StyledText>
</Styled.StyledTextWrapper>
</Styled.StyledForeignObject>
);
};
export default BondNode;

29
src/containers/LiveEditor/CustomNode/ObjectNode.tsx Normal file
View File

@ -0,0 +1,29 @@
import React from "react";
import { CustomNodeProps } from ".";
import * as Styled from "./styles";
const ObjectNode: React.FC<CustomNodeProps<[string, unknown][]>> = ({
width,
height,
value,
}) => {
return (
<Styled.StyledForeignObject width={width} height={height} x={0} y={0}>
<Styled.StyledTextWrapper>
<Styled.StyledText width={width} height={height}>
{value.map(
(val, idx) =>
val[1] && (
<Styled.StyledRow key={idx} width={width}>
<Styled.StyledKey>{val[0]}: </Styled.StyledKey>
{val[1]}
</Styled.StyledRow>
)
)}
</Styled.StyledText>
</Styled.StyledTextWrapper>
</Styled.StyledForeignObject>
);
};
export default ObjectNode;

49
src/containers/LiveEditor/CustomNode/index.tsx Normal file
View File

@ -0,0 +1,49 @@
import React from "react";
import { Label, Node, Port, NodeProps } from "reaflow";
import ArrayNode from "./ArrayNode";
import BondNode from "./BondNode";
import ObjectNode from "./ObjectNode";
export interface CustomNodeProps<T> {
width: number;
height: number;
value: T;
}
const baseLabelStyle = {
fill: "transparent",
stroke: "transparent",
strokeWidth: 0,
};
const basePortStyle = {
fill: "black",
};
export const CustomNode = (nodeProps: NodeProps) => {
const { properties: data } = nodeProps;
return (
<Node
{...nodeProps}
label={<Label style={baseLabelStyle} />}
port={<Port style={basePortStyle} rx={10} ry={10} />}
>
{(nodeProps: NodeProps) => {
const { width, height } = nodeProps;
if (data.text instanceof Object) {
if (Object.keys(data.text).every((val) => !isNaN(+val))) {
const text = Object.values(data.text).join("");
return <ArrayNode width={width} height={height} value={text} />;
}
const entries = Object.entries(data.text);
return <ObjectNode width={width} height={height} value={entries} />;
}
return <BondNode width={width} height={height} value={data.text} />;
}}
</Node>
);
};

49
src/containers/LiveEditor/CustomNode/styles.tsx Normal file
View File

@ -0,0 +1,49 @@
import styled from "styled-components";
export const StyledTextWrapper = styled.div`
position: absolute;
display: flex;
justify-content: center;
align-items: center;
font-size: 12px;
width: 100%;
height: 100%;
overflow: hidden;
cursor: pointer;
`;
export const StyledText = styled.pre<{ width: number; height: number }>`
display: flex;
justify-content: center;
flex-direction: column;
width: ${({ width }) => width};
height: ${({ height }) => height};
color: ${({ theme }) => theme.SILVER};
`;
export const StyledForeignObject = styled.foreignObject<{
width: number;
height: number;
}>`
position: "relative" !important;
pointer-events: "none" !important;
width: ${({ width }) => width + "px"};
height: ${({ height }) => height + "px"};
`;
export const StyledKey = styled.span<{
bond?: boolean;
arrayValue?: boolean;
}>`
color: ${({ theme, bond, arrayValue }) =>
bond ? theme.SEAGREEN : arrayValue ? theme.ORANGE : theme.BLURPLE};
`;
export const StyledRow = styled.div<{ width: number }>`
height: fit-content;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 0 auto;
width: ${({ width }) => `${width - 20}px`};
`;