fix Table size prop
This commit is contained in:
parent
6da65ae684
commit
8419e8a599
|
@ -80,6 +80,7 @@ function Table<T extends object>({
|
||||||
orderBy={orderBy}
|
orderBy={orderBy}
|
||||||
orderDirection={orderDirection}
|
orderDirection={orderDirection}
|
||||||
onRequestSort={onRequestSort}
|
onRequestSort={onRequestSort}
|
||||||
|
size={size}
|
||||||
onSelectAll={() => {
|
onSelectAll={() => {
|
||||||
if (onSelect) {
|
if (onSelect) {
|
||||||
onSelect(data);
|
onSelect(data);
|
||||||
|
@ -91,6 +92,7 @@ function Table<T extends object>({
|
||||||
{loading ? (
|
{loading ? (
|
||||||
<TableLoading
|
<TableLoading
|
||||||
columns={columns}
|
columns={columns}
|
||||||
|
size={size}
|
||||||
rowsPerPage={footerProps?.rowsPerPage ?? 50}
|
rowsPerPage={footerProps?.rowsPerPage ?? 50}
|
||||||
/>
|
/>
|
||||||
) : data.length > 0 ? (
|
) : data.length > 0 ? (
|
||||||
|
@ -105,6 +107,7 @@ function Table<T extends object>({
|
||||||
selected={isSelected(item)}
|
selected={isSelected(item)}
|
||||||
selection={selection}
|
selection={selection}
|
||||||
columns={columns}
|
columns={columns}
|
||||||
|
size={size}
|
||||||
onSelect={row => {
|
onSelect={row => {
|
||||||
if (onSelect) {
|
if (onSelect) {
|
||||||
onSelect([row]);
|
onSelect([row]);
|
||||||
|
|
|
@ -4,9 +4,7 @@ import clsx from 'clsx';
|
||||||
import { makeStyles } from '@material-ui/core/styles';
|
import { makeStyles } from '@material-ui/core/styles';
|
||||||
import { Toolbar, ToolbarProps } from '@material-ui/core';
|
import { Toolbar, ToolbarProps } from '@material-ui/core';
|
||||||
|
|
||||||
export type Props = {
|
export type Props = ToolbarProps;
|
||||||
children?: React.ReactNode;
|
|
||||||
} & ToolbarProps;
|
|
||||||
|
|
||||||
const useStyles = makeStyles(theme => {
|
const useStyles = makeStyles(theme => {
|
||||||
return {
|
return {
|
||||||
|
|
|
@ -0,0 +1,46 @@
|
||||||
|
import React from 'react';
|
||||||
|
import clsx from 'clsx';
|
||||||
|
|
||||||
|
import { makeStyles } from '@material-ui/core/styles';
|
||||||
|
import { Paper, PaperProps } from '@material-ui/core';
|
||||||
|
|
||||||
|
export type Props = {
|
||||||
|
size?: 'small' | 'medium' | 'large';
|
||||||
|
} & PaperProps;
|
||||||
|
|
||||||
|
const useStyles = makeStyles(() => ({
|
||||||
|
paper: {
|
||||||
|
overflow: 'auto',
|
||||||
|
maxHeight: '200px',
|
||||||
|
height: '100%',
|
||||||
|
'&.is-medium': {
|
||||||
|
maxHeight: '400px',
|
||||||
|
},
|
||||||
|
'&.is-large': {
|
||||||
|
maxHeight: '600px',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}));
|
||||||
|
|
||||||
|
function EnhancedPaper({
|
||||||
|
children,
|
||||||
|
className,
|
||||||
|
size = 'medium',
|
||||||
|
...rest
|
||||||
|
}: Props) {
|
||||||
|
const classes = useStyles();
|
||||||
|
console.log(size);
|
||||||
|
return (
|
||||||
|
<Paper
|
||||||
|
{...rest}
|
||||||
|
className={clsx(classes.paper, className, {
|
||||||
|
'is-large': size === 'large',
|
||||||
|
'is-medium': size === 'medium',
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</Paper>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default EnhancedPaper;
|
|
@ -4,10 +4,11 @@ import { SERVER_PAGE } from '@config/routes';
|
||||||
import { RECENTLY_DELETED_PLAYERS } from './queries';
|
import { RECENTLY_DELETED_PLAYERS } from './queries';
|
||||||
import { COLUMNS, LIMIT } from './constants';
|
import { COLUMNS, LIMIT } from './constants';
|
||||||
|
|
||||||
import { Paper, Typography } from '@material-ui/core';
|
import { Typography } from '@material-ui/core';
|
||||||
import TableToolbar from '@common/Table/TableToolbar';
|
import TableToolbar from '@common/Table/TableToolbar';
|
||||||
import Table from '@common/Table/Table';
|
import Table from '@common/Table/Table';
|
||||||
import Link from '@common/Link/Link';
|
import Link from '@common/Link/Link';
|
||||||
|
import Paper from '../Paper/Paper';
|
||||||
|
|
||||||
import { TFunction } from 'i18next';
|
import { TFunction } from 'i18next';
|
||||||
import { PlayersQueryVariables } from '@libs/graphql/types';
|
import { PlayersQueryVariables } from '@libs/graphql/types';
|
||||||
|
@ -40,7 +41,12 @@ function RecentlyDeletedPlayers({ server, t }: Props) {
|
||||||
<Paper>
|
<Paper>
|
||||||
<TableToolbar>
|
<TableToolbar>
|
||||||
<Typography variant="h4">
|
<Typography variant="h4">
|
||||||
{t('recentlyDeletedPlayers.title')}
|
<Link
|
||||||
|
to={SERVER_PAGE.RANKINGS_PAGE.PLAYER_PAGE.ARCHIVE_PAGE}
|
||||||
|
params={{ key: server }}
|
||||||
|
>
|
||||||
|
{t('recentlyDeletedPlayers.title')}
|
||||||
|
</Link>
|
||||||
</Typography>
|
</Typography>
|
||||||
</TableToolbar>
|
</TableToolbar>
|
||||||
<Table
|
<Table
|
||||||
|
|
|
@ -4,10 +4,11 @@ import { SERVER_PAGE } from '@config/routes';
|
||||||
import { RECENTLY_DELETED_TRIBES } from './queries';
|
import { RECENTLY_DELETED_TRIBES } from './queries';
|
||||||
import { COLUMNS, LIMIT } from './constants';
|
import { COLUMNS, LIMIT } from './constants';
|
||||||
|
|
||||||
import { Paper, Typography } from '@material-ui/core';
|
import { Typography } from '@material-ui/core';
|
||||||
import Table from '@common/Table/Table';
|
import Table from '@common/Table/Table';
|
||||||
import TableToolbar from '@common/Table/TableToolbar';
|
import TableToolbar from '@common/Table/TableToolbar';
|
||||||
import Link from '@common/Link/Link';
|
import Link from '@common/Link/Link';
|
||||||
|
import Paper from '../Paper/Paper';
|
||||||
|
|
||||||
import { TFunction } from 'i18next';
|
import { TFunction } from 'i18next';
|
||||||
import { TribesQueryVariables } from '@libs/graphql/types';
|
import { TribesQueryVariables } from '@libs/graphql/types';
|
||||||
|
@ -39,7 +40,14 @@ function RecentlyDeletedTribes({ server, t }: Props) {
|
||||||
return (
|
return (
|
||||||
<Paper>
|
<Paper>
|
||||||
<TableToolbar>
|
<TableToolbar>
|
||||||
<Typography variant="h4">{t('recentlyDeletedTribes.title')}</Typography>
|
<Typography variant="h4">
|
||||||
|
<Link
|
||||||
|
to={SERVER_PAGE.RANKINGS_PAGE.TRIBE_PAGE.ARCHIVE_PAGE}
|
||||||
|
params={{ key: server }}
|
||||||
|
>
|
||||||
|
{t('recentlyDeletedTribes.title')}
|
||||||
|
</Link>
|
||||||
|
</Typography>
|
||||||
</TableToolbar>
|
</TableToolbar>
|
||||||
<Table
|
<Table
|
||||||
columns={COLUMNS.map((column, index) => ({
|
columns={COLUMNS.map((column, index) => ({
|
||||||
|
|
Reference in New Issue
Block a user