Merge branch 'Kikobeats-patch-1' into dev
* Kikobeats-patch-1: Small fixes Update AppBar.js Add possibility to render component as AppBar titleold
commit
a286f9bba7
|
@ -1,5 +1,5 @@
|
||||||
import React, { PropTypes } from 'react';
|
import React, { PropTypes } from 'react';
|
||||||
import classnames from 'classnames';
|
import cn from 'classnames';
|
||||||
import { themr } from 'react-css-themr';
|
import { themr } from 'react-css-themr';
|
||||||
import { APP_BAR } from '../identifiers';
|
import { APP_BAR } from '../identifiers';
|
||||||
import InjectIconButton from '../button/IconButton';
|
import InjectIconButton from '../button/IconButton';
|
||||||
|
@ -32,7 +32,10 @@ const factory = (IconButton) => {
|
||||||
scrollHide: PropTypes.string,
|
scrollHide: PropTypes.string,
|
||||||
title: PropTypes.string,
|
title: PropTypes.string,
|
||||||
}),
|
}),
|
||||||
title: PropTypes.node,
|
title: PropTypes.oneOfType([
|
||||||
|
PropTypes.string,
|
||||||
|
PropTypes.element,
|
||||||
|
]),
|
||||||
};
|
};
|
||||||
|
|
||||||
static defaultProps = {
|
static defaultProps = {
|
||||||
|
@ -66,16 +69,16 @@ const factory = (IconButton) => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
initializeScroll = () => {
|
initializeScroll() {
|
||||||
window.addEventListener('scroll', this.handleScroll);
|
window.addEventListener('scroll', this.handleScroll);
|
||||||
const { height } = this.rootNode.getBoundingClientRect();
|
const { height } = this.rootNode.getBoundingClientRect();
|
||||||
this.curScroll = window.scrollY;
|
this.curScroll = window.scrollY;
|
||||||
this.setState({ height });
|
this.setState({ height });
|
||||||
};
|
}
|
||||||
|
|
||||||
endScroll = () => {
|
endScroll() {
|
||||||
window.removeEventListener('scroll', this.handleScroll);
|
window.removeEventListener('scroll', this.handleScroll);
|
||||||
};
|
}
|
||||||
|
|
||||||
handleScroll = () => {
|
handleScroll = () => {
|
||||||
const scrollDiff = this.curScroll - window.scrollY;
|
const scrollDiff = this.curScroll - window.scrollY;
|
||||||
|
@ -96,12 +99,35 @@ const factory = (IconButton) => {
|
||||||
theme,
|
theme,
|
||||||
title,
|
title,
|
||||||
} = this.props;
|
} = this.props;
|
||||||
const className = classnames(theme.appBar, {
|
|
||||||
|
const className = cn(theme.appBar, {
|
||||||
[theme.fixed]: this.props.fixed,
|
[theme.fixed]: this.props.fixed,
|
||||||
[theme.flat]: this.props.flat,
|
[theme.flat]: this.props.flat,
|
||||||
[theme.scrollHide]: this.state.hidden,
|
[theme.scrollHide]: this.state.hidden,
|
||||||
}, this.props.className);
|
}, this.props.className);
|
||||||
|
|
||||||
|
const renderedTitle = typeof title === 'string'
|
||||||
|
? <h1 className={cn(theme.title)}>{title}</h1>
|
||||||
|
: title;
|
||||||
|
|
||||||
|
const renderedLeftIcon = leftIcon && (
|
||||||
|
<IconButton
|
||||||
|
inverse
|
||||||
|
className={cn(theme.leftIcon)}
|
||||||
|
onClick={onLeftIconClick}
|
||||||
|
icon={leftIcon}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
const renderedRightIcon = rightIcon && (
|
||||||
|
<IconButton
|
||||||
|
inverse
|
||||||
|
className={cn(theme.rightIcon)}
|
||||||
|
onClick={onRightIconClick}
|
||||||
|
icon={rightIcon}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<header
|
<header
|
||||||
className={className}
|
className={className}
|
||||||
|
@ -109,22 +135,10 @@ const factory = (IconButton) => {
|
||||||
ref={(node) => { this.rootNode = node; }}
|
ref={(node) => { this.rootNode = node; }}
|
||||||
>
|
>
|
||||||
<div className={theme.inner}>
|
<div className={theme.inner}>
|
||||||
{leftIcon && <IconButton
|
{renderedLeftIcon}
|
||||||
inverse
|
{renderedTitle}
|
||||||
className={classnames(theme.leftIcon)}
|
|
||||||
onClick={onLeftIconClick}
|
|
||||||
icon={leftIcon}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
{title && <h1 className={classnames(theme.title)}>{title}</h1>}
|
|
||||||
{children}
|
{children}
|
||||||
{rightIcon && <IconButton
|
{renderedRightIcon}
|
||||||
inverse
|
|
||||||
className={classnames(theme.rightIcon)}
|
|
||||||
onClick={onRightIconClick}
|
|
||||||
icon={rightIcon}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
);
|
);
|
||||||
|
|
|
@ -36,7 +36,7 @@ The `AppBar` component provides properties for the common use cases of `title`,
|
||||||
| `fixed` | `Bool` | `false` | Determine if the bar should have position `fixed` or `relative`.|
|
| `fixed` | `Bool` | `false` | Determine if the bar should have position `fixed` or `relative`.|
|
||||||
| `flat` | `Bool` | `false` | If true, the AppBar doesn't show a shadow.|
|
| `flat` | `Bool` | `false` | If true, the AppBar doesn't show a shadow.|
|
||||||
| `theme` | `Object` | `null` | Classnames object defining the component style.|
|
| `theme` | `Object` | `null` | Classnames object defining the component style.|
|
||||||
| `title` | `Element` | `null` | Title used for the appbar.|
|
| `title` | `String|Element` | `null` | Title used for the appbar.|
|
||||||
| `leftIcon` | `String|Element` | `null` | Left icon.|
|
| `leftIcon` | `String|Element` | `null` | Left icon.|
|
||||||
| `onLeftIconClick` | `Function` | `null` | Called on left icon click event.|
|
| `onLeftIconClick` | `Function` | `null` | Called on left icon click event.|
|
||||||
| `rightIcon` | `String|Element` | `null` | Right icon.|
|
| `rightIcon` | `String|Element` | `null` | Right icon.|
|
||||||
|
|
Loading…
Reference in New Issue