mirror of
https://github.com/blitzkit/blitzkit.git
synced 2026-10-31 14:39:51 +01:00
fix: table sizing
This commit is contained in:
tresabhi committed
1 parent
84dd3317dc
commit
ac35540871
1 file changed
+125
-120
@@ -36,6 +36,7 @@ import {
|
|||||||
import { debounce } from 'lodash-es';
|
import { debounce } from 'lodash-es';
|
||||||
import { useEffect, useMemo, useRef, useState } from 'react';
|
import { useEffect, useMemo, useRef, useState } from 'react';
|
||||||
import { PageWrapper } from '../../../components/PageWrapper';
|
import { PageWrapper } from '../../../components/PageWrapper';
|
||||||
|
import { StickyTableRoot } from '../../../components/StickyTableRoot';
|
||||||
import { TankRowHeaderCell } from '../../../components/TankRowHeaderCell';
|
import { TankRowHeaderCell } from '../../../components/TankRowHeaderCell';
|
||||||
import { Session, type SessionTracking } from '../../../stores/session';
|
import { Session, type SessionTracking } from '../../../stores/session';
|
||||||
|
|
||||||
@@ -300,138 +301,142 @@ function Content() {
|
|||||||
)}
|
)}
|
||||||
|
|
||||||
{session.tracking && delta && delta.length > 0 && (
|
{session.tracking && delta && delta.length > 0 && (
|
||||||
<Table.Root variant="surface">
|
<Flex justify="center">
|
||||||
<Table.Header>
|
<StickyTableRoot variant="surface">
|
||||||
<Table.Row>
|
<Table.Header>
|
||||||
<Table.ColumnHeaderCell>Tank</Table.ColumnHeaderCell>
|
<Table.Row>
|
||||||
|
<Table.ColumnHeaderCell>Tank</Table.ColumnHeaderCell>
|
||||||
|
|
||||||
{session.columns.map((column, index) => (
|
{session.columns.map((column, index) => (
|
||||||
<Table.ColumnHeaderCell
|
<Table.ColumnHeaderCell
|
||||||
width="0"
|
align="center"
|
||||||
key={column}
|
width="0"
|
||||||
style={{ position: 'relative' }}
|
key={column}
|
||||||
>
|
style={{ position: 'relative' }}
|
||||||
{index === 0 && session.columns.length < 4 && (
|
|
||||||
<DropdownMenu.Root>
|
|
||||||
<DropdownMenu.Trigger>
|
|
||||||
<IconButton
|
|
||||||
size="1"
|
|
||||||
variant="surface"
|
|
||||||
style={{
|
|
||||||
position: 'absolute',
|
|
||||||
left: 0,
|
|
||||||
top: '50%',
|
|
||||||
transform: 'translate(-100%, -50%)',
|
|
||||||
zIndex: 1,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<PlusIcon />
|
|
||||||
</IconButton>
|
|
||||||
</DropdownMenu.Trigger>
|
|
||||||
|
|
||||||
<DropdownMenu.Content>
|
|
||||||
{compositeStatsKeys
|
|
||||||
.filter((item) => !session.columns.includes(item))
|
|
||||||
.map((key) => (
|
|
||||||
<DropdownMenu.Item
|
|
||||||
key={key}
|
|
||||||
onClick={() => {
|
|
||||||
mutateSession((draft) => {
|
|
||||||
(draft as SessionTracking).columns.unshift(
|
|
||||||
key,
|
|
||||||
);
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{strings.common.composite_stats[key]}
|
|
||||||
</DropdownMenu.Item>
|
|
||||||
))}
|
|
||||||
</DropdownMenu.Content>
|
|
||||||
</DropdownMenu.Root>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<Select.Root
|
|
||||||
value={column}
|
|
||||||
onValueChange={(value) => {
|
|
||||||
mutateSession((draft) => {
|
|
||||||
if (value === 'remove') {
|
|
||||||
(draft as SessionTracking).columns.splice(index, 1);
|
|
||||||
} else {
|
|
||||||
(draft as SessionTracking).columns[index] =
|
|
||||||
value as CompositeStatsKey;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
<Select.Trigger variant="ghost" />
|
{index === 0 && session.columns.length < 4 && (
|
||||||
|
<DropdownMenu.Root>
|
||||||
|
<DropdownMenu.Trigger>
|
||||||
|
<IconButton
|
||||||
|
size="1"
|
||||||
|
variant="surface"
|
||||||
|
style={{
|
||||||
|
position: 'absolute',
|
||||||
|
left: 0,
|
||||||
|
top: '50%',
|
||||||
|
transform: 'translate(-100%, -50%)',
|
||||||
|
zIndex: 1,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<PlusIcon />
|
||||||
|
</IconButton>
|
||||||
|
</DropdownMenu.Trigger>
|
||||||
|
|
||||||
<Select.Content>
|
<DropdownMenu.Content>
|
||||||
{compositeStatsKeys
|
{compositeStatsKeys
|
||||||
.filter(
|
.filter((item) => !session.columns.includes(item))
|
||||||
(item) =>
|
.map((key) => (
|
||||||
!session.columns.includes(item) || item === column,
|
<DropdownMenu.Item
|
||||||
)
|
key={key}
|
||||||
.map((key) => (
|
onClick={() => {
|
||||||
<Select.Item key={key} value={key}>
|
mutateSession((draft) => {
|
||||||
{strings.common.composite_stats[key]}
|
(draft as SessionTracking).columns.unshift(
|
||||||
</Select.Item>
|
key,
|
||||||
))}
|
);
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{strings.common.composite_stats[key]}
|
||||||
|
</DropdownMenu.Item>
|
||||||
|
))}
|
||||||
|
</DropdownMenu.Content>
|
||||||
|
</DropdownMenu.Root>
|
||||||
|
)}
|
||||||
|
|
||||||
<Select.Separator />
|
<Select.Root
|
||||||
|
value={column}
|
||||||
|
onValueChange={(value) => {
|
||||||
|
mutateSession((draft) => {
|
||||||
|
if (value === 'remove') {
|
||||||
|
(draft as SessionTracking).columns.splice(index, 1);
|
||||||
|
} else {
|
||||||
|
(draft as SessionTracking).columns[index] =
|
||||||
|
value as CompositeStatsKey;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Select.Trigger variant="ghost" />
|
||||||
|
|
||||||
<Select.Item value="remove">Remove</Select.Item>
|
<Select.Content>
|
||||||
</Select.Content>
|
{compositeStatsKeys
|
||||||
</Select.Root>
|
.filter(
|
||||||
</Table.ColumnHeaderCell>
|
(item) =>
|
||||||
))}
|
!session.columns.includes(item) ||
|
||||||
</Table.Row>
|
item === column,
|
||||||
</Table.Header>
|
)
|
||||||
|
.map((key) => (
|
||||||
|
<Select.Item key={key} value={key}>
|
||||||
|
{strings.common.composite_stats[key]}
|
||||||
|
</Select.Item>
|
||||||
|
))}
|
||||||
|
|
||||||
<Table.Body>
|
<Select.Separator />
|
||||||
<Table.Row
|
|
||||||
style={{
|
<Select.Item value="remove">Remove</Select.Item>
|
||||||
overflow: 'hidden',
|
</Select.Content>
|
||||||
}}
|
</Select.Root>
|
||||||
>
|
</Table.ColumnHeaderCell>
|
||||||
<Table.RowHeaderCell
|
))}
|
||||||
|
</Table.Row>
|
||||||
|
</Table.Header>
|
||||||
|
|
||||||
|
<Table.Body>
|
||||||
|
<Table.Row
|
||||||
style={{
|
style={{
|
||||||
paddingLeft: 32,
|
overflow: 'hidden',
|
||||||
position: 'relative',
|
|
||||||
overflowY: 'hidden',
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Total
|
<Table.RowHeaderCell
|
||||||
</Table.RowHeaderCell>
|
|
||||||
{session.columns.map((column) => (
|
|
||||||
<Table.Cell key={column}>
|
|
||||||
{formatCompositeStat(total![column], column, total!)}
|
|
||||||
</Table.Cell>
|
|
||||||
))}
|
|
||||||
</Table.Row>
|
|
||||||
|
|
||||||
{delta.map(({ tank, composite }) => {
|
|
||||||
return (
|
|
||||||
<Table.Row
|
|
||||||
key={tank.id}
|
|
||||||
style={{
|
style={{
|
||||||
overflow: 'hidden',
|
paddingLeft: 32,
|
||||||
|
position: 'relative',
|
||||||
|
overflowY: 'hidden',
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<TankRowHeaderCell tank={tank} />
|
Total
|
||||||
{session.columns.map((column) => (
|
</Table.RowHeaderCell>
|
||||||
<Table.Cell key={column}>
|
{session.columns.map((column) => (
|
||||||
{formatCompositeStat(
|
<Table.Cell align="center" key={column}>
|
||||||
composite[column],
|
{formatCompositeStat(total![column], column, total!)}
|
||||||
column,
|
</Table.Cell>
|
||||||
composite,
|
))}
|
||||||
)}
|
</Table.Row>
|
||||||
</Table.Cell>
|
|
||||||
))}
|
{delta.map(({ tank, composite }) => {
|
||||||
</Table.Row>
|
return (
|
||||||
);
|
<Table.Row
|
||||||
})}
|
key={tank.id}
|
||||||
</Table.Body>
|
style={{
|
||||||
</Table.Root>
|
overflow: 'hidden',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<TankRowHeaderCell tank={tank} />
|
||||||
|
{session.columns.map((column) => (
|
||||||
|
<Table.Cell align="center" key={column}>
|
||||||
|
{formatCompositeStat(
|
||||||
|
composite[column],
|
||||||
|
column,
|
||||||
|
composite,
|
||||||
|
)}
|
||||||
|
</Table.Cell>
|
||||||
|
))}
|
||||||
|
</Table.Row>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</Table.Body>
|
||||||
|
</StickyTableRoot>
|
||||||
|
</Flex>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{session.tracking && delta && delta.length === 0 && (
|
{session.tracking && delta && delta.length === 0 && (
|
||||||
|
|||||||
Reference in new issue
Block a user