From 74125565f9024b2fc1563079fb7b1b66ac8443d3 Mon Sep 17 00:00:00 2001 From: AykutSarac Date: Thu, 1 Sep 2022 12:33:35 +0300 Subject: [PATCH] enable perfmode by default --- package.json | 2 +- src/components/CustomNode/ObjectNode.tsx | 57 +++++++++++-------- src/components/CustomNode/TextNode.tsx | 48 +++++++++------- src/components/CustomNode/index.tsx | 14 ----- src/containers/Editor/Settings.tsx | 25 -------- src/containers/Editor/Tools.tsx | 23 +++----- src/containers/Modals/DownloadModal/index.tsx | 6 ++ src/hooks/store/useConfig.tsx | 2 +- yarn.lock | 12 ++-- 9 files changed, 85 insertions(+), 104 deletions(-) diff --git a/package.json b/package.json index 3bac0d48fb7..0ee0b11844e 100644 --- a/package.json +++ b/package.json @@ -26,8 +26,8 @@ "react-dom": "^18.2.0", "react-hot-toast": "^2.3.0", "react-icons": "^4.4.0", + "react-in-viewport": "^1.0.0-alpha.28", "react-linkify-it": "^1.0.7", - "react-render-if-visible": "^2.1.0", "react-twitter-embed": "^4.0.4", "react-zoom-pan-pinch": "^2.1.3", "reaflow": "^5.0.6", diff --git a/src/components/CustomNode/ObjectNode.tsx b/src/components/CustomNode/ObjectNode.tsx index 690e159f674..9bd1926b9ed 100644 --- a/src/components/CustomNode/ObjectNode.tsx +++ b/src/components/CustomNode/ObjectNode.tsx @@ -1,6 +1,7 @@ import React from "react"; -import { ConditionalWrapper, CustomNodeProps } from "src/components/CustomNode"; +import { CustomNodeProps } from "src/components/CustomNode"; import useConfig from "src/hooks/store/useConfig"; +import { useInViewport } from "react-in-viewport"; import * as Styled from "./styles"; const ObjectNode: React.FC> = ({ @@ -10,31 +11,41 @@ const ObjectNode: React.FC> = ({ x, y, }) => { + const ref = React.useRef(null); + const { inViewport } = useInViewport(ref); const performanceMode = useConfig((state) => state.performanceMode); return ( - - - - {value.map((val, idx) => ( - - - {JSON.stringify(val[0]).replaceAll('"', "")}:{" "} - - - {JSON.stringify(val[1])} - - - ))} - - + + {(!performanceMode || inViewport) && ( + + + {value.map((val, idx) => ( + + + {JSON.stringify(val[0]).replaceAll('"', "")}:{" "} + + + {JSON.stringify(val[1])} + + + ))} + + + )} ); }; diff --git a/src/components/CustomNode/TextNode.tsx b/src/components/CustomNode/TextNode.tsx index 4b1e30f72b0..1b891aeff0d 100644 --- a/src/components/CustomNode/TextNode.tsx +++ b/src/components/CustomNode/TextNode.tsx @@ -1,6 +1,7 @@ import React from "react"; import { MdCompareArrows } from "react-icons/md"; -import { ConditionalWrapper, CustomNodeProps } from "src/components/CustomNode"; +import { useInViewport } from "react-in-viewport"; +import { CustomNodeProps } from "src/components/CustomNode"; import useConfig from "src/hooks/store/useConfig"; import useGraph from "src/hooks/store/useGraph"; import useStored from "src/hooks/store/useStored"; @@ -37,7 +38,10 @@ const TextNode: React.FC< x, y, }) => { + const ref = React.useRef(null); + const { inViewport } = useInViewport(ref); const performanceMode = useConfig((state) => state.performanceMode); + const hideCollapse = useStored((state) => state.hideCollapse); const expandNodes = useGraph((state) => state.expandNodes); const collapseNodes = useGraph((state) => state.collapseNodes); @@ -58,27 +62,31 @@ const TextNode: React.FC< x={0} y={0} data-nodeid={node.id} + ref={ref} > - - - + - - {JSON.stringify(value).replaceAll('"', "")} - - - - - {isParent && hasCollapse && !hideCollapse && ( + + + {JSON.stringify(value).replaceAll('"', "")} + + + + + )} + + {inViewport && isParent && hasCollapse && !hideCollapse && ( diff --git a/src/components/CustomNode/index.tsx b/src/components/CustomNode/index.tsx index dc7a1aded1e..dad32de226f 100644 --- a/src/components/CustomNode/index.tsx +++ b/src/components/CustomNode/index.tsx @@ -1,8 +1,6 @@ import React from "react"; -import RenderIfVisible from "react-render-if-visible"; import { Label, Node, NodeProps } from "reaflow"; import ObjectNode from "./ObjectNode"; -import { StyledTextWrapper } from "./styles"; import TextNode from "./TextNode"; export interface CustomNodeProps { @@ -20,18 +18,6 @@ const baseLabelStyle = { strokeWidth: 0, }; -export const ConditionalWrapper: React.FC<{ - condition?: boolean; - children: React.ReactNode; -}> = ({ condition, children }) => - condition ? ( - - {children} - - ) : ( - {children} - ); - export const CustomNode = (nodeProps: NodeProps) => { const { properties } = nodeProps; diff --git a/src/containers/Editor/Settings.tsx b/src/containers/Editor/Settings.tsx index d571addff01..1f6a800b99e 100644 --- a/src/containers/Editor/Settings.tsx +++ b/src/containers/Editor/Settings.tsx @@ -1,9 +1,6 @@ import React from "react"; -import toast from "react-hot-toast"; -import { IoAlertCircleSharp } from "react-icons/io5"; import { Modal } from "src/components/Modal"; import Toggle from "src/components/Toggle"; -import useConfig from "src/hooks/store/useConfig"; import useStored from "src/hooks/store/useStored"; import styled from "styled-components"; import shallow from "zustand/shallow"; @@ -13,10 +10,6 @@ const StyledToggle = styled(Toggle)` background: black; `; -const StyledAlertIcon = styled(IoAlertCircleSharp)` - color: ${({ theme }) => theme.ORANGE}; -`; - const StyledModalWrapper = styled.div` display: flex; flex-direction: column; @@ -27,25 +20,10 @@ export const Settings: React.FC<{ visible: boolean; setVisible: React.Dispatch>; }> = ({ visible, setVisible }) => { - const performanceMode = useConfig((state) => state.performanceMode); const [toggleHideCollapse, hideCollapse] = useStored( (state) => [state.toggleHideCollapse, state.hideCollapse], shallow ); - const setConfig = useConfig((state) => state.setConfig); - - const togglePerformance = () => { - const toastMsg = performanceMode - ? "Disabled Performance Mode\nSearch Node & Save Image enabled." - : "Enabled Performance Mode\nSearch Node & Save Image disabled."; - - toast(toastMsg, { - icon: , - duration: 3000, - }); - - setConfig("performanceMode", !performanceMode); - }; return ( @@ -55,9 +33,6 @@ export const Settings: React.FC<{ Hide Collapse/Expand Button - - Performance Mode (Experimental) - diff --git a/src/containers/Editor/Tools.tsx b/src/containers/Editor/Tools.tsx index e886bd211f9..5c9e22acede 100644 --- a/src/containers/Editor/Tools.tsx +++ b/src/containers/Editor/Tools.tsx @@ -52,11 +52,7 @@ export const Tools: React.FC = () => { const lightmode = useStored((state) => state.lightmode); const setLightTheme = useStored((state) => state.setLightTheme); - const [performanceMode, hideEditor] = useConfig( - (state) => [state.performanceMode, state.hideEditor], - shallow - ); - + const hideEditor = useConfig((state) => state.hideEditor); const setConfig = useConfig((state) => state.setConfig); const zoomIn = useConfig((state) => state.zoomIn); @@ -79,16 +75,13 @@ export const Tools: React.FC = () => { {lightmode ? : } - {!performanceMode && } - - {!performanceMode && ( - setDownloadVisible(true)} - > - - - )} + + setDownloadVisible(true)} + > + + diff --git a/src/containers/Modals/DownloadModal/index.tsx b/src/containers/Modals/DownloadModal/index.tsx index fca96b4d3ac..0265cd1c1d8 100644 --- a/src/containers/Modals/DownloadModal/index.tsx +++ b/src/containers/Modals/DownloadModal/index.tsx @@ -8,6 +8,7 @@ import { TwitterPicker } from "react-color"; import { TwitterPickerStylesProps } from "react-color/lib/components/twitter/Twitter"; import styled from "styled-components"; import toast from "react-hot-toast"; +import useConfig from "src/hooks/store/useConfig"; const ColorPickerStyles: Partial = { card: { @@ -95,6 +96,7 @@ export const DownloadModal: React.FC = ({ visible, setVisible, }) => { + const setConfig = useConfig((state) => state.setConfig); const [fileDetails, setFileDetails] = React.useState({ filename: "jsoncrack.com", backgroundColor: "transparent", @@ -104,6 +106,7 @@ export const DownloadModal: React.FC = ({ const clipboardImage = async () => { try { toast.loading("Copying to clipboard...", { id: "toastClipboard" }); + setConfig("performanceMode", false); const imageElement = document.querySelector( "svg[id*='ref']" @@ -128,12 +131,14 @@ export const DownloadModal: React.FC = ({ } finally { toast.dismiss("toastClipboard"); setVisible(false); + setConfig("performanceMode", true); } }; const exportAsImage = async () => { try { toast.loading("Downloading...", { id: "toastDownload" }); + setConfig("performanceMode", false); const imageElement = document.querySelector( "svg[id*='ref']" @@ -150,6 +155,7 @@ export const DownloadModal: React.FC = ({ } finally { toast.dismiss("toastDownload"); setVisible(false); + setConfig("performanceMode", true); } }; diff --git a/src/hooks/store/useConfig.tsx b/src/hooks/store/useConfig.tsx index 36f728c0faf..7c28b7b82e0 100644 --- a/src/hooks/store/useConfig.tsx +++ b/src/hooks/store/useConfig.tsx @@ -27,7 +27,7 @@ const initialStates: Config = { layout: "RIGHT", expand: true, hideEditor: false, - performanceMode: false, + performanceMode: true, }; const useConfig = create()((set, get) => ({ diff --git a/yarn.lock b/yarn.lock index e8d98e94e9c..8961e9e587c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6019,6 +6019,13 @@ react-icons@^4.4.0: resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.4.0.tgz#a13a8a20c254854e1ec9aecef28a95cdf24ef703" integrity sha512-fSbvHeVYo/B5/L4VhB7sBA1i2tS8MkT0Hb9t2H1AVPkwGfVHLJCqyr2Py9dKMxsyM63Eng1GkdZfbWj+Fmv8Rg== +react-in-viewport@^1.0.0-alpha.28: + version "1.0.0-alpha.28" + resolved "https://registry.yarnpkg.com/react-in-viewport/-/react-in-viewport-1.0.0-alpha.28.tgz#3957cb7931ec26582497acd14f7c3941f020fe75" + integrity sha512-SjBVCPUIRfJb516BUev1u/dejBfI5jIcskDz4Irq2RezNG7D199eER8reRzZX+w/FLxz21rpdqRbJbagv5n37Q== + dependencies: + hoist-non-react-statics "^3.0.0" + react-is@^16.13.1, react-is@^16.7.0: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" @@ -6039,11 +6046,6 @@ react-linkify-it@^1.0.7: resolved "https://registry.yarnpkg.com/react-linkify-it/-/react-linkify-it-1.0.7.tgz#80486c0176644691345b19722678e4d716de5384" integrity sha512-B0Vy0KCAdpkT7Ql/bOpPuAP4l20f78Eaq1yD/q9J2RltPSwD900I0GzQPXaH6gnoWX/qmkBXL42Q3jTnWw8KCw== -react-render-if-visible@^2.1.0: - version "2.1.0" - resolved "https://registry.yarnpkg.com/react-render-if-visible/-/react-render-if-visible-2.1.0.tgz#2a8d3c3e2f32394c78967bb58ee7546666831605" - integrity sha512-mOLrj0eDezdTB9zxjBaOOP+cOHVKhoCQCk6qZlHev9a6Edb0eQs2CfHqBa1PNq3kfCW28NAS8QJMXXMJsUonxw== - react-scrolllock@^5.0.1: version "5.0.1" resolved "https://registry.yarnpkg.com/react-scrolllock/-/react-scrolllock-5.0.1.tgz#da1cfb7b6d55c86ae41dbad5274b778c307752b7"