typescript Bulma.io形式为aurelia和aurelia形式的渲染器。

Posted 2021-05-21

/**
 * Bulma.io form renderer for aurelia and aurelia form.
 *
 * Converted from "Bootstrap form renderer for aurelia and aurelia form."
 *
 * @export
 * @class BulmaFormRenderer
 */
export class BulmaFormRenderer {
  render(instruction) {
    for (let { result, elements } of instruction.unrender) {
      for (let element of elements) {
        this.remove(element, result);
      }
    }

    for (let { result, elements } of instruction.render) {
      for (let element of elements) {
        this.add(element, result);
      }
    }
  }

  /**
   * Add to error list
   *
   * @param {any} element
   * @param {any} error
   * @returns
   * @memberof BulmaFormRenderer
   */
  add(element, error) {
    if(!error.valid) {
      const formGroup = element.closest('.field');
      if (!formGroup || formGroup.classList.contains('help')) {
        return;
      }

      // add the has-error class to the enclosing form-group div
      formGroup.classList.add('has-error');
      element.classList.add('is-danger');

      // add help-block
      const message = document.createElement('p');
      message.className = 'help is-danger';
      message.textContent = error.message;
      message.id = `validation-message-${error.id}`;
      formGroup.appendChild(message);
    }
  }

  /**
   * Removes from error list
   *
   * @param {any} element
   * @param {any} error
   * @returns
   * @memberof BulmaFormRenderer
   */
  remove(element, error) {
    if (error) {
      const formGroup = element.closest('.field');
      if (!formGroup) {
        return;
      }

      element.classList.remove('is-danger');

      // remove help-block
      const message = formGroup.querySelector(`#validation-message-${error.id}`);
      if (message) {
        formGroup.removeChild(message);

        // remove the has-error class from the enclosing gield div
        if (formGroup.querySelectorAll('.help.validation-message').length === 0) {
          formGroup.classList.remove('is-danger');
        }
      }
    }
  }
}