@ozen-ui/kit/__inner__/esm/components/DialogNext/Dialog.js

React component library

import { __assign, __rest } from "tslib";
import './Dialog.css';
import './components/DialogModal/DialogModal.css';
import './components/DialogBottomSheet/DialogBottomSheet.css';
import './modules/DialogBody/DialogBody.css';
import './modules/DialogFooter/DialogFooter.css';
import './modules/DialogFooterButtonsGroup/DialogFooterButtonsGroup.css';
import './modules/DialogHeader/DialogHeader.css';
import './modules/DialogSubtitle/DialogSubtitle.css';
import './modules/DialogTitle/DialogTitle.css';
import React, { forwardRef } from 'react';
import { useThemeProps } from '../../hooks/useThemeProps';
import { cn } from '../../utils/classname';
import { renderContent } from '../../utils/renderContent';
import { BottomSheetBaseBackdrop } from '../BottomSheetBase';
import { DialogBottomSheet, DialogModal } from './components';
import { DIALOG_DEFAULT_DEVICE_TYPE, DIALOG_DEFAULT_HIDE_CLOSE_BUTTON, DIALOG_MOBILE_BOTTOM_SHEET_VIEW_VARIANTS, DIALOG_DEFAULT_SIZE, DIALOG_DEFAULT_VARIANT, } from './constants';
import { DialogContext } from './DialogContext';
import { DialogCloseButton } from './modules';
export var cnDialog = cn('DialogNext');
export var Dialog = forwardRef(function (inProps, ref) {
    var props = useThemeProps({
        props: inProps,
        name: 'DialogNext',
    });
    var children = props.children, _a = props.variant, variant = _a === void 0 ? DIALOG_DEFAULT_VARIANT : _a, _b = props.size, size = _b === void 0 ? DIALOG_DEFAULT_SIZE : _b, _c = props.deviceType, deviceType = _c === void 0 ? DIALOG_DEFAULT_DEVICE_TYPE : _c, _d = props.renderCloseButton, renderCloseButton = _d === void 0 ? React.createElement(DialogCloseButton, null) : _d, open = props.open, _e = props.onClose, onClose = _e === void 0 ? function () { } : _e, classNameProp = props.className, _f = props.hideCloseButton, hideCloseButton = _f === void 0 ? DIALOG_DEFAULT_HIDE_CLOSE_BUTTON : _f, modalProps = props.modalProps, bottomSheetProps = props.bottomSheetProps, backdropProps = props.backdropProps, other = __rest(props, ["children", "variant", "size", "deviceType", "renderCloseButton", "open", "onClose", "className", "hideCloseButton", "modalProps", "bottomSheetProps", "backdropProps"]);
    var viewType = deviceType === 'mobile' &&
        DIALOG_MOBILE_BOTTOM_SHEET_VIEW_VARIANTS.includes(variant)
        ? 'bottomSheet'
        : 'modal';
    var isBottomSheet = viewType === 'bottomSheet';
    var closeButton = renderContent({
        content: renderCloseButton,
        props: {},
    });
    var className = cnDialog({
        deviceType: deviceType,
        size: size,
        viewType: viewType,
    }, [classNameProp]);
    return (React.createElement(DialogContext.Provider, { value: {
            onClose: onClose,
            variant: variant,
            size: size,
            deviceType: deviceType,
            viewType: viewType,
            isBottomSheet: isBottomSheet,
        } }, isBottomSheet ? (React.createElement(DialogBottomSheet, __assign({ ref: ref, open: open, size: size, variant: variant, closeButton: closeButton, onClose: onClose, hideCloseButton: hideCloseButton, className: className, backdrop: React.createElement(BottomSheetBaseBackdrop, __assign({}, backdropProps)) }, bottomSheetProps, other), children)) : (React.createElement(DialogModal, __assign({ ref: ref, open: open, onClose: onClose, hideCloseButton: hideCloseButton, className: className, closeButton: closeButton, size: size, variant: variant, backdropProps: backdropProps }, modalProps, other), children))));
});
Dialog.displayName = 'Dialog';