Skip to content

Commit 8937162

Browse files
MarcusNotheisMarcusNotheis
committed
fix(ObjectPage): Don't crash in default mode with only 1 child provided
1 parent 33f8919 commit 8937162

File tree

3 files changed

+126
-3
lines changed

3 files changed

+126
-3
lines changed

‎packages/main/__karma_snapshots__/ObjectPage.md

Lines changed: 113 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -677,7 +677,66 @@
677677
<header class="ObjectPageHeader--header---"><header class="ObjectPageHeader--titleBar---"><span class="ObjectPageHeader--container---"><h1 class="ObjectPageHeader--title---"></h1><span class="ObjectPageHeader--subTitle---"></span></span><span class="ObjectPageHeader--actions---"></span></header><div style="position:relative"><div class="ObjectPageHeader--headerContent---"></div></div></header><section class="ObjectPage--anchorBar---" role="navigation"><li class="ObjectPageAnchorButton--anchorButtonContainer---"><span class="ObjectPageAnchorButton--button--- ObjectPageAnchorButton--selected---"></span></li><li class="ObjectPageAnchorButton--anchorButtonContainer---"><span class="ObjectPageAnchorButton--button---"></span></li></section><section id="ObjectPageSections" class="ObjectPageContent--sectionsContainer---"><section id="ObjectPageSection-1" role="region"><div role="heading" class="ObjectPageSection--header---"><div class="ObjectPageSection--title--- ObjectPageSection--uppercase---"></div></div><div class="ObjectPageSection--sectionContent---"><div class="ObjectPageSection--sectionContentInner---">Test</div></div></section><div></div></section>
678678
```
679679

680-
#### `Not crashing with 1 section`
680+
#### `Not crashing with 1 section - Default Mode`
681+
682+
```
683+
<ThemeProvider withToastContainer={false}>
684+
<JssProvider generateId={[Function]}>
685+
<ThemeProvider theme={{...}}>
686+
<ObjectPage title="" subTitle="" image={{...}} imageShapeCircle={false} headerActions={{...}} renderHeaderContent={{...}} mode="Default" onSelectedSectionChanged={[Function: onSelectedSectionChanged]} showHideHeaderButton={false} selectedSectionId={{...}} noHeader={false}>
687+
<div data-component-name="ObjectPage" slot={[undefined]} className="ObjectPage--objectPage---" style={[undefined]} title={[undefined]}>
688+
<ObjectPageHeader title="" subTitle="" image={{...}} headerActions={{...}} renderHeaderContent={{...}} imageShapeCircle={false} showHideHeaderButton={false}>
689+
<header className="ObjectPageHeader--header---">
690+
<header className="ObjectPageHeader--titleBar---">
691+
<span className="ObjectPageHeader--container---">
692+
<h1 className="ObjectPageHeader--title---" />
693+
<span className="ObjectPageHeader--subTitle---" />
694+
</span>
695+
<span className="ObjectPageHeader--actions---" />
696+
</header>
697+
<div style={{...}}>
698+
<div className="ObjectPageHeader--headerContent---" />
699+
</div>
700+
</header>
701+
</ObjectPageHeader>
702+
<section className="ObjectPage--anchorBar---" role="navigation">
703+
<ObjectPageAnchorButton section={{...}} index={0} selected={true} mode="Default" onSectionSelected={[Function]} onSubSectionSelected={[Function]}>
704+
<li className="ObjectPageAnchorButton--anchorButtonContainer---">
705+
<Link to="ObjectPageSection-1" containerId="ObjectPageSections" spy={true} activeClass="ObjectPageAnchorButton--selected---" onSetActive={[Function]} duration={400} smooth={true} offset={0}>
706+
<LinkElement className="ObjectPageAnchorButton--selected---" onClick={[Function]}>
707+
<a className="ObjectPageAnchorButton--selected---" onClick={[Function]}>
708+
<span className="ObjectPageAnchorButton--button---" />
709+
</a>
710+
</LinkElement>
711+
</Link>
712+
</li>
713+
</ObjectPageAnchorButton>
714+
</section>
715+
<ObjectPageContent fillerRef={{...}}>
716+
<section id="ObjectPageSections" className="ObjectPageContent--sectionsContainer---">
717+
<ObjectPageSection id="1" title="" isSection={true} titleUppercase={true}>
718+
<section id="ObjectPageSection-1" role="region" className={[undefined]} style={[undefined]} title={[undefined]}>
719+
<div role="heading" className="ObjectPageSection--header---">
720+
<div className="ObjectPageSection--title--- ObjectPageSection--uppercase---" />
721+
</div>
722+
<div className="ObjectPageSection--sectionContent---">
723+
<div className="ObjectPageSection--sectionContentInner---">
724+
Test
725+
</div>
726+
</div>
727+
</section>
728+
</ObjectPageSection>
729+
<div />
730+
</section>
731+
</ObjectPageContent>
732+
</div>
733+
</ObjectPage>
734+
</ThemeProvider>
735+
</JssProvider>
736+
</ThemeProvider>
737+
```
738+
739+
#### `Not crashing with 1 section - IconTabBar Mode`
681740

682741
```
683742
<ThemeProvider withToastContainer={false}>
@@ -891,3 +950,56 @@
891950
</ThemeProvider>
892951
```
893952

953+
#### `Not crashing with 1 section`
954+
955+
```
956+
<ThemeProvider withToastContainer={false}>
957+
<JssProvider generateId={[Function]}>
958+
<ThemeProvider theme={{...}}>
959+
<ObjectPage mode="IconTabBar" title="" subTitle="" image={{...}} imageShapeCircle={false} headerActions={{...}} renderHeaderContent={{...}} onSelectedSectionChanged={[Function: onSelectedSectionChanged]} showHideHeaderButton={false} selectedSectionId={{...}} noHeader={false}>
960+
<div data-component-name="ObjectPage" slot={[undefined]} className="ObjectPage--objectPage---" style={[undefined]} title={[undefined]}>
961+
<ObjectPageHeader title="" subTitle="" image={{...}} headerActions={{...}} renderHeaderContent={{...}} imageShapeCircle={false} showHideHeaderButton={false}>
962+
<header className="ObjectPageHeader--header---">
963+
<header className="ObjectPageHeader--titleBar---">
964+
<span className="ObjectPageHeader--container---">
965+
<h1 className="ObjectPageHeader--title---" />
966+
<span className="ObjectPageHeader--subTitle---" />
967+
</span>
968+
<span className="ObjectPageHeader--actions---" />
969+
</header>
970+
<div style={{...}}>
971+
<div className="ObjectPageHeader--headerContent---" />
972+
</div>
973+
</header>
974+
</ObjectPageHeader>
975+
<section className="ObjectPage--anchorBar---" role="navigation">
976+
<ObjectPageAnchorButton section={{...}} index={0} selected={true} mode="IconTabBar" onSectionSelected={[Function]} onSubSectionSelected={[Function]}>
977+
<li className="ObjectPageAnchorButton--anchorButtonContainer---">
978+
<span onClick={[Function]} className="ObjectPageAnchorButton--button--- ObjectPageAnchorButton--selected---" />
979+
</li>
980+
</ObjectPageAnchorButton>
981+
</section>
982+
<ObjectPageContent fillerRef={{...}}>
983+
<section id="ObjectPageSections" className="ObjectPageContent--sectionsContainer---">
984+
<ObjectPageSection id="1" title="" isSection={true} titleUppercase={true}>
985+
<section id="ObjectPageSection-1" role="region" className={[undefined]} style={[undefined]} title={[undefined]}>
986+
<div role="heading" className="ObjectPageSection--header---">
987+
<div className="ObjectPageSection--title--- ObjectPageSection--uppercase---" />
988+
</div>
989+
<div className="ObjectPageSection--sectionContent---">
990+
<div className="ObjectPageSection--sectionContentInner---">
991+
Test
992+
</div>
993+
</div>
994+
</section>
995+
</ObjectPageSection>
996+
<div />
997+
</section>
998+
</ObjectPageContent>
999+
</div>
1000+
</ObjectPage>
1001+
</ThemeProvider>
1002+
</JssProvider>
1003+
</ThemeProvider>
1004+
```
1005+

‎packages/main/src/components/ObjectPage/ObjectPage.karma.tsx

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,17 @@ describe('ObjectPage', () => {
108108
expect(wrapper.html()).to.matchSnapshot();
109109
});
110110

111-
it('Not crashing with 1 section', () => {
111+
it('Not crashing with 1 section - Default Mode', () => {
112+
const wrapper = mountThemedComponent(
113+
<ObjectPage>
114+
<ObjectPageSection id={'1'}>Test</ObjectPageSection>
115+
</ObjectPage>
116+
);
117+
118+
expect(wrapper.debug()).to.matchSnapshot();
119+
});
120+
121+
it('Not crashing with 1 section - IconTabBar Mode', () => {
112122
const wrapper = mountThemedComponent(
113123
<ObjectPage mode={ObjectPageMode.IconTabBar}>
114124
<ObjectPageSection id={'1'}>Test</ObjectPageSection>

‎packages/main/src/components/ObjectPage/index.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -168,7 +168,8 @@ const ObjectPage: FC<ObjectPagePropTypes> = forwardRef((props: ObjectPagePropTyp
168168

169169
useEffect(() => {
170170
if (mode === ObjectPageMode.Default) {
171-
scrollToSectionById(children[selectedSectionIndex].props.id, selectedSectionIndex);
171+
// @ts-ignore
172+
scrollToSectionById(Children.toArray(children)[selectedSectionIndex].props.id, selectedSectionIndex);
172173
}
173174
if (mode === ObjectPageMode.IconTabBar) {
174175
adjustDummyDivHeight();

0 commit comments

Comments
 (0)