Merge pull request weahforsage#8 from rouge3351/convert-to-typescript

Convert Typescript this project

package.json

@@ -2,7 +2,7 @@
   "name": "react-native-animated-pagination-dot",
   "version": "0.1.5",
   "description": "simple pagination dot",
-  "main": "src/index.js",
+  "main": "src/index.tsx",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/rouge3351/react-native-animated-pagination-dot.git"
@@ -24,9 +24,9 @@
   },
   "homepage": "https://github.com/rouge3351/react-native-animated-pagination-dot#readme",
   "devDependencies": {
-    "prop-types": "^15.7.2",
+    "@types/react-native": "^0.62.2",
     "eslint": "^6.3.0",
-    "metro-react-native-babel-preset": "^0.56.0"
+    "metro-react-native-babel-preset": "^0.56.0",
   },
   "peerDependencies": {
     "react": ">= 16.x",

src/component/Dot.js → src/component/Dot.tsx

@@ -1,19 +1,28 @@
 /**
  *
  * Created by rouge on 11/09/2019.
+ * Converted to Typescript on 14/07/2020.
+ *
  */
 import React from "react";
 import {Animated} from "react-native";
-import PropTypes from 'prop-types';
 
 import EmptyDot from './EmptyDot';
-import GetDotStyle from '../util/GetDotStyle'
+import {
+    IPropsDot,
+    IStateDot,
+} from './types/Dot';
+import { getDotStyle } from '../util/DotUtils';
 
-class Dot extends React.Component {
+class Dot extends React.Component<IPropsDot, IStateDot> {
     constructor (props) {
         super(props);
 
-        const type = GetDotStyle(props.idx, props.curPage, props.maxPage);
+        const type = getDotStyle({
+            idx:props.idx,
+            curPage:props.curPage,
+            maxPage:props.maxPage,
+        });
 
         this.state = {
             animVal: new Animated.Value(0),
@@ -25,7 +34,11 @@ class Dot extends React.Component {
     }
 
     static getDerivedStateFromProps (nextProps, prevState) {
-        const nextType = GetDotStyle(nextProps.idx, nextProps.curPage, nextProps.maxPage);
+        const nextType = getDotStyle({
+            idx:nextProps.idx,
+            curPage:nextProps.curPage,
+            maxPage:nextProps.maxPage,
+        });
         const prevType = prevState.type;
 
         return {
@@ -37,21 +50,22 @@ class Dot extends React.Component {
 
     componentDidUpdate () {
 
-        if (this.state.animate === false) return;
+        if (!this.state.animate) return;
 
         this.state.animVal.setValue(0);
 
         Animated.timing(
             this.state.animVal, {
                 toValue: 1,
                 duration: 300,
+                useNativeDriver:false
             },
         ).start();
     }
 
 
     render () {
-        const { idx, curPage, maxPage } = this.props;
+        const { idx, curPage } = this.props;
         const { prevType, type } = this.state;
 
         if (curPage < 3) {
@@ -102,11 +116,4 @@ class Dot extends React.Component {
 
 }
 
-Dot.propTypes = {
-    idx: PropTypes.number,
-    curPage:PropTypes.number,
-    maxPage:PropTypes.number,
-    activeColor:PropTypes.string
-};
-
 export default Dot;

src/component/types/Dot.ts

@@ -0,0 +1,16 @@
+import { Animated } from 'react-native';
+import { IDotStyle } from '../../util/DotUtils';
+
+export interface IPropsDot {
+    idx: number;
+    curPage: number;
+    maxPage: number;
+    activeColor: string;
+}
+
+export interface IStateDot {
+    animVal:Animated.Value;
+    animate: boolean;
+    prevType: IDotStyle;
+    type: IDotStyle;
+}

src/index.js → src/index.tsx

@@ -1,15 +1,24 @@
 /**
  *
  * Created by rouge on 11/09/2019.
+ * Converted to Typescript on 14/07/2020.
+ *
  */
 import React from 'react';
 import {ScrollView, View, Platform, StyleSheet} from "react-native";
 import Dot from './component/Dot';
 import EmptyDot from './component/EmptyDot';
-import PropTypes from "prop-types";
+
+export interface IDotContainerProps {
+    curPage:number;
+    maxPage:number;
+    containerWidth?:number;
+    activeDotColor:string;
+}
 
 
-class DotContainer extends React.Component{
+class DotContainer extends React.Component<IDotContainerProps>{
+    private refScrollView:ScrollView|null = null;
 
     shouldComponentUpdate (nextProps) {
         if (this.props.curPage === nextProps.curPage) {
@@ -66,14 +75,15 @@ class DotContainer extends React.Component{
                     this.scrollTo(this.props.curPage, false);
                 }}>
                 <ScrollView
-                    ref="_scrollView"
+                    ref={(ref)=>{
+                        this.refScrollView = ref;
+                    }}
                     style={ {
                         maxWidth: containerWidth,
                     } }
                     contentContainerStyle={ {
                         alignItems: 'center',
                     } }
-                    scalesPageToFit={ Platform.OS === 'android' }
                     bounces={ false }
                     horizontal={ true }
                     scrollEnabled={ false }
@@ -107,7 +117,9 @@ class DotContainer extends React.Component{
 
 
     scrollTo (index, animated = true) {
-        this.refs._scrollView.scrollTo({
+        if(!this.refScrollView) return;
+
+        this.refScrollView.scrollTo({
             x: Math.max(0, 18 + ( index - 4 ) * 9),
             animated,
         });
@@ -121,13 +133,4 @@ const styles = StyleSheet.create({
     }
 });
 
-
-
-DotContainer.propTypes = {
-    containerWidth:PropTypes.number,
-    curPage:PropTypes.number,
-    maxPage:PropTypes.number,
-    activeDotColor:PropTypes.string
-};
-
 export default DotContainer;

src/util/DotUtils.ts

@@ -0,0 +1,100 @@
+export interface IDotStyle {
+    size:number;
+    opacity:number;
+}
+
+export enum EnumDotType {
+    ACTIVE,
+    INACTIVE,
+    MEDIUM,
+    SMALL,
+}
+
+const DotStyle = {
+    [EnumDotType.INACTIVE] : {
+        size: 8,
+        opacity: 0.2,
+    },
+    [EnumDotType.ACTIVE]:{
+        size: 8,
+        opacity: 1.0,
+    },
+    [EnumDotType.MEDIUM]:{
+        size: 5,
+        opacity: 0.2,
+    },
+    [EnumDotType.SMALL]:{
+        size: 3,
+        opacity: 0.2,
+    }
+
+}
+
+export type getDotStylePayload = {
+   idx: number;
+   curPage: number;
+   maxPage: number;
+}
+
+export const getDotStyle = ({ idx, curPage, maxPage }:getDotStylePayload):IDotStyle => {
+    let type = EnumDotType.SMALL;
+
+    if (maxPage < 5) {
+        //5개 이하인 경우는 단수이기 때문에 큰 Dot으로만 구성
+        // return ( idx === curPage ) ? EnumDotType.ACTIVE : EnumDotType.INACTIVE;
+        return DotStyle[(idx === curPage) ? EnumDotType.ACTIVE : EnumDotType.INACTIVE];
+    }
+
+    if (curPage < 3) {
+        // 현재 페이지가 3 이하일때는 별도로 배열을 지정해줌
+        // 배열
+        // 큰 큰 큰 중
+        if (idx < 3) {
+            type = EnumDotType.INACTIVE;
+            if (curPage === idx) {
+                type = EnumDotType.ACTIVE;
+            }
+        } else if (idx < 4) {
+            type = EnumDotType.MEDIUM;
+        } else {
+            type = EnumDotType.SMALL;
+
+        }
+    } else if (curPage === 3) {
+        //4번째 페이지 일때 배열은 별도로 지정해줌
+        // 배열
+        // 중 큰 큰 큰 중
+        if (idx < 4) {
+            if (idx === 0) {
+                type = EnumDotType.MEDIUM
+            } else {
+                type = EnumDotType.INACTIVE;
+
+                if (curPage === idx) {
+                    type = EnumDotType.ACTIVE
+                }
+            }
+        } else if (curPage + 1 === idx) {
+            type = EnumDotType.MEDIUM
+        } else {
+            type = EnumDotType.SMALL
+        }
+    } else {
+        //기타는 모두 동일한 로직으로 돌아가도록
+        if (idx > curPage) {
+            if (idx === curPage + 1) {
+                type = EnumDotType.MEDIUM
+            }
+        } else if (idx < curPage) {
+            if (idx >= curPage - 2) {
+                type = EnumDotType.INACTIVE
+            } else if (idx === curPage - 3) {
+                type = EnumDotType.MEDIUM
+            }
+        } else {
+            type = EnumDotType.ACTIVE;
+        }
+    }
+
+    return DotStyle[type];
+};