feat: Port v2 features from vue color picker

Author: rkunev

.babelrc

@@ -1,18 +1,15 @@
 {
     "presets": [
         [
-            "babel-preset-env",
+            "@babel/preset-env",
             {
-                "modules": false
+                "loose": true,
+                "modules": false,
             }
         ],
-        "babel-preset-react"
+        "@babel/preset-react"
     ],
     "plugins": [
-        "transform-class-properties",
-        "external-helpers"
-    ],
-    "ignore": [
-        "node_modules/**"
+        "@babel/plugin-proposal-class-properties"
     ]
 }

.browserslistrc

@@ -0,0 +1,5 @@
+> 0.75%
+last 2 major versions
+not ie <= 11
+not dead
+not op_mini all

package.json

@@ -4,7 +4,6 @@
   "description": "Radial Color Picker - React",
   "main": "dist/react-color-picker.cjs.js",
   "module": "dist/react-color-picker.esm.js",
-  "browser": "dist/react-color-picker.umd.min.js",
   "unpkg": "dist/react-color-picker.umd.min.js",
   "files": [
     "dist"
@@ -14,36 +13,28 @@
     "start": "rollup -c -w"
   },
   "dependencies": {
-    "@radial-color-picker/color-wheel": "1.0.0",
-    "@radial-color-picker/rotator": "1.0.1"
+    "@radial-color-picker/color-wheel": "2.0.0",
+    "@radial-color-picker/rotator": "2.0.1"
   },
   "devDependencies": {
-    "autoprefixer": "9.1.0",
-    "babel-cli": "6.26.0",
-    "babel-core": "6.26.3",
-    "babel-plugin-external-helpers": "6.22.0",
-    "babel-plugin-transform-class-properties": "6.24.1",
-    "babel-preset-env": "1.7.0",
-    "babel-preset-react": "6.24.1",
-    "node-sass": "4.9.2",
-    "postcss": "7.0.2",
-    "react": "^16.3.2",
-    "react-dom": "^16.3.2",
-    "rollup": "0.63.5",
-    "rollup-plugin-babel": "3.0.7",
-    "rollup-plugin-butternut": "0.1.0",
-    "rollup-plugin-commonjs": "9.1.4",
-    "rollup-plugin-node-resolve": "3.3.0",
-    "rollup-plugin-postcss": "1.6.2"
+    "@babel/core": "7.4.5",
+    "@babel/plugin-proposal-class-properties": "7.4.4",
+    "@babel/preset-env": "7.4.5",
+    "@babel/preset-react": "7.0.0",
+    "autoprefixer": "9.6.0",
+    "postcss": "7.0.17",
+    "react": "16.8.6",
+    "react-dom": "16.8.6",
+    "rollup": "1.15.6",
+    "rollup-plugin-babel": "4.3.2",
+    "rollup-plugin-commonjs": "10.0.0",
+    "rollup-plugin-node-resolve": "5.0.3",
+    "rollup-plugin-postcss": "2.0.3",
+    "rollup-plugin-terser": "5.0.0"
   },
   "peerDependencies": {
-    "react": "^16.3.2"
+    "react": "^16.7.0"
   },
-  "browserslist": [
-    ">0.75%",
-    "not ie 11",
-    "not op_mini all"
-  ],
   "homepage": "https://github.com/radial-color-picker/react-color-picker#readme",
   "repository": "git@github.com:radial-color-picker/react-color-picker.git",
   "author": "Rosen Kanev <rkunev@gmail.com>",

rollup.config.js

@@ -1,42 +1,70 @@
 import autoprefixer from 'autoprefixer';
 import babel from 'rollup-plugin-babel';
-import butternut from 'rollup-plugin-butternut';
-import commonjs from 'rollup-plugin-commonjs';
+import { terser } from 'rollup-plugin-terser';
 import postcss from 'rollup-plugin-postcss';
 import resolve from 'rollup-plugin-node-resolve';
 
