@mwater/visualization 5.1.0 → 5.3.0

package/lib/layouts/blocks/BlocksLayoutManager.js

@@ -8,24 +8,15 @@ const react_1 = __importDefault(require("react"));
 const R = react_1.default.createElement;
 const uuid_1 = __importDefault(require("uuid"));
 const LayoutManager_1 = __importDefault(require("../LayoutManager"));
+const BlocksDisplayComponent_1 = __importDefault(require("./BlocksDisplayComponent"));
 class BlocksLayoutManager extends LayoutManager_1.default {
-    // Renders the layout as a react element
-    // options:
-    //  items: opaque items object that layout manager understands
-    //  onItemsChange: Called when items changes
-    //  renderWidget: called with ({ id:, type:, design:, onDesignChange:, width:, height:  })
-    //  style: style to use for layout. null for default
-    //  layoutOptions: layout options to use
-    //  disableMaps: true to disable maps
-    //  clipboard: clipboard contents
-    //  onClipboardChange: called when clipboard is changed
-    //  cantPasteMesssage: message to display if clipboard can't be pasted into current dashboard
+    /**
+     * Renders the layout as a react element
+     */
     renderLayout(options) {
-        const BlocksDisplayComponent = require("./BlocksDisplayComponent").default;
-        return R(BlocksDisplayComponent, {
+        return R(BlocksDisplayComponent_1.default, {
             items: options.items || { id: "root", type: "root", blocks: [] },
             onItemsChange: options.onItemsChange,
-            style: options.style,
             layoutOptions: options.layoutOptions,
             renderWidget: options.renderWidget,
             disableMaps: options.disableMaps,

package/lib/layouts/blocks/HorizontalBlockComponent.d.ts

@@ -1,9 +1,10 @@
-import React from "react";
+import React, { ReactElement } from "react";
 import { LayoutBlock } from "./blockUtils";
 export interface HorizontalBlockComponentProps {
     block: LayoutBlock;
-    collapseColumns?: boolean;
-    renderBlock: any;
+    collapseColumns: boolean;
+    priority: number;
+    renderBlock: (block: LayoutBlock, collapseColumns: boolean, priority: number) => ReactElement;
     /** Called with (sourceBlock, targetBlock, side) when block is dropped on it. side is top, left, bottom, right */
     onBlockDrop?: any;
     /** Called with (block) when block is removed */
@@ -21,7 +22,7 @@ export default class HorizontalBlockComponent extends React.Component<Horizontal
     blockRefs: {
         [blockId: string]: HTMLElement | null;
     };
-    constructor(props: any);
+    constructor(props: HorizontalBlockComponentProps);
     componentWillUnmount(): void;
     handleMouseDown: (index: any, ev: any) => void;
     handleMouseMove: (ev: any) => void;

package/lib/layouts/blocks/HorizontalBlockComponent.js

@@ -23,7 +23,7 @@ class HorizontalBlockComponent extends react_1.default.Component {
     componentWillUnmount() {
         // Remove listeners
         document.removeEventListener("mousemove", this.handleMouseMove);
-        return document.removeEventListener("mouseup", this.handleMouseUp);
+        document.removeEventListener("mouseup", this.handleMouseUp);
     }
     handleMouseDown = (index, ev) => {
         // Prevent html5 drag
@@ -35,7 +35,7 @@ class HorizontalBlockComponent extends react_1.default.Component {
             rightSize: this.blockRefs[`block${index + 1}`].offsetWidth
         });
         document.addEventListener("mousemove", this.handleMouseMove);
-        return document.addEventListener("mouseup", this.handleMouseUp);
+        document.addEventListener("mouseup", this.handleMouseUp);
     };
     handleMouseMove = (ev) => {
         if (!this.state.dragInitialX) {
@@ -76,7 +76,7 @@ class HorizontalBlockComponent extends react_1.default.Component {
         let asc, end;
         let asc1, end1;
         if (this.props.collapseColumns) {
-            return R("div", null, lodash_1.default.map(this.props.block.blocks, (block, index) => this.props.renderBlock(block, true)));
+            return R("div", null, lodash_1.default.map(this.props.block.blocks, (block) => this.props.renderBlock(block, true, this.props.priority)));
         }
         // Calculate widths (percentages)
         let totalWeight = 0;
@@ -110,7 +110,7 @@ class HorizontalBlockComponent extends react_1.default.Component {
                         ref: (c) => {
                             return (this.blockRefs[`block${index}`] = c);
                         }
-                    }, this.props.renderBlock(block))
+                    }, this.props.renderBlock(block, false, this.props.priority))
                 ];
             }))));
             // Allow dropping
@@ -131,7 +131,7 @@ class HorizontalBlockComponent extends react_1.default.Component {
                             return (this.blockRefs[`block${index}`] = c);
                         },
                         className: "mwater-visualization-horizontal-block-item"
-                    }, this.props.renderBlock(block))
+                    }, this.props.renderBlock(block, false, this.props.priority))
                 ];
             }));
         }

