Skip to content

Commit

Permalink
Render fix and new scollable example
Browse files Browse the repository at this point in the history 
* New scrollable tab example added
* Fix for (at least 50% of the time) for calculating widths in
  componentDidMount via requestAnimationFrame. But still the tab
  container width differs between reloads.
  • Loading branch information
@fredriklindell
fredriklindell committed Jan 13, 2016
1 parent 600eb41 commit a084f7c
Show file tree
Hide file tree
Showing 3 changed files with 203 additions and 18 deletions.
176 changes: 176 additions & 0 deletions docs/src/app/components/pages/components/Tabs/ExampleScrollable.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,176 @@
import React from 'react';
import Tabs from 'material-ui/lib/tabs/tabs';
import Tab from 'material-ui/lib/tabs/tab';
import Slider from 'material-ui/lib/slider';

const styles = {
headline: {
fontSize: 24,
paddingTop: 16,
marginBottom: 12,
fontWeight: 400,
},
};

const TabsExampleScrollable = () => (
<Tabs>
<Tab label="Item One" >
<div>
<h2 style={styles.headline}>Tab One Template Example</h2>
<p>
This is an example of a tab template!
</p>
<p>
You can put any sort of HTML or react component in here. It even keeps the component state!
</p>
<Slider name="slider0" defaultValue={0.5} />
</div>
</Tab>
<Tab label="Item Two" >
<div>
<h2 style={styles.headline}>Tab Two Template Example</h2>
<p>
This is another example of a tab template!
</p>
</div>
</Tab>
<Tab label="Item Three" >
<div>
<h2 style={styles.headline}>Tab Three Template Example</h2>
<p>
This is another example of a tab template!
</p>
</div>
</Tab>
<Tab label="Item Four" >
<div>
<h2 style={styles.headline}>Tab Four Template Example</h2>
<p>
This is another example of a tab template!
</p>
</div>
</Tab>
<Tab label="Item Five" >
<div>
<h2 style={styles.headline}>Tab Five Template Example</h2>
<p>
This is another example of a tab template!
</p>
</div>
</Tab>
<Tab label="Item Six" >
<div>
<h2 style={styles.headline}>Tab Six Template Example</h2>
<p>
This is another example of a tab template!
</p>
</div>
</Tab>
<Tab label="Item Seven" >
<div>
<h2 style={styles.headline}>Tab Seven Template Example</h2>
<p>
This is another example of a tab template!
</p>
</div>
</Tab>
<Tab label="Item Eight" >
<div>
<h2 style={styles.headline}>Tab Eight Template Example</h2>
<p>
This is another example of a tab template!
</p>
</div>
</Tab>
<Tab label="Item Nine" >
<div>
<h2 style={styles.headline}>Tab Nine Template Example</h2>
<p>
This is another example of a tab template!
</p>
</div>
</Tab>
<Tab label="Item Ten" >
<div>
<h2 style={styles.headline}>Tab Ten Template Example</h2>
<p>
This is another example of a tab template!
</p>
</div>
</Tab>
<Tab label="Item Eleven" >
<div>
<h2 style={styles.headline}>Tab Eleven Template Example</h2>
<p>
This is another example of a tab template!
</p>
</div>
</Tab>
<Tab label="Item Twelve" >
<div>
<h2 style={styles.headline}>Tab Twelve Template Example</h2>
<p>
This is another example of a tab template!
</p>
</div>
</Tab>
<Tab label="Item Thirteen" >
<div>
<h2 style={styles.headline}>Tab Thirteen Template Example</h2>
<p>
This is another example of a tab template!
</p>
</div>
</Tab>
<Tab label="Item Fourteen" >
<div>
<h2 style={styles.headline}>Tab Fourteen Template Example</h2>
<p>
This is another example of a tab template!
</p>
</div>
</Tab>
<Tab label="Item Fifteen" >
<div>
<h2 style={styles.headline}>Tab Fifteen Template Example</h2>
<p>
This is another example of a tab template!
</p>
</div>
</Tab>
<Tab label="Item Sixteen" >
<div>
<h2 style={styles.headline}>Tab Sixteen Template Example</h2>
<p>
This is another example of a tab template!
</p>
</div>
</Tab>
<Tab label="Item Seventeen" >
<div>
<h2 style={styles.headline}>Tab Seventeen Template Example</h2>
<p>
This is another example of a tab template!
</p>
</div>
</Tab>
<Tab label="Item Eighteen" >
<div>
<h2 style={styles.headline}>Tab Eighteen Template Example</h2>
<p>
This is another example of a tab template!
</p>
</div>
</Tab>
<Tab label="Item Nineteen" >
<div>
<h2 style={styles.headline}>Tab Nineteen Template Example</h2>
<p>
This is another example of a tab template!
</p>
</div>
</Tab>
</Tabs>
);

