rc-leaflet/es/components/MassPoints/index.js

React Map Components of Leaflet

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 __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 { Children, isValidElement, cloneElement } from 'react';
import PropTypes from 'prop-types';
import { Point, Pixel } from '../../util/PropTypes';
import Layer from '../Layer';
import Popup from '../Popup';
import Tooltip from '../Tooltip';
import MassLayer, { defaultOptions } from './MassLayer';
var Icon = {
    iconUrl: PropTypes.string,
    iconSize: Pixel,
    iconAnchor: Pixel,
    popupAnchor: Pixel,
    tooltipAnchor: Pixel
};
var MassPoints = /** @class */ (function (_super) {
    __extends(MassPoints, _super);
    function MassPoints(props, context) {
        var _this = _super.call(this, props, context) || this;
        _this.onPopupClose = function () { return _this.setState({ clickPoint: undefined }); };
        _this.onClick = function () { return _this.setState(function (_a) {
            var clickPoint = _a.clickPoint, hoverPoint = _a.hoverPoint;
            return ({ clickPoint: clickPoint === hoverPoint ? undefined : hoverPoint });
        }); };
        _this.onMouseOut = function () { return _this.setState({ hoverPoint: undefined }); };
        _this.onMouseOver = function (e) { return _this.setState({ hoverPoint: { index: e.index, point: e.point } }); };
        _this.state = { clickPoint: undefined, hoverPoint: undefined };
        _this.instance.on('click', _this.onClick);
        _this.instance.on('mouseover', _this.onMouseOver);
        _this.instance.on('mouseout', _this.onMouseOut);
        return _this;
    }
    MassPoints.prototype.componentDidUpdate = function (prevProps) {
        var prevPoints = prevProps.points, prevIconUrl = prevProps.iconUrl, prevIconSize = prevProps.iconSize, prevIconAnchor = prevProps.iconAnchor, prevPopupAnchor = prevProps.popupAnchor, prevTooltipAnchor = prevProps.tooltipAnchor, prevThrottleThreshold = prevProps.throttleThreshold, prevThrottleDuration = prevProps.throttleDuration;
        var _a = this.props, points = _a.points, iconUrl = _a.iconUrl, iconSize = _a.iconSize, iconAnchor = _a.iconAnchor, popupAnchor = _a.popupAnchor, tooltipAnchor = _a.tooltipAnchor, throttleThreshold = _a.throttleThreshold, throttleDuration = _a.throttleDuration;
        if (points !== prevPoints) {
            this.setState({ clickPoint: undefined, hoverPoint: undefined });
        }
        if (popupAnchor !== prevPopupAnchor) {
            this.instance.setPopupAnchor(popupAnchor);
        }
        if (tooltipAnchor !== prevTooltipAnchor) {
            this.instance.setTooltipAnchor(tooltipAnchor);
        }
        if (points !== prevPoints || iconUrl !== prevIconUrl || iconSize !== prevIconSize || iconAnchor !== prevIconAnchor || throttleThreshold !== prevThrottleThreshold || throttleDuration !== prevThrottleDuration) {
            this.instance.setOptions({ points: points, iconUrl: iconUrl, iconSize: iconSize, iconAnchor: iconAnchor, throttleThreshold: throttleThreshold, throttleDuration: throttleDuration });
        }
        _super.prototype.componentDidUpdate.call(this, prevProps);
    };
    MassPoints.prototype.createInstance = function (props) {
        var points = props.points, iconUrl = props.iconUrl, iconSize = props.iconSize, iconAnchor = props.iconAnchor, popupAnchor = props.popupAnchor, tooltipAnchor = props.tooltipAnchor, throttleThreshold = props.throttleThreshold, throttleDuration = props.throttleDuration;
        return new MassLayer({ points: points, iconUrl: iconUrl, iconSize: iconSize, iconAnchor: iconAnchor, popupAnchor: popupAnchor, tooltipAnchor: tooltipAnchor, throttleThreshold: throttleThreshold, throttleDuration: throttleDuration });
    };
    MassPoints.prototype.render = function () {
        var _this = this;
        var children = this.props.children;
        var _a = this.state, clickPoint = _a.clickPoint, hoverPoint = _a.hoverPoint;
        return children ? (Children.map(children, function (child) {
            if (isValidElement(child)) {
                var onClose = void 0;
                var target = void 0;
                var type = child.type;
                if (clickPoint && type === Popup) {
                    onClose = _this.onPopupClose;
                    target = clickPoint;
                }
                else if (hoverPoint && type === Tooltip) {
                    target = hoverPoint;
                }
                return cloneElement(child, { layer: _this.instance, target: target, onClose: onClose });
            }
            return child;
        })) : null;
    };
    MassPoints.propTypes = __assign({}, Layer.propTypes, { points: PropTypes.arrayOf(PropTypes.shape(__assign({ position: Point }, Icon))).isRequired }, Icon);
    MassPoints.defaultProps = {
        throttleThreshold: defaultOptions.throttleThreshold,
        throttleDuration: defaultOptions.throttleDuration
    };
    return MassPoints;
}(Layer));
export default MassPoints;