Add themr to AppBar

old
Javi Velasco 2016-05-15 13:23:55 +02:00
parent 33ff49119b
commit c7f8d8357a
8 changed files with 73 additions and 55 deletions

View File

@ -16,4 +16,4 @@
]
}
}
}
}

View File

@ -1,11 +1,11 @@
import React from 'react';
import ClassNames from 'classnames';
import style from './style';
import { themr } from 'react-css-themr';
import classnames from 'classnames';
const AppBar = (props) => {
const className = ClassNames(style.root, {
[style.fixed]: props.fixed,
[style.flat]: props.flat
const AppBar = ({ theme, ...props }) => {
const className = classnames(theme.appBar, {
[theme.fixed]: props.fixed,
[theme.flat]: props.flat
}, props.className);
return (
@ -19,7 +19,12 @@ AppBar.propTypes = {
children: React.PropTypes.node,
className: React.PropTypes.string,
fixed: React.PropTypes.bool,
flat: React.PropTypes.bool
flat: React.PropTypes.bool,
theme: React.PropTypes.shape({
appBar: React.PropTypes.string.isRequired,
fixed: React.PropTypes.string.isRequired,
flat: React.PropTypes.string.isRequired
})
};
AppBar.defaultProps = {
@ -28,4 +33,4 @@ AppBar.defaultProps = {
flat: false
};
export default AppBar;
export default themr('ToolboxAppBar')(AppBar);

View File

@ -4,17 +4,16 @@ The app bar is a special kind of toolbar thats used for branding, navigation,
```jsx
import AppBar from 'react-toolbox/lib/app_bar';
import theme from 'react-toolbox/lib/app_bar/style';
const AppBarTest = () => (
<AppBar fixed flat>
<AppBar theme={theme} fixed flat>
<a href="/home">React Toolbox Docs</a>
<Navigation />
</AppBar>
);
```
Coming soon, the `AppBar` component will support arbitrary content attributes for left and right content and a title, for now it's just a wrapper.
## Properties
| Name | Type | Default | Description|
@ -22,3 +21,12 @@ Coming soon, the `AppBar` component will support arbitrary content attributes fo
| `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.|
## Theme interface
| Name | Description|
|:---------|:-----------|
| `appBar` | Root class.|
| `fixed` | Implemented when the app bar is fixed.|
| `flat` | Implemented when the app bar is flat.|

View File

@ -1,7 +1,7 @@
@import "../base";
@import "./config";
.root {
.appBar {
display: flex;
height: $appbar-height;
align-items: center;

View File

@ -36,7 +36,8 @@
"toolkit"
],
"dependencies": {
"classnames": "^2.2.5"
"classnames": "^2.2.5",
"react-css-themr": "^1.0.0"
},
"devDependencies": {
"autoprefixer": "^6.3.6",

View File

@ -1,5 +1,8 @@
/* global VERSION */
import React from 'react';
import { ThemeProvider } from 'react-css-themr';
import theme from './theme';
import AppBarToolbox from '../components/app_bar';
import Avatar from './components/avatar';
import ButtonToolbox from '../components/button';
@ -27,47 +30,45 @@ import Tabs from './components/tabs';
import Tooltip from './components/tooltip';
import style from './style';
const _hrefProject = () => {
window.href = 'http://react-toolbox';
};
const Root = () => (
<div className={style.app}>
<AppBarToolbox fixed flat className={style.appbar}>
<h1>React Toolbox <small>Spec {VERSION}</small></h1>
<ButtonToolbox
accent
className={style.github}
icon='web'
floating
onClick={_hrefProject}
/>
</AppBarToolbox>
<ThemeProvider theme={theme}>
<div className={style.app}>
<AppBarToolbox 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';}}
/>
</AppBarToolbox>
<Autocomplete />
<Avatar />
<Button />
<Card />
<Checkbox />
<Chip />
<Dialog />
<Drawer />
<Dropdown />
<IconMenu />
<Input />
<Layout />
<List />
<Menu />
<Pickers />
<Progress />
<Radio />
<Slider />
<Snackbar />
<Switch />
<Table />
<Tabs />
<Tooltip />
</div>
<Autocomplete />
<Avatar />
<Button />
<Card />
<Checkbox />
<Chip />
<Dialog />
<Drawer />
<Dropdown />
<IconMenu />
<Input />
<Layout />
<List />
<Menu />
<Pickers />
<Progress />
<Radio />
<Slider />
<Snackbar />
<Switch />
<Table />
<Tabs />
<Tooltip />
</div>
</ThemeProvider>
);
export default Root;

3
spec/theme.js Normal file
View File

@ -0,0 +1,3 @@
import ToolboxAppBar from '../components/app_bar/theme.scss';
export default { ToolboxAppBar };

View File

@ -6,7 +6,7 @@ const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
context: __dirname,
devtool: 'inline-source-map',
devtool: 'inline-source-map',
entry: [
'webpack-hot-middleware/client',
'./spec/index.js'
@ -25,7 +25,7 @@ module.exports = {
{
test: /\.js$/,
loader: 'babel',
exclude: /(node_modules)/
exclude: [/(node_modules)/, /react-css-themr/]
}, {
test: /\.(scss|css)$/,
loader: ExtractTextPlugin.extract('style', 'css?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass?sourceMap')