phx-react
Version:
PHX REACT
72 lines • 7.22 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';
export 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, downloadLinkRef = _a.downloadLinkRef, downloadText = _a.downloadText, primarySubmit = _a.primarySubmit, dangerSubmit = _a.dangerSubmit, hiddenSubmit = _a.hiddenSubmit, hrefLink = _a.hrefLink, closeButton = _a.closeButton, isHeaderDownload = _a.isHeaderDownload, headerContent = _a.headerContent, onHide = _a.onHide, onSubmit = _a.onSubmit, onPrimaryClick = _a.onPrimaryClick, onDangerClick = _a.onDangerClick, onHeaderAction = _a.onHeaderAction, _e = _a.type, type = _e === void 0 ? 'default' : _e, customWidth = _a.customWidth, _f = _a.inCard, inCard = _f === void 0 ? true : _f, _g = _a.disableCloseButton, disableCloseButton = _g === void 0 ? false : _g, leftActionText = _a.leftActionText, onLeftActionText = _a.onLeftActionText;
var _h = useState(false), open = _h[0], setOpen = _h[1];
var headerText = headerContent ? headerContent : '';
var 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' && 'sm:max-w-7xl');
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.createElement(PHXCard, { primaryHeader: true, title: title, headerAction: { content: closeButton ? 'close' : headerText, onClick: handleClickCloseAction }, secondaryFooterActions: [{ content: secondaryActionText, onClick: onClose }], type: 'modal', downloadLinkRef: downloadLinkRef, downloadText: downloadText, fullSize: type === 'no-padding', hrefLink: hrefLink, primaryFooterAction: !hiddenSubmit
? {
content: primaryActionText,
loading: primaryLoading,
onClick: onPrimaryClick,
submit: primarySubmit
}
: {}, dangerFooterAction: {
content: dangerActionText,
loading: dangerLoading,
onClick: onDangerClick,
submit: dangerSubmit
}, isHeaderDownload: isHeaderDownload },
React.createElement("div", { className: type !== 'no-padding' ? '-mt-1' : '' }, children))); };
return (React.createElement(Transition.Root, { show: open, as: Fragment },
React.createElement(Dialog, { as: 'div', id: 'modal', className: 'relative z-10', onClose: onClose },
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 bg-gray-500 bg-opacity-75 transition-opacity' })),
React.createElement("div", { className: "fixed inset-0 z-10 overflow-y-auto ".concat(className) },
React.createElement("div", { className: 'flex min-h-full items-center justify-center 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: "flex-1 ".concat(customWidth ? customWidth : sizeModal) },
React.createElement(Dialog.Panel, { className: 'relative transform rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full' }, inCard ? (React.createElement(React.Fragment, null, primarySubmit || dangerSubmit ? (React.createElement("form", { onSubmit: onSubmit },
React.createElement(Card, null))) : (React.createElement(Card, null)))) : (React.createElement("div", { className: '' },
React.createElement("div", { className: 'flex items-center justify-between rounded-t-lg border-b border-gray-200 bg-[#F3F3F3] p-4 text-sm font-semibold leading-5 text-gray-900' }, title),
React.createElement("div", { className: 'p-3' }, children),
React.createElement("div", { className: 'flex items-center justify-between gap-x-3 border-t border-gray-200' },
React.createElement("div", { className: 'flex items-center gap-x-3 rounded-t-lg p-4 pl-5' },
downloadLinkRef && hrefLink && downloadText && (React.createElement("div", null,
React.createElement("a", { ref: downloadLinkRef, className: 'text-sm text-[#005BD3] underline hover:text-[#004299]', href: hrefLink }, downloadText))),
leftActionText && (React.createElement("div", null,
React.createElement("p", { className: 'text-sm text-[#005BD3] underline hover:cursor-pointer hover:text-[#004299]', onClick: onLeftActionText }, leftActionText)))),
React.createElement("div", { className: 'flex justify-end gap-x-3 rounded-t-lg p-4' },
React.createElement(PHXButton, { disabled: disableCloseButton, onClick: onHide, secondary: true, size: 'micro' }, secondaryActionText),
!hiddenSubmit && (React.createElement(PHXButton, { loading: primaryLoading, onClick: function () { return onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(); }, primary: true, size: 'micro' }, primaryActionText))))))))))))));
};
//# sourceMappingURL=Modal.js.map