From 45747f4f88eccd6723dc4b954a12e401500cdb62 Mon Sep 17 00:00:00 2001 From: LukaDragojlovic Date: Wed, 31 Aug 2022 03:54:44 +0200 Subject: [PATCH 1/2] Remove deprecated ViewPropTypes --- Example/Switch.js | 5 +- lib/index.js | 267 +++++++++++++++++++++++++--------------------- 2 files changed, 146 insertions(+), 126 deletions(-) diff --git a/Example/Switch.js b/Example/Switch.js index a2219da..e6455be 100644 --- a/Example/Switch.js +++ b/Example/Switch.js @@ -1,7 +1,6 @@ import React, { Component } from 'react' import PropTypes from "prop-types" import { - ViewPropTypes, ColorPropType, StyleSheet, Animated, @@ -23,8 +22,8 @@ export default class extends Component { backgroundInactive: ColorPropType, onAsyncPress: PropTypes.func, onSyncPress: PropTypes.func, - style: ViewPropTypes.style, - circleStyle: ViewPropTypes.style + style: PropTypes.object, + circleStyle: PropTypes.object } static defaultProps = { diff --git a/lib/index.js b/lib/index.js index 7715b57..c91b00d 100644 --- a/lib/index.js +++ b/lib/index.js @@ -1,15 +1,14 @@ -import React, { Component } from 'react' -import PropTypes from "prop-types" +import React, { Component } from "react"; +import PropTypes from "prop-types"; import { - ViewPropTypes, ColorPropType, StyleSheet, Animated, Easing, PanResponder, -} from 'react-native' +} from "react-native"; -const SCALE = 6 / 5 +const SCALE = 6 / 5; export default class extends Component { static propTypes = { @@ -23,45 +22,50 @@ export default class extends Component { backgroundInactive: ColorPropType, onAsyncPress: PropTypes.func, onSyncPress: PropTypes.func, - style: ViewPropTypes.style, - circleStyle: ViewPropTypes.style - } + style: PropTypes.object, + circleStyle: PropTypes.object, + }; static defaultProps = { width: 40, height: 21, value: false, disabled: false, - circleColorActive: 'white', - circleColorInactive: 'white', - backgroundActive: '#43d551', - backgroundInactive: '#dddddd', - onAsyncPress: (callback) => {callback(true)} - } - - constructor (props, context) { - super(props, context) - const { width, height, value } = props - - this.offset = width - height + 1 - this.handlerSize = height - 2 + circleColorActive: "white", + circleColorInactive: "white", + backgroundActive: "#43d551", + backgroundInactive: "#dddddd", + onAsyncPress: (callback) => { + callback(true); + }, + }; + + constructor(props, context) { + super(props, context); + const { width, height, value } = props; + + this.offset = width - height + 1; + this.handlerSize = height - 2; this.state = { value, toggleable: true, - alignItems: value ? 'flex-end' : 'flex-start', + alignItems: value ? "flex-end" : "flex-start", handlerAnimation: new Animated.Value(this.handlerSize), - switchAnimation: new Animated.Value(value ? -1 : 1) - } + switchAnimation: new Animated.Value(value ? -1 : 1), + }; } - componentWillReceiveProps (nextProps) { + componentWillReceiveProps(nextProps) { // unify inner state and outer props if (nextProps.value === this.state.value) { - return + return; } - if (typeof nextProps.value !== 'undefined' && nextProps.value !== this.props.value) { + if ( + typeof nextProps.value !== "undefined" && + nextProps.value !== this.props.value + ) { /** /* you can add animation when changing value programmatically like following: /* this.animateHandler(this.handlerSize * SCALE, () => { @@ -70,12 +74,11 @@ export default class extends Component { /* }, 800) /* }) */ - this.toggleSwitchToValue(true, nextProps.value) + this.toggleSwitchToValue(true, nextProps.value); } } - - componentWillMount () { + componentWillMount() { this._panResponder = PanResponder.create({ onStartShouldSetPanResponder: (evt, gestureState) => true, onStartShouldSetPanResponderCapture: (evt, gestureState) => true, @@ -84,44 +87,44 @@ export default class extends Component { onPanResponderTerminationRequest: (evt, gestureState) => true, onPanResponderGrant: this._onPanResponderGrant, onPanResponderMove: this._onPanResponderMove, - onPanResponderRelease: this._onPanResponderRelease - }) + onPanResponderRelease: this._onPanResponderRelease, + }); } _onPanResponderGrant = (evt, gestureState) => { - const { disabled } = this.props - if (disabled) return + const { disabled } = this.props; + if (disabled) return; - this.setState({toggleable: true}) - this.animateHandler(this.handlerSize * SCALE) - } + this.setState({ toggleable: true }); + this.animateHandler(this.handlerSize * SCALE); + }; _onPanResponderMove = (evt, gestureState) => { - const { value } = this.state - const { disabled } = this.props - if (disabled) return + const { value } = this.state; + const { disabled } = this.props; + if (disabled) return; this.setState({ - toggleable: value ? (gestureState.dx < 10) : (gestureState.dx > -10) - }) - } + toggleable: value ? gestureState.dx < 10 : gestureState.dx > -10, + }); + }; _onPanResponderRelease = (evt, gestureState) => { - const { toggleable } = this.state - const { disabled, onAsyncPress, onSyncPress } = this.props + const { toggleable } = this.state; + const { disabled, onAsyncPress, onSyncPress } = this.props; - if (disabled) return + if (disabled) return; if (toggleable) { if (onSyncPress) { - this.toggleSwitch(true, onSyncPress) + this.toggleSwitch(true, onSyncPress); } else { - onAsyncPress(this.toggleSwitch) + onAsyncPress(this.toggleSwitch); } } else { - this.animateHandler(this.handlerSize) + this.animateHandler(this.handlerSize); } - } + }; /** * @@ -129,9 +132,9 @@ export default class extends Component { * @param callback invoke when task is finished */ toggleSwitch = (result, callback = () => null) => { - const { value } = this.state - this.toggleSwitchToValue(result, !value, callback) - } + const { value } = this.state; + this.toggleSwitchToValue(result, !value, callback); + }; /** * @param result result of task @@ -139,114 +142,132 @@ export default class extends Component { * @param callback invoke when task is finished */ toggleSwitchToValue = (result, toValue, callback = () => null) => { - const { switchAnimation } = this.state + const { switchAnimation } = this.state; - this.animateHandler(this.handlerSize) + this.animateHandler(this.handlerSize); if (result) { this.animateSwitch(toValue, () => { - this.setState({ - value: toValue, - alignItems: toValue ? 'flex-end' : 'flex-start' - }, () => { - callback(toValue) - }) - switchAnimation.setValue(toValue ? -1 : 1) - }) + this.setState( + { + value: toValue, + alignItems: toValue ? "flex-end" : "flex-start", + }, + () => { + callback(toValue); + } + ); + switchAnimation.setValue(toValue ? -1 : 1); + }); } - } + }; animateSwitch = (value, callback = () => null) => { - const { switchAnimation } = this.state - - Animated.timing(switchAnimation, - { - toValue: value ? this.offset : -this.offset, - duration: 200, - easing: Easing.linear, - useNativeDriver: false - } - ).start(callback) - } + const { switchAnimation } = this.state; + + Animated.timing(switchAnimation, { + toValue: value ? this.offset : -this.offset, + duration: 200, + easing: Easing.linear, + useNativeDriver: false, + }).start(callback); + }; animateHandler = (value, callback = () => null) => { - const { handlerAnimation } = this.state - - Animated.timing(handlerAnimation, - { - toValue: value, - duration: 200, - easing: Easing.linear, - useNativeDriver: false - } - ).start(callback) - } + const { handlerAnimation } = this.state; + + Animated.timing(handlerAnimation, { + toValue: value, + duration: 200, + easing: Easing.linear, + useNativeDriver: false, + }).start(callback); + }; render() { - const { switchAnimation, handlerAnimation, alignItems, value } = this.state + const { switchAnimation, handlerAnimation, alignItems, value } = this.state; const { - backgroundActive, backgroundInactive, - width, height, circleColorActive, circleColorInactive, style, + backgroundActive, + backgroundInactive, + width, + height, + circleColorActive, + circleColorInactive, + style, circleStyle, ...rest - } = this.props + } = this.props; const interpolatedBackgroundColor = switchAnimation.interpolate({ - inputRange: value ? [-this.offset, -1]: [1, this.offset], + inputRange: value ? [-this.offset, -1] : [1, this.offset], outputRange: [backgroundInactive, backgroundActive], - extrapolate: 'clamp' - }) + extrapolate: "clamp", + }); const interpolatedCircleColor = switchAnimation.interpolate({ - inputRange: value ? [-this.offset, -1]: [1, this.offset], + inputRange: value ? [-this.offset, -1] : [1, this.offset], outputRange: [circleColorInactive, circleColorActive], - extrapolate: 'clamp' - }) + extrapolate: "clamp", + }); const circlePosition = (value) => { - const modifier = value ? 1 : -1 - let position = modifier * -1 + const modifier = value ? 1 : -1; + let position = modifier * -1; if (circleStyle && circleStyle.borderWidth) { - position += modifier + position += modifier; } if (style && style.borderWidth) { - position += modifier + position += modifier; } - return position - } + return position; + }; const interpolatedTranslateX = switchAnimation.interpolate({ - inputRange: value ? [-this.offset, -1]: [1, this.offset], - outputRange: value ? [-this.offset, circlePosition(value)]: [circlePosition(value), this.offset], - extrapolate: 'clamp' - }) + inputRange: value ? [-this.offset, -1] : [1, this.offset], + outputRange: value + ? [-this.offset, circlePosition(value)] + : [circlePosition(value), this.offset], + extrapolate: "clamp", + }); return ( - + style={[ + styles.container, + { + width, + height, + alignItems, + borderRadius: height / 2, + backgroundColor: interpolatedBackgroundColor, + }, + style, + ]} + > + - ) + ); } } const styles = StyleSheet.create({ container: { - overflow: 'hidden', - justifyContent: 'center' - } -}) + overflow: "hidden", + justifyContent: "center", + }, +}); From 27f1e551b4fb9cbf6bc74701af798f53de7e2012 Mon Sep 17 00:00:00 2001 From: LukaDragojlovic Date: Wed, 31 Aug 2022 03:56:50 +0200 Subject: [PATCH 2/2] Revert the formatting --- lib/index.js | 264 +++++++++++++++++++++++---------------------------- 1 file changed, 121 insertions(+), 143 deletions(-) diff --git a/lib/index.js b/lib/index.js index c91b00d..4b99416 100644 --- a/lib/index.js +++ b/lib/index.js @@ -1,14 +1,14 @@ -import React, { Component } from "react"; -import PropTypes from "prop-types"; +import React, { Component } from 'react' +import PropTypes from "prop-types" import { ColorPropType, StyleSheet, Animated, Easing, PanResponder, -} from "react-native"; +} from 'react-native' -const SCALE = 6 / 5; +const SCALE = 6 / 5 export default class extends Component { static propTypes = { @@ -23,49 +23,44 @@ export default class extends Component { onAsyncPress: PropTypes.func, onSyncPress: PropTypes.func, style: PropTypes.object, - circleStyle: PropTypes.object, - }; + circleStyle: PropTypes.object + } static defaultProps = { width: 40, height: 21, value: false, disabled: false, - circleColorActive: "white", - circleColorInactive: "white", - backgroundActive: "#43d551", - backgroundInactive: "#dddddd", - onAsyncPress: (callback) => { - callback(true); - }, - }; - - constructor(props, context) { - super(props, context); - const { width, height, value } = props; - - this.offset = width - height + 1; - this.handlerSize = height - 2; + circleColorActive: 'white', + circleColorInactive: 'white', + backgroundActive: '#43d551', + backgroundInactive: '#dddddd', + onAsyncPress: (callback) => {callback(true)} + } + + constructor (props, context) { + super(props, context) + const { width, height, value } = props + + this.offset = width - height + 1 + this.handlerSize = height - 2 this.state = { value, toggleable: true, - alignItems: value ? "flex-end" : "flex-start", + alignItems: value ? 'flex-end' : 'flex-start', handlerAnimation: new Animated.Value(this.handlerSize), - switchAnimation: new Animated.Value(value ? -1 : 1), - }; + switchAnimation: new Animated.Value(value ? -1 : 1) + } } - componentWillReceiveProps(nextProps) { + componentWillReceiveProps (nextProps) { // unify inner state and outer props if (nextProps.value === this.state.value) { - return; + return } - if ( - typeof nextProps.value !== "undefined" && - nextProps.value !== this.props.value - ) { + if (typeof nextProps.value !== 'undefined' && nextProps.value !== this.props.value) { /** /* you can add animation when changing value programmatically like following: /* this.animateHandler(this.handlerSize * SCALE, () => { @@ -74,11 +69,12 @@ export default class extends Component { /* }, 800) /* }) */ - this.toggleSwitchToValue(true, nextProps.value); + this.toggleSwitchToValue(true, nextProps.value) } } - componentWillMount() { + + componentWillMount () { this._panResponder = PanResponder.create({ onStartShouldSetPanResponder: (evt, gestureState) => true, onStartShouldSetPanResponderCapture: (evt, gestureState) => true, @@ -87,44 +83,44 @@ export default class extends Component { onPanResponderTerminationRequest: (evt, gestureState) => true, onPanResponderGrant: this._onPanResponderGrant, onPanResponderMove: this._onPanResponderMove, - onPanResponderRelease: this._onPanResponderRelease, - }); + onPanResponderRelease: this._onPanResponderRelease + }) } _onPanResponderGrant = (evt, gestureState) => { - const { disabled } = this.props; - if (disabled) return; + const { disabled } = this.props + if (disabled) return - this.setState({ toggleable: true }); - this.animateHandler(this.handlerSize * SCALE); - }; + this.setState({toggleable: true}) + this.animateHandler(this.handlerSize * SCALE) + } _onPanResponderMove = (evt, gestureState) => { - const { value } = this.state; - const { disabled } = this.props; - if (disabled) return; + const { value } = this.state + const { disabled } = this.props + if (disabled) return this.setState({ - toggleable: value ? gestureState.dx < 10 : gestureState.dx > -10, - }); - }; + toggleable: value ? (gestureState.dx < 10) : (gestureState.dx > -10) + }) + } _onPanResponderRelease = (evt, gestureState) => { - const { toggleable } = this.state; - const { disabled, onAsyncPress, onSyncPress } = this.props; + const { toggleable } = this.state + const { disabled, onAsyncPress, onSyncPress } = this.props - if (disabled) return; + if (disabled) return if (toggleable) { if (onSyncPress) { - this.toggleSwitch(true, onSyncPress); + this.toggleSwitch(true, onSyncPress) } else { - onAsyncPress(this.toggleSwitch); + onAsyncPress(this.toggleSwitch) } } else { - this.animateHandler(this.handlerSize); + this.animateHandler(this.handlerSize) } - }; + } /** * @@ -132,9 +128,9 @@ export default class extends Component { * @param callback invoke when task is finished */ toggleSwitch = (result, callback = () => null) => { - const { value } = this.state; - this.toggleSwitchToValue(result, !value, callback); - }; + const { value } = this.state + this.toggleSwitchToValue(result, !value, callback) + } /** * @param result result of task @@ -142,132 +138,114 @@ export default class extends Component { * @param callback invoke when task is finished */ toggleSwitchToValue = (result, toValue, callback = () => null) => { - const { switchAnimation } = this.state; + const { switchAnimation } = this.state - this.animateHandler(this.handlerSize); + this.animateHandler(this.handlerSize) if (result) { this.animateSwitch(toValue, () => { - this.setState( - { - value: toValue, - alignItems: toValue ? "flex-end" : "flex-start", - }, - () => { - callback(toValue); - } - ); - switchAnimation.setValue(toValue ? -1 : 1); - }); + this.setState({ + value: toValue, + alignItems: toValue ? 'flex-end' : 'flex-start' + }, () => { + callback(toValue) + }) + switchAnimation.setValue(toValue ? -1 : 1) + }) } - }; + } animateSwitch = (value, callback = () => null) => { - const { switchAnimation } = this.state; - - Animated.timing(switchAnimation, { - toValue: value ? this.offset : -this.offset, - duration: 200, - easing: Easing.linear, - useNativeDriver: false, - }).start(callback); - }; + const { switchAnimation } = this.state + + Animated.timing(switchAnimation, + { + toValue: value ? this.offset : -this.offset, + duration: 200, + easing: Easing.linear, + useNativeDriver: false + } + ).start(callback) + } animateHandler = (value, callback = () => null) => { - const { handlerAnimation } = this.state; - - Animated.timing(handlerAnimation, { - toValue: value, - duration: 200, - easing: Easing.linear, - useNativeDriver: false, - }).start(callback); - }; + const { handlerAnimation } = this.state + + Animated.timing(handlerAnimation, + { + toValue: value, + duration: 200, + easing: Easing.linear, + useNativeDriver: false + } + ).start(callback) + } render() { - const { switchAnimation, handlerAnimation, alignItems, value } = this.state; + const { switchAnimation, handlerAnimation, alignItems, value } = this.state const { - backgroundActive, - backgroundInactive, - width, - height, - circleColorActive, - circleColorInactive, - style, + backgroundActive, backgroundInactive, + width, height, circleColorActive, circleColorInactive, style, circleStyle, ...rest - } = this.props; + } = this.props const interpolatedBackgroundColor = switchAnimation.interpolate({ - inputRange: value ? [-this.offset, -1] : [1, this.offset], + inputRange: value ? [-this.offset, -1]: [1, this.offset], outputRange: [backgroundInactive, backgroundActive], - extrapolate: "clamp", - }); + extrapolate: 'clamp' + }) const interpolatedCircleColor = switchAnimation.interpolate({ - inputRange: value ? [-this.offset, -1] : [1, this.offset], + inputRange: value ? [-this.offset, -1]: [1, this.offset], outputRange: [circleColorInactive, circleColorActive], - extrapolate: "clamp", - }); + extrapolate: 'clamp' + }) const circlePosition = (value) => { - const modifier = value ? 1 : -1; - let position = modifier * -1; + const modifier = value ? 1 : -1 + let position = modifier * -1 if (circleStyle && circleStyle.borderWidth) { - position += modifier; + position += modifier } if (style && style.borderWidth) { - position += modifier; + position += modifier } - return position; - }; + return position + } const interpolatedTranslateX = switchAnimation.interpolate({ - inputRange: value ? [-this.offset, -1] : [1, this.offset], - outputRange: value - ? [-this.offset, circlePosition(value)] - : [circlePosition(value), this.offset], - extrapolate: "clamp", - }); + inputRange: value ? [-this.offset, -1]: [1, this.offset], + outputRange: value ? [-this.offset, circlePosition(value)]: [circlePosition(value), this.offset], + extrapolate: 'clamp' + }) return ( - + style={[styles.container, { + width, height, + alignItems, + borderRadius: height / 2, + backgroundColor: interpolatedBackgroundColor }, style]}> + - ); + ) } } const styles = StyleSheet.create({ container: { - overflow: "hidden", - justifyContent: "center", - }, -}); + overflow: 'hidden', + justifyContent: 'center' + } +})