Skip to content

Commit ef44b75

Browse files
igorbtigorbt
committed
implemented waterfall
changed implementation for an optimized performance
1 parent 0e358b9 commit ef44b75

12 files changed

Lines changed: 641 additions & 296 deletions

File tree

‎docs/src/app/app-routes.jsx‎

Lines changed: 54 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@ import Tabs from './components/pages/components/tabs';
4949
import TextFields from './components/pages/components/text-fields';
5050
import TimePicker from './components/pages/components/time-picker';
5151
import Toolbars from './components/pages/components/toolbars';
52+
import AppBarWaterfall from './components/examples/app-bar-waterfall';
5253

5354

5455
/**
@@ -61,57 +62,63 @@ import Toolbars from './components/pages/components/toolbars';
6162
* handler and its parent handler like so: Paper > Components > Master
6263
*/
6364
const AppRoutes = (
64-
<Route path="/" component={Master}>
65-
<Route path="home" component={Home} />
66-
<Redirect from="get-started" to="/get-started/prerequisites" />
67-
<Route path="get-started" component={GetStarted}>
68-
<Route path="prerequisites" component={Prerequisites} />
69-
<Route path="installation" component={Installation} />
70-
<Route path="examples" component={Examples} />
71-
</Route>
65+
<Route>
66+
<Route path="/" component={Master}>
67+
<Route path="home" component={Home} />
68+
<Redirect from="get-started" to="/get-started/prerequisites" />
69+
<Route path="get-started" component={GetStarted}>
70+
<Route path="prerequisites" component={Prerequisites} />
71+
<Route path="installation" component={Installation} />
72+
<Route path="examples" component={Examples} />
73+
</Route>
7274

73-
<Redirect from="customization" to="/customization/themes" />
74-
<Route path="customization" component={Customization}>
75-
<Route path="colors" component={Colors} />
76-
<Route path="themes" component={Themes} />
77-
<Route path="inline-styles" component={InlineStyles} />
78-
</Route>
75+
<Redirect from="customization" to="/customization/themes" />
76+
<Route path="customization" component={Customization}>
77+
<Route path="colors" component={Colors} />
78+
<Route path="themes" component={Themes} />
79+
<Route path="inline-styles" component={InlineStyles} />
80+
</Route>
7981

80-
<Redirect from="components" to="/components/app-bar" />
81-
<Route path="components" component={Components}>
82-
<Route path="app-bar" component={AppBar} />
83-
<Route path="auto-complete" component={AutoComplete} />
84-
<Route path="avatar" component={Avatar} />
85-
<Route path="badge" component={Badge} />
86-
<Route path="buttons" component={Buttons} />
87-
<Route path="cards" component={Cards} />
88-
<Route path="date-picker" component={DatePicker} />
89-
<Route path="dialog" component={Dialog} />
90-
<Route path="dropdown-menu" component={DropDownMenu} />
91-
<Route path="grid-list" component={GridList} />
92-
<Route path="icons" component={Icons} />
93-
<Route path="icon-buttons" component={IconButtons} />
94-
<Route path="icon-menus" component={IconMenus} />
95-
<Route path="left-nav" component={LeftNav} />
96-
<Route path="lists" component={Lists} />
97-
<Route path="menus" component={Menus} />
98-
<Route path="paper" component={Paper} />
99-
<Route path="popover" component={Popover} />
100-
<Route path="progress" component={Progress} />
101-
<Route path="refresh-indicator" component={RefreshIndicator} />
102-
<Route path="select-fields" component={SelectFields} />
103-
<Route path="sliders" component={Sliders} />
104-
<Route path="switches" component={Switches} />
105-
<Route path="snackbar" component={Snackbar} />
106-
<Route path="table" component={Table} />
107-
<Route path="tabs" component={Tabs} />
108-
<Route path="text-fields" component={TextFields} />
109-
<Route path="time-picker" component={TimePicker} />
110-
<Route path="toolbars" component={Toolbars} />
111-
</Route>
82+
<Redirect from="components" to="/components/appbar" />
83+
<Route path="components" component={Components}>
84+
<Route path="appbar" component={AppBar} />
85+
<Route path="auto-complete" component={AutoComplete} />
86+
<Route path="avatar" component={Avatar} />
87+
<Route path="badge" component={Badge} />
88+
<Route path="buttons" component={Buttons} />
89+
<Route path="cards" component={Cards} />
90+
<Route path="date-picker" component={DatePicker} />
91+
<Route path="dialog" component={Dialog} />
92+
<Route path="dropdown-menu" component={DropDownMenu} />
93+
<Route path="grid-list" component={GridList} />
94+
<Route path="icons" component={Icons} />
95+
<Route path="icon-buttons" component={IconButtons} />
96+
<Route path="icon-menus" component={IconMenus} />
97+
<Route path="left-nav" component={LeftNav} />
98+
<Route path="lists" component={Lists} />
99+
<Route path="menus" component={Menus} />
100+
<Route path="paper" component={Paper} />
101+
<Route path="popover" component={Popover} />
102+
<Route path="progress" component={Progress} />
103+
<Route path="refresh-indicator" component={RefreshIndicator} />
104+
<Route path="select-fields" component={SelectFields} />
105+
<Route path="sliders" component={Sliders} />
106+
<Route path="switches" component={Switches} />
107+
<Route path="snackbar" component={Snackbar} />
108+
<Route path="table" component={Table} />
109+
<Route path="tabs" component={Tabs} />
110+
<Route path="text-fields" component={TextFields} />
111+
<Route path="time-picker" component={TimePicker} />
112+
<Route path="toolbars" component={Toolbars} />
113+
</Route>
112114

113-
<IndexRoute component={Home}/>
115+
<IndexRoute component={Home}/>
116+
</Route>
117+
<Route path="/examples">
118+
<Route path="app-bar-waterfall" component={AppBarWaterfall} />
119+
</Route>
114120
</Route>
121+
115122
);
116123

