Skip to content

Commit bfc1146

Browse files
pratt3351pratt3351
authored
Merge pull request #8 from rouge3351/convert-to-typescript
Convert Typescript this project
2 parents e728571 + bc8ab38 commit bfc1146

File tree

9 files changed

+183
-125
lines changed

9 files changed

+183
-125
lines changed

‎package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"name": "react-native-animated-pagination-dot",
33
"version": "0.1.5",
44
"description": "simple pagination dot",
5-
"main": "src/index.js",
5+
"main": "src/index.tsx",
66
"repository": {
77
"type": "git",
88
"url": "git+https://github.com/rouge3351/react-native-animated-pagination-dot.git"
@@ -24,9 +24,9 @@
2424
},
2525
"homepage": "https://github.com/rouge3351/react-native-animated-pagination-dot#readme",
2626
"devDependencies": {
27-
"prop-types": "^15.7.2",
27+
"@types/react-native": "^0.62.2",
2828
"eslint": "^6.3.0",
29-
"metro-react-native-babel-preset": "^0.56.0"
29+
"metro-react-native-babel-preset": "^0.56.0",
3030
},
3131
"peerDependencies": {
3232
"react": ">= 16.x",

src/component/Dot.js renamed to src/component/Dot.tsx

Lines changed: 21 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,28 @@
11
/**
22
*
33
* Created by rouge on 11/09/2019.
4+
* Converted to Typescript on 14/07/2020.
5+
*
46
*/
57
import React from "react";
68
import {Animated} from "react-native";
7-
import PropTypes from 'prop-types';
89

910
import EmptyDot from './EmptyDot';
10-
import GetDotStyle from '../util/GetDotStyle'
11+
import {
12+
IPropsDot,
13+
IStateDot,
14+
} from './types/Dot';
15+
import { getDotStyle } from '../util/DotUtils';
1116

12-
class Dot extends React.Component {
17+
class Dot extends React.Component<IPropsDot, IStateDot> {
1318
constructor (props) {
1419
super(props);
1520

16-
const type = GetDotStyle(props.idx, props.curPage, props.maxPage);
21+
const type = getDotStyle({
22+
idx:props.idx,
23+
curPage:props.curPage,
24+
maxPage:props.maxPage,
25+
});
1726

1827
this.state = {
1928
animVal: new Animated.Value(0),
@@ -25,7 +34,11 @@ class Dot extends React.Component {
2534
}
2635

2736
static getDerivedStateFromProps (nextProps, prevState) {
28-
const nextType = GetDotStyle(nextProps.idx, nextProps.curPage, nextProps.maxPage);
37+
const nextType = getDotStyle({
38+
idx:nextProps.idx,
39+
curPage:nextProps.curPage,
40+
maxPage:nextProps.maxPage,
41+
});
2942
const prevType = prevState.type;
3043

3144
return {
@@ -37,21 +50,22 @@ class Dot extends React.Component {
3750

3851
componentDidUpdate () {
3952

40-
if (this.state.animate === false) return;
53+
if (!this.state.animate) return;
4154

4255
this.state.animVal.setValue(0);
4356

4457
Animated.timing(
4558
this.state.animVal, {
4659
toValue: 1,
4760
duration: 300,
61+
useNativeDriver:false
4862
},
4963
).start();
5064
}
5165

5266

5367
render () {
54-
const { idx, curPage, maxPage } = this.props;
68+
const { idx, curPage } = this.props;
5569
const { prevType, type } = this.state;
5670

5771
if (curPage < 3) {
@@ -102,11 +116,4 @@ class Dot extends React.Component {
102116

103117
}
104118

105-
Dot.propTypes = {
106-
idx: PropTypes.number,
107-
curPage:PropTypes.number,
108-
maxPage:PropTypes.number,
109-
activeColor:PropTypes.string
110-
};
111-
112119
export default Dot;

src/component/EmptyDot.js renamed to src/component/EmptyDot.tsx

File renamed without changes.

‎src/component/types/Dot.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { Animated } from 'react-native';
2+
import { IDotStyle } from '../../util/DotUtils';
3+
4+
export interface IPropsDot {
5+
idx: number;
6+
curPage: number;
7+
maxPage: number;
8+
activeColor: string;
9+
}
10+
11+
export interface IStateDot {
12+
animVal:Animated.Value;
13+
animate: boolean;
14+
prevType: IDotStyle;
15+
type: IDotStyle;
16+
}

src/index.js renamed to src/index.tsx

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,24 @@
11
/**
22
*
33
* Created by rouge on 11/09/2019.
4+
* Converted to Typescript on 14/07/2020.
5+
*
46
*/
57
import React from 'react';
68
import {ScrollView, View, Platform, StyleSheet} from "react-native";
79
import Dot from './component/Dot';
810
import EmptyDot from './component/EmptyDot';
9-
import PropTypes from "prop-types";
11+
12+
export interface IDotContainerProps {
13+
curPage:number;
14+
maxPage:number;
15+
containerWidth?:number;
16+
activeDotColor:string;
17+
}
1018

1119

12-
class DotContainer extends React.Component{
20+
class DotContainer extends React.Component<IDotContainerProps>{
21+
private refScrollView:ScrollView|null = null;
1322

1423
shouldComponentUpdate (nextProps) {
1524
if (this.props.curPage === nextProps.curPage) {
@@ -66,14 +75,15 @@ class DotContainer extends React.Component{
6675
this.scrollTo(this.props.curPage, false);
6776
}}>
6877
<ScrollView
69-
ref="_scrollView"
78+
ref={(ref)=>{
79+
this.refScrollView = ref;
80+
}}
7081
style={ {
7182
maxWidth: containerWidth,
7283
} }
7384
contentContainerStyle={ {
7485
alignItems: 'center',
7586
} }
76-
scalesPageToFit={ Platform.OS === 'android' }
7787
bounces={ false }
7888
horizontal={ true }
7989
scrollEnabled={ false }
@@ -107,7 +117,9 @@ class DotContainer extends React.Component{
107117

108118

109119
scrollTo (index, animated = true) {
110-
this.refs._scrollView.scrollTo({
120+
if(!this.refScrollView) return;
121+
122+
this.refScrollView.scrollTo({
111123
x: Math.max(0, 18 + ( index - 4 ) * 9),
112124
animated,
113125
});
@@ -121,13 +133,4 @@ const styles = StyleSheet.create({
121133
}
122134
});
123135

124-
125-
126-
DotContainer.propTypes = {
127-
containerWidth:PropTypes.number,
128-
curPage:PropTypes.number,
129-
maxPage:PropTypes.number,
130-
activeDotColor:PropTypes.string
131-
};
132-
133136
export default DotContainer;

‎src/util/DotType.js‎

Lines changed: 0 additions & 24 deletions
This file was deleted.

‎src/util/DotUtils.ts‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
export interface IDotStyle {
2+
size:number;
3+
opacity:number;
4+
}
5+
6+
export enum EnumDotType {
7+
ACTIVE,
8+
INACTIVE,
9+
MEDIUM,
10+
SMALL,
11+
}
12+
13+
const DotStyle = {
14+
[EnumDotType.INACTIVE] : {
15+
size: 8,
16+
opacity: 0.2,
17+
},
18+
[EnumDotType.ACTIVE]:{
19+
size: 8,
20+
opacity: 1.0,
21+
},
22+
[EnumDotType.MEDIUM]:{
23+
size: 5,
24+
opacity: 0.2,
25+
},
26+
[EnumDotType.SMALL]:{
27+
size: 3,
28+
opacity: 0.2,
29+
}
30+
31+
}
32+
33+
export type getDotStylePayload = {
34+
idx: number;
35+
curPage: number;
36+
maxPage: number;
37+
}
38+
39+
export const getDotStyle = ({ idx, curPage, maxPage }:getDotStylePayload):IDotStyle => {
40+
let type = EnumDotType.SMALL;
41+
42+
if (maxPage < 5) {
43+
//5개 이하인 경우는 단수이기 때문에 큰 Dot으로만 구성
44+
// return ( idx === curPage ) ? EnumDotType.ACTIVE : EnumDotType.INACTIVE;
45+
return DotStyle[(idx === curPage) ? EnumDotType.ACTIVE : EnumDotType.INACTIVE];
46+
}
47+
48+
if (curPage < 3) {
49+
// 현재 페이지가 3 이하일때는 별도로 배열을 지정해줌
50+
// 배열
51+
// 큰 큰 큰 중
52+
if (idx < 3) {
53+
type = EnumDotType.INACTIVE;
54+
if (curPage === idx) {
55+
type = EnumDotType.ACTIVE;
56+
}
57+
} else if (idx < 4) {
58+
type = EnumDotType.MEDIUM;
59+
} else {
60+
type = EnumDotType.SMALL;
61+
62+
}
63+
} else if (curPage === 3) {
64+
//4번째 페이지 일때 배열은 별도로 지정해줌
65+
// 배열
66+
// 중 큰 큰 큰 중
67+
if (idx < 4) {
68+
if (idx === 0) {
69+
type = EnumDotType.MEDIUM
70+
} else {
71+
type = EnumDotType.INACTIVE;
72+
73+
if (curPage === idx) {
74+
type = EnumDotType.ACTIVE
75+
}
76+
}
77+
} else if (curPage + 1 === idx) {
78+
type = EnumDotType.MEDIUM
79+
} else {
80+
type = EnumDotType.SMALL
81+
}
82+
} else {
83+
//기타는 모두 동일한 로직으로 돌아가도록
84+
if (idx > curPage) {
85+
if (idx === curPage + 1) {
86+
type = EnumDotType.MEDIUM
87+
}
88+
} else if (idx < curPage) {
89+
if (idx >= curPage - 2) {
90+
type = EnumDotType.INACTIVE
91+
} else if (idx === curPage - 3) {
92+
type = EnumDotType.MEDIUM
93+
}
94+
} else {
95+
type = EnumDotType.ACTIVE;
96+
}
97+
}
98+
99+
return DotStyle[type];
100+
};

‎src/util/GetDotStyle.js‎

Lines changed: 0 additions & 70 deletions
This file was deleted.

0 commit comments

Comments
 (0)