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;
|
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 {
|
.objectKanbanContainerWrapper {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|||||||
@ -2266,6 +2266,18 @@ const ObjectTable = forwardRef(
|
|||||||
[isEditing, registerForm]
|
[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(() => {
|
useEffect(() => {
|
||||||
const container = tableContentRef.current
|
const container = tableContentRef.current
|
||||||
|
|
||||||
@ -2406,6 +2418,7 @@ const ObjectTable = forwardRef(
|
|||||||
size={size}
|
size={size}
|
||||||
components={components}
|
components={components}
|
||||||
onRow={onRow}
|
onRow={onRow}
|
||||||
|
rowClassName={getRowClassName}
|
||||||
/>
|
/>
|
||||||
</Spin>
|
</Spin>
|
||||||
)}
|
)}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user