@gridsuite/commons-ui 0.32.0 → 0.32.2

package/lib/components/FlatParameters/FlatParameters.js

@@ -69,14 +69,14 @@ function extractDefault(paramDescription) {
   }
   return d !== null && d !== void 0 ? d : null;
 }
-function longestCommonPrefix(strs) {
-  if (!(strs === null || strs === void 0 ? void 0 : strs.length)) {
+function longestCommonPrefix(stringList) {
+  if (!(stringList === null || stringList === void 0 ? void 0 : stringList.length)) {
     return '';
   }
-  var prefix = strs.reduce(function (acc, str) {
+  var prefix = stringList.reduce(function (acc, str) {
     return str.length < acc.length ? str : acc;
   });
-  for (var _iterator = _createForOfIteratorHelperLoose(strs), _step; !(_step = _iterator()).done;) {
+  for (var _iterator = _createForOfIteratorHelperLoose(stringList), _step; !(_step = _iterator()).done;) {
     var str = _step.value;
     while (str.slice(0, prefix.length) !== prefix) {
       prefix = prefix.slice(0, -1);
@@ -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;
@@ -132,14 +139,14 @@ var FlatParameters = function FlatParameters(_ref) {
       setUncommitted(value);
     }
     if (onChange) {
-      if (Array.isArray(value)) {
-        onChange(paramName, [].concat(value), isInEdition);
+      if (param.type === 'STRING_LIST') {
+        onChange(paramName, value ? value.toString() : null, isInEdition);
       } else {
         onChange(paramName, value, isInEdition);
       }
     }
   }, [inEditionParam, onChange]);
-  var onUncommited = (0, _react.useCallback)(function (param, inEdit) {
+  var onUncommitted = (0, _react.useCallback)(function (param, inEdit) {
     if (inEdit) {
       setInEditionParam(param.name);
     } else {
@@ -161,23 +168,38 @@ var FlatParameters = function FlatParameters(_ref) {
     if (param.name === inEditionParam && uncommitted !== null) {
       return uncommitted;
     } else if (initValues && initValues.hasOwnProperty(param.name)) {
-      return initValues[param.name];
+      if (param.type !== 'STRING_LIST') {
+        return initValues[param.name];
+      }
+      var valueList = initValues[param.name];
+      if (Array.isArray(valueList)) {
+        return valueList;
+      }
+      // otherwise split string into array
+      return valueList ? valueList.split(',').map(function (s) {
+        return s.trim();
+      }).filter(function (s) {
+        return !!s;
+      }) : [];
     } else {
       return extractDefault(param);
     }
   }
+  var outputTransformFloatString = function outputTransformFloatString(value) {
+    return (value === null || value === void 0 ? void 0 : value.replace(',', '.')) || '';
+  };
   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,17 +207,17 @@ var FlatParameters = function FlatParameters(_ref) {
               textAlign: 'right'
             }
           },
-          value: value,
+          value: fieldValue,
           onFocus: function onFocus() {
-            return onUncommited(param, true);
+            return onUncommitted(param, true);
           },
           onBlur: function onBlur() {
-            return onUncommited(param, false);
+            return onUncommitted(param, false);
           },
           onChange: function onChange(e) {
             var m = FloatRE.exec(e.target.value);
             if (m) {
-              onFieldChange(e.target.value, param);
+              onFieldChange(outputTransformFloatString(e.target.value), param);
             }
           },
           error: err,
@@ -209,12 +231,12 @@ var FlatParameters = function FlatParameters(_ref) {
               textAlign: 'right'
             }
           },
-          value: value,
+          value: fieldValue,
           onFocus: function onFocus() {
-            return onUncommited(param, true);
+            return onUncommitted(param, true);
           },
           onBlur: function onBlur() {
-            return onUncommited(param, false);
+            return onUncommitted(param, false);
           },
           onChange: function onChange(e) {
             var m = IntegerRE.exec(e.target.value);
@@ -229,34 +251,67 @@ 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: fieldValue,
+            renderTags: function renderTags(values, getTagProps) {
+              return values.map(function (value, index) {
+                return /*#__PURE__*/_react["default"].createElement(_material.Chip, _extends({
+                  label: getTranslatedValue(param.name, value)
+                }, getTagProps({
+                  index: index
+                })));
+              });
+            },
+            renderInput: function renderInput(inputProps) {
+              return /*#__PURE__*/_react["default"].createElement(_material.TextField, _extends({}, inputProps, {
+                variant: variant
+              }));
+            }
+          });
+        } else {
+          // no possible values => free user inputs
+          return /*#__PURE__*/_react["default"].createElement(_material.Autocomplete, {
+            fullWidth: true,
+            multiple: true,
+            freeSolo: true,
+            autoSelect: true,
+            options: [],
             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
+                  id: 'chip_' + value,
+                  size: 'small',
+                  label: 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
               }));
             }
           });
         }
-      // else fallthrough to default
       case 'STRING':
         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 : '',
-            onChange: function onChange(ev, may) {
+            value: fieldValue !== null && fieldValue !== void 0 ? fieldValue : '',
+            onChange: function onChange(ev) {
               onFieldChange(ev.target.value, param);
             },
             size: "small",
@@ -264,26 +319,23 @@ 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,
+          value: fieldValue || '',
           onFocus: function onFocus() {
-            return onUncommited(param, true);
+            return onUncommitted(param, true);
           },
           onBlur: function onBlur() {
-            return onUncommited(param, false);
+            return onUncommitted(param, false);
           },
           onChange: function onChange(e) {
             return onFieldChange(e.target.value, param);
@@ -296,7 +348,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 +359,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.2",
     "description": "common react components for gridsuite applications",
     "engines": {
         "npm": "<=6",