Migrate components to React hooks and use new context API

appveyor.yml

@@ -1,4 +1,4 @@
-version: 0.12.7.{build}
+version: 0.13.0.{build}
 shallow_clone: true
 # Don't actually build. This is not a .net project
 build: off

docs_dev/content/API_NPM.md

@@ -2,7 +2,7 @@
 
 `mapguide-react-layout` is a modern map viewer for [MapGuide Open Source](http://mapguide.osgeo.org) and [Autodesk Infrastructure Map Server](http://www.autodesk.com/products/infrastructure-map-server/overview)
 
-This API documentation covers the `mapguide-react-layout` npm module (version **0.12.0**)
+This API documentation covers the `mapguide-react-layout` npm module (version **0.13.0**)
 
 For an example of how this npm module is used, check out the [mapguide-react-layout-example](https://github.com/jumpinjackie/mapguide-react-layout-example)
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mapguide-react-layout",
-  "version": "0.12.7",
+  "version": "0.13.0",
   "description": "A modern react-based map viewer for MapGuide",
   "scripts": {
     "prebuild": "yarn run clean",
@@ -44,12 +44,10 @@
   },
   "homepage": "https://github.com/jumpinjackie/mapguide-react-layout#readme",
   "dependencies": {
-    "@blueprintjs/core": "3.19.1",
+    "@blueprintjs/core": "^3.21.0",
     "history": "^4.10.1",
     "ismobilejs": "^1.0.3",
     "lodash.debounce": "^4.0.8",
-    "lodash.uniq": "^4.5.0",
-    "lodash.xor": "^4.5.0",
     "ol": "4.6.5",
     "proj4": "2.6.0",
     "prop-types": "^15.7.2",
@@ -77,11 +75,9 @@
     "@types/enzyme": "3.10.3",
     "@types/jest": "24.0.23",
     "@types/lodash.debounce": "4.0.6",
-    "@types/lodash.uniq": "4.5.6",
-    "@types/lodash.xor": "4.5.6",
     "@types/prop-types": "15.7.3",
     "@types/qs": "^6.9.0",
-    "@types/react": "16.9.11",
+    "@types/react": "16.9.12",
     "@types/react-addons-css-transition-group": "15.0.5",
     "@types/react-addons-update": "0.14.20",
     "@types/react-copy-to-clipboard": "^4.3.0",
@@ -99,7 +95,7 @@
     "css-loader": "3.2.0",
     "enzyme": "3.10.0",
     "enzyme-adapter-react-16": "1.15.1",
-    "file-loader": "4.2.0",
+    "file-loader": "4.3.0",
     "fork-ts-checker-webpack-plugin": "^3.1.0",
     "jest": "24.9.0",
     "jsdom": "^15.2.1",
@@ -115,14 +111,14 @@
     "rimraf": "3.0.0",
     "source-map-loader": "0.2.4",
     "style-loader": "1.0.0",
-    "testcafe": "^1.6.1",
+    "testcafe": "^1.7.0",
     "testcafe-react-selectors": "^3.3.0",
     "thread-loader": "^2.1.3",
-    "ts-jest": "24.1.0",
+    "ts-jest": "24.2.0",
     "ts-loader": "6.2.1",
     "tslint": "5.20.1",
     "typescript": "3.7.2",
-    "url-loader": "2.2.0",
+    "url-loader": "2.3.0",
     "webpack": "4.41.2",
     "webpack-cli": "^3.3.10"
   },

src/actions/init.ts

@@ -39,7 +39,7 @@ import * as shortid from "shortid";
 import { registerStringBundle, DEFAULT_LOCALE } from "../api/i18n";
 import { assertNever } from "../utils/never";
 import proj4 from "proj4";
-import uniq = require("lodash.uniq");
+import { makeUnique } from "../utils/array";
 import { ensureParameters } from "../utils/url";
 import { strIsNullOrEmpty } from "../utils/string";
 import { convertWidget, isFlyoutSpec, ToolbarConf, PreparedSubMenuSet } from '../api/registry/command-spec';
@@ -436,7 +436,7 @@ function getExtraProjectionsFromFlexLayout(appDef: ApplicationDefinition): strin
             }
         }
     }
