Skip to content
Snippets Groups Projects
Commit 4492a7c9 authored by Arie Peterson's avatar Arie Peterson
Browse files

Use ref for CSSTransition

This squashes the warning about deprecated findDOMNode usage
parent cedb3c22
No related branches found
No related tags found
1 merge request!13Resolve "Facilitate inclusion in website"
...@@ -48,6 +48,10 @@ export const ContactForm: React.FC<ContactFormProps> = ({ ...@@ -48,6 +48,10 @@ export const ContactForm: React.FC<ContactFormProps> = ({
setModalContent(JSON.stringify(formData)); 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 ( return (
<form onSubmit={submit} className={`${styles.ContactForm}`} aria-label={t("Contact form")}> <form onSubmit={submit} className={`${styles.ContactForm}`} aria-label={t("Contact form")}>
<Fieldset legend={t('contact.details')}> <Fieldset legend={t('contact.details')}>
...@@ -106,27 +110,29 @@ export const ContactForm: React.FC<ContactFormProps> = ({ ...@@ -106,27 +110,29 @@ export const ContactForm: React.FC<ContactFormProps> = ({
key={urgentIntent ? 'urgent' : 'normal'} key={urgentIntent ? 'urgent' : 'normal'}
in={urgentIntent} in={urgentIntent}
classNames={{ ...panelTransition }} classNames={{ ...panelTransition }}
nodeRef={submitRef}
unmountOnExit={true} unmountOnExit={true}
mountOnEnter={true} mountOnEnter={true}
addEndListener={(node: HTMLElement, done: EventListener) => { addEndListener={(done: () => void) => {
// use the css transitionend event to mark the finish of a transition // use the css transitionend event to mark the finish of a transition
// istanbul ignore next submitRef.current?.addEventListener('transitionend', done, false);
node.addEventListener('transitionend', done, false);
}} }}
> >
{urgentIntent ? ( <div ref={submitRef}>
<UrgentRequest sendUrgent={() => sendRequest(true)} /> {urgentIntent ? (
) : ( <UrgentRequest sendUrgent={() => sendRequest(true)} />
<button ) : (
className="good" <button
onClick={(event) => { className="good"
event.preventDefault(); onClick={(event) => {
sendRequest(); event.preventDefault();
}} sendRequest();
> }}
{t('submit')} >
</button> {t('submit')}
)} </button>
)}
</div>
</CSSTransition> </CSSTransition>
</SwitchTransition> </SwitchTransition>
</div> </div>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment