phx-react
Version:
PHX REACT
66 lines • 7.78 kB
JavaScript
import { Menu, Transition } from '@headlessui/react';
import { EllipsisHorizontalIcon } from '@heroicons/react/20/solid';
import { ArrowLeftIcon } from '@heroicons/react/20/solid';
import React, { Fragment } from 'react';
import { classNames } from '../types';
import { PHXBadge } from '../Badge';
import { PHXButton } from '../Button';
import { PHXDropdown } from '../Dropdown';
export 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;
var handleDownload = function () {
// e.preventDefault()
if (onDownload) {
onDownload();
}
};
var handleUpload = function () {
// e.preventDefault()
if (onUpload) {
onUpload();
}
};
return (React.createElement("div", { className: "mb-5 flex h-[1.875rem] items-center justify-between sm:flex-auto ".concat(className) },
React.createElement("div", { className: 'flex items-center mr-2' },
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('min-w-0 ', type === 'default' ? 'flex-1' : 'flex', type === 'title-with-badge' && 'flex-wrap sm:flex-nowrap') },
React.createElement("h1", { className: classNames("".concat(titleSize, " text-base font-semibold leading-6 text-gray-900"), type === 'default' ? '' : 'mr-2 flex-1', subTitle ? 'mt-5' : '') },
title,
subTitle && React.createElement("p", { className: 'text-xs text-gray-500 font-normal' }, subTitle)),
type === 'title-with-badge' && (React.createElement("div", { className: "".concat(subTitle ? 'mb-4' : '', " flex items-center") },
React.createElement(PHXBadge, { text: badge.badgeText, type: badge.badgeType }))))),
React.createElement("div", { className: 'flex flex-shrink-0 items-center justify-end gap-x-2' },
React.createElement("div", { className: importData || exportData ? 'hidden md:flex md:gap-x-2' : 'hidden' },
isDownLoadDropDown ? (React.createElement(PHXDropdown, { buttonContent: downloadText,
// @ts-ignore
options: downLoadDropDownOption })) : (React.createElement(PHXButton, { className: exportData ? '' : 'hidden', danger: downloadButton.dangerSoftButton, disabled: exportLoading || disableExport, loading: exportLoading, deletedButton: false, 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, onClick: onUpload, disabled: disableImport, secondary: uploadButton.secondaryButton, size: 'small', soft: uploadButton.softButton }, uploadText))),
isDropdown && (React.createElement(PHXDropdown, { buttonContent: dropdown === null || dropdown === void 0 ? void 0 : dropdown.buttonContent, optionTitle: dropdown === null || dropdown === void 0 ? void 0 : dropdown.optionTitle, origin: dropdown === null || dropdown === void 0 ? void 0 : dropdown.origin, options: dropdown === null || dropdown === void 0 ? void 0 : dropdown.options, type: dropdown === null || dropdown === void 0 ? void 0 : dropdown.type, defaultDate: dropdown === null || dropdown === void 0 ? void 0 : dropdown.defaultDate, max: dropdown === null || dropdown === void 0 ? void 0 : dropdown.max, soft: true, min: dropdown === null || dropdown === void 0 ? void 0 : dropdown.min, startDisabled: dropdown === null || dropdown === void 0 ? void 0 : dropdown.startDisabled, endDisabled: dropdown === null || dropdown === void 0 ? void 0 : dropdown.defaultDate, disabledDate: dropdown === null || dropdown === void 0 ? void 0 : dropdown.disabledDate, onChangeDate: dropdown === null || dropdown === void 0 ? void 0 : dropdown.onChangeDate })),
React.createElement(Menu, { as: 'div', className: importData || exportData ? 'relative md:hidden' : 'hidden' },
React.createElement(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.createElement("span", { className: 'sr-only' }, "Open menu"),
React.createElement(EllipsisHorizontalIcon, { "aria-hidden": 'true', className: 'h-5 w-5 rounded text-gray-400' })),
React.createElement(Transition, { as: 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.createElement(Menu.Items, { className: 'absolute right-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.createElement(Menu.Item, null, function (_a) {
var active = _a.active;
return (React.createElement("p", { className: classNames(active ? 'bg-gray-50' : '', 'block px-3 py-1 text-xs leading-6 text-gray-900'), onClick: handleDownload }, downloadText));
})),
importData && (React.createElement(Menu.Item, null, function (_a) {
var active = _a.active;
return (React.createElement("p", { className: classNames(active ? 'bg-gray-50' : '', 'block px-3 py-1 text-xs leading-6 text-gray-900'), onClick: handleUpload }, uploadText));
}))))),
React.createElement(PHXButton, { className: addNew ? '' : 'hidden', disabled: addNewLoading, loading: addNewLoading, onClick: onAdd, primary: true, size: 'small' }, addNewText))));
};
//# sourceMappingURL=HeaderBar.js.map