Baptiste Devessier
e0d1f74648
- Allow widgets to be hidden based on device's type conditions: desktop or mobile - Create two widgets for rich text fields on tasks and notes. One widget is displayed below fields on mobile (and in the right drawer); the other is displayed on a separate tab on desktop - In read mode, hide tabs if they contain no visible widgets. If there is no tab left to display, display at least the first one with no widgets. - In edit mode, display all tabs and all widgets. ## Demo https://github.com/user-attachments/assets/65ef1261-3902-4432-a420-48983b763b2c Closes https://github.com/twentyhq/core-team-issues/issues/1811
33 lines
1.0 KiB
TypeScript
33 lines
1.0 KiB
TypeScript
import { PageLayoutContent } from '@/page-layout/components/PageLayoutContent';
|
|
import { PageLayoutContentProvider } from '@/page-layout/contexts/PageLayoutContentContext';
|
|
import { useCurrentPageLayoutOrThrow } from '@/page-layout/hooks/useCurrentPageLayoutOrThrow';
|
|
import { usePageLayoutTabWithVisibleWidgetsOrThrow } from '@/page-layout/hooks/usePageLayoutTabWithVisibleWidgetsOrThrow';
|
|
import { getTabLayoutMode } from '@/page-layout/utils/getTabLayoutMode';
|
|
|
|
type PageLayoutMainContentProps = {
|
|
tabId: string;
|
|
};
|
|
|
|
export const PageLayoutMainContent = ({
|
|
tabId,
|
|
}: PageLayoutMainContentProps) => {
|
|
const { currentPageLayout } = useCurrentPageLayoutOrThrow();
|
|
const activeTab = usePageLayoutTabWithVisibleWidgetsOrThrow(tabId);
|
|
|
|
const layoutMode = getTabLayoutMode({
|
|
tab: activeTab,
|
|
pageLayoutType: currentPageLayout.type,
|
|
});
|
|
|
|
return (
|
|
<PageLayoutContentProvider
|
|
value={{
|
|
tabId,
|
|
layoutMode,
|
|
}}
|
|
>
|
|
<PageLayoutContent />
|
|
</PageLayoutContentProvider>
|
|
);
|
|
};
|