fix: add min duration

hel-axelor · Apr 4, 2024 · 9b0ff27 · 9b0ff27
1 parent 66afc48
commit 9b0ff27
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 18 deletions.
diff --git a/packages/core/src/components/molecules/HeaderBand/HeaderBand.tsx b/packages/core/src/components/molecules/HeaderBand/HeaderBand.tsx
@@ -29,10 +29,10 @@ import {HeaderBandHelper} from '../../../header';
 interface HeaderBandProps {
   color: Color;
   text: string;
-  showIf?: boolean;
+  showIf: boolean;
 }
 
-const HeaderBand = ({color, text, showIf = true}: HeaderBandProps) => {
+const HeaderBand = ({color, text, showIf}: HeaderBandProps) => {
   const Colors = useThemeColor();
 
   const [numberOfLines, setNumberOfLines] = useState<number>(1);

diff --git a/packages/ui/src/components/molecules/SentenceAnimatedScroller/SentenceAnimatedScroller.tsx b/packages/ui/src/components/molecules/SentenceAnimatedScroller/SentenceAnimatedScroller.tsx
@@ -24,21 +24,28 @@ const {width: screenWidth} = Dimensions.get('window');
 interface SentenceScrollerProps {
   sentence: string;
   textStyle?: any;
+  /** Min: 10000 ms */
   duration?: number;
 }
 
+const DURATION_MIN = 1000;
+
 const SentenceAnimatedScroller = ({
   sentence,
   textStyle,
-  duration = 7000,
+  duration = DURATION_MIN,
 }: SentenceScrollerProps) => {
   const scrollX = useRef(new Animated.Value(screenWidth)).current;
   const sentenceWidth = useMemo(() => sentence.length * 8, [sentence]);
 
+  const styles = useMemo(() => {
+    return getStyles(sentenceWidth, scrollX);
+  }, [sentenceWidth, scrollX]);
+
   useEffect(() => {
     const scrollAnimation = Animated.timing(scrollX, {
       toValue: -sentenceWidth,
-      duration,
+      duration: Math.max(duration, DURATION_MIN),
       useNativeDriver: true,
     });
 
@@ -49,28 +56,27 @@ const SentenceAnimatedScroller = ({
     return () => {
       repeatAnimation.stop();
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [duration, scrollX, sentenceWidth]);
 
   return (
     <View style={styles.container}>
-      <Animated.View
-        // eslint-disable-next-line react-native/no-inline-styles
-        style={{
-          flexDirection: 'row',
-          width: sentenceWidth,
-          transform: [{translateX: scrollX}],
-        }}>
+      <Animated.View style={styles.animatedContainer}>
         <Text style={textStyle}>{sentence}</Text>
       </Animated.View>
     </View>
   );
 };
 
-const styles = StyleSheet.create({
-  container: {
-    overflow: 'hidden',
-  },
-});
+const getStyles = (sentenceWidth, scrollX) =>
+  StyleSheet.create({
+    container: {
+      overflow: 'hidden',
+    },
+    animatedContainer: {
+      flexDirection: 'row',
+      width: sentenceWidth,
+      transform: [{translateX: scrollX}],
+    },
+  });
 
 export default SentenceAnimatedScroller;