Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-02-09 00:18:00 +01:00
Code Issues Projects Releases Wiki Activity

bug fix

Browse Source
This commit is contained in:
andreas-unleash 2022-08-08 16:07:52 +03:00
parent 1686de0fb5
commit a0091ffabc
1 changed files with 35 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultsTable.tsx
View File

@ -1,6 +1,6 @@
import { useEffect, useMemo, useState } from 'react'; import { useEffect, useMemo, useState } from 'react';
import { useSearchParams } from 'react-router-dom'; import { useSearchParams } from 'react-router-dom';
import { SortingRule, useGlobalFilter, useSortBy, useTable } from 'react-table'; import {SortingRule, useFlexLayout, useGlobalFilter, useSortBy, useTable} from 'react-table';
import { import {
SortableTableHeader, SortableTableHeader,
@ -8,7 +8,7 @@ import {
TableBody, TableBody,
TableCell, TableCell,
TablePlaceholder, TablePlaceholder,
TableRow, TableRow, VirtualizedTable,
} from 'component/common/Table'; } from 'component/common/Table';
import { SearchHighlightProvider } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext'; import { SearchHighlightProvider } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext';
import { sortTypes } from 'utils/sortTypes'; import { sortTypes } from 'utils/sortTypes';
@ -27,6 +27,8 @@ import { Box, Typography, useMediaQuery, useTheme } from '@mui/material';
import useLoading from 'hooks/useLoading'; import useLoading from 'hooks/useLoading';
import { VariantCell } from './VariantCell/VariantCell'; import { VariantCell } from './VariantCell/VariantCell';
import { FeatureResultInfoPopoverCell } from './FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell'; import { FeatureResultInfoPopoverCell } from './FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell';
import {PageHeader} from "../../../common/PageHeader/PageHeader";
import {PageContent} from "../../../common/PageContent/PageContent";
const defaultSort: SortingRule<string> = { id: 'name' }; const defaultSort: SortingRule<string> = { id: 'name' };
const { value, setValue } = createLocalStorage( const { value, setValue } = createLocalStorage(
@ -152,11 +154,9 @@ export const PlaygroundResultsTable = ({
})); }));
const { const {
getTableProps,
getTableBodyProps,
headerGroups, headerGroups,
state: { sortBy },
rows, rows,
state: { sortBy },
prepareRow, prepareRow,
setHiddenColumns, setHiddenColumns,
} = useTable( } = useTable(
@ -168,11 +168,13 @@ export const PlaygroundResultsTable = ({
autoResetGlobalFilter: false, autoResetGlobalFilter: false,
autoResetSortBy: false, autoResetSortBy: false,
disableSortRemove: true, disableSortRemove: true,
disableMultiSort: true,
defaultColumn: { defaultColumn: {
Cell: HighlightCell, Cell: HighlightCell,
}, },
}, },
useGlobalFilter, useGlobalFilter,
useFlexLayout,
useSortBy useSortBy
); );
@ -213,35 +215,29 @@ export const PlaygroundResultsTable = ({
// eslint-disable-next-line react-hooks/exhaustive-deps -- don't re-render after search params change // eslint-disable-next-line react-hooks/exhaustive-deps -- don't re-render after search params change
}, [loading, sortBy, searchValue]); }, [loading, sortBy, searchValue]);
return (
<>
<Box
sx={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
mb: 3,
}}
>
<Typography variant="subtitle1" sx={{ ml: 1 }}>
{features !== undefined && !loading
? `Results (${
rows.length < data.length
? `${rows.length} of ${data.length}`
: data.length
})`
: 'Results'}
</Typography>
<Search
initialValue={searchValue} return (
onChange={setSearchValue} <PageContent
hasFilters isLoading={loading}
getSearchContext={getSearchContext} header={
disabled={loading} <PageHeader
containerStyles={{ marginLeft: '1rem', maxWidth: '400px' }} titleElement={`Results (${
rows.length < data.length
? `${rows.length} of ${data.length}`
: data.length
})`}
actions={
<Search
initialValue={searchValue}
onChange={setSearchValue}
hasFilters
getSearchContext={getSearchContext}
/>
}
/> />
</Box> }
>
<ConditionallyRender <ConditionallyRender
condition={!loading && !data} condition={!loading && !data}
@ -254,33 +250,12 @@ export const PlaygroundResultsTable = ({
)} )}
elseShow={() => ( elseShow={() => (
<Box ref={ref}> <Box ref={ref}>
<SearchHighlightProvider <SearchHighlightProvider value={getSearchText(searchValue)}>
value={getSearchText(searchValue)} <VirtualizedTable
> rows={rows}
<Table {...getTableProps()} rowHeight="standard"> headerGroups={headerGroups}
<SortableTableHeader prepareRow={prepareRow}
headerGroups={headerGroups as any} />
/>
<TableBody {...getTableBodyProps()}>
{rows.map(row => {
prepareRow(row);
return (
<TableRow
hover
{...row.getRowProps()}
>
{row.cells.map(cell => (
<TableCell
{...cell.getCellProps()}
>
{cell.render('Cell')}
</TableCell>
))}
</TableRow>
);
})}
</TableBody>
</Table>
</SearchHighlightProvider> </SearchHighlightProvider>
<ConditionallyRender <ConditionallyRender
condition={ condition={
@ -307,6 +282,6 @@ export const PlaygroundResultsTable = ({
</Box> </Box>
)} )}
/> />
</> </PageContent>
); );
}; };