phx-react
Version:
PHX REACT
98 lines • 9.5 kB
JavaScript
import React, { Fragment, useEffect, useState } from 'react';
import { Dialog, Transition } from '@headlessui/react';
import { PHXCard } from '../Card';
import { classNames } from '../types';
import { PHXButton } from '../Button';
import { ArrowLeftIcon } from '@heroicons/react/24/solid';
import { PHXIcons } from '../../assets/icons';
import Image from 'next/image';
var MODAL_THEME;
(function (MODAL_THEME) {
MODAL_THEME["WHITE"] = "WHITE";
MODAL_THEME["GRAY"] = "GRAY";
})(MODAL_THEME || (MODAL_THEME = {}));
export const PHXModal = ({ show, title, className, primaryActionText = 'Xác nhận', secondaryActionText = 'Đóng', dangerActionText, children, primaryLoading, size = 'small', dangerLoading, footerBulkAction, downloadLinkRef, downloadText, primarySubmit, dangerSubmit, hiddenSubmit, hrefLink, isCancel = false, closeButton, isHeaderDownload, noOverlay = false, headerContent, onHide, onSubmit, onPrimaryClick, onDangerClick, onCancel, onHeaderAction, type = 'default', customWidth, inCard = true, disableCloseButton = false, leftActionText, disableLeftAction = false, loadingLeftAction = false, onLeftActionText, disableSubmit = false, dowloadIcon = false, hiddenCloseButton = false, disableOutsideClick, customFooter, customHeight, headerClassName = '', theme = MODAL_THEME.WHITE, }) => {
const [open, setOpen] = useState(false);
const headerText = headerContent ? headerContent : '';
const sizeModal = classNames(size === 'small' && 'sm:max-w-lg', size === 'medium' && 'sm:max-w-xl', size === 'large' && 'sm:max-w-2xl', size === 'large-plus' && 'sm:max-w-2xl lg:max-w-4xl', size === 'extra-large' && 'w-[90vw] max-w-[95vw] sm:max-w-3xl md:max-w-4xl lg:max-w-5xl xl:max-w-7xl');
useEffect(() => {
// @ts-ignore
setOpen(show);
}, [show]);
const handleClickCloseAction = () => {
if (disableCloseButton)
return; // Không cho phép đóng modal khi loading submit
if (onHeaderAction) {
onHeaderAction();
}
else {
setOpen(false);
if (onHide) {
onHide();
}
}
};
const onClose = () => {
if (disableCloseButton)
return; // Không cho phép đóng modal khi loading submit
setOpen(false);
if (onHide) {
onHide();
}
};
const Card = () => (React.createElement(PHXCard, { footerBulkAction: footerBulkAction, dowloadIcon: dowloadIcon, primaryHeader: true, title: title, headerAction: { content: closeButton ? 'close' : headerText, onClick: handleClickCloseAction }, secondaryFooterActions: !hiddenCloseButton ? [{ content: secondaryActionText, onClick: onClose }] : undefined, type: 'modal', downloadLinkRef: downloadLinkRef, downloadText: downloadText, fullSize: type === 'no-padding', hrefLink: hrefLink, primaryFooterAction: !hiddenSubmit
? {
content: primaryActionText,
loading: primaryLoading,
onClick: onPrimaryClick,
submit: primarySubmit,
disabled: disableSubmit,
}
: {}, dangerFooterAction: {
content: dangerActionText,
loading: dangerLoading,
onClick: onDangerClick,
submit: dangerSubmit,
disabled: disableSubmit,
}, isHeaderDownload: isHeaderDownload },
React.createElement("div", { className: type !== 'no-padding' ? '-mt-1' : '' }, children)));
return (React.createElement(Transition.Root, { as: Fragment, show: open },
React.createElement(Dialog, { as: 'div', className: 'relative z-50', onClose: () => {
// Chỉ tắt modal này
if (disableOutsideClick)
return;
if (!disableCloseButton)
setOpen(false);
onHide === null || onHide === void 0 ? void 0 : onHide();
}, static: true },
!noOverlay && (React.createElement(Transition.Child, { as: Fragment, enter: 'transform ease-out duration-300 transition', enterFrom: 'translate-y-2 opacity-0 sm:translate-y-0 sm:translate-y-10', enterTo: 'translate-y-0 opacity-100 sm:translate-y-0', leave: 'transition ease-in duration-100', leaveFrom: 'translate-y-0 opacity-100 sm:translate-y-0', leaveTo: 'translate-y-2 opacity-0 sm:translate-y-0 sm:translate-y-10' },
React.createElement("div", { className: 'fixed inset-0 z-40 transition-opacity bg-gray-500 bg-opacity-75' }))),
React.createElement("div", { className: `fixed inset-0 z-50 overflow-y-auto ${className || ''}` },
React.createElement("div", { className: 'flex items-center justify-center min-h-full p-4 text-center sm:items-center sm:p-0' },
React.createElement(Transition.Child, { as: Fragment, enter: 'transform ease-out duration-300 transition', enterFrom: 'translate-y-2 opacity-0 sm:translate-y-0 sm:translate-y-10', enterTo: 'translate-y-0 opacity-100 sm:translate-y-0', leave: 'transition ease-in duration-100', leaveFrom: 'translate-y-0 opacity-100 sm:translate-y-0', leaveTo: 'translate-y-2 opacity-0 sm:translate-y-0 sm:translate-y-10' },
React.createElement("div", { className: classNames('min-w-0 flex-1', customWidth ? customWidth : sizeModal) },
React.createElement(Dialog.Panel, { className: classNames('shadow-xl relative transform rounded-lg text-left transition-all sm:my-24 sm:w-full', theme === MODAL_THEME.GRAY ? 'bg-[#F1F1F1]' : 'bg-white') }, inCard ? (primarySubmit || dangerSubmit ? (React.createElement("form", { onSubmit: onSubmit },
React.createElement(Card, null))) : (React.createElement(Card, null))) : (React.createElement("div", null,
React.createElement("div", { className: classNames('flex items-center justify-between rounded-t-lg border-b border-gray-200 p-4 text-sm font-semibold text-gray-900', headerClassName, theme === MODAL_THEME.GRAY ? 'bg-[#F1F1F1]' : 'bg-[#F3F3F3]') },
React.createElement("div", { className: 'flex items-center gap-1' },
isCancel && (React.createElement("button", { className: 'inline-flex items-center px-2 py-1 text-xs font-bold text-gray-700 bg-transparent rounded-lg hover:bg-gray-200', onClick: onCancel, type: 'button' },
React.createElement(ArrowLeftIcon, { className: 'w-4 h-4' }))),
title)),
React.createElement("div", { style: { maxHeight: customHeight || '100%' }, className: type === 'default' ? 'p-3 text-xs text-gray-500' : '' }, children),
React.createElement("div", { className: classNames('flex items-center justify-between gap-x-3 rounded-b-lg border-t border-gray-200 ', theme === MODAL_THEME.GRAY ? 'bg-[#F1F1F1]' : 'bg-white') }, customFooter ? (customFooter) : (React.createElement(React.Fragment, null,
React.createElement("div", { className: 'flex items-center p-4 pl-5 rounded-t-lg gap-x-3' },
downloadLinkRef && hrefLink && downloadText && (React.createElement("div", { className: 'flex items-center gap-x-0.5' },
dowloadIcon && (React.createElement(Image, { alt: '', height: 15,
// @ts-ignore
src: PHXIcons.DownloadIcon, width: 15 })),
React.createElement("a", { ref: downloadLinkRef, className: 'text-sm active:text-link-600 hover:text-link-600 text-link-500 hover:underline', href: hrefLink }, downloadText))),
leftActionText && (React.createElement("div", { className: 'flex gap-2' },
React.createElement(PHXButton, { className: 'text-sm !text-link-500 !px-0', disabled: disableLeftAction, onClick: onLeftActionText, plain: true }, leftActionText),
loadingLeftAction && React.createElement(PHXButton, { disabled: true, loading: true, plain: true, size: 'micro' }))),
footerBulkAction && footerBulkAction.content && (React.createElement(PHXButton, { danger: true, disabled: footerBulkAction.disabled, loading: footerBulkAction.loading, onClick: footerBulkAction.onClick, size: 'micro', submit: !!footerBulkAction.submit }, footerBulkAction.content))),
React.createElement("div", { className: 'flex justify-end p-4 rounded-t-lg gap-x-3' },
React.createElement(PHXButton, { disabled: disableCloseButton, onClick: onHide, secondary: true, size: 'micro' }, secondaryActionText),
dangerSubmit && (React.createElement(PHXButton, { danger: true, disabled: disableSubmit, loading: dangerLoading, onClick: onDangerClick, size: 'micro' }, dangerActionText)),
!hiddenSubmit && (React.createElement(PHXButton, { disabled: disableSubmit, loading: primaryLoading, onClick: () => onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(), primary: true, size: 'micro' }, primaryActionText))))))))))))))));
};
//# sourceMappingURL=Modal.js.map