Skip to content

Commit a4ccc61

Browse files
joyenjoyerjoyenjoyer
committed
WIP(emotion,ui-drilldown,ui-top-nav-bar): add sidenav
1 parent 1904a0f commit a4ccc61

File tree

11 files changed

+228
-405
lines changed

11 files changed

+228
-405
lines changed

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

Lines changed: 142 additions & 196 deletions
Large diffs are not rendered by default.

‎packages/__docs__/src/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ import { BrowserRouter } from 'react-router-dom'
3232

3333
createRoot(document.getElementById('app')).render(
3434
<InstUISettingsProvider>
35-
<BrowserRouter>
35+
<BrowserRouter basename="/">
3636
<AppWrapper />
3737
</BrowserRouter>
3838
</InstUISettingsProvider>

‎packages/emotion/src/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ export * from '@emotion/react'
2727

2828
export { InstUISettingsProvider } from './InstUISettingsProvider'
2929
export { withStyle } from './withStyle'
30+
export { withFunctionalStyle } from './withFunctionalStyle'
3031
export {
3132
ThemeablePropValues,
3233
ThemeablePropTypes,

‎packages/emotion/src/withFunctionalStyle.tsx‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
/*
2+
* The MIT License (MIT)
3+
*
4+
* Copyright (c) 2015 - present Instructure, Inc.
5+
*
6+
* Permission is hereby granted, free of charge, to any person obtaining a copy
7+
* of this software and associated documentation files (the "Software"), to deal
8+
* in the Software without restriction, including without limitation the rights
9+
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
10+
* copies of the Software, and to permit persons to whom the Software is
11+
* furnished to do so, subject to the following conditions:
12+
*
13+
* The above copyright notice and this permission notice shall be included in all
14+
* copies or substantial portions of the Software.
15+
*
16+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
17+
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
18+
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
19+
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
20+
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
21+
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
22+
* SOFTWARE.
23+
*/
24+
25+
import { useTheme } from './index'
26+
import React from 'react'
27+
28+
const withFunctionalStyle =
29+
<ComponentOwnProps, ComponentStyle>(
30+
generateStyles: (props: any, theme: any) => ComponentStyle
31+
) =>
32+
(WrappedComponent: any) =>
33+
// eslint-disable-next-line react/display-name
34+
(originalProps: ComponentOwnProps) => {
35+
const theme = useTheme()
36+
const styledProps = {
37+
styles: generateStyles(originalProps, theme),
38+
...originalProps
39+
}
40+
return <WrappedComponent {...styledProps} />
41+
}
42+
43+
export default withFunctionalStyle
44+
export { withFunctionalStyle }

‎packages/ui-drilldown/src/Drilldown/DrilldownPage/props.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -90,9 +90,9 @@ type DrilldownPageOwnProps = {
9090
*/
9191
disabled?: boolean
9292

93-
renderBeforeChildren?: () => React.ReactNode
93+
renderBeforeChildren?: React.ReactNode | (() => React.ReactNode)
9494

95-
renderAfterChildren?: () => React.ReactNode
95+
renderAfterChildren?: React.ReactNode | (() => React.ReactNode)
9696
}
9797

9898
type PropKeys = keyof DrilldownPageOwnProps
@@ -116,8 +116,8 @@ const propTypes: PropValidators<PropKeys> = {
116116
onBackButtonClicked: PropTypes.func,
117117
withoutHeaderSeparator: PropTypes.bool,
118118
disabled: PropTypes.bool,
119-
renderBeforeChildren: PropTypes.func,
120-
renderAfterChildren: PropTypes.func
119+
renderBeforeChildren: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
120+
renderAfterChildren: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
121121
}
122122

123123
const allowedProps: AllowedPropKeys = [

‎packages/ui-drilldown/src/Drilldown/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -465,7 +465,7 @@ class Drilldown extends Component<DrilldownProps, DrilldownState> {
465465
)
466466

467467
if (currentPage.renderBeforeChildren) {
468-
headerChildren.push(currentPage.renderBeforeChildren())
468+
headerChildren.push(currentPage.renderBeforeChildren)
469469
}
470470
}
471471

@@ -1445,7 +1445,7 @@ class Drilldown extends Component<DrilldownProps, DrilldownState> {
14451445
{this.renderList(getOptionProps, getDisabledOptionProps)}
14461446
{this.currentPage?.renderAfterChildren && (
14471447
<Options.Item>
1448-
{this.currentPage.renderAfterChildren()}
1448+
{this.currentPage.renderAfterChildren}
14491449
</Options.Item>
14501450
)}
14511451
</Options>

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

Lines changed: 23 additions & 141 deletions
Original file line numberDiff line numberDiff line change
@@ -26,23 +26,20 @@
2626
import { useEffect, useState } from 'react'
2727
import { DesktopTopNav } from '../DesktopTopNav'
2828
import { MobileTopNav } from '../MobileTopNav'
29-
import { InstUISettingsProvider, jsx, useTheme } from '@instructure/emotion'
29+
import {
30+
InstUISettingsProvider,
31+
jsx,
32+
withFunctionalStyle
33+
} from '@instructure/emotion'
3034
import {
3135
IconAddLine,
3236
IconAdminLine,
33-
IconAdminSolid,
34-
IconArrowOpenStartLine,
35-
IconCoursesLine,
36-
IconDashboardLine,
37-
IconHamburgerLine,
38-
IconQuestionLine,
39-
IconUserLine
37+
IconHamburgerLine
4038
} from '@instructure/ui-icons'
4139
import { Button, IconButton } from '@instructure/ui-buttons'
42-
import { Breadcrumb, BreadcrumbLink } from '@instructure/ui-breadcrumb'
40+
import { Breadcrumb } from '@instructure/ui-breadcrumb'
4341
import { generateStyles } from './styles'
4442
import { Drilldown } from '@instructure/ui-drilldown'
45-
import { Img } from '@instructure/ui-img'
4643

4744
/**
4845
---
@@ -54,13 +51,9 @@ const CanvasTopNav = ({
5451
lti = false,
5552
brand,
5653
breadcrumb,
57-
mobileMenuTitle,
5854
mobileButtons = [],
5955
mobileMenu = [],
60-
mobileMenuBackNavigation,
6156
hamburgerOnClick,
62-
beforeMobileMenuItems,
63-
afterMobileMenuItems,
6457
styles
6558
}: any) => {
6659
const [isSmallScreen, setIsSmallScreen] = useState(false)
@@ -77,19 +70,28 @@ const CanvasTopNav = ({
7770
return () => window.removeEventListener('resize', handleResize)
7871
}, [breakpoint])
7972

80-
const renderDrilldownPages = (items) => {
81-
return items.map((item: any, index: any) => {
73+
const renderDrilldownPages = (items: any) => {
74+
return items.map((item: any) => {
8275
return (
83-
<Drilldown.Page key={item.id} id={item.id}>
84-
{item.options.map((option) => {
76+
<Drilldown.Page
77+
key={item.id}
78+
id={item.id} //TODO renderbackbuttonlabel
79+
renderBeforeChildren={item.renderBeforeMobileMenuItems}
80+
renderAfterChildren={item.renderAfterMobileMenuItems}
81+
>
82+
{item.options.map((option: any) => {
8583
return (
8684
<Drilldown.Group key={option.id} id={option.id}>
8785
<Drilldown.Option
8886
id={option.id}
8987
subPageId={option.subPageId}
9088
onOptionClick={option.onClick}
89+
afterLabelContentVAlign={'center'}
9190
>
92-
{option.label}
91+
<div style={styles.optionContainer}>
92+
{option.renderBeforeTitle}
93+
{option.label}
94+
</div>
9395
</Drilldown.Option>
9496
</Drilldown.Group>
9597
)
@@ -99,20 +101,6 @@ const CanvasTopNav = ({
99101
})
100102
}
101103

102-
// <Drilldown rootPageId={'default'}>
103-
// <Drilldown.Page id={'default'}>
104-
// <Drilldown.Group id={'account'} withoutSeparators={false}>
105-
// <Drilldown.Option id={'account'} subPageId={'account'} afterLabelContentVAlign={'center'}>
106-
//
107-
//
108-
// return (
109-
// <Drilldown.Page id={items[0]}>
110-
// <Drilldown.Group id
111-
// <Drilldown.Option></Drilldown.Option>
112-
// </Drilldown.Group>
113-
// </Drilldown.Page>
114-
// )
115-
116104
// Render mobile or desktop nav based on screen size
117105
return isSmallScreen ? (
118106
<MobileTopNav lti={lti} brand={brand}>
@@ -131,9 +119,6 @@ const CanvasTopNav = ({
131119
))}
132120
</MobileTopNav.End>
133121
<MobileTopNav.Menu>
134-
<Drilldown rootPageId={'default'}>
135-
{renderDrilldownPages(mobileMenu)}
136-
</Drilldown>
137122
<InstUISettingsProvider
138123
theme={{
139124
componentOverrides: {
@@ -147,95 +132,7 @@ const CanvasTopNav = ({
147132
}}
148133
>
149134
<Drilldown rootPageId={'default'}>
150-
<Drilldown.Page id={'default'}>
151-
<Drilldown.Group id={'account'} withoutSeparators={false}>
152-
<Drilldown.Option
153-
id={'account'}
154-
subPageId={'account'}
155-
afterLabelContentVAlign={'center'}
156-
>
157-
<div style={styles.optionContainer}>
158-
<IconUserLine />
159-
Account
160-
</div>
161-
</Drilldown.Option>
162-
</Drilldown.Group>
163-
<Drilldown.Group id={'courses'} withoutSeparators={false}>
164-
<Drilldown.Option
165-
id={'courses'}
166-
subPageId={'courses'}
167-
afterLabelContentVAlign={'center'}
168-
>
169-
<div style={styles.optionContainer}>
170-
<IconCoursesLine /> Courses
171-
</div>
172-
</Drilldown.Option>
173-
</Drilldown.Group>
174-
<Drilldown.Group id={'dashboard'} withoutSeparators={false}>
175-
<Drilldown.Option
176-
id={'dashboard'}
177-
onOptionClick={() => (window.location.href = '/dashboard')}
178-
>
179-
<div style={styles.optionContainer}>
180-
<IconDashboardLine /> Dashboard
181-
</div>
182-
</Drilldown.Option>
183-
</Drilldown.Group>
184-
<Drilldown.Group id={'help'} withoutSeparators={false}>
185-
<Drilldown.Option
186-
id={'help'}
187-
onOptionClick={() =>
188-
(window.location.href = 'https://www.google.com')
189-
}
190-
>
191-
<div style={styles.optionContainer}>
192-
<IconQuestionLine /> Help
193-
</div>
194-
</Drilldown.Option>
195-
</Drilldown.Group>
196-
</Drilldown.Page>
197-
198-
<Drilldown.Page
199-
id="account"
200-
renderTitle="Account"
201-
renderBeforeChildren={() => (
202-
<div style={{ display: 'flex', justifyContent: 'center' }}>
203-
<Img src="https://sbcf.fr/wp-content/uploads/2018/03/sbcf-default-avatar.png" />
204-
</div>
205-
)}
206-
renderAfterChildren={() => (
207-
<p>
208-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
209-
aliquet erat in orci semper fringilla. Nullam suscipit mollis
210-
mi, at vehicula magna vulputate eu. Cras mattis felis id quam
211-
vehicula euismod. Nulla dolor enim, ornare in odio a, molestie
212-
dictum ligula. Nullam maximus et dolor eget porttitor.
213-
Vestibulum faucibus viverra pellentesque. Duis lorem lectus,
214-
porta vitae aliquam vitae, vehicula sagittis nulla. Aenean
215-
sagittis congue rhoncus. Cras laoreet eu nulla eu dignissim.
216-
Maecenas sed massa nisi. Suspendisse pellentesque, metus sed
217-
ultricies porta, justo tellus pulvinar diam, ac ornare massa
218-
nibh quis purus. Duis erat ipsum, pellentesque in diam non,
219-
luctus accumsan metus. In ipsum tellus, ullamcorper a faucibus
220-
a, venenatis ut urna. Sed at rutrum turpis.
221-
</p>
222-
)}
223-
>
224-
<Drilldown.Group id={'account1'} withoutSeparators={false}>
225-
<Drilldown.Option id="account1">AccountInfo1</Drilldown.Option>
226-
</Drilldown.Group>
227-
<Drilldown.Group id={'account2'} withoutSeparators={false}>
228-
<Drilldown.Option id="account2">AccountInfo2</Drilldown.Option>
229-
</Drilldown.Group>
230-
</Drilldown.Page>
231-
<Drilldown.Page id="courses" renderTitle="Courses">
232-
<Drilldown.Group id={'course1'} withoutSeparators={false}>
233-
<Drilldown.Option id="courses1">Course 1</Drilldown.Option>
234-
</Drilldown.Group>
235-
<Drilldown.Group id={'course2'} withoutSeparators={false}>
236-
<Drilldown.Option id="course2">Course 2</Drilldown.Option>
237-
</Drilldown.Group>
238-
</Drilldown.Page>
135+
{renderDrilldownPages(mobileMenu)}
239136
</Drilldown>
240137
</InstUISettingsProvider>
241138
</MobileTopNav.Menu>
@@ -274,22 +171,7 @@ const CanvasTopNav = ({
274171
)
275172
}
276173

277-
const withStyles =
278-
<ComponentOwnProps, ComponentStyle>(
279-
generateStyles: (props: any, theme: any) => ComponentStyle
280-
) =>
281-
(WrappedComponent: any) =>
282-
// eslint-disable-next-line react/display-name
283-
(originalProps: ComponentOwnProps) => {
284-
const theme = useTheme()
285-
const styledProps = {
286-
styles: generateStyles(originalProps, theme),
287-
...originalProps
288-
}
289-
return <WrappedComponent {...styledProps} />
290-
}
291-
292-
const SC: any = withStyles(generateStyles)(CanvasTopNav)
174+
const SC: any = withFunctionalStyle(generateStyles)(CanvasTopNav)
293175
SC.displayName = 'CanvasTopNav'
294176

295177
export { SC as CanvasTopNav }

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

Lines changed: 4 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
/* eslint-disable react/display-name */
21
/*
32
* The MIT License (MIT)
43
*
@@ -25,7 +24,7 @@
2524

2625
/** @jsx jsx */
2726
import { Children, PropsWithChildren } from 'react'
28-
import { jsx, useTheme } from '@instructure/emotion'
27+
import { jsx, withFunctionalStyle } from '@instructure/emotion'
2928
import type { DesktopTopNavProps } from './props'
3029

3130
import { generateStyles } from './styles'
@@ -57,26 +56,12 @@ const End = ({ children, styles }: PropsWithChildren & { styles: any }) => {
5756
return <div style={styles.end}>{children}</div>
5857
}
5958

60-
const withStyles =
61-
<ComponentOwnProps, ComponentStyle>(
62-
generateStyles: (props: any, theme: any) => ComponentStyle
63-
) =>
64-
(WrappedComponent: any) =>
65-
(originalProps: ComponentOwnProps) => {
66-
const theme = useTheme()
67-
const styledProps = {
68-
styles: generateStyles(originalProps, theme),
69-
...originalProps
70-
}
71-
return <WrappedComponent {...styledProps} />
72-
}
73-
74-
const SC: any = withStyles(generateStyles)(DesktopTopNav)
59+
const SC: any = withFunctionalStyle(generateStyles)(DesktopTopNav)
7560

7661
SC.displayName = 'DesktopTopNav'
77-
SC.Start = withStyles(generateStyles)(Start)
62+
SC.Start = withFunctionalStyle(generateStyles)(Start)
7863
SC.Start.displayName = 'Start'
79-
SC.End = withStyles(generateStyles)(End)
64+
SC.End = withFunctionalStyle(generateStyles)(End)
8065
SC.End.displayName = 'End'
8166

8267
export { SC as DesktopTopNav }

‎packages/ui-top-nav-bar/src/DesktopTopNav/styles.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,7 @@
2323
*/
2424
import type { DesktopTopNavProps } from './props'
2525

26-
const generateStyles = (props: DesktopTopNavProps, theme: any) => {
27-
const { lti } = props
26+
const generateStyles = (_props: DesktopTopNavProps, theme: any) => {
2827
return {
2928
container: {
3029
height: '66px',

0 commit comments

Comments
 (0)