From 07a22b11a9f11f5e1d490796f201549fc45f3ff5 Mon Sep 17 00:00:00 2001 From: pavel Date: Tue, 6 Jul 2021 11:37:23 +1000 Subject: [PATCH 1/5] =?UTF-8?q?(#fixTypes)=20=D0=B8=D1=81=D0=BF=D1=80?= =?UTF-8?q?=D0=B0=D0=B2=D0=BB=D0=B5=D0=BD=D1=8B=20=D1=82=D0=B8=D0=BF=D1=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - исправлен tsconfig.json - добавлен props сстиля точки --- package.json | 3 +++ src/component/Dot.tsx | 10 +++++----- src/component/EmptyDot.tsx | 12 ++++++------ src/component/types/Dot.ts | 4 +++- src/index.tsx | 6 +++--- tsconfig.json | 1 - 6 files changed, 20 insertions(+), 16 deletions(-) diff --git a/package.json b/package.json index b733184..3e5357e 100644 --- a/package.json +++ b/package.json @@ -31,5 +31,8 @@ "peerDependencies": { "react": ">= 16.x", "react-native": ">=0.40.x" + }, + "dependencies": { + "typescript": "^4.3.5" } } diff --git a/src/component/Dot.tsx b/src/component/Dot.tsx index 82448c0..f1a6d4e 100644 --- a/src/component/Dot.tsx +++ b/src/component/Dot.tsx @@ -15,7 +15,7 @@ import { import { getDotStyle } from '../util/DotUtils'; class Dot extends React.Component { - constructor (props) { + constructor (props: IPropsDot) { super(props); const type = getDotStyle({ @@ -33,7 +33,7 @@ class Dot extends React.Component { } - static getDerivedStateFromProps (nextProps, prevState) { + static getDerivedStateFromProps (nextProps: IPropsDot, prevState: IStateDot) { const nextType = getDotStyle({ idx:nextProps.idx, curPage:nextProps.curPage, @@ -65,7 +65,7 @@ class Dot extends React.Component { render () { - const { idx, curPage, sizeRatio } = this.props; + const { idx, curPage, sizeRatio, activeStyle} = this.props; const { prevType, type } = this.state; if (curPage < 3) { @@ -97,7 +97,7 @@ class Dot extends React.Component { outputRange: [ prevType.size * sizeRatio * 0.5, type.size * sizeRatio * 0.5 ] }); - const {activeColor} = this.props; + const { activeColor } = this.props; return ( @@ -110,7 +110,7 @@ class Dot extends React.Component { height: size, borderRadius: borderRadius, opacity: opacity, - } ] } /> + }, activeStyle ] } /> ) } diff --git a/src/component/EmptyDot.tsx b/src/component/EmptyDot.tsx index 780e02a..59ab1b9 100644 --- a/src/component/EmptyDot.tsx +++ b/src/component/EmptyDot.tsx @@ -9,17 +9,17 @@ import {IPropEmptyDot} from "./types/Dot"; export const defaultEmptyDotSize = 3; -const EmptyDot = (props:IPropEmptyDot):React.FunctionComponentElement=>{ +const EmptyDot = ({ sizeRatio, inActiveStyle }:IPropEmptyDot):React.FunctionComponentElement=>{ return ( + width: defaultEmptyDotSize * sizeRatio, + height: defaultEmptyDotSize * sizeRatio, + margin: defaultEmptyDotSize * sizeRatio, + }, inActiveStyle] } /> ) }; diff --git a/src/component/types/Dot.ts b/src/component/types/Dot.ts index 9a1d8b5..fb8124c 100644 --- a/src/component/types/Dot.ts +++ b/src/component/types/Dot.ts @@ -1,4 +1,4 @@ -import { Animated } from 'react-native'; +import { Animated, ViewStyle } from 'react-native'; import { IDotStyle } from '../../util/DotUtils'; export interface IPropsDot { @@ -7,6 +7,7 @@ export interface IPropsDot { maxPage: number; activeColor: string; sizeRatio: number; + activeStyle?: ViewStyle } export interface IStateDot { @@ -18,4 +19,5 @@ export interface IStateDot { export interface IPropEmptyDot { sizeRatio:number; + inActiveStyle?: ViewStyle } diff --git a/src/index.tsx b/src/index.tsx index 416eb85..9e0ee9c 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -22,7 +22,7 @@ const ONE_EMPTY_DOT_SIZE = defaultEmptyDotSize * defaultEmptyDotSize; class DotContainer extends React.Component{ private refScrollView:ScrollView|null = null; - shouldComponentUpdate (nextProps) { + shouldComponentUpdate (nextProps: IDotContainerProps) { if (this.props.curPage === nextProps.curPage) { // prevent unnecessary re-render caused by external change return false; @@ -31,7 +31,7 @@ class DotContainer extends React.Component{ return true; } - componentDidUpdate (prevProps){ + componentDidUpdate (prevProps: IDotContainerProps){ if (this.props.maxPage > 4 && prevProps.curPage !== this.props.curPage) this.scrollTo(this.props.curPage) } @@ -120,7 +120,7 @@ class DotContainer extends React.Component{ } - scrollTo (index, animated = true) { + scrollTo (index: number, animated = true) { if(!this.refScrollView) return; const sizeRatio = this.getSizeRatio(); diff --git a/tsconfig.json b/tsconfig.json index 4a8f910..2d19a32 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -16,7 +16,6 @@ "noEmit": true, "module": "esnext", "target": "es5", - "noImplicitAny": false, "sourceMap": true, "strict": true, "downlevelIteration": true From a607d80d6be2e0894337b1cae99aef7ad90edb50 Mon Sep 17 00:00:00 2001 From: pavel Date: Tue, 6 Jul 2021 11:44:17 +1000 Subject: [PATCH 2/5] =?UTF-8?q?(#fixTypes)=20=20=D0=B4=D0=BE=D0=B1=D0=B0?= =?UTF-8?q?=D0=B2=D0=BB=D0=B5=D0=BD=20props=20=D1=81=D1=81=D1=82=D0=B8?= =?UTF-8?q?=D0=BB=D1=8F=20=D1=82=D0=BE=D1=87=D0=BA=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/index.tsx | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/src/index.tsx b/src/index.tsx index 9e0ee9c..9b12260 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -15,6 +15,8 @@ export interface IDotContainerProps { sizeRatio?:number; activeDotColor:string; vertical?:boolean; + activeStyle?: ViewStyle + inActiveStyle?: ViewStyle } const ONE_EMPTY_DOT_SIZE = defaultEmptyDotSize * defaultEmptyDotSize; @@ -37,7 +39,7 @@ class DotContainer extends React.Component{ } render () { - const { curPage, maxPage, activeDotColor } = this.props; + const { curPage, maxPage, activeDotColor, activeStyle, inActiveStyle } = this.props; const list = [ ...Array(maxPage).keys() ]; @@ -65,6 +67,7 @@ class DotContainer extends React.Component{ curPage={ normalizedPage } maxPage={ maxPage } activeColor={activeDotColor} + activeStyle={activeStyle} /> ); }) } @@ -93,8 +96,8 @@ class DotContainer extends React.Component{ showsHorizontalScrollIndicator={ false }> {/* previous empty dummy dot */} - - + + { list.map(i => { @@ -106,13 +109,14 @@ class DotContainer extends React.Component{ curPage={ normalizedPage } maxPage={ maxPage } activeColor={activeDotColor} + activeStyle={activeStyle} /> ); }) } {/* previous empty dummy dot */} - - + + From 211f047fbb1eff6b8aaf97a03d620949bae7f1ec Mon Sep 17 00:00:00 2001 From: Pavel Date: Tue, 17 Jan 2023 14:39:49 +1000 Subject: [PATCH 3/5] feat: dot_style - added active/inactive dot style --- src/component/Dot.tsx | 4 +++- src/component/EmptyDot.tsx | 4 +++- src/index.tsx | 21 ++++++++++++++++----- 3 files changed, 22 insertions(+), 7 deletions(-) diff --git a/src/component/Dot.tsx b/src/component/Dot.tsx index b4184fa..357c1e9 100644 --- a/src/component/Dot.tsx +++ b/src/component/Dot.tsx @@ -5,7 +5,7 @@ * Converted to Functional component. on 21/09/2021 */ import React, { useEffect, useMemo, useState } from 'react'; -import { Animated } from 'react-native'; +import { Animated, ViewStyle } from 'react-native'; import usePrevious from 'react-use/lib/usePrevious'; import EmptyDot from './EmptyDot'; import { getDotStyle } from '../util/DotUtils'; @@ -17,6 +17,7 @@ const Dot: React.FC<{ activeColor: string; inactiveColor?: string; sizeRatio: number; + activeStyle?: ViewStyle; }> = (props) => { const [animVal] = useState(new Animated.Value(0)); const [animate, setAnimate] = useState(false); @@ -133,6 +134,7 @@ const Dot: React.FC<{ { margin: 3 * props.sizeRatio, }, + props.activeStyle, animStyle, ]} /> diff --git a/src/component/EmptyDot.tsx b/src/component/EmptyDot.tsx index 68bfad1..0544972 100644 --- a/src/component/EmptyDot.tsx +++ b/src/component/EmptyDot.tsx @@ -3,12 +3,13 @@ * Converted to Functional component. on 21/09/2021 */ import React from 'react'; -import { StyleSheet, View } from 'react-native'; +import { StyleSheet, View, ViewStyle } from 'react-native'; export const defaultEmptyDotSize = 3; const EmptyDot: React.FC<{ sizeRatio: number; + inActiveStyle?: ViewStyle; }> = (props) => { return ( ); diff --git a/src/index.tsx b/src/index.tsx index ed559fe..a28ca98 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -23,6 +23,8 @@ export interface IDotContainerProps { activeDotColor: string; inactiveDotColor?: string; vertical?: boolean; + activeStyle: ViewStyle; + inActiveStyle: ViewStyle; } const ONE_EMPTY_DOT_SIZE = defaultEmptyDotSize * defaultEmptyDotSize; @@ -86,7 +88,14 @@ const DotContainer: React.FC = (props) => { scrollTo(props.curPage); }, [prevPage, props.curPage, props.maxPage, scrollTo]); - const { curPage, maxPage, activeDotColor, inactiveDotColor } = props; + const { + curPage, + maxPage, + activeDotColor, + inactiveDotColor, + activeStyle, + inActiveStyle, + } = props; const list = useMemo(() => [...Array(maxPage).keys()], [maxPage]); let normalizedPage = curPage; @@ -114,6 +123,7 @@ const DotContainer: React.FC = (props) => { maxPage={maxPage} activeColor={activeDotColor} inactiveColor={inactiveDotColor} + activeStyle={activeStyle} /> ); })} @@ -139,8 +149,8 @@ const DotContainer: React.FC = (props) => { showsHorizontalScrollIndicator={false} > {/* previous empty dummy dot */} - - + + {list.map((i) => { return ( @@ -152,13 +162,14 @@ const DotContainer: React.FC = (props) => { maxPage={maxPage} activeColor={activeDotColor} inactiveColor={inactiveDotColor} + activeStyle={activeStyle} /> ); })} {/* previous empty dummy dot */} - - + + ); From a1d277e6d49f322716e4256ac76dd8da5c0c0177 Mon Sep 17 00:00:00 2001 From: Pavel Date: Tue, 17 Jan 2023 14:58:58 +1000 Subject: [PATCH 4/5] feat: dot_style - fixed active dot style --- src/component/Dot.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/component/Dot.tsx b/src/component/Dot.tsx index 357c1e9..9e30139 100644 --- a/src/component/Dot.tsx +++ b/src/component/Dot.tsx @@ -134,8 +134,8 @@ const Dot: React.FC<{ { margin: 3 * props.sizeRatio, }, - props.activeStyle, animStyle, + props.activeStyle, ]} /> ); From 9f6bad107f29906ca0e65e3c6f43a04c3f864419 Mon Sep 17 00:00:00 2001 From: Pavel Date: Tue, 17 Jan 2023 15:07:42 +1000 Subject: [PATCH 5/5] feat: dot_style - fixed active dot style --- src/component/Dot.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/component/Dot.tsx b/src/component/Dot.tsx index 9e30139..d8ffd3f 100644 --- a/src/component/Dot.tsx +++ b/src/component/Dot.tsx @@ -109,6 +109,7 @@ const Dot: React.FC<{ inputRange: [0, 1], outputRange: [prevType?.opacity || 0.2, type.opacity], }), + ...props.activeStyle, }; }, [ animVal, @@ -120,6 +121,7 @@ const Dot: React.FC<{ props.sizeRatio, type.opacity, type.size, + props.activeStyle, ]); if (props.curPage < 3) { @@ -135,7 +137,6 @@ const Dot: React.FC<{ margin: 3 * props.sizeRatio, }, animStyle, - props.activeStyle, ]} /> );