reanimated-color-picker 0.0.13 → 0.0.16

package/lib/ColorPicker.js

@@ -11,12 +11,6 @@ import Animated, {
 } from 'react-native-reanimated';
 import { ALPHA_HEX, COLOR_HSVA, CONTRAST_RATIO, HSL_HEX, HSL_RGB, HSV_HSL } from './ColorsConversionFormulas';
 
-const PANEL_IMAGE = require('./assets/Background.png'),
-  OPACITY_IMAGE = require('./assets/Opacity.png'),
-  HUE_IMAGE = require('./assets/Hue.png'),
-  SATURATION_IMAGE = require('./assets/Saturation.png'),
-  BRIGHTNESS_IMAGE = require('./assets/Brightness.png');
-
 const isRtl = I18nManager.isRTL,
   HUE_MAX = 360,
   SB_MAX = 100,
@@ -62,7 +56,17 @@ const ReText = props => {
       underlineColorAndroid='transparent'
       editable={false}
       value={text.value}
-      style={[{ fontWeight: 'bold', padding: 0, height: '100%', width: '100%', textAlign: 'center' }, customStyle, style]}
+      style={[
+        {
+          fontWeight: 'bold',
+          padding: 0,
+          height: '100%',
+          width: '100%',
+          textAlign: 'center',
+        },
+        customStyle,
+        style,
+      ]}
       {...{ animatedProps }}
     />
   );
