wba/frontend/src/js/widget/wb-tabs.js

import { h, Component } from 'preact';

class WBTabs extends Component {
  render({ tabs, onTabChanged }) {
    return (
      <ul class="nav nav-tabs">
        { tabs.map((t, idx) => {
          let name, isActive, isDisabled;
          if (typeof(t) === 'object') {
            name = t.name;
            isActive = t.isActive;
            isDisabled = t.isDisabled;
          } else if (typeof(t) === 'string') {
            name = t;
          }
          let cls = ['nav-link'];
          if (isActive)
            cls.push('active');
          if (isDisabled)
            cls.push('disabled');
          cls = cls.join(' ');
          return (
            <li class="nav-item">
              <a class={ cls } href="#" onclick={ e => { e.preventDefault(); onTabChanged(t); } }>{ name }</a>
            </li>
          );
        }) }
      </ul>
    );
  }
}

WBTabs.defaultProps = {
  'onTabChanged': () => {}
};

export default WBTabs;