53 lines
1.4 KiB
JavaScript
53 lines
1.4 KiB
JavaScript
import { useRef, useState, useCallback, useMemo } from 'react';
|
|
import { getData } from '../data';
|
|
import { Gantt, ContextMenu, Editor } from '../../src/';
|
|
import { Button } from '@svar-ui/react-core';
|
|
import './DropDownMenu.css';
|
|
|
|
export default function DropDownMenu({ skinSettings }) {
|
|
const apiRef = useRef(null);
|
|
const [api, setApi] = useState(null);
|
|
const menu = useRef(null);
|
|
|
|
const data = useMemo(() => getData(), []);
|
|
|
|
const resolver = useCallback(() => {
|
|
const inst = apiRef.current;
|
|
const selected = inst ? inst.getReactiveState().selected : null;
|
|
const id =
|
|
selected && selected.length ? selected[selected.length - 1] : null;
|
|
return id ? inst.getTask(id) : null;
|
|
}, []);
|
|
|
|
return (
|
|
<>
|
|
<ContextMenu api={api} resolver={resolver} at="right" ref={menu} />
|
|
|
|
<div className="wx-T6JFUSGo rows">
|
|
<div className="wx-T6JFUSGo bar">
|
|
<Button
|
|
type="primary"
|
|
onClick={(ev) => menu.current && menu.current.show(ev)}
|
|
>
|
|
Task action
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="wx-T6JFUSGo gtcell">
|
|
<Gantt
|
|
ref={(inst) => {
|
|
apiRef.current = inst;
|
|
setApi(inst);
|
|
}}
|
|
{...skinSettings}
|
|
tasks={data.tasks}
|
|
links={data.links}
|
|
scales={data.scales}
|
|
/>
|
|
{api && <Editor api={api} />}
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|