summaryrefslogtreecommitdiffhomepage
path: root/app/components/styled/CellButton.js
diff options
context:
space:
mode:
authorAndrej Mihajlov <and@mullvad.net>2018-06-01 16:13:10 +0200
committerAndrej Mihajlov <and@mullvad.net>2018-06-05 12:11:55 +0200
commitca2f6fbfcad7b73d4ea63ef46cb1cab943ec9087 (patch)
treeb1f7754eb50896ab3681e35fa4e08be642b940c9 /app/components/styled/CellButton.js
parent5852c980980de53e00d76a0bdb4b41bf5c0f5b39 (diff)
downloadmullvadvpn-ca2f6fbfcad7b73d4ea63ef46cb1cab943ec9087.tar.xz
mullvadvpn-ca2f6fbfcad7b73d4ea63ef46cb1cab943ec9087.zip
Add formatted source code
Diffstat (limited to 'app/components/styled/CellButton.js')
-rw-r--r--app/components/styled/CellButton.js82
1 files changed, 46 insertions, 36 deletions
diff --git a/app/components/styled/CellButton.js b/app/components/styled/CellButton.js
index 1a0e055b01..f0251c942e 100644
--- a/app/components/styled/CellButton.js
+++ b/app/components/styled/CellButton.js
@@ -9,7 +9,7 @@ import { createViewStyles, createTextStyles } from '../../lib/styles';
const styles = {
...createViewStyles({
- cell:{
+ cell: {
backgroundColor: colors.blue80,
paddingTop: 14,
paddingBottom: 14,
@@ -21,19 +21,19 @@ const styles = {
alignItems: 'center',
alignContent: 'center',
},
- blue:{
+ blue: {
backgroundColor: colors.blue80,
},
- blueHover:{
+ blueHover: {
backgroundColor: colors.blue60,
},
- white40:{
+ white40: {
color: colors.white40,
},
- white60:{
+ white60: {
color: colors.white60,
},
- white80:{
+ white80: {
color: colors.white80,
},
white: {
@@ -45,7 +45,7 @@ const styles = {
},
}),
...createTextStyles({
- label:{
+ label: {
color: colors.white,
alignSelf: 'center',
fontFamily: 'DINPro',
@@ -55,7 +55,7 @@ const styles = {
flex: 1,
marginLeft: 8,
},
- subtext:{
+ subtext: {
color: colors.white60,
fontFamily: 'Open Sans',
fontSize: 13,
@@ -69,12 +69,11 @@ const styles = {
export class SubText extends Text {}
export class Label extends Text {}
-
type CellButtonProps = {
children?: React.Node,
disabled?: boolean,
cellHoverStyle?: Types.ViewStyle,
- style?: Types.ViewStyle
+ style?: Types.ViewStyle,
};
type State = { hovered: boolean };
@@ -82,44 +81,55 @@ type State = { hovered: boolean };
export default class CellButton extends Component<CellButtonProps, State> {
state = { hovered: false };
- textStyle = (cellHoverStyle?: Types.ViewStyle) => this.state.hovered ? cellHoverStyle : null;
- iconStyle = (cellHoverStyle?: Types.ViewStyle) => this.state.hovered ? cellHoverStyle : null;
- subtextStyle = (cellHoverStyle?: Types.ViewStyle) => this.state.hovered ? cellHoverStyle : null;
- backgroundStyle = (cellHoverStyle?: Types.ViewStyle) => this.state.hovered ? cellHoverStyle || styles.blueHover : null;
+ textStyle = (cellHoverStyle?: Types.ViewStyle) => (this.state.hovered ? cellHoverStyle : null);
+ iconStyle = (cellHoverStyle?: Types.ViewStyle) => (this.state.hovered ? cellHoverStyle : null);
+ subtextStyle = (cellHoverStyle?: Types.ViewStyle) => (this.state.hovered ? cellHoverStyle : null);
+ backgroundStyle = (cellHoverStyle?: Types.ViewStyle) =>
+ this.state.hovered ? cellHoverStyle || styles.blueHover : null;
- 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, style, cellHoverStyle, ...otherProps } = this.props;
return (
- <Button style={[ styles.cell, style, this.backgroundStyle(cellHoverStyle) ]}
+ <Button
+ style={[styles.cell, style, this.backgroundStyle(cellHoverStyle)]}
onHoverStart={this.onHoverStart}
onHoverEnd={this.onHoverEnd}
{...otherProps}>
- {
- React.Children.map(children, (node) => {
- if (React.isValidElement(node)) {
- let updatedProps = {};
-
- if(node.type.name === 'Label') {
- updatedProps = { style: [styles.label, node.props.style, this.textStyle(node.props.cellHoverStyle)]};
- }
+ {React.Children.map(children, (node) => {
+ if (React.isValidElement(node)) {
+ let updatedProps = {};
- if(node.type.name === 'Img') {
- updatedProps = { tintColor:'currentColor', style: [styles.icon, node.props.style, this.iconStyle(node.props.cellHoverStyle)]};
- }
+ if (node.type.name === 'Label') {
+ updatedProps = {
+ style: [styles.label, node.props.style, this.textStyle(node.props.cellHoverStyle)],
+ };
+ }
- if(node.type.name === 'SubText') {
- updatedProps = { style: [styles.subtext, node.props.style, this.subtextStyle(node.props.cellHoverStyle)]};
- }
+ if (node.type.name === 'Img') {
+ updatedProps = {
+ tintColor: 'currentColor',
+ style: [styles.icon, node.props.style, this.iconStyle(node.props.cellHoverStyle)],
+ };
+ }
- return React.cloneElement(node, updatedProps);
- } else if (node){
- return <Label style={[styles.label, this.textStyle()]}>{children}</Label>;
+ if (node.type.name === 'SubText') {
+ updatedProps = {
+ style: [
+ styles.subtext,
+ node.props.style,
+ this.subtextStyle(node.props.cellHoverStyle),
+ ],
+ };
}
- })
- }
+
+ return React.cloneElement(node, updatedProps);
+ } else if (node) {
+ return <Label style={[styles.label, this.textStyle()]}>{children}</Label>;
+ }
+ })}
</Button>
);
}