Add themr to AppBar
parent
33ff49119b
commit
c7f8d8357a
|
@ -1,11 +1,11 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import ClassNames from 'classnames';
|
import { themr } from 'react-css-themr';
|
||||||
import style from './style';
|
import classnames from 'classnames';
|
||||||
|
|
||||||
const AppBar = (props) => {
|
const AppBar = ({ theme, ...props }) => {
|
||||||
const className = ClassNames(style.root, {
|
const className = classnames(theme.appBar, {
|
||||||
[style.fixed]: props.fixed,
|
[theme.fixed]: props.fixed,
|
||||||
[style.flat]: props.flat
|
[theme.flat]: props.flat
|
||||||
}, props.className);
|
}, props.className);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -19,7 +19,12 @@ AppBar.propTypes = {
|
||||||
children: React.PropTypes.node,
|
children: React.PropTypes.node,
|
||||||
className: React.PropTypes.string,
|
className: React.PropTypes.string,
|
||||||
fixed: React.PropTypes.bool,
|
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 = {
|
AppBar.defaultProps = {
|
||||||
|
@ -28,4 +33,4 @@ AppBar.defaultProps = {
|
||||||
flat: false
|
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
|
```jsx
|
||||||
import AppBar from 'react-toolbox/lib/app_bar';
|
import AppBar from 'react-toolbox/lib/app_bar';
|
||||||
|
import theme from 'react-toolbox/lib/app_bar/style';
|
||||||
|
|
||||||
const AppBarTest = () => (
|
const AppBarTest = () => (
|
||||||
<AppBar fixed flat>
|
<AppBar theme={theme} fixed flat>
|
||||||
<a href="/home">React Toolbox Docs</a>
|
<a href="/home">React Toolbox Docs</a>
|
||||||
<Navigation />
|
<Navigation />
|
||||||
</AppBar>
|
</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
|
## Properties
|
||||||
|
|
||||||
| Name | Type | Default | Description|
|
| 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.|
|
| `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 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 "../base";
|
||||||
@import "./config";
|
@import "./config";
|
||||||
|
|
||||||
.root {
|
.appBar {
|
||||||
display: flex;
|
display: flex;
|
||||||
height: $appbar-height;
|
height: $appbar-height;
|
||||||
align-items: center;
|
align-items: center;
|
|
@ -36,7 +36,8 @@
|
||||||
"toolkit"
|
"toolkit"
|
||||||
],
|
],
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"classnames": "^2.2.5"
|
"classnames": "^2.2.5",
|
||||||
|
"react-css-themr": "^1.0.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"autoprefixer": "^6.3.6",
|
"autoprefixer": "^6.3.6",
|
||||||
|
|
13
spec/root.js
13
spec/root.js
|
@ -1,5 +1,8 @@
|
||||||
/* global VERSION */
|
/* global VERSION */
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import { ThemeProvider } from 'react-css-themr';
|
||||||
|
import theme from './theme';
|
||||||
|
|
||||||
import AppBarToolbox from '../components/app_bar';
|
import AppBarToolbox from '../components/app_bar';
|
||||||
import Avatar from './components/avatar';
|
import Avatar from './components/avatar';
|
||||||
import ButtonToolbox from '../components/button';
|
import ButtonToolbox from '../components/button';
|
||||||
|
@ -27,20 +30,17 @@ import Tabs from './components/tabs';
|
||||||
import Tooltip from './components/tooltip';
|
import Tooltip from './components/tooltip';
|
||||||
import style from './style';
|
import style from './style';
|
||||||
|
|
||||||
const _hrefProject = () => {
|
|
||||||
window.href = 'http://react-toolbox';
|
|
||||||
};
|
|
||||||
|
|
||||||
const Root = () => (
|
const Root = () => (
|
||||||
|
<ThemeProvider theme={theme}>
|
||||||
<div className={style.app}>
|
<div className={style.app}>
|
||||||
<AppBarToolbox fixed flat className={style.appbar}>
|
<AppBarToolbox className={style.appbar} fixed flat>
|
||||||
<h1>React Toolbox <small>Spec {VERSION}</small></h1>
|
<h1>React Toolbox <small>Spec {VERSION}</small></h1>
|
||||||
<ButtonToolbox
|
<ButtonToolbox
|
||||||
accent
|
accent
|
||||||
className={style.github}
|
className={style.github}
|
||||||
icon='web'
|
icon='web'
|
||||||
floating
|
floating
|
||||||
onClick={_hrefProject}
|
onClick={() => {window.href = 'http://react-toolbox';}}
|
||||||
/>
|
/>
|
||||||
</AppBarToolbox>
|
</AppBarToolbox>
|
||||||
|
|
||||||
|
@ -68,6 +68,7 @@ const Root = () => (
|
||||||
<Tabs />
|
<Tabs />
|
||||||
<Tooltip />
|
<Tooltip />
|
||||||
</div>
|
</div>
|
||||||
|
</ThemeProvider>
|
||||||
);
|
);
|
||||||
|
|
||||||
export default Root;
|
export default Root;
|
||||||
|
|
|
@ -0,0 +1,3 @@
|
||||||
|
import ToolboxAppBar from '../components/app_bar/theme.scss';
|
||||||
|
|
||||||
|
export default { ToolboxAppBar };
|
|
@ -25,7 +25,7 @@ module.exports = {
|
||||||
{
|
{
|
||||||
test: /\.js$/,
|
test: /\.js$/,
|
||||||
loader: 'babel',
|
loader: 'babel',
|
||||||
exclude: /(node_modules)/
|
exclude: [/(node_modules)/, /react-css-themr/]
|
||||||
}, {
|
}, {
|
||||||
test: /\.(scss|css)$/,
|
test: /\.(scss|css)$/,
|
||||||
loader: ExtractTextPlugin.extract('style', 'css?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass?sourceMap')
|
loader: ExtractTextPlugin.extract('style', 'css?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass?sourceMap')
|
||||||
|
|
Loading…
Reference in New Issue