Autoinject style for AppBar
parent
d5834e0372
commit
f10748e4a4
|
@ -1,6 +1,7 @@
|
|||
import React from 'react';
|
||||
import React, { PropTypes } from 'react';
|
||||
import classnames from 'classnames';
|
||||
import { themr } from 'react-css-themr';
|
||||
import { APP_BAR } from '../identifiers.js';
|
||||
|
||||
const AppBar = ({ theme, ...props }) => {
|
||||
const className = classnames(theme.appBar, {
|
||||
|
@ -16,14 +17,14 @@ const AppBar = ({ theme, ...props }) => {
|
|||
};
|
||||
|
||||
AppBar.propTypes = {
|
||||
children: React.PropTypes.node,
|
||||
className: React.PropTypes.string,
|
||||
fixed: 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
|
||||
children: PropTypes.node,
|
||||
className: PropTypes.string,
|
||||
fixed: PropTypes.bool,
|
||||
flat: PropTypes.bool,
|
||||
theme: PropTypes.shape({
|
||||
appBar: PropTypes.string,
|
||||
fixed: PropTypes.string,
|
||||
flat: PropTypes.string
|
||||
})
|
||||
};
|
||||
|
||||
|
@ -33,4 +34,5 @@ AppBar.defaultProps = {
|
|||
flat: false
|
||||
};
|
||||
|
||||
export default themr('ToolboxAppBar')(AppBar);
|
||||
export default themr(APP_BAR)(AppBar);
|
||||
export { AppBar };
|
||||
|
|
|
@ -1 +1,9 @@
|
|||
export default from './AppBar';
|
||||
import { themr } from 'react-css-themr';
|
||||
import { AppBar } from './AppBar.js';
|
||||
import { APP_BAR } from '../identifiers.js';
|
||||
import theme from './theme.scss';
|
||||
|
||||
const ThemedAppBar = themr(APP_BAR, theme)(AppBar);
|
||||
|
||||
export default ThemedAppBar;
|
||||
export { ThemedAppBar as AppBar };
|
||||
|
|
|
@ -4,16 +4,17 @@ 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/theme';
|
||||
|
||||
const AppBarTest = () => (
|
||||
<AppBar theme={theme} fixed flat>
|
||||
<AppBar fixed flat>
|
||||
<a href="/home">React Toolbox Docs</a>
|
||||
<Navigation />
|
||||
</AppBar>
|
||||
);
|
||||
```
|
||||
|
||||
If you want to provide a theme via context, the component key is `RTAppBar`.
|
||||
|
||||
## Properties
|
||||
|
||||
| Name | Type | Default | Description|
|
||||
|
@ -23,12 +24,10 @@ const AppBarTest = () => (
|
|||
| `flat` | `Bool` | `false` | If true, the AppBar shows a shadow.|
|
||||
| `theme` | `Object` | `null` | Classnames object defining the component style.|
|
||||
|
||||
## Theming
|
||||
|
||||
You can take a look to the `_config.scss` variables. The themed key for this component is `ToolboxAppBar`, it should implement the following interface:
|
||||
## Theme
|
||||
|
||||
| Name | Description|
|
||||
|:---------|:-----------|
|
||||
| `appBar` | Root class.|
|
||||
| `fixed` | Implemented when the app bar is fixed.|
|
||||
| `flat` | Implemented when the app bar is flat.|
|
||||
| `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.|
|
||||
|
|
|
@ -1,2 +1,3 @@
|
|||
export const APP_BAR = 'RTAppBar';
|
||||
export const BUTTON = 'RTButton';
|
||||
export const RIPPLE = 'RTRipple';
|
||||
|
|
|
@ -1,6 +1,5 @@
|
|||
import '../components/commons.scss';
|
||||
|
||||
import ToolboxAppBar from '../components/app_bar/theme.scss';
|
||||
import ToolboxAutocomplete from '../components/autocomplete/theme.scss';
|
||||
import ToolboxAvatar from '../components/avatar/theme.scss';
|
||||
import ToolboxCard from '../components/card/theme.scss';
|
||||
|
@ -28,7 +27,6 @@ import ToolboxTimePicker from '../components/time_picker/theme.scss';
|
|||
import ToolboxTooltip from '../components/tooltip/theme.scss';
|
||||
|
||||
export default {
|
||||
ToolboxAppBar,
|
||||
ToolboxAutocomplete,
|
||||
ToolboxAvatar,
|
||||
ToolboxCard,
|
||||
|
|
Loading…
Reference in New Issue