Enhance ObjectTable Row Selection with Dynamic Class Handling
All checks were successful
farmcontrol/farmcontrol-ui/pipeline/head This commit looks good
All checks were successful
farmcontrol/farmcontrol-ui/pipeline/head This commit looks good
- Introduced a new getRowClassName function to dynamically apply the 'object-table-row-selected' class based on bulk selection criteria. - Updated the ObjectTable component to utilize the new row class logic, improving visual feedback for selected rows. - Enhanced CSS styles for selected rows in the dashboard table, providing distinct background colors for better user experience during selection and hover states.
This commit is contained in:
parent
ebcf959e85
commit
d63d925d2c
@ -1480,6 +1480,48 @@ span.ant-skeleton-input.ant-skeleton-input-sm.text-skeleton {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.ant-table-wrapper.dashboard-table
|
||||
.ant-table-tbody
|
||||
> tr.object-table-row-selected
|
||||
> .ant-table-cell,
|
||||
.ant-table-wrapper.dashboard-table
|
||||
.ant-table-tbody
|
||||
> tr.object-table-row-selected
|
||||
> .ant-table-cell.ant-table-cell-fix-left,
|
||||
.ant-table-wrapper.dashboard-table
|
||||
.ant-table-tbody
|
||||
> tr.object-table-row-selected
|
||||
> .ant-table-cell.ant-table-cell-fix-right {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--color-primary) 5%,
|
||||
var(--color-button-background)
|
||||
);
|
||||
}
|
||||
|
||||
.ant-table-wrapper.dashboard-table
|
||||
.ant-table-tbody
|
||||
> tr.object-table-row-selected:hover
|
||||
> .ant-table-cell,
|
||||
.ant-table-wrapper.dashboard-table
|
||||
.ant-table-tbody
|
||||
> tr.object-table-row-selected
|
||||
> .ant-table-cell.ant-table-cell-row-hover,
|
||||
.ant-table-wrapper.dashboard-table
|
||||
.ant-table-tbody
|
||||
> tr.object-table-row-selected:hover
|
||||
> .ant-table-cell.ant-table-cell-fix-left,
|
||||
.ant-table-wrapper.dashboard-table
|
||||
.ant-table-tbody
|
||||
> tr.object-table-row-selected:hover
|
||||
> .ant-table-cell.ant-table-cell-fix-right {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--color-primary) 15%,
|
||||
var(--color-button-background)
|
||||
);
|
||||
}
|
||||
|
||||
.objectKanbanContainerWrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
@ -2266,6 +2266,18 @@ const ObjectTable = forwardRef(
|
||||
[isEditing, registerForm]
|
||||
)
|
||||
|
||||
const getRowClassName = useCallback(
|
||||
(record) =>
|
||||
classNames({
|
||||
'object-table-row-selected':
|
||||
canBulkSelect &&
|
||||
!record?.isSkeleton &&
|
||||
(bulkSelection?.allMatching === true ||
|
||||
selectedRowIdSet.has(String(record?._id)))
|
||||
}),
|
||||
[bulkSelection?.allMatching, canBulkSelect, selectedRowIdSet]
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
const container = tableContentRef.current
|
||||
|
||||
@ -2406,6 +2418,7 @@ const ObjectTable = forwardRef(
|
||||
size={size}
|
||||
components={components}
|
||||
onRow={onRow}
|
||||
rowClassName={getRowClassName}
|
||||
/>
|
||||
</Spin>
|
||||
)}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user