81 lines
1.9 KiB
TypeScript
81 lines
1.9 KiB
TypeScript
import styled from '@emotion/native';
|
|
import React, { useCallback } from 'react';
|
|
import { TouchableOpacity } from 'react-native';
|
|
|
|
export interface CardProps {
|
|
children: React.ReactNode;
|
|
backgroundColor: CardBackgroundColor;
|
|
borderColor: CardBorderColor;
|
|
color: CardColor;
|
|
testID?: string;
|
|
onPress?: () => void;
|
|
}
|
|
|
|
type CardBackgroundColor = 'red' | 'green' | 'grey' | 'black' | 'white' | 'darkGrey';
|
|
type CardBorderColor = 'pink' | 'blue' | 'grey' | 'black' | 'white' | 'darkGrey';
|
|
type CardColor = 'black' | 'white';
|
|
|
|
const Card: React.FC<CardProps> = ({
|
|
children,
|
|
backgroundColor = 'red',
|
|
color = 'black',
|
|
borderColor = 'pink',
|
|
testID = undefined,
|
|
onPress
|
|
}) => {
|
|
const safeOnPress = useCallback(() => onPress?.(), [onPress]);
|
|
|
|
const content = (
|
|
<Container
|
|
color={color}
|
|
bgColor={backgroundColor}
|
|
testID={testID}
|
|
borderColor={borderColor}
|
|
>
|
|
{children}
|
|
</Container>
|
|
);
|
|
|
|
const touchableContent = (
|
|
<CustomTouchableOpacity
|
|
onPress={safeOnPress}
|
|
bgColor={backgroundColor}
|
|
color={color}
|
|
borderColor={borderColor}
|
|
>
|
|
{content}
|
|
</CustomTouchableOpacity>
|
|
)
|
|
|
|
return (
|
|
onPress ? touchableContent : content
|
|
);
|
|
};
|
|
|
|
const CustomTouchableOpacity = styled(TouchableOpacity)<{
|
|
color: CardColor;
|
|
borderColor: CardBorderColor;
|
|
bgColor: CardBackgroundColor;
|
|
}>(({ theme, color, borderColor, bgColor }) => ({
|
|
color: theme.colors.fixed[color],
|
|
borderColor: theme.colors.fixed[borderColor],
|
|
backgroundColor: theme.colors.fixed[bgColor]
|
|
}));
|
|
|
|
const Container = styled.View<{
|
|
bgColor: CardBackgroundColor;
|
|
borderColor: CardBorderColor;
|
|
color: CardColor;
|
|
}>(({ theme, bgColor, borderColor, color }) => ({
|
|
padding: 25,
|
|
width: '100%',
|
|
borderRadius: 0,
|
|
overflow: 'hidden',
|
|
backgroundColor: theme.colors.fixed[bgColor],
|
|
borderWidth: 4,
|
|
borderColor: theme.colors.fixed[borderColor],
|
|
color: theme.colors.fixed[color]
|
|
}));
|
|
|
|
export default Card;
|