52 lines
1.4 KiB
TypeScript
52 lines
1.4 KiB
TypeScript
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<MenuItemProps, MenuItemState> {
|
|
public static defaultProps: Partial<MenuItemProps> = {
|
|
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 (
|
|
<Link to={this.props.to} style={{ textDecoration: 'none', ...this.props.style }}>
|
|
<div
|
|
onClick={this.props.onClick.bind(this)}
|
|
className={`mx-auto ${this.props.className}`}
|
|
style={menuItemStyles}
|
|
onMouseEnter={this._onToggleHover.bind(this, true)}
|
|
onMouseLeave={this._onToggleHover.bind(this, false)}
|
|
>
|
|
{this.props.children}
|
|
</div>
|
|
</Link>
|
|
);
|
|
}
|
|
private _onToggleHover(isHovering: boolean) {
|
|
this.setState({
|
|
isHovering,
|
|
});
|
|
}
|
|
}
|