Skip to content

Commit

Permalink
Merge pull request #264 from AykutSarac/style-object-array
Browse files Browse the repository at this point in the history 
seperate colors from array and object
  • Loading branch information
@AykutSarac
AykutSarac authored Nov 24, 2022
2 parents 57389b3 + dface28 commit 4864d35
Show file tree
Hide file tree
Showing 5 changed files with 84 additions and 63 deletions.
10 changes: 5 additions & 5 deletions src/components/CustomNode/TextNode.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,30 +65,30 @@ 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('"', "")}
</Styled.StyledLinkItUrl>
</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>
Expand Down
29 changes: 19 additions & 10 deletions src/components/CustomNode/styles.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)`
Expand All @@ -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"};
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
`;
54 changes: 48 additions & 6 deletions src/constants/theme.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
import { DefaultTheme } from "styled-components";

const fixedColors = {
CRIMSON: "#DC143C",
BLURPLE: "#5865F2",
Expand All @@ -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",
Expand All @@ -37,10 +71,11 @@ export const darkTheme: DefaultTheme = {
MODAL_BACKGROUND: "#36393E",
TEXT_NORMAL: "#dcddde",
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",
Expand All @@ -58,4 +93,11 @@ export const lightTheme: DefaultTheme = {
MODAL_BACKGROUND: "#FFFFFF",
TEXT_NORMAL: "#2e3338",
TEXT_POSITIVE: "#008736",
} as const;
};

const themeDs = {
...lightTheme,
...darkTheme,
};

export default themeDs;
38 changes: 4 additions & 34 deletions src/typings/styled.d.ts
View file
Original file line number Diff line number Diff line change
@@ -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 {}
}
16 changes: 8 additions & 8 deletions src/utils/jsonParser.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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,
},
Expand Down Expand Up @@ -128,7 +128,7 @@ export const parser = (jsonStr: string, isFolded = false) => {

if (type !== "property" && parentName !== "") {
// add last brothers node and add parent node

if (brothersNode.length > 0) {
// add or concat brothers node of same parent
let findBrothersNode = brothersNodeProps.find(
Expand Down Expand Up @@ -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 = "";

Expand All @@ -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(
Expand Down Expand Up @@ -302,7 +302,7 @@ export const parser = (jsonStr: string, isFolded = false) => {
}
}
};

if (json) {
traverse(json);

Expand All @@ -316,7 +316,7 @@ export const parser = (jsonStr: string, isFolded = false) => {
});
}
}

if (nodes.length === 0) {
if (json.type === "array") {
const text = "[]";
Expand Down

0 comments on commit 4864d35

Please sign in to comment.