export default TabsExampleScrollable;
5 changes: 5 additions & 0 deletions docs/src/app/components/pages/components/Tabs/Page.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ import tabsExampleControlledCode from '!raw!./ExampleControlled';
import TabsExampleControlled from './ExampleControlled';
import tabsExampleSwipeableCode from '!raw!./ExampleSwipeable';
import TabsExampleSwipeable from './ExampleSwipeable';
import tabsExampleScrollableCode from '!raw!./ExampleScrollable';
import TabsExampleScrollable from './ExampleScrollable';
import tabsCode from '!raw!material-ui/lib/tabs/tabs';
import tabsText from './Tabs';
import tabCode from '!raw!material-ui/lib/tabs/tab';
Expand All @@ -26,6 +28,9 @@ const TabsPage = () => (
<CodeExample code={tabsExampleSwipeableCode}>
<TabsExampleSwipeable />
</CodeExample>
<CodeExample code={tabsExampleScrollableCode}>
<TabsExampleScrollable />
</CodeExample>
<PropTypeDescription
code={tabsCode}
header={tabsText} />
Expand Down
40 changes: 22 additions & 18 deletions src/tabs/tabs.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@ const Tabs = React.createClass({
getDefaultProps() {
return {
initialSelectedIndex: 0,
stretchTabContainer: false,
stretchTabContainer: true,
};
},

Expand Down Expand Up @@ -151,8 +151,8 @@ const Tabs = React.createClass({
},

componentDidMount() {
window.requestAnimationFrame(this.handleWindowWidthChange);
Events.on(window, 'resize', this.handleWindowWidthChange);
this.replaceState(this.getNewState());
},

componentWillReceiveProps(newProps, nextContext) {
Expand Down Expand Up @@ -326,21 +326,24 @@ const Tabs = React.createClass({
let paginationChange = this.state.shouldPaginate !== nextShouldPaginate;
if (paginationChange || tabContainerWidth !== this.state.tabContainerWidth || tabWrapperWidthChange) {
let nextSelectedTab = tabInfo[this.state.selectedIndex];
let tabScrollWrapper = this._getDOMNode(Constants.TAB_SCROLL_WRAPPER_REF_NAME);
let tabScrollWrapperLeftScroll = tabScrollWrapper.scrollLeft;
let tabScrollWrapperWidth = tabScrollWrapper.offsetWidth;
let tabPaginationButtonMargin = nextShouldPaginate ? Constants.TAB_PAGINATOR_BUTTON_DEFAULT_WIDTH : 0;
let tabVisible = nextSelectedTab.leftOffset - tabPaginationButtonMargin >= tabScrollWrapperLeftScroll
&& tabScrollWrapperLeftScroll + tabScrollWrapperWidth - nextSelectedTab.rightOffset
- tabPaginationButtonMargin >= 0;
if (!tabVisible) {
let shouldScrollRight = tabScrollWrapperLeftScroll + tabScrollWrapperWidth
- nextSelectedTab.rightOffset - tabPaginationButtonMargin < 0;
// calculate how much to set tag scroll wrapper's scrollLeft to
if (shouldScrollRight) {
tabScrollWrapper.scrollLeft = nextSelectedTab.rightOffset + tabPaginationButtonMargin - tabScrollWrapperWidth;
} else {
tabScrollWrapper.scrollLeft = nextSelectedTab.leftOffset - tabPaginationButtonMargin;
if (nextSelectedTab !== undefined) {
let tabScrollWrapper = this._getDOMNode(Constants.TAB_SCROLL_WRAPPER_REF_NAME);
let tabScrollWrapperLeftScroll = tabScrollWrapper.scrollLeft;
let tabScrollWrapperWidth = tabScrollWrapper.offsetWidth;
let tabPaginationButtonMargin = nextShouldPaginate ? Constants.TAB_PAGINATOR_BUTTON_DEFAULT_WIDTH : 0;
let tabVisible = nextSelectedTab.leftOffset - tabPaginationButtonMargin >= tabScrollWrapperLeftScroll
&& tabScrollWrapperLeftScroll + tabScrollWrapperWidth - nextSelectedTab.rightOffset
- tabPaginationButtonMargin >= 0;
if (!tabVisible) {
let shouldScrollRight = tabScrollWrapperLeftScroll + tabScrollWrapperWidth
- nextSelectedTab.rightOffset - tabPaginationButtonMargin < 0;
// calculate how much to set tag scroll wrapper's scrollLeft to
if (shouldScrollRight) {
tabScrollWrapper.scrollLeft = nextSelectedTab.rightOffset + tabPaginationButtonMargin
- tabScrollWrapperWidth;
} else {
tabScrollWrapper.scrollLeft = nextSelectedTab.leftOffset - tabPaginationButtonMargin;
}
}
}
}
Expand All @@ -365,7 +368,8 @@ const Tabs = React.createClass({


// stretch tabs if stretchTabContainer is true and if device screen size is large
let shouldStretch = stretchTabContainer && this.isDeviceSize(StyleResizable.statics.Sizes.LARGE);
let shouldStretch = stretchTabContainer && this.isDeviceSize(StyleResizable.statics.Sizes.LARGE)
&& !this.state.shouldPaginate;

let themeVariables = this.state.muiTheme.tabs;
let styles = {
Expand Down

0 comments on commit a084f7c

Please sign in to comment.