diff options
author | Brandon Millman <brandon.millman@gmail.com> | 2018-05-22 07:35:49 +0800 |
---|---|---|
committer | Brandon Millman <brandon.millman@gmail.com> | 2018-05-22 12:25:42 +0800 |
commit | 26370da13d7bed06d59efeba0a4921387b874e06 (patch) | |
tree | bc99e7a69e0e7ee22e10d47e27beaa1d270cf950 /packages/website/ts/components/ui/icon_button.tsx | |
parent | d460c0e8b9c6f4081803fff4e2d2347be8cd5ce3 (diff) | |
download | dexon-sol-tools-26370da13d7bed06d59efeba0a4921387b874e06.tar dexon-sol-tools-26370da13d7bed06d59efeba0a4921387b874e06.tar.gz dexon-sol-tools-26370da13d7bed06d59efeba0a4921387b874e06.tar.bz2 dexon-sol-tools-26370da13d7bed06d59efeba0a4921387b874e06.tar.lz dexon-sol-tools-26370da13d7bed06d59efeba0a4921387b874e06.tar.xz dexon-sol-tools-26370da13d7bed06d59efeba0a4921387b874e06.tar.zst dexon-sol-tools-26370da13d7bed06d59efeba0a4921387b874e06.zip |
Rewrite balance rows using flex box
Diffstat (limited to 'packages/website/ts/components/ui/icon_button.tsx')
-rw-r--r-- | packages/website/ts/components/ui/icon_button.tsx | 63 |
1 files changed, 63 insertions, 0 deletions
diff --git a/packages/website/ts/components/ui/icon_button.tsx b/packages/website/ts/components/ui/icon_button.tsx new file mode 100644 index 000000000..2f5172f05 --- /dev/null +++ b/packages/website/ts/components/ui/icon_button.tsx @@ -0,0 +1,63 @@ +import { colors, Styles } from '@0xproject/react-shared'; +import * as _ from 'lodash'; +import * as React from 'react'; + +export interface IconButtonProps { + iconName: string; + labelText?: string; + onClick: () => void; + color?: string; +} +interface IconButtonState { + isHovering: boolean; +} +export class IconButton extends React.Component<IconButtonProps, IconButtonState> { + public static defaultProps: Partial<IconButtonProps> = { + onClick: _.noop, + labelText: '', + color: colors.mediumBlue, + }; + public constructor(props: IconButtonProps) { + super(props); + this.state = { + isHovering: false, + }; + } + public render(): React.ReactNode { + const styles: Styles = { + root: { + cursor: 'pointer', + opacity: this.state.isHovering ? 0.5 : 1, + }, + icon: { + color: this.props.color, + fontSize: 20, + }, + label: { + color: this.props.color, + fontSize: 10, + }, + }; + return ( + <div + className="flex items-center py2" + onClick={this.props.onClick} + onMouseEnter={this._onToggleHover.bind(this, true)} + onMouseLeave={this._onToggleHover.bind(this, false)} + style={styles.root} + > + <i style={styles.icon} className={`zmdi ${this.props.iconName}`} /> + {!_.isEmpty(this.props.labelText) && ( + <div className="pl1" style={styles.label}> + {this.props.labelText} + </div> + )} + </div> + ); + } + private _onToggleHover(isHovering: boolean): void { + this.setState({ + isHovering, + }); + } +} |