@cosva-lab/form-builder/esm/FieldRender.js

import React from 'react';
import * as ReactIs from 'react-is';
import { observer } from 'mobx-react';
import Grid from '@material-ui/core/Grid';
import Inputs from './Inputs';

const FieldRenderObserver = ({
  component,
  propsForm
}) => {
  let FieldComponent = component;

  try {
    FieldComponent = observer(component);
  } catch (error) {}

  return React.createElement(FieldComponent, propsForm);
};

class FieldRender extends React.PureComponent {
  constructor(...args) {
    super(...args);

    this.changeField = (e, callback) => this.props.changeField(e, callback);
  }

  render() {
    const {
      fieldProxy
    } = this.props;
    const breakpoints = { ...fieldProxy.breakpoints
    };
    const {
      xs = 12
    } = breakpoints;
    const {
      sm = xs
    } = breakpoints;
    const {
      md = sm
    } = breakpoints;
    const {
      lg = md
    } = breakpoints;
    const {
      xl = lg
    } = breakpoints;
    const {
      component: Component,
      render,
      type,
      grid = typeof this.props.grid !== 'undefined' ? this.props.grid : true
    } = fieldProxy;
    const propsForm = {
      fieldProxy,
      changeField: this.changeField
    };
    const formInput = React.createElement(Inputs, propsForm);
    if (render) return render({
      children: formInput,
      props: propsForm
    });

    if (type === 'component') {
      if (React.isValidElement(Component) && typeof Component !== 'function') {
        return React.createElement(Component.type, { ...Component.props,
          ...propsForm
        });
      }

      if (ReactIs.isValidElementType(Component)) return React.createElement(FieldRenderObserver, {
        component: Component,
        propsForm: propsForm
      });
      return null;
    }

    return grid ? React.createElement(Grid, {
      item: true,
      xs: xs,
      sm: sm,
      md: md,
      lg: lg,
      xl: xl
    }, formInput) : formInput;
  }

}

export { FieldRender };
export default FieldRender;