add rgba2hex

Author: wangzuo

src/__tests__/input-color.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
 import InputColor from '../';
-import { parseColor, hex2alpha, rgbaToHex } from '../utils';
+import { parseColor, hex2alpha, rgba2hex, alpha2hex } from '../utils';
 
 test('render', () => {
   expect(() =>
@@ -41,6 +41,13 @@ test('hex2alpha', () => {
   expect(hex2alpha('00')).toEqual(0);
 });
 
-test('rgbaToHex', () => {
-  expect(rgbaToHex('rgba(255, 255, 255,0.5))')).toEqual(`#ffffff80`);
+test('alpha2hex', () => {
+  expect(alpha2hex(100)).toEqual('ff');
+  expect(alpha2hex(97)).toEqual('f7');
+  expect(alpha2hex(22)).toEqual('38');
+  expect(alpha2hex(0)).toEqual('00');
+});
+
+test('rgba2hex', () => {
+  expect(rgba2hex(255, 255, 255, 50)).toEqual(`#ffffff80`);
 });

src/color-picker.js

@@ -10,7 +10,7 @@ import {
   rgba,
   hsv2rgb,
 } from '@swiftcarrot/color-fns';
-import { rgbaToHex } from './utils';
+import { rgba2hex } from './utils';
 
 const KEY_ENTER = 13;
 
@@ -19,7 +19,11 @@ const ColorPicker = ({ color, onChange }) => {
 
   function changeColor(color) {
     if (onChange) {
-      onChange({ ...color, rgba: rgba(color.r, color.g, color.b, color.a) });
+      onChange({
+        ...color,
+        rgba: rgba(color.r, color.g, color.b, color.a),
+        hex: rgba2hex(color.r, color.g, color.b, color.a),
+      });
     }
   }
 
@@ -36,8 +40,7 @@ const ColorPicker = ({ color, onChange }) => {
   }
 
   function changeAlpha(a) {
-    const hex = rgbaToHex(`rgba(${r}, ${g}, ${b}, ${a / 100})`);
-    changeColor({ ...color, a, hex });
+    changeColor({ ...color, a });
   }
 
   function changeHex(hex) {

src/utils.js

@@ -1,9 +1,13 @@
-import { hex2rgb, rgb2hsv, rgba } from '@swiftcarrot/color-fns';
+import { hex2rgb, rgb2hsv, rgba, rgb2hex } from '@swiftcarrot/color-fns';
 
 export function hex2alpha(aa) {
   return Math.round((parseInt('0x' + aa, 16) / 255) * 100);
 }
 
+export function alpha2hex(a) {
+  return (Math.round((a / 100) * 255) + 0x10000).toString(16).substr(-2);
+}
+
 export function parseColor(hexColor) {
   hexColor = hexColor.toLowerCase();
   const hex = hexColor;
@@ -15,32 +19,9 @@ export function parseColor(hexColor) {
   return { ...hsv, r, g, b, a, hex, rgba: rgba(r, g, b, a) };
 }
 
-export function trim(str) {
-  return str.replace(/^\s+|\s+$/gm, '');
-}
-
-export function rgbaToHex(rgba) {
-  let inParts = rgba.substring(rgba.indexOf('(')).split(','),
-    r = parseInt(trim(inParts[0].substring(1)), 10),
-    g = parseInt(trim(inParts[1]), 10),
-    b = parseInt(trim(inParts[2]), 10),
-    a = parseFloat(
-      trim(inParts[3].substring(0, inParts[3].length - 1)),
-    ).toFixed(2);
-  let outParts = [
-    r.toString(16),
-    g.toString(16),
-    b.toString(16),
-    Math.round(a * 255)
-      .toString(16)
-      .substring(0, 2),
-  ];
-  outParts.forEach(function (part, i) {
-    if (part.length === 1) {
-      outParts[i] = '0' + part;
-    }
-  });
-  return '#' + outParts.join('');
+export function rgba2hex(r, g, b, a) {
+  const hex = rgb2hex(r, g, b);
+  return hex + alpha2hex(a);
 }
 
 export {