Skip to content

Commit c2c8a4d

Browse files
joyenjoyerjoyenjoyer
committed
refactor(ui-top-nav-bar): change api
1 parent a4b35ee commit c2c8a4d

File tree

2 files changed

+148
-139
lines changed

2 files changed

+148
-139
lines changed

‎packages/__docs__/src/App/index.tsx‎

Lines changed: 146 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -46,8 +46,10 @@ import { Tray } from '@instructure/ui-tray'
4646
import { Img } from '@instructure/ui-img'
4747
import { View } from '@instructure/ui-view'
4848
import { SideNavBar } from '@instructure/ui-side-nav-bar'
49+
import { TopNavBar } from '@instructure/ui-top-nav-bar'
4950
import { ScreenReaderContent } from '@instructure/ui-a11y-content'
5051
import Link from '../Link'
52+
import { Drilldown } from '@instructure/ui-drilldown'
5153

5254
type AppProps = {
5355
navigate: (path: string, options?: { replace: boolean }) => void
@@ -239,6 +241,121 @@ class App extends Component<AppProps, AppState> {
239241
}
240242
]
241243

244+
const drillDown = (
245+
<Drilldown
246+
rootPageId={'default'} //renderBackButtonLabel={item?.backButtonLabel}
247+
>
248+
<Drilldown.Page id={'default'}>
249+
<Drilldown.Group key={'default'} id={'default'}>
250+
<Drilldown.Option
251+
id={'account'}
252+
subPageId={'account'}
253+
afterLabelContentVAlign={'center'}
254+
>
255+
<div>
256+
<IconUserLine /> Account
257+
</div>
258+
</Drilldown.Option>
259+
<Drilldown.Option
260+
id={'courses'}
261+
subPageId={'courses'}
262+
afterLabelContentVAlign={'center'}
263+
>
264+
<div>
265+
<IconCoursesLine /> Courses
266+
</div>
267+
</Drilldown.Option>
268+
<Drilldown.Option
269+
id={'dashboard'}
270+
afterLabelContentVAlign={'center'}
271+
onOptionClick={() => {
272+
this.props.navigate('/dashboard', { replace: true })
273+
this.setState({ openMobile: false })
274+
}}
275+
>
276+
<div>
277+
<IconDashboardLine /> Dashboard
278+
</div>
279+
</Drilldown.Option>
280+
<Drilldown.Option
281+
id={'help'}
282+
afterLabelContentVAlign={'center'}
283+
onOptionClick={() => alert('Help clicked')}
284+
>
285+
<div>
286+
<IconQuestionLine /> Help
287+
</div>
288+
</Drilldown.Option>
289+
</Drilldown.Group>
290+
</Drilldown.Page>
291+
<Drilldown.Page
292+
id={'account'}
293+
renderBackButtonLabel={'Account'}
294+
renderAfterChildren={
295+
<p>
296+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
297+
aliquet erat in orci semper fringilla. Nullam suscipit mollis mi,
298+
at vehicula magna vulputate eu. Cras mattis felis id quam vehicula
299+
euismod. Nulla dolor enim, ornare in odio a, molestie dictum
300+
ligula. Nullam maximus et dolor eget porttitor. Vestibulum
301+
faucibus viverra pellentesque. Duis lorem lectus, porta vitae
302+
aliquam vitae, vehicula sagittis nulla. Aenean sagittis congue
303+
rhoncus. Cras laoreet eu nulla eu dignissim. Maecenas sed massa
304+
nisi. Suspendisse pellentesque, metus sed ultricies porta, justo
305+
tellus pulvinar diam, ac ornare massa nibh quis purus. Duis erat
306+
ipsum, pellentesque in diam non, luctus accumsan metus. In ipsum
307+
tellus, ullamcorper a faucibus a, venenatis ut urna. Sed at rutrum
308+
turpis.
309+
</p>
310+
}
311+
renderBeforeChildren={
312+
<div style={{ display: 'flex', justifyContent: 'center' }}>
313+
<Img src="https://sbcf.fr/wp-content/uploads/2018/03/sbcf-default-avatar.png" />
314+
</div>
315+
}
316+
>
317+
<Drilldown.Group key={'account'} id={'account'}>
318+
<Drilldown.Option
319+
id={'accountinfo1'}
320+
afterLabelContentVAlign={'center'}
321+
>
322+
<div>Account info 1</div>
323+
</Drilldown.Option>
324+
<Drilldown.Option
325+
id={'accountinfo2'}
326+
afterLabelContentVAlign={'center'}
327+
>
328+
<div>Account info 2</div>
329+
</Drilldown.Option>
330+
</Drilldown.Group>
331+
</Drilldown.Page>
332+
<Drilldown.Page id={'courses'} renderBackButtonLabel={'Courses'}>
333+
<Drilldown.Group key={'courses'} id={'courses'}>
334+
<Drilldown.Option
335+
id={'courses1'}
336+
afterLabelContentVAlign={'center'}
337+
onOptionClick={() => {
338+
this.props.navigate('/course1', { replace: true })
339+
this.setState({ openMobile: false })
340+
}}
341+
>
342+
<div>Courses1</div>
343+
</Drilldown.Option>
344+
<Drilldown.Option
345+
id={'courses2'}
346+
afterLabelContentVAlign={'center'}
347+
onOptionClick={() => {
348+
this.props.navigate('/course2', { replace: true })
349+
this.setState({ openMobile: false })
350+
}}
351+
>
352+
<div>Courses2</div>
353+
</Drilldown.Option>
354+
</Drilldown.Group>
355+
</Drilldown.Page>
356+
</Drilldown>
357+
)
358+
242359
return (
243360
<div style={{ display: 'flex', flexDirection: 'row' }}>
244361
<InstUISettingsProvider>
@@ -346,49 +463,41 @@ class App extends Component<AppProps, AppState> {
346463
onClick: () => alert('Alerts clicked')
347464
}
348465
]}
349-
mobileMenu={menuArray}
466+
mobileMenu={drillDown}
350467
open={this.state.openMobile} // jobb nev, pl mobileMenuOpen
351468
onOpenChange={(open: boolean) => {
352469
// szinten
353470
this.setState({ openMobile: open })
354471
}}
355472
ltiIcon={<IconArcLine />}
356-
ltiMenuItems={[
357-
{ id: 'library', title: 'My Library' },
358-
{ id: 'share', title: 'Share with me' },
359-
{ id: 'settings', title: 'Settings' },
360-
{
361-
id: 'submenu',
362-
title: 'SubMenu',
363-
options: [
364-
{
365-
id: 'account',
366-
label: 'Account',
367-
renderBeforeTitle: <IconUserLine />,
368-
subPageId: 'accountPage',
369-
subOptions: [
370-
{
371-
id: 'profile',
372-
label: 'Profile Settings',
373-
href: '/profile'
374-
},
375-
{
376-
id: 'privacy',
377-
label: 'Privacy',
378-
href: '/privacy'
379-
}
380-
]
381-
},
382-
{
383-
id: 'courses',
384-
label: 'Courses',
385-
renderBeforeTitle: <IconCoursesLine />,
386-
href: '/courses'
387-
}
388-
]
389-
}
390-
]}
391-
currentPageId="share" // ltiCurrentPageID
473+
ltiMenuItems={
474+
<TopNavBar.MenuItems
475+
listLabel="Page navigation"
476+
currentPageId="OverviewPage"
477+
renderHiddenItemsMenuTriggerLabel={(hiddenChildrenCount) =>
478+
`${hiddenChildrenCount} More`
479+
}
480+
>
481+
<TopNavBar.Item id="OverviewPage" href="/#TopNavBar">
482+
Overview
483+
</TopNavBar.Item>
484+
<TopNavBar.Item id="AdminPage" href="/#TopNavBar">
485+
Admin
486+
</TopNavBar.Item>
487+
<TopNavBar.Item id="SettingsPage" href="/#TopNavBar">
488+
Settings
489+
</TopNavBar.Item>
490+
<TopNavBar.Item id="MapsPage" href="/#TopNavBar">
491+
Maps
492+
</TopNavBar.Item>
493+
<TopNavBar.Item id="AssessmentsPage" href="/#TopNavBar">
494+
Assessments
495+
</TopNavBar.Item>
496+
<TopNavBar.Item id="CommunityPage" href="/#TopNavBar">
497+
Community
498+
</TopNavBar.Item>
499+
</TopNavBar.MenuItems>
500+
}
392501
/>
393502
<Tray
394503
label="Courses"

