105 lines
2.4 KiB
JavaScript
105 lines
2.4 KiB
JavaScript
import { useState, useMemo } from 'react';
|
|
import { getData } from '../data';
|
|
import { Gantt, Editor } from '../../src/';
|
|
import { Toolbar } from '@svar-ui/react-toolbar';
|
|
import { useStoreLater } from '@svar-ui/lib-react';
|
|
import './GanttToolbarCustom.css';
|
|
|
|
export default function GanttToolbarCustom({ skinSettings }) {
|
|
const data = useMemo(() => getData(), []);
|
|
|
|
const [api, setApi] = useState(null);
|
|
const selectedValue = useStoreLater(api, 'selected');
|
|
|
|
function handleAdd() {
|
|
if (!api) return;
|
|
api.exec('add-task', {
|
|
task: {
|
|
text: 'New task',
|
|
},
|
|
target: selectedValue[0],
|
|
mode: 'after',
|
|
});
|
|
}
|
|
|
|
function handleDelete() {
|
|
if (!api) return;
|
|
const order = getActionOrder(true);
|
|
order.forEach((id) => api.exec('delete-task', { id }));
|
|
}
|
|
|
|
function handleMove(mode) {
|
|
if (!api) return;
|
|
const changeDir = mode === 'down';
|
|
const order = getActionOrder(changeDir);
|
|
order.forEach((id) => api.exec('move-task', { id, mode }));
|
|
}
|
|
|
|
function getActionOrder(changeDir) {
|
|
if (!api) return [];
|
|
const tasks = selectedValue
|
|
.map((id) => api.getTask(id))
|
|
.sort((a, b) => {
|
|
return a.$level - b.$level || a.$y - b.$y;
|
|
});
|
|
const idOrder = tasks.map((o) => o.id);
|
|
if (changeDir) return idOrder.reverse();
|
|
return idOrder;
|
|
}
|
|
|
|
const allItems = [
|
|
{
|
|
comp: 'button',
|
|
type: 'primary',
|
|
text: 'Add task',
|
|
handler: handleAdd,
|
|
},
|
|
{
|
|
comp: 'button',
|
|
text: 'Delete task',
|
|
handler: handleDelete,
|
|
},
|
|
{
|
|
comp: 'button',
|
|
type: 'primary',
|
|
text: 'Move task down',
|
|
handler: () => handleMove('down'),
|
|
},
|
|
{
|
|
comp: 'button',
|
|
type: 'primary',
|
|
text: 'Move task up',
|
|
handler: () => handleMove('up'),
|
|
},
|
|
];
|
|
|
|
const items = useMemo(() => {
|
|
if (api && selectedValue) {
|
|
return selectedValue.length ? allItems : [allItems[0]];
|
|
}
|
|
return [allItems[0]];
|
|
}, [api, selectedValue, allItems]);
|
|
|
|
const GanttInitialised = useMemo(() => {
|
|
return (
|
|
<Gantt
|
|
{...(skinSettings || {})}
|
|
init={setApi}
|
|
tasks={data.tasks}
|
|
links={data.links}
|
|
scales={data.scales}
|
|
/>
|
|
);
|
|
}, [skinSettings, data.tasks, data.links, data.scales]);
|
|
|
|
return (
|
|
<>
|
|
<Toolbar items={items} />
|
|
<div className="wx-7sTOb4gt gtcell">
|
|
{GanttInitialised}
|
|
{api && <Editor api={api} />}
|
|
</div>
|
|
</>
|
|
);
|
|
}
|