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

feat: display colors in colorswatch

Browse Source
This commit is contained in:
AykutSarac 2023-05-13 13:39:21 +03:00
parent 009890a6d6
commit e9769a5192
No known key found for this signature in database
5 changed files with 49 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/CustomNode/ObjectNode.tsx
View File

@ -1,5 +1,6 @@
import React from "react";
import { CustomNodeProps } from "src/components/CustomNode";
import { TextRenderer } from "./TextRenderer";
import * as Styled from "./styles";
const Node: React.FC<CustomNodeProps> = ({ node, x, y }) => {
@ -20,7 +21,7 @@ const Node: React.FC<CustomNodeProps> = ({ node, x, y }) => {
<Styled.StyledKey objectKey>
{JSON.stringify(val[0]).replaceAll('"', "")}:{" "}
</Styled.StyledKey>
<Styled.StyledLinkItUrl>{JSON.stringify(val[1])}</Styled.StyledLinkItUrl>
<TextRenderer>{JSON.stringify(val[1])}</TextRenderer>
</Styled.StyledRow>
);
})}

5
src/components/CustomNode/TextNode.tsx
View File

@ -5,6 +5,7 @@ import { CustomNodeProps } from "src/components/CustomNode";
import useGraph from "src/store/useGraph";
import useStored from "src/store/useStored";
import { isContentImage } from "src/utils/core/calculateNodeSize";
import { TextRenderer } from "./TextRenderer";
import * as Styled from "./styles";
const StyledExpand = styled.button`
@ -84,9 +85,7 @@ const Node: React.FC<CustomNodeProps> = ({ node, x, y, hasCollapse = false }) =>
data-key={JSON.stringify(text)}
>
<Styled.StyledKey parent={isParent} type={type}>
<Styled.StyledLinkItUrl>
{JSON.stringify(text).replaceAll('"', "")}
</Styled.StyledLinkItUrl>
<TextRenderer>{JSON.stringify(text).replaceAll('"', "")}</TextRenderer>
</Styled.StyledKey>
{isParent && childrenCount > 0 && showChildrenCount && (
<Styled.StyledChildrenCount>({childrenCount})</Styled.StyledChildrenCount>

41
src/components/CustomNode/TextRenderer.tsx Normal file
View File

@ -0,0 +1,41 @@
import React from "react";
import styled from "styled-components";
import { ColorSwatch } from "@mantine/core";
import * as Styled from "./styles";
const StyledRow = styled.span`
display: inline-flex;
align-items: center;
overflow: hidden;
gap: 4px;
vertical-align: middle;
`;
function isColorFormat(colorString: string) {
const hexCodeRegex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
const rgbRegex = /^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/;
const rgbaRegex = /^rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*(0|1|0\.\d+)\s*\)$/;
return (
hexCodeRegex.test(colorString) || rgbRegex.test(colorString) || rgbaRegex.test(colorString)
);
}
const isURL =
/(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.[a-zA-Z0-9]+\.[^\s]{2,})/gi;
export const TextRenderer: React.FC<{ children: string }> = ({ children }) => {
if (isURL.test(children.replaceAll('"', ""))) {
return <Styled.StyledLinkItUrl>{children}</Styled.StyledLinkItUrl>;
}
if (isColorFormat(children.replaceAll('"', ""))) {
return (
<StyledRow>
<ColorSwatch radius={4} h={12} w={12} color={children.replaceAll('"', "")} />
{children.replaceAll('"', "")}
</StyledRow>
);
}
return <>{children}</>;
};

5
src/store/useFile.ts
View File

@ -46,9 +46,8 @@ const initialStates = {
export type FileStates = typeof initialStates;
const isURL = new RegExp(
/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/
);
const isURL =
/(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.[a-zA-Z0-9]+\.[^\s]{2,})/gi;
const debouncedUpdateJson = debounce(
(value: unknown) => useJson.getState().setJson(JSON.stringify(value, null, 2)),

4
src/utils/core/calculateNodeSize.ts
View File

@ -10,9 +10,9 @@ const firaMono = Fira_Mono({
export const isContentImage = (value: string | [string, string][]) => {
if (typeof value !== "string") return false;
const isURL = /(https?:\/\/.*\.(?:png|jpg|gif))/i.test(value);
const isImageURL = /(https?:\/\/.*\.(?:png|jpg|gif))/i.test(value);
const isBase64 = value.startsWith("data:image/") && value.includes("base64");
return isURL || isBase64;
return isImageURL || isBase64;
};
const sizeCache = new Map<string | [string, string][], { width: number; height: number }>();