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 { RightDrawerFooter } from '@/ui/layout/right-drawer/components/RightDrawerFooter';
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 { useTabList } from '@/ui/layout/tab/hooks/useTabList';
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
@ -126,16 +125,12 @@ export const ShowPageSubContainer = ({
)}
<StyledShowPageRightContainer isMobile={isMobile}>
<StyledTabListContainer shouldDisplay={visibleTabs.length > 1}>
<ShowPageTabListFromUrlOptionalEffect
isInRightDrawer={isInRightDrawer}
componentInstanceId={tabListComponentId}
tabListIds={tabs.map((tab) => tab.id)}
/>
<TabList
behaveAsLinks={!isInRightDrawer}
loading={loading || isNewViewableRecordLoading}
tabListInstanceId={tabListComponentId}
tabs={tabs}
isInRightDrawer={isInRightDrawer}
/>
</StyledTabListContainer>
{(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 { TabListScope } from '@/ui/layout/tab/scopes/TabListScope';
import { LayoutCard } from '@/ui/layout/tab/types/LayoutCard';
@ -25,6 +26,7 @@ type TabListProps = {
loading?: boolean;
behaveAsLinks?: boolean;
className?: string;
isInRightDrawer?: boolean;
};
const StyledContainer = styled.div`
@ -41,6 +43,7 @@ export const TabList = ({
tabListInstanceId,
loading,
behaveAsLinks = true,
isInRightDrawer,
className,
}: TabListProps) => {
const visibleTabs = tabs.filter((tab) => !tab.hide);
@ -59,6 +62,11 @@ export const TabList = ({
return (
<TabListScope tabListScopeId={tabListInstanceId}>
<TabListFromUrlOptionalEffect
isInRightDrawer={!!isInRightDrawer}
componentInstanceId={tabListInstanceId}
tabListIds={tabs.map((tab) => tab.id)}
/>
<ScrollWrapper
defaultEnableYScroll={false}
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 { useLocation } from 'react-router-dom';
type ShowPageTabListFromUrlOptionalEffectProps = {
type TabListFromUrlOptionalEffectProps = {
componentInstanceId: string;
tabListIds: string[];
isInRightDrawer: boolean;
};
export const ShowPageTabListFromUrlOptionalEffect = ({
export const TabListFromUrlOptionalEffect = ({
componentInstanceId,
tabListIds,
isInRightDrawer,
}: ShowPageTabListFromUrlOptionalEffectProps) => {
}: TabListFromUrlOptionalEffectProps) => {
const location = useLocation();
const { activeTabId, setActiveTabId } = useTabList(componentInstanceId);