51 lines
1.2 KiB
JavaScript
51 lines
1.2 KiB
JavaScript
import { useState, useCallback, useMemo } from 'react';
|
|
import { getData } from '../data';
|
|
import { Gantt, defaultTaskTypes } from '../../src/';
|
|
import Form from '../custom/Form.jsx';
|
|
import './GanttForm.css';
|
|
|
|
export default function GanttForm({ skinSettings }) {
|
|
const data = useMemo(() => getData(), []);
|
|
const taskTypes = defaultTaskTypes;
|
|
|
|
const [task, setTask] = useState();
|
|
const [gApi, setGApi] = useState();
|
|
|
|
const formAction = useCallback(
|
|
({ action, data }) => {
|
|
switch (action) {
|
|
case 'close-form':
|
|
setTask(null);
|
|
break;
|
|
default:
|
|
gApi.exec(action, data);
|
|
break;
|
|
}
|
|
},
|
|
[gApi],
|
|
);
|
|
|
|
const init = useCallback((api) => {
|
|
api.intercept('show-editor', ({ id }) => {
|
|
if (id) setTask(api.getState().tasks.byId(id));
|
|
return false;
|
|
});
|
|
setGApi(api);
|
|
}, []);
|
|
|
|
return (
|
|
<div className="wx-0moLF6Ul wrapper">
|
|
<Gantt
|
|
init={init}
|
|
{...skinSettings}
|
|
tasks={data.tasks}
|
|
links={data.links}
|
|
scales={data.scales}
|
|
/>
|
|
{task ? (
|
|
<Form task={task} taskTypes={taskTypes} onAction={formAction} />
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|