-    return uniq(epsgs);
+    return makeUnique(epsgs);
 }
 
 function processAndDispatchInitError(error: Error, includeStack: boolean, dispatch: ReduxDispatch, opts: IInitAsyncOptions): void {
@@ -599,7 +599,8 @@ async function initFromWebLayoutAsync(webLayout: WebLayout, opts: IInitAsyncOpti
                 targetFrame: cmd.TargetFrame,
                 parameters: (cmd.AdditionalParameter || []).map(p => {
                     return { name: p.Key, value: p.Value };
-                })
+                }),
+                title: cmd.Label
             });
         } else if (isSearchCommand(cmd)) {
             registerCommand(cmd.Name, {
@@ -610,7 +611,7 @@ async function initFromWebLayoutAsync(webLayout: WebLayout, opts: IInitAsyncOpti
                 resultColumns: cmd.ResultColumns,
                 filter: cmd.Filter,
                 matchLimit: cmd.MatchLimit,
-                title: cmd.Label,
+                title: cmd.Label
             });
         }
         cmdsByKey[cmd.Name] = cmd;
@@ -748,7 +749,7 @@ async function initFromAppDefAsync(appDef: ApplicationDefinition, opts: IInitAsy
                         resultColumns: cmd.ResultColumns,
                         filter: cmd.Filter,
                         matchLimit: cmd.MatchLimit,
-                        title: cmd.Title,
+                        title: (cmd.Title || (isUIWidget(widget) ? widget.Label : undefined)),
                         target: convertToCommandTarget(cmd.Target),
                         targetFrame: cmd.Target
                     });
@@ -761,7 +762,8 @@ async function initFromAppDefAsync(appDef: ApplicationDefinition, opts: IInitAsy
                         targetFrame: cmd.Target,
                         parameters: (cmd.AdditionalParameter || []).map((p: any) => {
                             return { name: p.Key, value: p.Value };
-                        })
+                        }),
+                        title: isUIWidget(widget) ? widget.Label : undefined
                     });
                     break;
             }

src/actions/map.ts

@@ -15,7 +15,7 @@ import { Client } from "../api/client";
 import { QueryMapFeaturesResponse, FeatureSet, SelectedFeature, SelectedFeatureSet } from '../api/contracts/query';
 import { IQueryMapFeaturesOptions } from '../api/request-builder';
 import { buildSelectionXml } from '../api/builders/deArrayify';
-import uniq = require("lodash.uniq");
+import { makeUnique } from "../utils/array";
 import { ActionType } from '../constants/actions';
 import { IMapSetBusyCountAction, IMapSetBaseLayerAction, IMapSetScaleAction, IMapSetMouseCoordinatesAction, IMapSetLayerTransparencyAction, IMapSetViewSizeUnitsAction, IMapPreviousViewAction, IMapNextViewAction, ISetActiveMapToolAction, ISetActiveMapAction, ISetManualFeatureTooltipsEnabledAction, ISetFeatureTooltipsEnabledAction, IMapSetViewRotationAction, IMapSetViewRotationEnabledAction, IShowSelectedFeatureAction, IMapSetSelectionAction, IMapResizedAction } from './defs';
 import { storeSelectionSet } from '../api/session-store';
@@ -90,7 +90,7 @@ function combineFeatureSets(oldRes: FeatureSet | undefined, newRes: FeatureSet |
             if (existing.length == 0) {
                 merged.Layer.push(layer);
             } else {
-                existing[0].Class.ID = uniq(existing[0].Class.ID.concat(layer.Class.ID));
+                existing[0].Class.ID = makeUnique(existing[0].Class.ID.concat(layer.Class.ID));
             }
         }
     }

