Artigos | Array.reduce  - O canivete suíço da programação funcional | Mixins

reduce-mixin.js

const mix = (baseClass) => ({
  with(...mixins) {
    return mixins.reduce((newClass, mixin) => mixin(newClass), baseClass);
  } 
});

const UIStateMixin = (baseClass) => {
  return class extends baseClass {
    constructor() {
      super(...arguments);
      
      this.disabled = false;
      this.loading = false;
    }

    disable() {
      this.disabled = true;
      
      return this;
    }

    showLoadingIndicator() {
      this.loading = true;
      
      return this;
    }
  }
}

class Component {
  constructor(tagName) {
    this.tagName = tagName;
  }
}

class Button extends mix(Component).with(UIStateMixin) {
  constructor() {
    super('ui-button');
  }
}

const button = new Button();

button                      /* tagName  : ui-button */
  .disable()                /* disabled : true      */
  .showLoadingIndicator();  /* loading  : true      */