react-toolbox/components/navigation/Navigation.js

56 lines
1.6 KiB
JavaScript

import React, { PropTypes } from 'react';
import classnames from 'classnames';
import { themr } from 'react-css-themr';
import { NAVIGATION } from '../identifiers';
import InjectButton from '../button/Button';
import InjectLink from '../link/Link';
const factory = (Button, Link) => {
const Navigation = ({ actions, children, className, routes, theme, type }) => {
const _className = classnames(theme[type], className);
const buttons = actions.map((action, index) => (
<Button className={theme.button} key={index} {...action} /> // eslint-disable-line
));
const links = routes.map((route, index) => (
<Link className={theme.link} key={index} {...route} /> // eslint-disable-line
));
return (
<nav data-react-toolbox="navigation" className={_className}>
{links}
{buttons}
{children}
</nav>
);
};
Navigation.propTypes = {
actions: PropTypes.array, // eslint-disable-line
children: PropTypes.node,
className: PropTypes.string,
routes: PropTypes.array, // eslint-disable-line
theme: PropTypes.shape({
button: PropTypes.string,
horizontal: PropTypes.string,
link: PropTypes.string,
vertical: PropTypes.string,
}),
type: PropTypes.oneOf(['vertical', 'horizontal']),
};
Navigation.defaultProps = {
actions: [],
className: '',
type: 'horizontal',
routes: [],
};
return Navigation;
};
const Navigation = factory(InjectButton, InjectLink);
export default themr(NAVIGATION)(Navigation);
export { factory as navigationFactory };
export { Navigation };