Add updateAlpha prop to colorModel

Author: t-hamano

src/components/HslaColorPicker.tsx

@@ -3,13 +3,14 @@ import React from "react";
 import { AlphaColorPicker } from "./common/AlphaColorPicker";
 import { ColorModel, ColorPickerBaseProps, HslaColor } from "../types";
 import { equalColorObjects } from "../utils/compare";
-import { hslaToHsva, hsvaToHsla } from "../utils/convert";
+import { hslaToHsva, hsvaToHsla, updateAlphaFromObject } from "../utils/convert";
 
 const colorModel: ColorModel<HslaColor> = {
   defaultColor: { h: 0, s: 0, l: 0, a: 1 },
   toHsva: hslaToHsva,
   fromHsva: hsvaToHsla,
   equal: equalColorObjects,
+  updateAlpha: updateAlphaFromObject,
 };
 
 export const HslaColorPicker = (props: Partial<ColorPickerBaseProps<HslaColor>>): JSX.Element => (

src/components/HslaStringColorPicker.tsx

@@ -3,13 +3,14 @@ import React from "react";
 import { AlphaColorPicker } from "./common/AlphaColorPicker";
 import { ColorModel, ColorPickerBaseProps } from "../types";
 import { equalColorString } from "../utils/compare";
-import { hslaStringToHsva, hsvaToHslaString } from "../utils/convert";
+import { hslaStringToHsva, hsvaToHslaString, updateAlphaFromString } from "../utils/convert";
 
 const colorModel: ColorModel<string> = {
   defaultColor: "hsla(0, 0%, 0%, 1)",
   toHsva: hslaStringToHsva,
   fromHsva: hsvaToHslaString,
   equal: equalColorString,
+  updateAlpha: updateAlphaFromString,
 };
 
 export const HslaStringColorPicker = (

src/components/HsvaColorPicker.tsx

@@ -3,13 +3,14 @@ import React from "react";
 import { AlphaColorPicker } from "./common/AlphaColorPicker";
 import { ColorModel, ColorPickerBaseProps, HsvaColor } from "../types";
 import { equalColorObjects } from "../utils/compare";
-import { roundHsva } from "../utils/convert";
+import { roundHsva, updateAlphaFromObject } from "../utils/convert";
 
 const colorModel: ColorModel<HsvaColor> = {
   defaultColor: { h: 0, s: 0, v: 0, a: 1 },
   toHsva: (hsva) => hsva,
   fromHsva: roundHsva,
   equal: equalColorObjects,
+  updateAlpha: updateAlphaFromObject,
 };
 
 export const HsvaColorPicker = (props: Partial<ColorPickerBaseProps<HsvaColor>>): JSX.Element => (

src/components/HsvaStringColorPicker.tsx

@@ -3,13 +3,14 @@ import React from "react";
 import { AlphaColorPicker } from "./common/AlphaColorPicker";
 import { ColorModel, ColorPickerBaseProps } from "../types";
 import { equalColorString } from "../utils/compare";
-import { hsvaStringToHsva, hsvaToHsvaString } from "../utils/convert";
+import { hsvaStringToHsva, hsvaToHsvaString, updateAlphaFromString } from "../utils/convert";
 
 const colorModel: ColorModel<string> = {
   defaultColor: "hsva(0, 0%, 0%, 1)",
   toHsva: hsvaStringToHsva,
   fromHsva: hsvaToHsvaString,
   equal: equalColorString,
+  updateAlpha: updateAlphaFromString,
 };
 
 export const HsvaStringColorPicker = (

src/components/RgbaColorPicker.tsx

@@ -3,13 +3,14 @@ import React from "react";
 import { AlphaColorPicker } from "./common/AlphaColorPicker";
 import { ColorModel, ColorPickerBaseProps, RgbaColor } from "../types";
 import { equalColorObjects } from "../utils/compare";
-import { rgbaToHsva, hsvaToRgba } from "../utils/convert";
+import { rgbaToHsva, hsvaToRgba, updateAlphaFromObject } from "../utils/convert";
 
 const colorModel: ColorModel<RgbaColor> = {
   defaultColor: { r: 0, g: 0, b: 0, a: 1 },
   toHsva: rgbaToHsva,
   fromHsva: hsvaToRgba,
   equal: equalColorObjects,
+  updateAlpha: updateAlphaFromObject,
 };
 
 export const RgbaColorPicker = (props: Partial<ColorPickerBaseProps<RgbaColor>>): JSX.Element => (

src/components/RgbaStringColorPicker.tsx

@@ -3,13 +3,14 @@ import React from "react";
 import { AlphaColorPicker } from "./common/AlphaColorPicker";
 import { ColorModel, ColorPickerBaseProps } from "../types";
 import { equalColorString } from "../utils/compare";
-import { rgbaStringToHsva, hsvaToRgbaString } from "../utils/convert";
+import { rgbaStringToHsva, hsvaToRgbaString, updateAlphaFromString } from "../utils/convert";
 
 const colorModel: ColorModel<string> = {
   defaultColor: "rgba(0, 0, 0, 1)",
   toHsva: rgbaStringToHsva,
   fromHsva: hsvaToRgbaString,
   equal: equalColorString,
+  updateAlpha: updateAlphaFromString,
 };
 
 export const RgbaStringColorPicker = (

src/hooks/useColorManipulation.ts

@@ -36,9 +36,13 @@ export function useColorManipulation<T extends AnyColor>(
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const { a: _, ...cacheHsv } = cache.current.hsva;
 
+    const isSupportAlpha = "updateAlpha" in colorModel;
+
     // When alpha channel is changed, use cached RGB values to prevent rounding errors
     const newColor = equalColorObjects(hsv, cacheHsv)
-      ? Object.assign({}, cache.current.color, { a })
+      ? isSupportAlpha
+        ? colorModel.updateAlpha(cache.current.color, a)
+        : cache.current.color
       : colorModel.fromHsva(hsva);
 
     if (

src/types.ts

@@ -39,6 +39,9 @@ export interface ColorModel<T extends AnyColor> {
   toHsva: (defaultColor: T) => HsvaColor;
   fromHsva: (hsva: HsvaColor) => T;
   equal: (first: T, second: T) => boolean;
+  updateAlpha?:
+    | ((color: string, alpha: number) => string)
+    | ((color: ObjectColor, alpha: number) => ObjectColor);
 }
 
 type ColorPickerHTMLAttributes = Omit<

src/utils/convert.ts

@@ -1,5 +1,13 @@
 import { round } from "./round";
-import { RgbaColor, RgbColor, HslaColor, HslColor, HsvaColor, HsvColor } from "../types";
+import {
+  RgbaColor,
+  RgbColor,
+  HslaColor,
+  HslColor,
+  HsvaColor,
+  HsvColor,
+  ObjectColor,
+} from "../types";
 
 /**
  * Valid CSS <angle> units.
@@ -204,3 +212,11 @@ export const hsvaToHsv = (hsva: HsvaColor): HsvColor => {
   const { h, s, v } = roundHsva(hsva);
   return { h, s, v };
 };
+
+export const updateAlphaFromString = (color: string, alpha: number): string => {
+  return color.replace(/\d+\.\d+\)/, `${alpha})`);
+};
+
+export const updateAlphaFromObject = (color: ObjectColor, alpha: number): ObjectColor => {
+  return Object.assign({}, color, { a: alpha });
+};