Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 1fc953f

Browse files
MenubarItem: add interface, update to named export, update submenu context
1 parent 69ac8e3 commit 1fc953f

File tree

5 files changed

+43
-44
lines changed

5 files changed

+43
-44
lines changed

‎client/components/Menubar/Menubar.test.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react';
22
import { render, screen, fireEvent } from '../../test-utils';
33
import { Menubar } from './Menubar';
44
import MenubarSubmenu from './MenubarSubmenu';
5-
import MenubarItem from './MenubarItem';
5+
import {MenubarItem} from './MenubarItem';
66

77
describe('Menubar', () => {
88
const renderMenubar = () => {

‎client/components/Menubar/MenubarItem.tsx

Lines changed: 20 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,19 @@
1-
import PropTypes from 'prop-types';
21
import React, { useEffect, useContext, useRef } from 'react';
32
import { MenubarContext, SubmenuContext, ParentMenuContext } from './contexts';
4-
import { ButtonOrLink } from '../../common/ButtonOrLink';
3+
import { ButtonOrLink, ButtonOrLinkProps } from '../../common/ButtonOrLink';
4+
5+
export enum MenubarItemRole {
6+
MENU_ITEM = 'menuitem',
7+
OPTION = 'option'
8+
}
9+
10+
export interface MenubarItemProps extends Omit<ButtonOrLinkProps, 'role'> {
11+
/**
12+
* Provides a way to deal with optional items.
13+
*/
14+
role?: MenubarItemRole;
15+
selected?: boolean;
16+
}
517

618
/**
719
* MenubarItem wraps a button or link in an accessible list item that
@@ -36,14 +48,14 @@ import { ButtonOrLink } from '../../common/ButtonOrLink';
3648
* </MenubarItem>
3749
*/
3850

39-
function MenubarItem({
40-
className,
51+
exportfunction MenubarItem({
52+
className='nav__dropdown-item',
4153
id,
42-
role: customRole,
43-
isDisabled,
44-
selected,
54+
role: customRole=MenubarItemRole.MENU_ITEM,
55+
isDisabled=false,
56+
selected=false,
4557
...rest
46-
}) {
58+
}: MenubarItemProps) {
4759
const { createMenuItemHandlers, hasFocus } = useContext(MenubarContext);
4860
const {
4961
setSubmenuActiveIndex,
@@ -94,25 +106,3 @@ function MenubarItem({
94106
</li>
95107
);
96108
}
97-
98-
MenubarItem.propTypes = {
99-
...ButtonOrLink.propTypes,
100-
className: PropTypes.string,
101-
id: PropTypes.string,
102-
/**
103-
* Provides a way to deal with optional items.
104-
*/
105-
role: PropTypes.oneOf(['menuitem', 'option']),
106-
isDisabled: PropTypes.bool,
107-
selected: PropTypes.bool
108-
};
109-
110-
MenubarItem.defaultProps = {
111-
className: 'nav__dropdown-item',
112-
id: undefined,
113-
role: 'menuitem',
114-
isDisabled: false,
115-
selected: false
116-
};
117-
118-
export default MenubarItem;

‎client/components/Menubar/contexts.tsx

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { createContext } from 'react';
1+
import React, { createContext,RefObject } from 'react';
22

33
export const ParentMenuContext = createContext<string>('none');
44

@@ -21,6 +21,7 @@ interface MenubarContextType {
2121
onFocus: (e: React.FocusEvent) => void;
2222
};
2323
toggleMenuOpen: (id: string) => void;
24+
hasFocus: boolean;
2425
}
2526

2627
export const MenubarContext = createContext<MenubarContextType>({
@@ -35,7 +36,18 @@ export const MenubarContext = createContext<MenubarContextType>({
3536
onBlur: () => {},
3637
onFocus: () => {}
3738
}),
38-
toggleMenuOpen: () => {}
39+
toggleMenuOpen: () => {},
40+
hasFocus: false
3941
});
4042

41-
export const SubmenuContext = createContext({});
43+
export interface SubmenuContextType {
44+
submenuItems: Set<RefObject<HTMLElement>>;
45+
setSubmenuActiveIndex: (index: number) => void;
46+
registerSubmenuItem: (ref: RefObject<HTMLElement>) => () => void;
47+
}
48+
49+
export const SubmenuContext = createContext<SubmenuContextType>({
50+
submenuItems: new Set(),
51+
setSubmenuActiveIndex: () => {},
52+
registerSubmenuItem: () => () => {}
53+
});

‎client/modules/IDE/components/Header/Nav.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { Link } from 'react-router-dom';
55
import PropTypes from 'prop-types';
66
import { useTranslation } from 'react-i18next';
77
import MenubarSubmenu from '../../../../components/Menubar/MenubarSubmenu';
8-
import MenubarItem from '../../../../components/Menubar/MenubarItem';
8+
import {MenubarItem} from '../../../../components/Menubar/MenubarItem';
99
import { availableLanguages, languageKeyToLabel } from '../../../../i18n';
1010
import { getConfig } from '../../../../utils/getConfig';
1111
import { parseBoolean } from '../../../../utils/parseStringToType';

‎client/modules/IDE/components/Header/Nav.unit.test.jsx

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -37,15 +37,12 @@ jest.mock('../../../../components/Menubar/MenubarSubmenu', () => {
3737
});
3838

3939
// mock MenubarItem
40-
jest.mock(
41-
'../../../../components/Menubar/MenubarItem',
42-
() =>
43-
function MenubarItem({ children, hideIf }) {
44-
if (hideIf) return null;
45-
46-
return <li>{children}</li>;
47-
}
48-
);
40+
jest.mock('../../../../components/Menubar/MenubarItem', () => ({
41+
MenubarItem: ({ children, hideIf }) => {
42+
if (hideIf) return null;
43+
return <li>{children}</li>;
44+
}
45+
}));
4946

5047
describe('Nav', () => {
5148
it('renders editor version for desktop', () => {

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /