Better AppHeader component. WIP.
This commit is contained in:
17
src/components/UI/AppHeader/AppHeader.css
Normal file
17
src/components/UI/AppHeader/AppHeader.css
Normal file
@ -0,0 +1,17 @@
|
||||
:root {
|
||||
--foregroundColor: #fff;
|
||||
--backgroundColor: #272e30;
|
||||
--textFieldBorderColor: #e7e7e7;
|
||||
--highlightFGColor: #fff;
|
||||
--highlightBGColor: #3ab7a5;
|
||||
}
|
||||
|
||||
.appBar {
|
||||
background-color: var(--backgroundColor);
|
||||
}
|
||||
|
||||
.createBtn {
|
||||
position: fixed;
|
||||
right: 2rem;
|
||||
top: 3.5rem;
|
||||
}
|
83
src/components/UI/AppHeader/AppHeader.js
Normal file
83
src/components/UI/AppHeader/AppHeader.js
Normal file
@ -0,0 +1,83 @@
|
||||
import React from 'react';
|
||||
import pluralize from 'pluralize';
|
||||
import { IndexLink } from 'react-router';
|
||||
import { Menu, MenuItem, Button } from 'react-toolbox';
|
||||
import AppBar from 'react-toolbox/lib/app_bar';
|
||||
import FindBar from '../../../containers/FindBar';
|
||||
import styles from './AppHeader.css';
|
||||
|
||||
export default class AppHeader extends React.Component {
|
||||
|
||||
// props: {
|
||||
// // collections: React.,
|
||||
// // commands,
|
||||
// // defaultCommands
|
||||
// }
|
||||
|
||||
state = {
|
||||
createMenuActive: false
|
||||
}
|
||||
|
||||
handleCreatePostClick = collectionName => {
|
||||
const { onCreateEntryClick } = this.props;
|
||||
if (onCreateEntryClick) {
|
||||
onCreateEntryClick(collectionName);
|
||||
}
|
||||
}
|
||||
|
||||
onCreateButtonClick = () => {
|
||||
this.setState({
|
||||
createMenuActive: true
|
||||
});
|
||||
}
|
||||
|
||||
onCreateMenuHide = () => {
|
||||
this.setState({
|
||||
createMenuActive: false
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
const { collections, commands, defaultCommands } = this.props;
|
||||
const { createMenuActive } = this.state;
|
||||
|
||||
return (
|
||||
<AppBar
|
||||
fixed
|
||||
theme={styles}
|
||||
>
|
||||
<IndexLink to="/">
|
||||
Dashboard
|
||||
</IndexLink>
|
||||
<FindBar
|
||||
commands={commands}
|
||||
defaultCommands={defaultCommands}
|
||||
/>
|
||||
<Button
|
||||
className={styles.createBtn}
|
||||
icon='add'
|
||||
floating
|
||||
accent
|
||||
onClick={this.onCreateButtonClick}
|
||||
>
|
||||
<Menu
|
||||
active={createMenuActive}
|
||||
position="topRight"
|
||||
onHide={this.onCreateMenuHide}
|
||||
>
|
||||
{
|
||||
collections.map(collection =>
|
||||
<MenuItem
|
||||
key={collection.get('name')}
|
||||
value={collection.get('name')}
|
||||
onClick={this.handleCreatePostClick.bind(this, collection.get('name'))}
|
||||
caption={pluralize(collection.get('label'), 1)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
</Menu>
|
||||
</Button>
|
||||
</AppBar>
|
||||
);
|
||||
}
|
||||
}
|
@ -2,3 +2,4 @@ export { default as Card } from './card/Card';
|
||||
export { default as Loader } from './loader/Loader';
|
||||
export { default as Icon } from './icon/Icon';
|
||||
export { default as Toast } from './toast/Toast';
|
||||
export { default as AppHeader } from './AppHeader/AppHeader';
|
||||
|
Reference in New Issue
Block a user