From 677e6f2bd75e20c4f1c062c0544544bd2bcfa18e Mon Sep 17 00:00:00 2001
From: Tsubasa SEKIGUCHI <oss@tinykitten.me>
Date: Sun, 13 Oct 2024 10:53:18 +0900
Subject: [PATCH] =?UTF-8?q?=E5=9F=BC=E4=BA=AC=E7=B7=9A=E3=83=86=E3=83=BC?=
 =?UTF-8?q?=E3=83=9ETTB=E3=83=AA=E3=83=95=E3=82=A1=E3=82=AF=E3=82=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/TrainTypeBoxSaikyo.tsx | 139 ++++++++++++--------------
 1 file changed, 65 insertions(+), 74 deletions(-)

diff --git a/src/components/TrainTypeBoxSaikyo.tsx b/src/components/TrainTypeBoxSaikyo.tsx
index 5cfbbd7ec..bb7a84053 100644
--- a/src/components/TrainTypeBoxSaikyo.tsx
+++ b/src/components/TrainTypeBoxSaikyo.tsx
@@ -30,28 +30,17 @@ type Props = {
 
 const styles = StyleSheet.create({
   root: {
-    justifyContent: 'center',
-    alignItems: 'center',
-    borderBottomLeftRadius: isTablet ? 8 : 4,
-    borderBottomRightRadius: isTablet ? 8 : 4,
-    overflow: 'hidden',
-    borderLeftWidth: isTablet ? 0.5 : 0.75,
-    borderRightWidth: isTablet ? 0.5 : 0.75,
-    borderBottomWidth: isTablet ? 0.5 : 0.75,
-    borderColor: 'white',
-  },
-  container: {
     width: isTablet ? 175 : 96.25,
     height: isTablet ? 55 : 30.25,
-    borderBottomLeftRadius: isTablet ? 8 : 4,
-    borderBottomRightRadius: isTablet ? 8 : 4,
-    overflow: 'hidden',
-    position: 'relative',
+    justifyContent: 'center',
+    alignItems: 'center',
   },
   gradient: {
     width: isTablet ? 175 : 96.25,
     height: isTablet ? 55 : 30.25,
     position: 'absolute',
+    borderBottomLeftRadius: isTablet ? 8 : 4,
+    borderBottomRightRadius: isTablet ? 8 : 4,
   },
   text: {
     color: '#fff',
@@ -65,11 +54,11 @@ const styles = StyleSheet.create({
   },
   textWrapper: {
     flex: 1,
-    width: '100%',
-    height: '100%',
     justifyContent: 'center',
     alignItems: 'center',
     position: 'absolute',
+    width: isTablet ? 175 : 96.25,
+    height: isTablet ? 55 : 30.25,
   },
 })
 
@@ -151,7 +140,7 @@ const TrainTypeBoxSaikyo: React.FC<Props> = ({
     return 0
   }, [trainTypeName?.length])
 
-  const paddingLeft = useMemo(() => {
+  const marginLeft = useMemo(() => {
     if (trainTypeName?.length === 2 && Platform.OS === 'ios') {
       return 8
     }
@@ -159,7 +148,7 @@ const TrainTypeBoxSaikyo: React.FC<Props> = ({
     return 0
   }, [trainTypeName?.length])
 
-  const prevPaddingLeft = usePrevious(paddingLeft)
+  const prevMarginLeft = usePrevious(marginLeft)
   const prevTrainTypeText = usePrevious(trainTypeName)
   const prevLetterSpacing = usePrevious(letterSpacing)
 
@@ -196,70 +185,72 @@ const TrainTypeBoxSaikyo: React.FC<Props> = ({
     opacity: textOpacityAnim.value,
   }))
 
+  // 表示に使う１行目のみの文字数で判定
   const numberOfLines = useMemo(
-    () => (trainTypeName.length <= 10 ? 1 : 2),
-    [trainTypeName.length]
+    () => (trainTypeName.split('\n')[0].length <= 10 ? 1 : 2),
+    [trainTypeName]
   )
   const prevNumberOfLines = useMemo(
-    () => ((prevTrainTypeText?.length ?? 0) <= 10 ? 1 : 2),
-    [prevTrainTypeText?.length]
+    () =>
+      prevTrainTypeText
+        ? prevTrainTypeText.split('\n')[0].length <= 10
+          ? 1
+          : 2
+        : 0,
+    [prevTrainTypeText]
   )
 
   return (
     <View style={styles.root}>
-      <View style={styles.container}>
-        <LinearGradient
-          colors={['#000', '#000', '#fff']}
-          locations={[0.1, 0.5, 0.9]}
-          style={styles.gradient}
-        />
-        <LinearGradient
-          colors={['#aaaaaaff', '#aaaaaabb']}
-          style={styles.gradient}
-        />
-        <LinearGradient
-          colors={['#000', '#000', '#fff']}
-          locations={[0.1, 0.5, 0.9]}
-          style={styles.gradient}
-        />
-        <LinearGradient
-          colors={[`${trainTypeColor}bb`, `${trainTypeColor}ff`]}
-          style={styles.gradient}
-        />
+      <LinearGradient
+        colors={['#000', '#000', '#fff']}
+        locations={[0.1, 0.5, 0.9]}
+        style={styles.gradient}
+      />
+      <LinearGradient
+        colors={['#aaaaaaff', '#aaaaaabb']}
+        style={styles.gradient}
+      />
+      <LinearGradient
+        colors={['#000', '#000', '#fff']}
+        locations={[0.1, 0.5, 0.9]}
+        style={styles.gradient}
+      />
+      <LinearGradient
+        colors={[`${trainTypeColor}bb`, `${trainTypeColor}ff`]}
+        style={styles.gradient}
+      />
 
-        <View style={styles.textWrapper}>
-          <AnimatedTypography
-            adjustsFontSizeToFit
-            numberOfLines={numberOfLines}
-            style={[
-              textTopAnimatedStyles,
-              {
-                ...styles.text,
-                paddingLeft,
-                letterSpacing,
-              },
-            ]}
-          >
-            {trainTypeName}
-          </AnimatedTypography>
-        </View>
-        <View style={styles.textWrapper}>
-          <AnimatedTypography
-            adjustsFontSizeToFit
-            numberOfLines={prevNumberOfLines}
-            style={[
-              textBottomAnimatedStyles,
-              {
-                ...styles.text,
-                paddingLeft: prevPaddingLeft,
-                letterSpacing: prevLetterSpacing,
-              },
-            ]}
-          >
-            {prevTrainTypeText}
-          </AnimatedTypography>
-        </View>
+      <View style={styles.textWrapper}>
+        <AnimatedTypography
+          style={[
+            textTopAnimatedStyles,
+            {
+              ...styles.text,
+              letterSpacing,
+              marginLeft,
+            },
+          ]}
+          adjustsFontSizeToFit
+          numberOfLines={numberOfLines}
+        >
+          {trainTypeName}
+        </AnimatedTypography>
       </View>
+      <AnimatedTypography
+        adjustsFontSizeToFit
+        numberOfLines={prevNumberOfLines}
+        style={[
+          textBottomAnimatedStyles,
+          {
+            ...styles.text,
+            marginLeft: prevMarginLeft,
+            letterSpacing: prevLetterSpacing,
+          },
+        ]}
+      >
+        {prevTrainTypeText}
+      </AnimatedTypography>
     </View>
   )
 }