49 lines
1.3 KiB
TypeScript
49 lines
1.3 KiB
TypeScript
import React, { FC } from "react";
|
|
import { View, Text, TouchableOpacity, TextStyle } from "react-native";
|
|
|
|
type Props = {
|
|
LeftItem?: SideItemProps;
|
|
RightItem?: SideItemProps;
|
|
title: string;
|
|
};
|
|
|
|
const textStyle: TextStyle = {
|
|
fontSize: 20,
|
|
fontWeight: "bold",
|
|
color: "white",
|
|
padding: 10,
|
|
textAlignVertical: "center",
|
|
};
|
|
export const SheetHeaderItem: FC<Props> = (props) => {
|
|
const { LeftItem, RightItem, title } = props;
|
|
return (
|
|
<View style={{ backgroundColor: "#0099CC", flexDirection: "row" }}>
|
|
<View style={{ flex: 1 }}>
|
|
{LeftItem ? <SideItem {...LeftItem} position="left" /> : <></>}
|
|
</View>
|
|
<Text style={{ textAlign: "center",...textStyle }}>{title}</Text>
|
|
<View style={{ flex: 1 }}>
|
|
{RightItem ? <SideItem {...RightItem} position="right" /> : <></>}
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
type SideItemProps = {
|
|
onPress: () => void;
|
|
title: string;
|
|
position: "left" | "right";
|
|
};
|
|
const SideItem: FC<SideItemProps> = ({ onPress, title, position }) => {
|
|
return (
|
|
<TouchableOpacity
|
|
onPress={onPress}
|
|
style={{ flexDirection: "column", flex: 1 }}
|
|
>
|
|
<View style={{ flex: 1 }} />
|
|
<Text style={{ textAlign: position, ...textStyle }}>{title}</Text>
|
|
<View style={{ flex: 1 }} />
|
|
</TouchableOpacity>
|
|
);
|
|
};
|