@scenid/react-formulator 0.4.4 → 0.5.0

package/dist/index.cjs.js

@@ -29,8 +29,7 @@ var utils = require('@material-ui/core/utils');
 var _MenuItem = require('@material-ui/core/esm/MenuItem');
 var _Switch = require('@material-ui/core/esm/Switch');
 var _Checkbox = require('@material-ui/core/esm/Checkbox');
-var _Select = require('@material-ui/core/esm/Select');
-var _InputLabel = require('@material-ui/core/esm/InputLabel');
+var _ClickAwayListener = require('@material-ui/core/esm/ClickAwayListener');
 var _Clear = require('@material-ui/icons/esm/Clear');
 var _Save = require('@material-ui/icons/esm/Save');
 var _Button = require('@material-ui/core/esm/Button');
@@ -98,8 +97,7 @@ var Chip__default = /*#__PURE__*/_interopDefaultLegacy(Chip);
 var _MenuItem__default = /*#__PURE__*/_interopDefaultLegacy(_MenuItem);
 var _Switch__default = /*#__PURE__*/_interopDefaultLegacy(_Switch);
 var _Checkbox__default = /*#__PURE__*/_interopDefaultLegacy(_Checkbox);
-var _Select__default = /*#__PURE__*/_interopDefaultLegacy(_Select);
-var _InputLabel__default = /*#__PURE__*/_interopDefaultLegacy(_InputLabel);
+var _ClickAwayListener__default = /*#__PURE__*/_interopDefaultLegacy(_ClickAwayListener);
 var _Clear__default = /*#__PURE__*/_interopDefaultLegacy(_Clear);
 var _Save__default = /*#__PURE__*/_interopDefaultLegacy(_Save);
 var _Button__default = /*#__PURE__*/_interopDefaultLegacy(_Button);
