| 1 |
import { __, sprintf } from '@wordpress/i18n' |
| 2 |
import classnames from 'classnames' |
| 3 |
import React from 'react' |
| 4 |
import type { InsightsChartView } from '../../types/Insights' |
| 5 |
|
| 6 |
interface ViewToggleButtonProps<View extends InsightsChartView> extends InsightsChartViewToggleProps<View> { |
| 7 |
icon: string |
| 8 |
label: string |
| 9 |
currentView: View |
| 10 |
} |
| 11 |
|
| 12 |
const ViewToggleButton = <View extends InsightsChartView,>( |
| 13 |
{ icon, title, label, view, setView, currentView }: ViewToggleButtonProps<View> |
| 14 |
) => |
| 15 |
<button |
| 16 |
type="button" |
| 17 |
className={classnames('insights-chart-view-toggle-option', { 'active-view': currentView === view })} |
| 18 |
aria-pressed={currentView === view} |
| 19 |
title={title} |
| 20 |
onClick={() => setView(view)} |
| 21 |
> |
| 22 |
<span className={`dashicons dashicons-${icon}`} aria-hidden="true" /> |
| 23 |
<span className="screen-reader-text">{label}</span> |
| 24 |
</button> |
| 25 |
|
| 26 |
export interface InsightsChartViewToggleProps<View extends InsightsChartView> { |
| 27 |
title: string |
| 28 |
view: View |
| 29 |
setView: (view: View) => void |
| 30 |
views: readonly View[] |
| 31 |
} |
| 32 |
|
| 33 |
const VIEW_OPTIONS: Readonly<Record<InsightsChartView, { icon: string, label: string, title: string }>> = { |
| 34 |
pie: { |
| 35 |
icon: 'chart-pie', |
| 36 |
label: __('Chart view', 'code-snippets'), |
| 37 |
title: __('Switch to chart view', 'code-snippets') |
| 38 |
}, |
| 39 |
bar: { |
| 40 |
icon: 'chart-bar', |
| 41 |
label: __('List view', 'code-snippets'), |
| 42 |
title: __('Switch to list view', 'code-snippets') |
| 43 |
}, |
| 44 |
cloud: { |
| 45 |
icon: 'cloud', |
| 46 |
label: __('Tags cloud view', 'code-snippets'), |
| 47 |
title: __('Switch to tags cloud view', 'code-snippets') |
| 48 |
} |
| 49 |
} |
| 50 |
|
| 51 |
export const InsightsChartViewToggle = <View extends InsightsChartView,>( |
| 52 |
{ title, view, setView, views }: InsightsChartViewToggleProps<View> |
| 53 |
) => |
| 54 |
<div |
| 55 |
className="insights-chart-view-toggle" |
| 56 |
role="group" |
| 57 |
aria-label={sprintf(__('%s chart view', 'code-snippets'), title)} |
| 58 |
> |
| 59 |
{views.map(option => <ViewToggleButton |
| 60 |
key={option} |
| 61 |
view={option} |
| 62 |
{...VIEW_OPTIONS[option]} |
| 63 |
setView={setView} |
| 64 |
currentView={view} |
| 65 |
/>)} |
| 66 |
</div> |
| 67 |
|
