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

Our jetfuel lib to connect react to firebase

export default class XinputRendererToSemanticUI {
  /**
   * Renders the control
   */
  render() {
    return (
      <div className={this.props.state === "error" ? "field error" : "field"}>
        <label>{this.props.label}</label>
        {this.renderInput()}
        {this.props.message && (
          <div
            className={
              this.props.state === "error"
                ? "ui pointing red basic label"
                : "ui pointing basic label"
            }
          >
            {this.props.message}
          </div>
        )}
      </div>
    );
  }

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

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

  /**
   * Renders a radio group for a single choice select;
   */
  renderRadioGroup() {
    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>
    );
  }
}