From e8ce5d05c42c5f77c9cd52879e39c7caf382dab8 Mon Sep 17 00:00:00 2001
From: Dima Rifai <dima.rifai@gmail.com>
Date: Wed, 27 Nov 2024 11:50:02 +0200
Subject: [PATCH] Issue 386 - Handle Select and minor styling changes
---
components/ViewPopover.tsx | 19 ++++++++++++++++---
1 file changed, 16 insertions(+), 3 deletions(-)
diff --git a/components/ViewPopover.tsx b/components/ViewPopover.tsx
index d6a9fdb6..52057838 100644
--- a/components/ViewPopover.tsx
+++ b/components/ViewPopover.tsx
@@ -1,3 +1,4 @@
+import { useState } from "react";
import {
Popover,
PopoverContent,
@@ -15,6 +16,7 @@ interface ViewPopoverProps {
const ViewPopover: React.FC<ViewPopoverProps> = ({ isMobile }) => {
const { settings, setSettings } = useUserSettingsContext();
+ const [popoverOpen, setPopoverOpen] = useState(false);
const popupDefaultValue = (() => {
const { prettyJsonView, rawJsonView } = settings;
@@ -23,13 +25,24 @@ const ViewPopover: React.FC<ViewPopoverProps> = ({ isMobile }) => {
else return "raw-json";
})();
+ const handleSelect = (value: string) => {
+ if (value === "visualised-data") {
+ setSettings({ ...settings, prettyJsonView: false, rawJsonView: false });
+ } else if (value === "raw-json") {
+ setSettings({ ...settings, prettyJsonView: false, rawJsonView: true });
+ } else if (value === "pretty-json") {
+ setSettings({ ...settings, prettyJsonView: true, rawJsonView: false });
+ }
+ setPopoverOpen(false); // Close the popover
+ };
+
return (
- <Popover>
+ <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>
<PopoverTrigger asChild>
<div
className={cn(
"rounded-[6px] text-sm text-center cursor-pointer flex jusitfy-center items-center p-1 ml-3 py-0 border-2 border-explorer-blue dark:border-explorer-turquoise",
- { "p-0 m-0 border-none text-2xl": isMobile }
+ { "p-0 m-0 border-none text-base justify-normal": isMobile }
)}
data-testid="data-view-dropdown"
>
@@ -42,7 +55,7 @@ const ViewPopover: React.FC<ViewPopoverProps> = ({ isMobile }) => {
isMobile && "ml-[30px]"
}`}
>
- <RadioGroup defaultValue={popupDefaultValue}>
+ <RadioGroup defaultValue={popupDefaultValue} onValueChange={handleSelect}>
<div className="flex items-center space-x-2">
<RadioGroupItem
onClick={() =>
--
GitLab