import * as _ from 'lodash'; import {colors} from 'material-ui/styles'; import * as React from 'react'; import {Link} from 'react-router-dom'; import {Styles} from 'ts/types'; import {constants} from 'ts/utils/constants'; interface MenuItemProps { to: string; style?: React.CSSProperties; onClick?: () => void; className?: string; } interface MenuItemState { isHovering: boolean; } export class MenuItem extends React.Component { public static defaultProps: Partial = { onClick: _.noop, className: '', }; public constructor(props: MenuItemProps) { super(props); this.state = { isHovering: false, }; } public render() { const menuItemStyles = { cursor: 'pointer', opacity: this.state.isHovering ? 0.5 : 1, }; return (
{this.props.children}
); } private onToggleHover(isHovering: boolean) { this.setState({ isHovering, }); } }