json-joy
Version:
Collection of libraries for building collaborative editing apps.
37 lines (36 loc) • 1.72 kB
JavaScript
import * as React from 'react';
import { ToolbarMenu } from 'nice-ui/lib/4-card/Toolbar/ToolbarMenu';
import { ContextMenu } from 'nice-ui/lib/4-card/ContextMenu';
import { PositionAtPoint } from 'nice-ui/lib/utils/popup/PositionAtPoint';
import { context as popupContext } from 'nice-ui/lib/4-card/Popup/context';
import { ClickAway } from 'nice-ui/lib/utils/ClickAway';
import { ToolbarMenuProvider } from 'nice-ui/lib/4-card/Toolbar/ToolbarMenu/ToolbarMenuProvider';
export const ExpandableToolbar = (props) => {
const { expandPoint, more, ...rest } = props;
const [view, setView] = React.useState('toolbar');
const popupContextValue = React.useMemo(() => ({
close: () => {
setView('toolbar');
},
}), []);
const handleContextMenuClickAway = React.useCallback(() => {
setView('toolbar');
}, []);
if (view === 'context') {
if (!expandPoint)
return null;
return (React.createElement(PositionAtPoint, { point: typeof expandPoint === 'function' ? expandPoint() : expandPoint },
React.createElement(ClickAway, { onClickAway: handleContextMenuClickAway },
React.createElement(popupContext.Provider, { value: popupContextValue },
React.createElement(ToolbarMenuProvider, { ...rest },
React.createElement(ContextMenu, { ...rest, inset: true, showSearch: true, onEsc: () => setView('toolbar') }))))));
}
return (React.createElement(ToolbarMenu, { ...rest, more: {
...more,
onClick: expandPoint
? (e) => {
setView('context');
}
: undefined,
} }));
};