77 lines
2.3 KiB
TypeScript
77 lines
2.3 KiB
TypeScript
import React from 'react'
|
|
import { Platform } from 'react-native'
|
|
import styled from 'styled-components/native'
|
|
|
|
type Props = {
|
|
title?: string
|
|
subtitle?: string
|
|
buttonText?: string
|
|
buttonAction?: () => void
|
|
buttonStyles?: any
|
|
tinted?: boolean
|
|
backgroundColor?: string
|
|
}
|
|
|
|
const Container = styled.View<Pick<Props, 'backgroundColor'>>`
|
|
/* flex: 1; */
|
|
/* flex-grow: 0; */
|
|
justify-content: space-between;
|
|
flex-direction: row;
|
|
padding-right: ${(props) => props.theme.paddingLeft}px;
|
|
padding-bottom: 10px;
|
|
padding-top: 10px;
|
|
background-color: ${(props) => props.backgroundColor ?? props.theme.stylekitBackgroundColor};
|
|
`
|
|
const TitleContainer = styled.View``
|
|
const Title = styled.Text<Pick<Props, 'tinted'>>`
|
|
background-color: ${(props) => props.theme.stylekitBackgroundColor};
|
|
font-size: ${(props) => {
|
|
return Platform.OS === 'android' ? props.theme.mainTextFontSize - 2 : props.theme.mainTextFontSize - 4
|
|
}}px;
|
|
padding-left: ${(props) => props.theme.paddingLeft}px;
|
|
color: ${(props) => {
|
|
if (props.tinted) {
|
|
return props.theme.stylekitInfoColor
|
|
}
|
|
|
|
return Platform.OS === 'android' ? props.theme.stylekitInfoColor : props.theme.stylekitNeutralColor
|
|
}};
|
|
font-weight: ${Platform.OS === 'android' ? 'bold' : 'normal'};
|
|
`
|
|
const SubTitle = styled.Text`
|
|
background-color: ${(props) => props.theme.stylekitBackgroundColor};
|
|
font-size: ${(props) => props.theme.mainTextFontSize - 5}px;
|
|
margin-top: 4px;
|
|
padding-left: ${(props) => props.theme.paddingLeft}px;
|
|
color: ${(props) => props.theme.stylekitNeutralColor};
|
|
`
|
|
const ButtonContainer = styled.TouchableOpacity`
|
|
flex: 1;
|
|
align-items: flex-end;
|
|
justify-content: center;
|
|
`
|
|
const Button = styled.Text`
|
|
color: ${(props) => props.theme.stylekitInfoColor};
|
|
`
|
|
|
|
export const SectionHeader: React.FC<Props> = (props) => (
|
|
<Container>
|
|
<TitleContainer>
|
|
{!!props.title && (
|
|
<Title>
|
|
{Platform.select({
|
|
ios: props.title.toUpperCase(),
|
|
android: props.title,
|
|
})}
|
|
</Title>
|
|
)}
|
|
{!!props.subtitle && <SubTitle>{props.subtitle}</SubTitle>}
|
|
</TitleContainer>
|
|
{!!props.buttonText && (
|
|
<ButtonContainer onPress={props.buttonAction}>
|
|
<Button style={props.buttonStyles}>{props.buttonText}</Button>
|
|
</ButtonContainer>
|
|
)}
|
|
</Container>
|
|
)
|