@uifabric/experiments
Version:
Experimental React components for building experiences for Microsoft 365.
31 lines • 2.34 kB
JavaScript
define(["require", "exports", "tslib", "react", "office-ui-fabric-react/lib/ContextualMenu"], function (require, exports, tslib_1, React, ContextualMenu_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
// `extends any` to trick the parser into parsing as a type decl instead of a jsx tag
exports.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, tslib_1.__assign({}, selectedItemProps, { onTrigger: openContextMenu })),
isContextMenuOpen ? (React.createElement(ContextualMenu_1.ContextualMenu, { items: menuItems, shouldFocusOnMount: true, target: containerRef.current, onDismiss: closeContextMenu, directionalHint: ContextualMenu_1.DirectionalHint.bottomLeftEdge })) : null));
});
};
});
//# sourceMappingURL=ItemWithContextMenu.js.map