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

Our jetfuel lib to connect react to firebase

import React from "react";
import Xinput from "./Xinput.js";

/**
 * A generic input controller that should handle state changes withing inputs and propagate them to listeners;
 */
export default class XinputCollection {
  /**
   * The holder of this controller's inputs;
   */
  controls = [];

  /**
   * Adds a new control onto the given key;
   * @param {*} control 
   */
  add(control) {
    //Check if there's a control
    if (!control) {
      console.error(
        "You need to pass a control to this method: XinputCollection.add(control)."
      );
      return;
    }
    //Check if the control has a name
    if (!control.name || control.name === null || control.name === undefined) {
      console.error(
        "The control must have a name: XinputCollection.add(control).",
        control
      );
      return;
    }
    this.controls.push(control);
  }

  /**
   * Gets a control specified by a name;
   * @param {*} name
   */
  get(name) {
    if (name && name !== null && name !== undefined)
      for (var i = 0; i < this.controls.length; i++)
        if (name === this.controls[i].name) return this.controls[i];
  }

  /**
   * Gets the value of the control with a specific name;
   * @param {*} name 
   */
  getValue(name) {
    var control = this.get(name);
    return control && control !== null ? control.value : null;
  }

  /**
   * Loads the interceptor, intercepts the value and sets it 
   * to the corresponding key on the controls, 
   * returning the intercepted value to the caller;
   * @param {*} name 
   * @param {*} value 
   */
  setValue(name, value) {
    var control = this.get(name);
    var interceptor = control.interceptor;
    try {
      if (interceptor) {
        if (interceptor instanceof Array) {
          for (var i = 0; i < interceptor.length; i++)
            value = interceptor[i](value);
        } else value = interceptor(value);
      }
    } catch (e) {
      console.exception(e);
    }
    control.value = value;
    control.state = "normal";
    control.message = "";
    if (this.onChange) this.onChange(name, value);
    return value;
  }

  /**
   * Maps the controls using array.map function and an optional argument to set as "this." on the function;
   * @param {*} fn 
   * @param {*} t 
   */
  map(fn, t) {
    return this.controls.map(fn, t);
  }

  /**
   * Copies the values of this collection controls to a 
   * given object or create a new one with the values of this collection;
   * @param {*} target 
   */
  toObject(target) {
    var obj = target || {};
    for (var i = 0; i < this.controls.length; i++) {
      var control = this.controls[i];
      obj[control.name] = control.value;
    }
    return obj;
  }

  /**
  * Resets all control values to their defaultValue property;
  */
  reset() {
    for (var i = 0; i < this.controls.length; i++) {
      var control = this.controls[i];
      control.value = control.defaultValue;
      control.state = "normal";
      control.message = "";
    }
    if (this.onChange) this.onChange();
  }

  /**
   * Renders a specific control
   * @param {*} control 
   */
  renderControl(control) {
    //If the parameter is a string, look it up as the name of a control;
    if (typeof control === "string" || control instanceof String)
      control = this.get(control);

    var dis = this;
    return (
      <Xinput
        key={control.name}
        label={control.label}
        type={control.type}
        required={control.required}
        maxLength={control.maxLength}
        minLength={control.minLength}
        value={control.value}
        options={control.options}
        state={control.state}
        message={control.message}
        placeholder={control.placeholder}
        onChange={v => {
          dis.setValue(control.name, v);
        }}
      />
    );
  }

  /**
   * Renders either one control with the given name or all controls on this collection;
   */
  render(name) {
    return;
    name && name !== null && name !== undefined
      ? this.renderControl(this.get(name))
      : this.controls.map(function(ctrl) {
          return this.renderControl(ctrl);
        }, this);
  }
}