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

Comparing version 2.2.0 to 2.3.0

cjs/index.d.ts

@@ -10,4 +10,9 @@ import React from 'react';
     inputType?: ChromeInputType;
+    showEditableInput?: boolean;
+    showEyeDropper?: boolean;
+    showColorPreview?: boolean;
+    showHue?: boolean;
+    showAlpha?: boolean;
 }
 declare const Chrome: React.ForwardRefExoticComponent<ChromeProps & React.RefAttributes<HTMLDivElement>>;
 export default Chrome;

cjs/index.js

@@ -24,3 +24,3 @@ "use strict";
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["prefixCls", "className", "style", "color", "inputType", "rectProps", "onChange"];
+var _excluded = ["prefixCls", "className", "style", "color", "showEditableInput", "showEyeDropper", "showColorPreview", "showHue", "showAlpha", "inputType", "rectProps", "onChange"];
 var ChromeInputType = exports.ChromeInputType = /*#__PURE__*/function (ChromeInputType) {
@@ -38,2 +38,12 @@ ChromeInputType["HEXA"] = "hexa";
     color = props.color,
+    _props$showEditableIn = props.showEditableInput,
+    showEditableInput = _props$showEditableIn === void 0 ? true : _props$showEditableIn,
+    _props$showEyeDropper = props.showEyeDropper,
+    showEyeDropper = _props$showEyeDropper === void 0 ? true : _props$showEyeDropper,
+    _props$showColorPrevi = props.showColorPreview,
+    showColorPreview = _props$showColorPrevi === void 0 ? true : _props$showColorPrevi,
+    _props$showHue = props.showHue,
+    showHue = _props$showHue === void 0 ? true : _props$showHue,
+    _props$showAlpha = props.showAlpha,
+    showAlpha = _props$showAlpha === void 0 ? true : _props$showAlpha,
     _props$inputType = props.inputType,
@@ -95,2 +105,12 @@ inputType = _props$inputType === void 0 ? ChromeInputType.RGBA : _props$inputType,
   };
