diegoddox/react-redux-modal

react-redux-modal's Issues

Warning: setState(...): Cannot update during an existing state transition (such as within `render`).

When trigger openUserInfoModal it show Warning
Warning: setState(...): Cannot update during an existing state transition (such as within render). Render methods should be a pure function of props and state.

And Error:
Uncaught Invariant Violation: Expected onClick listener to be a function, instead got type object

My Parent component

import React, { PropTypes } from 'react'
import css from './Activities.less'
import ActivityItem from './ActivityItem'
import { modal } from 'react-redux-modal'
import UserQuickView from '../user/UserQuickView'

export default class Activities extends React.Component {
  static propTypes = {
    transactions: PropTypes.array,
  }
  constructor(props) {
    super(props)
    this.props = props
    this.openUserInfoModal = this.openUserInfoModal.bind(this)
  }
  openUserInfoModal(user) {
    modal.add(UserQuickView, {
      title: user.firstName,
      size: 'medium',
    })
  }
  render() {
    const { transactions } = this.props
    return (
      <div className={css.Activities}>
        {transactions.map(transaction => (
          <ActivityItem
            key={transaction.id}
            transaction={transaction}
            openUserInfoModal={this.openUserInfoModal}
          />
        ))}
      </div>
    )
  }
}

My Children component

import React, { PropTypes } from 'react'
import { Link } from 'react-router'
import css from './Activities.less'

export default class ActivityItem extends React.Component {
  static propTypes = {
    transaction: PropTypes.object.isRequired,
    openUserInfoModal: PropTypes.func,
  }

  constructor(props) {
    super(props)
    this.props = props
    this._openUserInfoModal = this._openUserInfoModal.bind(this)
  }

  _openUserInfoModal(user) {
    this.props.openUserInfoModal(user)
  }

  render() {
    const { transaction } = this.props
    return (
      <div key={transaction.id} className={css.Transaction}>
        <div className={css.InformationContainer}>
          <a
            className={css.UserName}
            onClick={() => this._openUserInfoModal(transaction.to)}
          >
            {transaction.to.firstName} {transaction.to.lastName}
          </a> receive
          <span className={css.Point}> {transaction.point}&hearts; </span> from&nbsp;
          <a
            className={css.UserName}
            onClick={() => this._openUserInfoModal(transaction.from)}
          >
            {transaction.from.firstName} {transaction.from.lastName}
          </a>
        </div>
      </div>
    )
  }
}

response and mini func!

Make the modal responsive and minimize function.

handleOnOutsideClick stop event propagation

When clicking outside the modal if there is a button or a Link then that gets clicked as well

closeOnOutsideClick closes modal when content is clicked

Hi, I'm using this on a project, and setting closeOnOutsideClick to true seems to close the modal even when content is clicked inside the modal. I would assume this isn't intentional?

Looks like the click handler is attached to the entire component, I'll make a PR to attach it to the shadow overlay, assuming that is expected behavior?

react-redux-modal/src/modal/Modal.js

Line 21 in 3721a74

onClick={this.handleOnOutsideClick.bind(this)}>

Warning about accessing PropTypes

Warning: Accessing PropTypes via the main React package is deprecated, and will be removed in React v16.0. Use the latest available v15.* prop-types package from npm instead. For info on usage, compatibility, migration and more, see https://fb.me/prop-types-docs

Typings Definitions File for TypeScript

Make a .d.ts file so that react-redux-modal can inter-op with TypeScript and TSX.

overriding style elements

is there a way to override style elements ?

Handle browser back navigation

If I were to use this on mobile and I were to open a modal, navigating back should, theoretically, close the modal. How would you handle that scenario here?

Auto Focus?

It should be possible to automatically focus a selected modal element when it opens.

It should be possible to focus a specific other element when the modal closes.

Add a license

It would be nice if this project had a license. I would suggest MIT - https://opensource.org/licenses/MIT

how to re-render a modal?

I'm trying to figure out how to update the modal after it's been displayed, like to update a price estimate value. Right now I'm able to modal.add(myComponent, {}) to create a modal and render myComponent but I can't figure out how to update the component. I could remove the modal and display it again with the new props but that would discard the user updates inside the modal, such as form fields.

I'm currently getting around this issue by using connect() on myComponet to link it directly to the store, but I'd prefer to use a basic component and not a redux container. What's the best way to do this? Maybe I should always specify a generic container for the modal and one of the options will be the actual component I want displayed? I feel like the problem will be that the container will need to know about every property any modal will need and will pass those to every modal it displays.

bindActionCreators expected a function actionCreator for key 'ADD_MODAL', instead received type 'string'.

bindActionCreators expected a function actionCreator for key 'ADD_MODAL', instead received type 'string'.

This is error from "react": "^15.4.0" and "react-redux-modal": "^0.5.2"

Add:
import ReduxModal 'react-redux-modal';

Invoke:
<div id="root-body"> <Routes /> <ReduxModal /> </div>

React-router. Rendered Link outside ReactRouterContext.

Hello. Is there a way to insert a in your modal's instance? Now it doesn't work because doesn't know anything about history because there's no way to pass react router context.

Missing StyleSheet

react-redux-modal.min.css is 404 on your github.io page. Thanks!