phx-react
Version:
PHX REACT
32 lines • 4.4 kB
JavaScript
"use strict";
exports.__esModule = true;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importDefault(require("react"));
var react_2 = require("react");
var react_3 = require("@headlessui/react");
var outline_1 = require("@heroicons/react/24/outline");
var types_1 = require("../types");
var Button_1 = require("../Button");
function SelectedAction(_a) {
var search = _a.search, selectedBtn = _a.selectedBtn, selectedPeople = _a.selectedPeople, slectedTitle = _a.slectedTitle, sort = _a.sort, checkbox = _a.checkbox, checked = _a.checked, toggleAll = _a.toggleAll;
return (react_1["default"].createElement("div", { className: (0, types_1.classNames)('absolute -top-2 z-[25] min-w-full border-b bg-white px-2 py-[0.3rem]', !(search === null || search === void 0 ? void 0 : search.enable) && !(sort === null || sort === void 0 ? void 0 : sort.enable) ? 'rounded-t-lg' : 'border-t') },
react_1["default"].createElement("div", { className: 'flex' },
react_1["default"].createElement("label", { className: 'absolute left-4 top-1/2 -ml-2 -mt-4 p-2 hover:cursor-pointer sm:left-6' },
react_1["default"].createElement("input", { ref: checkbox, checked: checked, className: 'block h-4 w-4 rounded border-[0.5px] border-gray-500 text-indigo-800 hover:cursor-pointer hover:bg-gray-100 focus:ring-transparent', onChange: toggleAll, type: 'checkbox' })),
react_1["default"].createElement("div", { className: 'flex w-full items-center' },
react_1["default"].createElement("p", { className: 'ml-14 px-3 pl-8 text-xs font-medium text-gray-900' },
"\u0110\u00E3 ch\u1ECDn ", selectedPeople === null || selectedPeople === void 0 ? void 0 :
selectedPeople.length,
" ",
slectedTitle),
react_1["default"].createElement("div", { className: 'hidden gap-2 sm:flex' }, selectedBtn === null || selectedBtn === void 0 ? void 0 : selectedBtn.map(function (item, index) { return (react_1["default"].createElement(Button_1.PHXButton, { key: index, className: item.isCritical ? 'text-red-700' : '', deleted: item.type === 'danger', onClick: function () { return item.onClick(selectedPeople); }, secondary: item.type === 'secondary', size: 'micro' }, item.content)); })),
react_1["default"].createElement(react_3.Menu, { as: 'div', className: (0, types_1.classNames)('relative inline-block text-left sm:hidden') },
react_1["default"].createElement("div", null,
react_1["default"].createElement(react_3.Menu.Button, { className: 'flex rounded-lg bg-white px-2 py-1 text-xs font-normal text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 active:bg-gray-200 active:pb-[0.2rem] active:pt-[0.3rem] active:shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset]' },
react_1["default"].createElement(outline_1.EllipsisHorizontalIcon, { "aria-hidden": 'true', className: 'h-4 w-4' }))),
react_1["default"].createElement(react_3.Transition, { as: react_2.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_3.Menu.Items, { className: 'absolute right-0 z-10 mt-2 max-h-96 w-56 min-w-max origin-top-right overflow-y-auto rounded-md bg-white px-1 shadow-lg ring-1 ring-black ring-opacity-5 drop-shadow-lg focus:outline-none' },
react_1["default"].createElement("div", { className: 'py-1' }, selectedBtn.map(function (item) { return (react_1["default"].createElement(react_3.Menu.Item, { key: item.id }, function () { return (react_1["default"].createElement("button", { className: (0, types_1.classNames)(item.type === 'select-filter' ? 'hidden' : '', 'bg-gray-200" my-[1px] block w-full min-w-max cursor-pointer rounded-lg border-gray-300 px-2 py-2 text-left text-xs font-medium text-gray-700 transition-all hover:bg-gray-200 sm:text-xs'), onClick: function () { return item.onClick(selectedPeople); }, type: 'button' }, item.content)); })); })))))))));
}
exports["default"] = SelectedAction;
//# sourceMappingURL=SelectedAction.js.map