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

Comparing version 1.1.0 to 1.2.0

ColorPicker.js

@@ -21,3 +21,3 @@ // @flow
 
-const PALLETE = [
+const PALETTE = [
 	'#000000',
@@ -147,3 +147,8 @@ '#888888',
 
+// expands hex to full 6 chars (#fff -> #ffffff) if necessary
+const expandColor = color => typeof color == 'string' && color.length === 4
+	? `#${color[1]}${color[1]}${color[2]}${color[2]}${color[3]}${color[3]}`
+	: color;
 
+
 module.exports = class ColorPicker extends Component {
@@ -162,19 +167,23 @@ // testData = {}
 	wheelWidth = 0
-	swatchAnim = PALLETE.map((c,i) => (new Animated.Value(0)))
-	discAnim = PALLETE.map((c,i) => (new Animated.Value(0)))
 	static defaultProps = {
-		row: false,
-		noSnap: false,
-		thumbSize: 50,
-		sliderSize: 20,
-		discrete: false,
-		swatches: true,
-		swatchesLast: true,
-		swatchesOnly: false,
-		color: '#ffffff',
-		shadeWheelThumb: true,
-		shadeSliderThumb: false,
-		autoResetSlider: false,
-		onColorChange: () => {},
-		onColorChangeComplete: () => {},
+		row: false, // use row or vertical layout
+		noSnap: false, // enables snapping on the center of wheel and edges of wheel and slider
+		thumbSize: 50, // wheel color thumb size
+		sliderSize: 20, // slider and slider color thumb size
+		gapSize: 16, // size of gap between slider and wheel
+		discrete: false, // use swatchs of shades instead of slider
+		discreteLength: 10, // number of swatchs of shades
+		sliderHidden: false, // if true the slider is hidden
+		swatches: true, // show color swatches
+		swatchesLast: true, // if false swatches are shown before wheel
+		swatchesOnly: false, // show swatch only and hide wheel and slider
+		swatchesHitSlop: undefined, // defines how far the touch event can start away from the swatch
+		color: '#ffffff', //  color of the color picker
+		palette: PALETTE, // palette colors of swatches
+		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
+		onInteractionStart: () => {}, // callback function triggered when user begins dragging slider/wheel
+		onColorChange: () => {}, // callback function providing current color while user is actively dragging slider/wheel
+		onColorChangeComplete: () => {}, // callback function providing final color when user stops dragging slider/wheel
 	}
@@ -197,2 +206,3 @@ wheelPanResponder = PanResponder.create({
 			this.wheelMeasure.y = y
+			this.props.onInteractionStart();
 			return true
@@ -234,2 +244,3 @@ },
 			this.sliderMeasure.y = y
+			this.props.onInteractionStart();
 			return true
@@ -294,2 +305,4 @@ },
 		)
+		this.swatchAnim = props.palette.map((c,i) => (new Animated.Value(0)))
+		this.discAnim = (`1`).repeat(props.discreteLength).split('').map((c,i) => (new Animated.Value(0)))
 		this.renderSwatches()
@@ -431,2 +444,5 @@ this.renderDiscs()
 	update = (color, who, max, force) => {
+		const isHex = /^#(([0-9a-f]{2}){3}|([0-9a-f]){3})$/i
+		if (!isHex.test(color)) color = '#ffffff'
+		color = expandColor(color);
 		const specific = (typeof who == 'string'), who_hs = (who=='hs'), who_v = (who=='v')
@@ -460,2 +476,3 @@ let {h, s, v} = (typeof color == 'string') ? hex2Hsv(color) : color, stt = {}
 	animate = (color, who, max, force) => {
+		color = expandColor(color);
 		const specific = (typeof who == 'string'), who_hs = (who=='hs'), who_v = (who=='v')
@@ -506,5 +523,5 @@ let {h, s, v} = (typeof color == 'string') ? hex2Hsv(color) : color, stt = {}
 	renderSwatches () {
-		this.swatches = PALLETE.map((c,i) => (
-			<View style={[ss.swatch,{backgroundColor:c}]} key={'S'+i}>
-				<TouchableWithoutFeedback onPress={x=>this.onSwatchPress(c,i)}>
+		this.swatches = this.props.palette.map((c,i) => (
+			<View style={[ss.swatch,{backgroundColor:c}]} key={'S'+i} hitSlop={this.props.swatchesHitSlop}>
+				<TouchableWithoutFeedback onPress={x=>this.onSwatchPress(c,i)} hitSlop={this.props.swatchesHitSlop}>
 					<Animated.View style={[ss.swatchTouch,{backgroundColor:c,transform:[{scale:this.swatchAnim[i].interpolate({inputRange:[0,0.5,1],outputRange:[0.666,1,0.666]})}]}]} />
@@ -516,5 +533,5 @@ </TouchableWithoutFeedback>
 	renderDiscs () {
-		this.disc = (`1`).repeat(10).split('').map((c,i) => (
-			<View style={[ss.swatch,{backgroundColor:this.state.hueSaturation}]} key={'D'+i}>
-				<TouchableWithoutFeedback onPress={x=>this.onDiscPress(c,i)}>
+		this.disc = (`1`).repeat(this.props.discreteLength).split('').map((c,i) => (
+			<View style={[ss.swatch,{backgroundColor:this.state.hueSaturation}]} key={'D'+i} hitSlop={this.props.swatchesHitSlop}>
+				<TouchableWithoutFeedback onPress={x=>this.onDiscPress(c,i)} hitSlop={this.props.swatchesHitSlop}>
 					<Animated.View style={[ss.swatchTouch,{backgroundColor:this.state.hueSaturation,transform:[{scale:this.discAnim[i].interpolate({inputRange:[0,0.5,1],outputRange:[0.666,1,0.666]})}]}]}>
@@ -533,4 +550,6 @@ <View style={[ss.wheelImg,{backgroundColor:'#000',opacity:1-(i>=9?1:(i*11/100))}]}></View>
 			sliderSize,
+			gapSize,
 			swatchesLast,
 			swatchesOnly,
+			sliderHidden,
 			discrete,
@@ -544,3 +563,3 @@ row,
 		const opacity = this.state.wheelOpacity// * this.state.sliderOpacity
-		const margin = swatchesOnly ? 0 : 16
+		const margin = swatchesOnly ? 0 : gapSize
 		const wheelThumbStyle = {
@@ -574,4 +593,4 @@ width: thumbSize,
 			height:row?'100%':sliderSize,
-			marginLeft:row?16:0,
-			marginTop:row?0:16,
+			marginLeft:row?gapSize:0,
+			marginTop:row?0:gapSize,
 			borderRadius:sliderSize/2,
@@ -605,3 +624,3 @@ }
 				</View> }
-				{ !swatchesOnly && (discrete ? <View style={[ss.swatches,swatchStyle]} key={'$2'}>{ this.disc }</View> : <View style={[ss.slider,sliderStyle]} key={'$2'}>
+				{ !swatchesOnly && !sliderHidden && (discrete ? <View style={[ss.swatches,swatchStyle]} key={'$2'}>{ this.disc }</View> : <View style={[ss.slider,sliderStyle]} key={'$2'}>
 					<View style={[ss.grad,{backgroundColor:hex}]}>
@@ -608,0 +627,0 @@ <Image style={ss.sliderImg} source={row?srcSliderRotated:srcSlider} resizeMode="stretch" />

package.json

 {
   "name": "react-native-wheel-color-picker",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "A color picker component for react native",
@@ -5,0 +5,0 @@ "main": "ColorPicker.js",

README.md

@@ -70,4 +70,10 @@ # React Native Wheel Color Picker
 
+`gapSize: 16` size of gap between slider and wheel
+
 `discrete: false` use swatchs of shades instead of slider
 
+`discreteLength: 10` number of swatchs of shades
+
+`sliderHidden: false` if true the slider is hidden
+
 `swatches: true` show color swatches
@@ -79,4 +85,8 @@
 
+`swatchesHitSlop: undefined` defines how far the touch event can start away from the swatch
+
 `color: '#ffffff'` color of the color picker
 
+`palette: ['#000000','#888888','#ed1c24','#d11cd5','#1633e6','#00aeef','#00c85d','#57ff0a','#ffde17','#f26522']` palette colors of swatches
+
 `shadeWheelThumb: true` if true the wheel thumb color is shaded
@@ -88,6 +98,8 @@
 
-`onColorChange: () => {}` callback function for slider and wheel thumb movement 
+`onInteractionStart: () => {}` callback function triggered when user begins dragging slider/wheel
 
-`onColorChangeComplete: () => {}` callback function for when the slider and wheel thumb stops moving
+`onColorChange: (color) => {}` callback function providing current color while user is actively dragging slider/wheel
 
+`onColorChangeComplete: (color) => {}` callback function providing final color when user stops dragging slider/wheel
+
 ## Instance methods
@@ -117,2 +129,2 @@ `revert()` reverts the color to the one provided in the color prop
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.
+THE SOFTWARE.

types.d.ts

 import * as React from 'react';
 
 export interface ColorPickerProps extends React.Props<ColorPicker> {
-  row: boolean,
-  noSnap: boolean,
-  thumbSize: number,
-  sliderSize: number,
-  discrete: boolean,
-  swatches: boolean,
-  swatchesLast: boolean,
-  swatchesOnly: boolean,
-  color: string,
-  shadeWheelThumb: boolean,
-  shadeSliderThumb: boolean,
-  autoResetSlider: boolean,
-  onColorChange(): void,
-  onColorChangeComplete(): void,
+  /** Use row or vertical layout */
+  row?: boolean,
+  /** Enables snapping on the center of wheel and edges of wheel and slider */
+  noSnap?: boolean,
+  /** Wheel color thumb size */
+  thumbSize?: number,
+  /** Slider and slider color thumb size */
+  sliderSize?: number,
+  /** Gap size between wheel & slider */
+  gapSize?: number,
+  /** Use swatchs of shades instead of slider */
+  discrete?: boolean,
+  /** Number of swatchs of shades */
+  discreteLength?: number,
+  /** If true the slider is hidden */
+  sliderHidden?: boolean,
+  /** Show color swatches */
+  swatches?: boolean,
+  /** If false swatches are shown before wheel */
+  swatchesLast?: boolean,
+  /** Show swatch only and hide wheel and slider */
+  swatchesOnly?: boolean,
+  /** Defines how far the touch event can start away from the swatch */
+  swatchesHitSlop?: {top: number, left: number, bottom: number, right: number},
+  /** Color of the color picker */
+  color?: string,
+  /** Palette colors of swatches */
+  palette?: string[],
+  /** If true the wheel thumb color is shaded */
+  shadeWheelThumb?: boolean,
+  /** If true the slider thumb color is shaded */
+  shadeSliderThumb?: boolean,
+  /** If true the slider thumb is reset to 0 value when wheel thumb is moved */
+  autoResetSlider?: boolean,
+  /** Callback function triggered when user begins dragging slider/wheel */
+  onInteractionStart?: () => void,
+  /** Callback function providing current color while user is actively dragging slider/wheel */
+  onColorChange?: (color: string) => void,
+  /** Callback function providing final color when user stops dragging slider/wheel */
+  onColorChangeComplete?: (color: string) => void,
 }
@@ -19,0 +45,0 @@

No alert changes

Improved metrics

Total package byte prevSize

236933

1.61%

Lines of code

747

6.26%

Number of lines in readme file

127

11.4%

No dependency changes