Skip to content

Commit 3ad1bd6

Browse files
xidedixxidedix
committed
refactor: remove deprecated 'allowSignalWrites' flag for effect() - writes are allowed by default
1 parent 577a6a0 commit 3ad1bd6

File tree

4 files changed

+64
-88
lines changed

4 files changed

+64
-88
lines changed

‎projects/coreui-angular/src/lib/collapse/collapse.directive.ts

Lines changed: 11 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -38,12 +38,9 @@ export class CollapseDirective implements OnDestroy {
3838

3939
readonly animate = signal(true);
4040

41-
readonly animateInputEffect = effect(
42-
() => {
43-
this.animate.set(this.animateInput());
44-
},
45-
{ allowSignalWrites: true }
46-
);
41+
readonly animateInputEffect = effect(() => {
42+
this.animate.set(this.animateInput());
43+
});
4744

4845
/**
4946
* Set horizontal collapsing to transition the width instead of height.
@@ -61,26 +58,20 @@ export class CollapseDirective implements OnDestroy {
6158

6259
readonly visibleChange = output<boolean>();
6360

64-
readonly visibleInputEffect = effect(
65-
() => {
66-
this.visible.set(this.visibleInput());
67-
},
68-
{ allowSignalWrites: true }
69-
);
61+
readonly visibleInputEffect = effect(() => {
62+
this.visible.set(this.visibleInput());
63+
});
7064

7165
readonly visible = signal<boolean>(false);
7266

7367
#init = false;
7468

75-
readonly visibleEffect = effect(
76-
() => {
77-
const visible = this.visible();
69+
readonly visibleEffect = effect(() => {
70+
const visible = this.visible();
7871

79-
(this.#init || visible) && this.createPlayer(visible);
80-
this.#init = true;
81-
},
82-
{ allowSignalWrites: true }
83-
);
72+
(this.#init || visible) && this.createPlayer(visible);
73+
this.#init = true;
74+
});
8475

8576
/**
8677
* Add `navbar` prop for grouping and hiding navbar contents by a parent breakpoint.

‎projects/coreui-angular/src/lib/tabs-2/tab/tab.directive.ts

Lines changed: 16 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -93,26 +93,23 @@ export class TabDirective implements FocusableOption {
9393
() => this.ariaControls() ?? `${this.#tabsService.id()}-panel-${this.itemKey()}`
9494
);
9595

96-
disabledEffect = effect(
97-
() => {
98-
if (!this.#disabled()) {
99-
const click$ = fromEvent<MouseEvent>(this.#elementRef.nativeElement, 'click');
100-
const focusIn$ = fromEvent<FocusEvent>(this.#elementRef.nativeElement, 'focusin');
96+
disabledEffect = effect(() => {
97+
if (!this.#disabled()) {
98+
const click$ = fromEvent<MouseEvent>(this.#elementRef.nativeElement, 'click');
99+
const focusIn$ = fromEvent<FocusEvent>(this.#elementRef.nativeElement, 'focusin');
101100

102-
merge(focusIn$, click$)
103-
.pipe(
104-
filter(($event) => !this.#disabled()),
105-
tap(($event) => {
106-
this.#tabsService.activeItemKey.set(untracked(this.itemKey));
107-
}),
108-
takeWhile(() => !this.#disabled()),
109-
takeUntilDestroyed(this.#destroyRef)
110-
)
111-
.subscribe();
112-
}
113-
},
114-
{ allowSignalWrites: true }
115-
);
101+
merge(focusIn$, click$)
102+
.pipe(
103+
filter(($event) => !this.#disabled()),
104+
tap(($event) => {
105+
this.#tabsService.activeItemKey.set(untracked(this.itemKey));
106+
}),
107+
takeWhile(() => !this.#disabled()),
108+
takeUntilDestroyed(this.#destroyRef)
109+
)
110+
.subscribe();
111+
}
112+
});
116113

117114
focus(origin?: FocusOrigin): void {
118115
this.#elementRef.nativeElement.focus();

‎projects/coreui-angular/src/lib/tabs-2/tabs-list/tabs-list.component.ts

Lines changed: 30 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -59,45 +59,39 @@ export class TabsListComponent {
5959
readonly tabs = contentChildren(TabDirective);
6060
#focusKeyManager!: FocusKeyManager<TabDirective>;
6161

62-
readonly tabsEffect = effect(
63-
() => {
64-
if (this.tabs().length === 0) {
65-
return;
66-
}
67-
this.#focusKeyManager = new FocusKeyManager(this.tabs())
68-
.skipPredicate((tab) => tab.disabled === true)
69-
.withHorizontalOrientation('ltr')
70-
.withHomeAndEnd()
71-
.withWrap();
62+
readonly tabsEffect = effect(() => {
63+
if (this.tabs().length === 0) {
64+
return;
65+
}
66+
this.#focusKeyManager = new FocusKeyManager(this.tabs())
67+
.skipPredicate((tab) => tab.disabled === true)
68+
.withHorizontalOrientation('ltr')
69+
.withHomeAndEnd()
70+
.withWrap();
7271

73-
this.#focusKeyManager.change
74-
.pipe(
75-
tap((value) => {
76-
this.tabsService.activeItemKey.set(this.#focusKeyManager.activeItem?.itemKey());
77-
this.tabsService.activeItem.set(this.#focusKeyManager.activeItem);
78-
}),
79-
takeUntilDestroyed(this.#destroyRef)
80-
)
81-
.subscribe();
72+
this.#focusKeyManager.change
73+
.pipe(
74+
tap((value) => {
75+
this.tabsService.activeItemKey.set(this.#focusKeyManager.activeItem?.itemKey());
76+
this.tabsService.activeItem.set(this.#focusKeyManager.activeItem);
77+
}),
78+
takeUntilDestroyed(this.#destroyRef)
79+
)
80+
.subscribe();
8281

83-
const activeItem = this.tabs().find((tab) => untracked(tab.isActive)) ?? this.tabs().find((tab) => !tab.disabled);
84-
const activeItemIndex = this.tabs().findIndex((tab) => tab === activeItem);
85-
this.#focusKeyManager?.updateActiveItem(activeItemIndex < 0 ? 0 : activeItemIndex);
86-
this.tabsService.activeItemKey.set(this.#focusKeyManager.activeItem?.itemKey());
87-
this.tabsService.activeItem.set(this.#focusKeyManager.activeItem);
88-
},
89-
{ allowSignalWrites: true }
90-
);
82+
const activeItem = this.tabs().find((tab) => untracked(tab.isActive)) ?? this.tabs().find((tab) => !tab.disabled);
83+
const activeItemIndex = this.tabs().findIndex((tab) => tab === activeItem);
84+
this.#focusKeyManager?.updateActiveItem(activeItemIndex < 0 ? 0 : activeItemIndex);
85+
this.tabsService.activeItemKey.set(this.#focusKeyManager.activeItem?.itemKey());
86+
this.tabsService.activeItem.set(this.#focusKeyManager.activeItem);
87+
});
9188

92-
tabsServiceEffect = effect(
93-
() => {
94-
const activeItemIndex = this.tabs().findIndex(
95-
(tab) => untracked(tab.isActive) && untracked(tab.itemKey) === this.tabsService.activeItemKey()
96-
);
97-
this.#focusKeyManager?.updateActiveItem(activeItemIndex < 0 ? 0 : activeItemIndex);
98-
},
99-
{ allowSignalWrites: true }
100-
);
89+
tabsServiceEffect = effect(() => {
90+
const activeItemIndex = this.tabs().findIndex(
91+
(tab) => untracked(tab.isActive) && untracked(tab.itemKey) === this.tabsService.activeItemKey()
92+
);
93+
this.#focusKeyManager?.updateActiveItem(activeItemIndex < 0 ? 0 : activeItemIndex);
94+
});
10195

10296
@HostListener('keydown', ['$event'])
10397
onKeydown($event: any) {

‎projects/coreui-angular/src/lib/tabs-2/tabs.component.ts

Lines changed: 7 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -31,18 +31,12 @@ export class TabsComponent {
3131
tabsId = `tabs-${nextId++}`;
3232
readonly id = input<string>(this.tabsId);
3333

34-
readonly activeItemEffect = effect(
35-
() => {
36-
this.tabsService.id.set(this.id());
37-
this.tabsService.activeItemKey.set(this.activeItemKey());
38-
},
39-
{ allowSignalWrites: true }
40-
);
34+
readonly activeItemEffect = effect(() => {
35+
this.tabsService.id.set(this.id());
36+
this.tabsService.activeItemKey.set(this.activeItemKey());
37+
});
4138

42-
readonly tabsServiceEffect = effect(
43-
() => {
44-
this.activeItemKey.set(this.tabsService.activeItemKey());
45-
},
46-
{ allowSignalWrites: true }
47-
);
39+
readonly tabsServiceEffect = effect(() => {
40+
this.activeItemKey.set(this.tabsService.activeItemKey());
41+
});
4842
}

0 commit comments

Comments
 (0)