diff --git a/src/ellipsisText/__tests__/ellipsisText.test.tsx b/src/ellipsisText/__tests__/ellipsisText.test.tsx index 92ab1e471..e28e7d0e5 100644 --- a/src/ellipsisText/__tests__/ellipsisText.test.tsx +++ b/src/ellipsisText/__tests__/ellipsisText.test.tsx @@ -19,6 +19,7 @@ let wrapper: RenderResult, element; describe('test ellipsis text if not set max width', () => { beforeEach(() => { jest.spyOn(document.documentElement, 'scrollWidth', 'get').mockImplementation(() => 100); + jest.spyOn(document.documentElement, 'clientWidth', 'get').mockImplementation(() => 600); jest.spyOn(document.documentElement, 'offsetWidth', 'get').mockImplementation(() => 600); Object.defineProperty(window, 'getComputedStyle', { value: jest.fn(() => ({ @@ -133,7 +134,7 @@ describe('test ellipsis text if set max width', () => { element = getByText(value); expect(element).toBeInTheDocument(); - expect(element.style.maxWidth).toBe('900px'); + expect(element.style.maxWidth).toBe('1000px'); expect(element.style.cursor).toBe('pointer'); fireEvent.mouseEnter(element); @@ -150,7 +151,7 @@ describe('test ellipsis text if set max width', () => { element = getByText(value); expect(element).toBeInTheDocument(); - expect(element.style.maxWidth).toBe('810px'); + expect(element.style.maxWidth).toBe('90%'); expect(element.style.cursor).toBe('pointer'); fireEvent.mouseEnter(element); @@ -167,24 +168,7 @@ describe('test ellipsis text if set max width', () => { element = getByText(value); expect(element).toBeInTheDocument(); - expect(element.style.maxWidth).toBe('700px'); - expect(element.style.cursor).toBe('pointer'); - - fireEvent.mouseEnter(element); - expect(container.querySelector('.ant-tooltip-open')).toBeNull(); - expect(getAllByText(value).length).toBe(1); - - fireEvent.mouseLeave(element); - }); - test('The maximum is a not comply with the rules,render correct value in ellipsis', () => { - const { container, getByText, getAllByText } = render( - - ); - const { value } = defaultProps; - element = getByText(value); - - expect(element).toBeInTheDocument(); - expect(element.style.maxWidth).toBe('900px'); + expect(element.style.maxWidth).toBe('calc(100% - 200px)'); expect(element.style.cursor).toBe('pointer'); fireEvent.mouseEnter(element); diff --git a/src/ellipsisText/index.tsx b/src/ellipsisText/index.tsx index ae9257622..32cf9fc33 100644 --- a/src/ellipsisText/index.tsx +++ b/src/ellipsisText/index.tsx @@ -64,7 +64,7 @@ const EllipsisText = (props: IEllipsisTextProps) => { : null; const [visible, setVisible] = useState(false); - const [width, setWidth] = useState(DEFAULT_MAX_WIDTH); + const [width, setWidth] = useState(maxWidth); const [cursor, setCursor] = useState('default'); useLayoutEffect(() => { @@ -96,40 +96,6 @@ const EllipsisText = (props: IEllipsisTextProps) => { return parseInt(getStyle(dom, attr)); }; - /** - * @description: 10 -> 10, - * @description: 10px -> 10, - * @description: 90% -> ele.width * 0.9 - * @description: calc(100% - 32px) -> ele.width - 32 - * @param {*} ele - * @param {string & number} maxWidth - * @return {*} - */ - const transitionWidth = (ele: HTMLElement, maxWidth: string | number) => { - const eleWidth = getActualWidth(ele); - - if (typeof maxWidth === 'number') { - return maxWidth > eleWidth ? eleWidth : maxWidth; // 如果父元素的宽度小于传入的最大宽度,返回父元素的宽度 - } - - const numMatch = maxWidth.match(/^(\d+)(px)?$/); - if (numMatch) { - return +numMatch[1] > eleWidth ? eleWidth : +numMatch[1]; // 如果父元素的宽度小于传入的最大宽度,返回父元素的宽度 - } - - const percentMatch = maxWidth.match(/^(\d+)%$/); - if (percentMatch) { - return eleWidth * (parseInt(percentMatch[1]) / 100); - } - - const relativeMatch = maxWidth.match(/^calc\(100% - (\d+)px\)$/); - if (relativeMatch) { - return eleWidth - parseInt(relativeMatch[1]); - } - - return eleWidth; - }; - const hideEleContent = (node: HTMLElement) => { node.style.display = 'none'; }; @@ -144,21 +110,24 @@ const EllipsisText = (props: IEllipsisTextProps) => { * @return {*} */ const getContainerWidth = (ele: HTMLElement): number | string => { + // 如果设置了最大宽度,则直接返回宽度 + if (maxWidth) return maxWidth; if (!ele) return DEFAULT_MAX_WIDTH; - const { scrollWidth, parentElement } = ele; - - // 如果是行内元素,获取不到宽度,则向上寻找父元素 - if (scrollWidth === 0) { - return getContainerWidth(parentElement!); - } - // 如果设置了最大宽度,则直接返回宽度 - if (maxWidth) { - return transitionWidth(ele, maxWidth); + // 如果是行内元素获取不到宽度或者本身没有宽度,则向上寻找父元素 + if (ele.scrollWidth === 0 || ele.clientWidth === 0) { + return getContainerWidth(ele.parentElement!); } + // 隐藏当前文本元素后,从查找到的父组件宽度中计算剩余可用宽度 hideEleContent(ellipsisRef.current!); + // 如果父组件是非行内元素,但其宽度是由子元素撑开的,仍需要向上查找 + if (ele.scrollWidth === 0 || ele.clientWidth === 0) { + showEleContent(ellipsisRef.current!); + return getContainerWidth(ele.parentElement!); + } + const availableWidth = getAvailableWidth(ele); return availableWidth < 0 ? 0 : availableWidth;