phx-react
Version:
PHX REACT
24 lines • 2.66 kB
JavaScript
import { Menu, Transition } from '@headlessui/react';
import { ChevronDownIcon } from '@heroicons/react/24/solid';
import React, { Fragment } from 'react';
import { classNames } from '../types';
var SelectSort = function (_a) {
var _b, _c;
var activeMenu = _a.activeMenu, onChangeSelect = _a.onChangeSelect, selectArray = _a.selectArray, sortItem = _a.sortItem;
return (React.createElement(Menu, { key: sortItem.id, as: 'div', className: 'relative mr-2 inline-block text-left ' },
React.createElement("div", null,
React.createElement(Menu.Button, { className: 'flex min-w-max items-center rounded-lg bg-white py-1 pl-3 pr-2 text-xs font-normal text-gray-900 shadow-sm outline-dashed outline-1 outline-[#ebebeb] transition-all hover:bg-gray-50 hover:outline active:bg-gray-200 active:shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset] sm:pl-2 sm:pr-[6px]' },
selectArray.length > 0
? (_c = (_b = selectArray.find(function (selectItem) { return selectItem.columnName === sortItem.field; })) === null || _b === void 0 ? void 0 : _b.name) !== null && _c !== void 0 ? _c : sortItem.name
: sortItem.name,
"\u00A0",
React.createElement(ChevronDownIcon, { "aria-hidden": 'true', className: 'h-3 w-3' }))),
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 max-h-96 overflow-y-auto left-0 z-10 mt-2 w-32 min-w-max origin-top-right rounded-md bg-white px-1 ring-1 ring-black ring-opacity-5 drop-shadow-lg' },
React.createElement("div", { className: 'flex flex-col items-start py-1 ' }, sortItem.selectData.map(function (item) { return (React.createElement(Menu.Item, { key: item.id }, function (_a) {
var active = _a.active;
return (React.createElement("button", { className: classNames(active || activeMenu === item.id ? 'bg-gray-200 text-[#303030]' : 'text-gray-700', '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 onChangeSelect(item, sortItem.field); }, type: 'button' }, item.name));
})); }))))));
};
export default SelectSort;
//# sourceMappingURL=SelectSort.js.map