@scenid/react-formulator 0.1.14 → 0.3.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,46 @@
+import React, { useState, useEffect } from 'react'
+import PropTypes from 'prop-types'
+
+import { TextField, InputAdornment } from '@material-ui/core'
+import { AccountCircle } from '@material-ui/icons'
+
+const CustomRenderField = ({ name, value, onChange, ...props }) => {
+  const [deg, setDeg] = useState(-10)
+
+  const handleChange = e => {
+    onChange({ target: { name, value: e.target.value } })
+  }
+
+  useEffect(() => {
+    setDeg(value?.length * 10)
+  }, [value])
+
+  return (
+    <TextField
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...props}
+      type="text"
+      InputProps={{
+        startAdornment: (
+          <InputAdornment position="start">
+            <AccountCircle
+              style={{
+                transform: `rotate(${deg}deg)`,
+                transition: 'transform 400ms ease-out'
+              }}
+            />
+          </InputAdornment>
+        )
+      }}
+      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,18 @@ const inputs = [
     key: 'arrayRepeater',
     render: ['arrayRepeater'],
     validation: { type: 'array' }
+  },
+  {
+    label: 'Custom Render Field',
+    desc: 'Try typing something, it might surprise you ;)',
+    key: 'customRenderField',
+    render: [
+      [
+        '@@render',
+        'customRenderField'
+      ]
+    ],
+    validation: { type: 'string' }
   }
 ]
 
