@vimeo/iris/components/inputs/ColorSelect2/ColorSelect2.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_ColorSelect2_ColorSelect2_state = require('./ColorSelect2.state.js');
var components_inputs_ColorSelect2_ColorSelect2Input = require('./ColorSelect2Input.js');
var components_PopOver_PopOver = require('../../PopOver/PopOver.js');
var components_inputs_ColorSelect2_ColorSelect2PopoverContent = require('./ColorSelect2PopoverContent.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');
require('./ColorSelect2.style.js');
require('styled-components');
require('../InnerButton.js');
require('../../Button/Button.js');
require('../../Button/Button.style.js');
require('../../Button/Button.config.js');
require('../../Button/FeaturedIcon.js');
require('../../../themes/index.js');
require('../../../color/colors.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('../../LoaderCircular/LoaderCircular.js');
require('../../LoaderCircular/LoaderCircular.style.js');
require('../../../utils/hooks/useDeprecate.js');
require('../../../utils/general/mergeReactRefs.js');
require('../../../utils/css.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('../../../utils/general/generateUID.js');
require('../../../typography/Paragraph/Paragraph.js');
require('../../../typography/Paragraph/Paragraph.style.js');
require('../../../typography/Text/Text.js');
require('../../../typography/Text/Text.style.js');
require('../../../typography/typography.js');
require('../../../typography/Text/EditableText.js');
require('../../../utils/hooks/useLayoutStyles.js');
require('../../../utils/DOM/geometry.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('../Wrapper/Wrapper.js');
require('../Input/Mark.js');
require('../../../icons/ui/History.js');
require('../../PopOver/PopOver.style.js');
require('../../PopOver/PopOver.error.js');
require('./Presets.js');
require('../../../icons/ui/Pencil.js');
require('./ColorSelect2Picker.js');
require('../../../utils/general/throttle.js');
require('./Inputs.js');

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

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

/**
 * An input that enables users to choose a color from a predefined range of colors from a color picker panel.
 * This components precedes the eventual deprecation of ColorPicker.tsx to ease migration and ensure backwards compatibility.
 */
var ColorSelect2 = utils_HOCs_withIris.withIris(ColorSelectComponent);
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, 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, 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, disabled = _a.disabled, presets = _a.presets;
    var childrenRef = React.useRef();
    var popOverRef = React.useRef();
    utils_hooks_useOutsideClick.useOutsideClick([childrenRef, popOverRef], function () {
        if (state.open) {
            dispatch({ type: 'CLOSE', payload: true });
            onClose === null || onClose === void 0 ? void 0 : onClose();
        }
    }, { capture: true });
    var defaultColor = polished.parseToHsl(initial.color);
    var initialColors = color_colorUtils.colorSpaces(defaultColor);
    var initialState = {
        open: false,
        editing: false,
        error: false,
        colorMeta: tslib_es6.__assign({ HSL: defaultColor }, initialColors),
        colorSpace: 'HEX',
    };
    var _j = tslib_es6.__read(React.useReducer(components_inputs_ColorSelect2_ColorSelect2_state.reducer, initialState), 2), state = _j[0], dispatch = _j[1];
    var open = state.open, colorMeta = state.colorMeta;
    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' });
    };
    return (React__default["default"].createElement(components_PopOver_PopOver.PopOver, { attach: attach, active: open, content: React__default["default"].createElement(components_inputs_ColorSelect2_ColorSelect2PopoverContent.ColorSelect2PopoverContent, tslib_es6.__assign({}, {
            width: width,
            height: height,
            showHueSlider: showHueSlider,
            popOverRef: popOverRef,
            presets: presets,
            dispatch: dispatch,
            onChange: onChange,
            throttleSpeed: throttleSpeed,
            colorMeta: colorMeta,
            state: state,
        })) }, children ? (React__default["default"].createElement("div", { onClick: function () { return !disabled && toggle(); }, ref: childrenRef }, children)) : (React__default["default"].createElement("div", { ref: childrenRef },
        React__default["default"].createElement(components_inputs_ColorSelect2_ColorSelect2Input.ColorSelectInput, { colorMeta: colorMeta, dispatch: dispatch, label: label, onChange: onChange, reset: reset, size: size, toggle: toggle, disabled: disabled })))));
}

exports.ColorSelect2 = ColorSelect2;