Remove legacy context API (#1258)

## Summary
- replace `childContextTypes` usage with `IconContext` providers
- drop `prop-types` imports

## Testing
- `npm run lint`
- `npm run build`


------
https://chatgpt.com/codex/tasks/task_e_6868431f6ecc83318393a5d079ca736e

CHANGELOG.md

@@ -12,6 +12,8 @@
 - Upgrade Vite 6 and Cypress 14 ([#970](https://github.com/maplibre/maputnik/pull/970))
 - 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

package-lock.json

@@ -46,7 +46,6 @@
         "react-accessible-accordion": "^5.0.1",
         "react-aria-menubutton": "^7.0.3",
         "react-aria-modal": "^5.0.2",
-        "react-autobind": "^1.0.6",
         "react-autocomplete": "^1.8.1",
         "react-collapse": "^5.1.1",
         "react-color": "^2.19.3",
@@ -10772,11 +10771,6 @@
         "react-dom": ">=16.3.0"
       }
     },
-    "node_modules/react-autobind": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/react-autobind/-/react-autobind-1.0.6.tgz",
-      "integrity": "sha512-+BTreuQUUGv1Tv4GbcFNk+1L8U60ZSdxLUs3OVUPsShzxLFYcTYcNf2wzMt3GEU4iFA8Px7SpofpX+uiL03QyQ=="
-    },
     "node_modules/react-autocomplete": {
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/react-autocomplete/-/react-autocomplete-1.8.1.tgz",

package.json

@@ -60,7 +60,6 @@
     "react-accessible-accordion": "^5.0.1",
     "react-aria-menubutton": "^7.0.3",
     "react-aria-modal": "^5.0.2",
-    "react-autobind": "^1.0.6",
     "react-autocomplete": "^1.8.1",
     "react-collapse": "^5.1.1",
     "react-color": "^2.19.3",

src/components/App.tsx

@@ -1,5 +1,3 @@
-// @ts-ignore - this can be easily replaced with arrow functions
-import autoBind from 'react-autobind';
 import React from 'react'
 import cloneDeep from 'lodash.clonedeep'
 import clamp from 'lodash.clamp'
@@ -140,7 +138,6 @@ export default class App extends React.Component<any, AppState> {
 
   constructor(props: any) {
     super(props)
-    autoBind(this);
 
     this.revisionStore = new RevisionStore()
     const params = new URLSearchParams(window.location.search.substring(1))

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,38 +13,31 @@ 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'}}>
-      {this.props.toolbar}
+      <div className="maputnik-layout">
-      <div className="maputnik-layout-main">
+        {this.props.toolbar}
-        <div className="maputnik-layout-list">
+        <div className="maputnik-layout-main">
-          {this.props.layerList}
+          <div className="maputnik-layout-list">
+            {this.props.layerList}
+          </div>
+          <div className="maputnik-layout-drawer">
+            <ScrollContainer>
+              {this.props.layerEditor}
+            </ScrollContainer>
+          </div>
+          {this.props.map}
         </div>
-        <div className="maputnik-layout-drawer">
+        {this.props.bottom && <div className="maputnik-layout-bottom">
-          <ScrollContainer>
+          {this.props.bottom}
-            {this.props.layerEditor}
-          </ScrollContainer>
         </div>
-        {this.props.map}
+        }
+        {this.props.modals}
       </div>
-      {this.props.bottom && <div className="maputnik-layout-bottom">
+    </IconContext.Provider>
-        {this.props.bottom}
-      </div>
-      }
-      {this.props.modals}
-    </div>
   }
 }
 

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,53 +299,55 @@ class LayerEditorInternal extends React.Component<LayerEditorInternalProps, Laye
       items[id].handler();
     }
 
-    return <section className="maputnik-layer-editor"
+    return <IconContext.Provider value={{size: '14px', color: '#8e8e8e'}}>
-      role="main"
+      <section className="maputnik-layer-editor"
-      aria-label={t("Layer editor")}
+        role="main"
-    >
+        aria-label={t("Layer editor")}
-      <header>
-        <div className="layer-header">
-          <h2 className="layer-header__title">
-            {t("Layer: {{layerId}}", { layerId: formatLayerId(this.props.layer.id) })}
-          </h2>
-          <div className="layer-header__info">
-            <Wrapper
-              className='more-menu'
-              onSelection={handleSelection}
-              closeOnSelection={false}
-            >
-              <Button
-                id="skip-target-layer-editor"
-                data-wd-key="skip-target-layer-editor"
-                className='more-menu__button'
-                title={"Layer options"}>
-                <MdMoreVert className="more-menu__button__svg" />
-              </Button>
-              <Menu>
-                <ul className="more-menu__menu">
-                  {Object.keys(items).map((id) => {
-                    const item = items[id];
-                    return <li key={id}>
-                      <MenuItem value={id} className='more-menu__menu__item'>
-                        {item.text}
-                      </MenuItem>
-                    </li>
-                  })}
-                </ul>
-              </Menu>
-            </Wrapper>
-          </div>
-        </div>
-
-      </header>
-      <Accordion
-        allowMultipleExpanded={true}
-        allowZeroExpanded={true}
-        preExpanded={groupIds}
       >
