Skip to content

Commit 7146329

Browse files
fredriklindellfredriklindell
committed
Render fix and new scollable example
* 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.
1 parent 0215766 commit 7146329

File tree

3 files changed

+203
-18
lines changed

3 files changed

+203
-18
lines changed

‎docs/src/app/components/pages/components/Tabs/ExampleScrollable.jsx

+176
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,176 @@
1+
import React from 'react';
2+
import Tabs from 'material-ui/lib/tabs/tabs';
3+
import Tab from 'material-ui/lib/tabs/tab';
4+
import Slider from 'material-ui/lib/slider';
5+
6+
const styles = {
7+
headline: {
8+
fontSize: 24,
9+
paddingTop: 16,
10+
marginBottom: 12,
11+
fontWeight: 400,
12+
},
13+
};
14+
15+
const TabsExampleScrollable = () => (
16+
<Tabs>
17+
<Tab label="Item One" >
18+
<div>
19+
<h2 style={styles.headline}>Tab One Template Example</h2>
20+
<p>
21+
This is an example of a tab template!
22+
</p>
23+
<p>
24+
You can put any sort of HTML or react component in here. It even keeps the component state!
25+
</p>
26+
<Slider name="slider0" defaultValue={0.5} />
27+
</div>
28+
</Tab>
29+
<Tab label="Item Two" >
30+
<div>
31+
<h2 style={styles.headline}>Tab Two Template Example</h2>
32+
<p>
33+
This is another example of a tab template!
34+
</p>
35+
</div>
36+
</Tab>
37+
<Tab label="Item Three" >
38+
<div>
39+
<h2 style={styles.headline}>Tab Three Template Example</h2>
40+
<p>
41+
This is another example of a tab template!
42+
</p>
43+
</div>
44+
</Tab>
45+
<Tab label="Item Four" >
46+
<div>
47+
<h2 style={styles.headline}>Tab Four Template Example</h2>
48+
<p>
49+
This is another example of a tab template!
50+
</p>
51+
</div>
52+
</Tab>
53+
<Tab label="Item Five" >
54+
<div>
55+
<h2 style={styles.headline}>Tab Five Template Example</h2>
56+
<p>
57+
This is another example of a tab template!
58+
</p>
59+
</div>
60+
</Tab>
61+
<Tab label="Item Six" >
62+
<div>
63+
<h2 style={styles.headline}>Tab Six Template Example</h2>
64+
<p>
65+
This is another example of a tab template!
66+
</p>
67+
</div>
68+
</Tab>
69+
<Tab label="Item Seven" >
70+
<div>
71+
<h2 style={styles.headline}>Tab Seven Template Example</h2>
72+
<p>
73+
This is another example of a tab template!
74+
</p>
75+
</div>
76+
</Tab>
77+
<Tab label="Item Eight" >
78+
<div>
79+
<h2 style={styles.headline}>Tab Eight Template Example</h2>
80+
<p>
81+
This is another example of a tab template!
82+
</p>
83+
</div>
84+
</Tab>
85+
<Tab label="Item Nine" >
86+
<div>
87+
<h2 style={styles.headline}>Tab Nine Template Example</h2>
88+
<p>
89+
This is another example of a tab template!
90+
</p>
91+
</div>
92+
</Tab>
93+
<Tab label="Item Ten" >
94+
<div>
95+
<h2 style={styles.headline}>Tab Ten Template Example</h2>
96+
<p>
97+
This is another example of a tab template!
98+
</p>
99+
</div>
100+
</Tab>
101+
<Tab label="Item Eleven" >
102+
<div>
103+
<h2 style={styles.headline}>Tab Eleven Template Example</h2>
104+
<p>
105+
This is another example of a tab template!
106+
</p>
107+
</div>
108+
</Tab>
109+
<Tab label="Item Twelve" >
110+
<div>
111+
<h2 style={styles.headline}>Tab Twelve Template Example</h2>
112+
<p>
113+
This is another example of a tab template!
114+
</p>
115+
</div>
116+
</Tab>
117+
<Tab label="Item Thirteen" >
118+
<div>
119+
<h2 style={styles.headline}>Tab Thirteen Template Example</h2>
120+
<p>
121+
This is another example of a tab template!
122+
</p>
123+
</div>
124+
</Tab>
125+
<Tab label="Item Fourteen" >
126+
<div>
127+
<h2 style={styles.headline}>Tab Fourteen Template Example</h2>
128+
<p>
129+
This is another example of a tab template!
130+
</p>
131+
</div>
132+
</Tab>
133+
<Tab label="Item Fifteen" >
134+
<div>
135+
<h2 style={styles.headline}>Tab Fifteen Template Example</h2>
136+
<p>
137+
This is another example of a tab template!
138+
</p>
139+
</div>
140+
</Tab>
141+
<Tab label="Item Sixteen" >
142+
<div>
143+
<h2 style={styles.headline}>Tab Sixteen Template Example</h2>
144+
<p>
145+
This is another example of a tab template!
146+
</p>
147+
</div>
148+
</Tab>
149+
<Tab label="Item Seventeen" >
150+
<div>
151+
<h2 style={styles.headline}>Tab Seventeen Template Example</h2>
152+
<p>
153+
This is another example of a tab template!
154+
</p>
155+
</div>
156+
</Tab>
157+
<Tab label="Item Eighteen" >
158+
<div>
159+
<h2 style={styles.headline}>Tab Eighteen Template Example</h2>
160+
<p>
161+
This is another example of a tab template!
162+
</p>
163+
</div>
164+
</Tab>
165+
<Tab label="Item Nineteen" >
166+
<div>
167+
<h2 style={styles.headline}>Tab Nineteen Template Example</h2>
168+
<p>
169+
This is another example of a tab template!
170+
</p>
171+
</div>
172+
</Tab>
173+
</Tabs>
174+
);
175+
176+
export default TabsExampleScrollable;

