button-with-mixes.js

class Component {
  
}

const hoverable = supperCls => class extends supperCls {
  constructor(...args) {
    super(...args);
    this.state = {
      ...this.state,
      hovered: false,
    };
  }
  
  onMouseEnter(e) {
    if (!this.props.disabled) {
      this.setState({ hovered: true });
    }
  }
  
  onMouseLeave(e) {
    super.onMouseLeave(e);
    this.setState({ hovered: false });
  }
}

const pressable = supperCls => class extends supperCls {
  constructor(...args) {
    super(...args);
    this.state = {
      ...this.state,
      pressed: false,
    };
  }
  
  componentWillRecieveProps({ disabled }) {
    super.componentWillRecieveProps({ disabled });
    if (disabled) {
      this.setState({ pressed: false });
    }
  }
  
  onMouseDown(e) {
    if (!this.props.disabled) {
      this.setState({ pressed: true });
    }
  }
  
  onMouseUp(e) {
    this.setState({ pressed: false });
  }

  onMouseLeave(e) {
    super.onMouseLeave(e);
    this.setState({ pressed: false });
  }
};

function mix(superCls, ...withMixin) {
  return withMixin.reduce((cls, mixin) => mixin(cls), superCls);
}

class Button extends mix(Component, pressable, hoverable) {
  
}

const b = new Button({});
console.log(b.state);