import * as _ from 'lodash'; import * as React from 'react'; import { Link } from 'react-router-dom'; 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.bind(_), className: '', }; public constructor(props: MenuItemProps) { super(props); this.state = { isHovering: false, }; } public render(): React.ReactNode { const menuItemStyles = { cursor: 'pointer', opacity: this.state.isHovering ? 0.5 : 1, }; return (
{this.props.children}
); } private _onToggleHover(isHovering: boolean): void { this.setState({ isHovering, }); } }