phx-react
Version:
PHX REACT
71 lines • 8.42 kB
JavaScript
import { ArrowLeftIcon } from '@heroicons/react/20/solid';
import React from 'react';
import { classNames } from '../types';
import { PHXBadge } from '../Badge';
import { PHXButton } from '../Button';
import { PHXDropdown } from '../Dropdown';
import ButtonAction from './ButtonAction';
export 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.createElement("div", { className: `mb-5 min-h-[1.875rem] ${className}` },
React.createElement("div", { className: 'flex flex-col gap-y-2 sm:flex-row sm:items-center sm:justify-between sm:gap-y-0' },
React.createElement("div", { className: 'flex items-center sm:justify-between' },
isCancel && (React.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.createElement(ArrowLeftIcon, { className: 'h-5 w-5' }))),
React.createElement("div", { className: classNames('mr-2 min-w-0 sm:mr-0', type === 'default' ? 'flex-1' : 'flex', type === 'title-with-badge' && 'flex-wrap sm:flex-nowrap') },
React.createElement("h1", { className: 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.createElement("div", { className: 'flex items-center' },
React.createElement(PHXBadge, { className: classNames('mr-2', badge.badgeClassname), text: badge.badgeText, type: badge.badgeType })))),
React.createElement("div", { className: 'flex items-center gap-x-2 sm:hidden' },
React.createElement(ButtonAction, { downloadText: downloadText, exportData: exportData, importData: importData, onDownload: onDownload, onUpload: onUpload, secondaryActions: secondaryActions, sortedSecondaryActions: sortedSecondaryActions, uploadText: uploadText, dropdown: dropdown, isDropdown: isDropdown }),
!showAddButtonMobile && (React.createElement(React.Fragment, null, listAction && listAction.length > 0 ? (React.createElement(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.createElement(PHXButton, { className: addNew ? '' : 'hidden', disabled: addNewLoading || disableAddNew, loading: addNewLoading, onClick: onAdd, primary: true, size: 'small' }, addNewText)))))),
showAddButtonMobile && (React.createElement("div", { className: 'flex justify-end sm:hidden' },
React.createElement(PHXButton, { className: addNew ? '' : 'hidden', disabled: addNewLoading || disableAddNew, loading: addNewLoading, onClick: onAdd, primary: true, size: 'small' }, addNewText))),
React.createElement("div", { className: 'flex flex-shrink-0 items-center gap-x-2 sm:justify-end' },
React.createElement("div", { className: importData || exportData ? 'hidden sm:flex sm:gap-x-2' : 'hidden' },
isDownLoadDropDown ? (React.createElement(PHXDropdown, { buttonContent: downloadText,
// @ts-ignore
options: downLoadDropDownOption })) : (React.createElement(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.createElement(PHXDropdown, { buttonContent: uploadText,
// @ts-ignore
options: upLoadDropDownOption })) : (React.createElement(PHXButton, { className: importData ? '' : 'hidden', danger: uploadButton.dangerSoftButton, deletedButton: false, disabled: disableImport, onClick: onUpload, secondary: uploadButton.secondaryButton, size: 'small', soft: uploadButton.softButton }, uploadText))),
isDropdown && (React.createElement("div", { className: 'hidden sm:block' },
React.createElement(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.createElement("div", { className: 'hidden md:flex md:gap-x-2' }, secondaryActions.length > 3 ? (React.createElement(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.createElement(PHXButton, { size: 'small', key: action.id, ...action }, action.content)))))),
React.createElement("div", { className: 'hidden sm:block' }, listAction && listAction.length > 0 ? (React.createElement(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.createElement(PHXButton, { className: addNew ? '' : 'hidden', disabled: addNewLoading || disableAddNew, loading: addNewLoading, onClick: onAdd, primary: true, size: 'small' }, addNewText))))),
subTitle && React.createElement("p", { className: `${isCancel && 'ml-11'} mt-[2px] text-[12px] text-gray-600` }, subTitle)));
};
//# sourceMappingURL=HeaderBar.js.map