@ozen-ui/kit/__inner__/cjs/components/IconButton/IconButton.js

React component library

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.IconButton = exports.cnIconButton = exports.iconButtonVariant = exports.iconButtonColorVariant = void 0;
var tslib_1 = require("tslib");
require("./IconButton.css");
var react_1 = tslib_1.__importStar(require("react"));
var useDeprecated_1 = require("../../hooks/useDeprecated");
var useThemeProps_1 = require("../../hooks/useThemeProps");
var classname_1 = require("../../utils/classname");
var getIconSizeToFormElement_1 = require("../../utils/getIconSizeToFormElement");
var polymorphicComponentWithRef_1 = require("../../utils/polymorphicComponentWithRef");
var renderContent_1 = require("../../utils/renderContent");
var Loader_1 = require("../Loader");
var constants_1 = require("./constants");
exports.iconButtonColorVariant = ['primary', 'secondary'];
exports.iconButtonVariant = [
    'contained',
    'outlined',
    'ghost',
    'function',
    'floating',
];
exports.cnIconButton = (0, classname_1.cn)('IconButton');
var loaderSizeMapper = {
    '2xs': 's',
    xs: 's',
    s: 's',
    m: 'm',
    l: 'l',
};
/**
 * @deprecated Компонент устарел. Для замены используйте компонент IconButtonNext
 */
exports.IconButton = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
    var props = (0, useThemeProps_1.useThemeProps)({
        props: inProps,
        name: 'IconButton',
    });
    (0, useDeprecated_1.useDeprecatedComponent)('IconButton');
    var _a = props.size, size = _a === void 0 ? constants_1.ICON_BUTTON_DEFAULT_SIZE : _a, _b = props.variant, variant = _b === void 0 ? constants_1.ICON_BUTTON_DEFAULT_VARIANT : _b, _c = props.color, color = _c === void 0 ? constants_1.ICON_BUTTON_DEFAULT_COLOR : _c, _d = props.as, Tag = _d === void 0 ? constants_1.ICON_BUTTON_DEFAULT_TAG : _d, iconColor = props.iconColor, compressed = props.compressed, loading = props.loading, disabled = props.disabled, className = props.className, icon = props.icon, onClick = props.onClick, rounded = props.rounded, other = tslib_1.__rest(props, ["size", "variant", "color", "as", "iconColor", "compressed", "loading", "disabled", "className", "icon", "onClick", "rounded"]);
    var isInteractionPrevented = disabled || loading;
    var handleClick = function (event) {
        if (onClick && !disabled && !loading) {
            onClick(event);
        }
    };
    var renderIcon = function (content) {
        return (0, renderContent_1.renderContent)({
            content: content,
            props: {
                size: (0, getIconSizeToFormElement_1.getIconSizeToFormElement)(size),
                color: iconColor,
            },
        });
    };
    var resolvedChildren = (0, react_1.useMemo)(function () {
        if (loading) {
            return (react_1.default.createElement(Loader_1.Loader, { className: (0, exports.cnIconButton)('Loader'), color: "var(--color-content-disabled)", size: loaderSizeMapper[size] }));
        }
        if (icon) {
            return renderIcon(icon);
        }
        return null;
    }, [loading, size, iconColor, icon, renderIcon]);
    return (react_1.default.createElement(Tag, tslib_1.__assign({ className: (0, exports.cnIconButton)({
            variant: variant,
            size: size,
            color: color,
            disabled: disabled,
            loading: loading,
            compressed: compressed,
            rounded: rounded,
        }, [className]), disabled: isInteractionPrevented, onClick: handleClick }, (isInteractionPrevented && { tabIndex: -1 }), other, { ref: ref }), resolvedChildren));
});
exports.IconButton.displayName = 'IconButton';