@eixox/jetfuel-firebase-react/src/XcontrolRenderer.js

Our jetfuel lib to connect react to firebase

/**
 * A default control renderer that can render html inputs as html elements with no library attached;
 */
export default class XcontrolRenderer {
  /**
     * Renders a control;
     * @param {*} control
     */
  render(control) {
    return (
      <div className={control.state.state} key={control.props.name}>
        <label>{control.props.label}</label>
        {this.renderInput(control)}
        {control.state.message &&
          control.state.message !== null &&
          control.state.message !== undefined &&
          control.state.message !== "" && (
            <div className="message">{control.state.message}</div>
          )}
      </div>
    );
  }

  /**
     * Renders the actual input;
     * @param {*} control 
     */
  renderInput(control) {
    switch (control.type) {
      case "multiple_lines":
      case "textarea":
        return this.renderTextArea(control);
      case "single_option":
      case "radio_group":
        return this.renderRadioGroup(control);
      case "multiple_option":
      case "checkbox_group":
        return this.renderCheckboxGroup(control);
      case "dropdown":
        return this.renderDropdown(control);
      default:
        return this.renderSingleline(control);
    }
  }

  /**
     * Renders a text area input;
     * @param {*} control 
     */
  renderTextArea(control) {
    return (
      <textarea
        value={control.state.value}
        placeholder={control.props.placeholder}
        onChange={evt => control.onValueChange(evt.target.value)}
      />
    );
  }

  /**
     * Renders a radio group for a single choice select;
     * @param {*} control 
     */
  renderRadioGroup(control) {
    var options = control.props.options;
    var currValue = control.state.value;
    return (
      options && (
        <div className="radio_group">
          {options.map(function(option, index) {
            return (
              <div className="radio" key={index}>
                <input
                  type="radio"
                  name={control.props.name}
                  checked={
                    option.value === currValue || option.name === currValue
                  }
                  onClick={e =>
                    control.onValueChange(option.value || option.name)}
                />
                <label>
                  {option.icon && (
                    <img className="ui avatar image" src={option.icon} />
                  )}
                  <span>{option.name}</span>
                </label>
              </div>
            );
          })}
        </div>
      )
    );
  }

  /**
     * Renders a checkbox group for multi options select;
     */
  renderCheckboxGroup(control) {
    var options = control.props.options;
    return (
      options && (
        <div className="checkbox_group">
          {options.map(function(option, index) {
            return (
              <div className="checkbox" key={index}>
                <input
                  type="checkbox"
                  name={control.props.name}
                  checked={control.isValueSelected(option.value || option.name)}
                  onClick={e =>
                    control.onValueToggle(option.value || option.name)}
                />
                <label>
                  {option.icon && <img src={option.icon} />}
                  <span>{option.name}</span>
                </label>
              </div>
            );
          })}
        </div>
      )
    );
  }

  /**
     * Renders a singleline input;
     */
  renderSingleline(control) {
    return (
      <input
        value={control.state.value}
        type={control.props.type}
        placeholder={control.props.placeholder}
        onChange={evt => control.onValueChange(evt.target.value)}
      />
    );
  }

  /**
     * Renders a dropdown control;
     */
  renderDropdown(control) {
    return (
      <select
        onChange={e => control.onValueChange(e.target.value)}
        value={control.state.value}
      >
        {control.props.options.map(function(option, index) {
          return (
            <option value={option.value || option.name} key={index}>
              {option.label || option.name}
            </option>
          );
        })}
      </select>
    );
  }
}