81 lines
2.1 KiB
TypeScript
81 lines
2.1 KiB
TypeScript
import React from 'react'
|
|
import { Platform } from 'react-native'
|
|
import styled, { css } from 'styled-components/native'
|
|
import { Props as TableCellProps, SectionedTableCellTouchableHighlight } from './SectionedTableCell'
|
|
|
|
type Props = {
|
|
testID?: string
|
|
maxHeight?: number
|
|
leftAligned?: boolean
|
|
bold?: boolean
|
|
disabled?: boolean
|
|
important?: boolean
|
|
onPress: () => void
|
|
first?: boolean
|
|
last?: boolean
|
|
title?: string
|
|
}
|
|
|
|
type ContainerProps = Pick<Props, 'maxHeight'> & TableCellProps
|
|
const Container = styled(SectionedTableCellTouchableHighlight).attrs(props => ({
|
|
underlayColor: props.theme.stylekitBorderColor,
|
|
}))<ContainerProps>`
|
|
padding-top: ${12}px;
|
|
justify-content: center;
|
|
${({ maxHeight }) =>
|
|
maxHeight &&
|
|
css`
|
|
max-height: 50px;
|
|
`};
|
|
`
|
|
const ButtonContainer = styled.View``
|
|
|
|
type ButtonLabelProps = Pick<Props, 'leftAligned' | 'bold' | 'disabled' | 'important'>
|
|
const ButtonLabel = styled.Text<ButtonLabelProps>`
|
|
text-align: ${props => (props.leftAligned ? 'left' : 'center')};
|
|
text-align-vertical: center;
|
|
color: ${props => {
|
|
let color = Platform.OS === 'android' ? props.theme.stylekitForegroundColor : props.theme.stylekitInfoColor
|
|
if (props.disabled) {
|
|
color = 'gray'
|
|
} else if (props.important) {
|
|
color = props.theme.stylekitDangerColor
|
|
}
|
|
return color
|
|
}};
|
|
font-size: ${props => props.theme.mainTextFontSize}px;
|
|
${({ bold }) =>
|
|
bold &&
|
|
css`
|
|
font-weight: bold;
|
|
`}
|
|
${({ disabled }) =>
|
|
disabled &&
|
|
css`
|
|
opacity: 0.6;
|
|
`}
|
|
`
|
|
|
|
export const ButtonCell: React.FC<Props> = props => (
|
|
<Container
|
|
first={props.first}
|
|
last={props.last}
|
|
maxHeight={props.maxHeight}
|
|
testID={props.testID}
|
|
disabled={props.disabled}
|
|
onPress={props.onPress}
|
|
>
|
|
<ButtonContainer>
|
|
<ButtonLabel
|
|
important={props.important}
|
|
disabled={props.disabled}
|
|
bold={props.bold}
|
|
leftAligned={props.leftAligned}
|
|
>
|
|
{props.title}
|
|
</ButtonLabel>
|
|
{props.children && props.children}
|
|
</ButtonContainer>
|
|
</Container>
|
|
)
|