fix(ellipsis): expand-trigger prop not show pointer cursor when con… (#1302)

* fix(n-ellipsis): expand-trigger prop not show pointer cursor when content is short

* feat: 优化cursor样式添加

* fix: 测量前后摆正ellipsis样式

* feat: 提取公共方法

* Apply suggestions from code review

* Apply suggestions from code review

Co-authored-by: unknown <liyang@xiaoyouzi.com>
Co-authored-by: 07akioni <07akioni2@gmail.com>

CHANGELOG.en-US.md

@@ -4,6 +4,7 @@
 
 ### Fixes
 
+- Fix `n-ellipisis`'s `expand-trigger` prop not show `pointer` cursor when content is short，closes [#1299](https://github.com/TuSimple/naive-ui/issues/1299).
 - Fix `n-select`'s `fallback-option` prop's type, closes [#1327](https://github.com/TuSimple/naive-ui/issues/1327).
 
 ## 2.19.6 (2021-10-10)

CHANGELOG.zh-CN.md

@@ -4,6 +4,7 @@
 
 ### Fixes
 
+- 修复 `n-ellipisis` 的 `expand-trigger` 属性在内容不显示提示的时候禁用鼠标样式的问题，关闭 [#1299](https://github.com/TuSimple/naive-ui/issues/1299)
 - 修复 `n-select` `fallback-option` 属性类型，关闭 [#1327](https://github.com/TuSimple/naive-ui/issues/1327)
 
 ## 2.19.6 (2021-10-10)

src/ellipsis/src/Ellipsis.tsx

@@ -13,6 +13,10 @@ function createLineClampClass (clsPrefix: string): string {
   return `${clsPrefix}-ellipsis--line-clamp`
 }
 
+function createCursorClass (clsPrefix: string, cursor: string): string {
+  return `${clsPrefix}-ellipsis--cursor-${cursor}`
+}
+
 const ellipsisProps = {
   ...(useTheme.props as ThemeProps<EllipsisTheme>),
   expandTrigger: String as PropType<'click'>,
@@ -45,22 +49,20 @@ export default defineComponent({
     const ellipsisStyleRef = computed(() => {
       const { lineClamp } = props
       const { value: expanded } = expandedRef
-      const cursor = props.expandTrigger === 'click' ? 'pointer' : ''
       if (lineClamp !== undefined) {
         return {
-          cursor,
           textOverflow: '',
           '-webkit-line-clamp': expanded ? '' : lineClamp
         }
       } else {
         return {
-          cursor,
           textOverflow: expanded ? '' : 'ellipsis',
           '-webkit-line-clamp': ''
         }
       }
     })
     function getTooltipDisabled (): boolean {
+      let tooltipDisabled = false
       const { value: expanded } = expandedRef
       if (expanded) return true
       const { value: trigger } = triggerRef
@@ -70,11 +72,13 @@ export default defineComponent({
         // nextTick, measure dom size will derive wrong result
         syncEllipsisStyle(trigger)
         if (lineClamp !== undefined) {
-          return trigger.scrollHeight <= trigger.offsetHeight
+          tooltipDisabled = trigger.scrollHeight <= trigger.offsetHeight
+        } else {
+          tooltipDisabled = trigger.scrollWidth <= trigger.offsetWidth
         }
-        return trigger.scrollWidth <= trigger.offsetWidth
+        syncCursorStyle(trigger, tooltipDisabled)
       }
-      return false
+      return tooltipDisabled
     }
     const handleClickRef = computed(() => {
       return props.expandTrigger === 'click'
@@ -94,6 +98,9 @@ export default defineComponent({
             `${mergedClsPrefixRef.value}-ellipsis`,
             props.lineClamp !== undefined
               ? createLineClampClass(mergedClsPrefixRef.value)
+              : undefined,
+            props.expandTrigger === 'click'
+              ? createCursorClass(mergedClsPrefixRef.value, 'pointer')
               : undefined
           ],
           style: ellipsisStyleRef.value
@@ -109,13 +116,9 @@ export default defineComponent({
       const latestStyle = ellipsisStyleRef.value
       const lineClampClass = createLineClampClass(mergedClsPrefixRef.value)
       if (props.lineClamp !== undefined) {
-        if (!trigger.classList.contains(lineClampClass)) {
+        syncTriggerClass(trigger, lineClampClass, 'add')
-          trigger.classList.add(lineClampClass)
-        }
       } else {
-        if (trigger.classList.contains(lineClampClass)) {
+        syncTriggerClass(trigger, lineClampClass, 'remove')
-          trigger.classList.remove(lineClampClass)
-        }
       }
       for (const key in latestStyle) {
         // guard can make it a little faster
@@ -124,6 +127,32 @@ export default defineComponent({
         }
       }
     }
+    function syncCursorStyle (
+      trigger: HTMLElement,
+      tooltipDisabled: boolean
+    ): void {
+      const cursorClass = createCursorClass(mergedClsPrefixRef.value, 'pointer')
+      if (props.expandTrigger === 'click' && !tooltipDisabled) {
+        syncTriggerClass(trigger, cursorClass, 'add')
+      } else {
+        syncTriggerClass(trigger, cursorClass, 'remove')
+      }
+    }
+    function syncTriggerClass (
+      trigger: HTMLElement,
+      styleClass: string,
+      action: 'add' | 'remove'
+    ): void {
+      if (action === 'add') {
+        if (!trigger.classList.contains(styleClass)) {
+          trigger.classList.add(styleClass)
+        }
+      } else {
+        if (trigger.classList.contains(styleClass)) {
+          trigger.classList.remove(styleClass)
+        }
+      }
+    }
     return {
       mergedTheme,
       triggerRef,

src/ellipsis/src/styles/index.cssr.ts

@@ -12,5 +12,8 @@ export default cB('ellipsis', {
   cM('line-clamp', `
     display: -webkit-inline-box;
     -webkit-box-orient: vertical;
+  `),
+  cM('cursor-pointer', `
+    cursor: pointer;
   `)
 ])