mirror of
https://github.com/AykutSarac/jsoncrack.com.git
synced 2025-01-20 05:12:54 +08:00
seperate colors from array and object
This commit is contained in:
parent
57389b3837
commit
c8134fcda5
@ -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>
|
||||
|
@ -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;
|
||||
`;
|
||||
|
@ -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;
|
||||
|
38
src/typings/styled.d.ts
vendored
38
src/typings/styled.d.ts
vendored
@ -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 {}
|
||||
}
|
||||
|
@ -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(
|
||||
|
Loading…
x
Reference in New Issue
Block a user