77 lines
2.3 KiB
JavaScript
77 lines
2.3 KiB
JavaScript
import React from 'react';
|
|
import cn from 'classnames';
|
|
import { Button } from 'antd';
|
|
import stl from './table.module.css';
|
|
|
|
export default class Table extends React.PureComponent {
|
|
state = { showAll: false };
|
|
|
|
onLoadMoreClick = () => {
|
|
this.setState({ showAll: true });
|
|
};
|
|
|
|
render() {
|
|
const {
|
|
cols,
|
|
rows = [],
|
|
rowProps,
|
|
rowClass = '',
|
|
small = false,
|
|
compare = false,
|
|
maxHeight = 200,
|
|
onRowClick = null,
|
|
isTemplate,
|
|
} = this.props;
|
|
const { showAll } = this.state;
|
|
|
|
const isShowMoreButtonVisible = !isTemplate && rows.size > (small ? 3 : 5) && !showAll;
|
|
return (
|
|
<div className="w-full">
|
|
<div className="flex">
|
|
{
|
|
cols.map(({
|
|
key, title, width,
|
|
}) => <div key={key} style={{ width }} className={stl.header}>{ title }</div>)
|
|
}
|
|
</div>
|
|
<div className={cn(stl.content, 'thin-scrollbar')} style={{ maxHeight: `${maxHeight}px` }}>
|
|
{ rows.take(showAll ? rows.size : (small ? 3 : 5)).map((row) => (
|
|
<div
|
|
className={cn(rowClass, stl.row, { [stl.bottomBorder]: isShowMoreButtonVisible }, { [stl.small]: small, 'cursor-pointer': !!onRowClick })}
|
|
key={row.key}
|
|
onClick={onRowClick ? (e) => onRowClick(e, row) : () => null}
|
|
>
|
|
{ cols.map(({
|
|
cellClass = '', className = '', Component, key, toText = (t) => t, width,
|
|
}) => (
|
|
<div className={cn(stl.cell, cellClass)} style={{ width }} key={key}>
|
|
{' '}
|
|
{ Component
|
|
? <Component compare={compare} data={row} {...rowProps} />
|
|
: (
|
|
<div className={cn(stl.text, className)}>
|
|
{' '}
|
|
{ toText(row[key]) }
|
|
{' '}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)) }
|
|
</div>
|
|
)) }
|
|
</div>
|
|
{isShowMoreButtonVisible
|
|
&& (
|
|
<div className="w-full flex justify-center mt-2">
|
|
<Button
|
|
onClick={this.onLoadMoreClick}
|
|
type="text"
|
|
>
|
|
{ `${rows.size} More` }
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
}
|