phx-react
Version:
PHX REACT
43 lines • 4.43 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importStar(require("react"));
const react_2 = require("@headlessui/react");
const solid_1 = require("@heroicons/react/20/solid");
const types_1 = require("../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_1.default.createElement(react_2.Menu, { as: 'div', className: showMobileMenu ? 'relative md:hidden' : 'hidden' },
react_1.default.createElement(react_2.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_1.default.createElement("span", { className: 'sr-only' }, "Open menu"),
react_1.default.createElement(solid_1.EllipsisHorizontalIcon, { "aria-hidden": 'true', className: 'h-5 w-5 rounded text-gray-400' })),
react_1.default.createElement(react_2.Transition, { as: react_1.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_1.default.createElement(react_2.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_1.default.createElement(react_2.Menu.Item, null, ({ active }) => (react_1.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_1.default.createElement(react_2.Menu.Item, null, ({ active }) => (react_1.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)))),
(listAction === null || listAction === void 0 ? void 0 : listAction.length) > 0 &&
listAction.map((item, index) => (react_1.default.createElement(react_2.Menu.Item, { key: index }, ({ active }) => (react_1.default.createElement("p", { className: (0, types_1.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_1.default.createElement(react_2.Menu.Item, { key: action.id }, ({ active }) => (react_1.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))))),
isDropdown &&
(dropdown === null || dropdown === void 0 ? void 0 : dropdown.options) &&
dropdown.options.length > 0 &&
dropdown.options.map((item, index) => (react_1.default.createElement(react_2.Menu.Item, { key: index }, ({ active }) => (react_1.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'), onClick: item.onClick }, item.content)))))))));
}
exports.default = ButtonAction;
//# sourceMappingURL=ButtonAction.js.map