Add themr to AppBar
parent
33ff49119b
commit
c7f8d8357a
|
@ -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);
|
||||
|
|
|
@ -4,17 +4,16 @@ The app bar is a special kind of toolbar that’s 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.|
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
@import "../base";
|
||||
@import "./config";
|
||||
|
||||
.root {
|
||||
.appBar {
|
||||
display: flex;
|
||||
height: $appbar-height;
|
||||
align-items: center;
|
|
@ -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",
|
||||
|
|
79
spec/root.js
79
spec/root.js
|
@ -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;
|
||||
|
|
|
@ -0,0 +1,3 @@
|
|||
import ToolboxAppBar from '../components/app_bar/theme.scss';
|
||||
|
||||
export default { ToolboxAppBar };
|
|
@ -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')
|
||||
|
|
Loading…
Reference in New Issue