| 1 |
/** |
| 2 |
* WordPress dependencies |
| 3 |
*/ |
| 4 |
import { |
| 5 |
Button, |
| 6 |
DropdownMenu, |
| 7 |
__experimentalHStack as HStack, |
| 8 |
__experimentalHeading as Heading, |
| 9 |
Spinner, |
| 10 |
} from '@wordpress/components'; |
| 11 |
import { __ } from '@wordpress/i18n'; |
| 12 |
import type { ReactNode } from 'react'; |
| 13 |
|
| 14 |
/** |
| 15 |
* PerformanceStatPanel component props. |
| 16 |
* |
| 17 |
* @since 3.14.0 |
| 18 |
*/ |
| 19 |
type PerformanceStatPanelProps = { |
| 20 |
title: string; |
| 21 |
icon?: React.JSX.Element; |
| 22 |
subtitle?: string; |
| 23 |
level?: Parameters<typeof Heading>[0]['level']; |
| 24 |
children: ReactNode; |
| 25 |
controls?: Parameters<typeof DropdownMenu>[0]['controls']; |
| 26 |
dropdownChildren?: Parameters<typeof DropdownMenu>[0]['children']; |
| 27 |
onClick?: () => void; |
| 28 |
isOpen?: boolean; |
| 29 |
isLoading?: boolean; |
| 30 |
} |
| 31 |
|
| 32 |
/** |
| 33 |
* The PerformanceStatPanel component. |
| 34 |
* This component is the raw panel used to display performance stats. |
| 35 |
* |
| 36 |
* If `dropdownChildren` is set, it will be used as the DropdownMenu. |
| 37 |
* if `controls` is set, it will be used to render the DropdownMenu. |
| 38 |
* |
| 39 |
* @since 3.14.0 |
| 40 |
* |
| 41 |
* @param {PerformanceStatPanelProps} props The component's props. |
| 42 |
* |
| 43 |
* @return {import('react').JSX.Element} The PerformanceStatPanel JSX Element. |
| 44 |
*/ |
| 45 |
export const PerformanceStatPanel = ( |
| 46 |
{ title, |
| 47 |
icon, |
| 48 |
subtitle, |
| 49 |
level = 2, |
| 50 |
children, |
| 51 |
controls, |
| 52 |
onClick, |
| 53 |
isOpen, |
| 54 |
isLoading, |
| 55 |
dropdownChildren }: Readonly<PerformanceStatPanelProps> |
| 56 |
): React.JSX.Element => { |
| 57 |
return ( |
| 58 |
<div className="performance-stat-panel"> |
| 59 |
<HStack className={ 'panel-header level-' + level }> |
| 60 |
<Heading level={ level }>{ title }</Heading> |
| 61 |
{ subtitle && ! isOpen && |
| 62 |
<span className="panel-subtitle">{ subtitle }</span> |
| 63 |
} |
| 64 |
{ ( controls && ! dropdownChildren ) && ( |
| 65 |
<DropdownMenu |
| 66 |
icon={ icon } |
| 67 |
label={ __( 'Settings', 'wp-parsely' ) } |
| 68 |
className="panel-settings-button" |
| 69 |
controls={ controls } |
| 70 |
/> |
| 71 |
) } |
| 72 |
{ dropdownChildren && ( |
| 73 |
<DropdownMenu |
| 74 |
icon={ icon } |
| 75 |
label={ __( 'Settings', 'wp-parsely' ) } |
| 76 |
className="panel-settings-button" |
| 77 |
children={ dropdownChildren } |
| 78 |
/> |
| 79 |
) } |
| 80 |
{ icon && ! dropdownChildren && ! controls && ( |
| 81 |
<Button |
| 82 |
icon={ icon } |
| 83 |
className="panel-settings-button" |
| 84 |
isPressed={ isOpen } |
| 85 |
onClick={ onClick } |
| 86 |
/> |
| 87 |
) } |
| 88 |
</HStack> |
| 89 |
<div className="panel-body"> |
| 90 |
{ isLoading ? ( |
| 91 |
<div |
| 92 |
className="parsely-spinner-wrapper" |
| 93 |
data-testid="parsely-spinner-wrapper" |
| 94 |
> |
| 95 |
<Spinner /> |
| 96 |
</div> |
| 97 |
) : ( children ) } |
| 98 |
</div> |
| 99 |
</div> |
| 100 |
); |
| 101 |
}; |
| 102 |
|
