feat: 支持显示透明色

miaoxing · Apr 25, 2021 · 07e002f · 07e002f
1 parent fa6b999
commit 07e002f
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 2 deletions.
diff --git a/__tests__/__snapshots__/index.js.snap b/__tests__/__snapshots__/index.js.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`color picker basic 1`] = `"<div><div style=\\"width: 60px; padding: 5px; background: rgb(255, 255, 255); border-radius: 1px; box-shadow: 0 0 0 1px rgba(0,0,0,.1); display: inline-block; cursor: pointer;\\"><div style=\\"height: 22px; border-radius: 2px; background: rgb(0, 0, 0);\\"></div></div></div>"`;
+exports[`color picker basic 1`] = `"<div><div style=\\"width: 60px; padding: 5px; background: rgb(255, 255, 255); border-radius: 1px; box-shadow: 0 0 0 1px rgba(0,0,0,.1); display: inline-block; cursor: pointer;\\"><div style=\\"height: 22px; border-radius: 2px; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==);\\"></div></div></div>"`;
diff --git a/index.js b/index.js
@@ -28,12 +28,13 @@ class ColorPicker extends React.Component {
 
   render() {
     const {value, onChange, ...props} = this.props;
+    const isTransparent = !value || tinyColor(value).getAlpha() === 0;
 
     const styles = {
       color: {
         height: '22px',
         borderRadius: '2px',
-        background: value,
+        background: isTransparent ? 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==)' : value,
         boxShadow: value === '#ffffff' ? '0 0 0 1px rgba(0,0,0,.1)' : null,
       },
       swatch: {