tab.js
2.57 KB
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
import React, {useState, useEffect} from 'react';
//import '@wpmudev/shared-ui/js/tabs';
export function Tab( props ) {
const [activeTab, setActiveTab] = useState(false);
let id = props.id !== undefined ? props.id : '';
let classes = props.classes !== undefined ? props.classes : '';
let tabData = props.tabData !== undefined ? props.tabData : '';
let sideTab = props.sideTab !== undefined ? props.sideTab : false;
/*
SUI.tabs({
callback: function( tab, panel ) {}
});
*/
if ( '' === tabData ) {
return <></>
}
if ( sideTab ) {
classes += ' sui-side-tabs';
}
const handleTabClick = ( item ) => {
setActiveTab( item.id );
if ( typeof props.callback !== 'undefined' ) {
props.callback( item );
}
if ( typeof item.callback !== 'undefined' ) {
item.callback();
}
}
return <div
{... id ? {id} : {}}
className={`sui-tabs ${classes}`}
>
<div role="tablist" className="sui-tabs-menu">
{
tabData.map(
(arrayItem) => (
<button
key={arrayItem.id}
type="button"
role="tab"
id={arrayItem.id}
className={`sui-tab-item ${ ( ( ! activeTab && arrayItem.selected ) || activeTab === arrayItem.id ) ? 'active' : ''}`}
aria-controls={`${arrayItem.id}__content`}
aria-selected={arrayItem.selected}
onClick={ () => handleTabClick( arrayItem ) }
>
{arrayItem.title}
</button>
)
)
}
</div>
<div className="sui-tabs-content">
{
tabData.map(
(arrayItem ) => (
<div
key={arrayItem.id}
role="tabpanel"
tabIndex="0"
id={`${arrayItem.id}__content`}
className={`sui-tab-content ${ ( ( ! activeTab && arrayItem.selected) || activeTab === arrayItem.id ) ? 'active' : ''}`}
aria-labelledby={arrayItem.id}
>
<div>{arrayItem.content}</div>
</div>
)
)
}
</div>
</div>
}