| 1 |
import { __ } from "@wordpress/i18n"; |
| 2 |
import { TableCellStylesType } from "../attributes"; |
| 3 |
import { useTableStore } from "../store"; |
| 4 |
|
| 5 |
export interface ColorControlProps { |
| 6 |
label: string; |
| 7 |
value: string | undefined; |
| 8 |
onChange: (newValue: string) => void; |
| 9 |
onDeselect: () => void; |
| 10 |
} |
| 11 |
|
| 12 |
interface BackgroundColorHelperControls { |
| 13 |
headerBackgroundColorControl: ColorControlProps | null; |
| 14 |
evenRowBackgroundColorControl: ColorControlProps; |
| 15 |
oddRowBackgroundColorControl: ColorControlProps; |
| 16 |
footerBackgroundColorControl: ColorControlProps | null; |
| 17 |
} |
| 18 |
|
| 19 |
type RowPositionStyleKey = |
| 20 |
| "headerBackgroundColor" |
| 21 |
| "footerBackgroundColor" |
| 22 |
| "evenRowBackgroundColor" |
| 23 |
| "oddRowBackgroundColor"; |
| 24 |
|
| 25 |
/** |
| 26 |
* Header/footer/even/odd row background colours are table-wide defaults, |
| 27 |
* resolved per cell by row position (see `cell/index.tsx` and |
| 28 |
* `TableRenderer.php`) — not a bulk-write to every affected cell's own |
| 29 |
* background attribute. That used to be how this worked, but the per-cell |
| 30 |
* `backgroundColor` attribute it wrote to is pro-owned. These are free |
| 31 |
* features, so they read/write `cellDefaults.styles` instead, exactly like |
| 32 |
* "Common Cell Background Color" already does. |
| 33 |
*/ |
| 34 |
export function useBackgroundColorHelpers(): BackgroundColorHelperControls { |
| 35 |
const tableConfig = useTableStore(state => state.table); |
| 36 |
const cellDefaultsStyles = useTableStore( |
| 37 |
state => state.cellDefaults.styles |
| 38 |
); |
| 39 |
const updateCellGlobalStyles = useTableStore( |
| 40 |
state => state.updateCellGlobalStyles |
| 41 |
); |
| 42 |
|
| 43 |
const createControlProps = ( |
| 44 |
label: string, |
| 45 |
styleKey: RowPositionStyleKey |
| 46 |
): ColorControlProps => ({ |
| 47 |
label, |
| 48 |
value: cellDefaultsStyles[styleKey], |
| 49 |
onChange: (newValue: string) => { |
| 50 |
updateCellGlobalStyles({ |
| 51 |
[styleKey]: newValue, |
| 52 |
} as Partial<TableCellStylesType>); |
| 53 |
}, |
| 54 |
onDeselect: () => { |
| 55 |
updateCellGlobalStyles({ |
| 56 |
[styleKey]: "", |
| 57 |
} as Partial<TableCellStylesType>); |
| 58 |
}, |
| 59 |
}); |
| 60 |
|
| 61 |
return { |
| 62 |
headerBackgroundColorControl: tableConfig.headerEnabled |
| 63 |
? createControlProps( |
| 64 |
__("Header Background Color", "tableberg"), |
| 65 |
"headerBackgroundColor" |
| 66 |
) |
| 67 |
: null, |
| 68 |
evenRowBackgroundColorControl: createControlProps( |
| 69 |
__("Even Row Background Color", "tableberg"), |
| 70 |
"evenRowBackgroundColor" |
| 71 |
), |
| 72 |
oddRowBackgroundColorControl: createControlProps( |
| 73 |
__("Odd Row Background Color", "tableberg"), |
| 74 |
"oddRowBackgroundColor" |
| 75 |
), |
| 76 |
footerBackgroundColorControl: tableConfig.footerEnabled |
| 77 |
? createControlProps( |
| 78 |
__("Footer Background Color", "tableberg"), |
| 79 |
"footerBackgroundColor" |
| 80 |
) |
| 81 |
: null, |
| 82 |
}; |
| 83 |
} |
| 84 |
|
