Skip to content
This repository was archived by the owner on Jan 6, 2025. It is now read-only.

Commit 14b8038

Browse files
CaerusKaruCaerusKaru
authored
feat(core): remove deprecated MediaObserver::media$ (#1375)
1 parent 00b4376 commit 14b8038

File tree

3 files changed

+47
-61
lines changed

3 files changed

+47
-61
lines changed

‎projects/libs/flex-layout/core/add-alias.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,14 @@
66
* found in the LICENSE file at https://angular.io/license
77
*/
88
import {MediaChange} from './media-change';
9-
import {BreakPoint} from './breakpoints/break-point';
9+
import {OptionalBreakPoint} from './breakpoints';
1010

1111
/**
1212
* For the specified MediaChange, make sure it contains the breakpoint alias
1313
* and suffix (if available).
1414
*/
15-
export function mergeAlias(dest: MediaChange, source: BreakPoint | null): MediaChange {
16-
dest = dest ? dest.clone() : new MediaChange();
15+
export function mergeAlias(dest: MediaChange, source: OptionalBreakPoint): MediaChange {
16+
dest = dest?.clone() ?? new MediaChange();
1717
if (source) {
1818
dest.mqAlias = source.alias;
1919
dest.mediaQuery = source.mediaQuery;

‎projects/libs/flex-layout/core/media-observer/media-observer.spec.ts

Lines changed: 40 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
*/
88
import {TestBed, inject, fakeAsync, tick} from '@angular/core/testing';
99
import {Observable} from 'rxjs';
10-
import {filter} from 'rxjs/operators';
10+
import {switchMap} from 'rxjs/operators';
1111

1212
import {BreakPoint} from '../breakpoints/break-point';
1313
import {BREAKPOINTS} from '../breakpoints/break-points-token';
@@ -20,7 +20,7 @@ import {DEFAULT_CONFIG, LAYOUT_CONFIG} from '../tokens/library-config';
2020

2121
describe('media-observer', () => {
2222
let knownBreakPoints: BreakPoint[] = [];
23-
let media$: Observable<MediaChange>;
23+
let media$: Observable<MediaChange[]>;
2424
let mediaObserver: MediaObserver;
2525
let mediaController: MockMatchMedia;
2626
const activateQuery = (alias: string, useOverlaps?: boolean) => {
@@ -42,7 +42,7 @@ describe('media-observer', () => {
4242
mediaObserver = _mediaObserver;
4343
mediaController = _mediaController;
4444

45-
media$ = _mediaObserver.media$;
45+
media$ = _mediaObserver.asObservable();
4646
}));
4747

4848
afterEach(() => {
@@ -53,8 +53,8 @@ describe('media-observer', () => {
5353
let findMediaQuery: (alias: string) => string = (alias) => {
5454
const NOT_FOUND = `${alias} not found`;
5555
return knownBreakPoints.reduce((mediaQuery: string | null, bp) => {
56-
return mediaQuery || ((bp.alias === alias) ? bp.mediaQuery : null);
57-
}, null) as string || NOT_FOUND;
56+
return mediaQuery ?? ((bp.alias === alias) ? bp.mediaQuery : null);
57+
}, null) as string ?? NOT_FOUND;
5858
};
5959
it('can supports the `.isActive()` API', () => {
6060
expect(media$).toBeDefined();
@@ -75,7 +75,7 @@ describe('media-observer', () => {
7575
let count = 0,
7676
onlyMd = (change: MediaChange) => (change.mqAlias == 'md'),
7777
subscription = media$
78-
.pipe(filter(onlyMd))
78+
.pipe(switchMap(changes => changes.filter(onlyMd)))
7979
.subscribe(_ => {
8080
count += 1;
8181
});
@@ -123,9 +123,9 @@ describe('media-observer', () => {
123123
}));
124124

125125
it('can subscribe to built-in mediaQueries', fakeAsync(() => {
126-
let current: MediaChange = new MediaChange(true);
127-
let subscription = media$.subscribe((change: MediaChange) => {
128-
current = change;
126+
let current: MediaChange[] = [new MediaChange(true)];
127+
let subscription = media$.subscribe((changes: MediaChange[]) => {
128+
current = changes;
129129
});
130130

131131
expect(media$).toBeDefined();
@@ -134,8 +134,8 @@ describe('media-observer', () => {
134134

135135
// Confirm initial match is for 'all'
136136
expect(current).toBeDefined();
137-
expect(current.matches).toBeTruthy();
138-
expect(current.mediaQuery).toEqual('all');
137+
expect(current[0].matches).toBeTruthy();
138+
expect(current[0].mediaQuery).toEqual('all');
139139

140140
try {
141141
// Allow overlapping activations to be announced to observers
@@ -144,53 +144,53 @@ describe('media-observer', () => {
144144

145145
// Activate mediaQuery associated with 'md' alias
146146
activateQuery('md');
147-
expect(current.mediaQuery).toEqual(findMediaQuery('md'));
147+
expect(current[0].mediaQuery).toEqual(findMediaQuery('md'));
148148

149149
activateQuery('gt-lg');
150-
expect(current.mediaQuery).toEqual(findMediaQuery('gt-lg'));
150+
expect(current[0].mediaQuery).toEqual(findMediaQuery('gt-lg'));
151151
} finally {
152152
mediaController.autoRegisterQueries = true;
153153
subscription.unsubscribe();
154154
}
155155
}));
156156

157157
it('can `.unsubscribe()` properly', fakeAsync(() => {
158-
let current: MediaChange = new MediaChange(true);
159-
let subscription = media$.subscribe((change: MediaChange) => {
160-
current = change;
158+
let current: MediaChange[] = [new MediaChange(true)];
159+
let subscription = media$.subscribe((changes: MediaChange[]) => {
160+
current = changes;
161161
});
162162

163163
// Activate mediaQuery associated with 'md' alias
164164
activateQuery('md');
165-
expect(current.mediaQuery).toEqual(findMediaQuery('md'));
165+
expect(current[0].mediaQuery).toEqual(findMediaQuery('md'));
166166

167167
// Un-subscribe
168168
subscription.unsubscribe();
169169

170170
activateQuery('lg');
171-
expect(current.mqAlias).toBe('md');
171+
expect(current[0].mqAlias).toBe('md');
172172

173173
activateQuery('xs');
174-
expect(current.mqAlias).toBe('md');
174+
expect(current[0].mqAlias).toBe('md');
175175

176176
mediaController.clearAll();
177177
}));
178178

179179
it('can observe a startup activation of XS', fakeAsync(() => {
180-
let current: MediaChange = new MediaChange(true);
181-
let subscription = media$.subscribe((change: MediaChange) => {
182-
current = change;
180+
let current: MediaChange[] = [new MediaChange(true)];
181+
let subscription = media$.subscribe((changes: MediaChange[]) => {
182+
current = changes;
183183
});
184184

185185
// Activate mediaQuery associated with 'md' alias
186186
activateQuery('xs');
187-
expect(current.mediaQuery).toEqual(findMediaQuery('xs'));
187+
expect(current[0].mediaQuery).toEqual(findMediaQuery('xs'));
188188

189189
// Un-subscribe
190190
subscription.unsubscribe();
191191

192192
activateQuery('lg');
193-
expect(current.mqAlias).toBe('xs');
193+
expect(current[0].mqAlias).toBe('xs');
194194

195195
mediaController.clearAll();
196196
}));
@@ -222,7 +222,7 @@ describe('media-observer', () => {
222222
mediaObserver = _mediaObserver;
223223
mediaController = _mediaController;
224224

225-
media$ = _mediaObserver.media$;
225+
media$ = _mediaObserver.asObservable();
226226
}));
227227

228228
afterEach(() => {
@@ -278,25 +278,25 @@ describe('media-observer', () => {
278278
mediaObserver = _mediaObserver;
279279
mediaController = _mediaController;
280280

281-
media$ = _mediaObserver.media$;
281+
media$ = _mediaObserver.asObservable();
282282
}));
283283

284284
it('can activate when configured with "md" alias', fakeAsync(() => {
285-
let current: MediaChange = new MediaChange(true);
286-
let subscription = media$.subscribe((change: MediaChange) => {
287-
current = change;
285+
let current: MediaChange[] = [new MediaChange(true)];
286+
let subscription = media$.subscribe((changes: MediaChange[]) => {
287+
current = changes;
288288
});
289289

290290
try {
291291
activateQuery('lg');
292292

293293
// Activate mediaQuery associated with 'md' alias
294294
activateQuery('print');
295-
expect(current.mqAlias).toBe('md');
296-
expect(current.mediaQuery).toEqual(mdMediaQuery);
295+
expect(current[0].mqAlias).toBe('md');
296+
expect(current[0].mediaQuery).toEqual(mdMediaQuery);
297297

298298
activateQuery('sm');
299-
expect(current.mqAlias).toBe('sm');
299+
expect(current[0].mqAlias).toBe('sm');
300300

301301
} finally {
302302
subscription.unsubscribe();
@@ -323,30 +323,30 @@ describe('media-observer', () => {
323323
mediaObserver = _mediaObserver;
324324
mediaController = _mediaController;
325325

326-
media$ = _mediaObserver.media$;
326+
media$ = _mediaObserver.asObservable();
327327
}));
328328

329329
afterEach(() => {
330330
mediaController.clearAll();
331331
});
332332

333333
it('will skip print activation without alias', fakeAsync(() => {
334-
let current: MediaChange = new MediaChange(true);
335-
let subscription = media$.subscribe((change: MediaChange) => {
336-
current = change;
334+
let current: MediaChange[] = [new MediaChange(true)];
335+
let subscription = media$.subscribe((changes: MediaChange[]) => {
336+
current = changes;
337337
});
338338

339339
try {
340340
activateQuery('sm');
341-
expect(current.mqAlias).toBe('sm');
341+
expect(current[0].mqAlias).toBe('sm');
342342

343343
// Activate mediaQuery associated with 'md' alias
344344
activateQuery('print');
345-
expect(current.mqAlias).toBe('sm');
346-
expect(current.mediaQuery).toEqual(smMediaQuery);
345+
expect(current[0].mqAlias).toBe('sm');
346+
expect(current[0].mediaQuery).toEqual(smMediaQuery);
347347

348348
activateQuery('xl');
349-
expect(current.mqAlias).toBe('xl');
349+
expect(current[0].mqAlias).toBe('xl');
350350

351351
} finally {
352352
subscription.unsubscribe();

‎projects/libs/flex-layout/core/media-observer/media-observer.ts

Lines changed: 4 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -69,25 +69,13 @@ import {coerceArray} from '../utils/array';
6969
*/
7070
@Injectable({providedIn: 'root'})
7171
export class MediaObserver implements OnDestroy {
72-
73-
/**
74-
* @deprecated Use `asObservable()` instead.
75-
* @breaking-change 8.0.0-beta.25
76-
* @deletion-target 10.0.0
77-
*/
78-
readonly media$: Observable<MediaChange>;
79-
8072
/** Filter MediaChange notifications for overlapping breakpoints */
8173
filterOverlaps = false;
8274

8375
constructor(protected breakpoints: BreakPointRegistry,
8476
protected matchMedia: MatchMedia,
8577
protected hook: PrintHook) {
8678
this._media$ = this.watchActivations();
87-
this.media$ = this._media$.pipe(
88-
filter((changes: MediaChange[]) => changes.length > 0),
89-
map((changes: MediaChange[]) => changes[0])
90-
);
9179
}
9280

9381
/**
@@ -199,9 +187,8 @@ export class MediaObserver implements OnDestroy {
199187
const bp: OptionalBreakPoint = this.breakpoints.findByQuery(change.mediaQuery);
200188
return mergeAlias(change, bp);
201189
};
202-
const replaceWithPrintAlias = (change: MediaChange) => {
203-
return this.hook.isPrintEvent(change) ? this.hook.updateEvent(change) : change;
204-
};
190+
const replaceWithPrintAlias = (change: MediaChange) =>
191+
this.hook.isPrintEvent(change) ? this.hook.updateEvent(change) : change;
205192

206193
return this.matchMedia
207194
.activations
@@ -228,7 +215,6 @@ function toMediaQuery(query: string, locator: BreakPointRegistry): string | null
228215
* separated.
229216
*/
230217
function splitQueries(queries: string[]): string[] {
231-
return queries.map((query: string) => query.split(','))
232-
.reduce((a1: string[], a2: string[]) => a1.concat(a2))
233-
.map(query => query.trim());
218+
return queries.flatMap(query => query.split(','))
219+
.map(query => query.trim());
234220
}

0 commit comments

Comments
 (0)