@progress/kendo-react-map 5.3.0-dev.202205051853

package/dist/es/Map.d.ts

@@ -0,0 +1,81 @@
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+import { InstanceObserver, Map as KendoMap } from '@progress/kendo-charts';
+import './defaults';
+import { MapProps } from './MapProps';
+import { MapContextType } from './MapContext';
+/**
+ * Represents the [KendoReact Map component]({% slug overview_map %}).
+ */
+export declare class Map extends React.Component<MapProps, {}> {
+    /**
+     * @hidden
+     */
+    static propTypes: {
+        dir: PropTypes.Requireable<string>;
+    };
+    /**
+     * @hidden
+     */
+    static defaultProps: {};
+    /**
+     * @hidden
+     */
+    mapInstance: KendoMap | null;
+    /**
+     * @hidden
+     */
+    readonly element: HTMLDivElement;
+    protected _element: HTMLDivElement | null;
+    protected optionsStore: any;
+    protected optionsUnsubscriber: Function;
+    protected observersStore: any;
+    protected mapObserver: InstanceObserver;
+    protected childrenObserver: InstanceObserver;
+    protected contextValue: MapContextType;
+    constructor(props: MapProps);
+    /**
+     * @hidden
+     */
+    componentDidMount(): void;
+    /**
+     * @hidden
+     */
+    componentWillUnmount(): void;
+    /**
+     * @hidden
+     */
+    componentDidUpdate(prevProps: MapProps): void;
+    /**
+     * @hidden
+     */
+    render(): any;
+    /**
+     * @hidden
+     */
+    getMapOptions(): any;
+    /**
+     * @hidden
+     */
+    refresh(): void;
+    /**
+     * @hidden
+     */
+    instantiateCoreMap(): void;
+    /**
+     * @hidden
+     */
+    trigger(name: string, e: any): boolean;
+    /**
+     * @hidden
+     */
+    requiresHandlers(names: string[]): boolean;
+    /**
+     * @hidden
+     */
+    onRender: (e: any) => void;
+    /**
+     * @hidden
+     */
+    onWindowResize: () => void;
+}

package/dist/es/Map.js

