fix(ellpisis): doesn't work after content is updated, closes tusen-ai…

…#776
arijs · Aug 31, 2021 · 16b3d80 · 16b3d80
1 parent 1e511e4
commit 16b3d80
Show file tree

Hide file tree

Showing 6 changed files with 84 additions and 27 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -13,6 +13,7 @@
 - Fix `n-tabs` style glitches when different types tabs are nested, closes [#850](https://github.com/TuSimple/naive-ui/issues/850).
 - Fix `n-dropdown`'s inner link click trigger area is not the entire option, closes [#823](https://github.com/TuSimple/naive-ui/issues/823).
 - Fix `n-popover` arrow's misplacement when placed in nested popovers with different placement, closes [#916](https://github.com/TuSimple/naive-ui/issues/916).
+- Fix `n-ellpisis` doesn't work after content is updated, closes [#776](https://github.com/TuSimple/naive-ui/issues/776).
 
 ## 2.16.4 (2021-08-16)
 

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -13,6 +13,7 @@
 - 修复 `n-tabs` 不同类型嵌套样式错乱，关闭 [#850](https://github.com/TuSimple/naive-ui/issues/850)
 - 修复 `n-dropdown` 内部的链接点击触发区域不是整个选项，关闭 [#823](https://github.com/TuSimple/naive-ui/issues/823)
 - 修复 `n-popover` 嵌套于不同 placement 的 popover 中箭头位置错乱，关闭 [#916](https://github.com/TuSimple/naive-ui/issues/916)
+- 修复 `n-ellpisis` 在更新内容后失效，关闭 [#776](https://github.com/TuSimple/naive-ui/issues/776)
 
 ## 2.16.4 (2021-08-16)
 

diff --git a/src/ellipsis/demos/zhCN/dynamic-debug.demo.md b/src/ellipsis/demos/zhCN/dynamic-debug.demo.md
@@ -0,0 +1,37 @@
+# Dynamic Debug
+
+```html
+<p>测试：：：：</p>
+
+<n-ellipsis style="max-width: 240px"> {{ text }} </n-ellipsis>
+<br />
+<br />
+<br />
+<n-button type="primary" @click="toogleText">测试动态文字</n-button>
+```
+
+```js
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
+    const text = ref(
+      '住在我心里孤独的 孤独的海怪 痛苦之王 开始厌倦 深海的光 停滞的海浪'
+    )
+
+    const toogleText = () => {
+      if (text.value.length > 10) {
+        text.value = '住在我心里孤独的'
+      } else {
+        text.value =
+          '住在我心里孤独的 孤独的海怪 痛苦之王 开始厌倦 深海的光 停滞的海浪'
+      }
+    }
+
+    return {
+      text,
+      toogleText
+    }
+  }
+})
+```
diff --git a/src/ellipsis/demos/zhCN/index.demo-entry.md b/src/ellipsis/demos/zhCN/index.demo-entry.md
@@ -11,6 +11,7 @@ basic
 line-clamp
 expand-trigger
 custom-tooltip
+dynamic-debug
 ```
 
 ## Props

diff --git a/src/popover/src/Popover.ts b/src/popover/src/Popover.ts
@@ -209,6 +209,10 @@ export default defineComponent({
       controlledShowRef,
       uncontrolledShowRef
     )
+    const mergedShowConsideringDisabledPropRef = useMemo(() => {
+      if (props.disabled) return false
+      return mergedShowWithoutDisabledRef.value
+    })
     const getMergedDisabled = (): boolean => {
       if (props.disabled) return true
       const { getDisabled } = props
@@ -370,6 +374,7 @@ export default defineComponent({
     })
     return {
       positionManually: positionManuallyRef,
+      mergedShowConsideringDisabledProp: mergedShowConsideringDisabledPropRef,
       // if to show popover body
       uncontrolledShow: uncontrolledShowRef,
       mergedShowArrow: mergedShowArrowRef,
@@ -387,34 +392,40 @@ export default defineComponent({
     }
   },
   render () {
-    const { positionManually } = this
-    const slots = { ...this.$slots }
-    let triggerVNode: VNode | null
-    if (!positionManually) {
-      if (slots.activator) {
-        triggerVNode = getFirstSlotVNode(slots, 'activator')
-      } else {
-        triggerVNode = getFirstSlotVNode(slots, 'trigger')
-      }
-      if (triggerVNode) {
-        triggerVNode = cloneVNode(triggerVNode)
-        triggerVNode =
-          triggerVNode.type === textVNodeType
-            ? h('span', [triggerVNode])
-            : triggerVNode
-        appendEvents(triggerVNode, positionManually ? 'manual' : this.trigger, {
-          onClick: this.handleClick,
-          onMouseenter: this.handleMouseEnter,
-          onMouseleave: this.handleMouseLeave,
-          onFocus: this.handleFocus,
-          onBlur: this.handleBlur
-        })
-      }
-      this.setTriggerVNode(triggerVNode)
-    }
-
     return h(VBinder, null, {
       default: () => {
+        const { positionManually, $slots: slots } = this
+        let triggerVNode: VNode | null
+        if (!positionManually) {
+          if (slots.activator) {
+            triggerVNode = getFirstSlotVNode(slots, 'activator')
+          } else {
+            triggerVNode = getFirstSlotVNode(slots, 'trigger')
+          }
+          if (triggerVNode) {
+            triggerVNode = cloneVNode(triggerVNode)
+            triggerVNode =
+              triggerVNode.type === textVNodeType
+                ? h('span', [triggerVNode])
+                : triggerVNode
+            appendEvents(
+              triggerVNode,
+              positionManually ? 'manual' : this.trigger,
+              {
+                onClick: this.handleClick,
+                onMouseenter: this.handleMouseEnter,
+                onMouseleave: this.handleMouseLeave,
+                onFocus: this.handleFocus,
+                onBlur: this.handleBlur
+              }
+            )
+          }
+          this.setTriggerVNode(triggerVNode)
+        }
+        // We need to subscribe it. Sometimes rerender won't ge triggered.
+        // `mergedShowConsideringDisabledProp` is not the final disabled status.
+        // In ellpisis it's dynamic.
+        void this.mergedShowConsideringDisabledProp
         const mergedShow = this.getMergedShow()
         return [
           positionManually

diff --git a/src/popover/src/PopoverBody.tsx b/src/popover/src/PopoverBody.tsx
@@ -292,6 +292,7 @@ export default defineComponent({
     }
   },
   render () {
+    console.log('render popover body', this.show)
     return h(
       VFollower,
       {
@@ -309,6 +310,11 @@ export default defineComponent({
       },
       {
         default: () => {
+          console.log(
+            'render popover body default slot',
+            this.renderContentNode()
+          )
+
           return this.animated
             ? h(
               Transition,
@@ -325,7 +331,7 @@ export default defineComponent({
                 }
               },
               {
-                default: () => this.renderContentNode()
+                default: this.renderContentNode
               }
             )
             : this.renderContentNode()