phx-react
Version:
PHX REACT
90 lines • 8.77 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"));
var resourceStyle_1 = tslib_1.__importDefault(require("./styles/resourceStyle"));
var Loading_1 = require("../Loading");
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, selectedItems = _a.selectedItems, hiddenBulkActionMarkup = _a.hiddenBulkActionMarkup, onScrollBottom = _a.onScrollBottom, onSelectedItemsChange = _a.onSelectedItemsChange, paging = _a.paging, getKeyword = _a.getKeyword;
var _f = (0, react_1.useState)(selectedItems !== null && selectedItems !== void 0 ? selectedItems : []), 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 () {
if (getKeyword) {
setFilteredItems(list);
return;
}
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: function (keyword) {
setQuery(keyword);
if (getKeyword) {
getKeyword(keyword);
}
} }))) : (react_1["default"].createElement(react_1["default"].Fragment, null));
var onScrollList = function (e) {
var target = e.target;
var isScrollingToBottom = target.scrollHeight - target.scrollTop === target.clientHeight;
if (isScrollingToBottom) {
onScrollBottom === null || onScrollBottom === void 0 ? void 0 : onScrollBottom();
}
};
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", { onScroll: onScrollList, className: 'haveHeight', style: heightList ? { height: "".concat(heightList, "px"), overflow: 'auto' } : {} },
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 }),
paging && (react_1["default"].createElement("div", { className: 'flex items-center justify-center border-t py-3' },
react_1["default"].createElement(Loading_1.PHXSpinner, null)))))));
}
};
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));
(0, react_1.useEffect)(function () {
if (onSelectedItemsChange) {
onSelectedItemsChange === null || onSelectedItemsChange === void 0 ? void 0 : onSelectedItemsChange(dataSelected);
}
}, [dataSelected]);
return (react_1["default"].createElement(react_1["default"].Fragment, null,
react_1["default"].createElement(resourceStyle_1["default"], null),
react_1["default"].createElement("div", { className: className },
react_1["default"].createElement("div", { className: 'mx-auto max-w-3xl px-0 lg:max-w-full resource-list' },
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: function (keyword) {
setQuery(keyword);
if (getKeyword) {
getKeyword(keyword);
}
} }))),
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') },
!hiddenBulkActionMarkup ? 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