diff options
| author | Andrej Mihajlov <and@mullvad.net> | 2018-07-18 15:07:37 +0200 |
|---|---|---|
| committer | Andrej Mihajlov <and@mullvad.net> | 2018-08-15 17:39:38 +0200 |
| commit | 71592249b2dd669b6f24f37bfb7b0f4e43b74998 (patch) | |
| tree | a6097dc7e5d94d06e99c65fdfe160e824395f50c /app/components/AppButton.js | |
| parent | e84e87f4ce5a8c242f756566cdc6fb59a45f7bea (diff) | |
| download | mullvadvpn-71592249b2dd669b6f24f37bfb7b0f4e43b74998.tar.xz mullvadvpn-71592249b2dd669b6f24f37bfb7b0f4e43b74998.zip | |
Add workspaces
Diffstat (limited to 'app/components/AppButton.js')
| -rw-r--r-- | app/components/AppButton.js | 80 |
1 files changed, 0 insertions, 80 deletions
diff --git a/app/components/AppButton.js b/app/components/AppButton.js deleted file mode 100644 index dd69ab1dc3..0000000000 --- a/app/components/AppButton.js +++ /dev/null @@ -1,80 +0,0 @@ -// @flow - -import * as React from 'react'; -import { Button, Text, Component } from 'reactxp'; -import styles from './AppButtonStyles'; -import blurStyles from './BlurAppButtonStyles'; -import Img from './Img'; - -export class Label extends Text {} - -type Props = { - children?: React.Node, - style?: Object, - disabled: boolean, -}; - -type State = { - hovered: boolean, -}; - -class BaseButton extends Component<Props, State> { - state = { hovered: false }; - - textStyle = () => styles.white; - iconStyle = () => styles.white; - backgroundStyle = () => (this.state.hovered ? styles.white80 : styles.white); - - onHoverStart = () => (!this.props.disabled ? this.setState({ hovered: true }) : null); - onHoverEnd = () => (!this.props.disabled ? this.setState({ hovered: false }) : null); - render() { - const { children, style, ...otherProps } = this.props; - return ( - <Button - {...otherProps} - style={[styles.common, this.backgroundStyle(), style]} - onHoverStart={this.onHoverStart} - onHoverEnd={this.onHoverEnd}> - {React.Children.map(children, (node) => { - if (React.isValidElement(node)) { - let updatedProps = {}; - - if (node.type === Label) { - updatedProps = { style: [styles.label, this.textStyle()] }; - } - - if (node.type === Img) { - updatedProps = { tintColor: 'currentColor', style: [styles.icon, this.iconStyle()] }; - } - - return React.cloneElement(node, updatedProps); - } else { - return <Label style={[styles.label, this.textStyle()]}>{children}</Label>; - } - })} - </Button> - ); - } -} - -export class RedButton extends BaseButton { - backgroundStyle = () => (this.state.hovered ? styles.redHover : styles.red); -} - -export class GreenButton extends BaseButton { - backgroundStyle = () => (this.state.hovered ? styles.greenHover : styles.green); -} - -export class BlueButton extends BaseButton { - backgroundStyle = () => (this.state.hovered ? styles.blueHover : styles.blue); -} - -export class TransparentButton extends BaseButton { - backgroundStyle = () => - this.state.hovered ? blurStyles.transparentHover : blurStyles.transparent; -} - -export class RedTransparentButton extends BaseButton { - backgroundStyle = () => - this.state.hovered ? blurStyles.redTransparentHover : blurStyles.redTransparent; -} |
