use classnames util in KoboModal

kobotoolbox · Jul 9, 2024 · 8eaae02 · 8eaae02
1 parent 417d66f
commit 8eaae02
Showing 1 changed file with 5 additions and 4 deletions.
diff --git a/jsapp/js/components/modals/koboModal.tsx b/jsapp/js/components/modals/koboModal.tsx
@@ -1,12 +1,15 @@
 import React from 'react';
 import Modal from 'react-modal';
+import cx from 'classnames';
 import bem, {makeBem} from 'js/bem';
 import './koboModal.scss';
 
 bem.KoboModal = makeBem(null, 'kobo-modal');
 
 type KoboModalSize = 'large' | 'medium';
 
+const DEFAULT_SIZE: KoboModalSize = 'medium';
+
 interface KoboModalProps {
   /** For displaying the modal. */
   isOpen: boolean;
@@ -23,16 +26,14 @@ interface KoboModalProps {
 }
 
 export default function KoboModal(props: KoboModalProps) {
-  const modalSize: KoboModalSize = props.size || 'medium';
-
-  const modalClassNames = ['kobo-modal', `kobo-modal--size-${modalSize}`];
+  const modalSize: KoboModalSize = props.size || DEFAULT_SIZE;
 
   return (
     <Modal
       ariaHideApp
       isOpen={props.isOpen}
       onRequestClose={props.onRequestClose}
-      className={modalClassNames.join(' ')}
+      className={cx('kobo-modal', `kobo-modal--size-${modalSize}`)}
       overlayClassName='kobo-modal-overlay'
       shouldCloseOnOverlayClick={props.isDismissableByDefaultMeans}
       shouldCloseOnEsc={props.isDismissableByDefaultMeans}