64 lines
1.4 KiB
JavaScript
64 lines
1.4 KiB
JavaScript
import { useMemo, useState, useCallback } from 'react';
|
|
import {
|
|
Gantt,
|
|
ContextMenu,
|
|
Editor,
|
|
defaultEditorItems,
|
|
defaultColumns,
|
|
} from '../../src';
|
|
import { format } from 'date-fns';
|
|
import { getData } from '../data';
|
|
|
|
export default function GanttDurationUnitHour({ skinSettings }) {
|
|
const { tasks, links, scales } = useMemo(() => getData('hour'), []);
|
|
|
|
const [api, setApi] = useState(null);
|
|
|
|
const items = useMemo(
|
|
() =>
|
|
defaultEditorItems.map((ed) => ({
|
|
...ed,
|
|
...(ed.comp === 'date' && { config: { time: true } }),
|
|
})),
|
|
[],
|
|
);
|
|
|
|
const columns = useMemo(
|
|
() =>
|
|
defaultColumns.map((col) => ({
|
|
...col,
|
|
...(col.id === 'start' && {
|
|
template: (d) => format(d, 'MMM d, HH:mm'),
|
|
width: 120,
|
|
}),
|
|
})),
|
|
[],
|
|
);
|
|
|
|
const highlightTime = useCallback((date, unit) => {
|
|
const h = date.getHours();
|
|
if ((unit === 'hour' && h < 8) || h > 21) return 'wx-weekend';
|
|
return '';
|
|
}, []);
|
|
|
|
return (
|
|
<>
|
|
<ContextMenu api={api}>
|
|
<Gantt
|
|
init={setApi}
|
|
{...(skinSettings || {})}
|
|
tasks={tasks}
|
|
links={links}
|
|
columns={columns}
|
|
scales={scales}
|
|
cellWidth={40}
|
|
durationUnit="hour"
|
|
lengthUnit="minute"
|
|
highlightTime={highlightTime}
|
|
/>
|
|
</ContextMenu>
|
|
{api && <Editor api={api} items={items} />}
|
|
</>
|
|
);
|
|
}
|