@gridsuite/commons-ui 0.32.0 → 0.32.1

package/lib/components/FlatParameters/FlatParameters.js

@@ -112,19 +112,26 @@ var FlatParameters = function FlatParameters(_ref) {
   var _useState2 = (0, _react.useState)(null),
     inEditionParam = _useState2[0],
     setInEditionParam = _useState2[1];
-  var preparePossibleValues = (0, _react.useCallback)(function (values) {
+  var getTranslatedValue = (0, _react.useCallback)(function (prefix, value) {
+    return intl.formatMessage({
+      id: prefix + '.' + value,
+      defaultMessage: value
+    });
+  }, [intl]);
+  var sortPossibleValues = (0, _react.useCallback)(function (prefix, values) {
     if (values == null) {
       return [];
     }
-    return values.map(function (v) {
-      return intl.formatMessage({
-        id: v,
-        defaultMessage: v
-      });
+    // Sort by translated values
+    return values.map(function (value) {
+      return {
+        id: value,
+        message: getTranslatedValue(prefix, value)
+      };
     }).sort(function (a, b) {
-      return a.localeCompare(b);
+      return a.message.localeCompare(b.message);
     });
-  }, [intl]);
+  }, [getTranslatedValue]);
   var onFieldChange = (0, _react.useCallback)(function (value, param) {
     var paramName = param.name;
     var isInEdition = inEditionParam === paramName;
@@ -167,17 +174,17 @@ var FlatParameters = function FlatParameters(_ref) {
     }
   }
   var renderField = function renderField(param) {
-    var value = mixInitAndDefault(param);
+    var fieldValue = mixInitAndDefault(param);
     switch (param.type) {
       case 'BOOLEAN':
         return /*#__PURE__*/_react["default"].createElement(_material.Switch, {
-          checked: !!value,
+          checked: !!fieldValue,
           onChange: function onChange(e) {
             return onFieldChange(e.target.checked, param);
           }
         });
       case 'DOUBLE':
-        var err = isNaN(value) || typeof value !== 'number' && !!value && isNaN(value - 0);
+        var err = isNaN(fieldValue) || typeof fieldValue !== 'number' && !!fieldValue && isNaN(fieldValue - 0);
         return /*#__PURE__*/_react["default"].createElement(_material.TextField, {
           fullWidth: true,
           sx: {
@@ -185,7 +192,7 @@ var FlatParameters = function FlatParameters(_ref) {
               textAlign: 'right'
             }
           },
-          value: value,
+          value: fieldValue,
           onFocus: function onFocus() {
             return onUncommited(param, true);
           },
@@ -209,7 +216,7 @@ var FlatParameters = function FlatParameters(_ref) {
               textAlign: 'right'
             }
           },
-          value: value,
+          value: fieldValue,
           onFocus: function onFocus() {
             return onUncommited(param, true);
           },
@@ -229,22 +236,27 @@ var FlatParameters = function FlatParameters(_ref) {
           return /*#__PURE__*/_react["default"].createElement(_material.Autocomplete, {
             fullWidth: true,
             multiple: true,
-            options: preparePossibleValues(param.possibleValues),
+            options: sortPossibleValues(param.name, param.possibleValues).map(function (v) {
+              return v.id;
+            }),
+            getOptionLabel: function getOptionLabel(option) {
+              return getTranslatedValue(param.name, option);
+            },
             onChange: function onChange(e, value) {
               return onFieldChange(value, param);
             },
-            value: value,
-            renderTags: function renderTags(value, getTagProps) {
-              return value.map(function (option, index) {
+            value: fieldValue,
+            renderTags: function renderTags(values, getTagProps) {
+              return values.map(function (value, index) {
                 return /*#__PURE__*/_react["default"].createElement(_material.Chip, _extends({
-                  label: option
+                  label: getTranslatedValue(param.name, value)
                 }, getTagProps({
                   index: index
                 })));
               });
             },
-            renderInput: function renderInput(options) {
-              return /*#__PURE__*/_react["default"].createElement(_material.TextField, _extends({}, options, {
+            renderInput: function renderInput(inputProps) {
+              return /*#__PURE__*/_react["default"].createElement(_material.TextField, _extends({}, inputProps, {
                 variant: variant
               }));
             }
@@ -255,7 +267,7 @@ var FlatParameters = function FlatParameters(_ref) {
         if (param.possibleValues) {
           return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_material.Select, {
             labelId: param.name,
-            value: value !== null && value !== void 0 ? value : '',
+            value: fieldValue !== null && fieldValue !== void 0 ? fieldValue : '',
             onChange: function onChange(ev, may) {
               onFieldChange(ev.target.value, param);
             },
@@ -264,21 +276,18 @@ var FlatParameters = function FlatParameters(_ref) {
               minWidth: '4em'
             },
             variant: variant
-          }, param.possibleValues.map(function (value) {
+          }, sortPossibleValues(param.name, param.possibleValues).map(function (value) {
             return /*#__PURE__*/_react["default"].createElement(_material.MenuItem, {
-              key: value,
-              value: value
-            }, /*#__PURE__*/_react["default"].createElement(_material.Typography, null, intl.formatMessage({
-              id: value,
-              defaultMessage: value
-            })));
+              key: value.id,
+              value: value.id
+            }, /*#__PURE__*/_react["default"].createElement(_material.Typography, null, value.message));
           })));
         }
       // else fallthrough to default
       default:
         return /*#__PURE__*/_react["default"].createElement(_material.TextField, {
           fullWidth: true,
-          defaultValue: value,
+          defaultValue: fieldValue,
           onFocus: function onFocus() {
             return onUncommited(param, true);
           },
@@ -296,7 +305,10 @@ var FlatParameters = function FlatParameters(_ref) {
     className: classes.paramList
   }, paramsAsArray.map(function (param) {
     return /*#__PURE__*/_react["default"].createElement(_material.Tooltip, {
-      title: param.description,
+      title: /*#__PURE__*/_react["default"].createElement(_reactIntl.FormattedMessage, {
+        id: param.name + '.desc',
+        defaultMessage: param.description
+      }),
       enterDelay: 1200,
       key: param.name
     }, /*#__PURE__*/_react["default"].createElement(_material.ListItem, {
@@ -304,7 +316,10 @@ var FlatParameters = function FlatParameters(_ref) {
       className: classes.paramListItem
     }, /*#__PURE__*/_react["default"].createElement(_material.Typography, {
       className: classes.paramName
-    }, param.name.slice(prefix.length)), renderField(param)));
+    }, /*#__PURE__*/_react["default"].createElement(_reactIntl.FormattedMessage, {
+      id: param.name,
+      defaultMessage: param.name.slice(prefix.length)
+    })), renderField(param)));
   }));
 };
 exports.FlatParameters = FlatParameters;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gridsuite/commons-ui",
-    "version": "0.32.0",
+    "version": "0.32.1",
     "description": "common react components for gridsuite applications",
     "engines": {
         "npm": "<=6",