From 0539e0b72f9f9f59b3a4934f721f5a040acb2a49 Mon Sep 17 00:00:00 2001 From: AykutSarac Date: Wed, 4 May 2022 21:08:17 +0300 Subject: [PATCH] update icons & options --- src/components/Sidebar/index.tsx | 119 ++++++++++++++-------------- src/components/Tooltip/index.tsx | 2 +- src/constants/data.ts | 1 - src/containers/Editor/Tools.tsx | 15 ++-- src/containers/JsonEditor/index.tsx | 45 ++++------- src/reducer/reducer.ts | 10 --- src/typings/global.ts | 1 - 7 files changed, 84 insertions(+), 109 deletions(-) diff --git a/src/components/Sidebar/index.tsx b/src/components/Sidebar/index.tsx index fc4de5e..c35d6cc 100644 --- a/src/components/Sidebar/index.tsx +++ b/src/components/Sidebar/index.tsx @@ -1,29 +1,22 @@ import React from "react"; +import toast from "react-hot-toast"; import Link from "next/link"; import styled from "styled-components"; -import { FaFileImport } from "react-icons/fa"; +import { CanvasDirection } from "reaflow"; +import { TiFlowMerge } from "react-icons/ti"; +import { BsList } from "react-icons/bs"; +import { MdUploadFile } from "react-icons/md"; +import { RiPatreonFill } from "react-icons/ri"; +import { CgArrowsMergeAltH, CgArrowsShrinkH } from "react-icons/cg"; import { - MdUnfoldMore, - MdUnfoldLess, - MdAutoFixHigh, - MdOutlineAutoFixOff, -} from "react-icons/md"; -import { - AiFillHome, - AiFillDelete, + AiOutlineDelete, AiFillGithub, AiOutlineTwitter, + AiOutlineSave, + AiOutlineFileAdd, } from "react-icons/ai"; -import { - CgArrowLongDownE, - CgArrowLongLeftE, - CgArrowLongRightE, - CgArrowLongUpE, -} from "react-icons/cg"; -import { CanvasDirection } from "reaflow"; -import toast from "react-hot-toast"; -import { Tooltip } from "../Tooltip"; +import { Tooltip } from "src/components/Tooltip"; import { ConfigActionType } from "src/reducer/reducer"; import { useConfig } from "src/hocs/config"; import { useRouter } from "next/router"; @@ -33,7 +26,7 @@ const StyledSidebar = styled.div` justify-content: space-between; flex-direction: column; align-items: center; - width: 42px; + width: 36px; background: ${({ theme }) => theme.BACKGROUND_TERTIARY}; padding: 8px; border-right: 1px solid ${({ theme }) => theme.BACKGROUND_MODIFIER_ACCENT}; @@ -64,6 +57,10 @@ const StyledText = styled.span<{ secondary?: boolean }>` secondary ? theme.INTERACTIVE_NORMAL : theme.ORANGE}; `; +const StyledFlowIcon = styled(TiFlowMerge)<{ rotate: number }>` + transform: rotate(${({ rotate }) => `${rotate}deg`}); +`; + const StyledTopWrapper = styled.nav` display: flex; justify-content: space-between; @@ -101,15 +98,15 @@ const StyledImportFile = styled.label` } `; -function getLayoutIcon(layout: CanvasDirection) { - if (layout === "LEFT") return ; - if (layout === "UP") return ; - if (layout === "RIGHT") return ; - return ; +function rotateLayout(layout: CanvasDirection) { + if (layout === "LEFT") return 90; + if (layout === "UP") return 180; + if (layout === "RIGHT") return 270; + return 360; } export const Sidebar: React.FC = () => { - const { settings, dispatch } = useConfig(); + const { json, settings, dispatch } = useConfig(); const router = useRouter(); const [jsonFile, setJsonFile] = React.useState(null); @@ -123,11 +120,9 @@ export const Sidebar: React.FC = () => { toast.success(`Cleared JSON and removed from memory.`); }; - const toggleAutoFormat = () => { - dispatch({ type: ConfigActionType.TOGGLE_AUTOFORMAT }); - toast( - `Auto format has been ${settings.autoformat ? "disabled." : "enabled."}` - ); + const handleSave = () => { + localStorage.setItem("json", json); + toast.success("Saved JSON successfully!"); }; const toggleExpandCollapse = () => { @@ -160,36 +155,6 @@ export const Sidebar: React.FC = () => { - - router.push("/")}> - - - - - - {settings.autoformat ? : } - - - - dispatch({ type: ConfigActionType.TOGGLE_LAYOUT })} - > - {getLayoutIcon(settings.layout)} - - - - - {settings.expand ? : } - - - - - - - @@ -199,10 +164,35 @@ export const Sidebar: React.FC = () => { type="file" accept="application/JSON" /> - + + + dispatch({ type: ConfigActionType.TOGGLE_LAYOUT })} + > + + + + + + {settings.expand ? : } + + + + + + + + + + + + @@ -219,6 +209,13 @@ export const Sidebar: React.FC = () => { + + + + + + + ); diff --git a/src/components/Tooltip/index.tsx b/src/components/Tooltip/index.tsx index 4de2961..33fd4d3 100644 --- a/src/components/Tooltip/index.tsx +++ b/src/components/Tooltip/index.tsx @@ -15,7 +15,7 @@ const StyledTooltip = styled.div<{ visible: boolean }>` position: absolute; top: 0; right: 0; - transform: translate(calc(100% + 15px), 25%); + transform: translate(calc(100% + 15px), 20%); z-index: 5; background: ${({ theme }) => theme.BACKGROUND_PRIMARY}; color: ${({ theme }) => theme.TEXT_NORMAL}; diff --git a/src/constants/data.ts b/src/constants/data.ts index 33cdb70..566de41 100644 --- a/src/constants/data.ts +++ b/src/constants/data.ts @@ -36,7 +36,6 @@ export const defaultJson = { export const defaultConfig: StorageConfig = { layout: "RIGHT", expand: true, - autoformat: true, hideEditor: false, zoomPanPinch: null, lightmode: false diff --git a/src/containers/Editor/Tools.tsx b/src/containers/Editor/Tools.tsx index a2666fe..cbd0a60 100644 --- a/src/containers/Editor/Tools.tsx +++ b/src/containers/Editor/Tools.tsx @@ -2,10 +2,10 @@ import React from "react"; import toast from "react-hot-toast"; import { AiOutlineFullscreen, - AiOutlineSave, AiOutlineMinus, AiOutlinePlus, } from "react-icons/ai"; +import { FiDownload } from "react-icons/fi"; import { HiOutlineSun, HiOutlineMoon } from "react-icons/hi"; import { MdCenterFocusWeak } from "react-icons/md"; import { Input } from "src/components/Input"; @@ -42,10 +42,6 @@ const StyledToolElement = styled.button` export const Tools: React.FC = () => { const { json, settings, dispatch } = useConfig(); - const handleSave = () => { - localStorage.setItem("json", json); - toast.success("Saved JSON successfully!"); - }; const zoomIn = () => dispatch({ type: ConfigActionType.ZOOM_IN }); @@ -66,8 +62,13 @@ export const Tools: React.FC = () => { {settings.lightmode ? : } - - + { + // export as png + }} + > + diff --git a/src/containers/JsonEditor/index.tsx b/src/containers/JsonEditor/index.tsx index cfd95d8..8874b8b 100644 --- a/src/containers/JsonEditor/index.tsx +++ b/src/containers/JsonEditor/index.tsx @@ -2,7 +2,7 @@ import React from "react"; import Editor from "@monaco-editor/react"; import parseJson from "parse-json"; import styled from "styled-components"; -import { ErrorContainer } from "../../components/ErrorContainer/ErrorContainer"; +import { ErrorContainer } from "src/components/ErrorContainer/ErrorContainer"; import { ConfigActionType } from "src/reducer/reducer"; import { useConfig } from "src/hocs/config"; import { Loading } from "src/components/Loading"; @@ -16,6 +16,7 @@ const StyledEditorWrapper = styled.div` `; const editorOptions = { + formatOnPaste: true, minimap: { enabled: false, }, @@ -35,36 +36,24 @@ export const JsonEditor: React.FC = () => { ); React.useEffect(() => { - if (settings.autoformat) { - return setValue(JSON.stringify(JSON.parse(json), null, 2)); - } - - setValue(json); - }, [settings.autoformat, json]); + setValue(JSON.stringify(JSON.parse(json), null, 2)); + }, [json]); React.useEffect(() => { - const formatTimer = setTimeout( - () => { - try { - if (value) { - const parsedJson = parseJson(value); - - if (settings.autoformat) { - setValue(JSON.stringify(parsedJson, null, 2)); - } else { - setValue(value); - } - - dispatch({ type: ConfigActionType.SET_JSON, payload: value }); - } - + const formatTimer = setTimeout(() => { + try { + if (!value) { setError((err) => ({ ...err, message: "" })); - } catch (jsonError: any) { - setError((err) => ({ ...err, message: jsonError.message })); + return dispatch({ type: ConfigActionType.SET_JSON, payload: "[]" }); } - }, - settings.autoformat ? 1200 : 1800 - ); + + parseJson(value); + dispatch({ type: ConfigActionType.SET_JSON, payload: value }); + setError((err) => ({ ...err, message: "" })); + } catch (jsonError: any) { + setError((err) => ({ ...err, message: jsonError.message })); + } + }, 1500); return () => clearTimeout(formatTimer); }, [value, dispatch]); @@ -76,8 +65,8 @@ export const JsonEditor: React.FC = () => { height="100%" defaultLanguage="json" value={value} - options={editorOptions} theme={editorTheme} + options={editorOptions} loading={} onChange={(value) => setValue(value as string)} /> diff --git a/src/reducer/reducer.ts b/src/reducer/reducer.ts index 406c3de..23ddbc3 100644 --- a/src/reducer/reducer.ts +++ b/src/reducer/reducer.ts @@ -6,7 +6,6 @@ export enum ConfigActionType { SET_CONFIG, TOGGLE_LAYOUT, TOGGLE_EXPAND, - TOGGLE_AUTOFORMAT, TOGGLE_DOCK, TOGGLE_THEME, ZOOM_IN, @@ -70,15 +69,6 @@ export const useConfigReducer: React.Reducer = ( ); return state; - case ConfigActionType.TOGGLE_AUTOFORMAT: - return { - ...state, - settings: { - ...state.settings, - autoformat: !state.settings.autoformat, - }, - }; - case ConfigActionType.TOGGLE_DOCK: return { ...state, diff --git a/src/typings/global.ts b/src/typings/global.ts index ca1e51e..c937f60 100644 --- a/src/typings/global.ts +++ b/src/typings/global.ts @@ -5,7 +5,6 @@ import { CanvasDirection } from "reaflow"; export interface StorageConfig { layout: CanvasDirection; expand: boolean; - autoformat: boolean; hideEditor: boolean; zoomPanPinch: ReactZoomPanPinchRef | null; lightmode: boolean;