diff options
author | fragosti <francesco.agosti93@gmail.com> | 2018-10-19 06:42:33 +0800 |
---|---|---|
committer | fragosti <francesco.agosti93@gmail.com> | 2018-10-19 06:42:33 +0800 |
commit | c87e68f833a2d8a87846d70a9d4a727b46323eea (patch) | |
tree | eb40dc12694baf607a373f427f32dbd9393ac72f /packages/website/ts/components/ui/custom_menu_item.tsx | |
parent | a764dfa789ba44e519371b4a1e4569db7f551fb7 (diff) | |
parent | 65d85ca5008fe0c307506b388d6ace858122f8ad (diff) | |
download | dexon-sol-tools-c87e68f833a2d8a87846d70a9d4a727b46323eea.tar dexon-sol-tools-c87e68f833a2d8a87846d70a9d4a727b46323eea.tar.gz dexon-sol-tools-c87e68f833a2d8a87846d70a9d4a727b46323eea.tar.bz2 dexon-sol-tools-c87e68f833a2d8a87846d70a9d4a727b46323eea.tar.lz dexon-sol-tools-c87e68f833a2d8a87846d70a9d4a727b46323eea.tar.xz dexon-sol-tools-c87e68f833a2d8a87846d70a9d4a727b46323eea.tar.zst dexon-sol-tools-c87e68f833a2d8a87846d70a9d4a727b46323eea.zip |
Merge branch 'development' of https://github.com/0xProject/0x-monorepo into feature/instant/beta-render-et-al
Diffstat (limited to 'packages/website/ts/components/ui/custom_menu_item.tsx')
-rw-r--r-- | packages/website/ts/components/ui/custom_menu_item.tsx | 50 |
1 files changed, 50 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..87ce32126 --- /dev/null +++ b/packages/website/ts/components/ui/custom_menu_item.tsx @@ -0,0 +1,50 @@ +import { Link } from '@0x/react-shared'; +import * as _ from 'lodash'; +import * as React from 'react'; + +interface CustomMenuItemProps { + to: string; + 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}> + <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, + }); + } +} |