From 38e92a1cc7bb5b777f35d31dcd402d8ba9d82450 Mon Sep 17 00:00:00 2001 From: Simao Rodrigues Date: Tue, 27 Feb 2024 10:32:43 +0000 Subject: [PATCH 1/4] Legend accordion items to be expanded by default --- .../map/content/map/layers-toolbox/index.tsx | 2 +- .../map/layers-toolbox/layers-list/index.tsx | 16 +++++++++++-- .../map/layers-toolbox/legend/index.tsx | 24 ++++++++++++------- 3 files changed, 31 insertions(+), 11 deletions(-) diff --git a/frontend/src/containers/map/content/map/layers-toolbox/index.tsx b/frontend/src/containers/map/content/map/layers-toolbox/index.tsx index 10e6a9ae..126ac74e 100644 --- a/frontend/src/containers/map/content/map/layers-toolbox/index.tsx +++ b/frontend/src/containers/map/content/map/layers-toolbox/index.tsx @@ -7,7 +7,7 @@ import Legend from './legend'; const TABS_TRIGGER_CLASSES = 'group flex flex-1 items-center space-x-1 rounded-none border border-b-0 border-black py-3 px-6 font-mono text-sm font-bold uppercase leading-none text-black last:border-l-0 data-[state=active]:bg-orange'; - +// TODO DEBUG const LayersToolbox = (): JSX.Element => { const [activeLayers] = useSyncMapLayers(); diff --git a/frontend/src/containers/map/content/map/layers-toolbox/layers-list/index.tsx b/frontend/src/containers/map/content/map/layers-toolbox/layers-list/index.tsx index e84b9643..c51f9926 100644 --- a/frontend/src/containers/map/content/map/layers-toolbox/layers-list/index.tsx +++ b/frontend/src/containers/map/content/map/layers-toolbox/layers-list/index.tsx @@ -20,7 +20,7 @@ const TABS_ICONS_CLASSES = 'w-5 h-5 -translate-y-[2px]'; const LayersDropdown = (): JSX.Element => { const [activeLayers, setMapLayers] = useSyncMapLayers(); - const [, setLayerSettings] = useSyncMapLayerSettings(); + const [layerSettings, setLayerSettings] = useSyncMapLayerSettings(); const [{ labels }, setMapSettings] = useSyncMapSettings(); const layersQuery = useGetLayers( @@ -45,7 +45,19 @@ const LayersDropdown = (): JSX.Element => { : activeLayers.filter((_layerId) => _layerId !== Number(layerId)) ); + // If we don't have layerSettings entries, the view is in its default state; we wish to + // show all legend accordion items expanded by default. + const initialSettings = (() => { + const layerSettingsKeys = Object.keys(layerSettings); + if (layerSettingsKeys.length) return {}; + return Object.assign( + {}, + ...activeLayers.map((layerId) => ({ [layerId]: { expanded: true } })) + ); + })(); + setLayerSettings((prev) => ({ + ...initialSettings, ...prev, [layerId]: { ...prev[layerId], @@ -53,7 +65,7 @@ const LayersDropdown = (): JSX.Element => { }, })); }, - [activeLayers, setLayerSettings, setMapLayers] + [activeLayers, layerSettings, setLayerSettings, setMapLayers] ); const handleLabelsChange = useCallback( diff --git a/frontend/src/containers/map/content/map/layers-toolbox/legend/index.tsx b/frontend/src/containers/map/content/map/layers-toolbox/legend/index.tsx index 0133f1f8..7a21b002 100644 --- a/frontend/src/containers/map/content/map/layers-toolbox/legend/index.tsx +++ b/frontend/src/containers/map/content/map/layers-toolbox/legend/index.tsx @@ -1,4 +1,4 @@ -import { FC, useCallback } from 'react'; +import { FC, useCallback, useMemo } from 'react'; import { ChevronDown } from 'lucide-react'; import { HiEye, HiEyeOff } from 'react-icons/hi'; @@ -136,6 +136,20 @@ const Legend: FC = () => { [activeLayers, setLayerSettings] ); + const accordionValue = useMemo(() => { + // If we don't have layerSettings entries, the view is in its default state; we wish to + // show all legend accordion items expanded by default. + const layerSettingsKeys = Object.keys(layerSettings); + if (!layerSettingsKeys.length) { + return activeLayers.map((layerId) => layerId.toString()); + } + + // We have layerSettings entries; let's use those to define which accordion items are expanded. + return layerSettingsKeys.filter((layerId) => + layerSettings[layerId].expanded ? layerId.toString() : null + ); + }, [activeLayers, layerSettings]); + return ( <> {!layersQuery.data?.length && ( @@ -144,13 +158,7 @@ const Legend: FC = () => {

)} {layersQuery.data?.length > 0 && ( - { - return layerSettings[layerId].expanded ? layerId.toString() : null; - })} - onValueChange={onToggleAccordion} - > + {layersQuery.data?.map(({ id, attributes: { title, legend_config } }, index) => { const isFirst = index === 0; const isLast = index + 1 === layersQuery.data.length; From de07dd60eff19d437b2cb8ec7c4e459b578f605a Mon Sep 17 00:00:00 2001 From: Simao Rodrigues Date: Tue, 27 Feb 2024 12:25:14 +0000 Subject: [PATCH 2/4] Animate collapsible ui item --- frontend/src/components/ui/collapsible.tsx | 21 ++++++++++++++++++- .../map/content/map/layers-toolbox/index.tsx | 2 +- .../map/layers-toolbox/layers-list/index.tsx | 2 +- frontend/tailwind.config.js | 10 +++++++++ 4 files changed, 32 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/ui/collapsible.tsx b/frontend/src/components/ui/collapsible.tsx index 9605c4e4..1a81b4de 100644 --- a/frontend/src/components/ui/collapsible.tsx +++ b/frontend/src/components/ui/collapsible.tsx @@ -1,9 +1,28 @@ +import * as React from 'react'; + import * as CollapsiblePrimitive from '@radix-ui/react-collapsible'; +import { cn } from '@/lib/classnames'; + const Collapsible = CollapsiblePrimitive.Root; const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger; -const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent; +const CollapsibleContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + {children} + +)); +CollapsibleContent.displayName = CollapsiblePrimitive.Content.displayName; export { Collapsible, CollapsibleTrigger, CollapsibleContent }; diff --git a/frontend/src/containers/map/content/map/layers-toolbox/index.tsx b/frontend/src/containers/map/content/map/layers-toolbox/index.tsx index 126ac74e..10e6a9ae 100644 --- a/frontend/src/containers/map/content/map/layers-toolbox/index.tsx +++ b/frontend/src/containers/map/content/map/layers-toolbox/index.tsx @@ -7,7 +7,7 @@ import Legend from './legend'; const TABS_TRIGGER_CLASSES = 'group flex flex-1 items-center space-x-1 rounded-none border border-b-0 border-black py-3 px-6 font-mono text-sm font-bold uppercase leading-none text-black last:border-l-0 data-[state=active]:bg-orange'; -// TODO DEBUG + const LayersToolbox = (): JSX.Element => { const [activeLayers] = useSyncMapLayers(); diff --git a/frontend/src/containers/map/content/map/layers-toolbox/layers-list/index.tsx b/frontend/src/containers/map/content/map/layers-toolbox/layers-list/index.tsx index c51f9926..775bb683 100644 --- a/frontend/src/containers/map/content/map/layers-toolbox/layers-list/index.tsx +++ b/frontend/src/containers/map/content/map/layers-toolbox/layers-list/index.tsx @@ -125,7 +125,7 @@ const LayersDropdown = (): JSX.Element => { -
    +