27 lines
1.6 KiB
TypeScript
27 lines
1.6 KiB
TypeScript
// меню «Колонки» экранов «Спринт» и «Kanban»: скрыть колонки доски; последнюю видимую скрыть нельзя
|
||
import { Badge, Checkbox, Dropdown, IconChevronDown } from "../../../ui/index.ts";
|
||
import { effectiveHidden } from "./columns.ts";
|
||
|
||
export function ColumnsMenu({ names, hidden, onChange }: { names: string[]; hidden: string[]; onChange(hidden: string[]): void }) {
|
||
const gone = effectiveHidden(names, hidden); // имена, которых на доске больше нет, не показываются и не считаются
|
||
const visible = names.filter((n) => !gone.includes(n));
|
||
const flip = (name: string, show: boolean) => onChange(names.filter((n) => (n === name ? !show : gone.includes(n))));
|
||
return (
|
||
<Dropdown className="agile-columns-menu" button={({ open, toggle }) => (
|
||
<button type="button" className="ui-input multi-btn" aria-label={gone.length > 0 ? `Колонки, скрыто ${gone.length}` : "Колонки"} aria-haspopup="true" aria-expanded={open} onClick={toggle}>
|
||
<span className="lbl">Колонки</span>{gone.length > 0 && <Badge>{gone.length}</Badge>}<IconChevronDown size={16} />
|
||
</button>
|
||
)}>
|
||
{() => (
|
||
<div className="dd-list" role="group" aria-label="Колонки">
|
||
{names.map((n) => {
|
||
const on = !gone.includes(n);
|
||
return <Checkbox key={n} className="dd-item" label={n} checked={on} disabled={on && visible.length === 1}
|
||
onChange={(e) => flip(n, e.target.checked)} />;
|
||
})}
|
||
</div>
|
||
)}
|
||
</Dropdown>
|
||
);
|
||
}
|