@scenid/react-formulator 0.0.2

package/src/FormulatorFormSection.jsx

@@ -0,0 +1,494 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import { Input } from '@material-ui/core'
+
+import { render as mm } from 'micromustache'
+
+import FormSectionCard from './FormSectionCard'
+import FormSectionBlock from './FormSectionBlock'
+
+import FormField from './Editable/FormField'
+import FormTextfield from './Editable/FormTextfield'
+import FormNumber from './Editable/FormNumber'
+import FormSelect from './Editable/FormSelect'
+import FormBoolean from './Editable/FormBoolean'
+import FormRepeater from './Editable/FormRepeater'
+
+import FormReadOnlyField from './ReadOnly/FormField'
+import FormReadOnlyText from './ReadOnly/FormReadOnlyText'
+import FormMarkdown from './ReadOnly/FormMarkdown'
+import FormReadOnlyNumber from './ReadOnly/FormNumber'
+import FormReadOnlySelect from './ReadOnly/FormSelect'
+import FormReadOnlyBoolean from './ReadOnly/FormBoolean'
+import FormReadOnlyRepeater from './ReadOnly/FormRepeater'
+
+import HiddenData from './HiddenData'
+
+const formReadOnlyComponentMap = {
+  default: FormReadOnlyText,
+  markdown: FormMarkdown,
+  string: FormReadOnlyText,
+  number: FormReadOnlyNumber,
+  select: FormReadOnlySelect,
+  boolean: FormReadOnlyBoolean,
+  array: FormReadOnlyRepeater
+}
+
+const formComponentMap = {
+  default: FormTextfield,
+  string: FormTextfield,
+  number: FormNumber,
+  select: FormSelect,
+  boolean: FormBoolean,
+  array: FormRepeater
+}
+
+const apComponentMap = {
+  default: Input,
+  string: Input,
+  number: FormNumber,
+  select: FormSelect,
+  boolean: FormBoolean
+}
+
+class FormulatorFormSection extends React.Component {
+  getFieldProps(fieldEntry, componentMap) {
+    const {
+      schema,
+      translations,
+      errorMessages,
+      results,
+      data,
+      fieldStates
+    } = 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: 'markdown',
+          name: fieldEntry[1],
+          component: formReadOnlyComponentMap.markdown,
+          componentProps: {
+            content: fieldEntry[2]
+          }
+        })
+      } else {
+        field = fieldEntry[0]
+        specialProps = fieldEntry[1]
+      }
+    }
+
+    const { hidden, hideLabel, ...extraProps } = specialProps
+
+    if (hidden === true) return false
+
+    const fieldResult = results[field]
+    const { prohibited, required, optional, hasErrors, errors, data: fieldData } = fieldResult
+    if (prohibited === true || (!required && !optional && fieldData === undefined)) return false
+
+    const { type, default: defaultValue } = schema.properties[field]
+
+    let 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 "${field}"`)
+
+    const mapEntry = specialProps.isRender ? '@@render' : componentMap[mapKey]
+    let component = mapEntry, props = {}
+
+    if (mapKey === 'select') {
+      props.options = (
+        type.map(value => ({
+          label: (
+            translations[field]
+            && translations[field][value]
+          )
+          || value,
+          value
+        }))
+      )
+    }
+
+    if (Array.isArray(mapEntry)) {
+      /* eslint-disable prefer-destructuring */
+      component = mapEntry[0]
+      props = mapEntry[1]
+      /* eslint-enable prefer-destructuring */
+    }
+
+    return {
+      type: mapKey,
+      name: field,
+      label: hideLabel !== true && ((translations.labels && translations.labels[field]) || field),
+      defaultValue,
+      component,
+      componentProps: extraProps,
+      value: data[field],
+      required,
+      hasErrors,
+      errors: errors.map(({ message, options, validator: eVal, ...restError }) => {
+        let finalMessage = message
+
+        if (options && options.human) finalMessage = options.human
+        else if (errorMessages[eVal]) finalMessage = mm(errorMessages[eVal], options)
+
+        return ({
+          message: finalMessage,
+          options,
+          validator: eVal,
+          ...restError
+        })
+      }),
+      ...props,
+      ...fieldStates[field]
+    }
+  }
+
+  getSectionContent() {
+    const {
+      id,
+      variant,
+      inputVariant,
+      readOnly,
+      nested = 0,
+      schema,
+      fields,
+      hideSensitiveData,
+      results,
+      data,
+      fieldStates,
+      translations,
+      renderComponentMap,
+      errorMessages,
+      onChange,
+      disabled
+    } = this.props
+
+    const allFieldProps = (
+      fields
+        .filter(f => typeof f === 'string' || Array.isArray(f))
+        .map(fieldEntry => this.getFieldProps(fieldEntry, readOnly ? formReadOnlyComponentMap : formComponentMap))
+    )
+
+    return (
+      Array.isArray(fields)
+        && (
+          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 && !value) return false
+
+              return React.createElement(
+                readOnly ? FormReadOnlyField : FormField,
+                {
+                  key: `form-render-component-${cKey}`,
+                  variant: inputVariant,
+                  name,
+                  type,
+                  label,
+                  value,
+                  isRender: true,
+                  required,
+                  hasErrors,
+                  errors,
+                  validating,
+                  dirty,
+                  component,
+                  componentProps,
+                  disabled,
+                  readOnly,
+                  fields,
+                  results,
+                  data,
+                  fieldStates,
+                  onChange
+                }
+              )
+            }
+
+            if (typeof fieldEntry !== 'string' && !Array.isArray(fieldEntry)) {
+              return (
+                <FormulatorFormSection
+                  key={`form-section-${fieldEntry.id}`}
+                  variant={variant}
+                  inputVariant={inputVariant}
+                  readOnly={readOnly}
+                  id={fieldEntry.id}
+                  nested={nested + 1}
+                  sectionId={fieldEntry.id}
+                  schema={schema}
+                  label={fieldEntry.label}
+                  fields={fieldEntry.fields}
+                  hideSensitiveData={hideSensitiveData}
+                  results={results}
+                  data={data}
+                  fieldStates={fieldStates}
+                  translations={translations}
+                  errorMessages={errorMessages}
+                  renderComponentMap={renderComponentMap}
+                  onChange={onChange}
+                  disabled={disabled}
+                />
+              )
+            }
+
+            if (Array.isArray(fieldEntry) && (fieldEntry[1].appends || fieldEntry[1].prepends)) return false
+
+            const fieldProps = allFieldProps[fieldIndex]
+            if (!fieldProps) return false
+
+            const {
+              type,
+              name,
+              component,
+              componentProps,
+              label,
+              value,
+              defaultValue,
+              options,
+              required,
+              hasErrors,
+              errors,
+              validating,
+              dirty
+            } = fieldProps
+
+            if (readOnly && !value) return false
+
+            const apProps = {}
+
+            for (let i = 0; i < fields.length; i++) {
+              const apField = fields[i]
+
+              if (Array.isArray(apField) && apField[1].appends && apField[1].appends === name) {
+                if (!apProps.append) apProps.append = []
+                const aProps = this.getFieldProps(apField, apComponentMap)
+
+                apProps.append.push(
+                  React.createElement(
+                    aProps.component,
+                    {
+                      key: `form-field-${name}-append-${aProps.name}`,
+                      variant: inputVariant,
+                      disabled,
+                      onChange,
+                      ...aProps
+                    }
+                  )
+                )
+              }
+
+              if (Array.isArray(apField) && apField[1].prepends && apField[1].prepends === name) {
+                if (!apProps.prepend) apProps.prepend = []
+                const aProps = this.getFieldProps(apField, apComponentMap)
+
+                apProps.prepend.push(
+                  React.createElement(
+                    aProps.component,
+                    {
+                      key: `form-field-${name}-append-${aProps.name}`,
+                      variant: inputVariant,
+                      disabled,
+                      onChange,
+                      ...aProps
+                    }
+                  )
+                )
+              }
+            }
+
+            const FormFieldComponent = readOnly ? FormReadOnlyField : FormField
+
+            if (hideSensitiveData && (name === 'reportingPin' || name === 'reportingAuthCode')) {
+              return <HiddenData subject="Das Feld" label={label} />
+            }
+
+            return (
+              React.createElement(
+                FormFieldComponent,
+                {
+                  key: `form-${id}-${name}`,
+                  variant: inputVariant,
+                  type,
+                  name,
+                  label,
+                  defaultValue,
+                  value,
+                  options,
+                  required,
+                  hasErrors,
+                  errors,
+                  validating,
+                  dirty,
+                  component,
+                  componentProps,
+                  prepend: apProps.prepend,
+                  append: apProps.append,
+                  disabled,
+                  onChange
+                }
+              )
+            )
+          })
+        )
+    )
+  }
+
+  render() {
+    const {
+      variant,
+      readOnly,
+      nested = 0,
+      sectionId,
+      label,
+      labelVariant,
+      desc,
+      descVariant,
+      textAlign,
+      fields
+    } = this.props
+
+    const allFieldProps = (
+      fields
+        .filter(f => typeof f === 'string' || Array.isArray(f))
+        .map(fieldEntry => this.getFieldProps(fieldEntry, readOnly ? formReadOnlyComponentMap : formComponentMap))
+    )
+
+    const renderableFields = allFieldProps.filter(fp => {
+      if (
+        Array.isArray(fp)
+          && (
+            fp[0] === '@@render'
+            || fp[0] === '@@markdown'
+          )
+      ) return false
+
+      return fp !== false
+    })
+
+    if (renderableFields.length === 0) return false
+
+    const sectionContent = this.getSectionContent()
+
+    if (readOnly && sectionContent.every(c => c === false)) return false
+
+    if (nested === 0) {
+      const FormSection = variant === 'card' ? FormSectionCard : FormSectionBlock
+
+      return (
+        React.createElement(
+          FormSection,
+          {
+            key: `form-section-${sectionId}`,
+            groupId: sectionId,
+            label,
+            labelVariant,
+            desc,
+            descVariant,
+            textAlign
+          },
+          sectionContent
+        )
+      )
+    }
+
+    return (
+      <FormSectionBlock
+        key={`form-section-${sectionId}`}
+        label={groupLabel}
+        labelVariant={groupLabelVariant}
+        desc={groupDesc}
+        descVariant={groupDescVariant}
+        textAlign={textAlign}
+      >
+        {sectionContent}
+      </FormSectionBlock>
+    )
+  }
+}
+
+FormulatorFormSection.propTypes = {
+  id: PropTypes.string.isRequired,
+  variant: PropTypes.string.isRequired,
+  inputVariant: PropTypes.oneOf(['standard', 'filled', 'outlined']),
+  label: PropTypes.string,
+  desc: PropTypes.string,
+  labelVariant: PropTypes.oneOf([
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+    'subtitle1',
+    'subtitle2',
+    'body1',
+    'body2',
+    'button',
+    'caption',
+    'overline'
+  ]),
+  descVariant: PropTypes.oneOf([
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+    'subtitle1',
+    'subtitle2',
+    'body1',
+    'body2',
+    'button',
+    'caption',
+    'overline'
+  ]),
+  textAlign: PropTypes.oneOf(['left', 'center', 'right']),
+  disabled: PropTypes.bool,
+  readOnly: PropTypes.bool,
+  nested: PropTypes.number,
+  sectionId: PropTypes.string.isRequired,
+  fields: PropTypes.array.isRequired,
+  hideSensitiveData: PropTypes.bool,
+  schema: PropTypes.object.isRequired,
+  results: PropTypes.object.isRequired,
+  data: PropTypes.object.isRequired,
+  fieldStates: PropTypes.object.isRequired,
+  translations: PropTypes.object.isRequired,
+  errorMessages: PropTypes.object.isRequired,
+  renderComponentMap: PropTypes.object,
+  onChange: PropTypes.func.isRequired
+}
+
+export default FormulatorFormSection

package/src/HiddenData.jsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import { Box, Typography } from '@material-ui/core'
+import { Alert } from '@material-ui/lab'
+
+const HiddenData = ({ subject, label }) => (
+  <Box mb={2}>
+    <Alert severity="warning">
+      <Typography variant="body1">
+        {subject ? `${subject} ` : ''}
+        <span style={{ fontWeight: 'bold' }}>{label}</span>
+        &nbsp;ist ausgeblendet.
+      </Typography>
+    </Alert>
+  </Box>
+)
+
+HiddenData.propTypes = {
+  subject: PropTypes.string,
+  label: PropTypes.string.isRequired
+}
+
+export default HiddenData

package/src/ReadOnly/FormBoolean.jsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import { Checkbox, Switch } from '@material-ui/core'
+
+const isBoolean = val => val === false || val === true
+const isChecked = (value, defaultValue) => isBoolean(value) ? value : (defaultValue || false)
+
+const FormBoolean = ({ variant, name, value, defaultValue }) => {
+  if (variant === 'checkbox') {
+    return (
+      <Checkbox
+        name={name}
+        checked={isChecked(value, defaultValue)}
+        disabled
+      />
+    )
+  }
+
+  return (
+    <Switch
+      name={name}
+      checked={isChecked(value, defaultValue)}
+      disabled
+    />
+  )
+}
+
+FormBoolean.propTypes = {
+  variant: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  value: PropTypes.bool,
+  defaultValue: PropTypes.bool
+}
+
+export default FormBoolean

package/src/ReadOnly/FormField.jsx

@@ -0,0 +1,126 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import { Typography, Box } from '@material-ui/core'
+
+const FormControlField = ({
+  isRender,
+  name,
+  label,
+  component,
+  componentProps,
+  value,
+  options,
+  required
+}) => {
+  const finalProps = {
+    ...componentProps,
+    name,
+    label,
+    value,
+    options,
+    required,
+    readOnly: true
+  }
+
+  if (componentProps?.readOnlyHidden === true) {
+    return false
+  }
+
+  let control
+  if (isRender) control = React.cloneElement(component, finalProps)
+  else control = React.createElement(component, finalProps)
+
+  return (
+    <Box
+      width="100%"
+      display="flex"
+      flexDirection="column"
+      mb={1.5}
+    >
+      {
+        label
+          && (
+            <Typography
+              variant="caption"
+              color="textSecondary"
+            >
+              {label}
+            </Typography>
+          )
+      }
+      {control}
+    </Box>
+  )
+}
+
+FormControlField.propTypes = {
+  isRender: PropTypes.bool,
+  component: PropTypes.any.isRequired,
+  componentProps: PropTypes.object,
+  name: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  value: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+    PropTypes.bool,
+    PropTypes.array
+  ]),
+  options: PropTypes.arrayOf(PropTypes.shape({
+    label: PropTypes.string.isRequired,
+    value: PropTypes.any
+  })),
+  required: PropTypes.bool
+}
+
+FormControlField.defaultProps = {
+  componentProps: {}
+}
+
+const FormField = ({
+  prepend,
+  append,
+  componentProps,
+  ...fieldProps
+}) => {
+  const finalProps = {
+    componentProps,
+    ...fieldProps
+  }
+
+  if (componentProps?.type === 'hidden') {
+    return <input type="hidden" name={fieldProps.name} value={fieldProps.value} />
+  }
+
+  return (
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    <FormControlField {...finalProps} />
+  )
+}
+
+FormField.propTypes = {
+  component: PropTypes.any.isRequired,
+  componentProps: PropTypes.object,
+  type: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  value: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+    PropTypes.bool,
+    PropTypes.array
+  ]),
+  options: PropTypes.arrayOf(PropTypes.shape({
+    label: PropTypes.string.isRequired,
+    value: PropTypes.any
+  })),
+  prepend: PropTypes.array,
+  append: PropTypes.array,
+  hasErrors: PropTypes.bool,
+  errors: PropTypes.array,
+  validating: PropTypes.bool,
+  required: PropTypes.bool,
+  dirty: PropTypes.bool
+}
+
+export default React.memo(FormField)

package/src/ReadOnly/FormMarkdown.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+import rehypeHighlight from 'rehype-highlight'
+
+const FormMarkdown = ({ content }) => (
+  <ReactMarkdown
+    children={content}
+    remarkPlugins={[remarkGfm]}
+    rehypePlugins={[rehypeHighlight]}
+  />
+)
+
+FormMarkdown.propTypes = {
+  content: PropTypes.string
+}
+
+export default FormMarkdown

package/src/ReadOnly/FormNumber.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import FormReadOnlyText from './FormReadOnlyText'
+
+import { castToNumber } from '../helpers'
+
+const FormNumber = ({ value }) => <FormReadOnlyText value={castToNumber(value)} />
+
+FormNumber.propTypes = {
+  value: PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.string
+  ])
+}
+
+export default FormNumber