fix(comp:text): use css ellipsis at one row to improve performance (#…

…1705)

packages/components/text/__tests__/__snapshots__/text.spec.ts.snap

@@ -3,7 +3,6 @@
 exports[`Text > copyable work 1`] = `
 "<div class=\\"ix-text\\"><span class=\\"ix-text-inner\\">@idux 是一套企业级中后台 UI 组件库, 致力于提供高效愉悦的开发体验。 基于 Vue 3.x + TypeScript 开发,
       全部代码开源并遵循 MIT 协议，任何企业、组织及个人均可免费使用。<!----></span>
-  <!---->
   <!----><span class=\\"ix-text-copy-icon\\"><i class=\\"ix-icon ix-icon-copy\\" role=\\"img\\" aria-label=\\"copy\\"></i></span>
   <!---->
   <!---->
@@ -20,7 +19,6 @@ exports[`Text > copyable work 2`] = `
   <!---->
   <!---->
   <!---->
-  <!---->
 </div>"
 `;
 
@@ -32,7 +30,6 @@ exports[`Text > ellipsis work 1`] = `
   <!---->
   <!---->
   <!---->
-  <!---->
 </div>"
 `;
 
@@ -44,7 +41,6 @@ exports[`Text > ellipsis work 2`] = `
   <!---->
   <!---->
   <!---->
-  <!---->
 </div>"
 `;
 
@@ -56,7 +52,6 @@ exports[`Text > expandable work 1`] = `
   <!---->
   <!---->
   <!---->
-  <!---->
 </div>"
 `;
 
@@ -68,7 +63,6 @@ exports[`Text > expandable work 2`] = `
   <!---->
   <!---->
   <!---->
-  <!---->
 </div>"
 `;
 
@@ -80,7 +74,6 @@ exports[`Text > render work 1`] = `
   <!---->
   <!---->
   <!---->
-  <!---->
 </div>"
 `;
 
@@ -95,7 +88,6 @@ exports[`Text > tag work 1`] = `
   <!---->
   <!---->
   <!---->
-  <!---->
 </div>"
 `;
 
@@ -107,7 +99,6 @@ exports[`Text > tag work 2`] = `
   <!---->
   <!---->
   <!---->
-  <!---->
 </div>"
 `;
 
@@ -131,7 +122,6 @@ exports[`Text > tooltip work 2`] = `
   <!---->
   <!---->
   <!---->
-  <!---->
 </div>"
 `;
 

packages/components/text/src/Text.tsx

@@ -42,15 +42,18 @@ export default defineComponent({
     const mergedPrefixCls = computed(() => `${common.prefixCls}-text`)
 
     const contentRef = shallowRef<HTMLElement>()
+    const innerRef = shallowRef<HTMLElement>()
     const measureRef = shallowRef<HTMLElement>()
     const rowMeasureRef = shallowRef<HTMLElement>()
 
     const { expanded, expandable, setExpanded, expandIconRenderer } = useExpandable(props, config)
     const { copied, copy, copyIconRenderer } = useCopyable(props, config)
     const copyTooltip = useCopyTooltip(props)
-    const { isEllipsis, measureStatus, onRender, onMeasureRender, renderClampedContent } = useEllipsis(
+    const { isSimple, isEllipsis, measureStatus, onRender, onMeasureRender, renderClampedContent } = useEllipsis(
       props,
+      expandable,
       contentRef,
+      innerRef,
       measureRef,
       rowMeasureRef,
     )
@@ -123,19 +126,20 @@ export default defineComponent({
 
       let node = (
         <Tag
+          ref={innerRef}
           class={`${prefixCls}-inner`}
           title={isNative ? getStringBySlot(titleSlot) : undefined}
           onClick={expandable.value && !hasExpandIcon ? toggleExpanded : undefined}
           {...attrs}
         >
-          {isEllipsis.value && !expanded.value && measureStatus.value === 'none'
+          {!isSimple.value && isEllipsis.value && !expanded.value && measureStatus.value === 'none'
             ? renderClampedContent(contentNodes)
             : contentNodes}
-          {isEllipsis.value && !expanded.value && renderEllipsisNode()}
+          {!isSimple.value && isEllipsis.value && !expanded.value && renderEllipsisNode()}
         </Tag>
       )
 
-      if (tooltip && !isNative) {
+      if (isEllipsis.value && !expanded.value && tooltip && !isNative) {
         const tooltipProps = isObject(tooltip) ? tooltip : {}
         node = (
           <IxTooltip {...tooltipProps} v-slots={{ title: titleSlot }}>
@@ -146,6 +150,8 @@ export default defineComponent({
 
       const classes = normalizeClass({
         [prefixCls]: true,
+        [`${prefixCls}-simple`]: isSimple.value,
+        [`${prefixCls}-ellipsis`]: isEllipsis.value,
         [`${prefixCls}-expandable`]: expandable.value,
         [`${prefixCls}-has-expand-icon`]: hasExpandIcon,
       })

packages/components/text/src/composables/useEllipsis.ts

@@ -20,6 +20,7 @@ export type MeasureStatus = 'preparing' | 'measuring' | 'none'
 
 export interface EllipsisContext {
   isEllipsis: ComputedRef<boolean>
+  isSimple: ComputedRef<boolean>
   measureStatus: ComputedRef<MeasureStatus>
   onRender: (nodes: VNode[] | undefined) => void
   onMeasureRender: () => void
@@ -28,7 +29,9 @@ export interface EllipsisContext {
 
 export function useEllipsis(
   props: TextProps,
+  expandable: ComputedRef<boolean>,
   contentRef: Ref<HTMLElement | undefined>,
+  innerRef: Ref<HTMLElement | undefined>,
   measureRef: Ref<HTMLElement | undefined>,
   rowMeasureRef: Ref<HTMLElement | undefined>,
 ): EllipsisContext {
@@ -62,6 +65,7 @@ export function useEllipsis(
 
     return 0
   })
+  const isSimple = computed(() => rows.value === 1 && !expandable.value)
 
   const onRender = (nodes: VNode[] | undefined) => {
     setContentNodesLength(getNodesLength(nodes))
@@ -154,6 +158,11 @@ export function useEllipsis(
       return
     }
 
+    if (isSimple.value) {
+      setIsEllipsis(!!innerRef.value && innerRef.value.scrollWidth > innerRef.value.clientWidth)
+      return
+    }
+
     calculate()
   }
 
@@ -174,6 +183,7 @@ export function useEllipsis(
 
   return {
     isEllipsis,
+    isSimple,
     measureStatus,
     onRender,
     onMeasureRender,

packages/components/text/style/index.less

@@ -1,4 +1,5 @@
 @import '../../style/mixins/reset.less';
+@import '../../style//mixins/ellipsis.less';
 
 .@{text-prefix} {
   .reset-component-new();
@@ -7,6 +8,7 @@
   position: relative;
   display: inline-block;
   vertical-align: bottom;
+  max-width: 100%;
 
   > .@{text-prefix}-expand-icon {
     flex-shrink: 0;
@@ -15,6 +17,16 @@
 
   overflow: hidden;
 
+  &.@{text-prefix}-simple {
+    display: inline-flex;
+    align-items: center;
+    .@{text-prefix}-inner {
+      display: inline-block;
+      flex: auto;
+      .ellipsis();
+    }
+  }
+
   &-expandable:not(&-has-expand-icon) &-inner {
     cursor: pointer;
   }