| 1 |
import { BlockControls, InspectorControls } from "@wordpress/block-editor"; |
| 2 |
import { ToolbarButton, ToolbarGroup } from "@wordpress/components"; |
| 3 |
import { __ } from "@wordpress/i18n"; |
| 4 |
import { ToolbarWithDropdown } from "@tableberg/components"; |
| 5 |
|
| 6 |
import { CellKey } from "../../attributes"; |
| 7 |
import { useTableStore } from "../../store"; |
| 8 |
import { CustomHtmlElementAttributes } from "."; |
| 9 |
import { ElementBindings } from "../../dynamic-data/types"; |
| 10 |
import { DynamicDataPanel } from "../../components/DynamicDataPanel"; |
| 11 |
import { ElementDeleteButton } from "../../components/ElementDeleteButton"; |
| 12 |
import { ElementOptionsBlockControls } from "../../components/ElementOptionsButton"; |
| 13 |
|
| 14 |
export function CustomHtmlElementControls({ |
| 15 |
attributes, |
| 16 |
bindings, |
| 17 |
isPreview, |
| 18 |
setIsPreview, |
| 19 |
cellCoords, |
| 20 |
elementIndex, |
| 21 |
}: { |
| 22 |
attributes: CustomHtmlElementAttributes; |
| 23 |
bindings?: ElementBindings; |
| 24 |
isPreview: boolean; |
| 25 |
setIsPreview: (isPreview: boolean) => void; |
| 26 |
cellCoords: CellKey; |
| 27 |
elementIndex: number; |
| 28 |
}) { |
| 29 |
const contentIsBound = !!bindings?.content; |
| 30 |
const updateAttrs = useTableStore( |
| 31 |
state => state.updateSelectedElementAttrs |
| 32 |
); |
| 33 |
|
| 34 |
return ( |
| 35 |
<> |
| 36 |
<BlockControls> |
| 37 |
<ToolbarGroup> |
| 38 |
<ToolbarWithDropdown |
| 39 |
title={__("Align HTML", "tableberg")} |
| 40 |
value={attributes.align} |
| 41 |
onChange={(newAlign?: string) => { |
| 42 |
if ( |
| 43 |
newAlign !== "left" && |
| 44 |
newAlign !== "center" && |
| 45 |
newAlign !== "right" |
| 46 |
) { |
| 47 |
return; |
| 48 |
} |
| 49 |
|
| 50 |
updateAttrs({ |
| 51 |
align: newAlign, |
| 52 |
}); |
| 53 |
}} |
| 54 |
controlset="alignment" |
| 55 |
/> |
| 56 |
<ToolbarButton |
| 57 |
className="components-tab-button" |
| 58 |
isPressed={!isPreview} |
| 59 |
onClick={() => setIsPreview(false)} |
| 60 |
disabled={contentIsBound} |
| 61 |
> |
| 62 |
{__("HTML", "tableberg")} |
| 63 |
</ToolbarButton> |
| 64 |
<ToolbarButton |
| 65 |
className="components-tab-button" |
| 66 |
isPressed={isPreview} |
| 67 |
onClick={() => setIsPreview(true)} |
| 68 |
> |
| 69 |
{__("Preview", "tableberg")} |
| 70 |
</ToolbarButton> |
| 71 |
</ToolbarGroup> |
| 72 |
<ElementDeleteButton |
| 73 |
cellCoords={cellCoords} |
| 74 |
elementIndex={elementIndex} |
| 75 |
/> |
| 76 |
</BlockControls> |
| 77 |
<ElementOptionsBlockControls |
| 78 |
cellCoords={cellCoords} |
| 79 |
elementIndex={elementIndex} |
| 80 |
/> |
| 81 |
<InspectorControls> |
| 82 |
<DynamicDataPanel |
| 83 |
elementType="custom-html" |
| 84 |
bindings={bindings} |
| 85 |
/> |
| 86 |
</InspectorControls> |
| 87 |
</> |
| 88 |
); |
| 89 |
} |
| 90 |
|
