release(modal): v1.2.2

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,

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

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(

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,

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>
  )
 }

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;
 }