@i-novus/ui-core/dist/data-display/Modal.js

Базовые UI компоненты

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect } from 'react';
import RCModal from 'react-modal';
import classNames from 'classnames';
import { useConfigProvider } from '../core';
import { CloseIcon } from '../core/icons';
import { Button } from '../general/Button';
export const ModalBody = ({ prefix, onClose = () => { }, getContainer = () => document.body, size = 'sm', scrollable = true, backdrop = true, open, onAfterOpen, onAfterClose, className, style, children, }) => {
    const { getPrefix, root } = useConfigProvider();
    const prefixCls = getPrefix(prefix);
    useEffect(() => {
        if (backdrop && open) {
            document.body.classList.add('no-scroll');
        }
        return () => {
            document.body.classList.remove('no-scroll');
        };
    }, [backdrop, open]);
    return (_jsx(RCModal, { ariaHideApp: false, isOpen: open, style: { content: style }, overlayClassName: classNames(root, `${prefixCls}-modal-overlay`, backdrop && `${prefixCls}-modal-overlay_visible`, scrollable || `${prefixCls}-modal-overlay_scrollable`), onAfterOpen: onAfterOpen, onAfterClose: onAfterClose, onRequestClose: onClose, parentSelector: getContainer, className: classNames(`${prefixCls}-modal`, `${prefixCls}-modal_${size}`, scrollable && `${prefixCls}-modal_scrollable`, className), shouldCloseOnOverlayClick: backdrop && backdrop !== 'static', children: children }));
};
export const CloseButton = ({ prefix, onClick, closeIcon, }) => {
    const { getPrefix } = useConfigProvider();
    const prefixCls = getPrefix(prefix);
    return (_jsx("button", { type: "button", className: `${prefixCls}-modal-close`, onClick: onClick, children: closeIcon || _jsx(CloseIcon, {}) }));
};
export const ModalHeader = ({ prefix, showCloseButton = true, onClose, className, children, closeIcon, }) => {
    const { getPrefix } = useConfigProvider();
    const prefixCls = getPrefix(prefix);
    return (_jsxs("div", { className: classNames(`${prefixCls}-modal-header`, className), children: [children, showCloseButton && onClose && _jsx(CloseButton, { onClick: onClose, closeIcon: closeIcon })] }));
};
export const ModalContent = ({ prefix, className, children }) => {
    const { getPrefix } = useConfigProvider();
    const prefixCls = getPrefix(prefix);
    return (_jsx("div", { className: classNames(`${prefixCls}-modal-content`, className), children: children }));
};
export const ModalFooter = ({ prefix, okText = 'Сохранить', cancelText = 'Отменить', okVariant = 'link', cancelVariant = 'link', onOk, onCancel, loading = false, disabled = false, className, children, }) => {
    const { getPrefix } = useConfigProvider();
    const prefixCls = getPrefix(prefix);
    return (_jsxs("div", { className: classNames(`${prefixCls}-modal-footer`, className), children: [children, (onCancel || onOk) && (_jsxs("div", { className: `${prefixCls}-modal-actions`, children: [onCancel && (_jsx(Button, { variant: cancelVariant, onClick: onCancel, children: cancelText })), onOk && (_jsx(Button, { variant: okVariant, disabled: disabled, loading: loading, onClick: onOk, children: okText }))] }))] }));
};
export const Modal = ModalBody;
Modal.Header = ModalHeader;
Modal.Content = ModalContent;
Modal.Footer = ModalFooter;
Modal.displayName = 'Modal';
ModalContent.displayName = 'ModalContent';
ModalFooter.displayName = 'ModalFooter';