@@ -82,7 +86,8 @@ export default function ColorPicker({
   const initialColor = useRef(COLOR_HSVA(value));
   const previewColorFormat = useRef('hex');
 
-  const panelThumbeSize = useRef(thumbsSize);
+  const panel1ThumbeSize = useRef(thumbsSize);
+  const panel2ThumbeSize = useRef(thumbsSize);
   const hueThumbeSize = useRef(thumbsSize);
   const brightnessThumbeSize = useRef(thumbsSize);
   const saturationThumbeSize = useRef(thumbsSize);
@@ -97,11 +102,25 @@ export default function ColorPicker({
     const { h, s, l } = HSV_HSL(color.h, color.s, color.b);
     return `hsl(${h}, ${s}%, ${l}%)`;
   };
-  const color_hsla = (color = { h: hue.current, s: saturation.current, b: brightness.current, a: alpha.current }) => {
+  const color_hsla = (
+    color = {
+      h: hue.current,
+      s: saturation.current,
+      b: brightness.current,
+      a: alpha.current,
+    }
+  ) => {
     const { h, s, l } = HSV_HSL(color.h, color.s, color.b);
     return `hsla(${h}, ${s}%, ${l}%, ${color.a / 100})`;
   };
-  const color_hex = (color = { h: hue.current, s: saturation.current, b: brightness.current, a: alpha.current }) => {
+  const color_hex = (
+    color = {
+      h: hue.current,
+      s: saturation.current,
+      b: brightness.current,
+      a: alpha.current,
+    }
+  ) => {
     const { h, s, l } = HSV_HSL(color.h, color.s, color.b);
     return HSL_HEX(h, s, l) + (color.a === 100 ? '' : ALPHA_HEX(color.a));
   };
@@ -110,7 +129,14 @@ export default function ColorPicker({
     const { r, g, b } = HSL_RGB(h, s, l);
     return `rgb(${r}, ${g}, ${b})`;
   };
-  const color_rgba = (color = { h: hue.current, s: saturation.current, b: brightness.current, a: alpha.current }) => {
+  const color_rgba = (
+    color = {
+      h: hue.current,
+      s: saturation.current,
+      b: brightness.current,
+      a: alpha.current,
+    }
+  ) => {
     const { h, s, l } = HSV_HSL(color.h, color.s, color.b);
     const { r, g, b } = HSL_RGB(h, s, l);
     return `rgba(${r}, ${g}, ${b}, ${color.a / 100})`;
@@ -118,11 +144,25 @@ export default function ColorPicker({
   const color_hsv = (color = { h: hue.current, s: saturation.current, b: brightness.current }) => {
     return `hsv(${color.h}, ${color.s}%, ${color.b}%)`;
   };
-  const color_hsva = (color = { h: hue.current, s: saturation.current, b: brightness.current, a: alpha.current }) => {
+  const color_hsva = (
+    color = {
+      h: hue.current,
+      s: saturation.current,
+      b: brightness.current,
+      a: alpha.current,
+    }
+  ) => {
     return `hsva(${color.h}, ${color.s}%, ${color.b}%, ${color.a / 100})`;
   };
 
-  const returnedResults = (color = { h: hue.current, s: saturation.current, b: brightness.current, a: alpha.current }) => {
+  const returnedResults = (
+    color = {
+      h: hue.current,
+      s: saturation.current,
+      b: brightness.current,
+      a: alpha.current,
+    }
+  ) => {
     return {
       hex: color_hex(color),
       rgb: color_rgb(color),
@@ -135,23 +175,33 @@ export default function ColorPicker({
   };
 
   const previewColor = useSharedValue(color_hex());
-  const previewColorStyle = useAnimatedStyle(() => ({ backgroundColor: previewColor.value }));
+  const previewColorStyle = useAnimatedStyle(() => ({
+    backgroundColor: previewColor.value,
+  }));
   const previewColorWithoutOpacity = useAnimatedStyle(() => ({
     backgroundColor: previewColor.value.length > 7 ? previewColor.value.substring(0, 7) : previewColor.value,
   }));
   const activeHue = useSharedValue(HSL_HEX(hue.current, 100, 50));
-  const activeHueStyle = useAnimatedStyle(() => ({ backgroundColor: activeHue.value }));
+  const activeHueStyle = useAnimatedStyle(() => ({
+    backgroundColor: activeHue.value,
+  }));
+
+  const saturationPanel1_handlePos = useSharedValue(0); // for saturation panle 1 adobe style
+  const brightnessPanel1_handlePos = useSharedValue(0); // for brightness panle 1 adobe style
+
+  const huePanel2_handlePos = useSharedValue(0); // for hue panle 2 windows style
+  const saturationPanel2_handlePos = useSharedValue(0); // for saturation panle 2 windows style
 
   const hue_handlePos = useSharedValue(0); // for hue slider
-  const saturationPanel_handlePos = useSharedValue(0); // for saturation panle
   const saturationSlider_handlePos = useSharedValue(0); // for saturation slider
-  const brightnessPanel_handlePos = useSharedValue(0); // for brightness panel
   const brightnessSlider_handlePos = useSharedValue(0); // for brightness slider
   const opacity_handlePos = useSharedValue(0); // for opacity slider
   const previewTextColor = useSharedValue('#ffffff'); // for result text color
   const previewText = useSharedValue(returnedResults()[previewColorFormat.current]); // for result text
 
-  const previewTextColorStyle = useAnimatedStyle(() => ({ color: previewTextColor.value }));
+  const previewTextColorStyle = useAnimatedStyle(() => ({
+    color: previewTextColor.value,
+  }));
 
   const onGestureEventFinish = () => {
     onComplete?.(returnedResults());
@@ -194,6 +244,20 @@ export default function ColorPicker({
     onChange?.(returnedResults());
   };
 
+  const updateHS = (hueChannel, saturationChannel) => {
+    saturation.current = saturationChannel;
+    hue.current = hueChannel;
+    previewColor.value = color_hex(); // to update result color.
+    previewText.value = returnedResults()[previewColorFormat.current]; // update result text
+    // change result text color based on lightness
+    const contrast = CONTRAST_RATIO(hue.current, saturation.current, brightness.current, previewTextColor.value);
+    previewTextColor.value =
+      contrast < CONTRAST_RATIO_MIN ? (previewTextColor.value === '#ffffff' ? '#000000' : '#ffffff') : previewTextColor.value;
+
+    activeHue.value = HSL_HEX(hueChannel, 100, 50);
+    onChange?.(returnedResults());
+  };
+
   const updateHue = hueChannel => {
     hue.current = hueChannel;
     previewColor.value = color_hex(); // to update result color.
@@ -203,7 +267,7 @@ export default function ColorPicker({
     previewTextColor.value =
       contrast < CONTRAST_RATIO_MIN ? (previewTextColor.value === '#ffffff' ? '#000000' : '#ffffff') : previewTextColor.value;
 
-    activeHue.value = HSL_HEX(hueChannel, 100, 50); // to update SV background color.
+    activeHue.value = HSL_HEX(hueChannel, 100, 50);
     onChange?.(returnedResults());
   };
 
@@ -231,33 +295,38 @@ export default function ColorPicker({
     const contrast = CONTRAST_RATIO(hue.current, saturation.current, brightness.current, previewTextColor.value);
     previewTextColor.value =
       contrast < CONTRAST_RATIO_MIN ? (previewTextColor.value === '#ffffff' ? '#000000' : '#ffffff') : previewTextColor.value;
-    // saturation
-    saturationPanel_handlePos.value = withTiming(
-      isRtl ? (s / SB_MAX) * width - width + panelThumbeSize.current / 2 : (s / SB_MAX) * width - panelThumbeSize.current / 2,
+    //~ saturation
+    saturationPanel1_handlePos.value = withTiming(
+      isRtl ? (s / SB_MAX) * width - width + panel1ThumbeSize.current / 2 : (s / SB_MAX) * width - panel1ThumbeSize.current / 2,
       duration
-    );
+    ); // panel 1 adobe style
+    saturationPanel2_handlePos.value = withTiming(width - (s / SB_MAX) * width - panel2ThumbeSize.current / 2, duration); // panel 2 windows style
     saturationSlider_handlePos.value = withTiming(
       isRtl
         ? (s / SB_MAX) * width - width + saturationThumbeSize.current / 2
         : (s / SB_MAX) * width - saturationThumbeSize.current / 2,
       duration
     );
-    // brightness
-    brightnessPanel_handlePos.value = withTiming(width - (b / SB_MAX) * width - panelThumbeSize.current / 2, duration);
+    //~ brightness
+    brightnessPanel1_handlePos.value = withTiming(width - (b / SB_MAX) * width - panel1ThumbeSize.current / 2, duration);
     brightnessSlider_handlePos.value = withTiming(
       isRtl
         ? (b / SB_MAX) * width - width + brightnessThumbeSize.current / 2
         : (b / SB_MAX) * width - brightnessThumbeSize.current / 2,
       duration
     );
-    // hue
+    //~ hue
     hue_handlePos.value = withTiming(
       isRtl
         ? width - (h / HUE_MAX) * width - width + hueThumbeSize.current / 2
         : width - (h / HUE_MAX) * width - hueThumbeSize.current / 2,
       100
     );
-    // opacity
+    huePanel2_handlePos.value = withTiming(
+      isRtl ? (h / HUE_MAX) * width - width + panel2ThumbeSize.current / 2 : (h / HUE_MAX) * width - panel2ThumbeSize.current / 2,
+      duration
+    ); // panel 2 windows style
+    //~ opacity
     opacity_handlePos.value = withTiming(
       isRtl
         ? (a / OPACITY_MAX) * width - width + opacityThumbeSize.current / 2
@@ -291,9 +360,11 @@ export default function ColorPicker({
             previewColorFormat,
 
             setHandlesPos,
-            saturationPanel_handlePos,
+            saturationPanel1_handlePos,
+            brightnessPanel1_handlePos,
+            saturationPanel2_handlePos,
+            huePanel2_handlePos,
             saturationSlider_handlePos,
-            brightnessPanel_handlePos,
             brightnessSlider_handlePos,
             hue_handlePos,
             opacity_handlePos,
@@ -301,13 +372,15 @@ export default function ColorPicker({
             updateSaturation,
             updateBrightness,
             updateSB,
+            updateHS,
             updateOpacity,
             updateHue,
 
             tracksHeight,
             thumbsSize,
 
-            panelThumbeSize,
+            panel1ThumbeSize,
+            panel2ThumbeSize,
             saturationThumbeSize,
             brightnessThumbeSize,
             hueThumbeSize,
@@ -331,18 +404,20 @@ export default function ColorPicker({
   return <GestureHandlerRootView style={[styles.wrapper, style]}>{ColorPickerModules}</GestureHandlerRootView>;
 }
 
-export function Panel({
+export function Panel1({
   activeHueStyle,
   previewTextColor,
   previewColorWithoutOpacity,
-  saturationPanel_handlePos,
+  saturationPanel1_handlePos,
+  brightnessPanel1_handlePos,
+  saturationPanel2_handlePos,
   saturationSlider_handlePos,
-  brightnessPanel_handlePos,
   brightnessSlider_handlePos,
   updateSB,
   onGestureEventFinish,
   setHandlesPos,
-  panelThumbeSize,
+  panel1ThumbeSize,
+  panel2ThumbeSize,
   brightnessThumbeSize,
   saturationThumbeSize,
   width,
@@ -350,7 +425,7 @@ export function Panel({
   thumbSize = thumbsSize, // by user
   style = {}, // by user
 }) {
-  panelThumbeSize.current = thumbSize;
+  panel1ThumbeSize.current = thumbSize;
 
   useEffect(() => {
     setHandlesPos();
@@ -362,8 +437,8 @@ export function Panel({
     backgroundColor: previewTextColor.value === '#ffffff' ? '#ffffff50' : '#00000050',
     borderColor: previewTextColor.value,
     transform: [
-      { translateX: saturationPanel_handlePos.value },
-      { translateY: brightnessPanel_handlePos.value },
+      { translateX: saturationPanel1_handlePos.value },
+      { translateY: brightnessPanel1_handlePos.value },
       { scale: scale_panelHandle.value },
     ],
   }));
@@ -387,16 +462,20 @@ export function Panel({
       const saturationX = Math.round(percentX * SB_MAX);
       const brightnessY = Math.round(SB_MAX - percentY * SB_MAX);
 
-      saturationPanel_handlePos.value = isRtl ? percentX * width - width + thumbSize / 2 : percentX * width - thumbSize / 2;
-      brightnessPanel_handlePos.value = percentY * width - thumbSize / 2;
+      saturationPanel1_handlePos.value = isRtl ? percentX * width - width + thumbSize / 2 : percentX * width - thumbSize / 2;
+      brightnessPanel1_handlePos.value = percentY * width - thumbSize / 2;
 
       brightnessSlider_handlePos.value = isRtl
         ? (brightnessY / SB_MAX) * width - width + brightnessThumbeSize.current / 2
         : (brightnessY / SB_MAX) * width - brightnessThumbeSize.current / 2;
+
       saturationSlider_handlePos.value = isRtl
         ? (saturationX / SB_MAX) * width - width + saturationThumbeSize.current / 2
         : (saturationX / SB_MAX) * width - saturationThumbeSize.current / 2;
 
+      // panel 2 windows style
+      saturationPanel2_handlePos.value = width - (saturationX / SB_MAX) * width - panel2ThumbeSize.current / 2;
+
       runOnJS(updateSB)(saturationX, brightnessY);
     },
     onFinish: () => {
@@ -408,9 +487,135 @@ export function Panel({
   return (
     <PanGestureHandler onGestureEvent={panel_GestureEvent} minDist={0}>
       <Animated.View style={[styles.panel_container, style, { width, height: width }, styles.override, activeHueStyle]}>
-        <Image source={PANEL_IMAGE} style={{ borderRadius: style.borderRadius ?? 5, width, height: width }} />
+        <Image
+          source={require('./assets/Background1.png')}
+          style={{
+            borderRadius: style.borderRadius ?? 5,
+            width,
+            height: width,
+          }}
+        />
         <Animated.View
-          style={[styles.handle, { width: thumbSize, height: thumbSize, borderRadius: thumbSize / 2 }, panel_handleStyle]}
+          style={[
+            styles.handle,
+            {
+              width: thumbSize,
+              height: thumbSize,
+              borderRadius: thumbSize / 2,
+            },
+            panel_handleStyle,
+          ]}
+        >
+          <Animated.View style={[styles.handleInner, { borderRadius: thumbSize / 2 }, previewColorWithoutOpacity]} />
+        </Animated.View>
+      </Animated.View>
+    </PanGestureHandler>
+  );
+}
+
+export function Panel2({
+  previewTextColor,
+  previewColorWithoutOpacity,
+  saturationPanel1_handlePos,
+  saturationPanel2_handlePos,
+  huePanel2_handlePos,
+  hue_handlePos,
+  saturationSlider_handlePos,
+  onGestureEventFinish,
+  setHandlesPos,
+  panel1ThumbeSize,
+  panel2ThumbeSize,
+  hueThumbeSize,
+  saturationThumbeSize,
+  updateHS,
+  width,
+  thumbsSize,
+  thumbSize = thumbsSize, // by user
+  style = {}, // by user
+}) {
+  panel2ThumbeSize.current = thumbSize;
+
+  useEffect(() => {
+    setHandlesPos();
+  }, []);
+
+  const scale_panelHandle = useSharedValue(1);
+
+  const panel_handleStyle = useAnimatedStyle(() => ({
+    backgroundColor: previewTextColor.value === '#ffffff' ? '#ffffff50' : '#00000050',
+    borderColor: previewTextColor.value,
+    transform: [
+      { translateX: huePanel2_handlePos.value },
+      { translateY: saturationPanel2_handlePos.value },
+      { scale: scale_panelHandle.value },
+    ],
+  }));
+
+  const panel_GestureEvent = useAnimatedGestureHandler({
+    onStart: (event, ctx) => {
+      ctx.x = event.x;
+      ctx.y = event.y;
+      scale_panelHandle.value = withTiming(HANDLES_SCALE, { duration: 100 });
+    },
+    onActive: (event, ctx) => {
+      const clamp = (v, max) => Math.min(Math.max(v, 0), max);
+
+      const x = event.translationX;
+      const y = event.translationY;
+      const posX = clamp(x + ctx.x, width);
+      const posY = clamp(y + ctx.y, width);
+      const percentX = posX / width;
+      const percentY = posY / width;
+
+      const hueX = Math.round(percentX * HUE_MAX);
+      const saturationY = Math.round(SB_MAX - percentY * SB_MAX);
+
+      huePanel2_handlePos.value = isRtl ? percentX * width - width + thumbSize / 2 : percentX * width - thumbSize / 2;
+
+      saturationPanel2_handlePos.value = percentY * width - thumbSize / 2;
+
+      hue_handlePos.value = isRtl
+        ? width - (hueX / HUE_MAX) * width - width + hueThumbeSize.current / 2
+        : width - (hueX / HUE_MAX) * width - hueThumbeSize.current / 2;
+
+      saturationSlider_handlePos.value = isRtl
+        ? (saturationY / SB_MAX) * width - width + saturationThumbeSize.current / 2
+        : (saturationY / SB_MAX) * width - saturationThumbeSize.current / 2;
+
+      // panel 1 adobe style
+      saturationPanel1_handlePos.value = isRtl
+        ? (saturationY / SB_MAX) * width - width + panel1ThumbeSize.current / 2
+        : (saturationY / SB_MAX) * width - panel1ThumbeSize.current / 2;
+
+      runOnJS(updateHS)(hueX, saturationY);
+    },
+    onFinish: () => {
+      scale_panelHandle.value = withTiming(1, { duration: 100 });
+      runOnJS(onGestureEventFinish)();
+    },
+  });
+
+  return (
+    <PanGestureHandler onGestureEvent={panel_GestureEvent} minDist={0}>
+      <Animated.View style={[styles.panel_container, style, { width, height: width }, styles.override]}>
+        <Image
+          source={require('./assets/Background2.png')}
+          style={{
+            borderRadius: style.borderRadius ?? 5,
+            width,
+            height: width,
+          }}
+        />
+        <Animated.View
+          style={[
+            styles.handle,
+            {
+              width: thumbSize,
+              height: thumbSize,
+              borderRadius: thumbSize / 2,
+            },
+            panel_handleStyle,
+          ]}
         >
           <Animated.View style={[styles.handleInner, { borderRadius: thumbSize / 2 }, previewColorWithoutOpacity]} />
         </Animated.View>
@@ -448,7 +653,7 @@ export function Preview({
     <View style={[styles.preview, { width }, style]}>
       {!hideInitialColor && (
         <View style={[styles.previewChildren, { backgroundColor: value }]}>
-          {hideText && (
+          {!hideText && (
             <Text style={[{ color: initialColorText.color }, { fontWeight: 'bold' }, textStyle]}>
               {initialColorText.formated}
             </Text>
@@ -469,8 +674,10 @@ export function HueSlider({
   updateHue,
   onGestureEventFinish,
   hue_handlePos,
+  huePanel2_handlePos,
   previewColorWithoutOpacity,
   tracksHeight,
+  panel2ThumbeSize,
   thumbsSize,
   thumbSize = thumbsSize, // by user
   ringColor = '#ffffff', // by user
@@ -514,6 +721,11 @@ export function HueSlider({
 
         hue_handlePos.value = isRtl ? percent * width - width + thumbSize / 2 : percent * width - thumbSize / 2;
 
+        // panel 2 windows style
+        huePanel2_handlePos.value = isRtl
+          ? (hueX / HUE_MAX) * width - width + panel2ThumbeSize.current / 2
+          : (hueX / HUE_MAX) * width - panel2ThumbeSize.current / 2;
+
         runOnJS(updateHue)(hueX);
       },
       onFinish: () => {
@@ -528,7 +740,7 @@ export function HueSlider({
     <PanGestureHandler onGestureEvent={HueGestureEvent} minDist={0}>
       <Animated.View style={[{ position: 'relative', height: tracksHeight }, style, { width }, styles.override]}>
         <View style={[styles.sliderImageContainer, { borderRadius: style.borderRadius ?? 5 }]}>
-          <Image source={HUE_IMAGE} style={styles.sliderImage} />
+          <Image source={require('./assets/Hue.png')} style={styles.sliderImage} />
         </View>
         <Animated.View
           style={[
@@ -553,11 +765,13 @@ export function HueSlider({
 export function SaturationSlider({
   width,
   saturationThumbeSize,
-  panelThumbeSize,
+  panel2ThumbeSize,
+  panel1ThumbeSize,
   setHandlesPos,
   updateSaturation,
   onGestureEventFinish,
-  saturationPanel_handlePos,
+  saturationPanel1_handlePos,
+  saturationPanel2_handlePos,
   saturationSlider_handlePos,
   previewColorWithoutOpacity,
   tracksHeight,
@@ -592,7 +806,9 @@ export function SaturationSlider({
     {
       onStart: (event, ctx) => {
         ctx.x = event.x;
-        scale_saturationHandle.value = withTiming(HANDLES_SCALE, { duration: 100 });
+        scale_saturationHandle.value = withTiming(HANDLES_SCALE, {
+          duration: 100,
+        });
       },
       onActive: (event, ctx) => {
         const clamp = (v, max) => Math.min(Math.max(v, 0), max);
@@ -604,9 +820,12 @@ export function SaturationSlider({
         const saturationX = Math.round(percent * SB_MAX);
 
         saturationSlider_handlePos.value = isRtl ? percent * width - width + thumbSize / 2 : percent * width - thumbSize / 2;
-        saturationPanel_handlePos.value = isRtl
-          ? (saturationX / SB_MAX) * width - width + panelThumbeSize.current / 2
-          : (saturationX / SB_MAX) * width - panelThumbeSize.current / 2;
+        // panel 2 windows style
+        saturationPanel1_handlePos.value = isRtl
+          ? (saturationX / SB_MAX) * width - width + panel1ThumbeSize.current / 2
+          : (saturationX / SB_MAX) * width - panel1ThumbeSize.current / 2;
+        // panel 2 windows style
+        saturationPanel2_handlePos.value = width - (saturationX / SB_MAX) * width - panel2ThumbeSize.current / 2;
 
         runOnJS(updateSaturation)(saturationX);
       },
@@ -622,7 +841,7 @@ export function SaturationSlider({
     <PanGestureHandler onGestureEvent={SaturationGestureEvent} minDist={0}>
       <Animated.View style={[{ position: 'relative', height: tracksHeight }, style, { width }, styles.override]}>
         <Animated.View style={[styles.sliderImageContainer, { borderRadius: style.borderRadius ?? 5 }, activeHueStyle]}>
-          <Image source={SATURATION_IMAGE} style={styles.sliderImage} />
+          <Image source={require('./assets/Saturation.png')} style={styles.sliderImage} />
         </Animated.View>
         <Animated.View
           style={[
@@ -647,11 +866,11 @@ export function SaturationSlider({
 export function BrightnessSlider({
   width,
   brightnessThumbeSize,
-  panelThumbeSize,
+  panel1ThumbeSize,
   setHandlesPos,
   updateBrightness,
   onGestureEventFinish,
-  brightnessPanel_handlePos,
+  brightnessPanel1_handlePos,
   brightnessSlider_handlePos,
   previewColorWithoutOpacity,
   tracksHeight,
@@ -686,7 +905,9 @@ export function BrightnessSlider({
     {
       onStart: (event, ctx) => {
         ctx.x = event.x;
-        scale_brightnessHandle.value = withTiming(HANDLES_SCALE, { duration: 100 });
+        scale_brightnessHandle.value = withTiming(HANDLES_SCALE, {
+          duration: 100,
+        });
       },
       onActive: (event, ctx) => {
         const clamp = (v, max) => Math.min(Math.max(v, 0), max);
@@ -698,7 +919,7 @@ export function BrightnessSlider({
         const brightnessX = Math.round(percent * SB_MAX);
 
         brightnessSlider_handlePos.value = isRtl ? percent * width - width + thumbSize / 2 : percent * width - thumbSize / 2;
-        brightnessPanel_handlePos.value = width - (brightnessX / SB_MAX) * width - panelThumbeSize.current / 2;
+        brightnessPanel1_handlePos.value = width - (brightnessX / SB_MAX) * width - panel1ThumbeSize.current / 2;
 
         runOnJS(updateBrightness)(brightnessX);
       },
@@ -714,7 +935,7 @@ export function BrightnessSlider({
     <PanGestureHandler onGestureEvent={BrightnessGestureEvent} minDist={0}>
       <Animated.View style={[{ position: 'relative', height: tracksHeight }, style, { width }, styles.override]}>
         <Animated.View style={[styles.sliderImageContainer, { borderRadius: style.borderRadius ?? 5 }, activeHueStyle]}>
-          <Image source={BRIGHTNESS_IMAGE} style={styles.sliderImage} />
+          <Image source={require('./assets/Brightness.png')} style={styles.sliderImage} />
         </Animated.View>
         <Animated.View
           style={[
@@ -800,7 +1021,7 @@ export function OpacitySlider({
     <PanGestureHandler onGestureEvent={opacityGestureEvent} minDist={0}>
       <Animated.View style={[{ position: 'relative', height: tracksHeight }, style, { width }, styles.override]}>
         <Animated.View style={[styles.sliderImageContainer, { borderRadius: style.borderRadius ?? 5 }, activeHueStyle]}>
-          <Image source={OPACITY_IMAGE} style={styles.sliderImage} />
+          <Image source={require('./assets/Opacity.png')} style={styles.sliderImage} />
         </Animated.View>
         <Animated.View
           style={[

package/lib/ColorsConversionFormulas.js

@@ -3,25 +3,15 @@ import NamedColors from './NamedColors';
 export const HSL_RGB = (h, s, l) => {
   s /= 100;
   l /= 100;
+  const k = n => (n + h / 30) % 12;
+  const a = s * Math.min(l, 1 - l);
+  const f = n => l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
 
-  if (h === undefined) return { r: 0, g: 0, b: 0 };
-
-  const chroma = (1 - Math.abs(2 * l - 1)) * s;
-  let huePrime = h / 60;
-  const secondComponent = chroma * (1 - Math.abs((huePrime % 2) - 1));
-  huePrime = Math.floor(huePrime);
-
-  let red = [0, 5].includes(huePrime) ? chroma : [1, 4].includes(huePrime) ? secondComponent : 0,
-    green = [1, 2].includes(huePrime) ? chroma : [0, 3].includes(huePrime) ? secondComponent : 0,
-    blue = [3, 4].includes(huePrime) ? chroma : [2, 5].includes(huePrime) ? secondComponent : 0;
-
-  const lightnessAdjustment = l - chroma / 2;
-
-  red += lightnessAdjustment;
-  green += lightnessAdjustment;
-  blue += lightnessAdjustment;
-
-  return { r: Math.abs(Math.round(red * 255)), g: Math.abs(Math.round(green * 255)), b: Math.abs(Math.round(blue * 255)) };
+  return {
+    r: Math.round(255 * f(0)),
+    g: Math.round(255 * f(8)),
+    b: Math.round(255 * f(4)),
+  };
 };
 
 export const ALPHA_HEX = number => {
@@ -157,7 +147,7 @@ export const COLOR_HSVA = colorStr => {
     if (!match) throw new Error('Invalid HSL value');
     const colorValues = match.split(',');
     if (colorValues.length !== 3) throw new Error('Invalid HSL value');
-    const [h, s, l] = colorValues.map(v => +v);
+    const [h, s, l] = colorValues.map(v => +v.replace('%', '').replace('deg', ''));
     if (isNaN(h) || isNaN(s) || isNaN(l)) throw new Error('Invalid HSL value');
     return { ...HSL_HSV(h, s, l), a: 100 };
   }
@@ -167,7 +157,7 @@ export const COLOR_HSVA = colorStr => {
     if (!match) throw new Error('Invalid HSLA value');
     const colorValues = match.split(',');
     if (colorValues.length !== 4) throw new Error('Invalid HSLA value');
-    const [h, s, l, a] = colorValues.map(v => +v);
+    const [h, s, l, a] = colorValues.map(v => +v.replace('%', '').replace('deg', ''));
     if (isNaN(h) || isNaN(s) || isNaN(l) || isNaN(a)) throw new Error('Invalid HSLA value');
     return { ...HSL_HSV(h, s, l), a: Math.round(a * 100) };
   }
@@ -177,7 +167,7 @@ export const COLOR_HSVA = colorStr => {
     if (!match) throw new Error('Invalid HSV value');
     const colorValues = match.split(',');
     if (colorValues.length !== 3) throw new Error('Invalid HSV value');
-    const [h, s, b] = colorValues.map(n => +n);
+    const [h, s, b] = colorValues.map(n => +n.replace('%', '').replace('deg', ''));
     if (isNaN(h) || isNaN(s) || isNaN(b)) throw new Error('Invalid HSV value');
     return { h, s, b, a: 100 };
   }
@@ -187,7 +177,7 @@ export const COLOR_HSVA = colorStr => {
     if (!match) throw new Error('Invalid HSVA value');
     const colorValues = match.split(',');
     if (colorValues.length !== 4) throw new Error('Invalid HSVA value');
-    const [h, s, b, a] = colorValues.map(n => +n);
+    const [h, s, b, a] = colorValues.map(n => +n.replace('%', '').replace('deg', ''));
     if (isNaN(h) || isNaN(s) || isNaN(b) || isNaN(a)) throw new Error('Invalid HSVA value');
     return { h, s, b, a: Math.round(a * 100) };
   }

package/lib/index.d.ts

@@ -147,7 +147,8 @@ interface OpacityProps {
 
 declare const ColorPicker: React.FunctionComponent<ColorPickerProps>;
 export declare const Preview: React.FunctionComponent<PreviewPorps>;
-export declare const Panel: React.FunctionComponent<PanelProps>;
+export declare const Panel1: React.FunctionComponent<PanelProps>;
+export declare const Panel2: React.FunctionComponent<PanelProps>;
 export declare const HueSlider: React.FunctionComponent<HueProps>;
 export declare const BrightnessSlider: React.FunctionComponent<BrightnessProps>;
 export declare const SaturationSlider: React.FunctionComponent<SaturationProps>;

package/lib/index.js

@@ -1,4 +1,13 @@
-import ColorPicker from './ColorPicker.js';
-
-export default ColorPicker;
-export { Panel, Swatches, Preview, OpacitySlider, HueSlider, BrightnessSlider, SaturationSlider } from './ColorPicker.js';
+import ColorPicker from './ColorPicker.js';
+
+export default ColorPicker;
+export {
+  Panel1,
+  Panel2,
+  Swatches,
+  Preview,
+  OpacitySlider,
+  HueSlider,
+  BrightnessSlider,
+  SaturationSlider,
+} from './ColorPicker.js';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "reanimated-color-picker",
-  "version": "0.0.13",
-  "description": "",
+  "version": "0.0.16",
+  "description": "Pure JavaScript color picker for react-native",
   "main": "lib/index.js",
   "source": "lib/index.js",
   "types": "lib/index.d.ts",

package/readme.md

@@ -13,6 +13,8 @@
 
 ![Example_2](https://github.com/alabsi91/reanimated-color-picker/blob/main/images/example_2.png?raw=true)
 
+![Example_3](https://github.com/alabsi91/reanimated-color-picker/blob/main/images/example_3.png?raw=true)
+
 # :small_blue_diamond: Table of contents
 
 - :one: [Prerequisites](#small_blue_diamondprerequisites).
@@ -26,7 +28,8 @@
   - [ColorPicker Wrapper](#small_red_trianglecolorpicker-wrapper)
   - [Built-in Components](#small_red_trianglebuilt-in-components)
     - [`<Preview />`](#small_orange_diamondpreview-).
-    - [`<Panel />`](#small_orange_diamondpanel-).
+    - [`<Panel1 />`](#small_orange_diamondpanel1-).
+    - [`<Panel2 />`](#small_orange_diamondpanel2-).
     - [`<HueSlider />`](#small_orange_diamondhueslider-).
     - [`<SaturationSlider />`](#small_orange_diamondsaturationslider-).
     - [`<BrightnessSlider />`](#small_orange_diamondbrightnessslider-).
@@ -65,7 +68,7 @@ npm i reanimated-color-picker
 import React, { useState } from 'react';
 import { Button, Modal, View } from 'react-native';
 
-import ColorPicker, { Panel, Swatches, Preview, OpacitySlider, HueSlider } from 'reanimated-color-picker';
+import ColorPicker, { Panel1, Swatches, Preview, OpacitySlider, HueSlider } from 'reanimated-color-picker';
 
 export default function App() {
   const [showModal, setShowModal] = useState(false);
@@ -82,7 +85,7 @@ export default function App() {
       <Modal visible={showModal}>
         <ColorPicker value='red' onComplete={onSelectColor}>
           <Preview />
-          <Panel />
+          <Panel1 />
           <HueSlider />
           <OpacitySlider />
           <Swatches />
@@ -169,11 +172,24 @@ export default function App() {
 
 > **Note** some style properties will be overwritten.
 
-### :small_orange_diamond:`<Panel />`
+### :small_orange_diamond:`<Panel1 />`
+
+![panel1](https://github.com/alabsi91/reanimated-color-picker/blob/main/images/panel1.png?raw=true)
+
+- A square-shaped slider (adobe style) used for changing the color's brightness and saturation.
+
+| Property  |  Type  | Default | Description                               |
+| :-------- | :----: | :-----: | :---------------------------------------- |
+| thumbSize | number |  `35`   | panel handle (thumb) size (height\*width) |
+| style     | object |    /    | panle container style                     |
+
+> **Note** some style properties will be overwritten.
+
+### :small_orange_diamond:`<Panel2 />`
 
-![panel](https://github.com/alabsi91/reanimated-color-picker/blob/main/images/panel.png?raw=true)
+![panel2](https://github.com/alabsi91/reanimated-color-picker/blob/main/images/panel2.png?raw=true)
 
-- A square-shaped slider used for changing the color's brightness and saturation.
+- A square-shaped slider (windows style) used for changing the color's hue and saturation.
 
 | Property  |  Type  | Default | Description                               |
 | :-------- | :----: | :-----: | :---------------------------------------- |