diff --git a/src/components/CustomNode/TextNode.tsx b/src/components/CustomNode/TextNode.tsx index a6d34102e6a..3ab840d531e 100644 --- a/src/components/CustomNode/TextNode.tsx +++ b/src/components/CustomNode/TextNode.tsx @@ -65,16 +65,16 @@ const TextNode: React.FC = ({ x={0} y={0} hideCollapse={hideCollapse} - hasCollapse={data.isParent && hasCollapse} + hasCollapse={data.parent && hasCollapse} ref={ref} > - + {(!performanceMode || inViewport) && ( {JSON.stringify(text).replaceAll('"', "")} @@ -82,13 +82,13 @@ const TextNode: React.FC = ({ )} - {data.isParent && data.childrenCount > 0 && !hideChildrenCount && ( + {data.parent && data.childrenCount > 0 && !hideChildrenCount && ( ({data.childrenCount}) )} - {inViewport && data.isParent && hasCollapse && !hideCollapse && ( + {inViewport && data.parent && hasCollapse && !hideCollapse && ( {isExpanded ? : } diff --git a/src/components/CustomNode/styles.tsx b/src/components/CustomNode/styles.tsx index a7d3fa23c9f..e70e79ed614 100644 --- a/src/components/CustomNode/styles.tsx +++ b/src/components/CustomNode/styles.tsx @@ -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; `; diff --git a/src/constants/theme.ts b/src/constants/theme.ts index d6e25cdb3e4..949c8510e6e 100644 --- a/src/constants/theme.ts +++ b/src/constants/theme.ts @@ -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", @@ -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", @@ -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; diff --git a/src/typings/styled.d.ts b/src/typings/styled.d.ts index 3bc8146c868..6e6fea21d98 100644 --- a/src/typings/styled.d.ts +++ b/src/typings/styled.d.ts @@ -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 {} } diff --git a/src/utils/jsonParser.ts b/src/utils/jsonParser.ts index 4b070975c58..84592e0b21b 100644 --- a/src/utils/jsonParser.ts +++ b/src/utils/jsonParser.ts @@ -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, }, @@ -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( @@ -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( @@ -302,7 +302,7 @@ export const parser = (jsonStr: string, isFolded = false) => { } } }; - + if (json) { traverse(json); @@ -316,7 +316,7 @@ export const parser = (jsonStr: string, isFolded = false) => { }); } } - + if (nodes.length === 0) { if (json.type === "array") { const text = "[]";