@scenid/react-formulator 0.0.2

package/src/FormulatorForm.jsx

@@ -0,0 +1,537 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import EventEmitter from 'eventemitter3'
+import { validate as validator } from '@scenid/formulator'
+import isEqual from 'deep-equal'
+
+import { render as mm } from 'micromustache'
+
+import FormulatorFormSection from './FormulatorFormSection'
+import HiddenData from './HiddenData'
+
+import 'highlight.js/styles/shades-of-purple.css'
+
+const asyncValidatorEnvelope = async (path, func) => {
+  const r = await func()
+
+  if (r !== true) {
+    return ({
+      path,
+      validator: 'Async',
+      message: r
+    })
+  }
+
+  return true
+}
+
+const validate = async (ee, schema, data, oldAsyncErrors, fieldStates, asyncValidators) => {
+  const { errors, results, ...rest } = validator(schema, data)
+
+  let asyncResults = []
+  let asyncErrors = oldAsyncErrors
+
+  if (asyncValidators) {
+    const activeValidators = (
+      Object
+        .entries(asyncValidators)
+        .map(e => ({ path: e[0], func: e[1] }))
+        .filter(({ path }) => results[path].sanitizedData !== undefined)
+    )
+
+    if (activeValidators.length > 0) {
+      const newFieldStates = JSON.parse(JSON.stringify(fieldStates))
+      activeValidators.forEach(({ path }) => { newFieldStates[path].validating = true })
+      ee.emit('fieldStates', newFieldStates)
+
+      asyncResults = await Promise.all(
+        activeValidators
+          .map(({ path, func }) => {
+            if (data[path]) {
+              return asyncValidatorEnvelope(
+                path,
+                () => func(path, data[path])
+              )
+            }
+            return Promise.resolve(true)
+          })
+      )
+
+      asyncErrors = asyncResults.filter(m => m !== true)
+    }
+  }
+
+  const mergedErrors = [...errors, ...asyncErrors]
+
+  const mergedResults = { ...results }
+  asyncErrors.forEach(e => {
+    const fr = mergedResults[e.path]
+    fr.errors = [...fr.errors, e]
+    fr.hasErrors = true
+    fr.sanitizedData = undefined
+  })
+
+  ee.emit(
+    'validation',
+    {
+      ...rest,
+      hasErrors: Object.keys(mergedErrors).length > 0,
+      errors: mergedErrors,
+      asyncErrors,
+      results: mergedResults,
+      fieldStates
+    }
+  )
+}
+
+const validateSync = (schema, data) => validator(schema, data)
+
+const getInitialData = (schema, iniData, transientData, iniFieldStates) => {
+  const { hasErrors, errors, results, data, sanitizedData } = validateSync(schema, { ...iniData, ...transientData })
+
+  const fieldStates = iniFieldStates || (
+    Object
+      .keys(results)
+      .map(path => ({
+        [path]: {
+          validating: false,
+          active: false,
+          touched: false,
+          dirty: false,
+          inactive: true,
+          pristine: true,
+          clean: true
+        }
+      }))
+      .reduce((l, r) => ({ ...l, ...r }), {})
+  )
+
+  const finalData = (
+    Object
+      .entries(data)
+      .map(e => {
+        let value = e[1]
+        if (value === undefined && sanitizedData[e[0]] !== undefined) value = sanitizedData[e[0]]
+        return { [e[0]]: value }
+      })
+      .reduce((l, r) => ({ ...l, ...r }), {})
+  )
+
+  return ({
+    preSubmitValidation: false,
+    hasErrors,
+    isDirty: Object.values(fieldStates).reduce((l, r) => l || r.dirty, false),
+    errors,
+    results,
+    data: finalData,
+    asyncErrors: [],
+    fieldStates
+  })
+}
+
+class FormulatorForm extends React.Component {
+  constructor(props) {
+    super(props)
+
+    const { schema, data, transientData, fieldStates, onStateChange } = props
+
+    this.state = getInitialData(schema, data, transientData, fieldStates)
+
+    this.handleFieldChange = this.handleFieldChange.bind(this)
+    this.handleFocus = this.handleFocus.bind(this)
+    this.handleBlur = this.handleBlur.bind(this)
+
+    this.ee = new EventEmitter()
+
+    this.ee.addListener('validation', this.handleValidation.bind(this))
+    if (onStateChange) this.ee.addListener('validation', onStateChange)
+
+    this.ee.addListener('fieldStates', this.handleFieldStates.bind(this))
+  }
+
+  componentDidMount() {
+    this.reportStatus()
+  }
+
+  componentDidUpdate(prevProps) {
+    const { data, transientData } = this.props
+
+    if (!isEqual(prevProps.data, data)) {
+      this.reinitialize()
+    }
+
+    if (transientData && !isEqual(transientData, prevProps.transientData)) {
+      this.forceFieldChanges(
+        Object
+          .entries(transientData)
+          .filter(e => e[1] !== prevProps.data[e[0]])
+          .map(e => ({ name: e[0], value: e[1] }))
+      )
+    }
+  }
+
+  componentWillUnmount() {
+    const { hasErrors, isDirty, data, fieldStates } = this.state
+    const { onUnmount } = this.props
+
+    if (onUnmount) onUnmount({ hasErrors, isDirty, data, fieldStates })
+    this.ee.removeAllListeners()
+  }
+
+  reinitialize() {
+    const { schema, data, transientData } = this.props
+
+    this.setState(getInitialData(schema, data, transientData))
+  }
+
+  forceFieldChanges(transientData) {
+    const { schema, data: initData, disabled, asyncValidators } = this.props
+    const { preSubmitValidation, data: oldData, asyncErrors, fieldStates } = this.state
+
+    if (preSubmitValidation || disabled) return
+
+    const newData = { ...oldData }
+    let newAsyncErrors = []
+    const newFieldStates = { ...fieldStates }
+
+    transientData.forEach(({ name, value }) => {
+      let finalValue = value
+      if (schema.properties[name].type === 'boolean') finalValue = oldData[name] !== true
+
+      const isDirty = initData[name] !== value
+
+      newAsyncErrors = asyncErrors.filter(({ path }) => path !== name).concat(newAsyncErrors)
+
+      newFieldStates[name] = {
+        ...fieldStates[name],
+        dirty: isDirty,
+        clean: !isDirty
+      }
+
+      newData[name] = finalValue
+    })
+
+    validate(
+      this.ee,
+      schema,
+      newData,
+      newAsyncErrors,
+      newFieldStates,
+      asyncValidators
+    )
+  }
+
+  handleFieldChange(e) {
+    const { name, value } = e.target
+
+    const { schema, data: initData, disabled, asyncValidators } = this.props
+    const { preSubmitValidation, data: oldData, asyncErrors, fieldStates } = this.state
+
+    if (preSubmitValidation || disabled) return
+
+    const isDirty = initData[name] !== value
+
+    const newAsyncErrors = asyncErrors.filter(({ path }) => path !== name)
+
+    validate(
+      this.ee,
+      schema,
+      { ...oldData, [name]: value },
+      newAsyncErrors,
+      {
+        ...fieldStates,
+        [name]: {
+          ...fieldStates[name],
+          dirty: isDirty,
+          clean: !isDirty
+        }
+      },
+      asyncValidators
+    )
+  }
+
+  handleValidation({ hasErrors, fieldStates, errors, ...result }) {
+    const { onSubmit, onStatusUpdate } = this.props
+    const { preSubmitValidation } = this.state
+
+    const statusFields = {
+      preSubmitValidation: false,
+      hasErrors,
+      errors,
+      isDirty: Object.values(fieldStates).reduce((l, r) => l || r.dirty, false)
+    }
+
+    this.setState(
+      { ...statusFields, fieldStates, errors, ...result },
+      () => {
+        if (onStatusUpdate) onStatusUpdate(statusFields)
+
+        if (preSubmitValidation && !hasErrors && onSubmit) onSubmit(result.sanitizedData)
+      }
+    )
+  }
+
+  reportStatus() {
+    const { onStatusUpdate } = this.props
+    const { hasErrors, fieldStates } = this.state
+
+    const statusFields = {
+      preSubmitValidation: false,
+      hasErrors,
+      isDirty: Object.values(fieldStates).reduce((l, r) => l || r.dirty, false)
+    }
+
+    if (onStatusUpdate) onStatusUpdate(statusFields)
+  }
+
+  handleFieldStates(fieldStates) {
+    this.setState({ fieldStates })
+  }
+
+  handleSubmit() {
+    const { schema, asyncValidators, onStatusUpdate } = this.props
+    const { errors, hasErrors, data, asyncErrors, fieldStates } = this.state
+
+    this.setState(
+      { preSubmitValidation: true },
+      () => {
+        const statusFields = {
+          preSubmitValidation: true,
+          hasErrors,
+          errors,
+          isDirty: Object.values(fieldStates).reduce((l, r) => l || r.dirty, false)
+        }
+
+        if (onStatusUpdate) onStatusUpdate(statusFields)
+
+        validate(this.ee, schema, data, asyncErrors, fieldStates, asyncValidators)
+      }
+    )
+  }
+
+  setFieldState(path, flags) {
+    const { fieldStates } = this.state
+
+    this.setState({
+      fieldStates: {
+        ...fieldStates,
+        [path]: {
+          ...fieldStates[path],
+          ...flags
+        }
+      }
+    })
+  }
+
+  handleFocus(e) {
+    const path = e.target.name
+
+    this.setFieldState(
+      path,
+      {
+        active: true,
+        inactive: false
+      }
+    )
+  }
+
+  handleBlur(e) {
+    const path = e.target.name
+
+    this.setFieldState(
+      path,
+      {
+        active: false,
+        inactive: true,
+        touched: true,
+        pristine: false
+      }
+    )
+  }
+
+  render() {
+    const {
+      id,
+      variant,
+      inputVariant,
+      groupLabelVariant,
+      groupDescVariant,
+      textAlign,
+      readOnly,
+      listErrors,
+      schema,
+      hideSensitiveData,
+      renderSchema,
+      disabled: propDisabled,
+      translations,
+      componentMap,
+      renderComponentMap,
+      errorMessages,
+      onReset
+    } = this.props
+
+    const {
+      hasErrors,
+      errors,
+      results,
+      data,
+      fieldStates,
+      preSubmitValidation
+    } = this.state
+
+    const disabled = preSubmitValidation || propDisabled
+
+    return (
+      <form
+        id={id}
+        className="formulator-form"
+        disabled={disabled}
+        onSubmit={e => {
+          e.preventDefault()
+          if (!disabled) this.handleSubmit()
+        }}
+        onReset={e => {
+          e.preventDefault()
+          this.reinitialize()
+          if (onReset) onReset()
+        }}
+      >
+        {
+          renderSchema.title
+            && <h5>{renderSchema.title}</h5>
+        }
+        {
+          renderSchema.description
+            && <h5>{renderSchema.description}</h5>
+        }
+        {
+          renderSchema.groups
+            .map(({ id: sectionId, label, description, fields }) => {
+              if (hideSensitiveData && sectionId === 'bankData') {
+                return <HiddenData subject="Der Bereich" label={label} />
+              }
+
+              return (
+                <FormulatorFormSection
+                  key={`form-section-${sectionId}`}
+                  id={id}
+                  sectionId={sectionId}
+                  variant={variant}
+                  inputVariant={inputVariant}
+                  labelVariant={groupLabelVariant}
+                  descVariant={groupDescVariant}
+                  textAlign={textAlign}
+                  readOnly={readOnly}
+                  disabled={disabled}
+                  schema={schema}
+                  label={label}
+                  desc={description}
+                  fields={fields}
+                  hideSensitiveData={hideSensitiveData}
+                  results={results}
+                  data={data}
+                  fieldStates={fieldStates}
+                  translations={translations}
+                  errorMessages={errorMessages}
+                  componentMap={componentMap}
+                  renderComponentMap={renderComponentMap}
+                  onChange={this.handleFieldChange}
+                />
+              )
+            })
+        }
+        {
+          (listErrors && hasErrors)
+            && (
+              <div className="errors">
+                {
+                  errors.map(({ path, message, options, validator: eVal }) => {
+                    let finalMessage = message
+
+                    if (options && options.human) finalMessage = options.human
+                    else if (errorMessages[eVal]) finalMessage = mm(errorMessages[eVal], options)
+
+                    return (
+                      <div
+                        key={`form-error-${path}-${validator}`}
+                        className="error"
+                      >
+                        <div className="field">{translations.labels[path] || path}</div>
+                        <div className="message">
+                          {finalMessage}
+                        </div>
+                      </div>
+                    )
+                  })
+                }
+              </div>
+            )
+        }
+      </form>
+    )
+  }
+}
+
+FormulatorForm.propTypes = {
+  id: PropTypes.string.isRequired,
+  variant: PropTypes.oneOf(['card', 'block']),
+  inputVariant: PropTypes.oneOf(['standard', 'filled', 'outlined']),
+  textAlign: PropTypes.oneOf(['left', 'center', 'right']),
+  groupLabelVariant: PropTypes.oneOf([
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+    'subtitle1',
+    'subtitle2',
+    'body1',
+    'body2',
+    'button',
+    'caption',
+    'overline'
+  ]),
+  groupDescVariant: PropTypes.oneOf([
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+    'subtitle1',
+    'subtitle2',
+    'body1',
+    'body2',
+    'button',
+    'caption',
+    'overline'
+  ]),
+  disabled: PropTypes.bool,
+  readOnly: PropTypes.bool,
+  listErrors: PropTypes.bool,
+  schema: PropTypes.object.isRequired,
+  data: PropTypes.object.isRequired,
+  hideSensitiveData: PropTypes.bool,
+  transientData: PropTypes.object,
+  fieldStates: PropTypes.object,
+  renderSchema: PropTypes.object.isRequired,
+  translations: PropTypes.object.isRequired,
+  asyncValidators: PropTypes.object,
+  errorMessages: PropTypes.object,
+  componentMap: PropTypes.object,
+  renderComponentMap: PropTypes.object,
+  onSubmit: PropTypes.func,
+  onReset: PropTypes.func,
+  onStatusUpdate: PropTypes.func,
+  onStateChange: PropTypes.func,
+  onUnmount: PropTypes.func
+}
+
+FormulatorForm.defaultProps = {
+  variant: 'card',
+  errorMessages: {}
+}
+
+export default FormulatorForm