From 523c8e0729ff580db0072e0019774bf64552477b Mon Sep 17 00:00:00 2001
From: gxuud <igaoxian@foxmail.com>
Date: Sat, 2 Apr 2022 17:15:58 +0800
Subject: [PATCH] =?UTF-8?q?chore(modal):=20=E4=BF=AE=E5=A4=8Deslint?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/devui-vue/devui/modal/src/modal.tsx  | 38 ++++++++++---------
 .../src/services/common-modal-service.ts      |  2 +-
 .../devui/modal/src/services/modal-service.ts | 32 +++++++++-------
 .../devui-vue/devui/modal/src/use-moveable.ts | 25 ++++++------
 4 files changed, 53 insertions(+), 44 deletions(-)

diff --git a/packages/devui-vue/devui/modal/src/modal.tsx b/packages/devui-vue/devui/modal/src/modal.tsx
index 058f077c4d..9f217468ad 100644
--- a/packages/devui-vue/devui/modal/src/modal.tsx
+++ b/packages/devui-vue/devui/modal/src/modal.tsx
@@ -17,22 +17,26 @@ export default defineComponent({
     const { handleVisibleChange } = useModal(props, emit);
     expose({ handleVisibleChange });
 
-    return () => (
-      <FixedOverlay
-        visible={modelValue.value}
-        onUpdate:visible={handleVisibleChange}
-        background-class='devui-modal-mask'
-        background-block={lockScroll.value}
-        backdrop-close={closeOnClickOverlay.value}>
-        <Transition name='devui-modal-wipe'>
-          <div class='devui-modal' {...attrs}>
-            <Icon name='close' class='btn-close' size='var(--devui-font-size-md,12px)' onClick={() => handleVisibleChange(false)}></Icon>
-            {slots.header ? slots.header() : title.value && <DModalHeader>{title.value}</DModalHeader>}
-            <DModalBody>{slots.default?.()}</DModalBody>
-            {slots.footer?.()}
-          </div>
-        </Transition>
-      </FixedOverlay>
-    );
+    return () => {
+      const fixedOverlayProps = {
+        visible: modelValue.value,
+        'onUpdate:visible': handleVisibleChange,
+        'background-class': 'devui-modal-mask',
+        'background-block': lockScroll.value,
+        'backdrop-close': closeOnClickOverlay.value,
+      };
+      return (
+        <FixedOverlay {...fixedOverlayProps}>
+          <Transition name='devui-modal-wipe'>
+            <div class='devui-modal' {...attrs}>
+              <Icon name='close' class='btn-close' size='var(--devui-font-size-md,12px)' onClick={() => handleVisibleChange(false)}></Icon>
+              {slots.header ? slots.header() : title.value && <DModalHeader>{title.value}</DModalHeader>}
+              <DModalBody>{slots.default?.()}</DModalBody>
+              {slots.footer?.()}
+            </div>
+          </Transition>
+        </FixedOverlay>
+      );
+    };
   },
 });
