@vimeo/iris/utils/hooks/useIrisError.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 utils_general_generateUID = require('../general/generateUID.js');

function useIrisError(_a, Component, errorMessage, valid) {
    var className = _a.className, style = _a.style;
    if (errorMessage === void 0) { errorMessage = null; }
    if (process.env.NODE_ENV !== 'development')
        return {};
    if (valid)
        return {};
    var id = 'IrisError-' + utils_general_generateUID.generateUID();
    var error = logError(errorMessage, Component);
    var irisError = errorUI(className, style, id);
    /* eslint-disable react-hooks/rules-of-hooks */
    React.useLayoutEffect(function () { return (error ? error(id) : undefined); });
    /* eslint-enable react-hooks/rules-of-hooks */
    return { irisError: irisError, valid: valid };
}
function logError(errorMessage, Component) {
    return function (id) {
        return document &&
            console.error("@vimeo/iris:", errorMessage, '\n\n', {
                component: Component,
                element: document.getElementsByClassName(id)[0],
            });
    };
}
function errorUI(className, style, id) {
    className = className ? className + ' ' + id : id;
    style = tslib_es6.__assign(tslib_es6.__assign({}, style), errorStyles);
    return { className: className, style: style };
}
var errorStyles = {
    border: "0.2rem solid red",
    borderRadius: "0.5rem",
    background: "transparent",
    color: "transparent",
    padding: "0 3rem",
    cursor: "not-allowed",
};

exports.useIrisError = useIrisError;