@ozen-ui/kit
Version:
React component library
73 lines (72 loc) • 3.32 kB
JavaScript
import { __assign, __rest } from "tslib";
import './IconButton.css';
import React, { useMemo } from 'react';
import { useDeprecatedComponent } from '../../hooks/useDeprecated';
import { useThemeProps } from '../../hooks/useThemeProps';
import { cn } from '../../utils/classname';
import { getIconSizeToFormElement } from '../../utils/getIconSizeToFormElement';
import { polymorphicComponentWithRef } from '../../utils/polymorphicComponentWithRef';
import { renderContent } from '../../utils/renderContent';
import { Loader } from '../Loader';
import { ICON_BUTTON_DEFAULT_SIZE, ICON_BUTTON_DEFAULT_VARIANT, ICON_BUTTON_DEFAULT_COLOR, ICON_BUTTON_DEFAULT_TAG, } from './constants';
export var iconButtonColorVariant = ['primary', 'secondary'];
export var iconButtonVariant = [
'contained',
'outlined',
'ghost',
'function',
'floating',
];
export var cnIconButton = cn('IconButton');
var loaderSizeMapper = {
'2xs': 's',
xs: 's',
s: 's',
m: 'm',
l: 'l',
};
/**
* @deprecated Компонент устарел. Для замены используйте компонент IconButtonNext
*/
export var IconButton = polymorphicComponentWithRef(function (inProps, ref) {
var props = useThemeProps({
props: inProps,
name: 'IconButton',
});
useDeprecatedComponent('IconButton');
var _a = props.size, size = _a === void 0 ? ICON_BUTTON_DEFAULT_SIZE : _a, _b = props.variant, variant = _b === void 0 ? ICON_BUTTON_DEFAULT_VARIANT : _b, _c = props.color, color = _c === void 0 ? ICON_BUTTON_DEFAULT_COLOR : _c, _d = props.as, Tag = _d === void 0 ? 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 = __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 renderContent({
content: content,
props: {
size: getIconSizeToFormElement(size),
color: iconColor,
},
});
};
var resolvedChildren = useMemo(function () {
if (loading) {
return (React.createElement(Loader, { className: cnIconButton('Loader'), color: "var(--color-content-disabled)", size: loaderSizeMapper[size] }));
}
if (icon) {
return renderIcon(icon);
}
return null;
}, [loading, size, iconColor, icon, renderIcon]);
return (React.createElement(Tag, __assign({ className: 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));
});
IconButton.displayName = 'IconButton';