From d2b4725e9b8710834521af85840bedf35b17ef6c Mon Sep 17 00:00:00 2001
From: redhoodsu <redhoodsu@tencent.com>
Date: Mon, 22 Apr 2024 11:36:58 +0800
Subject: [PATCH] release(modal): v1.2.2

---
 index.json             |  2 +-
 src/modal/CHANGELOG.md |  4 ++++
 src/modal/index.ts     |  5 ++++-
 src/modal/package.json |  2 +-
 src/modal/react.tsx    | 48 ++++++++++++++++++++++++------------------
 src/modal/style.scss   |  2 ++
 6 files changed, 39 insertions(+), 24 deletions(-)

diff --git a/index.json b/index.json
index ed92ac5..36adfff 100644
--- a/index.json
+++ b/index.json
@@ -200,7 +200,7 @@
   "modal": {
     "react": true,
     "icon": true,
-    "version": "1.2.1",
+    "version": "1.2.2",
     "style": true,
     "test": true,
     "install": false,
diff --git a/src/modal/CHANGELOG.md b/src/modal/CHANGELOG.md
index 707e7ea..fbbcf1e 100644
--- a/src/modal/CHANGELOG.md
+++ b/src/modal/CHANGELOG.md
@@ -1,3 +1,7 @@
+## 1.2.2 (22 Apr 2023)
+
+* fix: title shrinked
+
 ## 1.2.1 (7 Oct 2023)
 
 * fix: alert promise
diff --git a/src/modal/index.ts b/src/modal/index.ts
index 896e644..7d30ca5 100644
--- a/src/modal/index.ts
+++ b/src/modal/index.ts
@@ -84,6 +84,9 @@ export default class Modal extends Component<IOptions> {
     super.destroy()
     this.$container.rmClass(this.c('hidden'))
   }
+  renderContent() {
+    this.$content.html('').append(this.options.content)
+  }
   /**
    * Like `window.alert`.
    * @static
@@ -226,7 +229,7 @@ export default class Modal extends Component<IOptions> {
       this.$close.show()
     }
     this.$body.css('width', options.width + 'px')
-    this.$content.html('').append(options.content)
+    this.renderContent()
   }
   private initTpl() {
     this.$container.html(
diff --git a/src/modal/package.json b/src/modal/package.json
index 2c42c5e..261befa 100644
--- a/src/modal/package.json
+++ b/src/modal/package.json
@@ -1,6 +1,6 @@
 {
   "name": "modal",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "Create modal dialogs",
   "luna": {
     "react": true,
diff --git a/src/modal/react.tsx b/src/modal/react.tsx
index 88ce0e7..414aa0a 100644
--- a/src/modal/react.tsx
+++ b/src/modal/react.tsx
@@ -1,8 +1,10 @@
 import { FC, PropsWithChildren, useEffect, useRef } from 'react'
 import { createPortal } from 'react-dom'
-import h from 'licia/h'
 import types from 'licia/types'
 import Modal from './index'
+import noop from 'licia/noop'
+import each from 'licia/each'
+import { useForceUpdate, useNonInitialEffect } from '../share/hooks'
 
 interface IModalProps {
   title: string
@@ -14,33 +16,43 @@ interface IModalProps {
 const LunaModal: FC<PropsWithChildren<IModalProps>> = (props) => {
   const modalRef = useRef<HTMLDivElement>(null)
   const modal = useRef<Modal>()
-  const content = useRef<HTMLDivElement>(h('div') as HTMLDivElement)
+  const content = useRef<HTMLDivElement>()
   const doHide = useRef<types.AnyFn>()
+  const forceUpdate = useForceUpdate()
 
   useEffect(() => {
-    modal.current = new Modal(modalRef.current!, {
+    const m = new Modal(modalRef.current!, {
       title: props.title,
-      content: content.current,
+      content: '',
     })
-    doHide.current = modal.current.hide
-    modal.current.hide = function () {
+    m.renderContent = noop
+    doHide.current = m.hide
+    m.hide = function () {
       props.onClose && props.onClose()
     }
     if (props.visible) {
-      modal.current.show()
+      m.show()
     }
     if (props.width) {
-      modal.current.setOption('width', props.width)
+      m.setOption('width', props.width)
     }
+    modal.current = m
 
-    return () => modal.current?.destroy()
+    content.current = m.$container
+      .find(m.c('.content'))
+      .get(0) as HTMLDivElement
+    forceUpdate()
+
+    return () => m.destroy()
   }, [])
 
-  useEffect(() => {
-    if (modal.current) {
-      modal.current.setOption('title', props.title)
-    }
-  }, [props.title])
+  each(['title', 'width'], (key: keyof IModalProps) => {
+    useNonInitialEffect(() => {
+      if (modal.current) {
+        modal.current.setOption(key, props[key])
+      }
+    }, [props[key]])
+  })
 
   useEffect(() => {
     if (modal.current) {
@@ -52,15 +64,9 @@ const LunaModal: FC<PropsWithChildren<IModalProps>> = (props) => {
     }
   }, [props.visible])
 
-  useEffect(() => {
-    if (modal.current) {
-      modal.current.setOption('width', props.width)
-    }
-  }, [props.width])
-
   return (
     <div ref={modalRef}>
-      {createPortal(<>{props.children}</>, content.current)}
+      {content.current && createPortal(<>{props.children}</>, content.current)}
     </div>
   )
 }
diff --git a/src/modal/style.scss b/src/modal/style.scss
index 4754d88..22ef5e4 100644
--- a/src/modal/style.scss
+++ b/src/modal/style.scss
@@ -58,6 +58,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  flex-shrink: 0;
 }
 
 .content {
@@ -66,6 +67,7 @@
 }
 
 .footer {
+  flex-shrink: 0;
   padding: 12px;
 }