Fix type error

Author: t-hamano

src/components/HexAlphaColorPicker.tsx

@@ -3,13 +3,14 @@ import React from "react";
 import { AlphaColorPicker } from "./common/AlphaColorPicker";
 import { ColorModel, ColorPickerBaseProps } from "../types";
 import { equalHex } from "../utils/compare";
-import { hexToHsva, hsvaToHex } from "../utils/convert";
+import { hexToHsva, hsvaToHex, updateAlphaFromString } from "../utils/convert";
 
 const colorModel: ColorModel<string> = {
   defaultColor: "0001",
   toHsva: hexToHsva,
   fromHsva: hsvaToHex,
   equal: equalHex,
+  updateAlpha: updateAlphaFromString,
 };
 
 export const HexAlphaColorPicker = (props: Partial<ColorPickerBaseProps<string>>): JSX.Element => (

src/components/HslaColorPicker.tsx

@@ -3,14 +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, updateAlphaFromObject } from "../utils/convert";
+import { hslaToHsva, hsvaToHsla, updateAlphaFromHsla } from "../utils/convert";
 
 const colorModel: ColorModel<HslaColor> = {
   defaultColor: { h: 0, s: 0, l: 0, a: 1 },
   toHsva: hslaToHsva,
   fromHsva: hsvaToHsla,
   equal: equalColorObjects,
-  updateAlpha: updateAlphaFromObject,
+  updateAlpha: updateAlphaFromHsla,
 };
 
 export const HslaColorPicker = (props: Partial<ColorPickerBaseProps<HslaColor>>): JSX.Element => (

src/components/HsvaColorPicker.tsx

@@ -3,14 +3,14 @@ import React from "react";
 import { AlphaColorPicker } from "./common/AlphaColorPicker";
 import { ColorModel, ColorPickerBaseProps, HsvaColor } from "../types";
 import { equalColorObjects } from "../utils/compare";
-import { roundHsva, updateAlphaFromObject } from "../utils/convert";
+import { roundHsva, updateAlphaFromHsva } 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,
+  updateAlpha: updateAlphaFromHsva,
 };
 
 export const HsvaColorPicker = (props: Partial<ColorPickerBaseProps<HsvaColor>>): JSX.Element => (

src/components/RgbaColorPicker.tsx

@@ -3,14 +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, updateAlphaFromObject } from "../utils/convert";
+import { rgbaToHsva, hsvaToRgba, updateAlphaFromRgba } from "../utils/convert";
 
 const colorModel: ColorModel<RgbaColor> = {
   defaultColor: { r: 0, g: 0, b: 0, a: 1 },
   toHsva: rgbaToHsva,
   fromHsva: hsvaToRgba,
   equal: equalColorObjects,
-  updateAlpha: updateAlphaFromObject,
+  updateAlpha: updateAlphaFromRgba,
 };
 
 export const RgbaColorPicker = (props: Partial<ColorPickerBaseProps<RgbaColor>>): JSX.Element => (

src/hooks/useColorManipulation.ts

@@ -36,11 +36,9 @@ 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)
-      ? isSupportAlpha
+      ? colorModel.updateAlpha
         ? colorModel.updateAlpha(cache.current.color, a)
         : cache.current.color
       : colorModel.fromHsva(hsva);

src/types.ts

@@ -39,9 +39,7 @@ 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);
+  updateAlpha?: (color: T, alpha: number) => T;
 }
 
 type ColorPickerHTMLAttributes = Omit<

src/utils/convert.ts

@@ -1,13 +1,5 @@
 import { round } from "./round";
-import {
-  RgbaColor,
-  RgbColor,
-  HslaColor,
-  HslColor,
-  HsvaColor,
-  HsvColor,
-  ObjectColor,
-} from "../types";
+import { RgbaColor, RgbColor, HslaColor, HslColor, HsvaColor, HsvColor } from "../types";
 
 /**
  * Valid CSS <angle> units.
@@ -217,6 +209,14 @@ export const updateAlphaFromString = (color: string, alpha: number): string => {
   return color.replace(/\d+\.\d+\)/, `${alpha})`);
 };
 
-export const updateAlphaFromObject = (color: ObjectColor, alpha: number): ObjectColor => {
+export const updateAlphaFromHsla = (color: HslaColor, alpha: number): HslaColor => {
+  return Object.assign({}, color, { a: alpha });
+};
+
+export const updateAlphaFromHsva = (color: HsvaColor, alpha: number): HsvaColor => {
+  return Object.assign({}, color, { a: alpha });
+};
+
+export const updateAlphaFromRgba = (color: RgbaColor, alpha: number): RgbaColor => {
   return Object.assign({}, color, { a: alpha });
 };