diff options
author | Fabio Berger <me@fabioberger.com> | 2018-10-03 03:10:59 +0800 |
---|---|---|
committer | Fabio Berger <me@fabioberger.com> | 2018-10-03 03:10:59 +0800 |
commit | c07412a992284b2f3045be1c620ea2e0a351139a (patch) | |
tree | 5d1baea6ae5c1bb70b4bf61a28bd131026098f8f /packages/website/ts/components/ui/custom_menu_item.tsx | |
parent | 0c996803969e7ff3f62c023651f64468b3f76bd3 (diff) | |
download | dexon-sol-tools-c07412a992284b2f3045be1c620ea2e0a351139a.tar dexon-sol-tools-c07412a992284b2f3045be1c620ea2e0a351139a.tar.gz dexon-sol-tools-c07412a992284b2f3045be1c620ea2e0a351139a.tar.bz2 dexon-sol-tools-c07412a992284b2f3045be1c620ea2e0a351139a.tar.lz dexon-sol-tools-c07412a992284b2f3045be1c620ea2e0a351139a.tar.xz dexon-sol-tools-c07412a992284b2f3045be1c620ea2e0a351139a.tar.zst dexon-sol-tools-c07412a992284b2f3045be1c620ea2e0a351139a.zip |
Use new Link UI component everywhere, and add complementary ALink type
Diffstat (limited to 'packages/website/ts/components/ui/custom_menu_item.tsx')
-rw-r--r-- | packages/website/ts/components/ui/custom_menu_item.tsx | 51 |
1 files changed, 51 insertions, 0 deletions
diff --git a/packages/website/ts/components/ui/custom_menu_item.tsx b/packages/website/ts/components/ui/custom_menu_item.tsx new file mode 100644 index 000000000..c51095709 --- /dev/null +++ b/packages/website/ts/components/ui/custom_menu_item.tsx @@ -0,0 +1,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, + }); + } +} |