From b9a19584a9e3a1f9c38d08a23cbb184cc5c62389 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicol=C3=A1s=20Font?= Date: Wed, 2 Jun 2021 13:01:16 -0700 Subject: [PATCH] Add ability for tabs to render lazily --- .../containers/Components/Docs/tablayout.js | 35 +++++++++++++++++++ packages/visual-stack-redux/CHANGELOG.md | 6 ++++ .../src/components/TabLayout.js | 1 + .../test/components/TabLayout.test.js | 1 + .../src/components/TabLayout/index.js | 17 +++++++-- 5 files changed, 57 insertions(+), 3 deletions(-) diff --git a/packages/visual-stack-docs/src/containers/Components/Docs/tablayout.js b/packages/visual-stack-docs/src/containers/Components/Docs/tablayout.js index 16b306f0..b827eb3d 100644 --- a/packages/visual-stack-docs/src/containers/Components/Docs/tablayout.js +++ b/packages/visual-stack-docs/src/containers/Components/Docs/tablayout.js @@ -145,6 +145,41 @@ export default () => ( + +
+
+ TabLayout with lazy prop renders tab content only when + selected +
+
+ + + + {/* s8:start */} + + Tab 1} + renderContent={() => ( + Tab Content 1 + )} + /> + Tab 2} + renderContent={() => ( + Tab Content 2 + )} + /> + Tab 3} + renderContent={() => ( + Tab Content 3 + )} + /> + + {/* s8:end */} + + + } /> diff --git a/packages/visual-stack-redux/CHANGELOG.md b/packages/visual-stack-redux/CHANGELOG.md index c72db880..1636c172 100644 --- a/packages/visual-stack-redux/CHANGELOG.md +++ b/packages/visual-stack-redux/CHANGELOG.md @@ -1,3 +1,9 @@ +# Upcoming + +## New Features + +- Tabs can now render lazily. + # 0.0.12 (January 2, 2017) ## New Features diff --git a/packages/visual-stack-redux/src/components/TabLayout.js b/packages/visual-stack-redux/src/components/TabLayout.js index b1e329a4..cae97806 100644 --- a/packages/visual-stack-redux/src/components/TabLayout.js +++ b/packages/visual-stack-redux/src/components/TabLayout.js @@ -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} diff --git a/packages/visual-stack-redux/test/components/TabLayout.test.js b/packages/visual-stack-redux/test/components/TabLayout.test.js index 3a34e45f..3794dc02 100644 --- a/packages/visual-stack-redux/test/components/TabLayout.test.js +++ b/packages/visual-stack-redux/test/components/TabLayout.test.js @@ -27,6 +27,7 @@ describe('TabLayout', () => { onTabClick: () => {}, tabLayouts: { ID123: { index: 0 } }, selectTab: () => {}, + lazy: true, ...override, }); diff --git a/packages/visual-stack/src/components/TabLayout/index.js b/packages/visual-stack/src/components/TabLayout/index.js index 80de64dc..cd1d8665 100644 --- a/packages/visual-stack/src/components/TabLayout/index.js +++ b/packages/visual-stack/src/components/TabLayout/index.js @@ -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) => { @@ -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 ( -