From 62648f80d193d5c4f92475dd7f46bb35737e9e0b Mon Sep 17 00:00:00 2001 From: Mainuddin Ahmed Date: Thu, 5 Sep 2024 23:12:58 +0600 Subject: [PATCH] Update dependencies and fix the linting errors --- package.json | 1 + src/carousel/Carousel.js | 67 +++++++++++++++--------------- src/pagination/Pagination.js | 17 ++++---- src/pagination/PaginationDot.js | 11 ++--- src/parallaximage/ParallaxImage.js | 5 ++- 5 files changed, 53 insertions(+), 48 deletions(-) diff --git a/package.json b/package.json index 7304e37ce..0a9903151 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,7 @@ "author": "Meliorence (github.com/meliorence)", "license": "BSD-3-Clause", "dependencies": { + "deprecated-react-native-prop-types": "^5.0.0", "prop-types": "^15.6.1", "react-addons-shallow-compare": "15.6.2" }, diff --git a/src/carousel/Carousel.js b/src/carousel/Carousel.js index dae71a3da..50e81896e 100644 --- a/src/carousel/Carousel.js +++ b/src/carousel/Carousel.js @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import { Animated, Easing, FlatList, I18nManager, Platform, ScrollView, View, ViewPropTypes } from 'react-native'; +import { Animated, Easing, FlatList, I18nManager, Platform, ScrollView, View } from 'react-native'; import PropTypes from 'prop-types'; import shallowCompare from 'react-addons-shallow-compare'; import { @@ -11,6 +11,7 @@ import { stackAnimatedStyles, tinderAnimatedStyles } from '../utils/animations'; +import { ViewPropTypes } from 'deprecated-react-native-prop-types'; const IS_IOS = Platform.OS === 'ios'; @@ -43,8 +44,8 @@ export default class Carousel extends Component { autoplayDelay: PropTypes.number, autoplayInterval: PropTypes.number, callbackOffsetMargin: PropTypes.number, - containerCustomStyle: ViewPropTypes ? ViewPropTypes.style : View.propTypes.style, - contentContainerCustomStyle: ViewPropTypes ? ViewPropTypes.style : View.propTypes.style, + containerCustomStyle: ViewPropTypes ? ViewPropTypes.style : View.propTypes?.style, + contentContainerCustomStyle: ViewPropTypes ? ViewPropTypes.style : View.propTypes?.style, enableMomentum: PropTypes.bool, enableSnap: PropTypes.bool, firstItem: PropTypes.number, @@ -61,7 +62,7 @@ export default class Carousel extends Component { scrollEnabled: PropTypes.bool, scrollInterpolator: PropTypes.func, slideInterpolatedStyle: PropTypes.func, - slideStyle: ViewPropTypes ? ViewPropTypes.style : View.propTypes.style, + slideStyle: ViewPropTypes ? ViewPropTypes.style : View.propTypes?.style, shouldOptimizeUpdates: PropTypes.bool, swipeThreshold: PropTypes.number, useScrollView: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]), @@ -263,7 +264,7 @@ export default class Carousel extends Component { } if (this.props.onScroll !== prevProps.onScroll) { - this._setScrollHandler(this.props); + this._setScrollHandler(this.props); } } @@ -291,34 +292,34 @@ export default class Carousel extends Component { return this._currentContentOffset; } - _setScrollHandler(props) { - // Native driver for scroll events - const scrollEventConfig = { - listener: this._onScroll, - useNativeDriver: true, - }; - this._scrollPos = new Animated.Value(0); - const argMapping = props.vertical - ? [{ nativeEvent: { contentOffset: { y: this._scrollPos } } }] - : [{ nativeEvent: { contentOffset: { x: this._scrollPos } } }]; + _setScrollHandler (props) { + // Native driver for scroll events + const scrollEventConfig = { + listener: this._onScroll, + useNativeDriver: true + }; + this._scrollPos = new Animated.Value(0); + const argMapping = props.vertical ? + [{ nativeEvent: { contentOffset: { y: this._scrollPos } } }] : + [{ nativeEvent: { contentOffset: { x: this._scrollPos } } }]; - if (props.onScroll && Array.isArray(props.onScroll._argMapping)) { + if (props.onScroll && Array.isArray(props.onScroll._argMapping)) { // Because of a react-native issue https://github.com/facebook/react-native/issues/13294 - argMapping.pop(); - const [ argMap ] = props.onScroll._argMapping; - if (argMap && argMap.nativeEvent && argMap.nativeEvent.contentOffset) { - // Shares the same animated value passed in props - this._scrollPos = + argMapping.pop(); + const [ argMap ] = props.onScroll._argMapping; + if (argMap && argMap.nativeEvent && argMap.nativeEvent.contentOffset) { + // Shares the same animated value passed in props + this._scrollPos = argMap.nativeEvent.contentOffset.x || argMap.nativeEvent.contentOffset.y || this._scrollPos; + } + argMapping.push(...props.onScroll._argMapping); } - argMapping.push(...props.onScroll._argMapping); - } - this._onScrollHandler = Animated.event( - argMapping, - scrollEventConfig - ); + this._onScrollHandler = Animated.event( + argMapping, + scrollEventConfig + ); } _needsScrollView () { @@ -822,7 +823,7 @@ export default class Carousel extends Component { this._repositionScroll(nextActiveItem); } - if (typeof onScroll === "function" && event) { + if (typeof onScroll === 'function' && event) { onScroll(event); } } @@ -838,7 +839,7 @@ export default class Carousel extends Component { } _onTouchStart () { - const { onTouchStart } = this.props + const { onTouchStart } = this.props; // `onTouchStart` is fired even when `scrollEnabled` is set to `false` if (this._getScrollEnabled() !== false && this._autoplaying) { @@ -846,12 +847,12 @@ export default class Carousel extends Component { } if (onTouchStart) { - onTouchStart() + onTouchStart(); } } _onTouchEnd () { - const { onTouchEnd } = this.props + const { onTouchEnd } = this.props; if (this._getScrollEnabled() !== false && this._autoplay && !this._autoplaying) { // This event is buggy on Android, so a fallback is provided in _onScrollEnd() @@ -859,7 +860,7 @@ export default class Carousel extends Component { } if (onTouchEnd) { - onTouchEnd() + onTouchEnd(); } } @@ -1354,7 +1355,7 @@ export default class Carousel extends Component { ...this._getComponentStaticProps() }; - const ScrollViewComponent = typeof useScrollView === 'function' ? useScrollView : AnimatedScrollView + const ScrollViewComponent = typeof useScrollView === 'function' ? useScrollView : AnimatedScrollView; return this._needsScrollView() ? ( diff --git a/src/pagination/Pagination.js b/src/pagination/Pagination.js index 5c021cf36..cef9c549d 100644 --- a/src/pagination/Pagination.js +++ b/src/pagination/Pagination.js @@ -1,8 +1,9 @@ import React, { PureComponent } from 'react'; -import { I18nManager, Platform, View, ViewPropTypes } from 'react-native'; +import { I18nManager, Platform, View } from 'react-native'; import PropTypes from 'prop-types'; import PaginationDot from './PaginationDot'; import styles from './Pagination.style'; +import { ViewPropTypes } from 'deprecated-react-native-prop-types'; const IS_IOS = Platform.OS === 'ios'; const IS_RTL = I18nManager.isRTL; @@ -14,16 +15,16 @@ export default class Pagination extends PureComponent { dotsLength: PropTypes.number.isRequired, activeOpacity: PropTypes.number, carouselRef: PropTypes.object, - containerStyle: ViewPropTypes ? ViewPropTypes.style : View.propTypes.style, + containerStyle: ViewPropTypes ? ViewPropTypes.style : View.propTypes?.style, dotColor: PropTypes.string, - dotContainerStyle: ViewPropTypes ? ViewPropTypes.style : View.propTypes.style, + dotContainerStyle: ViewPropTypes ? ViewPropTypes.style : View.propTypes?.style, dotElement: PropTypes.element, - dotStyle: ViewPropTypes ? ViewPropTypes.style : View.propTypes.style, + dotStyle: ViewPropTypes ? ViewPropTypes.style : View.propTypes?.style, inactiveDotColor: PropTypes.string, inactiveDotElement: PropTypes.element, inactiveDotOpacity: PropTypes.number, inactiveDotScale: PropTypes.number, - inactiveDotStyle: ViewPropTypes ? ViewPropTypes.style : View.propTypes.style, + inactiveDotStyle: ViewPropTypes ? ViewPropTypes.style : View.propTypes?.style, renderDots: PropTypes.func, tappableDots: PropTypes.bool, vertical: PropTypes.bool, @@ -31,7 +32,7 @@ export default class Pagination extends PureComponent { animatedDuration: PropTypes.number, animatedFriction: PropTypes.number, animatedTension: PropTypes.number, - delayPressInDot: PropTypes.number, + delayPressInDot: PropTypes.number }; static defaultProps = { @@ -42,7 +43,7 @@ export default class Pagination extends PureComponent { animatedDuration: 250, animatedFriction: 4, animatedTension: 50, - delayPressInDot: 0, + delayPressInDot: 0 } constructor (props) { @@ -98,7 +99,7 @@ export default class Pagination extends PureComponent { animatedDuration, animatedFriction, animatedTension, - delayPressInDot, + delayPressInDot } = this.props; if (renderDots) { diff --git a/src/pagination/PaginationDot.js b/src/pagination/PaginationDot.js index e59d1969f..786665238 100644 --- a/src/pagination/PaginationDot.js +++ b/src/pagination/PaginationDot.js @@ -1,7 +1,8 @@ import React, { PureComponent } from 'react'; -import { View, Animated, Easing, TouchableOpacity, ViewPropTypes } from 'react-native'; +import { View, Animated, Easing, TouchableOpacity } from 'react-native'; import PropTypes from 'prop-types'; import styles from './Pagination.style'; +import { ViewPropTypes } from 'deprecated-react-native-prop-types'; export default class PaginationDot extends PureComponent { @@ -12,11 +13,11 @@ export default class PaginationDot extends PureComponent { activeOpacity: PropTypes.number, carouselRef: PropTypes.object, color: PropTypes.string, - containerStyle: ViewPropTypes ? ViewPropTypes.style : View.propTypes.style, + containerStyle: ViewPropTypes ? ViewPropTypes.style : View.propTypes?.style, inactiveColor: PropTypes.string, - inactiveStyle: ViewPropTypes ? ViewPropTypes.style : View.propTypes.style, + inactiveStyle: ViewPropTypes ? ViewPropTypes.style : View.propTypes?.style, index: PropTypes.number, - style: ViewPropTypes ? ViewPropTypes.style : View.propTypes.style, + style: ViewPropTypes ? ViewPropTypes.style : View.propTypes?.style, tappable: PropTypes.bool }; @@ -43,7 +44,7 @@ export default class PaginationDot extends PureComponent { _animate (toValue = 0) { const { animColor, animOpacity, animTransform } = this.state; - const { animatedDuration, animatedFriction, animatedTension } = this.props + const { animatedDuration, animatedFriction, animatedTension } = this.props; const commonProperties = { toValue, diff --git a/src/parallaximage/ParallaxImage.js b/src/parallaximage/ParallaxImage.js index 8bc774a10..faa03187a 100644 --- a/src/parallaximage/ParallaxImage.js +++ b/src/parallaximage/ParallaxImage.js @@ -1,9 +1,10 @@ // Parallax effect inspired by https://github.com/oblador/react-native-parallax/ import React, { Component } from 'react'; -import { View, ViewPropTypes, Image, Animated, Easing, ActivityIndicator, findNodeHandle } from 'react-native'; +import { View, Image, Animated, Easing, ActivityIndicator, findNodeHandle } from 'react-native'; import PropTypes from 'prop-types'; import styles from './ParallaxImage.style'; +import { ViewPropTypes } from 'deprecated-react-native-prop-types'; export default class ParallaxImage extends Component { @@ -16,7 +17,7 @@ export default class ParallaxImage extends Component { sliderHeight: PropTypes.number, // passed from sliderWidth: PropTypes.number, // passed from vertical: PropTypes.bool, // passed from - containerStyle: ViewPropTypes ? ViewPropTypes.style : View.propTypes.style, + containerStyle: ViewPropTypes ? ViewPropTypes.style : View.propTypes?.style, dimensions: PropTypes.shape({ width: PropTypes.number, height: PropTypes.number