phx-react
Version:
PHX REACT
76 lines • 9.15 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PHXHeaderBar = void 0;
const tslib_1 = require("tslib");
const solid_1 = require("@heroicons/react/20/solid");
const react_1 = tslib_1.__importDefault(require("react"));
const types_1 = require("../types");
const Badge_1 = require("../Badge");
const Button_1 = require("../Button");
const Dropdown_1 = require("../Dropdown");
const ButtonAction_1 = tslib_1.__importDefault(require("./ButtonAction"));
const PHXHeaderBar = ({ addNew = true, addNewLoading = false, addNewText, badge, className, disableExport = false, disableImport = false, downLoadDropDownOption, downloadButton = {
softButton: true,
dangerSoftButton: false,
secondaryButton: false,
}, downloadText, exportData, exportLoading = false, showAddButtonMobile = false, importData, isCancel, isDownLoadDropDown, isUpLoadDropDown, onAdd, onCancel, onDownload, onUpload, title, titleSize = 'text-base', type = 'default', upLoadDropDownOption, uploadButton = {
softButton: true,
dangerSoftButton: false,
secondaryButton: false,
}, uploadText, isDropdown, dropdown, subTitle, disableAddNew = false, listAction, secondaryActions, }) => {
// Luôn xếp nút xoá ở cuối danh sách
const sortedSecondaryActions = secondaryActions
? [...secondaryActions].sort((a, b) => (a.deleted === b.deleted ? 0 : a.deleted ? 1 : -1))
: [];
return (react_1.default.createElement("div", { className: `mb-5 min-h-[1.875rem] ${className}` },
react_1.default.createElement("div", { className: 'flex flex-col gap-y-2 sm:flex-row sm:items-center sm:justify-between sm:gap-y-0' },
react_1.default.createElement("div", { className: 'flex items-center sm:justify-between' },
isCancel && (react_1.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_1.default.createElement(solid_1.ArrowLeftIcon, { className: 'h-5 w-5' }))),
react_1.default.createElement("div", { className: (0, types_1.classNames)('mr-2 min-w-0 sm:mr-0', type === 'default' ? 'flex-1' : 'flex', type === 'title-with-badge' && 'flex-wrap sm:flex-nowrap') },
react_1.default.createElement("h1", { className: (0, types_1.classNames)(`${titleSize} whitespace-wrap line-clamp-2 overflow-hidden text-ellipsis text-base font-semibold leading-6 text-gray-900`, 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, { className: (0, types_1.classNames)('mr-2', badge.badgeClassname), text: badge.badgeText, type: badge.badgeType })))),
react_1.default.createElement("div", { className: 'flex items-center gap-x-2 sm:hidden' },
react_1.default.createElement(ButtonAction_1.default, { downloadText: downloadText, exportData: exportData, importData: importData, onDownload: onDownload, onUpload: onUpload, secondaryActions: secondaryActions, sortedSecondaryActions: sortedSecondaryActions, uploadText: uploadText, dropdown: dropdown, isDropdown: isDropdown }),
!showAddButtonMobile && (react_1.default.createElement(react_1.default.Fragment, null, listAction && listAction.length > 0 ? (react_1.default.createElement(Dropdown_1.PHXDropdown, { type: 'primary', buttonContent: addNewText, origin: 'right', options: listAction.map((action) => ({
content: action.content,
icon: action.icon,
iconOutline: action.iconOutline,
destructive: action.destructive,
active: action.active,
onClick: action.onClick,
})) })) : (react_1.default.createElement(Button_1.PHXButton, { className: addNew ? '' : 'hidden', disabled: addNewLoading || disableAddNew, loading: addNewLoading, onClick: onAdd, primary: true, size: 'small' }, addNewText)))))),
showAddButtonMobile && (react_1.default.createElement("div", { className: 'flex justify-end sm:hidden' },
react_1.default.createElement(Button_1.PHXButton, { className: addNew ? '' : 'hidden', disabled: addNewLoading || disableAddNew, loading: addNewLoading, onClick: onAdd, primary: true, size: 'small' }, addNewText))),
react_1.default.createElement("div", { className: 'flex flex-shrink-0 items-center gap-x-2 sm:justify-end' },
react_1.default.createElement("div", { className: importData || exportData ? 'hidden sm:flex sm:gap-x-2' : 'hidden' },
isDownLoadDropDown ? (react_1.default.createElement(Dropdown_1.PHXDropdown, { buttonContent: downloadText,
// @ts-ignore
options: downLoadDropDownOption })) : (react_1.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_1.default.createElement(Dropdown_1.PHXDropdown, { buttonContent: uploadText,
// @ts-ignore
options: upLoadDropDownOption })) : (react_1.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_1.default.createElement("div", { className: 'hidden sm:block' },
react_1.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 }))),
secondaryActions && (react_1.default.createElement("div", { className: 'hidden md:flex md:gap-x-2' }, secondaryActions.length > 3 ? (react_1.default.createElement(Dropdown_1.PHXDropdown, { buttonContent: 'Thao t\u00E1c', options: sortedSecondaryActions.map((action) => ({
content: action.content,
onClick: action.onClick,
active: action.active,
icon: action.icon,
iconOutline: action.iconOutline,
destructive: action.deleted,
id: action.id,
})), origin: 'right' })) : (secondaryActions.map((action) => (react_1.default.createElement(Button_1.PHXButton, { size: 'small', key: action.id, ...action }, action.content)))))),
react_1.default.createElement("div", { className: 'hidden sm:block' }, listAction && listAction.length > 0 ? (react_1.default.createElement(Dropdown_1.PHXDropdown, { type: 'primary', buttonContent: addNewText, origin: 'right', options: listAction.map((action) => ({
content: action.content,
icon: action.icon,
iconOutline: action.iconOutline,
destructive: action.destructive,
active: action.active,
onClick: action.onClick,
})) })) : (react_1.default.createElement(Button_1.PHXButton, { className: addNew ? '' : 'hidden', disabled: addNewLoading || disableAddNew, loading: addNewLoading, onClick: onAdd, primary: true, size: 'small' }, addNewText))))),
subTitle && react_1.default.createElement("p", { className: `${isCancel && 'ml-11'} mt-[2px] text-[12px] text-gray-600` }, subTitle)));
};
exports.PHXHeaderBar = PHXHeaderBar;
//# sourceMappingURL=HeaderBar.js.map