mirror of https://github.com/buster-so/buster.git
45 lines
1.4 KiB
TypeScript
45 lines
1.4 KiB
TypeScript
import type { IDataResult } from '@/api/asset_interfaces';
|
|
import { createStyles } from 'antd-style';
|
|
import React from 'react';
|
|
import isEmpty from 'lodash/isEmpty';
|
|
import { AppDataGrid } from '@/components/ui/table/AppDataGrid';
|
|
import { IndeterminateLinearLoader } from '@/components/ui/loaders/IndeterminateLinearLoader';
|
|
|
|
export const DataContainer: React.FC<{
|
|
data: IDataResult;
|
|
fetchingData: boolean;
|
|
className?: string;
|
|
}> = React.memo(({ data, fetchingData, className }) => {
|
|
const { styles, cx } = useStyles();
|
|
const hasData = data && !isEmpty(data);
|
|
|
|
return (
|
|
<div className={cx(styles.container, 'relative h-full w-full overflow-hidden', className)}>
|
|
<IndeterminateLinearLoader
|
|
className={cx(
|
|
'absolute top-0 left-0 z-10 w-full',
|
|
fetchingData && hasData ? 'block' : 'hidden!'
|
|
)}
|
|
/>
|
|
|
|
{hasData ? (
|
|
<AppDataGrid rows={data} resizable={true} draggable={false} animate={false} />
|
|
) : (
|
|
<div className="flex h-full items-center justify-center">
|
|
{fetchingData ? 'Loading data...' : 'No data returned'}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
});
|
|
|
|
DataContainer.displayName = 'DataContainer';
|
|
|
|
const useStyles = createStyles(({ css, token }) => ({
|
|
container: css`
|
|
background: ${token.colorBgBase};
|
|
border-radius: ${token.borderRadius}px;
|
|
border: 0.5px solid ${token.colorBorder};
|
|
`
|
|
}));
|