@@ -19715,7 +19713,7 @@ function require_Error () {
 
 	  var _super2 = _createSuper(ValidationError);
 
-	  function ValidationError(message, path, validator, options) {
+	  function ValidationError(message, path, validator, options, index) {
 	    var _this2;
 
 	    (0, _classCallCheck2["default"])(this, ValidationError);
@@ -19723,6 +19721,7 @@ function require_Error () {
 	    _this2.path = path;
 	    _this2.validator = validator;
 	    _this2.options = options;
+	    _this2.index = index;
 	    return _this2;
 	  }
 
@@ -28390,24 +28389,36 @@ function requireValidator () {
 		    }
 		  }, {
 		    key: "validateType",
-		    value: function validateType(name, field, value, otherFields) {
+		    value: function validateType(name, field, value, otherFields, index) {
 		      var type = field.type,
 		          validator = field.validator,
 		          options = field.options;
 
+		      if (type === 'array' && validator && Array.isArray(value)) {
+		        for (var i = 0; i < value.length; i++) {
+		          this.validateType(name, {
+		            type: 'string',
+		            validator: validator,
+		            options: options
+		          }, value[i], otherFields, i);
+		        }
+
+		        return true;
+		      }
+
 		      if (validator === undefined) {
-		        if (type === undefined) throw new _Error.SchemaError("Invalid type definition \"".concat(type, "\" at path \"").concat(name, "\"."));
+		        if (type === undefined) throw new _Error.SchemaError("Invalid type definition \"".concat(type, "\" at path \"").concat(name).concat(index ? "[".concat(index, "]") : '', "\"."));
 
 		        if (this.validateBaseType(type, value) === false) {
-		          if (Array.isArray(type)) throw new _Error.ValidationError("\"".concat(value, "\" is not valid for \"").concat(name, "\""), name, 'enum', type);else throw new _Error.ValidationError("\"".concat(value, "\" is not of type \"").concat(type, "\""), name, type);
+		          if (Array.isArray(type)) throw new _Error.ValidationError("invalid value for \"".concat(name).concat(index ? "[".concat(index, "]") : '', "\""), name, 'enum', type, index);else throw new _Error.ValidationError("value is not of type \"".concat(type, "\" in \"").concat(name).concat(index ? "[".concat(index, "]") : '', "\""), name, type, index);
 		        }
 		      } else {
 		        var func = _TypeValidator["default"]["is".concat(validator)];
 
-		        if (typeof func !== 'function') throw new _Error.SchemaError("Unknown validator \"".concat(validator, "\" at path \"").concat(name, "\"."));
+		        if (typeof func !== 'function') throw new _Error.SchemaError("Unknown validator \"".concat(validator, "\" at path \"").concat(name).concat(index ? "[".concat(index, "]") : '', "\"."));
 
 		        if (func(String(value), options, otherFields) === false) {
-		          throw new _Error.ValidationError('invalid', name, validator, options);
+		          throw new _Error.ValidationError('invalid', name, validator, options, index);
 		        }
 		      }
 
@@ -28494,12 +28505,14 @@ function requireValidator () {
 		        this.validateType(name, schema[name], value, data);
 		      } catch (e) {
 		        if (!(e instanceof _Error.ValidationError)) throw e;
-		        return new FieldResult(name, data[name], undefined, isProhibited, isRequired, isOptional, true, [{
+		        var errorEntry = {
 		          message: e.message,
 		          path: e.path,
 		          validator: e.validator,
 		          options: e.options
-		        }]);
+		        };
+		        if (e.index) errorEntry.index = e.index;
+		        return new FieldResult(name, data[name], undefined, isProhibited, isRequired, isOptional, true, [errorEntry]);
 		      }
 
 		      return new FieldResult(name, data[name], this.castType(name, type, value), isProhibited, isRequired, isOptional);
@@ -32132,8 +32145,9 @@ var getValue$1 = function getValue(value, catalog) {
 var FormRepeater = function FormRepeater(_ref) {
   var variant = _ref.variant,
       name = _ref.name,
+      label = _ref.label,
       value = _ref.value,
-      catalog = _ref.catalog,
+      options = _ref.options,
       onChange = _ref.onChange;
 
   var _useState = React.useState(value || []),
@@ -32151,6 +32165,11 @@ var FormRepeater = function FormRepeater(_ref) {
       inputValue = _useState6[0],
       setInputValue = _useState6[1];
 
+  var _useState7 = React.useState(''),
+      _useState8 = _slicedToArray(_useState7, 2),
+      catalogSelectValue = _useState8[0],
+      setCatalogSelectValue = _useState8[1];
+
   var handleEntryAdd = function handleEntryAdd() {
     if (inputValue.length > 0) {
       setEntries([].concat(_toConsumableArray(entries), [inputValue]));
@@ -32161,6 +32180,7 @@ var FormRepeater = function FormRepeater(_ref) {
   var handleCancelNewEntry = function handleCancelNewEntry() {
     setInEdit(false);
     setInputValue('');
+    setCatalogSelectValue('');
   };
 
   var handleEntryDel = function handleEntryDel(delIndex) {
@@ -32181,15 +32201,23 @@ var FormRepeater = function FormRepeater(_ref) {
   }, [entries]);
   var blockedOptions = [];
 
-  if (catalog) {
-    blockedOptions = Object.entries(catalog).filter(function (e) {
-      return value.includes(e[0]);
+  if (options) {
+    blockedOptions = Object.entries(options).filter(function (e) {
+      return Array.isArray(value) && value.includes(e[0]);
     }).map(function (e) {
       return e[0];
     });
   }
 
-  return /*#__PURE__*/React__default["default"].createElement(_Box__default["default"], null, /*#__PURE__*/React__default["default"].createElement(_List__default["default"], {
+  return /*#__PURE__*/React__default["default"].createElement(_Box__default["default"], null, /*#__PURE__*/React__default["default"].createElement(_Typography__default["default"], {
+    variant: "body1"
+  }, label), (!entries || (entries === null || entries === void 0 ? void 0 : entries.length) === 0) && /*#__PURE__*/React__default["default"].createElement(_Box__default["default"], {
+    mt: 1,
+    pl: 2
+  }, /*#__PURE__*/React__default["default"].createElement(_Typography__default["default"], {
+    variant: "body2",
+    color: "textSecondary"
+  }, "Keine Eintr\xE4ge vorhanden")), /*#__PURE__*/React__default["default"].createElement(_List__default["default"], {
     dense: true
   }, entries.map(function (entry, index) {
     return (
@@ -32198,7 +32226,7 @@ var FormRepeater = function FormRepeater(_ref) {
       React__default["default"].createElement(_ListItem__default["default"], {
         key: "entry-".concat(index)
       }, /*#__PURE__*/React__default["default"].createElement(_ListItemText__default["default"], {
-        primary: getValue$1(entry, catalog)
+        primary: getValue$1(entry, options)
       }), /*#__PURE__*/React__default["default"].createElement(_ListItemSecondaryAction__default["default"], null, /*#__PURE__*/React__default["default"].createElement(_IconButton__default["default"], {
         edge: "end",
         "aria-label": "delete",
@@ -32216,10 +32244,16 @@ var FormRepeater = function FormRepeater(_ref) {
     onClick: function onClick() {
       return setInEdit(true);
     }
-  }, "Eintrag hinzuf\xFCgen")), inEdit && !catalog && /*#__PURE__*/React__default["default"].createElement(_Box__default["default"], {
+  }, "Eintr\xE4ge hinzuf\xFCgen")), inEdit && !options && /*#__PURE__*/React__default["default"].createElement(_Box__default["default"], {
     width: "100%",
     display: "flex",
     alignItems: "center"
+  }, /*#__PURE__*/React__default["default"].createElement(_ClickAwayListener__default["default"], {
+    onClickAway: function onClickAway() {
+      if (inputValue === '') {
+        setInEdit(false);
+      }
+    }
   }, /*#__PURE__*/React__default["default"].createElement(_FormControl__default["default"], {
     variant: "filled",
     fullWidth: true
@@ -32251,22 +32285,24 @@ var FormRepeater = function FormRepeater(_ref) {
     onChange: function onChange(e) {
       return setInputValue(e.target.value);
     }
-  }))), inEdit && catalog && /*#__PURE__*/React__default["default"].createElement(_Box__default["default"], {
+  })))), inEdit && options && /*#__PURE__*/React__default["default"].createElement(_Box__default["default"], {
     width: "100%",
     display: "flex",
     alignItems: "center"
   }, /*#__PURE__*/React__default["default"].createElement(_FormControl__default["default"], {
     variant: "filled",
     fullWidth: true
-  }, /*#__PURE__*/React__default["default"].createElement(_InputLabel__default["default"], null, "Neuer Eintrag"), /*#__PURE__*/React__default["default"].createElement(_Select__default["default"], {
-    defaultValue: "please-select",
+  }, /*#__PURE__*/React__default["default"].createElement(_TextField__default["default"], {
+    label: "Eintrag ausw\xE4hlen",
+    select: true,
+    variant: variant,
+    value: catalogSelectValue,
+    onBlur: handleCancelNewEntry,
     onChange: function onChange(e) {
-      return setEntries([].concat(_toConsumableArray(entries), [e.target.value]));
+      setCatalogSelectValue('');
+      setEntries([].concat(_toConsumableArray(entries), [e.target.value]));
     }
-  }, /*#__PURE__*/React__default["default"].createElement(_MenuItem__default["default"], {
-    value: "please-select",
-    disabled: true
-  }, "Eintrag hinzuf\xFCgen"), Object.entries(catalog).sort(function (a, b) {
+  }, Object.entries(options).sort(function (a, b) {
     return a[1].localeCompare(b[1]);
   }).map(function (e) {
     return /*#__PURE__*/React__default["default"].createElement(_MenuItem__default["default"], {
@@ -32279,9 +32315,10 @@ var FormRepeater = function FormRepeater(_ref) {
 
 FormRepeater.propTypes = {
   variant: PropTypes__default["default"].oneOf(['standard', 'filled', 'outlined']),
-  name: PropTypes__default["default"].string.isRequired,
+  name: PropTypes__default["default"].string,
+  label: PropTypes__default["default"].string,
   value: PropTypes__default["default"].any,
-  catalog: PropTypes__default["default"].object,
+  options: PropTypes__default["default"].object,
   onChange: PropTypes__default["default"].func.isRequired
 };
 
@@ -76092,11 +76129,22 @@ var FormulatorFormSection = /*#__PURE__*/function (_React$Component) {
       var mapEntry = isRender ? renderComponentMap[field] : componentMap[mapKey];
       var component = mapEntry,
           props = {};
+      console.log(schema.properties, fieldEntry);
+
+      if (mapKey === 'array' && schema.properties[fieldEntry].options) {
+        props.options = schema.properties[fieldEntry].options.reduce(function (l, r) {
+          var _translations$fieldEn;
+
+          return _objectSpread$1(_objectSpread$1({}, l), {}, _defineProperty({}, r, (translations === null || translations === void 0 ? void 0 : (_translations$fieldEn = translations[fieldEntry]) === null || _translations$fieldEn === void 0 ? void 0 : _translations$fieldEn[r]) || r));
+        }, {});
+      }
 
       if (mapKey === 'select') {
         props.options = type.map(function (value) {
+          var _translations$field;
+
           return {
-            label: translations[field] && translations[field][value] || value,
+            label: (translations === null || translations === void 0 ? void 0 : (_translations$field = translations.field) === null || _translations$field === void 0 ? void 0 : _translations$field.value) || value,
             value: value
           };
         });

package/dist/index.esm.js

@@ -27,8 +27,7 @@ import { createSvgIcon, unstable_useId, useControlled, useEventCallback, setRef,
 import _MenuItem from '@material-ui/core/esm/MenuItem';
 import _Switch from '@material-ui/core/esm/Switch';
 import _Checkbox from '@material-ui/core/esm/Checkbox';
-import _Select from '@material-ui/core/esm/Select';
-import _InputLabel from '@material-ui/core/esm/InputLabel';
+import _ClickAwayListener from '@material-ui/core/esm/ClickAwayListener';
 import _Clear from '@material-ui/icons/esm/Clear';
 import _Save from '@material-ui/icons/esm/Save';
 import _Button from '@material-ui/core/esm/Button';
@@ -19646,7 +19645,7 @@ function require_Error () {
 
 	  var _super2 = _createSuper(ValidationError);
 
-	  function ValidationError(message, path, validator, options) {
+	  function ValidationError(message, path, validator, options, index) {
 	    var _this2;
 
 	    (0, _classCallCheck2["default"])(this, ValidationError);
@@ -19654,6 +19653,7 @@ function require_Error () {
 	    _this2.path = path;
 	    _this2.validator = validator;
 	    _this2.options = options;
+	    _this2.index = index;
 	    return _this2;
 	  }
 
@@ -28321,24 +28321,36 @@ function requireValidator () {
 		    }
 		  }, {
 		    key: "validateType",
-		    value: function validateType(name, field, value, otherFields) {
+		    value: function validateType(name, field, value, otherFields, index) {
 		      var type = field.type,
 		          validator = field.validator,
 		          options = field.options;
 
+		      if (type === 'array' && validator && Array.isArray(value)) {
+		        for (var i = 0; i < value.length; i++) {
+		          this.validateType(name, {
+		            type: 'string',
+		            validator: validator,
+		            options: options
+		          }, value[i], otherFields, i);
+		        }
+
+		        return true;
+		      }
+
 		      if (validator === undefined) {
-		        if (type === undefined) throw new _Error.SchemaError("Invalid type definition \"".concat(type, "\" at path \"").concat(name, "\"."));
+		        if (type === undefined) throw new _Error.SchemaError("Invalid type definition \"".concat(type, "\" at path \"").concat(name).concat(index ? "[".concat(index, "]") : '', "\"."));
 
 		        if (this.validateBaseType(type, value) === false) {
-		          if (Array.isArray(type)) throw new _Error.ValidationError("\"".concat(value, "\" is not valid for \"").concat(name, "\""), name, 'enum', type);else throw new _Error.ValidationError("\"".concat(value, "\" is not of type \"").concat(type, "\""), name, type);
+		          if (Array.isArray(type)) throw new _Error.ValidationError("invalid value for \"".concat(name).concat(index ? "[".concat(index, "]") : '', "\""), name, 'enum', type, index);else throw new _Error.ValidationError("value is not of type \"".concat(type, "\" in \"").concat(name).concat(index ? "[".concat(index, "]") : '', "\""), name, type, index);
 		        }
 		      } else {
 		        var func = _TypeValidator["default"]["is".concat(validator)];
 
-		        if (typeof func !== 'function') throw new _Error.SchemaError("Unknown validator \"".concat(validator, "\" at path \"").concat(name, "\"."));
+		        if (typeof func !== 'function') throw new _Error.SchemaError("Unknown validator \"".concat(validator, "\" at path \"").concat(name).concat(index ? "[".concat(index, "]") : '', "\"."));
 
 		        if (func(String(value), options, otherFields) === false) {
-		          throw new _Error.ValidationError('invalid', name, validator, options);
+		          throw new _Error.ValidationError('invalid', name, validator, options, index);
 		        }
 		      }
 
@@ -28425,12 +28437,14 @@ function requireValidator () {
 		        this.validateType(name, schema[name], value, data);
 		      } catch (e) {
 		        if (!(e instanceof _Error.ValidationError)) throw e;
-		        return new FieldResult(name, data[name], undefined, isProhibited, isRequired, isOptional, true, [{
+		        var errorEntry = {
 		          message: e.message,
 		          path: e.path,
 		          validator: e.validator,
 		          options: e.options
-		        }]);
+		        };
+		        if (e.index) errorEntry.index = e.index;
+		        return new FieldResult(name, data[name], undefined, isProhibited, isRequired, isOptional, true, [errorEntry]);
 		      }
 
 		      return new FieldResult(name, data[name], this.castType(name, type, value), isProhibited, isRequired, isOptional);
@@ -32063,8 +32077,9 @@ var getValue$1 = function getValue(value, catalog) {
 var FormRepeater = function FormRepeater(_ref) {
   var variant = _ref.variant,
       name = _ref.name,
+      label = _ref.label,
       value = _ref.value,
-      catalog = _ref.catalog,
+      options = _ref.options,
       onChange = _ref.onChange;
 
   var _useState = useState(value || []),
@@ -32082,6 +32097,11 @@ var FormRepeater = function FormRepeater(_ref) {
       inputValue = _useState6[0],
       setInputValue = _useState6[1];
 
+  var _useState7 = useState(''),
+      _useState8 = _slicedToArray(_useState7, 2),
+      catalogSelectValue = _useState8[0],
+      setCatalogSelectValue = _useState8[1];
+
   var handleEntryAdd = function handleEntryAdd() {
     if (inputValue.length > 0) {
       setEntries([].concat(_toConsumableArray(entries), [inputValue]));
@@ -32092,6 +32112,7 @@ var FormRepeater = function FormRepeater(_ref) {
   var handleCancelNewEntry = function handleCancelNewEntry() {
     setInEdit(false);
     setInputValue('');
+    setCatalogSelectValue('');
   };
 
   var handleEntryDel = function handleEntryDel(delIndex) {
@@ -32112,15 +32133,23 @@ var FormRepeater = function FormRepeater(_ref) {
   }, [entries]);
   var blockedOptions = [];
 
-  if (catalog) {
-    blockedOptions = Object.entries(catalog).filter(function (e) {
-      return value.includes(e[0]);
+  if (options) {
+    blockedOptions = Object.entries(options).filter(function (e) {
+      return Array.isArray(value) && value.includes(e[0]);
     }).map(function (e) {
       return e[0];
     });
   }
 
-  return /*#__PURE__*/React__default.createElement(_Box, null, /*#__PURE__*/React__default.createElement(_List, {
+  return /*#__PURE__*/React__default.createElement(_Box, null, /*#__PURE__*/React__default.createElement(_Typography, {
+    variant: "body1"
+  }, label), (!entries || (entries === null || entries === void 0 ? void 0 : entries.length) === 0) && /*#__PURE__*/React__default.createElement(_Box, {
+    mt: 1,
+    pl: 2
+  }, /*#__PURE__*/React__default.createElement(_Typography, {
+    variant: "body2",
+    color: "textSecondary"
+  }, "Keine Eintr\xE4ge vorhanden")), /*#__PURE__*/React__default.createElement(_List, {
     dense: true
   }, entries.map(function (entry, index) {
     return (
@@ -32129,7 +32158,7 @@ var FormRepeater = function FormRepeater(_ref) {
       React__default.createElement(_ListItem, {
         key: "entry-".concat(index)
       }, /*#__PURE__*/React__default.createElement(_ListItemText, {
-        primary: getValue$1(entry, catalog)
+        primary: getValue$1(entry, options)
       }), /*#__PURE__*/React__default.createElement(_ListItemSecondaryAction, null, /*#__PURE__*/React__default.createElement(_IconButton, {
         edge: "end",
         "aria-label": "delete",
@@ -32147,10 +32176,16 @@ var FormRepeater = function FormRepeater(_ref) {
     onClick: function onClick() {
       return setInEdit(true);
     }
-  }, "Eintrag hinzuf\xFCgen")), inEdit && !catalog && /*#__PURE__*/React__default.createElement(_Box, {
+  }, "Eintr\xE4ge hinzuf\xFCgen")), inEdit && !options && /*#__PURE__*/React__default.createElement(_Box, {
     width: "100%",
     display: "flex",
     alignItems: "center"
+  }, /*#__PURE__*/React__default.createElement(_ClickAwayListener, {
+    onClickAway: function onClickAway() {
+      if (inputValue === '') {
+        setInEdit(false);
+      }
+    }
   }, /*#__PURE__*/React__default.createElement(_FormControl, {
     variant: "filled",
     fullWidth: true
@@ -32182,22 +32217,24 @@ var FormRepeater = function FormRepeater(_ref) {
     onChange: function onChange(e) {
       return setInputValue(e.target.value);
     }
-  }))), inEdit && catalog && /*#__PURE__*/React__default.createElement(_Box, {
+  })))), inEdit && options && /*#__PURE__*/React__default.createElement(_Box, {
     width: "100%",
     display: "flex",
     alignItems: "center"
   }, /*#__PURE__*/React__default.createElement(_FormControl, {
     variant: "filled",
     fullWidth: true
-  }, /*#__PURE__*/React__default.createElement(_InputLabel, null, "Neuer Eintrag"), /*#__PURE__*/React__default.createElement(_Select, {
-    defaultValue: "please-select",
+  }, /*#__PURE__*/React__default.createElement(_TextField, {
+    label: "Eintrag ausw\xE4hlen",
+    select: true,
+    variant: variant,
+    value: catalogSelectValue,
+    onBlur: handleCancelNewEntry,
     onChange: function onChange(e) {
-      return setEntries([].concat(_toConsumableArray(entries), [e.target.value]));
+      setCatalogSelectValue('');
+      setEntries([].concat(_toConsumableArray(entries), [e.target.value]));
     }
-  }, /*#__PURE__*/React__default.createElement(_MenuItem, {
-    value: "please-select",
-    disabled: true
-  }, "Eintrag hinzuf\xFCgen"), Object.entries(catalog).sort(function (a, b) {
+  }, Object.entries(options).sort(function (a, b) {
     return a[1].localeCompare(b[1]);
   }).map(function (e) {
     return /*#__PURE__*/React__default.createElement(_MenuItem, {
@@ -32210,9 +32247,10 @@ var FormRepeater = function FormRepeater(_ref) {
 
 FormRepeater.propTypes = {
   variant: PropTypes__default.oneOf(['standard', 'filled', 'outlined']),
-  name: PropTypes__default.string.isRequired,
+  name: PropTypes__default.string,
+  label: PropTypes__default.string,
   value: PropTypes__default.any,
-  catalog: PropTypes__default.object,
+  options: PropTypes__default.object,
   onChange: PropTypes__default.func.isRequired
 };
 
@@ -76023,11 +76061,22 @@ var FormulatorFormSection = /*#__PURE__*/function (_React$Component) {
       var mapEntry = isRender ? renderComponentMap[field] : componentMap[mapKey];
       var component = mapEntry,
           props = {};
+      console.log(schema.properties, fieldEntry);
+
+      if (mapKey === 'array' && schema.properties[fieldEntry].options) {
+        props.options = schema.properties[fieldEntry].options.reduce(function (l, r) {
+          var _translations$fieldEn;
+
+          return _objectSpread$1(_objectSpread$1({}, l), {}, _defineProperty({}, r, (translations === null || translations === void 0 ? void 0 : (_translations$fieldEn = translations[fieldEntry]) === null || _translations$fieldEn === void 0 ? void 0 : _translations$fieldEn[r]) || r));
+        }, {});
+      }
 
       if (mapKey === 'select') {
         props.options = type.map(function (value) {
+          var _translations$field;
+
           return {
-            label: translations[field] && translations[field][value] || value,
+            label: (translations === null || translations === void 0 ? void 0 : (_translations$field = translations.field) === null || _translations$field === void 0 ? void 0 : _translations$field.value) || value,
             value: value
           };
         });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scenid/react-formulator",
-  "version": "0.4.4",
+  "version": "0.5.0",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
   "repository": "https://dennykoch@bitbucket.org/scenid/react-formulator.git",
@@ -46,7 +46,7 @@
     "@rollup/plugin-commonjs": "^22.0.0",
     "@rollup/plugin-node-resolve": "^13.2.1",
     "@scenid/cloud-icons": "^2.6.0",
-    "@scenid/formulator": "^2.0.2",
+    "@scenid/formulator": "^2.1.1",
     "@storybook/addon-actions": "^6.4.22",
     "@storybook/addon-essentials": "^6.4.22",
     "@storybook/addon-interactions": "^6.4.22",

package/src/Editable/FormRepeater.jsx

@@ -12,9 +12,9 @@ import {
   IconButton,
   InputAdornment,
   FormControl,
-  InputLabel,
-  Select,
-  MenuItem
+  Typography,
+  MenuItem,
+  ClickAwayListener
 } from '@material-ui/core'
 
 import {
@@ -28,10 +28,11 @@ const getValue = (value, catalog) => {
   return value
 }
 
-const FormRepeater = ({ variant, name, value, catalog, onChange }) => {
+const FormRepeater = ({ variant, name, label, value, options, onChange }) => {
   const [entries, setEntries] = useState(value || [])
   const [inEdit, setInEdit] = useState(false)
   const [inputValue, setInputValue] = useState('')
+  const [catalogSelectValue, setCatalogSelectValue] = useState('')
 
   const handleEntryAdd = () => {
     if (inputValue.length > 0) {
@@ -43,6 +44,7 @@ const FormRepeater = ({ variant, name, value, catalog, onChange }) => {
   const handleCancelNewEntry = () => {
     setInEdit(false)
     setInputValue('')
+    setCatalogSelectValue('')
   }
 
   const handleEntryDel = delIndex => {
@@ -57,18 +59,31 @@ const FormRepeater = ({ variant, name, value, catalog, onChange }) => {
   }, [entries])
 
   let blockedOptions = []
-  if (catalog) {
-    blockedOptions = Object.entries(catalog).filter(e => value.includes(e[0])).map(e => e[0])
+  if (options) {
+    blockedOptions = Object.entries(options).filter(e => Array.isArray(value) && value.includes(e[0])).map(e => e[0])
   }
 
   return (
     <Box>
+      <Typography variant="body1">
+        {label}
+      </Typography>
+      {
+        (!entries || entries?.length === 0)
+          && (
+            <Box mt={1} pl={2}>
+              <Typography variant="body2" color="textSecondary">
+                Keine Einträge vorhanden
+              </Typography>
+            </Box>
+          )
+      }
       <List dense>
         {
           entries.map((entry, index) => (
             // eslint-disable-next-line react/no-array-index-key
             <ListItem key={`entry-${index}`}>
-              <ListItemText primary={getValue(entry, catalog)} />
+              <ListItemText primary={getValue(entry, options)} />
               <ListItemSecondaryAction>
                 <IconButton
                   edge="end"
@@ -92,53 +107,61 @@ const FormRepeater = ({ variant, name, value, catalog, onChange }) => {
                 variant="outlined"
                 onClick={() => setInEdit(true)}
               >
-                Eintrag hinzufügen
+                Einträge hinzufügen
               </Button>
             </Box>
           )
       }
       {
-        (inEdit && !catalog)
+        (inEdit && !options)
           && (
             <Box
               width="100%"
               display="flex"
               alignItems="center"
             >
-              <FormControl
-                variant="filled"
-                fullWidth
+              <ClickAwayListener
+                onClickAway={() => {
+                  if (inputValue === '') {
+                    setInEdit(false)
+                  }
+                }}
               >
-                <TextField
-                  label="Neuer Eintrag"
-                  variant={variant}
-                  value={inputValue}
-                  InputProps={{
-                    endAdornment: (
-                      <InputAdornment position="end">
-                        <Box mr={1}>
-                          <IconButton size="small" onClick={handleEntryAdd}>
-                            <SaveIcon fontSize="small" />
+                <FormControl
+                  variant="filled"
+                  fullWidth
+                >
+                  <TextField
+                    label="Neuer Eintrag"
+                    variant={variant}
+                    value={inputValue}
+                    InputProps={{
+                      endAdornment: (
+                        <InputAdornment position="end">
+                          <Box mr={1}>
+                            <IconButton size="small" onClick={handleEntryAdd}>
+                              <SaveIcon fontSize="small" />
+                            </IconButton>
+                          </Box>
+                          <IconButton size="small" onClick={handleCancelNewEntry}>
+                            <ClearIcon fontSize="small" />
                           </IconButton>
-                        </Box>
-                        <IconButton size="small" onClick={handleCancelNewEntry}>
-                          <ClearIcon fontSize="small" />
-                        </IconButton>
-                      </InputAdornment>
-                    )
-                  }}
-                  onKeyDown={e => {
-                    if (e.key === 'Enter') handleEntryAdd()
-                    if (e.key === 'Escape') handleCancelNewEntry()
-                  }}
-                  onChange={e => setInputValue(e.target.value)}
-                />
-              </FormControl>
+                        </InputAdornment>
+                      )
+                    }}
+                    onKeyDown={e => {
+                      if (e.key === 'Enter') handleEntryAdd()
+                      if (e.key === 'Escape') handleCancelNewEntry()
+                    }}
+                    onChange={e => setInputValue(e.target.value)}
+                  />
+                </FormControl>
+              </ClickAwayListener>
             </Box>
           )
       }
       {
-        (inEdit && catalog)
+        (inEdit && options)
           && (
             <Box
               width="100%"
@@ -149,17 +172,20 @@ const FormRepeater = ({ variant, name, value, catalog, onChange }) => {
                 variant="filled"
                 fullWidth
               >
-                <InputLabel>Neuer Eintrag</InputLabel>
-                <Select
-                  defaultValue="please-select"
-                  onChange={e => setEntries([...entries, e.target.value])}
+                <TextField
+                  label="Eintrag auswählen"
+                  select
+                  variant={variant}
+                  value={catalogSelectValue}
+                  onBlur={handleCancelNewEntry}
+                  onChange={e => {
+                    setCatalogSelectValue('')
+                    setEntries([...entries, e.target.value])
+                  }}
                 >
-                  <MenuItem value="please-select" disabled>
-                    Eintrag hinzufügen
-                  </MenuItem>
                   {
                     Object
-                      .entries(catalog)
+                      .entries(options)
                       .sort((a, b) => a[1].localeCompare(b[1]))
                       .map(e => (
                         <MenuItem
@@ -171,7 +197,7 @@ const FormRepeater = ({ variant, name, value, catalog, onChange }) => {
                         </MenuItem>
                       ))
                   }
-                </Select>
+                </TextField>
               </FormControl>
             </Box>
           )
@@ -182,9 +208,10 @@ const FormRepeater = ({ variant, name, value, catalog, onChange }) => {
 
 FormRepeater.propTypes = {
   variant: PropTypes.oneOf(['standard', 'filled', 'outlined']),
-  name: PropTypes.string.isRequired,
+  name: PropTypes.string,
+  label: PropTypes.string,
   value: PropTypes.any,
-  catalog: PropTypes.object,
+  options: PropTypes.object,
   onChange: PropTypes.func.isRequired
 }
 

package/src/FormulatorFormSection.jsx

@@ -110,14 +110,21 @@ class FormulatorFormSection extends React.Component {
     const mapEntry = isRender ? renderComponentMap[field] : componentMap[mapKey]
     let component = mapEntry, props = {}
 
+    console.log(schema.properties, fieldEntry)
+    if (mapKey === 'array' && schema.properties[fieldEntry].options) {
+      props.options = (
+        schema.properties[fieldEntry].options
+          .reduce((l, r) => ({
+            ...l,
+            [r]: translations?.[fieldEntry]?.[r] || r
+          }), {})
+      )
+    }
+
     if (mapKey === 'select') {
       props.options = (
         type.map(value => ({
-          label: (
-            translations[field]
-            && translations[field][value]
-          )
-          || value,
+          label: translations?.field?.value || value,
           value
         }))
       )

package/stories/Forms.stories.jsx

@@ -135,7 +135,15 @@ Types.args = {
       />
     )
   },
-  translations: typesTranslations,
+  translations: {
+    ...typesTranslations,
+    arrayCatalogRepeater: {
+      cat: 'Mieze',
+      dog: 'Doggo',
+      fish: 'Fishy',
+      horse: 'Horsy'
+    }
+  },
   data: {
     hiddenDataInput: 'Data we do not want to show in Video Calls',
     hiddenGroupInput1: 'sensitive data',

package/stories/forms/types.schemas.js

@@ -171,6 +171,21 @@ const inputs = [
     render: ['arrayRepeater'],
     validation: { type: 'array' }
   },
+  {
+    label: 'Repeater with Catalog',
+    key: 'arrayCatalogRepeater',
+    render: ['arrayCatalogRepeater'],
+    validation: {
+      type: 'array',
+      validator: 'In',
+      options: [
+        'cat',
+        'dog',
+        'fish',
+        'horse'
+      ]
+    }
+  },
   {
     label: 'Autocomplete Field',
     desc: 'You can supply an array of options or an async function to fetch options on the fly.',