@uiw/react-color-github - npm Package Compare versions

Comparing version 2.0.0 to 2.0.1

cjs/index.js

@@ -16,3 +16,3 @@ "use strict";
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["prefixCls", "placement", "className", "style", "color", "colors", "rectProps", "onChange"],
+var _excluded = ["prefixCls", "placement", "className", "style", "color", "colors", "rectProps", "onChange", "rectRender"],
   _excluded2 = ["key"];
@@ -48,2 +48,3 @@ var CORLER_HEX = ['#B80000', '#DB3E00', '#FCCB00', '#008B02', '#006B76', '#1273DE', '#004DCF', '#5300EB', '#EB9694', '#FAD0C3', '#FEF3BD', '#C1E1C5', '#BEDADC', '#C4DEF6', '#BED3F3', '#D4C4FB'];
     onChange = props.onChange,
+    rectRender = props.rectRender,
     other = (0, _objectWithoutProperties2["default"])(props, _excluded);
@@ -160,2 +161,13 @@ var hsva = typeof color === 'string' && (0, _colorConvert.validHex)(color) ? (0, _colorConvert.hexToHsva)(color) : color;
   }
+  var render = function render(_ref) {
+    var key = _ref.key,
+      props = (0, _objectWithoutProperties2["default"])(_ref, _excluded2);
+    var handle = rectRender && rectRender((0, _objectSpread2["default"])({
+      key: key
+    }, props));
+    if (handle) return handle;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Point["default"], (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), {}, {
+      rectProps: rectProps
+    }), key);
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactColorSwatch["default"], (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
@@ -166,9 +178,3 @@ ref: ref,
     color: hex,
-    rectRender: function rectRender(_ref) {
-      var key = _ref.key,
-        props = (0, _objectWithoutProperties2["default"])(_ref, _excluded2);
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Point["default"], (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), {}, {
-        rectProps: rectProps
-      }), key);
-    }
+    rectRender: render
   }, other), {}, {
@@ -175,0 +181,0 @@ onChange: handleChange,

cjs/Point.js

@@ -12,2 +12,10 @@ "use strict";
 var _jsxRuntime = require("react/jsx-runtime");
+var defalutStyle = {
+  marginRight: 0,
+  marginBottom: 0,
+  borderRadius: 0,
+  boxSizing: 'border-box',
+  height: 25,
+  width: 25
+};
 function Point(_ref) {
@@ -33,2 +41,9 @@ var style = _ref.style,
   }, [checked]);
+  var rectStyle = checked ? {
+    zIndex: 1,
+    outline: '#fff solid 2px',
+    boxShadow: 'rgb(0 0 0 / 25%) 0 0 5px 2px'
+  } : {
+    zIndex: 0
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
@@ -41,3 +56,3 @@ ref: btn,
     onMouseLeave: handleMouseLeave,
-    style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, style), {}, {
+    style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, style), {}, {
       marginRight: 0,
@@ -49,11 +64,5 @@ marginBottom: 0,
       width: 25
-    }, checked ? {
-      zIndex: 1,
-      outline: '#fff solid 2px',
-      boxShadow: 'rgb(0 0 0 / 25%) 0 0 5px 2px'
-    } : {
-      zIndex: 0
-    }), rectProps.style)
+    }, defalutStyle), rectStyle), rectProps === null || rectProps === void 0 ? void 0 : rectProps.style)
   }));
 }
 module.exports = exports.default;

esm/index.js

 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["prefixCls", "placement", "className", "style", "color", "colors", "rectProps", "onChange"],
+var _excluded = ["prefixCls", "placement", "className", "style", "color", "colors", "rectProps", "onChange", "rectRender"],
   _excluded2 = ["key"];
@@ -36,3 +36,4 @@ import React, { Fragment } from 'react';
       rectProps = {},
-      onChange
+      onChange,
+      rectRender
     } = props,
@@ -148,2 +149,15 @@ other = _objectWithoutPropertiesLoose(props, _excluded);
   }
