diff options
| author | Andrej Mihajlov <and@mullvad.net> | 2018-06-01 16:13:10 +0200 |
|---|---|---|
| committer | Andrej Mihajlov <and@mullvad.net> | 2018-06-05 12:11:55 +0200 |
| commit | ca2f6fbfcad7b73d4ea63ef46cb1cab943ec9087 (patch) | |
| tree | b1f7754eb50896ab3681e35fa4e08be642b940c9 /app/components/styled/AppButton.js | |
| parent | 5852c980980de53e00d76a0bdb4b41bf5c0f5b39 (diff) | |
| download | mullvadvpn-ca2f6fbfcad7b73d4ea63ef46cb1cab943ec9087.tar.xz mullvadvpn-ca2f6fbfcad7b73d4ea63ef46cb1cab943ec9087.zip | |
Add formatted source code
Diffstat (limited to 'app/components/styled/AppButton.js')
| -rw-r--r-- | app/components/styled/AppButton.js | 57 |
1 files changed, 29 insertions, 28 deletions
diff --git a/app/components/styled/AppButton.js b/app/components/styled/AppButton.js index 59cba4eefb..f54bd18024 100644 --- a/app/components/styled/AppButton.js +++ b/app/components/styled/AppButton.js @@ -15,59 +15,60 @@ class BaseButton extends Component { state = { hovered: false }; - textStyle = () => this.state.hovered ? styles.white80 : styles.white; - iconStyle = () => this.state.hovered ? styles.white80 : styles.white; - backgroundStyle = () => this.state.hovered ? styles.white80 : styles.white; + textStyle = () => (this.state.hovered ? styles.white80 : styles.white); + iconStyle = () => (this.state.hovered ? styles.white80 : 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; + onHoverStart = () => (!this.props.disabled ? this.setState({ hovered: true }) : null); + onHoverEnd = () => (!this.props.disabled ? this.setState({ hovered: false }) : null); render() { const { children, ...otherProps } = this.props; return ( - <Button style={[ styles.common, this.backgroundStyle() ]} + <Button + style={[styles.common, this.backgroundStyle()]} onHoverStart={this.onHoverStart} onHoverEnd={this.onHoverEnd} {...otherProps}> - { - React.Children.map(children, (node) => { - if (React.isValidElement(node)) { - let updatedProps = {}; + {React.Children.map(children, (node) => { + if (React.isValidElement(node)) { + let updatedProps = {}; - if(node.type.name === 'Label') { - updatedProps = { style: [styles.label, this.textStyle()]}; - } - - if(node.type.name === 'Img') { - updatedProps = { tintColor:'currentColor', style: [styles.icon, this.iconStyle()]}; - } + if (node.type.name === 'Label') { + updatedProps = { style: [styles.label, this.textStyle()] }; + } - return React.cloneElement(node, updatedProps); - } else { - return <Label style={[styles.label, this.textStyle()]}>{children}</Label>; + if (node.type.name === '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; + backgroundStyle = () => (this.state.hovered ? styles.redHover : styles.red); } export class GreenButton extends BaseButton { - backgroundStyle = () => this.state.hovered ? styles.greenHover : styles.green; + backgroundStyle = () => (this.state.hovered ? styles.greenHover : styles.green); } export class BlueButton extends BaseButton { - backgroundStyle = () => this.state.hovered ? styles.blueHover : styles.blue; + backgroundStyle = () => (this.state.hovered ? styles.blueHover : styles.blue); } export class TransparentButton extends BaseButton { - backgroundStyle = () => this.state.hovered ? blurStyles.transparentHover : blurStyles.transparent; + backgroundStyle = () => + this.state.hovered ? blurStyles.transparentHover : blurStyles.transparent; } export class RedTransparentButton extends BaseButton { - backgroundStyle = () => this.state.hovered ? blurStyles.redTransparentHover : blurStyles.redTransparent; -}
\ No newline at end of file + backgroundStyle = () => + this.state.hovered ? blurStyles.redTransparentHover : blurStyles.redTransparent; +} |