‎docs/src/app/components/pages/components/Tabs/Page.jsx

+5
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ import tabsExampleControlledCode from '!raw!./ExampleControlled';
99
import TabsExampleControlled from './ExampleControlled';
1010
import tabsExampleSwipeableCode from '!raw!./ExampleSwipeable';
1111
import TabsExampleSwipeable from './ExampleSwipeable';
12+
import tabsExampleScrollableCode from '!raw!./ExampleScrollable';
13+
import TabsExampleScrollable from './ExampleScrollable';
1214
import tabsCode from '!raw!material-ui/lib/tabs/tabs';
1315
import tabsText from './Tabs';
1416
import tabCode from '!raw!material-ui/lib/tabs/tab';
@@ -26,6 +28,9 @@ const TabsPage = () => (
2628
<CodeExample code={tabsExampleSwipeableCode}>
2729
<TabsExampleSwipeable />
2830
</CodeExample>
31+
<CodeExample code={tabsExampleScrollableCode}>
32+
<TabsExampleScrollable />
33+
</CodeExample>
2934
<PropTypeDescription
3035
code={tabsCode}
3136
header={tabsText} />

‎src/tabs/tabs.jsx

+22-18
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,7 @@ const Tabs = React.createClass({
118118
getDefaultProps() {
119119
return {
120120
initialSelectedIndex: 0,
121-
stretchTabContainer: false,
121+
stretchTabContainer: true,
122122
};
123123
},
124124

@@ -151,8 +151,8 @@ const Tabs = React.createClass({
151151
},
152152

153153
componentDidMount() {
154+
window.requestAnimationFrame(this.handleWindowWidthChange);
154155
Events.on(window, 'resize', this.handleWindowWidthChange);
155-
this.replaceState(this.getNewState());
156156
},
157157

158158
componentWillReceiveProps(newProps, nextContext) {
@@ -326,21 +326,24 @@ const Tabs = React.createClass({
326326
let paginationChange = this.state.shouldPaginate !== nextShouldPaginate;
327327
if (paginationChange || tabContainerWidth !== this.state.tabContainerWidth || tabWrapperWidthChange) {
328328
let nextSelectedTab = tabInfo[this.state.selectedIndex];
329-
let tabScrollWrapper = this._getDOMNode(Constants.TAB_SCROLL_WRAPPER_REF_NAME);
330-
let tabScrollWrapperLeftScroll = tabScrollWrapper.scrollLeft;
331-
let tabScrollWrapperWidth = tabScrollWrapper.offsetWidth;
332-
let tabPaginationButtonMargin = nextShouldPaginate ? Constants.TAB_PAGINATOR_BUTTON_DEFAULT_WIDTH : 0;
333-
let tabVisible = nextSelectedTab.leftOffset - tabPaginationButtonMargin >= tabScrollWrapperLeftScroll
334-
&& tabScrollWrapperLeftScroll + tabScrollWrapperWidth - nextSelectedTab.rightOffset
335-
- tabPaginationButtonMargin >= 0;
336-
if (!tabVisible) {
337-
let shouldScrollRight = tabScrollWrapperLeftScroll + tabScrollWrapperWidth
338-
- nextSelectedTab.rightOffset - tabPaginationButtonMargin < 0;
339-
// calculate how much to set tag scroll wrapper's scrollLeft to
340-
if (shouldScrollRight) {
341-
tabScrollWrapper.scrollLeft = nextSelectedTab.rightOffset + tabPaginationButtonMargin - tabScrollWrapperWidth;
342-
} else {
343-
tabScrollWrapper.scrollLeft = nextSelectedTab.leftOffset - tabPaginationButtonMargin;
329+
if (nextSelectedTab !== undefined) {
330+
let tabScrollWrapper = this._getDOMNode(Constants.TAB_SCROLL_WRAPPER_REF_NAME);
331+
let tabScrollWrapperLeftScroll = tabScrollWrapper.scrollLeft;
332+
let tabScrollWrapperWidth = tabScrollWrapper.offsetWidth;
333+
let tabPaginationButtonMargin = nextShouldPaginate ? Constants.TAB_PAGINATOR_BUTTON_DEFAULT_WIDTH : 0;
334+
let tabVisible = nextSelectedTab.leftOffset - tabPaginationButtonMargin >= tabScrollWrapperLeftScroll
335+
&& tabScrollWrapperLeftScroll + tabScrollWrapperWidth - nextSelectedTab.rightOffset
336+
- tabPaginationButtonMargin >= 0;
337+
if (!tabVisible) {
338+
let shouldScrollRight = tabScrollWrapperLeftScroll + tabScrollWrapperWidth
339+
- nextSelectedTab.rightOffset - tabPaginationButtonMargin < 0;
340+
// calculate how much to set tag scroll wrapper's scrollLeft to
341+
if (shouldScrollRight) {
342+
tabScrollWrapper.scrollLeft = nextSelectedTab.rightOffset + tabPaginationButtonMargin
343+
- tabScrollWrapperWidth;
344+
} else {
345+
tabScrollWrapper.scrollLeft = nextSelectedTab.leftOffset - tabPaginationButtonMargin;
346+
}
344347
}
345348
}
346349
}
@@ -365,7 +368,8 @@ const Tabs = React.createClass({
365368

366369

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

370374
let themeVariables = this.state.muiTheme.tabs;
371375
let styles = {

0 commit comments

Comments
 (0)