@vimeo/iris/components/inputs/ColorSelect/ColorSelect.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 components_inputs_ColorSelect_ColorSelect_state = require('./ColorSelect.state.js');
var components_inputs_ColorSelect_Slider = require('./Slider.js');
var components_inputs_ColorSelect_Inputs = require('./Inputs.js');
var components_inputs_ColorSelect_ColorSelectInput = require('./ColorSelectInput.js');
var components_inputs_ColorSelect_ColorSelectSpectrum = require('./ColorSelectSpectrum.js');
var components_inputs_ColorSelect_Presets = require('./Presets.js');
var components_PopOver_PopOver = require('../../PopOver/PopOver.js');
var utils_HOCs_withIris = require('../../../utils/HOCs/withIris.js');
var utils_hooks_useOutsideClick = require('../../../utils/hooks/useOutsideClick.js');
var color_colorUtils = require('../../../color/colorUtils.js');
var utils_general_throttle = require('../../../utils/general/throttle.js');
require('styled-components');
require('./Slider.style.js');
require('../../../color/colors.js');
require('../Input/Input.js');
require('../Input/Text.js');
require('../Input/Input.style.js');
require('../Shared.js');
require('../Input/useSuggestions.js');
require('../../../typography/Header/Header.js');
require('../../../typography/Header/Header.style.js');
require('../../../typography/typography.js');
require('../../../typography/Text/Text.js');
require('../../../typography/Text/Text.style.js');
require('../../../tokens/core.js');
require('../../../tokens/color/index.js');
require('../../../tokens/color/background/background.js');
require('../../../tokens/util/readToken.js');
require('../../../tokens/util/clamp.js');
require('../../../tokens/color/format/format.js');
require('../../../tokens/color/format/primary.js');
require('../../../tokens/color/format/secondary.js');
require('../../../tokens/color/format/tertiary.js');
require('../../../tokens/color/rainbow/rainbow.js');
require('../../../tokens/color/rainbow/conic/index.js');
require('../../../tokens/color/rainbow/conic/sm.js');
require('../../../tokens/color/rainbow/conic/xl.js');
require('../../../tokens/color/rainbow/linear/index.js');
require('../../../tokens/color/rainbow/linear/sm.js');
require('../../../tokens/color/rainbow/linear/xl.js');
require('../../../tokens/color/livestream/livestream.js');
require('../../../tokens/color/status/status.js');
require('../../../tokens/color/status/caution.js');
require('../../../tokens/color/status/negative.js');
require('../../../tokens/color/status/positive.js');
require('../../../tokens/color/stroke/stroke.js');
require('../../../tokens/color/surface/surface.js');
require('../../../tokens/color/text/text.js');
require('../../../tokens/util/round.js');
require('../../../tokens/color/upsell/upsell.js');
require('../../../tokens/color/upsell/sm.js');
require('../../../tokens/color/upsell/xl.js');
require('../../../tokens/color/upsell/new.js');
require('../../../tokens/edge/edge.js');
require('../../../tokens/space/space.js');
require('../../../tokens/typography/index.js');
require('../../../tokens/typography/size/size.js');
require('../../../typography/Text/EditableText.js');
require('../../../utils/hooks/useLayoutStyles.js');
require('../../../utils/DOM/geometry.js');
require('../../../utils/css.js');
require('../Wrapper/Wrapper.js');
require('../../../typography/Paragraph/Paragraph.js');
require('../../../typography/Paragraph/Paragraph.style.js');
require('../Input/Mark.js');
require('../../../utils/general/generateUID.js');
require('../../Button/Button.js');
require('../../Button/Button.style.js');
require('../../Button/Button.config.js');
require('../../Button/FeaturedIcon.js');
require('../../../themes/index.js');
require('../../LoaderCircular/LoaderCircular.js');
require('../../LoaderCircular/LoaderCircular.style.js');
require('../../../utils/hooks/useDeprecate.js');
require('../../../utils/general/mergeReactRefs.js');
require('../InnerButton.js');
require('../../Tip/Tip.js');
require('../../Tip/Tip.settings.js');
require('../../Tip/Tip.style.js');
require('../../../utils/hooks/usePortal_DEPRECATED/usePortal_DEPRECATED.js');
require('react-dom');
require('../../../utils/hooks/usePortal_DEPRECATED/usePortal_DEPRECATED.style.js');
require('../../../utils/hooks/usePortal_DEPRECATED/useMountAnimations.js');
require('../../../utils/hooks/useIsomorphicEffect.js');
require('../../../utils/DOM/getComputedStyles.js');
require('../../../utils/DOM/animate.js');
require('../../../utils/events/onEvent.js');
require('../../../utils/hooks/usePortal_DEPRECATED/coordinates.js');
require('../../../utils/hooks/usePortal_DEPRECATED/Anchor.js');
require('../../../utils/DOM/SSR.js');
require('../../../utils/DOM/createPortalOutlet.js');
require('../../../utils/DOM/createElement.js');
require('../../../utils/hooks/useIrisError.js');
require('../../../icons/ui/History.js');
require('../../PopOver/PopOver.style.js');
require('../../PopOver/PopOver.error.js');

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

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

