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 ( -