phx-react
Version:
PHX REACT
55 lines • 3.69 kB
JavaScript
"use strict";
exports.__esModule = true;
exports.PHXNotifications = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var types_1 = require("../types");
var react_2 = require("@headlessui/react");
var solid_1 = require("@heroicons/react/20/solid");
var PHXNotifications = function (_a) {
var className = _a.className, show = _a.show, type = _a.type, onHide = _a.onHide, failure = _a.failure, customMessage = _a.customMessage;
var _b = (0, react_1.useState)(false), notify = _b[0], setNotify = _b[1];
var _c = (0, react_1.useState)(false), isFailure = _c[0], setIsFailure = _c[1];
(0, react_1.useEffect)(function () {
// @ts-ignore
setNotify(show);
}, [show]);
(0, react_1.useEffect)(function () {
// @ts-ignore
if (failure) {
setIsFailure(true);
}
else {
setTimeout(function () {
setIsFailure(false);
}, 200);
}
}, [failure]);
var hideNotify = function () {
setNotify(false);
if (onHide) {
onHide();
}
};
var message = type === 'add'
? 'Thêm mới thành công'
: type === 'edit'
? 'Cập nhật thành công'
: type === 'delete'
? 'Xóa bản ghi thành công'
: customMessage;
return (react_1["default"].createElement("div", { "aria-live": 'assertive', className: "absolute pointer-events-none inset-0 flex items-center px-4 py-6 sm:items-start sm:p-6 ".concat(className) },
react_1["default"].createElement("div", { className: 'fixed bottom-10 mr-8 flex w-[-webkit-fill-available] flex-col items-center' },
react_1["default"].createElement(react_2.Transition, { as: react_1.Fragment, enter: 'transform ease-out duration-500 transition', enterFrom: 'translate-y-2 opacity-0 sm:translate-y-0 sm:translate-y-10', enterTo: 'translate-y-0 opacity-500 sm:translate-y-0', leave: 'transition ease-in duration-500', leaveFrom: 'translate-y-0 opacity-500 sm:translate-y-0', leaveTo: 'translate-y-2 opacity-0 sm:translate-y-0 sm:translate-y-10', show: notify },
react_1["default"].createElement("div", { className: (0, types_1.classNames)('pointer-events-auto max-w-sm overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5', isFailure ? 'bg-red-600' : 'bg-indigo-800') },
react_1["default"].createElement("div", { className: 'p-3' },
react_1["default"].createElement("div", { className: 'flex items-center justify-between' },
react_1["default"].createElement("div", { className: 'ml-1' },
react_1["default"].createElement("p", { className: 'text-xs font-normal text-white' }, isFailure && type === 'custom' ? message : isFailure ? 'Lỗi, vui lòng thử lại sau' : message)),
react_1["default"].createElement("div", { className: 'ml-4 flex pt-0.5' },
react_1["default"].createElement("button", { className: 'inline-flex rounded-md bg-white text-gray-400 hover:text-gray-500', onClick: function () { return hideNotify(); }, type: 'button' },
react_1["default"].createElement("span", { className: 'sr-only' }, "Close"),
react_1["default"].createElement(solid_1.XMarkIcon, { "aria-hidden": 'true', className: (0, types_1.classNames)('h-4 w-4 text-white', isFailure ? 'bg-red-600' : 'bg-indigo-800') }))))))))));
};
exports.PHXNotifications = PHXNotifications;
//# sourceMappingURL=Notifications.js.map