LegendPanel items can move up or down

wri · Jan 10, 2025 · 3426508 · 3426508
1 parent 2d00231
commit 3426508
Show file tree

Hide file tree

Showing 7 changed files with 73 additions and 38 deletions.
diff --git a/src/components/Legend/LegendItem/LegendItemDemo.tsx b/src/components/Legend/LegendItem/LegendItemDemo.tsx
@@ -10,14 +10,22 @@ import {
   ScaleLegend,
 } from '../..'
 
-export const LegendItemDemo = () => (
+export const LegendItemDemo = ({
+  onDrag = () => {},
+  onUpClick = () => {},
+  onDownClick = () => {},
+}: {
+  onDrag?: VoidFunction
+  onUpClick?: VoidFunction
+  onDownClick?: VoidFunction
+}) => (
   <div style={{ width: '290px' }}>
     <LegendItem
       layerName='Layer Name'
       dataUnit='Data Unit'
-      onDrag={() => console.log('drag')}
-      onUpClick={() => console.log('up')}
-      onDownClick={() => console.log('down')}
+      onDrag={onDrag}
+      onUpClick={onUpClick}
+      onDownClick={onDownClick}
       onRemoveClick={() => console.log('remove')}
       onInfoClick={() => console.log('info')}
       onOpacityChanged={(value) => console.log('opacity changed', value)}
@@ -56,14 +64,22 @@ export const LegendItemDemo = () => (
   </div>
 )
 
-export const LegendItemDemo2 = () => (
+export const LegendItemDemo2 = ({
+  onDrag = () => {},
+  onUpClick = () => {},
+  onDownClick = () => {},
+}: {
+  onDrag?: VoidFunction
+  onUpClick?: VoidFunction
+  onDownClick?: VoidFunction
+}) => (
   <div style={{ width: '290px' }}>
     <LegendItem
       layerName='Layer Name 2'
       dataUnit='Data Unit'
-      onDrag={() => console.log('drag')}
-      onUpClick={() => console.log('up')}
-      onDownClick={() => console.log('down')}
+      onDrag={onDrag}
+      onUpClick={onUpClick}
+      onDownClick={onDownClick}
       onRemoveClick={() => console.log('remove')}
       onInfoClick={() => console.log('info')}
       onOpacityChanged={(value) => console.log('opacity changed', value)}
@@ -101,14 +117,22 @@ export const LegendItemDemo2 = () => (
     </LegendItem>
   </div>
 )
-export const LegendItemDemo3 = () => (
+export const LegendItemDemo3 = ({
+  onDrag = () => {},
+  onUpClick = () => {},
+  onDownClick = () => {},
+}: {
+  onDrag?: VoidFunction
+  onUpClick?: VoidFunction
+  onDownClick?: VoidFunction
+}) => (
   <div style={{ width: '290px' }}>
     <LegendItem
       layerName='Layer Name 3'
       dataUnit='Data Unit'
-      onDrag={() => console.log('drag')}
-      onUpClick={() => console.log('up')}
-      onDownClick={() => console.log('down')}
+      onDrag={onDrag}
+      onUpClick={onUpClick}
+      onDownClick={onDownClick}
       onRemoveClick={() => console.log('remove')}
       onInfoClick={() => console.log('info')}
       onOpacityChanged={(value) => console.log('opacity changed', value)}

diff --git a/src/components/Legend/LegendItem/index.tsx b/src/components/Legend/LegendItem/index.tsx
@@ -32,12 +32,12 @@ const LegendItem = ({
         icon={<DotsIcon />}
         aria-label='Drag and drop'
         onClick={onDrag}
+        style={{ display: 'none', marginBottom: '12px' }}
       />
       <div
         style={{
           display: 'flex',
           flexDirection: 'column',
-          marginTop: '12px',
           gap: '12px',
         }}
       >

diff --git a/src/components/Legend/LegendPanel/LegendItem.stories.tsx b/src/components/Legend/LegendPanel/LegendItem.stories.tsx
@@ -24,13 +24,11 @@ type Story = StoryObj<typeof meta>
 
 export const LegendPanel: Story = {
   args: {
-    legendContent: (
-      <>
-        <LegendItemDemo />
-        <LegendItemDemo2 />
-        <LegendItemDemo3 />
-      </>
-    ),
+    legendContent: [
+      <LegendItemDemo />,
+      <LegendItemDemo2 />,
+      <LegendItemDemo3 />,
+    ],
     analysisContent: <div />,
   },
 }
diff --git a/src/components/Legend/LegendPanel/LegendPanelDemo.tsx b/src/components/Legend/LegendPanel/LegendPanelDemo.tsx
@@ -10,13 +10,11 @@ import {
 
 const LegendPanelDemo = () => (
   <LegendPanel
-    legendContent={
-      <>
-        <LegendItemDemo />
-        <LegendItemDemo2 />
-        <LegendItemDemo3 />
-      </>
-    }
+    legendContent={[
+      <LegendItemDemo />,
+      <LegendItemDemo2 />,
+      <LegendItemDemo3 />,
+    ]}
     analysisContent={<div />}
   />
 )

diff --git a/src/components/Legend/LegendPanel/index.tsx b/src/components/Legend/LegendPanel/index.tsx
@@ -1,5 +1,5 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-import React, { Children, useState } from 'react'
+import React, { Children, cloneElement, ReactElement, useState } from 'react'
 
 import { LegendPanelProps } from './types'
 import { LegendPanelContainer } from './styled'
@@ -8,19 +8,21 @@ import TabBar from '../../TabBar'
 
 const defaultTabValue = 'legend-tab'
 
+const reorder = (list: any[], startIndex: number, endIndex: number) => {
+  const result = Array.from(list)
+  const [removed] = result.splice(startIndex, 1)
+  result.splice(endIndex, 0, removed)
+
+  return result
+}
+
 const LegendPanel = ({
   legendContent,
   analysisContent,
   onTabClick,
 }: LegendPanelProps) => {
   const [selectedTabValue, setSelectedTabValue] = useState(defaultTabValue)
-  const [legentItems] = useState(
-    Children.map(legendContent, (child, index) => ({
-      id: index,
-      child,
-      sequence: index,
-    })) || [],
-  )
+  const [legentItems, setLegentItems] = useState(legendContent)
 
   const handleOnTabClick = (tabValue: string) => {
     setSelectedTabValue(tabValue)
@@ -41,7 +43,20 @@ const LegendPanel = ({
       />
       {selectedTabValue === 'legend-tab' ? (
         <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
-          {legentItems.map((item) => item.child)}
+          {Children.map<React.ReactNode, React.ReactNode>(
+            legentItems,
+            (child, idx) =>
+              cloneElement(child as ReactElement, {
+                onUpClick: () => {
+                  const items = reorder(legentItems, idx, idx - 1)
+                  setLegentItems(items)
+                },
+                onDownClick: () => {
+                  const items = reorder(legentItems, idx, idx + 1)
+                  setLegentItems(items)
+                },
+              }),
+          )}
         </div>
       ) : null}
       {selectedTabValue === 'analysis-tab' ? (

diff --git a/src/components/Legend/LegendPanel/types.ts b/src/components/Legend/LegendPanel/types.ts
@@ -1,7 +1,7 @@
 import React from 'react'
 
 export type LegendPanelProps = {
-  legendContent: React.ReactNode
+  legendContent: React.ReactElement[]
   analysisContent: React.ReactNode
   onTabClick?: (tabValue: string) => void
 }
diff --git a/src/components/Legend/ScaleLegend/styled.ts b/src/components/Legend/ScaleLegend/styled.ts
@@ -14,7 +14,7 @@ export const ScaleLegendGradientBar = styled.div<{ gradient: string }>`
   margin-bottom: 8px;
   border: 1px solid ${getThemedColor('neutral', 300)};
   border-radius: 4px;
-  ${({ gradient }) => gradient ? `background: ${gradient};` : ''}
+  ${({ gradient }) => (gradient ? `background: ${gradient};` : '')}
 `
 
 export const ScaleLegendBar = styled.div`