← All changes | src/Campaigns/Blocks/shared/components/ModalForm/index.tsx +26 -37 4.16.8 → 4.17.0 View file →

		@@ -1,16 +1,16 @@
1	1	import {useEffect, useState} from '@wordpress/element';
2	2	import {__} from '@wordpress/i18n';
3		-import IframeResizer from 'iframe-resizer-react';
4	3	import {Button, Dialog, Modal, ModalOverlay} from 'react-aria-components';
5	4	import ModalCloseIcon from './ModalClose';
6		-import {Spinner} from '@wordpress/components';
	5	+import EmbedFrame from '@givewp/forms/shared/EmbedFrame';
7	6	import './styles.scss';
8	7	import '../EntitySelector/styles/index.scss';
9	8	import {FocusScope} from 'react-aria';
10	9
11	10	/**
12		- * @unreleasaed
	11	+ * @since 4.17.0 add formUrl, where the fallback link points when the form is slow to load.
	12	+ * @since 4.3.0
13	13	*/
14	14	type ModalFormProps = {
15	15	dataSrc: string;
16	16	embedId: string;
		@@ -16,14 +16,24 @@
16	16	embedId: string;
17	17	buttonText: string;
18	18	isFormRedirect: boolean;
19	19	formViewUrl: string;
	20	+ formUrl?: string;
20	21	};
21	22
22	23	/**
23		- * @unreleasaed
	24	+ * @since 4.17.0 render the iframe through EmbedFrame; a form that is slow to load also offers a link.
	25	+ * @since 4.17.0 Share the launcher's pending state markup and styles with the external embed.
	26	+ * @since 4.3.0
24	27	*/
25		-export default function ModalForm({dataSrc, embedId, buttonText, isFormRedirect, formViewUrl}: ModalFormProps) {
	28	+export default function ModalForm({
	29	+ dataSrc,
	30	+ embedId,
	31	+ buttonText,
	32	+ isFormRedirect,
	33	+ formViewUrl,
	34	+ formUrl,
	35	+}: ModalFormProps) {
26	36	const [dataSrcUrl, setDataSrcUrl] = useState(dataSrc);
27	37	const [isOpen, setIsOpen] = useState<boolean>(isFormRedirect);
28	38	const [isLoading, setLoading] = useState<boolean>(false);
29	39	const [isEntering, setEntering] = useState<boolean>(false);
		@@ -102,22 +112,12 @@
102	112	type="button"
103	113	className="givewp-donation-form-modal__open"
104	114	onPress={openModal}
105	115	isPending={isLoading}
106		- aria-label={isLoading ? __('Loading donation form', 'give') : __('Open donation form', 'give')}
	116	+ aria-label={isLoading ? __('Loading donation form', 'give') : undefined}
107	117	>
108		- {isLoading && (
109		- <span className="givewp-donation-form-modal__open__spinner">
110		- <Spinner
111		- style={{margin: '0 auto', verticalAlign: 'middle'}}
112		- aria-label={__('In progress', 'give')}
113		- />
114		- </span>
115		- )}
116		-
117		- <span style={{margin: '0', visibility: isLoading ? 'hidden' : 'visible'}} aria-hidden={isLoading}>
118		- {buttonText}
119		- </span>
	118	+ {isLoading && <span className="givewp-donation-form-modal__open__spinner" aria-hidden="true" />}
	119	+ <span className="givewp-donation-form-modal__open__label">{buttonText}</span>
120	120	</Button>
121	121
122	122	<ModalOverlay
123	123	className="givewp-donation-form-modal__overlay"
		@@ -126,15 +126,12 @@
126	126	onOpenChange={setIsOpen}
127	127	isDismissable
128	128	isEntering={isEntering}
129	129	>
130		- <Modal
131		- className="givewp-donation-form-modal"
132		- data-loading={isLoading}
133		- >
	130	+ <Modal className="givewp-donation-form-modal" data-loading={isLoading}>
134	131	<FocusScope contain restoreFocus autoFocus>
135		- <Dialog
136		- className="givewp-donation-form-modal__dialog"
	132	+ <Dialog
	133	+ className="givewp-donation-form-modal__dialog"
137	134	aria-label={__('Donation Form', 'give')}
138	135	role="dialog"
139	136	aria-modal="true"
140	137	>
		@@ -147,22 +144,14 @@
147	144	>
148	145	<ModalCloseIcon />
149	146	</button>
150	147	<div className="givewp-donation-form-modal__dialog__content">
151		- <IframeResizer
152		- title={__('Donation Form', 'give')}
153		- id={embedId}
	148	+ <EmbedFrame
154	149	src={dataSrcUrl}
155		- checkOrigin={false}
156		- heightCalculationMethod="taggedElement"
157		- style={{
158		- minWidth: '100%',
159		- border: 'none',
160		- }}
161		- onInit={(iframe) => {
162		- iframe.iFrameResizer.resize();
163		- setLoading(false);
164		- }}
	150	+ embedId={embedId}
	151	+ fallbackUrl={formUrl || dataSrcUrl}
	152	+ onReady={() => setLoading(false)}
	153	+ onSlow={() => setLoading(false)}
165	154	/>
166	155	</div>
167	156	</Dialog>
168	157	</FocusScope>