@scenid/react-formulator 0.1.11 → 0.1.14

package/dist/index.cjs.js

@@ -29473,6 +29473,7 @@ var FormBoolean = function FormBoolean(_ref) {
 
   if (variant === 'checkbox') {
     return /*#__PURE__*/React__default["default"].createElement(core$1.Checkbox, {
+      color: "primary",
       name: name,
       checked: isChecked$1(value, defaultValue),
       onChange: handleChange
@@ -29480,6 +29481,7 @@ var FormBoolean = function FormBoolean(_ref) {
   }
 
   return /*#__PURE__*/React__default["default"].createElement(core$1.Switch, {
+    color: "primary",
     name: name,
     checked: isChecked$1(value, defaultValue),
     onChange: handleChange
@@ -75612,7 +75614,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,
@@ -75648,7 +75650,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["default"].createElement(HiddenData, {
+                subject: "Das Feld",
+                label: _label
+              });
+            }
+          }
+
           return /*#__PURE__*/React__default["default"].createElement(readOnly ? FormReadOnlyField$1 : FormField$1, {
             key: "form-render-component-".concat(cKey),
             variant: inputVariant,
@@ -75685,9 +75698,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,
@@ -75713,7 +75726,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["default"].createElement(HiddenData, {
+              subject: "Das Feld",
+              label: label
+            });
+          }
+        }
+
         var apProps = {};
 
         for (var i = 0; i < fields.length; i++) {
@@ -75747,14 +75771,6 @@ var FormulatorFormSection = /*#__PURE__*/function (_React$Component) {
         }
 
         var FormFieldComponent = readOnly ? FormReadOnlyField$1 : FormField$1;
-
-        if (hideSensitiveData && (name === 'reportingPin' || name === 'reportingAuthCode')) {
-          return /*#__PURE__*/React__default["default"].createElement(HiddenData, {
-            subject: "Das Feld",
-            label: label
-          });
-        }
-
         return /*#__PURE__*/React__default["default"].createElement(FormFieldComponent, {
           key: "form-".concat(id, "-").concat(name),
           variant: inputVariant,
@@ -75851,7 +75867,7 @@ FormulatorFormSection.propTypes = {
   nested: PropTypes__default["default"].number,
   sectionId: PropTypes__default["default"].string.isRequired,
   fields: PropTypes__default["default"].array.isRequired,
-  hideSensitiveData: PropTypes__default["default"].bool,
+  obscuredFields: PropTypes__default["default"].array,
   schema: PropTypes__default["default"].object.isRequired,
   results: PropTypes__default["default"].object.isRequired,
   data: PropTypes__default["default"].object.isRequired,
@@ -76321,12 +76337,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,
@@ -76358,7 +76375,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["default"].createElement(HiddenData, {
             subject: "Der Bereich",
             label: label
@@ -76380,10 +76397,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,
@@ -76426,7 +76443,6 @@ FormulatorForm.propTypes = {
   listErrors: PropTypes__default["default"].bool,
   schema: PropTypes__default["default"].object.isRequired,
   data: PropTypes__default["default"].object.isRequired,
-  hideSensitiveData: PropTypes__default["default"].bool,
   transientData: PropTypes__default["default"].object,
   fieldStates: PropTypes__default["default"].object,
   renderSchema: PropTypes__default["default"].object.isRequired,
@@ -76435,6 +76451,8 @@ FormulatorForm.propTypes = {
   errorMessages: PropTypes__default["default"].object,
   componentMap: PropTypes__default["default"].object,
   renderComponentMap: PropTypes__default["default"].object,
+  obscuredFields: PropTypes__default["default"].array,
+  obscuredGroups: PropTypes__default["default"].array,
   onSubmit: PropTypes__default["default"].func,
   onReset: PropTypes__default["default"].func,
   onStatusUpdate: PropTypes__default["default"].func,

package/dist/index.esm.js

@@ -29429,6 +29429,7 @@ var FormBoolean = function FormBoolean(_ref) {
 
   if (variant === 'checkbox') {
     return /*#__PURE__*/React__default.createElement(Checkbox, {
+      color: "primary",
       name: name,
       checked: isChecked$1(value, defaultValue),
       onChange: handleChange
@@ -29436,6 +29437,7 @@ var FormBoolean = function FormBoolean(_ref) {
   }
 
   return /*#__PURE__*/React__default.createElement(Switch, {
+    color: "primary",
     name: name,
     checked: isChecked$1(value, defaultValue),
     onChange: handleChange
@@ -75568,7 +75570,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,
@@ -75604,7 +75606,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,
@@ -75641,9 +75654,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,
@@ -75669,7 +75682,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++) {
@@ -75703,14 +75727,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,
@@ -75807,7 +75823,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,
@@ -76277,12 +76293,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,
@@ -76314,7 +76331,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
@@ -76336,10 +76353,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,
@@ -76382,7 +76399,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,
@@ -76391,6 +76407,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,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scenid/react-formulator",
-  "version": "0.1.11",
+  "version": "0.1.14",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
   "repository": "https://dennykoch@bitbucket.org/scenid/react-formulator.git",

package/src/Editable/FormBoolean.jsx

@@ -16,6 +16,7 @@ const FormBoolean = ({ variant, name, value, defaultValue, needsToBeTrue, onChan
   if (variant === 'checkbox') {
     return (
       <Checkbox
+        color="primary"
         name={name}
         checked={isChecked(value, defaultValue)}
         onChange={handleChange}
@@ -25,6 +26,7 @@ const FormBoolean = ({ variant, name, value, defaultValue, needsToBeTrue, onChan
 
   return (
     <Switch
+      color="primary"
       name={name}
       checked={isChecked(value, defaultValue)}
       onChange={handleChange}

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

@@ -170,7 +170,7 @@ class FormulatorFormSection extends React.Component {
       nested = 0,
       schema,
       fields,
-      hideSensitiveData,
+      obscuredFields,
       results,
       data,
       fieldStates,
@@ -213,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,
@@ -255,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}
@@ -289,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 = {}
 
@@ -335,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,
@@ -485,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/stories/Forms.stories.jsx

@@ -156,10 +156,18 @@ RLP.args = {
     'invalid-phone': "Ungültige Telefonnummer",
     'invalid-fax': "Ungültige Faxnummer"
   },
+  obscuredFields: [
+    'reportingPin',
+    'reportingAuthCode'
+  ],
+  obscuredGroups: ['bankData'],
   data: {
     ouType: 'private-medical-practice',
     hasBank: true,
-    bankValidFrom: '2022-08-14'
+    bankValidFrom: '2022-08-14',
+    isReporting: true,
+    reportingPin: '2554',
+    reportingAuthCode: '254hjx'
   },
   renderComponentMap: {
     // contacts: <RoleContactsRepeater />,