-import pkg from './package.json';
+const file = 'dist/react-color-picker';
 
 export default [
     {
         input: 'src/index.js',
         output: [
-            { file: pkg.main, format: 'cjs' },
-            { file: pkg.module, format: 'es' }
+            { file: `${file}.cjs.js`, format: 'cjs' },
+            { file: `${file}.esm.js`, format: 'esm' }
         ],
         external: ['react'],
         plugins: [
-            postcss({ extract: false }),
-            babel({ exclude: ['node_modules/**'] }),
             resolve(),
-            commonjs(),
+            postcss({
+                extract: false,
+                inject: false,
+            }),
+            babel(),
         ]
     },
     {
         input: 'src/index.js',
         output: {
-            file: pkg.browser,
+            file: `${file}.umd.js`,
             format: 'umd',
             name: 'ReactColorPicker',
-            globals: { react: 'React' },
+            globals: { react: 'React' }
         },
         external: ['react'],
         plugins: [
-            postcss({ extract: true, plugins: [autoprefixer], minimize: true }),
-            babel({ exclude: ['node_modules/**'] }),
             resolve(),
-            commonjs(),
-            butternut(),
+            postcss({
+                extract: `${file}.css`,
+                inject: false,
+                minimize: false,
+                sourceMap: false,
+                plugins: [autoprefixer],
+            }),
+            babel(),
         ]
     },
+    {
+        input: 'src/index.js',
+        output: {
+            file: `${file}.umd.min.js`,
+            format: 'umd',
+            name: 'ReactColorPicker',
+            globals: { react: 'React' },
+            sourcemap: true,
+        },
+        external: ['react'],
+        plugins: [
+            resolve(),
+            postcss({
+                extract: `${file}.min.css`,
+                inject: false,
+                minimize: true,
+                sourceMap: true,
+                plugins: [autoprefixer],
+            }),
+            babel(),
+            terser(),
+        ],
+    },
 ];

src/index.js

@@ -1,22 +1,22 @@
 import React from 'react';
 import fillColorWheel from '@radial-color-picker/color-wheel';
 import Rotator from '@radial-color-picker/rotator';
