@vimeo/iris/utils/hooks/useIrisError.esm.js

Vimeo Design System

import { c as __assign } from '../../tslib.es6-7f0e734f.js';
import { useLayoutEffect } from 'react';
import { generateUID } from '../general/generateUID.esm.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-' + generateUID();
    var error = logError(errorMessage, Component);
    var irisError = errorUI(className, style, id);
    /* eslint-disable react-hooks/rules-of-hooks */
    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 = __assign(__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",
};

export { useIrisError };