74 lines
1.9 KiB
TypeScript
74 lines
1.9 KiB
TypeScript
import React, { CSSProperties, FC } from "react";
|
||
import { View, Text, StyleProp, TextStyle, ViewStyle } from "react-native";
|
||
|
||
type stateBox = {
|
||
text: string;
|
||
title: string;
|
||
style?: ViewStyle;
|
||
mode?: number;
|
||
endText?: string;
|
||
};
|
||
export const StateBox: FC<stateBox> = (props) => {
|
||
const { text, title, style, mode, endText } = props;
|
||
return (
|
||
<View style={{ ...(mode == 2 ? boxStyle2 : boxStyle), ...style }}>
|
||
<Text style={{ fontSize: 12, color: "#0099CC" }}>{title}</Text>
|
||
<View style={{ flex: 1 }} />
|
||
<View style={{ flexDirection: mode == 2 ? "row" : "column" }}>
|
||
{text?.match("～") ? (
|
||
<>
|
||
<Text style={mode == 2 ? boxTextStyle2 : boxTextStyle}>
|
||
{text.split("～")[0]}
|
||
</Text>
|
||
<Text style={{ color: "#0099CC", textAlign: "right" }}>
|
||
{mode == 2 ? "→" : "↓"}
|
||
</Text>
|
||
<Text style={mode == 2 ? boxTextStyle2 : boxTextStyle}>
|
||
{text.split("～")[1]}
|
||
</Text>
|
||
</>
|
||
) : (
|
||
<Text style={mode == 2 ? boxTextStyle2 : boxTextStyle}>{text}</Text>
|
||
)}
|
||
</View>
|
||
{endText && (
|
||
<View style={{ flexDirection: mode == 2 ? "row" : "column" }}>
|
||
<Text
|
||
style={{
|
||
...{ ...(mode == 2 ? boxTextStyle2 : boxTextStyle) },
|
||
fontSize: 10,
|
||
}}
|
||
>
|
||
{endText}
|
||
</Text>
|
||
</View>
|
||
)}
|
||
</View>
|
||
);
|
||
};
|
||
const boxStyle: ViewStyle = {
|
||
flex: 1,
|
||
backgroundColor: "white",
|
||
borderRadius: 10,
|
||
padding: 10,
|
||
margin: 10,
|
||
};
|
||
const boxStyle2: ViewStyle = {
|
||
flex: 1,
|
||
backgroundColor: "white",
|
||
borderRadius: 10,
|
||
padding: 5,
|
||
margin: 5,
|
||
};
|
||
const boxTextStyle2: TextStyle = {
|
||
fontSize: 18,
|
||
color: "#0099CC",
|
||
textAlign: "right",
|
||
};
|
||
|
||
const boxTextStyle: TextStyle = {
|
||
fontSize: 25,
|
||
color: "#0099CC",
|
||
textAlign: "right",
|
||
};
|