From 827344aad14bfad196b63dcffc6d5095a3deba3c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20Nov=C3=A1k?= Date: Thu, 25 Sep 2025 11:09:34 +0200 Subject: [PATCH] fix: #147, #148 - replace default props with object params --- Draggable.js | 82 ++++++++++----------------- Draggable.tsx | 153 ++++++++++++++++++++++---------------------------- 2 files changed, 97 insertions(+), 138 deletions(-) diff --git a/Draggable.js b/Draggable.js index d1c8650..3ed823c 100644 --- a/Draggable.js +++ b/Draggable.js @@ -20,36 +20,33 @@ function clamp(number, min, max) { return Math.max(min, Math.min(number, max)); } -export default function Draggable(props) { - const { - renderText, - isCircle, - renderSize, - imageSource, - renderColor, - children, - shouldReverse, - onReverse, - disabled, - debug, - animatedViewProps, - touchableOpacityProps, - onDrag, - onShortPressRelease, - onDragRelease, - onLongPress, - onPressIn, - onPressOut, - onRelease, - x, - y, - z, - minX, - minY, - maxX, - maxY, - } = props; - +export default function Draggable({ + renderText = '+', + isCircle, + renderSize = 36, + imageSource, + renderColor, + children, + shouldReverse = false, + disabled = false, + debug = false, + animatedViewProps, + touchableOpacityProps, + onDrag = () => {}, + onShortPressRelease = () => {}, + onDragRelease = () => {}, + onLongPress = () => {}, + onPressIn = () => {}, + onPressOut = () => {}, + onRelease = () => {}, + x = 0, + y = 0, + z = 1, + minX, + minY, + maxX, + maxY, +}) { // The Animated object housing our xy value so that we can spring back const pan = React.useRef(new Animated.ValueXY()); // Always set to xy value of pan, would like to remove @@ -86,7 +83,6 @@ export default function Draggable(props) { toValue: newOffset || originalOffset, useNativeDriver: false, }).start(); - }, [pan]); const onPanResponderRelease = React.useCallback( @@ -164,13 +160,13 @@ export default function Draggable(props) { if (!shouldReverse) { curPan.addListener((c) => (offsetFromStart.current = c)); } else { - reversePosition(); + reversePosition(); } return () => { curPan.removeAllListeners(); }; }, [shouldReverse]); - + const positionCss = React.useMemo(() => { const Window = Dimensions.get('window'); return { @@ -283,26 +279,6 @@ export default function Draggable(props) { ); } -/***** Default props and types */ - -Draggable.defaultProps = { - renderText: '＋', - renderSize: 36, - shouldReverse: false, - disabled: false, - debug: false, - onDrag: () => {}, - onShortPressRelease: () => {}, - onDragRelease: () => {}, - onLongPress: () => {}, - onPressIn: () => {}, - onPressOut: () => {}, - onRelease: () => {}, - x: 0, - y: 0, - z: 1, -}; - Draggable.propTypes = { /**** props that should probably be removed in favor of "children" */ renderText: PropTypes.string, diff --git a/Draggable.tsx b/Draggable.tsx index 363ab4a..96ffaa5 100644 --- a/Draggable.tsx +++ b/Draggable.tsx @@ -17,74 +17,77 @@ import { PanResponderGestureState, StyleProp, } from 'react-native'; -import PropTypes from 'prop-types'; -import { ViewStyle } from 'react-native/Libraries/StyleSheet/StyleSheet'; +import {ViewStyle} from 'react-native/Libraries/StyleSheet/StyleSheet'; function clamp(number: number, min: number, max: number) { return Math.max(min, Math.min(number, max)); } interface IProps { - /**** props that should probably be removed in favor of "children" */ - renderText?: string; - isCircle?: boolean; - renderSize?: number; - imageSource?: number; - renderColor?: string; - /**** */ - children?: React.ReactNode; - shouldReverse?: boolean; - disabled?: boolean; - debug?: boolean; - animatedViewProps?: object; - touchableOpacityProps?: object; - onDrag?: (e: GestureResponderEvent, gestureState: PanResponderGestureState) => void; - onShortPressRelease?: (event: GestureResponderEvent) => void; - onDragRelease?: (e: GestureResponderEvent, gestureState: PanResponderGestureState) => void; - onLongPress?: (event: GestureResponderEvent) => void; - onPressIn?: (event: GestureResponderEvent) => void; - onPressOut?: (event: GestureResponderEvent) => void; - onRelease?: (event: GestureResponderEvent, wasDragging: boolean) => void; - onReverse?: () => {x: number, y: number}, - x?: number; - y?: number; - // z/elevation should be removed because it doesn't sync up visually and haptically - z?: number; - minX?: number; - minY?: number; - maxX?: number; - maxY?: number; - }; - -export default function Draggable(props: IProps) { - const { - renderText, - isCircle, - renderSize, - imageSource, - renderColor, - children, - shouldReverse, - disabled, - debug, - animatedViewProps, - touchableOpacityProps, - onDrag, - onShortPressRelease, - onDragRelease, - onLongPress, - onPressIn, - onPressOut, - onRelease, - x, - y, - z, - minX, - minY, - maxX, - maxY, - } = props; + /**** props that should probably be removed in favor of "children" */ + renderText?: string; + isCircle?: boolean; + renderSize?: number; + imageSource?: number; + renderColor?: string; + /**** */ + children?: React.ReactNode; + shouldReverse?: boolean; + disabled?: boolean; + debug?: boolean; + animatedViewProps?: object; + touchableOpacityProps?: object; + onDrag?: ( + e: GestureResponderEvent, + gestureState: PanResponderGestureState, + ) => void; + onShortPressRelease?: (event: GestureResponderEvent) => void; + onDragRelease?: ( + e: GestureResponderEvent, + gestureState: PanResponderGestureState, + ) => void; + onLongPress?: (event: GestureResponderEvent) => void; + onPressIn?: (event: GestureResponderEvent) => void; + onPressOut?: (event: GestureResponderEvent) => void; + onRelease?: (event: GestureResponderEvent, wasDragging: boolean) => void; + onReverse?: () => {x: number; y: number}; + x?: number; + y?: number; + // z/elevation should be removed because it doesn't sync up visually and haptically + z?: number; + minX?: number; + minY?: number; + maxX?: number; + maxY?: number; +} +export default function Draggable({ + renderText = '+', + isCircle, + renderSize = 36, + imageSource, + renderColor, + children, + shouldReverse = false, + disabled = false, + debug = false, + animatedViewProps, + touchableOpacityProps, + onDrag = () => {}, + onShortPressRelease = () => {}, + onDragRelease = () => {}, + onLongPress = () => {}, + onPressIn = () => {}, + onPressOut = () => {}, + onRelease = () => {}, + x = 0, + y = 0, + z = 1, + minX, + minY, + maxX, + maxY, +}: IProps) { // The Animated object housing our xy value so that we can spring back const pan = React.useRef(new Animated.ValueXY()); // Always set to xy value of pan, would like to remove @@ -108,7 +111,7 @@ export default function Draggable(props: IProps) { }, [x, y]); const shouldStartDrag = React.useCallback( - gs => { + (gs) => { return !disabled && (Math.abs(gs.dx) > 2 || Math.abs(gs.dy) > 2); }, [disabled], @@ -195,10 +198,10 @@ export default function Draggable(props: IProps) { React.useEffect(() => { const curPan = pan.current; // Using an instance to avoid losing the pointer before the cleanup if (!shouldReverse) { - curPan.addListener(c => (offsetFromStart.current = c)); + curPan.addListener((c) => (offsetFromStart.current = c)); } return () => { - // Typed incorrectly + // Typed incorrectly curPan.removeAllListeners(); }; }, [shouldReverse]); @@ -257,7 +260,7 @@ export default function Draggable(props: IProps) { } }, [children, imageSource, renderSize, renderText]); - const handleOnLayout = React.useCallback(event => { + const handleOnLayout = React.useCallback((event) => { const {height, width} = event.nativeEvent.layout; childSize.current = {x: width, y: height}; }, []); @@ -315,26 +318,6 @@ export default function Draggable(props: IProps) { ); } -/***** Default props and types */ - -Draggable.defaultProps = { - renderText: '＋', - renderSize: 36, - shouldReverse: false, - disabled: false, - debug: false, - onDrag: () => {}, - onShortPressRelease: () => {}, - onDragRelease: () => {}, - onLongPress: () => {}, - onPressIn: () => {}, - onPressOut: () => {}, - onRelease: () => {}, - x: 0, - y: 0, - z: 1, -}; - const styles = StyleSheet.create({ text: {color: '#fff', textAlign: 'center'}, debugView: {