63 lines
1.5 KiB
JavaScript
63 lines
1.5 KiB
JavaScript
import { useState, useMemo } from 'react';
|
|
import { getData } from '../data';
|
|
import { Gantt, ContextMenu, Toolbar, Editor } from '../../src/';
|
|
import { Segmented, Locale } from '@svar-ui/react-core';
|
|
import { cn } from '@svar-ui/gantt-locales';
|
|
import { cn as cnCore } from '@svar-ui/core-locales';
|
|
import './GanttLocale.css';
|
|
|
|
function GanttLocale({ skinSettings }) {
|
|
const langs = [
|
|
{ id: 'en', label: 'EN' },
|
|
{ id: 'cn', label: 'CN' },
|
|
];
|
|
const [lang, setLang] = useState('en');
|
|
|
|
return (
|
|
<div className="wx-ycv5Oz8L rows">
|
|
<div className="wx-ycv5Oz8L bar">
|
|
<Segmented
|
|
options={langs}
|
|
value={lang}
|
|
onChange={({ value }) => setLang(value)}
|
|
/>
|
|
</div>
|
|
{lang === 'en' && <GanttWidget skinSettings={skinSettings} />}
|
|
{lang === 'cn' && (
|
|
<Locale words={{ ...cn, ...cnCore }}>
|
|
<GanttWidget skinSettings={skinSettings} />
|
|
</Locale>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function GanttWidget(props) {
|
|
const { skinSettings } = props;
|
|
|
|
const [api, setApi] = useState(null);
|
|
const data = useMemo(() => getData(), []);
|
|
|
|
const settings = {
|
|
...skinSettings,
|
|
tasks: data.tasks,
|
|
links: data.links,
|
|
scales: data.scales,
|
|
zoom: true,
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Toolbar api={api} />
|
|
<div className="wx-ycv5Oz8L gtcell">
|
|
<ContextMenu api={api}>
|
|
<Gantt {...settings} init={setApi} />
|
|
</ContextMenu>
|
|
{api && <Editor api={api} />}
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default GanttLocale;
|