47 lines
1.3 KiB
React
47 lines
1.3 KiB
React
import React, { useState } from 'react';
|
|
import './TopMenu.css';
|
|
|
|
export default function TopMenu({ items = [], activeKey = '', onChange }) {
|
|
const [active, setActive] = useState(activeKey);
|
|
|
|
function isActive(it) {
|
|
if (it.key === active) return true;
|
|
return (it.children || []).some(s => s.key === active);
|
|
}
|
|
function select(it) {
|
|
if (!it.children) {
|
|
setActive(it.key);
|
|
onChange && onChange(it.key);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="aa-topmenu">
|
|
{items.map((it, i) => (
|
|
<div
|
|
key={i}
|
|
className={'aa-topmenu-item' + (isActive(it) ? ' is-active' : '')}
|
|
onClick={() => select(it)}
|
|
>
|
|
<span>{it.label}</span>
|
|
{it.badge ? <span className="aa-topmenu-badge">{it.badge}</span> : null}
|
|
{it.children ? <span className="aa-topmenu-caret">▾</span> : null}
|
|
{it.children ? (
|
|
<div className="aa-topmenu-dropdown">
|
|
{it.children.map((s, si) => (
|
|
<a
|
|
key={si}
|
|
className={'aa-topmenu-sub' + (s.key === active ? ' is-active' : '')}
|
|
onClick={e => { e.stopPropagation(); select(s); }}
|
|
>
|
|
{s.label}
|
|
</a>
|
|
))}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|