src/api/common.ts

@@ -154,7 +154,10 @@ export interface ICommand {
     icon?: string;
     iconClass?: string;
     //tooltip?: string;
-    //label?: string;
+    /**
+     * @since 0.12.8
+     */
+    title?: string;
     /**
      * Indicates if this command is enabled based on the given application state
      *
@@ -242,6 +245,10 @@ export interface IInvokeUrlCommand extends ITargetedCommand {
      */
     icon?: string;
     iconClass?: string;
+    /**
+     * @since 0.12.8
+     */
+    title?: string;
     /**
      * The URL to invoke
      *

src/api/registry/command.ts

@@ -348,6 +348,7 @@ export function registerCommand(name: string, cmdDef: ICommand | IInvokeUrlComma
         cmd = {
             icon: cmdDef.icon,
             iconClass: cmdDef.iconClass,
+            title: cmdDef.title,
             enabled: (state) => {
                 if (cmdDef.disableIfSelectionEmpty === true) {
                     return CommandConditions.hasSelection(state);
@@ -362,14 +363,15 @@ export function registerCommand(name: string, cmdDef: ICommand | IInvokeUrlComma
                 if (map) {
                     const params = mergeInvokeUrlParameters(cmdDef.parameters, parameters);
                     const url = ensureParameters(cmdDef.url, map.Name, map.SessionId, config.locale, true, params);
-                    openUrlInTarget(name, cmdDef, config.capabilities.hasTaskPane, dispatch, url);
+                    openUrlInTarget(name, cmdDef, config.capabilities.hasTaskPane, dispatch, url, cmd.title);
                 }
             }
         };
     } else if (isSearchCommand(cmdDef)) {
         cmd = {
             icon: cmdDef.icon,
             iconClass: cmdDef.iconClass,
+            title: cmdDef.title,
             enabled: () => true,
             selected: () => false,
             invoke: (dispatch: ReduxDispatch, getState: () => IApplicationState, viewer: IMapViewer, parameters?: any) => {
@@ -388,7 +390,7 @@ export function registerCommand(name: string, cmdDef: ICommand | IInvokeUrlComma
                         + `&limit=${cmdDef.matchLimit}`
                         + `&properties=${(cmdDef.resultColumns.Column || []).map(col => col.Property).join(",")}`
                         + `&propNames=${(cmdDef.resultColumns.Column || []).map(col => col.Name).join(",")}`;
-                    openUrlInTarget(name, cmdDef, config.capabilities.hasTaskPane, dispatch, url);
+                    openUrlInTarget(name, cmdDef, config.capabilities.hasTaskPane, dispatch, url, cmd.title);
                 }
             }
         };

src/components/accordion.tsx

@@ -2,8 +2,6 @@ import * as React from "react";
 import {
     GenericEvent
 } from "../api/common";
-import { safePropAccess } from '../utils/safe-prop';
-import Icon from 'ol/style/icon';
 import { Collapse, Icon as BpIcon, ResizeSensor, IResizeEntry } from '@blueprintjs/core';
 
 /**
@@ -45,72 +43,52 @@ export interface IAccordionProps {
 
 const PANEL_HEADER_HEIGHT = 24;
 
+function validatePanelId(panels: IAccordionPanelSpec[], id: string | undefined): string | null {
+    if (!id) {
+        return null;
+    }
+    const panel = panels.filter(p => p.id == id)[0];
+    if (panel) {
+        return id;
+    }
+    return null;
+}
+
 /**
  * A generic, reusable Accordion component
- *
- * @export
- * @class Accordion
- * @extends {React.Component<IAccordionProps, any>}
+ * @param props 
  */
-export class Accordion extends React.Component<IAccordionProps, any> {
-    constructor(props: IAccordionProps) {
-        super(props);
-        const activeId = this.validatePanelId(props.panels, props.activePanelId);
-        this.state = {
-            openPanel: activeId || props.panels[props.panels.length - 1].id,
-            dim: {
-                width: -1,
-                height: -1
-            }
-        };
-    }
-    private onTogglePanel = (e: GenericEvent) => {
+export const Accordion = (props: IAccordionProps) => {
+    const { style, panels, isResizing, onActivePanelChanged } = props;
+    const activeId = validatePanelId(props.panels, props.activePanelId);
+    const [dim, setDim] = React.useState<Pick<DOMRectReadOnly, "width" | "height">>({
+        width: -1,
+        height: -1
+    });
+    const [openPanel, setOpenPanel] = React.useState(activeId || panels[panels.length - 1].id);
+    const onResize = (entries: IResizeEntry[]) => {
+        setDim(entries[0].contentRect);
+    };
+    const onTogglePanel = (e: GenericEvent) => {
         const id = e.currentTarget.attributes["data-accordion-panel-id"].value;
-        if (this.state.openPanel != id) {
-            this.setState({ openPanel: id }, () => {
-                safePropAccess(this.props, "onActivePanelChanged", func => func!(id));
-            });
+        if (openPanel != id) {
+            setOpenPanel(id);
+            onActivePanelChanged?.(id);
         }
     }
-    private validatePanelId(panels: IAccordionPanelSpec[], id: string | undefined): string | null {
-        if (!id) {
-            return null;
-        }
-        const panel = panels.filter(p => p.id == id)[0];
-        if (panel) {
-            return id;
-        }
-        return null;
-    }
-    private onResize = (entries: IResizeEntry[]) => {
-        this.setState({ dim: entries[0].contentRect });
-    }
-    componentDidUpdate(prevProps: IAccordionProps) {
-        const nextProps = this.props;
-        if (prevProps.activePanelId != nextProps.activePanelId) {
-            const newId = this.validatePanelId(nextProps.panels, nextProps.activePanelId);
-            if (newId) {
-                this.setState({ openPanel: newId });
-            }
-        }
-    }
-    render(): JSX.Element {
-        const { openPanel, dim } = this.state;
-        const { panels, style, isResizing } = this.props;
-        return <ResizeSensor onResize={this.onResize}>
-            <div style={style} className="component-accordion">
-                {panels.map(p => {
-                    const isOpen = (p.id == openPanel);
-                    return <div key={p.id} className="component-accordion-panel">
-                        <div className="component-accordion-panel-header" style={{ height: PANEL_HEADER_HEIGHT }} data-accordion-panel-id={p.id} onClick={this.onTogglePanel}>
-                            <BpIcon icon={isOpen ? "chevron-up" : "chevron-down"} /> {p.title}
-                        </div>
-                        <Collapse isOpen={isOpen}>
-                            {p.contentRenderer({ width: dim.width, height: (dim.height - (panels.length * PANEL_HEADER_HEIGHT)) }, isResizing)}
-                        </Collapse>
-                    </div>;
-                })}
-            </div>
-        </ResizeSensor>;
-    }
+    return <ResizeSensor onResize={onResize}>
+        <div style={style} className="component-accordion">
+            {panels.map(p => {
+                const isOpen = (p.id == openPanel);
+                return <div key={p.id} className="component-accordion-panel">
+                    <div className="component-accordion-panel-header" style={{ height: PANEL_HEADER_HEIGHT }} data-accordion-panel-id={p.id} onClick={onTogglePanel}>
+                        <BpIcon icon={isOpen ? "chevron-up" : "chevron-down"} /> {p.title}
+                    </div>
+                    <Collapse isOpen={isOpen}>
+                        {p.contentRenderer({ width: dim.width, height: (dim.height - (panels.length * PANEL_HEADER_HEIGHT)) }, isResizing)}
+                    </Collapse>
+                </div>;
+            })}
+        </div>
+    </ResizeSensor>;
 }