@vimeo/iris/components/inputs/ColorSelect/ColorSelectSpectrum.js

Vimeo Design System

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var tslib_es6 = require('../../../tslib.es6-3ec409b7.js');
var React = require('react');
var polished = require('polished');
var components_inputs_ColorSelect_ColorSelect_style = require('./ColorSelect.style.js');
var utils_general_throttle = require('../../../utils/general/throttle.js');
var color_colorUtils = require('../../../color/colorUtils.js');
require('styled-components');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);

function ColorSelectSpectrum(_a) {
    var colorMeta = _a.colorMeta, coords = _a.coords, width = _a.width, height = _a.height, dispatch = _a.dispatch, throttleSpeed = _a.throttleSpeed, onChange = _a.onChange, dragging = _a.dragging, props = tslib_es6.__rest(_a, ["colorMeta", "coords", "width", "height", "dispatch", "throttleSpeed", "onChange", "dragging"]);
    var clamp = useClamp(width, height);
    var hue = colorMeta.HSL.hue;
    var setCoords = React.useRef(utils_general_throttle.throttle(function (_a, hue) {
        var _b = _a.nativeEvent, offsetX = _b.offsetX, offsetY = _b.offsetY;
        var payload = clamp([offsetX, offsetY]);
        dispatch({ type: 'SET_COORDS', payload: payload });
        setHSLfromCoords({ offsetX: offsetX, offsetY: offsetY }, hue);
    }, throttleSpeed)).current;
    function setHSLfromCoords(nativeEvent, hue) {
        var _a = coordsToSL(nativeEvent, width, height), saturation = _a.saturation, lightness = _a.lightness;
        var payload = safeHSL({ hue: hue, saturation: saturation, lightness: lightness });
        onChange && onChange(polished.hslToColorString(payload));
        dispatch({ type: 'SET_HSL', payload: payload });
    }
    var doMouseActive = function (dragging) {
        return function (_a) {
            var _b = _a.nativeEvent, offsetX = _b.offsetX, offsetY = _b.offsetY;
            var payload = clamp([offsetX, offsetY]);
            if (dragging)
                dispatch({ type: 'DRAG_START' });
            else
                dispatch({ type: 'DRAG_END' });
            dispatch({ type: 'SET_COORDS', payload: payload });
            setHSLfromCoords({ offsetX: offsetX, offsetY: offsetY }, hue);
        };
    };
    var onMouseDown = doMouseActive(true);
    var onMouseUp = doMouseActive(false);
    var onMouseLeave = function () { return dispatch({ type: 'DRAG_END' }); };
    var onMouseMove = function (event) { return dragging && persist(event, setLoupe); };
    var setLoupe = function (event) { return setCoords(event, hue); };
    return (React__default["default"].createElement(components_inputs_ColorSelect_ColorSelect_style.SpectrumWrapper, tslib_es6.__assign({ dragging: dragging, onMouseDown: onMouseDown, onMouseUp: onMouseUp, onMouseLeave: onMouseLeave }, props),
        React__default["default"].createElement(components_inputs_ColorSelect_ColorSelect_style.HueSpectrum, { hue: hue, onMouseMove: onMouseMove, width: width, height: height, style: {
                background: polished.hslToColorString({
                    hue: hue,
                    saturation: 1,
                    lightness: 0.5,
                }),
            } },
            React__default["default"].createElement(components_inputs_ColorSelect_ColorSelect_style.Cursor, { style: cursorPosition(coords) }))));
}
var cursorPosition = function (coords) { return ({
    transform: "translate(".concat(coords[0], "px, ").concat(coords[1], "px)"),
}); };
function coordsToSL(nativeEvent, width, height) {
    var _a = color_colorUtils.HSVtoHSL({
        hue: 360,
        saturation: color_colorUtils.round(nativeEvent.offsetX / width),
        value: color_colorUtils.round((nativeEvent.offsetY / height - 1) * -1),
    }), saturation = _a.saturation, lightness = _a.lightness;
    return { saturation: saturation, lightness: lightness };
}
function persist(e, fn) {
    e.persist();
    fn(e);
}
function useClamp(width, height) {
    return function (_a) {
        var _b = tslib_es6.__read(_a, 2), X = _b[0], Y = _b[1];
        if (X < 0)
            X = 0;
        if (Y < 0)
            Y = 0;
        if (X > width)
            X = width;
        if (Y > height)
            Y = height;
        return [X, Y];
    };
}
function safeHSL(_a) {
    var hue = _a.hue, saturation = _a.saturation, lightness = _a.lightness;
    if (hue < 0)
        hue = 0;
    if (hue > 360)
        hue = 360;
    if (saturation < 0)
        saturation = 0;
    if (saturation > 1)
        saturation = 1;
    if (lightness < 0)
        lightness = 0;
    if (lightness > 1)
        lightness = 1;
    return { hue: hue, saturation: saturation, lightness: lightness };
}

exports.ColorSelectSpectrum = ColorSelectSpectrum;