+  var render = _ref => {
+    var {
+        key
+      } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded2);
+    var handle = rectRender && rectRender(_extends({
+      key
+    }, props));
+    if (handle) return handle;
+    return /*#__PURE__*/_jsx(Point, _extends({}, props, {
+      rectProps: rectProps
+    }), key);
+  };
   return /*#__PURE__*/_jsx(Swatch, _extends({
@@ -154,11 +168,3 @@ ref: ref,
     color: hex,
-    rectRender: _ref => {
-      var {
-          key
-        } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded2);
-      return /*#__PURE__*/_jsx(Point, _extends({}, props, {
-        rectProps: rectProps
-      }), key);
-    }
+    rectRender: render
   }, other, {
@@ -165,0 +171,0 @@ onChange: handleChange,

esm/Point.js

@@ -5,2 +5,10 @@ import _extends from "@babel/runtime/helpers/extends";
 import { jsx as _jsx } from "react/jsx-runtime";
+var defalutStyle = {
+  marginRight: 0,
+  marginBottom: 0,
+  borderRadius: 0,
+  boxSizing: 'border-box',
+  height: 25,
+  width: 25
+};
 export default function Point(_ref) {
@@ -28,2 +36,9 @@ var {
   }, [checked]);
+  var rectStyle = checked ? {
+    zIndex: 1,
+    outline: '#fff solid 2px',
+    boxShadow: 'rgb(0 0 0 / 25%) 0 0 5px 2px'
+  } : {
+    zIndex: 0
+  };
   return /*#__PURE__*/_jsx("div", _extends({
@@ -43,10 +58,4 @@ ref: btn,
       width: 25
-    }, checked ? {
-      zIndex: 1,
-      outline: '#fff solid 2px',
-      boxShadow: 'rgb(0 0 0 / 25%) 0 0 5px 2px'
-    } : {
-      zIndex: 0
-    }, rectProps.style)
+    }, defalutStyle, rectStyle, rectProps == null ? void 0 : rectProps.style)
   }));
 }

package.json

 {
   "name": "@uiw/react-color-github",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Color Github Picker",
@@ -39,4 +39,4 @@ "author": "Kenny Wong <[e-mail]>",
   "dependencies": {
-    "@uiw/color-convert": "2.0.0",
-    "@uiw/react-color-swatch": "2.0.0"
+    "@uiw/color-convert": "2.0.1",
+    "@uiw/react-color-swatch": "2.0.1"
   },
@@ -43,0 +43,0 @@ "devDependencies": {

README.md

@@ -43,2 +43,32 @@ React Color Github
 
+Add clear button
+
+```jsx mdx:preview
+import React, { useState } from 'react';
+import Github from '@uiw/react-color-github';
+
+export default function Demo() {
+  const [hex, setHex] = useState("#fff");
+  return (
+    <>
+      <Github
+        color={hex}
+        style={{
+          '--github-background-color': '#d1eff9'
+        }}
+        onChange={(color) => {
+          setHex(color.hex);
+        }}
+        rectRender={(props) => {
+          if (props.key == 15) {
+            return <button key={props.key} onClick={() => setHex(null)}>x</button>
+          }
+        }}
+      />
+      <div style={{ width: 120, height: 50, backgroundColor: hex }} />
+    </>
+  );
+}
+```
+
 ## Props
@@ -45,0 +75,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

32749

increased by5.75%

Lines of code

832

increased by5.58%

Number of lines in readme file

120

increased by33.33%

Dependency changes

• + Added@uiw/color-convert@2.0.1(transitive)

• + Added@uiw/react-color-swatch@2.0.1(transitive)

• - Removed@uiw/color-convert@2.0.0(transitive)

• - Removed@uiw/react-color-swatch@2.0.0(transitive)

• Updated@uiw/color-convert@2.0.1

• Updated@uiw/react-color-swatch@2.0.1