phx-react
Version:
PHX REACT
33 lines • 3.8 kB
JavaScript
"use strict";
exports.__esModule = true;
var tslib_1 = require("tslib");
var react_1 = require("@headlessui/react");
var solid_1 = require("@heroicons/react/20/solid");
var react_2 = tslib_1.__importStar(require("react"));
var SelectSort_1 = tslib_1.__importDefault(require("./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_2["default"].createElement(react_2["default"].Fragment, null,
react_2["default"].createElement("div", { className: "".concat(className, " sm:block") }, sortList.map(function (sortItem) {
return sortItem.type === 'select-filter' && isSearch ? (react_2["default"].createElement(SelectSort_1["default"], { key: sortItem.id, activeMenu: activeMenu, onChangeSelect: onChangeSelect, selectArray: selectArray, sortItem: sortItem })) : (react_2["default"].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_2["default"].createElement(react_1.Menu, { as: 'div', className: classNames(isSearch ? 'hidden' : 'relative inline-block text-left sm:hidden') },
react_2["default"].createElement("div", null,
react_2["default"].createElement(react_1.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_2["default"].createElement(solid_1.ArrowsUpDownIcon, { "aria-hidden": 'true', className: 'h-4 w-4' }))),
react_2["default"].createElement(react_1.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_2["default"].createElement(react_1.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_2["default"].createElement("div", { className: 'py-1' }, sortList.map(function (sortItem) { return (react_2["default"].createElement(react_1.Menu.Item, { key: sortItem.id }, function (_a) {
var active = _a.active;
return (react_2["default"].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));
})); })))))));
};
exports["default"] = Sort;
//# sourceMappingURL=sort.js.map