Skip to content

Commit 7dc4867

Browse files
pratt3351pratt3351
authored
Merge pull request #52 from Soomgo-Mobile/feature/set-empty-dot-color
Feature/set empty dot color
2 parents 6e316ea + b8abc0a commit 7dc4867

File tree

4 files changed

+69
-15
lines changed

4 files changed

+69
-15
lines changed

‎README.md‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -44,20 +44,21 @@ export default ExampleDotPaginate;
4444
-----
4545
## Example
4646

47-
<img src="https://user-images.githubusercontent.com/4319422/92298858-39a61d80-ef88-11ea-85dd-e7a4a5c115dc.gif" alt="Pagination Dot Demo" width="320"/>
47+
<img src="https://user-images.githubusercontent.com/4319422/189922878-7172d48c-8307-47ac-806a-6255f7bd6d3b.gif" alt="Pagination Dot Demo" width="320"/>
4848

4949
-----
5050
## API
5151

5252
### Props
5353

54-
| **Prop** | **Type** | **Required(Default Value)** | **Description** |
55-
| --------------------------- | ----------------------------| ---------------------------- | --------------------------------------------------- |
56-
| `curPage` | `number` | required | Pagination curernt Page |
57-
| `maxPage` | `number` | required | Total Page in Pagination |
58-
| `activeDotColor` | `string` | required | Active Dot Color. dot will control by opacity |
59-
| `sizeRatio` | `number` | 1.0 | Customize Dot Size. minimum value is 1.0 (*recommend 1.0 ~ 2.0*) |
60-
| `vertical` | `boolean` | false | Dot direction |
54+
| **Prop** | **Type** | **Required(Default Value)** | **Description** |
55+
|--------------------| ----------------------------|----------------------------|----------------------------------------------------------------|
56+
| `curPage` | `number` | required | Pagination curernt Page |
57+
| `maxPage` | `number` | required | Total Page in Pagination |
58+
| `activeDotColor` | `string` | required | Active Dot Color. dot will control by opacity |
59+
| `inactiveDotColor` | `string` | undefined | InActive Dot Color. dot will control by opacity |
60+
| `sizeRatio` | `number` | 1.0 | Customize Dot Size. minimum value is 1.0 (*recommend 1.0 ~ 2.0*) |
61+
| `vertical` | `boolean` | false | Dot direction |
6162

6263
## Contributing
6364

‎examples/src/App.js‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,12 @@ import { View, Text, StatusBar, Button } from 'react-native';
1010

1111
import PaginationDot from 'react-native-animated-pagination-dot';
1212

