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

import { h, Component, VNode } from 'preact';

class WBTabs extends Component {
  render({ tabs, onTabChanged }) {
    return (
      <ul class="nav nav-tabs">
        { tabs.map((t, idx) => {
          let name, isActive, isDisabled, onClick;

          if (typeof(t) === 'object') {
            name = t.name;
            isActive = t.isActive;
            isDisabled = t.isDisabled;
            onClick = t.onClick;

          } 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();
                  onClick ? onClick() : onTabChanged(t); } }>
                { name }
              </a>
            </li>
          );
        }) }
      </ul>
    );
  }
}

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

export default WBTabs;