@reltio/components 1.4.1876 → 1.4.1878

package/cjs/ReltioMap/ReltioMap.js

@@ -0,0 +1,147 @@
+"use strict";
+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);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReltioMap = void 0;
+var react_1 = __importStar(require("react"));
+var ramda_1 = require("ramda");
+var api_1 = require("@react-google-maps/api");
+var EntityMarker_1 = require("./components/EntityMarker");
+var MapControlContainer_1 = require("./components/MapControlContainer");
+var TopRightMapControls_1 = require("./components/TopRightMapControls");
+var TopCenterMapControls_1 = require("./components/TopCenterMapControls");
+var helpers_1 = require("./helpers");
+var constants_1 = require("../constants");
+var useFitMapBounds_1 = require("./useFitMapBounds");
+var styles_1 = require("./styles");
+var ON_MAP_MOVE_DEBOUNCE_INTERVAL = 1000;
+var libraries = ['drawing'];
+var ReltioMap = function (_a) {
+    var _b = _a.markers, markers = _b === void 0 ? [] : _b, mapKey = _a.mapKey, defaultZoom = _a.defaultZoom, defaultCenter = _a.defaultCenter, loadingElement = _a.loadingElement, isSearchOnMapMove = _a.isSearchOnMapMove, isSearchEnabled = _a.isSearchEnabled, activeOverlay = _a.activeOverlay, _c = _a.overlayOptions, overlayOptions = _c === void 0 ? {} : _c, _d = _a.drawingModes, drawingModes = _d === void 0 ? [] : _d, markerClusterer = _a.markerClusterer, markerClustererOptions = _a.markerClustererOptions, _e = _a.mapOptions, mapOptions = _e === void 0 ? {} : _e, mapContainerClassName = _a.mapContainerClassName, _f = _a.onMapBoundsChanged, onMapBoundsChanged = _f === void 0 ? ramda_1.identity : _f, _g = _a.onOverlayUpdated, onOverlayUpdated = _g === void 0 ? ramda_1.identity : _g, _h = _a.onMarkerClicked, onMarkerClicked = _h === void 0 ? ramda_1.identity : _h;
+    var styles = (0, styles_1.useStyles)();
+    var _j = (0, api_1.useJsApiLoader)({
+        googleMapsApiKey: mapKey,
+        libraries: libraries
+    }), isLoaded = _j.isLoaded, loadError = _j.loadError;
+    var mapMoveEndTimer = (0, react_1.useRef)(null);
+    var _k = (0, react_1.useState)(null), map = _k[0], setMap = _k[1];
+    var _l = (0, react_1.useState)(null), polygon = _l[0], setPolygon = _l[1];
+    var _m = (0, react_1.useState)(null), drawingMode = _m[0], setDrawingMode = _m[1];
+    (0, useFitMapBounds_1.useFitMapBounds)({ markers: markers, activeOverlay: activeOverlay, map: map, isSearchOnMapMove: isSearchOnMapMove });
+    var allOverlayOptions = (0, react_1.useMemo)(function () { return (__assign(__assign({}, constants_1.DEFAULT_OVERLAY_OPTIONS), overlayOptions)); }, [overlayOptions]);
+    var googleMapOptions = (0, react_1.useMemo)(function () { return (__assign(__assign({}, constants_1.DEFAULT_GOOGLE_MAP_OPTIONS), mapOptions)); }, [mapOptions]);
+    var handleChangeIsSearchOnMapMove = (0, react_1.useCallback)(function (isSearchOnMapMove) {
+        onMapBoundsChanged(isSearchOnMapMove ? (0, helpers_1.getMapBoundsPolygon)(map) : null);
+        setDrawingMode(null);
+        clearTimeout(mapMoveEndTimer.current);
+    }, [map, onMapBoundsChanged]);
+    var handleMapMoveStart = (0, react_1.useCallback)(function () {
+        clearTimeout(mapMoveEndTimer.current);
+    }, []);
+    var handleMapMoveEnd = (0, react_1.useCallback)(function () {
+        if (!isSearchOnMapMove)
+            return;
+        onMapBoundsChanged((0, helpers_1.getMapBoundsPolygon)(map));
+    }, [isSearchOnMapMove, map, onMapBoundsChanged]);
+    var handleMapIdle = (0, react_1.useCallback)(function () {
+        if (!isSearchOnMapMove)
+            return;
+        clearTimeout(mapMoveEndTimer.current);
+        mapMoveEndTimer.current = setTimeout(handleMapMoveEnd, ON_MAP_MOVE_DEBOUNCE_INTERVAL);
+    }, [handleMapMoveEnd, isSearchOnMapMove]);
+    var handleOverlayChange = (0, react_1.useCallback)(function (e, propOverlay) {
+        var _a;
+        var _b;
+        var polygonStateOverlay = polygon && { type: constants_1.MAP_DRAWING_MODES.POLYGON, overlay: polygon };
+        var stateOverlay = propOverlay || polygonStateOverlay;
+        if ((0, ramda_1.isEmpty)(stateOverlay))
+            return;
+        var overlay = stateOverlay.overlay, type = stateOverlay.type;
+        var getPolygonLatLngCoordinates = function () {
+            return overlay
+                .getPath()
+                .getArray()
+                .map(function (latlng) { return [latlng.lat(), latlng.lng()]; });
+        };
+        var getCircleParameters = function () { return ({ radius: overlay.getRadius() / 1000, center: overlay.getCenter() }); };
+        var typeActions = (_a = {},
+            _a[constants_1.MAP_DRAWING_MODES.POLYGON] = getPolygonLatLngCoordinates,
+            _a[constants_1.MAP_DRAWING_MODES.CIRCLE] = getCircleParameters,
+            _a);
+        var data = (_b = typeActions[type]) === null || _b === void 0 ? void 0 : _b.call(typeActions);
+        if (!data)
+            return;
+        onOverlayUpdated({ data: data, type: type });
+    }, [onOverlayUpdated, polygon]);
+    var handleOverlayComplete = (0, react_1.useCallback)(function (type) { return function (overlay) {
+        handleOverlayChange(null, { type: type, overlay: overlay });
+        overlay.setMap(null);
+        setDrawingMode(null);
+    }; }, [handleOverlayChange]);
+    var handleClearOverlay = (0, react_1.useCallback)(function () {
+        onOverlayUpdated(null);
+    }, [onOverlayUpdated]);
+    var renderMarkers = function (clusterer) {
+        return markers
+            .filter((0, ramda_1.prop)('point'))
+            .map(function (marker) { return (react_1.default.createElement(EntityMarker_1.EntityMarker, { key: marker.id, marker: marker, clusterer: clusterer, onClick: onMarkerClicked })); });
+    };
+    var renderMarkerClusterer = function (options) {
+        return react_1.default.createElement(api_1.MarkerClusterer, { options: options }, renderMarkers);
+    };
+    if (loadError) {
+        return null;
+    }
+    if (!isLoaded) {
+        return loadingElement;
+    }
+    var shouldRenderDrawingManager = isSearchEnabled && Boolean(drawingModes.length);
+    var shouldRenderRightMapControls = map && isSearchEnabled && Boolean(drawingModes.length);
+    var shouldRenderCenterMapControls = map && isSearchEnabled;
+    var shouldRenderPolygon = !(0, helpers_1.getDrawingMode)(drawingMode) && activeOverlay && (0, ramda_1.propEq)('type', constants_1.MAP_DRAWING_MODES.POLYGON, activeOverlay);
+    return (react_1.default.createElement(api_1.GoogleMap, { mapTypeId: window.google.maps.MapTypeId.ROADMAP, options: googleMapOptions, onLoad: setMap, zoom: defaultZoom, center: defaultCenter, onZoomChanged: handleMapMoveStart, onDragStart: handleMapMoveStart, onIdle: handleMapIdle, mapContainerClassName: mapContainerClassName },
+        shouldRenderRightMapControls && (react_1.default.createElement(MapControlContainer_1.MapControlContainer, { className: styles.mapControlContainer, position: window.google.maps.ControlPosition.TOP_RIGHT, map: map },
+            react_1.default.createElement(TopRightMapControls_1.TopRightMapControls, { hasActiveOverlay: !!activeOverlay, drawingModes: drawingModes, drawingMode: drawingMode, onDrawingModeChanged: setDrawingMode, onClearOverlay: handleClearOverlay }))),
+        shouldRenderCenterMapControls && (react_1.default.createElement(MapControlContainer_1.MapControlContainer, { className: styles.mapControlContainer, position: window.google.maps.ControlPosition.TOP_CENTER, map: map },
+            react_1.default.createElement(TopCenterMapControls_1.TopCenterMapControls, { onChangeIsSearchOnMapMove: handleChangeIsSearchOnMapMove, isSearchOnMapMove: isSearchOnMapMove }))),
+        markerClusterer ? renderMarkerClusterer(markerClustererOptions) : renderMarkers(),
+        shouldRenderPolygon && (react_1.default.createElement(api_1.Polygon, { onLoad: setPolygon, path: activeOverlay.path, editable: true, options: allOverlayOptions, onMouseUp: handleOverlayChange, onDragEnd: handleOverlayChange })),
+        shouldRenderDrawingManager && (react_1.default.createElement(api_1.DrawingManager, { onPolygonComplete: handleOverlayComplete(constants_1.MAP_DRAWING_MODES.POLYGON), onCircleComplete: handleOverlayComplete(constants_1.MAP_DRAWING_MODES.CIRCLE), drawingMode: (0, helpers_1.getDrawingMode)(drawingMode), options: {
+                drawingControl: false,
+                circleOptions: allOverlayOptions,
+                polygonOptions: allOverlayOptions
+            } }))));
+};
+exports.ReltioMap = ReltioMap;

package/cjs/ReltioMap/ReltioMap.spec.d.ts

@@ -0,0 +1 @@
+export {};