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

package/src/Color.ts

@@ -11,7 +11,7 @@
  */
 
 import {clamp, toFixedNumber} from '@react-stately/utils';
-import {ColorChannel, ColorChannelRange, ColorFormat, Color as IColor} from '@react-types/color';
+import {ColorAxes, ColorChannel, ColorChannelRange, ColorFormat, Color as IColor} from '@react-types/color';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {MessageDictionary} from '@internationalized/message';
@@ -29,6 +29,14 @@ export function parseColor(value: string): IColor {
   throw new Error('Invalid color value: ' + value);
 }
 
+export function normalizeColor(v: string | IColor) {
+  if (typeof v === 'string') {
+    return parseColor(v);
+  } else {
+    return v;
+  }
+}
+
 abstract class Color implements IColor {
   abstract toFormat(format: ColorFormat): IColor;
   abstract toString(format: ColorFormat | 'css'): string;
@@ -63,6 +71,15 @@ abstract class Color implements IColor {
   }
 
   abstract getColorSpace(): ColorFormat
+  getColorSpaceAxes(xyChannels: {xChannel?: ColorChannel, yChannel?: ColorChannel}): ColorAxes {
+    let {xChannel, 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};
+  }
+  abstract getColorChannels(): [ColorChannel, ColorChannel, ColorChannel]
 }
 
 const HEX_REGEX = /^#(?:([0-9a-f]{3})|([0-9a-f]{6}))$/i;
@@ -229,9 +246,9 @@ class RGBColor extends Color {
       case 'red':
       case 'green':
       case 'blue':
-        return {minValue: 0, maxValue: 255, step: 1};
+        return {minValue: 0x0, maxValue: 0xFF, step: 0x1, pageSize: 0x11};
       case 'alpha':
-        return {minValue: 0, maxValue: 1, step: 0.01};
+        return {minValue: 0, maxValue: 1, step: 0.01, pageSize: 0.1};
       default:
         throw new Error('Unknown color channel: ' + channel);
     }
@@ -258,6 +275,11 @@ class RGBColor extends Color {
   getColorSpace(): ColorFormat {
     return 'rgb';
   }
+
+  private static colorChannels: [ColorChannel, ColorChannel, ColorChannel] = ['red', 'green', 'blue'];
+  getColorChannels(): [ColorChannel, ColorChannel, ColorChannel] {
+    return RGBColor.colorChannels;
+  }
 }
 
 // X = <negative/positive number with/without decimal places>
