64 lines
1.8 KiB
JavaScript
64 lines
1.8 KiB
JavaScript
import { useMemo, useState } from 'react';
|
|
import { getData } from '../data';
|
|
import { Gantt } from '../../src/';
|
|
import { DatePicker, Field, Locale, Switch } from '@svar-ui/react-core';
|
|
import './GanttStartEnd.css';
|
|
|
|
export default function GanttStartEnd({ skinSettings }) {
|
|
const data = useMemo(() => getData(), []);
|
|
const [start, setStart] = useState(new Date(2024, 3, 5));
|
|
const [end, setEnd] = useState(new Date(2024, 4, 1));
|
|
const [autoScale, setAutoScale] = useState(false);
|
|
|
|
return (
|
|
<div className="wx-FJQN2sNt demo">
|
|
<Locale>
|
|
<div className="wx-FJQN2sNt bar">
|
|
<Field label="Start" position="left">
|
|
{({ id }) => (
|
|
<DatePicker
|
|
value={start}
|
|
id={id}
|
|
onChange={({ value }) => setStart(value)}
|
|
/>
|
|
)}
|
|
</Field>
|
|
<Field label="End" position="left">
|
|
{({ id }) => (
|
|
<DatePicker
|
|
value={end}
|
|
id={id}
|
|
onChange={({ value }) => setEnd(value)}
|
|
/>
|
|
)}
|
|
</Field>
|
|
<Field label="autoScale" position="left">
|
|
{({ id }) => (
|
|
<div className="wx-FJQN2sNt input">
|
|
<Switch
|
|
value={autoScale}
|
|
id={id}
|
|
onChange={({ value }) => setAutoScale(value)}
|
|
/>
|
|
</div>
|
|
)}
|
|
</Field>
|
|
</div>
|
|
</Locale>
|
|
|
|
<div className="wx-FJQN2sNt gantt">
|
|
<Gantt
|
|
{...skinSettings}
|
|
tasks={data.tasks}
|
|
links={data.links}
|
|
scales={data.scales}
|
|
autoScale={autoScale}
|
|
zoom
|
|
start={start}
|
|
end={end}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|