diff --git a/packages/devui-vue/devui/modal/src/services/common-modal-service.ts b/packages/devui-vue/devui/modal/src/services/common-modal-service.ts
index 424085e10e..868d1b32d9 100644
--- a/packages/devui-vue/devui/modal/src/services/common-modal-service.ts
+++ b/packages/devui-vue/devui/modal/src/services/common-modal-service.ts
@@ -8,7 +8,7 @@ export abstract class CommonModalService<Options, Props> {
 
   constructor(public anchorContainer: HTMLElement) {}
 
-  abstract component(): any;
+  abstract component(): string;
 
   abstract open(options: Partial<Options>): ModalOpenResult;
 
diff --git a/packages/devui-vue/devui/modal/src/services/modal-service.ts b/packages/devui-vue/devui/modal/src/services/modal-service.ts
index b7d2e57f78..8a836a3ada 100644
--- a/packages/devui-vue/devui/modal/src/services/modal-service.ts
+++ b/packages/devui-vue/devui/modal/src/services/modal-service.ts
@@ -1,10 +1,9 @@
-import type { InjectionKey, Slot } from 'vue';
+import type { InjectionKey, Slot, VNode } from 'vue';
 import { ModalProps } from '../modal-types';
 import { CommonModalService, ModalOpenResult } from './common-modal-service';
 import DModal from '../modal';
 
-let vm;
-
+let vm: VNode | null;
 export interface ModalOptions {
   title?: string;
   lockScroll?: boolean;
@@ -23,22 +22,18 @@ export class ModalService extends CommonModalService<ModalOptions, ModalProps> {
   }
 
   open(props: Partial<ModalOptions> = {}): ModalOpenResult {
+
     // TODO：手动的方式可能抛弃了 content 内部的响应式，这里需要再优化。
     const anchor = document.createElement('div');
     this.anchorContainer.appendChild(anchor);
 
     const { header, content, footer, ...resProps } = props;
 
-    const needHideOrNot = (value: boolean) => {
-      if (!value) {
-        hide();
-      }
-    };
-    const renderOrigin = (props: typeof resProps, onUpdateModelValue = needHideOrNot) => {
+    const renderOrigin = (propsValue: typeof resProps, onUpdateModelValue: (value: boolean) => void): VNode => {
       return this.renderModal(
         anchor,
         {
-          ...props,
+          ...propsValue,
           modelValue: true,
           'onUpdate:modelValue': onUpdateModelValue,
         },
@@ -48,22 +43,33 @@ export class ModalService extends CommonModalService<ModalOptions, ModalProps> {
 
     // 隐藏按钮
     const hide = () => {
+      const innerNeedHideOrNot = (value: boolean) => {
+        if (!value) {
+          hide();
+        }
+      };
       renderOrigin(resProps, (value: boolean) => {
         if (!value) {
           this.renderModal(anchor, { ...resProps, modelValue: false });
           this.renderNull(anchor);
         } else {
-          renderOrigin(resProps);
+          renderOrigin(resProps, innerNeedHideOrNot);
         }
       });
-      vm.component.exposed.handleVisibleChange?.(false);
+      vm?.component?.exposed?.handleVisibleChange?.(false);
+    };
+
+    const needHideOrNot = (value: boolean) => {
+      if (!value) {
+        hide();
+      }
     };
 
     // 先渲染一次，触发动画用
     this.renderModal(anchor, { modelValue: false });
 
     // 再渲染详细内容
-    vm = renderOrigin(resProps);
+    vm = renderOrigin(resProps, needHideOrNot);
 
     return { hide };
   }
diff --git a/packages/devui-vue/devui/modal/src/use-moveable.ts b/packages/devui-vue/devui/modal/src/use-moveable.ts
index 55246323e1..d232db15ed 100644
--- a/packages/devui-vue/devui/modal/src/use-moveable.ts
+++ b/packages/devui-vue/devui/modal/src/use-moveable.ts
@@ -10,12 +10,22 @@ export interface MoveableResult {
   movingX: Ref<number>;
   movingY: Ref<number>;
   // 可拖拽的元素
-  handleRef: Ref<HTMLElement | null>;
+  handleRef: Ref<HTMLElement | null | undefined>;
   // 可移动的元素
-  moveElRef: Ref<HTMLElement | null>;
+  moveElRef: Ref<HTMLElement | null | undefined>;
   reset(): void;
 }
 
+const getRangeValueOf = (value: number, min: number, max: number) => {
+  if (value < min) {
+    return min;
+  }
+  if (value > max) {
+    return max;
+  }
+  return value;
+};
+
 // 当前某个元素被拖拽时鼠标的偏移量
 export const useMoveable = (moveable: Ref<boolean> | boolean = true): MoveableResult => {
   // X，Y 偏移量
@@ -114,14 +124,3 @@ export const useMoveable = (moveable: Ref<boolean> | boolean = true): MoveableRe
     reset
   };
 };
-
-
-const getRangeValueOf = (value: number, min: number, max: number) => {
-  if (value < min) {
-    return min;
-  }
-  if (value > max) {
-    return max;
-  }
-  return value;
-};