@ozen-ui/kit/__inner__/esm/components/Button/Button.js

React component library

import { __assign, __rest } from "tslib";
import './Button.css';
import React, { useRef } from 'react';
import { CSSTransition } from 'react-transition-group';
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 { BUTTON_DEFAULT_SIZE, BUTTON_DEFAULT_VARIANT, BUTTON_DEFAULT_COLOR, BUTTON_DEFAULT_TAG, } from './constants';
export var buttonVariant = [
    'contained',
    'outlined',
    'ghost',
    'function',
];
export var buttonColorVariant = [
    'primary',
    'secondary',
    'warning',
    'error',
];
export var cnButton = cn('Button');
/**
 * @deprecated Компонент устарел. Для замены используйте компонент ButtonNext
 */
export var Button = polymorphicComponentWithRef(function (inProps, ref) {
    var props = useThemeProps({
        props: inProps,
        name: 'Button',
    });
    var loaderRef = useRef(null);
    useDeprecatedComponent('Button');
    var _a = props.as, Tag = _a === void 0 ? BUTTON_DEFAULT_TAG : _a, _b = props.variant, variant = _b === void 0 ? BUTTON_DEFAULT_VARIANT : _b, _c = props.color, color = _c === void 0 ? BUTTON_DEFAULT_COLOR : _c, _d = props.size, size = _d === void 0 ? BUTTON_DEFAULT_SIZE : _d, iconLeft = props.iconLeft, iconRight = props.iconRight, loading = props.loading, children = props.children, disabled = props.disabled, className = props.className, fullWidth = props.fullWidth, labelProps = props.labelProps, onClick = props.onClick, other = __rest(props, ["as", "variant", "color", "size", "iconLeft", "iconRight", "loading", "children", "disabled", "className", "fullWidth", "labelProps", "onClick"]);
    var iconSize = getIconSizeToFormElement(size);
    var handleClick = function (event) {
        if (onClick && !disabled && !loading) {
            onClick(event);
        }
    };
    var renderIcon = function (content) {
        return renderContent({
            content: content,
            props: {
                size: getIconSizeToFormElement(size),
            },
        });
    };
    var isInteractionPrevented = disabled || loading;
    var childContent = (React.createElement(React.Fragment, null,
        React.createElement("span", { className: cnButton('Content') },
            renderIcon(iconLeft),
            React.createElement("span", __assign({}, labelProps, { className: cnButton('Label', [labelProps === null || labelProps === void 0 ? void 0 : labelProps.className]), ref: labelProps === null || labelProps === void 0 ? void 0 : labelProps.ref }), children),
            renderIcon(iconRight)),
        React.createElement(CSSTransition, { nodeRef: loaderRef, in: loading, timeout: 120, classNames: cnButton('Loader', { animation: true }), unmountOnExit: true },
            React.createElement(Loader, { size: iconSize, className: cnButton('Loader'), ref: loaderRef }))));
    return (React.createElement(Tag, __assign({ disabled: isInteractionPrevented, onClick: handleClick, type: "button", className: cnButton({
            variant: variant,
            size: size,
            disabled: disabled,
            loading: loading,
            color: color,
            fullWidth: fullWidth,
        }, [className]) }, (isInteractionPrevented && { tabIndex: -1 }), other, { ref: ref }), childContent));
});
Button.displayName = 'Button';