‎packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx‎

Lines changed: 2 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -30,9 +30,6 @@ import { IconHamburgerLine } from '@instructure/ui-icons'
3030
import { Button, IconButton } from '@instructure/ui-buttons'
3131
import { Breadcrumb } from '@instructure/ui-breadcrumb'
3232
import { generateStyle } from './styles'
33-
import { Drilldown } from '@instructure/ui-drilldown'
34-
import { TopNavBarMenuItems } from '../TopNavBar/TopNavBarMenuItems'
35-
import { TopNavBarItem } from '../TopNavBar/TopNavBarItem'
3633
import { CanvasTopNavProps } from './props'
3734
import generateComponentTheme from './theme'
3835
import TopNavBarContext from '../TopNavBar/TopNavBarContext'
@@ -88,38 +85,6 @@ const CanvasTopNav = ({
8885
displayName: 'CanvasTopNav'
8986
})
9087

91-
const renderDrilldownPages = (items: any) => {
92-
return items.map((item: any) => {
93-
return (
94-
<Drilldown.Page
95-
key={item.id}
96-
id={item.id}
97-
renderBackButtonLabel={item?.backButtonLabel}
98-
renderBeforeChildren={item.renderBeforeMobileMenuItems}
99-
renderAfterChildren={item.renderAfterMobileMenuItems}
100-
>
101-
{item.options.map((option: any) => {
102-
return (
103-
<Drilldown.Group key={option.id} id={option.id}>
104-
<Drilldown.Option
105-
id={option.id}
106-
subPageId={option.subPageId}
107-
onOptionClick={option.onClick}
108-
afterLabelContentVAlign={'center'}
109-
>
110-
<div css={styles.optionContainer}>
111-
{option.renderBeforeTitle}
112-
{option.label}
113-
</div>
114-
</Drilldown.Option>
115-
</Drilldown.Group>
116-
)
117-
})}
118-
</Drilldown.Page>
119-
)
120-
})
121-
}
122-
12388
// Render mobile or desktop nav based on screen size
12489
return isSmallScreen ? (
12590
<MobileTopNav
@@ -160,9 +125,7 @@ const CanvasTopNav = ({
160125
}
161126
}}
162127
>
163-
<Drilldown rootPageId={'default'}>
164-
{renderDrilldownPages(mobileMenu)}
165-
</Drilldown>
128+
{mobileMenu}
166129
</InstUISettingsProvider>
167130
</MobileTopNav.Menu>
168131
</MobileTopNav>
@@ -213,70 +176,7 @@ const CanvasTopNav = ({
213176
inverseColor: true
214177
}}
215178
>
216-
<TopNavBarMenuItems
217-
renderHiddenItemsMenuTriggerLabel={() => ''}
218-
currentPageId={currentPageId}
219-
>
220-
{ltiMenuItems?.map((item: any) => {
221-
// Check if this item has a submenu
222-
if (item.options?.length) {
223-
return (
224-
<TopNavBarItem
225-
key={item.id}
226-
id={item.id}
227-
renderSubmenu={
228-
<Drilldown rootPageId={item.id}>
229-
{/* Root Page */}
230-
<Drilldown.Page id={item.id}>
231-
{item.options.map((option: any) => (
232-
<Drilldown.Option
233-
key={option.id}
234-
id={option.id}
235-
subPageId={option.subPageId}
236-
href={option.href}
237-
>
238-
{option.renderBeforeTitle}
239-
{option.label}
240-
</Drilldown.Option>
241-
))}
242-
</Drilldown.Page>
243-
244-
{/* Optional nested pages if subPageId is used */}
245-
{item.options
246-
.filter((opt: any) => opt.subOptions?.length)
247-
.map((opt: any) => (
248-
<Drilldown.Page
249-
key={opt.subPageId}
250-
id={opt.subPageId}
251-
>
252-
{opt.subOptions.map((subOpt: any) => (
253-
<Drilldown.Option
254-
key={subOpt.id}
255-
id={subOpt.id}
256-
href={subOpt.href}
257-
>
258-
{subOpt.renderBeforeTitle}
259-
{subOpt.label}
260-
</Drilldown.Option>
261-
))}
262-
</Drilldown.Page>
263-
))}
264-
</Drilldown>
265-
}
266-
>
267-
{item.title}
268-
</TopNavBarItem>
269-
)
270-
}
271-
272-
// Top-level item with no submenu
273-
return (
274-
<TopNavBarItem key={item.id} id={item.id}>
275-
{item.title}
276-
</TopNavBarItem>
277-
)
278-
})}
279-
</TopNavBarMenuItems>
179+
{ltiMenuItems}
280180
</TopNavBarContext.Provider>
281181
</InstUISettingsProvider>
282182
</div>

0 commit comments

Comments
 (0)