Add HexAlphaColorPicker

Author: omgovich

README.md

@@ -89,6 +89,7 @@ We provide 12 additional color picker components for different color models, unl
 | Import                      | Value example                      |
 | --------------------------- | ---------------------------------- |
 | `{ HexColorPicker }`        | `"#ffffff"`                        |
+| `{ HexAlphaColorPicker }`   | `"#ffffff88"`                      |
 | `{ RgbColorPicker }`        | `{ r: 255, g: 255, b: 255 }`       |
 | `{ RgbaColorPicker }`       | `{ r: 255, g: 255, b: 255, a: 1 }` |
 | `{ RgbStringColorPicker }`  | `"rgb(255, 255, 255)"`             |

demo/src/components/DevTools.tsx

@@ -3,6 +3,7 @@ import { PickerPreview } from "./PickerPreview";
 import {
   // HEX
   HexColorPicker,
+  HexAlphaColorPicker,
   // RGB
   RgbColor,
   RgbColorPicker,
@@ -33,6 +34,11 @@ export const DevTools = (): JSX.Element => {
   return (
     <div>
       <PickerPreview<string> title="HEX" PickerComponent={HexColorPicker} initialColor="#406090" />
+      <PickerPreview<string>
+        title="HEX Alpha"
+        PickerComponent={HexAlphaColorPicker}
+        initialColor="#40609088"
+      />
       <PickerPreview<RgbColor>
         title="RGB"
         PickerComponent={RgbColorPicker}

demo/src/components/PickerPreview.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
 import React, { useState } from "react";
 import Frame from "react-frame-component";
 import { HexColorInput } from "../../../src";
@@ -33,9 +34,10 @@ export function PickerPreview<T extends AnyColor>({
         <Wrapper>
           <PickerComponent color={color} onChange={handleChange} />
         </Wrapper>
-        {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
-        {/* @ts-ignore */}
-        {title === "HEX" && <HexColorInput color={color} onChange={handleChange} prefixed alpha />}
+        {title.startsWith("HEX") && (
+          // @ts-ignore
+          <HexColorInput color={color} onChange={handleChange} prefixed alpha />
+        )}
       </PreviewDemo>
       <PreviewOutput>{JSON.stringify(color)}</PreviewOutput>
     </PreviewContainer>

src/components/HexAlphaColorPicker.tsx

@@ -0,0 +1,17 @@
+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";
+
+const colorModel: ColorModel<string> = {
+  defaultColor: "0001",
+  toHsva: hexToHsva,
+  fromHsva: hsvaToHex,
+  equal: equalHex,
+};
+
+export const HexAlphaColorPicker = (props: Partial<ColorPickerBaseProps<string>>): JSX.Element => (
+  <AlphaColorPicker {...props} colorModel={colorModel} />
+);

src/components/HexColorPicker.tsx

@@ -8,7 +8,7 @@ import { hexToHsva, hsvaToHex } from "../utils/convert";
 const colorModel: ColorModel<string> = {
   defaultColor: "000",
   toHsva: hexToHsva,
-  fromHsva: hsvaToHex,
+  fromHsva: ({ h, s, v }) => hsvaToHex({ h, s, v, a: 1 }),
   equal: equalHex,
 };
 

src/index.ts

@@ -1,5 +1,6 @@
 // Color picker components
 export { HexColorPicker } from "./components/HexColorPicker";
+export { HexAlphaColorPicker } from "./components/HexAlphaColorPicker";
 export { HslaColorPicker } from "./components/HslaColorPicker";
 export { HslaStringColorPicker } from "./components/HslaStringColorPicker";
 export { HslColorPicker } from "./components/HslColorPicker";

src/utils/convert.ts

@@ -21,15 +21,15 @@ export const hexToRgba = (hex: string): RgbaColor => {
       r: parseInt(hex[0] + hex[0], 16),
       g: parseInt(hex[1] + hex[1], 16),
       b: parseInt(hex[2] + hex[2], 16),
-      a: 1,
+      a: hex.length === 4 ? round(parseInt(hex[3] + hex[3], 16) / 255, 2) : 1,
     };
   }
 
   return {
     r: parseInt(hex.substring(0, 2), 16),
     g: parseInt(hex.substring(2, 4), 16),
     b: parseInt(hex.substring(4, 6), 16),
-    a: 1,
+    a: hex.length === 8 ? round(parseInt(hex.substring(6, 8), 16) / 255, 2) : 1,
   };
 };
 
@@ -163,8 +163,9 @@ const format = (number: number) => {
   return hex.length < 2 ? "0" + hex : hex;
 };
 
-export const rgbaToHex = ({ r, g, b }: RgbaColor): string => {
-  return "#" + format(r) + format(g) + format(b);
+export const rgbaToHex = ({ r, g, b, a }: RgbaColor): string => {
+  const alphaHex = a < 1 ? format(round(a * 255)) : "";
+  return "#" + format(r) + format(g) + format(b) + alphaHex;
 };
 
 export const rgbaToHsva = ({ r, g, b, a }: RgbaColor): HsvaColor => {

tests/components.test.js

@@ -15,6 +15,7 @@ import {
   HsvStringColorPicker,
   HsvaColorPicker,
   HsvaStringColorPicker,
+  HexAlphaColorPicker,
 } from "../src";
 
 afterEach(cleanup);
@@ -188,6 +189,19 @@ it("Changes alpha channel value after an interaction", async () => {
   expect(handleChange).toHaveReturnedWith({ h: 100, s: 0, l: 0, a: 1 });
 });
 
+it("Uses #rrggbbaa format if alpha channel value is less than 1", async () => {
+  const handleChange = jest.fn((hex) => hex);
+  const result = render(<HexAlphaColorPicker color="#112233" onChange={handleChange} />);
+  const alpha = result.container.querySelector(
+    ".react-colorful__alpha .react-colorful__interactive"
+  );
+
+  fireEvent(alpha, new FakeMouseEvent("mousedown", { pageX: 100, pageY: 0 }));
+  fireEvent(alpha, new FakeMouseEvent("mousemove", { pageX: 0, pageY: 0 }));
+
+  expect(handleChange).toHaveReturnedWith("#11223300");
+});
+
 // Fast clicks on mobile devices
 // See https://github.com/omgovich/react-colorful/issues/55
 it("Doesn't react on mouse events after a touch interaction", () => {