import React from 'react';
import PropTypes from 'prop-types';
class DropdownList extends React.Component {
render() {
return (
<li className="dropdown">
<a
className="dropdown-toggle"
data-toggle="dropdown"
aria-expanded="false"
>
{this.props.icon && !this.props.iconRight ? (<i className={`fa ${this.props.icon}`} />) : ''}
{this.props.headline && this.props.icon && !this.props.iconRight ? ' ' : ''}
{this.props.headline}
{this.props.headline && this.props.icon && this.props.iconRight ? ' ' : ''}
{this.props.icon && this.props.iconRight ? (<i className={`fa ${this.props.icon}`} />) : ''}
</a>
<ul className="dropdown-menu">
{this.props.dropHeader ? <li className="header">{this.props.dropHeader}</li> : ''}
{this.props.dropContent}
{this.props.children}
{this.props.dropFooter ? <li className="footer">{this.props.dropFooter}</li> : ''}
</ul>
</li>
);
}
}
DropdownList.propTypes = {
headline: PropTypes.oneOfType([
PropTypes.element,
PropTypes.string
]),
icon: PropTypes.string,
iconRight: PropTypes.bool,
dropHeader: PropTypes.oneOfType([
PropTypes.element,
PropTypes.array,
PropTypes.string
]),
dropFooter: PropTypes.oneOfType([
PropTypes.element,
PropTypes.array,
PropTypes.string
]),
dropContent: PropTypes.oneOfType([
PropTypes.element,
PropTypes.array
])
};
DropdownList.defaultProps = {
headline: '',
icon: '',
iconRight: false,
dropContent: []
};
export default DropdownList;
|