phx-react
Version:
PHX REACT
87 lines • 7.82 kB
JavaScript
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';
import ResourceStyle from './styles/resourceStyle';
import { PHXSpinner } from '../Loading';
import { PHXEmptySearch } from '../EmptySearch';
import PHXUseDebounce from '../Func/useDebounce';
export function PHXResourceList({ actionSelectAll = true, bulkActions, bulkActionsContent, button, className, defaultOptionActive, getKeyword, heightList, hiddenBulkActionMarkup, isApplyClassnameList = false, isBadge, isEmptyData, isOptionList = false, list, loading, onBulkActions, onClickItem, onClickRemoveItem, onScrollBottom, onSelectedItemsChange, paging, readonly = false, searchLoading = false, searchResult = false, selectedItems, shortcutAction, sortContent, sortOptions, textAction, title, useListWithCard, }) {
const [dataSelected, setDataSelected] = useState(selectedItems !== null && selectedItems !== void 0 ? selectedItems : []);
const [query, setQuery] = useState('');
const [hasSearched, setHasSearched] = useState(false);
const [filteredItems, setFilteredItems] = useState(list !== null && list !== void 0 ? list : []);
useEffect(() => {
if (getKeyword) {
setFilteredItems(list);
return;
}
const queryItems = query === '' ? list : list === null || list === void 0 ? void 0 : list.filter((item) => item.name.toLowerCase().includes(query.toLowerCase()));
setFilteredItems(queryItems);
}, [query, list]);
const bulkActionMarkup = bulkActions && actionSelectAll ? (React.createElement(BulkAction, { content: bulkActionsContent, dataSelected: dataSelected, list: list ? list : [], onBulkActions: onBulkActions, setDataSelected: setDataSelected, setFilteredItems: setFilteredItems })) : searchResult ? (React.createElement("div", { className: 'relative flex-1' },
React.createElement(SearchResult, { actionSelectAll: actionSelectAll, loading: searchLoading, setQuery: (keyword) => {
setQuery(keyword.trim());
setHasSearched(true);
} }))) : (React.createElement(React.Fragment, null));
const onScrollList = (e) => {
const target = e.target;
const isScrollingToBottom = target.scrollHeight - target.scrollTop === target.clientHeight;
if (isScrollingToBottom) {
onScrollBottom === null || onScrollBottom === void 0 ? void 0 : onScrollBottom();
}
};
const getListComponent = () => {
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', onScroll: onScrollList, style: heightList ? { height: `${heightList}px`, overflow: 'auto' } : {} },
React.createElement(List, { actionSelectAll: actionSelectAll, bulkActions: bulkActions, checkRounded: (!title && actionSelectAll) || sortOptions || searchResult, className: className, dataSelected: dataSelected, defaultOptionActive: defaultOptionActive, filteredItems: filteredItems, isApplyClassnameList: isApplyClassnameList, isBadge: isBadge, isOptionList: isOptionList, onBulkActions: onBulkActions, onClickItem: onClickItem, readonly: readonly, setDataSelected: setDataSelected, shortcutAction: shortcutAction }),
paging && (React.createElement("div", { className: 'flex items-center justify-center border-t py-3' },
React.createElement(PHXSpinner, null)))))));
}
};
const listMarkup = list && getListComponent();
const sortActionMarkup = sortOptions && sortContent && !button ? (React.createElement(PHXDropdown, { buttonContent: sortContent, options: sortOptions, origin: 'right' })) : button ? (React.createElement(PHXButton, { ...button }, button === null || button === void 0 ? void 0 : button.children)) : (React.createElement(React.Fragment, null));
useEffect(() => {
if (onSelectedItemsChange) {
onSelectedItemsChange === null || onSelectedItemsChange === void 0 ? void 0 : onSelectedItemsChange(dataSelected);
}
}, [dataSelected]);
const debouncedSearch = PHXUseDebounce(query, 300);
useEffect(() => {
if (getKeyword) {
getKeyword(debouncedSearch);
}
}, [debouncedSearch]);
return (React.createElement(React.Fragment, null,
React.createElement(ResourceStyle, null),
React.createElement("div", { className: classNames(!isApplyClassnameList && className ? className : '') },
React.createElement("div", { className: 'resource-list 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, { actionSelectAll: actionSelectAll, loading: searchLoading, setQuery: (keyword) => {
setQuery(keyword);
setHasSearched(true);
}, type: 'have-bulk-actions' }))),
loading ? (React.createElement("div", { className: 'flex h-56 items-center justify-center' },
React.createElement(PHXSpinner, null))) : (React.createElement(React.Fragment, null,
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') },
!hiddenBulkActionMarkup ? 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 !== '' || hasSearched ? (React.createElement(PHXEmptySearch, null)) : (React.createElement(PHXEmptyRecord, { type: 'micro' }))) : (React.createElement(React.Fragment, null,
listMarkup,
dataSelected.length > 0 && (React.createElement("div", { className: 'rounded-b-lg border-t bg-gray-50 p-3 text-xs' },
dataSelected.length,
" selected")))))))))));
}
//# sourceMappingURL=ResourceList.js.map