@@ -356,12 +378,12 @@ class HSBColor extends Color {
   getChannelRange(channel: ColorChannel): ColorChannelRange {
     switch (channel) {
       case 'hue':
-        return {minValue: 0, maxValue: 360, step: 1};
+        return {minValue: 0, maxValue: 360, step: 1, pageSize: 15};
       case 'saturation':
       case 'brightness':
-        return {minValue: 0, maxValue: 100, step: 1};
+        return {minValue: 0, maxValue: 100, step: 1, pageSize: 10};
       case 'alpha':
-        return {minValue: 0, maxValue: 1, step: 0.01};
+        return {minValue: 0, maxValue: 1, step: 0.01, pageSize: 0.1};
       default:
         throw new Error('Unknown color channel: ' + channel);
     }
@@ -391,6 +413,11 @@ class HSBColor extends Color {
   getColorSpace(): ColorFormat {
     return 'hsb';
   }
+
+  private static colorChannels: [ColorChannel, ColorChannel, ColorChannel] = ['hue', 'saturation', 'brightness'];
+  getColorChannels(): [ColorChannel, ColorChannel, ColorChannel] {
+    return HSBColor.colorChannels;
+  }
 }
 
 // X = <negative/positive number with/without decimal places>
@@ -491,12 +518,12 @@ class HSLColor extends Color {
   getChannelRange(channel: ColorChannel): ColorChannelRange {
     switch (channel) {
       case 'hue':
-        return {minValue: 0, maxValue: 360, step: 1};
+        return {minValue: 0, maxValue: 360, step: 1, pageSize: 15};
       case 'saturation':
       case 'lightness':
-        return {minValue: 0, maxValue: 100, step: 1};
+        return {minValue: 0, maxValue: 100, step: 1, pageSize: 10};
       case 'alpha':
-        return {minValue: 0, maxValue: 1, step: 0.01};
+        return {minValue: 0, maxValue: 1, step: 0.01, pageSize: 0.1};
       default:
         throw new Error('Unknown color channel: ' + channel);
     }
@@ -526,4 +553,9 @@ class HSLColor extends Color {
   getColorSpace(): ColorFormat {
     return 'hsl';
   }
+
+  private static colorChannels: [ColorChannel, ColorChannel, ColorChannel] = ['hue', 'saturation', 'lightness'];
+  getColorChannels(): [ColorChannel, ColorChannel, ColorChannel] {
+    return HSLColor.colorChannels;
+  }
 }

package/src/index.ts

@@ -10,7 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
-export * from './Color';
+export {parseColor} from './Color';
+export * from './useColorAreaState';
 export * from './useColorSliderState';
 export * from './useColorWheelState';
 export * from './useColorFieldState';

package/src/useColorAreaState.ts

@@ -0,0 +1,184 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {clamp, snapValueToStep, useControlledState} from '@react-stately/utils';
+import {Color, ColorAreaProps, ColorChannel} from '@react-types/color';
+import {normalizeColor, parseColor} from './Color';
+import {useMemo, useRef, useState} from 'react';
+
+export interface ColorAreaState {
+  /** The current color value displayed by the color area. */
+  readonly value: Color,
+  /** Sets the current color value. If a string is passed, it will be parsed to a Color. */
+  setValue(value: string | Color): void,
+
+  /** The current value of the horizontal axis channel displayed by the color area. */
+  xValue: number,
+  /** Sets the value for the horizontal axis channel displayed by the color area, and triggers `onChange`. */
+  setXValue(value: number): void,
+
+  /** The current value of the vertical axis channel displayed by the color area. */
+  yValue: number,
+  /** Sets the value for the vertical axis channel displayed by the color area, and triggers `onChange`. */
+  setYValue(value: number): void,
+
+  /** Sets the x and y channels of the current color value based on a percentage of the width and height of the color area, and triggers `onChange`. */
+  setColorFromPoint(x: number, y: number): void,
+  /** Returns the coordinates of the thumb relative to the upper left corner of the color area as a percentage. */
+  getThumbPosition(): {x: number, y: number},
+
+  /** Increments the value of the horizontal axis channel by the channel step or page amount. */
+  incrementX(stepSize?: number): void,
+  /** Decrements the value of the horizontal axis channel by the channel step or page amount. */
+  decrementX(stepSize?: number): void,
+
+  /** Increments the value of the vertical axis channel by the channel step or page amount. */
+  incrementY(stepSize?: number): void,
+  /** Decrements the value of the vertical axis channel by the channel step or page amount. */
+  decrementY(stepSize?: number): void,
+
+  /** Whether the color area is currently being dragged. */
+  readonly isDragging: boolean,
+  /** Sets whether the color area is being dragged. */
+  setDragging(value: boolean): void,
+
+  /** Returns the xChannel, yChannel and zChannel names based on the color value. */
+  channels: {xChannel: ColorChannel, yChannel: ColorChannel, zChannel: ColorChannel},
+  xChannelStep: number,
+  yChannelStep: number,
+  xChannelPageStep: number,
+  yChannelPageStep: number,
+
+  /** Returns the color that should be displayed in the color area thumb instead of `value`. */
+  getDisplayColor(): Color
+}
+
+const DEFAULT_COLOR = parseColor('#ffffff');
+/**
+ * Provides state management for a color area component.
+ * Color area allows users to adjust two channels of an HSL, HSB or RGB color value against a two-dimensional gradient background.
+ */
+export function useColorAreaState(props: ColorAreaProps): ColorAreaState {
+  let {
+    value,
+    defaultValue,
+    xChannel,
+    yChannel,
+    onChange,
+    onChangeEnd
+  } = props;
+
+  if (!value && !defaultValue) {
+    defaultValue = DEFAULT_COLOR;
+  }
+
+  let [color, setColor] = useControlledState(value && normalizeColor(value), defaultValue && normalizeColor(defaultValue), onChange);
+  let valueRef = useRef(color);
+  valueRef.current = color;
+
+  let channels = useMemo(() =>
+    valueRef.current.getColorSpaceAxes({xChannel, yChannel}),
+    [xChannel, yChannel]
+  );
+
+  let xChannelRange = color.getChannelRange(channels.xChannel);
+  let yChannelRange = color.getChannelRange(channels.yChannel);
+  let {minValue: minValueX, maxValue: maxValueX, step: stepX, pageSize: pageSizeX} = xChannelRange;
+  let {minValue: minValueY, maxValue: maxValueY, step: stepY, pageSize: pageSizeY} = yChannelRange;
+
+  let [isDragging, setDragging] = useState(false);
+  let isDraggingRef = useRef(false).current;
+
+  let xValue = color.getChannelValue(channels.xChannel);
+  let yValue = color.getChannelValue(channels.yChannel);
+  let setXValue = (v: number) => {
+    if (v === xValue) {
+      return;
+    }
+    valueRef.current = color.withChannelValue(channels.xChannel, v);
+    setColor(valueRef.current);
+  };
+  let setYValue = (v: number) => {
+    if (v === yValue) {
+      return;
+    }
+    valueRef.current = color.withChannelValue(channels.yChannel, v);
+    setColor(valueRef.current);
+  };
+
+  return {
+    channels,
+    xChannelStep: stepX,
+    yChannelStep: stepY,
+    xChannelPageStep: pageSizeX,
+    yChannelPageStep: pageSizeY,
+    value: color,
+    setValue(value) {
+      let c = normalizeColor(value);
+      valueRef.current = c;
+      setColor(c);
+    },
+    xValue,
+    setXValue,
+    yValue,
+    setYValue,
+    setColorFromPoint(x: number, y: number) {
+      let newXValue = minValueX + clamp(x, 0, 1) * (maxValueX - minValueX);
+      let newYValue = minValueY + (1 - clamp(y, 0, 1)) * (maxValueY - minValueY);
+      let newColor:Color;
+      if (newXValue !== xValue) {
+        // Round new value to multiple of step, clamp value between min and max
+        newXValue = snapValueToStep(newXValue, minValueX, maxValueX, stepX);
+        newColor = color.withChannelValue(channels.xChannel, newXValue);
+      }
+      if (newYValue !== yValue) {
+        // Round new value to multiple of step, clamp value between min and max
+        newYValue = snapValueToStep(newYValue, minValueY, maxValueY, stepY);
+        newColor = (newColor || color).withChannelValue(channels.yChannel, newYValue);
+      }
+      if (newColor) {
+        setColor(newColor);
+      }
+    },
+    getThumbPosition() {
+      let x = (xValue - minValueX) / (maxValueX - minValueX);
+      let y = 1 - (yValue - minValueY) / (maxValueY - minValueY);
+      return {x, y};
+    },
+    incrementX(stepSize) {
+      setXValue(xValue + stepSize > maxValueX ? maxValueX : snapValueToStep(xValue + stepSize, minValueX, maxValueX, stepX));
+    },
+    incrementY(stepSize) {
+      setYValue(yValue + stepSize > maxValueY ? maxValueY : snapValueToStep(yValue + stepSize, minValueY, maxValueY, stepY));
+    },
+    decrementX(stepSize) {
+      setXValue(snapValueToStep(xValue - stepSize, minValueX, maxValueX, stepX));
+    },
+    decrementY(stepSize) {
+      setYValue(snapValueToStep(yValue - stepSize, minValueY, maxValueY, stepY));
+    },
+    setDragging(isDragging) {
+      let wasDragging = isDraggingRef;
+      isDraggingRef = isDragging;
+
+      if (onChangeEnd && !isDragging && wasDragging) {
+        onChangeEnd(valueRef.current);
+      }
+
+      setDragging(isDragging);
+    },
+    isDragging,
+    getDisplayColor() {
+      return color.withChannelValue('alpha', 1);
+    }
+  };
+}

package/src/useColorFieldState.ts

@@ -14,7 +14,7 @@ import {Color, ColorFieldProps} from '@react-types/color';
 import {parseColor} from './Color';
 import {useColor} from './useColor';
 import {useControlledState} from '@react-stately/utils';
-import {useEffect, useMemo, useRef, useState} from 'react';
+import {useMemo, useRef, useState} from 'react';
 
 export interface ColorFieldState {
   /**
@@ -63,11 +63,11 @@ export function useColorFieldState(
   props: ColorFieldProps
 ): ColorFieldState {
   let {
-    step = 1,
     value,
     defaultValue,
     onChange
   } = props;
+  let {step} = MIN_COLOR.getChannelRange('red');
 
   let initialValue = useColor(value);
   let initialDefaultValue = useColor(defaultValue);
@@ -85,9 +85,12 @@ export function useColorFieldState(
     }
   };
 
-  useEffect(() => {
+  let prevValue = useRef(colorValue);
+  if (prevValue.current !== colorValue) {
     setInputValue(colorValue ? colorValue.toString('hex') : '');
-  }, [colorValue, setInputValue]);
+    prevValue.current = colorValue;
+  }
+
 
   let parsedValue = useMemo(() => {
     let color;

package/src/useColorSliderState.ts

@@ -11,7 +11,7 @@
  */
 
 import {Color, ColorSliderProps} from '@react-types/color';
-import {parseColor} from './Color';
+import {normalizeColor, parseColor} from './Color';
 import {SliderState, useSliderState} from '@react-stately/slider';
 import {useControlledState} from '@react-stately/utils';
 
@@ -30,14 +30,6 @@ interface ColorSliderStateOptions extends ColorSliderProps {
   locale: string
 }
 
-function normalizeColor(v: string | Color) {
-  if (typeof v === 'string') {
-    return parseColor(v);
-  } else {
-    return v;
-  }
-}
-
 /**
  * Provides state management for a color slider component.
  * Color sliders allow users to adjust an individual channel of a color value.
@@ -59,13 +51,14 @@ export function useColorSliderState(props: ColorSliderStateOptions): ColorSlider
       setColor(color.withChannelValue(channel, v));
     },
     onChangeEnd([v]) {
-      // onChange will have already been called with the right value, this is just to trigger onChangEnd
+      // onChange will have already been called with the right value, this is just to trigger onChangeEnd
       if (props.onChangeEnd) {
         props.onChangeEnd(color.withChannelValue(channel, v));
       }
     }
   });
 
+  let {step, pageSize} = color.getChannelRange(channel);
   return {
     ...sliderState,
     value: color,
@@ -92,6 +85,8 @@ export function useColorSliderState(props: ColorSliderStateOptions): ColorSlider
     },
     getThumbValueLabel() {
       return color.formatChannelValue(channel, locale);
-    }
+    },
+    step,
+    pageSize
   };
 }

package/src/useColorWheelState.ts

@@ -11,7 +11,7 @@
  */
 
 import {Color, ColorWheelProps} from '@react-types/color';
-import {parseColor} from './Color';
+import {normalizeColor, parseColor} from './Color';
 import {useControlledState} from '@react-stately/utils';
 import {useRef, useState} from 'react';
 
@@ -32,24 +32,18 @@ export interface ColorWheelState {
   getThumbPosition(radius: number): {x: number, y: number},
 
   /** Increments the hue by the given amount (defaults to 1). */
-  increment(minStepSize?: number): void,
+  increment(stepSize?: number): void,
   /** Decrements the hue by the given amount (defaults to 1). */
-  decrement(minStepSize?: number): void,
+  decrement(stepSize?: number): void,
 
   /** Whether the color wheel is currently being dragged. */
   readonly isDragging: boolean,
   /** Sets whether the color wheel is being dragged. */
   setDragging(value: boolean): void,
   /** Returns the color that should be displayed in the color wheel instead of `value`. */
-  getDisplayColor(): Color
-}
-
-function normalizeColor(v: string | Color) {
-  if (typeof v === 'string') {
-    return parseColor(v);
-  } else {
-    return v;
-  }
+  getDisplayColor(): Color,
+  step: number,
+  pageStep: number
 }
 
 const DEFAULT_COLOR = parseColor('hsl(0, 100%, 50%)');
@@ -97,7 +91,7 @@ function cartesianToAngle(x: number, y: number, radius: number): number {
  * Color wheels allow users to adjust the hue of an HSL or HSB color value on a circular track.
  */
 export function useColorWheelState(props: ColorWheelProps): ColorWheelState {
-  let {defaultValue, onChange, onChangeEnd, step = 1} = props;
+  let {defaultValue, onChange, onChangeEnd} = props;
 
   if (!props.value && !defaultValue) {
     defaultValue = DEFAULT_COLOR;
@@ -107,6 +101,8 @@ export function useColorWheelState(props: ColorWheelProps): ColorWheelState {
   let valueRef = useRef(value);
   valueRef.current = value;
 
+  let channelRange = value.getChannelRange('hue');
+  let {minValue: minValueX, maxValue: maxValueX, step: step, pageSize: pageStep} = channelRange;
   let [isDragging, setDragging] = useState(false);
   let isDraggingRef = useRef(false).current;
 
@@ -126,6 +122,8 @@ export function useColorWheelState(props: ColorWheelProps): ColorWheelState {
 
   return {
     value,
+    step,
+    pageStep,
     setValue(v) {
       let color = normalizeColor(v);
       valueRef.current = color;
@@ -139,22 +137,23 @@ export function useColorWheelState(props: ColorWheelProps): ColorWheelState {
     getThumbPosition(radius) {
       return angleToCartesian(value.getChannelValue('hue'), radius);
     },
-    increment(minStepSize: number = 0) {
-      let newValue = hue + Math.max(minStepSize, step);
-      if (newValue > 360) {
+    increment(stepSize = 1) {
+      let s = Math.max(stepSize, step);
+      let newValue = hue + s;
+      if (newValue >= maxValueX) {
         // Make sure you can always get back to 0.
-        newValue = 0;
+        newValue = minValueX;
       }
-      setHue(newValue);
+      setHue(roundToStep(mod(newValue, 360), s));
     },
-    decrement(minStepSize: number = 0) {
-      let s = Math.max(minStepSize, step);
+    decrement(stepSize = 1) {
+      let s = Math.max(stepSize, step);
       if (hue === 0) {
         // We can't just subtract step because this might be the case:
         // |(previous step) - 0| < step size
         setHue(roundDown(360 / s) * s);
       } else {
-        setHue(hue - s);
+        setHue(roundToStep(mod(hue - s, 360), s));
       }
     },
     setDragging(isDragging) {
@@ -169,7 +168,7 @@ export function useColorWheelState(props: ColorWheelProps): ColorWheelState {
     },
     isDragging,
     getDisplayColor() {
-      return value.withChannelValue('saturation', 100).withChannelValue('lightness', 50);
+      return value.toFormat('hsl').withChannelValue('saturation', 100).withChannelValue('lightness', 50);
     }
   };
 }