@@ -142,8 +152,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 +162,8 @@ export default () => {
 
     if (desc) {
       renderEntry.fields.unshift([
-        "@@markdown",
-        "mmd-desc-id",
+        '@@markdown',
+        'mmd-desc-id',
         desc
       ])
     }

package/.firebase/hosting.c3Rvcnlib29rLXN0YXRpYw.cache

@@ -1,38 +0,0 @@
-0.30cf261b.iframe.bundle.js.LICENSE.txt,1650758653059,f9da571f65af27492a7a1ee487706907c7b6899f383a145f72f5a8c694ae7184
-0.30cf261b.iframe.bundle.js.map,1650758653059,a48ec794bff02fde310b6ed25bf77db4ba97d110637f3c28c8d62bd2a15772a3
-2.8bdf0833.iframe.bundle.js,1650758653057,547ebe6978844ffb0a96e885dbe47aba567e984eb7a8d9040ba8da6420d3e0a7
-4.22c1589ae6a16d994bda.manager.bundle.js.LICENSE.txt,1650758635106,f9da571f65af27492a7a1ee487706907c7b6899f383a145f72f5a8c694ae7184
-6.af50beb244be1ebcf013.manager.bundle.js.LICENSE.txt,1650758635106,386dc29e2b99977dc9bf6bde1b4ff988501e2bcbed3472812c96aaeed1239771
-7.35efa10296610e53757f.manager.bundle.js,1650758635105,7bd0a44dd25ead0eed6b74d0e6027a22d8b79edad411aa003a0ae1914c40e99d
-7.49dd62a5.iframe.bundle.js.LICENSE.txt,1650758653059,386dc29e2b99977dc9bf6bde1b4ff988501e2bcbed3472812c96aaeed1239771
-7.49dd62a5.iframe.bundle.js.map,1650758653060,a4f3652c5fb2115c80617f2fb37a4a20838e7b229602f1de62ead5a4e368b4c1
-5.097ed3d7ddfe40e67431.manager.bundle.js,1650758635105,223f1efa99720c08d4e2d9119af961ab6d0e4606ca8d69148a872b521de68983
-8.d406d7f000addb30d4e0.manager.bundle.js,1650758635106,8925083a74886d9bf9721f8683c54aac3ee066d1cc3525ea110365670b38fd20
-8.57245307.iframe.bundle.js,1650758653059,a9d5f6a9de58ee42cade902b2fa448a8f5695b88b8c0025832ce7e5d9c7a07b5
-iframe.html,1650758653060,2e1653e6befc88b53297632b8fed7a38bab4db3973339602b369cb2423723cc0
-6.6833fdce.iframe.bundle.js,1650758653057,007594b283e6b4234cef2c6497dc000b75008cf004f734934689285e4cd3ad48
-index.html,1650758635107,ede1185540d8d6c574eaf4fcd4afa3ca92356f81be64ff6d52ba1de69a914626
-main.c7b486ba9ea0b717c1a9.manager.bundle.js,1650758635105,cdf24a07048056f0704b1d741bc717ea537ebe722ed67053a0539a0b7e891b2d
-runtime~main.e45f2034.iframe.bundle.js,1650758653057,1680cfe289badbf27f1d4f8370dbf879b9d04e50975b1c448660d96d8cb6f954
-runtime~main.f72c3eba52b27c705b1b.manager.bundle.js,1650758635105,9b2cfba4d9650202626b777ee39ccfd645a768c1a52b8103a9e7b975b583192e
-vendors~main.648257276d60166dc011.manager.bundle.js.LICENSE.txt,1650758635107,1391a0dac6e18cfc0ec57c845f17090cc7a3d298834c44b42492ebf4288f6642
-vendors~main.bbc5b166.iframe.bundle.js.LICENSE.txt,1650758653060,5e04e39e3fecc594f1f5d179c8854c324dfc301c08f41f663a95fced8df4b4a9
-vendors~main.bbc5b166.iframe.bundle.js.map,1650758653060,1f9aac87df453020d66224b1e41bcea6e5d475770257ce32fb75ae1ea3ecbcab
-favicon.ico,1650629697114,31d363f88b939628a597c9b1de09cdb8d64b9887bbb2193a5b9652256441f27b
-static/media/code-brackets.2e1112d7.svg,1650758653059,8e6163f5cb88abca1e76b7ed502379b31305d265ef9f27870b508b9890bcca1d
-static/media/comments.a3859089.svg,1650758653060,b8ec0d30db42fd6470c738394adfa24c67acd0c88be88fcf6b7ef258a4b63491
-static/media/direction.b770f9af.svg,1650758653060,38acefd300753751fa57bf231634db5775d68be9d4aeab3af1751cb7a21d58fa
-static/media/flow.edad2ac1.svg,1650758653060,8f3a687b8fb2b8d0c4264d89037db18159769751c3118a61ff995cf4192460d3
-static/media/colors.a4bd0486.svg,1650758653060,321be1fea0c4db8a6e167b05afcc9882e71b3d3b6726006870ed625d4ac0c17c
-static/media/plugin.d494b228.svg,1650758653060,8f4f3adff36d058d7100d15590a2f4ff49e06a55b7eb7f50c39d9ac59ebe72a0
-static/media/repo.6d496322.svg,1650758653060,2f62b0a6f0366cb63c770bf3828b529cf842c917bba0dd4b35fa567baa97abdb
-static/media/stackalt.dba9fbb3.svg,1650758653060,a4bcbb37eb457a804cf3d45676dcbe58ab1ca636ebaabc1c71396302a0ad1c13
-0.28a7a8d757f3710b1952.manager.bundle.js,1650758635105,1946210453dcde037ffec246a8ca427bcebf7de590ab4e7ee491a25896f890eb
-1.88405ac3.iframe.bundle.js,1650758653057,2e93175c88e22597ed016f8279a508278a8ea1254f0393c748bb0c2ccf7a8c43
-4.22c1589ae6a16d994bda.manager.bundle.js,1650758635105,7712bc4557061ff9602d6697c882cc751d55de2cb8302fc8671c8704ec75ef79
-0.30cf261b.iframe.bundle.js,1650758653057,d05b1d0e2cc1dbbdd7ee4e30ee877be8b17b2ae374029d6085b84d6dbf708411
-main.ed4711a7.iframe.bundle.js,1650758653057,ea74d6de2d4a4a2de08cf0c45719326b7664ab2e4cd903b694ffed2e502a622f
-6.af50beb244be1ebcf013.manager.bundle.js,1650758635105,3dfb0be00594c7fd8ca8b04ccb0e9af596ca74c418dfdef8d9450e81262b11e1
-7.49dd62a5.iframe.bundle.js,1650758653059,fb8169a5cd94403bb02ce68a001e1b2df1171a7da03b9479f610a35a2b66fbb5
-vendors~main.648257276d60166dc011.manager.bundle.js,1650758635106,1fdadbdd3cef9bb1186e9da8f098eb517f746c63096885709cedf8b88b627d32
-vendors~main.bbc5b166.iframe.bundle.js,1650758653059,6b06f83d45311766f85ed6a6397f693a7988451d1d254593ee60d979d1398c20