@@ -0,0 +1,235 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
+            t[p[i]] = s[p[i]];
+    return t;
+};
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+import { InstanceObserver, Map as KendoMap } from '@progress/kendo-charts';
+import { create as createEvent } from './events/map-event-builder';
+import createStore from './store/store';
+import { optionsReducer, observersReducer } from './store/reducer';
+import './defaults';
+import { MapContext } from './MapContext';
+import { validatePackage } from '@progress/kendo-react-common';
+import { packageMetadata } from './package-metadata';
+/**
+ * Represents the [KendoReact Map component]({% slug overview_map %}).
+ */
+var Map = /** @class */ (function (_super) {
+    __extends(Map, _super);
+    function Map(props) {
+        var _this = _super.call(this, props) || this;
+        /**
+         * @hidden
+         */
+        _this.mapInstance = null;
+        _this._element = null;
+        _this.optionsStore = {};
+        _this.optionsUnsubscriber = Function.prototype;
+        _this.observersStore = {};
+        /* Map handlers */
+        /**
+         * @hidden
+         */
+        _this.onRender = function (e) {
+            if (_this.mapInstance !== null) {
+                _this.trigger('render', e);
+            }
+        };
+        /* Dom event handlers */
+        /**
+         * @hidden
+         */
+        _this.onWindowResize = function () {
+            if (_this.mapInstance !== null) {
+                // this.mapInstance.resize();
+            }
+        };
+        validatePackage(packageMetadata);
+        _this.optionsStore = createStore(optionsReducer);
+        _this.observersStore = createStore(observersReducer);
+        _this.childrenObserver = new InstanceObserver(_this, { onMouseLeave: 'onChildMouseLeave' });
+        _this.contextValue = {
+            optionsStore: _this.optionsStore,
+            observersStore: _this.observersStore,
+            childrenObserver: _this.childrenObserver
+        };
+        _this.mapObserver = new InstanceObserver(_this, {
+        // render: 'onRender',
+        });
+        return _this;
+    }
+    Object.defineProperty(Map.prototype, "element", {
+        /**
+         * @hidden
+         */
+        get: function () {
+            return this._element;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    /**
+     * @hidden
+     */
+    Map.prototype.componentDidMount = function () {
+        this.instantiateCoreMap();
+        this.optionsUnsubscriber = this.optionsStore.subscribe(this.refresh.bind(this));
+        window.addEventListener('resize', this.onWindowResize);
+    };
+    /**
+     * @hidden
+     */
+    Map.prototype.componentWillUnmount = function () {
+        this.optionsUnsubscriber();
+        if (this.mapInstance !== null) {
+            this.mapInstance.destroy();
+            this.mapInstance = null;
+        }
+        window.removeEventListener('resize', this.onWindowResize);
+    };
+    /**
+     * @hidden
+     */
+    Map.prototype.componentDidUpdate = function (prevProps) {
+        var _a = this.props, dir = _a.dir, children = _a.children, spreadProps = __rest(_a, ["dir", "children"]);
+        if (this.mapInstance !== null) {
+            var shouldUpdate = Object.entries(prevProps)
+                .filter(function (keyValue) { return (keyValue[0] !== 'dir' && keyValue[0] !== 'children'); })
+                .some(function (keyValue) {
+                var key = keyValue[0], value = keyValue[1];
+                return !(spreadProps.hasOwnProperty(key) && spreadProps[key] === value);
+            });
+            if (shouldUpdate) {
+                this.refresh();
+            }
+            if (prevProps.dir !== dir) {
+                // TODO: Set k-rtl instead
+                // this.mapInstance.setDirection(this.getDirection(dir));
+            }
+        }
+    };
+    /**
+     * @hidden
+     */
+    Map.prototype.render = function () {
+        var _this = this;
+        var _a = this.props, _b = _a.style, style = _b === void 0 ? {} : _b, className = _a.className, children = _a.children;
+        var mapStyles = Object.assign({}, style, { position: 'relative' });
+        var content = React.createElement('div', {
+            className: className,
+            style: mapStyles,
+            key: 'mapElement'
+        }, (React.createElement("div", { ref: function (el) { return _this._element = el; }, className: "k-map" }, children)));
+        return (React.createElement(MapContext.Provider, { value: this.contextValue }, content));
+    };
+    /**
+     * @hidden
+     */
+    Map.prototype.getMapOptions = function () {
+        var _a = this.props, center = _a.center, controls = _a.controls, minZoom = _a.minZoom, maxZoom = _a.maxZoom, minSize = _a.minSize, pannable = _a.pannable, wraparound = _a.wraparound, zoom = _a.zoom, zoomable = _a.zoomable;
+        var mapOptions = {
+            center: center,
+            controls: controls,
+            minZoom: minZoom,
+            maxZoom: maxZoom,
+            minSize: minSize,
+            pannable: pannable,
+            wraparound: wraparound,
+            zoom: zoom,
+            zoomable: zoomable
+        };
+        mapOptions = Object.assign(mapOptions, this.optionsStore.getState());
+        return mapOptions;
+    };
+    /**
+     * @hidden
+     */
+    Map.prototype.refresh = function () {
+        if (this.mapInstance !== null) {
+            var mapOptions = this.getMapOptions();
+            this.mapInstance.setOptions(mapOptions);
+        }
+    };
+    /**
+     * @hidden
+     */
+    Map.prototype.instantiateCoreMap = function () {
+        // const { dir } = this.props;
+        var mapOptions = this.getMapOptions();
+        this.mapInstance = new KendoMap(this.element, mapOptions, {}, {
+            // rtl: this.getDirection(dir),
+            observer: this.mapObserver,
+            sender: this
+        });
+    };
+    /* Triggers public dom event handlers */
+    /**
+     * @hidden
+     */
+    Map.prototype.trigger = function (name, e) {
+        var alias = name === 'click' ? 'mapClick' : name;
+        var target = this;
+        var eventObject = createEvent(alias, e, target);
+        var handler = 'on' + alias.charAt(0).toUpperCase() + alias.slice(1);
+        var observers = this.observersStore.getState();
+        var isDefaultPrevented = false;
+        for (var idx = 0; idx < observers.length; idx++) {
+            if (observers[idx].trigger(alias, e)) {
+                isDefaultPrevented = true;
+            }
+        }
+        /* We have not prevented the event internally, now pass it to the user */
+        if (isDefaultPrevented === false
+            && eventObject
+            && this.props.hasOwnProperty(handler)) {
+            this.props[handler].call(undefined, eventObject);
+            return eventObject.isDefaultPrevented && eventObject.isDefaultPrevented();
+        }
+        return isDefaultPrevented;
+    };
+    /* Used by (event)InstanceObserver to check the wrapper for supported events */
+    /**
+     * @hidden
+     */
+    Map.prototype.requiresHandlers = function (names) {
+        for (var idx = 0; idx < names.length; idx++) {
+            var name_1 = names[idx];
+            var handler = 'on' + name_1.charAt(0).toUpperCase() + name_1.slice(1);
+            if (this.props.hasOwnProperty(handler)) {
+                return true;
+            }
+        }
+        return false;
+    };
+    /**
+     * @hidden
+     */
+    Map.propTypes = {
+        dir: PropTypes.string
+    };
+    /**
+     * @hidden
+     */
+    Map.defaultProps = {};
+    return Map;
+}(React.Component));
+export { Map };

package/dist/es/MapContext.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { Store } from './store/store';
+import { InstanceObserver } from '@progress/kendo-charts';
+/**
+ * @hidden
+ */
+export interface MapContextType {
+    optionsStore: Store;
+    observersStore: Store;
+    childrenObserver: InstanceObserver;
+}
+/**
+ * @hidden
+ */
+export declare const MapContext: React.Context<MapContextType>;

package/dist/es/MapContext.js

@@ -0,0 +1,6 @@
+import * as React from 'react';
+/**
+ * @hidden
+ */
+export var MapContext = React.createContext(null);
+MapContext.displayName = 'MapContext';

package/dist/es/MapProps.d.ts

@@ -0,0 +1,96 @@
+import * as React from 'react';
+import { MapOptions } from '@progress/kendo-charts';
+import { BeforeResetEvent, MapClickEvent, MarkerActivateEvent, MarkerClickEvent, MarkerCreatedEvent, PanEndEvent, PanEvent, ResetEvent, ShapeClickEvent, ShapeCreatedEvent, ShapeFeatureCreatedEvent, ShapeMouseEnterEvent, ShapeMouseLeaveEvent, ZoomEndEvent, ZoomStartEvent } from './common/events';
+/**
+ * Represents the props of the KendoReact Map component.
+ */
+export interface MapProps extends MapOptions {
+    /**
+     * Represents the `dir` HTML attribute.
+     */
+    dir?: string;
+    /**
+     * The styles that are applied to the component.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Sets additional CSS classes to the component.
+     */
+    className?: string;
+    /**
+     * @hidden
+     */
+    children?: any;
+    /**
+     * Fired immediately before the map is reset. This event is typically used for cleanup by layer implementers.
+     */
+    onBeforeReset?: (event: BeforeResetEvent) => void;
+    /**
+     * Fired when the user clicks on the map.
+     */
+    onMapClick?: (event: MapClickEvent) => void;
+    /**
+     * Fired when a marker has been displayed and has a DOM element assigned.
+     */
+    onMarkerActivate?: (event: MarkerActivateEvent) => void;
+    /**
+     * Fired when a marker has been clicked or tapped.
+     */
+    onMarkerClick?: (event: MarkerClickEvent) => void;
+    /**
+     * Fired when a marker has been created and is about to be displayed.
+     *
+     * Cancelling the event will prevent the marker from being shown.
+     */
+    onMarkerCreated?: (event: MarkerCreatedEvent) => void;
+    /**
+     * Fires after the map viewport has been moved.
+     */
+    onPanEnd?: (event: PanEndEvent) => void;
+    /**
+     * Fired while the map viewport is being moved.
+     */
+    onPan?: (event: PanEvent) => void;
+    /**
+     * Fired when the map is reset.
+     *
+     * This typically occurs on initial load and after a zoom/center change.
+     */
+    onReset?: (event: ResetEvent) => void;
+    /**
+     * Fired when a shape is clicked or tapped.
+     */
+    onShapeClick?: (event: ShapeClickEvent) => void;
+    /**
+     * Fired when a shape is created, but is not rendered yet.
+     */
+    onShapeCreated?: (event: ShapeCreatedEvent) => void;
+    /**
+     * Fired when a [GeoJSON Feature](https://geojson.org/geojson-spec.html#feature-objects) is created on a shape layer.
+     */
+    onShapeFeatureCreated?: (event: ShapeFeatureCreatedEvent) => void;
+    /**
+     * Fired when the mouse enters a shape.
+     *
+     * > This event will fire reliably only for shapes that have set fill color.
+     * > The opacity can still be set to 0 so the shapes appear to have no fill.
+     */
+    onShapeMouseEnter?: (event: ShapeMouseEnterEvent) => void;
+    /**
+     * Fired when the mouse leaves a shape.
+     *
+     * > This event will fire reliably only for shapes that have set fill color.
+     * > The opacity can still be set to 0 so the shapes appear to have no fill.
+     */
+    onShapeMouseLeave?: (event: ShapeMouseLeaveEvent) => void;
+    /**
+     * Fired when the map zoom level is about to change.
+     *
+     * Cancelling the event will prevent the user action.
+     */
+    onZoomStart?: (event: ZoomStartEvent) => void;
+    /**
+     * Fired when the map zoom level has changed.
+     */
+    onZoomEnd?: (event: ZoomEndEvent) => void;
+}

package/dist/es/common/events.d.ts

@@ -0,0 +1,15 @@
+export { BeforeResetEvent } from '../events/before-reset-event';
+export { MapClickEvent } from '../events/map-click-event';
+export { MarkerActivateEvent } from '../events/marker-activate-event';
+export { MarkerClickEvent } from '../events/marker-click-event';
+export { MarkerCreatedEvent } from '../events/marker-created-event';
+export { PanEndEvent } from '../events/pan-end-event';
+export { PanEvent } from '../events/pan-event';
+export { ResetEvent } from '../events/reset-event';
+export { ShapeClickEvent } from '../events/shape-click-event';
+export { ShapeCreatedEvent } from '../events/shape-created-event';
+export { ShapeFeatureCreatedEvent } from '../events/shape-feature-created-event';
+export { ShapeMouseEnterEvent } from '../events/shape-mouse-enter-event';
+export { ShapeMouseLeaveEvent } from '../events/shape-mouse-leave-event';
+export { ZoomEndEvent } from '../events/zoom-end-event';
+export { ZoomStartEvent } from '../events/zoom-start-event';

package/dist/es/common/events.js

@@ -0,0 +1,16 @@
+// Re-export event types
+export { BeforeResetEvent } from '../events/before-reset-event';
+export { MapClickEvent } from '../events/map-click-event';
+export { MarkerActivateEvent } from '../events/marker-activate-event';
+export { MarkerClickEvent } from '../events/marker-click-event';
+export { MarkerCreatedEvent } from '../events/marker-created-event';
+export { PanEndEvent } from '../events/pan-end-event';
+export { PanEvent } from '../events/pan-event';
+export { ResetEvent } from '../events/reset-event';
+export { ShapeClickEvent } from '../events/shape-click-event';
+export { ShapeCreatedEvent } from '../events/shape-created-event';
+export { ShapeFeatureCreatedEvent } from '../events/shape-feature-created-event';
+export { ShapeMouseEnterEvent } from '../events/shape-mouse-enter-event';
+export { ShapeMouseLeaveEvent } from '../events/shape-mouse-leave-event';
+export { ZoomEndEvent } from '../events/zoom-end-event';
+export { ZoomStartEvent } from '../events/zoom-start-event';

package/dist/es/common/map-types.d.ts

@@ -0,0 +1 @@
+export { MapLayer, MapLayerOptions, MapMarker, BubbleLayerSymbolArgs, BubbleLayerSymbol, MapControls, MapControlsPosition, TileUrlTemplateArgs, Location, Extent } from '@progress/kendo-charts';

package/dist/es/common/map-types.js

@@ -0,0 +1,2 @@
+// Re-export Map types
+export { Location, Extent } from '@progress/kendo-charts';

package/dist/es/components/BubbleLayer.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { BubbleLayerOptions } from '@progress/kendo-charts';
+/**
+ * Represents the props of the KendoReact MapBubbleLayer component.
+ */
+export interface MapBubbleLayerProps extends BubbleLayerOptions {
+}
+declare const MapBubbleLayer: React.SFC<MapBubbleLayerProps>;
+export default MapBubbleLayer;

package/dist/es/components/BubbleLayer.js

@@ -0,0 +1,18 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import * as React from 'react';
+import ConfigurationComponent from './base/ConfigurationComponent';
+var MapBubbleLayer = function (props) {
+    return (React.createElement(ConfigurationComponent, __assign({ type: "bubble" }, props)));
+};
+MapBubbleLayer.displayName = 'MapBubbleLayer';
+export default MapBubbleLayer;

package/dist/es/components/Layers.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+/**
+ * Represents the props of the KendoReact MapLayers component.
+ */
+export interface MapLayersProps {
+    children?: React.ReactNode;
+}
+declare const MapLayers: React.SFC<MapLayersProps>;
+export default MapLayers;

package/dist/es/components/Layers.js

@@ -0,0 +1,21 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+import CollectionConfigurationComponent from './base/CollectionConfigurationComponent';
+var MapLayers = function (props) {
+    return (React.createElement(CollectionConfigurationComponent, __assign({}, props, { _mapKey: "layers" })));
+};
+MapLayers.propTypes = {
+    children: PropTypes.array
+};
+export default MapLayers;

package/dist/es/components/MarkerLayer.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { MarkerLayerOptions } from '@progress/kendo-charts';
+/**
+ * Represents the props of the KendoReact MapMarkerLayer component.
+ */
+export interface MapMarkerLayerProps extends MarkerLayerOptions {
+}
+declare const MapMarkerLayer: React.SFC<MapMarkerLayerProps>;
+export default MapMarkerLayer;

package/dist/es/components/MarkerLayer.js

@@ -0,0 +1,18 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import * as React from 'react';
+import ConfigurationComponent from './base/ConfigurationComponent';
+var MapMarkerLayer = function (props) {
+    return (React.createElement(ConfigurationComponent, __assign({ type: "marker" }, props)));
+};
+MapMarkerLayer.displayName = 'MapMarkerLayer';
+export default MapMarkerLayer;

package/dist/es/components/ShapeLayer.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { ShapeLayerOptions } from '@progress/kendo-charts';
+/**
+ * Represents the props of the KendoReact MapShapeLayer component.
+ */
+export interface MapShapeLayerProps extends ShapeLayerOptions {
+}
+declare const MapShapeLayer: React.SFC<MapShapeLayerProps>;
+export default MapShapeLayer;

package/dist/es/components/ShapeLayer.js

@@ -0,0 +1,18 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import * as React from 'react';
+import ConfigurationComponent from './base/ConfigurationComponent';
+var MapShapeLayer = function (props) {
+    return (React.createElement(ConfigurationComponent, __assign({ type: "shape" }, props)));
+};
+MapShapeLayer.displayName = 'MapShapeLayer';
+export default MapShapeLayer;

package/dist/es/components/TileLayer.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { TileLayerOptions } from '@progress/kendo-charts';
+/**
+ * Represents the props of the KendoReact MapTileLayer component.
+ */
+export interface MapTileLayerProps extends TileLayerOptions {
+}
+declare const MapTileLayer: React.SFC<MapTileLayerProps>;
+export default MapTileLayer;

package/dist/es/components/TileLayer.js

@@ -0,0 +1,18 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import * as React from 'react';
+import ConfigurationComponent from './base/ConfigurationComponent';
+var MapTileLayer = function (props) {
+    return (React.createElement(ConfigurationComponent, __assign({ type: "tile" }, props)));
+};
+MapTileLayer.displayName = 'MapTileLayer';
+export default MapTileLayer;

package/dist/es/components/base/CollectionConfigurationComponent.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+/**
+ * @hidden
+ */
+export interface CollectionConfigurationProps {
+    _mapKey: string;
+    _parentStore?: any;
+    [x: string]: any;
+}
+/**
+ * @hidden
+ */
+export default class CollectionConfigurationComponent extends React.Component<CollectionConfigurationProps> {
+    static contextType: React.Context<import("../../MapContext").MapContextType>;
+    optionsStore: any;
+    constructor(props: any, context: any);
+    renderChildren(child: any, index: number): React.DetailedReactHTMLElement<any, HTMLElement>;
+    render(): any;
+}