54 lines
1.4 KiB
JavaScript
54 lines
1.4 KiB
JavaScript
import { useState, useContext, useMemo } from 'react';
|
|
import { getData } from '../data';
|
|
import { Gantt, ContextMenu, Editor, defaultMenuOptions } from '../../src/';
|
|
import { context } from '@svar-ui/react-core';
|
|
|
|
export default function ContextMenuOptions({ skinSettings }) {
|
|
const helpers = useContext(context.helpers);
|
|
|
|
const data = useMemo(() => getData(), []);
|
|
|
|
const [api, setApi] = useState();
|
|
|
|
function actionHandler() {
|
|
helpers.showNotice({ text: "'My action' clicked" });
|
|
}
|
|
|
|
const [options] = useState(() => {
|
|
const ids = ['cut-task', 'copy-task', 'paste-task', 'delete-task'];
|
|
let arr = [{ id: 'add-task:after', text: ' Add below', icon: 'wxi-plus' }];
|
|
arr = arr.concat(
|
|
defaultMenuOptions.filter((op) => ids.indexOf(op.id) >= 0),
|
|
);
|
|
arr.push({
|
|
id: 'my-action',
|
|
text: 'My action',
|
|
icon: 'wxi-empty',
|
|
handler: actionHandler,
|
|
});
|
|
return arr;
|
|
});
|
|
|
|
function onClick({ context: ctx, action }) {
|
|
if (!action.handler)
|
|
helpers.showNotice({
|
|
text: `'${action.id}' clicked for the '${ctx.id}' task`,
|
|
});
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<ContextMenu api={api} options={options} onClick={onClick}>
|
|
<Gantt
|
|
init={setApi}
|
|
{...skinSettings}
|
|
tasks={data.tasks}
|
|
links={data.links}
|
|
scales={data.scales}
|
|
/>
|
|
</ContextMenu>
|
|
{api && <Editor api={api} />}
|
|
</>
|
|
);
|
|
}
|