Skip to content

Commit 67508a5

Browse files
buberddsbuberdds
authored
Merge pull request #2215 from oasisprotocol/mz/table
Replace MUI Table with Oasis UI Library components
2 parents ff7ce72 + 6388ac8 commit 67508a5

File tree

16 files changed

+85
-112
lines changed

16 files changed

+85
-112
lines changed

‎.changelog/2215.internal.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Replace MUI Table with Oasis UI Library components

‎src/app/components/LearningMaterialsCard/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export const LearningMaterialsCard: FC<LearningMaterialsCardProps> = ({ children
2222
rel="noopener noreferrer"
2323
target="_blank"
2424
textColor="primary"
25-
className="font-medium "
25+
className="font-medium px-4"
2626
>
2727
{t('common.viewAll')}
2828
</Link>

‎src/app/components/RuntimeEvents/RuntimeEventDetails.tsx‎

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,14 @@ import { TFunction } from 'i18next'
44
import { Trans, useTranslation } from 'react-i18next'
55
import { StyledDescriptionList } from '../StyledDescriptionList'
66
import { useScreenSize } from '../../hooks/useScreensize'
7-
import Table from '@mui/material/Table'
8-
import TableHead from '@mui/material/TableHead'
9-
import TableRow from '@mui/material/TableRow'
10-
import TableCell from '@mui/material/TableCell'
11-
import TableBody from '@mui/material/TableBody'
7+
import {
8+
Table,
9+
TableHeader,
10+
TableHead,
11+
TableBody,
12+
TableRow,
13+
TableCell,
14+
} from '@oasisprotocol/ui-library/src/components/table'
1215
import { AccountLink } from '../Account/AccountLink'
1316
import { CopyToClipboard } from '../CopyToClipboard'
1417
import { SearchScope } from '../../../types/searchScope'
@@ -321,15 +324,15 @@ const RuntimeEventDetailsInner: FC<{
321324
</Box>
322325
<br />
323326
{event.evm_log_params && event.evm_log_params.length > 0 && (
324-
<Table sx={{ border: '1px solid lightgray' }}>
325-
<TableHead>
327+
<Table className="border">
328+
<TableHeader>
326329
<TableRow>
327-
<TableCell>{t('common.name')}</TableCell>
328-
<TableCell>{t('common.type')}</TableCell>
329-
<TableCell>{t('common.data')}</TableCell>
330+
<TableHead>{t('common.name')}</TableHead>
331+
<TableHead>{t('common.type')}</TableHead>
332+
<TableHead>{t('common.data')}</TableHead>
330333
<TableCell />
331334
</TableRow>
332-
</TableHead>
335+
</TableHeader>
333336
<TableBody>
334337
{event.evm_log_params.map((param, index) => (
335338
<EvmLogRow scope={scope} key={`param-${index}`} param={param} />

‎src/app/components/Table/index.tsx‎

Lines changed: 59 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,19 @@
1-
import { FC, ReactNode } from 'react'
1+
import { ComponentProps, FC, ReactNode } from 'react'
22
import { styled } from '@mui/material/styles'
33
import Box from '@mui/material/Box'
44
import { Skeleton } from '@oasisprotocol/ui-library/src/components/ui/skeleton'
5-
import TableContainer from '@mui/material/TableContainer'
6-
import MuiTable from '@mui/material/Table'
7-
import TableHead from '@mui/material/TableHead'
8-
import TableBody from '@mui/material/TableBody'
9-
import TableRow, { TableRowProps as MuiTableRowProps } from '@mui/material/TableRow'
10-
import TableCell from '@mui/material/TableCell'
11-
import { useScreenSize } from '../../hooks/useScreensize'
12-
import { COLORS } from '../../../styles/theme/colors'
5+
import {
6+
Table as BaseTable,
7+
TableHeader,
8+
TableHead,
9+
TableBody,
10+
TableRow,
11+
TableCell,
12+
} from '@oasisprotocol/ui-library/src/components/table'
1313
import { TablePagination, TablePaginationProps } from './TablePagination'
1414
import { backgroundColorAnimation } from '../../../styles/theme/animations'
1515
import { CardEmptyState } from '../CardEmptyState'
16+
import { cn } from '@oasisprotocol/ui-library/src/lib/utils'
1617

1718
type SkeletonTableRowsProps = {
1819
rowsNumber: number
@@ -32,7 +33,7 @@ const SkeletonTableRows: FC<SkeletonTableRowsProps> = ({ rowsNumber, columnsNumb
3233
</>
3334
)
3435

35-
type StyledTableRowProps = MuiTableRowProps & {
36+
type StyledTableRowProps = ComponentProps<typeof TableRow> & {
3637
highlight?: boolean
3738
backgroundColor?: string
3839
}
@@ -50,6 +51,18 @@ export enum TableCellAlign {
5051
Right = 'right',
5152
}
5253

54+
const getAlignClass = (align?: TableCellAlign): string => {
55+
switch (align) {
56+
case TableCellAlign.Center:
57+
return 'text-center'
58+
case TableCellAlign.Right:
59+
return 'text-right'
60+
case TableCellAlign.Left:
61+
default:
62+
return 'text-left'
63+
}
64+
}
65+
5366
type TableCellProps = {
5467
align?: TableCellAlign
5568
content: ReactNode
@@ -78,7 +91,6 @@ type TableProps = {
7891
pagination: false | TablePaginationProps
7992
rows?: TableRowProps[]
8093
rowsNumber?: number
81-
stickyColumn?: boolean
8294
extraHorizontalSpaceOnMobile?: boolean | undefined
8395
alwaysWaitWhileLoading?: boolean | undefined
8496
/**
@@ -90,88 +102,67 @@ type TableProps = {
90102
emptyMessage?: string | undefined
91103
}
92104

93-
const stickyColumnStyles = {
94-
position: 'sticky',
95-
left: 0,
96-
backgroundColor: COLORS.antiFlashWhite,
97-
zIndex: 1,
98-
}
99-
100-
const extraHorizontalPaddingStyles = {
101-
px: 4,
102-
}
103-
104105
export const Table: FC<TableProps> = ({
105106
columns,
106107
isLoading,
107108
name,
108109
pagination,
109110
rows,
110111
rowsNumber = 5,
111-
stickyColumn = false,
112112
extraHorizontalSpaceOnMobile = false,
113113
alwaysWaitWhileLoading = false,
114114
emptyMessage = undefined,
115115
}) => {
116-
const { isMobile } = useScreenSize()
117-
118116
return !isLoading && !rows?.length ? ( // This is known to be empty
119117
emptyMessage ? ( // If we have a message, show it
120118
<CardEmptyState label={emptyMessage} />
121119
) : null // otherwise just show nothing
122120
) : (
123121
<>
124-
<TableContainer>
125-
<MuiTable aria-label={name}>
126-
<TableHead>
127-
<TableRow>
128-
{columns.map((column, index) => {
129-
if (column.hide) {
122+
<BaseTable aria-label={name}>
123+
<TableHeader>
124+
<TableRow>
125+
{columns.map((column, index) => {
126+
if (column.hide) {
127+
return null
128+
}
129+
return (
130+
<TableHead
131+
key={column.key}
132+
className={getAlignClass(column.align)}
133+
style={{
134+
width: column.width || 'auto',
135+
}}
136+
>
137+
{column.content}
138+
</TableHead>
139+
)
140+
})}
141+
</TableRow>
142+
</TableHeader>
143+
<TableBody>
144+
{(alwaysWaitWhileLoading || !rows) && isLoading && (
145+
<SkeletonTableRows rowsNumber={rowsNumber} columnsNumber={columns.length} />
146+
)}
147+
{rows?.map(row => (
148+
<StyledTableRow key={row.key} highlight={row.highlight} backgroundColor={row.backgroundColor}>
149+
{row.data.map((cell, index) => {
150+
if (cell.hide) {
130151
return null
131152
}
132153
return (
133154
<TableCell
134-
key={column.key}
135-
align={column.align}
136-
sx={{
137-
width: column.width || 'auto',
138-
...(stickyColumn && !index && isMobile ? stickyColumnStyles : {}),
139-
}}
155+
key={cell.key}
156+
className={cn(getAlignClass(cell.align), extraHorizontalSpaceOnMobile && 'sm:px-8')}
140157
>
141-
{column.content}
158+
{cell.content}
142159
</TableCell>
143160
)
144161
})}
145-
</TableRow>
146-
</TableHead>
147-
<TableBody>
148-
{(alwaysWaitWhileLoading || !rows) && isLoading && (
149-
<SkeletonTableRows rowsNumber={rowsNumber} columnsNumber={columns.length} />
150-
)}
151-
{rows?.map(row => (
152-
<StyledTableRow key={row.key} highlight={row.highlight} backgroundColor={row.backgroundColor}>
153-
{row.data.map((cell, index) => {
154-
if (cell.hide) {
155-
return null
156-
}
157-
return (
158-
<TableCell
159-
key={cell.key}
160-
align={cell.align}
161-
sx={{
162-
...(stickyColumn && !index && isMobile ? stickyColumnStyles : {}),
163-
...(extraHorizontalSpaceOnMobile && isMobile ? extraHorizontalPaddingStyles : {}),
164-
}}
165-
>
166-
{cell.content}
167-
</TableCell>
168-
)
169-
})}
170-
</StyledTableRow>
171-
))}
172-
</TableBody>
173-
</MuiTable>
174-
</TableContainer>
162+
</StyledTableRow>
163+
))}
164+
</TableBody>
165+
</BaseTable>
175166
{pagination && (
176167
<Box sx={{ display: 'flex', justifyContent: 'center' }}>
177168
<TablePagination {...pagination} />

‎src/app/pages/ConsensusAccountDetailsPage/Staking.tsx‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@ import { Delegations } from '../../components/Delegations'
1919
import { wallet } from '../../utils/externalLinks'
2020
import { t } from 'i18next'
2121
import { ConsensusAccountCardEmptyState } from './ConsensusAccountCardEmptyState'
22-
import { tableCellClasses } from '@mui/material/TableCell'
2322

2423
export const StyledCard = styled(Card)(({ theme }) => ({
2524
flex: 1,
@@ -30,9 +29,6 @@ export const StyledCard = styled(Card)(({ theme }) => ({
3029
padding: `0 ${theme.spacing(4)}`,
3130
marginBottom: 0,
3231
},
33-
[`.${tableCellClasses.head}`]: {
34-
fontWeight: 'normal',
35-
},
3632
}))
3733

3834
type StakingProps = {

‎src/app/pages/ConsensusDashboardPage/AccountsCard.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ export const AccountsCard: FC<{ scope: ConsensusScope }> = ({ scope }) => {
3434
<Card>
3535
<div className="flex justify-between items-center mb-4 pr-4 sm:pr-0">
3636
<Typography variant="h3">{t('account.listTitle')}</Typography>
37-
<Link asChild textColor="primary" className="font-medium">
37+
<Link asChild textColor="primary" className="font-medium px-4">
3838
<RouterLink to={RouteUtils.getAccountsRoute(scope.network)}>{t('common.viewAll')}</RouterLink>
3939
</Link>
4040
</div>

‎src/app/pages/ConsensusDashboardPage/LatestConsensusBlocks.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ export const LatestConsensusBlocks: FC<{ scope: ConsensusScope }> = ({ scope })
4545
<Card sx={{ flex: 1 }}>
4646
<div className="flex justify-between items-center mb-4 pr-4 sm:pr-0">
4747
<Typography variant="h3">{t('blocks.latest')}</Typography>
48-
<Link asChild className="font-medium" textColor="primary">
48+
<Link asChild className="font-medium px-4" textColor="primary">
4949
<RouterLink to={RouteUtils.getLatestBlocksRoute(scope)}>{t('common.viewAll')}</RouterLink>
5050
</Link>
5151
</div>

‎src/app/pages/ConsensusDashboardPage/LatestConsensusTransactions.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ export const LatestConsensusTransactions: FC<{
7171
<ConsensusTransactionMethodFilter value={txMethod} setValue={setTxMethod} />
7272
)}
7373
</div>
74-
<Link asChild className="font-medium" textColor="primary">
74+
<Link asChild className="font-medium px-4" textColor="primary">
7575
<RouterLink to={RouteUtils.getLatestTransactionsRoute(scope)}>{t('common.viewAll')}</RouterLink>
7676
</Link>
7777
</div>

‎src/app/pages/ConsensusDashboardPage/NetworkProposalsCard.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ export const NetworkProposalsCard: FC<{ scope: ConsensusScope }> = ({ scope }) =
3636
<Card>
3737
<div className="flex justify-between items-center mb-4 pr-4 sm:pr-0">
3838
<Typography variant="h3">{t('networkProposal.listTitle')}</Typography>
39-
<Link asChild className="font-medium" textColor="primary">
39+
<Link asChild className="font-medium px-4" textColor="primary">
4040
<RouterLink to={RouteUtils.getProposalsRoute(network)}>{t('common.viewAll')}</RouterLink>
4141
</Link>
4242
</div>

‎src/app/pages/ConsensusDashboardPage/Validators.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ export const ValidatorsCard: FC<{ scope: ConsensusScope }> = ({ scope }) => {
5858
</Typography>
5959
</ErrorBoundary>
6060

61-
<Link asChild textColor="primary" className="font-medium">
61+
<Link asChild textColor="primary" className="font-medium px-4">
6262
<RouterLink to={RouteUtils.getValidatorsRoute(scope.network)}>{t('common.viewAll')}</RouterLink>
6363
</Link>
6464
</div>

0 commit comments

Comments
 (0)