diegohaz/styled-tools

Styled-tools not working

denull0 opened this issue · 4 comments

I am trying to use switchProp but for some reason values are empty. http://jmp.sh/mEP6Wtm

PopupButton.defaultProps = {
  titleAlign: 'left',
}

const Container = styled.View`
  flex: 1;
`

const Button = styled.TouchableHighlight`
  flex:1;
  justify-content:center;
  align-items: ${switchProp('titleAlign', {
    center: 'center',
    left: 'flex-start',
  })};
  padding-top: ${palette.SXL};
  padding-bottom: ${palette.SXL};

`

Any idea where the problem might be?

What's PopupButton? Does that work if you put defaultProps on Button?

Button.defaultProps = {
  titleAlign: 'left',
}

@diegohaz Hey Diego, so styled-tools are working on this component:

/* @flow */

import React, { Component } from 'react';
import styled, { css } from 'styled-components/native';
import { View, Text } from 'react-native';
import * as palette from './../styles/style-vars.js';
import { prop, switchProp } from 'styled-tools'

import Icon from './icon';

const Button = (props) =>  {
    return (

        <ButtonContainer
          bgcolor={props.bgcolor}
          size={props.size}
          enableIcon={props.enableIcon}
        >
          {props.icon ? (<Icon
            icon={props.icon}
            size={props.iconSize}
            color={props.iconColor}
          />) : null }
          {props.Title ? (<ButtonTitle>{props.Title}</ButtonTitle>) : null }
        </ButtonContainer>

    );
};

Button.defaultProps = {
  bgcolor: 'primary',
  size: 'medium',
}

const ButtonContainer = styled.View`
  flex-direction: row;
  justify-content:center;
  align-items: center;
  padding-left: 16;
  padding-right: 16;
  height: 48;
  width: ${switchProp('size', {
    small: '48',
    medium: '96',
    auto: 'auto'
  })};
  border-radius: 24;
  background-color: ${switchProp('bgcolor', {
    primary: '#F5F5F5',
    secondary: '#F5F5F5',
    accent: '#FC4600'
  })};
`

const ButtonTitle = styled.Text`
  font-size: ${palette.FS};
  background-color: transparent;
  margin-left: 0;
`

export default Button ;

But they are breaking on this one:

/* @flow */

import React, { Component } from 'react';
import styled, { css } from 'styled-components/native';
import { View, TouchableOpacity } from 'react-native';
import { Text } from './../styles'
import * as palette from './../styles/style-vars.js';
import { prop, ifProp, switchProp } from 'styled-tools'

import Icon from './icon';

const PopupButton = (props) =>  {
    return (

      <Container>
        <Button
          onPress={props.onPress}
          underlayColor={props.underlayColor}
        >
          <Text l cream>{props.title}</Text>
        </Button>
      </Container>

    );
};

PopupButton.defaultProps = {
  titleAlign: 'left',
}

const Container = styled.View`
  flex: 1;
`

const Button = styled.TouchableHighlight`
  flex:1;
  justify-content: center;
  align-items: ${switchProp('titleAlign', {
    center: 'center',
    left: 'flex-start',
  })};
  padding-top: ${palette.SXL};
  padding-bottom: ${palette.SXL};

`

export default PopupButton ;

I've tried uninstalling and clearing cache but still the same results. Property cannot pass.

Thank you for you time!

P.S. I am just a designer curious about react native and I find styled-tools a super comfortable way of styling my app. Keep up the good work!

You should pass props.titleAlign to Button inside PopupButton as well as you do with props.bgcolor and props.size inside Button.

I feel stupid. Thank you so much @diegohaz