@react-stately/color - npm Package Compare versions

Comparing version 3.0.0-beta.1 to 3.0.0-beta.2

dist/main.js

@@ -901,64 +901,120 @@ var {
   let [colorValue, setColorValue] = useControlledState(initialValue, initialDefaultValue, onChange);
-  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');
-      }
+  let [inputValue, setInputValue] = useState(() => (value || defaultValue) && colorValue ? colorValue.toString('hex') : '');
 
-      try {
-        let currentColor = parseColor(inputValue.startsWith('#') ? inputValue : "#" + inputValue);
+  let safelySetColorValue = newColor => {
+    if (typeof newColor === 'function') {
+      setColorValue(prev => {
+        let resolved = newColor(prev);
 
-        if (currentColor.toHexInt() !== (colorValue == null ? void 0 : colorValue.toHexInt())) {
-          return colorValue ? colorValue.toString('hex') : '';
+        if (!prev || !resolved) {
+          return resolved;
         }
-      } catch (err) {// ignore
-      }
 
-      return inputValue;
-    });
-  }, [inputValue, colorValue, setInputValue]);
+        if (resolved.toHexInt() !== prev.toHexInt()) {
+          return resolved;
+        }
 
-  let increment = () => setColorValue(prevColor => $f59de409cf55723659fabb2f46aaa7a$var$addColorValue(prevColor, step));
+        return prev;
+      });
+      return;
+    }
 
-  let decrement = () => setColorValue(prevColor => $f59de409cf55723659fabb2f46aaa7a$var$addColorValue(prevColor, -step));
+    if (!colorValue || !newColor) {
+      setColorValue(newColor);
+      return;
+    }
 
-  let incrementToMax = () => setColorValue(prevColor => $f59de409cf55723659fabb2f46aaa7a$var$addColorValue(prevColor, $f59de409cf55723659fabb2f46aaa7a$var$MAX_COLOR_INT));
+    if (newColor.toHexInt() !== colorValue.toHexInt()) {
+      setColorValue(newColor);
+      return;
+    }
+  };
 
