umami/src/components/common/DataTable.tsx
2023-09-29 05:29:22 -07:00

96 lines
2.5 KiB
TypeScript

import { ReactNode, Dispatch, SetStateAction } from 'react';
import classNames from 'classnames';
import { Banner, Loading, SearchField } from 'react-basics';
import { useMessages } from 'components/hooks';
import Empty from 'components/common/Empty';
import Pager from 'components/common/Pager';
import styles from './DataTable.module.css';
const DEFAULT_SEARCH_DELAY = 600;
export interface DataTableProps {
result: {
page: number;
pageSize: number;
count: number;
data: any[];
};
params: {
query: string;
page: number;
};
setParams: Dispatch<SetStateAction<{ query: string; page: number }>>;
isLoading: boolean;
error: unknown;
searchDelay?: number;
showSearch?: boolean;
showPaging?: boolean;
children: ReactNode | ((data: any) => ReactNode);
}
export function DataTable({
result,
params,
setParams,
isLoading,
error,
searchDelay,
showSearch = true,
showPaging = true,
children,
}: DataTableProps) {
const { formatMessage, labels, messages } = useMessages();
const { pageSize, count } = result || {};
const { query, page } = params || {};
const hasData = Boolean(!isLoading && result?.data?.length);
const noResults = Boolean(!isLoading && query && !hasData);
const handleSearch = query => {
setParams({ ...params, query });
};
const handlePageChange = page => {
setParams({ ...params, page });
};
if (error) {
return <Banner variant="error">{formatMessage(messages.error)}</Banner>;
}
return (
<>
{(hasData || query || isLoading) && showSearch && (
<SearchField
className={styles.search}
value={query}
onChange={handleSearch}
delay={searchDelay || DEFAULT_SEARCH_DELAY}
autoFocus={true}
placeholder={formatMessage(labels.search)}
/>
)}
<div
className={classNames(styles.body, { [styles.status]: isLoading || noResults || !hasData })}
>
{hasData ? (typeof children === 'function' ? children(result) : children) : null}
{isLoading && <Loading icon="dots" />}
{!isLoading && !hasData && !query && (
<Empty message={formatMessage(messages.noDataAvailable)} />
)}
{noResults && <Empty message={formatMessage(messages.noResultsFound)} />}
</div>
{showPaging && (
<Pager
className={styles.pager}
page={page}
pageSize={pageSize}
count={count}
onPageChange={handlePageChange}
/>
)}
</>
);
}
export default DataTable;