- 蚂蚁的企业级产品是一个庞大且复杂的体系。...
+ 蚂蚁的企业级产品是一个庞大且复杂的体系。这
+ ...
expand
@@ -61,8 +61,8 @@ exports[`Ellipsis multi line 1`] = `
- 蚂蚁的企业级产品是一个庞大且复杂的体系。这类产品不仅量级巨大且功能复杂，而且变动和并发频繁，常常需要设计与开发能够快速的做出响应。同时这类产品中有存在很多类似的...
+ 蚂蚁的企业级产品是一个庞大且复杂的体系。这类产品不仅量级巨大且功能复杂，而且变动和并发频繁，常常需要设计与开发能够快速的做出响应。同时这类产品中有存在很多类似的页面以及组件，
+ ...
`;
diff --git a/src/components/ellipsis/tests/ellipsis.test.tsx b/src/components/ellipsis/tests/ellipsis.test.tsx
index fdb89ed8bd..8cb1738abb 100644
--- a/src/components/ellipsis/tests/ellipsis.test.tsx
+++ b/src/components/ellipsis/tests/ellipsis.test.tsx
@@ -1,5 +1,6 @@
+import { spyElementPrototypes } from 'rc-util/lib/test/domHook'
import React from 'react'
-import { render, testA11y, fireEvent } from 'testing'
+import { fireEvent, render, testA11y } from 'testing'
import Ellipsis from '..'
const classPrefix = `adm-ellipsis`
@@ -9,36 +10,19 @@ const content =
const lineHeight = 19.5
describe('Ellipsis', () => {
- const originGetComputedStyle = window.getComputedStyle
-
beforeAll(() => {
- window.getComputedStyle = el => {
- const style = originGetComputedStyle(el)
- style.lineHeight = `${lineHeight}px`
- return style
- }
- })
-
- beforeEach(() => {
- Object.defineProperty(HTMLElement.prototype, 'offsetHeight', {
- get() {
- if (this.innerHTML.includes('...')) {
- const row = Math.ceil(
- // the width of '...' is equal to a Chinese char
- (this.innerHTML.replace(/\.\.\./g, '中').length / content.length) *
- 4
- )
- return lineHeight * row
- }
- return lineHeight * 4
+ spyElementPrototypes(HTMLElement, {
+ offsetHeight: {
+ get() {
+ const that = this as HTMLElement
+ const charLen = (that.textContent || '').length || 1
+ const rows = Math.ceil(charLen / 30)
+ return rows * lineHeight
+ },
},
})
})
- afterAll(() => {
- window.getComputedStyle = originGetComputedStyle
- })
-
test('a11y', async () => {
await testA11y(
)
})
@@ -119,9 +103,6 @@ describe('Ellipsis', () => {
})
test('content not exceeded', () => {
- Object.defineProperty(HTMLElement.prototype, 'offsetHeight', {
- value: lineHeight,
- })
const { getByTestId } = render(
)
@@ -151,22 +132,4 @@ describe('Ellipsis', () => {
fireEvent.click(getByText('expand'))
expect(getByText('collapse')).toBeInTheDocument()
})
-
- test('the `whiteSpace` style of the calc container should be the same as Ellipsis', () => {
- let container: Element | null = null
- Object.defineProperty(HTMLElement.prototype, 'removeChild', {
- value: (child: Element) => {
- container = child
- },
- })
- render(
-
- )
- expect(container).toHaveStyle('white-space: pre-wrap')
- })
})
diff --git a/src/components/ellipsis/useMeasure.tsx b/src/components/ellipsis/useMeasure.tsx
new file mode 100644
index 0000000000..a23411a737
--- /dev/null
+++ b/src/components/ellipsis/useMeasure.tsx
@@ -0,0 +1,195 @@
+import { useEvent } from 'rc-util'
+import React from 'react'
+import runes from 'runes2'
+
+const enum MEASURE_STATUS {
+ PREPARE = 1,
+ MEASURE_WALKING = 2,
+ STABLE_ELLIPSIS = 99,
+ STABLE_NO_ELLIPSIS = 100,
+}
+
+const ELLIPSIS_TEXT = '...'
+
+const measureStyle: React.CSSProperties = {
+ visibility: 'hidden',
+ whiteSpace: 'inherit',
+ lineHeight: 'inherit',
+ fontSize: 'inherit',
+}
+
+export default function useMeasure(
+ containerRef: React.RefObject
,
+ content: string,
+ rows: number,
+ direction: 'start' | 'end' | 'middle',
+ expanded: boolean,
+ expandNode: React.ReactElement | null,
+ collapseNode: React.ReactElement | null
+) {
+ const contentChars = React.useMemo(() => runes(content), [content])
+
+ const [maxHeight, setMaxHeight] = React.useState(0)
+
+ const [walkingIndexes, setWalkingIndexes] = React.useState<
+ [startOffset: number, endOffset: number]
+ >([0, 0])
+ const midIndex = Math.ceil((walkingIndexes[0] + walkingIndexes[1]) / 2)
+
+ const [status, setStatus] = React.useState(
+ MEASURE_STATUS.STABLE_NO_ELLIPSIS
+ )
+
+ // ============================ Refs ============================
+ const singleRowMeasureRef = React.useRef(null)
+ const fullMeasureRef = React.useRef(null)
+ const midMeasureRef = React.useRef(null)
+
+ const startMeasure = useEvent(() => {
+ setStatus(MEASURE_STATUS.PREPARE)
+ setWalkingIndexes([
+ 0,
+ direction === 'middle'
+ ? Math.ceil(contentChars.length / 2)
+ : contentChars.length,
+ ])
+ })
+
+ // Initialize
+ React.useLayoutEffect(() => {
+ startMeasure()
+ }, [contentChars, rows])
+
+ // Measure element height
+ React.useLayoutEffect(() => {
+ if (status === MEASURE_STATUS.PREPARE) {
+ const fullMeasureHeight = fullMeasureRef.current?.offsetHeight || 0
+ const singleRowMeasureHeight =
+ singleRowMeasureRef.current?.offsetHeight || 0
+ const rowMeasureHeight = singleRowMeasureHeight * rows
+
+ if (fullMeasureHeight <= rowMeasureHeight) {
+ setStatus(MEASURE_STATUS.STABLE_NO_ELLIPSIS)
+ } else {
+ setMaxHeight(rowMeasureHeight)
+ setStatus(MEASURE_STATUS.MEASURE_WALKING)
+ }
+ }
+ }, [status])
+
+ // Walking measure
+ React.useLayoutEffect(() => {
+ if (status === MEASURE_STATUS.MEASURE_WALKING) {
+ const diff = walkingIndexes[1] - walkingIndexes[0]
+ const midHeight = midMeasureRef.current?.offsetHeight || 0
+
+ if (diff > 1) {
+ if (midHeight > maxHeight) {
+ setWalkingIndexes([walkingIndexes[0], midIndex])
+ } else {
+ setWalkingIndexes([midIndex, walkingIndexes[1]])
+ }
+ } else {
+ if (midHeight > maxHeight) {
+ setWalkingIndexes([walkingIndexes[0], walkingIndexes[0]])
+ } else {
+ setWalkingIndexes([walkingIndexes[1], walkingIndexes[1]])
+ }
+ setStatus(MEASURE_STATUS.STABLE_ELLIPSIS)
+ }
+ }
+ }, [status, walkingIndexes])
+
+ // =========================== Render ===========================
+ /** Render by cut index */
+ const renderContent = (index: number) => {
+ const prefixContent = contentChars.slice(0, index)
+ const suffixContent = contentChars.slice(contentChars.length - index)
+
+ return (
+ <>
+ {direction === 'start' && (
+ <>
+ {expandNode}
+ {ELLIPSIS_TEXT}
+
+ )}
+ {direction !== 'start' && prefixContent.join('')}
+ {direction === 'middle' && (
+ <>
+ {ELLIPSIS_TEXT}
+ {expandNode}
+ {ELLIPSIS_TEXT}
+
+ )}
+ {direction !== 'end' && suffixContent.join('')}
+ {direction === 'end' && (
+ <>
+ {ELLIPSIS_TEXT}
+ {expandNode}
+
+ )}
+
+ )
+ }
+
+ const finalContent = React.useMemo(() => {
+ if (expanded || status === MEASURE_STATUS.STABLE_NO_ELLIPSIS) {
+ return (
+
+ {content}
+ {status === MEASURE_STATUS.STABLE_ELLIPSIS && collapseNode}
+
+ )
+ }
+
+ if (status === MEASURE_STATUS.STABLE_ELLIPSIS) {
+ return renderContent(midIndex)
+ }
+
+ return null
+ }, [expanded, status, content, collapseNode, midIndex])
+
+ const allNodes = (
+ <>
+ {/******************* Measure Prepare *******************/}
+ {/* Origin full content */}
+ {status === MEASURE_STATUS.PREPARE && (
+
+ {content}
+ {expandNode}
+
+ )}
+
+ {/* Row measure */}
+ {status === MEASURE_STATUS.PREPARE && (
+
+ {'\u00A0'}
+
+ )}
+
+ {/******************* Measure Walking *******************/}
+ {status === MEASURE_STATUS.MEASURE_WALKING && (
+
+ {renderContent(midIndex)}
+
+ )}
+
+ {/*********************** Display ***********************/}
+ {/* Display content */}
+ {finalContent}
+
+ )
+
+ return [allNodes, startMeasure] as const
+}