implement Tabs

WordPress · Dec 21, 2023 · baf9caa · baf9caa
1 parent e07eb47
commit baf9caa
Showing 1 changed file with 50 additions and 17 deletions.
diff --git a/packages/interface/src/components/preferences-modal-tabs/index.js b/packages/interface/src/components/preferences-modal-tabs/index.js
@@ -13,15 +13,22 @@ import {
 	__experimentalText as Text,
 	__experimentalTruncate as Truncate,
 	FlexItem,
-	TabPanel,
 	Card,
 	CardHeader,
 	CardBody,
+	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
-import { useMemo, useCallback, useState } from '@wordpress/element';
+import { useMemo, useState } from '@wordpress/element';
 import { chevronLeft, chevronRight, Icon } from '@wordpress/icons';
 import { isRTL, __ } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../../lock-unlock';
+
+const { Tabs } = unlock( componentsPrivateApis );
+
 const PREFERENCES_MENU = 'preferences-menu';
 
 export default function PreferencesModalTabs( { sections } ) {
@@ -53,26 +60,52 @@ export default function PreferencesModalTabs( { sections } ) {
 		return mappedTabs;
 	}, [ sections ] );
 
-	const getCurrentTab = useCallback(
-		( tab ) => sectionsContentMap[ tab.name ] || null,
-		[ sectionsContentMap ]
-	);
+	// const getCurrentTab = useCallback(
+	// 	( tab ) => sectionsContentMap[ tab.name ] || null,
+	// 	[ sectionsContentMap ]
+	// );
 
 	let modalContent;
 	// We render different components based on the viewport size.
 	if ( isLargeViewport ) {
 		modalContent = (
-			<TabPanel
-				className="interface-preferences__tabs"
-				tabs={ tabs }
-				initialTabName={
-					activeMenu !== PREFERENCES_MENU ? activeMenu : undefined
-				}
-				onSelect={ setActiveMenu }
-				orientation="vertical"
-			>
-				{ getCurrentTab }
-			</TabPanel>
+			<div className="interface-preferences__tabs">
+				<Tabs
+					initialTabId={
+						activeMenu !== PREFERENCES_MENU ? activeMenu : undefined
+					}
+					onSelect={ setActiveMenu }
+					orientation="vertical"
+				>
+					<Tabs.TabList>
+						{ tabs.map( ( tab ) => (
+							<Tabs.Tab tabId={ tab.name } key={ tab.name }>
+								{ tab.title }
+							</Tabs.Tab>
+						) ) }
+					</Tabs.TabList>
+					{ tabs.map( ( tab ) => (
+						<Tabs.TabPanel
+							tabId={ tab.name }
+							key={ tab.name }
+							focusable={ false }
+						>
+							{ sectionsContentMap[ tab.name ] || null }
+						</Tabs.TabPanel>
+					) ) }
+				</Tabs>
+				{ /* <TabPanel
+					className="interface-preferences__tabs"
+					tabs={ tabs }
+					initialTabName={
+						activeMenu !== PREFERENCES_MENU ? activeMenu : undefined
+					}
+					onSelect={ setActiveMenu }
+					orientation="vertical"
+				>
+					{ getCurrentTab }
+				</TabPanel> */ }
+			</div>
 		);
 	} else {
 		modalContent = (