Added logging, changed some directory structure

This commit is contained in:
2018-01-13 21:33:40 -05:00
parent f079a5f067
commit 8e72ffb917
73656 changed files with 35284 additions and 53718 deletions

View File

@@ -0,0 +1,112 @@
# react-modal
> Accessible modal dialog component for React.JS
We maintain that accessibility is a key component of any modern web application. As such, we have created this modal in such a way that it fulfills the accessibility requirements of the modern web. We seek to keep the focus on accessibility while providing a functional, capable modal component for general use.
## Installation
To install the stable version you can use [npm](https://npmjs.org/) or [yarn](https://yarnpkg.com):
$ npm install react-modal
$ yarn add react-modal
## General Usage
The following is an example of using react-modal specifying all the possible props and options:
```js
import ReactModal from 'react-modal';
<ReactModal
/*
Boolean describing if the modal should be shown or not.
*/
isOpen={false}
/*
Function that will be run after the modal has opened.
*/
onAfterOpen={handleAfterOpenFunc}
/*
Function that will be run when the modal is requested to be closed (either by clicking on overlay or pressing ESC)
Note: It is not called if isOpen is changed by other means.
*/
onRequestClose={handleRequestCloseFunc}
/*
Number indicating the milliseconds to wait before closing the modal.
*/
closeTimeoutMS={0}
/*
Object indicating styles to be used for the modal.
It has two keys, `overlay` and `content`. See the `Styles` section for more details.
*/
style={{ overlay: {}, content: {} }}
/*
String indicating how the content container should be announced to screenreaders
*/
contentLabel="Example Modal"
/*
String className to be applied to the portal.
See the `Styles` section for more details.
*/
portalClassName="ReactModalPortal"
/*
String className to be applied to the overlay.
See the `Styles` section for more details.
*/
overlayClassName="ReactModal__Overlay"
/*
String className to be applied to the modal content.
See the `Styles` section for more details.
*/
className="ReactModal__Content"
/*
String className to be applied to the document.body (must be a constant string).
See the `Styles` section for more details.
*/
bodyOpenClassName="ReactModal__Body--open"
/*
Boolean indicating if the appElement should be hidden
*/
ariaHideApp={true}
/*
Boolean indicating if the modal should be focused after render
*/
shouldFocusAfterRender={true}
/*
Boolean indicating if the overlay should close the modal
*/
shouldCloseOnOverlayClick={true}
/*
Boolean indicating if pressing the esc key should close the modal
Note: By disabling the esc key from closing the modal you may introduce an accessibility issue.
*/
shouldCloseOnEsc={true}
/*
Boolean indicating if the modal should restore focus to the element that
had focus prior to its display.
*/
shouldReturnFocusAfterClose={true}
/*
String indicating the role of the modal, allowing the 'dialog' role to be applied if desired.
*/
role="dialog"
/*
Function that will be called to get the parent element that the modal will be attached to.
*/
parentSelector={() => document.body}
/*
Additional aria attributes (optional).
*/
aria={{
labelledby: "heading",
describedby: "full_description"
}}
/>
```
## License
MIT

View File

@@ -0,0 +1,22 @@
# Summary
* [Read Me](/README.md)
* [Development](dev/README.md)
* [Styles](styles/README.md)
* [Using CSS Classes](styles/classes.md)
* [Overriding Defaults](styles/defaults.md)
* [Testing](testing/README.md)
* [Examples](examples/README.md)
* [Minimal](examples/minimal.md)
* [Using setAppElement](examples/set_app_element.md)
* [Using onRequestClose](examples/on_request_close.md)
* [Using shouldCloseOnOverlayClick](examples/should_close_on_overlay_click.md)
* [Using Inline Styles](examples/inline_styles.md)
* [Using CSS Classes](examples/css_classes.md)
* [Using Global Style Overrides](examples/global_overrides.md)
* [Contributing](contributing/README.md)

View File

@@ -0,0 +1,33 @@
# Development
`react-modal` uses `make` to build and publish new versions and documentation.
It works as a checklist for the future releases to keep everything updated such as
`CHANGELOG.md`, `package.json` and `bower.json` and so on.
The minimun works as a normal `npm script`.
## Usage
Once you clone `react-modal`, you can run `sh bootstrap.sh` to check
and download dependencies not managed by `react-modal` such as `gitbook-cli`.
It will also show information about the current versions of `node`, `npm`,
`yarn` and `jq` available.
## List of `npm` commands:
$ npm start -s or yarn start # to run examples
$ npm run tests
$ npm run lint
## List of `make` commands:
$ make help # show all make commands available
$ make deps # npm install, gitbook plugins...
$ make serve # to run examples
$ make tests # use when developing
$ make tests-ci # single run
$ make lint # pass lint
$ make publish # execute the entire pipeline to publish
$ make publish-docs # execute the pipeline for docs

View File

@@ -0,0 +1,30 @@
## Styles
Styles passed into the Modal via the `style` prop are merged with the defaults. The default styles are:
```js
{
overlay : {
position : 'fixed',
top : 0,
left : 0,
right : 0,
bottom : 0,
backgroundColor : 'rgba(255, 255, 255, 0.75)'
},
content : {
position : 'absolute',
top : '40px',
left : '40px',
right : '40px',
bottom : '40px',
border : '1px solid #ccc',
background : '#fff',
overflow : 'auto',
WebkitOverflowScrolling : 'touch',
borderRadius : '4px',
outline : 'none',
padding : '20px'
}
}
```

View File

@@ -0,0 +1,22 @@
### CSS Classes
Sometimes it may be preferable to use CSS classes rather than inline styles.
You can use the `className` and `overlayClassName` props to specify a given CSS
class for each of those.
You can override the default class that is added to `document.body` when the
modal is open by defining a property `bodyOpenClassName`.
It's required that `bodyOpenClassName` must be `constant string`, otherwise we
would end up with a complex system to manage which class name should appear or
be removed from `document.body` from which modal (if using multiple modals
simultaneously).
`bodyOpenClassName` can support adding multiple classes to `document.body` when
the modal is open. Add as many class names as you desire, delineated by spaces.
Note: If you provide those props all default styles will not be applied, leaving
all styles under control of the CSS class.
The `portalClassName` can also be used however there are no styles by default applied

View File

@@ -0,0 +1,3 @@
### Global Overrides
If you'd like to override all instances of modals you can make changes to `Modal.defaultStyles`.

View File

@@ -0,0 +1,6 @@
# Testing
When using React Test Utils with this library, here are some things to keep in mind:
- You need to set `isOpen={true}` on the modal component for it to render its children.
- You need to use the `.portal` property, as in `ReactDOM.findDOMNode(renderedModal.portal)` or `TestUtils.scryRenderedDOMComponentsWithClass(Modal.portal, 'my-modal-class')` to acquire a handle to the inner contents of your modal.