@react-stately/color 3.0.0-beta.8 → 3.0.0-beta.9

package/dist/module.js

@@ -217,6 +217,20 @@ class $799cddbef784668f$var$Color {
     getChannelName(channel, locale) {
         return $799cddbef784668f$var$messages.getStringForLocale(channel, locale);
     }
+    getColorSpaceAxes(xyChannels) {
+        let { xChannel: xChannel , yChannel: yChannel  } = xyChannels;
+        let xCh = xChannel || this.getColorChannels().find((c)=>c !== yChannel
+        );
+        let yCh = yChannel || this.getColorChannels().find((c)=>c !== xCh
+        );
+        let zCh = this.getColorChannels().find((c)=>c !== xCh && c !== yCh
+        );
+        return {
+            xChannel: xCh,
+            yChannel: yCh,
+            zChannel: zCh
+        };
+    }
 }
 const $799cddbef784668f$var$HEX_REGEX = /^#(?:([0-9a-f]{3})|([0-9a-f]{6}))$/i;
 // X = <negative/positive number with/without decimal places>
@@ -392,6 +406,9 @@ class $799cddbef784668f$var$RGBColor extends $799cddbef784668f$var$Color {
     getColorSpace() {
         return 'rgb';
     }
+    getColorChannels() {
+        return $799cddbef784668f$var$RGBColor.colorChannels;
+    }
     constructor(red, green, blue, alpha){
         super();
         this.red = red;
@@ -400,6 +417,11 @@ class $799cddbef784668f$var$RGBColor extends $799cddbef784668f$var$Color {
         this.alpha = alpha;
     }
 }
+$799cddbef784668f$var$RGBColor.colorChannels = [
+    'red',
+    'green',
+    'blue'
+];
 // X = <negative/positive number with/without decimal places>
 // before/after a comma, 0 or more whitespaces are allowed
 // - hsb(X, X%, X%)
@@ -531,6 +553,9 @@ class $799cddbef784668f$var$HSBColor extends $799cddbef784668f$var$Color {
     getColorSpace() {
         return 'hsb';
     }
+    getColorChannels() {
+        return $799cddbef784668f$var$HSBColor.colorChannels;
+    }
     constructor(hue, saturation, brightness, alpha){
         super();
         this.hue = hue;
@@ -539,6 +564,11 @@ class $799cddbef784668f$var$HSBColor extends $799cddbef784668f$var$Color {
         this.alpha = alpha;
     }
 }
+$799cddbef784668f$var$HSBColor.colorChannels = [
+    'hue',
+    'saturation',
+    'brightness'
+];
 // X = <negative/positive number with/without decimal places>
 // before/after a comma, 0 or more whitespaces are allowed
 // - hsl(X, X%, X%)
@@ -673,6 +703,9 @@ class $799cddbef784668f$var$HSLColor extends $799cddbef784668f$var$Color {
     getColorSpace() {
         return 'hsl';
     }
+    getColorChannels() {
+        return $799cddbef784668f$var$HSLColor.colorChannels;
+    }
     constructor(hue, saturation, lightness, alpha){
         super();
         this.hue = hue;
@@ -681,6 +714,11 @@ class $799cddbef784668f$var$HSLColor extends $799cddbef784668f$var$Color {
         this.alpha = alpha;
     }
 }
+$799cddbef784668f$var$HSLColor.colorChannels = [
+    'hue',
+    'saturation',
+    'lightness'
+];
 
 
 var $6e14a98a7f67141d$exports = {};
@@ -690,64 +728,24 @@ $parcel$export($6e14a98a7f67141d$exports, "useColorAreaState", () => $6e14a98a7f
 
 
 const $6e14a98a7f67141d$var$DEFAULT_COLOR = $799cddbef784668f$export$6e865ea70d7724f('#ffffff');
-const $6e14a98a7f67141d$var$RGBSet = new Set([
-    'red',
-    'green',
-    'blue'
-]);
-let $6e14a98a7f67141d$var$difference = (a, b)=>new Set([
-        ...a
-    ].filter((x)=>!b.has(x)
-    ))
-;
 function $6e14a98a7f67141d$export$6df7f0e2cabc7eef(props) {
     let { value: value1 , defaultValue: defaultValue , xChannel: xChannel , yChannel: yChannel , onChange: onChange , onChangeEnd: onChangeEnd  } = props;
     if (!value1 && !defaultValue) defaultValue = $6e14a98a7f67141d$var$DEFAULT_COLOR;
     let [color, setColor] = $cBgAy$useControlledState(value1 && $799cddbef784668f$export$4cde5df63f53f473(value1), defaultValue && $799cddbef784668f$export$4cde5df63f53f473(defaultValue), onChange);
     let valueRef = $cBgAy$useRef(color);
     valueRef.current = color;
-    let channels = $cBgAy$useMemo(()=>{
-        if (!xChannel) switch(yChannel){
-            case 'red':
-            case 'green':
-                xChannel = 'blue';
-                break;
-            case 'blue':
-                xChannel = 'red';
-                break;
-            default:
-                xChannel = 'blue';
-                yChannel = 'green';
-        }
-        else if (!yChannel) switch(xChannel){
-            case 'red':
-                yChannel = 'green';
-                break;
-            case 'blue':
-                yChannel = 'red';
-                break;
-            default:
-                xChannel = 'blue';
-                yChannel = 'green';
-        }
-        let xyChannels = new Set([
-            xChannel,
-            yChannel
-        ]);
-        let zChannel = $6e14a98a7f67141d$var$difference($6e14a98a7f67141d$var$RGBSet, xyChannels).values().next().value;
-        return {
+    let channels = $cBgAy$useMemo(()=>valueRef.current.getColorSpaceAxes({
             xChannel: xChannel,
-            yChannel: yChannel,
-            zChannel: zChannel
-        };
-    }, [
+            yChannel: yChannel
+        })
+    , [
         xChannel,
         yChannel
     ]);
     let xChannelRange = color.getChannelRange(channels.xChannel);
     let yChannelRange = color.getChannelRange(channels.yChannel);
-    let { minValue: minValueX1 , maxValue: maxValueX1 , step: stepX , pageSize: pageSizeX  } = xChannelRange;
-    let { minValue: minValueY1 , maxValue: maxValueY1 , step: stepY , pageSize: pageSizeY  } = yChannelRange;
+    let { minValue: minValueX , maxValue: maxValueX , step: stepX , pageSize: pageSizeX  } = xChannelRange;
+    let { minValue: minValueY , maxValue: maxValueY , step: stepY , pageSize: pageSizeY  } = yChannelRange;
     let [isDragging1, setDragging] = $cBgAy$useState(false);
     let isDraggingRef = $cBgAy$useRef(false).current;
     let xValue = color.getChannelValue(channels.xChannel);
@@ -779,8 +777,6 @@ function $6e14a98a7f67141d$export$6df7f0e2cabc7eef(props) {
         yValue: yValue,
         setYValue: setYValue,
         setColorFromPoint (x, y) {
-            let { minValue: minValueX , maxValue: maxValueX  } = color.getChannelRange(channels.xChannel);
-            let { minValue: minValueY , maxValue: maxValueY  } = color.getChannelRange(channels.yChannel);
             let newXValue = minValueX + $cBgAy$clamp(x, 0, 1) * (maxValueX - minValueX);
             let newYValue = minValueY + (1 - $cBgAy$clamp(y, 0, 1)) * (maxValueY - minValueY);
             let newColor;
@@ -797,24 +793,24 @@ function $6e14a98a7f67141d$export$6df7f0e2cabc7eef(props) {
             if (newColor) setColor(newColor);
         },
         getThumbPosition () {
-            let x = (xValue - minValueX1) / (maxValueX1 - minValueX1);
-            let y = 1 - (yValue - minValueY1) / (maxValueY1 - minValueY1);
+            let x = (xValue - minValueX) / (maxValueX - minValueX);
+            let y = 1 - (yValue - minValueY) / (maxValueY - minValueY);
             return {
                 x: x,
                 y: y
             };
         },
         incrementX (stepSize) {
-            setXValue(xValue + stepSize > maxValueX1 ? maxValueX1 : $cBgAy$snapValueToStep(xValue + stepSize, minValueX1, maxValueX1, stepX));
+            setXValue(xValue + stepSize > maxValueX ? maxValueX : $cBgAy$snapValueToStep(xValue + stepSize, minValueX, maxValueX, stepX));
         },
         incrementY (stepSize) {
-            setYValue(yValue + stepSize > maxValueY1 ? maxValueY1 : $cBgAy$snapValueToStep(yValue + stepSize, minValueY1, maxValueY1, stepY));
+            setYValue(yValue + stepSize > maxValueY ? maxValueY : $cBgAy$snapValueToStep(yValue + stepSize, minValueY, maxValueY, stepY));
         },
         decrementX (stepSize) {
-            setXValue($cBgAy$snapValueToStep(xValue - stepSize, minValueX1, maxValueX1, stepX));
+            setXValue($cBgAy$snapValueToStep(xValue - stepSize, minValueX, maxValueX, stepX));
         },
         decrementY (stepSize) {
-            setYValue($cBgAy$snapValueToStep(yValue - stepSize, minValueY1, maxValueY1, stepY));
+            setYValue($cBgAy$snapValueToStep(yValue - stepSize, minValueY, maxValueY, stepY));
         },
         setDragging (isDragging) {
             let wasDragging = isDraggingRef;
@@ -987,7 +983,7 @@ function $ee4262c74a467b07$export$f4301076d9336137(props) {
         },
         isDragging: isDragging1,
         getDisplayColor () {
-            return value.withChannelValue('saturation', 100).withChannelValue('lightness', 50);
+            return value.toFormat('hsl').withChannelValue('saturation', 100).withChannelValue('lightness', 50);
         }
     };
 }