packages/website/ts/components/ui/custom_menu_item.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

import * as _ from 'lodash';
import * as React from 'react';
import { Link } from 'ts/components/ui/link';

interface CustomMenuItemProps {
    to: string;
    style?: React.CSSProperties;
    onClick?: () => void;
    className?: string;
}

interface CustomMenuItemState {
    isHovering: boolean;
}

export class CustomMenuItem extends React.Component<CustomMenuItemProps, CustomMenuItemState> {
    public static defaultProps: Partial<CustomMenuItemProps> = {
        onClick: _.noop.bind(_),
        className: '',
    };
    public constructor(props: CustomMenuItemProps) {
        super(props);
        this.state = {
            isHovering: false,
        };
    }
    public render(): React.ReactNode {
        const menuItemStyles = {
            cursor: 'pointer',
            opacity: this.state.isHovering ? 0.5 : 1,
        };
        return (
            <Link to={this.props.to} style={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): void {
        this.setState({
            isHovering,
        });
    }
}