1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
|
// ==============================================================================
// Copyright (C) 2019 - Philip Paquette, Steven Bocco
//
// This program is free software: you can redistribute it and/or modify it under
// the terms of the GNU Affero General Public License as published by the Free
// Software Foundation, either version 3 of the License, or (at your option) any
// later version.
//
// This program is distributed in the hope that it will be useful, but WITHOUT
// ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
// FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
// details.
//
// You should have received a copy of the GNU Affero General Public License along
// with this program. If not, see <https://www.gnu.org/licenses/>.
// ==============================================================================
import React from "react";
import {Action} from "./widgets";
import PropTypes from 'prop-types';
export class Tab extends React.Component {
render() {
const style = {
display: this.props.display ? 'block' : 'none'
};
const id = this.props.id ? {id: this.props.id} : {};
return (
<div className={'tab mb-4 ' + this.props.className} style={style} {...id}>
{this.props.children}
</div>
);
}
}
Tab.propTypes = {
display: PropTypes.bool,
className: PropTypes.string,
id: PropTypes.string,
children: PropTypes.oneOfType([PropTypes.array, PropTypes.object])
};
Tab.defaultProps = {
display: false,
className: '',
id: ''
};
export class Tabs extends React.Component {
/** PROPERTIES
* active: index of active menu (must be > menu.length).
* highlights: dictionary mapping a menu indice to a highlight message
* onChange: callback(index): receive index of menu to display.
* **/
generateTabAction(tabTitle, tabId, isActive, onChange, highlight) {
return <Action isActive={isActive}
title={tabTitle}
onClick={() => onChange(tabId)}
highlight={highlight}
key={tabId}/>;
}
render() {
if (!this.props.menu.length)
throw new Error(`No tab menu given.`);
if (this.props.menu.length !== this.props.titles.length)
throw new Error(`Menu length (${this.props.menu.length}) != titles length (${this.props.titles.length})`);
if (this.props.active && !this.props.menu.includes(this.props.active))
throw new Error(`Invalid active tab name, got ${this.props.active}, expected one of: ${this.props.menu.join(', ')}`);
const active = this.props.active || this.props.menu[0];
return (
<div className={'tabs mb-3'}>
<nav className={'tabs-bar nav nav-tabs justify-content-center mb-3'}>
{this.props.menu.map((tabName, index) => this.generateTabAction(
this.props.titles[index], tabName, active === tabName, this.props.onChange,
(this.props.highlights.hasOwnProperty(tabName) && this.props.highlights[tabName]) || null
))}
</nav>
{this.props.children}
</div>
);
}
}
Tabs.propTypes = {
menu: PropTypes.arrayOf(PropTypes.string).isRequired, // tab names
titles: PropTypes.arrayOf(PropTypes.string).isRequired, // tab titles
onChange: PropTypes.func.isRequired, // callback(tab name)
children: PropTypes.array.isRequired,
active: PropTypes.string, // current active tab name
highlights: PropTypes.object, // {tab name => highligh message (optional)}
};
Tabs.defaultProps = {
highlights: {}
};
|
