diff --git a/.dumi/pages/index/components/BannerRecommends.tsx b/.dumi/pages/index/components/BannerRecommends.tsx index 961f7576e7..03160fcaf1 100644 --- a/.dumi/pages/index/components/BannerRecommends.tsx +++ b/.dumi/pages/index/components/BannerRecommends.tsx @@ -53,6 +53,7 @@ const useStyle = createStyles(({ token, css, cx }) => { column-gap: ${token.paddingMD * 2}px; align-items: stretch; text-align: start; + min-height: 178px; > * { width: calc((100% - ${token.marginXXL * 2}px) / 3); } diff --git a/components/auto-complete/index.en-US.md b/components/auto-complete/index.en-US.md index 840f5b6b95..c89f273555 100644 --- a/components/auto-complete/index.en-US.md +++ b/components/auto-complete/index.en-US.md @@ -55,7 +55,7 @@ Common props ref：[Common props](/docs/react/common-props) | popupClassName | The className of dropdown menu | string | - | 4.23.0 | | dropdownMatchSelectWidth | Determine whether the dropdown menu and the select input are the same width. Default set `min-width` same as input. Will ignore when value less than select width. `false` will disable virtual scroll | boolean \| number | true | | | filterOption | If true, filter options by input, if function, filter options against it. The function will receive two arguments, `inputValue` and `option`, if the function returns true, the option will be included in the filtered set; Otherwise, it will be excluded | boolean \| function(inputValue, option) | true | | -| notFoundContent | Specify content to show when no result matches | string | `Not Found` | | +| notFoundContent | Specify content to show when no result matches | ReactNode | - | | | open | Controlled open state of dropdown | boolean | - | | | options | Select options. Will get better perf than jsx definition | { label, value }\[] | - | | | placeholder | The placeholder of input | string | - | | diff --git a/components/breadcrumb/index.en-US.md b/components/breadcrumb/index.en-US.md index a250979ed4..1885dd6106 100644 --- a/components/breadcrumb/index.en-US.md +++ b/components/breadcrumb/index.en-US.md @@ -95,11 +95,11 @@ import { Link } from 'react-router'; const items = [ { - path: 'index', + path: '/index', title: 'home', }, { - path: 'first', + path: '/first', title: 'first', children: [ { @@ -117,13 +117,19 @@ const items = [ ], }, { - path: 'second', + path: '/second', title: 'second', }, ]; -function itemRender(route, params, items, paths) { - const last = items.indexOf(item) === items.length - 1; - return last ? {item.title} : {item.title}; + +function itemRender(currentRoute, params, items, paths) { + const isLast = currentRoute?.path === items[items.length - 1]?.path; + + return isLast ? ( + {currentRoute.title} + ) : ( + {currentRoute.title} + ); } return ; diff --git a/components/breadcrumb/index.zh-CN.md b/components/breadcrumb/index.zh-CN.md index 0450fedcf3..8c141cccce 100644 --- a/components/breadcrumb/index.zh-CN.md +++ b/components/breadcrumb/index.zh-CN.md @@ -96,11 +96,11 @@ import { Link } from 'react-router'; const items = [ { - path: 'index', + path: '/index', title: 'home', }, { - path: 'first', + path: '/first', title: 'first', children: [ { @@ -118,13 +118,19 @@ const items = [ ], }, { - path: 'second', + path: '/second', title: 'second', }, ]; -function itemRender(item, params, items, paths) { - const last = items.indexOf(item) === items.length - 1; - return last ? {item.title} : {item.title}; + +function itemRender(currentRoute, params, items, paths) { + const isLast = currentRoute?.path === items[items.length - 1]?.path; + + return isLast ? ( + {currentRoute.title} + ) : ( + {currentRoute.title} + ); } return ; diff --git a/components/button/__tests__/index.test.tsx b/components/button/__tests__/index.test.tsx index 769e655206..48f2ebfa62 100644 --- a/components/button/__tests__/index.test.tsx +++ b/components/button/__tests__/index.test.tsx @@ -1,7 +1,8 @@ +import React, { Suspense, useRef, useState } from 'react'; import { SearchOutlined } from '@ant-design/icons'; import { resetWarned } from 'rc-util/lib/warning'; -import React, { Suspense, useRef, useState } from 'react'; import { act } from 'react-dom/test-utils'; + import Button from '..'; import mountTest from '../../../tests/shared/mountTest'; import rtlTest from '../../../tests/shared/rtlTest'; @@ -434,4 +435,10 @@ describe('Button', () => { const { container } = render(); expect(container.querySelectorAll('.ant-btn-loading').length).toBe(1); }); + + // https://github.com/ant-design/ant-design/issues/47605 + it('Compatible with original `type` behavior', async () => { + const { container } = render( ); - if (!isUnBorderedButtonType(type)) { + if (!isUnBorderedButtonType(mergedType)) { buttonNode = ( {buttonNode} diff --git a/components/config-provider/context.ts b/components/config-provider/context.ts index 1f26e0460d..a48cac50af 100644 --- a/components/config-provider/context.ts +++ b/components/config-provider/context.ts @@ -128,10 +128,7 @@ export type PaginationConfig = ComponentStyleConfig & Pick; -export type SpaceConfig = Pick< - SpaceProps, - 'size' | 'className' | 'classNames' | 'style' | 'styles' ->; +export type SpaceConfig = ComponentStyleConfig & Pick; export type PopupOverflow = 'viewport' | 'scroll'; diff --git a/components/form/__tests__/__snapshots__/demo.test.tsx.snap b/components/form/__tests__/__snapshots__/demo.test.tsx.snap index 1691c60e7e..c0ce69b404 100644 --- a/components/form/__tests__/__snapshots__/demo.test.tsx.snap +++ b/components/form/__tests__/__snapshots__/demo.test.tsx.snap @@ -4593,22 +4593,6 @@ exports[`renders components/form/demo/label-debug.tsx correctly 1`] = ` class="ant-typography ant-typography-ellipsis ant-typography-single-line" > longtextlongtextlongtextlongtextlongtextlongtextlongtext - - @@ -4651,22 +4635,6 @@ exports[`renders components/form/demo/label-debug.tsx correctly 1`] = ` class="ant-typography ant-typography-ellipsis ant-typography-single-line" > longtext longtext longtext longtext longtext longtext longtext - - diff --git a/components/menu/__tests__/__snapshots__/demo.test.tsx.snap b/components/menu/__tests__/__snapshots__/demo.test.tsx.snap index 20b49f5780..b23634b48f 100644 --- a/components/menu/__tests__/__snapshots__/demo.test.tsx.snap +++ b/components/menu/__tests__/__snapshots__/demo.test.tsx.snap @@ -1826,22 +1826,6 @@ Array [ class="ant-typography ant-typography-ellipsis ant-typography-single-line" > Ant Design, a design language for background applications, is refined by Ant UED Team - - diff --git a/components/typography/Base/CopyBtn.tsx b/components/typography/Base/CopyBtn.tsx new file mode 100644 index 0000000000..0df9bc68ff --- /dev/null +++ b/components/typography/Base/CopyBtn.tsx @@ -0,0 +1,50 @@ +import * as React from 'react'; +import CheckOutlined from '@ant-design/icons/CheckOutlined'; +import CopyOutlined from '@ant-design/icons/CopyOutlined'; +import classNames from 'classnames'; + +import type { CopyConfig } from '.'; +import TransButton from '../../_util/transButton'; +import { type Locale } from '../../locale'; +import Tooltip from '../../tooltip'; +import { getNode, toList } from './util'; + +export interface CopyBtnProps extends CopyConfig { + prefixCls: string; + copied: boolean; + locale: Locale['Text']; + onCopy: React.MouseEventHandler; + iconOnly: boolean; +} + +export default function CopyBtn(props: CopyBtnProps) { + const { prefixCls, copied, locale = {}, onCopy, iconOnly, tooltips, icon } = props; + + const tooltipNodes = toList(tooltips); + const iconNodes = toList(icon); + + const { copied: copiedText, copy: copyText } = locale; + + const copyTitle = copied + ? getNode(tooltipNodes[1], copiedText) + : getNode(tooltipNodes[0], copyText); + const systemStr = copied ? copiedText : copyText; + const ariaLabel = typeof copyTitle === 'string' ? copyTitle : systemStr; + + return ( + + + {copied + ? getNode(iconNodes[1], , true) + : getNode(iconNodes[0], , true)} + + + ); +} diff --git a/components/typography/Base/Ellipsis.tsx b/components/typography/Base/Ellipsis.tsx index 25a7c01f6f..c837b1586b 100644 --- a/components/typography/Base/Ellipsis.tsx +++ b/components/typography/Base/Ellipsis.tsx @@ -1,17 +1,53 @@ import * as React from 'react'; import toArray from 'rc-util/lib/Children/toArray'; -import useIsomorphicLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect'; +import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect'; -export interface EllipsisProps { - enabledMeasure?: boolean; - text?: React.ReactNode; - width: number; - fontSize: number; - rows: number; - children: (cutChildren: React.ReactNode[], needEllipsis: boolean) => React.ReactNode; - onEllipsis: (isEllipsis: boolean) => void; +interface MeasureTextProps { + style?: React.CSSProperties; + children: React.ReactNode; } +interface MeasureTextRef { + isExceed: () => boolean; + getHeight: () => number; +} + +const MeasureText = React.forwardRef( + ({ style, children }, ref) => { + const spanRef = React.useRef(null); + + React.useImperativeHandle(ref, () => ({ + isExceed: () => { + const span = spanRef.current!; + return span.scrollHeight > span.clientHeight; + }, + getHeight: () => spanRef.current!.clientHeight, + })); + + return ( + + {children} + + ); + }, +); + function cuttable(node: React.ReactElement) { const type = typeof node; return type === 'string' || type === 'number'; @@ -61,112 +97,141 @@ function sliceNodes(nodeList: React.ReactElement[], len: number) { return nodeList; } -const NONE = 0; -const PREPARE = 1; -const WALKING = 2; -const DONE_WITH_ELLIPSIS = 3; -const DONE_WITHOUT_ELLIPSIS = 4; +export interface EllipsisProps { + enabledMeasure?: boolean; + text?: React.ReactNode; + width: number; + // fontSize: number; + rows: number; + children: ( + cutChildren: React.ReactNode[], + /** Tell current `cutChildren` is in ellipsis */ + inEllipsis: boolean, + /** Tell current `text` is exceed the `rows` which can be ellipsis */ + canEllipsis: boolean, + ) => React.ReactNode; + onEllipsis: (isEllipsis: boolean) => void; + /** + * Mark for misc update. Which will not affect ellipsis content length. + * e.g. tooltip content update. + */ + miscDeps: any[]; +} -type WalkingState = - | typeof NONE - | typeof PREPARE - | typeof WALKING - | typeof DONE_WITH_ELLIPSIS - | typeof DONE_WITHOUT_ELLIPSIS; +// Measure for the `text` is exceed the `rows` or not +const STATUS_MEASURE_NONE = 0; +const STATUS_MEASURE_START = 1; +const STATUS_MEASURE_NEED_ELLIPSIS = 2; +const STATUS_MEASURE_NO_NEED_ELLIPSIS = 3; -const Ellipsis: React.FC = ({ - enabledMeasure, - children, - text, - width, - fontSize, - rows, - onEllipsis, -}) => { - const [[startLen, midLen, endLen], setCutLength] = React.useState< - [startLen: number, midLen: number, endLen: number] - >([0, 0, 0]); - // record last done with ellipsis width - const [lastLen, setLastLen] = React.useState(0); - const [walkingState, setWalkingState] = React.useState(NONE); +const lineClipStyle: React.CSSProperties = { + display: '-webkit-box', + overflow: 'hidden', + WebkitBoxOrient: 'vertical', +}; - const [singleRowHeight, setSingleRowHeight] = React.useState(0); - - const singleRowRef = React.useRef(null); - const midRowRef = React.useRef(null); +export default function EllipsisMeasure(props: EllipsisProps) { + const { enabledMeasure, width, text, children, rows, miscDeps, onEllipsis } = props; const nodeList = React.useMemo(() => toArray(text), [text]); - const totalLen = React.useMemo(() => getNodesLen(nodeList), [nodeList]); + const nodeLen = React.useMemo(() => getNodesLen(nodeList), [text]); - const mergedChildren = React.useMemo(() => { - if (!enabledMeasure || walkingState !== DONE_WITH_ELLIPSIS) { - // if has lastLen, use it as temporary width to avoid lots of text to squeeze space. - if (lastLen && walkingState !== DONE_WITHOUT_ELLIPSIS && enabledMeasure) - return children(sliceNodes(nodeList, lastLen), lastLen < totalLen); + // ========================= Full Content ========================= + const fullContent = React.useMemo(() => children(nodeList, false, false), [text]); - return children(nodeList, false); + // ========================= Cut Content ========================== + const [ellipsisCutIndex, setEllipsisCutIndex] = React.useState<[number, number] | null>(null); + const cutMidRef = React.useRef(null); + + // ========================= NeedEllipsis ========================= + const needEllipsisRef = React.useRef(null); + + const [needEllipsis, setNeedEllipsis] = React.useState(STATUS_MEASURE_NONE); + const [ellipsisHeight, setEllipsisHeight] = React.useState(0); + + // Trigger start measure + useLayoutEffect(() => { + if (enabledMeasure && width && nodeLen) { + setNeedEllipsis(STATUS_MEASURE_START); + } else { + setNeedEllipsis(STATUS_MEASURE_NONE); } + }, [width, text, rows, enabledMeasure, nodeList]); - return children(sliceNodes(nodeList, midLen), midLen < totalLen); - }, [enabledMeasure, walkingState, children, nodeList, midLen, totalLen]); + // Measure process + useLayoutEffect(() => { + if (needEllipsis === STATUS_MEASURE_START) { + const isOverflow = !!needEllipsisRef.current?.isExceed(); - // ======================== Walk ======================== - useIsomorphicLayoutEffect(() => { - if (enabledMeasure && width && fontSize && totalLen) { - setWalkingState(PREPARE); - setCutLength([0, Math.ceil(totalLen / 2), totalLen]); + setNeedEllipsis(isOverflow ? STATUS_MEASURE_NEED_ELLIPSIS : STATUS_MEASURE_NO_NEED_ELLIPSIS); + setEllipsisCutIndex(isOverflow ? [0, nodeLen] : null); + + // For the accuracy issue, we add 1px to the height + setEllipsisHeight((needEllipsisRef.current?.getHeight() || 0) + 1); + + onEllipsis(isOverflow); } - }, [enabledMeasure, width, fontSize, text, totalLen, rows]); + }, [needEllipsis]); - useIsomorphicLayoutEffect(() => { - if (walkingState === PREPARE) { - setSingleRowHeight(singleRowRef.current?.offsetHeight || 0); - } - }, [walkingState]); + // ========================= Cut Measure ========================== + const cutMidIndex = ellipsisCutIndex + ? Math.ceil((ellipsisCutIndex[0] + ellipsisCutIndex[1]) / 2) + : 0; - useIsomorphicLayoutEffect(() => { - if (singleRowHeight) { - if (walkingState === PREPARE) { - // Ignore if position is enough - const midHeight = midRowRef.current?.offsetHeight || 0; - const maxHeight = rows * singleRowHeight; + useLayoutEffect(() => { + const [minIndex, maxIndex] = ellipsisCutIndex || [0, 0]; + if (minIndex !== maxIndex) { + const midHeight = cutMidRef.current?.getHeight() || 0; - if (midHeight <= maxHeight) { - setWalkingState(DONE_WITHOUT_ELLIPSIS); - onEllipsis(false); - } else { - setWalkingState(WALKING); - } - } else if (walkingState === WALKING) { - if (startLen !== endLen) { - const midHeight = midRowRef.current?.offsetHeight || 0; - const maxHeight = rows * singleRowHeight; + const isOverflow = midHeight > ellipsisHeight; + let targetMidIndex = cutMidIndex; - let nextStartLen = startLen; - let nextEndLen = endLen; + if (maxIndex - minIndex === 1) { + targetMidIndex = isOverflow ? minIndex : maxIndex; + } - // We reach the last round - if (startLen === endLen - 1) { - nextEndLen = startLen; - } else if (midHeight <= maxHeight) { - nextStartLen = midLen; - } else { - nextEndLen = midLen; - } - - const nextMidLen = Math.ceil((nextStartLen + nextEndLen) / 2); - - setCutLength([nextStartLen, nextMidLen, nextEndLen]); - } else { - setWalkingState(DONE_WITH_ELLIPSIS); - setLastLen(midLen); - onEllipsis(true); - } + if (isOverflow) { + setEllipsisCutIndex([minIndex, targetMidIndex]); + } else { + setEllipsisCutIndex([targetMidIndex, maxIndex]); } } - }, [walkingState, startLen, endLen, rows, singleRowHeight]); + }, [ellipsisCutIndex, cutMidIndex]); - // ======================= Render ======================= + // ========================= Text Content ========================= + const finalContent = React.useMemo(() => { + if ( + needEllipsis !== STATUS_MEASURE_NEED_ELLIPSIS || + !ellipsisCutIndex || + ellipsisCutIndex[0] !== ellipsisCutIndex[1] + ) { + const content = children(nodeList, false, false); + + // Limit the max line count to avoid scrollbar blink + // https://github.com/ant-design/ant-design/issues/42958 + if ( + needEllipsis !== STATUS_MEASURE_NO_NEED_ELLIPSIS && + needEllipsis !== STATUS_MEASURE_NONE + ) { + return ( + + {content} + + ); + } + + return content; + } + + return children(sliceNodes(nodeList, ellipsisCutIndex[0]), true, true); + }, [needEllipsis, ellipsisCutIndex, nodeList, ...miscDeps]); + + // ============================ Render ============================ const measureStyle: React.CSSProperties = { width, whiteSpace: 'normal', @@ -174,58 +239,39 @@ const Ellipsis: React.FC = ({ padding: 0, }; - const renderMeasure = ( - content: React.ReactNode, - ref: React.Ref, - style: React.CSSProperties, - ) => ( - - {content} - - ); - - const renderMeasureSlice = (len: number, ref: React.Ref) => { - const sliceNodeList = sliceNodes(nodeList, len); - - return renderMeasure(children(sliceNodeList, true), ref, measureStyle); - }; - return ( <> - {mergedChildren} - {/* Measure usage */} - {enabledMeasure && - walkingState !== DONE_WITH_ELLIPSIS && - walkingState !== DONE_WITHOUT_ELLIPSIS && ( - <> - {/* `l` for top & `g` for bottom measure */} - {renderMeasure('lg', singleRowRef, { wordBreak: 'keep-all', whiteSpace: 'nowrap' })} - {/* {renderMeasureSlice(midLen, midRowRef)} */} - {walkingState === PREPARE - ? renderMeasure(children(nodeList, false), midRowRef, measureStyle) - : renderMeasureSlice(midLen, midRowRef)} - + {/* Final show content */} + {finalContent} + + {/* Measure if current content is exceed the rows */} + {needEllipsis === STATUS_MEASURE_START && ( + + {fullContent} + + )} + + {/* Real size overflow measure */} + {needEllipsis === STATUS_MEASURE_NEED_ELLIPSIS && + ellipsisCutIndex && + ellipsisCutIndex[0] !== ellipsisCutIndex[1] && ( + + {children(sliceNodes(nodeList, cutMidIndex), true, true)} + )} ); -}; - -if (process.env.NODE_ENV !== 'production') { - Ellipsis.displayName = 'Ellipsis'; } - -export default Ellipsis; diff --git a/components/typography/Base/index.tsx b/components/typography/Base/index.tsx index 5c4845a3f8..3c4209ece4 100644 --- a/components/typography/Base/index.tsx +++ b/components/typography/Base/index.tsx @@ -1,6 +1,4 @@ import * as React from 'react'; -import CheckOutlined from '@ant-design/icons/CheckOutlined'; -import CopyOutlined from '@ant-design/icons/CopyOutlined'; import EditOutlined from '@ant-design/icons/EditOutlined'; import classNames from 'classnames'; import copy from 'copy-to-clipboard'; @@ -23,12 +21,13 @@ import useMergedConfig from '../hooks/useMergedConfig'; import useUpdatedEffect from '../hooks/useUpdatedEffect'; import type { TypographyProps } from '../Typography'; import Typography from '../Typography'; +import CopyBtn from './CopyBtn'; import Ellipsis from './Ellipsis'; import EllipsisTooltip from './EllipsisTooltip'; export type BaseType = 'secondary' | 'success' | 'warning' | 'danger'; -interface CopyConfig { +export interface CopyConfig { text?: string; onCopy?: (event?: React.MouseEvent) => void; icon?: React.ReactNode; @@ -104,20 +103,6 @@ function wrapperDecorations( return currentContent; } -function getNode(dom: React.ReactNode, defaultNode: React.ReactNode, needDom?: boolean) { - if (dom === true || dom === undefined) { - return defaultNode; - } - return dom || (needDom && defaultNode); -} - -function toList(val: T | T[]): T[] { - if (val === false) { - return [false, false] as T[]; - } - return Array.isArray(val) ? val : [val]; -} - const ELLIPSIS_STR = '...'; const Base = React.forwardRef((props, ref) => { @@ -288,10 +273,8 @@ const Base = React.forwardRef((props, ref) => { }; const [ellipsisWidth, setEllipsisWidth] = React.useState(0); - const [ellipsisFontSize, setEllipsisFontSize] = React.useState(0); - const onResize = ({ offsetWidth }: { offsetWidth: number }, element: HTMLElement) => { + const onResize = ({ offsetWidth }: { offsetWidth: number }) => { setEllipsisWidth(offsetWidth); - setEllipsisFontSize(parseInt(window.getComputedStyle?.(element).fontSize, 10) || 0); }; // >>>>> JS Ellipsis @@ -455,32 +438,16 @@ const Base = React.forwardRef((props, ref) => { return null; } - const { tooltips, icon } = copyConfig; - - const tooltipNodes = toList(tooltips); - const iconNodes = toList(icon); - - const copyTitle = copied - ? getNode(tooltipNodes[1], textLocale?.copied) - : getNode(tooltipNodes[0], textLocale?.copy); - const systemStr = copied ? textLocale?.copied : textLocale?.copy; - const ariaLabel = typeof copyTitle === 'string' ? copyTitle : systemStr; - return ( - - - {copied - ? getNode(iconNodes[1], , true) - : getNode(iconNodes[0], , true)} - - + ); }; @@ -538,8 +505,8 @@ const Base = React.forwardRef((props, ref) => { text={children} rows={rows} width={ellipsisWidth} - fontSize={ellipsisFontSize} onEllipsis={onJsEllipsis} + miscDeps={[copied, expanded]} > {(node, needEllipsis) => { let renderNode: React.ReactNode = node; diff --git a/components/typography/Base/util.ts b/components/typography/Base/util.ts new file mode 100644 index 0000000000..95b96b5c66 --- /dev/null +++ b/components/typography/Base/util.ts @@ -0,0 +1,13 @@ +export function toList(val: T | T[]): T[] { + if (val === false) { + return [false, false] as T[]; + } + return Array.isArray(val) ? val : [val]; +} + +export function getNode(dom: React.ReactNode, defaultNode: React.ReactNode, needDom?: boolean) { + if (dom === true || dom === undefined) { + return defaultNode; + } + return dom || (needDom && defaultNode); +} diff --git a/components/typography/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/typography/__tests__/__snapshots__/demo-extend.test.ts.snap index a1cdfc273b..688a799537 100644 --- a/components/typography/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/typography/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -797,69 +797,6 @@ Array [ - - ,

[Before] @@ -1721,22 +1417,6 @@ Array [ class="ant-typography ant-typography-ellipsis ant-typography-single-line" > not ellipsis - - [After]

, @@ -1749,53 +1429,32 @@ Array [ style="width:100px" > 默认display none 样式的超长文字， 悬停tooltip失效了 - - , +
+ In the process of internal desktop applications development, + + ANTD + + many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development. +
, ] `; exports[`renders components/typography/demo/ellipsis-middle.tsx correctly 1`] = ` In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development. - - `; @@ -2035,29 +1694,6 @@ Array [ To be, or not to be, that is a question: Whether it is nobler in the mind to suffer. The slings and arrows of outrageous fortune Or to take arms against a sea of troubles, And by opposing end them? To die: to sleep; No more; and by a sleep to say we end The heart-ache and the thousand natural shocks That flesh is heir to, 'tis a consummation Devoutly to be wish'd. To die, to sleep To sleep- perchance to dream: ay, there's the rub! For in that sleep of death what dreams may come When we have shuffled off this mortal coil, Must give us pause. There 's the respect That makes calamity of so long life --William Shakespeare - - , ] `; diff --git a/components/typography/__tests__/ellipsis.test.tsx b/components/typography/__tests__/ellipsis.test.tsx index f6c8feb140..e8de3d364b 100644 --- a/components/typography/__tests__/ellipsis.test.tsx +++ b/components/typography/__tests__/ellipsis.test.tsx @@ -14,38 +14,39 @@ jest.mock('../../_util/styleChecker', () => ({ describe('Typography.Ellipsis', () => { const LINE_STR_COUNT = 20; + const LINE_HEIGHT = 16; const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); let mockRectSpy: ReturnType; - let getWidthTimes = 0; let computeSpy: jest.SpyInstance; let offsetWidth: number; let scrollWidth: number; + function getContentHeight(elem?: HTMLElement) { + const regex = /<[^>]*>/g; + + let html = (elem || this).innerHTML; + html = html.replace(regex, ''); + const lines = Math.ceil(html.length / LINE_STR_COUNT); + return lines * LINE_HEIGHT; + } + beforeAll(() => { jest.useFakeTimers(); mockRectSpy = spyElementPrototypes(HTMLElement, { - offsetHeight: { - get() { - let html = this.innerHTML; - html = html.replace(/<[^>]*>/g, ''); - const lines = Math.ceil(html.length / LINE_STR_COUNT); - return lines * 16; - }, - }, - offsetWidth: { - get: () => { - getWidthTimes += 1; - return offsetWidth; - }, - }, scrollWidth: { get: () => scrollWidth, }, - getBoundingClientRect() { - let html = this.innerHTML; - html = html.replace(/<[^>]*>/g, ''); - const lines = Math.ceil(html.length / LINE_STR_COUNT); - return { height: lines * 16 }; + offsetWidth: { + get: () => offsetWidth, + }, + scrollHeight: { + get: getContentHeight, + }, + clientHeight: { + get() { + const { WebkitLineClamp } = this.style; + return WebkitLineClamp ? Number(WebkitLineClamp) * LINE_HEIGHT : getContentHeight(this); + }, }, }); @@ -61,7 +62,6 @@ describe('Typography.Ellipsis', () => { afterEach(() => { errorSpy.mockReset(); - getWidthTimes = 0; }); afterAll(() => { @@ -234,24 +234,33 @@ describe('Typography.Ellipsis', () => { it('should expandable work', async () => { const onExpand = jest.fn(); - const { container: wrapper } = render( - + const ref = React.createRef(); + const { container } = render( + {fullStr} , ); - fireEvent.click(wrapper.querySelector('.ant-typography-expand')!); + triggerResize(ref.current!); + await waitFakeTimer(); + + fireEvent.click(container.querySelector('.ant-typography-expand')!); expect(onExpand).toHaveBeenCalled(); - expect(wrapper.querySelector('p')?.textContent).toEqual(fullStr); + expect(container.querySelector('p')?.textContent).toEqual(fullStr); }); it('should have custom expand style', async () => { + const ref = React.createRef(); const symbol = 'more'; const { container } = render( - + {fullStr} , ); + + triggerResize(ref.current!); + await waitFakeTimer(); + expect(container.querySelector('.ant-typography-expand')?.textContent).toEqual('more'); }); @@ -289,15 +298,18 @@ describe('Typography.Ellipsis', () => { }); // Trigger visible should trigger recheck - getWidthTimes = 0; + let getOffsetParent = false; Object.defineProperty(container.querySelector('.ant-typography'), 'offsetParent', { - get: () => document.body, + get: () => { + getOffsetParent = true; + return document.body; + }, }); act(() => { elementChangeCallback?.(); }); - expect(getWidthTimes).toBeGreaterThan(0); + expect(getOffsetParent).toBeTruthy(); unmount(); expect(disconnectFn).toHaveBeenCalled(); @@ -445,80 +457,6 @@ describe('Typography.Ellipsis', () => { mockRectSpy.mockRestore(); }); - it('should not throw default dom nodes', async () => { - let currentWidth = 100; - // string count is different with different width - const getLineStrCount = (width: number) => { - const res = width === 100 ? 20 : 17; - return res; - }; - - const ref = React.createRef(); - const resize = (width: number) => { - currentWidth = width; - if (ref.current) triggerResize(ref.current); - }; - - mockRectSpy = spyElementPrototypes(HTMLElement, { - offsetHeight: { - get() { - let html = this.innerHTML; - html = html.replace(/<[^>]*>/g, ''); - const lines = Math.ceil(html.length / getLineStrCount(currentWidth)); - - return lines * 16; - }, - }, - offsetWidth: { - get: () => currentWidth, - }, - getBoundingClientRect() { - let html = this.innerHTML; - html = html.replace(/<[^>]*>/g, ''); - const lines = Math.ceil(html.length / getLineStrCount(currentWidth)); - return { height: lines * 16 }; - }, - }); - - const { container } = render( - - {fullStr} - , - ); - - // hijackings Math.ceil - const originalCeil = Math.ceil; - let hasDefaultStr = false; - - // Math.ceil will be used for ellipsis's calculations; - Math.ceil = (value) => { - const text = container.querySelector('p')?.innerHTML.replace(/<[^>]*>/g, ''); - if (text && !text.includes('...')) { - hasDefaultStr = true; - } - return originalCeil.call(Math, value); - }; - - resize(50); - await waitFakeTimer(20, 1); - // ignore last result - hasDefaultStr = false; - resize(100); - await waitFakeTimer(); - - expect(hasDefaultStr).not.toBeTruthy(); - // reset - mockRectSpy.mockRestore(); - Math.ceil = originalCeil; - }); - // https://github.com/ant-design/ant-design/issues/46580 it('dynamic to be ellipsis should show tooltip', async () => { const ref = React.createRef(); diff --git a/components/typography/demo/ellipsis-debug.tsx b/components/typography/demo/ellipsis-debug.tsx index 6c4f7d3c32..da27c4cbb9 100644 --- a/components/typography/demo/ellipsis-debug.tsx +++ b/components/typography/demo/ellipsis-debug.tsx @@ -3,6 +3,9 @@ import { Slider, Switch, Typography } from 'antd'; const { Text, Paragraph } = Typography; +const templateStr = + 'In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development.'; + const App: React.FC = () => { const [rows, setRows] = useState(1); const [longText, setLongText] = useState(true); @@ -44,25 +47,19 @@ const App: React.FC = () => { )} - In the process of internal desktop applications development, many different design specs and - implementations would be involved, which might cause designers and developers difficulties - and duplication and reduce the efficiency of development. + {templateStr}
- In the process of internal desktop applications development, many different design specs and - implementations would be involved, which might cause designers and developers difficulties - and duplication and reduce the efficiency of development. + {templateStr}
- In the process of internal desktop applications development, many different design specs and - implementations would be involved, which might cause designers and developers difficulties - and duplication and reduce the efficiency of development. + {templateStr}
@@ -80,6 +77,12 @@ const App: React.FC = () => { 默认display none 样式的超长文字， 悬停tooltip失效了 + + + {templateStr.slice(0, 60)} + ANTD + {templateStr.slice(60)} + ); }; diff --git a/components/typography/demo/ellipsis-middle.tsx b/components/typography/demo/ellipsis-middle.tsx index f24354007a..b1e92f2f41 100644 --- a/components/typography/demo/ellipsis-middle.tsx +++ b/components/typography/demo/ellipsis-middle.tsx @@ -7,7 +7,7 @@ const EllipsisMiddle: React.FC<{ suffixCount: number; children: string }> = ({ suffixCount, children, }) => { - const start = children.slice(0, children.length - suffixCount).trim(); + const start = children.slice(0, children.length - suffixCount); const suffix = children.slice(-suffixCount).trim(); return ( diff --git a/docs/blog/v4-ood.en-US.md b/docs/blog/v4-ood.en-US.md new file mode 100644 index 0000000000..9181eba279 --- /dev/null +++ b/docs/blog/v4-ood.en-US.md @@ -0,0 +1,17 @@ +--- +title: 📢 v4 surpassed maintenance period +date: 2024-02-28 +author: zombieJ +--- + +For our release schedule, the maintenance period for Ant Design v4 has officially ended at the end of 2023. This means that we will not release any new updates or patches for v4 unless significant defects or other serious issues are discovered. We strongly recommend that users upgrade to Ant Design v5 as soon as possible. + +You will get a series of benefits from upgrading to v5, including more powerful design system theme capabilities, richer component functionality, performance optimization, and more. In addition, v5 also includes many issue fixes and user experience improvements based on community feedback. We will continue to provide continuous support and updates on v5 to ensure that developers can get the best user experience. + +For a smooth transition to v5, we provide detailed upgrade guides and documentation. We understand that the upgrade process may involve a lot of work, so our team is also working hard to make this process as seamless and simple as possible. If you encounter any problems during the upgrade process, please feel free to submit an issue on GitHub. + +Please visit our official website or view the v5 upgrade documentation directly to start your upgrade journey and enjoy the latest Ant Design experience. + +- [v4 to v5](https://ant.design/docs/react/migration-v5) +- [Less variables to Component Token](https://ant.design/docs/react/migrate-less-variables) +- [CSS Compatible](https://ant.design/docs/react/compatible-style) diff --git a/docs/blog/v4-ood.zh-CN.md b/docs/blog/v4-ood.zh-CN.md new file mode 100644 index 0000000000..dc279233f3 --- /dev/null +++ b/docs/blog/v4-ood.zh-CN.md @@ -0,0 +1,17 @@ +--- +title: 📢 v4 维护周期截止 +date: 2024-02-28 +author: zombieJ +--- + +根据我们的发布时间表，Ant Design v4 版本的维护期已于 2023 年年底正式结束。这意味着，除非发现了重大的缺陷或其他严重问题，我们不会再为 v4 推出任何新的更新或补丁版本。我们强烈建议用户尽快升级到 Ant Design v5 版本。 + +升级至 v5 将为您带来一系列的好处：包括对更强大的设计系统主题能力、更为丰富的组件功能、性能优化等等。此外，v5 还包含了许多社区反馈的问题修复和用户体验的改进。我们将继续在 v5 上提供持续的支持和更新，确保开发者可以获得最佳的使用体验。 + +为了帮助您平滑迁移到 v5，我们提供了详尽的升级指南和文档。我们了解升级过程可能会涉及到不少工作量，因此我们的团队也在努力使这个过程尽可能无缝和简便。如果你在升级过程中遇到任何问题，欢迎在 GitHub 中提交 issue 反馈。 + +请访问我们的官方网站或直接查看 v5 的升级文档，开始您的升级之旅，享受最新的 Ant Design 体验。 + +- [从 v4 到 v5](https://ant.design/docs/react/migration-v5-cn) +- [从 Less 变量到 Design Token](https://ant.design/docs/react/migrate-less-variables-cn) +- [样式兼容](https://ant.design/docs/react/compatible-style-cn) diff --git a/docs/react/use-with-next.zh-CN.md b/docs/react/use-with-next.zh-CN.md index fe96742aef..16bef1e574 100644 --- a/docs/react/use-with-next.zh-CN.md +++ b/docs/react/use-with-next.zh-CN.md @@ -14,7 +14,7 @@ tag: Updated -工具会自动初始化一个脚手架并安装项目的各种必要依赖，在安装过程中，有一些配置项需要自行选择，如果在过程中出现网络问题，请尝试配置代理，或使用其他 npm registry。 +工具会自动初始化一个脚手架并安装项目的各种必要依赖，在安装过程中，有一些配置项需要自行选择，如果在过程中出现网络问题，请尝试配置代理，或使用其他 npm registry，例如，你可以切换到淘宝镜像源：`npm config set registry https://registry.npmmirror.com`。 初始化完成后，我们进入项目并启动。 diff --git a/package.json b/package.json index 99bd0afca7..93b345d53f 100644 --- a/package.json +++ b/package.json @@ -119,6 +119,7 @@ "@ant-design/cssinjs": "^1.18.4", "@ant-design/icons": "^5.3.0", "@ant-design/react-slick": "~1.0.2", + "@babel/runtime": "^7.23.9", "@ctrl/tinycolor": "^3.6.1", "@rc-component/color-picker": "~1.5.2", "@rc-component/mutate-observer": "^1.1.0", @@ -143,7 +144,7 @@ "rc-motion": "^2.9.0", "rc-notification": "~5.3.0", "rc-pagination": "~4.0.4", - "rc-picker": "~4.1.4", + "rc-picker": "~4.1.5", "rc-progress": "~3.5.1", "rc-rate": "~2.12.0", "rc-resize-observer": "^1.4.0", @@ -170,7 +171,7 @@ "@antv/g6": "^4.8.24", "@babel/eslint-plugin": "^7.23.5", "@biomejs/biome": "^1.5.3", - "@codesandbox/sandpack-react": "^2.13.0", + "@codesandbox/sandpack-react": "^2.13.2", "@dnd-kit/core": "^6.1.0", "@dnd-kit/modifiers": "^7.0.0", "@dnd-kit/sortable": "^8.0.0", @@ -207,17 +208,17 @@ "@types/prismjs": "^1.26.3", "@types/progress": "^2.0.7", "@types/qs": "^6.9.11", - "@types/react": "^18.2.58", + "@types/react": "^18.2.60", "@types/react-copy-to-clipboard": "^5.0.7", "@types/react-dom": "^18.2.19", "@types/react-highlight-words": "^0.16.7", "@types/react-resizable": "^3.0.7", - "@types/semver": "^7.5.7", + "@types/semver": "^7.5.8", "@types/tar": "^6.1.11", "@types/throttle-debounce": "^5.0.2", "@types/warning": "^3.0.3", - "@typescript-eslint/eslint-plugin": "^7.0.2", - "@typescript-eslint/parser": "^7.0.2", + "@typescript-eslint/eslint-plugin": "^7.1.0", + "@typescript-eslint/parser": "^7.1.0", "ali-oss": "^6.20.0", "antd-img-crop": "^4.21.0", "antd-style": "^3.6.1", @@ -232,7 +233,7 @@ "dumi": "^2.3.0-beta.7", "dumi-plugin-color-chunk": "^1.1.0", "esbuild-loader": "^4.0.3", - "eslint": "^8.56.0", + "eslint": "^8.57.0", "eslint-config-airbnb": "^19.0.4", "eslint-config-prettier": "^9.1.0", "eslint-import-resolver-typescript": "^3.6.1", @@ -278,7 +279,7 @@ "node-fetch": "^3.3.2", "node-notifier": "^10.0.1", "nprogress": "^0.2.0", - "open": "^10.0.3", + "open": "^10.0.4", "pixelmatch": "^5.3.0", "pngjs": "^7.0.0", "prettier": "^3.2.5", @@ -286,7 +287,7 @@ "pretty-format": "^29.7.0", "prismjs": "^1.29.0", "progress": "^2.0.3", - "puppeteer": "^22.2.0", + "puppeteer": "^22.3.0", "qs": "^6.11.2", "rc-footer": "^0.6.8", "rc-tween-one": "^3.0.6", @@ -323,9 +324,9 @@ "sylvanas": "^0.6.1", "tar": "^6.2.0", "tar-fs": "^3.0.5", - "terser": "^5.28.0", + "terser": "^5.28.1", "tsx": "^4.7.1", - "typedoc": "^0.25.8", + "typedoc": "^0.25.9", "typescript": "~5.3.3", "vanilla-jsoneditor": "^0.21.6", "vanilla-tilt": "^1.8.1", diff --git a/tests/dekko/use-client.test.js b/tests/dekko/use-client.test.js index 99f6aae9fd..3f8997c05d 100644 --- a/tests/dekko/use-client.test.js +++ b/tests/dekko/use-client.test.js @@ -25,6 +25,7 @@ if (process.env.LIB_DIR === 'dist') { $('{es,lib}/typography/Base/*.js') .isFile() + .filter((filename) => !filename.endsWith('/util.js')) .assert('contain use client', (filename) => includeUseClient(filename)); }