Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 | import { SectionTabs } from '@jetpack-premium-analytics/ui';
import { __ } from '@wordpress/i18n';
import { useMemo } from 'react';
import { SETTINGS_SECTION } from '../../config';
import styles from './dashboard-sections.module.scss';
import type { DashboardSection, DashboardSectionId } from '../../config';
import type { ReactNode } from 'react';
type DashboardSectionsProps = {
/**
* The sections to render, in order.
*/
sections: DashboardSection[];
/**
* Whether to end the tab bar with the Settings tab.
*/
withSettingsTab?: boolean;
/**
* Whether the Settings tab is shown but cannot be selected.
*/
isSettingsTabDisabled?: boolean;
/**
* The currently active section ID.
*/
value: DashboardSectionId;
/**
* Called with the new section ID when the user selects a different section.
*/
onChange: ( id: DashboardSectionId ) => void;
/**
* Section panel content.
*/
children?: ReactNode;
};
/**
* The analytics dashboard section tab bar.
*
* Purely presentational: it renders the section tab triggers and reports selection
* changes upward. Panel children are rendered inside the same Tabs.Root so the
* tablist and section content share a complete tab/panel relationship.
*
* Tabs are keyed by the section `slug` (the URL-facing identifier the active
* section state uses), not the namespaced `id`. The Settings tab is not a
* registered section, so another plugin cannot place a section after it.
*
* @param {DashboardSectionsProps} props - The props for the DashboardSections component.
* @return The section tab bar element.
*/
export function DashboardSections( {
sections,
withSettingsTab = false,
isSettingsTabDisabled = false,
value,
onChange,
children,
}: DashboardSectionsProps ) {
const tabs = useMemo(
() => [
...sections.map( ( { slug, label } ) => ( { id: slug, label } ) ),
...( withSettingsTab
? [
{
id: SETTINGS_SECTION,
label: __( 'Settings', 'jetpack-premium-analytics-pkg' ),
disabled: isSettingsTabDisabled,
},
]
: [] ),
],
[ sections, withSettingsTab, isSettingsTabDisabled ]
);
return (
<SectionTabs tabs={ tabs } value={ value } onChange={ onChange } rootClassName={ styles.root }>
{ children }
</SectionTabs>
);
}
|