Merge pull request DefinitelyTyped#17983 from ttamminen/react-modal

[React-Modal] Added support for providing object to class names
Vinnl · Jul 14, 2017 · 2a3c0b2 · 2a3c0b2
2 parents 6193386 + 43560c3
commit 2a3c0b2
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 5 deletions.
diff --git a/types/react-modal/index.d.ts b/types/react-modal/index.d.ts
@@ -1,6 +1,9 @@
 // Type definitions for react-modal 1.6
 // Project: https://github.com/reactjs/react-modal
-// Definitions by: Rajab Shakirov <https://github.com/radziksh>, Drew Noakes <https://github.com/drewnoakes>, Thomas B Homburg <https://github.com/homburg>
+// Definitions by: Rajab Shakirov <https://github.com/radziksh>,
+//                 Drew Noakes <https://github.com/drewnoakes>,
+//                 Thomas B Homburg <https://github.com/homburg>
+//                 Tatu Tamminen <https://github.com/ttamminen>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.3
 
@@ -20,6 +23,12 @@ declare namespace ReactModal {
         };
     }
 
+    interface Classes {
+        base?: string;
+        afterOpen?: string;
+        beforeClose?: string;
+    }
+
     interface Props {
         /* Boolean describing if the modal should be shown or not. Defaults to false. */
         isOpen: boolean;
@@ -39,10 +48,10 @@ declare namespace ReactModal {
         shouldCloseOnOverlayClick?: boolean;
         /* String className to be applied to the portal. Defaults to "ReactModalPortal". */
         portalClassName?: string;
-        /* String className to be applied to the overlay. */
-        overlayClassName?: string;
-        /* String className to be applied to the modal content. */
-        className?: string;
+        /* String or object className to be applied to the overlay. */
+        overlayClassName?: string | Classes;
+        /* String or object className to be applied to the modal content. */
+        className?: string | Classes;
         /* String indicating how the content container should be announced to screenreaders. */
         contentLabel?: string;
         /* String indicating the role of the modal, allowing the 'dialog' role to be applied if desired. */

diff --git a/types/react-modal/react-modal-tests.tsx b/types/react-modal/react-modal-tests.tsx
@@ -29,13 +29,25 @@ class ExampleOfUsingReactModal extends React.Component {
         padding: '20px'
       }
     };
+    const customClasses = {
+      afterOpen: 'afterOpen',
+      base: 'base',
+      beforeClose: 'beforeClose'
+    };
+    const customOverlayClasses = {
+      afterOpen: 'afterOpen',
+      base: 'base',
+      beforeClose: 'beforeClose'
+    };
     return (
       <ReactModal
         isOpen={true}
         onAfterOpen={onAfterOpenFn}
         onRequestClose={onRequestCloseFn}
         closeTimeoutMS={1000}
         style={customStyle}
+        className={customClasses}
+        overlayClassName={customOverlayClasses}
         >
         <h1>Modal Content</h1>
         <p>Etc.</p>