Skip to content

Instantly share code, notes, and snippets.

@kaueDM

kaueDM/btn.tsx

Created July 8, 2019 21:51
Show Gist options
  • Save kaueDM/dafda2d88e4d93d8b6a858db53aa2577 to your computer and use it in GitHub Desktop.
Save kaueDM/dafda2d88e4d93d8b6a858db53aa2577 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
btn.tsx
import React from 'react'
import Spinner from '../Spinner'
import ButtonIcon from './ButtonIcon'
import ButtonLabel from './ButtonLabel'
import ButtonContainer from './ButtonContainer'
import ButtonInterface from './ButtonInterface'
import { TouchableWithoutFeedback } from 'react-native'
const Button: React.FC<ButtonInterface> = (props) => {
const {
theme,
icon,
label,
onPress,
color,
disabled,
outline,
loading
} = props
const buttonContainerProps = { ...props }
const spinnerProps = {
loading,
color: outline ? color : `${color.split('-')[0]}-contrast`
}
const buttonIconProps = {
theme,
icon,
color,
disabled,
outline,
loading
}
const buttonLabelProps = {
theme,
icon,
label,
color,
disabled,
outline,
loading
}
delete buttonContainerProps['onPress']
return (
<TouchableWithoutFeedback onPress={disabled ? null : onPress}>
<ButtonContainer {...buttonContainerProps}>
<Spinner {...spinnerProps} />
<ButtonIcon {...buttonIconProps} />
<ButtonLabel {...buttonLabelProps} />
</ButtonContainer>
</TouchableWithoutFeedback>
)
}
Button.defaultProps = {
loading: false,
disabled: false
}
export default Button
@kaueDM
Copy link
Author

kaueDM commented Jul 8, 2019

Container:

import styled from 'styled-components/native'
import ButtonInterface from '../ButtonInterface'
import { applyButtonColor } from '@utils/styleBuilder'

const ButtonContainerComponent = styled.View<ButtonInterface>`
  align-items: center
  justify-content: center
  background-color: transparent
  height: ${({ theme }) => theme.controls.height}
  padding-left: ${({ theme, circle }) => circle ? theme.padding : 0}
  padding-right: ${({ theme, circle }) => circle ? theme.padding : 0}
  ${({ theme, circle }) => circle ? `width: ${theme.controls.height}` : ''}
  ${({ theme, color, outline, disabled }) => {
    return applyButtonColor({ theme, color, outline, disabled })
  }}
  border-radius: ${({ theme, radius, circle }) => {
    return circle
      ? theme.controls.height / 2
      : theme.radius[radius || 'small']
  }}
`

const ButtonContainer: React.FC<ButtonInterface> = (props) => {
  return (
    <ButtonContainerComponent {...props} />
  )
}

export default ButtonContainer

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment