Merge pull request #3802 from TrainLCD/fix/saikyo-ttb

埼京線テーマTTBリファクタ
TrainLCD · Oct 13, 2024 · 564f2ea · 564f2ea
2 parents debb065 + ed1392b
commit 564f2ea
Showing 1 changed file with 65 additions and 73 deletions.
diff --git a/src/components/TrainTypeBoxSaikyo.tsx b/src/components/TrainTypeBoxSaikyo.tsx
@@ -30,28 +30,18 @@ type Props = {
 
 const styles = StyleSheet.create({
   root: {
+    width: isTablet ? 175 : 96.25,
+    height: isTablet ? 55 : 30.25,
     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',
-  },
   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 +55,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,15 +141,15 @@ const TrainTypeBoxSaikyo: React.FC<Props> = ({
     return 0
   }, [trainTypeName?.length])
 
-  const paddingLeft = useMemo(() => {
+  const marginLeft = useMemo(() => {
     if (trainTypeName?.length === 2 && Platform.OS === 'ios') {
       return 8
     }
 
     return 0
   }, [trainTypeName?.length])
 
-  const prevPaddingLeft = usePrevious(paddingLeft)
+  const prevMarginLeft = usePrevious(marginLeft)
   const prevTrainTypeText = usePrevious(trainTypeName)
   const prevLetterSpacing = usePrevious(letterSpacing)
 
@@ -196,70 +186,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>
   )
 }