phx-react
Version:
PHX REACT
30 lines • 3.44 kB
JavaScript
import { Menu, Transition } from '@headlessui/react';
import { ArrowsUpDownIcon } from '@heroicons/react/20/solid';
import React, { Fragment } from 'react';
import SelectSort from './SelectSort';
function classNames() {
var classes = [];
for (var _i = 0; _i < arguments.length; _i++) {
classes[_i] = arguments[_i];
}
return classes.filter(Boolean).join(' ');
}
var Sort = function (_a) {
var activeMenu = _a.activeMenu, className = _a.className, isSearch = _a.isSearch, onChange = _a.onChange, onChangeSelect = _a.onChangeSelect, selectArray = _a.selectArray, sortList = _a.sortList;
return (React.createElement(React.Fragment, null,
React.createElement("div", { className: "".concat(className, " sm:block") }, sortList.map(function (sortItem) {
return sortItem.type === 'select-filter' && isSearch ? (React.createElement(SelectSort, { key: sortItem.id, activeMenu: activeMenu, onChangeSelect: onChangeSelect, selectArray: selectArray, sortItem: sortItem })) : (React.createElement("button", { key: sortItem.id, className: classNames('mr-1 hidden items-center rounded-lg border-gray-300 px-2 py-1 text-xs font-medium text-gray-700 hover:bg-gray-200', activeMenu === sortItem.id ? 'bg-gray-200' : 'bg-transparent', sortItem.type === 'select-filter' || isSearch ? 'hidden' : 'sm:inline-flex'), onClick: function () { return onChange(sortItem); }, type: 'button' }, sortItem.name));
})),
React.createElement(Menu, { as: 'div', className: classNames(isSearch ? 'hidden' : 'relative inline-block text-left sm:hidden') },
React.createElement("div", null,
React.createElement(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.createElement(ArrowsUpDownIcon, { "aria-hidden": 'true', className: 'h-4 w-4' }))),
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 right-0 z-10 mt-2 w-56 min-w-max origin-top-right rounded-md bg-white px-1 shadow-lg ring-1 ring-black ring-opacity-5 drop-shadow-lg focus:outline-none' },
React.createElement("div", { className: 'py-1' }, sortList.map(function (sortItem) { return (React.createElement(Menu.Item, { key: sortItem.id }, function (_a) {
var active = _a.active;
return (React.createElement("button", { className: classNames(active || activeMenu === sortItem.id ? 'bg-gray-200 text-[#303030]' : 'text-gray-700', sortItem.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 onChange(sortItem); }, type: 'button' }, sortItem.name));
})); })))))));
};
export default Sort;
//# sourceMappingURL=sort.js.map