@@ -3,73 +3,147 @@ import {
33 Component ,
44 ElementRef ,
55 EventEmitter ,
6+ Input ,
7+ OnChanges ,
68 OnDestroy ,
79 Output ,
10+ ViewEncapsulation ,
811} from '@angular/core' ;
12+ import { CommonModule } from '@angular/common' ;
913import { Config , Grid } from 'gridjs' ;
10- import { GRID_EVENTS , GridJsAngularBindingBase } from './gridjs-binding-base ' ;
14+ import { GRID_JS_EVENTS , GRID_JS_PROPS } from './constants ' ;
1115import { GridEvents } from 'gridjs/dist/src/events' ;
1216
13- /** only properties that exist on the Config interface (not the Config class) */
14- type EventName = keyof GridEvents ;
15- type EventHandler = ( ...args : any [ ] ) => void ;
17+ type GridJsAngularComponentProps = Omit <
18+ Partial < Config > ,
19+ 'instance' | 'store' | 'assign' | 'update'
20+ > ;
21+ type GridEvent = keyof GridEvents ;
22+ type GridEventData < T extends GridEvent > = Parameters <
23+ GridEvents [ T ]
24+ > [ 0 ] extends undefined
25+ ? void
26+ : Parameters < GridEvents [ T ] > [ 0 ] ;
1627
28+ type AnyFn = ( ...args : any [ ] ) => any ;
1729@Component ( {
1830 selector : 'gridjs-angular' ,
19- standalone : true ,
2031 template : '' ,
32+ standalone : true ,
33+ imports : [ CommonModule ] ,
34+ encapsulation : ViewEncapsulation . None ,
2135} )
2236export class GridJsAngularComponent
23- extends GridJsAngularBindingBase
24- implements AfterViewInit , OnDestroy
37+ implements AfterViewInit , OnChanges , OnDestroy , GridJsAngularComponentProps
2538{
26- private readonly listeners = new Map < EventName , EventHandler > ( ) ;
39+ private nativeElement : HTMLElement ;
40+ private instance ?: Grid ;
41+ private initialized = false ;
42+ private listeners : Map < GridEvent , AnyFn > = new Map ( ) ;
43+ @Input ( ) config ?: Partial < Config > ;
2744
28- /** alias of `load` event due to possible conflict with native load event */
29- @Output ( ) readonly gridLoad = this . load ;
45+ // props
46+ @Input ( ) plugins : Config [ 'plugins' ] = [ ] ;
47+ @Input ( ) eventEmitter ?: Config [ 'eventEmitter' ] ;
48+ @Input ( ) plugin ?: Config [ 'plugin' ] ;
49+ @Input ( ) data : Config [ 'data' ] ;
50+ @Input ( ) server : Config [ 'server' ] ;
51+ @Input ( ) header : Config [ 'header' ] ;
52+ @Input ( ) from ?: Config [ 'from' ] ;
53+ @Input ( ) storage ?: Config [ 'storage' ] ;
54+ @Input ( ) pipeline ?: Config [ 'pipeline' ] ;
55+ @Input ( ) autoWidth ?: Config [ 'autoWidth' ] ;
56+ @Input ( ) width ?: Config [ 'width' ] ;
57+ @Input ( ) height ?: Config [ 'height' ] ;
58+ @Input ( ) translator ?: Config [ 'translator' ] ;
59+ @Input ( ) style : Config [ 'style' ] ;
60+ @Input ( ) className : Config [ 'className' ] ;
61+ @Input ( ) fixedHeader ?: Config [ 'fixedHeader' ] ;
62+ @Input ( ) columns ?: Config [ 'columns' ] ;
63+ @Input ( ) search ?: Config [ 'search' ] ;
64+ @Input ( ) pagination ?: Config [ 'pagination' ] ;
65+ @Input ( ) sort ?: Config [ 'sort' ] ;
66+ @Input ( ) language ?: Config [ 'language' ] ;
67+ @Input ( ) resizable ?: Config [ 'resizable' ] ;
68+ @Input ( ) processingThrottleMs ?: Config [ 'processingThrottleMs' ] ;
3069
31- constructor ( private readonly host : ElementRef ) {
32- super ( ) ;
70+ // events
71+ @Output ( ) beforeLoad : EventEmitter < GridEventData < 'beforeLoad' > > =
72+ new EventEmitter ( true ) ;
73+ // renamed load event to avoid conflict with native load event
74+ @Output ( ) gridLoad : EventEmitter < GridEventData < 'load' > > = new EventEmitter (
75+ true ,
76+ ) ;
77+ @Output ( ) cellClick : EventEmitter < GridEventData < 'cellClick' > > =
78+ new EventEmitter ( true ) ;
79+ @Output ( ) rowClick : EventEmitter < GridEventData < 'rowClick' > > =
80+ new EventEmitter ( true ) ;
81+ @Output ( ) ready : EventEmitter < GridEventData < 'ready' > > = new EventEmitter (
82+ true ,
83+ ) ;
84+
85+ constructor ( private elementDef : ElementRef ) {
86+ this . nativeElement = this . elementDef . nativeElement ;
3387 }
3488
3589 ngAfterViewInit ( ) : void {
36- const instance = new Grid ( this . config ( ) ) ;
37- this . instance . set ( instance ) ;
90+ this . instance = new Grid ( this . getConfig ( this . config ?? { } ) ) ;
3891 this . registerEvents ( ) ;
39- instance . render ( this . host . nativeElement ) ;
92+ this . instance . render ( this . nativeElement ) ;
93+ this . initialized = true ;
4094 }
4195
42- ngOnDestroy ( ) : void {
43- if ( this . instance ( ) ) {
44- this . unregisterEvents ( ) ;
45- this . instance . set ( undefined ) ;
96+ ngOnChanges ( ) : void {
97+ if ( this . initialized ) {
98+ this . updateConfig ( this . config ) ;
4699 }
47100 }
48101
102+ ngOnDestroy ( ) : void {
103+ if ( this . initialized ) {
104+ if ( this . instance ) {
105+ this . unregisterEvents ( ) ;
106+ this . instance = undefined ;
107+ }
108+ }
109+ }
49110 // public api to interact with grid instance
50111 getGridInstance ( ) {
51- return this . instance ( ) ;
112+ return this . instance ;
52113 }
53114
54115 updateConfig ( config : Partial < Config > = { } ) {
55- this . gridConfig . set ( config ) ;
116+ this . instance ?. updateConfig ( this . getConfig ( config ) ) . forceRender ( ) ;
56117 }
57118
58119 private registerEvents ( ) {
59- for ( const event of GRID_EVENTS ) {
60- const emitter = ( < any > this ) [ event ] as EventEmitter < any > ;
120+ for ( const event of GRID_JS_EVENTS ) {
121+ const emitter = event === 'load' ? this . gridLoad : this [ event ] ;
61122 if ( ! emitter ) {
62123 continue ;
63124 }
64- const listener = ( ... args : any [ ] ) => emitter . emit ( args ) ;
125+ const listener : AnyFn = ( args ) => emitter . emit ( args ) ;
65126 this . listeners . set ( event , listener ) ;
66- this . instance ( ) ?. on ( event , listener ) ;
127+ if ( emitter ) {
128+ this . instance ?. on ( event , listener ) ;
129+ }
67130 }
68131 }
69132
70133 private unregisterEvents ( ) {
71134 for ( const [ event , listener ] of this . listeners . entries ( ) ) {
72- this . instance ( ) ?. off ( event , listener ) ;
135+ this . instance ?. off ( event , listener ) ;
136+ }
137+ }
138+
139+ private getConfig ( config : Partial < Config > = { } ) {
140+ const newConfig : Record < string , unknown > = structuredClone ( config ) ;
141+ for ( const [ key , value ] of Object . entries ( this ) ) {
142+ if ( GRID_JS_PROPS . includes ( key as keyof Config ) ) {
143+ newConfig [ key ] = value ;
144+ }
73145 }
146+ this . config = newConfig ;
147+ return newConfig ;
74148 }
75149}
0 commit comments