@scenid/react-formulator 0.5.3 → 0.5.4

package/src/FormulatorFormSection.jsx

@@ -1,456 +0,0 @@
-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 FormText from './Editable/FormText'
-import FormNumber from './Editable/FormNumber'
-import FormCatalogType from './Editable/FormCatalogType'
-import FormBoolean from './Editable/FormBoolean'
-import FormRepeater from './Editable/FormRepeater'
-
-import FormReadOnlyField from './ReadOnly/FormReadOnlyField'
-import FormReadOnlyText from './ReadOnly/FormReadOnlyText'
-import FormMarkdown from './ReadOnly/FormReadOnlyMarkdown'
-import FormReadOnlyNumber from './ReadOnly/FormReadOnlyNumber'
-import FormReadOnlySelect from './ReadOnly/FormReadOnlySelect'
-import FormReadOnlyBoolean from './ReadOnly/FormReadOnlyBoolean'
-import FormReadOnlyRepeater from './ReadOnly/FormReadOnlyRepeater'
-
-import HiddenData from './Components/HiddenData'
-
-const formReadOnlyComponentMap = {
-  default: FormReadOnlyText,
-  markdown: FormMarkdown,
-  string: FormReadOnlyText,
-  number: FormReadOnlyNumber,
-  select: FormReadOnlySelect,
-  boolean: FormReadOnlyBoolean,
-  array: FormReadOnlyRepeater
-}
-
-const formComponentMap = {
-  default: FormText,
-  string: FormText,
-  number: FormNumber,
-  select: FormCatalogType,
-  boolean: FormBoolean,
-  array: FormRepeater
-}
-
-const apComponentMap = {
-  default: Input,
-  string: Input,
-  number: FormNumber,
-  select: FormCatalogType,
-  boolean: FormBoolean
-}
-
-class FormulatorFormSection extends React.Component {
-  getFieldProps(fieldEntry, componentMap) {
-    const {
-      schema,
-      translations,
-      errorMessages,
-      results,
-      data,
-      fieldStates,
-      renderComponentMap
-    } = this.props
-
-    let field = fieldEntry, isRender = false, specialProps = {}
-    if (Array.isArray(fieldEntry)) {
-      if (fieldEntry[0] === '@@markdown') {
-        return ({
-          type: 'markdown',
-          name: fieldEntry[1],
-          component: formReadOnlyComponentMap.markdown,
-          componentProps: {
-            content: fieldEntry[2]
-          }
-        })
-      }
-
-      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
-
-    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 (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 = isRender ? renderComponentMap[field] : componentMap[mapKey]
-    let component = mapEntry, props = {}
-
-    if (mapKey === 'array' && schema.properties[fieldEntry].options) {
-      props.options = (
-        schema.properties[fieldEntry].options
-          .reduce((l, r) => ({
-            ...l,
-            [r]: translations?.[fieldEntry]?.[r] || r
-          }), {})
-      )
-    }
-
-    if (mapKey === 'select') {
-      props.options = (
-        type.map(value => ({
-          label: translations?.[field]?.[value] || value,
-          value
-        }))
-      )
-    }
-
-    if (Array.isArray(mapEntry)) {
-      /* eslint-disable prefer-destructuring */
-      component = mapEntry[0]
-      props = mapEntry[1]
-      /* eslint-enable prefer-destructuring */
-    }
-
-    if (!component) throw new Error(`could not find component for field "${field}"`)
-
-    return {
-      type: isRender ? '@@render' : 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,
-      obscuredFields,
-      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 (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}
-                  results={results}
-                  data={data}
-                  obscuredFields={obscuredFields}
-                  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) {
-              if (!value) return false
-              if (Array.isArray(obscuredFields) && obscuredFields.includes(name)) {
-                return <HiddenData key={`hidden-field-${name}`} subject="Das Feld" label={label} />
-              }
-            }
-
-            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
-
-            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={label}
-        labelVariant={labelVariant}
-        desc={desc}
-        descVariant={descVariant}
-        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,
-  obscuredFields: PropTypes.array,
-  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/ReadOnly/FormReadOnlyBoolean.jsx

@@ -1,36 +0,0 @@
-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 FormReadOnlyBoolean = ({ 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
-    />
-  )
-}
-
-FormReadOnlyBoolean.propTypes = {
-  variant: PropTypes.string,
-  name: PropTypes.string.isRequired,
-  value: PropTypes.bool,
-  defaultValue: PropTypes.bool
-}
-
-export default FormReadOnlyBoolean

package/src/ReadOnly/FormReadOnlyField.jsx

@@ -1,126 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-import { Typography, Box } from '@material-ui/core'
-
-const FormControlField = ({
-  type,
-  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 (type === '@@render') 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 = {
-  component: PropTypes.any.isRequired,
-  componentProps: PropTypes.object,
-  name: PropTypes.string.isRequired,
-  type: 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 FormReadOnlyField = ({
-  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} />
-  )
-}
-
-FormReadOnlyField.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(FormReadOnlyField)

package/src/ReadOnly/FormReadOnlyMarkdown.jsx

@@ -1,20 +0,0 @@
-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 FormReadOnlyMarkdown = ({ content }) => (
-  <ReactMarkdown
-    children={content}
-    remarkPlugins={[remarkGfm]}
-    rehypePlugins={[rehypeHighlight]}
-  />
-)
-
-FormReadOnlyMarkdown.propTypes = {
-  content: PropTypes.string
-}
-
-export default FormReadOnlyMarkdown

package/src/ReadOnly/FormReadOnlyNumber.jsx

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

package/src/ReadOnly/FormReadOnlyRepeater.jsx

@@ -1,52 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-import {
-  List,
-  ListItem,
-  ListItemText
-} from '@material-ui/core'
-
-import { makeStyles } from '@material-ui/core/styles'
-
-const useStyles = makeStyles(() => ({
-  formRepeater: {
-    padding: 0,
-    margin: 0
-  }
-}))
-
-const getValue = (value, catalog) => {
-  if (catalog && catalog[value] !== undefined) return catalog[value]
-  return value
-}
-
-const FormReadOnlyRepeater = ({ value, options }) => {
-  const styles = useStyles()
-
-  return (
-    <List
-      className={styles.formRepeater}
-      dense
-    >
-      {
-        value && value.map((entry, index) => (
-          // eslint-disable-next-line react/no-array-index-key
-          <ListItem key={`entry-${index}`}>
-            <ListItemText
-              primary={getValue(entry, options)}
-              style={{ margin: 0 }}
-            />
-          </ListItem>
-        ))
-      }
-    </List>
-  )
-}
-
-FormReadOnlyRepeater.propTypes = {
-  value: PropTypes.array,
-  options: PropTypes.object
-}
-
-export default FormReadOnlyRepeater