Merge pull request #11 from rouge3351/update/can-customize-dot-size

Update/can customize dot size
Soomgo-Mobile · Aug 29, 2020 · b792248 · b792248
2 parents 5f3d87e + 0efc987
commit b792248
Show file tree

Hide file tree

Showing 9 changed files with 99 additions and 61 deletions.
diff --git a/README.md b/README.md
@@ -4,7 +4,9 @@ react-native-animated-pagination-dot
 Paginate component for React native simple dot with **moving animation** 
 
 -----
-![download](https://img.shields.io/npm/dm/react-native-animated-pagination-dot.svg) ![npm version](https://badge.fury.io/js/react-native-animated-pagination-dot.svg)
+![download](https://img.shields.io/npm/dm/react-native-animated-pagination-dot?logo=npm&style=flat-square)
+![npm version](https://img.shields.io/npm/v/react-native-animated-pagination-dot?style=flat-square)
+![stars](https://img.shields.io/github/stars/rouge3351/react-native-animated-pagination-dot?logo=github&style=flat-square)
 -----
 
 ## Installation
@@ -40,6 +42,7 @@ class ExampleDotPaginate extends React.Component {
                     activeDotColor={color} 
                     curPage={currentPage} 
                     maxPage={maxPage}
+                    sizeRatio={1.0}
                 />
 
             </View>
@@ -53,19 +56,19 @@ export default ExampleDotPaginate;
 -----
 ## Example
 
-<img src="https://user-images.githubusercontent.com/4319422/64715563-afa1b100-d4fb-11e9-9bc8-abb686b272a0.gif" alt="Pagination Dot Demo" width="400"/>
+<img src="https://user-images.githubusercontent.com/4319422/91634767-df5c0880-ea2d-11ea-90f6-ae7bb4030325.gif" alt="Pagination Dot Demo" width="250"/>
 
 -----
 ## API
 
 ### Props
 
-| **Prop**                    | **Type**                         | **Description**                                     |
-| --------------------------- | -------------------------------- | --------------------------------------------------- |
-| `containerWidth`            | `number`                         | Pagination Dot Container Width ( default 84 ).      |
-| `curPage`                   | `number`                         | Pagination curernt Page                             |
-| `maxPage`                   | `number`                         | Total Page in Pagination                            |
-| `activeDotColor`            | `string`                         | Active Dot Color. dot will control by opacity       |
+| **Prop**                    | **Type**                         | **Description**                                       |
+| --------------------------- | -------------------------------- | ---------------------------------------------------   |
+| `curPage`                   | `number`                         | Pagination curernt Page                               |
+| `maxPage`                   | `number`                         | Total Page in Pagination                              |
+| `activeDotColor`            | `string`                         | Active Dot Color. dot will control by opacity         |
+| `sizeRatio`                 | `number`(default. 1.0)           | Customize Dot Size. minimum value is 1.0 (recommend value is 1.0 ~ 2.0) |
 
 
 ## License

diff --git a/examples/App.js b/examples/App.js
@@ -16,37 +16,45 @@ import {
 
 import PaginationDot from 'react-native-animated-pagination-dot';
 
-const TestDotContainer = ( {color, maxPage=10} )=>{
+const TestDotContainer = ( {color, sizeRatio = 1.0, maxPage=10} )=>{
 
   const [page, setPage] = useState(0);
 
   return (
       <View style={{flex:1,}}>
           <View style={{flex:1, flexDirection:'row'}}>
               <View style={{flex:1, justifyContent:'space-between', flexDirection:'row', alignItems:'center', marginRight:12}}>
-                  <Text style={{ fontSize: 16, fontWeight: '600', color: 'black',}}>current</Text>
-                  <Text style={{ fontSize: 16, fontWeight: '400', color: 'black',}}>{page+1}</Text>
+                  <Text style={{ fontSize: 16, fontWeight: '400', color: 'black',}}>page</Text>
+                  <Text style={{ fontSize: 16, fontWeight: '600', color: 'grey',}}>{page+1} / {maxPage}</Text>
               </View>
-              <View style={{flex:1, justifyContent:'space-between', flexDirection:'row', alignItems:'center', marginLeft:12}}>
-                  <Text style={{ fontSize: 16, fontWeight: '600', color: 'black',}}>max</Text>
-                  <Text style={{ fontSize: 16, fontWeight: '400', color: 'black',}}>{maxPage}</Text>
+              <View style={{flex:1, justifyContent:'space-between', flexDirection:'row', alignItems:'center', marginRight:12}}>
+                  <Text style={{ fontSize: 16, fontWeight: '400', color: 'black',}}>sizeRatio</Text>
+                  <Text style={{ fontSize: 16, fontWeight: '600', color: 'grey',}}>{sizeRatio}</Text>
               </View>
           </View>
+
+
           <View style={{flex:2, justifyContent:'space-between', flexDirection:'row', alignItems:'center' }}>
             <Button
                 title="Prev"
                 onPress={()=>{
                     setPage(page-1);
               }}/>
 
-            <PaginationDot activeDotColor={color} containerWidth={90} curPage={page} maxPage={maxPage}/>
+            <PaginationDot
+                activeDotColor={color}
+                curPage={page}
+                maxPage={maxPage}
+                sizeRatio={sizeRatio}
+            />
 
             <Button
                 title="Next"
                 onPress={()=>{
                     setPage(page+1);
                 }}/>
           </View>
+
       </View>
   )
 }
@@ -63,10 +71,9 @@ const App = () => {
                 color: 'black',}}>Animated Pagination Dots</Text>
           </View>
             <View style={{flex:2, flexDirection:'column', paddingVertical:30, paddingHorizontal:20, marginBottom:20 }}>
-              <TestDotContainer maxPage={20} color={'black'} />
-              <TestDotContainer maxPage={10} color={'red'} />
-              <TestDotContainer maxPage={4}  color={'green'} />
-              <TestDotContainer maxPage={5}  color={'blue'} />
+              <TestDotContainer maxPage={20} color={'black'} sizeRatio={1} />
+              <TestDotContainer maxPage={10} color={'red'} sizeRatio={1.5} />
+              <TestDotContainer maxPage={4}  color={'green'} sizeRatio={1.0} />
             </View>
         </View>
     </View>

diff --git a/examples/ios/Podfile.lock b/examples/ios/Podfile.lock
@@ -105,7 +105,7 @@ DEPENDENCIES:
   - yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
 SPEC REPOS:
-  https://github.com/cocoapods/specs.git:
+  https://github.com/CocoaPods/Specs.git:
     - boost-for-react-native
 
 EXTERNAL SOURCES:
@@ -157,25 +157,25 @@ SPEC CHECKSUMS:
   DoubleConversion: 5805e889d232975c086db112ece9ed034df7a0b2
   Folly: 30e7936e1c45c08d884aa59369ed951a8e68cf51
   glog: 1f3da668190260b06b429bb211bfbee5cd790c28
-  React: c438ccc7e14e86d4702bb92d7e262f549ffaa995
-  React-Core: c76495f5c14e73c0f803b89c3fa83f804da61bd6
-  React-cxxreact: f64bc64cf4682d6ea5a064f6017da72482858682
-  React-DevSupport: 30336bca00f72681eac995d21a31b963e7d5cfec
-  React-jsi: 40f467ff088c811c6630acccb4aea57ea7ccb1b5
-  React-jsiexecutor: e4b4717060a0cd8d0270323b5655a68c95432efd
-  React-jsinspector: 044105eea064aec81adc5e4d777a8f6589e7d094
-  React-RCTActionSheet: 08864c609d9f959abf3d51fdd93f8bc6e91f21eb
-  React-RCTAnimation: a4547e9fac2627ded3df9d302f5558b475faf819
-  React-RCTBlob: 62d5c263a2adb8f7a2cafd601beba18a2d99cbbb
-  React-RCTImage: 963859de2b05d2037d1b7842cdbddc8d7f3a2f3b
-  React-RCTLinking: 5998a7db9a6156ed112b006d01f76b2d1cc83d98
-  React-RCTNetwork: 0b676e8194f3f893db813007d37e37e9820173a3
-  React-RCTSettings: fdd7606f1b6050eced69fc6046d5db6768aefd57
-  React-RCTText: 36c0532feb5521cb295ba80e7e44b70cf1c36fc7
-  React-RCTVibration: dabb8d59bb47e1d9124b3f77bfdc1b33d42b0a74
-  React-RCTWebSocket: 2e7f6e98fd6d2bf447d145e499c3a235cc13e350
-  yoga: 88c514f310aff89b94a14c5fbf44b95735af0cb7
+  React: 53c53c4d99097af47cf60594b8706b4e3321e722
+  React-Core: ba421f6b4f4cbe2fb17c0b6fc675f87622e78a64
+  React-cxxreact: 8384287780c4999351ad9b6e7a149d9ed10a2395
+  React-DevSupport: 197fb409737cff2c4f9986e77c220d7452cb9f9f
+  React-jsi: 4d8c9efb6312a9725b18d6fc818ffc103f60fec2
+  React-jsiexecutor: 90ad2f9db09513fc763bc757fdc3c4ff8bde2a30
+  React-jsinspector: e08662d1bf5b129a3d556eb9ea343a3f40353ae4
+  React-RCTActionSheet: b0f1ea83f4bf75fb966eae9bfc47b78c8d3efd90
+  React-RCTAnimation: 359ba1b5690b1e87cc173558a78e82d35919333e
+  React-RCTBlob: 5e2b55f76e9a1c7ae52b826923502ddc3238df24
+  React-RCTImage: f5f1c50922164e89bdda67bcd0153952a5cfe719
+  React-RCTLinking: d0ecbd791e9ddddc41fa1f66b0255de90e8ee1e9
+  React-RCTNetwork: e26946300b0ab7bb6c4a6348090e93fa21f33a9d
+  React-RCTSettings: d0d37cb521b7470c998595a44f05847777cc3f42
+  React-RCTText: b074d89033583d4f2eb5faf7ea2db3a13c7553a2
+  React-RCTVibration: 2105b2e0e2b66a6408fc69a46c8a7fb5b2fdade0
+  React-RCTWebSocket: cd932a16b7214898b6b7f788c8bddb3637246ac4
+  yoga: 312528f5bbbba37b4dcea5ef00e8b4033fdd9411
 
 PODFILE CHECKSUM: a3a53e6abc12f076194e8f2e182cc122fa168741
 
-COCOAPODS: 1.5.3
+COCOAPODS: 1.9.1
diff --git a/examples/package.json b/examples/package.json
@@ -9,7 +9,7 @@
   "dependencies": {
     "react": "16.8.6",
     "react-native": "0.60.5",
-    "react-native-animated-pagination-dot": "^0.1.2"
+    "react-native-animated-pagination-dot": "^0.1.6"
   },
   "devDependencies": {
     "@babel/core": "^7.5.0",

diff --git a/package.json b/package.json
@@ -7,7 +7,9 @@
     "type": "git",
     "url": "git+https://github.com/rouge3351/react-native-animated-pagination-dot.git"
   },
-  "publishConfig": { "registry": "https://npm.pkg.github.com/" },
+  "publishConfig": {
+    "registry": "https://npm.pkg.github.com/"
+  },
   "keywords": [
     "pagination",
     "dot",

diff --git a/src/component/Dot.tsx b/src/component/Dot.tsx
@@ -65,19 +65,19 @@ class Dot extends React.Component<IPropsDot, IStateDot> {
 
 
     render () {
-        const { idx, curPage } = this.props;
+        const { idx, curPage, sizeRatio } = this.props;
         const { prevType, type } = this.state;
 
         if (curPage < 3) {
             if (idx >= 5)
                 return (
-                    <EmptyDot />
+                    <EmptyDot sizeRatio={sizeRatio} />
                 );
 
         } else if (curPage < 4) {
             if (idx > 5)
                 return (
-                    <EmptyDot />
+                    <EmptyDot sizeRatio={sizeRatio} />
                 );
         }
 
@@ -89,12 +89,12 @@ class Dot extends React.Component<IPropsDot, IStateDot> {
 
         const size = this.state.animVal.interpolate({
             inputRange: [ 0, 1 ],
-            outputRange: [ prevType.size, type.size ]
+            outputRange: [ prevType.size * sizeRatio, type.size * sizeRatio ]
         });
 
         const borderRadius = this.state.animVal.interpolate({
             inputRange: [ 0, 1 ],
-            outputRange: [ prevType.size * 0.5, type.size * 0.5 ]
+            outputRange: [ prevType.size * sizeRatio * 0.5, type.size * sizeRatio * 0.5 ]
         });
 
         const {activeColor} = this.props;
@@ -104,7 +104,7 @@ class Dot extends React.Component<IPropsDot, IStateDot> {
             <Animated.View
                 style={ [ {
                     backgroundColor: activeColor,
-                    margin: 3,
+                    margin: 3 * sizeRatio,
                 }, {
                     width: size,
                     height: size,

diff --git a/src/component/EmptyDot.tsx b/src/component/EmptyDot.tsx
@@ -4,16 +4,21 @@
  */
 import React from 'react';
 import {View} from 'react-native';
+import {IPropEmptyDot} from "./types/Dot";
+
+export const defaultEmptyDotSize = 3;
+
+
+const EmptyDot = (props:IPropEmptyDot):React.FunctionComponentElement<IPropEmptyDot>=>{
 
-const EmptyDot = ()=>{
     return (
         <View
             style={ {
                 backgroundColor: 'white',
                 opacity: 0.0,
-                width: 3,
-                height: 3,
-                margin: 3,
+                width: defaultEmptyDotSize * props.sizeRatio,
+                height: defaultEmptyDotSize * props.sizeRatio,
+                margin: defaultEmptyDotSize * props.sizeRatio,
             } } />
     )
 };

diff --git a/src/component/types/Dot.ts b/src/component/types/Dot.ts
@@ -6,11 +6,16 @@ export interface IPropsDot {
     curPage: number;
     maxPage: number;
     activeColor: string;
+    sizeRatio: number;
 }
 
 export interface IStateDot {
     animVal:Animated.Value;
     animate: boolean;
     prevType: IDotStyle;
     type: IDotStyle;
-}
+}
+
+export interface IPropEmptyDot {
+    sizeRatio:number;
+}
diff --git a/src/index.tsx b/src/index.tsx
@@ -7,15 +7,16 @@
 import React from 'react';
 import {ScrollView, View, Platform, StyleSheet} from "react-native";
 import Dot from './component/Dot';
-import EmptyDot from './component/EmptyDot';
+import EmptyDot, {defaultEmptyDotSize} from './component/EmptyDot';
 
 export interface IDotContainerProps {
     curPage:number;
     maxPage:number;
-    containerWidth?:number;
+    sizeRatio?:number;
     activeDotColor:string;
 }
 
+const ONE_EMPTY_DOT_SIZE = defaultEmptyDotSize * defaultEmptyDotSize;
 
 class DotContainer extends React.Component<IDotContainerProps>{
     private refScrollView:ScrollView|null = null;
@@ -47,6 +48,7 @@ class DotContainer extends React.Component<IDotContainerProps>{
         if(curPage > maxPage-1){
             normalizedPage = maxPage-1
         }
+        const sizeRatio = this.getSizeRatio();
 
         if (maxPage < 5) {
             return (
@@ -56,6 +58,7 @@ class DotContainer extends React.Component<IDotContainerProps>{
                             <Dot
                                 key={ i }
                                 idx={ i }
+                                sizeRatio={sizeRatio}
                                 curPage={ normalizedPage }
                                 maxPage={ maxPage }
                                 activeColor={activeDotColor}
@@ -66,7 +69,7 @@ class DotContainer extends React.Component<IDotContainerProps>{
             )
         }
 
-        const { containerWidth = 84 } = this.props;
+        const containerWidth = 84;
 
         return (
             <View style={ styles.container }
@@ -79,7 +82,7 @@ class DotContainer extends React.Component<IDotContainerProps>{
                         this.refScrollView = ref;
                     }}
                     style={ {
-                        maxWidth: containerWidth,
+                        maxWidth: containerWidth * sizeRatio,
                     } }
                     contentContainerStyle={ {
                         alignItems: 'center',
@@ -90,13 +93,14 @@ class DotContainer extends React.Component<IDotContainerProps>{
                     showsHorizontalScrollIndicator={ false }>
 
                     {/* previous empty dummy dot */}
-                    <EmptyDot />
-                    <EmptyDot />
+                    <EmptyDot sizeRatio={sizeRatio} />
+                    <EmptyDot sizeRatio={sizeRatio} />
 
 
                     { list.map(i => {
                         return (
                             <Dot
+                                sizeRatio={sizeRatio}
                                 key={ i }
                                 idx={ i }
                                 curPage={ normalizedPage }
@@ -107,8 +111,8 @@ class DotContainer extends React.Component<IDotContainerProps>{
                     }) }
 
                     {/* previous empty dummy dot */}
-                    <EmptyDot />
-                    <EmptyDot />
+                    <EmptyDot sizeRatio={sizeRatio} />
+                    <EmptyDot sizeRatio={sizeRatio} />
 
                 </ScrollView>
             </View>
@@ -118,12 +122,24 @@ class DotContainer extends React.Component<IDotContainerProps>{
 
     scrollTo (index, animated = true) {
         if(!this.refScrollView) return;
+        const sizeRatio = this.getSizeRatio();
+
+        const FIRST_EMPTY_DOT_SPACE = ONE_EMPTY_DOT_SIZE * 2;
+
+        const MOVE_DISTANCE = ONE_EMPTY_DOT_SIZE * sizeRatio;
 
         this.refScrollView.scrollTo({
-            x: Math.max(0, 18 + ( index - 4 ) * 9),
+            x: Math.max(0, FIRST_EMPTY_DOT_SPACE + ( index - 4 ) * MOVE_DISTANCE),
             animated,
         });
     }
+
+    getSizeRatio () {
+        if(!this.props.sizeRatio)
+            return 1.0;
+
+        return Math.max(1.0, this.props.sizeRatio);
+    }
 }
 
 const styles = StyleSheet.create({