@scenid/react-formulator 0.5.3 → 0.5.4

package/src/FormulatorForm.jsx

@@ -1,539 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-import EventEmitter from 'eventemitter3'
-import { validate as validator } from '@scenid/formulator'
-import isEqual from 'fast-deep-equal'
-
-import { render as mm } from 'micromustache'
-
-import FormulatorFormSection from './FormulatorFormSection'
-import HiddenData from './Components/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,
-      renderSchema,
-      disabled: propDisabled,
-      translations,
-      componentMap,
-      renderComponentMap,
-      obscuredFields,
-      obscuredGroups,
-      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 (readOnly && Array.isArray(obscuredGroups) && obscuredGroups.includes(sectionId)) {
-                return <HiddenData key={`hidden-field-${sectionId}`} 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}
-                  results={results}
-                  data={data}
-                  fieldStates={fieldStates}
-                  obscuredFields={obscuredFields}
-                  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,
-  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,
-  obscuredFields: PropTypes.array,
-  obscuredGroups: PropTypes.array,
-  onSubmit: PropTypes.func,
-  onReset: PropTypes.func,
-  onStatusUpdate: PropTypes.func,
-  onStateChange: PropTypes.func,
-  onUnmount: PropTypes.func
-}
-
-FormulatorForm.defaultProps = {
-  variant: 'card',
-  errorMessages: {}
-}
-
-export default FormulatorForm