Refactoring with Generics

Author: t-hamano

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, updateAlphaFromHsla } 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: updateAlphaFromHsla,
+  updateAlpha: updateAlphaFromObject,
 };
 
 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, updateAlphaFromHsva } 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: updateAlphaFromHsva,
+  updateAlpha: updateAlphaFromObject,
 };
 
 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, updateAlphaFromRgba } 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: updateAlphaFromRgba,
+  updateAlpha: updateAlphaFromObject,
 };
 
 export const RgbaColorPicker = (props: Partial<ColorPickerBaseProps<RgbaColor>>): JSX.Element => (

src/utils/convert.ts

@@ -209,14 +209,9 @@ export const updateAlphaFromString = (color: string, alpha: number): string => {
   return color.replace(/\d+\.\d+\)/, `${alpha})`);
 };
 
-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 => {
+export const updateAlphaFromObject = <T extends RgbaColor | HslaColor | HsvaColor>(
+  color: T,
+  alpha: number
+): T => {
   return Object.assign({}, color, { a: alpha });
 };