simplify

Author: Pessimistress

modules/react-mapbox/src/components/marker.ts

@@ -126,11 +126,8 @@ export const Marker = memo(
     }
     const classNameDiff = compareClassNames(oldProps.className, props.className);
     if (classNameDiff) {
-      for (const c of classNameDiff[0]) {
-        marker.addClassName(c);
-      }
-      for (const c of classNameDiff[1]) {
-        marker.removeClassName(c);
+      for (const c of classNameDiff) {
+        marker.toggleClassName(c);
       }
     }
 

modules/react-mapbox/src/components/popup.ts

@@ -75,18 +75,16 @@ export const Popup = memo(
         popup.setLngLat([props.longitude, props.latitude]);
       }
       if (props.offset && !deepEqual(oldProps.offset, props.offset)) {
+        popup.options.anchor = props.anchor;
         popup.setOffset(props.offset);
       }
       if (oldProps.anchor !== props.anchor || oldProps.maxWidth !== props.maxWidth) {
         popup.setMaxWidth(props.maxWidth);
       }
       const classNameDiff = compareClassNames(oldProps.className, props.className);
       if (classNameDiff) {
-        for (const c of classNameDiff[0]) {
-          popup.addClassName(c);
-        }
-        for (const c of classNameDiff[1]) {
-          popup.removeClassName(c);
+        for (const c of classNameDiff) {
+          popup.toggleClassName(c);
         }
       }
       thisRef.current.props = props;

modules/react-mapbox/src/utils/compare-class-names.ts

@@ -2,33 +2,26 @@
 export function compareClassNames(
   prevClassName: string | undefined,
   nextClassName: string | undefined
-): [added: string[], removed: string[]] | null {
+): string[] | null {
   if (prevClassName === nextClassName) {
     return null;
   }
 
   const prevClassList = getClassList(prevClassName);
   const nextClassList = getClassList(nextClassName);
-  const added: string[] = [];
-  const removed: string[] = [];
-
-  for (const c of prevClassList) {
-    if (!nextClassList.has(c)) {
-      removed.push(c);
-    }
-  }
-
-  if (removed.length === 0 && prevClassList.size === nextClassList.size) {
-    return null;
-  }
+  const diff: string[] = [];
 
   for (const c of nextClassList) {
     if (!prevClassList.has(c)) {
-      added.push(c);
+      diff.push(c);
     }
   }
-
-  return [added, removed];
+  for (const c of prevClassList) {
+    if (!nextClassList.has(c)) {
+      diff.push(c);
+    }
+  }
+  return diff.length === 0 ? null : diff;
 }
 
 function getClassList(className: string | undefined) {

modules/react-mapbox/test/components/marker.spec.jsx

@@ -49,6 +49,7 @@ test('Marker', async t => {
         offset={[0, 1]}
         rotation={30}
         draggable
+        className="classA"
         pitchAlignment="map"
         rotationAlignment="map"
         onDragStart={() => (callbackType = 'dragstart')}
@@ -64,6 +65,7 @@ test('Marker', async t => {
   t.not(rotation, marker.getRotation(), 'rotation is updated');
   t.not(pitchAlignment, marker.getPitchAlignment(), 'pitchAlignment is updated');
   t.not(rotationAlignment, marker.getRotationAlignment(), 'rotationAlignment is updated');
+  t.ok(marker._element.classList.contains('classA'), 'className is updated');
 
   marker.fire('dragstart');
   t.is(callbackType, 'dragstart', 'onDragStart called');

modules/react-mapbox/test/components/popup.spec.jsx

@@ -67,8 +67,7 @@ test('Popup', async t => {
     </Map>
   );
   await sleep(1);
-
-  t.is(popup.options.className, 'classA', 'className is updated');
+  t.ok(popup._container.classList.contains('classA'), 'className is updated');
 
   root.unmount();
   t.end();

modules/react-mapbox/test/utils/compare-class-names.spec.js

@@ -19,25 +19,25 @@ test('compareClassNames', t => {
       title: 'Addition',
       prevClassName: undefined,
       nextClassName: 'marker',
-      output: [['marker'], []]
+      output: ['marker']
     },
     {
       title: 'Addition',
       prevClassName: 'marker',
       nextClassName: 'marker active',
-      output: [['active'], []]
+      output: ['active']
     },
     {
       title: 'Removal',
       prevClassName: 'marker active',
       nextClassName: 'marker',
-      output: [[], ['active']]
+      output: ['active']
     },
     {
       title: 'Multiple addition & removal',
       prevClassName: 'marker active',
       nextClassName: 'marker hovered hidden',
-      output: [['hovered', 'hidden'], ['active']]
+      output: ['hovered', 'hidden', 'active']
     }
   ];
 

modules/react-maplibre/src/components/marker.ts

@@ -126,11 +126,8 @@ export const Marker = memo(
     }
     const classNameDiff = compareClassNames(oldProps.className, props.className);
     if (classNameDiff) {
-      for (const c of classNameDiff[0]) {
-        marker.addClassName(c);
-      }
-      for (const c of classNameDiff[1]) {
-        marker.removeClassName(c);
+      for (const c of classNameDiff) {
+        marker.toggleClassName(c);
       }
     }
 

modules/react-maplibre/src/components/popup.ts

@@ -78,15 +78,13 @@ export const Popup = memo(
         popup.setOffset(props.offset);
       }
       if (oldProps.anchor !== props.anchor || oldProps.maxWidth !== props.maxWidth) {
+        popup.options.anchor = props.anchor;
         popup.setMaxWidth(props.maxWidth);
       }
       const classNameDiff = compareClassNames(oldProps.className, props.className);
       if (classNameDiff) {
-        for (const c of classNameDiff[0]) {
-          popup.addClassName(c);
-        }
-        for (const c of classNameDiff[1]) {
-          popup.removeClassName(c);
+        for (const c of classNameDiff) {
+          popup.toggleClassName(c);
         }
       }
       thisRef.current.props = props;

modules/react-maplibre/src/utils/compare-class-names.ts

@@ -2,33 +2,26 @@
 export function compareClassNames(
   prevClassName: string | undefined,
   nextClassName: string | undefined
-): [added: string[], removed: string[]] | null {
+): string[] | null {
   if (prevClassName === nextClassName) {
     return null;
   }
 
   const prevClassList = getClassList(prevClassName);
   const nextClassList = getClassList(nextClassName);
-  const added: string[] = [];
-  const removed: string[] = [];
-
-  for (const c of prevClassList) {
-    if (!nextClassList.has(c)) {
-      removed.push(c);
-    }
-  }
-
-  if (removed.length === 0 && prevClassList.size === nextClassList.size) {
-    return null;
-  }
+  const diff: string[] = [];
 
   for (const c of nextClassList) {
     if (!prevClassList.has(c)) {
-      added.push(c);
+      diff.push(c);
     }
   }
-
-  return [added, removed];
+  for (const c of prevClassList) {
+    if (!nextClassList.has(c)) {
+      diff.push(c);
+    }
+  }
+  return diff.length === 0 ? null : diff;
 }
 
 function getClassList(className: string | undefined) {

modules/react-maplibre/test/components/marker.spec.jsx

@@ -48,6 +48,7 @@ test('Marker', async t => {
         offset={[0, 1]}
         rotation={30}
         draggable
+        className="classA"
         pitchAlignment="viewport"
         rotationAlignment="viewport"
         onDragStart={() => (callbackType = 'dragstart')}
@@ -63,6 +64,7 @@ test('Marker', async t => {
   t.not(rotation, marker.getRotation(), 'rotation is updated');
   t.not(pitchAlignment, marker.getPitchAlignment(), 'pitchAlignment is updated');
   t.not(rotationAlignment, marker.getRotationAlignment(), 'rotationAlignment is updated');
+  t.ok(marker._element.classList.contains('classA'), 'className is updated');
 
   marker.fire('dragstart');
   t.is(callbackType, 'dragstart', 'onDragStart called');