117124
export default AppRoutes;

‎docs/src/app/components/AppBar/ExampleIcon.jsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ const AppBarExampleIcon = React.createClass({
66
return (
77
<AppBar
88
title="Title"
9+
position="static"
910
iconClassNameRight="muidocs-icon-navigation-expand-more"
1011
/>
1112
);

‎docs/src/app/components/AppBar/ExampleIconButton.jsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ const AppBarExampleIconButton = React.createClass({
1919
return (
2020
<AppBar
2121
title={<span style={styles.title} onTouchTap={handleTouchTap}>Title</span>}
22+
position="static"
2223
iconElementLeft={<IconButton><NavigationClose /></IconButton>}
2324
iconElementRight={<FlatButton label="Save" />}
2425
/>

‎docs/src/app/components/AppBar/ExampleIconMenu.jsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ const AppBarExampleIconMenu = React.createClass({
1111
return (
1212
<AppBar
1313
title="Title"
14+
position="static"
1415
iconElementLeft={<IconButton><NavigationClose /></IconButton>}
1516
iconElementRight={
1617
<IconMenu

‎docs/src/app/components/examples/app-bar-waterfall-example.jsx‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import React from 'react';
2+
import { AppBar} from 'material-ui';
3+
4+
import IconButton from 'icon-button';
5+
import MoreVertIcon from 'svg-icons/navigation/more-vert';
6+
import ArrowBack from 'svg-icons/navigation/arrow-back';
7+
8+
const AppBarWaterfallExample = React.createClass({
9+
10+
render() {
11+
return (
12+
<AppBar
13+
position="waterfall"
14+
waterfall={{
15+
minHeight: 64,
16+
maxHeight: 210,
17+
children: this.getWaterfallChildren(),
18+
onHeightChange: this.onHeightChange
19+
}}
20+
title={
21+
<div
22+
ref={el => {this.titleEl = el}}>
23+
Waterfall AppBar
24+
</div>
25+
}
26+
iconElementLeft={
27+
<IconButton onClick={this.onBackClick}>
28+
<ArrowBack />
29+
</IconButton>
30+
}
31+
iconElementRight={
32+
<IconButton>
33+
<MoreVertIcon/>
34+
</IconButton>
35+
}
36+
/>
37+
);
38+
},
39+
40+
getWaterfallChildren() {
41+
let styles = this.getStyles();
42+
return (
43+
<div
44+
style={{overflow: 'hidden'}}>
45+
<img
46+
ref={el => {this.logoEl = el}}
47+
style={styles.logo}
48+
src="images/material-ui-logo.svg"/>
49+
</div>
50+
);
51+
},
52+
53+
onHeightChange({height, minHeight, maxHeight, childrenEl}) {
54+
let interpolation = (height - minHeight) / (maxHeight - minHeight);
55+
56+
// For best performance, we will directly modify style on DOM elements
57+
this.logoEl.style.transform = `translate3d(80px,0,0) scale3d(${interpolation}, ${interpolation}, 1)`;
58+
this.logoEl.style.opacity = interpolation;
59+
this.titleEl.style.opacity = 1 - interpolation;
60+
},
61+
62+
onBackClick() {
63+
window.history.back();
64+
},
65+
66+
getStyles() {
67+
return {
68+
logo: {
69+
height: 120,
70+
margin: "0 auto",
71+
display: "block",
72+
transformOrigin: "25% 100% 0",
73+
transform: "translate3d(80px,0,0)",
74+
}
75+
};
76+
}
77+
});
78+
79+
export default AppBarWaterfallExample;

‎docs/src/app/components/examples/app-bar-waterfall.jsx‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import React from 'react';
2+
import { AppCanvas, Styles, Mixins } from 'material-ui';
3+
4+
import CodeExample from '../code-example/code-example';
5+
import FullWidthSection from '../full-width-section';
6+
7+
import AppBarWaterfallExample from './app-bar-waterfall-example';
8+
import AppBarWaterfallExampleCode from '!raw!./app-bar-waterfall-example';
9+
10+
const {StylePropable} = Mixins;
11+
const {Colors, Spacing, Typography} = Styles;
12+
const ThemeManager = Styles.ThemeManager;
13+
const DefaultRawTheme = Styles.LightRawTheme;
14+
15+
const AppBarWaterfall = React.createClass({
16+
17+
mixins: [StylePropable],
18+
19+
getInitialState() {
20+
let muiTheme = ThemeManager.getMuiTheme(DefaultRawTheme);
21+
// To switch to RTL...
22+
// muiTheme.isRtl = true;
23+
return {
24+
muiTheme,
25+
};
26+
},
27+
28+
contextTypes: {
29+
router: React.PropTypes.func
30+
},
31+
32+
childContextTypes: {
33+
muiTheme: React.PropTypes.object
34+
},
35+
36+
getChildContext() {
37+
return {
38+
muiTheme: this.state.muiTheme,
39+
}
40+
},
41+
42+
getStyles() {
43+
return {
44+
headline: {
45+
//headline
46+
fontSize: '24px',
47+
lineHeight: '32px',
48+
paddingTop: '16px',
49+
marginBottom: '12px',
50+
letterSpacing: '0',
51+
fontWeight: Typography.fontWeightNormal,
52+
color: Typography.textDarkBlack
53+
}
54+
};
55+
},
56+
57+
render() {
58+
let styles = this.getStyles();
59+
return (
60+
<AppCanvas>
61+
<AppBarWaterfallExample/>
62+
<FullWidthSection>
63+
<h2 style={styles.headline}>Waterfall AppBar</h2>
64+
65+
<p>Here is an example of how you can obtain a nice animation effect on scroll
66+
when using position waterfall.</p>
67+
<CodeExample code={AppBarWaterfallExampleCode}/>
68+
</FullWidthSection>
69+
</AppCanvas>
70+
);
71+
}
72+
});
73+
74+
export default AppBarWaterfall;

0 commit comments

Comments
 (0)
⚡