-        {groups}
+        <header>
-      </Accordion>
+          <div className="layer-header">
-    </section>
+            <h2 className="layer-header__title">
+              {t("Layer: {{layerId}}", { layerId: formatLayerId(this.props.layer.id) })}
+            </h2>
+            <div className="layer-header__info">
+              <Wrapper
+                className='more-menu'
+                onSelection={handleSelection}
+                closeOnSelection={false}
+              >
+                <Button
+                  id="skip-target-layer-editor"
+                  data-wd-key="skip-target-layer-editor"
+                  className='more-menu__button'
+                  title={"Layer options"}>
+                  <MdMoreVert className="more-menu__button__svg" />
+                </Button>
+                <Menu>
+                  <ul className="more-menu__menu">
+                    {Object.keys(items).map((id) => {
+                      const item = items[id];
+                      return <li key={id}>
+                        <MenuItem value={id} className='more-menu__menu__item'>
+                          {item.text}
+                        </MenuItem>
+                      </li>
+                    })}
+                  </ul>
+                </Menu>
+              </Wrapper>
+            </div>
+          </div>
+
+        </header>
+        <Accordion
+          allowMultipleExpanded={true}
+          allowZeroExpanded={true}
+          preExpanded={groupIds}
+        >
+          {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 {SortableElement, SortableHandle} from 'react-sortable-hoc'
@@ -91,51 +91,43 @@ 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'}}>
-      id={this.props.id}
+      <li
-      key={this.props.layerId}
+        id={this.props.id}
-      onClick={_e => this.props.onLayerSelect(this.props.layerIndex)}
+        key={this.props.layerId}
-      data-wd-key={"layer-list-item:"+this.props.layerId}
+        onClick={_e => this.props.onLayerSelect(this.props.layerIndex)}
-      className={classnames({
+        data-wd-key={"layer-list-item:"+this.props.layerId}
-        "maputnik-layer-list-item": true,
+        className={classnames({
-        "maputnik-layer-list-item-selected": this.props.isSelected,
+          "maputnik-layer-list-item": true,
-        [this.props.className!]: true,
+          "maputnik-layer-list-item-selected": this.props.isSelected,
-      })}>
+          [this.props.className!]: true,
-      <DraggableLabel {...this.props} />
+        })}>
-      <span style={{flexGrow: 1}} />
+        <DraggableLabel {...this.props} />
-      <IconAction
+        <span style={{flexGrow: 1}} />
-        wdKey={"layer-list-item:"+this.props.layerId+":delete"}
+        <IconAction
-        action={'delete'}
+          wdKey={"layer-list-item:"+this.props.layerId+":delete"}
-        classBlockName="delete"
+          action={'delete'}
-        onClick={_e => this.props.onLayerDestroy!(this.props.layerIndex)}
+          classBlockName="delete"
-      />
+          onClick={_e => this.props.onLayerDestroy!(this.props.layerIndex)}
-      <IconAction
+        />
-        wdKey={"layer-list-item:"+this.props.layerId+":copy"}
+        <IconAction
-        action={'duplicate'}
+          wdKey={"layer-list-item:"+this.props.layerId+":copy"}
-        classBlockName="duplicate"
+          action={'duplicate'}
-        onClick={_e => this.props.onLayerCopy!(this.props.layerIndex)}
+          classBlockName="duplicate"
-      />
+          onClick={_e => this.props.onLayerCopy!(this.props.layerIndex)}
-      <IconAction
+        />
-        wdKey={"layer-list-item:"+this.props.layerId+":toggle-visibility"}
+        <IconAction
-        action={visibilityAction}
+          wdKey={"layer-list-item:"+this.props.layerId+":toggle-visibility"}
-        classBlockName="visibility"
+          action={visibilityAction}
-        classBlockModifier={visibilityAction}
+          classBlockName="visibility"
-        onClick={_e => this.props.onLayerVisibilityToggle!(this.props.layerIndex)}
+          classBlockModifier={visibilityAction}
-      />
+          onClick={_e => this.props.onLayerVisibilityToggle!(this.props.layerIndex)}
-    </li>
+        />
+      </li>
+    </IconContext.Provider>
   }
 }