@uifabric/experiments
Version:
Experimental React components for building experiences for Microsoft 365.
30 lines • 2.11 kB
JavaScript
import { __assign } from "tslib";
import * as React from 'react';
import { ContextualMenu, DirectionalHint } from 'office-ui-fabric-react/lib/ContextualMenu';
// `extends any` to trick the parser into parsing as a type decl instead of a jsx tag
export var ItemWithContextMenu = function (itemWithContextMenuProps) {
return React.memo(function (selectedItemProps) {
var _a = React.useState(false), isContextMenuOpen = _a[0], setIsContextMenuOpen = _a[1];
var openContextMenu = React.useCallback(function () {
setIsContextMenuOpen(true);
}, [setIsContextMenuOpen]);
var closeContextMenu = React.useCallback(function (e) {
e.preventDefault();
setIsContextMenuOpen(false);
}, [setIsContextMenuOpen]);
var menuItems = React.useMemo(function () { return itemWithContextMenuProps.menuItems(selectedItemProps.item, selectedItemProps.onTrigger); },
// TODO: evaluate whether anything should be changed here based on warning:
// "React Hook React.useMemo has an unnecessary dependency: 'itemWithContextMenuProps.menuItems'.
// Either exclude it or remove the dependency array. Outer scope values like
// 'itemWithContextMenuProps.menuItems' aren't valid dependencies because mutating them
// doesn't re-render the component."
// eslint-disable-next-line react-hooks/exhaustive-deps
[selectedItemProps.item, selectedItemProps.onTrigger, itemWithContextMenuProps.menuItems]);
var containerRef = React.useRef(null);
var ItemComponent = itemWithContextMenuProps.itemComponent;
return (React.createElement("span", { ref: containerRef },
React.createElement(ItemComponent, __assign({}, selectedItemProps, { onTrigger: openContextMenu })),
isContextMenuOpen ? (React.createElement(ContextualMenu, { items: menuItems, shouldFocusOnMount: true, target: containerRef.current, onDismiss: closeContextMenu, directionalHint: DirectionalHint.bottomLeftEdge })) : null));
});
};
//# sourceMappingURL=ItemWithContextMenu.js.map