-import './style.scss';
+import './style.css';
 
 const noop = () => {};
 
 export default class ColorPicker extends React.Component {
     paletteRef = React.createRef();
     rotatorRef = React.createRef();
+    elRef = React.createRef();
 
     rotator = null;
 
     state = {
-        isKnobIn: true,
-        isPaletteIn: true,
+        isKnobIn: !this.props.initiallyCollapsed,
+        isPaletteIn: !this.props.initiallyCollapsed,
         isPressed: false,
         isRippling: false,
-        isDisabled: false,
         isDragging: false,
     };
 
@@ -27,16 +27,32 @@ export default class ColorPicker extends React.Component {
         alpha: 1,
         step: 2,
         mouseScroll: false,
+        variant: 'collapsible', // collapsible | persistent
+        disabled: false,
+        initiallyCollapsed: false,
+        onInput: noop,
         onChange: noop,
-        onSelect: noop,
     };
 
     componentDidMount() {
         if (this.props.mouseScroll) {
             this.rotatorRef.current.addEventListener('wheel', this.onScroll);
         }
 
-        fillColorWheel(this.paletteRef.current, this.paletteRef.current.offsetWidth || 280);
+        if (this.props.initiallyCollapsed && this.props.variant === 'persistent') {
+            console.warn(`Incorrect config: using variant="persistent" and initiallyCollapsed={true} at the same time is not supported.`);
+        }
+
+        const isConicGradientSupported = getComputedStyle(this.paletteRef.current)
+            .backgroundImage
+            .includes('conic');
+
+        if (!isConicGradientSupported) {
+            fillColorWheel(
+                this.paletteRef.current.firstElementChild,
+                this.elRef.current.offsetWidth || 280
+            );
+        }
 
         this.rotator = new Rotator(this.rotatorRef.current, {
             angle: this.props.hue,
@@ -66,7 +82,8 @@ export default class ColorPicker extends React.Component {
     }
 
     onScroll = ev => {
-        if (this.state.isDisabled) return;
+        if (this.state.isPressed || !this.state.isKnobIn)
+            return;
 
         ev.preventDefault();
 
@@ -86,7 +103,8 @@ export default class ColorPicker extends React.Component {
     };
 
     onKeyDown = ev => {
-        if (this.state.isDisabled) return;
+        if (this.props.disabled || this.state.isPressed || !this.state.isKnobIn)
+            return;
 
         const isIncrementing = ev.key === 'ArrowUp' || ev.key === 'ArrowRight';
         const isDecrementing = ev.key === 'ArrowDown' || ev.key === 'ArrowLeft';
@@ -108,103 +126,92 @@ export default class ColorPicker extends React.Component {
     };
 
     updateColor = hue => {
-        const { saturation, luminosity, alpha } = this.props;
-
-        this.props.onChange({ hue, saturation, luminosity, alpha });
+        this.props.onInput(hue);
     };
 
     rotateToMouse = ev => {
-        if (this.isDisabled || ev.target !== this.rotatorRef.current) return;
+        if (this.state.isPressed || !this.state.isKnobIn || ev.target !== this.rotatorRef.current)
+            return;
 
         this.rotator.setAngleFromEvent(ev);
     };
 
     selectColor = () => {
         this.setState({ isPressed: true });
 
-        if (!this.state.isDisabled) {
-            const { hue, saturation, luminosity, alpha } = this.props;
-
-            this.props.onSelect({ hue, saturation, luminosity, alpha });
-
+        if (this.state.isPaletteIn && this.state.isKnobIn) {
+            this.props.onChange(this.props.hue);
             this.setState({ isRippling: true });
         } else {
             this.setState({ isPaletteIn: true });
         }
     };
 
     togglePicker = () => {
+        if (this.props.variant !== 'persistent') {
+            if (this.state.isKnobIn) {
+                this.setState({ isKnobIn: false });
+            } else {
+                this.setState({
+                    isKnobIn: true,
+                    isPaletteIn: true,
+                });
+            }
+        }
+
         this.setState({
-            isKnobIn: this.state.isDisabled,
+            isRippling: false,
             isPressed: false,
         });
     };
 
     hidePalette = () => {
-        if (!this.state.isDisabled) {
+        if (!this.state.isKnobIn) {
             this.setState({ isPaletteIn: false });
-        } else {
-            this.setState({ isDisabled: false });
-        }
-    };
-
-    stopRipple = () => {
-        this.setState({ isRippling: false });
-    };
-
-    toggleKnob = ev => {
-        // 'transitionend' fires for every transitioned property
-        if (ev.propertyName === 'transform') {
-            if (this.state.isDisabled) {
-                this.setState({ isKnobIn: true });
-            } else {
-                this.setState({ isDisabled: true });
-            }
         }
     };
 
     render() {
-        const { isRippling, isPressed, isPaletteIn, isDragging, isKnobIn, isDisabled } = this.state;
-
-        const { hue, saturation, luminosity, alpha } = this.props;
+        const { disabled, hue, saturation, luminosity, alpha } = this.props;
+        const { isDragging, isPressed, isPaletteIn, isKnobIn, isRippling } = this.state;
 
-        const paletteClassName = `palette ${isPaletteIn ? 'is-in' : 'is-out'}`;
-        const colorSelClassName = `selector ${isPressed ? 'is-pressed' : ''}`;
-        const colorShadowClassName = `ripple ${isRippling ? 'is-rippling' : ''}`;
-        const rotatorClassName = `rotator ${isDisabled ? 'disabled' : ''} ${
-            isDragging ? 'dragging' : ''
-        }`;
-        const knobClassName = `knob ${isKnobIn ? 'is-in' : 'is-out'}`;
         const color = `hsla(${hue}, ${saturation}%, ${luminosity}%, ${alpha})`;
 
         return (
             <div
-                className="color-picker"
-                tabIndex="0"
+                ref={this.elRef}
+                className={`rcp ${isDragging ? 'dragging' : ''} ${disabled ? 'disabled' : ''}`.trim()}
+                tabIndex={disabled ? -1 : 0}
                 onKeyUp={this.onKeyUp}
                 onKeyDown={this.onKeyDown}
             >
-                <div className={paletteClassName} onTransitionEnd={this.toggleKnob}>
-                    <canvas ref={this.paletteRef} />
+                <div
+                    ref={this.paletteRef}
+                    className={`rcp__palette ${isPaletteIn ? 'in' : 'out'}`}
+                >
+                    <canvas />
                 </div>
 
                 <div
                     ref={this.rotatorRef}
-                    className={rotatorClassName}
+                    className="rcp__rotator"
+                    style={{ pointerEvents: disabled || isPressed || !isKnobIn ? 'none' : null }}
                     onDoubleClick={this.rotateToMouse}
                 >
-                    <div onTransitionEnd={this.hidePalette} className={knobClassName} />
+                    <div
+                        className={`rcp__knob ${isKnobIn ? 'in' : 'out'}`}
+                        onTransitionEnd={this.hidePalette}
+                    />
                 </div>
 
                 <div
-                    className={colorShadowClassName}
+                    className={`rcp__ripple ${isRippling ? 'rippling' : ''}`.trim()}
                     style={{ borderColor: color }}
-                    onAnimationEnd={this.stopRipple}
                 />
 
                 <button
                     type="button"
-                    className={colorSelClassName}
+                    className={`rcp__well ${isPressed ? 'pressed' : ''}`.trim()}
                     style={{ backgroundColor: color }}
                     onClick={this.selectColor}
                     onAnimationEnd={this.togglePicker}

src/style.css

@@ -0,0 +1,186 @@
+.rcp, .rcp div, .rcp button {
+    -webkit-touch-callout: none;
+    -webkit-tap-highlight-color: transparent;
+    user-select: none;
+    box-sizing: border-box;
+}
+
+.rcp {
+    display: block;
+    overflow: hidden;
+    width: 280px;
+    height: 280px;
+    position: relative;
+    transform: scale(1.001);
+    transition: transform 0.15s cubic-bezier(0.68, 0, 0.47, 2);
+}
+
+.rcp:focus {
+    outline: 0;
+}
+
+.rcp:hover .rcp__knob {
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.19), 0 0 10px rgba(0, 0, 0, 0.24);
+}
+
+.rcp.dragging {
+    transform: scale(1.04);
+}
+
+.rcp.disabled {
+    cursor: not-allowed;
+    transform: scale(0.96);
+}
+
+.rcp.dragging .rcp__rotator {
+    z-index: 1;
+}
+
+.rcp__palette {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+    background-size: 100% 100%;
+    background-image: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
+    border-radius: 50%;
+    overflow: hidden;
+    will-change: transform, opacity;
+    transition: transform .5s cubic-bezier(0.35, 0, 0.25, 1),
+                opacity .5s cubic-bezier(0.35, 0, 0.25, 1);
+}
+
+.rcp__palette::before {
+    box-sizing: border-box;
+    content: '';
+    display: block;
+    position: absolute;
+    width: 76%;
+    height: 76%;
+    top: 12%;
+    left: 12%;
+    background-color: #fff;
+    border-radius: 50%;
+}
+
+.rcp__palette.in {
+    transform: scale(1);
+    opacity: 1;
+}
+
+.rcp__palette.out {
+    transform: scale(0);
+    opacity: 0;
+}
+
+.disabled .rcp__palette {
+    background-image: radial-gradient(#808080, #fff) !important;
+}
+
+.rcp__rotator {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+}
+
+.rcp__knob {
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.12), 0 0 5px rgba(0, 0, 0, 0.16);
+    border-radius: 50%;
+    position: absolute;
+    width: 7%;
+    height: 7%;
+    top: 2.5%;
+    left: 46.5%;
+    background-color: #fff;
+    transition: transform .4s cubic-bezier(0.35, 0, 0.25, 1);
+    outline: 0;
+    border-style: none;
+}
+
+.rcp__knob.in {
+    transform: scale(1);
+}
+
+.rcp__knob.out {
+    transform: scale(0);
+}
+
+.disabled .rcp__knob {
+    box-shadow: none !important;
+    pointer-events: none;
+}
+
+.rcp__well {
+    position: absolute;
+    width: 25%;
+    height: 25%;
+    top: 37.5%;
+    left: 37.5%;
+    padding: 0;
+    margin: 0;
+    border-radius: 50%;
+    background-color: #ff0000;
+    outline: 0;
+    cursor: pointer;
+    overflow: visible;
+    border: 6px solid #fff;
+    box-shadow: 0 0 0 1px #b2b2b2;
+}
+
+.rcp__well::-moz-focus-inner {
+    border: 0;
+}
+
+.rcp__well:hover {
+    box-shadow: 0 0 1px 1px #333;
+}
+
+.rcp__well:focus {
+    box-shadow: 0 0 1px 2px #b2b2b2;
+}
+
+.rcp__well.pressed {
+    animation: rcp-beat .4s cubic-bezier(0.35, 0, 0.25, 1) forwards;
+}
+
+.disabled .rcp__well {
+    background-color: #bfbfbf !important;
+    pointer-events: none;
+}
+
+.rcp__ripple {
+    width: 20%;
+    height: 20%;
+    border-radius: 50%;
+    border: #ff0000 solid 8px;
+    opacity: 0;
+    position: absolute;
+    top: 40%;
+    left: 40%;
+    z-index: -1;
+}
+
+.rcp__ripple.rippling {
+    z-index: 0;
+    animation: rcp-ripple .5s cubic-bezier(0.35, 0, 0.25, 1) forwards;
+}
+
+@keyframes rcp-ripple {
+    0% { transform: scale(1); opacity: .3; }
+    50% { opacity: .1; }
+    100% {
+        opacity: 0;
+        border-width: 0;
+        transform: scale(3.8);
+    }
+}
+
+@keyframes rcp-beat {
+    0% { transform: scale(1); }
+    25% { transform: scale(0.8); }
+    50% { transform: scale(1); }
+    100% { transform: scale(1); }
+}