Files
react-gantt/demos/cases/ProSummariesConvert.jsx
Marta Kowalska bb81e7a336 v2.4.3
2025-12-22 20:22:30 +00:00

110 lines
2.5 KiB
JavaScript

import { useMemo, useCallback, useRef } from 'react';
import { useStoreLater } from '@svar-ui/lib-react';
import { getData } from '../data';
import {
Gantt,
ContextMenu,
Editor,
getEditorItems,
defaultTaskTypes,
} from '../../src';
export default function SummariesConvert({ skinSettings }) {
const data = useMemo(() => getData(), []);
const gApi = useRef(null);
const toSummary = useCallback(
(id, self) => {
const api = gApi.current;
if (!api) return;
const task = api.getTask(id);
if (!self) id = task.parent;
if (id && task.type !== 'summary') {
api.exec('update-task', {
id,
task: { type: 'summary' },
});
}
},
[gApi],
);
const toTask = useCallback(
(id) => {
const api = gApi.current;
if (!api) return;
const obj = api.getTask(id);
if (obj && !obj.data?.length) {
api.exec('update-task', {
id,
task: { type: 'task' },
});
}
},
[gApi],
);
const init = useCallback(
(api) => {
gApi.current = api;
api.getState().tasks.forEach((task) => {
if (task.data?.length) {
toSummary(task.id, true);
}
});
api.on('add-task', ({ id, mode }) => {
if (mode === 'child') toSummary(id);
});
api.on('move-task', ({ id, source, mode, inProgress }) => {
if (inProgress) return;
if (mode == 'child') toSummary(id);
else toTask(source);
});
api.on('delete-task', ({ source }) => {
toTask(source);
});
},
[toSummary, toTask],
);
const activeTaskId = useStoreLater(gApi.current, 'activeTask');
const items = useMemo(() => {
const api = gApi.current;
const task = activeTaskId ? api?.getTask(activeTaskId) : null;
if (task) {
return getEditorItems().map((item) => {
item = { ...item };
if (item.comp === 'select' && item.key === 'type') {
item.options =
task.type !== 'summary'
? defaultTaskTypes.filter((t) => t.id !== 'summary')
: [];
}
return item;
});
}
return undefined;
}, [activeTaskId, gApi.current]);
return (
<div className="wx-TEIogFEZ gt-cell">
<ContextMenu api={gApi.current}>
<Gantt
init={init}
{...skinSettings}
tasks={data.tasks}
links={data.links}
scales={data.scales}
/>
</ContextMenu>
{gApi.current && <Editor api={gApi.current} items={items} />}
</div>
);
}