feat(Chremo): Add EyeDropper in Chrome component. #148

Author: jaywcjlove

packages/color-alpha/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "extends": "../../tsconfig",
-  "include": ["./src"],
+  "include": ["./src", "../color-chrome/src/EyeDropper.tsx"],
   "compilerOptions": {
     "outDir": "./cjs",
     "noEmit": false

packages/color-chrome/src/EyeDropper.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+export const isSupportEyeDropper = 'EyeDropper' in window;
+
+export interface EyeDropperProps {
+  onPickColor?: (color: string) => void;
+}
+
+export function EyeDropper(props: EyeDropperProps) {
+  const click = () => {
+    if ('EyeDropper' in window) {
+      const eyeDropper = new (window as any).EyeDropper();
+      eyeDropper.open().then((result: any) => {
+        console.log(result);
+        props.onPickColor?.(result.sRGBHex);
+      });
+    }
+  };
+  return (
+    <svg viewBox="0 0 512 512" height="1em" width="1em" onClick={click}>
+      <path
+        fill="currentColor"
+        d="M482.8 29.23c38.9 38.98 38.9 102.17 0 141.17L381.2 271.9l9.4 9.5c12.5 12.5 12.5 32.7 0 45.2s-32.7 12.5-45.2 0l-160-160c-12.5-12.5-12.5-32.7 0-45.2s32.7-12.5 45.2 0l9.5 9.4L341.6 29.23c39-38.974 102.2-38.974 141.2 0zM55.43 323.3 176.1 202.6l45.3 45.3-120.7 120.7c-3.01 3-4.7 7-4.7 11.3V416h36.1c4.3 0 8.3-1.7 11.3-4.7l120.7-120.7 45.3 45.3-120.7 120.7c-15 15-35.4 23.4-56.6 23.4H89.69l-39.94 26.6c-12.69 8.5-29.59 6.8-40.377-4-10.786-10.8-12.459-27.7-3.998-40.4L32 422.3v-42.4c0-21.2 8.43-41.6 23.43-56.6z"
+      />
+    </svg>
+  );
+}

packages/color-chrome/src/index.tsx

@@ -17,6 +17,7 @@ import EditableInputRGBA from '@uiw/react-color-editable-input-rgba';
 import EditableInputHSLA from '@uiw/react-color-editable-input-hsla';
 import { useState } from 'react';
 import Arrow from './Arrow';
+import { EyeDropper, isSupportEyeDropper } from './EyeDropper';
 
 export enum ChromeInputType {
   HEXA = 'hexa',
@@ -72,6 +73,10 @@ const Chrome = React.forwardRef<HTMLDivElement, ChromeProps>((props, ref) => {
     background: hsvaToRgbaString(hsva),
     boxShadow: 'var(--chrome-alpha-box-shadow)',
   };
+  const handleClickColor = (hex: string) => {
+    let result = hexToHsva(hex);
+    handleChange({ ...result });
+  };
   return (
     <Github
       ref={ref}
@@ -90,14 +95,14 @@ const Chrome = React.forwardRef<HTMLDivElement, ChromeProps>((props, ref) => {
               handleChange({ ...hsva, ...newColor, a: hsva.a });
             }}
           />
-          <div style={{ padding: 15, display: 'flex', alignItems: 'center' }}>
+          <div style={{ padding: 15, display: 'flex', alignItems: 'center', gap: 15 }}>
+            {isSupportEyeDropper && <EyeDropper onPickColor={handleClickColor} />}
             <Alpha
-              width={24}
-              height={24}
+              width={28}
+              height={28}
               hsva={hsva}
               radius={2}
               style={{
-                marginRight: 15,
                 borderRadius: '50%',
               }}
               bgProps={{ style: { background: 'transparent' } }}

tsconfig.json

@@ -16,7 +16,6 @@
     "declaration": true,
     "baseUrl": ".",
     "noFallthroughCasesInSwitch": true,
-    "noEmit": true,
-    "types": ["jest", "node"]
+    "noEmit": true
   }
 }