Merge branch 'main' into codex/replace-react-sortable-hoc-with-dnd-kit

CHANGELOG.md

@@ -13,6 +13,7 @@
 - Upgrade OpenLayers from v6 to v10
 - When loading a style into localStorage that causes a QuotaExceededError, purge localStorage and retry
 - Remove react-autobind dependency
+- Remove usage of legacy `childContextTypes` API
 - _...Add new stuff here..._
 
 ### 🐞 Bug fixes

src/components/AppLayout.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import ScrollContainer from './ScrollContainer'
 import { WithTranslation, withTranslation } from 'react-i18next';
+import { IconContext } from 'react-icons';
 
 type AppLayoutInternalProps = {
   toolbar: React.ReactElement
@@ -13,20 +13,12 @@ type AppLayoutInternalProps = {
 } & WithTranslation;
 
 class AppLayoutInternal extends React.Component<AppLayoutInternalProps> {
-  static childContextTypes = {
-    reactIconBase: PropTypes.object
-  }
-
-  getChildContext() {
-    return {
-      reactIconBase: { size: 14 }
-    }
-  }
 
   render() {
     document.body.dir = this.props.i18n.dir();
 
-    return <div className="maputnik-layout">
+    return <IconContext.Provider value={{size: '14px'}}>
+      <div className="maputnik-layout">
         {this.props.toolbar}
         <div className="maputnik-layout-main">
           <div className="maputnik-layout-list">
@@ -45,6 +37,7 @@ class AppLayoutInternal extends React.Component<AppLayoutInternalProps> {
         }
         {this.props.modals}
       </div>
+    </IconContext.Provider>
   }
 }
 

src/components/LayerEditor.tsx

@@ -1,8 +1,8 @@
 import React, {type JSX} from 'react'
-import PropTypes from 'prop-types'
 import { Wrapper, Button, Menu, MenuItem } from 'react-aria-menubutton'
 import {Accordion} from 'react-accessible-accordion';
 import {MdMoreVert} from 'react-icons/md'
+import { IconContext } from 'react-icons'
 import {BackgroundLayerSpecification, LayerSpecification, SourceSpecification} from 'maplibre-gl';
 
 import FieldJson from './FieldJson'
@@ -86,10 +86,6 @@ class LayerEditorInternal extends React.Component<LayerEditorInternalProps, Laye
     onLayerDestroyed: () => {},
   }
 
-  static childContextTypes = {
-    reactIconBase: PropTypes.object
-  }
-
   constructor(props: LayerEditorInternalProps) {
     super(props)
 
@@ -116,14 +112,6 @@ class LayerEditorInternal extends React.Component<LayerEditorInternalProps, Laye
     };
   }
 
-  getChildContext () {
-    return {
-      reactIconBase: {
-        size: 14,
-        color: '#8e8e8e',
-      }
-    }
-  }
 
   changeProperty(group: keyof LayerSpecification | null, property: string, newValue: any) {
     this.props.onLayerChanged(
@@ -311,7 +299,8 @@ class LayerEditorInternal extends React.Component<LayerEditorInternalProps, Laye
       items[id].handler();
     }
 
-    return <section className="maputnik-layer-editor"
+    return <IconContext.Provider value={{size: '14px', color: '#8e8e8e'}}>
+      <section className="maputnik-layer-editor"
         role="main"
         aria-label={t("Layer editor")}
       >
@@ -358,6 +347,7 @@ class LayerEditorInternal extends React.Component<LayerEditorInternalProps, Laye
           {groups}
         </Accordion>
       </section>
+    </IconContext.Provider>
   }
 }
 

src/components/LayerListItem.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import classnames from 'classnames'
 
 import {MdContentCopy, MdVisibility, MdVisibilityOff, MdDelete} from 'react-icons/md'
+import { IconContext } from 'react-icons'
 
 import IconLayer from './IconLayer'
 import {useSortable} from '@dnd-kit/sortable'
@@ -99,20 +99,11 @@ class LayerListItem extends React.Component<LayerListItemProps> {
     onLayerVisibilityToggle: () => {},
   }
 
-  static childContextTypes = {
-    reactIconBase: PropTypes.object
-  }
-
-  getChildContext() {
-    return {
-      reactIconBase: { size: 14 }
-    }
-  }
-
   render() {
     const visibilityAction = this.props.visibility === 'visible' ? 'show' : 'hide';
 
-    return <li
+    return <IconContext.Provider value={{size: '14px'}}>
+      <li
         ref={this.props.dragRef}
         style={this.props.dragStyle}
         id={this.props.id}
@@ -150,6 +141,7 @@ class LayerListItem extends React.Component<LayerListItemProps> {
           onClick={_e => this.props.onLayerVisibilityToggle!(this.props.layerIndex)}
         />
       </li>
+    </IconContext.Provider>
   }
 }