File tree Expand file tree Collapse file tree 2 files changed +44
-0
lines changed Expand file tree Collapse file tree 2 files changed +44
-0
lines changed Original file line number Diff line number Diff line change @@ -73,6 +73,12 @@ var Modal = createReactClass({
7373 this . renderPortal ( this . props ) ;
7474 } ,
7575
76+ componentWillUpdate : function ( newProps ) {
77+ if ( newProps . portalClassName !== this . props . portalClassName ) {
78+ this . node . className = newProps . portalClassName ;
79+ }
80+ } ,
81+
7682 componentWillReceiveProps : function ( newProps ) {
7783 if ( newProps . isOpen ) refCount . add ( this ) ;
7884 if ( ! newProps . isOpen ) refCount . remove ( this ) ;
Original file line number Diff line number Diff line change @@ -341,4 +341,42 @@ describe('State', () => {
341341
342342 document . body . removeChild ( currentDiv ) ;
343343 } ) ;
344+
345+ it ( 'verify that portalClassName is refreshed on component update' , ( ) => {
346+ var node = document . createElement ( 'div' ) ;
347+ var modal = null ;
348+
349+ var App = React . createClass ( {
350+ getInitialState : function ( ) {
351+ return { testHasChanged : false } ;
352+ } ,
353+
354+ componentDidMount : function ( ) {
355+ expect ( modal . node . className ) . toEqual ( 'myPortalClass' ) ;
356+
357+ this . setState ( {
358+ testHasChanged : true
359+ } ) ;
360+ } ,
361+
362+ componentDidUpdate : function ( ) {
363+ expect ( modal . node . className ) . toEqual ( 'myPortalClass-modifier' ) ;
364+ } ,
365+
366+ render : function ( ) {
367+ return (
368+ < div >
369+ < Modal
370+ ref = { modalComponent => { modal = modalComponent ; } }
371+ isOpen = { true }
372+ portalClassName = { this . state . testHasChanged === true ? 'myPortalClass-modifier' : 'myPortalClass' } >
373+ </ Modal >
374+ </ div >
375+ ) ;
376+ }
377+ } ) ;
378+
379+ Modal . setAppElement ( node ) ;
380+ ReactDOM . render ( < App /> , node ) ;
381+ } ) ;
344382} ) ;
You can’t perform that action at this time.
0 commit comments