{ this.titleEl = el; }}>
+ Waterfall AppBar
+
+ }
+ iconElementLeft={
+ { this.titleEl = el; }}>
+ Waterfall AppBar
+
+ }
+ iconElementLeft={
+ 
+ material ui
+
+
+ {this._getSectionsData().map(section =>
+
+
+ );
+ }
+
+ let githubButton = (
+
- material ui
-
-
- {materialIcon}
-
- );
+ _getCurrentSection(test) {
+ const sections = this._getSectionsData();
+ for (let i = 0; i < sections.length; i++) {
+ if (test(sections[i])) {
+ return sections[i];
+ }
+ }
+ },
- return (
-
-
-
+
+
+
);
},
- _getSelectedIndex() {
- return this.props.history.isActive('/get-started') ? '1' :
- this.props.history.isActive('/customization') ? '2' :
- this.props.history.isActive('/components') ? '3' : '0';
+ _onDemoClick() {
+ this.props.history.pushState(null, '/components');
},
- _handleTabChange(value, e, tab) {
- this.props.history.pushState(null, tab.props.route);
- this.setState({tabIndex: this._getSelectedIndex()});
+ _getCurrentSectionFromHistory() {
+ return this._getCurrentSection(
+ section => this.props.history.isActive(section.route)
+ );
},
- _getAppBar() {
- let title =
- this.props.history.isActive('/get-started') ? 'Get Started' :
- this.props.history.isActive('/customization') ? 'Customization' :
- this.props.history.isActive('/components') ? 'Components' : '';
-
- let githubButton = (
- { this.homePageHero = el; }}>
+
+
+
+
+
-
- material ui
++ A Set of React Components + that Implement + Google's Material Design +
+
-
);
+ _handleTabChange(value) {
+ // route is passed as value
+ this.props.history.pushState(null, value);
+ this.setState({currentSection: this._getCurrentSection(s => s.route === value)});
},
_onLeftIconButtonTouchTap() {
diff --git a/docs/src/app/components/pages/components/app-bar.jsx b/docs/src/app/components/pages/components/app-bar.jsx
index 4194fcce47a397..ab18a577ca011a 100644
--- a/docs/src/app/components/pages/components/app-bar.jsx
+++ b/docs/src/app/components/pages/components/app-bar.jsx
@@ -8,18 +8,40 @@ import AppBarExampleIconButton from '../../AppBar/ExampleIconButton';
import appBarExampleIconButtonCode from '!raw!../../AppBar/ExampleIconButton';
import AppBarExampleIconMenu from '../../AppBar/ExampleIconMenu';
import appBarExampleIconMenuCode from '!raw!../../AppBar/ExampleIconMenu';
+import AppBarExampleWaterfallOptimized from '../../AppBar/ExampleWaterfallOptimized';
+import appBarExampleWaterfallOptimizedCode from '!raw!../../AppBar/ExampleWaterfallOptimized';
+import AppBarExampleWaterfall from '../../AppBar/ExampleWaterfall';
+import appBarExampleWaterfallCode from '!raw!../../AppBar/ExampleWaterfall';
import MarkdownElement from '../../MarkdownElement';
import appBarReadmeText from '../../AppBar/README';
+import Toggle from 'toggle';
export default class AppBarPage extends React.Component {
-
constructor(props) {
super(props);
+ this.state = {
+ waterfallVisible: false,
+ waterfallOptimized: true,
+ };
}
render() {
+ const styles = {
+ toggle: {
+ maxWidth: 250,
+ },
+ };
return (
+ {
+ this.state.waterfallVisible ?
+ this.state.waterfallOptimized ?
+
+ :
+
+ :
+ null
+ }
+
+
+
+
);
}
+
+ onWaterfallBack = () => {
+ this.setState({waterfallVisible: false});
+ }
+
+ onWaterfallToggle = (event, toggled) => {
+ this.setState({waterfallVisible: toggled});
+
+ // animated scroll
+ function scrollTo(element, to, duration) {
+ if (duration <= 0) return;
+ let difference = to - element.scrollTop;
+ let perTick = difference / duration * 10;
+
+ setTimeout(function() {
+ element.scrollTop = element.scrollTop + perTick;
+ if (element.scrollTop === to) return;
+ scrollTo(element, to, duration - 10);
+ }, 10);
+ }
+
+ if (toggled) {
+ scrollTo(document.body, 0, 1000);
+ }
+ }
+
+ onWaterfallOptimizeToggle = (event, toggled) => {
+ this.setState({waterfallOptimized: toggled});
+ }
}
diff --git a/docs/src/app/components/pages/home.jsx b/docs/src/app/components/pages/home.jsx
index c2f12ed584f532..27d0e23fda3960 100644
--- a/docs/src/app/components/pages/home.jsx
+++ b/docs/src/app/components/pages/home.jsx
@@ -5,9 +5,7 @@ import HomeFeature from './home-feature';
import FullWidthSection from '../full-width-section';
const {StylePropable, StyleResizable} = Mixins;
-const {Colors, Spacing, Typography} = Styles;
-const DefaultRawTheme = Styles.LightRawTheme;
-
+const {Colors, Typography} = Styles;
const HomePage = React.createClass({
@@ -18,13 +16,8 @@ const HomePage = React.createClass({
],
render() {
- let style = {
- paddingTop: Spacing.desktopKeylineIncrement,
- };
-
return (
-
- {this._getHomePageHero()}
+
{menuElementLeft}
{titleElement}
{menuElementRight}
{children}
-
- );
+ );
+
+ if (position === 'fixed') {
+ return (
+
{this._getHomePurpose()}
{this._getHomeFeatures()}
{this._getHomeContribute()}
@@ -32,88 +25,6 @@ const HomePage = React.createClass({
);
},
- _getHomePageHero() {
- let styles = {
- root: {
- backgroundColor: Colors.cyan500,
- overflow: 'hidden',
- },
- svgLogo: {
- marginLeft: (window.innerWidth * 0.5) - 130 + 'px',
- width: 420,
- },
- tagline: {
- margin: '16px auto 0 auto',
- textAlign: 'center',
- maxWidth: 575,
- },
- label: {
- color: DefaultRawTheme.palette.primary1Color,
- },
- githubStyle: {
- margin: '16px 32px 0px 8px',
- },
- demoStyle: {
- margin: '16px 32px 0px 32px',
- },
- h1: {
- color: Colors.darkWhite,
- fontWeight: Typography.fontWeightLight,
- },
- h2: {
- fontSize: 20,
- lineHeight: '28px',
- paddingTop: 19,
- marginBottom: 13,
- letterSpacing: 0,
- },
- nowrap: {
- whiteSpace: 'nowrap',
- },
- taglineWhenLarge: {
- marginTop: 32,
- },
- h1WhenLarge: {
- fontSize: 56,
- },
- h2WhenLarge: {
- fontSize: 24,
- lineHeight: '32px',
- paddingTop: 16,
- marginBottom: 12,
- },
- };
-
- styles.h2 = this.mergeStyles(styles.h1, styles.h2);
-
- if (this.isDeviceSize(StyleResizable.statics.Sizes.LARGE)) {
- styles.tagline = this.mergeStyles(styles.tagline, styles.taglineWhenLarge);
- styles.h1 = this.mergeStyles(styles.h1, styles.h1WhenLarge);
- styles.h2 = this.mergeStyles(styles.h2, styles.h2WhenLarge);
- }
-
- return (
-
-
-
- );
- },
-
_getHomePurpose() {
let styles = {
root: {
@@ -205,10 +116,6 @@ const HomePage = React.createClass({
);
},
-
- _onDemoClick() {
- this.history.pushState(null, '/components');
- },
});
export default HomePage;
diff --git a/docs/src/app/components/pages/page-with-nav.jsx b/docs/src/app/components/pages/page-with-nav.jsx
index 9b03c36f8e832a..ca627e35438dc0 100644
--- a/docs/src/app/components/pages/page-with-nav.jsx
+++ b/docs/src/app/components/pages/page-with-nav.jsx
@@ -39,7 +39,6 @@ let PageWithNav = React.createClass({
let subNavWidth = Spacing.desktopKeylineIncrement * 3 + 'px';
let styles = {
root: {
- paddingTop: Spacing.desktopKeylineIncrement + 'px',
},
rootWhenMedium: {
position: 'relative',
@@ -59,7 +58,7 @@ let PageWithNav = React.createClass({
secondaryNavWhenMedium: {
borderTop: 'none',
position: 'absolute',
- top: '64px',
+ top: '0px',
width: subNavWidth,
},
contentWhenMedium: {
diff --git a/src/app-bar.jsx b/src/app-bar.jsx
index 046560617b5b2c..2d1674d5cdca04 100644
--- a/src/app-bar.jsx
+++ b/src/app-bar.jsx
@@ -81,6 +81,14 @@ const AppBar = React.createClass({
*/
onTitleTouchTap: React.PropTypes.func,
+ /**
+ * Specify position and behavior. Fixed - will have a fixed position at the top of viewport.
+ * Static - will have a static position. Waterfall - will have a fixed position at the top
+ * of viewport and will decrease its height on window scroll down (see waterfall prop for
+ * additional settings).
+ */
+ position: React.PropTypes.oneOf(['fixed', 'static', 'waterfall']),
+
/**
* Determines whether or not to display the Menu icon next to the title.
* Setting this prop to false will hide the icon.
@@ -95,13 +103,36 @@ const AppBar = React.createClass({
/**
* The title to display on the app bar.
*/
- title: React.PropTypes.node,
+ title: React.PropTypes.oneOfType([
+ React.PropTypes.node,
+ React.PropTypes.func,
+ ]),
/**
* Override the inline-styles of the app bar's title element.
*/
titleStyle: React.PropTypes.object,
+ /**
+ * Settings object for position waterfall. Should at least have minHeight
+ * and maxHeight properties, both numeric. These specify min and max visual heigth
+ * of the component while window scrolling. Optional children property can be a node
+ * or a function (will receive component styles object as argument) returning a node. This node will
+ * be inserted in the slide (scrolled) element of the component. Optional onHeightChange property
+ * is a function called when visual height of the component changes on scroll. This function will
+ * receive as arguments an object with height, minHeight, maxHeight and childrenEl (DOM element of
+ * the component) properties. Using onHeightChange, animation effects can be achieved
+ * by altering style properties of specific DOM elements.
+ */
+ waterfall: React.PropTypes.shape({
+ minHeight: React.PropTypes.number,
+ maxHeight: React.PropTypes.number,
+ onHeightChange: React.PropTypes.func,
+ children: React.PropTypes.oneOfType([
+ React.PropTypes.node,
+ React.PropTypes.func,
+ ]),
+ }),
/**
* The zDepth of the app bar.
* The shadow of the app bar is also dependent on this property.
@@ -127,6 +158,7 @@ const AppBar = React.createClass({
showMenuIconButton: true,
title: '',
zDepth: 1,
+ position: 'fixed',
};
},
@@ -146,6 +178,71 @@ const AppBar = React.createClass({
);
}
}
+
+ if (this.props.waterfall && this.props.waterfall.onHeightChange) {
+ this.setupWaterfall();
+ }
+ },
+
+ componentDidUpdate: function(prevProps) {
+ if (this.props.waterfall && this.props.waterfall.onHeightChange) {
+ if (!(prevProps.waterfall && prevProps.waterfall.onHeightChange)) {
+ this.setupWaterfall();
+ }
+ } else if (prevProps.waterfall && prevProps.waterfall.onHeightChange) {
+ this.removeWaterfall();
+ }
+ },
+
+ componentWillUnmount: function() {
+ if (this.props.waterfall && this.props.waterfall.onHeightChange) {
+ this.removeWaterfall();
+ }
+ },
+
+ setupWaterfall() {
+ // in some cases scroll event is not triggered
+ // after page reloaded and kept it's scroll
+ // so we call the handler from the start
+ this.waterfallScrollHandler();
+
+ this.waterfallSlideEL.style.position = 'absolute';
+
+ window.addEventListener('scroll', this.waterfallScrollHandler);
+ },
+
+ removeWaterfall() {
+ window.removeEventListener('scroll', this.waterfallScrollHandler);
+ },
+
+ waterfallScrollHandler() {
+ if (this.waterfallRunning) { return; }
+ this.waterfallRunning = true;
+ requestAnimationFrame(() => {
+ let waterfall = this.props.waterfall;
+
+ let waterfallHeight = this.calculateWaterfallHeight();
+ if (this.waterfallHeight !== waterfallHeight) {
+ this.waterfallHeight = waterfallHeight;
+ if (waterfall.onHeightChange) {
+ waterfall.onHeightChange({
+ height: waterfallHeight,
+ maxHeight: waterfall.maxHeight,
+ minHeight: waterfall.minHeight,
+ childrenEl: this.waterfallRootEl,
+ });
+ }
+ }
+
+ this.waterfallRunning = false;
+ });
+
+ },
+
+ calculateWaterfallHeight() {
+ let waterfall = this.props.waterfall;
+ let windowScroll = window ? window.scrollY : 0;
+ return Math.max(waterfall.minHeight, waterfall.maxHeight - windowScroll);
},
getStyles() {
@@ -158,7 +255,9 @@ const AppBar = React.createClass({
let styles = {
root: {
- position: 'relative',
+ position: 'fixed',
+ top: 0,
+ left: 0,
zIndex: rawTheme.zIndex.appBar,
width: '100%',
display: 'flex',
@@ -217,6 +316,8 @@ const AppBar = React.createClass({
className,
style,
zDepth,
+ position,
+ waterfall,
children,
...other,
} = this.props;
@@ -233,15 +334,22 @@ const AppBar = React.createClass({
if (title) {
// If the title is a string, wrap in an h1 tag.
// If not, just use it as a node.
- titleElement = typeof title === 'string' || title instanceof String ?
- { this.waterfallRootEl = el; }}
+ style={{
+ height: waterfall.maxHeight,
+ }}>
+
+ );
+ } else {
+ let paperEl = (
-
-
-
- material ui
-- A Set of React Components - that Implement - Google's Material Design -
-{title} -
: -);
+ } else {
+ let titleNode = title;
+ if (typeof title === 'function') {
+ // pass styles, otherwise inaccesible
+ titleNode = title(this.getStyles());
+ }
+ titleElement = (
);
+ }
}
if (showMenuIconButton) {
@@ -304,19 +412,89 @@ const AppBar = React.createClass({
);
}
- return (
-
- {title}
-
;
+ {titleNode}
+ { this.waterfallSlideEL = el; }}
+ style={{
+ position: 'fixed',
+ top: 0,
+ left: 0,
+ zIndex: paperElStyle.zIndex + 1,
+ width: '100%',
+ height: waterfall.maxHeight,
+ paddingTop: waterfall.minHeight,
+ boxSizing: 'border-box',
+ backgroundColor: paperElStyle.backgroundColor,
+ }}>{waterfallChildren}
+ {/* this is the container for icons and children
+ * same styles ar for root but with no background - transparent */}
+
+ {menuElementLeft}
+ {titleElement}
+ {menuElementRight}
+ {children}
+
+ {paperEl}
+ );
+ } else if (position === 'static') {
+ return paperEl;
+ }
+ }
},
_onLeftIconButtonTouchTap(event) {
diff --git a/src/app-canvas.jsx b/src/app-canvas.jsx
index 370ce35142566e..270c454d342038 100644
--- a/src/app-canvas.jsx
+++ b/src/app-canvas.jsx
@@ -47,26 +47,9 @@ const AppCanvas = React.createClass({
direction: 'ltr',
};
- let newChildren = React.Children.map(this.props.children, (currentChild) => {
- if (!currentChild) { // If undefined, skip it
- return null;
- }
-
- switch (currentChild.type.displayName) {
- case 'AppBar' :
- return React.cloneElement(currentChild, {
- style: this.mergeStyles(currentChild.props.style, {
- position: 'fixed',
- }),
- });
- default:
- return currentChild;
- }
- }, this);
-
return (
- {newChildren}
+ {this.props.children}
);
},
diff --git a/test/theming-v12-spec.js b/test/theming-v12-spec.js
index 771cf5f8e04283..4f430d307e85fa 100644
--- a/test/theming-v12-spec.js
+++ b/test/theming-v12-spec.js
@@ -4,12 +4,14 @@
const AppBar = require('app-bar');
const RaisedButton = require('raised-button');
const React = require('react');
+const ReactDOM = require('react-dom');
const TestUtils = require('react-addons-test-utils');
const ThemeManager = require('styles/theme-manager');
const ThemeDecorator = require('styles/theme-decorator');
const DarkRawTheme = require('styles/raw-themes/dark-raw-theme');
const LightRawTheme = require('styles/raw-themes/light-raw-theme');
const Colors = require('styles/colors');
+const Paper = require('paper');
describe('Theming', () => {
describe('ThemeManager', () => {
@@ -38,10 +40,11 @@ describe('Theming', () => {
describe('When no theme is specified, AppBar', () => {
it('should display with default light theme', () => {
let renderedAppbar = TestUtils.renderIntoDocument(