phx-react
Version:
PHX REACT
92 lines • 11.3 kB
JavaScript
"use strict";
exports.__esModule = true;
exports.PHXHeaderBar = void 0;
var tslib_1 = require("tslib");
var react_1 = require("@headlessui/react");
var solid_1 = require("@heroicons/react/20/solid");
var solid_2 = require("@heroicons/react/20/solid");
var react_2 = tslib_1.__importStar(require("react"));
var types_1 = require("../types");
var Badge_1 = require("../Badge");
var Button_1 = require("../Button");
var Dropdown_1 = require("../Dropdown");
var PHXHeaderBar = function (_a) {
var _b = _a.addNew, addNew = _b === void 0 ? true : _b, _c = _a.addNewLoading, addNewLoading = _c === void 0 ? false : _c, addNewText = _a.addNewText, badge = _a.badge, className = _a.className, _d = _a.disableExport, disableExport = _d === void 0 ? false : _d, _e = _a.disableImport, disableImport = _e === void 0 ? false : _e, downLoadDropDownOption = _a.downLoadDropDownOption, _f = _a.downloadButton, downloadButton = _f === void 0 ? {
softButton: true,
dangerSoftButton: false,
secondaryButton: false
} : _f, downloadText = _a.downloadText, exportData = _a.exportData, _g = _a.exportLoading, exportLoading = _g === void 0 ? false : _g, importData = _a.importData, isCancel = _a.isCancel, isDownLoadDropDown = _a.isDownLoadDropDown, isUpLoadDropDown = _a.isUpLoadDropDown, onAdd = _a.onAdd, onCancel = _a.onCancel, onDownload = _a.onDownload, onUpload = _a.onUpload, title = _a.title, _h = _a.titleSize, titleSize = _h === void 0 ? 'text-base' : _h, _j = _a.type, type = _j === void 0 ? 'default' : _j, upLoadDropDownOption = _a.upLoadDropDownOption, _k = _a.uploadButton, uploadButton = _k === void 0 ? {
softButton: true,
dangerSoftButton: false,
secondaryButton: false
} : _k, uploadText = _a.uploadText, isDropdown = _a.isDropdown, dropdown = _a.dropdown, subTitle = _a.subTitle, _l = _a.disableAddNew, disableAddNew = _l === void 0 ? false : _l, secondaryActions = _a.secondaryActions;
var handleDownload = function () {
// e.preventDefault()
if (onDownload) {
onDownload();
}
};
var handleUpload = function () {
// e.preventDefault()
if (onUpload) {
onUpload();
}
};
// Luôn xếp nút xoá ở cuối danh sách
var sortedSecondaryActions = secondaryActions
? tslib_1.__spreadArray([], secondaryActions, true).sort(function (a, b) { return (a.deleted === b.deleted ? 0 : a.deleted ? 1 : -1); })
: [];
return (react_2["default"].createElement("div", { className: "mb-5 min-h-[1.875rem] ".concat(className) },
react_2["default"].createElement("div", { className: 'flex flex-col gap-y-2 sm:flex-row sm:items-center sm:justify-between sm:gap-y-0' },
react_2["default"].createElement("div", { className: 'flex items-center sm:justify-between' },
isCancel && (react_2["default"].createElement("button", { className: 'mr-2 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_2["default"].createElement(solid_2.ArrowLeftIcon, { className: 'w-5 h-5' }))),
react_2["default"].createElement("div", { className: (0, types_1.classNames)('min-w-0', type === 'default' ? 'flex-1' : 'flex', type === 'title-with-badge' && 'flex-wrap sm:flex-nowrap') },
react_2["default"].createElement("h1", { className: (0, types_1.classNames)("".concat(titleSize, " text-base font-semibold leading-6 text-gray-900"), type === 'default' ? '' : 'mr-2 flex-1') }, title),
type === 'title-with-badge' && (react_2["default"].createElement("div", { className: 'flex items-center' },
react_2["default"].createElement(Badge_1.PHXBadge, { className: (0, types_1.classNames)('mr-2', badge.badgeClassname), text: badge.badgeText, type: badge.badgeType })))),
react_2["default"].createElement("div", { className: 'sm:hidden' },
react_2["default"].createElement(Button_1.PHXButton, { className: addNew ? '' : 'hidden', disabled: addNewLoading || disableAddNew, loading: addNewLoading, onClick: onAdd, primary: true, size: 'small' }, addNewText))),
react_2["default"].createElement("div", { className: 'flex items-center flex-shrink-0 gap-x-2 sm:justify-end' },
react_2["default"].createElement("div", { className: importData || exportData ? 'hidden md:flex md:gap-x-2' : 'hidden' },
isDownLoadDropDown ? (react_2["default"].createElement(Dropdown_1.PHXDropdown, { buttonContent: downloadText,
// @ts-ignore
options: downLoadDropDownOption })) : (react_2["default"].createElement(Button_1.PHXButton, { className: exportData ? '' : 'hidden', danger: downloadButton.dangerSoftButton, deletedButton: false, disabled: exportLoading || disableExport, loading: exportLoading, onClick: onDownload, secondary: downloadButton.secondaryButton, size: 'small', soft: downloadButton.softButton }, downloadText)),
isUpLoadDropDown ? (react_2["default"].createElement(Dropdown_1.PHXDropdown, { buttonContent: uploadText,
// @ts-ignore
options: upLoadDropDownOption })) : (react_2["default"].createElement(Button_1.PHXButton, { className: importData ? '' : 'hidden', danger: uploadButton.dangerSoftButton, deletedButton: false, disabled: disableImport, onClick: onUpload, secondary: uploadButton.secondaryButton, size: 'small', soft: uploadButton.softButton }, uploadText))),
isDropdown && (react_2["default"].createElement(Dropdown_1.PHXDropdown, { buttonContent: dropdown === null || dropdown === void 0 ? void 0 : dropdown.buttonContent, defaultDate: dropdown === null || dropdown === void 0 ? void 0 : dropdown.defaultDate, disabledDate: dropdown === null || dropdown === void 0 ? void 0 : dropdown.disabledDate, endDisabled: dropdown === null || dropdown === void 0 ? void 0 : dropdown.defaultDate, max: dropdown === null || dropdown === void 0 ? void 0 : dropdown.max, min: dropdown === null || dropdown === void 0 ? void 0 : dropdown.min, onChangeDate: dropdown === null || dropdown === void 0 ? void 0 : dropdown.onChangeDate, options: dropdown === null || dropdown === void 0 ? void 0 : dropdown.options, optionTitle: dropdown === null || dropdown === void 0 ? void 0 : dropdown.optionTitle, origin: dropdown === null || dropdown === void 0 ? void 0 : dropdown.origin, soft: true, startDisabled: dropdown === null || dropdown === void 0 ? void 0 : dropdown.startDisabled, type: dropdown === null || dropdown === void 0 ? void 0 : dropdown.type })),
react_2["default"].createElement(react_1.Menu, { as: 'div', className: importData || exportData || (secondaryActions === null || secondaryActions === void 0 ? void 0 : secondaryActions.length) ? 'relative md:hidden' : 'hidden' },
react_2["default"].createElement(react_1.Menu.Button, { className: 'flex items-center rounded-lg bg-gray-200 p-1.5 px-2 py-1 text-sm hover:bg-gray-300' },
react_2["default"].createElement("span", { className: 'sr-only' }, "Open menu"),
react_2["default"].createElement(solid_1.EllipsisHorizontalIcon, { "aria-hidden": 'true', className: 'w-5 h-5 text-gray-400 rounded' })),
react_2["default"].createElement(react_1.Transition, { as: react_2.Fragment, enter: 'transition ease-out duration-100', enterFrom: 'transform opacity-0 scale-95', enterTo: 'transform opacity-100 scale-100', leave: 'transition ease-in duration-75', leaveFrom: 'transform opacity-100 scale-100', leaveTo: 'transform opacity-0 scale-95' },
react_2["default"].createElement(react_1.Menu.Items, { className: 'absolute left-0 z-10 mt-2.5 w-32 origin-top-right rounded-md bg-white py-2 shadow-lg ring-1 ring-gray-900/5 focus:outline-none' },
exportData && (react_2["default"].createElement(react_1.Menu.Item, null, function (_a) {
var active = _a.active;
return (react_2["default"].createElement("p", { className: (0, types_1.classNames)(active ? 'bg-gray-50' : '', 'block px-3 py-1 text-xs leading-6 text-gray-900'), onClick: handleDownload }, downloadText));
})),
importData && (react_2["default"].createElement(react_1.Menu.Item, null, function (_a) {
var active = _a.active;
return (react_2["default"].createElement("p", { className: (0, types_1.classNames)(active ? 'bg-gray-50' : '', 'block px-3 py-1 text-xs leading-6 text-gray-900'), onClick: handleUpload }, uploadText));
})),
secondaryActions &&
sortedSecondaryActions.map(function (action) { return (react_2["default"].createElement(react_1.Menu.Item, { key: action.id }, function (_a) {
var active = _a.active;
return (react_2["default"].createElement("p", { className: (0, types_1.classNames)(active ? 'cursor-pointer rounded-lg bg-gray-100 text-gray-900' : 'text-gray-700', 'block px-2.5 py-2 text-xs', action.active && !action.deleted && 'rounded-lg bg-gray-200 font-semibold text-gray-900', action.deleted && !action.active && 'text-red-800 hover:bg-red-100', action.deleted && action.active && 'rounded-lg bg-red-200 font-semibold text-red-800'), onClick: action.onClick }, action.content));
})); })))),
secondaryActions && (react_2["default"].createElement("div", { className: 'hidden md:flex md:gap-x-2' }, secondaryActions.length > 3 ? (react_2["default"].createElement(Dropdown_1.PHXDropdown, { options: sortedSecondaryActions.map(function (action) { return ({
content: action.content,
onClick: action.onClick,
active: action.active,
icon: action.icon,
iconOutline: action.iconOutline,
destructive: action.deleted,
id: action.id
}); }), buttonContent: 'Thao t\u00E1c', origin: 'right' })) : (secondaryActions.map(function (action) { return (react_2["default"].createElement(Button_1.PHXButton, tslib_1.__assign({ key: action.id }, action), action.content)); })))),
react_2["default"].createElement("div", { className: 'hidden sm:block' },
react_2["default"].createElement(Button_1.PHXButton, { className: addNew ? '' : 'hidden', disabled: addNewLoading || disableAddNew, loading: addNewLoading, onClick: onAdd, primary: true, size: 'small' }, addNewText)))),
subTitle && react_2["default"].createElement("p", { className: "".concat(isCancel && 'ml-11', " mt-[2px] text-[12px] text-gray-600") }, subTitle)));
};
exports.PHXHeaderBar = PHXHeaderBar;
//# sourceMappingURL=HeaderBar.js.map