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

@wix/design-system

import React from 'react';
import color from 'color';
import clamp from 'lodash/clamp';
import { classes, st } from './ColorPickerHue.st.css.js';
import { createColorPickerKeyHandler, getHueColorFromKey, } from './ColorPickerKeyboardUtils';
export default class ColorPickerHue 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('touchcancel', this.onMarkerDragEnd);
            window.addEventListener('touchend', this.onMarkerDragEnd);
            this.sliderRect = this.slider.getBoundingClientRect();
            this.setNewColorByMouseEvent(e);
        };
        this.onKeyDown = createColorPickerKeyHandler({
            onChange: this.props.onChange,
            getCurrentColor: () => this.props.current,
            getNewColor: getHueColorFromKey,
            largeStep: 30,
        });
        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.getHueByMouseEvent = e => {
            let eventX = 0;
            if (e.clientX) {
                eventX = e.clientX;
            }
            else if (e.touches && e.touches[0]) {
                eventX = e.touches[0].clientX;
            }
            const x = eventX - this.sliderRect.left;
            return clamp((360 * x) / this.sliderRect.width, 0, 359);
        };
        this.setNewColorByMouseEvent = e => {
            const { onChange, current } = this.props;
            const h = this.getHueByMouseEvent(e);
            onChange(color({ h, s: current.saturationv(), v: current.value() }));
        };
    }
    componentWillUnmount() {
        this.onMarkerDragEnd();
    }
    render() {
        const { dataHook, current } = this.props;
        // HUE is an integer value from 0 to 360.
        const percentage = (current.hue() / 360) * 100;
        const hue = Math.round(current.hue());
        return (React.createElement("div", { className: st(classes.root, {
                noBorderRadius: this.props.showHistory,
            }), "data-hook": dataHook, ref: e => {
                this.slider = e;
            }, onMouseDown: this.onMarkerDragStart, onTouchStart: this.onMarkerDragStart, onKeyDown: this.onKeyDown, tabIndex: 0, role: "slider", "aria-label": "Hue", "aria-valuemin": 0, "aria-valuemax": 359, "aria-valuenow": hue, "aria-valuetext": `Hue: ${hue} degrees` },
            React.createElement("div", { className: classes.handle, style: { left: `${percentage}%` }, "aria-hidden": "true" })));
    }
}
//# sourceMappingURL=ColorPickerHue.js.map