Skip to content

Commit

Permalink
feat(community-side-navigation): active submenu is open by default
Browse files Browse the repository at this point in the history
  • Loading branch information
@Andrew-K-Lam @theetrain
Andrew-K-Lam authored and theetrain committed Jan 8, 2019
1 parent 845f1e5 commit 5774e37
Show file tree
Hide file tree
Showing 3 changed files with 75 additions and 12 deletions.
10 changes: 10 additions & 0 deletions packages/SideNavigation/SideNavigation.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ class SideNavigation extends Component {
window.addEventListener('click', this.checkOffset)
this.adjustWidth()
window.addEventListener('resize', this.adjustWidth)
this.checkActiveState()
}

componentWillUnmount() {
Expand Down Expand Up @@ -107,6 +108,15 @@ class SideNavigation extends Component {
return element.scrollHeight > window.innerHeight
}

checkActiveState = () => {
React.Children.map(this.props.children, (child, index) => {
const id = `TDS-SideNavigation-${index}`
if (child.type.name === 'SubMenu' && child.props.active) {
this.toggleOpen(id)
}
})
}

render() {
const { children, verticalSpacing, accordion, ...rest } = this.props
const { variant } = this.state
Expand Down
7 changes: 3 additions & 4 deletions packages/SideNavigation/__tests__/SideNavigation.spec.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ describe('SideNavigation', () => {
<SideNavigation.Link href="#">Home</SideNavigation.Link>
<SideNavigation.Link href="#one">One</SideNavigation.Link>
<SideNavigation.Link href="#two">Two</SideNavigation.Link>
<SideNavigation.SubMenu active label="Threefdsfdsfds" onClick={() => {}} isOpen={false}>
<SideNavigation.SubMenu label="Threefdsfdsfds" onClick={() => {}} isOpen={false}>
<SideNavigation.Link href="#">Option 1</SideNavigation.Link>
<SideNavigation.Link href="#">Option 2</SideNavigation.Link>
<SideNavigation.Link href="#">Option 3</SideNavigation.Link>
Expand Down Expand Up @@ -56,10 +56,10 @@ describe('SideNavigation', () => {
it('toggles open multiple submenus', () => {
const childrenAccordionFalse = (
<SideNavigation accordion={false}>
<SideNavigation.SubMenu active label="Threefdsfdsfds" onClick={() => {}} isOpen={false}>
<SideNavigation.SubMenu label="Threefdsfdsfds" onClick={() => {}} isOpen={false}>
<SideNavigation.Link href="#">Option 1</SideNavigation.Link>
</SideNavigation.SubMenu>
<SideNavigation.SubMenu active label="Threefdsfdsfds" onClick={() => {}} isOpen={false}>
<SideNavigation.SubMenu label="Threefdsfdsfds" onClick={() => {}} isOpen={false}>
<SideNavigation.Link href="#">Option 1</SideNavigation.Link>
</SideNavigation.SubMenu>
</SideNavigation>
Expand Down Expand Up @@ -96,7 +96,6 @@ describe('SideNavigation', () => {
const childrenAccordionFalse = (
<SideNavigation accordion={false}>
<SideNavigation.SubMenu
active
label="Threefdsfdsfds"
onClick={() => {}}
isOpen={false}
Expand Down
70 changes: 62 additions & 8 deletions packages/SideNavigation/__tests__/__snapshots__/SideNavigation.spec.jsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -172,7 +172,7 @@ exports[`SideNavigation renders 1`] = `
key=".3"
>
<SubMenu
active={true}
active={false}
id="TDS-SideNavigation-3"
isOpen={false}
label="Threefdsfdsfds"
Expand All @@ -182,7 +182,7 @@ exports[`SideNavigation renders 1`] = `
className="mainDiv"
>
<button
className="active"
className="buttonDefault"
onClick={[Function]}
>
<Box
Expand All @@ -201,12 +201,12 @@ exports[`SideNavigation renders 1`] = `
<div>
<Text
block={false}
bold={true}
bold={false}
invert={false}
size="medium"
>
<span
className="TDS_Typography-modules__medium___1DC1g TDS_Typography-modules__wordBreak___3dmWU TDS_Typography-modules__boldFont___2MqlI TDS_Typography-modules__wordBreak___3dmWU TDS_Typography-modules__inheritColor___3YAyL"
className="TDS_Typography-modules__medium___1DC1g TDS_Typography-modules__wordBreak___3dmWU TDS_Typography-modules__mediumFont___2ULml TDS_Typography-modules__inheritColor___3YAyL"
>
Threefdsfdsfds
</span>
Expand Down Expand Up @@ -313,7 +313,7 @@ exports[`SideNavigation renders without vertical spacing 1`] = `
<SubMenu
active={true}
id="TDS-SideNavigation-1"
isOpen={false}
isOpen={true}
label="Threefdsfdsfds"
onClick={[Function]}
>
Expand Down Expand Up @@ -354,24 +354,78 @@ exports[`SideNavigation renders without vertical spacing 1`] = `
</ColoredTextProvider>
<DecorativeIcon
size={16}
symbol="caretDown"
symbol="caretUp"
variant="secondary"
>
<Icon
aria-hidden="true"
size={16}
symbol="caretDown"
symbol="caretUp"
variant="secondary"
>
<i
aria-hidden="true"
className="TDS_Icon-modules__iconCaretDown___3by8b TDS_Icon-modules__icon___13xYd TDS_Icon-modules__secondary___3Gtcp TDS_Icon-modules__size16___1pm12"
className="TDS_Icon-modules__iconCaretUp___3PL_K TDS_Icon-modules__icon___13xYd TDS_Icon-modules__secondary___3Gtcp TDS_Icon-modules__size16___1pm12"
/>
</Icon>
</DecorativeIcon>
</div>
</Box>
</button>
<ul
className="boxShadow"
>
<li
key=".0"
>
<Link
active={false}
href="#"
reactRouterLinkComponent={null}
subMenuLink={true}
to={null}
>
<a
className="link"
href="#"
to={null}
>
<Box
dangerouslyAddClassName="box"
horizontal={3}
inline={false}
tag="div"
vertical={2}
>
<div
className="TDS_Box-modules__horizontalPadding-3___2uoUp TDS_Box-modules__verticalPadding-2___1Uh2T box"
>
<ColoredTextProvider
colorClassName="hover"
>
<div
className="hover"
>
<Text
block={false}
bold={false}
invert={false}
size="medium"
>
<span
className="TDS_Typography-modules__medium___1DC1g TDS_Typography-modules__wordBreak___3dmWU TDS_Typography-modules__mediumFont___2ULml TDS_Typography-modules__inheritColor___3YAyL"
>
Option 1
</span>
</Text>
</div>
</ColoredTextProvider>
</div>
</Box>
</a>
</Link>
</li>
</ul>
</div>
</SubMenu>
</li>
Expand Down

0 comments on commit 5774e37

Please sign in to comment.