@eixox/jetfuel-firebase-react/src/XinputRenderer.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 XinputRenderer {
  /**
   * Renders a control;
   * @param {*} control
   */
  render(control) {
    return (
      <div
        className={
          control.state === "error"
            ? this.errorWrapperClass
            : this.normalWrapperClass
        }
      >
        <label>{control.label}</label>
        {this.renderInput(control)}
        {control.message &&
          control.message !== null &&
          control.message !==
            undefined(
              <div
                className={
                  this.props.state === "error"
                    ? this.errorMessageClass
                    : this.normaMessageClass
                }
              >
                {this.props.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.value}
        placeholder={control.placeholder}
        onChange={evt => control.onValueChange(evt.target.value)}
      />
    );
  }

  /**
   * Renders a radio group for a single choice select;
   * @param {*} control 
   */
  renderRadioGroup(control) {
    var dis = this;
    return (
      this.props.options && (
        <div className="grouped fields">
          {this.props.options.map(function(option, index) {
            return (
              <div className="field" key={index}>
                <div
                  className="ui radio checkbox"
                  onClick={e => dis.onValueChange(option.name)}
                >
                  <input
                    type="radio"
                    name={dis.props.id}
                    checked={option.name === dis.props.value}
                    tabIndex="0"
                    className="hidden"
                  />
                  <label>
                    {option.icon && (
                      <img className="ui avatar image" src={option.icon} />
                    )}
                    <span>{option.name}</span>
                  </label>
                </div>
              </div>
            );
          })}
        </div>
      )
    );
  }

  /**
   * Renders a checkbox group for multi options select;
   */
  renderCheckboxGroup() {
    var dis = this;
    return (
      this.props.options && (
        <div className="grouped fields">
          {this.props.options.map(function(option, index) {
            return (
              <div className="field" key={index}>
                <div
                  className="ui checkbox"
                  onClick={e => dis.onValueToggle(option.name)}
                >
                  <input
                    type="checkbox"
                    name={dis.props.name}
                    checked={dis.isValueSelected(option.name)}
                    tabIndex="0"
                    className="hidden"
                  />
                  <label>
                    {option.icon && (
                      <img className="ui avatar image" src={option.icon} />
                    )}
                    <span>{option.name}</span>
                  </label>
                </div>
              </div>
            );
          })}
        </div>
      )
    );
  }

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

  /**
   * Renders a dropdown control;
   */
  renderDropdown() {
    var dis = this;
    return (
      <select
        className="ui search dropdown"
        onChange={e => this.onValueChange(e.target.value)}
        defaultValue={this.props.value}
      >
        {this.props.options.map(function(option, index) {
          return (
            <option value={option.value || option.name} key={index}>
              {option.name}
            </option>
          );
        })}
      </select>
    );
  }
}