react-modal-dialog - npm Package Compare versions

Comparing version 1.0.3 to 2.0.0

lib/ModalDialog.js

		@@ -189,3 +189,3 @@ 'use strict';
		className: _react.PropTypes.string, // css class in addition to .ReactModalDialog
		width: _react.PropTypes.number, // width
		width: _react.PropTypes.oneOfType([_react.PropTypes.number, _react.PropTypes.string]), // width
		topOffset: _react.PropTypes.number, // injected by @centerComponent
		@@ -203,3 +203,3 @@ leftOffset: _react.PropTypes.number, // injected by @centerComponent
		value: {
		width: 500,
		width: 'auto',
		margin: 20
		@@ -206,0 +206,0 @@ },

package.json

		{
		"name": "react-modal-dialog",
		"version": "1.0.3",
		"version": "2.0.0",
		"description": "A simple, idiomatic, and declarative way to launch modal dialogs in ReactJS",
		@@ -5,0 +5,0 @@ "repository": {

111

README.md

		@@ -5,21 +5,18 @@ # React Modal Dialog

		[Check out the demo!](http://www.qimingweng.com/react-modal-dialog/)
		[Check out the demo here](http://www.qimingweng.com/react-modal-dialog/)

		This project is in progress. Feel free to read the code to use on your own. Documentation is coming; or if you want to contribute to the documentation, that is great as well.
		React modal dialog is an idiomatic way to represent modal dialogs in react. It is nested inside the components that require them, and can themselves nest other dialogs. There are no global switches or state, and the contents of the dialog are defined where you need it.

		Most of the core code is done, but the website and documentation are still in progress. Will update to version 1.0.0 once this API is stable.

		## Design Considerations

		When you have two dialogs, the ESC key will only close the top level one (there is an event manager implemented like a stack)
		React modal dialog was built with a few fundamental assumptions and constraints in mind:

		Dialogs bounce in with a spring animation (not a standard ease-in, ease-out). It is on the roadmap to make this part more extensible.
		- When you have two dialogs, the ESC key will only close the top level one (there is an event manager implemented like a stack)
		- The package needs to support dialogs that bounce in with a spring animation (not just standard ease-in, ease-out), but still be flexible enough for other designs
		- Dialogs that are too long will scroll in their viewport
		- Dialogs need to be able to show a loading spinner, that means the background and the content need to be separate components

		Dialogs that are too long will scroll in their viewport

		The portal which opens the dialog, the background that the dialogs are loaded on, and the dialog itself are separate components. This way, you can hide a dialog and show a spinner on the dark portion, then show a success dialog. And neither the background or the dialog know about the portal.

		# Idiomatic Syntax

		This is what I am trying to achieve. A dialog completely controlled by its owner component. Where its existence is just whether or not that component is there. I believe this is the most idiomatic way a dialog should work.
		From the very beginning, the goal was a syntax very similar to the one below, where the modal component is held within a button or the view with the closest common ancestor of two buttons.

		@@ -29,16 +26,14 @@ ```javascript
		state = {
		isShowingModal: false
		isShowingModal: false,
		}
		openModal = () => {
		this.setState({isShowingModal: true});
		}
		handleClick = () => this.setState({isShowingModal: true})
		handleClose = () => this.setState({isShowingModal: false})
		render() {
		return (
		<a onClick={this.openModal}>
		Button Text
		{this.state.isShowingModal ?
		<ModalComponentHere/>
		: null}
		</a>
		)
		return <a onClick={this.handleClick}>
		<span>Button Text</span>
		{
		this.state.isShowingModal &&
		<ModalComponentHere onClose={this.handleClose}/>
		}
		</a>;
		}
		@@ -53,11 +48,25 @@ }
		```javascript
		import React, {PropTypes} from 'react';
		import {ModalContainer, ModalDialog} from 'react-modal-dialog';

		// In a render function:
		<ModalContainer onClose={...}>
		<ModalDialog onClose={...}>
		<h1>Dialog Content</h1>
		<p>More Content. Anything goes here</p>
		</ModalDialog>
		</ModalContainer>
		class View extends React.Component {
		state = {
		isShowingModal: false,
		}
		handleClick = () => this.setState({isShowingModal: true})
		handleClose = () => this.setState({isShowingModal: false})
		render() {
		return <div onClick={this.handleClick}>
		{
		this.state.isShowingModal &&
		<ModalContainer onClose={this.handleClose}>
		<ModalDialog onClose={this.handleClose}>
		<h1>Dialog Content</h1>
		<p>More Content. Anything goes here</p>
		</ModalDialog>
		</ModalContainer>
		}
		</div>;
		}
		}
		```
		@@ -68,12 +77,40 @@
		```javascript
		import React, {PropTypes} from 'react';
		import {ModalContainer, ModalDialog} from 'react-modal-dialog';
		import ReactSpinner from 'react-spinjs';

		// In a render function
		<ModalContainer onClose={...}>
		{this.state.isLoading ?
		<ReactSpinner/>
		:
		<ModalDialog onClose={...}/>
		class View extends React.Component {
		static propTypes = {
		// This view takes a isLoading property
		isLoading: PropTypes.bool,
		}
		</ModalContainer onClose={...}>
		state = {
		isShowingModal: false,
		}
		handleClick = () => this.setState({isShowingModal: true})
		handleClose = () => this.setState({isShowingModal: false})
		render() {
		const {
		props: {
		isLoading,
		},
		} = this;

		return <div onClick={this.handleClick}>
		{
		this.state.isShowingModal &&
		<ModalContainer onClose={this.handleClose}>
		{
		isLoading ?
		<ReactSpinner/> :
		<ModalDialog onClose={this.handleClose}>
		<h1>Dialog Content</h1>
		<p>More Content. Anything goes here</p>
		</ModalDialog>
		}
		</ModalContainer>
		}
		</div>;
		}
		}
		```
		@@ -80,0 +117,0 @@

.eslintrc

.npmignore

CONTRIBUTING.md

scripts/publishStaticSite.sh

react-modal-dialog - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics

Worsened metrics