|
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115 |
- import { h, Component } from 'preact';
-
- class WBNavbar extends Component {
- render({ title, items, rhs, onItemClicked, onTitleClicked,
- activeItem, titleUrl, getItemUrl }) {
-
- return (
- <nav class="navbar navbar-expand-lg navbar-light bg-light">
- <a class="navbar-brand" href={ titleUrl } onclick={ e => this.titleClicked(e) }>{ title }</a>
-
- <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
- <span class="navbar-toggler-icon"></span>
- </button>
-
- <div class="collapse navbar-collapse" id="navbarSupportedContent">
- <ul class="navbar-nav mr-auto">
-
- { items.map(i => {
- if (typeof(i) === 'string')
- return (
- <li class="nav-item">
- <a class="nav-link" href="#">{ i }</a>
- </li>
- );
-
- else if (typeof(i) === 'object')
- var li_cls = ['nav-item'];
- if (i['active'] || activeItem === i['id'])
- li_cls.push('active');
- var a_cls = ['nav-link'];
- if (i['disabled'])
- a_cls.push('disabled');
-
- if ('dropdown' in i) {
- li_cls.push('dropdown');
- a_cls.push('dropdown-toggle');
-
- li_cls = li_cls.join(' ');
- a_cls = a_cls.join(' ');
-
- return (
- <li class={ li_cls }>
- <a class={ a_cls } href="#" id={ i['name'].replace(' ', '-').toLowerCase() + '-dropdown' }
- role="button" data-toggle="dropdown" aria-haspopup="true"
- aria-expanded="false">{ i['name'] }</a>
- <div class="dropdown-menu" aria-labelledby={ i['name'].replace(' ', '-').toLowerCase() + '-dropdown' }>
- { i['dropdown'].map(d => {
- if (typeof(d) === 'string')
- return (
- <a class="dropdown-item" href={ getItemUrl(d) }
- onclick={ e => this.itemClicked(e, d) }>{ d }</a>
- );
-
- else if (typeof(d) === 'object' && d['divider'])
- return (
- <div class="dropdown-divider" />
- );
-
- else if (typeof(d) === 'object' && d['name'])
- return (
- <a class="dropdown-item" href={ getItemUrl(d) }
- onclick={ e => this.itemClicked(e, d) }>{ d['name'] }</a>
- );
- }) }
- </div>
- </li>
- );
- } else {
- li_cls = li_cls.join(' ');
- a_cls = a_cls.join(' ');
-
- return (
- <li class={ li_cls }>
- <a class={ a_cls } href={ getItemUrl(i) }
- onclick={ e => this.itemClicked(e, i) }>{ i['name'] }</a>
- </li>
- );
- }
-
- }) }
- </ul>
-
- { rhs }
- </div>
- </nav>
- );
- }
-
- titleClicked(e) {
- let { onTitleClicked } = this.props;
- if (!onTitleClicked)
- return;
- e.preventDefault();
- onTitleClicked();
- }
-
- itemClicked(e, i) {
- let { onItemClicked } = this.props;
- if (!onItemClicked)
- return;
- e.preventDefault();
- onItemClicked(i);
- }
- }
-
- WBNavbar.defaultProps = {
- 'title': 'Workbench Advanced',
- 'items': [],
- 'form': null,
- 'activeItem': null,
- 'titleUrl': '#',
- 'getItemUrl': () => ('#')
- }
-
- export default WBNavbar;
|