Skip to content

Commit b13faf3

Browse files
mpblockympblocky
authored
[HUMAN App] fix: table header props ref warning (#3239)
1 parent 99ab64e commit b13faf3

File tree

3 files changed

+110
-150
lines changed

3 files changed

+110
-150
lines changed

‎packages/apps/human-app/frontend/src/modules/worker/jobs/available-jobs/hooks/use-get-available-jobs-columns.tsx‎

Lines changed: 28 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -49,24 +49,19 @@ export const useGetAvailableJobsColumns = (
4949
Cell: (props) => {
5050
return getNetworkName(props.row.original.chain_id);
5151
},
52-
muiTableHeadCellProps: () => ({
53-
component: (props) => {
54-
return (
55-
<TableHeaderCell
56-
{...props}
57-
headerText={t('worker.jobs.network')}
58-
iconType="filter"
59-
popoverContent={
60-
<AvailableJobsNetworkFilter
61-
chainIdsEnabled={chainIdsEnabled}
62-
showClearButton
63-
showTitle
64-
/>
65-
}
52+
Header: (
53+
<TableHeaderCell
54+
headerText={t('worker.jobs.network')}
55+
iconType="filter"
56+
popoverContent={
57+
<AvailableJobsNetworkFilter
58+
chainIdsEnabled={chainIdsEnabled}
59+
showClearButton
60+
showTitle
6661
/>
67-
);
68-
},
69-
}),
62+
}
63+
/>
64+
),
7065
},
7166
{
7267
accessorKey: 'reward_amount',
@@ -82,16 +77,13 @@ export const useGetAvailableJobsColumns = (
8277
/>
8378
);
8479
},
85-
muiTableHeadCellProps: () => ({
86-
component: (props) => (
87-
<TableHeaderCell
88-
{...props}
89-
headerText={t('worker.jobs.rewardAmount')}
90-
iconType="filter"
91-
popoverContent={<AvailableJobsRewardAmountSort />}
92-
/>
93-
),
94-
}),
80+
Header: (
81+
<TableHeaderCell
82+
headerText={t('worker.jobs.rewardAmount')}
83+
iconType="filter"
84+
popoverContent={<AvailableJobsRewardAmountSort />}
85+
/>
86+
),
9587
},
9688
{
9789
accessorKey: 'job_type',
@@ -102,20 +94,15 @@ export const useGetAvailableJobsColumns = (
10294
const label = t(`jobTypeLabels.${row.original.job_type as JobType}`);
10395
return <Chip label={label} />;
10496
},
105-
muiTableHeadCellProps: () => ({
106-
component: (props) => {
107-
return (
108-
<TableHeaderCell
109-
{...props}
110-
headerText={t('worker.jobs.jobType')}
111-
iconType="filter"
112-
popoverContent={
113-
<AvailableJobsJobTypeFilter showClearButton showTitle />
114-
}
115-
/>
116-
);
117-
},
118-
}),
97+
Header: (
98+
<TableHeaderCell
99+
headerText={t('worker.jobs.jobType')}
100+
iconType="filter"
101+
popoverContent={
102+
<AvailableJobsJobTypeFilter showClearButton showTitle />
103+
}
104+
/>
105+
),
119106
},
120107
{
121108
accessorKey: 'escrow_address',

‎packages/apps/human-app/frontend/src/modules/worker/jobs/my-jobs/components/desktop/columns.tsx‎

Lines changed: 63 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -47,20 +47,15 @@ export const getColumnsDefinition = ({
4747
Cell: (props) => {
4848
return getNetworkName(props.row.original.chain_id);
4949
},
50-
muiTableHeadCellProps: () => ({
51-
component: (props) => {
52-
return (
53-
<TableHeaderCell
54-
{...props}
55-
headerText={t('worker.jobs.network')}
56-
iconType="filter"
57-
popoverContent={
58-
<MyJobsNetworkFilter chainIdsEnabled={chainIdsEnabled} />
59-
}
60-
/>
61-
);
62-
},
63-
}),
50+
Header: (
51+
<TableHeaderCell
52+
headerText={t('worker.jobs.network')}
53+
iconType="filter"
54+
popoverContent={
55+
<MyJobsNetworkFilter chainIdsEnabled={chainIdsEnabled} />
56+
}
57+
/>
58+
),
6459
},
6560
{
6661
accessorKey: 'reward_amount',
@@ -76,16 +71,13 @@ export const getColumnsDefinition = ({
7671
/>
7772
);
7873
},
79-
muiTableHeadCellProps: () => ({
80-
component: (props) => (
81-
<TableHeaderCell
82-
{...props}
83-
headerText={t('worker.jobs.rewardAmount')}
84-
iconType="filter"
85-
popoverContent={<MyJobsRewardAmountSort />}
86-
/>
87-
),
88-
}),
74+
Header: (
75+
<TableHeaderCell
76+
headerText={t('worker.jobs.rewardAmount')}
77+
iconType="filter"
78+
popoverContent={<MyJobsRewardAmountSort />}
79+
/>
80+
),
8981
},
9082
{
9183
accessorKey: 'job_type',
@@ -96,18 +88,13 @@ export const getColumnsDefinition = ({
9688
const label = t(`jobTypeLabels.${row.original.job_type as JobType}`);
9789
return <Chip label={label} />;
9890
},
99-
muiTableHeadCellProps: () => ({
100-
component: (props) => {
101-
return (
102-
<TableHeaderCell
103-
{...props}
104-
headerText={t('worker.jobs.jobType')}
105-
iconType="filter"
106-
popoverContent={<MyJobsJobTypeFilter />}
107-
/>
108-
);
109-
},
110-
}),
91+
Header: (
92+
<TableHeaderCell
93+
headerText={t('worker.jobs.jobType')}
94+
iconType="filter"
95+
popoverContent={<MyJobsJobTypeFilter />}
96+
/>
97+
),
11198
},
11299
{
113100
accessorKey: 'expires_at',
@@ -117,18 +104,13 @@ export const getColumnsDefinition = ({
117104
Cell: (props) => {
118105
return formatDate(props.row.original.expires_at);
119106
},
120-
muiTableHeadCellProps: () => ({
121-
component: (props) => {
122-
return (
123-
<TableHeaderCell
124-
{...props}
125-
headerText={t('worker.jobs.expiresAt')}
126-
iconType="filter"
127-
popoverContent={<MyJobsExpiresAtSort />}
128-
/>
129-
);
130-
},
131-
}),
107+
Header: (
108+
<TableHeaderCell
109+
headerText={t('worker.jobs.expiresAt')}
110+
iconType="filter"
111+
popoverContent={<MyJobsExpiresAtSort />}
112+
/>
113+
),
132114
},
133115
{
134116
accessorKey: 'status',
@@ -139,18 +121,13 @@ export const getColumnsDefinition = ({
139121
const status = props.row.original.status;
140122
return <StatusChip status={status} />;
141123
},
142-
muiTableHeadCellProps: () => ({
143-
component: (props) => {
144-
return (
145-
<TableHeaderCell
146-
{...props}
147-
headerText={t('worker.jobs.status')}
148-
iconType="filter"
149-
popoverContent={<MyJobsStatusFilter />}
150-
/>
151-
);
152-
},
153-
}),
124+
Header: (
125+
<TableHeaderCell
126+
headerText={t('worker.jobs.status')}
127+
iconType="filter"
128+
popoverContent={<MyJobsStatusFilter />}
129+
/>
130+
),
154131
},
155132
{
156133
accessorKey: 'assignment_id',
@@ -162,37 +139,31 @@ export const getColumnsDefinition = ({
162139
<MyJobsTableActions job={props.row.original} />
163140
</Grid>
164141
),
165-
muiTableHeadCellProps: () => ({
166-
component: (props) => {
167-
return (
168-
<td {...props}>
169-
<Grid
170-
sx={{
171-
display: 'flex',
172-
justifyContent: 'flex-end',
173-
width: '100%',
174-
}}
175-
>
176-
<Button
177-
size="small"
178-
sx={{
179-
paddingTop: '0.4rem',
180-
paddingBottom: '0.4rem',
181-
paddingInline: '1rem',
182-
fontSize: '13px',
183-
}}
184-
loading={isRefreshTasksPending}
185-
type="button"
186-
variant="outlined"
187-
onClick={refreshData}
188-
>
189-
{t('worker.jobs.refresh')}
190-
<RefreshIcon sx={{ marginLeft: '0.5rem' }} />
191-
</Button>
192-
</Grid>
193-
</td>
194-
);
195-
},
196-
}),
142+
Header: (
143+
<Grid
144+
sx={{
145+
display: 'flex',
146+
justifyContent: 'flex-end',
147+
width: '100%',
148+
}}
149+
>
150+
<Button
151+
size="small"
152+
sx={{
153+
paddingTop: '0.4rem',
154+
paddingBottom: '0.4rem',
155+
paddingInline: '1rem',
156+
fontSize: '13px',
157+
}}
158+
loading={isRefreshTasksPending}
159+
type="button"
160+
variant="outlined"
161+
onClick={refreshData}
162+
>
163+
{t('worker.jobs.refresh')}
164+
<RefreshIcon sx={{ marginLeft: '0.5rem' }} />
165+
</Button>
166+
</Grid>
167+
),
197168
},
198169
];

‎packages/apps/human-app/frontend/src/shared/components/ui/table/table-header-cell.tsx‎

Lines changed: 19 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { forwardRef, useState } from 'react';
1+
import React, { useState } from 'react';
22
import Popover from '@mui/material/Popover';
33
import type { TableCellBaseProps } from '@mui/material/TableCell/TableCell';
44
import { type IconType, TextHeaderWithIcon } from '../text-header-with-icon';
@@ -18,18 +18,18 @@ type PropsWithoutIcon = CommonProps & {
1818

1919
type HeaderCellProps = PropsWithoutIcon | PropsWithIcon;
2020

21-
export const TableHeaderCell = forwardRef<
22-
HTMLTableDataCellElement,
23-
HeaderCellProps
24-
>(function TableHeaderCell(
25-
{ popoverContent, headerText, iconType, ...rest },
26-
ref
27-
) {
28-
const [anchorEl, setAnchorEl] = useState<HTMLTableDataCellElement | null>(
29-
null
30-
);
21+
export function TableHeaderCell({
22+
popoverContent,
23+
headerText,
24+
iconType,
25+
}: HeaderCellProps) {
26+
const [anchorEl, setAnchorEl] = useState<HTMLDivElement | null>(null);
3127

32-
const handleClick = (event: React.MouseEvent<HTMLTableDataCellElement>) => {
28+
const handleClick = (
29+
event:
30+
| React.MouseEvent<HTMLDivElement>
31+
| React.KeyboardEvent<HTMLDivElement>
32+
) => {
3333
setAnchorEl(event.currentTarget);
3434
};
3535

@@ -42,12 +42,15 @@ export const TableHeaderCell = forwardRef<
4242

4343
const getHeader = () => {
4444
if (!iconType) {
45-
return <td onClick={handleClick} {...rest} />;
45+
// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
46+
return <div onClick={handleClick}>{headerText}</div>;
4647
}
48+
4749
return (
48-
<td onClick={handleClick} {...rest}>
50+
// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
51+
<div onClick={handleClick}>
4952
<TextHeaderWithIcon iconType={iconType} text={headerText} />
50-
</td>
53+
</div>
5154
);
5255
};
5356

@@ -63,12 +66,11 @@ export const TableHeaderCell = forwardRef<
6366
id={id}
6467
onClose={handleClose}
6568
open={open}
66-
ref={ref}
6769
>
6870
{popoverContent}
6971
</Popover>
7072
</>
7173
);
72-
});
74+
}
7375

7476
TableHeaderCell.displayName = 'TableHeaderCell';

0 commit comments

Comments
 (0)