+  var styleSize = {
+    height: 14,
+    width: 14
+  };
+  var pointerProps = {
+    style: (0, _objectSpread2["default"])({}, styleSize),
+    fillProps: {
+      style: styleSize
+    }
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactColorGithub["default"], (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
@@ -121,7 +141,7 @@ ref: ref,
           alignItems: 'center',
-          gap: 15
+          gap: 10
         },
-        children: [_EyeDropper.isSupportEyeDropper && /*#__PURE__*/(0, _jsxRuntime.jsx)(_EyeDropper.EyeDropper, {
+        children: [_EyeDropper.isSupportEyeDropper && showEyeDropper && /*#__PURE__*/(0, _jsxRuntime.jsx)(_EyeDropper.EyeDropper, {
           onPickColor: handleClickColor
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactColorAlpha["default"], {
+        }), showColorPreview && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactColorAlpha["default"], {
           width: 28,
@@ -149,7 +169,9 @@ height: 28,
           },
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactColorHue["default"], {
+          children: [showHue == true && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactColorHue["default"], {
             hue: hsva.h,
             style: {
-              width: '100%'
+              width: '100%',
+              height: 12
             },
+            pointerProps: pointerProps,
             bgProps: {
@@ -163,7 +185,9 @@ style: {
             }
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactColorAlpha["default"], {
+          }), showAlpha == true && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactColorAlpha["default"], {
             hsva: hsva,
             style: {
-              marginTop: 10
+              marginTop: 6,
+              height: 12
             },
+            pointerProps: pointerProps,
             bgProps: {
@@ -179,3 +203,3 @@ style: {
         })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      }), showEditableInput && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         style: {
@@ -182,0 +206,0 @@ display: 'flex',

esm/index.d.ts

@@ -10,4 +10,9 @@ import React from 'react';
     inputType?: ChromeInputType;
+    showEditableInput?: boolean;
+    showEyeDropper?: boolean;
+    showColorPreview?: boolean;
+    showHue?: boolean;
+    showAlpha?: boolean;
 }
 declare const Chrome: React.ForwardRefExoticComponent<ChromeProps & React.RefAttributes<HTMLDivElement>>;
 export default Chrome;

esm/index.js

 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["prefixCls", "className", "style", "color", "inputType", "rectProps", "onChange"];
+var _excluded = ["prefixCls", "className", "style", "color", "showEditableInput", "showEyeDropper", "showColorPreview", "showHue", "showAlpha", "inputType", "rectProps", "onChange"];
 import React, { Fragment } from 'react';
@@ -29,2 +29,7 @@ import { hsvaToRgbaString, color as handleColor, validHex, hexToHsva, hsvaToHex, hsvaToHexa } from '@uiw/color-convert';
       color,
+      showEditableInput = true,
+      showEyeDropper = true,
+      showColorPreview = true,
+      showHue = true,
+      showAlpha = true,
       inputType = ChromeInputType.RGBA,
@@ -80,2 +85,12 @@ rectProps = {},
   };
+  var styleSize = {
+    height: 14,
+    width: 14
+  };
+  var pointerProps = {
+    style: _extends({}, styleSize),
+    fillProps: {
+      style: styleSize
+    }
+  };
   return /*#__PURE__*/_jsx(Github, _extends({
@@ -106,7 +121,7 @@ ref: ref,
           alignItems: 'center',
-          gap: 15
+          gap: 10
         },
-        children: [isSupportEyeDropper && /*#__PURE__*/_jsx(EyeDropper, {
+        children: [isSupportEyeDropper && showEyeDropper && /*#__PURE__*/_jsx(EyeDropper, {
           onPickColor: handleClickColor
-        }), /*#__PURE__*/_jsx(Alpha, {
+        }), showColorPreview && /*#__PURE__*/_jsx(Alpha, {
           width: 28,
@@ -132,7 +147,9 @@ height: 28,
           },
-          children: [/*#__PURE__*/_jsx(Hue, {
+          children: [showHue == true && /*#__PURE__*/_jsx(Hue, {
             hue: hsva.h,
             style: {
-              width: '100%'
+              width: '100%',
+              height: 12
             },
+            pointerProps: pointerProps,
             bgProps: {
@@ -146,7 +163,9 @@ style: {
             }
-          }), /*#__PURE__*/_jsx(Alpha, {
+          }), showAlpha == true && /*#__PURE__*/_jsx(Alpha, {
             hsva: hsva,
             style: {
-              marginTop: 10
+              marginTop: 6,
+              height: 12
             },
+            pointerProps: pointerProps,
             bgProps: {
@@ -162,3 +181,3 @@ style: {
         })]
-      }), /*#__PURE__*/_jsxs("div", {
+      }), showEditableInput && /*#__PURE__*/_jsxs("div", {
         style: {
@@ -165,0 +184,0 @@ display: 'flex',

package.json

 {
   "name": "@uiw/react-color-chrome",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "Color Github Picker",
@@ -40,10 +40,10 @@ "author": "Kenny Wong <[e-mail]>",
   "dependencies": {
-    "@uiw/color-convert": "2.2.0",
-    "@uiw/react-color-alpha": "2.2.0",
-    "@uiw/react-color-editable-input": "2.2.0",
-    "@uiw/react-color-editable-input-hsla": "2.2.0",
-    "@uiw/react-color-editable-input-rgba": "2.2.0",
-    "@uiw/react-color-github": "2.2.0",
-    "@uiw/react-color-hue": "2.2.0",
-    "@uiw/react-color-saturation": "2.2.0"
+    "@uiw/color-convert": "2.3.0",
+    "@uiw/react-color-alpha": "2.3.0",
+    "@uiw/react-color-editable-input": "2.3.0",
+    "@uiw/react-color-editable-input-hsla": "2.3.0",
+    "@uiw/react-color-editable-input-rgba": "2.3.0",
+    "@uiw/react-color-github": "2.3.0",
+    "@uiw/react-color-hue": "2.3.0",
+    "@uiw/react-color-saturation": "2.3.0"
   },
@@ -50,0 +50,0 @@ "devDependencies": {

README.md

@@ -26,2 +26,13 @@ React Color Chrome
 import React, { useState } from 'react';
+
+import {
+  HsvaColor,
+  hsvaToRgbaString,
+  color as handleColor,
+  validHex,
+  hexToHsva,
+  hsvaToHex,
+  hsvaToHexa,
+} from '@uiw/color-convert';
+
 import Chrome from '@uiw/react-color-chrome';
@@ -31,20 +42,32 @@ import { GithubPlacement } from '@uiw/react-color-github';
 function Demo() {
-  const [hex, setHex] = useState("#d29c9c53");
+  const [hsva, setHsva] = useState({ h:0, s:25.71, v:82.35, a:0.32});
+  const hex = hsvaToHex(hsva)
   return (
     <>
       <Chrome
-        color={hex}
+        color={hsva}
         style={{ float: 'left' }}
         placement={GithubPlacement.Right}
         onChange={(color) => {
-          setHex(color.hexa);
+          setHsva(color.hsva);
         }}
       />
       <Chrome
-        color={hex}
+        color={hsva}
         placement={GithubPlacement.TopRight}
         onChange={(color) => {
-          setHex(color.hexa);
+          setHsva(color.hsva);
         }}
       />
+      <Chrome
+        color={hsva}
+        style={{ marginTop: 10, width: 140 }}
+        placement={GithubPlacement.TopRight}
+        showEyeDropper={false}
+        showColorPreview={false}
+        showEditableInput={false}
+        onChange={(color) => {
+          setHsva(color.hsva);
+        }}
+      />
       <div style={{ background: hex, marginTop: 30, padding: 10 }}>
@@ -65,8 +88,13 @@ {hex}
 export declare enum ChromeInputType {
-    HEXA = "hexa",
-    RGBA = "rgba",
-    HSLA = "hsla"
+  HEXA = "hexa",
+  RGBA = "rgba",
+  HSLA = "hsla"
 }
 export interface ChromeProps extends Omit<GithubProps, 'colors'> {
-    inputType?: ChromeInputType;
+  inputType?: ChromeInputType;
+  showEditableInput?: boolean;
+  showEyeDropper?: boolean;
+  showColorPreview?: boolean;
+  showHue?: boolean;
+  showAlpha?: boolean;
 }
@@ -73,0 +101,0 @@ declare const Chrome: React.ForwardRefExoticComponent<ChromeProps & React.RefAttributes<HTMLDivElement>>;

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

40971

increased by9.5%

Lines of code

974

increased by8.71%

Number of lines in readme file

117

increased by31.46%

Dependency changes

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

• + Added@uiw/react-color-alpha@2.3.0(transitive)

• + Added@uiw/react-color-editable-input@2.3.0(transitive)

• + Added@uiw/react-color-editable-input-hsla@2.3.0(transitive)

• + Added@uiw/react-color-editable-input-rgba@2.3.0(transitive)

• + Added@uiw/react-color-github@2.3.0(transitive)

• + Added@uiw/react-color-hue@2.3.0(transitive)

• + Added@uiw/react-color-saturation@2.3.0(transitive)

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

• + Added@uiw/react-drag-event-interactive@2.3.0(transitive)

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

• - Removed@uiw/react-color-alpha@2.2.0(transitive)

• - Removed@uiw/react-color-editable-input@2.2.0(transitive)

• - Removed@uiw/react-color-editable-input-hsla@2.2.0(transitive)

• - Removed@uiw/react-color-editable-input-rgba@2.2.0(transitive)

• - Removed@uiw/react-color-github@2.2.0(transitive)

• - Removed@uiw/react-color-hue@2.2.0(transitive)

• - Removed@uiw/react-color-saturation@2.2.0(transitive)

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

• - Removed@uiw/react-drag-event-interactive@2.2.0(transitive)

• Updated@uiw/color-convert@2.3.0

• Updated@uiw/react-color-alpha@2.3.0

• Updated@uiw/react-color-editable-input@2.3.0

• Updated@uiw/react-color-editable-input-hsla@2.3.0

• Updated@uiw/react-color-editable-input-rgba@2.3.0

• Updated@uiw/react-color-github@2.3.0

• Updated@uiw/react-color-hue@2.3.0

• Updated@uiw/react-color-saturation@2.3.0