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

Comparing version 1.3.2 to 1.3.3

cjs/index.d.ts

@@ -10,2 +10,4 @@ import React from 'react';
     radius?: React.CSSProperties['borderRadius'];
+    /** Direction of the oval: 'x' or 'y'. */
+    oval?: string;
     /** Starting angle of the color wheel's hue gradient, measured in degrees. */
@@ -12,0 +14,0 @@ angle?: number;

cjs/index.js

@@ -16,3 +16,3 @@ "use strict";
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["prefixCls", "radius", "pointer", "className", "style", "width", "height", "direction", "angle", "color", "onChange"];
+var _excluded = ["prefixCls", "radius", "pointer", "className", "style", "width", "height", "oval", "direction", "angle", "color", "onChange"];
 var HUE_GRADIENT_CLOCKWISE = 'conic-gradient(red, yellow, lime, aqua, blue, magenta, red)';
@@ -32,2 +32,3 @@ var HUE_GRADIENT_ANTICLOCKWISE = 'conic-gradient(red, magenta, blue, aqua, lime, yellow, red)';
     height = _props$height === void 0 ? 200 : _props$height,
+    oval = props.oval,
     _props$direction = props.direction,
@@ -64,3 +65,3 @@ direction = _props$direction === void 0 ? 'anticlockwise' : _props$direction,
     zIndex: 1,
-    transform: "translate(".concat(positions.x, "px, ").concat(positions.y, "px)")
+    transform: "translate(".concat(positions.x, "px, ").concat(positions.y, "px) ").concat(oval === 'x' || oval === 'X' ? 'scaleY(2)' : oval === 'y' || oval === 'Y' ? 'scaleX(2)' : '')
   };
@@ -80,2 +81,3 @@ var pointerElement = pointer && typeof pointer === 'function' ? pointer((0, _objectSpread2["default"])({
       width: width,
+      transform: oval === 'x' || oval === 'X' ? 'scaleY(0.5)' : oval === 'y' || oval === 'Y' ? 'scaleX(0.5)' : '',
       height: height
@@ -82,0 +84,0 @@ }, style),

esm/index.d.ts

@@ -10,2 +10,4 @@ import React from 'react';
     radius?: React.CSSProperties['borderRadius'];
+    /** Direction of the oval: 'x' or 'y'. */
+    oval?: string;
     /** Starting angle of the color wheel's hue gradient, measured in degrees. */
@@ -12,0 +14,0 @@ angle?: number;

esm/index.js

 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["prefixCls", "radius", "pointer", "className", "style", "width", "height", "direction", "angle", "color", "onChange"];
+var _excluded = ["prefixCls", "radius", "pointer", "className", "style", "width", "height", "oval", "direction", "angle", "color", "onChange"];
 import React from 'react';
@@ -22,2 +22,3 @@ import { validHex, hexToHsva, hsvaToHex, color as handleColor } from '@uiw/color-convert';
       height = 200,
+      oval,
       direction = 'anticlockwise',
@@ -53,3 +54,3 @@ angle = 180,
     zIndex: 1,
-    transform: "translate(" + positions.x + "px, " + positions.y + "px)"
+    transform: "translate(" + positions.x + "px, " + positions.y + "px) " + (oval === 'x' || oval === 'X' ? 'scaleY(2)' : oval === 'y' || oval === 'Y' ? 'scaleX(2)' : '')
   };
@@ -69,2 +70,3 @@ var pointerElement = pointer && typeof pointer === 'function' ? pointer(_extends({
       width,
+      transform: oval === 'x' || oval === 'X' ? 'scaleY(0.5)' : oval === 'y' || oval === 'Y' ? 'scaleX(0.5)' : '',
       height
@@ -71,0 +73,0 @@ }, style),

package.json

 {
   "name": "@uiw/react-color-wheel",
-  "version": "1.3.2",
+  "version": "1.3.3",
   "description": "Color wheel",
@@ -38,4 +38,4 @@ "author": "Kenny Wong <[e-mail]>",
   "dependencies": {
-    "@uiw/color-convert": "1.3.2",
-    "@uiw/react-drag-event-interactive": "1.3.2"
+    "@uiw/color-convert": "1.3.3",
+    "@uiw/react-drag-event-interactive": "1.3.3"
   },
@@ -42,0 +42,0 @@ "devDependencies": {

README.md

@@ -8,3 +8,5 @@ React Color Wheel
 
+<!--rehype:ignore:start-->
 [![react-color-wheel](https://user-images.githubusercontent.com/1680273/125949147-ab96c3d8-1490-4418-b2cf-3f347993bdcb.png)](https://uiwjs.github.io/react-color/#/wheel)
+<!--rehype:ignore:end-->
 
@@ -19,16 +21,18 @@ ## Install
 
-```js
+```tsx mdx:preview
+import React, { useState, Fragment } from 'react';
 import Wheel from '@uiw/react-color-wheel';
+import { hsvaToHex } from '@uiw/color-convert';
 
 function Demo() {
-  const [hsva, setHsva] = useState({ h: 0, s: 0, v: 68, a: 1 });
+  const [hsva, setHsva] = useState({ h: 214, s: 43, v: 90, a: 1 });
   return (
-    <Wheel
-      color={hsva}
-      onChange={(color) => {
-        setHsva({ ...hsva, ...color.hsva });
-      }}
-    />
+    <Fragment>
+      <Wheel color={hsva} onChange={(color) => setHsva({ ...hsva, ...color.hsva })} />
+      <div style={{ width: '100%', height: 34, background: hsvaToHex(hsva) }}></div>
+    </Fragment>
   );
 }
+
+export default Demo;
 ```
@@ -41,9 +45,3 @@
 import { HsvaColor, ColorResult } from '@uiw/color-convert';
-export interface PointerProps extends React.HTMLAttributes<HTMLDivElement> {
-  prefixCls?: string;
-  top?: string;
-  left: string;
-  color?: string;
-}
-export declare const Pointer: ({ className, color, left, top, style, prefixCls }: PointerProps) => JSX.Element;
+import { PointerProps } from './Pointer';
 export interface WheelProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'color'> {
@@ -55,2 +53,4 @@ prefixCls?: string;
   radius?: React.CSSProperties['borderRadius'];
+  /** Direction of the oval: 'x' or 'y'. */ 
+  oval?: string;
   /** Starting angle of the color wheel's hue gradient, measured in degrees. */
@@ -63,2 +63,4 @@ angle?: number;
 }
+declare const Wheel: React.ForwardRefExoticComponent<WheelProps & React.RefAttributes<HTMLDivElement>>;
+export default Wheel;
 ```
@@ -65,0 +67,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

34421

increased by3.44%

Lines of code

901

increased by1.58%

Number of lines in readme file

68

increased by3.03%

Dependency changes

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

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

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

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

• Updated@uiw/color-convert@1.3.3

• Updated@uiw/react-drag-event-interactive@1.3.3