Do not display border bottom for last widget of tab (#16856)
Closes [2030](https://github.com/twentyhq/core-team-issues/issues/2030). Determines if a widget is the last visible widget in its parent tab. The hook: - Finds the tab containing the widget - Filters widgets based on visibility rules (respects conditionalDisplay and edit mode) - Returns true if the current widget is the last in the filtered list - Updated `WidgetCard`: Added isLastWidget prop to conditionally apply border-bottom for the side-column variant - Updated `WidgetRenderer`: Integrates the hook and passes isLastWidget to WidgetCard
This commit is contained in:
@@ -9,6 +9,7 @@ import { pageLayoutResizingWidgetIdComponentState } from '@/page-layout/states/p
|
||||
import { type PageLayoutWidget } from '@/page-layout/types/PageLayoutWidget';
|
||||
import { PageLayoutWidgetForbiddenDisplay } from '@/page-layout/widgets/components/PageLayoutWidgetForbiddenDisplay';
|
||||
import { WidgetContentRenderer } from '@/page-layout/widgets/components/WidgetContentRenderer';
|
||||
import { useIsCurrentWidgetLastOfTab } from '@/page-layout/widgets/hooks/useIsCurrentWidgetLastOfTab';
|
||||
import { useIsInPinnedTab } from '@/page-layout/widgets/hooks/useIsInPinnedTab';
|
||||
import { useWidgetActions } from '@/page-layout/widgets/hooks/useWidgetActions';
|
||||
import { useWidgetPermissions } from '@/page-layout/widgets/hooks/useWidgetPermissions';
|
||||
@@ -67,6 +68,8 @@ export const WidgetRenderer = ({ widget }: WidgetRendererProps) => {
|
||||
|
||||
const { currentPageLayout } = useCurrentPageLayoutOrThrow();
|
||||
|
||||
const isLastWidget = useIsCurrentWidgetLastOfTab(widget.id);
|
||||
|
||||
// TODO: when we have more widgets without headers, we should use a more generic approach to hide the header
|
||||
// each widget type could have metadata (e.g., hasHeader: boolean or headerMode: 'always' | 'editOnly' | 'never')
|
||||
const isRichTextWidget = widget.type === WidgetType.STANDALONE_RICH_TEXT;
|
||||
@@ -119,6 +122,7 @@ export const WidgetRenderer = ({ widget }: WidgetRendererProps) => {
|
||||
isEditing={isEditing}
|
||||
isDragging={isDragging}
|
||||
isResizing={isResizing}
|
||||
isLastWidget={isLastWidget}
|
||||
onMouseEnter={handleMouseEnter}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
data-widget-id={widget.id}
|
||||
|
||||
Reference in New Issue
Block a user