perf(theme:modal): perf code

ng-alain · Oct 22, 2023 · ac83b22 · ac83b22
1 parent 3d6e016
commit ac83b22
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 11 deletions.
diff --git a/packages/theme/src/services/modal/modal.helper.ts b/packages/theme/src/services/modal/modal.helper.ts
@@ -7,6 +7,8 @@ import { deepMerge } from '@delon/util/other';
 import type { NzSafeAny } from 'ng-zorro-antd/core/types';
 import { ModalOptions, NzModalService } from 'ng-zorro-antd/modal';
 
+const CLS_DRAG = 'MODAL-DRAG';
+
 export interface ModalHelperOptions {
   /** 大小；例如：lg、600、80%，默认：`lg` */
   size?: 'sm' | 'md' | 'lg' | 'xl' | '' | number | string;
@@ -39,7 +41,6 @@ export interface ModalHelperDragOptions {
 @Injectable({ providedIn: 'root' })
 export class ModalHelper {
   private document: Document;
-  private dragClsPrefix = 'MODAL-DRAG';
 
   constructor(
     private srv: NzModalService,
@@ -54,7 +55,7 @@ export class ModalHelper {
     const modalEl = wrapEl.firstChild as HTMLDivElement;
     const handelEl = options.handleCls ? wrapEl.querySelector<HTMLDivElement>(options.handleCls) : null;
     if (handelEl) {
-      handelEl.classList.add(`${this.dragClsPrefix}-HANDLE`);
+      handelEl.classList.add(`${CLS_DRAG}-HANDLE`);
     }
 
     return this.drag
@@ -95,36 +96,36 @@ export class ModalHelper {
     );
     return new Observable((observer: Observer<NzSafeAny>) => {
       const { size, includeTabs, modalOptions, drag, useNzData } = options as ModalHelperOptions;
-      let cls = '';
+      let cls: string[] = [];
       let width = '';
       if (size) {
         if (typeof size === 'number') {
           width = `${size}px`;
         } else if (['sm', 'md', 'lg', 'xl'].includes(size)) {
-          cls = `modal-${size}`;
+          cls.push(`modal-${size}`);
         } else {
           width = size;
         }
       }
       if (includeTabs) {
-        cls += ' modal-include-tabs';
+        cls.push(`modal-include-tabs`);
       }
       if (modalOptions && modalOptions.nzWrapClassName) {
-        cls += ` ${modalOptions.nzWrapClassName}`;
+        cls.push(modalOptions.nzWrapClassName);
         delete modalOptions.nzWrapClassName;
       }
       let dragOptions: ModalHelperDragOptions | null;
-      let dragWrapCls = `${this.dragClsPrefix}-${+new Date()}`;
+      let dragWrapCls = `${CLS_DRAG}-${+new Date()}`;
       let dragRef: DragRef | null;
       if (drag != null && drag !== false) {
         dragOptions = {
           handleCls: `.modal-header, .ant-modal-title`,
           ...(typeof drag === 'object' ? drag : {})
         };
-        cls += ` ${this.dragClsPrefix} ${dragWrapCls}`;
+        cls.push(CLS_DRAG, dragWrapCls);
       }
       const subject = this.srv.create({
-        nzWrapClassName: cls,
+        nzWrapClassName: cls.join(' '),
         nzContent: comp,
         nzWidth: width ? width : undefined,
         nzFooter: null,

diff --git a/packages/theme/system/antd/_modal.less b/packages/theme/system/antd/_modal.less
@@ -124,6 +124,8 @@
   }
 }
 
-.MODAL-DRAG-HANDLE {
-  cursor: move;
+.MODAL-DRAG {
+  &-HANDLE {
+    cursor: move;
+  }
 }