✨ feat: 支持预区点击复制 hex

arvinxx · Apr 6, 2022 · f7a2fd4 · f7a2fd4
1 parent e078276
commit f7a2fd4
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 1 deletion.
diff --git a/packages/color-picker/package.json b/packages/color-picker/package.json
@@ -25,6 +25,7 @@
   "dependencies": {
     "chroma-js": "^2.1.1",
     "classnames": "^2.3.1",
+    "copy-to-clipboard": "^3.3.1",
     "lodash": "^4.17.21",
     "reactcss": "^1.2.3",
     "rxjs": "^7.5.5",

diff --git a/packages/color-picker/src/components/Previewer/index.tsx b/packages/color-picker/src/components/Previewer/index.tsx
@@ -2,6 +2,7 @@ import type { FC } from 'react';
 import React, { memo } from 'react';
 import reactCSS from 'reactcss';
 import isEqual from 'lodash/isEqual';
+import copy from 'copy-to-clipboard';
 
 import { Checkboard } from '../common';
 
@@ -10,6 +11,7 @@ import type { ColorPickerProps } from '../../types';
 
 export const Previewer: FC<ColorPickerProps> = memo(() => {
   const rgba = useStore((s) => s.colorModel.rgba(), isEqual);
+  const hex = useStore((s) => s.colorModel.hex());
 
   const styles: any = reactCSS({
     default: {
@@ -21,6 +23,7 @@ export const Previewer: FC<ColorPickerProps> = memo(() => {
         marginLeft: '4px',
         borderRadius: 12,
         overflow: 'hidden',
+        cursor: 'pointer',
       },
       activeColor: {
         borderRadius: 12,
@@ -32,7 +35,12 @@ export const Previewer: FC<ColorPickerProps> = memo(() => {
   });
 
   return (
-    <div style={styles.color}>
+    <div
+      style={styles.color}
+      onClick={() => {
+        copy(hex);
+      }}
+    >
       <Checkboard />
       <div style={styles.activeColor} />
     </div>