Skip to content
This repository was archived by the owner on Apr 5, 2022. It is now read-only.

Commit 888c534

Browse files
emmulatoremmulator
authored
Merge pull request #355 from cjdev/lazy-tabs
Add ability for tabs to render lazily
2 parents 99d590c + b9a1958 commit 888c534

5 files changed

Lines changed: 57 additions & 3 deletions

File tree

‎packages/visual-stack-docs/src/containers/Components/Docs/tablayout.js‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -145,6 +145,41 @@ export default () => (
145145
</div>
146146
</Body>
147147
</Panel>
148+
<Panel>
149+
<Header>
150+
<div>
151+
TabLayout with lazy prop renders tab content only when
152+
selected
153+
</div>
154+
</Header>
155+
<Body>
156+
<Snippet tag="s8" src={snippets} />
157+
<DivWithBorder>
158+
{/* s8:start */}
159+
<TabLayout lazy tabLayoutId="tabLayout4">
160+
<Tab
161+
label={<TabLabelContent>Tab 1</TabLabelContent>}
162+
renderContent={() => (
163+
<TabContent>Tab Content 1</TabContent>
164+
)}
165+
/>
166+
<Tab
167+
label={<TabLabelContent>Tab 2</TabLabelContent>}
168+
renderContent={() => (
169+
<TabContent>Tab Content 2</TabContent>
170+
)}
171+
/>
172+
<Tab
173+
label={<TabLabelContent>Tab 3</TabLabelContent>}
174+
renderContent={() => (
175+
<TabContent>Tab Content 3</TabContent>
176+
)}
177+
/>
178+
</TabLayout>
179+
{/* s8:end */}
180+
</DivWithBorder>
181+
</Body>
182+
</Panel>
148183
</TabContent>
149184
}
150185
/>

‎packages/visual-stack-redux/CHANGELOG.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
# Upcoming
2+
3+
## New Features
4+
5+
- Tabs can now render lazily.
6+
17
# 0.0.12 (January 2, 2017)
28

39
## New Features

‎packages/visual-stack-redux/src/components/TabLayout.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@ export class InternalTabLayout extends Component {
5757
R.lensPath([this.props.tabLayoutId, 'index']),
5858
this.props.tabLayouts
5959
)}
60+
lazy={this.props.lazy}
6061
>
6162
{this.props.children}
6263
</BaseTabLayout>

‎packages/visual-stack-redux/test/components/TabLayout.test.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ describe('TabLayout', () => {
2727
onTabClick: () => {},
2828
tabLayouts: { ID123: { index: 0 } },
2929
selectTab: () => {},
30+
lazy: true,
3031
...override,
3132
});
3233

‎packages/visual-stack/src/components/TabLayout/index.js‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,13 @@ export class TabLayout extends React.Component {
1616
}
1717

1818
render() {
19-
const { floatingHeader, headerHeight, headerWidth } = this.props;
19+
const {
20+
floatingHeader,
21+
headerHeight,
22+
headerWidth,
23+
lazy,
24+
tabLayoutId,
25+
} = this.props;
2026
const children = toArray(this.props.children);
2127
const tabs = R.filter(R.identity, children);
2228
const labelMap = tabs.map((tab, index) => {
@@ -35,9 +41,14 @@ export class TabLayout extends React.Component {
3541
);
3642
});
3743
const contentMap = tabs.map((tab, index) => {
44+
const selected = this.isSelected(index);
45+
if (lazy && !selected) {
46+
return null;
47+
}
3848
return (
39-
<div key={index} hidden={!this.isSelected(index)}>
40-
{tab.props.content}
49+
<div key={index} hidden={!selected}>
50+
{tab.props.content ||
51+
(tab.props.renderContent ? tab.props.renderContent() : null)}
4152
</div>
4253
);
4354
});

0 commit comments

Comments
 (0)