@scenid/react-formulator 0.1.10 → 0.1.11

package/dist/index.cjs.js

@@ -9,6 +9,7 @@ var cx = require('classnames');
 var styles$n = require('@material-ui/styles');
 var AutorenewIcon = require('@material-ui/icons/Autorenew');
 var icons = require('@material-ui/icons');
+var luxon = require('luxon');
 var path$3 = require('path');
 var proc = require('process');
 var url = require('url');
@@ -29170,7 +29171,6 @@ var useStyles = styles$n.makeStyles(function (theme) {
 var FormControlField$1 = function FormControlField(_ref) {
   var variant = _ref.variant,
       type = _ref.type,
-      isRender = _ref.isRender,
       name = _ref.name,
       label = _ref.label,
       component = _ref.component,
@@ -29199,6 +29199,8 @@ var FormControlField$1 = function FormControlField(_ref) {
     onChange: onChange
   });
 
+  var isRender = type === 'render';
+
   if (validating) {
     finalProps.endAdornment = [/*#__PURE__*/React__default["default"].createElement(core$1.InputAdornment, {
       position: "end"
@@ -29248,7 +29250,6 @@ var FormControlField$1 = function FormControlField(_ref) {
 
 FormControlField$1.propTypes = {
   variant: PropTypes__default["default"].oneOf(['standard', 'filled', 'outlined']),
-  isRender: PropTypes__default["default"].bool,
   component: PropTypes__default["default"].any.isRequired,
   componentProps: PropTypes__default["default"].object,
   type: PropTypes__default["default"].string.isRequired,
@@ -29292,7 +29293,6 @@ var FormField = function FormField(_ref2) {
 
 FormField.propTypes = {
   variant: PropTypes__default["default"].oneOf(['standard', 'filled', 'outlined']),
-  isRender: PropTypes__default["default"].bool,
   component: PropTypes__default["default"].any.isRequired,
   componentProps: PropTypes__default["default"].object,
   type: PropTypes__default["default"].string.isRequired,
@@ -29399,11 +29399,12 @@ FormNumber.propTypes = {
   onChange: PropTypes__default["default"].func.isRequired
 };
 
-var _excluded$3 = ["options", "required"];
+var _excluded$3 = ["options", "required", "value"];
 
 var FormSelect = function FormSelect(_ref) {
   var options = _ref.options,
       required = _ref.required,
+      value = _ref.value,
       props = _objectWithoutProperties(_ref, _excluded$3);
 
   var unselectOption = [];
@@ -29420,7 +29421,8 @@ var FormSelect = function FormSelect(_ref) {
   })));
   return /*#__PURE__*/React__default["default"].createElement(core$1.TextField, _extends({
     select: true,
-    required: required
+    required: required,
+    value: value === undefined ? '' : value
   }, props), allOptions.map(function (_ref2) {
     var itemLabel = _ref2.label,
         itemValue = _ref2.value;
@@ -29702,7 +29704,7 @@ function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if
 function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var FormControlField = function FormControlField(_ref) {
-  var isRender = _ref.isRender,
+  var type = _ref.type,
       name = _ref.name,
       label = _ref.label,
       component = _ref.component,
@@ -29725,7 +29727,7 @@ var FormControlField = function FormControlField(_ref) {
   }
 
   var control;
-  if (isRender) control = /*#__PURE__*/React__default["default"].cloneElement(component, finalProps);else control = /*#__PURE__*/React__default["default"].createElement(component, finalProps);
+  if (type === 'render') control = /*#__PURE__*/React__default["default"].cloneElement(component, finalProps);else control = /*#__PURE__*/React__default["default"].createElement(component, finalProps);
   return /*#__PURE__*/React__default["default"].createElement(core$1.Box, {
     width: "100%",
     display: "flex",
@@ -29738,10 +29740,10 @@ var FormControlField = function FormControlField(_ref) {
 };
 
 FormControlField.propTypes = {
-  isRender: PropTypes__default["default"].bool,
   component: PropTypes__default["default"].any.isRequired,
   componentProps: PropTypes__default["default"].object,
   name: PropTypes__default["default"].string.isRequired,
+  type: PropTypes__default["default"].string.isRequired,
   label: PropTypes__default["default"].string.isRequired,
   value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number, PropTypes__default["default"].bool, PropTypes__default["default"].array]),
   options: PropTypes__default["default"].arrayOf(PropTypes__default["default"].shape({
@@ -29800,14 +29802,21 @@ FormReadOnlyField.propTypes = {
 };
 var FormReadOnlyField$1 = /*#__PURE__*/React__default["default"].memo(FormReadOnlyField);
 
-var ReadOnlyText = function ReadOnlyText(_ref) {
-  var value = _ref.value;
+var FormReadOnlyText = function FormReadOnlyText(_ref) {
+  var value = _ref.value,
+      type = _ref.type;
+  var finalValue = value;
+
+  if (type === 'date' || type === 'datetime-local') {
+    finalValue = luxon.DateTime.fromISO(value).toLocaleString(luxon.DateTime.DATE_MED_WITH_WEEKDAY);
+  }
+
   return /*#__PURE__*/React__default["default"].createElement(core$1.Typography, {
     variant: "body1"
-  }, value);
+  }, finalValue);
 };
 
-ReadOnlyText.propTypes = {
+FormReadOnlyText.propTypes = {
   value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string])
 };
 
@@ -68022,7 +68031,7 @@ FormReadOnlyMarkdown.propTypes = {
 
 var FormReadOnlyNumber = function FormReadOnlyNumber(_ref) {
   var value = _ref.value;
-  return /*#__PURE__*/React__default["default"].createElement(ReadOnlyText, {
+  return /*#__PURE__*/React__default["default"].createElement(FormReadOnlyText, {
     value: castToNumber(value)
   });
 };
@@ -68036,7 +68045,7 @@ var FormReadOnlySelect = function FormReadOnlySelect(_ref) {
 
   var value = _ref.value,
       options = _ref.options;
-  return /*#__PURE__*/React__default["default"].createElement(ReadOnlyText, {
+  return /*#__PURE__*/React__default["default"].createElement(FormReadOnlyText, {
     value: (_options$find = options.find(function (o) {
       return o.value === value;
     })) === null || _options$find === void 0 ? void 0 : _options$find.label
@@ -75448,9 +75457,9 @@ function _createSuper$1(Derived) { var hasNativeReflectConstruct = _isNativeRefl
 
 function _isNativeReflectConstruct$1() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 var formReadOnlyComponentMap = {
-  "default": ReadOnlyText,
+  "default": FormReadOnlyText,
   markdown: FormReadOnlyMarkdown,
-  string: ReadOnlyText,
+  string: FormReadOnlyText,
   number: FormReadOnlyNumber,
   select: FormReadOnlySelect,
   "boolean": FormReadOnlyBoolean,
@@ -75492,17 +75501,23 @@ var FormulatorFormSection = /*#__PURE__*/function (_React$Component) {
           errorMessages = _this$props.errorMessages,
           results = _this$props.results,
           data = _this$props.data,
-          fieldStates = _this$props.fieldStates;
+          fieldStates = _this$props.fieldStates,
+          renderComponentMap = _this$props.renderComponentMap;
       var field = fieldEntry,
           specialProps = {};
 
       if (Array.isArray(fieldEntry)) {
         if (fieldEntry[0] === '@@render') {
           field = fieldEntry[1];
-          specialProps = _objectSpread$1({
-            isRender: true
-          }, fieldEntry[2] || {});
-        } else if (fieldEntry[0] === '@@markdown') {
+          return {
+            type: 'render',
+            name: field,
+            component: renderComponentMap[field],
+            componentProps: fieldEntry[2] || {}
+          };
+        }
+
+        if (fieldEntry[0] === '@@markdown') {
           return {
             type: 'markdown',
             name: fieldEntry[1],
@@ -75511,11 +75526,11 @@ var FormulatorFormSection = /*#__PURE__*/function (_React$Component) {
               content: fieldEntry[2]
             }
           };
-        } else {
-          field = fieldEntry[0];
-          if (!fieldEntry[1]) throw new Error("field \"".concat(field, "\" is defined in an array, but has no props definition"));
-          specialProps = fieldEntry[1];
         }
+
+        field = fieldEntry[0];
+        if (!fieldEntry[1]) throw new Error("field \"".concat(field, "\" is defined in an array, but has no props definition"));
+        specialProps = fieldEntry[1];
       }
 
       var _specialProps = specialProps,
@@ -75536,8 +75551,8 @@ var FormulatorFormSection = /*#__PURE__*/function (_React$Component) {
           type = _schema$properties$fi.type,
           defaultValue = _schema$properties$fi["default"];
       var mapKey;
-      if (specialProps.isRender) mapKey = type;else if (componentMap[field] !== undefined) mapKey = field;else if (typeof type === 'string' && componentMap[type] !== undefined) mapKey = type;else if (Array.isArray(type)) mapKey = 'select';else if (componentMap["default"] !== undefined) mapKey = 'default';else throw new Error("Could not find a Component to render for \"".concat(field, "\""));
-      var mapEntry = specialProps.isRender ? '@@render' : componentMap[mapKey];
+      if (componentMap[field] !== undefined) mapKey = field;else if (typeof type === 'string' && componentMap[type] !== undefined) mapKey = type;else if (Array.isArray(type)) mapKey = 'select';else if (componentMap["default"] !== undefined) mapKey = 'default';else throw new Error("Could not find a Component to render for \"".concat(field, "\""));
+      var mapEntry = componentMap[mapKey];
       var component = mapEntry,
           props = {};
 
@@ -75641,7 +75656,6 @@ var FormulatorFormSection = /*#__PURE__*/function (_React$Component) {
             type: _type,
             label: _label,
             value: _value,
-            isRender: true,
             required: _required,
             hasErrors: _hasErrors,
             errors: _errors,
@@ -76441,7 +76455,7 @@ exports.FormReadOnlyMarkdown = FormReadOnlyMarkdown;
 exports.FormReadOnlyNumber = FormReadOnlyNumber;
 exports.FormReadOnlyRepeater = FormReadOnlyRepeater;
 exports.FormReadOnlySelect = FormReadOnlySelect;
-exports.FormReadOnlyText = ReadOnlyText;
+exports.FormReadOnlyText = FormReadOnlyText;
 exports.FormRepeater = FormRepeater;
 exports.FormSelect = FormSelect;
 exports.FormText = FormText;

package/dist/index.esm.js

@@ -7,6 +7,7 @@ import cx from 'classnames';
 import { makeStyles as makeStyles$1 } from '@material-ui/styles';
 import AutorenewIcon from '@material-ui/icons/Autorenew';
 import { Delete, Save, Clear } from '@material-ui/icons';
+import { DateTime } from 'luxon';
 import path$3 from 'path';
 import proc from 'process';
 import { fileURLToPath } from 'url';
@@ -29126,7 +29127,6 @@ var useStyles = makeStyles$1(function (theme) {
 var FormControlField$1 = function FormControlField(_ref) {
   var variant = _ref.variant,
       type = _ref.type,
-      isRender = _ref.isRender,
       name = _ref.name,
       label = _ref.label,
       component = _ref.component,
@@ -29155,6 +29155,8 @@ var FormControlField$1 = function FormControlField(_ref) {
     onChange: onChange
   });
 
+  var isRender = type === 'render';
+
   if (validating) {
     finalProps.endAdornment = [/*#__PURE__*/React__default.createElement(InputAdornment, {
       position: "end"
@@ -29204,7 +29206,6 @@ var FormControlField$1 = function FormControlField(_ref) {
 
 FormControlField$1.propTypes = {
   variant: PropTypes__default.oneOf(['standard', 'filled', 'outlined']),
-  isRender: PropTypes__default.bool,
   component: PropTypes__default.any.isRequired,
   componentProps: PropTypes__default.object,
   type: PropTypes__default.string.isRequired,
@@ -29248,7 +29249,6 @@ var FormField = function FormField(_ref2) {
 
 FormField.propTypes = {
   variant: PropTypes__default.oneOf(['standard', 'filled', 'outlined']),
-  isRender: PropTypes__default.bool,
   component: PropTypes__default.any.isRequired,
   componentProps: PropTypes__default.object,
   type: PropTypes__default.string.isRequired,
@@ -29355,11 +29355,12 @@ FormNumber.propTypes = {
   onChange: PropTypes__default.func.isRequired
 };
 
-var _excluded$3 = ["options", "required"];
+var _excluded$3 = ["options", "required", "value"];
 
 var FormSelect = function FormSelect(_ref) {
   var options = _ref.options,
       required = _ref.required,
+      value = _ref.value,
       props = _objectWithoutProperties(_ref, _excluded$3);
 
   var unselectOption = [];
@@ -29376,7 +29377,8 @@ var FormSelect = function FormSelect(_ref) {
   })));
   return /*#__PURE__*/React__default.createElement(TextField, _extends({
     select: true,
-    required: required
+    required: required,
+    value: value === undefined ? '' : value
   }, props), allOptions.map(function (_ref2) {
     var itemLabel = _ref2.label,
         itemValue = _ref2.value;
@@ -29658,7 +29660,7 @@ function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if
 function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var FormControlField = function FormControlField(_ref) {
-  var isRender = _ref.isRender,
+  var type = _ref.type,
       name = _ref.name,
       label = _ref.label,
       component = _ref.component,
@@ -29681,7 +29683,7 @@ var FormControlField = function FormControlField(_ref) {
   }
 
   var control;
-  if (isRender) control = /*#__PURE__*/React__default.cloneElement(component, finalProps);else control = /*#__PURE__*/React__default.createElement(component, finalProps);
+  if (type === 'render') control = /*#__PURE__*/React__default.cloneElement(component, finalProps);else control = /*#__PURE__*/React__default.createElement(component, finalProps);
   return /*#__PURE__*/React__default.createElement(Box, {
     width: "100%",
     display: "flex",
@@ -29694,10 +29696,10 @@ var FormControlField = function FormControlField(_ref) {
 };
 
 FormControlField.propTypes = {
-  isRender: PropTypes__default.bool,
   component: PropTypes__default.any.isRequired,
   componentProps: PropTypes__default.object,
   name: PropTypes__default.string.isRequired,
+  type: PropTypes__default.string.isRequired,
   label: PropTypes__default.string.isRequired,
   value: PropTypes__default.oneOfType([PropTypes__default.string, PropTypes__default.number, PropTypes__default.bool, PropTypes__default.array]),
   options: PropTypes__default.arrayOf(PropTypes__default.shape({
@@ -29756,14 +29758,21 @@ FormReadOnlyField.propTypes = {
 };
 var FormReadOnlyField$1 = /*#__PURE__*/React__default.memo(FormReadOnlyField);
 
-var ReadOnlyText = function ReadOnlyText(_ref) {
-  var value = _ref.value;
+var FormReadOnlyText = function FormReadOnlyText(_ref) {
+  var value = _ref.value,
+      type = _ref.type;
+  var finalValue = value;
+
+  if (type === 'date' || type === 'datetime-local') {
+    finalValue = DateTime.fromISO(value).toLocaleString(DateTime.DATE_MED_WITH_WEEKDAY);
+  }
+
   return /*#__PURE__*/React__default.createElement(Typography, {
     variant: "body1"
-  }, value);
+  }, finalValue);
 };
 
-ReadOnlyText.propTypes = {
+FormReadOnlyText.propTypes = {
   value: PropTypes__default.oneOfType([PropTypes__default.number, PropTypes__default.string])
 };
 
@@ -67978,7 +67987,7 @@ FormReadOnlyMarkdown.propTypes = {
 
 var FormReadOnlyNumber = function FormReadOnlyNumber(_ref) {
   var value = _ref.value;
-  return /*#__PURE__*/React__default.createElement(ReadOnlyText, {
+  return /*#__PURE__*/React__default.createElement(FormReadOnlyText, {
     value: castToNumber(value)
   });
 };
@@ -67992,7 +68001,7 @@ var FormReadOnlySelect = function FormReadOnlySelect(_ref) {
 
   var value = _ref.value,
       options = _ref.options;
-  return /*#__PURE__*/React__default.createElement(ReadOnlyText, {
+  return /*#__PURE__*/React__default.createElement(FormReadOnlyText, {
     value: (_options$find = options.find(function (o) {
       return o.value === value;
     })) === null || _options$find === void 0 ? void 0 : _options$find.label
@@ -75404,9 +75413,9 @@ function _createSuper$1(Derived) { var hasNativeReflectConstruct = _isNativeRefl
 
 function _isNativeReflectConstruct$1() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 var formReadOnlyComponentMap = {
-  "default": ReadOnlyText,
+  "default": FormReadOnlyText,
   markdown: FormReadOnlyMarkdown,
-  string: ReadOnlyText,
+  string: FormReadOnlyText,
   number: FormReadOnlyNumber,
   select: FormReadOnlySelect,
   "boolean": FormReadOnlyBoolean,
@@ -75448,17 +75457,23 @@ var FormulatorFormSection = /*#__PURE__*/function (_React$Component) {
           errorMessages = _this$props.errorMessages,
           results = _this$props.results,
           data = _this$props.data,
-          fieldStates = _this$props.fieldStates;
+          fieldStates = _this$props.fieldStates,
+          renderComponentMap = _this$props.renderComponentMap;
       var field = fieldEntry,
           specialProps = {};
 
       if (Array.isArray(fieldEntry)) {
         if (fieldEntry[0] === '@@render') {
           field = fieldEntry[1];
-          specialProps = _objectSpread$1({
-            isRender: true
-          }, fieldEntry[2] || {});
-        } else if (fieldEntry[0] === '@@markdown') {
+          return {
+            type: 'render',
+            name: field,
+            component: renderComponentMap[field],
+            componentProps: fieldEntry[2] || {}
+          };
+        }
+
+        if (fieldEntry[0] === '@@markdown') {
           return {
             type: 'markdown',
             name: fieldEntry[1],
@@ -75467,11 +75482,11 @@ var FormulatorFormSection = /*#__PURE__*/function (_React$Component) {
               content: fieldEntry[2]
             }
           };
-        } else {
-          field = fieldEntry[0];
-          if (!fieldEntry[1]) throw new Error("field \"".concat(field, "\" is defined in an array, but has no props definition"));
-          specialProps = fieldEntry[1];
         }
+
+        field = fieldEntry[0];
+        if (!fieldEntry[1]) throw new Error("field \"".concat(field, "\" is defined in an array, but has no props definition"));
+        specialProps = fieldEntry[1];
       }
 
       var _specialProps = specialProps,
@@ -75492,8 +75507,8 @@ var FormulatorFormSection = /*#__PURE__*/function (_React$Component) {
           type = _schema$properties$fi.type,
           defaultValue = _schema$properties$fi["default"];
       var mapKey;
-      if (specialProps.isRender) mapKey = type;else if (componentMap[field] !== undefined) mapKey = field;else if (typeof type === 'string' && componentMap[type] !== undefined) mapKey = type;else if (Array.isArray(type)) mapKey = 'select';else if (componentMap["default"] !== undefined) mapKey = 'default';else throw new Error("Could not find a Component to render for \"".concat(field, "\""));
-      var mapEntry = specialProps.isRender ? '@@render' : componentMap[mapKey];
+      if (componentMap[field] !== undefined) mapKey = field;else if (typeof type === 'string' && componentMap[type] !== undefined) mapKey = type;else if (Array.isArray(type)) mapKey = 'select';else if (componentMap["default"] !== undefined) mapKey = 'default';else throw new Error("Could not find a Component to render for \"".concat(field, "\""));
+      var mapEntry = componentMap[mapKey];
       var component = mapEntry,
           props = {};
 
@@ -75597,7 +75612,6 @@ var FormulatorFormSection = /*#__PURE__*/function (_React$Component) {
             type: _type,
             label: _label,
             value: _value,
-            isRender: true,
             required: _required,
             hasErrors: _hasErrors,
             errors: _errors,
@@ -76388,4 +76402,4 @@ FormulatorForm.defaultProps = {
   errorMessages: {}
 };
 
-export { FormBoolean, FormField$1 as FormField, FormNumber, FormReadOnlyBoolean, FormReadOnlyField$1 as FormReadOnlyField, FormReadOnlyMarkdown, FormReadOnlyNumber, FormReadOnlyRepeater, FormReadOnlySelect, ReadOnlyText as FormReadOnlyText, FormRepeater, FormSelect, FormText, FormulatorForm };
+export { FormBoolean, FormField$1 as FormField, FormNumber, FormReadOnlyBoolean, FormReadOnlyField$1 as FormReadOnlyField, FormReadOnlyMarkdown, FormReadOnlyNumber, FormReadOnlyRepeater, FormReadOnlySelect, FormReadOnlyText, FormRepeater, FormSelect, FormText, FormulatorForm };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scenid/react-formulator",
-  "version": "0.1.10",
+  "version": "0.1.11",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
   "repository": "https://dennykoch@bitbucket.org/scenid/react-formulator.git",
@@ -21,6 +21,7 @@
     "@material-ui/icons": "^4.11.3",
     "@material-ui/styles": "^4.11.5",
     "classnames": "^2.3.1",
+    "luxon": "^2.3.2",
     "prop-types": "^15.8.1",
     "react": "16.11.0",
     "react-dom": "16.11.0"
@@ -46,6 +47,7 @@
     "@storybook/testing-library": "^0.0.11",
     "babel-loader": "^8.2.5",
     "classnames": "^2.3.1",
+    "luxon": "^2.3.2",
     "cross-env": "^7.0.3",
     "eslint": "^7.11.0",
     "eslint-config-airbnb": "^18.0.1",

package/src/Editable/FormField.jsx

@@ -21,7 +21,6 @@ const useStyles = makeStyles(theme => ({ error: { color: theme.palette.error.mai
 const FormControlField = ({
   variant,
   type,
-  isRender,
   name,
   label,
   component,
@@ -51,6 +50,8 @@ const FormControlField = ({
     onChange
   }
 
+  const isRender = type === 'render'
+
   if (validating) {
     finalProps.endAdornment = [(
       <InputAdornment position="end">
@@ -127,7 +128,6 @@ const FormControlField = ({
 
 FormControlField.propTypes = {
   variant: PropTypes.oneOf(['standard', 'filled', 'outlined']),
-  isRender: PropTypes.bool,
   component: PropTypes.any.isRequired,
   componentProps: PropTypes.object,
   type: PropTypes.string.isRequired,
@@ -190,7 +190,6 @@ const FormField = ({
 
 FormField.propTypes = {
   variant: PropTypes.oneOf(['standard', 'filled', 'outlined']),
-  isRender: PropTypes.bool,
   component: PropTypes.any.isRequired,
   componentProps: PropTypes.object,
   type: PropTypes.string.isRequired,

package/src/Editable/FormSelect.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 
 import { TextField, MenuItem } from '@material-ui/core'
 
-const FormSelect = ({ options, required, ...props }) => {
+const FormSelect = ({ options, required, value, ...props }) => {
   let unselectOption = []
 
   if (!required) {
@@ -19,6 +19,7 @@ const FormSelect = ({ options, required, ...props }) => {
     <TextField
       select
       required={required}
+      value={value === undefined ? '' : value}
       {...props}
     >
       {

package/src/FormulatorFormSection.jsx

@@ -60,18 +60,23 @@ class FormulatorFormSection extends React.Component {
       errorMessages,
       results,
       data,
-      fieldStates
+      fieldStates,
+      renderComponentMap
     } = this.props
 
     let field = fieldEntry, specialProps = {}
     if (Array.isArray(fieldEntry)) {
       if (fieldEntry[0] === '@@render') {
         field = fieldEntry[1]
-        specialProps = {
-          isRender: true,
-          ...(fieldEntry[2] || {})
-        }
-      } else if (fieldEntry[0] === '@@markdown') {
+        return ({
+          type: 'render',
+          name: field,
+          component: renderComponentMap[field],
+          componentProps: fieldEntry[2] || {}
+        })
+      }
+
+      if (fieldEntry[0] === '@@markdown') {
         return ({
           type: 'markdown',
           name: fieldEntry[1],
@@ -80,11 +85,12 @@ class FormulatorFormSection extends React.Component {
             content: fieldEntry[2]
           }
         })
-      } else {
-        field = fieldEntry[0]
-        if (!fieldEntry[1]) throw new Error(`field "${field}" is defined in an array, but has no props definition`)
-        specialProps = fieldEntry[1]
       }
+
+
+      field = fieldEntry[0]
+      if (!fieldEntry[1]) throw new Error(`field "${field}" is defined in an array, but has no props definition`)
+      specialProps = fieldEntry[1]
     }
 
     const { hidden, hideLabel, ...extraProps } = specialProps
@@ -98,14 +104,13 @@ class FormulatorFormSection extends React.Component {
     const { type, default: defaultValue } = schema.properties[field]
 
     let mapKey
-    if (specialProps.isRender) mapKey = type
-    else if (componentMap[field] !== undefined) mapKey = field
+    if (componentMap[field] !== undefined) mapKey = field
     else if (typeof type === 'string' && componentMap[type] !== undefined) mapKey = type
     else if (Array.isArray(type)) mapKey = 'select'
     else if (componentMap.default !== undefined) mapKey = 'default'
     else throw new Error(`Could not find a Component to render for "${field}"`)
 
-    const mapEntry = specialProps.isRender ? '@@render' : componentMap[mapKey]
+    const mapEntry = componentMap[mapKey]
     let component = mapEntry, props = {}
 
     if (mapKey === 'select') {
@@ -219,7 +224,6 @@ class FormulatorFormSection extends React.Component {
                   type,
                   label,
                   value,
-                  isRender: true,
                   required,
                   hasErrors,
                   errors,

package/src/ReadOnly/FormReadOnlyField.jsx

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
 import { Typography, Box } from '@material-ui/core'
 
 const FormControlField = ({
-  isRender,
+  type,
   name,
   label,
   component,
@@ -28,7 +28,7 @@ const FormControlField = ({
   }
 
   let control
-  if (isRender) control = React.cloneElement(component, finalProps)
+  if (type === 'render') control = React.cloneElement(component, finalProps)
   else control = React.createElement(component, finalProps)
 
   return (
@@ -55,10 +55,10 @@ const FormControlField = ({
 }
 
 FormControlField.propTypes = {
-  isRender: PropTypes.bool,
   component: PropTypes.any.isRequired,
   componentProps: PropTypes.object,
   name: PropTypes.string.isRequired,
+  type: PropTypes.string.isRequired,
   label: PropTypes.string.isRequired,
   value: PropTypes.oneOfType([
     PropTypes.string,

package/src/ReadOnly/FormReadOnlyText.jsx

@@ -3,17 +3,27 @@ import PropTypes from 'prop-types'
 
 import { Typography } from '@material-ui/core'
 
-const ReadOnlyText = ({ value }) => (
-  <Typography variant="body1">
-    {value}
-  </Typography>
-)
+import { DateTime } from 'luxon'
 
-ReadOnlyText.propTypes = {
+const FormReadOnlyText = ({ value, type }) => {
+  let finalValue = value
+
+  if (type === 'date' || type === 'datetime-local') {
+    finalValue = DateTime.fromISO(value).toLocaleString(DateTime.DATE_MED_WITH_WEEKDAY)
+  }
+
+  return (
+    <Typography variant="body1">
+      {finalValue}
+    </Typography>
+  )
+}
+
+FormReadOnlyText.propTypes = {
   value: PropTypes.oneOfType([
     PropTypes.number,
     PropTypes.string
   ])
 }
 
-export default ReadOnlyText
+export default FormReadOnlyText

package/stories/Forms.stories.jsx

@@ -157,7 +157,9 @@ RLP.args = {
     'invalid-fax': "Ungültige Faxnummer"
   },
   data: {
-    ouType: 'private-medical-practice'
+    ouType: 'private-medical-practice',
+    hasBank: true,
+    bankValidFrom: '2022-08-14'
   },
   renderComponentMap: {
     // contacts: <RoleContactsRepeater />,

package/stories/forms/rlp.render.schema.json

@@ -7,12 +7,7 @@
       "fields": [
         "active",
         "ouType",
-        [
-          "name",
-          {
-            "action": "copy"
-          }
-        ],
+        "name",
         "legalForm"
       ]
     },
@@ -83,9 +78,7 @@
       "label": "Onkologisches Zentrum",
       "id": "oncologyCenterData",
       "fields": [
-        [
-          "oncologyCenterType"
-        ],
+        "oncologyCenterType",
         "oncologyCenterId",
         "isCertifiedOncologyCenter",
         "oncologyCenterCertificate",
@@ -135,7 +128,12 @@
         "bankAccountOwner",
         "iban",
         "bankNote",
-        "bankValidFrom"
+        [
+          "bankValidFrom",
+          {
+            "type": "date"
+          }
+        ]
       ]
     },
     {
@@ -150,25 +148,6 @@
         "city",
         "countryCode"
       ]
-    },
-    {
-      "label": "Verbünde (Alt)",
-      "id": "federations",
-      "fields": [
-        "federationHead",
-        "federationMembers"
-      ]
-    },
-    {
-      "label": "Kontaktdaten (Alt)",
-      "id": "contactOld",
-      "fields": [
-        "phonePrefix",
-        "phone",
-        "faxPrefix",
-        "fax",
-        "email"
-      ]
     }
   ]
 }

package/stories/forms/rlp.validation.schema.json

@@ -1,8 +1,7 @@
 {
   "properties": {
     "active": {
-      "type": "boolean",
-      "default": true
+      "type": "boolean"
     },
     "name": {
       "type": "string",
@@ -61,26 +60,6 @@
         "sdoer"
       ]
     },
-    "federationHead": {
-      "type": "string",
-      "required": {
-        "ouType": [
-          "federation-center",
-          "federation-reporting",
-          "federation-accounting"
-        ]
-      }
-    },
-    "federationMembers": {
-      "type": "array",
-      "required": {
-        "ouType": [
-          "federation-center",
-          "federation-reporting",
-          "federation-accounting"
-        ]
-      }
-    },
     "oncologyCenterId": {
       "type": "string",
       "required": {
@@ -415,7 +394,6 @@
     },
     "isReportingActive": {
       "type": "boolean",
-      "default": true,
       "required": {
         "isReporting": true
       },
@@ -1565,543 +1543,6 @@
         ]
       }
     },
-    "phonePrefix": {
-      "type": [
-        "de",
-        "at",
-        "ch",
-        "af",
-        "al",
-        "dz",
-        "as",
-        "ad",
-        "ao",
-        "ai",
-        "ag",
-        "ar",
-        "am",
-        "aw",
-        "au",
-        "az",
-        "bs",
-        "bh",
-        "bd",
-        "bb",
-        "by",
-        "be",
-        "bz",
-        "bj",
-        "bm",
-        "bt",
-        "ba",
-        "bw",
-        "br",
-        "io",
-        "bg",
-        "bf",
-        "bi",
-        "kh",
-        "cm",
-        "ca",
-        "cv",
-        "ky",
-        "cf",
-        "td",
-        "cl",
-        "cn",
-        "cx",
-        "co",
-        "km",
-        "cg",
-        "ck",
-        "cr",
-        "hr",
-        "cu",
-        "cy",
-        "cz",
-        "dk",
-        "dj",
-        "dm",
-        "do",
-        "ec",
-        "eg",
-        "sv",
-        "gq",
-        "er",
-        "ee",
-        "et",
-        "fo",
-        "fj",
-        "fi",
-        "fr",
-        "gf",
-        "pf",
-        "ga",
-        "gm",
-        "ge",
-        "gh",
-        "gi",
-        "gr",
-        "gl",
-        "gd",
-        "gp",
-        "gu",
-        "gt",
-        "gn",
-        "gw",
-        "gy",
-        "ht",
-        "hn",
-        "hu",
-        "is",
-        "in",
-        "id",
-        "iq",
-        "ie",
-        "il",
-        "it",
-        "jm",
-        "jp",
-        "jo",
-        "kz",
-        "ke",
-        "ki",
-        "kw",
-        "kg",
-        "lv",
-        "lb",
-        "ls",
-        "lr",
-        "li",
-        "lt",
-        "lu",
-        "mg",
-        "mw",
-        "my",
-        "mv",
-        "ml",
-        "mt",
-        "mh",
-        "mq",
-        "mr",
-        "mu",
-        "yt",
-        "mx",
-        "mc",
-        "mn",
-        "me",
-        "ms",
-        "ma",
-        "mm",
-        "na",
-        "nr",
-        "np",
-        "nl",
-        "an",
-        "nc",
-        "nz",
-        "ni",
-        "ne",
-        "ng",
-        "nu",
-        "nf",
-        "mp",
-        "no",
-        "om",
-        "pk",
-        "pw",
-        "pa",
-        "pg",
-        "py",
-        "pe",
-        "ph",
-        "pl",
-        "pt",
-        "pr",
-        "qa",
-        "ro",
-        "rw",
-        "ws",
-        "sm",
-        "sa",
-        "sn",
-        "rs",
-        "sc",
-        "sl",
-        "sg",
-        "sk",
-        "si",
-        "sb",
-        "za",
-        "gs",
-        "es",
-        "lk",
-        "sd",
-        "sr",
-        "sz",
-        "se",
-        "tj",
-        "th",
-        "tg",
-        "tk",
-        "to",
-        "tt",
-        "tn",
-        "tr",
-        "tm",
-        "tc",
-        "tv",
-        "ug",
-        "ua",
-        "ae",
-        "gb",
-        "us",
-        "uy",
-        "uz",
-        "vu",
-        "wf",
-        "ye",
-        "zm",
-        "zw",
-        "bo",
-        "bn",
-        "cc",
-        "cd",
-        "ci",
-        "fk",
-        "gg",
-        "va",
-        "hk",
-        "ir",
-        "im",
-        "je",
-        "kp",
-        "kr",
-        "la",
-        "ly",
-        "mo",
-        "mk",
-        "fm",
-        "md",
-        "mz",
-        "ps",
-        "pn",
-        "re",
-        "ru",
-        "bl",
-        "sh",
-        "kn",
-        "lc",
-        "mf",
-        "pm",
-        "vc",
-        "st",
-        "so",
-        "sj",
-        "sy",
-        "tw",
-        "tz",
-        "tl",
-        "ve",
-        "vn",
-        "vg",
-        "vi"
-      ],
-      "prohibited": {
-        "ouType": [
-          "federation-center",
-          "federation-reporting",
-          "federation-accounting"
-        ]
-      },
-      "optional": true
-    },
-    "phone": {
-      "type": "string",
-      "validator": "Int",
-      "prohibited": {
-        "ouType": [
-          "federation-center",
-          "federation-reporting",
-          "federation-accounting"
-        ]
-      },
-      "optional": true
-    },
-    "faxPrefix": {
-      "type": [
-        "de",
-        "at",
-        "ch",
-        "af",
-        "al",
-        "dz",
-        "as",
-        "ad",
-        "ao",
-        "ai",
-        "ag",
-        "ar",
-        "am",
-        "aw",
-        "au",
-        "az",
-        "bs",
-        "bh",
-        "bd",
-        "bb",
-        "by",
-        "be",
-        "bz",
-        "bj",
-        "bm",
-        "bt",
-        "ba",
-        "bw",
-        "br",
-        "io",
-        "bg",
-        "bf",
-        "bi",
-        "kh",
-        "cm",
-        "ca",
-        "cv",
-        "ky",
-        "cf",
-        "td",
-        "cl",
-        "cn",
-        "cx",
-        "co",
-        "km",
-        "cg",
-        "ck",
-        "cr",
-        "hr",
-        "cu",
-        "cy",
-        "cz",
-        "dk",
-        "dj",
-        "dm",
-        "do",
-        "ec",
-        "eg",
-        "sv",
-        "gq",
-        "er",
-        "ee",
-        "et",
-        "fo",
-        "fj",
-        "fi",
-        "fr",
-        "gf",
-        "pf",
-        "ga",
-        "gm",
-        "ge",
-        "gh",
-        "gi",
-        "gr",
-        "gl",
-        "gd",
-        "gp",
-        "gu",
-        "gt",
-        "gn",
-        "gw",
-        "gy",
-        "ht",
-        "hn",
-        "hu",
-        "is",
-        "in",
-        "id",
-        "iq",
-        "ie",
-        "il",
-        "it",
-        "jm",
-        "jp",
-        "jo",
-        "kz",
-        "ke",
-        "ki",
-        "kw",
-        "kg",
-        "lv",
-        "lb",
-        "ls",
-        "lr",
-        "li",
-        "lt",
-        "lu",
-        "mg",
-        "mw",
-        "my",
-        "mv",
-        "ml",
-        "mt",
-        "mh",
-        "mq",
-        "mr",
-        "mu",
-        "yt",
-        "mx",
-        "mc",
-        "mn",
-        "me",
-        "ms",
-        "ma",
-        "mm",
-        "na",
-        "nr",
-        "np",
-        "nl",
-        "an",
-        "nc",
-        "nz",
-        "ni",
-        "ne",
-        "ng",
-        "nu",
-        "nf",
-        "mp",
-        "no",
-        "om",
-        "pk",
-        "pw",
-        "pa",
-        "pg",
-        "py",
-        "pe",
-        "ph",
-        "pl",
-        "pt",
-        "pr",
-        "qa",
-        "ro",
-        "rw",
-        "ws",
-        "sm",
-        "sa",
-        "sn",
-        "rs",
-        "sc",
-        "sl",
-        "sg",
-        "sk",
-        "si",
-        "sb",
-        "za",
-        "gs",
-        "es",
-        "lk",
-        "sd",
-        "sr",
-        "sz",
-        "se",
-        "tj",
-        "th",
-        "tg",
-        "tk",
-        "to",
-        "tt",
-        "tn",
-        "tr",
-        "tm",
-        "tc",
-        "tv",
-        "ug",
-        "ua",
-        "ae",
-        "gb",
-        "us",
-        "uy",
-        "uz",
-        "vu",
-        "wf",
-        "ye",
-        "zm",
-        "zw",
-        "bo",
-        "bn",
-        "cc",
-        "cd",
-        "ci",
-        "fk",
-        "gg",
-        "va",
-        "hk",
-        "ir",
-        "im",
-        "je",
-        "kp",
-        "kr",
-        "la",
-        "ly",
-        "mo",
-        "mk",
-        "fm",
-        "md",
-        "mz",
-        "ps",
-        "pn",
-        "re",
-        "ru",
-        "bl",
-        "sh",
-        "kn",
-        "lc",
-        "mf",
-        "pm",
-        "vc",
-        "st",
-        "so",
-        "sj",
-        "sy",
-        "tw",
-        "tz",
-        "tl",
-        "ve",
-        "vn",
-        "vg",
-        "vi"
-      ],
-      "prohibited": {
-        "ouType": [
-          "federation-center",
-          "federation-reporting",
-          "federation-accounting"
-        ]
-      },
-      "optional": true
-    },
-    "fax": {
-      "type": "string",
-      "validator": "Int",
-      "prohibited": {
-        "ouType": [
-          "federation-center",
-          "federation-reporting",
-          "federation-accounting"
-        ]
-      },
-      "optional": true
-    },
-    "email": {
-      "type": "string",
-      "prohibited": {
-        "ouType": [
-          "federation-center",
-          "federation-reporting",
-          "federation-accounting"
-        ]
-      },
-      "optional": true
-    },
     "openingHours": {
       "type": "string",
       "prohibited": {