twhelp/version.tribalwarshelp.com
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix Table size prop

Browse Source
This commit is contained in:
Dawid Wysokiński 2020-11-14 08:40:19 +01:00
parent 6da65ae684
commit 8419e8a599
5 changed files with 68 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/common/Table/Table.tsx
View File

@ -80,6 +80,7 @@ function Table<T extends object>({
orderBy={orderBy}
orderDirection={orderDirection}
onRequestSort={onRequestSort}
size={size}
onSelectAll={() => {
if (onSelect) {
onSelect(data);
@ -91,6 +92,7 @@ function Table<T extends object>({
{loading ? (
<TableLoading
columns={columns}
size={size}
rowsPerPage={footerProps?.rowsPerPage ?? 50}
/>
) : data.length > 0 ? (
@ -105,6 +107,7 @@ function Table<T extends object>({
selected={isSelected(item)}
selection={selection}
columns={columns}
size={size}
onSelect={row => {
if (onSelect) {
onSelect([row]);

4
src/common/Table/TableToolbar.tsx
View File

@ -4,9 +4,7 @@ import clsx from 'clsx';
import { makeStyles } from '@material-ui/core/styles';
import { Toolbar, ToolbarProps } from '@material-ui/core';
export type Props = {
children?: React.ReactNode;
} & ToolbarProps;
export type Props = ToolbarProps;
const useStyles = makeStyles(theme => {
return {

46
src/features/ServerPage/features/IndexPage/components/Paper/Paper.tsx Normal file
View File

@ -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;

10
src/features/ServerPage/features/IndexPage/components/RecentlyDeletedPlayers/RecentlyDeletedPlayers.tsx
View File

@ -4,10 +4,11 @@ import { SERVER_PAGE } from '@config/routes';
import { RECENTLY_DELETED_PLAYERS } from './queries';
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 Table from '@common/Table/Table';
import Link from '@common/Link/Link';
import Paper from '../Paper/Paper';
import { TFunction } from 'i18next';
import { PlayersQueryVariables } from '@libs/graphql/types';
@ -40,7 +41,12 @@ function RecentlyDeletedPlayers({ server, t }: Props) {
<Paper>
<TableToolbar>
<Typography variant="h4">
{t('recentlyDeletedPlayers.title')}
<Link
to={SERVER_PAGE.RANKINGS_PAGE.PLAYER_PAGE.ARCHIVE_PAGE}
params={{ key: server }}
>
{t('recentlyDeletedPlayers.title')}
</Link>
</Typography>
</TableToolbar>
<Table

12
src/features/ServerPage/features/IndexPage/components/RecentlyDeletedTribes/RecentlyDeletedTribes.tsx
View File

@ -4,10 +4,11 @@ import { SERVER_PAGE } from '@config/routes';
import { RECENTLY_DELETED_TRIBES } from './queries';
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 TableToolbar from '@common/Table/TableToolbar';
import Link from '@common/Link/Link';
import Paper from '../Paper/Paper';
import { TFunction } from 'i18next';
import { TribesQueryVariables } from '@libs/graphql/types';
@ -39,7 +40,14 @@ function RecentlyDeletedTribes({ server, t }: Props) {
return (
<Paper>
<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>
<Table
columns={COLUMNS.map((column, index) => ({