admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Tablist fix (#9216)

Browse Source
This commit is contained in:
nitin
2024-12-23 22:01:04 +05:30
committed by GitHub
parent b3c1f62a5f
commit 49da7d2ca0
3 changed files with 12 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSubContainer.tsx
View File

@ -9,7 +9,6 @@ import { recordStoreFamilyState } from '@/object-record/record-store/states/reco
import { ObjectRecord } from '@/object-record/types/ObjectRecord'; import { ObjectRecord } from '@/object-record/types/ObjectRecord';
import { RightDrawerFooter } from '@/ui/layout/right-drawer/components/RightDrawerFooter'; import { RightDrawerFooter } from '@/ui/layout/right-drawer/components/RightDrawerFooter';
import { ShowPageLeftContainer } from '@/ui/layout/show-page/components/ShowPageLeftContainer'; import { ShowPageLeftContainer } from '@/ui/layout/show-page/components/ShowPageLeftContainer';
import { ShowPageTabListFromUrlOptionalEffect } from '@/ui/layout/show-page/components/ShowPageTabListFromUrlOptionalEffect';
import { SingleTabProps, TabList } from '@/ui/layout/tab/components/TabList'; import { SingleTabProps, TabList } from '@/ui/layout/tab/components/TabList';
import { useTabList } from '@/ui/layout/tab/hooks/useTabList'; import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile'; import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
@ -126,16 +125,12 @@ export const ShowPageSubContainer = ({
)} )}
<StyledShowPageRightContainer isMobile={isMobile}> <StyledShowPageRightContainer isMobile={isMobile}>
<StyledTabListContainer shouldDisplay={visibleTabs.length > 1}> <StyledTabListContainer shouldDisplay={visibleTabs.length > 1}>
<ShowPageTabListFromUrlOptionalEffect
isInRightDrawer={isInRightDrawer}
componentInstanceId={tabListComponentId}
tabListIds={tabs.map((tab) => tab.id)}
/>
<TabList <TabList
behaveAsLinks={!isInRightDrawer} behaveAsLinks={!isInRightDrawer}
loading={loading || isNewViewableRecordLoading} loading={loading || isNewViewableRecordLoading}
tabListInstanceId={tabListComponentId} tabListInstanceId={tabListComponentId}
tabs={tabs} tabs={tabs}
isInRightDrawer={isInRightDrawer}
/> />
</StyledTabListContainer> </StyledTabListContainer>
{(isMobile || isInRightDrawer) && summaryCard} {(isMobile || isInRightDrawer) && summaryCard}

8
packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx
View File

@ -1,3 +1,4 @@
import { TabListFromUrlOptionalEffect } from '@/ui/layout/tab/components/TabListFromUrlOptionalEffect';
import { useTabList } from '@/ui/layout/tab/hooks/useTabList'; import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
import { TabListScope } from '@/ui/layout/tab/scopes/TabListScope'; import { TabListScope } from '@/ui/layout/tab/scopes/TabListScope';
import { LayoutCard } from '@/ui/layout/tab/types/LayoutCard'; import { LayoutCard } from '@/ui/layout/tab/types/LayoutCard';
@ -25,6 +26,7 @@ type TabListProps = {
loading?: boolean; loading?: boolean;
behaveAsLinks?: boolean; behaveAsLinks?: boolean;
className?: string; className?: string;
isInRightDrawer?: boolean;
}; };
const StyledContainer = styled.div` const StyledContainer = styled.div`
@ -41,6 +43,7 @@ export const TabList = ({
tabListInstanceId, tabListInstanceId,
loading, loading,
behaveAsLinks = true, behaveAsLinks = true,
isInRightDrawer,
className, className,
}: TabListProps) => { }: TabListProps) => {
const visibleTabs = tabs.filter((tab) => !tab.hide); const visibleTabs = tabs.filter((tab) => !tab.hide);
@ -59,6 +62,11 @@ export const TabList = ({
return ( return (
<TabListScope tabListScopeId={tabListInstanceId}> <TabListScope tabListScopeId={tabListInstanceId}>
<TabListFromUrlOptionalEffect
isInRightDrawer={!!isInRightDrawer}
componentInstanceId={tabListInstanceId}
tabListIds={tabs.map((tab) => tab.id)}
/>
<ScrollWrapper <ScrollWrapper
defaultEnableYScroll={false} defaultEnableYScroll={false}
contextProviderName="tabList" contextProviderName="tabList"

6
packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageTabListFromUrlOptionalEffect.tsx → packages/twenty-front/src/modules/ui/layout/tab/components/TabListFromUrlOptionalEffect.tsx
View File

@ -2,17 +2,17 @@ import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
import { useEffect } from 'react'; import { useEffect } from 'react';
import { useLocation } from 'react-router-dom'; import { useLocation } from 'react-router-dom';
type ShowPageTabListFromUrlOptionalEffectProps = { type TabListFromUrlOptionalEffectProps = {
componentInstanceId: string; componentInstanceId: string;
tabListIds: string[]; tabListIds: string[];
isInRightDrawer: boolean; isInRightDrawer: boolean;
}; };
export const ShowPageTabListFromUrlOptionalEffect = ({ export const TabListFromUrlOptionalEffect = ({
componentInstanceId, componentInstanceId,
tabListIds, tabListIds,
isInRightDrawer, isInRightDrawer,
}: ShowPageTabListFromUrlOptionalEffectProps) => { }: TabListFromUrlOptionalEffectProps) => {
const location = useLocation(); const location = useLocation();
const { activeTabId, setActiveTabId } = useTabList(componentInstanceId); const { activeTabId, setActiveTabId } = useTabList(componentInstanceId);