@kadconsulting/dry
Version:
KAD Reusable Component Library
16 lines • 2.16 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef } from 'react';
import classnames from 'classnames';
import Button from '../Button/Button';
// import * as Utils from "./Modal.utils.js";
import './Modal.scss';
const Modal = forwardRef(({ id, className, passProps, children, onClose, headerText, subHeaderText, isOpen, leftButtonHandler, leftButtonText, leftButtonType, rightButtonText, rightButtonType, rightButtonHandler, leftButtonDisabled = false, rightButtonDisabled = false, leftButtonLoading = false, rightButtonLoading = false, leftButtonIcon, rightButtonIcon, leftButtonNote, rightButtonNote, isLight = false, hasCloseButton = true, ...props }, ref) => {
if (!isOpen)
return null;
const modalClassNames = isLight
? 'dry-modal dry-modal--light'
: 'dry-modal';
return (_jsx("div", { className: isLight ? '' : 'dry-modal--overlay', children: _jsxs("dialog", { open: true, id: id, ref: ref, className: classnames(className, modalClassNames), ...passProps, children: [_jsxs("div", { className: 'dry-modal__header', children: [_jsx("div", {}), headerText && (_jsxs("div", { className: 'dry-modal__header-text-wrapper', children: [_jsx("h1", { className: 'dry-modal__title', children: headerText }), subHeaderText && (_jsx("span", { className: 'dry-modal__sub-text', children: subHeaderText }))] })), hasCloseButton && (_jsx("div", { className: 'dry-modal__close-button', children: _jsx(Button, { closeButton: true, onClick: onClose }) }))] }), _jsx("div", { className: 'dry-modal__content', children: children }), _jsxs("div", { className: 'dry-modal__button-wrapper', children: [leftButtonHandler && (_jsx(Button, { text: leftButtonText, onClick: leftButtonHandler, buttonType: leftButtonType, disabled: leftButtonDisabled, icon: leftButtonIcon, note: leftButtonNote, width: 'fit-content' })), rightButtonHandler && (_jsx(Button, { text: rightButtonText, onClick: rightButtonHandler, buttonType: rightButtonType, disabled: rightButtonDisabled, icon: rightButtonIcon, note: rightButtonNote, width: 'fit-content' }))] })] }) }));
});
export default Modal;
//# sourceMappingURL=Modal.js.map