IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

ContextMenu: make focus on open optional (#45170)

Browse Source
This commit is contained in:
Ryan McKinley 2022-02-09 11:43:08 -08:00 committed by GitHub
parent 10232c7857
commit 1bdbc3abdf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/grafana-ui/src/components/ContextMenu/ContextMenu.tsx
View File

@ -11,6 +11,8 @@ export interface ContextMenuProps {
y: number;
/** Callback for closing the menu */
onClose?: () => void;
/** On menu open focus the first element */
focusOnOpen?: boolean;
/** RenderProp function that returns menu items to display */
renderMenuItems?: () => React.ReactNode;
/** A function that returns header element */
@ -18,7 +20,7 @@ export interface ContextMenuProps {
}
export const ContextMenu: React.FC<ContextMenuProps> = React.memo(
({ x, y, onClose, renderMenuItems, renderHeader }) => {
({ x, y, onClose, focusOnOpen = true, renderMenuItems, renderHeader }) => {
const menuRef = useRef<HTMLDivElement>(null);
const [positionStyles, setPositionStyles] = useState({});
@ -46,7 +48,9 @@ export const ContextMenu: React.FC<ContextMenuProps> = React.memo(
const header = renderHeader?.();
const menuItems = renderMenuItems?.();
const onOpen = (setFocusedItem: (a: number) => void) => {
setFocusedItem(0);
if (focusOnOpen) {
setFocusedItem(0);
}
};
const onKeyDown = (e: React.KeyboardEvent) => {
if (e.key === 'Escape') {

5
packages/grafana-ui/src/components/ContextMenu/WithContextMenu.tsx
View File

@ -6,9 +6,11 @@ interface WithContextMenuProps {
children: (props: { openMenu: React.MouseEventHandler<HTMLElement> }) => JSX.Element;
/** A function that returns an array of menu items */
renderMenuItems: () => React.ReactNode;
/** On menu open focus the first element */
focusOnOpen?: boolean;
}
export const WithContextMenu: React.FC<WithContextMenuProps> = ({ children, renderMenuItems }) => {
export const WithContextMenu: React.FC<WithContextMenuProps> = ({ children, renderMenuItems, focusOnOpen = true }) => {
const [isMenuOpen, setIsMenuOpen] = useState(false);
const [menuPosition, setMenuPosition] = useState({ x: 0, y: 0 });
return (
@ -29,6 +31,7 @@ export const WithContextMenu: React.FC<WithContextMenuProps> = ({ children, rend
x={menuPosition.x}
y={menuPosition.y}
renderMenuItems={renderMenuItems}
focusOnOpen={focusOnOpen}
/>
)}
</>