62 lines
1.6 KiB
TypeScript
62 lines
1.6 KiB
TypeScript
import { Props as TableCellProps, SectionedTableCellTouchableHighlight } from '@Root/Components/SectionedTableCell'
|
|
import React from 'react'
|
|
import styled, { css } from 'styled-components/native'
|
|
|
|
type Props = {
|
|
testID?: string
|
|
disabled?: boolean
|
|
onPress: () => void
|
|
first?: boolean
|
|
last?: boolean
|
|
title: string
|
|
subTitle?: string
|
|
}
|
|
|
|
const Container = styled(SectionedTableCellTouchableHighlight).attrs((props) => ({
|
|
underlayColor: props.theme.stylekitBorderColor,
|
|
}))<TableCellProps>`
|
|
padding-top: ${12}px;
|
|
justify-content: center;
|
|
`
|
|
const ButtonContainer = styled.View``
|
|
|
|
type ButtonLabelProps = Pick<Props, 'disabled'>
|
|
const ButtonLabel = styled.Text<ButtonLabelProps>`
|
|
color: ${(props) => {
|
|
let color = props.theme.stylekitForegroundColor
|
|
if (props.disabled) {
|
|
color = 'gray'
|
|
}
|
|
return color
|
|
}};
|
|
font-weight: bold;
|
|
font-size: ${(props) => props.theme.mainTextFontSize}px;
|
|
${({ disabled }) =>
|
|
disabled &&
|
|
css`
|
|
opacity: 0.6;
|
|
`}
|
|
`
|
|
export const SubTitleText = styled.Text`
|
|
font-size: 14px;
|
|
margin-top: 4px;
|
|
color: ${({ theme }) => theme.stylekitForegroundColor};
|
|
opacity: 0.8;
|
|
line-height: 21px;
|
|
`
|
|
|
|
export const NoteHistoryCell: React.FC<Props> = (props) => (
|
|
<Container
|
|
first={props.first}
|
|
last={props.last}
|
|
testID={props.testID}
|
|
disabled={props.disabled}
|
|
onPress={props.onPress}
|
|
>
|
|
<ButtonContainer>
|
|
<ButtonLabel disabled={props.disabled}>{props.title}</ButtonLabel>
|
|
{props.subTitle && <SubTitleText>{props.subTitle}</SubTitleText>}
|
|
</ButtonContainer>
|
|
</Container>
|
|
)
|