13-
const TestDotContainer = ({ color, sizeRatio = 1.0, maxPage = 10 }) => {
13+
const TestDotContainer = ({
14+
color,
15+
sizeRatio = 1.0,
16+
maxPage = 10,
17+
inactiveColor,
18+
}) => {
1419
const [page, setPage] = useState(0);
1520

1621
return (
@@ -75,6 +80,7 @@ const TestDotContainer = ({ color, sizeRatio = 1.0, maxPage = 10 }) => {
7580
<PaginationDot
7681
activeDotColor={color}
7782
curPage={page}
83+
inactiveDotColor={inactiveColor ?? undefined}
7884
maxPage={maxPage}
7985
sizeRatio={sizeRatio}
8086
/>
@@ -212,6 +218,12 @@ const App = () => {
212218
>
213219
<TestDotContainer maxPage={20} color={'black'} sizeRatio={1} />
214220
<TestDotContainer maxPage={4} color={'green'} sizeRatio={1.0} />
221+
<TestDotContainer
222+
maxPage={10}
223+
color={'blue'}
224+
inactiveColor={'red'}
225+
sizeRatio={1.0}
226+
/>
215227
<TestDotVerticalContainer maxPage={10} color={'rgb(0,0,120)'} />
216228
<TestDotVerticalContainer
217229
maxPage={4}

‎src/component/Dot.tsx‎

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ const Dot: React.FC<{
1515
curPage: number;
1616
maxPage: number;
1717
activeColor: string;
18+
inactiveColor?: string;
1819
sizeRatio: number;
1920
}> = (props) => {
2021
const [animVal] = useState(new Animated.Value(0));
@@ -26,7 +27,18 @@ const Dot: React.FC<{
2627
maxPage: props.maxPage,
2728
})
2829
);
30+
31+
const [dotColor, setDotColor] = useState<string>(() => {
32+
if (props.curPage === props.idx) {
33+
//its current active page now
34+
return props.activeColor;
35+
}
36+
37+
return props.inactiveColor ?? props.activeColor;
38+
});
39+
2940
const prevType = usePrevious(type);
41+
const prevDotColor = usePrevious<string>(dotColor);
3042

3143
useEffect(() => {
3244
const nextType = getDotStyle({
@@ -38,14 +50,21 @@ const Dot: React.FC<{
3850
const nextAnimate =
3951
nextType.size !== (prevType?.size || 3) ||
4052
nextType.opacity !== (prevType?.opacity || 0.2);
53+
if (props.curPage === props.idx) {
54+
setDotColor(props.activeColor);
55+
} else {
56+
setDotColor(props.inactiveColor ?? props.activeColor);
57+
}
4158

4259
setType(nextType);
4360
setAnimate(nextAnimate);
4461
}, [
4562
prevType?.opacity,
4663
prevType?.size,
64+
props.activeColor,
4765
props.curPage,
4866
props.idx,
67+
props.inactiveColor,
4968
props.maxPage,
5069
]);
5170

@@ -68,9 +87,16 @@ const Dot: React.FC<{
6887
type.size * props.sizeRatio,
6988
],
7089
});
90+
91+
const backgroundColor = animVal.interpolate({
92+
inputRange: [0, 1],
93+
outputRange: [prevDotColor ?? props.activeColor, dotColor],
94+
});
95+
7196
return {
7297
width: size,
7398
height: size,
99+
backgroundColor,
74100
borderRadius: animVal.interpolate({
75101
inputRange: [0, 1],
76102
outputRange: [
@@ -85,8 +111,11 @@ const Dot: React.FC<{
85111
};
86112
}, [
87113
animVal,
114+
dotColor,
115+
prevDotColor,
88116
prevType?.opacity,
89117
prevType?.size,
118+
props.activeColor,
90119
props.sizeRatio,
91120
type.opacity,
92121
type.size,
@@ -102,7 +131,6 @@ const Dot: React.FC<{
102131
<Animated.View
103132
style={[
104133
{
105-
backgroundColor: props.activeColor,
106134
margin: 3 * props.sizeRatio,
107135
},
108136
animStyle,

‎src/index.tsx‎

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,13 @@
55
* Converted to Functional component. on 21/09/2021
66
*/
77
import React, { useCallback, useEffect, useMemo, useRef } from 'react';
8-
import { ScrollView, View, ViewStyle, StyleProp } from 'react-native';
8+
import {
9+
ScrollView,
10+
View,
11+
ViewStyle,
12+
StyleProp,
13+
StyleSheet,
14+
} from 'react-native';
915
import Dot from './component/Dot';
1016
import EmptyDot, { defaultEmptyDotSize } from './component/EmptyDot';
1117
import usePrevious from 'react-use/lib/usePrevious';
@@ -15,6 +21,7 @@ export interface IDotContainerProps {
1521
maxPage: number;
1622
sizeRatio?: number;
1723
activeDotColor: string;
24+
inactiveDotColor?: string;
1825
vertical?: boolean;
1926
}
2027

@@ -79,7 +86,7 @@ const DotContainer: React.FC<IDotContainerProps> = (props) => {
7986
scrollTo(props.curPage);
8087
}, [prevPage, props.curPage, props.maxPage, scrollTo]);
8188

82-
const { curPage, maxPage, activeDotColor } = props;
89+
const { curPage, maxPage, activeDotColor, inactiveDotColor } = props;
8390
const list = useMemo(() => [...Array(maxPage).keys()], [maxPage]);
8491

8592
let normalizedPage = curPage;
@@ -106,6 +113,7 @@ const DotContainer: React.FC<IDotContainerProps> = (props) => {
106113
curPage={normalizedPage}
107114
maxPage={maxPage}
108115
activeColor={activeDotColor}
116+
inactiveColor={inactiveDotColor}
109117
/>
110118
);
111119
})}
@@ -123,9 +131,7 @@ const DotContainer: React.FC<IDotContainerProps> = (props) => {
123131
>
124132
<ScrollView
125133
ref={refScrollView}
126-
contentContainerStyle={{
127-
alignItems: 'center',
128-
}}
134+
contentContainerStyle={styles.scrollViewContainer}
129135
bounces={false}
130136
horizontal={!props.vertical}
131137
scrollEnabled={false}
@@ -145,6 +151,7 @@ const DotContainer: React.FC<IDotContainerProps> = (props) => {
145151
curPage={normalizedPage}
146152
maxPage={maxPage}
147153
activeColor={activeDotColor}
154+
inactiveColor={inactiveDotColor}
148155
/>
149156
);
150157
})}
@@ -157,4 +164,10 @@ const DotContainer: React.FC<IDotContainerProps> = (props) => {
157164
);
158165
};
159166

167+
const styles = StyleSheet.create({
168+
scrollViewContainer: {
169+
alignItems: 'center',
170+
},
171+
});
172+
160173
export default DotContainer;

0 commit comments

Comments
 (0)