Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Components: replace TabPanel with Tabs in the editor Document Overview sidebar #57082

Merged
merged 13 commits into from
Jan 30, 2024
Next Next commit
implement Tabs
chad1008 committed Jan 29, 2024
commit 81db200a740fdecceecafac5716997749167346c
78 changes: 36 additions & 42 deletions packages/editor/src/components/list-view-sidebar/index.js
Original file line number Diff line number Diff line change
@@ -2,7 +2,10 @@
* WordPress dependencies
*/
import { __experimentalListView as ListView } from '@wordpress/block-editor';
import { Button, TabPanel } from '@wordpress/components';
import {
Button,
privateApis as componentsPrivateApis,
} from '@wordpress/components';
import { useFocusOnMount, useMergeRefs } from '@wordpress/compose';
import { useDispatch, useSelect } from '@wordpress/data';
import { focus } from '@wordpress/dom';
@@ -19,6 +22,8 @@ import ListViewOutline from './list-view-outline';
import { unlock } from '../../lock-unlock';
import { store as editorStore } from '../../store';

const { Tabs } = unlock( componentsPrivateApis );

export default function ListViewSidebar() {
const { setIsListViewOpened } = useDispatch( editorStore );
const { getListViewToggleRef } = unlock( useSelect( editorStore ) );
@@ -108,62 +113,51 @@ export default function ListViewSidebar() {
// It is the same shortcut to open but that is defined as a global shortcut and only fires when the sidebar is closed.
useShortcut( 'core/editor/toggle-list-view', handleToggleListViewShortcut );

/**
* Render tab content for a given tab name.
*
* @param {string} tabName The name of the tab to render.
*/
function renderTabContent( tabName ) {
if ( tabName === 'list-view' ) {
return (
<div className="editor-list-view-sidebar__list-view-panel-content">
<ListView dropZoneElement={ dropZoneElement } />
</div>
);
}
return <ListViewOutline />;
}

return (
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
<div
className="editor-list-view-sidebar"
onKeyDown={ closeOnEscape }
ref={ sidebarRef }
>
<Button
className="editor-list-view-sidebar__close-button"
icon={ closeSmall }
label={ __( 'Close' ) }
onClick={ closeListView }
/>
<TabPanel
<div
className="editor-list-view-sidebar__tab-panel"
ref={ tabPanelRef }
onSelect={ ( tabName ) => setTab( tabName ) }
selectOnMove={ false }
tabs={ [
{
name: 'list-view',
title: _x( 'List View', 'Post overview' ),
className: 'editor-list-view-sidebar__panel-tab',
},
{
name: 'outline',
title: _x( 'Outline', 'Post overview' ),
className: 'editor-list-view-sidebar__panel-tab',
},
] }
>
{ ( currentTab ) => (
<Tabs
selectOnMove={ false }
onSelect={ ( tabName ) => setTab( tabName ) }
>
<Tabs.TabList>
<Tabs.Tab tabId="list-view">
{ _x( 'List View', 'Post overview' ) }
</Tabs.Tab>
<Tabs.Tab tabId="outline">
{ _x( 'Outline', 'Post overview' ) }
</Tabs.Tab>
</Tabs.TabList>
<Button
className="editor-list-view-sidebar__close-button"
icon={ closeSmall }
label={ __( 'Close' ) }
onClick={ closeListView }
/>

<div
className="editor-list-view-sidebar__list-view-container"
ref={ listViewContainerRef }
>
{ renderTabContent( currentTab.name ) }
<Tabs.TabPanel tabId="list-view" focusable={ false }>
<div className="edit-post-editor__list-view-panel-content">
<ListView dropZoneElement={ dropZoneElement } />
</div>
</Tabs.TabPanel>
<Tabs.TabPanel tabId="outline" focusable={ false }>
<ListViewOutline />
</Tabs.TabPanel>
</div>
) }
</TabPanel>
</Tabs>
</div>
</div>
);
}