-  let decrementToMin = () => setColorValue(prevColor => $f59de409cf55723659fabb2f46aaa7a$var$addColorValue(prevColor, -$f59de409cf55723659fabb2f46aaa7a$var$MAX_COLOR_INT));
+  useEffect(() => {
+    setInputValue(colorValue ? colorValue.toString('hex') : '');
+  }, [colorValue, setInputValue]);
+  let parsedValue = useMemo(() => {
+    let color;
 
-  let setFieldInputValue = value => {
-    var _value$match;
+    try {
+      color = parseColor(inputValue.startsWith('#') ? inputValue : "#" + inputValue);
+    } catch (err) {
+      color = null;
+    }
 
-    value = (_value$match = value.match(/^#?[0-9a-f]{0,6}$/i)) == null ? void 0 : _value$match[0];
+    return color;
+  }, [parseColor, inputValue]);
+  let parsed = useRef(null);
+  parsed.current = parsedValue;
 
-    if (value !== undefined) {
-      if (!value.length && colorValue) {
-        setColorValue(null);
-        return;
+  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 = () => {
+    safelySetColorValue(prevColor => {
+      let newValue = $f59de409cf55723659fabb2f46aaa7a$var$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 === prevColor) {
+        setInputValue(newValue.toString('hex'));
       }
 
-      try {
-        let newColor = parseColor(value.startsWith('#') ? value : "#" + value);
-        setColorValue(prevColor => {
-          setInputValue(value);
-          return prevColor && prevColor.toHexInt() === newColor.toHexInt() ? prevColor : newColor;
-        });
-      } catch (err) {
-        setInputValue(value);
+      return newValue;
+    });
+  };
+
+  let decrement = () => {
+    safelySetColorValue(prevColor => {
+      let newValue = $f59de409cf55723659fabb2f46aaa7a$var$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 === prevColor) {
+        setInputValue(newValue.toString('hex'));
       }
-    }
+
+      return newValue;
+    });
   };
 
-  let commit = () => {
-    setInputValue(colorValue ? colorValue.toString('hex') : '');
+  let incrementToMax = () => safelySetColorValue($f59de409cf55723659fabb2f46aaa7a$var$MAX_COLOR);
+
+  let decrementToMin = () => safelySetColorValue($f59de409cf55723659fabb2f46aaa7a$var$MIN_COLOR);
+
+  let validate = value => {
+    var _value$match;
+
+    return value === '' || !!((_value$match = value.match(/^#?[0-9a-f]{0,6}$/i)) == null ? void 0 : _value$match[0]);
   };
 
   return {
+    validate,
     colorValue,
     inputValue,
-    setInputValue: setFieldInputValue,
+    setInputValue,
     commit,
@@ -977,7 +1033,6 @@ increment,
   let colorInt = newColor.toHexInt();
-  let newColorString = color ? color.toString('hex') : '';
   let clampInt = Math.min(Math.max(colorInt + step, $f59de409cf55723659fabb2f46aaa7a$var$MIN_COLOR_INT), $f59de409cf55723659fabb2f46aaa7a$var$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);
@@ -984,0 +1039,0 @@ }

dist/module.js

@@ -867,64 +867,120 @@ import { useRef, useState, useMemo, useEffect } from "react";
   let [colorValue, setColorValue] = useControlledState(initialValue, initialDefaultValue, onChange);
-  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');
-      }
+  let [inputValue, setInputValue] = useState(() => (value || defaultValue) && colorValue ? colorValue.toString('hex') : '');
 
-      try {
-        let currentColor = parseColor(inputValue.startsWith('#') ? inputValue : "#" + inputValue);
+  let safelySetColorValue = newColor => {
+    if (typeof newColor === 'function') {
+      setColorValue(prev => {
+        let resolved = newColor(prev);
 
-        if (currentColor.toHexInt() !== (colorValue == null ? void 0 : colorValue.toHexInt())) {
-          return colorValue ? colorValue.toString('hex') : '';
+        if (!prev || !resolved) {
+          return resolved;
         }
-      } catch (err) {// ignore
-      }
 
-      return inputValue;
-    });
-  }, [inputValue, colorValue, setInputValue]);
+        if (resolved.toHexInt() !== prev.toHexInt()) {
+          return resolved;
+        }
 
-  let increment = () => setColorValue(prevColor => $f1bad1ec575cba40fc263dc06b9eb3a9$var$addColorValue(prevColor, step));
+        return prev;
+      });
+      return;
+    }
 
-  let decrement = () => setColorValue(prevColor => $f1bad1ec575cba40fc263dc06b9eb3a9$var$addColorValue(prevColor, -step));
+    if (!colorValue || !newColor) {
+      setColorValue(newColor);
+      return;
+    }
 
-  let incrementToMax = () => setColorValue(prevColor => $f1bad1ec575cba40fc263dc06b9eb3a9$var$addColorValue(prevColor, $f1bad1ec575cba40fc263dc06b9eb3a9$var$MAX_COLOR_INT));
+    if (newColor.toHexInt() !== colorValue.toHexInt()) {
+      setColorValue(newColor);
+      return;
+    }
+  };
 
-  let decrementToMin = () => setColorValue(prevColor => $f1bad1ec575cba40fc263dc06b9eb3a9$var$addColorValue(prevColor, -$f1bad1ec575cba40fc263dc06b9eb3a9$var$MAX_COLOR_INT));
+  useEffect(() => {
+    setInputValue(colorValue ? colorValue.toString('hex') : '');
+  }, [colorValue, setInputValue]);
+  let parsedValue = useMemo(() => {
+    let color;
 
-  let setFieldInputValue = value => {
-    var _value$match;
+    try {
+      color = parseColor(inputValue.startsWith('#') ? inputValue : "#" + inputValue);
+    } catch (err) {
+      color = null;
+    }
 
-    value = (_value$match = value.match(/^#?[0-9a-f]{0,6}$/i)) == null ? void 0 : _value$match[0];
+    return color;
+  }, [parseColor, inputValue]);
+  let parsed = useRef(null);
+  parsed.current = parsedValue;
 
-    if (value !== undefined) {
-      if (!value.length && colorValue) {
-        setColorValue(null);
-        return;
+  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 = () => {
+    safelySetColorValue(prevColor => {
+      let newValue = $f1bad1ec575cba40fc263dc06b9eb3a9$var$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 === prevColor) {
+        setInputValue(newValue.toString('hex'));
       }
 
-      try {
-        let newColor = parseColor(value.startsWith('#') ? value : "#" + value);
-        setColorValue(prevColor => {
-          setInputValue(value);
-          return prevColor && prevColor.toHexInt() === newColor.toHexInt() ? prevColor : newColor;
-        });
-      } catch (err) {
-        setInputValue(value);
+      return newValue;
+    });
+  };
+
+  let decrement = () => {
+    safelySetColorValue(prevColor => {
+      let newValue = $f1bad1ec575cba40fc263dc06b9eb3a9$var$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 === prevColor) {
+        setInputValue(newValue.toString('hex'));
       }
-    }
+
+      return newValue;
+    });
   };
 
-  let commit = () => {
-    setInputValue(colorValue ? colorValue.toString('hex') : '');
+  let incrementToMax = () => safelySetColorValue($f1bad1ec575cba40fc263dc06b9eb3a9$var$MAX_COLOR);
+
+  let decrementToMin = () => safelySetColorValue($f1bad1ec575cba40fc263dc06b9eb3a9$var$MIN_COLOR);
+
+  let validate = value => {
+    var _value$match;
+
+    return value === '' || !!((_value$match = value.match(/^#?[0-9a-f]{0,6}$/i)) == null ? void 0 : _value$match[0]);
   };
 
   return {
+    validate,
     colorValue,
     inputValue,
-    setInputValue: setFieldInputValue,
+    setInputValue,
     commit,
@@ -941,7 +997,6 @@ increment,
   let colorInt = newColor.toHexInt();
-  let newColorString = color ? color.toString('hex') : '';
   let clampInt = Math.min(Math.max(colorInt + step, $f1bad1ec575cba40fc263dc06b9eb3a9$var$MIN_COLOR_INT), $f1bad1ec575cba40fc263dc06b9eb3a9$var$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);
@@ -948,0 +1003,0 @@ }

dist/types.d.ts

@@ -80,2 +80,8 @@ import { Color, ColorSliderProps, ColorWheelProps, ColorFieldProps } from "@react-types/color";
     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;
 }
@@ -82,0 +88,0 @@ /**

package.json

 {
   "name": "@react-stately/color",
-  "version": "3.0.0-beta.1",
+  "version": "3.0.0-beta.2",
   "description": "Spectrum UI components in React",
@@ -21,9 +21,9 @@ "license": "Apache-2.0",
     "@babel/runtime": "^7.6.2",
-    "@internationalized/message": "3.0.0-rc.0",
-    "@internationalized/number": "3.0.0-rc.0",
-    "@react-aria/utils": "^3.7.0",
-    "@react-stately/slider": "^3.0.1",
-    "@react-stately/utils": "^3.2.0",
+    "@internationalized/message": "^3.0.0",
+    "@internationalized/number": "^3.0.0",
+    "@react-aria/utils": "^3.8.0",
+    "@react-stately/slider": "^3.0.2",
+    "@react-stately/utils": "^3.2.1",
     "@react-types/color": "3.0.0-beta.1",
-    "@react-types/numberfield": "3.0.0-rc.0"
+    "@react-types/numberfield": "^3.0.0"
   },
@@ -36,3 +36,3 @@ "peerDependencies": {
   },
-  "gitHead": "f0afbae764727b3062170852006ea38689a34f97"
+  "gitHead": "3aae08e7d8a75382bedcddac7c86107e40db9296"
 }

src/useColorFieldState.ts

@@ -17,3 +17,3 @@ /*
 import {useControlledState} from '@react-stately/utils';
-import {useEffect, useState} from 'react';
+import {useEffect, useMemo, useRef, useState} from 'react';
 
@@ -45,3 +45,9 @@ export interface ColorFieldState {
   /** 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
 }
@@ -71,55 +77,103 @@
   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);
+  let safelySetColorValue = (newColor: Color | ((prevState: Color) => Color)) => {
+    if (typeof newColor === 'function') {
+      setColorValue((prev:Color) => {
+        let resolved: Color = newColor(prev);
+        if (!prev || !resolved) {
+          return resolved;
+        }
+        if (resolved.toHexInt() !== prev.toHexInt()) {
+          return resolved;
+        }
+        return prev;
+      });
+      return;
+    }
+    if (!colorValue || !newColor) {
+      setColorValue(newColor);
+      return;
+    }
+    if (newColor.toHexInt() !== colorValue.toHexInt()) {
+      setColorValue(newColor);
+      return;
+    }
+  };
 
   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]);
+    setInputValue(colorValue ? colorValue.toString('hex') : '');
+  }, [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 parsedValue = useMemo(() => {
+    let color;
+    try {
+      color = parseColor(inputValue.startsWith('#') ? inputValue : `#${inputValue}`);
+    } catch (err) {
+      color = null;
+    }
+    return color;
+  }, [parseColor, inputValue]);
+  let parsed = useRef(null);
+  parsed.current = parsedValue;
 
-  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 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 commit = () => {
-    setInputValue(colorValue ? colorValue.toString('hex') : '');
+  let increment = () => {
+    safelySetColorValue((prevColor: Color) => {
+      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 === prevColor) {
+        setInputValue(newValue.toString('hex'));
+      }
+      return newValue;
+    });
   };
+  let decrement = () => {
+    safelySetColorValue((prevColor: Color) => {
+      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 === prevColor) {
+        setInputValue(newValue.toString('hex'));
+      }
+      return 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,
@@ -136,7 +190,6 @@ increment,
   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);
@@ -143,0 +196,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

259831

increased by3.86%

Lines of code

2555

increased by5.71%

Dependency changes

• + Added@formatjs/ecma402-abstract@2.3.2(transitive)

• + Added@formatjs/fast-memoize@2.2.6(transitive)

• + Added@formatjs/icu-messageformat-parser@2.10.0(transitive)

• + Added@formatjs/icu-skeleton-parser@1.8.12(transitive)

• + Added@formatjs/intl-localematcher@0.5.10(transitive)

• + Added@internationalized/message@3.1.6(transitive)

• + Added@internationalized/number@3.6.0(transitive)

• + Added@react-types/numberfield@3.8.8(transitive)

• + Addeddecimal.js@10.4.3(transitive)

• + Addedintl-messageformat@10.7.12(transitive)

• - Removed@internationalized/message@3.0.0-rc.0(transitive)

• - Removed@internationalized/number@3.0.0-rc.0(transitive)

• - Removed@react-types/numberfield@3.0.0-rc.0(transitive)

• - Removedintl-messageformat@2.2.0(transitive)

• - Removedintl-messageformat-parser@1.4.0(transitive)

• Updated@internationalized/message@^3.0.0

• Updated@internationalized/number@^3.0.0

• Updated@react-aria/utils@^3.8.0

• Updated@react-stately/slider@^3.0.2

• Updated@react-stately/utils@^3.2.1

• Updated@react-types/numberfield@^3.0.0