From cd5d5872445a3952c95816e255299e70066c9c1a Mon Sep 17 00:00:00 2001 From: Charney Kaye Date: Thu, 5 Jan 2023 19:33:01 -0800 Subject: [PATCH] Resolve #141 by cleaning up various typecheck issues, mostly ignoring things --- LabelContainer.tsx | 19 ++++++++-------- helpers.ts | 5 ++--- hooks.tsx | 13 ++++++----- index.tsx | 56 +++++++++++++++++++++++++++++++--------------- styles.ts | 6 ++--- 5 files changed, 60 insertions(+), 39 deletions(-) diff --git a/LabelContainer.tsx b/LabelContainer.tsx index 1e36836..a445d4d 100644 --- a/LabelContainer.tsx +++ b/LabelContainer.tsx @@ -1,19 +1,20 @@ -import React, { PureComponent } from 'react'; -import { View } from 'react-native'; +import {View} from 'react-native'; +import {PureComponent} from 'react'; class LabelContainer extends PureComponent { - state = { value: Number.NaN, }; - - setValue = value => { - this.setState({ value }); - } + + setValue = (value: number) => { + this.setState({value}); + }; render() { - const { renderContent, ...restProps } = this.props; - const { value } = this.state; + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + const {renderContent, ...restProps} = this.props; + const {value} = this.state; return ( {renderContent(value)} diff --git a/helpers.ts b/helpers.ts index 421f45b..c29fc07 100644 --- a/helpers.ts +++ b/helpers.ts @@ -11,9 +11,8 @@ export const isLowCloser = ( return distanceFromLow < distanceFromHigh; }; -export const clamp = (value: number, min: number, max: number): number => { - return Math.min(Math.max(value, min), max); -}; +export const clamp = (value: number, min: number, max: number): number => + Math.min(Math.max(value, min), max); export const getValueForPosition = ( positionInView: number, diff --git a/hooks.tsx b/hooks.tsx index 85214b2..ba0fa41 100644 --- a/hooks.tsx +++ b/hooks.tsx @@ -32,8 +32,7 @@ export const useLowHigh = ( step: number, ) => { const validLowProp = lowProp === undefined ? min : clamp(lowProp, min, max); - const validHighProp = - highProp === undefined ? max : clamp(highProp, min, max); + const validHighProp = highProp === undefined ? max : clamp(highProp, min, max); const inPropsRef = useRef({ low: validLowProp, high: validHighProp, @@ -67,8 +66,8 @@ export const useLowHigh = ( export const useWidthLayout = ( widthRef: MutableRefObject, callback?: (width: number) => void, -) => { - return useCallback( +) => + useCallback( ({nativeEvent}) => { const { layout: {width}, @@ -83,7 +82,6 @@ export const useWidthLayout = ( }, [callback, widthRef], ); -}; /** * This hook creates a component which follows the thumb. @@ -138,6 +136,8 @@ export const useThumbFollower = ( const follower = ( ({ position: 'absolute', left: I18nManager.isRTL ? right : left, diff --git a/index.tsx b/index.tsx index 37163ae..8cecc04 100644 --- a/index.tsx +++ b/index.tsx @@ -104,16 +104,20 @@ const Slider: React.FC = ({ } const {low, high} = inPropsRef.current; if (!disableRange) { + // eslint-disable-next-line @typescript-eslint/no-shadow const {current: highThumbX} = highThumbXRef; const highPosition = ((high - min) / (max - min)) * (containerWidth - thumbWidth); highThumbX.setValue(highPosition); } + // eslint-disable-next-line @typescript-eslint/no-shadow const {current: lowThumbX} = lowThumbXRef; const lowPosition = ((low - min) / (max - min)) * (containerWidth - thumbWidth); lowThumbX.setValue(lowPosition); - updateSelectedRail(); + if (typeof updateSelectedRail === 'function') { + updateSelectedRail(); + } onValueChanged?.(low, high, false); }, [ disableRange, @@ -133,7 +137,14 @@ const Slider: React.FC = ({ ) { updateThumbs(); } - }, [highProp, inPropsRefPrev.lowPrev, inPropsRefPrev.highPrev, lowProp]); + }, [ + highProp, + inPropsRefPrev.lowPrev, + inPropsRefPrev.highPrev, + lowProp, + inPropsRefPrev, + updateThumbs, + ]); useEffect(() => { updateThumbs(); @@ -152,19 +163,17 @@ const Slider: React.FC = ({ [thumbWidth], ); - const lowStyles = useMemo(() => { - return {transform: [{translateX: lowThumbX}]}; - }, [lowThumbX]); + const lowStyles = useMemo( + () => ({transform: [{translateX: lowThumbX}]}), + [lowThumbX]); - const highStyles = useMemo(() => { - return disableRange - ? null - : [styles.highThumbContainer, {transform: [{translateX: highThumbX}]}]; - }, [disableRange, highThumbX]); + const highStyles = useMemo( + () => disableRange ? null : [styles.highThumbContainer, {transform: [{translateX: highThumbX}]}], + [disableRange, highThumbX]); - const railContainerStyles = useMemo(() => { - return [styles.railsContainer, {marginHorizontal: thumbWidth / 2}]; - }, [thumbWidth]); + const railContainerStyles = useMemo( + () => [styles.railsContainer, {marginHorizontal: thumbWidth / 2}], + [thumbWidth]); const [labelView, labelUpdate] = useThumbFollower( containerWidthRef, @@ -208,11 +217,14 @@ const Slider: React.FC = ({ return; } setPressed(true); + // eslint-disable-next-line @typescript-eslint/no-shadow const {current: lowThumbX} = lowThumbXRef; + // eslint-disable-next-line @typescript-eslint/no-shadow const {current: highThumbX} = highThumbXRef; const {locationX: downX, pageX} = nativeEvent; const containerX = pageX - downX; + // eslint-disable-next-line @typescript-eslint/no-shadow const {low, high, min, max} = inPropsRef.current; onSliderTouchStart?.(low, high); const containerWidth = containerWidthRef.current; @@ -229,6 +241,7 @@ const Slider: React.FC = ({ gestureStateRef.current.isLow = isLow; const handlePositionChange = (positionInView: number) => { + // eslint-disable-next-line @typescript-eslint/no-shadow const {low, high, min, max, step} = inPropsRef.current; const minValue = isLow ? min : low + minRange; const maxValue = isLow ? high - minRange : max; @@ -256,10 +269,14 @@ const Slider: React.FC = ({ (isLow ? lowThumbX : highThumbX).setValue(absolutePosition); onValueChanged?.(isLow ? value : low, isLow ? high : value, true); (isLow ? setLow : setHigh)(value); - labelUpdate && - labelUpdate(gestureStateRef.current.lastPosition, value); - notchUpdate && - notchUpdate(gestureStateRef.current.lastPosition, value); + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + labelUpdate && labelUpdate(gestureStateRef.current.lastPosition, value); + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + notchUpdate && notchUpdate(gestureStateRef.current.lastPosition, value); + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore updateSelectedRail(); }; handlePositionChange(downX); @@ -281,17 +298,20 @@ const Slider: React.FC = ({ }, }), [ + disabled, pointerX, inPropsRef, + onSliderTouchStart, thumbWidth, disableRange, - disabled, + minRange, onValueChanged, setLow, setHigh, labelUpdate, notchUpdate, updateSelectedRail, + onSliderTouchEnd, ], ); diff --git a/styles.ts b/styles.ts index 3152f0e..be28c08 100644 --- a/styles.ts +++ b/styles.ts @@ -1,4 +1,4 @@ -import { I18nManager, StyleSheet } from 'react-native'; +import {I18nManager, StyleSheet} from 'react-native'; export default StyleSheet.create({ controlsContainer: { @@ -15,13 +15,13 @@ export default StyleSheet.create({ alignItems: 'center', }, labelFixedContainer: { - alignItems: I18nManager.isRTL ? 'flex-end' : "flex-start", + alignItems: I18nManager.isRTL ? 'flex-end' : 'flex-start', }, labelFloatingContainer: { position: 'absolute', left: 0, right: 0, - alignItems: I18nManager.isRTL ? 'flex-end' : "flex-start", + alignItems: I18nManager.isRTL ? 'flex-end' : 'flex-start', }, touchableArea: { ...StyleSheet.absoluteFillObject,