nice-ui
Version:
React design system, components, and utilities
43 lines (42 loc) • 2.04 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.ExpandableToolbar = void 0;
const React = require("react");
const _1 = require(".");
const ContextMenu_1 = require("../../ContextMenu");
const PositionAtPoint_1 = require("../../../utils/popup/PositionAtPoint");
const context_1 = require("../../Popup/context");
const ClickAway_1 = require("../../../utils/ClickAway");
const ToolbarMenuProvider_1 = require("./ToolbarMenuProvider");
const MoveToViewport_1 = require("../../../utils/popup/MoveToViewport");
const ExpandableToolbar = (props) => {
const { expandPoint, more, context, contextMenu = props.menu, ...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_1.PositionAtPoint, { point: typeof expandPoint === 'function' ? expandPoint() : expandPoint },
React.createElement(ClickAway_1.ClickAway, { onClickAway: handleContextMenuClickAway },
React.createElement(context_1.context.Provider, { value: popupContextValue },
React.createElement(ToolbarMenuProvider_1.ToolbarMenuProvider, { ...rest },
React.createElement(MoveToViewport_1.MoveToViewport, null,
React.createElement(ContextMenu_1.ContextMenu, { inset: true, showSearch: true, ...context, menu: contextMenu, onEsc: () => setView('toolbar') })))))));
}
return (React.createElement(_1.ToolbarMenu, { ...rest, more: {
...more,
onClick: expandPoint
? () => {
setView('context');
}
: undefined,
} }));
};
exports.ExpandableToolbar = ExpandableToolbar;