@reltio/components 1.4.2256 → 1.4.2258

package/AttributesView/AttributesView.test.js

@@ -47,6 +47,8 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 };
 import React from 'react';
 import { Mode } from '@reltio/mdm-sdk';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
 import { AttributesView } from './AttributesView';
 import { MdmModuleProvider } from '../contexts/MdmModuleContext';
 import { render, screen, within } from '@testing-library/react';
@@ -110,7 +112,8 @@ describe('AttributesView tests', function () {
         if (mdmValues === void 0) { mdmValues = mdmDefaultValues; }
         var Providers = function (_a) {
             var children = _a.children;
-            return (React.createElement(MdmModuleProvider, { values: mdmValues, actions: actions }, children));
+            return (React.createElement(LocalizationProvider, { dateAdapter: AdapterMoment },
+                React.createElement(MdmModuleProvider, { values: mdmValues, actions: actions }, children)));
         };
         var user = userEvent.setup();
         return __assign(__assign({}, render(React.createElement(AttributesView, __assign({}, props)), { wrapper: Providers })), { user: user });
@@ -151,11 +154,14 @@ describe('AttributesView tests', function () {
     it('should render always visible attributes in editing mode', function () {
         var alwaysVisible = [
             'configuration/entityTypes/HCP/attributes/LastName',
-            'configuration/entityTypes/HCP/attributes/Phone'
+            'configuration/entityTypes/HCP/attributes/Phone',
+            'startDate'
         ];
         setUp({ mode: Mode.Editing, entity: entity, alwaysVisible: alwaysVisible });
         expect(screen.getByText('Last Name')).toBeInTheDocument();
         expect(screen.getByText('Phone')).toBeInTheDocument();
+        expect(screen.getByText('Start date')).toBeInTheDocument();
+        expect(screen.queryByText('End date')).not.toBeInTheDocument();
     });
     it('should render always visible attributes in read mode for entity without filled attributes', function () {
         var alwaysVisible = [

package/EditModeAttributesPager/components/SpecialRenderer/SpecialRenderer.js

@@ -20,7 +20,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { useCallback, useRef, useState } from 'react';
+import React, { useCallback, useContext, useMemo, useRef, useState } from 'react';
 import { createNewAttribute, EntityAttrTypes, isEditableMode as checkIsEditableMode, isEmptyValue, isActivenessAttrType } from '@reltio/mdm-sdk';
 import classnames from 'classnames';
 import { pipe, T } from 'ramda';
@@ -33,6 +33,7 @@ import { RolesEditor } from '../../../RolesEditor';
 import { TagsEditor } from '../../../TagsEditor';
 import { HasDeletionsContext } from '../../../contexts/HasDeletionsContext';
 import { withContext } from '../../../HOCs/withContext';
+import { AlwaysVisibleAttributesContext } from '../../../contexts/AlwaysVisibleAttributesContext';
 import { useScrollToAttribute } from '../../../hooks/useScrollToAttribute';
 import { useStyles } from '../../styles';
 var SpecialRenderer = function (_a) {
@@ -52,7 +53,9 @@ var SpecialRenderer = function (_a) {
         updateHasDeletions
     ]);
     var isEmptyValues = isEmptyValue(values);
-    var showEmpty = !hasDeletions && showEmptyEditors && isEmptyValues;
+    var alwaysVisibleAttributes = useContext(AlwaysVisibleAttributesContext);
+    var isAlwaysVisible = useMemo(function () { return alwaysVisibleAttributes === null || alwaysVisibleAttributes === void 0 ? void 0 : alwaysVisibleAttributes.includes(attributeType.uri); }, [attributeType.uri, alwaysVisibleAttributes]);
+    var showEmpty = ((!hasDeletions && showEmptyEditors) || isAlwaysVisible) && isEmptyValues;
     var emptyEditorValue = useRef(createNewAttribute({
         parentUri: parentUri,
         attributeType: attributeType

package/ReltioMap/ReltioMap.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { GeoPoint } from '@reltio/mdm-sdk';
-import { DrawingModes, MapBounds, Overlay, ClusteredMarkersOptions, DrawingMode } from './types';
+import { MapBounds, Overlay, ClusteredMarkersOptions, DrawingMode } from './types';
 type Props = {
     markers?: GeoPoint[];
     mapKey: string;
@@ -12,20 +12,17 @@ type Props = {
     isSearchOnMapMove?: boolean;
     isSearchEnabled?: boolean;
     activeOverlay?: Overlay;
-    overlayOptions?: google.maps.PolygonOptions | google.maps.CircleOptions;
-    drawingModes?: DrawingModes;
+    overlayOptions?: google.maps.PolygonOptions;
+    enablePolygonDrawing?: boolean;
     markerClusterer?: boolean;
     markerClustererOptions?: ClusteredMarkersOptions;
     mapOptions?: google.maps.MapOptions;
     mapContainerClassName?: string;
     onMapBoundsChanged?: (value: MapBounds | null) => void;
     onOverlayUpdated?: (value: {
-        data: number[][] | {
-            radius: number;
-            center: google.maps.LatLng;
-        };
+        data: number[][];
         type: DrawingMode;
-    }) => void;
+    } | null) => void;
     onMarkerClicked?: (value: GeoPoint) => void;
 };
 export declare const ReltioMap: ({ mapKey, ...restProps }: Props) => React.JSX.Element;

package/ReltioMap/ReltioMap.js

@@ -25,15 +25,15 @@ import { propEq, isEmpty, identity } from 'ramda';
 import { APIProvider, ControlPosition, Map, MapControl, useApiIsLoaded, useMap } from '@vis.gl/react-google-maps';
 import { TopRightMapControls } from './components/TopRightMapControls';
 import { TopCenterMapControls } from './components/TopCenterMapControls';
-import { getMapBoundsPolygon, getDrawingMode } from './helpers';
-import { DEFAULT_GOOGLE_MAP_OPTIONS, DEFAULT_OVERLAY_OPTIONS, MAP_DRAWING_MODES } from '../constants';
+import { getMapBoundsPolygon, isActivePolygonDrawing } from './helpers';
+import { DEFAULT_GOOGLE_MAP_OPTIONS, DEFAULT_OVERLAY_OPTIONS, POLYGON_DRAWING_MODE } from '../constants';
 import { useFitMapBounds } from './useFitMapBounds';
-import { useStyles } from './styles';
 import { ClusteredMarkers } from './components/ClusteredMarkers';
 import { Polygon } from './components/Polygon';
-import { DrawingManager } from './components/DrawingManager';
+import { PolygonDrawing } from './components/PolygonDrawing';
+import { useStyles } from './styles';
 var ON_MAP_MOVE_DEBOUNCE_INTERVAL = 1000;
-var libraries = ['drawing'];
+var libraries = ['marker'];
 export var ReltioMap = function (_a) {
     var mapKey = _a.mapKey, restProps = __rest(_a, ["mapKey"]);
     return (React.createElement(APIProvider, { apiKey: mapKey, libraries: libraries },
@@ -42,7 +42,7 @@ export var ReltioMap = function (_a) {
 var emptyObject = {};
 var emptyArray = [];
 var InternalReltioMap = memo(function (_a) {
-    var mapId = _a.mapId, _b = _a.markers, markers = _b === void 0 ? emptyArray : _b, 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 ? emptyObject : _c, _d = _a.drawingModes, drawingModes = _d === void 0 ? emptyArray : _d, markerClusterer = _a.markerClusterer, markerClustererOptions = _a.markerClustererOptions, _f = _a.mapOptions, mapOptions = _f === void 0 ? emptyObject : _f, mapContainerClassName = _a.mapContainerClassName, _g = _a.onMapBoundsChanged, onMapBoundsChanged = _g === void 0 ? identity : _g, _h = _a.onOverlayUpdated, onOverlayUpdated = _h === void 0 ? identity : _h, _j = _a.onMarkerClicked, onMarkerClicked = _j === void 0 ? identity : _j;
+    var mapId = _a.mapId, _b = _a.markers, markers = _b === void 0 ? emptyArray : _b, 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 ? emptyObject : _c, _d = _a.enablePolygonDrawing, enablePolygonDrawing = _d === void 0 ? false : _d, markerClusterer = _a.markerClusterer, markerClustererOptions = _a.markerClustererOptions, _f = _a.mapOptions, mapOptions = _f === void 0 ? emptyObject : _f, mapContainerClassName = _a.mapContainerClassName, _g = _a.onMapBoundsChanged, onMapBoundsChanged = _g === void 0 ? identity : _g, _h = _a.onOverlayUpdated, onOverlayUpdated = _h === void 0 ? identity : _h, _j = _a.onMarkerClicked, onMarkerClicked = _j === void 0 ? identity : _j;
     var styles = useStyles();
     var mapMoveEndTimer = useRef(null);
     var isLoaded = useApiIsLoaded();
@@ -52,10 +52,15 @@ var InternalReltioMap = memo(function (_a) {
     useFitMapBounds({ markers: markers, activeOverlay: activeOverlay, map: map, isSearchOnMapMove: isSearchOnMapMove });
     var allOverlayOptions = useMemo(function () { return (__assign(__assign({}, DEFAULT_OVERLAY_OPTIONS), overlayOptions)); }, [overlayOptions]);
     var googleMapOptions = useMemo(function () { return (__assign(__assign({}, DEFAULT_GOOGLE_MAP_OPTIONS), mapOptions)); }, [mapOptions]);
-    var drawingManagerOptions = useMemo(function () { return ({
-        drawingControl: false,
-        polygonOptions: allOverlayOptions
-    }); }, [allOverlayOptions]);
+    var previewPolylineOptions = useMemo(function () {
+        var _a;
+        return ({
+            strokeColor: allOverlayOptions.strokeColor,
+            strokeWeight: allOverlayOptions.strokeWeight,
+            zIndex: ((_a = allOverlayOptions.zIndex) !== null && _a !== void 0 ? _a : 1) + 1
+        });
+    }, [allOverlayOptions]);
+    var completedPolygonDrawingOptions = useMemo(function () { return (__assign(__assign({}, allOverlayOptions), { editable: false })); }, [allOverlayOptions]);
     var polygonOptions = useMemo(function () { return (__assign({ paths: activeOverlay === null || activeOverlay === void 0 ? void 0 : activeOverlay.path, editable: true }, allOverlayOptions)); }, [activeOverlay, allOverlayOptions]);
     var handleChangeIsSearchOnMapMove = useCallback(function (isSearchOnMapMove) {
         onMapBoundsChanged(isSearchOnMapMove ? getMapBoundsPolygon(map) : null);
@@ -77,54 +82,41 @@ var InternalReltioMap = memo(function (_a) {
         mapMoveEndTimer.current = setTimeout(handleMapMoveEnd, ON_MAP_MOVE_DEBOUNCE_INTERVAL);
     }, [handleMapMoveEnd, isSearchOnMapMove]);
     var handleOverlayChange = useCallback(function (_e, propOverlay) {
-        var _a;
-        var _b;
-        var polygonStateOverlay = polygon && { type: MAP_DRAWING_MODES.POLYGON, overlay: polygon };
+        var polygonStateOverlay = polygon && { type: POLYGON_DRAWING_MODE, overlay: polygon };
         var stateOverlay = propOverlay || polygonStateOverlay;
         if (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[MAP_DRAWING_MODES.POLYGON] = getPolygonLatLngCoordinates,
-            _a[MAP_DRAWING_MODES.CIRCLE] = getCircleParameters,
-            _a);
-        var data = (_b = typeActions[type]) === null || _b === void 0 ? void 0 : _b.call(typeActions);
-        if (!data)
-            return;
+        var data = overlay
+            .getPath()
+            .getArray()
+            .map(function (latlng) { return [latlng.lat(), latlng.lng()]; });
         onOverlayUpdated({ data: data, type: type });
     }, [onOverlayUpdated, polygon]);
-    var handleOverlayComplete = useCallback(function (type) { return function (overlay) {
-        handleOverlayChange(null, { type: type, overlay: overlay });
+    var onPolygonDrawingComplete = useCallback(function (overlay) {
+        handleOverlayChange(null, { type: POLYGON_DRAWING_MODE, overlay: overlay });
         overlay.setMap(null);
         setDrawingMode(null);
-    }; }, [handleOverlayChange]);
+    }, [handleOverlayChange]);
     var handleClearOverlay = useCallback(function () {
         onOverlayUpdated(null);
     }, [onOverlayUpdated]);
     if (!isLoaded) {
         return loadingElement;
     }
-    var shouldRenderDrawingManager = isSearchEnabled && Boolean(drawingModes.length);
-    var shouldRenderRightMapControls = map && isSearchEnabled && Boolean(drawingModes.length);
+    var shouldRenderPolygonDrawing = isSearchEnabled && enablePolygonDrawing;
+    var shouldRenderRightMapControls = map && isSearchEnabled && enablePolygonDrawing;
     var shouldRenderCenterMapControls = map && isSearchEnabled;
-    var shouldRenderPolygon = !getDrawingMode(drawingMode) && activeOverlay && propEq('type', MAP_DRAWING_MODES.POLYGON, activeOverlay);
+    var shouldRenderPolygon = !isActivePolygonDrawing(drawingMode) &&
+        activeOverlay &&
+        propEq('type', POLYGON_DRAWING_MODE, activeOverlay);
     return (React.createElement(Map, __assign({ mapId: mapId || 'mapId' }, googleMapOptions, { defaultZoom: defaultZoom, defaultCenter: defaultCenter, onZoomChanged: handleMapMoveStart, onDragstart: handleMapMoveStart, onIdle: handleMapIdle, className: mapContainerClassName }),
         shouldRenderRightMapControls && (React.createElement(MapControl, { position: ControlPosition.TOP_RIGHT },
-            React.createElement(TopRightMapControls, { className: styles.mapControlContainer, hasActiveOverlay: !!activeOverlay, drawingModes: drawingModes, drawingMode: drawingMode, onDrawingModeChanged: setDrawingMode, onClearOverlay: handleClearOverlay }))),
+            React.createElement(TopRightMapControls, { className: styles.mapControlContainer, hasActiveOverlay: !!activeOverlay, enablePolygonDrawing: enablePolygonDrawing, drawingMode: drawingMode, onDrawingModeChanged: setDrawingMode, onClearOverlay: handleClearOverlay }))),
         shouldRenderCenterMapControls && (React.createElement(MapControl, { position: ControlPosition.TOP_CENTER },
             React.createElement(TopCenterMapControls, { className: styles.mapControlContainer, onChangeIsSearchOnMapMove: handleChangeIsSearchOnMapMove, isSearchOnMapMove: isSearchOnMapMove }))),
-        React.createElement(ClusteredMarkers, { entityMarkers: markers, enabledClustering: markerClusterer, options: markerClustererOptions, onMarkerClick: onMarkerClicked }),
+        React.createElement(ClusteredMarkers, { entityMarkers: markers, enabledClustering: markerClusterer, options: markerClustererOptions, onMarkerClick: onMarkerClicked, disabled: isActivePolygonDrawing(drawingMode) }),
         shouldRenderPolygon && (React.createElement(Polygon, { onInit: setPolygon, options: polygonOptions, onMouseUp: handleOverlayChange, onDragEnd: handleOverlayChange })),
-        shouldRenderDrawingManager && (React.createElement(DrawingManager, { onPolygonComplete: handleOverlayComplete(MAP_DRAWING_MODES.POLYGON), onCircleComplete: handleOverlayComplete(MAP_DRAWING_MODES.CIRCLE), drawingMode: getDrawingMode(drawingMode), options: drawingManagerOptions }))));
+        shouldRenderPolygonDrawing && (React.createElement(PolygonDrawing, { isActive: isActivePolygonDrawing(drawingMode), previewPolylineOptions: previewPolylineOptions, completedPolygonOptions: completedPolygonDrawingOptions, onPolygonComplete: onPolygonDrawingComplete }))));
 });
 InternalReltioMap.displayName = 'InternalReltioMap';