Added support for providing object to class names

This commit is contained in:
Tatu Tamminen
2017-07-12 18:19:08 +03:00
parent 8a31f32b81
commit 43560c30f8
2 changed files with 26 additions and 5 deletions

View File

@@ -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. */

View File

@@ -29,6 +29,16 @@ 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}
@@ -36,6 +46,8 @@ class ExampleOfUsingReactModal extends React.Component {
onRequestClose={onRequestCloseFn}
closeTimeoutMS={1000}
style={customStyle}
className={customClasses}
overlayClassName={customOverlayClasses}
>
<h1>Modal Content</h1>
<p>Etc.</p>