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

Add ability for tabs to render lazily #355

Merged
emmulator merged 1 commit into from
Jun 3, 2021
Merged

Add ability for tabs to render lazily #355

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 35 additions & 0 deletions packages/visual-stack-docs/src/containers/Components/Docs/tablayout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,6 +145,41 @@ export default () => (
</div>
</Body>
</Panel>
<Panel>
<Header>
<div>
TabLayout with lazy prop renders tab content only when
selected
</div>
</Header>
<Body>
<Snippet tag="s8" src={snippets} />
<DivWithBorder>
{/* s8:start */}
<TabLayout lazy tabLayoutId="tabLayout4">
<Tab
label={<TabLabelContent>Tab 1</TabLabelContent>}
renderContent={() => (
<TabContent>Tab Content 1</TabContent>
)}
/>
<Tab
label={<TabLabelContent>Tab 2</TabLabelContent>}
renderContent={() => (
<TabContent>Tab Content 2</TabContent>
)}
/>
<Tab
label={<TabLabelContent>Tab 3</TabLabelContent>}
renderContent={() => (
<TabContent>Tab Content 3</TabContent>
)}
/>
</TabLayout>
{/* s8:end */}
</DivWithBorder>
</Body>
</Panel>
</TabContent>
}
/>
Expand Down
6 changes: 6 additions & 0 deletions packages/visual-stack-redux/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,9 @@
# Upcoming

## New Features

- Tabs can now render lazily.

# 0.0.12 (January 2, 2017)

## New Features
Expand Down
1 change: 1 addition & 0 deletions packages/visual-stack-redux/src/components/TabLayout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@ export class InternalTabLayout extends Component {
R.lensPath([this.props.tabLayoutId, 'index']),
this.props.tabLayouts
)}
lazy={this.props.lazy}
>
{this.props.children}
</BaseTabLayout>
Expand Down
1 change: 1 addition & 0 deletions packages/visual-stack-redux/test/components/TabLayout.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ describe('TabLayout', () => {
onTabClick: () => {},
tabLayouts: { ID123: { index: 0 } },
selectTab: () => {},
lazy: true,
...override,
});

Expand Down
17 changes: 14 additions & 3 deletions packages/visual-stack/src/components/TabLayout/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,13 @@ export class TabLayout extends React.Component {
}

render() {
const { floatingHeader, headerHeight, headerWidth } = this.props;
const {
floatingHeader,
headerHeight,
headerWidth,
lazy,
tabLayoutId,
} = this.props;
const children = toArray(this.props.children);
const tabs = R.filter(R.identity, children);
const labelMap = tabs.map((tab, index) => {
Expand All @@ -35,9 +41,14 @@ export class TabLayout extends React.Component {
);
});
const contentMap = tabs.map((tab, index) => {
const selected = this.isSelected(index);
if (lazy && !selected) {
return null;
}
return (
<div key={index} hidden={!this.isSelected(index)}>
{tab.props.content}
<div key={index} hidden={!selected}>
{tab.props.content ||
(tab.props.renderContent ? tab.props.renderContent() : null)}
</div>
);
});
Expand Down