phx-react
Version:
PHX REACT
55 lines • 6.07 kB
JavaScript
import { __assign } from "tslib";
import React, { useEffect, useState } from 'react';
import { classNames } from '../types';
import BulkAction from './component/bulkAction';
import { PHXDropdown } from '../Dropdown';
import { PHXEmptyRecord } from '../EmptyRecord';
import SearchResult from './component/searchResult';
import List from './component/list';
import { PHXButton } from '../Button';
import ListWithCard from './component/listWithCard';
export 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 = useState([]), dataSelected = _f[0], setDataSelected = _f[1];
var _g = useState(''), query = _g[0], setQuery = _g[1];
var _h = useState([]), filteredItems = _h[0], setFilteredItems = _h[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.createElement(BulkAction, { list: list ? list : [], dataSelected: dataSelected, setDataSelected: setDataSelected, onBulkActions: onBulkActions, setFilteredItems: setFilteredItems, content: bulkActionsContent })) : searchResult ? (React.createElement("div", { className: 'relative flex-1' },
React.createElement(SearchResult, { setQuery: setQuery }))) : (React.createElement(React.Fragment, null));
var getListComponent = function () {
if (useListWithCard) {
return (React.createElement(ListWithCard, { filteredItems: filteredItems, isBadge: isBadge, onClickItem: onClickItem, onClickRemoveItem: onClickRemoveItem, readonly: readonly }));
}
else {
return (React.createElement(React.Fragment, null, isEmptyData ? (React.createElement(PHXEmptyRecord, null)) : (React.createElement("div", { className: 'haveHeight' },
heightList && (React.createElement("style", null, "\n .haveHeight {\n height: ".concat(heightList, "px;\n overflow: auto\n }\n "))),
React.createElement(List, { 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.createElement(PHXDropdown, { buttonContent: sortContent, options: sortOptions, origin: 'right' })) : button ? (React.createElement(PHXButton, __assign({}, button), button === null || button === void 0 ? void 0 : button.children)) : (React.createElement(React.Fragment, null));
return (React.createElement("div", { className: className },
React.createElement("div", { className: 'mx-auto max-w-3xl px-0 lg:max-w-full' },
React.createElement("div", { className: classNames(' bg-white', !useListWithCard && 'rounded-lg border-[0.5px] border-gray-200') },
bulkActions && !title && searchResult && actionSelectAll && (React.createElement("div", { className: 'relative p-3 pb-0' },
React.createElement(SearchResult, { type: 'have-bulk-actions', setQuery: setQuery }))),
bulkActions || searchResult || sortOptions || title ? (React.createElement(React.Fragment, null, (!title && actionSelectAll) || sortOptions || searchResult ? (React.createElement("div", { className: classNames('flex items-center gap-x-4 border-b pb-3', (!bulkActions || !actionSelectAll) && 'justify-end', !useListWithCard && 'p-3') },
bulkActionMarkup,
sortActionMarkup)) : title || textAction ? (React.createElement(React.Fragment, null,
React.createElement("div", { className: classNames('flex justify-between gap-x-4 pb-3', !useListWithCard && 'border-b p-3') },
React.createElement("p", { className: 'text-xs font-semibold leading-5 text-gray-900' }, title),
React.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.createElement(React.Fragment, null)))) : (React.createElement(React.Fragment, null)),
filteredItems.length === 0 && query !== '' ? (React.createElement(PHXEmptyRecord, { type: 'micro' })) : (React.createElement(React.Fragment, null,
listMarkup,
dataSelected.length > 0 && (React.createElement("div", { className: 'p-3 text-xs border-t bg-gray-50 rounded-b-lg' },
dataSelected.length,
" selected"))))))));
}
//# sourceMappingURL=ResourceList.js.map