80 lines
2.0 KiB
TypeScript
80 lines
2.0 KiB
TypeScript
import React, { FC, useState, useEffect } from "react";
|
|
import { Text, TextStyle, View, TouchableOpacity } from "react-native";
|
|
import { useInterval } from "../../../lib/useInterval";
|
|
|
|
const descriptionStyle: TextStyle = {
|
|
fontSize: parseInt("16%"),
|
|
fontWeight: "bold",
|
|
};
|
|
|
|
type Props = {
|
|
areaInfo: string;
|
|
numberOfLines?: number;
|
|
onClick?: () => void;
|
|
onLongClick?: () => void;
|
|
};
|
|
export const AreaDescription:FC<Props> = ({ areaInfo, numberOfLines = 0, onClick, onLongClick }) => {
|
|
const [areaString, setAreaString] = useState("");
|
|
const [areaStringLength, setAreaStringLength] = useState(0);
|
|
const [move, setMove] = useState(0);
|
|
useInterval(
|
|
() => {
|
|
if (areaInfo != "") {
|
|
setMove(areaStringLength < move ? 0 : move + 1);
|
|
}
|
|
},
|
|
350,
|
|
true
|
|
);
|
|
useEffect(() => {
|
|
if (!areaInfo) {
|
|
setAreaString("");
|
|
return () => {};
|
|
}
|
|
setAreaString(
|
|
areaInfo.substring(move, areaInfo.length) + areaInfo.substring(0, move)
|
|
);
|
|
}, [move]);
|
|
|
|
useEffect(() => {
|
|
if (!areaInfo) {
|
|
setAreaStringLength(0);
|
|
return () => {};
|
|
}
|
|
setAreaStringLength(areaInfo.length);
|
|
}, [areaInfo]);
|
|
return(
|
|
<TouchableOpacity
|
|
style={{
|
|
alignContent: "center",
|
|
alignItems: "center",
|
|
width: "94%",
|
|
marginVertical: 5,
|
|
marginHorizontal: "3%",
|
|
backgroundColor: "#000",
|
|
flexDirection: "row",
|
|
overflow: "hidden",
|
|
}}
|
|
onPress={onClick}
|
|
onLongPress={onLongClick}
|
|
>
|
|
<View style={{ flex: 4, flexDirection: "row" }}>
|
|
{numberOfLines == 1 ? (
|
|
<Text style={{ ...descriptionStyle, color: "red" }}>
|
|
運行情報 >{" "}
|
|
</Text>
|
|
) : (
|
|
<Text style={{ ...descriptionStyle, color: "green" }}> > </Text>
|
|
)}
|
|
|
|
<Text
|
|
style={{ ...descriptionStyle, color: "green" }}
|
|
numberOfLines={numberOfLines}
|
|
>
|
|
{areaString.replaceAll("\n", "").replaceAll("\r", "")}
|
|
</Text>
|
|
</View>
|
|
</TouchableOpacity>
|
|
);
|
|
};
|