Merge pull request #29 from odedglas/add-radial-gradient-picker

Author: odeadglaz

.eslintrc.js

@@ -16,9 +16,14 @@ module.exports = {
 		'ecmaVersion': 2018,
 		'sourceType': 'module'
 	},
+	'settings': {
+		'react': {
+			'version': '16.8.0'
+		},
+	},
 	'rules': {
 		'indent': [
-			'error',
+			'off',
 			'tab'
 		],
 		'quotes': [

.storybook/main.js

@@ -10,7 +10,8 @@ const baseStorybookConfig = {
     },
     addons: [
         '@storybook/addon-essentials',
-        '@storybook/addon-links'
+        '@storybook/addon-links',
+        '@storybook/preset-scss'
     ]
 };
 

README.md

@@ -66,31 +66,6 @@ const App = () => {
 | `opacity`| `Number` | `1` | `No` | The stop color opacity.
 | `active`| `Boolean` | `` | `No` | Rather the current color is active (selected) or not.
 
-## Angle Picke Usage
-<img width="200" alt="gradient_preview" src="/assets/ap.png"> <br/>
-
-```js
-import React, { useState } from 'react';
-import { AnglePicker } from 'react-linear-gradient-picker';
-import 'react-linear-gradient-picker/dist/index.css';
-
-const App = () => {
-    const [angle, setAngle] = useState(25);
-
-    return (
-        <AnglePicker angle={angle} setAngle={setAngle}/>
-    );
-};
-```
-
-### Accepted props
-
-| Name | Type | Default Value | Required? | Description
-|-|-|-|-|-
-| `angle` | `Number` | `undefined` | Yes | The controlled angle.
-| `setAngle` | `Function` | `undefined` | Yes | The set angle method to be trigger after an angle was changes.
-| `size` | `Number` | `48` | No | Determines the size of the angle picker
-| `snap` | `Number` | `5` | No | Determines the angle change snapping, Can be removed with setting as 0
 
 ## Gradient Picker Popover Usage
 <img width="200" alt="gradient_popover_preview" src="/assets/gpp.jpg"> <br/>
@@ -136,7 +111,6 @@ const App = () => {
 			setOpen,
 			angle,
 			setAngle,
-			showAnglePicker: true,
 			width: 220,
 			maxStops: 3,
 			paletteHeight: 32,
@@ -158,8 +132,35 @@ export default App;
 | `trigger` | `React Component` | `defaultTrigger` | No | The popover trigger component, Will use default implementation if empty.
 | `open` | `Boolean` | `false` | Yes | Controls the popover open state
 | `setOpen` | `Function` | `undefined` | Yes | The setOpen method to be called upon open changes
-| `showAnglePicker` | `Boolean` | `false` | No | Will add to gradient picker the angle picker component at the bottom
+| `showGradientTypePicker` | `Boolean` | `true` | No | Rather to show the `gradientType` picker control.
+| `showAnglePicker` | `Boolean` | `true` | No | Rather to show the `anglePicker` picker control.
 | `angle` | `Number` | `undefined` | No | The angle picker angle value
 | `setAngle` | `Function` | `undefined` | No | Then angle picker setAngle method to be called upon angle changes
 
-* This component accepts all of GradientPicker pros.
+* This component accepts all of `<GradientPicker/>` pros.
+
+## Angle Picker Usage
+<img width="200" alt="gradient_preview" src="/assets/ap.png"> <br/>
+
+```js
+import React, { useState } from 'react';
+import { AnglePicker } from 'react-linear-gradient-picker';
+import 'react-linear-gradient-picker/dist/index.css';
+
+const App = () => {
+    const [angle, setAngle] = useState(25);
+
+    return (
+        <AnglePicker angle={angle} setAngle={setAngle}/>
+    );
+};
+```
+
+### Accepted props
+
+| Name | Type | Default Value | Required? | Description
+|-|-|-|-|-
+| `angle` | `Number` | `undefined` | Yes | The controlled angle.
+| `setAngle` | `Function` | `undefined` | Yes | The set angle method to be trigger after an angle was changes.
+| `size` | `Number` | `48` | No | Determines the size of the angle picker
+| `snap` | `Number` | `5` | No | Determines the angle change snapping, Can be removed with setting as 0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-linear-gradient-picker",
-  "version": "2.0.6",
+  "version": "3.0.0",
   "description": "React linear gradient picker",
   "main": "dist/index.js",
   "scripts": {
@@ -32,9 +32,10 @@
     "@babel/preset-react": "^7.17.0",
     "@storybook/addon-essentials": "^6.4.0",
     "@storybook/addon-links": "^6.4.0",
-    "@storybook/manager-webpack5": "^6.4.0",
     "@storybook/builder-webpack5": "^6.4.0",
     "@storybook/cli": "^6.4.0",
+    "@storybook/manager-webpack5": "^6.4.0",
+    "@storybook/preset-scss": "^1.0.3",
     "@storybook/react": "^6.4.0",
     "@storybook/storybook-deployer": "^2.8.1",
     "babel-loader": "^8.2.5",
@@ -45,20 +46,17 @@
     "eslint-plugin-react": "^7.30.0",
     "eslint-plugin-react-hooks": "^4.5.0",
     "mini-css-extract-plugin": "^2.6.0",
-    "sass": "^1.52.1",
     "prop-types": "^15.7.2",
     "rc-color-picker": "^1.1.5",
     "react": "^16.9.0",
     "react-color": "^2.12.0",
     "react-dom": "^16.9.0",
-    "sass-loader": "^8.0.0",
+    "sass": "^1.52.1",
+    "sass-loader": "^8.0.2",
     "style-loader": "^1.0.0",
     "svg-url-loader": "^3.0.2",
     "terser-webpack-plugin": "^5.3.1",
     "webpack": "^5.72.1",
     "webpack-cli": "^4.9.2"
-  },
-  "dependencies": {
-    "linear-gradient-parser": "^1.1.8"
   }
 }

src/components/AnglePicker/index.css

@@ -7,9 +7,14 @@ import {
 	snapAngle,
 	pointDegrees
 } from '../../lib';
-import './index.css';
-
-const AnglePicker = ({ angle, setAngle, size = 48, snap = 5 }) => {
+import './index.scss';
+
+const AnglePicker = ({
+	angle,
+	setAngle,
+	size = 24,
+	snap = 5
+}) => {
 	const pickerRef = useRef();
 	const sizeStyle = { height: size, width: size };
 
@@ -21,7 +26,6 @@ const AnglePicker = ({ angle, setAngle, size = 48, snap = 5 }) => {
 		const angle = useSnap ? snapAngle(clamped, snap) : clamped;
 
 		setAngle(angle);
-		return angle;
 	};
 
 	const [drag] = useDragging({
@@ -36,11 +40,18 @@ const AnglePicker = ({ angle, setAngle, size = 48, snap = 5 }) => {
 	});
 
 	return (
-		<div className="ap" ref={pickerRef} onMouseDown={drag} onTouchStart={drag} style={sizeStyle}>
-			<span className="apc" style={{ transform: `rotate(${angle}deg)`, height: size }}>
-				<i className="aph"/>
-			</span>
-		</div>
+		<>
+			<div className="ap" ref={pickerRef} onMouseDown={drag} onTouchStart={drag} style={sizeStyle}>
+				<span className="apc" style={{ transform: `rotate(${angle}deg)`, height: size }}>
+					<i className="aph"/>
+				</span>
+			</div>
+			<div className="ai">
+				<span onClick={() => setAngle(angle - 1)}>&#8722;</span>
+				<input value={`${angle}°`} disabled/>
+				<span onClick={() => setAngle(angle + 1)}>&#43;</span>
+			</div>
+		</>
 	);
 };
 

src/components/AnglePicker/index.js

@@ -0,0 +1,62 @@
+.controls-wrapper {
+    .ap {
+        flex: none;
+        box-sizing: border-box;
+        background-color: #fff;
+        border: 1px solid #4374AD;
+        border-radius: 50%;
+        display: inline-block;
+        position: relative;
+        cursor: pointer;
+        margin-top: -2px;
+
+        .apc {
+            width: 6px;
+            position: absolute;
+            left: 0;
+            right: 0;
+            top: 0;
+            bottom: 0;
+            margin: auto;
+        }
+
+        .aph {
+            width: 6px;
+            height: 6px;
+            background-color: #4374AD;
+            display: inline-block;
+            border-radius: 50%;
+            position: absolute;
+            left: 0;
+            right: 0;
+            top: 4px;
+            margin: auto;
+            cursor: pointer;
+        }
+    }
+
+    .ai {
+        background: #f2f2f2;
+        display: flex;
+        flex: 1;
+        margin: 0 12px;
+        justify-content: space-around;
+        align-items: center;
+
+        input {
+            border: none;
+            text-align: center;
+            width: 48px;
+            color: #0C0C09;
+            background: inherit;
+        }
+
+        span {
+            padding: 5px;
+            color: black;
+            cursor: pointer;
+            user-select: none;
+            font-size: 14px;
+        }
+    }
+}

src/components/AnglePicker/index.scss

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { COLORS } from './constants';
-import './index.css';
+import './index.scss';
 
 const ColorPicker = ({ onSelect }) => (
 	<div className="cp">

src/components/ColorPicker/index.css

@@ -0,0 +1,13 @@
+.cp {
+  div {
+    box-sizing: border-box;
+    cursor: pointer;
+    display: inline-block;
+    height: 16px;
+    width: 16px;
+
+    &:hover {
+      border: 1px solid #fff;
+    }
+  }
+}