From 4492a7c94ee80050a91bb599f4254fc953fbfcba Mon Sep 17 00:00:00 2001
From: Arie Peterson <arie@greenhost.nl>
Date: Thu, 13 May 2021 16:34:48 +0200
Subject: [PATCH] Use ref for CSSTransition
This squashes the warning about deprecated findDOMNode usage
---
src/components/contact-form/ContactForm.tsx | 38 ++++++++++++---------
1 file changed, 22 insertions(+), 16 deletions(-)
diff --git a/src/components/contact-form/ContactForm.tsx b/src/components/contact-form/ContactForm.tsx
index 3f8dc08..8b27ec3 100644
--- a/src/components/contact-form/ContactForm.tsx
+++ b/src/components/contact-form/ContactForm.tsx
@@ -48,6 +48,10 @@ export const ContactForm: React.FC<ContactFormProps> = ({
setModalContent(JSON.stringify(formData));
};
+ // For use in the CSSTransition, see
+ // https://github.com/reactjs/react-transition-group/issues/668#issuecomment-695162879
+ const submitRef = React.useRef<any>(null);
+
return (
<form onSubmit={submit} className={`${styles.ContactForm}`} aria-label={t("Contact form")}>
<Fieldset legend={t('contact.details')}>
@@ -106,27 +110,29 @@ export const ContactForm: React.FC<ContactFormProps> = ({
key={urgentIntent ? 'urgent' : 'normal'}
in={urgentIntent}
classNames={{ ...panelTransition }}
+ nodeRef={submitRef}
unmountOnExit={true}
mountOnEnter={true}
- addEndListener={(node: HTMLElement, done: EventListener) => {
+ addEndListener={(done: () => void) => {
// use the css transitionend event to mark the finish of a transition
- // istanbul ignore next
- node.addEventListener('transitionend', done, false);
+ submitRef.current?.addEventListener('transitionend', done, false);
}}
>
- {urgentIntent ? (
- <UrgentRequest sendUrgent={() => sendRequest(true)} />
- ) : (
- <button
- className="good"
- onClick={(event) => {
- event.preventDefault();
- sendRequest();
- }}
- >
- {t('submit')}
- </button>
- )}
+ <div ref={submitRef}>
+ {urgentIntent ? (
+ <UrgentRequest sendUrgent={() => sendRequest(true)} />
+ ) : (
+ <button
+ className="good"
+ onClick={(event) => {
+ event.preventDefault();
+ sendRequest();
+ }}
+ >
+ {t('submit')}
+ </button>
+ )}
+ </div>
</CSSTransition>
</SwitchTransition>
</div>
--
GitLab