fix: known drawer issues (#531)

Co-authored-by: tianwenjie <igauch@qq.com>
alauda · Dec 14, 2023 · 780dfb2 · 780dfb2
1 parent 4bb7e03
commit 780dfb2
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 9 deletions.
diff --git a/.changeset/neat-pots-doubt.md b/.changeset/neat-pots-doubt.md
@@ -0,0 +1,6 @@
+---
+'@alauda/ui': patch
+---
+
+- fix: no default config for using service mode     
+- fix: not auto destroy when hiding for using service mode  
diff --git a/src/drawer/component/drawer.component.ts b/src/drawer/component/drawer.component.ts
@@ -42,10 +42,10 @@ export class DrawerComponent<
   footer: string | TemplateRef<C>;
 
   @Input()
-  size: DrawerSize = DrawerSize.Medium;
+  size: DrawerSize;
 
   @Input()
-  offsetY = '0px';
+  offsetY: string;
 
   @Input()
   visible: boolean;
@@ -54,10 +54,10 @@ export class DrawerComponent<
   content: TemplateRef<C> | ComponentType<T>;
 
   @Input()
-  hideOnClickOutside = false;
+  hideOnClickOutside: boolean;
 
   @Input()
-  showClose = true;
+  showClose: boolean;
 
   @Input()
   drawerClass: string;
@@ -69,14 +69,17 @@ export class DrawerComponent<
   maskClosable: boolean;
 
   @Input()
-  divider = true;
+  divider: boolean;
 
   @Input()
   width: number;
 
   @Input()
   contentParams: C;
 
+  @Input()
+  disposeWhenHide = false;
+
   @Output()
   readonly close = new EventEmitter<R>();
 

diff --git a/src/drawer/drawer.service.ts b/src/drawer/drawer.service.ts
@@ -5,9 +5,17 @@ import { debounceTime, filter, fromEvent, Subject, takeUntil } from 'rxjs';
 
 import { DrawerInternalComponent } from './component/internal/internal.component';
 import { DrawerRef } from './drawer-ref';
-import { DrawerOptions } from './types';
+import { DrawerOptions, DrawerSize } from './types';
 
 const DRAWER_OVERLAY_CLASS = 'aui-drawer-overlay';
+const DEFAULT_OPTIONS: DrawerOptions = {
+  size: DrawerSize.Medium,
+  offsetY: '0',
+  showClose: true,
+  hideOnClickOutside: false,
+  divider: true,
+  disposeWhenHide: true,
+};
 
 @Injectable()
 export class DrawerService<
@@ -38,7 +46,10 @@ export class DrawerService<
   }
 
   updateOptions(options: DrawerOptions<T, C>): void {
-    this.options = options;
+    this.options = {
+      ...(DEFAULT_OPTIONS as DrawerOptions<T, C>),
+      ...options,
+    };
   }
 
   private createOverlay() {
@@ -93,6 +104,7 @@ export class DrawerService<
     drawerInternalComponentRef.instance.animationStep$.subscribe(step => {
       if (step === 'hideDone') {
         this.invisible$.next();
+        this.options.disposeWhenHide && this.dispose();
         this.overlayRef?.getConfig().scrollStrategy.disable();
       }
     });
@@ -109,12 +121,17 @@ export class DrawerService<
     });
   }
 
-  ngOnDestroy(): void {
-    this.invisible$.next();
+  private dispose() {
     if (this.overlayRef) {
       this.overlayRef.getConfig().scrollStrategy.disable();
       this.overlayRef.dispose();
       this.overlayRef = null;
     }
+    this.drawerInternalComponentRef = null;
+  }
+
+  ngOnDestroy(): void {
+    this.invisible$.next();
+    this.dispose();
   }
 }
diff --git a/src/drawer/types.ts b/src/drawer/types.ts
@@ -26,4 +26,5 @@ export interface DrawerOptions<T = unknown, C extends object = object> {
   mask?: boolean;
   maskClosable?: boolean; // 点击背景是否关闭抽屉
   hideOnClickOutside?: boolean; // 在抽屉外点击是否关闭抽屉，与 maskClosable 的区别是是否有 mask
+  disposeWhenHide?: boolean; // 抽屉不可见时是否销毁，使用组件方式时默认为false
 }