Merge pull request #44 from swiftcarrot/true-alpha

true alpha support fix #40

Author: wangzuo

.storybook/main.js

@@ -0,0 +1,4 @@
+module.exports = {
+  stories: ['../stories/**/*.stories.js'],
+  addons: ['@storybook/addon-actions', '@storybook/addon-links'],
+};

CHANGELOG.md

@@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## 3.0.0
+
+- true alpha support with `initialValue`
+- remove `initialHexColor` support
+- set alpha 0 - 100
+
 ## 2.0.29
 
 - fix typescript definition

README.md

@@ -27,6 +27,8 @@ yarn add react-input-color
 
 ### Usage
 
+The `initialValue` property supports 6 (`#RRGGBB`) and 8 (`#RRGGBBAA`) digits hex value.
+
 ```javascript
 import React from 'react';
 import InputColor from 'react-input-color';
@@ -37,7 +39,7 @@ function App() {
   return (
     <div>
       <InputColor
-        initialHexColor="#5e72e4"
+        initialValue="#5e72e4"
         onChange={setColor}
         placement="right"
       />

index.d.ts

@@ -9,12 +9,13 @@ export class Color {
   b: number;
   a: number;
   hex: string;
+  rgba: string;
 }
 
 export interface InputColorProps {
-  initialHexColor: string;
+  initialValue: string;
   placement?: string;
   onChange?(color: Color): void;
 }
 
-export default function InputColor(props: InputColorProps)
+export default function InputColor(props: InputColorProps);

package.json

@@ -10,7 +10,9 @@
     "build": "rm -rf dist && NODE_ENV=production rollup -c",
     "test": "jest --coverage",
     "prepublishOnly": "npm test && npm run build",
-    "watch": "rollup -cw"
+    "watch": "rollup -cw",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "files": [
     "index.d.ts",
@@ -27,19 +29,25 @@
   "author": "Wang Zuo",
   "license": "MIT",
   "devDependencies": {
-    "babel-jest": "^24.8.0",
-    "babel-preset-swiftcarrot": "^1.0.0",
-    "jest": "^24.8.0",
+    "@babel/core": "^7.9.0",
+    "@rollup/plugin-commonjs": "^11.0.2",
+    "@rollup/plugin-node-resolve": "^7.1.1",
+    "@storybook/addon-actions": "^5.3.18",
+    "@storybook/addon-links": "^5.3.18",
+    "@storybook/addons": "^5.3.18",
+    "@storybook/react": "^5.3.18",
+    "babel-jest": "^25.2.4",
+    "babel-loader": "^8.1.0",
+    "babel-preset-swiftcarrot": "^1.1.0",
+    "jest": "^25.2.4",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-test-renderer": "^16.8.6",
-    "rollup": "^1.17.0",
-    "rollup-plugin-babel": "^4.3.3",
-    "rollup-plugin-commonjs": "^10.0.1",
-    "rollup-plugin-node-resolve": "^5.2.0"
+    "rollup": "^2.3.2",
+    "rollup-plugin-babel": "^4.4.0"
   },
   "dependencies": {
-    "@babel/runtime": "^7.5.5",
+    "@babel/runtime": "^7.9.2",
     "@emotion/core": "^10.0.14",
     "@swiftcarrot/color-fns": "^3.0.4",
     "@xkit/popover": "^0.1.20",

rollup.config.js

@@ -1,6 +1,6 @@
 import babel from 'rollup-plugin-babel';
-import commonjs from 'rollup-plugin-commonjs';
-import nodeResolve from 'rollup-plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import nodeResolve from '@rollup/plugin-node-resolve';
 import pkg from './package.json';
 
 const input = './src/index.js';

src/__tests__/input-color.js

@@ -1,9 +1,42 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
 import InputColor from '../';
+import { parseColor, hex2alpha } from '../utils';
 
 test('render', () => {
   expect(() =>
-    renderer.create(<InputColor initialHexColor="#3498db" />)
+    renderer.create(<InputColor initialValue="#3498db" />)
   ).not.toThrow();
 });
+
+test('parseColor', () => {
+  expect(parseColor('#3498db')).toEqual({
+    r: 52,
+    g: 152,
+    b: 219,
+    h: 204,
+    s: 76,
+    v: 86,
+    a: 100,
+    hex: '#3498db',
+    rgba: 'rgba(52,152,219,1)'
+  });
+  expect(parseColor('#3498db32')).toEqual({
+    r: 52,
+    g: 152,
+    b: 219,
+    h: 204,
+    s: 76,
+    v: 86,
+    a: 20,
+    hex: '#3498db',
+    rgba: 'rgba(52,152,219,0.2)'
+  });
+});
+
+test('hex2alpha', () => {
+  expect(hex2alpha('ff')).toEqual(100);
+  expect(hex2alpha('f7')).toEqual(97);
+  expect(hex2alpha('38')).toEqual(22);
+  expect(hex2alpha('00')).toEqual(0);
+});

src/color-picker.js

@@ -5,7 +5,7 @@ import InputNumber from 'react-input-number';
 import {
   rgb2hsv,
   hsv2hex,
-  rgba2hex,
+  rgb2hex,
   hex2rgb,
   rgba,
   hsv2rgb
@@ -18,25 +18,24 @@ const ColorPicker = ({ color, onChange }) => {
 
   function changeColor(color) {
     if (onChange) {
-      onChange(color);
+      onChange({ ...color, rgba: rgba(color.r, color.g, color.b, color.a) });
     }
   }
 
   function changeHSV(h, s, v) {
     const { r, g, b } = hsv2rgb(h, s, v);
-    const hex = rgba2hex(r, g, b, a);
+    const hex = rgb2hex(r, g, b);
     changeColor({ ...color, h, s, v, r, g, b, hex });
   }
 
   function changeRGB(r, g, b) {
-    const hex = rgba2hex(r, g, b, a);
+    const hex = rgb2hex(r, g, b);
     const { h, s, v } = rgb2hsv(r, g, b);
     changeColor({ ...color, r, g, b, h, s, v, hex });
   }
 
   function changeAlpha(a) {
-    const hex = rgba2hex(r, g, b, a);
-    changeColor({ ...color, a, hex });
+    changeColor({ ...color, a });
   }
 
   function changeHex(hex) {
@@ -190,7 +189,12 @@ const ColorPicker = ({ color, onChange }) => {
         </div>
 
         <div css={styles.input}>
-          <InputNumber value={a} onChange={a => changeAlpha(a)} />
+          <InputNumber
+            min={0}
+            max={100}
+            value={a}
+            onChange={a => changeAlpha(a)}
+          />
           <div>A</div>
         </div>
       </div>
@@ -199,7 +203,7 @@ const ColorPicker = ({ color, onChange }) => {
 };
 
 ColorPicker.defaultProps = {
-  initialHexColor: '#5e72e4'
+  initialValue: '#5e72e4'
 };
 
 const styles = {

src/input-color.js

@@ -5,12 +5,12 @@ import Popover from '@xkit/popover';
 import ColorPicker from './color-picker';
 import { parseColor } from './utils';
 
-const InputColor = ({ initialHexColor, onChange, placement, ...props }) => {
-  const [color, setColor] = useState(parseColor(initialHexColor));
+const InputColor = ({ initialValue, onChange, placement, ...props }) => {
+  const [color, setColor] = useState(parseColor(initialValue));
 
   useEffect(() => {
-    changeColor(parseColor(initialHexColor));
-  }, [initialHexColor]);
+    changeColor(parseColor(initialValue));
+  }, [initialValue]);
 
   function changeColor(color) {
     if (onChange) {
@@ -46,7 +46,7 @@ const InputColor = ({ initialHexColor, onChange, placement, ...props }) => {
             height: 100%;
             cursor: pointer;
           `}
-          style={{ backgroundColor: color.hex }}
+          style={{ backgroundColor: color.rgba }}
         />
       </span>
     </Popover>

src/utils.js

@@ -1,17 +1,23 @@
-import { hex2rgb, rgb2hsv } from '@swiftcarrot/color-fns';
+import { hex2rgb, rgb2hsv, rgba } from '@swiftcarrot/color-fns';
+
+export function hex2alpha(aa) {
+  return Math.round((parseInt('0x' + aa, 16) / 255) * 100);
+}
 
 export function parseColor(hexColor) {
-  const rgb = hex2rgb(hexColor);
+  hexColor = hexColor.toLowerCase();
+  const hex = hexColor.substr(0, 7);
+  const rgb = hex2rgb(hex);
   const { r, g, b } = rgb;
   const hsv = rgb2hsv(r, g, b);
+  const a = hexColor.length > 7 ? hex2alpha(hexColor.substr(7)) : 100;
 
-  return { ...hsv, r, g, b, a: 100, hex: hexColor };
+  return { ...hsv, r, g, b, a, hex, rgba: rgba(r, g, b, a) };
 }
 
 export {
   rgb2hsv,
   hsv2hex,
-  rgba2hex,
   hex2rgb,
   rgba,
   hsv2rgb