feat: 静态类中的函数继承范性

model onClose and ondestory函数
createDOMElemnet 从jsx

packages/ui/src/components/modal/blank-modal.ts

@@ -98,12 +98,12 @@ export class DialogModal extends Modal<DialogModalOpts, DialogDefaultStyle> {
       ...opts?.defaultStyle?.defaultDialogFooterStyle,
     });
   }
-  static render(el: string | HTMLDivElement, id: string, opts?: DialogModalOpts): any;
-  static render(el: string | HTMLDivElement, opts?: DialogModalOpts): any;
-  static render(...args: any[]) {
-    const [el, id, opts] = args;
-    super.render(el, id, opts);
-  }
+  // static render(el: string | HTMLDivElement, id: string, opts?: DialogModalOpts): DialogModal;
+  // static render(el: string | HTMLDivElement, opts?: DialogModalOpts): DialogModal;
+  // static render(...args: any[]) {
+  //   const [el, id, opts] = args;
+  //   return super.render(el, id, opts);
+  // }
   appendRoot(documentFragment: DocumentFragment): void {
     const cacheFragment = document.createDocumentFragment();
     // 拿出来

packages/ui/src/components/modal/index.css

@@ -8,10 +8,9 @@
   right: 0;
   bottom: 0;
   z-index: 200;
-  display: none;
 }
-.ui-modal-open {
-  display: block;
+.ui-modal-close {
+  display: none;
 }
 
 .ui-modal-mask {

packages/ui/src/components/modal/modal.ts

@@ -23,8 +23,9 @@ export type ModalOpts<
 
   contentClassName?: string;
   contentStyle?: ElStyle;
-
-  destroyOnClose?: boolean;
+  destroyOnClose?: boolean; // 关闭，把Element移动到cacheFragment中
+  hideOnClose?: boolean; // 关闭后是否销毁，设置display:none
+  open?: boolean;
 
   onClose?: () => void;
   defaultStyle?: DefaultStyle<U>;
@@ -49,6 +50,7 @@ export class Modal<T = any, U = KV> {
   contentStyle?: ElStyle;
 
   destroyOnClose?: boolean;
+  hideOnClose?: boolean;
 
   open?: boolean;
   isUse = true;
@@ -67,12 +69,18 @@ export class Modal<T = any, U = KV> {
     this.maskClose = opts.maskClose ?? true;
     this.contentClassName = opts.contentClassName;
     this.contentStyle = opts.contentStyle;
-    this.destroyOnClose = opts.destroyOnClose ?? false;
+    this.destroyOnClose = opts.destroyOnClose ?? true;
+    this.hideOnClose = opts.hideOnClose ?? true;
+    if (!this.destroyOnClose && !this.hideOnClose) {
+      this.destroyOnClose = true; // 必须要有一个为true
+      console.warn('destroyOnClose Or hideOnClose must one is true');
+    }
     this.cacheFragment = new DocumentFragment();
     this.defaultStyle = opts.defaultStyle || ({} as DefaultStyle<U>);
+    this.open = opts.open ?? true;
     this.onClose = opts.onClose;
   }
-  initRoot(root: ModalOpts['root']) {
+  protected initRoot(root: ModalOpts['root']) {
     let _root = querySelector(root);
     if (!_root) {
       // 查询ui-modal元素,不存在则创建一个ui-modal元素并添加到body上
@@ -96,8 +104,8 @@ export class Modal<T = any, U = KV> {
 
     return _root;
   }
-  static render(el: string | HTMLDivElement, id: string, opts?: ModalOpts): any;
-  static render(el: string | HTMLDivElement, opts?: ModalOpts): any;
+  static render<T extends new (...args: any[]) => any>(this: T,el: string | HTMLDivElement, id: string, opts?: ModalOpts): InstanceType<T>;
+  static render<T extends new (...args: any[]) => any>(this: T,el: string | HTMLDivElement, opts?: ModalOpts): InstanceType<T>;
   static render(...args: any[]) {
     let [el, id, opts] = args;
     const _el = querySelector(el);
@@ -131,6 +139,26 @@ export class Modal<T = any, U = KV> {
       });
     }
     _modal.renderEl(_el);
+    return _modal;
+  }
+  static create<T extends new (...args: any[]) => any>(this:T, opts: ModalOpts):InstanceType<T> {
+    let _id = opts.id;
+    let _modal: Modal | undefined;
+    const modalState = modalStore.getState();
+    if (_id) {
+      // 如果存在id,则判断是否已经存在该id的modal
+      _modal = modalStore.getState().getModal(_id);
+    }
+    if (!_modal) {
+      // 不存在modal,则创建一个modal
+      // console.log('create modal', id, opts);
+      const newModal = new this({ ...opts, id: _id });
+      _modal = newModal;
+      modalStore.setState({
+        modals: [...modalState.modals, newModal],
+      });
+    }
+    return _modal as InstanceType<T>;
   }
   createMask() {
     const mask = document.createElement('div');
@@ -178,19 +206,25 @@ export class Modal<T = any, U = KV> {
   }
   appendRoot(document: DocumentFragment) {
     this.root.appendChild(document);
-    this.setOpen(true);
+    // 第一次渲染，open为true，显示弹窗
+    this.setOpen(this.open);
   }
   setOpen(open: boolean) {
     this.open = open;
-    if (this.destroyOnClose && open === false) {
-      this.unMount();
+    if (this.destroyOnClose) {
+      if (open) {
+        this.root.appendChild(this.modalElement);
+      } else {
+        this.cacheFragment.appendChild(this.modalElement);
+      }
+      return;
     }
-    if (open) {
-      this.modalElement.classList.add('ui-modal-open');
-      this.root.appendChild(this.modalElement);
-    } else {
-      // this.modalElement.classList.remove('ui-modal-open');
-      this.cacheFragment.appendChild(this.modalElement);
+    if (this.hideOnClose) {
+      if (open) {
+        this.modalElement.classList.remove('ui-modal-close');
+      } else {
+        this.modalElement.classList.add('ui-modal-close');
+      }
     }
   }
   unMount() {
@@ -204,10 +238,12 @@ export class Modal<T = any, U = KV> {
       modals: modalState.modals.filter((modal) => modal.id !== this.id),
     });
     this.isUse = false;
+    this.cacheFragment = new DocumentFragment();
     return fragment;
   }
   /**
    * 保留，暂时不用
+   * // TODO: 研究
    * @param force
    * @param opts
    * @returns