Add app_bar title, leftIcon and rightIcon props.
Here we add some basic default functionality for the most common use cases of the AppBar component. It is still possible to provide and style your own elements through children props, but for most use cases the props will help reduce the amount of boilerplate.old
parent
0bd7eb8cb0
commit
d4c0c4d8ba
|
@ -2,16 +2,29 @@ import React, { PropTypes } from 'react';
|
||||||
import classnames from 'classnames';
|
import classnames from 'classnames';
|
||||||
import { themr } from 'react-css-themr';
|
import { themr } from 'react-css-themr';
|
||||||
import { APP_BAR } from '../identifiers.js';
|
import { APP_BAR } from '../identifiers.js';
|
||||||
|
import FontIcon from '../font_icon/FontIcon.js';
|
||||||
|
|
||||||
const AppBar = ({ theme, ...props }) => {
|
const AppBar = ({ theme, title, ...props }) => {
|
||||||
const className = classnames(theme.appBar, {
|
const className = classnames(theme.appBar, {
|
||||||
[theme.fixed]: props.fixed,
|
[theme.fixed]: props.fixed,
|
||||||
[theme.flat]: props.flat
|
[theme.flat]: props.flat
|
||||||
}, props.className);
|
}, props.className);
|
||||||
|
const { leftIcon, onLeftIconClick, rightIcon, onRightIconClick } = props;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<header className={className} data-react-toolbox='app-bar'>
|
<header className={className} data-react-toolbox='app-bar'>
|
||||||
|
{leftIcon ? <FontIcon
|
||||||
|
className={classnames(theme.leftIcon)}
|
||||||
|
value={leftIcon}
|
||||||
|
onClick={onLeftIconClick}/> : null
|
||||||
|
}
|
||||||
|
{title ? <h1 className={classnames(theme.title)}>{title}</h1> : null}
|
||||||
{props.children}
|
{props.children}
|
||||||
|
{rightIcon ? <FontIcon
|
||||||
|
className={classnames(theme.rightIcon)}
|
||||||
|
value={rightIcon}
|
||||||
|
onClick={onRightIconClick}/> : null
|
||||||
|
}
|
||||||
</header>
|
</header>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -21,11 +34,25 @@ AppBar.propTypes = {
|
||||||
className: PropTypes.string,
|
className: PropTypes.string,
|
||||||
fixed: PropTypes.bool,
|
fixed: PropTypes.bool,
|
||||||
flat: PropTypes.bool,
|
flat: PropTypes.bool,
|
||||||
|
leftIcon: PropTypes.oneOfType(
|
||||||
|
PropTypes.string,
|
||||||
|
PropTypes.element
|
||||||
|
),
|
||||||
|
onLeftIconClick: PropTypes.func,
|
||||||
|
onRightIconClick: PropTypes.func,
|
||||||
|
rightIcon: PropTypes.oneOfType(
|
||||||
|
PropTypes.string,
|
||||||
|
PropTypes.element
|
||||||
|
),
|
||||||
theme: PropTypes.shape({
|
theme: PropTypes.shape({
|
||||||
appBar: PropTypes.string,
|
appBar: PropTypes.string,
|
||||||
|
leftIcon: PropTypes.string,
|
||||||
|
rightIcon: PropTypes.string,
|
||||||
fixed: PropTypes.string,
|
fixed: PropTypes.string,
|
||||||
flat: PropTypes.string
|
flat: PropTypes.string,
|
||||||
})
|
title: PropTypes.string
|
||||||
|
}),
|
||||||
|
title: PropTypes.string
|
||||||
};
|
};
|
||||||
|
|
||||||
AppBar.defaultProps = {
|
AppBar.defaultProps = {
|
||||||
|
|
|
@ -13,6 +13,18 @@ export interface AppBarTheme {
|
||||||
* Added to the root element when the app bar is flat.
|
* Added to the root element when the app bar is flat.
|
||||||
*/
|
*/
|
||||||
flat?: string;
|
flat?: string;
|
||||||
|
/**
|
||||||
|
* Used as the app bar title.
|
||||||
|
*/
|
||||||
|
title ?: string;
|
||||||
|
/**
|
||||||
|
* Added to the left icon app bar element.
|
||||||
|
*/
|
||||||
|
leftIcon?: string;
|
||||||
|
/**
|
||||||
|
* Added to the right icon app bar element.
|
||||||
|
*/
|
||||||
|
rightIcon?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface AppBarProps extends __ReactToolbox.Props {
|
interface AppBarProps extends __ReactToolbox.Props {
|
||||||
|
@ -30,6 +42,26 @@ interface AppBarProps extends __ReactToolbox.Props {
|
||||||
* @default false
|
* @default false
|
||||||
*/
|
*/
|
||||||
flat?: boolean;
|
flat?: boolean;
|
||||||
|
/**
|
||||||
|
* If it exists it is used as the AppBar title
|
||||||
|
*/
|
||||||
|
title?: string;
|
||||||
|
/**
|
||||||
|
* If it exists it is used as the AppBar left icon
|
||||||
|
*/
|
||||||
|
leftIcon?: string;
|
||||||
|
/**
|
||||||
|
* Called when the left icon is clicked
|
||||||
|
*/
|
||||||
|
onLeftIconClick?: Function;
|
||||||
|
/**
|
||||||
|
* If it exists it is used as the AppBar right icon
|
||||||
|
*/
|
||||||
|
rightIcon?: string;
|
||||||
|
/**
|
||||||
|
* Called when the righticon is clicked
|
||||||
|
*/
|
||||||
|
onRightIconClick?: Function;
|
||||||
/**
|
/**
|
||||||
* Classnames object defining the component style.
|
* Classnames object defining the component style.
|
||||||
*/
|
*/
|
||||||
|
|
|
@ -15,19 +15,28 @@ const AppBarTest = () => (
|
||||||
|
|
||||||
If you want to provide a theme via context, the component key is `RTAppBar`.
|
If you want to provide a theme via context, the component key is `RTAppBar`.
|
||||||
|
|
||||||
|
The `AppBar` component provides properties for the common use cases of `title`, `leftIcon` and `rightIcon`. However, you can also override these with your own content by not specifying these and instead provide children elements, as shown in the example.
|
||||||
|
|
||||||
## Properties
|
## Properties
|
||||||
|
|
||||||
| Name | Type | Default | Description|
|
| Name | Type | Default | Description|
|
||||||
|:-----|:-----|:-----|:-----|
|
|:-----|:-----|:-----|:-----|
|
||||||
| `className` | `String` | `''` | Set a class for the root component.|
|
| `className` | `String` | `''` | Set a class for the root component.|
|
||||||
| `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 shows a shadow.|
|
| `flat` | `Bool` | `false` | If true, the AppBar shows a shadow.|
|
||||||
| `theme` | `Object` | `null` | Classnames object defining the component style.|
|
| `theme` | `Object` | `null` | Classnames object defining the component style.|
|
||||||
|
| `title` | `String` | `null` | Title used for the appbar.|
|
||||||
|
| `leftIcon` | `String` | `null` | Left icon.|
|
||||||
|
| `onLeftIconClick` | `Function` | `null` | Called on left icon click event.|
|
||||||
|
| `rightIcon` | `String` | `null` | Right icon.|
|
||||||
|
| `onRightIconClick` | `Function` | `null` | Called on right icon click event.|
|
||||||
|
|
||||||
## Theme
|
## Theme
|
||||||
|
|
||||||
| Name | Description|
|
| Name | Description|
|
||||||
|:---------|:-----------|
|
|:------------|:-----------|
|
||||||
| `appBar` | Used for the component root element.|
|
| `appBar` | Used for the component root element.|
|
||||||
| `fixed` | Added to the root element when the app bar is fixed.|
|
| `fixed` | Added to the root element when the app bar is fixed.|
|
||||||
| `flat` | Added to the root element when the app bar is flat.|
|
| `title` | Added to the title element of the app bar.|
|
||||||
|
| `leftIcon` | Added to the left icon element when the app bar.|
|
||||||
|
| `rightIcon` | Added to the right icon element when the app bar.|
|
||||||
|
|
|
@ -35,4 +35,25 @@
|
||||||
a {
|
a {
|
||||||
color: $appbar-contrast;
|
color: $appbar-contrast;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
flex-grow: 1;
|
||||||
|
font-size: 1.8 * $unit;
|
||||||
|
font-weight: bold;
|
||||||
|
> small {
|
||||||
|
font-size: 1.8 * $unit;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.leftIcon {
|
||||||
|
padding: 1.2 * $unit 1.2 * $unit 1.2 * $unit 0;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rightIcon {
|
||||||
|
padding: 1.2 * $unit 0 1.2 * $unit 1.2 * $unit;
|
||||||
|
margin-left: auto;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,20 @@
|
||||||
|
import React from 'react';
|
||||||
|
import AppBar from '../../components/app_bar';
|
||||||
|
|
||||||
|
const AppBarTest = () => (
|
||||||
|
<section>
|
||||||
|
<h5>AppBar</h5>
|
||||||
|
<br/>
|
||||||
|
<AppBar title='Title' />
|
||||||
|
<br/>
|
||||||
|
<AppBar leftIcon='menu' title='Title' />
|
||||||
|
<br/>
|
||||||
|
<AppBar leftIcon='arrow_back' title='Title' rightIcon='close' />
|
||||||
|
<br/>
|
||||||
|
<AppBar>
|
||||||
|
Custom content
|
||||||
|
</AppBar>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
|
||||||
|
export default AppBarTest;
|
|
@ -75,17 +75,13 @@ class LayoutTest extends React.Component {
|
||||||
<div style={{ width: '100%', height: '60rem', margin: '1.8rem 0' }}>
|
<div style={{ width: '100%', height: '60rem', margin: '1.8rem 0' }}>
|
||||||
<Layout>
|
<Layout>
|
||||||
<NavDrawer active={this.state.drawerOpen} pinned={this.state.drawerPinned} permanentAt={this.state.permanentAt} onOverlayClick={this.toggleDrawer}>
|
<NavDrawer active={this.state.drawerOpen} pinned={this.state.drawerPinned} permanentAt={this.state.permanentAt} onOverlayClick={this.toggleDrawer}>
|
||||||
<AppBar>
|
<AppBar title='Drawer'/>
|
||||||
<h5>Drawer</h5>
|
|
||||||
</AppBar>
|
|
||||||
<ul style={{ listStyle: 'none', overflowY: 'auto', flex: 1, padding: '1.6rem' }}>
|
<ul style={{ listStyle: 'none', overflowY: 'auto', flex: 1, padding: '1.6rem' }}>
|
||||||
{drawerItems}
|
{drawerItems}
|
||||||
</ul>
|
</ul>
|
||||||
</NavDrawer>
|
</NavDrawer>
|
||||||
<Panel>
|
<Panel>
|
||||||
<AppBar>
|
<AppBar leftIcon='menu' onLeftIconClick={this.toggleDrawer}/>
|
||||||
<IconButton icon='menu' inverse onClick={this.toggleDrawer}/>
|
|
||||||
</AppBar>
|
|
||||||
<div style={{ flex: 1, overflowY: 'auto' }}>
|
<div style={{ flex: 1, overflowY: 'auto' }}>
|
||||||
<div style={{ display: 'flex', flexDirection: 'row' }}>
|
<div style={{ display: 'flex', flexDirection: 'row' }}>
|
||||||
<section style={{ margin: '1.8rem'}}>
|
<section style={{ margin: '1.8rem'}}>
|
||||||
|
|
26
spec/root.js
26
spec/root.js
|
@ -3,6 +3,7 @@ import '../components/commons.scss';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import AppBar from '../components/app_bar';
|
import AppBar from '../components/app_bar';
|
||||||
import Autocomplete from './components/autocomplete';
|
import Autocomplete from './components/autocomplete';
|
||||||
|
import AppBarTest from './components/app_bar';
|
||||||
import Avatar from './components/avatar';
|
import Avatar from './components/avatar';
|
||||||
import FontIcon from './components/font_icon';
|
import FontIcon from './components/font_icon';
|
||||||
import Button from './components/button';
|
import Button from './components/button';
|
||||||
|
@ -29,19 +30,24 @@ import Tabs from './components/tabs';
|
||||||
import Tooltip from './components/tooltip';
|
import Tooltip from './components/tooltip';
|
||||||
import style from './style';
|
import style from './style';
|
||||||
|
|
||||||
|
const RootAppBar = () => (
|
||||||
|
<AppBar className={style.appbar} fixed flat>
|
||||||
|
<h1>React Toolbox <small>Spec {VERSION}</small></h1>
|
||||||
|
<ButtonToolbox
|
||||||
|
accent
|
||||||
|
className={style.github}
|
||||||
|
icon='web'
|
||||||
|
floating
|
||||||
|
onClick={() => {window.href = 'http://react-toolbox';}}
|
||||||
|
/>
|
||||||
|
</AppBar>
|
||||||
|
);
|
||||||
|
|
||||||
const Root = () => (
|
const Root = () => (
|
||||||
<div className={style.app}>
|
<div className={style.app}>
|
||||||
<AppBar className={style.appbar} fixed flat>
|
<RootAppBar />
|
||||||
<h1>React Toolbox <small>Spec {VERSION}</small></h1>
|
|
||||||
<ButtonToolbox
|
|
||||||
accent
|
|
||||||
className={style.github}
|
|
||||||
icon='web'
|
|
||||||
floating
|
|
||||||
onClick={() => {window.href = 'http://react-toolbox';}}
|
|
||||||
/>
|
|
||||||
</AppBar>
|
|
||||||
<Autocomplete />
|
<Autocomplete />
|
||||||
|
<AppBarTest />
|
||||||
<Avatar />
|
<Avatar />
|
||||||
<FontIcon />
|
<FontIcon />
|
||||||
<Button />
|
<Button />
|
||||||
|
|
Loading…
Reference in New Issue