phx-react
Version:
PHX REACT
20 lines • 2.44 kB
JavaScript
import { Menu, Transition } from '@headlessui/react';
import { ChevronDownIcon } from '@heroicons/react/24/solid';
import React, { Fragment } from 'react';
import { classNames } from '../types';
const SelectSort = ({ activeMenu, onChangeSelect, selectArray, sortItem }) => {
var _a, _b;
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
? (_b = (_a = selectArray.find((selectItem) => selectItem.columnName === sortItem.field)) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : 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((item) => (React.createElement(Menu.Item, { key: item.id }, ({ active }) => (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: () => onChangeSelect(item, sortItem.field), type: 'button' }, item.name))))))))));
};
export default SelectSort;
//# sourceMappingURL=SelectSort.js.map