| 1 |
import {createRoot} from 'react-dom/client'; |
| 2 |
import DonationFormBlockApp from '.'; |
| 3 |
|
| 4 |
/** |
| 5 |
* @since 4.17.0 hand the server-rendered skeleton inside the root to the app before React clears it. |
| 6 |
* @since 4.7.0 |
| 7 |
*/ |
| 8 |
export default function renderDonationForm(root) { |
| 9 |
let dataSrcUrl = root.getAttribute('data-src'); |
| 10 |
const locale = root.getAttribute('data-form-locale'); |
| 11 |
if (locale) { |
| 12 |
const url = new URL(dataSrcUrl); |
| 13 |
url.searchParams.set('locale', locale); |
| 14 |
dataSrcUrl = url.toString(); |
| 15 |
} |
| 16 |
|
| 17 |
const dataSrc = dataSrcUrl; |
| 18 |
const embedId = root.getAttribute('data-givewp-embed-id'); |
| 19 |
const formFormat = root.getAttribute('data-form-format'); |
| 20 |
const openFormButton = root.getAttribute('data-open-form-button'); |
| 21 |
const formUrl = root.getAttribute('data-form-url'); |
| 22 |
const formViewUrl = root.getAttribute('data-form-view-url'); |
| 23 |
// The server prints the skeleton and its styles inside the root; createRoot() will empty it. A |
| 24 |
// root that already holds the app (Elementor re-renders) has no skeleton to hand over. |
| 25 |
const skeletonHtml = root.querySelector(':scope > .givewp-embed-skeleton') ? root.innerHTML : ''; |
| 26 |
|
| 27 |
createRoot(root).render( |
| 28 |
<DonationFormBlockApp |
| 29 |
openFormButton={openFormButton} |
| 30 |
formFormat={formFormat} |
| 31 |
dataSrc={dataSrc} |
| 32 |
embedId={embedId} |
| 33 |
formUrl={formUrl} |
| 34 |
formViewUrl={formViewUrl} |
| 35 |
skeletonHtml={skeletonHtml} |
| 36 |
/> |
| 37 |
); |
| 38 |
} |
| 39 |
|
