diff --git a/src/__tests__/input-color.js b/src/__tests__/input-color.js index cb8a9e7..85d2217 100644 --- a/src/__tests__/input-color.js +++ b/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 } from '../utils'; +import { parseColor, hex2alpha, rgbaToHex } from '../utils'; test('render', () => { expect(() => @@ -29,7 +29,7 @@ test('parseColor', () => { s: 76, v: 86, a: 20, - hex: '#3498db', + hex: '#3498db32', rgba: 'rgba(52,152,219,0.2)', }); }); @@ -40,3 +40,7 @@ test('hex2alpha', () => { expect(hex2alpha('38')).toEqual(22); expect(hex2alpha('00')).toEqual(0); }); + +test('rgbaToHex', () => { + expect(rgbaToHex('rgba(255, 255, 255,0.5))')).toEqual(`#ffffff80`); +}); diff --git a/src/color-picker.js b/src/color-picker.js index d134465..9bd47c4 100644 --- a/src/color-picker.js +++ b/src/color-picker.js @@ -10,6 +10,7 @@ import { rgba, hsv2rgb, } from '@swiftcarrot/color-fns'; +import { rgbaToHex } from './utils'; const KEY_ENTER = 13; @@ -35,7 +36,8 @@ const ColorPicker = ({ color, onChange }) => { } function changeAlpha(a) { - changeColor({ ...color, a }); + const hex = rgbaToHex(`rgba(${r}, ${g}, ${b}, ${a / 100})`); + changeColor({ ...color, a, hex }); } function changeHex(hex) { diff --git a/src/utils.js b/src/utils.js index e33f1a3..71e7ca3 100644 --- a/src/utils.js +++ b/src/utils.js @@ -6,7 +6,7 @@ export function hex2alpha(aa) { export function parseColor(hexColor) { hexColor = hexColor.toLowerCase(); - const hex = hexColor.substr(0, 7); + const hex = hexColor; const rgb = hex2rgb(hex); const { r, g, b } = rgb; const hsv = rgb2hsv(r, g, b); @@ -15,6 +15,34 @@ 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 { rgb2hsv, hsv2hex,