22 * React Component Base
33 */
44 import * as React from 'react' ;
5+ import * as ReactDOM from 'react-dom' ;
56 import { extend , isNullOrUndefined , setValue , getValue , isObject } from '@syncfusion/ej2-base' ;
67 /**
78 * Interface for processing directives
7475 public portals :any ;
7576 protected value : any ;
7677 protected columns : any ;
78+ private clsName : boolean ;
7779
7880 // Lifecycle methods are changed by React team and so we can deprecate this method and use
7981 // Reference link:https://reactjs.org/docs/react-component.html#unsafe_componentWillMount
9193 }
9294 }
9395
94- public componentDidUpdate ( ) : any {
96+ public componentDidUpdate ( prev : Object ) : any {
9597 if ( ! this . isshouldComponentUpdateCalled && this . initRenderCalled && ! this . isReactForeceUpdate ) {
9698 this . isshouldComponentUpdateCalled = true ;
97- this . refreshProperties ( this . props , true ) ;
99+ if ( prev !== this . props ) {
100+ this . refreshProperties ( this . props , true ) ;
101+ }
98102 }
99103 }
100104
145149 delete dProps [ propkey ] ;
146150 } else if ( this . attrKeys . indexOf ( propkey ) !== - 1 ) {
147151 if ( isClassName ) {
148- this . element . classList . remove ( this . props [ propkey ] ) ;
149- this . element . classList . add ( dProps [ propkey ] ) ;
152+ this . clsName = true ;
153+ let propsClsName = this . props [ propkey ] . split ( ' ' ) ;
154+ for ( let i : number = 0 ; i < propsClsName . length ; i ++ ) {
155+ this . element . classList . remove ( propsClsName [ i ] ) ;
156+ }
157+ let dpropsClsName = dProps [ propkey ] . split ( ' ' ) ;
158+ for ( let j : number = 0 ; j < dpropsClsName . length ; j ++ ) {
159+ this . element . classList . add ( dpropsClsName [ j ] ) ;
160+ }
150161 } else if ( propkey !== 'disabled' ) {
151162 delete dProps [ propkey ] ;
152163 }
153164 }
165+ else if ( propkey === 'value' && nextProps [ propkey ] === this [ propkey ] ) {
166+ delete dProps [ propkey ] ;
167+ }
168+ else if ( ( propkey === 'valueTemplate' || propkey === 'itemTemplate' ) && nextProps [ propkey ] . toString ( ) === this [ propkey ] . toString ( ) ) {
169+ delete dProps [ propkey ] ;
170+ }
154171 }
155172 if ( dProps [ 'children' ] ) {
156173 delete dProps [ 'children' ] ;
218235 ComponentBase . reactUid ++ ;
219236 }
220237
238+ }
239+ if ( this . clsName ) {
240+ let clsList : string [ ] = this . element . classList ;
241+ let className : any = this . htmlattributes [ 'className' ] ;
242+ for ( let i : number = 0 ; i < clsList . length ; i ++ ) {
243+ if ( ( className . indexOf ( clsList [ i ] ) == - 1 ) ) {
244+ this . htmlattributes [ 'className' ] = this . htmlattributes [ 'className' ] + ' ' + clsList [ i ] ;
245+ }
246+ }
247+ this . clsName = false ;
221248 }
222249 return this . htmlattributes ;
223250 }
303330 let keys : string [ ] = Object . keys ( newProp ) ;
304331 if ( keys . length !== 0 ) {
305332 for ( let key of keys ) {
306- let oldValue = oldProp [ key ] ;
307- let newValue = newProp [ key ] ;
333+ let oldValue : any = oldProp [ key ] ;
334+ let newValue : any = newProp [ key ] ;
335+ if ( key === 'items' ) {
336+ for ( var _j = 0 ; _j < newValue . length ; _j ++ ) {
337+ if ( this . getModuleName ( ) === 'richtexteditor' && typeof ( newValue [ _j ] ) === 'object' ) {
338+ return { status : true } ;
339+ }
340+ }
341+ }
308342 if ( this . getModuleName ( ) === 'grid' && key === 'field' ) {
309343 curObj [ key ] = newValue ;
310344 }
311- if ( ! oldProp . hasOwnProperty ( key ) || ! this . compareValues ( newValue , oldValue ) ) {
345+ if ( ! oldProp . hasOwnProperty ( key ) || ! this . compareValues ( oldValue , newValue ) ) {
312346 if ( ! propName ) {
313347 return { status : false } ;
314348 }
419453 }
420454
421455 }
456+
457+ // tslint:disable:no-any
458+ public appendReactElement ( element : any , container : HTMLElement ) {
459+ ReactDOM . render ( ( ReactDOM as any ) . createPortal ( element , container ) , container ) ;
460+ } ;
461+
422462 // tslint:disable:no-any
423463 public renderReactTemplates ( callback ?: any ) : void {
424464 this . isReactForeceUpdate = true ;
542582 }
543583 }
544584 /* tslint:enable:no-any */
545-
585+
0 commit comments