phx-react
Version:
PHX REACT
95 lines • 10.8 kB
JavaScript
"use strict";
exports.__esModule = true;
exports.PHXModal = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var react_2 = require("@headlessui/react");
var Card_1 = require("../Card");
var types_1 = require("../types");
var Button_1 = require("../Button");
var solid_1 = require("@heroicons/react/24/solid");
var PHXModal = function (_a) {
var show = _a.show, title = _a.title, className = _a.className, _b = _a.primaryActionText, primaryActionText = _b === void 0 ? 'Xác nhận' : _b, _c = _a.secondaryActionText, secondaryActionText = _c === void 0 ? 'Đóng' : _c, dangerActionText = _a.dangerActionText, children = _a.children, primaryLoading = _a.primaryLoading, _d = _a.size, size = _d === void 0 ? 'small' : _d, dangerLoading = _a.dangerLoading, footerBulkAction = _a.footerBulkAction, downloadLinkRef = _a.downloadLinkRef, downloadText = _a.downloadText, primarySubmit = _a.primarySubmit, dangerSubmit = _a.dangerSubmit, hiddenSubmit = _a.hiddenSubmit, hrefLink = _a.hrefLink, _e = _a.isCancel, isCancel = _e === void 0 ? false : _e, closeButton = _a.closeButton, isHeaderDownload = _a.isHeaderDownload, _f = _a.noOverlay, noOverlay = _f === void 0 ? false : _f, headerContent = _a.headerContent, onHide = _a.onHide, onSubmit = _a.onSubmit, onPrimaryClick = _a.onPrimaryClick, onDangerClick = _a.onDangerClick, onCancel = _a.onCancel, onHeaderAction = _a.onHeaderAction, _g = _a.type, type = _g === void 0 ? 'default' : _g, customWidth = _a.customWidth, _h = _a.inCard, inCard = _h === void 0 ? true : _h, _j = _a.disableCloseButton, disableCloseButton = _j === void 0 ? false : _j, leftActionText = _a.leftActionText, _k = _a.disableLeftAction, disableLeftAction = _k === void 0 ? false : _k, _l = _a.loadingLeftAction, loadingLeftAction = _l === void 0 ? false : _l, onLeftActionText = _a.onLeftActionText, _m = _a.disableSubmit, disableSubmit = _m === void 0 ? false : _m, _o = _a.dowloadIcon, dowloadIcon = _o === void 0 ? false : _o, _p = _a.hiddenCloseButton, hiddenCloseButton = _p === void 0 ? false : _p, disableOutsideClick = _a.disableOutsideClick, customFooter = _a.customFooter, customHeight = _a.customHeight;
var _q = (0, react_1.useState)(false), open = _q[0], setOpen = _q[1];
var headerText = headerContent ? headerContent : '';
var sizeModal = (0, types_1.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');
(0, react_1.useEffect)(function () {
// @ts-ignore
setOpen(show);
}, [show]);
var handleClickCloseAction = function () {
if (disableCloseButton)
return; // Không cho phép đóng modal khi loading submit
if (onHeaderAction) {
onHeaderAction();
}
else {
setOpen(false);
if (onHide) {
onHide();
}
}
};
var onClose = function () {
if (disableCloseButton)
return; // Không cho phép đóng modal khi loading submit
setOpen(false);
if (onHide) {
onHide();
}
};
var Card = function () { return (react_1["default"].createElement(Card_1.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_1["default"].createElement("div", { className: type !== 'no-padding' ? '-mt-1' : '' }, children))); };
return (react_1["default"].createElement(react_2.Transition.Root, { as: react_1.Fragment, show: open },
react_1["default"].createElement(react_2.Dialog, { as: 'div', className: 'relative z-50', onClose: function () {
// 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_1["default"].createElement(react_2.Transition.Child, { as: react_1.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_1["default"].createElement("div", { className: 'fixed inset-0 z-40 transition-opacity bg-gray-500 bg-opacity-75' }))),
react_1["default"].createElement("div", { className: "fixed inset-0 z-50 overflow-y-auto ".concat(className || '') },
react_1["default"].createElement("div", { className: 'flex items-center justify-center min-h-full p-4 text-center sm:items-center sm:p-0' },
react_1["default"].createElement(react_2.Transition.Child, { as: react_1.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_1["default"].createElement("div", { className: "flex-1 ".concat(customWidth ? customWidth : sizeModal) },
react_1["default"].createElement(react_2.Dialog.Panel, { className: 'relative text-left transition-all transform bg-white rounded-lg shadow-xl sm:my-24 sm:w-full' }, inCard ? (primarySubmit || dangerSubmit ? (react_1["default"].createElement("form", { onSubmit: onSubmit },
react_1["default"].createElement(Card, null))) : (react_1["default"].createElement(Card, null))) : (react_1["default"].createElement("div", null,
react_1["default"].createElement("div", { className: 'flex items-center justify-between rounded-t-lg border-b border-gray-200 bg-[#F3F3F3] p-4 text-sm font-semibold text-gray-900' },
react_1["default"].createElement("div", { className: 'flex items-center gap-1' },
isCancel && (react_1["default"].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_1["default"].createElement(solid_1.ArrowLeftIcon, { className: 'w-4 h-4' }))),
title)),
react_1["default"].createElement("div", { style: { maxHeight: customHeight || '100%' }, className: type === 'default' ? 'p-3 text-xs text-gray-500' : '' }, children),
react_1["default"].createElement("div", { className: 'flex items-center justify-between border-t border-gray-200 gap-x-3' }, customFooter ? (customFooter) : (react_1["default"].createElement(react_1["default"].Fragment, null,
react_1["default"].createElement("div", { className: 'flex items-center p-4 pl-5 rounded-t-lg gap-x-3' },
downloadLinkRef && hrefLink && downloadText && (react_1["default"].createElement("div", { className: 'flex gap-x-0.5' },
dowloadIcon && (react_1["default"].createElement("img", { alt: '', className: 'w-5 h-5', src: 'https://sisv2-cdn.phx-smartschool.com/store/product/5-26-2025/dd47876a-398f-4f00-852b-ce6882925825-download-icon.png' })),
react_1["default"].createElement("a", { ref: downloadLinkRef, className: 'text-sm text-[#005BD3] hover:text-[#004299] hover:underline', href: hrefLink }, downloadText))),
leftActionText && (react_1["default"].createElement("div", { className: 'flex gap-2' },
react_1["default"].createElement(Button_1.PHXButton, { className: 'text-sm !text-[#005BD3]', disabled: disableLeftAction, onClick: onLeftActionText, plain: true }, leftActionText),
loadingLeftAction && react_1["default"].createElement(Button_1.PHXButton, { disabled: true, loading: true, plain: true, size: 'micro' }))),
footerBulkAction && footerBulkAction.content && (react_1["default"].createElement(Button_1.PHXButton, { danger: true, disabled: footerBulkAction.disabled, loading: footerBulkAction.loading, onClick: footerBulkAction.onClick, size: 'micro', submit: !!footerBulkAction.submit }, footerBulkAction.content))),
react_1["default"].createElement("div", { className: 'flex justify-end p-4 rounded-t-lg gap-x-3' },
react_1["default"].createElement(Button_1.PHXButton, { disabled: disableCloseButton, onClick: onHide, secondary: true, size: 'micro' }, secondaryActionText),
dangerSubmit && (react_1["default"].createElement(Button_1.PHXButton, { danger: true, disabled: disableSubmit, loading: dangerLoading, onClick: onDangerClick, size: 'micro' }, dangerActionText)),
!hiddenSubmit && (react_1["default"].createElement(Button_1.PHXButton, { disabled: disableSubmit, loading: primaryLoading, onClick: function () { return onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(); }, primary: true, size: 'micro' }, primaryActionText))))))))))))))));
};
exports.PHXModal = PHXModal;
//# sourceMappingURL=Modal.js.map