package/lib/layouts/grid/GridLayoutManager.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 import LayoutManager from "../LayoutManager";
+import AutoSizeComponent from "@mwater/react-library/lib/AutoSizeComponent";
 export default class GridLayoutManager extends LayoutManager {
     renderPalette(width: any): React.DetailedReactHTMLElement<{
         className: string;
@@ -11,7 +12,7 @@ export default class GridLayoutManager extends LayoutManager {
             width: number;
         };
     }, HTMLElement>;
-    renderLayout(options: any): React.CElement<any, React.Component<any, any, any>>;
+    renderLayout(options: any): React.CElement<import("@mwater/react-library/lib/AutoSizeComponent").AutoSizeComponentProps, AutoSizeComponent>;
     isEmpty(items: any): boolean;
     getWidgetTypeAndDesign(items: any, widgetId: any): any;
     getAllWidgets(items: any): {

package/lib/mWaterLoader.d.ts

@@ -14,6 +14,8 @@ export interface MWaterLoaderOptions {
     localCaching?: boolean;
     /** Locales of the schema to load. Default is all. */
     locales?: string[];
+    /** Origin of usage. e.g. "dashboards:43445364..." */
+    origin?: string;
 }
 /** Loads a schema and data source that is specific to mWater server */
 export default function mWaterLoader(options: MWaterLoaderOptions, callback: (error: any, config?: {

package/lib/mWaterLoader.js

@@ -42,7 +42,8 @@ function mWaterLoader(options, callback) {
         const schema = new expressions_1.Schema(schemaJson);
         const dataSource = new MWaterDataSource_1.default(options.apiUrl, options.client, {
             serverCaching: false,
-            localCaching: options.localCaching != null ? options.localCaching : true
+            localCaching: options.localCaching != null ? options.localCaching : true,
+            origin: options.origin
         });
         return callback(null, {
             schema,

package/lib/maps/AddLayerComponent.d.ts

@@ -1,22 +1,20 @@
-import PropTypes from "prop-types";
 import React from "react";
 import { DataSource, Schema } from "@mwater/expressions";
+import { MapDesign } from "..";
 export interface AddLayerComponentProps {
     /** Number of layers that already exist */
     layerNumber: number;
     /** See Map Design.md */
-    design: any;
+    design: MapDesign;
     /** Called with new design */
-    onDesignChange: any;
+    onDesignChange: (design: MapDesign) => void;
     /** Schema to use */
     schema: Schema;
     dataSource: DataSource;
 }
 export default class AddLayerComponent extends React.Component<AddLayerComponentProps> {
-    static contextTypes: {
-        addLayerElementFactory: PropTypes.Requireable<(...args: any[]) => any>;
-    };
-    handleAddLayer: (newLayer: any) => any;
-    handleAddLayerView: (layerView: any) => any;
+    static contextType: React.Context<import("../MWaterContextComponent").AddLayerElementFactory | undefined>;
+    handleAddLayer: (newLayer: any) => void;
+    handleAddLayerView: (layerView: any) => void;
     render(): any;
 }

package/lib/maps/AddLayerComponent.js

@@ -3,16 +3,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const prop_types_1 = __importDefault(require("prop-types"));
 const lodash_1 = __importDefault(require("lodash"));
 const react_1 = __importDefault(require("react"));
 const R = react_1.default.createElement;
 const uuid_1 = __importDefault(require("uuid"));
 const LayerFactory_1 = __importDefault(require("./LayerFactory"));
+const MWaterContextComponent_1 = require("../MWaterContextComponent");
 // Dropdown to add a new layer.
 // Can be overridden by context of addLayerElementFactory which is called with all props
 class AddLayerComponent extends react_1.default.Component {
-    static contextTypes = { addLayerElementFactory: prop_types_1.default.func };
+    static contextType = MWaterContextComponent_1.AddLayerElementFactoryContext;
     handleAddLayer = (newLayer) => {
         const layerView = {
             id: (0, uuid_1.default)(),
@@ -32,12 +32,12 @@ class AddLayerComponent extends react_1.default.Component {
         // Add to list
         const layerViews = this.props.design.layerViews.slice();
         layerViews.push(layerView);
-        const design = lodash_1.default.extend({}, this.props.design, { layerViews });
-        return this.props.onDesignChange(design);
+        const design = { ...this.props.design, layerViews };
+        this.props.onDesignChange(design);
     };
     render() {
-        if (this.context.addLayerElementFactory) {
-            return this.context.addLayerElementFactory(this.props);
+        if (this.context) {
+            return this.context(this.props);
         }
         const newLayers = [
             {

package/lib/maps/BingLayer.js

@@ -67,34 +67,24 @@ module.exports = leaflet_1.default.TileLayer.extend({
     },
     loadMetadata: function () {
         var _this = this;
-        var cbid = "_bing_metadata_" + leaflet_1.default.Util.stamp(this);
-        window[cbid] = function (meta) {
+        var url = `https://dev.virtualearth.net/REST/v1/Imagery/Metadata/${this.options.type}?include=ImageryProviders&key=${this._key}&UriScheme=https`;
+        fetch(url)
+            .then(response => response.json())
+            .then(meta => {
             _this.meta = meta;
-            window[cbid] = undefined;
-            var e = document.getElementById(cbid);
-            e.parentNode.removeChild(e);
             if (meta.errorDetails) {
                 return;
             }
             _this.initMetadata();
-        };
-        var url = document.location.protocol +
-            "//dev.virtualearth.net/REST/v1/Imagery/Metadata/" +
-            this.options.type +
-            "?include=ImageryProviders&jsonp=" +
-            cbid +
-            "&key=" +
-            this._key +
-            "&UriScheme=" +
-            document.location.protocol.slice(0, -1);
-        var script = document.createElement("script");
-        script.type = "text/javascript";
-        script.src = url;
-        script.id = cbid;
-        document.getElementsByTagName("head")[0].appendChild(script);
+        })
+            .catch(error => console.error('Error loading Bing Maps metadata:', error));
     },
     initMetadata: function () {
         var r = this.meta.resourceSets[0].resources[0];
+        if (!r) {
+            console.error("Error loading Bing Maps metadata");
+            return;
+        }
         this.options.subdomains = r.imageUrlSubdomains;
         this._url = r.imageUrl;
         this._providers = [];

package/lib/maps/BufferLayer.js

@@ -36,6 +36,7 @@ const mapboxUtils_1 = require("./mapboxUtils");
 const LayerLegendComponent_1 = __importDefault(require("./LayerLegendComponent"));
 const PopupFilterJoinsUtils = __importStar(require("./PopupFilterJoinsUtils"));
 const HoverContent_1 = __importDefault(require("./HoverContent"));
+const layoutOptions_1 = require("../dashboards/layoutOptions");
 /*
 Layer which draws a buffer around geometries (i.e. a radius circle around points)
 
@@ -96,7 +97,9 @@ class BufferLayer extends Layer_1.default {
             sourceLayers: [{ id: "circles", jsonql: jsonql }],
             ctes: [],
             mapLayers: mapLayers,
-            mapLayersHandleClicks: [`${sourceId}:fill`]
+            mapLayersHandleClicks: [`${sourceId}:fill`],
+            minZoom: this.getMinZoom(design),
+            maxZoom: this.getMaxZoom(design)
         };
     }
     createJsonQL(design, schema, filters) {
@@ -608,7 +611,7 @@ marker-fill: ` +
                 const WidgetFactory = require("../widgets/WidgetFactory").default;
                 results.popup = new BlocksLayoutManager().renderLayout({
                     items: clickOptions.design.popup.items,
-                    style: "popup",
+                    layoutOptions: (0, layoutOptions_1.getDefaultLayoutOptions)("default"),
                     renderWidget: (options) => {
                         const widget = WidgetFactory.createWidget(options.type);
                         const filters = clickOptions.filters.concat(popupFilters);

package/lib/maps/ChoroplethLayer.js

@@ -36,6 +36,7 @@ const mapboxUtils_1 = require("./mapboxUtils");
 const LayerLegendComponent_1 = __importDefault(require("./LayerLegendComponent"));
 const PopupFilterJoinsUtils = __importStar(require("./PopupFilterJoinsUtils"));
 const HoverContent_1 = __importDefault(require("./HoverContent"));
+const layoutOptions_1 = require("../dashboards/layoutOptions");
 class ChoroplethLayer extends Layer_1.default {
     /** Gets the type of layer definition */
     getLayerDefinitionType() {
@@ -1213,7 +1214,7 @@ class ChoroplethLayer extends Layer_1.default {
                 const WidgetFactory = require("../widgets/WidgetFactory").default;
                 results.popup = new BlocksLayoutManager().renderLayout({
                     items: clickOptions.design.popup.items,
-                    style: "popup",
+                    layoutOptions: (0, layoutOptions_1.getDefaultLayoutOptions)("default"),
                     renderWidget: (options) => {
                         const widget = WidgetFactory.createWidget(options.type);
                         // Create filters for single row

package/lib/maps/ClusterLayer.js

@@ -90,7 +90,9 @@ class ClusterLayer extends Layer_1.default {
             sourceLayers: [{ id: "clusters", jsonql: jsonql }],
             ctes: [],
             mapLayers: mapLayers,
-            mapLayersHandleClicks: [`${sourceId}:circles-single`, `${sourceId}:circles-multiple`]
+            mapLayersHandleClicks: [`${sourceId}:circles-single`, `${sourceId}:circles-multiple`],
+            minZoom: this.getMinZoom(design),
+            maxZoom: this.getMaxZoom(design)
         };
     }
     createJsonQL(design, schema, filters) {

package/lib/maps/DirectMapDataSource.d.ts

@@ -4,7 +4,7 @@ import { MapDesign } from "./MapDesign";
 import { MapDataSource } from "./MapDataSource";
 import { VectorTileCTE, VectorTileSourceLayer } from "./Layer";
 import { MapLayerDataSource } from "./MapLayerDataSource";
-interface DirectMapDataSourceOptions {
+export interface DirectMapDataSourceOptions {
     /** schema to use */
     schema: Schema;
     /** general data source */
@@ -15,6 +15,8 @@ interface DirectMapDataSourceOptions {
     apiUrl: string;
     /** client id to use for talking to mWater server */
     client?: string;
+    /** Origin to which server time is recorded e.g. maps:232434... */
+    origin?: string;
 }
 export default class DirectMapDataSource implements MapDataSource {
     options: DirectMapDataSourceOptions;
@@ -49,6 +51,8 @@ export interface VectorTileDirectTokenRequest {
     minZoom?: number;
     /** Enforced maximum zoom level */
     maxZoom?: number;
+    /** Origin to which server time is recorded */
+    origin?: string;
 }
 /**
  * React hook to get a direct URL for a vector tile source.
@@ -65,4 +69,3 @@ export declare function useDirectVectorTileUrl(options: {
     /** Request to make for tiles */
     directTokenRequest: VectorTileDirectTokenRequest;
 }): string | null;
-export {};

package/lib/maps/DirectMapDataSource.js

@@ -152,7 +152,8 @@ class DirectLayerDataSource {
             maxZoom: vectorTile.maxZoom,
             createdAfter: createdAfter,
             // 12 hours
-            expiresAfter: new Date(Date.now() + 1000 * 3600 * 12).toISOString()
+            expiresAfter: new Date(Date.now() + 1000 * 3600 * 12).toISOString(),
+            origin: this.options.origin
         };
         const { url, expires } = await getVectorTileFromDirectRequest({
             apiUrl: this.options.apiUrl,

package/lib/maps/EditPopupComponent.js

@@ -11,6 +11,7 @@ const BlocksLayoutManager_1 = __importDefault(require("../layouts/blocks/BlocksL
 const WidgetFactory_1 = __importDefault(require("../widgets/WidgetFactory"));
 const DirectWidgetDataSource_1 = __importDefault(require("../widgets/DirectWidgetDataSource"));
 const PopupFilterJoinsEditComponent_1 = __importDefault(require("./PopupFilterJoinsEditComponent"));
+const layoutOptions_1 = require("../dashboards/layoutOptions");
 // Modal for editing design of popup
 class EditPopupComponent extends react_1.default.Component {
     constructor(props) {
@@ -44,7 +45,7 @@ class EditPopupComponent extends react_1.default.Component {
             : undefined, this.state.editing
             ? R(ModalWindowComponent_1.default, { isOpen: true, onRequestClose: () => this.setState({ editing: false }) }, new BlocksLayoutManager_1.default().renderLayout({
                 items: this.props.design.popup?.items,
-                style: "popup",
+                layoutOptions: (0, layoutOptions_1.getDefaultLayoutOptions)("default"),
                 onItemsChange: this.handleItemsChange,
                 disableMaps: true,
                 renderWidget: (options) => {

package/lib/maps/GridLayer.js

@@ -51,7 +51,9 @@ class GridLayer extends Layer_1.default {
             sourceLayers: [{ id: "grid", jsonql: jsonql }],
             ctes: [],
             mapLayers: mapLayers,
-            mapLayersHandleClicks: [`${sourceId}:fill`]
+            mapLayersHandleClicks: [`${sourceId}:fill`],
+            minZoom: this.getMinZoom(design),
+            maxZoom: this.getMaxZoom(design)
         };
     }
     createJsonQL(design, schema, filters) {
@@ -544,9 +546,9 @@ class GridLayer extends Layer_1.default {
     // }
     // Get min and max zoom levels
     getMinZoom(design) {
-        // Determine if too zoomed out to safely display (zoom 6 at 20000 is limit)
+        // Determine if too zoomed out to safely display (200x200, so size = 4e7/(2^zoom) < 200)
         if (design.sizeUnits === "meters") {
-            const minSafeZoom = Math.log2(1280000.0 / (design.size || 20000));
+            const minSafeZoom = Math.log2(200000.0 / (design.size || 20000));
             if (design.minZoom) {
                 return Math.max(design.minZoom, minSafeZoom);
             }

package/lib/maps/GridLayerDesigner.js

@@ -79,7 +79,6 @@ class GridLayerDesigner extends react_1.default.Component {
             this.update((d) => {
                 d.sizeUnits = sizeUnits;
                 d.size = 20000;
-                d.minZoom = 6;
             });
         }
     };

package/lib/maps/LayerSwitcherComponent.js

@@ -72,7 +72,7 @@ function LayerSwitcherComponent(props) {
         }) },
         react_1.default.createElement("div", { style: iconStyle, onClick: toggleDropdown },
             react_1.default.createElement("i", { className: "fas fa-layer-group fa-fw" })),
-        dropdownOpen ? (react_1.default.createElement("div", { style: { backgroundColor: "white", padding: 5 } }, props.design.layerViews.map(renderLayerView))) : null));
+        dropdownOpen ? (react_1.default.createElement("div", { style: { backgroundColor: "white", padding: 5, textAlign: "left" } }, props.design.layerViews.map(renderLayerView))) : null));
 }
 exports.LayerSwitcherComponent = LayerSwitcherComponent;
 /** Hook for click outside catching */

package/lib/maps/MapComponent.d.ts

@@ -1,5 +1,5 @@
-import PropTypes from "prop-types";
 import React, { ReactNode } from "react";
+import AutoSizeComponent from "@mwater/react-library/lib/AutoSizeComponent";
 import UndoStack from "../UndoStack";
 import { DataSource, Schema } from "@mwater/expressions";
 import { MapDataSource } from "./MapDataSource";
@@ -39,9 +39,7 @@ interface MapComponentState {
 }
 /** Map with designer on right */
 export default class MapComponent extends React.Component<MapComponentProps, MapComponentState> {
-    static contextTypes: {
-        locale: PropTypes.Requireable<string>;
-    };
+    static contextType: React.Context<string>;
     constructor(props: MapComponentProps);
     componentDidUpdate(prevProps: MapComponentProps): void;
     handleUndo: () => void;
@@ -60,13 +58,7 @@ export default class MapComponent extends React.Component<MapComponentProps, Map
     getDesign(): MapDesign;
     handleToggleDesignPanel: () => void;
     getQuickfilterValues: () => any[];
-    renderView(): React.CElement<{
-        injectWidth: boolean;
-        injectHeight: boolean;
-    }, React.Component<{
-        injectWidth: boolean;
-        injectHeight: boolean;
-    }, any, any>>;
+    renderView(): React.CElement<import("@mwater/react-library/lib/AutoSizeComponent").AutoSizeComponentProps, AutoSizeComponent>;
     getCompiledFilters(): {
         table: string;
         jsonql: import("@mwater/jsonql").JsonQLExpr;

package/lib/maps/MapComponent.js

@@ -3,7 +3,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const prop_types_1 = __importDefault(require("prop-types"));
 const lodash_1 = __importDefault(require("lodash"));
 const react_1 = __importDefault(require("react"));
 const R = react_1.default.createElement;
@@ -16,9 +15,10 @@ const PopoverHelpComponent_1 = __importDefault(require("@mwater/react-library/li
 const QuickfilterCompiler_1 = __importDefault(require("../quickfilter/QuickfilterCompiler"));
 const QuickfiltersComponent_1 = __importDefault(require("../quickfilter/QuickfiltersComponent"));
 const MapUtils_1 = require("./MapUtils");
+const contexts_1 = require("@mwater/expressions-ui/lib/contexts");
 /** Map with designer on right */
 class MapComponent extends react_1.default.Component {
-    static contextTypes = { locale: prop_types_1.default.string };
+    static contextType = contexts_1.LocaleContext;
     constructor(props) {
         super(props);
         this.state = {
@@ -125,7 +125,7 @@ class MapComponent extends react_1.default.Component {
                 zoomLocked: this.state.zoomLocked,
                 onRowClick: this.props.onRowClick,
                 extraFilters: filters,
-                locale: this.context.locale,
+                locale: this.context,
                 width: size.width,
                 height: size.height
             });

package/lib/maps/MapDesign.d.ts

@@ -1,5 +1,6 @@
-import { Expr, LiteralType } from "@mwater/expressions";
+import { Expr } from "@mwater/expressions";
 import { Quickfilter } from "../quickfilter/Quickfilter";
+import { GlobalFilter } from "../GlobalFilter";
 /** Maps are stored as a base layer, a series of layers and filters. */
 export interface MapDesign {
     /** "bing_road"/"bing_aerial"/"cartodb_positron"/"cartodb_dark_matter"/"blank" */
@@ -63,15 +64,3 @@ export interface MapLayerView {
     /** true to hide legend */
     hideLegend?: boolean;
 }
-/** Global filters apply to multiple tables at once if a certain column is present. User-interface to set them is application-specific
-and the default (non-mWater) dashboard applies them but does not allow editing. */
-export interface GlobalFilter {
-    /** id of column to filter */
-    columnId: string;
-    /** type of column to filter (to ensure that consistent) */
-    columnType: LiteralType;
-    /** op of expression for filtering */
-    op: string;
-    /** array of expressions to use for filtering. field expression for column will be injected as expression 0 in the resulting filter expression */
-    exprs: Expr[];
-}

package/lib/maps/MapFiltersDesignerComponent.d.ts

@@ -1,4 +1,3 @@
-import PropTypes from "prop-types";
 import React from "react";
 import { DataSource, Schema } from "@mwater/expressions";
 export interface MapFiltersDesignerComponentProps {
@@ -12,9 +11,6 @@ export interface MapFiltersDesignerComponentProps {
     onDesignChange: any;
 }
 export default class MapFiltersDesignerComponent extends React.Component<MapFiltersDesignerComponentProps> {
-    static contextTypes: {
-        globalFiltersElementFactory: PropTypes.Requireable<(...args: any[]) => any>;
-    };
     handleFiltersChange: (filters: any) => any;
     handleGlobalFiltersChange: (globalFilters: any) => any;
     render(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement> | null;

package/lib/maps/MapFiltersDesignerComponent.js

@@ -27,15 +27,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const lodash_1 = __importDefault(require("lodash"));
-const prop_types_1 = __importDefault(require("prop-types"));
 const react_1 = __importDefault(require("react"));
 const R = react_1.default.createElement;
 const PopoverHelpComponent_1 = __importDefault(require("@mwater/react-library/lib/PopoverHelpComponent"));
 const FiltersDesignerComponent_1 = __importDefault(require("../FiltersDesignerComponent"));
 const MapUtils = __importStar(require("./MapUtils"));
+const MWaterContextComponent_1 = require("../MWaterContextComponent");
 // Designer for filters for a map
 class MapFiltersDesignerComponent extends react_1.default.Component {
-    static contextTypes = { globalFiltersElementFactory: prop_types_1.default.func };
     handleFiltersChange = (filters) => {
         const design = lodash_1.default.extend({}, this.props.design, { filters });
         return this.props.onDesignChange(design);
@@ -56,15 +55,15 @@ class MapFiltersDesignerComponent extends react_1.default.Component {
             filters: this.props.design.filters,
             onFiltersChange: this.handleFiltersChange,
             filterableTables
-        }))), this.context.globalFiltersElementFactory
-            ? R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, "Global Filters "), R("div", { style: { margin: 5 } }, this.context.globalFiltersElementFactory({
+        }))), react_1.default.createElement(MWaterContextComponent_1.GlobalFiltersElementFactoryContext.Consumer, null, globalFiltersElementFactory => globalFiltersElementFactory
+            ? R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, "Global Filters "), R("div", { style: { margin: 5 } }, globalFiltersElementFactory({
                 schema: this.props.schema,
                 dataSource: this.props.dataSource,
                 filterableTables,
                 globalFilters: this.props.design.globalFilters || [],
                 onChange: this.handleGlobalFiltersChange
             })))
-            : undefined);
+            : undefined));
     }
 }
 exports.default = MapFiltersDesignerComponent;