phx-react
Version:
PHX REACT
40 lines • 4.01 kB
JavaScript
import React, { Fragment } from 'react';
import { Menu, Transition } from '@headlessui/react';
import { EllipsisHorizontalIcon } from '@heroicons/react/20/solid';
import { classNames } from '../types';
function ButtonAction({ importData, exportData, secondaryActions, downloadText, uploadText, sortedSecondaryActions, onDownload, onUpload, isDropdown, dropdown, listAction, }) {
var _a;
const handleDownload = () => {
if (onDownload) {
onDownload();
}
};
const handleUpload = () => {
if (onUpload) {
onUpload();
}
};
const showMobileMenu = importData ||
exportData ||
(secondaryActions && secondaryActions.length) ||
(listAction && listAction.length) ||
(isDropdown && ((_a = dropdown === null || dropdown === void 0 ? void 0 : dropdown.options) === null || _a === void 0 ? void 0 : _a.length));
return (React.createElement(Menu, { as: 'div', className: showMobileMenu ? '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-left rounded-md bg-white py-2 shadow-lg ring-1 ring-gray-900/5 focus:outline-none' },
exportData && (React.createElement(Menu.Item, null, ({ active }) => (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, ({ active }) => (React.createElement("p", { className: classNames(active ? 'bg-gray-50' : '', 'block px-3 py-1 text-xs leading-6 text-gray-900'), onClick: handleUpload }, uploadText)))),
(listAction === null || listAction === void 0 ? void 0 : listAction.length) > 0 &&
listAction.map((item, index) => (React.createElement(Menu.Item, { key: index }, ({ active }) => (React.createElement("p", { className: classNames(active ? 'bg-gray-100 font-medium text-gray-900' : 'text-gray-700', 'block cursor-pointer px-3 py-1.5 text-xs'), onClick: item.onClick }, item.content))))),
secondaryActions &&
sortedSecondaryActions.map((action) => (React.createElement(Menu.Item, { key: action.id }, ({ active }) => (React.createElement("p", { className: 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))))),
isDropdown &&
(dropdown === null || dropdown === void 0 ? void 0 : dropdown.options) &&
dropdown.options.length > 0 &&
dropdown.options.map((item, index) => (React.createElement(Menu.Item, { key: index }, ({ active }) => (React.createElement("p", { className: classNames(active ? 'cursor-pointer rounded-lg bg-gray-100 text-gray-900' : 'text-gray-700', 'block px-2.5 py-2 text-xs'), onClick: item.onClick }, item.content)))))))));
}
export default ButtonAction;
//# sourceMappingURL=ButtonAction.js.map