From 19888a09620cb84b10fb9873d1dbeae56a928b16 Mon Sep 17 00:00:00 2001 From: Maxim Kolesnikov Date: Sat, 24 Feb 2024 22:45:20 +0700 Subject: [PATCH 01/13] docs: fix auto complete docs not found content type (#47577) * Update index.en-US.md Corrected type for notFoundContent in the documentation in auto-complete index.en-US.md Signed-off-by: Maxim Kolesnikov * Update index.en-US.md Signed-off-by: Maxim Kolesnikov * Update components/auto-complete/index.en-US.md Signed-off-by: lijianan <574980606@qq.com> --------- Signed-off-by: Maxim Kolesnikov Signed-off-by: lijianan <574980606@qq.com> Co-authored-by: lijianan <574980606@qq.com> --- components/auto-complete/index.en-US.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 | - | | From 2c029eacada8446da060ca3953400a2f2c02ab07 Mon Sep 17 00:00:00 2001 From: Cooper <73218815+CooperHash@users.noreply.github.com> Date: Sun, 25 Feb 2024 11:45:22 +0800 Subject: [PATCH 02/13] docs: update Nextjs docs (#47579) * docs: update Nextjs docs * Apply suggestions from code review Signed-off-by: afc163 --------- Signed-off-by: afc163 Co-authored-by: afc163 --- docs/react/use-with-next.zh-CN.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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`。 初始化完成后，我们进入项目并启动。 From f6dec5ab76bdbcbc42c284c7693d4ea7a0b752bd Mon Sep 17 00:00:00 2001 From: afc163 Date: Sun, 25 Feb 2024 21:11:04 +0800 Subject: [PATCH 03/13] site: fix banner text shift in home page (#47580) --- .dumi/pages/index/components/BannerRecommends.tsx | 1 + 1 file changed, 1 insertion(+) 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); } From 8eff174cc52b42b277bf392687461b08d585468c Mon Sep 17 00:00:00 2001 From: Rickvian Aldi Date: Mon, 26 Feb 2024 09:20:42 +0700 Subject: [PATCH 04/13] docs: Fix non-working code example in breadcrumb browserHistory (#47581) * docs: Fix non-working code example in breadcrumb browserHistory * Update components/breadcrumb/index.en-US.md use string interpolation Co-authored-by: kiner-tang <1127031143@qq.com> Signed-off-by: Rickvian Aldi * Update components/breadcrumb/index.zh-CN.md use string interpolation Co-authored-by: kiner-tang <1127031143@qq.com> Signed-off-by: Rickvian Aldi --------- Signed-off-by: Rickvian Aldi Co-authored-by: Rickvian Aldi Co-authored-by: kiner-tang <1127031143@qq.com> --- components/breadcrumb/index.en-US.md | 18 ++++++++++++------ components/breadcrumb/index.zh-CN.md | 18 ++++++++++++------ 2 files changed, 24 insertions(+), 12 deletions(-) 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 ; From 04bcb22999ca658dd72802379601d80c07643260 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon, 26 Feb 2024 21:07:20 +0800 Subject: [PATCH 05/13] chore(deps-dev): bump the dev-dependencies group with 6 updates (#47598) --- updated-dependencies: - dependency-name: "@codesandbox/sandpack-react" dependency-type: direct:development dependency-group: dev-dependencies - dependency-name: "@types/semver" dependency-type: direct:development dependency-group: dev-dependencies - dependency-name: eslint dependency-type: direct:development dependency-group: dev-dependencies - dependency-name: open dependency-type: direct:development dependency-group: dev-dependencies - dependency-name: puppeteer dependency-type: direct:development dependency-group: dev-dependencies - dependency-name: terser dependency-type: direct:development dependency-group: dev-dependencies ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- package.json | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 61c4984eb7..d242469109 100644 --- a/package.json +++ b/package.json @@ -170,7 +170,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", @@ -212,7 +212,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", @@ -232,7 +232,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 +278,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 +286,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,7 +323,7 @@ "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", "typescript": "~5.3.3", From 9c72ee3235d384ee08e29a5f4700ff764b8d603c Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon, 26 Feb 2024 21:07:39 +0800 Subject: [PATCH 06/13] chore(deps-dev): update typedoc requirement from ^0.25.8 to ^0.25.9 (#47599) Updates the requirements on [typedoc](https://github.com/TypeStrong/TypeDoc) to permit the latest version. - [Release notes](https://github.com/TypeStrong/TypeDoc/releases) - [Changelog](https://github.com/TypeStrong/typedoc/blob/master/CHANGELOG.md) - [Commits](https://github.com/TypeStrong/TypeDoc/compare/v0.25.8...v0.25.9) --- updated-dependencies: - dependency-name: typedoc dependency-type: direct:development ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index d242469109..187badecd6 100644 --- a/package.json +++ b/package.json @@ -325,7 +325,7 @@ "tar-fs": "^3.0.5", "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", From c06dc8e96017f3590b73993fb1c625b36f40e0c1 Mon Sep 17 00:00:00 2001 From: Yawen Xiao Date: Tue, 27 Feb 2024 00:08:38 +0800 Subject: [PATCH 07/13] type: styles should be optional for cardProps (#47601) Co-authored-by: yawen.xiao --- components/config-provider/context.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/config-provider/context.ts b/components/config-provider/context.ts index d3904fef78..cd771b0988 100644 --- a/components/config-provider/context.ts +++ b/components/config-provider/context.ts @@ -102,7 +102,7 @@ export type TagConfig = ComponentStyleConfig & Pick; export interface CardConfig extends ComponentStyleConfig { classNames?: CardProps['classNames']; - styles: CardProps['styles']; + styles?: CardProps['styles']; } export type DrawerConfig = ComponentStyleConfig & From 72ee4517f0aa66ec8c39b50a5fb046813fea0834 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?= =?UTF-8?q?=E5=8D=9C?= Date: Tue, 27 Feb 2024 16:56:24 +0800 Subject: [PATCH 08/13] refactor: Use native css for measure css line ellipsis (#47597) * chore: init * chore: ellpsis check with native css * docs: all the lines * chore: move copied btn out * chore: add dpes * fix: logic order * fix: ellipsis event * test: update testcase * chore: use native way * chore: destructure * chore: fix lint * chore: fix lint * chore: fix lint --- .../__snapshots__/demo.test.tsx.snap | 32 -- .../__snapshots__/demo.test.tsx.snap | 16 - components/typography/Base/CopyBtn.tsx | 50 +++ components/typography/Base/Ellipsis.tsx | 336 ++++++++------- components/typography/Base/index.tsx | 59 +-- components/typography/Base/util.ts | 13 + .../__snapshots__/demo-extend.test.ts.snap | 389 +---------------- .../__snapshots__/demo.test.tsx.snap | 390 +----------------- .../typography/__tests__/ellipsis.test.tsx | 144 ++----- components/typography/demo/ellipsis-debug.tsx | 21 +- .../typography/demo/ellipsis-middle.tsx | 2 +- tests/dekko/use-client.test.js | 1 + 12 files changed, 349 insertions(+), 1104 deletions(-) create mode 100644 components/typography/Base/CopyBtn.tsx create mode 100644 components/typography/Base/util.ts 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/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)); } From 01f923effe8e6e5d5cad52b731de8f52a8783de0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?= =?UTF-8?q?=E5=8D=9C?= Date: Tue, 27 Feb 2024 19:11:46 +0800 Subject: [PATCH 09/13] fix: Compatible with v4 logic (#47612) --- components/button/__tests__/index.test.tsx | 9 ++++++++- components/button/button.tsx | 17 +++++++++++------ 2 files changed, 19 insertions(+), 7 deletions(-) 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} From 170af6508d0b1c2e5fdc3284a0b38035cfc865fb Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Tue, 27 Feb 2024 21:33:55 +0800 Subject: [PATCH 10/13] chore(deps): update rc-picker requirement from ~4.1.4 to ~4.1.5 (#47615) Updates the requirements on [rc-picker](https://github.com/react-component/picker) to permit the latest version. - [Release notes](https://github.com/react-component/picker/releases) - [Changelog](https://github.com/react-component/picker/blob/master/CHANGELOG.md) - [Commits](https://github.com/react-component/picker/compare/v4.1.4...v4.1.5) --- updated-dependencies: - dependency-name: rc-picker dependency-type: direct:production ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 187badecd6..e617caa60a 100644 --- a/package.json +++ b/package.json @@ -143,7 +143,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", From 2ed4e01298bca7f0ef0ced55a143a2192b6d5069 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Tue, 27 Feb 2024 22:24:27 +0800 Subject: [PATCH 11/13] chore(deps-dev): bump the dev-dependencies group with 3 updates (#47614) --- updated-dependencies: - dependency-name: "@types/react" dependency-type: direct:development dependency-group: dev-dependencies - dependency-name: "@typescript-eslint/eslint-plugin" dependency-type: direct:development dependency-group: dev-dependencies - dependency-name: "@typescript-eslint/parser" dependency-type: direct:development dependency-group: dev-dependencies ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- package.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index e617caa60a..062407c1f4 100644 --- a/package.json +++ b/package.json @@ -207,7 +207,7 @@ "@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", @@ -216,8 +216,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", From fd1e08c94bfc70eb3205acd2f310a127579d8c01 Mon Sep 17 00:00:00 2001 From: MadCcc Date: Wed, 28 Feb 2024 09:53:56 +0800 Subject: [PATCH 12/13] chore: add @babel/runtime into dependencies (#47587) --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 062407c1f4..e94870509d 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", From 823acd2892398b355a60bb099f06540979244639 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?= =?UTF-8?q?=E5=8D=9C?= Date: Wed, 28 Feb 2024 13:20:11 +0800 Subject: [PATCH 13/13] docs: v4 ended (#47613) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * docs: v4 ended * docs: update datetime * docs: fix typo * Update docs/blog/v4-ood.en-US.md Co-authored-by: lijianan <574980606@qq.com> Signed-off-by: 二货爱吃白萝卜 * docs: update datetime * Update docs/blog/v4-ood.zh-CN.md Co-authored-by: kiner-tang <1127031143@qq.com> Signed-off-by: 二货爱吃白萝卜 * Update docs/blog/v4-ood.zh-CN.md Signed-off-by: lijianan <574980606@qq.com> --------- Signed-off-by: 二货爱吃白萝卜 Signed-off-by: lijianan <574980606@qq.com> Co-authored-by: lijianan <574980606@qq.com> Co-authored-by: kiner-tang <1127031143@qq.com> --- docs/blog/v4-ood.en-US.md | 17 +++++++++++++++++ docs/blog/v4-ood.zh-CN.md | 17 +++++++++++++++++ 2 files changed, 34 insertions(+) create mode 100644 docs/blog/v4-ood.en-US.md create mode 100644 docs/blog/v4-ood.zh-CN.md 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)