93 lines
3.0 KiB
JavaScript
93 lines
3.0 KiB
JavaScript
import { useState, useMemo, useRef, useEffect, useCallback } from 'react';
|
|
import { getData } from '../data';
|
|
import { Gantt, defaultColumns } from '../../src/';
|
|
import { Field, Switch } from '@svar-ui/react-core';
|
|
import './GanttPreventActions.css';
|
|
|
|
function GanttPreventActions({ skinSettings }) {
|
|
const data = useMemo(() => getData(), []);
|
|
|
|
const [add, setAdd] = useState(true); // if false - cannot add and edit task
|
|
const [drag, setDrag] = useState(true); // if false - cannot drag tasks on scale
|
|
const [order, setOrder] = useState(true); // if false - cannot reorder tasks in grid
|
|
const [newLink, setNewLink] = useState(true); // if false - cannot create new links
|
|
const [deleteLink, setDeleteLink] = useState(true); // if false - cannot delete links
|
|
const [progress, setProgress] = useState(true); // if false - cannot edit progress in chart
|
|
|
|
const dragRef = useRef(drag);
|
|
const orderRef = useRef(order);
|
|
|
|
useEffect(() => {
|
|
dragRef.current = drag;
|
|
}, [drag]);
|
|
|
|
useEffect(() => {
|
|
orderRef.current = order;
|
|
}, [order]);
|
|
|
|
const init = useCallback((gApi) => {
|
|
gApi.intercept('drag-task', (ev) => {
|
|
if (typeof ev.top !== 'undefined') return orderRef.current;
|
|
return dragRef.current; // ev.width && ev.left
|
|
});
|
|
}, []);
|
|
|
|
const columns = useMemo(
|
|
() =>
|
|
add ? defaultColumns : defaultColumns.filter((a) => a.id != 'add-task'),
|
|
[add],
|
|
);
|
|
|
|
return (
|
|
<div className="wx-RPSbwjNq rows">
|
|
<div className="wx-RPSbwjNq bar">
|
|
<Field label="Adding tasks" position={'left'}>
|
|
<Switch value={add} onChange={({ value }) => setAdd(value)} />
|
|
</Field>
|
|
<Field label="Creating links" position={'left'}>
|
|
<Switch value={newLink} onChange={({ value }) => setNewLink(value)} />
|
|
</Field>
|
|
<Field label="Deleting links" position={'left'}>
|
|
<Switch
|
|
value={deleteLink}
|
|
onChange={({ value }) => setDeleteLink(value)}
|
|
/>
|
|
</Field>
|
|
<Field label="Dragging tasks" position={'left'}>
|
|
<Switch value={drag} onChange={({ value }) => setDrag(value)} />
|
|
</Field>
|
|
<Field label="Reordering tasks" position={'left'}>
|
|
<Switch value={order} onChange={({ value }) => setOrder(value)} />
|
|
</Field>
|
|
<Field label="Editing progress" position={'left'}>
|
|
<Switch
|
|
value={progress}
|
|
onChange={({ value }) => setProgress(value)}
|
|
/>
|
|
</Field>
|
|
</div>
|
|
<div
|
|
className={
|
|
'wx-RPSbwjNq ' +
|
|
('gantt' +
|
|
(!newLink ? ' hide-links' : '') +
|
|
(!deleteLink ? ' hide-delete-links' : '') +
|
|
(!drag ? ' hide-drag' : '') +
|
|
(!progress ? ' hide-progress' : ''))
|
|
}
|
|
>
|
|
<Gantt
|
|
init={init}
|
|
{...(skinSettings || {})}
|
|
tasks={data.tasks}
|
|
links={data.links}
|
|
scales={data.scales}
|
|
columns={columns}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default GanttPreventActions;
|