seperate colors from array and object

This commit is contained in:
Aykut Saraç 2022-11-24 12:56:55 +03:00
parent 57389b3837
commit c8134fcda5
5 changed files with 82 additions and 61 deletions

View File

@ -65,16 +65,16 @@ const TextNode: React.FC<CustomNodeProps> = ({
x={0}
y={0}
hideCollapse={hideCollapse}
hasCollapse={data.isParent && hasCollapse}
hasCollapse={data.parent && hasCollapse}
ref={ref}
>
<StyledTextNodeWrapper hasCollapse={data.isParent && !hideCollapse}>
<StyledTextNodeWrapper hasCollapse={data.parent && !hideCollapse}>
{(!performanceMode || inViewport) && (
<Styled.StyledKey
data-x={x}
data-y={y}
data-key={JSON.stringify(text)}
parent={data.isParent}
parent={data.parent}
>
<Styled.StyledLinkItUrl>
{JSON.stringify(text).replaceAll('"', "")}
@ -82,13 +82,13 @@ const TextNode: React.FC<CustomNodeProps> = ({
</Styled.StyledKey>
)}
{data.isParent && data.childrenCount > 0 && !hideChildrenCount && (
{data.parent && data.childrenCount > 0 && !hideChildrenCount && (
<Styled.StyledChildrenCount>
({data.childrenCount})
</Styled.StyledChildrenCount>
)}
{inViewport && data.isParent && hasCollapse && !hideCollapse && (
{inViewport && data.parent && hasCollapse && !hideCollapse && (
<StyledExpand onClick={handleExpand}>
{isExpanded ? <MdLinkOff size={18} /> : <MdLink size={18} />}
</StyledExpand>

View File

@ -2,9 +2,11 @@ import { LinkItUrl } from "react-linkify-it";
import styled, { DefaultTheme } from "styled-components";
function getTypeColor(value: string, theme: DefaultTheme) {
if (!Number.isNaN(+value)) return "#FD0079";
if (value === "true") return theme.TEXT_POSITIVE;
if (value === "false") return theme.TEXT_DANGER;
if (!Number.isNaN(+value)) return theme.NODE_COLORS.INTEGER;
if (value === "true") return theme.NODE_COLORS.BOOL.TRUE;
if (value === "false") return theme.NODE_COLORS.BOOL.FALSE;
if (value === "null") return theme.NODE_COLORS.NULL;
return theme.NODE_COLORS.NODE_VALUE;
}
export const StyledLinkItUrl = styled(LinkItUrl)`
@ -20,7 +22,7 @@ export const StyledForeignObject = styled.foreignObject<{
text-align: ${({ isObject }) => !isObject && "center"};
font-size: 12px;
overflow: hidden;
color: ${({ theme }) => theme.TEXT_NORMAL};
color: ${({ theme }) => theme.NODE_COLORS.TEXT};
pointer-events: none;
padding: ${({ isObject }) => isObject && "10px"};
@ -51,15 +53,22 @@ export const StyledForeignObject = styled.foreignObject<{
}
`;
function getKeyColor(theme: DefaultTheme, parent: boolean, objectKey: boolean) {
if (parent) return theme.NODE_KEY;
if (objectKey) return theme.OBJECT_KEY;
return theme.TEXT_POSITIVE;
function getKeyColor(
theme: DefaultTheme,
parent: "array" | "object" | false,
objectKey: boolean
) {
if (parent) {
if (parent === "array") return theme.NODE_COLORS.PARENT_ARR;
return theme.NODE_COLORS.PARENT_OBJ;
}
if (objectKey) return theme.NODE_COLORS.NODE_KEY;
return theme.NODE_COLORS.TEXT;
}
export const StyledKey = styled.span<{
objectKey?: boolean;
parent?: boolean;
parent?: "array" | "object" | false;
value?: string;
}>`
display: inline;
@ -90,7 +99,7 @@ export const StyledRow = styled.span.attrs<{
`;
export const StyledChildrenCount = styled.span`
color: ${({ theme }) => theme.TEXT_POSITIVE};
color: ${({ theme }) => theme.NODE_COLORS.CHILD_COUNT};
padding: 10px;
margin-left: -15px;
`;

View File

@ -1,5 +1,3 @@
import { DefaultTheme } from "styled-components";
const fixedColors = {
CRIMSON: "#DC143C",
BLURPLE: "#5865F2",
@ -18,8 +16,44 @@ const fixedColors = {
TEXT_DANGER: "#db662e",
};
export const darkTheme: DefaultTheme = {
const nodeColors = {
dark: {
NODE_COLORS: {
TEXT: "#35D073",
NODE_KEY: "#59b8ff",
NODE_VALUE: "#DCE5E7",
INTEGER: "#e8c479",
NULL: "#939598",
BOOL: {
FALSE: "#F85C50",
TRUE: "#00DC7D",
},
PARENT_ARR: "#FC9A40",
PARENT_OBJ: "#59b8ff",
CHILD_COUNT: "white",
},
},
light: {
NODE_COLORS: {
TEXT: "#748700",
NODE_KEY: "#761CEA",
NODE_VALUE: "#535353",
INTEGER: "#A771FE",
NULL: "#afafaf",
BOOL: {
FALSE: "#FF0000",
TRUE: "#748700",
},
PARENT_ARR: "#FF6B00",
PARENT_OBJ: "#761CEA",
CHILD_COUNT: "#535353",
},
},
};
export const darkTheme = {
...fixedColors,
...nodeColors.dark,
BLACK_SECONDARY: "#23272A",
SILVER_DARK: "#4D4D4D",
NODE_KEY: "#FAA81A",
@ -39,8 +73,9 @@ export const darkTheme: DefaultTheme = {
TEXT_POSITIVE: "hsl(139,calc(var(--saturation-factor, 1)*51.6%),52.2%)",
} as const;
export const lightTheme: DefaultTheme = {
export const lightTheme = {
...fixedColors,
...nodeColors.light,
BLACK_SECONDARY: "#F2F2F2",
SILVER_DARK: "#CCCCCC",
NODE_KEY: "#DC3790",
@ -59,3 +94,10 @@ export const lightTheme: DefaultTheme = {
TEXT_NORMAL: "#2e3338",
TEXT_POSITIVE: "#008736",
} as const;
const themeDs = {
...lightTheme,
...darkTheme,
};
export default themeDs;

View File

@ -1,38 +1,8 @@
import theme from "src/constants/theme";
import "styled-components";
declare module "styled-components" {
export interface DefaultTheme {
BLURPLE: string;
FULL_WHITE: string;
BLACK: string;
BLACK_LIGHT: string;
BLACK_DARK: string;
BLACK_PRIMARY: string;
BLACK_SECONDARY: string;
CRIMSON: string;
DARK_SALMON: string;
DANGER: string;
LIGHTGREEN: string;
SEAGREEN: string;
ORANGE: string;
SILVER: string;
SILVER_DARK: string;
PRIMARY: string;
NODE_KEY: string;
OBJECT_KEY: string;
SIDEBAR_ICONS: string;
type CustomTheme = typeof theme;
INTERACTIVE_NORMAL: string;
INTERACTIVE_HOVER: string;
INTERACTIVE_ACTIVE: string;
BACKGROUND_NODE: string;
BACKGROUND_TERTIARY: string;
BACKGROUND_SECONDARY: string;
BACKGROUND_PRIMARY: string;
BACKGROUND_MODIFIER_ACCENT: string;
MODAL_BACKGROUND: string;
TEXT_NORMAL: string;
TEXT_POSITIVE: string;
TEXT_DANGER: string;
}
declare module "styled-components" {
export interface DefaultTheme extends CustomTheme {}
}

View File

@ -42,7 +42,7 @@ export const parser = (jsonStr: string, isFolded = false) => {
text: any,
width: number,
height: number,
parent: boolean,
parent: "string" | "number" | "boolean" | "object" | "array" | "null" | false,
isEmpty?: boolean
) => {
let actualId = String(nodes.length + 1);
@ -54,7 +54,7 @@ export const parser = (jsonStr: string, isFolded = false) => {
width: width,
height: height,
data: {
isParent: parent,
parent: parent === "array" || parent === "object" ? parent : false,
childrenCount: parent ? 1 : 0,
isEmpty: isEmpty,
},
@ -178,7 +178,7 @@ export const parser = (jsonStr: string, isFolded = false) => {
// add parent node
const { width, height } = calculateSize(parentName, true, isFolded);
parentId = addNodes(parentName, width, height, true);
parentId = addNodes(parentName, width, height, type);
bracketOpen = [...bracketOpen, { id: parentId, type: type }];
parentName = "";
@ -201,8 +201,8 @@ export const parser = (jsonStr: string, isFolded = false) => {
notHaveParent = [...notHaveParent, parentId];
}
} else if (parentType === "array") {
objectsFromArray = [...objectsFromArray, objectsFromArrayId++];
}
objectsFromArray = [...objectsFromArray, objectsFromArrayId++];
}
children.forEach((branch, index, array) => {
if (array[index + 1]) {
traverse(