@wix/design-system/dist/esm/ColorPicker/ColorPickerHsb.js

@wix/design-system

import React from 'react';
import color from 'color';
import clamp from 'lodash/clamp';
import { classes } from './ColorPickerHsb.st.css.js';
import { createColorPickerKeyHandler, getHsbColorFromKey, } from './ColorPickerKeyboardUtils';
class ColorPickerHsb extends React.PureComponent {
    constructor() {
        super(...arguments);
        this.onMarkerDragStart = e => {
            e.preventDefault();
            window.addEventListener('mousemove', this.setNewColorByMouseEvent);
            window.addEventListener('touchmove', this.setNewColorByMouseEvent);
            window.addEventListener('mouseup', this.onMarkerDragEnd);
            window.addEventListener('touchend', this.onMarkerDragEnd);
            window.addEventListener('touchcancel', this.onMarkerDragEnd);
            this.gradientRect = this.gradient.getBoundingClientRect();
            this.setNewColorByMouseEvent(e);
        };
        this.onKeyDown = createColorPickerKeyHandler({
            onChange: this.props.onChange,
            getCurrentColor: () => this.props.current,
            getNewColor: getHsbColorFromKey,
            largeStep: 10,
        });
        this.onMarkerDragEnd = () => {
            window.removeEventListener('touchmove', this.setNewColorByMouseEvent);
            window.removeEventListener('mousemove', this.setNewColorByMouseEvent);
            window.removeEventListener('touchcancel', this.onMarkerDragEnd);
            window.removeEventListener('touchend', this.onMarkerDragEnd);
            window.removeEventListener('mouseup', this.onMarkerDragEnd);
        };
        this.getSVByMouseEvent = e => {
            let eventX = 0;
            let eventY = 0;
            if (e.clientX) {
                eventX = e.clientX;
                eventY = e.clientY;
            }
            else {
                eventX = e.touches[0].clientX;
                eventY = e.touches[0].clientY;
            }
            const x = eventX - this.gradientRect.left;
            const y = eventY - this.gradientRect.top;
            const s = clamp((100 * x) / this.gradientRect.width, 0, 100);
            const v = clamp(100 - (100 * y) / this.gradientRect.height, 0, 100);
            return { s, v };
        };
        this.setNewColorByMouseEvent = e => {
            const { onChange, current } = this.props;
            const { s, v } = this.getSVByMouseEvent(e);
            onChange(color({ h: current.hue(), s, v }));
        };
    }
    componentWillUnmount() {
        this.onMarkerDragEnd();
    }
    /**
     * Sets focus on the HSB selector
     */
    focus() {
        this.gradient && this.gradient.focus();
    }
    render() {
        const { dataHook, current } = this.props;
        const hue = current.saturationv(100).lightness(50);
        const style = {
            left: `${current.saturationv()}%`,
            top: `${100 - current.value()}%`,
        };
        const saturation = Math.round(current.saturationv());
        const value = Math.round(current.value());
        return (React.createElement("div", { className: classes.root, "data-hook": dataHook, ref: e => {
                this.gradient = e;
            }, onMouseDown: this.onMarkerDragStart, onTouchStart: this.onMarkerDragStart, onKeyDown: this.onKeyDown, tabIndex: 0, role: "application", "aria-label": "Saturation and brightness selector. Use arrow keys to adjust.", "aria-valuetext": `Saturation ${saturation}%, Brightness ${value}%`, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": saturation },
            React.createElement("div", { className: classes.hue, style: { background: hue.hex() } }),
            React.createElement("div", { className: classes.saturation }),
            React.createElement("div", { className: classes.brightness }),
            React.createElement("div", { className: classes.handle, style: style, "aria-hidden": "true" })));
    }
}
export default ColorPickerHsb;
//# sourceMappingURL=ColorPickerHsb.js.map