phx-react
Version:
PHX REACT
27 lines • 2.91 kB
JavaScript
;
exports.__esModule = true;
var tslib_1 = require("tslib");
var react_1 = require("@headlessui/react");
var solid_1 = require("@heroicons/react/24/solid");
var react_2 = tslib_1.__importStar(require("react"));
var types_1 = require("../types");
var SelectSort = function (_a) {
var _b, _c;
var activeMenu = _a.activeMenu, onChangeSelect = _a.onChangeSelect, selectArray = _a.selectArray, sortItem = _a.sortItem;
return (react_2["default"].createElement(react_1.Menu, { key: sortItem.id, as: 'div', className: 'relative mr-2 inline-block text-left ' },
react_2["default"].createElement("div", null,
react_2["default"].createElement(react_1.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_2["default"].createElement(solid_1.ChevronDownIcon, { "aria-hidden": 'true', className: 'h-3 w-3' }))),
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 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_2["default"].createElement("div", { className: 'flex flex-col items-start py-1 ' }, sortItem.selectData.map(function (item) { return (react_2["default"].createElement(react_1.Menu.Item, { key: item.id }, function (_a) {
var active = _a.active;
return (react_2["default"].createElement("button", { className: (0, types_1.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));
})); }))))));
};
exports["default"] = SelectSort;
//# sourceMappingURL=SelectSort.js.map