Merge pull request #22 from Soomgo-Mobile/feature/remove-unused-types

Feature/remove unused types

Author: pratt3351

src/component/Dot.tsx

@@ -4,11 +4,11 @@
  * Converted to Typescript on 14/07/2020.
  * Converted to Functional component. on 21/09/2021
  */
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { Animated } from 'react-native';
 import { usePrevious } from 'react-use';
 import EmptyDot from './EmptyDot';
-import { getDotStyle, IDotStyle } from '../util/DotUtils';
+import { getDotStyle } from '../util/DotUtils';
 
 const Dot: React.FC<{
   idx: number;
@@ -26,7 +26,7 @@ const Dot: React.FC<{
       maxPage: props.maxPage,
     })
   );
-  const prevType = usePrevious<IDotStyle>(type);
+  const prevType = usePrevious(type);
 
   useEffect(() => {
     const nextType = getDotStyle({
@@ -60,47 +60,52 @@ const Dot: React.FC<{
     }).start();
   }, [animVal, animate, prevType, type]);
 
+  const animStyle = useMemo(() => {
+    const size = animVal.interpolate({
+      inputRange: [0, 1],
+      outputRange: [
+        (prevType?.size || 3) * props.sizeRatio,
+        type.size * props.sizeRatio,
+      ],
+    });
+    return {
+      width: size,
+      height: size,
+      borderRadius: animVal.interpolate({
+        inputRange: [0, 1],
+        outputRange: [
+          (prevType?.size || 3) * props.sizeRatio * 0.5,
+          type.size * props.sizeRatio * 0.5,
+        ],
+      }),
+      opacity: animVal.interpolate({
+        inputRange: [0, 1],
+        outputRange: [prevType?.opacity || 0.2, type.opacity],
+      }),
+    };
+  }, [
+    animVal,
+    prevType?.opacity,
+    prevType?.size,
+    props.sizeRatio,
+    type.opacity,
+    type.size,
+  ]);
+
   if (props.curPage < 3) {
     if (props.idx >= 5) return <EmptyDot sizeRatio={props.sizeRatio} />;
   } else if (props.curPage < 4) {
     if (props.idx > 5) return <EmptyDot sizeRatio={props.sizeRatio} />;
   }
 
-  const opacity = animVal.interpolate({
-    inputRange: [0, 1],
-    outputRange: [prevType?.opacity || 0.2, type.opacity],
-  });
-
-  const size = animVal.interpolate({
-    inputRange: [0, 1],
-    outputRange: [
-      (prevType?.size || 3) * props.sizeRatio,
-      type.size * props.sizeRatio,
-    ],
-  });
-
-  const borderRadius = animVal.interpolate({
-    inputRange: [0, 1],
-    outputRange: [
-      (prevType?.size || 3) * props.sizeRatio * 0.5,
-      type.size * props.sizeRatio * 0.5,
-    ],
-  });
-  const { activeColor } = props;
-
   return (
     <Animated.View
       style={[
         {
-          backgroundColor: activeColor,
+          backgroundColor: props.activeColor,
           margin: 3 * props.sizeRatio,
         },
-        {
-          width: size,
-          height: size,
-          borderRadius: borderRadius,
-          opacity: opacity,
-        },
+        animStyle,
       ]}
     />
   );

src/index.tsx

@@ -32,7 +32,7 @@ const DotContainer: React.FC<IDotContainerProps> = (props) => {
 
   const scrollTo = useCallback<(index: number, animated?: boolean) => void>(
     (index, animated = true) => {
-      if (!refScrollView) return;
+      if (!refScrollView.current) return;
 
       const sizeRatio = getSizeRatio();
       const FIRST_EMPTY_DOT_SPACE = ONE_EMPTY_DOT_SIZE * 2;
@@ -44,15 +44,15 @@ const DotContainer: React.FC<IDotContainerProps> = (props) => {
       );
 
       if (props.vertical) {
-        refScrollView.current?.scrollTo({
+        refScrollView.current.scrollTo({
           x: 0,
           y: moveTo,
           animated,
         });
         return;
       }
 
-      refScrollView.current?.scrollTo({
+      refScrollView.current.scrollTo({
         x: moveTo,
         y: 0,
         animated,

src/util/DotUtils.ts

@@ -1,9 +1,9 @@
-export type IDotStyle = {
+type IDotStyle = {
   size: number;
   opacity: number;
 };
 
-export enum EnumDotType {
+enum EnumDotType {
   ACTIVE,
   INACTIVE,
   MEDIUM,