ListTableStats.tsx
51 lines
| 1 | import StatWidget from "@givewp/admin/components/StatWidget"; |
| 2 | import { __ } from "@wordpress/i18n"; |
| 3 | import { amountFormatter } from '@givewp/src/Admin/utils'; |
| 4 | import styles from "./styles.module.scss"; |
| 5 | |
| 6 | /** |
| 7 | * @since 4.12.0 add support for currency |
| 8 | * @since 4.10.0 |
| 9 | */ |
| 10 | export type StatConfig = { |
| 11 | label: string; |
| 12 | currency?: string; |
| 13 | upgrade?: { |
| 14 | href: string; |
| 15 | tooltip: string; |
| 16 | }; |
| 17 | }; |
| 18 | |
| 19 | /** |
| 20 | * @since 4.10.0 |
| 21 | */ |
| 22 | type ListTableStatsProps = { |
| 23 | config: Record<string, StatConfig>; |
| 24 | values: Record<string, number>; |
| 25 | }; |
| 26 | |
| 27 | /** |
| 28 | * @since 4.12.0 add support for currency formatting |
| 29 | * @since 4.10.0 |
| 30 | */ |
| 31 | export default function ListTableStats({config, values}: ListTableStatsProps) { |
| 32 | return ( |
| 33 | <section className={styles.tableStatsContainer} role="region" aria-label={__('Donation statistics', 'give')}> |
| 34 | {Object.entries(config) |
| 35 | .filter(([key]) => Object.keys(values).includes(key)) |
| 36 | .map(([key, statConfig]) => ( |
| 37 | <StatWidget |
| 38 | key={key} |
| 39 | className={styles.tableStatWidget} |
| 40 | {...statConfig} |
| 41 | value={statConfig.currency ? amountFormatter(statConfig.currency, { |
| 42 | minimumFractionDigits: 2, |
| 43 | maximumFractionDigits: 2, |
| 44 | roundingMode: 'trunc', |
| 45 | }).format(values?.[key]) : values?.[key]} |
| 46 | /> |
| 47 | ))} |
| 48 | </section> |
| 49 | ); |
| 50 | } |
| 51 |