Skip to content

fix(angular): unsubscribe from jsonForm state subscription #2377

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Oct 10, 2024
Merged

fix(angular): unsubscribe from jsonForm state subscription #2377

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1ca3aa7
fix(angular): unsubscribe from jsonForm state subscription
LukasBoll Aug 28, 2024
481c14d
Make subscriptions protected
lucas-koehler Oct 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 2 additions & 7 deletions packages/angular-material/src/library/layouts/array-layout.renderer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,12 +22,7 @@
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
*/
import {
ChangeDetectionStrategy,
Component,
OnDestroy,
OnInit,
} from '@angular/core';
import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
import {
JsonFormsAngularService,
JsonFormsAbstractControl,
Expand Down Expand Up @@ -169,7 +164,7 @@ import {
})
export class ArrayLayoutRenderer
extends JsonFormsAbstractControl<StatePropsOfArrayLayout>
implements OnInit, OnDestroy
implements OnInit
{
noData: boolean;
translations: ArrayTranslations = {};
Expand Down
48 changes: 21 additions & 27 deletions packages/angular-material/src/library/layouts/categorization-layout.renderer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,12 +38,11 @@ import {
rankWith,
uiTypeIs,
} from '@jsonforms/core';
import { Component, OnDestroy, OnInit } from '@angular/core';
import { Component, OnInit } from '@angular/core';
import {
JsonFormsAngularService,
JsonFormsBaseRenderer,
} from '@jsonforms/angular';
import { Subscription } from 'rxjs';

@Component({
selector: 'jsonforms-categorization-layout',
Expand All @@ -69,41 +68,36 @@ import { Subscription } from 'rxjs';
})
export class CategorizationTabLayoutRenderer
extends JsonFormsBaseRenderer<Categorization>
implements OnInit, OnDestroy
implements OnInit
{
hidden: boolean;
visibleCategories: (Category | Categorization)[];
private subscription: Subscription;
categoryLabels: string[];

constructor(private jsonFormsService: JsonFormsAngularService) {
super();
}

ngOnInit() {
this.subscription = this.jsonFormsService.$state.subscribe({
next: (state: JsonFormsState) => {
const props = mapStateToLayoutProps(state, this.getOwnProps());
this.hidden = !props.visible;
this.visibleCategories = this.uischema.elements.filter(
(category: Category | Categorization) =>
isVisible(category, props.data, undefined, getAjv(state))
);
this.categoryLabels = this.visibleCategories.map((element) =>
deriveLabelForUISchemaElement(
element as Labelable<boolean>,
state.jsonforms.i18n?.translate ??
defaultJsonFormsI18nState.translate
)
);
},
});
}

ngOnDestroy() {
if (this.subscription) {
this.subscription.unsubscribe();
}
this.addSubscription(
this.jsonFormsService.$state.subscribe({
next: (state: JsonFormsState) => {
const props = mapStateToLayoutProps(state, this.getOwnProps());
this.hidden = !props.visible;
this.visibleCategories = this.uischema.elements.filter(
(category: Category | Categorization) =>
isVisible(category, props.data, undefined, getAjv(state))
);
this.categoryLabels = this.visibleCategories.map((element) =>
deriveLabelForUISchemaElement(
element as Labelable<boolean>,
state.jsonforms.i18n?.translate ??
defaultJsonFormsI18nState.translate
)
);
},
})
);
}
}

Expand Down
29 changes: 11 additions & 18 deletions packages/angular-material/src/library/layouts/layout.renderer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@
THE SOFTWARE.
*/
import {
OnDestroy,
OnInit,
ChangeDetectorRef,
Component,
Expand All @@ -42,18 +41,16 @@ import {
UISchemaElement,
JsonSchema,
} from '@jsonforms/core';
import type { Subscription } from 'rxjs';

@Component({
template: '',
})
export class LayoutRenderer<T extends Layout>
extends JsonFormsBaseRenderer<T>
implements OnInit, OnDestroy
implements OnInit
{
hidden: boolean;
label: string | undefined;
private subscription: Subscription;

constructor(
private jsonFormsService: JsonFormsAngularService,
Expand All @@ -63,20 +60,16 @@ export class LayoutRenderer<T extends Layout>
}

ngOnInit() {
this.subscription = this.jsonFormsService.$state.subscribe({
next: (state: JsonFormsState) => {
const props = mapStateToLayoutProps(state, this.getOwnProps());
this.label = props.label;
this.hidden = !props.visible;
this.changeDetectionRef.markForCheck();
},
});
}

ngOnDestroy() {
if (this.subscription) {
this.subscription.unsubscribe();
}
this.addSubscription(
this.jsonFormsService.$state.subscribe({
next: (state: JsonFormsState) => {
const props = mapStateToLayoutProps(state, this.getOwnProps());
this.label = props.label;
this.hidden = !props.visible;
this.changeDetectionRef.markForCheck();
},
})
);
}

trackElement(_index: number, renderProp: OwnPropsOfRenderer): string {
Expand Down
35 changes: 14 additions & 21 deletions packages/angular-material/src/library/other/label.renderer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
*/
import { Component, OnDestroy, OnInit } from '@angular/core';
import { Component, OnInit } from '@angular/core';
import {
JsonFormsAngularService,
JsonFormsBaseRenderer,
Expand All @@ -36,7 +36,6 @@ import {
rankWith,
uiTypeIs,
} from '@jsonforms/core';
import { Subscription } from 'rxjs';

@Component({
selector: 'LabelRenderer',
Expand All @@ -51,33 +50,27 @@ import { Subscription } from 'rxjs';
})
export class LabelRenderer
extends JsonFormsBaseRenderer<LabelElement>
implements OnDestroy, OnInit
implements OnInit
{
label: string;
visible: boolean;

private subscription: Subscription;

constructor(private jsonFormsService: JsonFormsAngularService) {
super();
}
ngOnInit() {
this.subscription = this.jsonFormsService.$state.subscribe({
next: (state: JsonFormsState) => {
const props = mapStateToLabelProps(
state,
this.getOwnProps() as OwnPropsOfLabel
);
this.visible = props.visible;
this.label = props.text;
},
});
}

ngOnDestroy() {
if (this.subscription) {
this.subscription.unsubscribe();
}
this.addSubscription(
this.jsonFormsService.$state.subscribe({
next: (state: JsonFormsState) => {
const props = mapStateToLabelProps(
state,
this.getOwnProps() as OwnPropsOfLabel
);
this.visible = props.visible;
this.label = props.text;
},
})
);
}
}

Expand Down
80 changes: 40 additions & 40 deletions packages/angular/src/library/abstract-control.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,6 @@ import {
ValidationErrors,
ValidatorFn,
} from '@angular/forms';
import type { Subscription } from 'rxjs';

import { JsonFormsBaseRenderer } from './base.renderer';
import { JsonFormsAngularService } from './jsonforms.service';
Expand All @@ -58,7 +57,6 @@ export abstract class JsonFormsAbstractControl<
@Input() visible: boolean;

form: FormControl;
subscription: Subscription;
data: any;
label: string;
description: string;
Expand Down Expand Up @@ -99,41 +97,45 @@ export abstract class JsonFormsAbstractControl<
}

ngOnInit() {
this.jsonFormsService.$state.subscribe({
next: (state: JsonFormsState) => {
const props = this.mapToProps(state);
const {
data,
enabled,
errors,
label,
required,
schema,
rootSchema,
visible,
path,
config,
} = props;
this.label = computeLabel(
label,
required,
config ? config.hideRequiredAsterisk : false
);
this.data = data;
this.error = errors;
this.enabled = enabled;
this.isEnabled() ? this.form.enable() : this.form.disable();
this.hidden = !visible;
this.scopedSchema = schema;
this.rootSchema = rootSchema;
this.description =
this.scopedSchema !== undefined ? this.scopedSchema.description : '';
this.id = props.id;
this.form.setValue(data);
this.propsPath = path;
this.mapAdditionalProps(props);
},
});
this.addSubscription(
this.jsonFormsService.$state.subscribe({
next: (state: JsonFormsState) => {
const props = this.mapToProps(state);
const {
data,
enabled,
errors,
label,
required,
schema,
rootSchema,
visible,
path,
config,
} = props;
this.label = computeLabel(
label,
required,
config ? config.hideRequiredAsterisk : false
);
this.data = data;
this.error = errors;
this.enabled = enabled;
this.isEnabled() ? this.form.enable() : this.form.disable();
this.hidden = !visible;
this.scopedSchema = schema;
this.rootSchema = rootSchema;
this.description =
this.scopedSchema !== undefined
? this.scopedSchema.description
: '';
this.id = props.id;
this.form.setValue(data);
this.propsPath = path;
this.mapAdditionalProps(props);
},
})
);
this.triggerValidation();
}

Expand All @@ -146,9 +148,7 @@ export abstract class JsonFormsAbstractControl<
}

ngOnDestroy() {
if (this.subscription) {
this.subscription.unsubscribe();
}
super.ngOnDestroy();
removeId(this.id);
}

Expand Down
20 changes: 18 additions & 2 deletions packages/angular/src/library/base.renderer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,18 +22,30 @@
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
*/
import { Directive, Input } from '@angular/core';
import { Directive, Input, OnDestroy } from '@angular/core';
import {
JsonSchema,
OwnPropsOfRenderer,
UISchemaElement,
} from '@jsonforms/core';
import { Subscription } from 'rxjs';

@Directive()
export class JsonFormsBaseRenderer<T extends UISchemaElement> {
export class JsonFormsBaseRenderer<T extends UISchemaElement>
implements OnDestroy
{
@Input() uischema: T;
@Input() schema: JsonSchema;
@Input() path: string;
protected subscriptions: Subscription = new Subscription();

protected addSubscription(subscription: Subscription | Subscription[]) {
if (Array.isArray(subscription)) {
subscription.forEach((sub) => this.subscriptions.add(sub));
} else {
this.subscriptions.add(subscription);
}
}

protected getOwnProps(): OwnPropsOfRenderer {
return {
Expand All @@ -42,4 +54,8 @@ export class JsonFormsBaseRenderer<T extends UISchemaElement> {
path: this.path,
};
}

ngOnDestroy(): void {
this.subscriptions.unsubscribe();
}
}
Loading
Loading