phx-react
Version:
PHX REACT
59 lines • 6.98 kB
JavaScript
"use strict";
exports.__esModule = true;
exports.PHXResourceList = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var types_1 = require("../types");
var bulkAction_1 = tslib_1.__importDefault(require("./component/bulkAction"));
var Dropdown_1 = require("../Dropdown");
var EmptyRecord_1 = require("../EmptyRecord");
var searchResult_1 = tslib_1.__importDefault(require("./component/searchResult"));
var list_1 = tslib_1.__importDefault(require("./component/list"));
var Button_1 = require("../Button");
var listWithCard_1 = tslib_1.__importDefault(require("./component/listWithCard"));
function PHXResourceList(_a) {
var className = _a.className, list = _a.list, bulkActions = _a.bulkActions, bulkActionsContent = _a.bulkActionsContent, _b = _a.actionSelectAll, actionSelectAll = _b === void 0 ? true : _b, _c = _a.readonly, readonly = _c === void 0 ? false : _c, _d = _a.searchResult, searchResult = _d === void 0 ? false : _d, _e = _a.isOptionList, isOptionList = _e === void 0 ? false : _e, defaultOptionActive = _a.defaultOptionActive, isEmptyData = _a.isEmptyData, heightList = _a.heightList, shortcutAction = _a.shortcutAction, sortOptions = _a.sortOptions, button = _a.button, sortContent = _a.sortContent, onClickItem = _a.onClickItem, onBulkActions = _a.onBulkActions, textAction = _a.textAction, title = _a.title, isBadge = _a.isBadge, useListWithCard = _a.useListWithCard, onClickRemoveItem = _a.onClickRemoveItem;
var _f = (0, react_1.useState)([]), dataSelected = _f[0], setDataSelected = _f[1];
var _g = (0, react_1.useState)(''), query = _g[0], setQuery = _g[1];
var _h = (0, react_1.useState)([]), filteredItems = _h[0], setFilteredItems = _h[1];
(0, react_1.useEffect)(function () {
var queryItems = query === ''
? list
: list === null || list === void 0 ? void 0 : list.filter(function (item) {
return item.name.toLowerCase().includes(query.toLowerCase());
});
setFilteredItems(queryItems);
}, [query, list]);
var bulkActionMarkup = bulkActions && actionSelectAll ? (react_1["default"].createElement(bulkAction_1["default"], { list: list ? list : [], dataSelected: dataSelected, setDataSelected: setDataSelected, onBulkActions: onBulkActions, setFilteredItems: setFilteredItems, content: bulkActionsContent })) : searchResult ? (react_1["default"].createElement("div", { className: 'relative flex-1' },
react_1["default"].createElement(searchResult_1["default"], { setQuery: setQuery }))) : (react_1["default"].createElement(react_1["default"].Fragment, null));
var getListComponent = function () {
if (useListWithCard) {
return (react_1["default"].createElement(listWithCard_1["default"], { filteredItems: filteredItems, isBadge: isBadge, onClickItem: onClickItem, onClickRemoveItem: onClickRemoveItem, readonly: readonly }));
}
else {
return (react_1["default"].createElement(react_1["default"].Fragment, null, isEmptyData ? (react_1["default"].createElement(EmptyRecord_1.PHXEmptyRecord, null)) : (react_1["default"].createElement("div", { className: 'haveHeight' },
heightList && (react_1["default"].createElement("style", null, "\n .haveHeight {\n height: ".concat(heightList, "px;\n overflow: auto\n }\n "))),
react_1["default"].createElement(list_1["default"], { bulkActions: bulkActions, isOptionList: isOptionList, defaultOptionActive: defaultOptionActive, dataSelected: dataSelected, filteredItems: filteredItems, isBadge: isBadge, onClickItem: onClickItem, readonly: readonly, setDataSelected: setDataSelected, shortcutAction: shortcutAction, onBulkActions: onBulkActions, actionSelectAll: actionSelectAll, checkRounded: (!title && actionSelectAll) || sortOptions || searchResult })))));
}
};
var listMarkup = list && getListComponent();
var sortActionMarkup = sortOptions && sortContent && !button ? (react_1["default"].createElement(Dropdown_1.PHXDropdown, { buttonContent: sortContent, options: sortOptions, origin: 'right' })) : button ? (react_1["default"].createElement(Button_1.PHXButton, tslib_1.__assign({}, button), button === null || button === void 0 ? void 0 : button.children)) : (react_1["default"].createElement(react_1["default"].Fragment, null));
return (react_1["default"].createElement("div", { className: className },
react_1["default"].createElement("div", { className: 'mx-auto max-w-3xl px-0 lg:max-w-full' },
react_1["default"].createElement("div", { className: (0, types_1.classNames)(' bg-white', !useListWithCard && 'rounded-lg border-[0.5px] border-gray-200') },
bulkActions && !title && searchResult && actionSelectAll && (react_1["default"].createElement("div", { className: 'relative p-3 pb-0' },
react_1["default"].createElement(searchResult_1["default"], { type: 'have-bulk-actions', setQuery: setQuery }))),
bulkActions || searchResult || sortOptions || title ? (react_1["default"].createElement(react_1["default"].Fragment, null, (!title && actionSelectAll) || sortOptions || searchResult ? (react_1["default"].createElement("div", { className: (0, types_1.classNames)('flex items-center gap-x-4 border-b pb-3', (!bulkActions || !actionSelectAll) && 'justify-end', !useListWithCard && 'p-3') },
bulkActionMarkup,
sortActionMarkup)) : title || textAction ? (react_1["default"].createElement(react_1["default"].Fragment, null,
react_1["default"].createElement("div", { className: (0, types_1.classNames)('flex justify-between gap-x-4 pb-3', !useListWithCard && 'border-b p-3') },
react_1["default"].createElement("p", { className: 'text-xs font-semibold leading-5 text-gray-900' }, title),
react_1["default"].createElement("p", { className: 'text-xs text-blue-600 hover:cursor-pointer hover:text-blue-800 hover:underline', onClick: textAction === null || textAction === void 0 ? void 0 : textAction.onClick }, textAction === null || textAction === void 0 ? void 0 : textAction.content)))) : (react_1["default"].createElement(react_1["default"].Fragment, null)))) : (react_1["default"].createElement(react_1["default"].Fragment, null)),
filteredItems.length === 0 && query !== '' ? (react_1["default"].createElement(EmptyRecord_1.PHXEmptyRecord, { type: 'micro' })) : (react_1["default"].createElement(react_1["default"].Fragment, null,
listMarkup,
dataSelected.length > 0 && (react_1["default"].createElement("div", { className: 'p-3 text-xs border-t bg-gray-50 rounded-b-lg' },
dataSelected.length,
" selected"))))))));
}
exports.PHXResourceList = PHXResourceList;
//# sourceMappingURL=ResourceList.js.map