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

improve node styles

Browse Source
This commit is contained in:
AykutSarac 2022-02-03 14:36:05 +03:00
parent da7b3f9464
commit a1dcd4d843
1 changed files with 21 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/pages/editor/LiveEditor/Node.tsx
View File

@ -2,15 +2,22 @@ import React from "react";
import { Handle, Position } from "react-flow-renderer";
import styled from "styled-components";
const StyledWrapper = styled.div<{ isArray?: boolean, isElement?: boolean }>`
const StyledWrapper = styled.div<{
isArray?: boolean;
isElement?: boolean;
circle?: boolean;
}>`
background: ${({ theme }) => theme.BLACK_PRIMARY};
border: 1px solid ${({ theme }) => theme.BLACK};
border-radius: 5px;
padding: 16px;
color: ${({ theme, isArray, isElement }) => isArray ? theme.SEAGREEN : isElement && theme.ORANGE};
width: auto;
min-width: 100px;
color: ${({ theme, isArray, isElement }) =>
isArray ? theme.SEAGREEN : isElement && theme.ORANGE};
width: ${({ circle }) => (circle ? "20px" : "auto")};
height: ${({ circle }) => (circle ? "20px" : "auto")};
min-width: ${({ circle }) => !circle && "100px"};
text-align: ${({ isArray }) => isArray && "center"};
border-radius: ${({ circle }) => circle && "50%"};
`;
const StyledKey = styled.span`
@ -23,6 +30,15 @@ export const CustomNodeComponent: React.FC<{ data: any; id: string }> = ({
}) => {
const { label: json } = data;
if (Object.keys(json).length === 0) {
return (
<StyledWrapper circle>
<Handle type="source" position={Position.Left} />
<Handle type="target" position={Position.Right} />
</StyledWrapper>
);
}
if (typeof json === "string") {
return (
<StyledWrapper isArray>
@ -40,7 +56,7 @@ export const CustomNodeComponent: React.FC<{ data: any; id: string }> = ({
if (Object.keys(json).every((val) => !isNaN(+val))) {
return (
<StyledWrapper isElement>
{Object.values(json).join('')}
{Object.values(json).join("")}
<Handle type="source" position={Position.Left} />
<Handle type="target" position={Position.Right} />
</StyledWrapper>