@scenid/react-formulator 0.1.10 → 0.1.12

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 = {};
 
@@ -75553,7 +75568,7 @@ var FormulatorFormSection = /*#__PURE__*/function (_React$Component) {
           nested = _this$props2$nested === void 0 ? 0 : _this$props2$nested,
           schema = _this$props2.schema,
           fields = _this$props2.fields,
-          hideSensitiveData = _this$props2.hideSensitiveData,
+          obscuredFields = _this$props2.obscuredFields,
           results = _this$props2.results,
           data = _this$props2.data,
           fieldStates = _this$props2.fieldStates,
@@ -75589,7 +75604,18 @@ var FormulatorFormSection = /*#__PURE__*/function (_React$Component) {
               _errors = _fieldProps.errors,
               _validating = _fieldProps.validating,
               _dirty = _fieldProps.dirty;
-          if (readOnly && !_value) return false;
+
+          if (readOnly) {
+            if (!_value) return false;
+
+            if (Array.isArray(obscuredFields) && obscuredFields.includes(_name)) {
+              return /*#__PURE__*/React__default.createElement(HiddenData, {
+                subject: "Das Feld",
+                label: _label
+              });
+            }
+          }
+
           return /*#__PURE__*/React__default.createElement(readOnly ? FormReadOnlyField$1 : FormField$1, {
             key: "form-render-component-".concat(cKey),
             variant: inputVariant,
@@ -75597,7 +75623,6 @@ var FormulatorFormSection = /*#__PURE__*/function (_React$Component) {
             type: _type,
             label: _label,
             value: _value,
-            isRender: true,
             required: _required,
             hasErrors: _hasErrors,
             errors: _errors,
@@ -75627,9 +75652,9 @@ var FormulatorFormSection = /*#__PURE__*/function (_React$Component) {
             schema: schema,
             label: fieldEntry.label,
             fields: fieldEntry.fields,
-            hideSensitiveData: hideSensitiveData,
             results: results,
             data: data,
+            obscuredFields: obscuredFields,
             fieldStates: fieldStates,
             translations: translations,
             errorMessages: errorMessages,
@@ -75655,7 +75680,18 @@ var FormulatorFormSection = /*#__PURE__*/function (_React$Component) {
             errors = fieldProps.errors,
             validating = fieldProps.validating,
             dirty = fieldProps.dirty;
-        if (readOnly && !value) return false;
+
+        if (readOnly) {
+          if (!value) return false;
+
+          if (Array.isArray(obscuredFields) && obscuredFields.includes(name)) {
+            return /*#__PURE__*/React__default.createElement(HiddenData, {
+              subject: "Das Feld",
+              label: label
+            });
+          }
+        }
+
         var apProps = {};
 
         for (var i = 0; i < fields.length; i++) {
@@ -75689,14 +75725,6 @@ var FormulatorFormSection = /*#__PURE__*/function (_React$Component) {
         }
 
         var FormFieldComponent = readOnly ? FormReadOnlyField$1 : FormField$1;
-
-        if (hideSensitiveData && (name === 'reportingPin' || name === 'reportingAuthCode')) {
-          return /*#__PURE__*/React__default.createElement(HiddenData, {
-            subject: "Das Feld",
-            label: label
-          });
-        }
-
         return /*#__PURE__*/React__default.createElement(FormFieldComponent, {
           key: "form-".concat(id, "-").concat(name),
           variant: inputVariant,
@@ -75793,7 +75821,7 @@ FormulatorFormSection.propTypes = {
   nested: PropTypes__default.number,
   sectionId: PropTypes__default.string.isRequired,
   fields: PropTypes__default.array.isRequired,
-  hideSensitiveData: PropTypes__default.bool,
+  obscuredFields: PropTypes__default.array,
   schema: PropTypes__default.object.isRequired,
   results: PropTypes__default.object.isRequired,
   data: PropTypes__default.object.isRequired,
@@ -76263,12 +76291,13 @@ var FormulatorForm = /*#__PURE__*/function (_React$Component) {
           readOnly = _this$props7.readOnly,
           listErrors = _this$props7.listErrors,
           schema = _this$props7.schema,
-          hideSensitiveData = _this$props7.hideSensitiveData,
           renderSchema = _this$props7.renderSchema,
           propDisabled = _this$props7.disabled,
           translations = _this$props7.translations,
           componentMap = _this$props7.componentMap,
           renderComponentMap = _this$props7.renderComponentMap,
+          obscuredFields = _this$props7.obscuredFields,
+          obscuredGroups = _this$props7.obscuredGroups,
           errorMessages = _this$props7.errorMessages,
           _onReset = _this$props7.onReset;
       var _this$state6 = this.state,
@@ -76300,7 +76329,7 @@ var FormulatorForm = /*#__PURE__*/function (_React$Component) {
             description = _ref12.description,
             fields = _ref12.fields;
 
-        if (hideSensitiveData && sectionId === 'bankData') {
+        if (readOnly && Array.isArray(obscuredGroups) && obscuredGroups.includes(sectionId)) {
           return /*#__PURE__*/React__default.createElement(HiddenData, {
             subject: "Der Bereich",
             label: label
@@ -76322,10 +76351,10 @@ var FormulatorForm = /*#__PURE__*/function (_React$Component) {
           label: label,
           desc: description,
           fields: fields,
-          hideSensitiveData: hideSensitiveData,
           results: results,
           data: data,
           fieldStates: fieldStates,
+          obscuredFields: obscuredFields,
           translations: translations,
           errorMessages: errorMessages,
           componentMap: componentMap,
@@ -76368,7 +76397,6 @@ FormulatorForm.propTypes = {
   listErrors: PropTypes__default.bool,
   schema: PropTypes__default.object.isRequired,
   data: PropTypes__default.object.isRequired,
-  hideSensitiveData: PropTypes__default.bool,
   transientData: PropTypes__default.object,
   fieldStates: PropTypes__default.object,
   renderSchema: PropTypes__default.object.isRequired,
@@ -76377,6 +76405,8 @@ FormulatorForm.propTypes = {
   errorMessages: PropTypes__default.object,
   componentMap: PropTypes__default.object,
   renderComponentMap: PropTypes__default.object,
+  obscuredFields: PropTypes__default.array,
+  obscuredGroups: PropTypes__default.array,
   onSubmit: PropTypes__default.func,
   onReset: PropTypes__default.func,
   onStatusUpdate: PropTypes__default.func,
@@ -76388,4 +76418,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.12",
   "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/FormulatorForm.jsx

@@ -361,12 +361,13 @@ class FormulatorForm extends React.Component {
       readOnly,
       listErrors,
       schema,
-      hideSensitiveData,
       renderSchema,
       disabled: propDisabled,
       translations,
       componentMap,
       renderComponentMap,
+      obscuredFields,
+      obscuredGroups,
       errorMessages,
       onReset
     } = this.props
@@ -408,7 +409,7 @@ class FormulatorForm extends React.Component {
         {
           renderSchema.groups
             .map(({ id: sectionId, label, description, fields }) => {
-              if (hideSensitiveData && sectionId === 'bankData') {
+              if (readOnly && Array.isArray(obscuredGroups) && obscuredGroups.includes(sectionId)) {
                 return <HiddenData subject="Der Bereich" label={label} />
               }
 
@@ -428,10 +429,10 @@ class FormulatorForm extends React.Component {
                   label={label}
                   desc={description}
                   fields={fields}
-                  hideSensitiveData={hideSensitiveData}
                   results={results}
                   data={data}
                   fieldStates={fieldStates}
+                  obscuredFields={obscuredFields}
                   translations={translations}
                   errorMessages={errorMessages}
                   componentMap={componentMap}
@@ -513,7 +514,6 @@ FormulatorForm.propTypes = {
   listErrors: PropTypes.bool,
   schema: PropTypes.object.isRequired,
   data: PropTypes.object.isRequired,
-  hideSensitiveData: PropTypes.bool,
   transientData: PropTypes.object,
   fieldStates: PropTypes.object,
   renderSchema: PropTypes.object.isRequired,
@@ -522,6 +522,8 @@ FormulatorForm.propTypes = {
   errorMessages: PropTypes.object,
   componentMap: PropTypes.object,
   renderComponentMap: PropTypes.object,
+  obscuredFields: PropTypes.array,
+  obscuredGroups: PropTypes.array,
   onSubmit: PropTypes.func,
   onReset: PropTypes.func,
   onStatusUpdate: PropTypes.func,

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') {
@@ -165,7 +170,7 @@ class FormulatorFormSection extends React.Component {
       nested = 0,
       schema,
       fields,
-      hideSensitiveData,
+      obscuredFields,
       results,
       data,
       fieldStates,
@@ -208,7 +213,12 @@ class FormulatorFormSection extends React.Component {
                 dirty
               } = fieldProps
 
-              if (readOnly && !value) return false
+              if (readOnly) {
+                if (!value) return false
+                if (Array.isArray(obscuredFields) && obscuredFields.includes(name)) {
+                  return <HiddenData subject="Das Feld" label={label} />
+                }
+              }
 
               return React.createElement(
                 readOnly ? FormReadOnlyField : FormField,
@@ -219,7 +229,6 @@ class FormulatorFormSection extends React.Component {
                   type,
                   label,
                   value,
-                  isRender: true,
                   required,
                   hasErrors,
                   errors,
@@ -251,9 +260,9 @@ class FormulatorFormSection extends React.Component {
                   schema={schema}
                   label={fieldEntry.label}
                   fields={fieldEntry.fields}
-                  hideSensitiveData={hideSensitiveData}
                   results={results}
                   data={data}
+                  obscuredFields={obscuredFields}
                   fieldStates={fieldStates}
                   translations={translations}
                   errorMessages={errorMessages}
@@ -285,7 +294,12 @@ class FormulatorFormSection extends React.Component {
               dirty
             } = fieldProps
 
-            if (readOnly && !value) return false
+            if (readOnly) {
+              if (!value) return false
+              if (Array.isArray(obscuredFields) && obscuredFields.includes(name)) {
+                return <HiddenData subject="Das Feld" label={label} />
+              }
+            }
 
             const apProps = {}
 
@@ -331,10 +345,6 @@ class FormulatorFormSection extends React.Component {
 
             const FormFieldComponent = readOnly ? FormReadOnlyField : FormField
 
-            if (hideSensitiveData && (name === 'reportingPin' || name === 'reportingAuthCode')) {
-              return <HiddenData subject="Das Feld" label={label} />
-            }
-
             return (
               React.createElement(
                 FormFieldComponent,
@@ -481,7 +491,7 @@ FormulatorFormSection.propTypes = {
   nested: PropTypes.number,
   sectionId: PropTypes.string.isRequired,
   fields: PropTypes.array.isRequired,
-  hideSensitiveData: PropTypes.bool,
+  obscuredFields: PropTypes.array,
   schema: PropTypes.object.isRequired,
   results: PropTypes.object.isRequired,
   data: PropTypes.object.isRequired,

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