Merge pull request #1034 from Vizzuality/GMW-756-reorder

[FE](fix): improve drag and sort [GMW-756]
Vizzuality · Jan 16, 2024 · 0a2123e · 0a2123e
2 parents 38e1289 + cb6cdbe
commit 0a2123e
Show file tree

Hide file tree

Showing 15 changed files with 288 additions and 312 deletions.
diff --git a/src/components/map/index.tsx b/src/components/map/index.tsx
@@ -136,7 +136,7 @@ export const CustomMap: FC<CustomMapProps> = ({
   return (
     <div
       className={cx({
-        'relative z-0 h-screen w-full print:md:h-[90vh]': true,
+        'relative z-0 h-screen w-full print:h-[90vh]': true,
         [className]: !!className,
       })}
     >

diff --git a/src/components/map/legend/sortable/item.tsx b/src/components/map/legend/sortable/item.tsx
@@ -36,7 +36,7 @@ export const SortableItem: React.FC<SortableItemProps> = ({
         'opacity-0': isDragging,
       })}
       style={style}
-      {...(!sortable?.handle && {
+      {...(sortable?.handle && {
         ...listeners,
         ...attributes,
       })}

diff --git a/src/components/map/legend/sortable/list.tsx b/src/components/map/legend/sortable/list.tsx
@@ -96,7 +96,7 @@ export const SortableList: React.FC<SortableListProps> = ({
 
       if (active.id !== over?.id) {
         const oldIndex = itemsIds.indexOf(active.id);
-        const newIndex = itemsIds.indexOf(over.id);
+        const newIndex = itemsIds.indexOf(over?.id);
 
         if (onChangeOrder) onChangeOrder(arrayMove(itemsIds, oldIndex, newIndex));
       }

diff --git a/src/containers/datasets/restoration/overview/hooks.tsx b/src/containers/datasets/restoration/overview/hooks.tsx
@@ -1,5 +1,3 @@
-import type { SourceProps, LayerProps } from 'react-map-gl';
-
 import { useRouter } from 'next/router';
 
 import { numberFormat } from 'lib/format';

diff --git a/src/containers/embedded/map/index.tsx b/src/containers/embedded/map/index.tsx
@@ -120,7 +120,7 @@ const EmbeddedMap = ({ mapId }: { mapId: string }) => {
       >
         {() => <LayerManager />}
       </Map>
-      <div className="absolute bottom-11 right-6 z-50 mr-0.5 print:hidden">
+      <div className="absolute bottom-11 right-6 z-50 mr-0.5">
         <Legend embedded />
       </div>
     </div>

diff --git a/src/containers/map/index.tsx b/src/containers/map/index.tsx
@@ -37,7 +37,6 @@ import Legend from 'containers/map/legend';
 import MobileLegend from 'containers/map/mobile/legend';
 import RestorationPopup from 'containers/map/restoration-popup';
 
-import Icon from 'components/icon';
 import Map from 'components/map';
 import Controls from 'components/map/controls';
 import BasemapSettingsControl from 'components/map/controls/basemap-settings';
@@ -53,8 +52,6 @@ import Popup from 'components/popup';
 import { breakpoints } from 'styles/styles.config';
 import type { RestorationPopUp, PopUpKey, LocationPopUp } from 'types/map';
 
-import CLOSE_SVG from 'svgs/ui/close.svg?sprite';
-
 import LayerManager from './layer-manager';
 import LocationPopup from './location-pop-up';
 
@@ -336,7 +333,7 @@ const MapContainer = ({ mapId }: { mapId: string }) => {
   const pitch = map?.getPitch();
   return (
     <div
-      className="print:page-break-after print:page-break-inside-avoid absolute top-0 left-0 z-0 h-screen w-screen print:relative print:top-4 print:h-[90vh] print:w-[90vw]"
+      className="print:page-break-after print:page-break-inside-avoid absolute top-0 left-0 z-0 h-screen w-screen print:relative print:top-4 print:w-[90vw]"
       ref={mapRef}
     >
       <Map
@@ -367,7 +364,7 @@ const MapContainer = ({ mapId }: { mapId: string }) => {
                 onSetCustomPolygon={handleCustomPolygon}
               />
             )}
-            <Controls className="absolute bottom-9 right-6 items-center print:hidden">
+            <Controls className="absolute bottom-9 right-6 hidden items-center print:hidden md:block">
               <Helper
                 className={{
                   button: 'top-1 left-8 z-[20]',