@react-stately/color 3.0.0-alpha.0 → 3.0.0-beta.10

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, useState} from 'react';
+import {useMemo, useRef, useState} from 'react';
 
 export interface ColorFieldState {
   /**
@@ -41,7 +41,13 @@ export interface ColorFieldState {
   /** Sets the current value to the maximum color value, and fires `onChange`. */
   incrementToMax(): void,
   /** Sets the current value to the minimum color value, and fires `onChange`. */
-  decrementToMin(): void
+  decrementToMin(): void,
+  /**
+   * Validates a user input string.
+   * Values can be partially entered, and may be valid even if they cannot currently be parsed to a color.
+   * Can be used to implement validation as a user types.
+   */
+  validate(value: string): boolean
 }
 
 const MIN_COLOR = parseColor('#000000');
@@ -57,68 +63,102 @@ 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);
   let [colorValue, setColorValue] = useControlledState<Color>(initialValue, initialDefaultValue, onChange);
+  let [inputValue, setInputValue] = useState(() => (value || defaultValue) && colorValue ? colorValue.toString('hex') : '');
 
-  let initialInputValue = (value || defaultValue) && colorValue ? colorValue.toString('hex') : '';
-  let [inputValue, setInputValue] = useState(initialInputValue);
-
-  useEffect(() => {
-    setInputValue(inputValue => {
-      // Parse color from current inputValue.
-      // Only update the input value if the parseColorValue is not equivalent.
-      if (!inputValue.length && colorValue) { return colorValue.toString('hex'); }
-      try {
-        let currentColor = parseColor(inputValue.startsWith('#') ? inputValue : `#${inputValue}`);
-        if (currentColor.toHexInt() !== colorValue?.toHexInt()) {
-          return colorValue ? colorValue.toString('hex') : '';
-        }
-      } catch (err) {
-        // ignore
-      }
-      return inputValue;
-    });
-  }, [inputValue, colorValue, setInputValue]);
-
-  let increment = () => setColorValue((prevColor: Color) => addColorValue(prevColor, step));
-  let decrement = () => setColorValue((prevColor: Color) => addColorValue(prevColor, -step));
-  let incrementToMax = () => setColorValue((prevColor: Color) => addColorValue(prevColor, MAX_COLOR_INT));
-  let decrementToMin = () => setColorValue((prevColor: Color) => addColorValue(prevColor, -MAX_COLOR_INT));
-
-  let setFieldInputValue = (value: string) => {
-    value = value.match(/^#?[0-9a-f]{0,6}$/i)?.[0];
-    if (value !== undefined) {
-      if (!value.length && colorValue) {
-        setColorValue(null);
-        return;
-      }
-      try {
-        let newColor = parseColor(value.startsWith('#') ? value : `#${value}`);
-        setColorValue((prevColor: Color) => {
-          setInputValue(value);
-          return prevColor && prevColor.toHexInt() === newColor.toHexInt() ? prevColor : newColor;
-        });
-      } catch (err) {
-        setInputValue(value);
-      }
+  let safelySetColorValue = (newColor: Color) => {
+    if (!colorValue || !newColor) {
+      setColorValue(newColor);
+      return;
+    }
+    if (newColor.toHexInt() !== colorValue.toHexInt()) {
+      setColorValue(newColor);
+      return;
     }
   };
 
-  let commit = () => {
+  let prevValue = useRef(colorValue);
+  if (prevValue.current !== colorValue) {
     setInputValue(colorValue ? colorValue.toString('hex') : '');
+    prevValue.current = colorValue;
+  }
+
+
+  let parsedValue = useMemo(() => {
+    let color;
+    try {
+      color = parseColor(inputValue.startsWith('#') ? inputValue : `#${inputValue}`);
+    } catch (err) {
+      color = null;
+    }
+    return color;
+  }, [inputValue]);
+  let parsed = useRef(null);
+  parsed.current = parsedValue;
+
+  let commit = () => {
+    // Set to empty state if input value is empty
+    if (!inputValue.length) {
+      safelySetColorValue(null);
+      setInputValue(value === undefined ? '' : colorValue.toString('hex'));
+      return;
+    }
+
+    // if it failed to parse, then reset input to formatted version of current number
+    if (parsed.current == null) {
+      setInputValue(colorValue ? colorValue.toString('hex') : '');
+      return;
+    }
+
+    safelySetColorValue(parsed.current);
+    // in a controlled state, the numberValue won't change, so we won't go back to our old input without help
+    let newColorValue = '';
+    if (colorValue) {
+      newColorValue = colorValue.toString('hex');
+    }
+    setInputValue(newColorValue);
+  };
+
+  let increment = () => {
+    let newValue = addColorValue(parsed.current, step);
+    // if we've arrived at the same value that was previously in the state, the
+    // input value should be updated to match
+    // ex type 4, press increment, highlight the number in the input, type 4 again, press increment
+    // you'd be at 5, then incrementing to 5 again, so no re-render would happen and 4 would be left in the input
+    if (newValue === colorValue) {
+      setInputValue(newValue.toString('hex'));
+    }
+    safelySetColorValue(newValue);
   };
+  let decrement = () => {
+    let newValue = addColorValue(parsed.current, -step);
+    // if we've arrived at the same value that was previously in the state, the
+    // input value should be updated to match
+    // ex type 4, press increment, highlight the number in the input, type 4 again, press increment
+    // you'd be at 5, then incrementing to 5 again, so no re-render would happen and 4 would be left in the input
+    if (newValue === colorValue) {
+      setInputValue(newValue.toString('hex'));
+    }
+    safelySetColorValue(newValue);
+  };
+  let incrementToMax = () => safelySetColorValue(MAX_COLOR);
+  let decrementToMin = () => safelySetColorValue(MIN_COLOR);
+
+  let validate = (value: string) => value === '' || !!value.match(/^#?[0-9a-f]{0,6}$/i)?.[0];
 
   return {
+    validate,
     colorValue,
     inputValue,
-    setInputValue: setFieldInputValue,
+    setInputValue,
     commit,
     increment,
     incrementToMax,
@@ -130,11 +170,10 @@ export function useColorFieldState(
 function addColorValue(color: Color, step: number) {
   let newColor = color ? color : MIN_COLOR;
   let colorInt = newColor.toHexInt();
-  let newColorString = color ? color.toString('hex') : '';
 
   let clampInt = Math.min(Math.max(colorInt + step, MIN_COLOR_INT), MAX_COLOR_INT);
   if (clampInt !== colorInt) {
-    newColorString = `#${clampInt.toString(16).padStart(6, '0').toUpperCase()}`;
+    let newColorString = `#${clampInt.toString(16).padStart(6, '0').toUpperCase()}`;
     newColor = parseColor(newColorString);
   }
   return newColor;

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,14 +11,14 @@
  */
 
 import {Color, ColorWheelProps} from '@react-types/color';
-import {parseColor} from './Color';
+import {normalizeColor, parseColor} from './Color';
 import {useControlledState} from '@react-stately/utils';
-import {useState} from 'react';
+import {useRef, useState} from 'react';
 
 export interface ColorWheelState {
-  /** The current color value displayed by the color wheel. */
+  /** The current color value represented by the color wheel. */
   readonly value: Color,
-  /** Sets the color value displayed by the color wheel, and triggers `onChange`. */
+  /** Sets the color value represented by the color wheel, and triggers `onChange`. */
   setValue(value: string | Color): void,
 
   /** The current value of the hue channel displayed by the color wheel. */
@@ -32,22 +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 cxolor wheel is currently being dragged. */
+  /** Whether the color wheel is currently being dragged. */
   readonly isDragging: boolean,
   /** Sets whether the color wheel is being dragged. */
-  setDragging(value: boolean): void
-}
-
-function normalizeColor(v: string | Color) {
-  if (typeof v === 'string') {
-    return parseColor(v);
-  } else {
-    return v;
-  }
+  setDragging(value: boolean): void,
+  /** Returns the color that should be displayed in the color wheel instead of `value`. */
+  getDisplayColor(): Color,
+  step: number,
+  pageStep: number
 }
 
 const DEFAULT_COLOR = parseColor('hsl(0, 100%, 50%)');
@@ -95,14 +91,20 @@ 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, step = 1} = props;
+  let {defaultValue, onChange, onChangeEnd} = props;
 
   if (!props.value && !defaultValue) {
     defaultValue = DEFAULT_COLOR;
   }
 
   let [value, setValue] = useControlledState(normalizeColor(props.value), normalizeColor(defaultValue), onChange);
+  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;
 
   let hue = value.getChannelValue('hue');
   function setHue(v: number) {
@@ -112,14 +114,20 @@ export function useColorWheelState(props: ColorWheelProps): ColorWheelState {
     }
     v = roundToStep(mod(v, 360), step);
     if (hue !== v) {
-      setValue(value.withChannelValue('hue', v));
+      let color = value.withChannelValue('hue', v);
+      valueRef.current = color;
+      setValue(color);
     }
   }
 
   return {
     value,
+    step,
+    pageStep,
     setValue(v) {
-      setValue(normalizeColor(v));
+      let color = normalizeColor(v);
+      valueRef.current = color;
+      setValue(color);
     },
     hue,
     setHue,
@@ -129,27 +137,38 @@ 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(value) {
-      setDragging(value);
+    setDragging(isDragging) {
+      let wasDragging = isDraggingRef;
+      isDraggingRef = isDragging;
+
+      if (onChangeEnd && !isDragging && wasDragging) {
+        onChangeEnd(valueRef.current);
+      }
+
+      setDragging(isDragging);
     },
-    isDragging
+    isDragging,
+    getDisplayColor() {
+      return value.toFormat('hsl').withChannelValue('saturation', 100).withChannelValue('lightness', 50);
+    }
   };
 }