@react-stately/color 3.0.0-nightly.3168 → 3.0.0-nightly.3173

package/dist/main.js

@@ -235,6 +235,20 @@ class $83fe1a57d631223b$var$Color {
     getChannelName(channel, locale) {
         return $83fe1a57d631223b$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 $83fe1a57d631223b$var$HEX_REGEX = /^#(?:([0-9a-f]{3})|([0-9a-f]{6}))$/i;
 // X = <negative/positive number with/without decimal places>
@@ -410,6 +424,9 @@ class $83fe1a57d631223b$var$RGBColor extends $83fe1a57d631223b$var$Color {
     getColorSpace() {
         return 'rgb';
     }
+    getColorChannels() {
+        return $83fe1a57d631223b$var$RGBColor.colorChannels;
+    }
     constructor(red, green, blue, alpha){
         super();
         this.red = red;
@@ -418,6 +435,11 @@ class $83fe1a57d631223b$var$RGBColor extends $83fe1a57d631223b$var$Color {
         this.alpha = alpha;
     }
 }
+$83fe1a57d631223b$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%)
@@ -549,6 +571,9 @@ class $83fe1a57d631223b$var$HSBColor extends $83fe1a57d631223b$var$Color {
     getColorSpace() {
         return 'hsb';
     }
+    getColorChannels() {
+        return $83fe1a57d631223b$var$HSBColor.colorChannels;
+    }
     constructor(hue, saturation, brightness, alpha){
         super();
         this.hue = hue;
@@ -557,6 +582,11 @@ class $83fe1a57d631223b$var$HSBColor extends $83fe1a57d631223b$var$Color {
         this.alpha = alpha;
     }
 }
+$83fe1a57d631223b$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%)
@@ -691,6 +721,9 @@ class $83fe1a57d631223b$var$HSLColor extends $83fe1a57d631223b$var$Color {
     getColorSpace() {
         return 'hsl';
     }
+    getColorChannels() {
+        return $83fe1a57d631223b$var$HSLColor.colorChannels;
+    }
     constructor(hue, saturation, lightness, alpha){
         super();
         this.hue = hue;
@@ -699,6 +732,11 @@ class $83fe1a57d631223b$var$HSLColor extends $83fe1a57d631223b$var$Color {
         this.alpha = alpha;
     }
 }
+$83fe1a57d631223b$var$HSLColor.colorChannels = [
+    'hue',
+    'saturation',
+    'lightness'
+];
 
 
 var $af2d7ac9990cfee2$exports = {};
@@ -708,64 +746,24 @@ $parcel$export($af2d7ac9990cfee2$exports, "useColorAreaState", () => $af2d7ac999
 
 
 const $af2d7ac9990cfee2$var$DEFAULT_COLOR = $83fe1a57d631223b$export$6e865ea70d7724f('#ffffff');
-const $af2d7ac9990cfee2$var$RGBSet = new Set([
-    'red',
-    'green',
-    'blue'
-]);
-let $af2d7ac9990cfee2$var$difference = (a, b)=>new Set([
-        ...a
-    ].filter((x)=>!b.has(x)
-    ))
-;
 function $af2d7ac9990cfee2$export$6df7f0e2cabc7eef(props) {
     let { value: value1 , defaultValue: defaultValue , xChannel: xChannel , yChannel: yChannel , onChange: onChange , onChangeEnd: onChangeEnd  } = props;
     if (!value1 && !defaultValue) defaultValue = $af2d7ac9990cfee2$var$DEFAULT_COLOR;
     let [color, setColor] = $4tN2K$reactstatelyutils.useControlledState(value1 && $83fe1a57d631223b$export$4cde5df63f53f473(value1), defaultValue && $83fe1a57d631223b$export$4cde5df63f53f473(defaultValue), onChange);
     let valueRef = $4tN2K$react.useRef(color);
     valueRef.current = color;
-    let channels = $4tN2K$react.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 = $af2d7ac9990cfee2$var$difference($af2d7ac9990cfee2$var$RGBSet, xyChannels).values().next().value;
-        return {
+    let channels = $4tN2K$react.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] = $4tN2K$react.useState(false);
     let isDraggingRef = $4tN2K$react.useRef(false).current;
     let xValue = color.getChannelValue(channels.xChannel);
@@ -797,8 +795,6 @@ function $af2d7ac9990cfee2$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 + $4tN2K$reactstatelyutils.clamp(x, 0, 1) * (maxValueX - minValueX);
             let newYValue = minValueY + (1 - $4tN2K$reactstatelyutils.clamp(y, 0, 1)) * (maxValueY - minValueY);
             let newColor;
@@ -815,24 +811,24 @@ function $af2d7ac9990cfee2$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 : $4tN2K$reactstatelyutils.snapValueToStep(xValue + stepSize, minValueX1, maxValueX1, stepX));
+            setXValue(xValue + stepSize > maxValueX ? maxValueX : $4tN2K$reactstatelyutils.snapValueToStep(xValue + stepSize, minValueX, maxValueX, stepX));
         },
         incrementY (stepSize) {
-            setYValue(yValue + stepSize > maxValueY1 ? maxValueY1 : $4tN2K$reactstatelyutils.snapValueToStep(yValue + stepSize, minValueY1, maxValueY1, stepY));
+            setYValue(yValue + stepSize > maxValueY ? maxValueY : $4tN2K$reactstatelyutils.snapValueToStep(yValue + stepSize, minValueY, maxValueY, stepY));
         },
         decrementX (stepSize) {
-            setXValue($4tN2K$reactstatelyutils.snapValueToStep(xValue - stepSize, minValueX1, maxValueX1, stepX));
+            setXValue($4tN2K$reactstatelyutils.snapValueToStep(xValue - stepSize, minValueX, maxValueX, stepX));
         },
         decrementY (stepSize) {
-            setYValue($4tN2K$reactstatelyutils.snapValueToStep(yValue - stepSize, minValueY1, maxValueY1, stepY));
+            setYValue($4tN2K$reactstatelyutils.snapValueToStep(yValue - stepSize, minValueY, maxValueY, stepY));
         },
         setDragging (isDragging) {
             let wasDragging = isDraggingRef;
@@ -1005,7 +1001,7 @@ function $9d7d8736d45f74b8$export$f4301076d9336137(props) {
         },
         isDragging: isDragging1,
         getDisplayColor () {
-            return value.withChannelValue('saturation', 100).withChannelValue('lightness', 50);
+            return value.toFormat('hsl').withChannelValue('saturation', 100).withChannelValue('lightness', 50);
         }
     };
 }