mirror of
https://github.com/zhigang1992/DefinitelyTyped.git
synced 2026-04-23 12:56:46 +08:00
Added support for providing object to class names
This commit is contained in:
19
types/react-modal/index.d.ts
vendored
19
types/react-modal/index.d.ts
vendored
@@ -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. */
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user