@scenid/react-formulator 0.1.14 → 0.2.0

package/src/Editable/FormField.jsx

@@ -50,7 +50,7 @@ const FormControlField = ({
     onChange
   }
 
-  const isRender = type === 'render'
+  const isRender = type === '@@render'
 
   if (validating) {
     finalProps.endAdornment = [(
@@ -62,29 +62,36 @@ const FormControlField = ({
 
   let control
   if (isRender) {
-    control = React.cloneElement(
-      component,
-      {
-        variant,
-        ...finalProps,
-        label,
-        hasErrors,
-        errors,
-        dirty
-      }
-    )
+    try {
+      control = React.cloneElement(
+        component,
+        {
+          variant,
+          ...finalProps,
+          label,
+          hasErrors,
+          errors,
+          dirty
+        }
+      )
+    } catch (e) {
+      throw new Error(`error creating control for field "${name}": ${e.message}`)
+    }
   } else {
-    control = React.createElement(
-      component,
-      {
-        variant,
-        ...finalProps
-      }
-    )
+    try {
+      control = React.createElement(
+        component,
+        {
+          variant,
+          ...finalProps
+        }
+      )
+    } catch (e) {
+      throw new Error(`error creating control for field "${name}": ${e.message}`)
+    }
   }
-
   const isSwitch = type === 'boolean'
-  const isRepeater = type === 'array' && !isRender
+  const isRepeater = type === 'array'
 
   if (isRepeater || isRender) {
     return control

package/src/Editable/FormRepeater.jsx

@@ -182,7 +182,7 @@ const FormRepeater = ({ variant, name, value, catalog, onChange }) => {
 FormRepeater.propTypes = {
   variant: PropTypes.oneOf(['standard', 'filled', 'outlined']),
   name: PropTypes.string.isRequired,
-  value: PropTypes.any.isRequired,
+  value: PropTypes.any,
   catalog: PropTypes.object,
   onChange: PropTypes.func.isRequired
 }

package/src/FormSectionBlock.jsx

@@ -1,7 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import { Box, makeStyles } from '@material-ui/core'
+import { Box } from '@material-ui/core'
+import { makeStyles } from '@material-ui/core/styles'
 
 import FormGroupHeader from './FormGroupHeader'
 

package/src/FormulatorFormSection.jsx

@@ -64,18 +64,8 @@ class FormulatorFormSection extends React.Component {
       renderComponentMap
     } = this.props
 
-    let field = fieldEntry, specialProps = {}
+    let field = fieldEntry, isRender = false, specialProps = {}
     if (Array.isArray(fieldEntry)) {
-      if (fieldEntry[0] === '@@render') {
-        field = fieldEntry[1]
-        return ({
-          type: 'render',
-          name: field,
-          component: renderComponentMap[field],
-          componentProps: fieldEntry[2] || {}
-        })
-      }
-
       if (fieldEntry[0] === '@@markdown') {
         return ({
           type: 'markdown',
@@ -87,10 +77,16 @@ class FormulatorFormSection extends React.Component {
         })
       }
 
-
-      field = fieldEntry[0]
-      if (!fieldEntry[1]) throw new Error(`field "${field}" is defined in an array, but has no props definition`)
-      specialProps = fieldEntry[1]
+      if (fieldEntry[0] === '@@render') {
+        if (!fieldEntry[1]) throw new Error(`render field "${field}" has no name`)
+        field = fieldEntry[1]
+        specialProps = fieldEntry[2] || {}
+        isRender = true
+      } 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]
+      }
     }
 
     const { hidden, hideLabel, ...extraProps } = specialProps
@@ -104,13 +100,14 @@ class FormulatorFormSection extends React.Component {
     const { type, default: defaultValue } = schema.properties[field]
 
     let mapKey
-    if (componentMap[field] !== undefined) mapKey = field
+    if (isRender) mapKey = '@@render'
+    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 "${field}"`)
 
-    const mapEntry = componentMap[mapKey]
+    const mapEntry = isRender ? renderComponentMap[field] : componentMap[mapKey]
     let component = mapEntry, props = {}
 
     if (mapKey === 'select') {
@@ -133,8 +130,10 @@ class FormulatorFormSection extends React.Component {
       /* eslint-enable prefer-destructuring */
     }
 
+    if (!component) throw new Error(`could not find component for field "${field}"`)
+
     return {
-      type: mapKey,
+      type: isRender ? '@@render' : mapKey,
       name: field,
       label: hideLabel !== true && ((translations.labels && translations.labels[field]) || field),
       defaultValue,
@@ -193,60 +192,6 @@ class FormulatorFormSection extends React.Component {
           fields.map((fieldEntry, fieldIndex) => {
             if (fieldEntry === false) return false
 
-            if (Array.isArray(fieldEntry) && fieldEntry[0] === '@@render') {
-              const cKey = fieldEntry[1]
-              const component = renderComponentMap && renderComponentMap[cKey]
-              if (!component) throw new Error(`Could not find Component for render field "${cKey}"`)
-
-              const fieldProps = this.getFieldProps(fieldEntry)
-
-              const {
-                type,
-                name,
-                componentProps,
-                label,
-                value,
-                required,
-                hasErrors,
-                errors,
-                validating,
-                dirty
-              } = fieldProps
-
-              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,
-                {
-                  key: `form-render-component-${cKey}`,
-                  variant: inputVariant,
-                  name,
-                  type,
-                  label,
-                  value,
-                  required,
-                  hasErrors,
-                  errors,
-                  validating,
-                  dirty,
-                  component,
-                  componentProps,
-                  disabled,
-                  readOnly,
-                  fields,
-                  results,
-                  data,
-                  fieldStates,
-                  onChange
-                }
-              )
-            }
-
             if (typeof fieldEntry !== 'string' && !Array.isArray(fieldEntry)) {
               return (
                 <FormulatorFormSection
@@ -437,10 +382,10 @@ class FormulatorFormSection extends React.Component {
     return (
       <FormSectionBlock
         key={`form-section-${sectionId}`}
-        label={groupLabel}
-        labelVariant={groupLabelVariant}
-        desc={groupDesc}
-        descVariant={groupDescVariant}
+        label={label}
+        labelVariant={labelVariant}
+        desc={desc}
+        descVariant={descVariant}
         textAlign={textAlign}
       >
         {sectionContent}

package/src/ReadOnly/FormReadOnlyField.jsx

@@ -28,7 +28,7 @@ const FormControlField = ({
   }
 
   let control
-  if (type === 'render') control = React.cloneElement(component, finalProps)
+  if (type === '@@render') control = React.cloneElement(component, finalProps);
   else control = React.createElement(component, finalProps)
 
   return (

package/stories/CustomRenderField.jsx

@@ -0,0 +1,30 @@
+import React, { useState } from 'react'
+import PropTypes from 'prop-types'
+
+import { TextField } from '@material-ui/core'
+import { makeStyles } from '@material-ui/core/styles'
+
+const CustomRenderField = ({ name, value, onChange, ...props }) => {
+  const [deg, setDeg] = useState(value || '')
+
+  const handleChange = e => {
+    onChange({ target: { name, value: e.target.value } })
+  }
+
+  return (
+    <TextField
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...props}
+      type="text"
+      onChange={handleChange}
+    />
+  )
+}
+
+CustomRenderField.propTypes = {
+  name: PropTypes.string.isRequired,
+  value: PropTypes.string,
+  onChange: PropTypes.func.isRequired
+}
+
+export default CustomRenderField

package/stories/Forms.stories.jsx

@@ -1,11 +1,10 @@
 import React from 'react'
-
-import ReactMarkdown from 'react-markdown'
+import PropTypes from 'prop-types'
 
 import StoryBase from './StoryBase'
 import { FormulatorForm } from '../src/index'
 
-import getTypesSchemas from './forms/types.schemas.js'
+import getTypesSchemas from './forms/types.schemas'
 
 import markdownValidation from './forms/markdown.validation.schema.json'
 import markdownRender from './forms/markdown.render.schema.json'
@@ -20,6 +19,8 @@ import rlpValidation from './forms/rlp.validation.schema.json'
 import rlpRender from './forms/rlp.render.schema.json'
 import rlpTranslations from './forms/rlp.translations.json'
 
+import CustomRenderField from './CustomRenderField'
+
 const {
   validation: typesValidation,
   render: typesRender,
@@ -53,17 +54,21 @@ const schemas = {
 export default {
   title: 'Formulator/Forms',
   component: FormulatorForm,
-  parameters: {
-    layout: 'fullscreen'
-  }
+  parameters: { layout: 'fullscreen' }
 }
 
 const Template = ({ baseProps, ...props }) => (
+  // eslint-disable-next-line react/jsx-props-no-spreading
   <StoryBase {...baseProps}>
+    {/* eslint-disable-next-line react/jsx-props-no-spreading */}
     <FormulatorForm {...props} />
   </StoryBase>
 )
 
+Template.propTypes = {
+  baseProps: PropTypes.object
+}
+
 export const Types = Template.bind({})
 Types.args = {
   id: 'unique-form-id',
@@ -71,7 +76,7 @@ Types.args = {
   renderSchema: schemas.types.render,
   inputVariant: 'filled',
   renderComponentMap: {
-    intro: ReactMarkdown
+    customRenderField: <CustomRenderField />
   },
   translations: typesTranslations,
   data: {}
@@ -128,9 +133,7 @@ Register.args = {
       passwordConfirm: 'Passwort bestätigen'
     }
   },
-  errorMessages: {
-    Email: 'Ungültige E-Mail-Adresse'
-  },
+  errorMessages: { Email: 'Ungültige E-Mail-Adresse' },
   data: {}
 }
 
@@ -147,14 +150,14 @@ RLP.args = {
     required: 'Pflichtfeld',
     IBAN: 'IBAN bitte ohne Sonder- und Trennzeichen angeben',
     Int: 'Bitte geben Sie ein gültige Zahl ein',
-    URL: "Ungültiger Link",
-    Email: "Ungültige E-Mail Adresse",
-    Date: "Ungültiges Datum",
-    Length: "Länge muss zwischen {{min}} und {{max}} liegen",
-    RegExp: "Ungültiges Format oder Zeichen",
-    'invalid-email': "Ungültige E-Mail Adresse",
-    'invalid-phone': "Ungültige Telefonnummer",
-    'invalid-fax': "Ungültige Faxnummer"
+    URL: 'Ungültiger Link',
+    Email: 'Ungültige E-Mail Adresse',
+    Date: 'Ungültiges Datum',
+    Length: 'Länge muss zwischen {{min}} und {{max}} liegen',
+    RegExp: 'Ungültiges Format oder Zeichen',
+    'invalid-email': 'Ungültige E-Mail Adresse',
+    'invalid-phone': 'Ungültige Telefonnummer',
+    'invalid-fax': 'Ungültige Faxnummer'
   },
   obscuredFields: [
     'reportingPin',
@@ -174,19 +177,19 @@ RLP.args = {
     // reporterId: <FormUnique entityType="ou" />,
     // iknr: <FormUnique entityType="ou" />,
     // bsnr: <FormUnique entityType="ou" excludeInactive />,
-    contacts: <div/>,
-    reporterId: <div/>,
-    iknr: <div/>,
-    bsnr: <div/>,
-    productOwner: <div />,
-    inheritedIKNR: <div />,
-    inheritedBSNR: <div />,
-    reportingCodesTrigger: (
-      <div className="action-group right">
-        {/* <Button onClick={() => {}}>
-          Automatisch generieren
-        </Button> */}
-      </div>
-    )
+    contacts: <div />,
+    reporterId: <div />,
+    iknr: <div />,
+    bsnr: <div />
+    // productOwner: <div />,
+    // inheritedIKNR: <div />,
+    // inheritedBSNR: <div />,
+    // reportingCodesTrigger: (
+    //   <div className="action-group right">
+    //     <Button onClick={() => {}}>
+    //       Automatisch generieren
+    //     </Button>
+    //   </div>
+    // )
   }
 }

package/stories/forms/types.schemas.js

@@ -15,7 +15,7 @@ const inputs = [
           multiline: true,
           minRows: 5
         }
-      ],
+      ]
     ],
     validation: { type: 'string' }
   },
@@ -83,9 +83,7 @@ const inputs = [
     desc: 'Values are automatically sorted with [localeCompare](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare).',
     key: 'simpleSelect',
     render: ['simpleSelect'],
-    validation: {
-      type: ['Citrus', 'Banana', 'Apple', 'Date']
-    }
+    validation: { type: ['Citrus', 'Banana', 'Apple', 'Date'] }
   },
   {
     label: 'Date',
@@ -114,6 +112,17 @@ const inputs = [
     key: 'arrayRepeater',
     render: ['arrayRepeater'],
     validation: { type: 'array' }
+  },
+  {
+    label: 'Custom Render Field',
+    key: 'customRenderField',
+    render: [
+      [
+        '@@render',
+        'customRenderField'
+      ]
+    ],
+    validation: { type: 'string' }
   }
 ]
 
@@ -142,8 +151,8 @@ export default () => {
       label,
       fields: [
         [
-          "@@markdown",
-          "mmd-id",
+          '@@markdown',
+          'mmd-id',
           `\`\`\`json\n/* validation schema */\n${validationJSON}\n\n/* render schema */\n${renderJSON}\n\`\`\``
         ],
         render[0]
@@ -152,8 +161,8 @@ export default () => {
 
     if (desc) {
       renderEntry.fields.unshift([
-        "@@markdown",
-        "mmd-desc-id",
+        '@@markdown',
+        'mmd-desc-id',
         desc
       ])
     }