react-native-wheel-color-picker - npm Package Compare versions

Comparing version 1.0.2 to 1.1.0

ColorPicker.js

@@ -172,2 +172,5 @@ // @flow
 		color: '#ffffff',
+		shadeWheelThumb: true,
+		shadeSliderThumb: false,
+		autoResetSlider: false,
 		onColorChange: () => {},
@@ -195,2 +198,4 @@ onColorChangeComplete: () => {},
 		onPanResponderMove: (event, gestureState) => {
+			if(event && event.nativeEvent && typeof event.nativeEvent.preventDefault == 'function') event.nativeEvent.preventDefault()
+			if(event && event.nativeEvent && typeof event.nativeEvent.stopPropagation == 'function') event.nativeEvent.stopPropagation()
 			if (this.outOfWheel(event.nativeEvent) || this.outOfBox(this.wheelMeasure, gestureState)) return;
@@ -230,2 +235,4 @@ this.wheelMovement(event, gestureState)
 		onPanResponderMove: (event, gestureState) => {
+			if(event && event.nativeEvent && typeof event.nativeEvent.preventDefault == 'function') event.nativeEvent.preventDefault()
+			if(event && event.nativeEvent && typeof event.nativeEvent.stopPropagation == 'function') event.nativeEvent.stopPropagation()
 			if (this.outOfSlider(event.nativeEvent) || this.outOfBox(this.sliderMeasure, gestureState)) return;
@@ -265,3 +272,6 @@ this.sliderMovement(event, gestureState)
 			],
-			{listener: this.updateHueSaturation}
+			{
+				useNativeDriver: false,
+				listener: this.updateHueSaturation
+			}
 		)
@@ -278,3 +288,6 @@ this.sliderMovement = new Animated.event(
 			],
-			{listener: this.updateValue}
+			{
+				useNativeDriver: false,
+				listener: this.updateValue
+			}
 		)
@@ -294,2 +307,3 @@ this.renderSwatches()
 			toValue: 1,
+			useNativeDriver: false,
 			duration: 500,
@@ -305,2 +319,3 @@ }).start(x=>{
 			toValue: 1,
+			useNativeDriver: false,
 			duration: 500,
@@ -392,3 +407,8 @@ }).start(x=>{
 		// if(radius > 1 ) return
-		const hsv = {h,s,v}
+		const hsv = {h,s,v}// v: 100} // causes bug
+		if(this.props.autoResetSlider === true) {
+			this.slideX.setValue(0)
+			this.slideY.setValue(0)
+			hsv.v = 100
+		}
 		const currentColor = hsv2Hex(hsv)
@@ -462,8 +482,8 @@ this.color = hsv
 		if(who_hs||!specific) anims.push(//{//
-			Animated.spring(this.panX, { toValue: left, friction: 90 }),//.start()//
-			Animated.spring(this.panY, { toValue: top, friction: 90 }),//.start()//
+			Animated.spring(this.panX, { toValue: left, useNativeDriver: false, friction: 90 }),//.start()//
+			Animated.spring(this.panY, { toValue: top, useNativeDriver: false, friction: 90 }),//.start()//
 		)//}//
 		if(who_v||!specific) anims.push(//{//
-			Animated.spring(this.slideX, { toValue: range, friction: 90 }),//.start()//
-			Animated.spring(this.slideY, { toValue: range, friction: 90 }),//.start()//
+			Animated.spring(this.slideX, { toValue: range, useNativeDriver: false, friction: 90 }),//.start()//
+			Animated.spring(this.slideY, { toValue: range, useNativeDriver: false, friction: 90 }),//.start()//
 		)//}//
@@ -476,2 +496,6 @@ Animated.parallel(anims).start()
 	// }
+	componentDidUpdate(prevProps) {
+		const { color } = this.props
+		if(color !== prevProps.color) this.animate(color)
+	}
 	revert() {
@@ -524,3 +548,3 @@ if(this.mounted) this.animate(this.props.color)
 			borderRadius: thumbSize / 2,
-			backgroundColor: hsv,
+			backgroundColor: this.props.shadeWheelThumb === true ? hsv: hex,
 			transform: [{translateX:-thumbSize/2},{translateY:-thumbSize/2}],
@@ -540,3 +564,3 @@ left: this.panX,
 			// transform: [row?{translateX:8}:{translateY:8}],
-			backgroundColor: hex,
+			backgroundColor: this.props.shadeSliderThumb === true ? hsv: hex,
 			borderRadius: sliderSize/2,
@@ -543,0 +567,0 @@ height: sliderSize,

package.json

 {
   "name": "react-native-wheel-color-picker",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "A color picker component for react native",
@@ -25,3 +25,4 @@ "main": "ColorPicker.js",
     "picker"
-  ]
+  ],
+  "typings": "types.d.ts"
 }

README.md

@@ -80,2 +80,8 @@ # React Native Wheel Color Picker
 
+`shadeWheelThumb: true` if true the wheel thumb color is shaded
+
+`shadeSliderThumb: false` if true the slider thumb color is shaded
+
+`autoResetSlider: false` if true the slider thumb is reset to 0 value when wheel thumb is moved
+
 `onColorChange: () => {}` callback function for slider and wheel thumb movement 
@@ -91,3 +97,3 @@
 
-Copyright (c) 2020 Md. Naeemur Rahman (https://naeemur.github.io)
+Copyright (c) 2021 Md. Naeemur Rahman (https://naeemur.github.io)
 
@@ -94,0 +100,0 @@ Permission is hereby granted, free of charge, to any person obtaining a copy

No alert changes

Improved metrics

Total package byte prevSize

233180

0.89%

Number of package files

7

16.67%

Lines of code

703

7%

Number of lines in readme file

114

5.56%

No dependency changes