76 lines
2.0 KiB
TypeScript
76 lines
2.0 KiB
TypeScript
import React from 'react'
|
|
import styled, { css } from 'styled-components/native'
|
|
|
|
type Props = {
|
|
onPress: () => void
|
|
label: string
|
|
primary?: boolean
|
|
fullWidth?: boolean
|
|
last?: boolean
|
|
}
|
|
|
|
const PrimaryButtonContainer = styled.TouchableOpacity.attrs({
|
|
activeOpacity: 0.84,
|
|
})<{
|
|
fullWidth?: boolean
|
|
last?: boolean
|
|
}>`
|
|
background-color: ${({ theme }) => theme.stylekitInfoColor};
|
|
padding: 12px 24px;
|
|
border-radius: 4px;
|
|
border-width: 1px;
|
|
border-color: ${({ theme }) => theme.stylekitInfoColor};
|
|
margin-bottom: ${({ fullWidth, last }) => (fullWidth && !last ? '16px' : 0)};
|
|
${({ fullWidth }) =>
|
|
!fullWidth &&
|
|
css`
|
|
align-self: center;
|
|
`};
|
|
`
|
|
|
|
const SecondaryButtonContainer = styled.TouchableHighlight.attrs(({ theme }) => ({
|
|
activeOpacity: 0.84,
|
|
underlayColor: theme.stylekitBorderColor,
|
|
}))<{
|
|
fullWidth?: boolean
|
|
last?: boolean
|
|
}>`
|
|
background-color: ${({ theme }) => theme.stylekitBackgroundColor};
|
|
padding: 12px 24px;
|
|
border-radius: 4px;
|
|
border-width: 1px;
|
|
border-color: ${({ theme }) => theme.stylekitBorderColor};
|
|
margin-bottom: ${({ fullWidth, last }) => (fullWidth && !last ? '16px' : 0)};
|
|
${({ fullWidth }) =>
|
|
!fullWidth &&
|
|
css`
|
|
align-self: center;
|
|
`};
|
|
`
|
|
|
|
const ButtonLabel = styled.Text<{ primary?: boolean }>`
|
|
text-align: center;
|
|
text-align-vertical: center;
|
|
font-weight: bold;
|
|
color: ${({ theme, primary }) => {
|
|
return primary ? theme.stylekitInfoContrastColor : theme.stylekitForegroundColor
|
|
}};
|
|
font-size: ${(props) => props.theme.mainTextFontSize}px;
|
|
`
|
|
|
|
export const Button: React.FC<Props> = ({ onPress, label, primary, fullWidth, last }: Props) => {
|
|
if (primary) {
|
|
return (
|
|
<PrimaryButtonContainer onPress={onPress} fullWidth={fullWidth} last={last}>
|
|
<ButtonLabel primary={primary}>{label}</ButtonLabel>
|
|
</PrimaryButtonContainer>
|
|
)
|
|
} else {
|
|
return (
|
|
<SecondaryButtonContainer onPress={onPress} fullWidth={fullWidth} last={last}>
|
|
<ButtonLabel primary={primary}>{label}</ButtonLabel>
|
|
</SecondaryButtonContainer>
|
|
)
|
|
}
|
|
}
|