85 lines
2.2 KiB
JavaScript
85 lines
2.2 KiB
JavaScript
import { useMemo, useState } from 'react';
|
|
import { getData } from '../data';
|
|
import { Gantt, ContextMenu, Editor, getEditorItems } from '../../src';
|
|
import { RadioButtonGroup } from '@svar-ui/react-core';
|
|
import './GanttDurationUnitChanges.css';
|
|
|
|
export default function GanttDurationUnitChanges({ skinSettings }) {
|
|
const initialData = getData();
|
|
const [tasks, setTasks] = useState(initialData.tasks);
|
|
const [links] = useState(initialData.links);
|
|
|
|
const scalesMap = useMemo(
|
|
() => ({
|
|
hour: getData('hour').scales,
|
|
day: getData().scales,
|
|
}),
|
|
[],
|
|
);
|
|
|
|
const options = [
|
|
{ id: 'day', label: 'Day' },
|
|
{ id: 'hour', label: 'Hour' },
|
|
];
|
|
|
|
const [durationUnit, setDurationUnit] = useState('day');
|
|
const [scales, setScales] = useState(scalesMap['day']);
|
|
|
|
const [api, setApi] = useState(null);
|
|
|
|
const items = useMemo(
|
|
() =>
|
|
getEditorItems().map((ed) => ({
|
|
...ed,
|
|
...(ed.comp === 'date' && {
|
|
config: { time: durationUnit === 'hour' },
|
|
}),
|
|
})),
|
|
[durationUnit],
|
|
);
|
|
|
|
function handleUnitChange({ value }) {
|
|
const sTasks = api.serialize().map((task) => {
|
|
if (task.start && task.end) {
|
|
const ms = 1000 * 60 * 60 * (value === 'day' ? 24 : 1);
|
|
const duration = Math.floor((task.end - task.start) / ms);
|
|
return { ...task, duration };
|
|
}
|
|
return task;
|
|
});
|
|
setTasks(sTasks);
|
|
setDurationUnit(value);
|
|
setScales(scalesMap[value]);
|
|
}
|
|
|
|
return (
|
|
<div className="wx-d4Cw5r6y rows">
|
|
<div className="wx-d4Cw5r6y bar">
|
|
<div className="wx-d4Cw5r6y label">Gantt duration unit</div>
|
|
<RadioButtonGroup
|
|
options={options}
|
|
value={durationUnit}
|
|
type="inline"
|
|
onChange={handleUnitChange}
|
|
/>
|
|
</div>
|
|
|
|
<div className="wx-d4Cw5r6y gtcell">
|
|
<ContextMenu api={api}>
|
|
<Gantt
|
|
init={setApi}
|
|
{...skinSettings}
|
|
tasks={tasks}
|
|
links={links}
|
|
scales={scales}
|
|
cellWidth={40}
|
|
durationUnit={durationUnit}
|
|
lengthUnit={'hour'}
|
|
/>
|
|
</ContextMenu>
|
|
{api && <Editor api={api} items={items} />}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|