phx-react
Version:
PHX REACT
77 lines • 8.76 kB
JavaScript
"use strict";
exports.__esModule = true;
exports.PHXFormWrap = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var Button_1 = require("../Button");
var types_1 = require("../types");
var solid_1 = require("@heroicons/react/20/solid");
var Badge_1 = require("../Badge");
var Modal_1 = require("../Modal");
var outline_1 = require("@heroicons/react/24/outline");
var ModalImport_1 = tslib_1.__importDefault(require("./ModalImport"));
var PHXFormWrap = function (_a) {
var isExport = _a.isExport, exportText = _a.exportText, onExport = _a.onExport, badge = _a.badge, cancelText = _a.cancelText, children = _a.children, contentOfModal = _a.contentOfModal, className = _a.className, deleted = _a.deleted, secondaryLeftButton = _a.secondaryLeftButton, secondaryLeftButtonSubmit = _a.secondaryLeftButtonSubmit, secondaryLeftTextButton = _a.secondaryLeftTextButton, deletedLoading = _a.deletedLoading, _b = _a.footerAction, footerAction = _b === void 0 ? true : _b, _c = _a.headerAction, headerAction = _c === void 0 ? true : _c, headerActionText = _a.headerActionText, _d = _a.headerActionType, headerActionType = _d === void 0 ? 'custom' : _d, loading = _a.loading, method = _a.method, nameOfModal = _a.nameOfModal, onSecondary = _a.onSecondary, onCancel = _a.onCancel, onDelete = _a.onDelete, onSubmit = _a.onSubmit, onImport = _a.onImport, onChangeCapture = _a.onChangeCapture, onHeaderActionClick = _a.onHeaderActionClick, onSubmitSecondaryLeftButton = _a.onSubmitSecondaryLeftButton, onDeletedSecondaryLeftButton = _a.onDeletedSecondaryLeftButton, onlyDelete = _a.onlyDelete, _e = _a.size, size = _e === void 0 ? 'large' : _e, formType = _a.formType, submit = _a.submit, submitText = _a.submitText, title = _a.title, _f = _a.type, type = _f === void 0 ? 'default' : _f, _g = _a.backAction, backAction = _g === void 0 ? true : _g;
var sizeClassName = (0, types_1.classNames)(size === 'small' && 'mx-auto md:w-5/6 xl:w-1/2', size === 'medium' && 'mx-auto md:w-5/6 lg:w-3/4', size === 'large' && 'mx-auto md:w-md lg:w-11/12');
var _h = (0, react_1.useState)(false), isModalOpen = _h[0], setIsModalOpen = _h[1];
var _j = (0, react_1.useState)(false), openImport = _j[0], setOpenImport = _j[1];
var handleDelete = function () {
if (onDelete) {
onDelete();
}
else {
return;
}
};
var handleHeaderAction = function () {
if (headerActionType === 'import') {
setOpenImport(true);
}
else {
if (onHeaderActionClick) {
onHeaderActionClick();
}
}
};
(0, react_1.useEffect)(function () {
setIsModalOpen(deletedLoading);
}, [deletedLoading]);
return (react_1["default"].createElement("div", { className: className },
react_1["default"].createElement("form", { method: method, onSubmit: onSubmit },
react_1["default"].createElement("div", { className: sizeClassName },
headerAction && (react_1["default"].createElement("div", { className: 'mb-4 flex items-center justify-between' },
react_1["default"].createElement("div", { className: 'flex items-center truncate' },
backAction && (react_1["default"].createElement("button", { className: 'inline-flex items-center rounded-lg border-gray-300 bg-transparent px-2 py-1 text-xs font-medium text-gray-700 hover:bg-gray-200 active:bg-gray-300 active:pb-[0.2rem] active:pt-[0.3rem] active:shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset]', onClick: onCancel, type: 'button' },
react_1["default"].createElement(solid_1.ArrowLeftIcon, { className: 'h-5 w-5' }))),
react_1["default"].createElement("div", { className: (0, types_1.classNames)('min-w-0', type === 'default' ? 'flex-1' : 'flex', backAction ? 'ml-2' : '') },
react_1["default"].createElement("h2", { className: (0, types_1.classNames)('sm:text-md truncate text-lg font-medium leading-6 text-gray-900 sm:tracking-tight', type === 'default' ? '' : 'mr-2 flex-1') }, title),
type === 'title-with-badge' && (react_1["default"].createElement("div", { className: 'flex items-center' },
react_1["default"].createElement(Badge_1.PHXBadge, { text: badge.badgeText, type: badge.badgeType }))))),
(exportText || headerActionText) && (react_1["default"].createElement("div", { className: 'flex items-center' },
isExport && exportText && (react_1["default"].createElement("div", { className: (0, types_1.classNames)(headerActionText ? 'mr-2' : '') },
react_1["default"].createElement(Button_1.PHXButton, { onClick: onExport, secondary: true, size: 'small' }, exportText))),
headerActionText && (react_1["default"].createElement("div", null,
react_1["default"].createElement(Button_1.PHXButton, { onClick: handleHeaderAction, primary: true, size: 'small' }, headerActionText))))))),
children,
react_1["default"].createElement("div", { className: footerAction
? (0, types_1.classNames)(deleted || secondaryLeftButton ? 'justify-between' : 'justify-end gap-x-3', 'pt-6 mt-6 flex items-center')
: 'hidden' },
deleted && (react_1["default"].createElement(react_1["default"].Fragment, null,
react_1["default"].createElement(Button_1.PHXButton, { danger: true, size: 'small', onClick: function () { return setIsModalOpen(true); } }, "X\u00F3a b\u1EA3n ghi"),
react_1["default"].createElement(Modal_1.PHXModal, { dangerActionText: 'X\u00E1c nh\u1EADn x\u00F3a', dangerLoading: deletedLoading, onDangerClick: handleDelete, primaryActionText: '', onHide: function () { return setIsModalOpen(false); }, show: isModalOpen === true, title: "Xo\u00E1 ".concat(nameOfModal, "?") },
react_1["default"].createElement("div", { className: 'sm:flex sm:items-start' },
react_1["default"].createElement("div", { className: 'mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10' },
react_1["default"].createElement(outline_1.ExclamationTriangleIcon, { "aria-hidden": 'true', className: 'h-6 w-6 text-red-600' })),
react_1["default"].createElement("div", { className: 'mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left' },
react_1["default"].createElement("div", { className: 'mt-2' },
react_1["default"].createElement("p", { className: 'text-xs text-gray-500' }, contentOfModal
? contentOfModal
: "B\u1EA1n c\u00F3 ch\u1EAFc ch\u1EAFn mu\u1ED1n x\u00F3a b\u1EA3n ghi ".concat(nameOfModal, "? Thao t\u00E1c n\u00E0y kh\u00F4ng th\u1EC3 ho\u00E0n t\u00E1c.")))))))),
secondaryLeftButton && (react_1["default"].createElement("div", { className: 'flex justify-end gap-x-3' }, secondaryLeftButtonSubmit ? (react_1["default"].createElement(Button_1.PHXButton, { size: 'small', loading: loading, onClick: onSubmitSecondaryLeftButton, primary: true }, secondaryLeftTextButton)) : (react_1["default"].createElement(Button_1.PHXButton, { danger: true, size: 'small', onClick: onDeletedSecondaryLeftButton }, secondaryLeftTextButton)))),
!onlyDelete && (react_1["default"].createElement("div", { className: 'flex justify-end gap-x-3' },
react_1["default"].createElement(Button_1.PHXButton, { size: 'small', secondary: true, onClick: onSecondary ? onSecondary : onCancel }, formType === 'custom' ? cancelText : 'Huỷ thay đổi'),
submit ? (react_1["default"].createElement(Button_1.PHXButton, { size: 'small', loading: loading, submit: true, primary: true }, formType === 'custom' ? submitText : formType === 'add' ? 'Thêm mới' : 'Cập nhật')) : (react_1["default"].createElement(Button_1.PHXButton, { size: 'small', loading: loading, onClick: onSubmit, primary: true }, formType === 'custom' ? submitText : formType === 'add' ? 'Thêm mới' : 'Cập nhật'))))))),
react_1["default"].createElement(ModalImport_1["default"], { show: openImport, onHide: function () { return setOpenImport(false); }, handleImport: onImport, onChangeCapture: onChangeCapture })));
};
exports.PHXFormWrap = PHXFormWrap;
//# sourceMappingURL=FormWrap.js.map