{"action":"created","issue":{"url":"https://api.github.com/repos/cloudflare/react-modal2/issues/12","repository_url":"https://api.github.com/repos/cloudflare/react-modal2","labels_url":"https://api.github.com/repos/cloudflare/react-modal2/issues/12/labels{/name}","comments_url":"https://api.github.com/repos/cloudflare/react-modal2/issues/12/comments","events_url":"https://api.github.com/repos/cloudflare/react-modal2/issues/12/events","html_url":"https://github.com/cloudflare/react-modal2/issues/12","id":144656508,"number":12,"title":"Animated example breaks with multiple dialogs","user":{"login":"aij","id":4732885,"avatar_url":"https://avatars.githubusercontent.com/u/4732885?v=3","gravatar_id":"","url":"https://api.github.com/users/aij","html_url":"https://github.com/aij","followers_url":"https://api.github.com/users/aij/followers","following_url":"https://api.github.com/users/aij/following{/other_user}","gists_url":"https://api.github.com/users/aij/gists{/gist_id}","starred_url":"https://api.github.com/users/aij/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/aij/subscriptions","organizations_url":"https://api.github.com/users/aij/orgs","repos_url":"https://api.github.com/users/aij/repos","events_url":"https://api.github.com/users/aij/events{/privacy}","received_events_url":"https://api.github.com/users/aij/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2016-03-30T17:11:49Z","updated_at":"2016-06-24T07:10:57Z","closed_at":null,"body":"When rendering multiple modal dialogs based on the example in https://github.com/cloudflare/react-modal2/blob/master/example/animated/script.js only one of them will ever work, as only a single component can be rendered into a given GatewayDest. This applies even if one one modal is ever opened at a time, so long as there is more than one instance of the app-specific `Modal` class.\r\n\r\nAs a workaround I'm using `CSSTransitionGroup` as the tagName for GatewayDest so that the transition group is always rendered, which works as long as at most one modal is rendered into it at any given time.\r\n\r\nHere's the code I'm using\r\n\r\n    const Modal = propTypes({\r\n      onBackgroundClick: PropTypes.func,\r\n      show: PropTypes.bool.isRequired,\r\n      children: PropTypes.node,\r\n      className: PropTypes.string\r\n    })(defaultProps({\r\n      onBackgroundClick: event => void 0\r\n    })(props => {\r\n      const { show, children, className, onBackgroundClick } = props;\r\n      return show ? <Gateway into='modal'>\r\n        <ReactModal\r\n          onClose={onBackgroundClick}\r\n          modalClassName={classNames('reveal-modal', className)}\r\n          backdropClassName='reveal-modal-bg'\r\n        >\r\n          { children }\r\n        </ReactModal>\r\n      </Gateway> : <div/>;\r\n    }));\r\n    \r\n    export class ModalWrapper extends Component {\r\n    \r\n      static init() {\r\n        ReactModal.getApplicationElement = () => document.getElementById('app-content');\r\n      }\r\n    \r\n      render() {\r\n        return <GatewayProvider>\r\n          <application>\r\n            <div id=\"app-content\">\r\n              {this.props.children}\r\n            </div>\r\n            <GatewayDest\r\n              name=\"modal\"\r\n              className=\"modal-container\"\r\n              tagName={TransitionGroup}\r\n              transitionName='modal'\r\n              transitionEnterTimeout={300}\r\n              transitionLeaveTimeout={300}\r\n            />\r\n          </application>\r\n        </GatewayProvider>;\r\n      }\r\n    }\r\n\r\nNote that the above produces a bogus prop type warning in development mode because the `tagName` proptype is set as `string` even though any value suitable for `React.createElement` is accepted."},"comment":{"url":"https://api.github.com/repos/cloudflare/react-modal2/issues/comments/228273838","html_url":"https://github.com/cloudflare/react-modal2/issues/12#issuecomment-228273838","issue_url":"https://api.github.com/repos/cloudflare/react-modal2/issues/12","id":228273838,"user":{"login":"jmeas","id":2322305,"avatar_url":"https://avatars.githubusercontent.com/u/2322305?v=3","gravatar_id":"","url":"https://api.github.com/users/jmeas","html_url":"https://github.com/jmeas","followers_url":"https://api.github.com/users/jmeas/followers","following_url":"https://api.github.com/users/jmeas/following{/other_user}","gists_url":"https://api.github.com/users/jmeas/gists{/gist_id}","starred_url":"https://api.github.com/users/jmeas/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jmeas/subscriptions","organizations_url":"https://api.github.com/users/jmeas/orgs","repos_url":"https://api.github.com/users/jmeas/repos","events_url":"https://api.github.com/users/jmeas/events{/privacy}","received_events_url":"https://api.github.com/users/jmeas/received_events","type":"User","site_admin":false},"created_at":"2016-06-24T07:10:57Z","updated_at":"2016-06-24T07:10:57Z","body":"I'm not using react-modal2 (building a similar-ish thing), but I'm trying to solve this same problem. Any luck, @aij ?\r\n\r\nOne solution that worked for my Alerts system involved only having a single Alert instance for the entire app. I built it this way because new alerts are not necessarily immediately displayed: they're queued until the old one disappears or is dismissed. This is more complex than just rendering Alerts wherever, and it has some drawbacks, like only serializable data can be passed to the Alert. I don't really want to do the same system for modals just for the benefit of being able to animate them, but it *is* an option that's out there.\r\n\r\n@thejameskyle, did you ever need to support animations for things rendered in gateways?"}}
{"actor":{"display_login":"jmeas"}}