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
Alex Cornejo
parent
0bd7eb8cb0
commit
d4c0c4d8ba
|
|
@ -2,16 +2,29 @@ import React, { PropTypes } from 'react';
|
|||
import classnames from 'classnames';
|
||||
import { themr } from 'react-css-themr';
|
||||
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, {
|
||||
[theme.fixed]: props.fixed,
|
||||
[theme.flat]: props.flat
|
||||
}, props.className);
|
||||
const { leftIcon, onLeftIconClick, rightIcon, onRightIconClick } = props;
|
||||
|
||||
return (
|
||||
<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}
|
||||
{rightIcon ? <FontIcon
|
||||
className={classnames(theme.rightIcon)}
|
||||
value={rightIcon}
|
||||
onClick={onRightIconClick}/> : null
|
||||
}
|
||||
</header>
|
||||
);
|
||||
};
|
||||
|
|
@ -21,11 +34,25 @@ AppBar.propTypes = {
|
|||
className: PropTypes.string,
|
||||
fixed: 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({
|
||||
appBar: PropTypes.string,
|
||||
leftIcon: PropTypes.string,
|
||||
rightIcon: PropTypes.string,
|
||||
fixed: PropTypes.string,
|
||||
flat: PropTypes.string
|
||||
})
|
||||
flat: PropTypes.string,
|
||||
title: PropTypes.string
|
||||
}),
|
||||
title: PropTypes.string
|
||||
};
|
||||
|
||||
AppBar.defaultProps = {
|
||||
|
|
|
|||
|
|
@ -13,6 +13,18 @@ export interface AppBarTheme {
|
|||
* Added to the root element when the app bar is flat.
|
||||
*/
|
||||
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 {
|
||||
|
|
@ -30,6 +42,26 @@ interface AppBarProps extends __ReactToolbox.Props {
|
|||
* @default false
|
||||
*/
|
||||
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.
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -15,19 +15,28 @@ const AppBarTest = () => (
|
|||
|
||||
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
|
||||
|
||||
| Name | Type | Default | Description|
|
||||
|:-----|:-----|:-----|:-----|
|
||||
| `className` | `String` | `''` | Set a class for the root component.|
|
||||
| `fixed` | `Bool` | `false` | Determine if the bar should have position `fixed` or `relative`.|
|
||||
| `flat` | `Bool` | `false` | If true, the AppBar shows a shadow.|
|
||||
| `theme` | `Object` | `null` | Classnames object defining the component style.|
|
||||
| `className` | `String` | `''` | Set a class for the root component.|
|
||||
| `fixed` | `Bool` | `false` | Determine if the bar should have position `fixed` or `relative`.|
|
||||
| `flat` | `Bool` | `false` | If true, the AppBar shows a shadow.|
|
||||
| `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
|
||||
|
||||
| Name | Description|
|
||||
|:---------|:-----------|
|
||||
| `appBar` | Used for the component root element.|
|
||||
| `fixed` | Added to the root element when the app bar is fixed.|
|
||||
| `flat` | Added to the root element when the app bar is flat.|
|
||||
| Name | Description|
|
||||
|:------------|:-----------|
|
||||
| `appBar` | Used for the component root element.|
|
||||
| `fixed` | Added to the root element when the app bar is fixed.|
|
||||
| `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 {
|
||||
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' }}>
|
||||
<Layout>
|
||||
<NavDrawer active={this.state.drawerOpen} pinned={this.state.drawerPinned} permanentAt={this.state.permanentAt} onOverlayClick={this.toggleDrawer}>
|
||||
<AppBar>
|
||||
<h5>Drawer</h5>
|
||||
</AppBar>
|
||||
<AppBar title='Drawer'/>
|
||||
<ul style={{ listStyle: 'none', overflowY: 'auto', flex: 1, padding: '1.6rem' }}>
|
||||
{drawerItems}
|
||||
</ul>
|
||||
</NavDrawer>
|
||||
<Panel>
|
||||
<AppBar>
|
||||
<IconButton icon='menu' inverse onClick={this.toggleDrawer}/>
|
||||
</AppBar>
|
||||
<AppBar leftIcon='menu' onLeftIconClick={this.toggleDrawer}/>
|
||||
<div style={{ flex: 1, overflowY: 'auto' }}>
|
||||
<div style={{ display: 'flex', flexDirection: 'row' }}>
|
||||
<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 AppBar from '../components/app_bar';
|
||||
import Autocomplete from './components/autocomplete';
|
||||
import AppBarTest from './components/app_bar';
|
||||
import Avatar from './components/avatar';
|
||||
import FontIcon from './components/font_icon';
|
||||
import Button from './components/button';
|
||||
|
|
@ -29,19 +30,24 @@ import Tabs from './components/tabs';
|
|||
import Tooltip from './components/tooltip';
|
||||
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 = () => (
|
||||
<div className={style.app}>
|
||||
<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>
|
||||
<RootAppBar />
|
||||
<Autocomplete />
|
||||
<AppBarTest />
|
||||
<Avatar />
|
||||
<FontIcon />
|
||||
<Button />
|
||||
|
|
|
|||
Loading…
Reference in New Issue