cluedin-widget/core/components/generics/form/index.jsx

This project contains all the pages needed for browsing entities and searching them. The aim is to replace the CluedIn.Webapp project with this one when all the pages ( including the Admin page ) will be ported to REACT.

import React, { Component } from 'react';
import SelectEntityType from './fields/SelectEntityType.jsx';
import FormDecorator from './fields/FormDecorator.jsx';
import Alert from '../alert.jsx';

const inputStyle = {
  width: '100%',
  padding: '5px 8px',
  margin: '10px 0',
  boxSizing: 'border-box',
  fontSize: '14px',
  border: '1px solid #ccc;',
};

export default class Form extends Component {

  constructor(props) {
    super(props);

    this.state = {
      touched: false,
      value: {},
      validation: [],
    };
  }

  fieldChanged(name, value, isValid) {
    const { onFormUpdate, fields } = this.props;

    this.state.value[name] = value;

    let validation = this.state.validation.filter((v) => {
      return v.name !== name;
    });

    if (!isValid) {
      let currentField = fields.find((f) => (f.name === name));

      validation.push({
        name: name,
        message: currentField.errorMessage || '',
      });
    }

    this.setState({
      validation,
      touched: true,
    });

    if (onFormUpdate) {
      onFormUpdate(this.state.value, this.state.validation, true);
    }
  }

  inputFieldChanged(name, event) {
    const { onFormUpdate, fields } = this.props;

    const value = event.target.value;
    const isValid = (value) ? true : false;

    this.state.value[name] = value;

    let validation = this.state.validation.filter((v) => {
      return v.name !== name;
    });

    if(!isValid) {
      let currentField = fields.find((f) => (f.name === name));

      validation.push({
        name: name,
        message: currentField.errorMessage || '',
      });
    }

    this.setState({
      validation,
      touched: true,
    });

    if (onFormUpdate) {
      onFormUpdate(this.state.value, this.state.validation, true);
    }

  }

  render() {
    const { fields, hasValidationUI } = this.props;
    let validationContent;

    const fieldsContent = fields.map((f, index) => {
      switch (f.type) {
        case 'input':
          return (
            <FormDecorator key={index} label={f.displayName || f.name}>
              <input style={inputStyle} value={this.state[f.name]} onChange={this.inputFieldChanged.bind(this, f.name)} />
            </FormDecorator>
          );
        case 'entityType' :
          return (
            <FormDecorator key={index} label={f.displayName || f.name}>
              <SelectEntityType onChange={this.fieldChanged.bind(this)} name={f.name}/>
            </FormDecorator>);
        default:
          return <div key={index}>Unknown</div>;
      }
    });

    if (hasValidationUI && this.state.validation && this.state.validation.length > 0) {
      validationContent = (
        <Alert type="danger">
          {this.state.validation.map((v) => {
            return (<div>{v.errorMessage}</div>);
          })}
        </Alert>
      );
    }

    return (
      <div>
        {validationContent}
        <form>
          {fieldsContent}
        </form>
      </div>
    );
  }
}

Form.propTypes = {
  fields: React.PropTypes.array,
};