var ColorSelect = utils_HOCs_withIris.withIris(ColorSelectComponent);
ColorSelect.Presets = components_inputs_ColorSelect_Presets.Presets;
function ColorSelectComponent(_a) {
    var children = _a.children, _b = _a.height, height = _b === void 0 ? 360 : _b, _c = _a.initial, initial = _c === void 0 ? { color: '#F00', colorSpace: 'HEX' } : _c, 
    // DEPRECATED
    initialColor = _a.initialColor, 
    //
    label = _a.label, onChange = _a.onChange, onClose = _a.onClose, onOpen = _a.onOpen, _d = _a.reset, reset = _d === void 0 ? { color: initial.color, label: 'reset' } : _d, 
    // DEPRECATED
    resetColor = _a.resetColor, 
    //
    resetLabel = _a.resetLabel, size = _a.size, _e = _a.throttleSpeed, throttleSpeed = _e === void 0 ? 24 : _e, value = _a.value, _f = _a.width, width = _f === void 0 ? 360 : _f, _g = _a.attach, attach = _g === void 0 ? 'bottom' : _g, _h = _a.showHueSlider, showHueSlider = _h === void 0 ? true : _h, props = tslib_es6.__rest(_a, ["children", "height", "initial", "initialColor", "label", "onChange", "onClose", "onOpen", "reset", "resetColor", "resetLabel", "size", "throttleSpeed", "value", "width", "attach", "showHueSlider"]);
    var childrenRef = React.useRef();
    var popOverRef = React.useRef();
    utils_hooks_useOutsideClick.useOutsideClick([childrenRef, popOverRef], function () {
        if (state.open) {
            onClose === null || onClose === void 0 ? void 0 : onClose();
            dispatch({ type: 'CLOSE', payload: true });
        }
    });
    // deprecation handling
    if (initialColor)
        initial.color = initialColor || initial.color;
    if (resetColor)
        reset.color = resetColor || reset.color;
    if (resetLabel)
        reset.label = resetLabel;
    var defaultColor = polished.parseToHsl(initial.color);
    var initialColors = color_colorUtils.colorSpaces(defaultColor);
    var initialState = {
        open: false,
        dragging: false,
        editing: false,
        error: false,
        coords: [width, 0],
        colorMeta: tslib_es6.__assign({ HSL: defaultColor }, initialColors),
        colorSpace: 'HEX',
    };
    var _j = tslib_es6.__read(React.useReducer(components_inputs_ColorSelect_ColorSelect_state.reducer, initialState), 2), state = _j[0], dispatch = _j[1];
    var open = state.open, dragging = state.dragging, colorMeta = state.colorMeta;
    var HSL = colorMeta.HSL;
    React.useEffect(function () {
        dispatch({ type: 'SET_HEX', payload: value });
    }, [value]);
    var toggle = function () {
        if (open)
            onClose === null || onClose === void 0 ? void 0 : onClose();
        if (!open)
            onOpen === null || onOpen === void 0 ? void 0 : onOpen();
        dispatch({ type: 'TOGGLE' });
    };
    var setHue = utils_general_throttle.throttle(function (e) {
        var hue = parseInt(e.target.value, 10) / 100;
        var newHSL = tslib_es6.__assign(tslib_es6.__assign({}, HSL), { hue: hue });
        if (HSL.hue !== newHSL.hue) {
            var color = polished.hslToColorString(newHSL);
            onChange && onChange(color);
            dispatch({ type: 'SET_HSL', payload: newHSL });
        }
    }, throttleSpeed / 4);
    var onMouseDown = function () {
        return !dragging && dispatch({ type: 'DRAG_START' });
    };
    var onMouseUp = function () { return dragging && dispatch({ type: 'DRAG_END' }); };
    return (React__default["default"].createElement(components_PopOver_PopOver.PopOver, { attach: attach, active: open, content: React__default["default"].createElement(components_inputs_ColorSelect_ColorSelect_style.Wrapper, { width: width, ref: popOverRef, "aria-label": "color picker" },
            React__default["default"].createElement(components_inputs_ColorSelect_ColorSelectSpectrum.ColorSelectSpectrum, tslib_es6.__assign({ dispatch: dispatch, dragging: dragging, height: height, onChange: onChange, throttleSpeed: throttleSpeed, width: width }, state, props)),
            showHueSlider && (React__default["default"].createElement(components_inputs_ColorSelect_Slider.HueSlider, tslib_es6.__assign({ dragging: dragging, onChange: setHue, onMouseDown: onMouseDown, onMouseUp: onMouseUp, value: HSL.hue * 100, width: width }, state))),
            React__default["default"].createElement(components_inputs_ColorSelect_Inputs.ColorInputs, tslib_es6.__assign({ dispatch: dispatch, onChange: onChange }, state))) }, children ? (React__default["default"].createElement("div", { onClick: toggle, ref: childrenRef }, children)) : (React__default["default"].createElement("div", { ref: childrenRef },
        React__default["default"].createElement(components_inputs_ColorSelect_ColorSelectInput.ColorSelectInput, { colorMeta: colorMeta, dispatch: dispatch, label: label, onChange: onChange, reset: reset, size: size, toggle: toggle })))));
}

exports.ColorSelect = ColorSelect;