Align OL measure number format of tooltip to measure panel's one

web/client/components/I18N/enhancers/__tests__/addI18NProps-test.js

@@ -0,0 +1,37 @@
+/*
+ * Copyright 2019, GeoSolutions Sas.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+const React = require('react');
+const ReactDOM = require('react-dom');
+const {createSink} = require('recompose');
+const expect = require('expect');
+const addI18NProps = require('../addI18NProps');
+var Localized = require('../../Localized');
+
+
+describe('addI18NProps enhancer', () => {
+    beforeEach((done) => {
+        document.body.innerHTML = '<div id="container"></div>';
+        setTimeout(done);
+    });
+    afterEach((done) => {
+        ReactDOM.unmountComponentAtNode(document.getElementById("container"));
+        document.body.innerHTML = '';
+        setTimeout(done);
+    });
+    it('addI18NProps format numbers', () => {
+        const Sink = addI18NProps(['formatNumber'])(createSink( props => {
+            expect(props).toExist();
+            expect(props.formatNumber).toExist();
+            expect(typeof props.formatNumber(1)).toBe('string');
+            expect(props.formatNumber(1.1)).toBe("1.1");
+        }));
+        ReactDOM.render(<Localized locale="en-EN" messages={{}}>
+            <Sink />
+        </Localized>, document.getElementById("container"));
+    });
+});

web/client/components/I18N/enhancers/addI18NProps.js

@@ -0,0 +1,25 @@
+/*
+ * Copyright 2019, GeoSolutions Sas.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+const {injectIntl} = require('react-intl');
+const {omit} = require('lodash');
+const { compose, toClass, mapProps, withProps } = require('recompose');
+
+const omitProps = keys => mapProps(props => omit(props, keys));
+
+/**
+ * @name addI18NFormat
+ * @param {string[]} propsToAdd add the props to format as props. Choose in theese of these https://github.com/yahoo/react-intl/wiki/API#intlshape
+ */
+module.exports = (propsToAdd = []) => compose(
+    C => injectIntl(C, { intlPropName: '__intl__'} ),
+    withProps(({__intl__ = {}}) => propsToAdd.reduce((acc = {}, k) => ({
+        ...acc,
+        [k]: __intl__[k]
+    }), {})),
+    omitProps(['__intl__'])
+);

web/client/components/map/openlayers/MeasurementSupport.jsx

@@ -11,6 +11,8 @@ const PropTypes = require('prop-types');
 const {round, isEqual, dropRight, pick} = require('lodash');
 const assign = require('object-assign');
 const ol = require('openlayers');
+const addI18NProps = require('../../I18N/enhancers/addI18NProps');
+
 const wgs84Sphere = new ol.Sphere(6378137);
 const {reprojectGeoJson, reproject, calculateAzimuth, calculateDistance, transformLineToArcs} = require('../../../utils/CoordinatesUtils');
 const {convertUom, getFormattedBearingValue} = require('../../../utils/MeasureUtils');
@@ -30,6 +32,7 @@ class MeasurementSupport extends React.Component {
         measurement: PropTypes.object,
         enabled: PropTypes.bool,
         uom: PropTypes.object,
+        formatNumber: PropTypes.func,
         changeMeasurementState: PropTypes.func,
         updateMeasures: PropTypes.func,
         resetGeometry: PropTypes.func,
@@ -46,6 +49,7 @@ class MeasurementSupport extends React.Component {
         resetGeometry: () => {},
         updateMeasures: () => {},
         changeGeometry: () => {},
+        formatNumber: () => {},
         startEndPoint: {
             startPointOptions: {
                 radius: 3,
@@ -451,7 +455,7 @@ class MeasurementSupport extends React.Component {
         const length = calculateDistance(reprojectedCoords, props.measurement.lengthFormula);
         const {label, unit} = props.uom && props.uom.length;
         const output = round(convertUom(length, "m", unit), 2);
-        return output + " " + (label);
+        return this.props.formatNumber(output) + " " + (label);
     };
 
     /**
@@ -464,7 +468,7 @@ class MeasurementSupport extends React.Component {
         const {label, unit} = props.uom && props.uom.area;
         const output = round(convertUom(area, "sqm", unit), 2);
 
-        return output + " " + label;
+        return this.props.formatNumber(output) + " " + label;
     };
 
     removeHelpTooltip = () => {
@@ -486,4 +490,6 @@ class MeasurementSupport extends React.Component {
     }
 }
 
-module.exports = MeasurementSupport;
+module.exports = addI18NProps(
+    ['formatNumber']
+)(MeasurementSupport);