mirror of
https://github.com/google/nomulus
synced 2026-02-08 05:50:24 +00:00
70 lines
2.3 KiB
TypeScript
70 lines
2.3 KiB
TypeScript
// Copyright 2023 The Nomulus Authors. All Rights Reserved.
|
|
//
|
|
// Licensed under the Apache License, Version 2.0 (the "License");
|
|
// you may not use this file except in compliance with the License.
|
|
// You may obtain a copy of the License at
|
|
//
|
|
// http://www.apache.org/licenses/LICENSE-2.0
|
|
//
|
|
// Unless required by applicable law or agreed to in writing, software
|
|
// distributed under the License is distributed on an "AS IS" BASIS,
|
|
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
// See the License for the specific language governing permissions and
|
|
// limitations under the License.
|
|
|
|
import { BreakpointObserver } from '@angular/cdk/layout';
|
|
import { ComponentType } from '@angular/cdk/portal';
|
|
import { Component } from '@angular/core';
|
|
import {
|
|
MatBottomSheet,
|
|
MatBottomSheetRef,
|
|
} from '@angular/material/bottom-sheet';
|
|
import { MatDialog, MatDialogRef } from '@angular/material/dialog';
|
|
|
|
const MOBILE_LAYOUT_BREAKPOINT = '(max-width: 599px)';
|
|
|
|
export interface DialogBottomSheetContent {
|
|
init(data: Object): void;
|
|
}
|
|
|
|
/**
|
|
* Wraps up a child component in an Angular Material Dalog for desktop or a Bottom Sheet
|
|
* component for mobile depending on a screen resolution, with Breaking Point being 599px.
|
|
* Child component is required to implement @see DialogBottomSheetContent interface
|
|
*/
|
|
@Component({
|
|
selector: 'app-dialog-bottom-sheet-wrapper',
|
|
template: '',
|
|
})
|
|
export class DialogBottomSheetWrapper {
|
|
private elementRef?: MatBottomSheetRef | MatDialogRef<any>;
|
|
|
|
constructor(
|
|
private dialog: MatDialog,
|
|
private bottomSheet: MatBottomSheet,
|
|
protected breakpointObserver: BreakpointObserver
|
|
) {}
|
|
|
|
open<T extends DialogBottomSheetContent>(
|
|
component: ComponentType<T>,
|
|
data: any
|
|
) {
|
|
const config = { data, close: () => this.close() };
|
|
if (this.breakpointObserver.isMatched(MOBILE_LAYOUT_BREAKPOINT)) {
|
|
this.elementRef = this.bottomSheet.open(component);
|
|
this.elementRef.instance.init(config);
|
|
} else {
|
|
this.elementRef = this.dialog.open(component);
|
|
this.elementRef.componentInstance.init(config);
|
|
}
|
|
}
|
|
|
|
close() {
|
|
if (this.elementRef instanceof MatBottomSheetRef) {
|
|
this.elementRef.dismiss();
|
|
} else if (this.elementRef instanceof MatDialogRef) {
|
|
this.elementRef.close();
|
|
}
|
|
}
|
|
}
|