From 5ddec3ab8296d574caf3c9646d0c9b7d1d45f770 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: Sat, 12 Aug 2023 00:36:34 +0800 Subject: [PATCH 01/88] chore: CI of PR welcome (#44184) --- .github/workflows/pr-contributor-welcome.yml | 28 ++++++++++++++++++++ 1 file changed, 28 insertions(+) create mode 100644 .github/workflows/pr-contributor-welcome.yml diff --git a/.github/workflows/pr-contributor-welcome.yml b/.github/workflows/pr-contributor-welcome.yml new file mode 100644 index 000000000000..302e9c71535b --- /dev/null +++ b/.github/workflows/pr-contributor-welcome.yml @@ -0,0 +1,28 @@ +# 当 PR 被合并时，留言欢迎加入共建群 +name: PullRequest Contributor Welcome + +on: + pull_request_target: + types: + - closed + paths: + - 'components/**' + +jobs: + check-merged: + runs-on: ubuntu-latest + needs: read-file + if: github.event.pull_request.merged == true + steps: + - uses: actions-cool/maintain-one-comment@v3 + with: + token: ${{ secrets.GITHUB_TOKEN }} + body: | + 🎉 Thanks for contribution. Please feel free to join DingTalk Social Community (Provide the PR link please). + + 🎉 感谢参与贡献，欢迎扫码加入钉钉社区（进群后请提供 PR 地址）。 + + + + + body-include: '' \ No newline at end of file From 56f2bc5072f558b042c309686f4540f1e89f3ec1 Mon Sep 17 00:00:00 2001 From: Electrolux <59329360+yilaikesi@users.noreply.github.com> Date: Mon, 14 Aug 2023 12:08:25 +0800 Subject: [PATCH 02/88] fix: (tabs)Unexpected color change in the click area of the mobile tabs component (#44200) --- components/tabs/style/index.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/components/tabs/style/index.ts b/components/tabs/style/index.ts index c010b20f457c..43c2f34ddaee 100644 --- a/components/tabs/style/index.ts +++ b/components/tabs/style/index.ts @@ -663,6 +663,8 @@ const genTabStyle: GenerateStyle = (token: TabsToken) => { return { [tabCls]: { position: 'relative', + WebkitTouchCallout: 'none', + WebkitTapHighlightColor: 'transparent', display: 'inline-flex', alignItems: 'center', padding: horizontalItemPadding, From 72b449a1a4feb80c16b7c7b6371b83fdc0b914d4 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: Mon, 14 Aug 2023 13:32:57 +0800 Subject: [PATCH 03/88] docs: update faq (#44198) * docs: update faq * chore: update lint * chore: update lint * chore: use returnType --- .dumi/theme/builtins/IconSearch/Category.tsx | 2 +- .dumi/theme/layouts/DocLayout/index.tsx | 2 +- .dumi/theme/slots/Header/index.tsx | 2 +- components/_util/ActionButton.tsx | 2 +- components/affix/index.tsx | 2 +- components/button/button.tsx | 2 +- components/form/index.en-US.md | 4 ++-- components/form/index.zh-CN.md | 4 ++-- components/input/hooks/useRemovePasswordTimeout.ts | 2 +- components/modal/confirm.tsx | 2 +- components/statistic/Countdown.tsx | 2 +- components/typography/Base/index.tsx | 2 +- 12 files changed, 14 insertions(+), 14 deletions(-) diff --git a/.dumi/theme/builtins/IconSearch/Category.tsx b/.dumi/theme/builtins/IconSearch/Category.tsx index 83b70a309eea..1cbbdf4c57c6 100644 --- a/.dumi/theme/builtins/IconSearch/Category.tsx +++ b/.dumi/theme/builtins/IconSearch/Category.tsx @@ -16,7 +16,7 @@ const Category: React.FC = (props) => { const { icons, title, newIcons, theme } = props; const intl = useIntl(); const [justCopied, setJustCopied] = React.useState(null); - const copyId = React.useRef(null); + const copyId = React.useRef | null>(null); const onCopied = React.useCallback((type: string, text: string) => { message.success( diff --git a/.dumi/theme/layouts/DocLayout/index.tsx b/.dumi/theme/layouts/DocLayout/index.tsx index f5af2a0a7876..4e910e6edc9b 100644 --- a/.dumi/theme/layouts/DocLayout/index.tsx +++ b/.dumi/theme/layouts/DocLayout/index.tsx @@ -32,7 +32,7 @@ const DocLayout: React.FC = () => { const location = useLocation(); const { pathname, search, hash } = location; const [locale, lang] = useLocale(locales); - const timerRef = useRef(null); + const timerRef = useRef | null>(null); const { direction } = useContext(SiteContext); const { loading } = useSiteData(); diff --git a/.dumi/theme/slots/Header/index.tsx b/.dumi/theme/slots/Header/index.tsx index ae41778b685d..fecc9c97568f 100644 --- a/.dumi/theme/slots/Header/index.tsx +++ b/.dumi/theme/slots/Header/index.tsx @@ -139,7 +139,7 @@ const Header: React.FC = () => { searching: false, }); const { direction, isMobile, updateSiteConfig } = useContext(SiteContext); - const pingTimer = useRef(null); + const pingTimer = useRef | null>(null); const location = useLocation(); const { pathname, search } = location; diff --git a/components/_util/ActionButton.tsx b/components/_util/ActionButton.tsx index aed3cd743997..18552030c216 100644 --- a/components/_util/ActionButton.tsx +++ b/components/_util/ActionButton.tsx @@ -48,7 +48,7 @@ const ActionButton: React.FC = (props) => { }; React.useEffect(() => { - let timeoutId: NodeJS.Timer | null = null; + let timeoutId: ReturnType | null = null; if (autoFocus) { timeoutId = setTimeout(() => { buttonRef.current?.focus(); diff --git a/components/affix/index.tsx b/components/affix/index.tsx index 9f60cdf6661b..3f4fb4b17651 100644 --- a/components/affix/index.tsx +++ b/components/affix/index.tsx @@ -71,7 +71,7 @@ class InternalAffix extends React.Component { private fixedNodeRef = createRef(); - private timer: NodeJS.Timeout | null; + private timer: ReturnType | null; context: ConfigConsumerProps; diff --git a/components/button/button.tsx b/components/button/button.tsx index 8fbc7f8807fe..64bdc20e413d 100644 --- a/components/button/button.tsx +++ b/components/button/button.tsx @@ -145,7 +145,7 @@ const InternalButton: React.ForwardRefRenderFunction< const needInserted = Children.count(children) === 1 && !icon && !isUnBorderedButtonType(type); useEffect(() => { - let delayTimer: NodeJS.Timer | null = null; + let delayTimer: ReturnType | null = null; if (loadingOrDelay.delay > 0) { delayTimer = setTimeout(() => { delayTimer = null; diff --git a/components/form/index.en-US.md b/components/form/index.en-US.md index 4363236da885..2b52c06c7dc0 100644 --- a/components/form/index.en-US.md +++ b/components/form/index.en-US.md @@ -296,8 +296,8 @@ Provide linkage between forms. If a sub form with `name` prop update, it will au | resetFields | Reset fields to `initialValues` | (fields?: [NamePath](#namepath)\[]) => void | | | scrollToField | Scroll to field position | (name: [NamePath](#namepath), options: \[[ScrollOptions](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options)]) => void | | | setFields | Set fields status | (fields: [FieldData](#fielddata)\[]) => void | | -| setFieldValue | Set fields value(Will directly pass to form store. If you do not want to modify passed object, please clone first) | (name: [NamePath](#namepath), value: any) => void | 4.22.0 | -| setFieldsValue | Set fields value(Will directly pass to form store. If you do not want to modify passed object, please clone first). Use `setFieldValue` instead if you want to only config single value in Form.List | (values) => void | | +| setFieldValue | Set fields value(Will directly pass to form store and **reset validation message**. If you do not want to modify passed object, please clone first) | (name: [NamePath](#namepath), value: any) => void | 4.22.0 | +| setFieldsValue | Set fields value(Will directly pass to form store and **reset validation message**. If you do not want to modify passed object, please clone first). Use `setFieldValue` instead if you want to only config single value in Form.List | (values) => void | | | submit | Submit the form. It's same as click `submit` button | () => void | | | validateFields | Validate fields | (nameList?: [NamePath](#namepath)\[], { validateOnly?: boolean }) => Promise | `validateOnly`: 5.5.0 | diff --git a/components/form/index.zh-CN.md b/components/form/index.zh-CN.md index 98ae05170e46..f1c735c07897 100644 --- a/components/form/index.zh-CN.md +++ b/components/form/index.zh-CN.md @@ -295,8 +295,8 @@ Form.List 渲染表单相关操作函数。 | resetFields | 重置一组字段到 `initialValues` | (fields?: [NamePath](#namepath)\[]) => void | | | scrollToField | 滚动到对应字段位置 | (name: [NamePath](#namepath), options: [ScrollOptions](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options)) => void | | | setFields | 设置一组字段状态 | (fields: [FieldData](#fielddata)\[]) => void | | -| setFieldValue | 设置表单的值（该值将直接传入 form store 中。如果你不希望传入对象被修改，请克隆后传入） | (name: [NamePath](#namepath), value: any) => void | 4.22.0 | -| setFieldsValue | 设置表单的值（该值将直接传入 form store 中。如果你不希望传入对象被修改，请克隆后传入）。如果你只想修改 Form.List 中单项值，请通过 `setFieldValue` 进行指定 | (values) => void | | +| setFieldValue | 设置表单的值（该值将直接传入 form store 中并且**重置错误信息**。如果你不希望传入对象被修改，请克隆后传入） | (name: [NamePath](#namepath), value: any) => void | 4.22.0 | +| setFieldsValue | 设置表单的值（该值将直接传入 form store 中并且**重置错误信息**。如果你不希望传入对象被修改，请克隆后传入）。如果你只想修改 Form.List 中单项值，请通过 `setFieldValue` 进行指定 | (values) => void | | | submit | 提交表单，与点击 `submit` 按钮效果相同 | () => void | | | validateFields | 触发表单验证 | (nameList?: [NamePath](#namepath)\[], { validateOnly?: boolean }) => Promise | `validateOnly`: 5.5.0 | diff --git a/components/input/hooks/useRemovePasswordTimeout.ts b/components/input/hooks/useRemovePasswordTimeout.ts index b67d7ae9ce3c..94bf78a8279f 100644 --- a/components/input/hooks/useRemovePasswordTimeout.ts +++ b/components/input/hooks/useRemovePasswordTimeout.ts @@ -5,7 +5,7 @@ export default function useRemovePasswordTimeout( inputRef: React.RefObject, triggerOnMount?: boolean, ) { - const removePasswordTimeoutRef = useRef([]); + const removePasswordTimeoutRef = useRef[]>([]); const removePasswordTimeout = () => { removePasswordTimeoutRef.current.push( setTimeout(() => { diff --git a/components/modal/confirm.tsx b/components/modal/confirm.tsx index 5dc126aaae91..26a6883d0e94 100644 --- a/components/modal/confirm.tsx +++ b/components/modal/confirm.tsx @@ -31,7 +31,7 @@ export default function confirm(config: ModalFuncProps) { const container = document.createDocumentFragment(); // eslint-disable-next-line @typescript-eslint/no-use-before-define let currentConfig = { ...config, close, open: true } as any; - let timeoutId: NodeJS.Timeout; + let timeoutId: ReturnType; function destroy(...args: any[]) { const triggerCancel = args.some((param) => param && param.triggerCancel); diff --git a/components/statistic/Countdown.tsx b/components/statistic/Countdown.tsx index 4fcd5c95eeba..6fbdf5de1bc6 100644 --- a/components/statistic/Countdown.tsx +++ b/components/statistic/Countdown.tsx @@ -24,7 +24,7 @@ const Countdown: React.FC = (props) => { const forceUpdate = useForceUpdate(); - const countdown = React.useRef(null); + const countdown = React.useRef | null>(null); const stopTimer = () => { onFinish?.(); diff --git a/components/typography/Base/index.tsx b/components/typography/Base/index.tsx index 56cef15b4775..7baefd7711de 100644 --- a/components/typography/Base/index.tsx +++ b/components/typography/Base/index.tsx @@ -193,7 +193,7 @@ const Base = React.forwardRef((props, ref) => { // ========================== Copyable ========================== const [enableCopy, copyConfig] = useMergedConfig(copyable); const [copied, setCopied] = React.useState(false); - const copyIdRef = React.useRef(null); + const copyIdRef = React.useRef | null>(null); const copyOptions: Pick = {}; if (copyConfig.format) { From ee984fee0a81d81248799fddb2ccd606ac87b744 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: Mon, 14 Aug 2023 16:31:57 +0800 Subject: [PATCH 04/88] fix: Modal open should not block dropdown hidden (#44204) * refactor: adjust style * fix: not event when hovering * chore: add comment --- components/modal/style/index.tsx | 21 +++++++++------------ 1 file changed, 9 insertions(+), 12 deletions(-) diff --git a/components/modal/style/index.tsx b/components/modal/style/index.tsx index 77e007673b0a..14d18166250e 100644 --- a/components/modal/style/index.tsx +++ b/components/modal/style/index.tsx @@ -62,10 +62,7 @@ export interface ModalToken extends FullToken<'Modal'> { function box(position: React.CSSProperties['position']): React.CSSProperties { return { position, - top: 0, - insetInlineEnd: 0, - bottom: 0, - insetInlineStart: 0, + inset: 0, }; } @@ -95,6 +92,7 @@ export const genModalMaskStyle: GenerateStyle> = zIndex: token.zIndexPopupBase, height: '100%', backgroundColor: token.colorBgMask, + pointerEvents: 'none', [`${componentCls}-hidden`]: { display: 'none', @@ -103,9 +101,16 @@ export const genModalMaskStyle: GenerateStyle> = [`${componentCls}-wrap`]: { ...box('fixed'), + zIndex: token.zIndexPopupBase, overflow: 'auto', outline: 0, WebkitOverflowScrolling: 'touch', + + // Note: Firefox not support `:has` yet + [`&:has(${componentCls}${antCls}-zoom-enter), &:has(${componentCls}${antCls}-zoom-appear)`]: + { + pointerEvents: 'none', + }, }, }, }, @@ -120,14 +125,6 @@ const genModalStyle: GenerateStyle = (token) => { // ======================== Root ========================= { [`${componentCls}-root`]: { - [`${componentCls}-wrap`]: { - zIndex: token.zIndexPopupBase, - position: 'fixed', - inset: 0, - overflow: 'auto', - outline: 0, - WebkitOverflowScrolling: 'touch', - }, [`${componentCls}-wrap-rtl`]: { direction: 'rtl', }, From d1bd2d060556214018bd381cb7703721ff4f13e4 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 14 Aug 2023 18:27:05 +0800 Subject: [PATCH 05/88] docs: Update recommendation (#44207) * Update recommendation.zh-CN.md Signed-off-by: afc163 * Update recommendation.en-US.md Signed-off-by: afc163 --------- Signed-off-by: afc163 --- docs/react/recommendation.en-US.md | 2 +- docs/react/recommendation.zh-CN.md | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/react/recommendation.en-US.md b/docs/react/recommendation.en-US.md index 3e5a150649bf..df36112bee2e 100644 --- a/docs/react/recommendation.en-US.md +++ b/docs/react/recommendation.en-US.md @@ -41,8 +41,8 @@ title: Third-Party Libraries | Animation | [react-move](https://github.com/react-tools/react-move) [Ant Motion](https://motion.ant.design/components/tween-one) [react-spring](https://www.react-spring.io) | | Page Footer | [rc-footer](https://github.com/react-component/footer) | | Number/Currency | [react-countup](https://www.npmjs.com/package/react-countup) [react-number-format](https://github.com/s-yadav/react-number-format) [react-currency-input-field](https://github.com/cchanxzy/react-currency-input-field) | - | Application Frameworks | [umi](https://github.com/umijs/umi/) [remix](https://github.com/remix-run/remix) [refine](https://github.com/pankod/refine) | +| Flow-based UI | [react-flow](https://github.com/wbkd/react-flow) [x6](https://github.com/antvis/x6) | ## Products we are using ✨ diff --git a/docs/react/recommendation.zh-CN.md b/docs/react/recommendation.zh-CN.md index e023933178df..792439417357 100644 --- a/docs/react/recommendation.zh-CN.md +++ b/docs/react/recommendation.zh-CN.md @@ -44,6 +44,7 @@ title: 社区精选组件 | 数字/金额 | [react-number-format](https://github.com/s-yadav/react-number-format) [react-currency-input-fiel](https://github.com/cchanxzy/react-currency-input-field) | | 移动端探测 | [react-device-detect](https://github.com/duskload/react-device-detect) | | 应用程序框架 | [umi](https://github.com/umijs/umi/) [remix](https://github.com/remix-run/remix) [refine](https://github.com/pankod/refine) | +| Flow 流 | [react-flow](https://github.com/wbkd/react-flow) [x6](https://github.com/antvis/x6) | ## 推荐产品 ✨ From e0e373f30191ca2bac5a49f674a1bdeb7c7c891d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=8C=AB=E7=8C=AB?= Date: Mon, 14 Aug 2023 19:14:46 +0800 Subject: [PATCH 06/88] fix(badge): fix badge number is rtl (#43998) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix(badge): fix badge number is rtl * test: fix snapshots * feat: use dir attribute instead of bdi * test: update snapshots * test: back of snapshot --------- Co-authored-by: 二货机器人 --- .../__snapshots__/demo-extend.test.ts.snap | 32 +- .../__snapshots__/demo.test.tsx.snap | 32 +- components/badge/ScrollNumber.tsx | 22 +- .../__snapshots__/demo-extend.test.ts.snap | 686 ++++++++++-------- .../__tests__/__snapshots__/demo.test.ts.snap | 686 ++++++++++-------- .../__snapshots__/index.test.tsx.snap | 666 +++++++++-------- components/badge/style/index.ts | 4 + .../__snapshots__/components.test.tsx.snap | 112 +-- .../__snapshots__/demo-extend.test.ts.snap | 106 +-- .../__tests__/__snapshots__/demo.test.ts.snap | 106 +-- .../__snapshots__/demo-extend.test.ts.snap | 32 +- .../__snapshots__/demo.test.tsx.snap | 32 +- 12 files changed, 1353 insertions(+), 1163 deletions(-) diff --git a/components/avatar/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/avatar/__tests__/__snapshots__/demo-extend.test.ts.snap index a0f571456c6a..e59a79d34005 100644 --- a/components/avatar/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/avatar/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -39,16 +39,18 @@ exports[`renders components/avatar/demo/badge.tsx extend context correctly 1`] = data-show="true" title="1" > - + - 1 + + 1 + - + @@ -531,16 +533,18 @@ Array [ data-show="true" title="1" > - + - 1 + + 1 + - + diff --git a/components/avatar/__tests__/__snapshots__/demo.test.tsx.snap b/components/avatar/__tests__/__snapshots__/demo.test.tsx.snap index 6f87ea0a1eb5..9c10e9e3a429 100644 --- a/components/avatar/__tests__/__snapshots__/demo.test.tsx.snap +++ b/components/avatar/__tests__/__snapshots__/demo.test.tsx.snap @@ -39,16 +39,18 @@ exports[`renders components/avatar/demo/badge.tsx correctly 1`] = ` data-show="true" title="1" > - + - 1 + + 1 + - + @@ -438,16 +440,18 @@ Array [ data-show="true" title="1" > - + - 1 + + 1 + - + diff --git a/components/badge/ScrollNumber.tsx b/components/badge/ScrollNumber.tsx index a71762ac2c6e..79414bcde678 100644 --- a/components/badge/ScrollNumber.tsx +++ b/components/badge/ScrollNumber.tsx @@ -51,15 +51,19 @@ const ScrollNumber = React.forwardRef((props, re if (count && Number(count) % 1 === 0) { const numberList = String(count).split(''); - numberNodes = numberList.map((num, i) => ( - - )); + numberNodes = ( + + {numberList.map((num, i) => ( + + ))} + + ); } // allow specify the border diff --git a/components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap index 4d00eec5cdd2..a5b47e06e3fd 100644 --- a/components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -24,16 +24,18 @@ exports[`renders components/badge/demo/basic.tsx extend context correctly 1`] = data-show="true" title="5" > - + - 5 + + 5 + - + @@ -136,16 +138,18 @@ exports[`renders components/badge/demo/change.tsx extend context correctly 1`] = data-show="true" title="5" > - + - 5 + + 5 + - + @@ -655,26 +659,28 @@ Array [ data-show="true" title="44" > - + - 4 + + 4 + - - - 4 + + 4 + - + @@ -695,26 +701,28 @@ Array [ data-show="true" title="44" > - + - 4 + + 4 + - - - 4 + + 4 + - + @@ -735,26 +743,28 @@ Array [ data-show="true" title="44" > - + - 4 + + 4 + - - - 4 + + 4 + - + @@ -775,26 +785,28 @@ Array [ data-show="true" title="44" > - + - 4 + + 4 + - - - 4 + + 4 + - + @@ -815,26 +827,28 @@ Array [ data-show="true" title="44" > - + - 4 + + 4 + - - - 4 + + 4 + - + @@ -855,26 +869,28 @@ Array [ data-show="true" title="44" > - + - 4 + + 4 + - - - 4 + + 4 + - + @@ -895,26 +911,28 @@ Array [ data-show="true" title="44" > - + - 4 + + 4 + - - - 4 + + 4 + - + @@ -935,26 +953,28 @@ Array [ data-show="true" title="44" > - + - 4 + + 4 + - - - 4 + + 4 + - + @@ -975,26 +995,28 @@ Array [ data-show="true" title="44" > - + - 4 + + 4 + - - - 4 + + 4 + - + @@ -1015,26 +1037,28 @@ Array [ data-show="true" title="44" > - + - 4 + + 4 + - - - 4 + + 4 + - + @@ -1055,26 +1079,28 @@ Array [ data-show="true" title="44" > - + - 4 + + 4 + - - - 4 + + 4 + - + @@ -1095,26 +1121,28 @@ Array [ data-show="true" title="44" > - + - 4 + + 4 + - - - 4 + + 4 + - + @@ -1135,26 +1163,28 @@ Array [ data-show="true" title="44" > - + - 4 + + 4 + - - - 4 + + 4 + - + @@ -1469,16 +1499,18 @@ exports[`renders components/badge/demo/link.tsx extend context correctly 1`] = ` data-show="true" title="5" > - + - 5 + + 5 + - + @@ -1519,16 +1551,18 @@ exports[`renders components/badge/demo/mix.tsx extend context correctly 1`] = ` data-show="true" title="5" > - + - 5 + + 5 + - + @@ -1552,16 +1586,18 @@ exports[`renders components/badge/demo/mix.tsx extend context correctly 1`] = ` data-show="true" title="5" > - + - 5 + + 5 + - + @@ -1585,16 +1621,18 @@ exports[`renders components/badge/demo/mix.tsx extend context correctly 1`] = ` data-show="true" title="5" > - + - 5 + + 5 + - + @@ -1619,16 +1657,18 @@ exports[`renders components/badge/demo/mix.tsx extend context correctly 1`] = ` style="background: rgb(250, 84, 28);" title="5" > - + - 5 + + 5 + - + @@ -1894,26 +1934,28 @@ exports[`renders components/badge/demo/no-wrapper.tsx extend context correctly 1 style="background: rgb(250, 173, 20);" title="11" > - + - 1 + + 1 + - - - 1 + + 1 + - + @@ -1929,26 +1971,28 @@ exports[`renders components/badge/demo/no-wrapper.tsx extend context correctly 1 data-show="true" title="25" > - + - 2 + + 2 + - - - 5 + + 5 + - + @@ -2023,16 +2067,18 @@ exports[`renders components/badge/demo/offset.tsx extend context correctly 1`] = style="margin-top: 10px; right: -10px;" title="5" > - + - 5 + + 5 + - + `; @@ -2063,26 +2109,28 @@ exports[`renders components/badge/demo/overflow.tsx extend context correctly 1`] data-show="true" title="99" > - + - 9 + + 9 + - - - 9 + + 9 + - + @@ -2704,16 +2752,18 @@ exports[`renders components/badge/demo/size.tsx extend context correctly 1`] = ` data-show="true" title="5" > - + - 5 + + 5 + - + @@ -2736,16 +2786,18 @@ exports[`renders components/badge/demo/size.tsx extend context correctly 1`] = ` data-show="true" title="5" > - + - 5 + + 5 + - + @@ -2937,16 +2989,18 @@ exports[`renders components/badge/demo/title.tsx extend context correctly 1`] = data-show="true" title="Custom hover text" > - + - 5 + + 5 + - + @@ -2969,26 +3023,28 @@ exports[`renders components/badge/demo/title.tsx extend context correctly 1`] = data-show="true" title="Negative" > - + - - + + - + - - - 5 + + 5 + - + diff --git a/components/badge/__tests__/__snapshots__/demo.test.ts.snap b/components/badge/__tests__/__snapshots__/demo.test.ts.snap index 337d80134b2d..3b028617d6e9 100644 --- a/components/badge/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/badge/__tests__/__snapshots__/demo.test.ts.snap @@ -24,16 +24,18 @@ exports[`renders components/badge/demo/basic.tsx correctly 1`] = ` data-show="true" title="5" > - + - 5 + + 5 + - + @@ -134,16 +136,18 @@ exports[`renders components/badge/demo/change.tsx correctly 1`] = ` data-show="true" title="5" > - + - 5 + + 5 + - + @@ -650,26 +654,28 @@ Array [ data-show="true" title="44" > - + - 4 + + 4 + - - - 4 + + 4 + - + @@ -690,26 +696,28 @@ Array [ data-show="true" title="44" > - + - 4 + + 4 + - - - 4 + + 4 + - + @@ -730,26 +738,28 @@ Array [ data-show="true" title="44" > - + - 4 + + 4 + - - - 4 + + 4 + - + @@ -770,26 +780,28 @@ Array [ data-show="true" title="44" > - + - 4 + + 4 + - - - 4 + + 4 + - + @@ -810,26 +822,28 @@ Array [ data-show="true" title="44" > - + - 4 + + 4 + - - - 4 + + 4 + - + @@ -850,26 +864,28 @@ Array [ data-show="true" title="44" > - + - 4 + + 4 + - - - 4 + + 4 + - + @@ -890,26 +906,28 @@ Array [ data-show="true" title="44" > - + - 4 + + 4 + - - - 4 + + 4 + - + @@ -930,26 +948,28 @@ Array [ data-show="true" title="44" > - + - 4 + + 4 + - - - 4 + + 4 + - + @@ -970,26 +990,28 @@ Array [ data-show="true" title="44" > - + - 4 + + 4 + - - - 4 + + 4 + - + @@ -1010,26 +1032,28 @@ Array [ data-show="true" title="44" > - + - 4 + + 4 + - - - 4 + + 4 + - + @@ -1050,26 +1074,28 @@ Array [ data-show="true" title="44" > - + - 4 + + 4 + - - - 4 + + 4 + - + @@ -1090,26 +1116,28 @@ Array [ data-show="true" title="44" > - + - 4 + + 4 + - - - 4 + + 4 + - + @@ -1130,26 +1158,28 @@ Array [ data-show="true" title="44" > - + - 4 + + 4 + - - - 4 + + 4 + - + @@ -1460,16 +1490,18 @@ exports[`renders components/badge/demo/link.tsx correctly 1`] = ` data-show="true" title="5" > - + - 5 + + 5 + - + @@ -1508,16 +1540,18 @@ exports[`renders components/badge/demo/mix.tsx correctly 1`] = ` data-show="true" title="5" > - + - 5 + + 5 + - + @@ -1541,16 +1575,18 @@ exports[`renders components/badge/demo/mix.tsx correctly 1`] = ` data-show="true" title="5" > - + - 5 + + 5 + - + @@ -1574,16 +1610,18 @@ exports[`renders components/badge/demo/mix.tsx correctly 1`] = ` data-show="true" title="5" > - + - 5 + + 5 + - + @@ -1608,16 +1646,18 @@ exports[`renders components/badge/demo/mix.tsx correctly 1`] = ` style="background:#fa541c" title="5" > - + - 5 + + 5 + - + @@ -1881,26 +1921,28 @@ exports[`renders components/badge/demo/no-wrapper.tsx correctly 1`] = ` style="background:#faad14" title="11" > - + - 1 + + 1 + - - - 1 + + 1 + - + @@ -1916,26 +1958,28 @@ exports[`renders components/badge/demo/no-wrapper.tsx correctly 1`] = ` data-show="true" title="25" > - + - 2 + + 2 + - - - 5 + + 5 + - + @@ -2008,16 +2052,18 @@ exports[`renders components/badge/demo/offset.tsx correctly 1`] = ` style="margin-top:10px;right:-10px" title="5" > - + - 5 + + 5 + - + `; @@ -2046,26 +2092,28 @@ exports[`renders components/badge/demo/overflow.tsx correctly 1`] = ` data-show="true" title="99" > - + - 9 + + 9 + - - - 9 + + 9 + - + @@ -2681,16 +2729,18 @@ exports[`renders components/badge/demo/size.tsx correctly 1`] = ` data-show="true" title="5" > - + - 5 + + 5 + - + @@ -2713,16 +2763,18 @@ exports[`renders components/badge/demo/size.tsx correctly 1`] = ` data-show="true" title="5" > - + - 5 + + 5 + - + @@ -2910,16 +2962,18 @@ exports[`renders components/badge/demo/title.tsx correctly 1`] = ` data-show="true" title="Custom hover text" > - + - 5 + + 5 + - + @@ -2942,26 +2996,28 @@ exports[`renders components/badge/demo/title.tsx correctly 1`] = ` data-show="true" title="Negative" > - + - - + + - + - - - 5 + + 5 + - + diff --git a/components/badge/__tests__/__snapshots__/index.test.tsx.snap b/components/badge/__tests__/__snapshots__/index.test.tsx.snap index 05ea8ed2e09c..ca44c0f66b97 100644 --- a/components/badge/__tests__/__snapshots__/index.test.tsx.snap +++ b/components/badge/__tests__/__snapshots__/index.test.tsx.snap @@ -11,16 +11,18 @@ exports[`Badge render Badge status/color when contains children 1`] = ` data-show="true" title="5" > - + - 5 + + 5 + - + - + - 5 + + 5 + - + - + - 5 + + 5 + - + @@ -79,36 +85,38 @@ exports[`Badge render correct with negative number 1`] = ` data-show="true" title="-10" > - + - - + + - + - - - 1 + + 1 + - - - 0 + + 0 + - + - + - - + + - + - - - 1 + + 1 + - - - 0 + + 0 + - + @@ -176,16 +186,18 @@ exports[`Badge rtl render component should be rendered correctly in RTL directio style="margin-top: 10px; left: 10px;" title="5" > - + - 5 + + 5 + - + `; @@ -200,16 +212,18 @@ exports[`Badge should be compatible with borderColor style 1`] = ` style="background-color: rgb(255, 255, 255); color: rgb(153, 153, 153); border-color: #d9d9d9; box-shadow: 0 0 0 1px #d9d9d9 inset;" title="4" > - + - 4 + + 4 + - + `; @@ -274,86 +288,88 @@ exports[`Badge should render when count is changed 1`] = ` data-show="true" title="10" > - - - 1 - - - - - 0 - + - 1 - - - 2 - - - 3 - - - 4 - - - 5 - - - 6 - - - 7 - - - 8 - - - 9 + + 1 + - 0 + + 0 + + + 1 + + + 2 + + + 3 + + + 4 + + + 5 + + + 6 + + + 7 + + + 8 + + + 9 + + + 0 + - + `; @@ -367,86 +383,88 @@ exports[`Badge should render when count is changed 2`] = ` data-show="true" title="11" > - - - 1 - - - - - 1 - + - 2 - - - 3 - - - 4 - - - 5 - - - 6 - - - 7 - - - 8 - - - 9 - - - 0 + + 1 + - 1 + + 1 + + + 2 + + + 3 + + + 4 + + + 5 + + + 6 + + + 7 + + + 8 + + + 9 + + + 0 + + + 1 + - + `; @@ -460,27 +478,29 @@ exports[`Badge should render when count is changed 3`] = ` data-show="true" title="11" > - + - 1 + + 1 + - - - 1 + + 1 + - + `; @@ -508,26 +528,28 @@ exports[`Badge should render when count is changed 5`] = ` data-show="true" title="10" > - + - 1 + + 1 + - - - 0 + + 0 + - + `; @@ -541,76 +563,78 @@ exports[`Badge should render when count is changed 6`] = ` data-show="true" title="9" > - - - 9 - - - 0 - - - 1 - - - 2 - - - 3 - - - 4 - - - 5 - - - 6 - - - 7 - + - 8 - - - 9 + + 9 + + + 0 + + + 1 + + + 2 + + + 3 + + + 4 + + + 5 + + + 6 + + + 7 + + + 8 + + + 9 + - + `; diff --git a/components/badge/style/index.ts b/components/badge/style/index.ts index 44b0cbdf18c2..a55e14abc6fd 100644 --- a/components/badge/style/index.ts +++ b/components/badge/style/index.ts @@ -133,6 +133,10 @@ const genSharedBadgeStyle: GenerateStyle = (token: BadgeToken): CSSO [`${componentCls}-multiple-words`]: { padding: `0 ${token.paddingXS}px`, + + bdi: { + unicodeBidi: 'plaintext', + }, }, [`${componentCls}-dot`]: { diff --git a/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap b/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap index 571042719a1b..7d98439570c6 100644 --- a/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap +++ b/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap @@ -901,16 +901,18 @@ exports[`ConfigProvider components Badge configProvider 1`] = ` data-show="true" title="5" > - + - 5 + + 5 + - + - + - 5 + + 5 + - + - + - 5 + + 5 + - + - + - 5 + + 5 + - + - + - 5 + + 5 + - + - + - 5 + + 5 + - + - + - 5 + + 5 + - + - + - 5 + + 5 + - +
- + - 5 + + 5 + - + @@ -264,26 +268,28 @@ Array [ data-show="true" title="12" > - + - 1 + + 1 + - - - 2 + + 2 + - + @@ -330,36 +336,38 @@ Array [ data-show="true" title="123" > - + - 1 + + 1 + - - - 2 + + 2 + - - - 3 + + 3 + - + diff --git a/components/float-button/__tests__/__snapshots__/demo.test.ts.snap b/components/float-button/__tests__/__snapshots__/demo.test.ts.snap index 9bae2695d30a..be61b15beb15 100644 --- a/components/float-button/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/float-button/__tests__/__snapshots__/demo.test.ts.snap @@ -122,16 +122,18 @@ Array [ data-show="true" title="5" > - + - 5 + + 5 + - + @@ -178,16 +180,18 @@ Array [ data-show="true" title="5" > - + - 5 + + 5 + - + @@ -241,26 +245,28 @@ Array [ data-show="true" title="12" > - + - 1 + + 1 + - - - 2 + + 2 + - + @@ -307,36 +313,38 @@ Array [ data-show="true" title="123" > - + - 1 + + 1 + - - - 2 + + 2 + - - - 3 + + 3 + - + diff --git a/components/radio/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/radio/__tests__/__snapshots__/demo-extend.test.ts.snap index 988eaaa17e64..affb88bff622 100644 --- a/components/radio/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/radio/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -31,16 +31,18 @@ exports[`renders components/radio/demo/badge.tsx extend context correctly 1`] = data-show="true" title="1" > - + - 1 + + 1 + - + - + - 2 + + 2 + - +
diff --git a/components/radio/__tests__/__snapshots__/demo.test.tsx.snap b/components/radio/__tests__/__snapshots__/demo.test.tsx.snap index 224b99ac45af..70bd7a5ab9ad 100644 --- a/components/radio/__tests__/__snapshots__/demo.test.tsx.snap +++ b/components/radio/__tests__/__snapshots__/demo.test.tsx.snap @@ -31,16 +31,18 @@ exports[`renders components/radio/demo/badge.tsx correctly 1`] = ` data-show="true" title="1" > - + - 1 + + 1 + - + - + - 2 + + 2 + - + From 41cb8be60859f255c4f6221c6bd8e90d8c549d79 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?kiner-tang=28=E6=96=87=E8=BE=89=29?= <1127031143@qq.com> Date: Mon, 14 Aug 2023 20:59:34 +0800 Subject: [PATCH 07/88] fix(DatePicker): optimize RangePicker's range area style (#44206) * feat: optimize range-picker's range area style * feat: optimize range-picker's range area style * feat: optimize range-picker's range area style --- .../generatePicker/generateRangePicker.tsx | 4 +--- components/date-picker/style/index.ts | 14 ++++++++++---- 2 files changed, 11 insertions(+), 7 deletions(-) diff --git a/components/date-picker/generatePicker/generateRangePicker.tsx b/components/date-picker/generatePicker/generateRangePicker.tsx index 503f2806ddfb..e601f0e70e75 100644 --- a/components/date-picker/generatePicker/generateRangePicker.tsx +++ b/components/date-picker/generatePicker/generateRangePicker.tsx @@ -68,9 +68,7 @@ export default function generateRangePicker(generateConfig: GenerateCo const [wrapSSR, hashId] = useStyle(prefixCls); - let additionalOverrideProps: any = {}; - additionalOverrideProps = { - ...additionalOverrideProps, + const additionalOverrideProps: any = { ...(showTime ? getTimeProps({ format, picker, ...showTime }) : {}), ...(picker === 'time' ? getTimeProps({ format, ...props, picker }) : {}), }; diff --git a/components/date-picker/style/index.ts b/components/date-picker/style/index.ts index 340ad44eb9cd..8eda2d030c94 100644 --- a/components/date-picker/style/index.ts +++ b/components/date-picker/style/index.ts @@ -130,6 +130,12 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => { borderRadius: borderRadiusSM, transition: `background ${motionDurationMid}, border ${motionDurationMid}`, }, + [`&-range-hover-start, &-range-hover-end`]: { + [pickerCellInnerCls]: { + borderStartEndRadius: 0, + borderEndEndRadius: 0, + }, + }, // >>> Hover [`&:hover:not(${pickerCellCls}-in-view), @@ -263,8 +269,8 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => { &-in-view${pickerCellCls}-range-hover-start::after`]: { insetInlineStart: (pickerPanelCellWidth - pickerPanelCellHeight) / 2, borderInlineStart: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`, - borderStartStartRadius: lineWidth, - borderEndStartRadius: lineWidth, + borderStartStartRadius: borderRadiusSM, + borderEndStartRadius: borderRadiusSM, }, // Edge end @@ -275,8 +281,8 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => { &-in-view${pickerCellCls}-range-hover-end::after`]: { insetInlineEnd: (pickerPanelCellWidth - pickerPanelCellHeight) / 2, borderInlineEnd: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`, - borderStartEndRadius: lineWidth, - borderEndEndRadius: lineWidth, + borderStartEndRadius: borderRadiusSM, + borderEndEndRadius: borderRadiusSM, }, // >>> Disabled From 16f0738177368ef1788940b4bde9341a3095b179 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon, 14 Aug 2023 21:58:08 +0800 Subject: [PATCH 08/88] chore(deps-dev): bump lint-staged from 13.3.0 to 14.0.0 (#44212) Bumps [lint-staged](https://github.com/okonet/lint-staged) from 13.3.0 to 14.0.0. - [Release notes](https://github.com/okonet/lint-staged/releases) - [Commits](https://github.com/okonet/lint-staged/compare/v13.3.0...v14.0.0) --- updated-dependencies: - dependency-name: lint-staged dependency-type: direct:development update-type: version-update:semver-major ... 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 fa6a79bf0bc3..16d19c57dad7 100644 --- a/package.json +++ b/package.json @@ -256,7 +256,7 @@ "jsdom": "^22.0.0", "jsonml-to-react-element": "^1.1.11", "jsonml.js": "^0.1.0", - "lint-staged": "^13.0.3", + "lint-staged": "^14.0.0", "lodash": "^4.17.21", "lz-string": "^1.4.4", "mockdate": "^3.0.0", From d493594ffee869639ec3ee1a6ae3b370db663f94 Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Tue, 15 Aug 2023 13:42:28 +0800 Subject: [PATCH 09/88] docs: fix menu sider-current demo (#44222) --- components/menu/demo/sider-current.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/menu/demo/sider-current.tsx b/components/menu/demo/sider-current.tsx index 37f497b1af06..5c3a0afa6c68 100644 --- a/components/menu/demo/sider-current.tsx +++ b/components/menu/demo/sider-current.tsx @@ -49,7 +49,7 @@ const App: React.FC = () => { const onOpenChange: MenuProps['onOpenChange'] = (keys) => { const latestOpenKey = keys.find((key) => openKeys.indexOf(key) === -1); - if (rootSubmenuKeys.indexOf(latestOpenKey!) === -1) { + if (latestOpenKey && rootSubmenuKeys.indexOf(latestOpenKey!) === -1) { setOpenKeys(keys); } else { setOpenKeys(latestOpenKey ? [latestOpenKey] : []); From aff2bb72eff193749b8b30696b4a0a7e0a810615 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, 15 Aug 2023 14:14:36 +0800 Subject: [PATCH 10/88] chore: update pagination (#44226) --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 16d19c57dad7..db2ace7212dd 100644 --- a/package.json +++ b/package.json @@ -137,7 +137,7 @@ "rc-menu": "~9.10.0", "rc-motion": "^2.7.3", "rc-notification": "~5.0.4", - "rc-pagination": "~3.5.0", + "rc-pagination": "~3.6.0", "rc-picker": "~3.13.0", "rc-progress": "~3.4.1", "rc-rate": "~2.12.0", From 9ec85346fdadaad12f17a2c4c97d6e514057e54c Mon Sep 17 00:00:00 2001 From: Kyriewen <64134946+zbw-zbw@users.noreply.github.com> Date: Tue, 15 Aug 2023 15:12:45 +0800 Subject: [PATCH 11/88] docs(cascader): fix allowClear default value in doc (#44230) Co-authored-by: zbw01218944 --- components/cascader/index.en-US.md | 2 +- components/cascader/index.zh-CN.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/components/cascader/index.en-US.md b/components/cascader/index.en-US.md index 05c674426685..940cb1f3a683 100644 --- a/components/cascader/index.en-US.md +++ b/components/cascader/index.en-US.md @@ -48,7 +48,7 @@ Common props ref：[Common props](/docs/react/common-props) | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | -| allowClear | Show clear button | boolean \| { clearIcon?: ReactNode } | false | 5.8.0: Support object type | +| allowClear | Show clear button | boolean \| { clearIcon?: ReactNode } | true | 5.8.0: Support object type | | autoFocus | If get focus when component mounted | boolean | false | | | bordered | Whether has border style | boolean | true | | | changeOnSelect | (Work on single select) Change value on each selection if set to true, see above demo for details | boolean | false | | diff --git a/components/cascader/index.zh-CN.md b/components/cascader/index.zh-CN.md index e16b45bf6c29..8e371fdfc46b 100644 --- a/components/cascader/index.zh-CN.md +++ b/components/cascader/index.zh-CN.md @@ -49,7 +49,7 @@ demo: | 参数 | 说明 | 类型 | 默认值 | 版本 | | --- | --- | --- | --- | --- | -| allowClear | 支持清除 | boolean \| { clearIcon?: ReactNode } | false | 5.8.0: 支持对象形式 | +| allowClear | 支持清除 | boolean \| { clearIcon?: ReactNode } | true | 5.8.0: 支持对象形式 | | autoFocus | 自动获取焦点 | boolean | false | | | bordered | 是否有边框 | boolean | true | | | changeOnSelect | （单选时生效）当此项为 true 时，点选每级菜单选项值都会发生变化，具体见上面的演示 | boolean | false | | From 4fb448ffac808ed015621b25c51e548a41a4b498 Mon Sep 17 00:00:00 2001 From: Wing <1587315093@qq.com> Date: Tue, 15 Aug 2023 15:13:04 +0800 Subject: [PATCH 12/88] doc: upload doc line break (#44234) --- components/upload/index.en-US.md | 10 ++++++---- components/upload/index.zh-CN.md | 14 ++++++++------ 2 files changed, 14 insertions(+), 10 deletions(-) diff --git a/components/upload/index.en-US.md b/components/upload/index.en-US.md index a31fe17e110b..49a2c7d48c64 100644 --- a/components/upload/index.en-US.md +++ b/components/upload/index.en-US.md @@ -98,7 +98,7 @@ Extends File with additional props. When uploading state change, it returns: -```js +```jsx { file: { /* ... */ }, fileList: [ /* ... */ ], @@ -108,11 +108,11 @@ When uploading state change, it returns: 1. `file` File object for the current operation. - ```js + ```jsx { uid: 'uid', // unique identifier, negative is recommended, to prevent interference with internally generated id name: 'xx.png', // file name - status: 'done', // options： uploading, done, error, removed. Intercepted file by beforeUpload doesn't have a status field. + status: 'done' | 'uploading' | 'error' | 'removed', // Intercepted file by beforeUpload doesn't have a status field. response: '{"status": "success"}', // response from server linkProps: '{"download": "image"}', // additional HTML props of file link xhr: 'XMLHttpRequest{ ... }', // XMLHttpRequest Header @@ -152,7 +152,9 @@ For compatible case, we return File object when `beforeUpload` return `false`. I ### Why sometimes Chrome can not upload? -Chrome update will also break native upload. Please restart Chrome to finish the upload work. Ref: +Chrome update will also break native upload. Please restart Chrome to finish the upload work. + +Ref: - [#32672](https://github.com/ant-design/ant-design/issues/32672) - [#32913](https://github.com/ant-design/ant-design/issues/32913) diff --git a/components/upload/index.zh-CN.md b/components/upload/index.zh-CN.md index 6d91bba9ca77..d3685cce05e5 100644 --- a/components/upload/index.zh-CN.md +++ b/components/upload/index.zh-CN.md @@ -99,7 +99,7 @@ demo: 文件状态改变的回调，返回为： -```js +```jsx { file: { /* ... */ }, fileList: [ /* ... */ ], @@ -109,11 +109,11 @@ demo: 1. `file` 当前操作的文件对象。 - ```js + ```jsx { uid: 'uid', // 文件唯一标识，建议设置为负数，防止和内部产生的 id 冲突 name: 'xx.png', // 文件名 - status: 'done', // 状态有：uploading done error removed，被 beforeUpload 拦截的文件没有 status 属性 + status: 'done' | 'uploading' | 'error' | 'removed' , // beforeUpload 拦截的文件没有 status 状态属性 response: '{"status": "success"}', // 服务端响应内容 linkProps: '{"download": "image"}', // 下载链接额外的 HTML 属性 } @@ -136,7 +136,7 @@ demo: ### 如何显示下载链接？ -请使用 fileList 属性设置数组项的 url 属性进行展示控制。 +请使用 `fileList` 属性设置数组项的 `url` 属性进行展示控制。 ### `customRequest` 怎么使用？ @@ -148,11 +148,13 @@ demo: ### `onChange` 为什么有时候返回 File 有时候返回 { originFileObj: File }？ -历史原因，在 `beforeUpload` 返回 `false` 时，会返回 File 对象。在下个大版本我们会统一返回 `{ originFileObj: File }` 对象。当前版本已经兼容所有场景下 `info.file.originFileObj` 获取原 File 写法。你可以提前切换。 +历史原因，在 `beforeUpload` 返回 `false` 时，会返回 `File` 对象。在下个大版本我们会统一返回 `{ originFileObj: File }` 对象。当前版本已经兼容所有场景下 `info.file.originFileObj` 获取原 `File` 写法。你可以提前切换。 ### 为何有时 Chrome 点击 Upload 无法弹出文件选择框？ -与 antd 无关，原生上传也会失败。请重启 Chrome 浏览器，让其完成升级工作。相关 issue： +与 `antd` 无关，原生上传也会失败。请重启 `Chrome` 浏览器，让其完成升级工作。 + +相关 `issue`： - [#32672](https://github.com/ant-design/ant-design/issues/32672) - [#32913](https://github.com/ant-design/ant-design/issues/32913) From 3f0e74702e71aba4739cbe37dfd6b714192cb1fa Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Tue, 15 Aug 2023 15:57:04 +0800 Subject: [PATCH 13/88] docs: fix theme editor page (#44232) --- .dumi/pages/theme-editor/index.tsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/.dumi/pages/theme-editor/index.tsx b/.dumi/pages/theme-editor/index.tsx index d67fa4ca52d6..9b62a90e8014 100644 --- a/.dumi/pages/theme-editor/index.tsx +++ b/.dumi/pages/theme-editor/index.tsx @@ -44,11 +44,6 @@ const CustomTheme = () => { const storedConfig = localStorage.getItem(ANT_DESIGN_V5_THEME_EDITOR_THEME); if (storedConfig) { const themeConfig = JSON.parse(storedConfig); - const originThemeConfig = { - json: themeConfig, - text: undefined, - }; - setThemeConfigContent(originThemeConfig); setTheme(themeConfig); } }, []); From 8a65ad65156f4f5eb1ff869c44fe766aae7e7f68 Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Tue, 15 Aug 2023 19:10:32 +0800 Subject: [PATCH 14/88] docs: fix font color (#44236) --- .dumi/theme/builtins/TokenCompare/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.dumi/theme/builtins/TokenCompare/index.tsx b/.dumi/theme/builtins/TokenCompare/index.tsx index a44ffcda8da2..9ae37389f0b0 100644 --- a/.dumi/theme/builtins/TokenCompare/index.tsx +++ b/.dumi/theme/builtins/TokenCompare/index.tsx @@ -4,7 +4,7 @@ import classNames from 'classnames'; import { TinyColor } from '@ctrl/tinycolor'; import { createStyles } from 'antd-style'; import tokenMeta from 'antd/es/version/token-meta.json'; -import { theme, Space } from 'antd'; +import { Space, theme } from 'antd'; import useLocale from '../../../hooks/useLocale'; const useStyle = createStyles(({ token, css }) => { @@ -29,7 +29,7 @@ const useStyle = createStyles(({ token, css }) => { display: flex; align-items: center; justify-content: center; - + color: rgba(0,0,0,0.88); border-right: 1px solid rgba(0, 0, 0, 0.1); `, From 83e3b5218af3c91b47b00cdcd1dd5e5879578502 Mon Sep 17 00:00:00 2001 From: Konv Suu <2583695112@qq.com> Date: Tue, 15 Aug 2023 19:24:40 +0800 Subject: [PATCH 15/88] docs(Tabs): update animated prop's description (#44227) --- components/tabs/index.en-US.md | 2 +- components/tabs/index.zh-CN.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/components/tabs/index.en-US.md b/components/tabs/index.en-US.md index 404628eeb2d7..7ae5cc22cb04 100644 --- a/components/tabs/index.en-US.md +++ b/components/tabs/index.en-US.md @@ -48,7 +48,7 @@ Common props ref：[Common props](/docs/react/common-props) | --- | --- | --- | --- | --- | | activeKey | Current TabPane's key | string | - | | | addIcon | Customize add icon | ReactNode | - | 4.4.0 | -| animated | Whether to change tabs with animation. Only works while `tabPosition="top"` | boolean \| { inkBar: boolean, tabPane: boolean } | { inkBar: true, tabPane: false } | | +| animated | Whether to change tabs with animation.` | boolean \| { inkBar: boolean, tabPane: boolean } | { inkBar: true, tabPane: false } | | | centered | Centers tabs | boolean | false | 4.4.0 | | defaultActiveKey | Initial active TabPane's key, if `activeKey` is not set | string | - | | | hideAdd | Hide plus icon or not. Only works while `type="editable-card"` | boolean | false | | diff --git a/components/tabs/index.zh-CN.md b/components/tabs/index.zh-CN.md index 1ba9899eddfb..bbef94ed431f 100644 --- a/components/tabs/index.zh-CN.md +++ b/components/tabs/index.zh-CN.md @@ -50,7 +50,7 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。 | --- | --- | --- | --- | --- | | activeKey | 当前激活 tab 面板的 key | string | - | | | addIcon | 自定义添加按钮 | ReactNode | - | 4.4.0 | -| animated | 是否使用动画切换 Tabs, 仅生效于 `tabPosition="top"` | boolean\| { inkBar: boolean, tabPane: boolean } | { inkBar: true, tabPane: false } | | +| animated | 是否使用动画切换 Tabs` | boolean\| { inkBar: boolean, tabPane: boolean } | { inkBar: true, tabPane: false } | | | centered | 标签居中展示 | boolean | false | 4.4.0 | | defaultActiveKey | 初始化选中面板的 key，如果没有设置 activeKey | string | `第一个面板` | | | hideAdd | 是否隐藏加号图标，在 `type="editable-card"` 时有效 | boolean | false | | From a92a883b7798fba5c19b1da4d12ddf299938e38f Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 16 Aug 2023 18:19:11 +0800 Subject: [PATCH 16/88] docs: render china mirror link before hydration (#44233) * docs: render china mirror link before hydration * docs: fix pre render error * chore: hide first * chore: show china mirror link always --- .dumi/theme/slots/Header/Navigation.tsx | 39 ++++++++++++++++++------- .dumi/theme/slots/Header/index.tsx | 3 -- .dumi/theme/slots/Header/interface.ts | 1 - 3 files changed, 29 insertions(+), 14 deletions(-) diff --git a/.dumi/theme/slots/Header/Navigation.tsx b/.dumi/theme/slots/Header/Navigation.tsx index 6bdb4b5012dc..597dc1fd3101 100644 --- a/.dumi/theme/slots/Header/Navigation.tsx +++ b/.dumi/theme/slots/Header/Navigation.tsx @@ -30,7 +30,8 @@ const locales = { // ============================= Style ============================= const useStyle = createStyles(({ token }) => { - const { antCls, iconCls, fontFamily, headerHeight, menuItemBorder, colorPrimary } = token; + const { antCls, iconCls, fontFamily, headerHeight, menuItemBorder, colorPrimary, colorText } = + token; return { nav: css` @@ -56,6 +57,17 @@ const useStyle = createStyles(({ token }) => { left: 12px; border-width: ${menuItemBorder}px; } + + a { + color: ${colorText}; + } + + a:before { + position: absolute; + inset: 0; + background-color: transparent; + content: ""; + } } & ${antCls}-menu-submenu-title ${iconCls} { @@ -97,7 +109,6 @@ const useStyle = createStyles(({ token }) => { export interface NavigationProps extends SharedProps { isMobile: boolean; - isClient: boolean; responsive: null | 'narrow' | 'crowded'; directionText: string; onLangChange: () => void; @@ -106,7 +117,6 @@ export interface NavigationProps extends SharedProps { export default ({ isZhCN, - isClient, isMobile, responsive, directionText, @@ -224,16 +234,21 @@ export default ({ ), key: 'docs/resources', }, - isZhCN && - isClient && - window.location.host !== 'ant-design.antgroup.com' && - window.location.host !== 'ant-design.gitee.io' + isZhCN ? { - label: '国内镜像', + label: ( + + 国内镜像 + + ), key: 'mirror', children: [ { - label: 官方镜像, + label: ( + + 官方镜像 + + ), icon: ( logoGitee 镜像, + label: ( + + Gitee 镜像 + + ), icon: ( gitee { - const [isClient, setIsClient] = React.useState(false); const [, lang] = useLocale(); const { pkg } = useSiteData(); @@ -166,7 +165,6 @@ const Header: React.FC = () => { }, [location]); useEffect(() => { - setIsClient(typeof window !== 'undefined'); onWindowResize(); window.addEventListener('resize', onWindowResize); pingTimer.current = ping((status) => { @@ -273,7 +271,6 @@ const Header: React.FC = () => { const sharedProps: SharedProps = { isZhCN, isRTL, - isClient, }; const navigationNode = ( diff --git a/.dumi/theme/slots/Header/interface.ts b/.dumi/theme/slots/Header/interface.ts index 4c8824787310..8a0755c1bf0e 100644 --- a/.dumi/theme/slots/Header/interface.ts +++ b/.dumi/theme/slots/Header/interface.ts @@ -1,5 +1,4 @@ export interface SharedProps { isZhCN: boolean; isRTL: boolean; - isClient: boolean; } From 9ba9da244ada53338d7d42589707f9f3804a66dd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=8B=9F=E5=9F=B9=E7=83=9C?= <2021211067@stu.hit.edu.cn> Date: Wed, 16 Aug 2023 20:45:39 +0800 Subject: [PATCH 17/88] fix: ColorPicker HEX input cursor jump bug (#44137) * fix(color-picker): when inputting in the HEX,if you input a lowercase letter,the cursor will jump to the tail,and me fixed it. * test: fix ColorPicker snapshot --------- Co-authored-by: afc163 --- .../__snapshots__/demo-extend.test.ts.snap | 44 +++++++++---------- .../__snapshots__/index.test.tsx.snap | 4 +- .../color-picker/components/ColorHexInput.tsx | 2 +- components/color-picker/style/input.ts | 1 + 4 files changed, 26 insertions(+), 25 deletions(-) diff --git a/components/color-picker/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/color-picker/__tests__/__snapshots__/demo-extend.test.ts.snap index 46c42fd96141..717c27014ec1 100644 --- a/components/color-picker/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/color-picker/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -296,7 +296,7 @@ Array [ @@ -680,7 +680,7 @@ Array [ @@ -1066,7 +1066,7 @@ exports[`renders components/color-picker/demo/change-completed.tsx extend contex @@ -1450,7 +1450,7 @@ Array [ @@ -1839,7 +1839,7 @@ Array [ @@ -2202,7 +2202,7 @@ Array [ @@ -2530,7 +2530,7 @@ exports[`renders components/color-picker/demo/format.tsx extend context correctl @@ -4222,7 +4222,7 @@ exports[`renders components/color-picker/demo/panel-render.tsx extend context co @@ -5055,7 +5055,7 @@ exports[`renders components/color-picker/demo/panel-render.tsx extend context co @@ -5446,7 +5446,7 @@ Array [ @@ -6207,7 +6207,7 @@ exports[`renders components/color-picker/demo/pure-panel.tsx extend context corr @@ -6605,7 +6605,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly @@ -6987,7 +6987,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly @@ -7368,7 +7368,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly @@ -7763,7 +7763,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly @@ -8150,7 +8150,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly @@ -8536,7 +8536,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly @@ -8934,7 +8934,7 @@ exports[`renders components/color-picker/demo/text-render.tsx extend context cor @@ -9323,7 +9323,7 @@ exports[`renders components/color-picker/demo/text-render.tsx extend context cor @@ -9728,7 +9728,7 @@ exports[`renders components/color-picker/demo/text-render.tsx extend context cor @@ -10110,7 +10110,7 @@ Array [ @@ -10494,7 +10494,7 @@ Array [ diff --git a/components/color-picker/__tests__/__snapshots__/index.test.tsx.snap b/components/color-picker/__tests__/__snapshots__/index.test.tsx.snap index d81f2ecdf702..abf3be3921fa 100644 --- a/components/color-picker/__tests__/__snapshots__/index.test.tsx.snap +++ b/components/color-picker/__tests__/__snapshots__/index.test.tsx.snap @@ -216,7 +216,7 @@ exports[`ColorPicker Should panelRender work 1`] = ` @@ -505,7 +505,7 @@ exports[`ColorPicker Should panelRender work 2`] = ` diff --git a/components/color-picker/components/ColorHexInput.tsx b/components/color-picker/components/ColorHexInput.tsx index f98bf6520fa1..92130806c76d 100644 --- a/components/color-picker/components/ColorHexInput.tsx +++ b/components/color-picker/components/ColorHexInput.tsx @@ -37,7 +37,7 @@ const ColorHexInput: FC = ({ prefixCls, value, onChange }) = return ( = (token) => { padding: `0 ${paddingXS}px`, [`${antCls}-input`]: { fontSize: fontSizeSM, + textTransform: 'uppercase', lineHeight: `${controlHeightSM - 2 * lineWidth}px`, }, [`${antCls}-input-prefix`]: { From 808452e49d6f4e61a3d09bfa910d1503bae8a852 Mon Sep 17 00:00:00 2001 From: AN <455454007@qq.com> Date: Thu, 17 Aug 2023 13:15:26 +0800 Subject: [PATCH 18/88] fix(DataPicker):fix picker content is not centered (#44245) * Update index.ts fix(DataPicker):fix picker content is not centered Signed-off-by: AN <455454007@qq.com> * fix(DataPicker):fix picker content is not centered Signed-off-by: AN <455454007@qq.com> --------- Signed-off-by: AN <455454007@qq.com> --- components/date-picker/style/index.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/components/date-picker/style/index.ts b/components/date-picker/style/index.ts index 8eda2d030c94..62ef3f039d5b 100644 --- a/components/date-picker/style/index.ts +++ b/components/date-picker/style/index.ts @@ -807,6 +807,8 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => { th: { width: pickerPanelCellWidth, + boxSizing: 'border-box', + padding: 0, }, }, }, From f1c38bf9e0e92c02694247a09ca5424c6bab8c4f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?kiner-tang=28=E6=96=87=E8=BE=89=29?= <1127031143@qq.com> Date: Thu, 17 Aug 2023 17:12:51 +0800 Subject: [PATCH 19/88] site(Calendar): add lunar calendar demo (#44166) * feat: update demo * feat: update demo * feat: update demo * feat: update demo * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code --- .../__snapshots__/demo-extend.test.ts.snap | 2 +- .../__tests__/__snapshots__/demo.test.ts.snap | 2 +- .../calendar/__tests__/demo-extend.test.ts | 2 +- components/calendar/__tests__/demo.test.ts | 1 + components/calendar/demo/basic.tsx | 4 +- components/calendar/demo/card.tsx | 4 +- components/calendar/demo/component-token.tsx | 4 +- components/calendar/demo/customize-header.tsx | 4 +- components/calendar/demo/lunar.md | 7 + components/calendar/demo/lunar.tsx | 233 ++++++++++++++++++ components/calendar/demo/notice-calendar.tsx | 7 +- components/calendar/index.en-US.md | 1 + components/calendar/index.zh-CN.md | 1 + package.json | 1 + 14 files changed, 258 insertions(+), 15 deletions(-) create mode 100644 components/calendar/demo/lunar.md create mode 100644 components/calendar/demo/lunar.tsx diff --git a/components/calendar/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/calendar/__tests__/__snapshots__/demo-extend.test.ts.snap index 410db2eea5c1..69a258a0a8b4 100644 --- a/components/calendar/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/calendar/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -9282,7 +9282,7 @@ exports[`renders components/calendar/demo/notice-calendar.tsx extend context cor - This is very long usual event。。.... + This is very long usual event...... diff --git a/components/calendar/__tests__/__snapshots__/demo.test.ts.snap b/components/calendar/__tests__/__snapshots__/demo.test.ts.snap index 8c6ffc118b29..6d3ec9a8624d 100644 --- a/components/calendar/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/calendar/__tests__/__snapshots__/demo.test.ts.snap @@ -5418,7 +5418,7 @@ exports[`renders components/calendar/demo/notice-calendar.tsx correctly 1`] = ` - This is very long usual event。。.... + This is very long usual event...... diff --git a/components/calendar/__tests__/demo-extend.test.ts b/components/calendar/__tests__/demo-extend.test.ts index 943a699b5e64..d5dc6e118d5a 100644 --- a/components/calendar/__tests__/demo-extend.test.ts +++ b/components/calendar/__tests__/demo-extend.test.ts @@ -1,3 +1,3 @@ import { extendTest } from '../../../tests/shared/demoTest'; -extendTest('calendar'); +extendTest('calendar', { skip: ['lunar.tsx'] }); diff --git a/components/calendar/__tests__/demo.test.ts b/components/calendar/__tests__/demo.test.ts index d8ead2ddc9d3..a29e22786fd0 100644 --- a/components/calendar/__tests__/demo.test.ts +++ b/components/calendar/__tests__/demo.test.ts @@ -5,4 +5,5 @@ demoTest('calendar', { testRootProps: { value: dayjs(), }, + skip: ['lunar.tsx'], }); diff --git a/components/calendar/demo/basic.tsx b/components/calendar/demo/basic.tsx index c95cd92fd37c..0255c4beceb6 100644 --- a/components/calendar/demo/basic.tsx +++ b/components/calendar/demo/basic.tsx @@ -1,10 +1,10 @@ import React from 'react'; import type { Dayjs } from 'dayjs'; import { Calendar } from 'antd'; -import type { CalendarMode } from 'antd/es/calendar/generateCalendar'; +import type { CalendarProps } from 'antd'; const App: React.FC = () => { - const onPanelChange = (value: Dayjs, mode: CalendarMode) => { + const onPanelChange = (value: Dayjs, mode: CalendarProps['mode']) => { console.log(value.format('YYYY-MM-DD'), mode); }; diff --git a/components/calendar/demo/card.tsx b/components/calendar/demo/card.tsx index 2d4ea63e9328..aa08fc1690b6 100644 --- a/components/calendar/demo/card.tsx +++ b/components/calendar/demo/card.tsx @@ -1,9 +1,9 @@ import type { Dayjs } from 'dayjs'; import React from 'react'; import { Calendar, theme } from 'antd'; -import type { CalendarMode } from 'antd/es/calendar/generateCalendar'; +import type { CalendarProps } from 'antd'; -const onPanelChange = (value: Dayjs, mode: CalendarMode) => { +const onPanelChange = (value: Dayjs, mode: CalendarProps['mode']) => { console.log(value.format('YYYY-MM-DD'), mode); }; diff --git a/components/calendar/demo/component-token.tsx b/components/calendar/demo/component-token.tsx index 37629d39c613..90c3223d2fcb 100644 --- a/components/calendar/demo/component-token.tsx +++ b/components/calendar/demo/component-token.tsx @@ -1,11 +1,11 @@ import type { Dayjs } from 'dayjs'; import React from 'react'; import { Calendar, ConfigProvider } from 'antd'; -import type { CalendarMode } from 'antd/es/calendar/generateCalendar'; +import type { CalendarProps } from 'antd'; /** Test usage. Do not use in your production. */ export default () => { - const onPanelChange = (value: Dayjs, mode: CalendarMode) => { + const onPanelChange = (value: Dayjs, mode: CalendarProps['mode']) => { console.log(value.format('YYYY-MM-DD'), mode); }; diff --git a/components/calendar/demo/customize-header.tsx b/components/calendar/demo/customize-header.tsx index 175150ba9375..4b969e0f33c1 100644 --- a/components/calendar/demo/customize-header.tsx +++ b/components/calendar/demo/customize-header.tsx @@ -4,14 +4,14 @@ import 'dayjs/locale/zh-cn'; import type { Dayjs } from 'dayjs'; import dayLocaleData from 'dayjs/plugin/localeData'; import { Calendar, Col, Radio, Row, Select, Typography, theme } from 'antd'; -import type { CalendarMode } from 'antd/es/calendar/generateCalendar'; +import type { CalendarProps } from 'antd'; dayjs.extend(dayLocaleData); const App: React.FC = () => { const { token } = theme.useToken(); - const onPanelChange = (value: Dayjs, mode: CalendarMode) => { + const onPanelChange = (value: Dayjs, mode: CalendarProps['mode']) => { console.log(value.format('YYYY-MM-DD'), mode); }; diff --git a/components/calendar/demo/lunar.md b/components/calendar/demo/lunar.md new file mode 100644 index 000000000000..1e6f795fe0b1 --- /dev/null +++ b/components/calendar/demo/lunar.md @@ -0,0 +1,7 @@ +## zh-CN + +展示农历、节气等信息。 + +## en-US + +Display lunar calendar, solar terms and other information. diff --git a/components/calendar/demo/lunar.tsx b/components/calendar/demo/lunar.tsx new file mode 100644 index 000000000000..b5476d5f8968 --- /dev/null +++ b/components/calendar/demo/lunar.tsx @@ -0,0 +1,233 @@ +import dayjs, { type Dayjs } from 'dayjs'; +import React from 'react'; +import lunisolar from 'lunisolar'; +import zhCn from 'lunisolar/locale/zh-cn'; +import { createStyles } from 'antd-style'; +import classNames from 'classnames'; +import { Calendar, Col, Radio, Row, Select } from 'antd'; +import type { CalendarProps } from 'antd'; + +lunisolar.locale(zhCn); + +const useStyle = createStyles(({ token, css, cx }) => { + const lunar = css` + color: ${token.colorTextTertiary}; + font-size: ${token.fontSizeSM}px; + `; + return { + wrapper: css` + width: 400px; + border: 1px solid ${token.colorBorderSecondary}; + border-radius: ${token.borderRadiusOuter}; + padding: 5px; + `, + dateCell: css` + position: relative; + &:before { + content: ''; + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + margin: auto; + max-width: 40px; + max-height: 40px; + background: transparent; + transition: background 300ms; + border-radius: ${token.borderRadiusOuter}px; + border: 1px solid transparent; + box-sizing: border-box; + } + &:hover:before { + background: rgba(0, 0, 0, 0.04); + } + `, + today: css` + &:before { + border: 1px solid ${token.colorPrimary}; + } + `, + text: css` + position: relative; + z-index: 1; + `, + lunar, + current: css` + color: ${token.colorTextLightSolid}; + &:before { + background: ${token.colorPrimary}; + } + &:hover:before { + background: ${token.colorPrimary}; + opacity: .8; + } + .${cx(lunar)} { + color: ${token.colorTextLightSolid}; + opacity: .9; + } + `, + monthCell: css` + width: 120px; + color: ${token.colorTextBase}; + border-radius: ${token.borderRadiusOuter}px; + padding: 5px 0; + &:hover { + background: rgba(0, 0, 0, 0.04); + } + `, + monthCellCurrent: css` + color: ${token.colorTextLightSolid}; + background: ${token.colorPrimary}; + &:hover { + background: ${token.colorPrimary}; + opacity: .8; + } + `, + }; +}); + +const App: React.FC = () => { + const { styles } = useStyle({ test: true }); + + const [selectDate, setSelectDate] = React.useState(dayjs()); + + const onPanelChange = (value: Dayjs, mode: CalendarProps['mode']) => { + console.log(value.format('YYYY-MM-DD'), mode); + setSelectDate(value); + }; + + const onDateChange = (value: Dayjs) => { + setSelectDate(value); + }; + + const cellRender: CalendarProps['fullCellRender'] = (date, info) => { + const d = lunisolar(date.toDate()); + const lunar = d.lunar.getDayName(); + const solarTerm = d.solarTerm?.name; + if (info.type === 'date') { + return React.cloneElement(info.originNode, { + ...info.originNode.props, + className: classNames(styles.dateCell, { + [styles.current]: selectDate.isSame(date, 'date'), + [styles.today]: date.isSame(dayjs(), 'date'), + }), + children: ( +
+ {date.get('date')} + {info.type === 'date' &&
{solarTerm || lunar}
} +
+ ), + }); + } + + if (info.type === 'month') { + // Due to the fact that a solar month is part of the lunar month X and part of the lunar month X+1, + // when rendering a month, always take X as the lunar month of the month + const d2 = lunisolar(new Date(date.get('year'), date.get('month'))); + const month = d2.lunar.getMonthName(); + return ( +
+ {date.get('month') + 1}月（{month}） +
+ ); + } + }; + + const getYearLabel = (year: number) => { + const d = lunisolar(new Date(year + 1, 0)); + return `${year}年（${d.format('cYcZ年')}）`; + }; + + const getMonthLabel = (month: number, value: Dayjs) => { + const d = lunisolar(new Date(value.year(), month)); + const lunar = d.lunar.getMonthName(); + return `${month + 1}月（${lunar}）`; + }; + + return ( +
+ { + const start = 0; + const end = 12; + const monthOptions = []; + + let current = value.clone(); + const localeData = value.localeData(); + const months = []; + for (let i = 0; i < 12; i++) { + current = current.month(i); + months.push(localeData.monthsShort(current)); + } + + for (let i = start; i < end; i++) { + monthOptions.push({ + label: getMonthLabel(i, value), + value: i, + }); + } + + const year = value.year(); + const month = value.month(); + const options = []; + for (let i = year - 10; i < year + 10; i += 1) { + options.push({ + label: getYearLabel(i), + value: i, + }); + } + return ( + + + { + const now = value.clone().month(newMonth); + onChange(now); + }} + /> + + + onTypeChange(e.target.value)} + value={type} + > + 月 + 年 + + + + ); + }} + /> +
+ ); +}; + +export default App; diff --git a/components/calendar/demo/notice-calendar.tsx b/components/calendar/demo/notice-calendar.tsx index 3051372a8895..fbf6aa24bddb 100644 --- a/components/calendar/demo/notice-calendar.tsx +++ b/components/calendar/demo/notice-calendar.tsx @@ -1,7 +1,6 @@ import React from 'react'; import type { Dayjs } from 'dayjs'; -import type { CellRenderInfo } from 'rc-picker/lib/interface'; -import type { BadgeProps } from 'antd'; +import type { BadgeProps, CalendarProps } from 'antd'; import { Badge, Calendar } from 'antd'; const getListData = (value: Dayjs) => { @@ -23,7 +22,7 @@ const getListData = (value: Dayjs) => { case 15: listData = [ { type: 'warning', content: 'This is warning event' }, - { type: 'success', content: 'This is very long usual event。。....' }, + { type: 'success', content: 'This is very long usual event......' }, { type: 'error', content: 'This is error event 1.' }, { type: 'error', content: 'This is error event 2.' }, { type: 'error', content: 'This is error event 3.' }, @@ -65,7 +64,7 @@ const App: React.FC = () => { ); }; - const cellRender = (current: Dayjs, info: CellRenderInfo) => { + const cellRender: CalendarProps['cellRender'] = (current, info) => { if (info.type === 'date') return dateCellRender(current); if (info.type === 'month') return monthCellRender(current); return info.originNode; diff --git a/components/calendar/index.en-US.md b/components/calendar/index.en-US.md index 61e71d774862..4480bc7fffb7 100644 --- a/components/calendar/index.en-US.md +++ b/components/calendar/index.en-US.md @@ -19,6 +19,7 @@ When data is in the form of dates, such as schedules, timetables, prices calenda Notice Calendar Card Selectable Calendar +Lunar Calendar Customize Header Component Token diff --git a/components/calendar/index.zh-CN.md b/components/calendar/index.zh-CN.md index c3cdb4730b96..592b5838cb65 100644 --- a/components/calendar/index.zh-CN.md +++ b/components/calendar/index.zh-CN.md @@ -20,6 +20,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-p-wQLik200AAA 通知事项日历 卡片模式 选择功能 +农历日历 自定义头部 组件 Token diff --git a/package.json b/package.json index db2ace7212dd..2617fa74c459 100644 --- a/package.json +++ b/package.json @@ -258,6 +258,7 @@ "jsonml.js": "^0.1.0", "lint-staged": "^14.0.0", "lodash": "^4.17.21", + "lunisolar": "^2.2.2", "lz-string": "^1.4.4", "mockdate": "^3.0.0", "node-notifier": "^10.0.1", From 3525966682ec137ce6b8e7610d6b9d3d418bd8af Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 17 Aug 2023 19:12:26 +0800 Subject: [PATCH 20/88] docs: Update faq.zh-CN.md (#44274) * docs: Update faq.zh-CN.md Signed-off-by: afc163 * Update faq.zh-CN.md Signed-off-by: afc163 --------- Signed-off-by: afc163 --- docs/react/faq.zh-CN.md | 21 ++++++++++++++------- 1 file changed, 14 insertions(+), 7 deletions(-) diff --git a/docs/react/faq.zh-CN.md b/docs/react/faq.zh-CN.md index 43fe3c03a93f..886b8d98d390 100644 --- a/docs/react/faq.zh-CN.md +++ b/docs/react/faq.zh-CN.md @@ -11,7 +11,7 @@ title: FAQ ## `undefined` 和 `null` 在 `antd` 的受控组件中有区别吗？ -**有。antd 约定：`undefined` 是非受控的标志，`null` 作为显式的受控空值。** +**有区别。antd 约定：`undefined` 是非受控的标志，`null` 作为显式的受控空值。** 在输入元素中，React 认为 `undefined` 和 `null` 都属于非受控的标志。当 `value` 由非空值转化为 `undefined` 或 `null` 时，组件不再受控，这通常是一些意外情况发生的原因。 @@ -107,12 +107,19 @@ antd 内部会对 props 进行浅比较实现性能优化。当状态变更， 有的，你可以访问 https://ant-design.antgroup.com/index-cn 或 https://ant-design.gitee.io/index-cn 。 -历史版本: - -- 4.x: https://4x-ant-design.antgroup.com -- 3.x: https://ant-design-3x.gitee.io/ -- 2.x: https://ant-design-2x.gitee.io/ -- 1.x: https://ant-design-1x.gitee.io/ +| 产品/版本 | 地址 | +| --- | --- | +| Ant Design 5.x | https://ant-design.antgroup.com
https://ant-design.gitee.io | +| Ant Design 4.x | https://4x-ant-design.antgroup.com | +| Ant Design 3.x | https://ant-design-3x.gitee.io | +| Ant Design 2.x | https://ant-design-2x.gitee.io | +| Ant Design 1.x | https://ant-design-1x.gitee.io | +| Ant Design Pro | https://ant-design-pro.gitee.io/ | +| Ant Design Mobile | https://ant-design-mobile.antgroup.com/zh
https://antd-mobile.gitee.io/ | +| Ant Design Mini | https://ant-design-mini.antgroup.com/zh
https://antd-mobile.gitee.io/ | +| Ant Design Charts | https://ant-design-charts.antgroup.com
https://antd-mobile.gitee.io/ | +| AntV | https://antv.antgroup.com | +| Ant Motion | https://ant-motion.gitee.io | ## `antd` 可以像 `React` 那样使用单文件引入吗？ From 7179dc8d4c518e7d73ededc2c201c9188b9a2642 Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 17 Aug 2023 19:12:34 +0800 Subject: [PATCH 21/88] docs: update footer links (#44272) --- .dumi/theme/slots/Footer/index.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/.dumi/theme/slots/Footer/index.tsx b/.dumi/theme/slots/Footer/index.tsx index f65a6a3e23b2..6b34e18ed5aa 100644 --- a/.dumi/theme/slots/Footer/index.tsx +++ b/.dumi/theme/slots/Footer/index.tsx @@ -102,7 +102,7 @@ const Footer: React.FC = () => { items: [ { title: 'Ant Design Charts', - url: 'https://charts.ant.design', + url: isZhCN ? 'https://ant-design-charts.antgroup.com' : 'https://charts.ant.design', openExternal: true, }, { @@ -117,12 +117,12 @@ const Footer: React.FC = () => { }, { title: 'Ant Design Mobile', - url: 'https://mobile.ant.design', + url: isZhCN ? 'https://ant-design-mobile.antgroup.com/zh' : 'https://mobile.ant.design', openExternal: true, }, { title: 'Ant Design Mini', - url: 'https://mini.ant.design', + url: isZhCN ? 'https://ant-design-mini.antgroup.com/' : 'https://mini.ant.design', openExternal: true, }, { @@ -338,7 +338,7 @@ const Footer: React.FC = () => { /> ), title: 'AntV', - url: 'https://antv.vision', + url: 'https://antv.antgroup.com', description: , openExternal: true, }, From 73cfd37b770293b251cce5c705fe433f62b61580 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=BA=A2=E6=9E=9C=E6=B1=81?= Date: Thu, 17 Aug 2023 21:12:10 +0800 Subject: [PATCH 22/88] fix: `Descriptions` key prop issue (#44278) * fix: descriptions throw react key prop error in jsx mode * chore: update test --------- Co-authored-by: MadCcc <1075746765@qq.com> --- components/descriptions/__tests__/index.test.tsx | 16 ++++++++++++++++ components/descriptions/hooks/useRow.ts | 2 +- 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/components/descriptions/__tests__/index.test.tsx b/components/descriptions/__tests__/index.test.tsx index 5b652e350493..54669dbe6523 100644 --- a/components/descriptions/__tests__/index.test.tsx +++ b/components/descriptions/__tests__/index.test.tsx @@ -320,4 +320,20 @@ describe('Descriptions', () => { const view = nestDesc.querySelector('.ant-descriptions-view'); expect(getComputedStyle(view!).border).toBeFalsy(); }); + + it('Should Descriptions not throw react key prop error in jsx mode', () => { + render( + + + Zhou Maomao + + 1810000000 + , + ); + expect(errorSpy).not.toHaveBeenCalledWith( + expect.stringContaining('`key` is not a prop'), + expect.anything(), + expect.anything(), + ); + }); }); diff --git a/components/descriptions/hooks/useRow.ts b/components/descriptions/hooks/useRow.ts index 40e4b05039b7..0b44fe06314e 100644 --- a/components/descriptions/hooks/useRow.ts +++ b/components/descriptions/hooks/useRow.ts @@ -27,7 +27,7 @@ function getFilledItem( // Convert children into items const transChildren2Items = (childNodes?: React.ReactNode) => - toArray(childNodes).map((node) => node?.props); + toArray(childNodes).map((node) => ({ ...node?.props })); // Calculate the sum of span in a row function getCalcRows(rowItems: DescriptionsItemType[], mergedColumn: number) { From affd62f78c907af170629afa931d9ceb9932154b Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Thu, 17 Aug 2023 23:18:15 +0800 Subject: [PATCH 23/88] chore(deps-dev): bump @testing-library/jest-dom from 5.17.0 to 6.0.0 (#44277) Bumps [@testing-library/jest-dom](https://github.com/testing-library/jest-dom) from 5.17.0 to 6.0.0. - [Release notes](https://github.com/testing-library/jest-dom/releases) - [Changelog](https://github.com/testing-library/jest-dom/blob/main/CHANGELOG.md) - [Commits](https://github.com/testing-library/jest-dom/compare/v5.17.0...v6.0.0) --- updated-dependencies: - dependency-name: "@testing-library/jest-dom" dependency-type: direct:development update-type: version-update:semver-major ... 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 2617fa74c459..37571a6196b9 100644 --- a/package.json +++ b/package.json @@ -178,7 +178,7 @@ "@swc/core": "^1.3.50", "@swc/helpers": "^0.5.0", "@testing-library/dom": "^9.0.0", - "@testing-library/jest-dom": "^5.16.3", + "@testing-library/jest-dom": "^6.0.0", "@testing-library/react": "^14.0.0", "@testing-library/user-event": "^14.4.2", "@types/fs-extra": "^11.0.1", From ce687c50b1c13e77553ec21164abad28d8680235 Mon Sep 17 00:00:00 2001 From: kouchao <1396726559@qq.com> Date: Fri, 18 Aug 2023 10:04:01 +0800 Subject: [PATCH 24/88] fix(ColorPicker): color clear deformation (#44258) (#44273) * fix(ColorPicker): color clear deformation (#44258) * chore: merge styles --- components/color-picker/style/index.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/color-picker/style/index.ts b/components/color-picker/style/index.ts index b7c035b83550..3294bf25f78a 100644 --- a/components/color-picker/style/index.ts +++ b/components/color-picker/style/index.ts @@ -134,7 +134,7 @@ const genSizeStyle = (token: ColorPickerToken): CSSObject => { minWidth: controlHeightLG, height: controlHeightLG, borderRadius: borderRadiusLG, - [`${componentCls}-color-block`]: { + [`${componentCls}-color-block, ${componentCls}-clear`]: { width: controlHeight, height: controlHeight, borderRadius, @@ -147,7 +147,7 @@ const genSizeStyle = (token: ColorPickerToken): CSSObject => { minWidth: controlHeightSM, height: controlHeightSM, borderRadius: borderRadiusSM, - [`${componentCls}-color-block`]: { + [`${componentCls}-color-block, ${componentCls}-clear`]: { width: controlHeightXS, height: controlHeightXS, borderRadius: borderRadiusXS, From 3b913cf17ba6517dc4e6d5f8eeb1b97f951796ae Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Fri, 18 Aug 2023 10:41:45 +0800 Subject: [PATCH 25/88] site: add internationalization for docs (#44263) * site: add internationalization for docs * fix * Update .dumi/theme/common/Color/ColorPaletteTool.tsx Co-authored-by: MadCcc <1075746765@qq.com> Signed-off-by: lijianan <574980606@qq.com> * fix: fix * fix: fix * fix: fix * fix: fix --------- Signed-off-by: lijianan <574980606@qq.com> Co-authored-by: MadCcc <1075746765@qq.com> --- .dumi/theme/common/Color/ColorPaletteTool.tsx | 28 +++- .../common/Color/ColorPaletteToolDark.tsx | 26 +++- .dumi/theme/common/Color/ColorPatterns.tsx | 12 +- components/calendar/demo/lunar.tsx | 120 +++++++++--------- package.json | 2 +- 5 files changed, 114 insertions(+), 74 deletions(-) diff --git a/.dumi/theme/common/Color/ColorPaletteTool.tsx b/.dumi/theme/common/Color/ColorPaletteTool.tsx index 5f9b4319eb68..2c2de6d3f9ef 100644 --- a/.dumi/theme/common/Color/ColorPaletteTool.tsx +++ b/.dumi/theme/common/Color/ColorPaletteTool.tsx @@ -3,26 +3,44 @@ import React, { useMemo, useState } from 'react'; import { ColorPicker } from 'antd'; import type { Color } from 'antd/es/color-picker'; import ColorPatterns from './ColorPatterns'; +import useLocale from '../../../hooks/useLocale'; const primaryMinSaturation = 70; // 主色推荐最小饱和度 const primaryMinBrightness = 70; // 主色推荐最小亮度 +const locales = { + cn: { + saturation: (s: string) => `饱和度建议不低于${primaryMinSaturation}（现在${s}）`, + brightness: (b: string) => `亮度建议不低于${primaryMinBrightness}（现在${b}）`, + }, + en: { + saturation: (s: string) => + `Saturation is recommended not to be lower than ${primaryMinSaturation}（currently${s}）`, + brightness: (b: string) => + `Brightness is recommended not to be lower than ${primaryMinBrightness}（currently${b}）`, + }, +}; + const ColorPaletteTool: React.FC = () => { const [primaryColor, setPrimaryColor] = useState('#1890ff'); const [primaryColorInstance, setPrimaryColorInstance] = useState(null); + + const [locale] = useLocale(locales); + const handleChangeColor = (color: Color, hex: string) => { setPrimaryColor(hex); setPrimaryColorInstance(color); }; + const colorValidation = useMemo(() => { let text = ''; if (primaryColorInstance) { - const { s, b } = primaryColorInstance.toHsb(); + const { s, b } = primaryColorInstance.toHsb() || {}; if (s * 100 < primaryMinSaturation) { - text += ` 饱和度建议不低于${primaryMinSaturation}（现在 ${(s * 100).toFixed(2)}）`; + text += locale.saturation((s * 100).toFixed(2)); } if (b * 100 < primaryMinBrightness) { - text += ` 亮度建议不低于${primaryMinBrightness}（现在 ${(b * 100).toFixed(2)}）`; + text += locale.brightness((s * 100).toFixed(2)); } } return {text.trim()}; @@ -32,7 +50,9 @@ const ColorPaletteTool: React.FC = () => {
-
{ColorPatterns({ color: primaryColor })}
+
+ +
diff --git a/.dumi/theme/common/Color/ColorPaletteToolDark.tsx b/.dumi/theme/common/Color/ColorPaletteToolDark.tsx index 2c81fa008a5c..59400cfae121 100644 --- a/.dumi/theme/common/Color/ColorPaletteToolDark.tsx +++ b/.dumi/theme/common/Color/ColorPaletteToolDark.tsx @@ -2,14 +2,30 @@ import { FormattedMessage } from 'dumi'; import React, { useMemo, useState } from 'react'; import { Col, ColorPicker, Row } from 'antd'; import ColorPatterns from './ColorPatterns'; +import useLocale from '../../../hooks/useLocale'; const primaryMinSaturation = 70; // 主色推荐最小饱和度 const primaryMinBrightness = 70; // 主色推荐最小亮度 +const locales = { + cn: { + saturation: (s: string) => `饱和度建议不低于${primaryMinSaturation}（现在${s}）`, + brightness: (b: string) => `亮度建议不低于${primaryMinBrightness}（现在${b}）`, + }, + en: { + saturation: (s: string) => + `Saturation is recommended not to be lower than ${primaryMinSaturation}（currently${s}）`, + brightness: (b: string) => + `Brightness is recommended not to be lower than ${primaryMinBrightness}（currently${b}）`, + }, +}; + const ColorPaletteTool: React.FC = () => { const [primaryColor, setPrimaryColor] = useState('#1890ff'); const [backgroundColor, setBackgroundColor] = useState('#141414'); - const [primaryColorInstance, setPrimaryColorInstance] = useState(null); + const [primaryColorInstance, setPrimaryColorInstance] = useState(null); + + const [locale] = useLocale(locales); const handleChangeColor = (color: Color, hex: string) => { setPrimaryColor(hex); @@ -23,12 +39,12 @@ const ColorPaletteTool: React.FC = () => { const colorValidation = useMemo(() => { let text = ''; if (primaryColorInstance) { - const { s, b } = primaryColorInstance.toHsb(); + const { s, b } = primaryColorInstance.toHsb() || {}; if (s * 100 < primaryMinSaturation) { - text += ` 饱和度建议不低于${primaryMinSaturation}（现在 ${(s * 100).toFixed(2)}）`; + text += locale.saturation((s * 100).toFixed(2)); } if (b * 100 < primaryMinBrightness) { - text += ` 亮度建议不低于${primaryMinBrightness}（现在 ${(b * 100).toFixed(2)}）`; + text += locale.brightness((s * 100).toFixed(2)); } } return ( @@ -41,7 +57,7 @@ const ColorPaletteTool: React.FC = () => { return (
- {ColorPatterns({ color: primaryColor, dark: true, backgroundColor })} +
diff --git a/.dumi/theme/common/Color/ColorPatterns.tsx b/.dumi/theme/common/Color/ColorPatterns.tsx index d40d88a0c997..080b5651cea9 100644 --- a/.dumi/theme/common/Color/ColorPatterns.tsx +++ b/.dumi/theme/common/Color/ColorPatterns.tsx @@ -9,11 +9,15 @@ interface ColorPatternsProps { backgroundColor?: string; } -const ColorPatterns = ({ color, dark, backgroundColor }: ColorPatternsProps) => { +const ColorPatterns: React.FC = ({ color, dark, backgroundColor }) => { const colors = generate(color, dark ? { theme: 'dark', backgroundColor } : {}); - return uniq(colors).map((colorString, i) => ( - - )); + return ( + <> + {uniq(colors).map((colorString, i) => ( + + ))} + + ); }; export default ColorPatterns; diff --git a/components/calendar/demo/lunar.tsx b/components/calendar/demo/lunar.tsx index b5476d5f8968..f23d5bdb0d54 100644 --- a/components/calendar/demo/lunar.tsx +++ b/components/calendar/demo/lunar.tsx @@ -16,74 +16,74 @@ const useStyle = createStyles(({ token, css, cx }) => { `; return { wrapper: css` - width: 400px; - border: 1px solid ${token.colorBorderSecondary}; - border-radius: ${token.borderRadiusOuter}; - padding: 5px; - `, + width: 400px; + border: 1px solid ${token.colorBorderSecondary}; + border-radius: ${token.borderRadiusOuter}; + padding: 5px; + `, dateCell: css` - position: relative; - &:before { - content: ''; - position: absolute; - left: 0; - right: 0; - top: 0; - bottom: 0; - margin: auto; - max-width: 40px; - max-height: 40px; - background: transparent; - transition: background 300ms; - border-radius: ${token.borderRadiusOuter}px; - border: 1px solid transparent; - box-sizing: border-box; - } - &:hover:before { - background: rgba(0, 0, 0, 0.04); - } - `, + position: relative; + &:before { + content: ''; + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + margin: auto; + max-width: 40px; + max-height: 40px; + background: transparent; + transition: background 300ms; + border-radius: ${token.borderRadiusOuter}px; + border: 1px solid transparent; + box-sizing: border-box; + } + &:hover:before { + background: rgba(0, 0, 0, 0.04); + } + `, today: css` - &:before { - border: 1px solid ${token.colorPrimary}; - } + &:before { + border: 1px solid ${token.colorPrimary}; + } `, text: css` - position: relative; - z-index: 1; - `, + position: relative; + z-index: 1; + `, lunar, current: css` - color: ${token.colorTextLightSolid}; - &:before { - background: ${token.colorPrimary}; - } - &:hover:before { - background: ${token.colorPrimary}; - opacity: .8; - } - .${cx(lunar)} { - color: ${token.colorTextLightSolid}; - opacity: .9; - } - `, + color: ${token.colorTextLightSolid}; + &:before { + background: ${token.colorPrimary}; + } + &:hover:before { + background: ${token.colorPrimary}; + opacity: 0.8; + } + .${cx(lunar)} { + color: ${token.colorTextLightSolid}; + opacity: 0.9; + } + `, monthCell: css` - width: 120px; - color: ${token.colorTextBase}; - border-radius: ${token.borderRadiusOuter}px; - padding: 5px 0; - &:hover { - background: rgba(0, 0, 0, 0.04); - } - `, + width: 120px; + color: ${token.colorTextBase}; + border-radius: ${token.borderRadiusOuter}px; + padding: 5px 0; + &:hover { + background: rgba(0, 0, 0, 0.04); + } + `, monthCellCurrent: css` - color: ${token.colorTextLightSolid}; - background: ${token.colorPrimary}; - &:hover { - background: ${token.colorPrimary}; - opacity: .8; - } - `, + color: ${token.colorTextLightSolid}; + background: ${token.colorPrimary}; + &:hover { + background: ${token.colorPrimary}; + opacity: 0.8; + } + `, }; }); diff --git a/package.json b/package.json index 37571a6196b9..29527721dc5d 100644 --- a/package.json +++ b/package.json @@ -159,7 +159,7 @@ "throttle-debounce": "^5.0.0" }, "devDependencies": { - "@ant-design/compatible": "^5.1.1", + "@ant-design/compatible": "^5.1.2", "@ant-design/happy-work-theme": "^1.0.0", "@ant-design/tools": "^17.0.0", "@antv/g6": "^4.8.13", From 7226c53c1560f17d4af166f832cc21ba023dc4d8 Mon Sep 17 00:00:00 2001 From: Artyom Vancyan <44609997+ArtyomVancyan@users.noreply.github.com> Date: Fri, 18 Aug 2023 11:18:51 +0400 Subject: [PATCH 26/88] docs: add third-party library to the development section (#44283) * Add `antd-phone-input` as a third-party library Signed-off-by: Artyom Vancyan <44609997+ArtyomVancyan@users.noreply.github.com> * Update recommendation.zh-CN.md regarding to the en-US docs Signed-off-by: Artyom Vancyan <44609997+ArtyomVancyan@users.noreply.github.com> * Update docs/react/recommendation.en-US.md Co-authored-by: afc163 Signed-off-by: Artyom Vancyan <44609997+ArtyomVancyan@users.noreply.github.com> * Update docs/react/recommendation.zh-CN.md Co-authored-by: afc163 Signed-off-by: Artyom Vancyan <44609997+ArtyomVancyan@users.noreply.github.com> --------- Signed-off-by: Artyom Vancyan <44609997+ArtyomVancyan@users.noreply.github.com> Co-authored-by: afc163 --- docs/react/recommendation.en-US.md | 1 + docs/react/recommendation.zh-CN.md | 1 + 2 files changed, 2 insertions(+) diff --git a/docs/react/recommendation.en-US.md b/docs/react/recommendation.en-US.md index df36112bee2e..de423fe0c4cb 100644 --- a/docs/react/recommendation.en-US.md +++ b/docs/react/recommendation.en-US.md @@ -43,6 +43,7 @@ title: Third-Party Libraries | Number/Currency | [react-countup](https://www.npmjs.com/package/react-countup) [react-number-format](https://github.com/s-yadav/react-number-format) [react-currency-input-field](https://github.com/cchanxzy/react-currency-input-field) | | Application Frameworks | [umi](https://github.com/umijs/umi/) [remix](https://github.com/remix-run/remix) [refine](https://github.com/pankod/refine) | | Flow-based UI | [react-flow](https://github.com/wbkd/react-flow) [x6](https://github.com/antvis/x6) | +| Phone Input | [react-phone-number-input](https://gitlab.com/catamphetamine/react-phone-number-input) [antd-phone-input](https://github.com/ArtyomVancyan/antd-phone-input/) | ## Products we are using ✨ diff --git a/docs/react/recommendation.zh-CN.md b/docs/react/recommendation.zh-CN.md index 792439417357..9d37c6568670 100644 --- a/docs/react/recommendation.zh-CN.md +++ b/docs/react/recommendation.zh-CN.md @@ -45,6 +45,7 @@ title: 社区精选组件 | 移动端探测 | [react-device-detect](https://github.com/duskload/react-device-detect) | | 应用程序框架 | [umi](https://github.com/umijs/umi/) [remix](https://github.com/remix-run/remix) [refine](https://github.com/pankod/refine) | | Flow 流 | [react-flow](https://github.com/wbkd/react-flow) [x6](https://github.com/antvis/x6) | +| 电话输入 | [react-phone-number-input](https://gitlab.com/catamphetamine/react-phone-number-input) [antd-phone-input](https://github.com/ArtyomVancyan/antd-phone-input/) | ## 推荐产品 ✨ From 8177c5235d5a09f0078bd202a248b107fa2f7658 Mon Sep 17 00:00:00 2001 From: xrkffgg Date: Fri, 18 Aug 2023 16:59:12 +0800 Subject: [PATCH 27/88] docs: add changelog 5.8.4 (#44293) * docs: add changelog 5.8.4 * fix: lint * fix: typo --- CHANGELOG.en-US.md | 17 +++++++++++++++++ CHANGELOG.zh-CN.md | 17 +++++++++++++++++ package.json | 2 +- 3 files changed, 35 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index dc13f5c553a7..12e8f7c4c226 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -16,6 +16,23 @@ tag: vVERSION --- +## 5.8.4 + +`2023-08-18` + +- ColorPicker + - 🐞 Fix the cursor jumps when entering lowercase English letters in the ColorPicker color value input box. [#44137](https://github.com/ant-design/ant-design/pull/44137) [@gouge666](https://github.com/gouge666) + - 🐞 Fix the ColorPicker style is deformed under different sizes. [#44273](https://github.com/ant-design/ant-design/pull/44273) [@kouchao](https://github.com/kouchao) +- 🐞 Fix Descriptions throwing `key is not a prop` error message. [#44278](https://github.com/ant-design/ant-design/pull/44278) [@RedJue](https://github.com/RedJue) +- 🐞 Fix the node is still rendered when Pagination `itemRender` is customized to `null`. [#44226](https://github.com/ant-design/ant-design/pull/44226) +- 🐞 Fix Modal in Dropdown `menu.items`, rapid mouse movement when expanding Modal will make Dropdown reopen. [#44204](https://github.com/ant-design/ant-design/pull/44204) +- DatePicker + - 💄 Fix DatePicker content is not centered. [#44245](https://github.com/ant-design/ant-design/pull/44245) [@Zian502](https://github.com/Zian502) + - 💄 Optimize DatePicker selection range style. [#44206](https://github.com/ant-design/ant-design/pull/44206) [@kiner-tang](https://github.com/kiner-tang) +- 💄 Fix clicking on the Tabs area on the mobile terminal triggers a color change. [#44200](https://github.com/ant-design/ant-design/pull/44200) [@yilaikesi](https://github.com/yilaikesi) +- RTL + - 💄 Fix the numbers in the Badge are also RTL when the text direction of the page is RTL. [#43998](https://github.com/ant-design/ant-design/pull/43998) [@NotEvenANeko](https://github.com/NotEvenANeko) + ## 5.8.3 `2023-08-11` diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index 6ba8ef008e4d..9eab1234e88a 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -16,6 +16,23 @@ tag: vVERSION --- +## 5.8.4 + +`2023-08-18` + +- ColorPicker + - 🐞 修复 ColorPicker 色值输入框输入小写英文字母时光标跳动的问题。[#44137](https://github.com/ant-design/ant-design/pull/44137) [@gouge666](https://github.com/gouge666) + - 🐞 修复 ColorPicker 在不同尺寸下样式变形的问题。[#44273](https://github.com/ant-design/ant-design/pull/44273) [@kouchao](https://github.com/kouchao) +- 🐞 修复 Descriptions 抛出 `key is not a prop` 的错误提示。[#44278](https://github.com/ant-design/ant-design/pull/44278) [@RedJue](https://github.com/RedJue) +- 🐞 修复 Pagination `itemRender` 自定义为 `null` 时，仍然渲染节点的问题。[#44226](https://github.com/ant-design/ant-design/pull/44226) +- 🐞 修复 Modal 在 Dropdown `menu.items` 中，展开 Modal 时快速移动鼠标会使 Dropdown 重新打开的问题。[#44204](https://github.com/ant-design/ant-design/pull/44204) +- DatePicker + - 💄 修复 DatePicker 内容不居中问题。[#44245](https://github.com/ant-design/ant-design/pull/44245) [@Zian502](https://github.com/Zian502) + - 💄 优化 DatePicker 中范围选择区域样式。[#44206](https://github.com/ant-design/ant-design/pull/44206) [@kiner-tang](https://github.com/kiner-tang) +- 💄 修复移动端点击 Tabs 区域触发颜色改变的问题。[#44200](https://github.com/ant-design/ant-design/pull/44200) [@yilaikesi](https://github.com/yilaikesi) +- RTL + - 💄 修复了当页面的文字方向为 RTL 时 Badge 里面的数字也是 RTL 的问题。[#43998](https://github.com/ant-design/ant-design/pull/43998) [@NotEvenANeko](https://github.com/NotEvenANeko) + ## 5.8.3 `2023-08-11` diff --git a/package.json b/package.json index 29527721dc5d..c1121909aac7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "antd", - "version": "5.8.3", + "version": "5.8.4", "packageManager": "^npm@9.0.0", "description": "An enterprise-class UI design language and React components implementation", "title": "Ant Design", From 80bd54f5154c98f45a2d9020a627e1e4813418e8 Mon Sep 17 00:00:00 2001 From: iola1999 Date: Fri, 18 Aug 2023 18:29:44 +0800 Subject: [PATCH 28/88] chore: redirect with rest url (#44298) --- .dumi/theme/slots/Header/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.dumi/theme/slots/Header/index.tsx b/.dumi/theme/slots/Header/index.tsx index 386c2914565e..163a8dec1a69 100644 --- a/.dumi/theme/slots/Header/index.tsx +++ b/.dumi/theme/slots/Header/index.tsx @@ -182,7 +182,7 @@ const Header: React.FC = () => { closable: true, zIndex: 99999, onOk() { - window.open('https://ant-design.antgroup.com', '_self'); + window.location.host = 'ant-design.antgroup.com'; disableAntdMirrorModal(); }, onCancel() { From 8afbe6939ea5c9e41e02de878ec4a1b29643dfce Mon Sep 17 00:00:00 2001 From: thinkasany <117748716+thinkasany@users.noreply.github.com> Date: Sun, 20 Aug 2023 20:32:09 +0800 Subject: [PATCH 29/88] docs(demo): Replace backticks with single quotes (#44302) --- components/tabs/demo/animated.tsx | 12 ++++++------ components/tabs/demo/basic.tsx | 12 ++++++------ components/tabs/demo/custom-tab-bar-node.tsx | 6 +++--- 3 files changed, 15 insertions(+), 15 deletions(-) diff --git a/components/tabs/demo/animated.tsx b/components/tabs/demo/animated.tsx index 4fd231f33d57..fc1fd3cff35e 100644 --- a/components/tabs/demo/animated.tsx +++ b/components/tabs/demo/animated.tsx @@ -26,27 +26,27 @@ const App: React.FC = () => { animated={{ inkBar, tabPane }} items={[ { - label: `Bamboo`, + label: 'Bamboo', key: '1', - children: `Hello Bamboo!`, + children: 'Hello Bamboo!', style: { height: 200, boxShadow: '0 0 3px rgba(255, 0, 0, 0.5)', }, }, { - label: `Little`, + label: 'Little', key: '2', - children: `Hi Little!`, + children: 'Hi Little!', style: { height: 300, boxShadow: '0 0 3px rgba(0, 255, 0, 0.5)', }, }, { - label: `Light`, + label: 'Light', key: '3', - children: `Welcome Light!`, + children: 'Welcome Light!', style: { height: 100, boxShadow: '0 0 3px rgba(0, 0, 255, 0.5)', diff --git a/components/tabs/demo/basic.tsx b/components/tabs/demo/basic.tsx index 2b954ec312a6..085ea73bb3f1 100644 --- a/components/tabs/demo/basic.tsx +++ b/components/tabs/demo/basic.tsx @@ -9,18 +9,18 @@ const onChange = (key: string) => { const items: TabsProps['items'] = [ { key: '1', - label: `Tab 1`, - children: `Content of Tab Pane 1`, + label: 'Tab 1', + children: 'Content of Tab Pane 1', }, { key: '2', - label: `Tab 2`, - children: `Content of Tab Pane 2`, + label: 'Tab 2', + children: 'Content of Tab Pane 2', }, { key: '3', - label: `Tab 3`, - children: `Content of Tab Pane 3`, + label: 'Tab 3', + children: 'Content of Tab Pane 3', }, ]; diff --git a/components/tabs/demo/custom-tab-bar-node.tsx b/components/tabs/demo/custom-tab-bar-node.tsx index ed429f99bd81..b28bacd05e34 100644 --- a/components/tabs/demo/custom-tab-bar-node.tsx +++ b/components/tabs/demo/custom-tab-bar-node.tsx @@ -38,17 +38,17 @@ const App: React.FC = () => { const [items, setItems] = useState([ { key: '1', - label: `Tab 1`, + label: 'Tab 1', children: 'Content of Tab Pane 1', }, { key: '2', - label: `Tab 2`, + label: 'Tab 2', children: 'Content of Tab Pane 2', }, { key: '3', - label: `Tab 3`, + label: 'Tab 3', children: 'Content of Tab Pane 3', }, ]); From 65fd05c344d7fa3fe79900f2d2d5e1421b0658e6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8F=B6=E6=9E=AB?= <7971419+crazyair@users.noreply.github.com> Date: Mon, 21 Aug 2023 10:03:15 +0800 Subject: [PATCH 30/88] style: add prettier-plugin-sort-imports (#44287) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * style: sort * style: sort * style: sort * style: sort * style: 规则调整 * style: 规则调整 --- .eslintrc.js | 1 + .prettierrc | 4 ++++ components/affix/index.tsx | 4 +++- components/collapse/__tests__/index.test.tsx | 2 ++ components/color-picker/ColorPicker.tsx | 6 ++++-- components/tabs/demo/custom-tab-bar.tsx | 3 ++- package.json | 1 + 7 files changed, 17 insertions(+), 4 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index a341d58bb440..1178d08ee021 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -205,6 +205,7 @@ module.exports = { '@typescript-eslint/no-shadow': [2, { ignoreTypeValueShadow: true }], // https://github.com/typescript-eslint/typescript-eslint/issues/2528#issuecomment-689369395 'no-undef': 0, + 'import/order': 0, }, globals: { gtag: true, diff --git a/.prettierrc b/.prettierrc index 9d5b9bf640c1..d1c91d8d042d 100644 --- a/.prettierrc +++ b/.prettierrc @@ -4,6 +4,10 @@ "trailingComma": "all", "printWidth": 100, "proseWrap": "never", + "importOrder": ["^(react|react-dom)$", "^([a-z]|@[a-z])", ".*"], + "importOrderSeparation": true, + "importOrderSortSpecifiers": true, + "plugins": ["@trivago/prettier-plugin-sort-imports"], "overrides": [ { "files": ".prettierrc", diff --git a/components/affix/index.tsx b/components/affix/index.tsx index 3f4fb4b17651..af3c9e3f54c0 100644 --- a/components/affix/index.tsx +++ b/components/affix/index.tsx @@ -1,9 +1,11 @@ 'use client'; +import React, { createRef, forwardRef, useContext } from 'react'; + import classNames from 'classnames'; import ResizeObserver from 'rc-resize-observer'; import omit from 'rc-util/lib/omit'; -import React, { createRef, forwardRef, useContext } from 'react'; + import throttleByAnimationFrame from '../_util/throttleByAnimationFrame'; import type { ConfigConsumerProps } from '../config-provider'; import { ConfigContext } from '../config-provider'; diff --git a/components/collapse/__tests__/index.test.tsx b/components/collapse/__tests__/index.test.tsx index 143b487049de..a7e23f68e618 100644 --- a/components/collapse/__tests__/index.test.tsx +++ b/components/collapse/__tests__/index.test.tsx @@ -1,5 +1,7 @@ import React from 'react'; + import { act } from 'react-dom/test-utils'; + import { fireEvent, render, waitFakeTimer } from '../../../tests/utils'; import { resetWarned } from '../../_util/warning'; diff --git a/components/color-picker/ColorPicker.tsx b/components/color-picker/ColorPicker.tsx index d71fe4c64859..abdc869311fd 100644 --- a/components/color-picker/ColorPicker.tsx +++ b/components/color-picker/ColorPicker.tsx @@ -1,11 +1,13 @@ +import type { CSSProperties, FC } from 'react'; +import React, { useContext, useMemo, useRef, useState } from 'react'; + import type { HsbaColorType, ColorPickerProps as RcColorPickerProps, } from '@rc-component/color-picker'; import classNames from 'classnames'; import useMergedState from 'rc-util/lib/hooks/useMergedState'; -import type { CSSProperties, FC } from 'react'; -import React, { useContext, useMemo, useRef, useState } from 'react'; + import genPurePanel from '../_util/PurePanel'; import { getStatusClassNames } from '../_util/statusUtils'; import warning from '../_util/warning'; diff --git a/components/tabs/demo/custom-tab-bar.tsx b/components/tabs/demo/custom-tab-bar.tsx index 5a5fc4898441..1e538404a7ef 100644 --- a/components/tabs/demo/custom-tab-bar.tsx +++ b/components/tabs/demo/custom-tab-bar.tsx @@ -1,7 +1,8 @@ import React from 'react'; -import StickyBox from 'react-sticky-box'; + import type { TabsProps } from 'antd'; import { Tabs, theme } from 'antd'; +import StickyBox from 'react-sticky-box'; const items = new Array(3).fill(null).map((_, i) => { const id = String(i + 1); diff --git a/package.json b/package.json index c1121909aac7..77b4966344b1 100644 --- a/package.json +++ b/package.json @@ -181,6 +181,7 @@ "@testing-library/jest-dom": "^6.0.0", "@testing-library/react": "^14.0.0", "@testing-library/user-event": "^14.4.2", + "@trivago/prettier-plugin-sort-imports": "^4.2.0", "@types/fs-extra": "^11.0.1", "@types/gtag.js": "^0.0.13", "@types/http-server": "^0.12.1", From 3b5e3e84bc495e0588bac12ee57d0f96da949716 Mon Sep 17 00:00:00 2001 From: thinkasany <117748716+thinkasany@users.noreply.github.com> Date: Mon, 21 Aug 2023 10:03:48 +0800 Subject: [PATCH 31/88] docs(tabs): remove useless string in Description (#44307) --- components/tabs/index.en-US.md | 2 +- components/tabs/index.zh-CN.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/components/tabs/index.en-US.md b/components/tabs/index.en-US.md index 7ae5cc22cb04..de4ef153840a 100644 --- a/components/tabs/index.en-US.md +++ b/components/tabs/index.en-US.md @@ -48,7 +48,7 @@ Common props ref：[Common props](/docs/react/common-props) | --- | --- | --- | --- | --- | | activeKey | Current TabPane's key | string | - | | | addIcon | Customize add icon | ReactNode | - | 4.4.0 | -| animated | Whether to change tabs with animation.` | boolean \| { inkBar: boolean, tabPane: boolean } | { inkBar: true, tabPane: false } | | +| animated | Whether to change tabs with animation. | boolean \| { inkBar: boolean, tabPane: boolean } | { inkBar: true, tabPane: false } | | | centered | Centers tabs | boolean | false | 4.4.0 | | defaultActiveKey | Initial active TabPane's key, if `activeKey` is not set | string | - | | | hideAdd | Hide plus icon or not. Only works while `type="editable-card"` | boolean | false | | diff --git a/components/tabs/index.zh-CN.md b/components/tabs/index.zh-CN.md index bbef94ed431f..e6f60916bb1a 100644 --- a/components/tabs/index.zh-CN.md +++ b/components/tabs/index.zh-CN.md @@ -50,7 +50,7 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。 | --- | --- | --- | --- | --- | | activeKey | 当前激活 tab 面板的 key | string | - | | | addIcon | 自定义添加按钮 | ReactNode | - | 4.4.0 | -| animated | 是否使用动画切换 Tabs` | boolean\| { inkBar: boolean, tabPane: boolean } | { inkBar: true, tabPane: false } | | +| animated | 是否使用动画切换 Tabs | boolean\| { inkBar: boolean, tabPane: boolean } | { inkBar: true, tabPane: false } | | | centered | 标签居中展示 | boolean | false | 4.4.0 | | defaultActiveKey | 初始化选中面板的 key，如果没有设置 activeKey | string | `第一个面板` | | | hideAdd | 是否隐藏加号图标，在 `type="editable-card"` 时有效 | boolean | false | | From b50928fb88946783258960f0f8f1d59a4028541e Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Mon, 21 Aug 2023 14:38:22 +0800 Subject: [PATCH 32/88] chore: split previewer (#44310) --- .dumi/theme/builtins/Previewer/Previewer.tsx | 21 ++++++++++++++++ .dumi/theme/builtins/Previewer/index.tsx | 25 ++++++-------------- 2 files changed, 28 insertions(+), 18 deletions(-) create mode 100644 .dumi/theme/builtins/Previewer/Previewer.tsx diff --git a/.dumi/theme/builtins/Previewer/Previewer.tsx b/.dumi/theme/builtins/Previewer/Previewer.tsx new file mode 100644 index 000000000000..a37144956fd6 --- /dev/null +++ b/.dumi/theme/builtins/Previewer/Previewer.tsx @@ -0,0 +1,21 @@ +import type { IPreviewerProps } from 'dumi'; +import { useTabMeta } from 'dumi'; +import React from 'react'; +import CodePreviewer from './CodePreviewer'; +import DesignPreviewer from './DesignPreviewer'; + +export interface AntdPreviewerProps extends IPreviewerProps { + originDebug?: IPreviewerProps['debug']; +} + +const Previewer: React.FC = (props) => { + const tab = useTabMeta(); + + if (tab?.frontmatter.title === 'Design') { + return ; + } + + return ; +}; + +export default Previewer; diff --git a/.dumi/theme/builtins/Previewer/index.tsx b/.dumi/theme/builtins/Previewer/index.tsx index a37144956fd6..ff79fd82a952 100644 --- a/.dumi/theme/builtins/Previewer/index.tsx +++ b/.dumi/theme/builtins/Previewer/index.tsx @@ -1,21 +1,10 @@ +import React, { Suspense } from 'react'; import type { IPreviewerProps } from 'dumi'; -import { useTabMeta } from 'dumi'; -import React from 'react'; -import CodePreviewer from './CodePreviewer'; -import DesignPreviewer from './DesignPreviewer'; -export interface AntdPreviewerProps extends IPreviewerProps { - originDebug?: IPreviewerProps['debug']; -} +const Previewer = React.lazy(() => import('./Previewer')); -const Previewer: React.FC = (props) => { - const tab = useTabMeta(); - - if (tab?.frontmatter.title === 'Design') { - return ; - } - - return ; -}; - -export default Previewer; +export default (props: IPreviewerProps) => ( + + + +); From e02e53b817fac7e99ac0c9af6a7ddc7aca2e3e20 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 21 Aug 2023 19:48:50 +0800 Subject: [PATCH 33/88] docs: link preload => prefetch (#44320) --- .dumirc.ts | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/.dumirc.ts b/.dumirc.ts index f9aed1f0e5ec..a83b20d755c2 100644 --- a/.dumirc.ts +++ b/.dumirc.ts @@ -44,56 +44,56 @@ export default defineConfig({ }, links: [ { - rel: 'preload', + rel: 'prefetch', as: 'font', href: '//at.alicdn.com/t/webfont_6e11e43nfj.woff2', type: 'font/woff2', crossorigin: true, }, { - rel: 'preload', + rel: 'prefetch', as: 'font', href: '//at.alicdn.com/t/webfont_6e11e43nfj.woff', type: 'font/woff', crossorigin: true, }, { - rel: 'preload', + rel: 'prefetch', as: 'font', href: '//at.alicdn.com/t/webfont_6e11e43nfj.ttf', type: 'font/ttf', crossorigin: true, }, { - rel: 'preload', + rel: 'prefetch', as: 'font', href: '//at.alicdn.com/t/webfont_exesdog9toj.woff2', type: 'font/woff2', crossorigin: true, }, { - rel: 'preload', + rel: 'prefetch', as: 'font', href: '//at.alicdn.com/t/webfont_exesdog9toj.woff', type: 'font/woff', crossorigin: true, }, { - rel: 'preload', + rel: 'prefetch', as: 'font', href: '//at.alicdn.com/t/webfont_exesdog9toj.ttf', type: 'font/ttf', crossorigin: true, }, { - rel: 'preload', + rel: 'prefetch', as: 'font', href: '//at.alicdn.com/wf/webfont/exMpJIukiCms/Gsw2PSKrftc1yNWMNlXgw.woff2', type: 'font/woff2', crossorigin: true, }, { - rel: 'preload', + rel: 'prefetch', as: 'font', href: '//at.alicdn.com/wf/webfont/exMpJIukiCms/vtu73by4O2gEBcvBuLgeu.woff', type: 'font/woff2', From 21a2265efd1481f39d17a15322f384934e0983d7 Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Mon, 21 Aug 2023 19:51:47 +0800 Subject: [PATCH 34/88] docs: show mirror modal on page load (#44291) * docs: show mirror modal on page load * chore: code clean * chore: update * fix: pathname reg * chore: escape * feat: add lang check * chore: add langcheck * feat: use src file * chore: update css * chore: update link * Update .dumi/mirror-modal.js Co-authored-by: lijianan <574980606@qq.com> Signed-off-by: MadCcc <1075746765@qq.com> --------- Signed-off-by: MadCcc <1075746765@qq.com> Co-authored-by: lijianan <574980606@qq.com> --- .dumi/mirror-modal.js | 172 +++++++++++++++++++++++++++++ .dumi/theme/slots/Header/index.tsx | 39 +------ .dumirc.ts | 7 ++ 3 files changed, 181 insertions(+), 37 deletions(-) create mode 100644 .dumi/mirror-modal.js diff --git a/.dumi/mirror-modal.js b/.dumi/mirror-modal.js new file mode 100644 index 000000000000..71ce7b2e28f4 --- /dev/null +++ b/.dumi/mirror-modal.js @@ -0,0 +1,172 @@ +(function createMirrorModal() { + if ( + (navigator.languages.includes('zh') || navigator.languages.includes('zh-CN')) && + /-cn\/?$/.test(window.location.pathname) && + !['ant-design.gitee.io', 'ant-design.antgroup.com'].includes(window.location.hostname) + ) { + const ANTD_DOT_NOT_SHOW_MIRROR_MODAL = 'ANT_DESIGN_DO_NOT_OPEN_MIRROR_MODAL'; + + const lastShowTime = window.localStorage.getItem(ANTD_DOT_NOT_SHOW_MIRROR_MODAL); + if ( + lastShowTime && + lastShowTime !== 'true' && + Date.now() - new Date(lastShowTime).getTime() < 7 * 24 * 60 * 60 * 1000 + ) { + return; + } + + const style = document.createElement('style'); + style.innerHTML = ` + @keyframes mirror-fade-in { + from { + opacity: 0; + } + to { + opacity: 1; + } + } + + @keyframes mirror-zoom-in { + from { + transform: scale(0.8); + } + to { + transform: scale(1); + } + } + + .mirror-modal-mask { + position: fixed; + inset: 0; + height: '100vh'; + width: '100vw'; + background: rgba(0, 0, 0, 0.3); + z-index: 9999; + animation: mirror-fade-in 0.3s forwards; + } + + .mirror-modal-dialog { + position: fixed; + inset: 0; + top: 120px; + margin-left: auto; + margin-right: auto; + width: 400px; + height: 120px; + display: flex; + align-items: center; + flex-direction: column; + border-radius: 8px; + border: 1px solid #eee; + background: #fff; + padding: 20px 24px; + box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05); + animation: mirror-zoom-in 0.3s forwards; + } + + .mirror-modal-title { + font-size: 16px; + font-weight: 500; + align-self: flex-start; + margin-bottom: 8px; + } + + .mirror-modal-content { + font-size: 14px; + align-self: flex-start; + margin-bottom: 16px; + } + + .mirror-modal-btns { + align-self: flex-end; + margin-top: auto; + display: flex; + align-items: center; + } + + .mirror-modal-btn { + border-radius: 6px; + cursor: pointer; + height: 32px; + box-sizing: border-box; + font-size: 14px; + padding: 4px 16px; + display: inline-flex; + align-items: center; + text-decoration: none; + transition: all 0.2s; + } + + .mirror-modal-confirm-btn { + background: #1677ff; + color: #fff; + } + + .mirror-modal-confirm-btn:hover { + background: #4096ff; + } + + .mirror-modal-confirm-btn:active { + background: #0958d9; + } + + .mirror-modal-cancel-btn { + border: 1px solid #eee; + color: #000; + margin-right: 8px; + } + + .mirror-modal-cancel-btn:hover { + border-color: #4096ff; + color: #4096ff + } + + .mirror-modal-cancel-btn:active { + border-color: #0958d9; + color: #0958d9; + } + `; + document.head.append(style); + + const modal = document.createElement('div'); + modal.className = 'mirror-modal-mask'; + + const dialog = document.createElement('div'); + dialog.className = 'mirror-modal-dialog'; + modal.append(dialog); + + const title = document.createElement('div'); + title.className = 'mirror-modal-title'; + title.innerText = '提示'; + dialog.append(title); + + const content = document.createElement('div'); + content.className = 'mirror-modal-content'; + content.innerText = '国内用户推荐访问国内镜像以获得极速体验～'; + dialog.append(content); + + const btnWrapper = document.createElement('div'); + btnWrapper.className = 'mirror-modal-btns'; + dialog.append(btnWrapper); + + const cancelBtn = document.createElement('a'); + cancelBtn.className = 'mirror-modal-cancel-btn mirror-modal-btn'; + cancelBtn.innerText = '7 天内不再显示'; + btnWrapper.append(cancelBtn); + cancelBtn.addEventListener('click', () => { + window.localStorage.setItem(ANTD_DOT_NOT_SHOW_MIRROR_MODAL, new Date().toISOString()); + document.body.removeChild(modal); + document.head.removeChild(style); + document.body.style.overflow = ''; + }); + + const confirmBtn = document.createElement('a'); + confirmBtn.className = 'mirror-modal-confirm-btn mirror-modal-btn'; + confirmBtn.href = window.location.href.replace(window.location.host, 'ant-design.antgroup.com'); + confirmBtn.innerText = '🚀 立刻前往'; + btnWrapper.append(confirmBtn); + + document.body.append(modal); + document.body.style.overflow = 'hidden'; + } +})(); diff --git a/.dumi/theme/slots/Header/index.tsx b/.dumi/theme/slots/Header/index.tsx index 163a8dec1a69..4e68fe78ae60 100644 --- a/.dumi/theme/slots/Header/index.tsx +++ b/.dumi/theme/slots/Header/index.tsx @@ -4,11 +4,11 @@ import classNames from 'classnames'; import { useLocation, useSiteData } from 'dumi'; import DumiSearchBar from 'dumi/theme-default/slots/SearchBar'; import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'; -import { Col, Modal, Popover, Row, Select } from 'antd'; +import { Col, Popover, Row, Select } from 'antd'; import useLocale from '../../../hooks/useLocale'; import DirectionIcon from '../../common/DirectionIcon'; import * as utils from '../../utils'; -import { getThemeConfig, ping } from '../../utils'; +import { getThemeConfig } from '../../utils'; import type { SiteContextProps } from '../SiteContext'; import SiteContext from '../SiteContext'; import Logo from './Logo'; @@ -109,16 +109,6 @@ const useStyle = createStyles(({ token, css }) => { }; }); -const SHOULD_OPEN_ANT_DESIGN_MIRROR_MODAL = 'ANT_DESIGN_DO_NOT_OPEN_MIRROR_MODAL'; - -function disableAntdMirrorModal() { - window.localStorage.setItem(SHOULD_OPEN_ANT_DESIGN_MIRROR_MODAL, 'true'); -} - -function shouldOpenAntdMirrorModal() { - return !window.localStorage.getItem(SHOULD_OPEN_ANT_DESIGN_MIRROR_MODAL); -} - interface HeaderState { menuVisible: boolean; windowWidth: number; @@ -167,31 +157,6 @@ const Header: React.FC = () => { useEffect(() => { onWindowResize(); window.addEventListener('resize', onWindowResize); - pingTimer.current = ping((status) => { - if (status !== 'timeout' && status !== 'error') { - if ( - // process.env.NODE_ENV === 'production' && - window.location.host !== 'ant-design.antgroup.com' && - shouldOpenAntdMirrorModal() - ) { - Modal.confirm({ - title: '提示', - content: '内网用户推荐访问国内镜像以获得极速体验～', - okText: '🚀 立刻前往', - cancelText: '不再弹出', - closable: true, - zIndex: 99999, - onOk() { - window.location.host = 'ant-design.antgroup.com'; - disableAntdMirrorModal(); - }, - onCancel() { - disableAntdMirrorModal(); - }, - }); - } - } - }); return () => { window.removeEventListener('resize', onWindowResize); if (pingTimer.current) { diff --git a/.dumirc.ts b/.dumirc.ts index a83b20d755c2..a374f7a8f795 100644 --- a/.dumirc.ts +++ b/.dumirc.ts @@ -3,6 +3,7 @@ import path from 'path'; import rehypeAntd from './.dumi/rehypeAntd'; import remarkAntd from './.dumi/remarkAntd'; import { version } from './package.json'; +import * as fs from 'fs-extra'; export default defineConfig({ conventionRoutes: { @@ -158,4 +159,10 @@ export default defineConfig({ })(); `, ], + scripts: [ + { + async: true, + content: fs.readFileSync(path.join(__dirname, '.dumi', 'mirror-modal.js')).toString(), + }, + ], }); From b26e3a77f99527e6531e767bac005a6e642724ba 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: Mon, 21 Aug 2023 20:15:49 +0800 Subject: [PATCH 35/88] fix: WaterMark clip logic (#44321) * fix: cut logic * chore: fix size * test: update snapshot * chore: rm useless code --- .../__snapshots__/demo-extend.test.ts.snap | 10 +- .../__tests__/__snapshots__/demo.test.ts.snap | 6 +- .../__snapshots__/index.test.tsx.snap | 12 +- components/watermark/__tests__/index.test.tsx | 2 +- components/watermark/demo/custom.tsx | 2 +- components/watermark/index.tsx | 145 +++++------------- components/watermark/useClips.ts | 136 ++++++++++++++++ components/watermark/utils.ts | 12 -- 8 files changed, 194 insertions(+), 131 deletions(-) create mode 100644 components/watermark/useClips.ts diff --git a/components/watermark/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/watermark/__tests__/__snapshots__/demo-extend.test.ts.snap index 6eb701ceba52..845deb9ec148 100644 --- a/components/watermark/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/watermark/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -9,7 +9,7 @@ exports[`renders components/watermark/demo/basic.tsx extend context correctly 1` style="height: 500px;" />
`; @@ -49,7 +49,7 @@ exports[`renders components/watermark/demo/custom.tsx extend context correctly 1 style="z-index: 10; width: 100%; max-width: 800px; position: relative;" />
diff --git a/components/watermark/__tests__/__snapshots__/index.test.tsx.snap b/components/watermark/__tests__/__snapshots__/index.test.tsx.snap index 8744905df39d..a19ad3c7de10 100644 --- a/components/watermark/__tests__/__snapshots__/index.test.tsx.snap +++ b/components/watermark/__tests__/__snapshots__/index.test.tsx.snap @@ -7,7 +7,7 @@ exports[`Watermark Image watermark snapshot 1`] = ` style="position: relative;" >
@@ -20,7 +20,7 @@ exports[`Watermark Interleaved watermark backgroundSize is correct 1`] = ` style="position: relative;" >
@@ -33,7 +33,7 @@ exports[`Watermark Invalid image watermark 1`] = ` style="position: relative;" >
@@ -46,7 +46,7 @@ exports[`Watermark MutationObserver should work properly 1`] = ` style="position: relative;" >
@@ -59,7 +59,7 @@ exports[`Watermark Observe the modification of style 1`] = ` style="position: relative;" >
@@ -85,7 +85,7 @@ exports[`Watermark The watermark should render successfully 1`] = ` style="position: relative;" >
diff --git a/components/watermark/__tests__/index.test.tsx b/components/watermark/__tests__/index.test.tsx index be45ffb33b0c..8de5a7aaf21b 100644 --- a/components/watermark/__tests__/index.test.tsx +++ b/components/watermark/__tests__/index.test.tsx @@ -53,7 +53,7 @@ describe('Watermark', () => { />, ); const target = container.querySelector('.watermark div'); - expect(target?.style.backgroundSize).toBe('600px'); + expect(target?.style.backgroundSize).toBe('720px'); expect(container).toMatchSnapshot(); }); diff --git a/components/watermark/demo/custom.tsx b/components/watermark/demo/custom.tsx index c73c01a86826..54a4fac98c7c 100644 --- a/components/watermark/demo/custom.tsx +++ b/components/watermark/demo/custom.tsx @@ -103,7 +103,7 @@ const App: React.FC = () => { - + diff --git a/components/watermark/index.tsx b/components/watermark/index.tsx index 43d99510728f..fa5b54c86b28 100644 --- a/components/watermark/index.tsx +++ b/components/watermark/index.tsx @@ -1,15 +1,11 @@ +import React, { useEffect, useRef } from 'react'; + import MutateObserver from '@rc-component/mutate-observer'; import classNames from 'classnames'; -import React, { useEffect, useRef } from 'react'; -import { getPixelRatio, getStyleStr, reRendering, rotateWatermark } from './utils'; -import theme from '../theme'; -/** - * Base size of the canvas, 1 for parallel layout and 2 for alternate layout - * Only alternate layout is currently supported - */ -const BaseSize = 2; -const FontGap = 3; +import theme from '../theme'; +import useClips, { FontGap } from './useClips'; +import { getPixelRatio, getStyleStr, reRendering } from './utils'; export interface WatermarkProps { zIndex?: number; @@ -117,7 +113,7 @@ const Watermark: React.FC = (props) => { getStyleStr({ ...getMarkStyle(), backgroundImage: `url('${base64Url}')`, - backgroundSize: `${(gapX + markWidth) * BaseSize}px`, + backgroundSize: `${Math.floor(markWidth)}px`, }), ); containerRef.current?.append(watermarkRef.current); @@ -138,53 +134,20 @@ const Watermark: React.FC = (props) => { if (!image && ctx.measureText) { ctx.font = `${Number(fontSize)}px ${fontFamily}`; const contents = Array.isArray(content) ? content : [content]; - const widths = contents.map((item) => ctx.measureText(item!).width); - defaultWidth = Math.ceil(Math.max(...widths)); - defaultHeight = Number(fontSize) * contents.length + (contents.length - 1) * FontGap; + const sizes = contents.map((item) => { + const metrics = ctx.measureText(item!); + + return [metrics.width, metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent]; + }); + defaultWidth = Math.ceil(Math.max(...sizes.map((size) => size[0]))); + defaultHeight = + Math.ceil(Math.max(...sizes.map((size) => size[1]))) * contents.length + + (contents.length - 1) * FontGap; } return [width ?? defaultWidth, height ?? defaultHeight] as const; }; - const fillTexts = ( - ctx: CanvasRenderingContext2D, - drawX: number, - drawY: number, - drawWidth: number, - drawHeight: number, - ) => { - const ratio = getPixelRatio(); - const mergedFontSize = Number(fontSize) * ratio; - ctx.font = `${fontStyle} normal ${fontWeight} ${mergedFontSize}px/${drawHeight}px ${fontFamily}`; - ctx.fillStyle = color; - ctx.textAlign = 'center'; - ctx.textBaseline = 'top'; - ctx.translate(drawWidth / 2, 0); - const contents = Array.isArray(content) ? content : [content]; - contents?.forEach((item, index) => { - ctx.fillText(item ?? '', drawX, drawY + index * (mergedFontSize + FontGap * ratio)); - }); - }; - - const drawText = ( - canvas: HTMLCanvasElement, - ctx: CanvasRenderingContext2D, - drawX: number, - drawY: number, - drawWidth: number, - drawHeight: number, - alternateRotateX: number, - alternateRotateY: number, - alternateDrawX: number, - alternateDrawY: number, - markWidth: number, - ) => { - fillTexts(ctx, drawX, drawY, drawWidth, drawHeight); - /** Fill the interleaved text after rotation */ - ctx.restore(); - rotateWatermark(ctx, alternateRotateX, alternateRotateY, rotate); - fillTexts(ctx, alternateDrawX, alternateDrawY, drawWidth, drawHeight); - appendWatermark(canvas.toDataURL(), markWidth); - }; + const getClips = useClips(); const renderWatermark = () => { const canvas = document.createElement('canvas'); @@ -197,67 +160,43 @@ const Watermark: React.FC = (props) => { const ratio = getPixelRatio(); const [markWidth, markHeight] = getMarkSize(ctx); - const canvasWidth = (gapX + markWidth) * ratio; - const canvasHeight = (gapY + markHeight) * ratio; - canvas.setAttribute('width', `${canvasWidth * BaseSize}px`); - canvas.setAttribute('height', `${canvasHeight * BaseSize}px`); - const drawX = (gapX * ratio) / 2; - const drawY = (gapY * ratio) / 2; - const drawWidth = markWidth * ratio; - const drawHeight = markHeight * ratio; - const rotateX = (drawWidth + gapX * ratio) / 2; - const rotateY = (drawHeight + gapY * ratio) / 2; - /** Alternate drawing parameters */ - const alternateDrawX = drawX + canvasWidth; - const alternateDrawY = drawY + canvasHeight; - const alternateRotateX = rotateX + canvasWidth; - const alternateRotateY = rotateY + canvasHeight; + const drawCanvas = ( + drawContent?: NonNullable | HTMLImageElement, + ) => { + const [textClips, clipWidth] = getClips( + drawContent || '', + rotate, + ratio, + markWidth, + markHeight, + { + color, + fontSize, + fontStyle, + fontWeight, + fontFamily, + }, + gapX, + gapY, + ); - ctx.save(); - rotateWatermark(ctx, rotateX, rotateY, rotate); + appendWatermark(textClips, clipWidth); + }; if (image) { const img = new Image(); img.onload = () => { - ctx.drawImage(img, drawX, drawY, drawWidth, drawHeight); - /** Draw interleaved pictures after rotation */ - ctx.restore(); - rotateWatermark(ctx, alternateRotateX, alternateRotateY, rotate); - ctx.drawImage(img, alternateDrawX, alternateDrawY, drawWidth, drawHeight); - appendWatermark(canvas.toDataURL(), markWidth); + drawCanvas(img); + }; + img.onerror = () => { + drawCanvas(content); }; - img.onerror = () => - drawText( - canvas, - ctx, - drawX, - drawY, - drawWidth, - drawHeight, - alternateRotateX, - alternateRotateY, - alternateDrawX, - alternateDrawY, - markWidth, - ); img.crossOrigin = 'anonymous'; img.referrerPolicy = 'no-referrer'; img.src = image; } else { - drawText( - canvas, - ctx, - drawX, - drawY, - drawWidth, - drawHeight, - alternateRotateX, - alternateRotateY, - alternateDrawX, - alternateDrawY, - markWidth, - ); + drawCanvas(content); } } }; diff --git a/components/watermark/useClips.ts b/components/watermark/useClips.ts new file mode 100644 index 000000000000..2392e67d6a88 --- /dev/null +++ b/components/watermark/useClips.ts @@ -0,0 +1,136 @@ +import type { WatermarkProps } from '.'; + +export const FontGap = 3; + +function prepareCanvas( + width: number, + height: number, + ratio: number = 1, +): [ + ctx: CanvasRenderingContext2D, + canvas: HTMLCanvasElement, + realWidth: number, + realHeight: number, +] { + const canvas = document.createElement('canvas'); + const ctx = canvas.getContext('2d')!; + + const realWidth = width * ratio; + const realHeight = height * ratio; + canvas.setAttribute('width', `${realWidth}px`); + canvas.setAttribute('height', `${realHeight}px`); + ctx.save(); + + return [ctx, canvas, realWidth, realHeight]; +} + +/** + * Get the clips of text content. + * This is a lazy hook function since SSR no need this + */ +export default function useClips() { + // Get single clips + function getClips( + content: NonNullable | HTMLImageElement, + rotate: number, + ratio: number, + width: number, + height: number, + font: Required>, + gapX: number, + gapY: number, + ): [dataURL: string, finalWidth: number, finalHeight: number] { + // ================= Text / Image ================= + const [ctx, canvas, contentWidth, contentHeight] = prepareCanvas(width, height, ratio); + + if (content instanceof HTMLImageElement) { + // Image + ctx.drawImage(content, 0, 0, contentWidth, contentHeight); + } else { + // Text + const { color, fontSize, fontStyle, fontWeight, fontFamily } = font; + const mergedFontSize = Number(fontSize) * ratio; + + ctx.font = `${fontStyle} normal ${fontWeight} ${mergedFontSize}px/${height}px ${fontFamily}`; + ctx.fillStyle = color; + ctx.textAlign = 'center'; + ctx.textBaseline = 'top'; + const contents = Array.isArray(content) ? content : [content]; + contents?.forEach((item, index) => { + ctx.fillText(item ?? '', contentWidth / 2, index * (mergedFontSize + FontGap * ratio)); + }); + } + + // ==================== Rotate ==================== + const angle = (Math.PI / 180) * Number(rotate); + const maxSize = Math.max(width, height); + const [rCtx, rCanvas, realMaxSize] = prepareCanvas(maxSize, maxSize, ratio); + + // Copy from `ctx` and rotate + rCtx.translate(realMaxSize / 2, realMaxSize / 2); + rCtx.rotate(angle); + rCtx.drawImage(canvas, -contentWidth / 2, -contentHeight / 2); + + // Get boundary of rotated text + function getRotatePos(x: number, y: number) { + const targetX = x * Math.cos(angle) - y * Math.sin(angle); + const targetY = x * Math.sin(angle) + y * Math.cos(angle); + return [targetX, targetY]; + } + + let left = 0; + let right = 0; + let top = 0; + let bottom = 0; + + const halfWidth = contentWidth / 2; + const halfHeight = contentHeight / 2; + const points = [ + [0 - halfWidth, 0 - halfHeight], + [0 + halfWidth, 0 - halfHeight], + [0 + halfWidth, 0 + halfHeight], + [0 - halfWidth, 0 + halfHeight], + ]; + points.forEach(([x, y]) => { + const [targetX, targetY] = getRotatePos(x, y); + left = Math.min(left, targetX); + right = Math.max(right, targetX); + top = Math.min(top, targetY); + bottom = Math.max(bottom, targetY); + }); + + const cutLeft = left + realMaxSize / 2; + const cutTop = top + realMaxSize / 2; + const cutWidth = right - left; + const cutHeight = bottom - top; + + // ================ Fill Alternate ================ + const realGapX = gapX * ratio; + const realGapY = gapY * ratio; + const filledWidth = (cutWidth + realGapX) * 2; + const filledHeight = cutHeight + realGapY; + + const [fCtx, fCanvas] = prepareCanvas(filledWidth, filledHeight); + + function drawImg(targetX = 0, targetY = 0) { + fCtx.drawImage( + rCanvas, + cutLeft, + cutTop, + cutWidth, + cutHeight, + targetX, + targetY, + cutWidth, + cutHeight, + ); + } + drawImg(); + drawImg(cutWidth + realGapX, -cutHeight / 2 - realGapY / 2); + drawImg(cutWidth + realGapX, +cutHeight / 2 + realGapY / 2); + + return [fCanvas.toDataURL(), filledWidth / ratio, filledHeight / ratio]; + } + + return getClips; +} diff --git a/components/watermark/utils.ts b/components/watermark/utils.ts index 84103b59c533..e2ba19f73c4a 100644 --- a/components/watermark/utils.ts +++ b/components/watermark/utils.ts @@ -14,18 +14,6 @@ export function getPixelRatio() { return window.devicePixelRatio || 1; } -/** Rotate with the watermark as the center point */ -export function rotateWatermark( - ctx: CanvasRenderingContext2D, - rotateX: number, - rotateY: number, - rotate: number, -) { - ctx.translate(rotateX, rotateY); - ctx.rotate((Math.PI / 180) * Number(rotate)); - ctx.translate(-rotateX, -rotateY); -} - /** Whether to re-render the watermark */ export const reRendering = (mutation: MutationRecord, watermarkElement?: HTMLElement) => { let flag = false; From da699b11bedd43bdb0624a90ac652a5d9e1c98b4 Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Mon, 21 Aug 2023 23:28:14 +0800 Subject: [PATCH 36/88] docs: add fallback for previewer (#44327) * docs: add fallback for previewer * chore: code clean --- .dumi/theme/builtins/Previewer/index.tsx | 36 ++++++++++++++++++++---- 1 file changed, 31 insertions(+), 5 deletions(-) diff --git a/.dumi/theme/builtins/Previewer/index.tsx b/.dumi/theme/builtins/Previewer/index.tsx index ff79fd82a952..b987d57bc3f0 100644 --- a/.dumi/theme/builtins/Previewer/index.tsx +++ b/.dumi/theme/builtins/Previewer/index.tsx @@ -1,10 +1,36 @@ import React, { Suspense } from 'react'; import type { IPreviewerProps } from 'dumi'; +import { Skeleton } from 'antd'; +import { createStyles } from 'antd-style'; const Previewer = React.lazy(() => import('./Previewer')); -export default (props: IPreviewerProps) => ( - - - -); +const useStyle = createStyles(({ css }) => ({ + skeletonWrapper: css` + width: 100% !important; + height: 500px; + margin-bottom: 16px; + `, +})); + +export default (props: IPreviewerProps) => { + const { styles } = useStyle(); + return ( + + {' '} + + } + > + + + ); +}; From 06d1c9a6e7d608836915b5be3fb129e3797abbf2 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 22 Aug 2023 11:31:49 +0800 Subject: [PATCH 37/88] docs: font flash in home page (#44333) Signed-off-by: afc163 --- .dumirc.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.dumirc.ts b/.dumirc.ts index a374f7a8f795..b6aa833febbd 100644 --- a/.dumirc.ts +++ b/.dumirc.ts @@ -87,14 +87,14 @@ export default defineConfig({ crossorigin: true, }, { - rel: 'prefetch', + rel: 'preload', as: 'font', href: '//at.alicdn.com/wf/webfont/exMpJIukiCms/Gsw2PSKrftc1yNWMNlXgw.woff2', type: 'font/woff2', crossorigin: true, }, { - rel: 'prefetch', + rel: 'preload', as: 'font', href: '//at.alicdn.com/wf/webfont/exMpJIukiCms/vtu73by4O2gEBcvBuLgeu.woff', type: 'font/woff2', From af301a982206b25b1030e1f84a2cff14c09ce431 Mon Sep 17 00:00:00 2001 From: AN <455454007@qq.com> Date: Tue, 22 Aug 2023 13:00:42 +0800 Subject: [PATCH 38/88] fix(date-picker):fix format type processing for showTime. (#44306) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix(date-picker):fix format type processing for showTime. * test✅: Add showTime should work correctly when format is Array test --- .../date-picker/__tests__/DatePicker.test.tsx | 19 +++++++++++++++++++ components/date-picker/util.ts | 5 +++++ 2 files changed, 24 insertions(+) diff --git a/components/date-picker/__tests__/DatePicker.test.tsx b/components/date-picker/__tests__/DatePicker.test.tsx index 54c91b3bbfb5..00270af3faf6 100644 --- a/components/date-picker/__tests__/DatePicker.test.tsx +++ b/components/date-picker/__tests__/DatePicker.test.tsx @@ -186,6 +186,25 @@ describe('DatePicker', () => { expect(mouseDownEvent).not.toThrow(); }); + it('showTime should work correctly when format is Array', () => { + const { container } = render( + , + ); + const fuousEvent = () => { + fireEvent.focus(container.querySelector('input')!); + }; + const mouseDownEvent = () => { + fireEvent.mouseDown(container.querySelector('input')!); + }; + expect(fuousEvent).not.toThrow(); + expect(mouseDownEvent).not.toThrow(); + }); + it('12 hours', () => { const { container } = render( , diff --git a/components/date-picker/util.ts b/components/date-picker/util.ts index f624b5aebba0..c308fad42260 100644 --- a/components/date-picker/util.ts +++ b/components/date-picker/util.ts @@ -126,6 +126,11 @@ export function getTimeProps( const firstFormat = toArray(format)[0]; const showTimeObj = { ...props }; + // https://github.com/ant-design/ant-design/issues/44275 + if (format && Array.isArray(format)) { + showTimeObj.format = firstFormat; + } + if (firstFormat && typeof firstFormat === 'string') { if (!firstFormat.includes('s') && showSecond === undefined) { showTimeObj.showSecond = false; From 80e1bc87bc3d39b6f39f2d90a8dd78306d59bd0c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8F=B6=E6=9E=AB?= <7971419+crazyair@users.noreply.github.com> Date: Tue, 22 Aug 2023 13:11:18 +0800 Subject: [PATCH 39/88] style: remove importOrderSeparation from prettier config (#44336) --- .dumi/theme/builtins/Previewer/Previewer.tsx | 3 ++- .prettierrc | 6 ++---- package.json | 2 +- 3 files changed, 5 insertions(+), 6 deletions(-) diff --git a/.dumi/theme/builtins/Previewer/Previewer.tsx b/.dumi/theme/builtins/Previewer/Previewer.tsx index a37144956fd6..fb23c55e0f71 100644 --- a/.dumi/theme/builtins/Previewer/Previewer.tsx +++ b/.dumi/theme/builtins/Previewer/Previewer.tsx @@ -1,6 +1,7 @@ +import React from 'react'; import type { IPreviewerProps } from 'dumi'; import { useTabMeta } from 'dumi'; -import React from 'react'; + import CodePreviewer from './CodePreviewer'; import DesignPreviewer from './DesignPreviewer'; diff --git a/.prettierrc b/.prettierrc index d1c91d8d042d..73e7db810cd9 100644 --- a/.prettierrc +++ b/.prettierrc @@ -4,10 +4,8 @@ "trailingComma": "all", "printWidth": 100, "proseWrap": "never", - "importOrder": ["^(react|react-dom)$", "^([a-z]|@[a-z])", ".*"], - "importOrderSeparation": true, - "importOrderSortSpecifiers": true, - "plugins": ["@trivago/prettier-plugin-sort-imports"], + "importOrder": ["^(react|react-dom)$", "^([a-z]|@[a-z])", "", ".*"], + "plugins": ["@ianvs/prettier-plugin-sort-imports"], "overrides": [ { "files": ".prettierrc", diff --git a/package.json b/package.json index 77b4966344b1..0a13a017caa5 100644 --- a/package.json +++ b/package.json @@ -172,6 +172,7 @@ "@dnd-kit/utilities": "^3.2.1", "@emotion/react": "^11.10.4", "@emotion/server": "^11.4.0", + "@ianvs/prettier-plugin-sort-imports": "^4.1.0", "@qixian.cs/github-contributors-list": "^1.1.0", "@size-limit/file": "^8.1.0", "@stackblitz/sdk": "^1.3.0", @@ -181,7 +182,6 @@ "@testing-library/jest-dom": "^6.0.0", "@testing-library/react": "^14.0.0", "@testing-library/user-event": "^14.4.2", - "@trivago/prettier-plugin-sort-imports": "^4.2.0", "@types/fs-extra": "^11.0.1", "@types/gtag.js": "^0.0.13", "@types/http-server": "^0.12.1", From 70d9a909c4aef7a11509e924069b5f2399b87015 Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Tue, 22 Aug 2023 17:48:53 +0800 Subject: [PATCH 40/88] docs: fix anchor positioning (#44348) --- .dumi/theme/common/styles/Common.tsx | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) diff --git a/.dumi/theme/common/styles/Common.tsx b/.dumi/theme/common/styles/Common.tsx index a805422a238c..6cf0de24b2a7 100644 --- a/.dumi/theme/common/styles/Common.tsx +++ b/.dumi/theme/common/styles/Common.tsx @@ -1,9 +1,13 @@ import { css, Global } from '@emotion/react'; import React from 'react'; +import { useTheme } from 'antd-style'; -export default () => ( - { + const { headerHeight, margin } = useTheme(); + + return ( + ( vertical-align: middle; border-style: none; } + + html { + scroll-padding-top: ${headerHeight + margin}px; + } `} - /> -); + /> + ); +}; From 0295322564a8a2908063e2fbd04e3ec159038dc7 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 22 Aug 2023 19:00:06 +0800 Subject: [PATCH 41/88] docs: prevent highlight code initially (#44344) --- .../builtins/Previewer/CodePreviewer.tsx | 48 ++------- .dumi/theme/builtins/Previewer/index.tsx | 38 ++++--- .dumi/theme/common/CodePreview.tsx | 100 ++++++++++++++---- 3 files changed, 109 insertions(+), 77 deletions(-) diff --git a/.dumi/theme/builtins/Previewer/CodePreviewer.tsx b/.dumi/theme/builtins/Previewer/CodePreviewer.tsx index 9bbd9b08d2dc..66033bec7dde 100644 --- a/.dumi/theme/builtins/Previewer/CodePreviewer.tsx +++ b/.dumi/theme/builtins/Previewer/CodePreviewer.tsx @@ -8,10 +8,7 @@ import type { Project } from '@stackblitz/sdk'; import stackblitzSdk from '@stackblitz/sdk'; import classNames from 'classnames'; import { FormattedMessage, useSiteData } from 'dumi'; -import toReactElement from 'jsonml-to-react-element'; -import JsonML from 'jsonml.js/lib/utils'; import LZString from 'lz-string'; -import Prism from 'prismjs'; import React, { useContext, useEffect, useRef, useState } from 'react'; import CopyToClipboard from 'react-copy-to-clipboard'; import { Alert, Badge, Space, Tooltip } from 'antd'; @@ -31,28 +28,6 @@ import { ping } from '../../utils'; const { ErrorBoundary } = Alert; -function toReactComponent(jsonML: any) { - return toReactElement(jsonML, [ - [ - (node: any) => JsonML.isElement(node) && JsonML.getTagName(node) === 'pre', - (node: any, index: any) => { - // ref: https://github.com/benjycui/bisheng/blob/master/packages/bisheng/src/bisheng-plugin-highlight/lib/browser.js#L7 - const attr = JsonML.getAttributes(node); - return React.createElement( - 'pre', - { - key: index, - className: `language-${attr.lang}`, - }, - React.createElement('code', { - dangerouslySetInnerHTML: { __html: attr.highlighted }, - }), - ); - }, - ], - ]); -} - function compress(string: string): string { return LZString.compressToBase64(string) .replace(/\+/g, '-') // Convert '+' to '-' @@ -130,13 +105,6 @@ const CodePreviewer: React.FC = (props) => { const [showOnlineUrl, setShowOnlineUrl] = useState(false); - const highlightedCodes = { - jsx: Prism.highlight(jsx, Prism.languages.javascript, 'jsx'), - tsx: Prism.highlight(entryCode, Prism.languages.javascript, 'jsx'), - }; - - const highlightedStyle = style ? Prism.highlight(style, Prism.languages.css, 'css') : ''; - useEffect(() => { const regexp = /preview-(\d+)-ant-design/; // matching PR preview addresses setShowOnlineUrl( @@ -538,17 +506,11 @@ createRoot(document.getElementById('container')).render(); {codeExpand && (
setCodeType(type)} /> - {highlightedStyle ? ( -
- 
-                
-
-
- ) : null}
)} @@ -560,7 +522,9 @@ createRoot(document.getElementById('container')).render(); // resulting in some response delays like following issue: // https://github.com/ant-design/ant-design/issues/39995 // So we insert style tag into head tag. - if (!style) return; + if (!style) { + return; + } const styleTag = document.createElement('style'); styleTag.type = 'text/css'; styleTag.innerHTML = style; diff --git a/.dumi/theme/builtins/Previewer/index.tsx b/.dumi/theme/builtins/Previewer/index.tsx index b987d57bc3f0..e36c556112f8 100644 --- a/.dumi/theme/builtins/Previewer/index.tsx +++ b/.dumi/theme/builtins/Previewer/index.tsx @@ -1,8 +1,10 @@ import React, { Suspense } from 'react'; import type { IPreviewerProps } from 'dumi'; -import { Skeleton } from 'antd'; +import { Skeleton, Alert } from 'antd'; import { createStyles } from 'antd-style'; +const { ErrorBoundary } = Alert; + const Previewer = React.lazy(() => import('./Previewer')); const useStyle = createStyles(({ css }) => ({ @@ -16,21 +18,23 @@ const useStyle = createStyles(({ css }) => ({ export default (props: IPreviewerProps) => { const { styles } = useStyle(); return ( - - {' '} - - } - > - - + + + {' '} + + } + > + + + ); }; diff --git a/.dumi/theme/common/CodePreview.tsx b/.dumi/theme/common/CodePreview.tsx index 93c9c4580710..b69303dae1fe 100644 --- a/.dumi/theme/common/CodePreview.tsx +++ b/.dumi/theme/common/CodePreview.tsx @@ -1,37 +1,101 @@ -import React from 'react'; +import React, { useEffect, useMemo } from 'react'; +import Prism from 'prismjs'; +import toReactElement from 'jsonml-to-react-element'; +import JsonML from 'jsonml.js/lib/utils'; import { Tabs } from 'antd'; const LANGS = { tsx: 'TypeScript', jsx: 'JavaScript', + style: 'CSS', }; interface CodePreviewProps { - codes?: Record; - toReactComponent?: (node: any) => React.ReactNode; + sourceCode?: string; + jsxCode?: string; + styleCode?: string; onCodeTypeChange?: (activeKey: string) => void; } -const CodePreview: React.FC = ({ toReactComponent, codes, onCodeTypeChange }) => { - const langList = Object.keys(codes).sort().reverse(); +function toReactComponent(jsonML: any) { + return toReactElement(jsonML, [ + [ + (node: any) => JsonML.isElement(node) && JsonML.getTagName(node) === 'pre', + (node: any, index: any) => { + // ref: https://github.com/benjycui/bisheng/blob/master/packages/bisheng/src/bisheng-plugin-highlight/lib/browser.js#L7 + const attr = JsonML.getAttributes(node); + return React.createElement( + 'pre', + { + key: index, + className: `language-${attr.lang}`, + }, + React.createElement('code', { + dangerouslySetInnerHTML: { __html: attr.highlighted }, + }), + ); + }, + ], + ]); +} + +const CodePreview: React.FC = ({ + sourceCode = '', + jsxCode = '', + styleCode = '', + onCodeTypeChange, +}) => { + // 避免 Tabs 数量不稳定的闪动问题 + const initialCodes = {}; + if (sourceCode) { + initialCodes.tsx = ''; + } + if (jsxCode) { + initialCodes.jsx = ''; + } + if (styleCode) { + initialCodes.style = ''; + } + const [highlightedCodes, setHighlightedCodes] = React.useState(initialCodes); + + useEffect(() => { + const codes = { + tsx: Prism.highlight(sourceCode, Prism.languages.javascript, 'jsx'), + jsx: Prism.highlight(jsxCode, Prism.languages.javascript, 'jsx'), + style: Prism.highlight(styleCode, Prism.languages.css, 'css'), + }; + // 去掉空的代码类型 + Object.keys(codes).forEach((key) => { + if (!codes[key]) { + delete codes[key]; + } + }); + setHighlightedCodes(codes); + }, [jsxCode, sourceCode, styleCode]); + + const langList = Object.keys(highlightedCodes); + const items = useMemo( + () => + langList.map((lang) => ({ + label: LANGS[lang], + key: lang, + children: toReactComponent(['pre', { lang, highlighted: highlightedCodes[lang] }]), + })), + [JSON.stringify(highlightedCodes)], + ); + + if (!langList.length) { + return null; + } + if (langList.length === 1) { return toReactComponent([ 'pre', - { lang: langList[0], highlighted: codes[langList[0]], className: 'highlight' }, + { lang: langList[0], highlighted: highlightedCodes[langList[0]], className: 'highlight' }, ]); } - return ( - ({ - label: LANGS[lang], - key: lang, - children: toReactComponent(['pre', { lang, highlighted: codes[lang] }]), - }))} - /> - ); + + return ; }; export default CodePreview; From 4d12efed316138f889470de92b023295f279854c Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 22 Aug 2023 19:01:34 +0800 Subject: [PATCH 42/88] chore: Update pr-contributor-welcome.yml (#44340) * chore: Update pr-contributor-welcome.yml Signed-off-by: afc163 * Apply suggestions from code review Signed-off-by: afc163 --------- Signed-off-by: afc163 --- .github/workflows/pr-contributor-welcome.yml | 28 +++++++++++++++++++- 1 file changed, 27 insertions(+), 1 deletion(-) diff --git a/.github/workflows/pr-contributor-welcome.yml b/.github/workflows/pr-contributor-welcome.yml index 302e9c71535b..b8610144b645 100644 --- a/.github/workflows/pr-contributor-welcome.yml +++ b/.github/workflows/pr-contributor-welcome.yml @@ -9,6 +9,32 @@ on: - 'components/**' jobs: + read-file: + runs-on: ubuntu-latest + outputs: + require-result: ${{ steps.contributors.outputs.content }} + steps: + - name: Checkout + uses: actions/checkout@v3 + - name: Read contributors.json + id: contributors + uses: juliangruber/read-file-action@v1 + with: + path: ./contributors.json + + output-log: + runs-on: ubuntu-latest + needs: read-file + steps: + - name: contributors.json + run: echo "${{ needs.read-file.outputs.require-result }}" + - name: creator + run: echo "${{ github.event.pull_request.user.login }}" + - name: contains + run: echo "${{ contains(fromJSON(needs.read-file.outputs.require-result), github.event.pull_request.user.login) }}" + - name: merged + run: echo "${{ github.event.pull_request.merged }}" + check-merged: runs-on: ubuntu-latest needs: read-file @@ -25,4 +51,4 @@ jobs: - body-include: '' \ No newline at end of file + body-include: '' From 24d055ed579f2c88ef11054204ae6a640e687fb5 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Tue, 22 Aug 2023 22:08:39 +0800 Subject: [PATCH 43/88] chore(deps-dev): bump vanilla-jsoneditor from 0.17.10 to 0.18.0 (#44352) Bumps [vanilla-jsoneditor](https://github.com/josdejong/svelte-jsoneditor) from 0.17.10 to 0.18.0. - [Release notes](https://github.com/josdejong/svelte-jsoneditor/releases) - [Changelog](https://github.com/josdejong/svelte-jsoneditor/blob/main/CHANGELOG.md) - [Commits](https://github.com/josdejong/svelte-jsoneditor/compare/v0.17.10...v0.18.0) --- updated-dependencies: - dependency-name: vanilla-jsoneditor dependency-type: direct:development update-type: version-update:semver-minor ... 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 0a13a017caa5..7ae4fd84bb03 100644 --- a/package.json +++ b/package.json @@ -304,7 +304,7 @@ "ts-node": "^10.8.2", "typedoc": "^0.24.8", "typescript": "~5.1.3", - "vanilla-jsoneditor": "^0.17.1", + "vanilla-jsoneditor": "^0.18.0", "webpack-bundle-analyzer": "^4.1.0", "xhr-mock": "^2.4.1" }, From f5fcb7010d6f8425d6b9160a1198d54bdfb22bef 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, 22 Aug 2023 23:53:18 +0800 Subject: [PATCH 44/88] fix: rm useless form inline style (#44360) --- components/form/style/index.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/components/form/style/index.ts b/components/form/style/index.ts index a78320f37cbc..4664972a1d84 100644 --- a/components/form/style/index.ts +++ b/components/form/style/index.ts @@ -362,10 +362,6 @@ const genInlineStyle: GenerateStyle = (token) => { flexWrap: 'nowrap', }, - '&-with-help': { - marginBottom: token.marginLG, - }, - [`> ${formItemCls}-label, > ${formItemCls}-control`]: { display: 'inline-block', From 5d522a374a375b1db83631ed5b5ba27233e5e37a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=BA=A2?= Date: Wed, 23 Aug 2023 12:26:05 +0800 Subject: [PATCH 45/88] chore: remove duplicate styles (#44368) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit genBasicInputStyle 方法中已经包括 genActiveStyle 了 --- components/mentions/style/index.ts | 5 ----- 1 file changed, 5 deletions(-) diff --git a/components/mentions/style/index.ts b/components/mentions/style/index.ts index b7e8adfeb152..c106f4b82bc4 100644 --- a/components/mentions/style/index.ts +++ b/components/mentions/style/index.ts @@ -1,6 +1,5 @@ import type { InputToken } from '../../input/style'; import { - genActiveStyle, genBasicInputStyle, genDisabledStyle, genPlaceholderStyle, @@ -77,10 +76,6 @@ const genMentionsStyle: GenerateStyle = (token) => { }, }, - '&-focused': { - ...genActiveStyle(token), - }, - [`&-affix-wrapper ${componentCls}-suffix`]: { position: 'absolute', top: 0, From 79825c06edd30fc1bd2fe27853a109599c3bdef0 Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Wed, 23 Aug 2023 19:23:25 +0800 Subject: [PATCH 46/88] fix: Table should not crash if filterDropdown is boolean (#44357) * fix: Table should not crash if filterDropdown is boolean * chore: code clean * chore: use supportNodeRef --- components/menu/OverrideContext.tsx | 7 ++++++- .../table/__tests__/Table.filter.test.tsx | 20 +++++++++++++++++++ package.json | 2 +- 3 files changed, 27 insertions(+), 2 deletions(-) diff --git a/components/menu/OverrideContext.tsx b/components/menu/OverrideContext.tsx index bec81a456b42..f8b9720379ce 100644 --- a/components/menu/OverrideContext.tsx +++ b/components/menu/OverrideContext.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { NoCompactStyle } from '../space/Compact'; import type { MenuProps } from './menu'; +import { supportNodeRef } from 'rc-util'; // Used for Dropdown only export interface OverrideContextProps { @@ -36,7 +37,11 @@ export const OverrideProvider = React.forwardRef< return ( - {React.cloneElement(children as React.ReactElement, { ref })} + + {supportNodeRef(children) + ? React.cloneElement(children as React.ReactElement, { ref }) + : children} + ); }); diff --git a/components/table/__tests__/Table.filter.test.tsx b/components/table/__tests__/Table.filter.test.tsx index 129f1d9c4761..df1ffe210589 100644 --- a/components/table/__tests__/Table.filter.test.tsx +++ b/components/table/__tests__/Table.filter.test.tsx @@ -2834,4 +2834,24 @@ describe('Table.filter', () => { true, ); }); + + it('should not crash when filterDropdown is boolean', () => { + const tableProps = { + key: 'stabletable', + rowKey: 'name', + dataSource: [], + columns: [ + { + title: 'Name', + dataIndex: 'name', + filterDropdown: true, + }, + ], + }; + + const { container } = render(createTable(tableProps)); + + // User opens filter Dropdown. + fireEvent.click(container.querySelector('.ant-dropdown-trigger.ant-table-filter-trigger')!); + }); }); diff --git a/package.json b/package.json index 7ae4fd84bb03..33487b37dc7e 100644 --- a/package.json +++ b/package.json @@ -154,7 +154,7 @@ "rc-tree": "~5.7.6", "rc-tree-select": "~5.11.0", "rc-upload": "~4.3.0", - "rc-util": "^5.32.0", + "rc-util": "^5.37.0", "scroll-into-view-if-needed": "^3.0.3", "throttle-debounce": "^5.0.0" }, From e91f92778451ca31c8647225fd4bb1e38744d58c Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Thu, 24 Aug 2023 09:47:24 +0800 Subject: [PATCH 47/88] fix: radio should work in tree (#44380) * fix: radio should work in tree * chore: code clean --- components/radio/style/index.tsx | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/components/radio/style/index.tsx b/components/radio/style/index.tsx index 18bdc10dd3fe..f2bf9bb8e0cb 100644 --- a/components/radio/style/index.tsx +++ b/components/radio/style/index.tsx @@ -223,14 +223,7 @@ const getRadioBasicStyle: GenerateStyle = (token) => { [`${componentCls}-input`]: { position: 'absolute', - insetBlockStart: 0, - insetInlineEnd: 0, - insetBlockEnd: 0, - insetInlineStart: 0, - width: 0, - height: 0, - padding: 0, - margin: 0, + inset: 0, zIndex: 1, cursor: 'pointer', opacity: 0, From eaa86351e4051f90c769462fbd71938333ad53c0 Mon Sep 17 00:00:00 2001 From: xr0master Date: Thu, 24 Aug 2023 08:26:26 +0300 Subject: [PATCH 48/88] ColorPresets: fix duplicate keys (#44370) * ColorPresets: fix duplicate keys Signed-off-by: xr0master * Update components/color-picker/components/ColorPresets.tsx add lint disable Signed-off-by: xr0master --------- Signed-off-by: xr0master --- components/color-picker/components/ColorPresets.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/components/color-picker/components/ColorPresets.tsx b/components/color-picker/components/ColorPresets.tsx index 0d5cdaacbe31..a6b99f1fecc3 100644 --- a/components/color-picker/components/ColorPresets.tsx +++ b/components/color-picker/components/ColorPresets.tsx @@ -59,9 +59,10 @@ const ColorPresets: FC = ({ prefixCls, presets, value: color, children: (
{Array.isArray(preset?.colors) && preset.colors?.length > 0 ? ( - preset.colors.map((presetColor: Color) => ( + preset.colors.map((presetColor: Color, index: number) => ( Date: Thu, 24 Aug 2023 13:27:59 +0800 Subject: [PATCH 49/88] docs: Fix Form provider demo (#44391) * docs: fix provider demo * test: update snapshot --- .../__snapshots__/demo-extend.test.ts.snap | 25 ++++++++++++++++++- .../__snapshots__/demo.test.tsx.snap | 19 ++++++++++++++ components/form/demo/form-context.tsx | 12 ++++++--- 3 files changed, 52 insertions(+), 4 deletions(-) diff --git a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap index 23adac0b8e45..6426df8ec537 100644 --- a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -6833,6 +6833,25 @@ exports[`renders components/form/demo/form-context.tsx extend context correctly
+
+
+
+
+
+
+
+
+
@@ -6928,7 +6947,11 @@ exports[`renders components/form/demo/form-context.tsx extend context correctly `; -exports[`renders components/form/demo/form-context.tsx extend context correctly 2`] = `[]`; +exports[`renders components/form/demo/form-context.tsx extend context correctly 2`] = ` +[ + "Warning: [antd: Form.Item] \`name\` is only used for validate React element. If you are using Form.Item as layout display, please remove \`name\` instead.", +] +`; exports[`renders components/form/demo/form-in-modal.tsx extend context correctly 1`] = `
diff --git a/components/form/__tests__/__snapshots__/demo.test.tsx.snap b/components/form/__tests__/__snapshots__/demo.test.tsx.snap index 76849810c1f1..ca2c8593097b 100644 --- a/components/form/__tests__/__snapshots__/demo.test.tsx.snap +++ b/components/form/__tests__/__snapshots__/demo.test.tsx.snap @@ -4025,6 +4025,25 @@ exports[`renders components/form/demo/form-context.tsx correctly 1`] = `
+
+
+
+
+
+
+
+
+
diff --git a/components/form/demo/form-context.tsx b/components/form/demo/form-context.tsx index 2b689925eadc..284cda9537e6 100644 --- a/components/form/demo/form-context.tsx +++ b/components/form/demo/form-context.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useRef, useState } from 'react'; import { SmileOutlined, UserOutlined } from '@ant-design/icons'; -import { Avatar, Button, Form, Input, InputNumber, Modal, Typography } from 'antd'; +import { Avatar, Button, Form, Input, InputNumber, Modal, Space, Typography } from 'antd'; import type { FormInstance } from 'antd/es/form'; const layout = { @@ -93,6 +93,10 @@ const App: React.FC = () => { + + {/* Create a hidden field to make Form instance record this */} +
``` -## Design Token +## 主题变量（Design Token） diff --git a/components/message/index.zh-CN.md b/components/message/index.zh-CN.md index b140e999dc0c..9fcf97ac229f 100644 --- a/components/message/index.zh-CN.md +++ b/components/message/index.zh-CN.md @@ -112,7 +112,7 @@ message.config({ | rtl | 是否开启 RTL 模式 | boolean | false | | | top | 消息距离顶部的位置 | number | 8 | | -## Design Token +## 主题变量（Design Token） diff --git a/components/modal/index.zh-CN.md b/components/modal/index.zh-CN.md index a293e7b14676..1cc62dd224a4 100644 --- a/components/modal/index.zh-CN.md +++ b/components/modal/index.zh-CN.md @@ -181,7 +181,7 @@ return
{contextHolder}
; const confirmed = await modal.confirm({ ... }); ``` -## Design Token +## 主题变量（Design Token） diff --git a/components/notification/index.zh-CN.md b/components/notification/index.zh-CN.md index 53bdfb4e08dc..cc84cfccd8db 100644 --- a/components/notification/index.zh-CN.md +++ b/components/notification/index.zh-CN.md @@ -110,7 +110,7 @@ notification.config({ | top | 消息从顶部弹出时，距离顶部的位置，单位像素 | number | 24 | | | maxCount | 最大显示数, 超过限制时，最早的消息会被自动关闭 | number | - | 4.17.0 | -## Design Token +## 主题变量（Design Token） diff --git a/components/pagination/index.zh-CN.md b/components/pagination/index.zh-CN.md index 7085ca158947..cd390892df5a 100644 --- a/components/pagination/index.zh-CN.md +++ b/components/pagination/index.zh-CN.md @@ -60,6 +60,6 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*WM86SrBC8TsAAA | onChange | 页码或 `pageSize` 改变的回调，参数是改变后的页码及每页条数 | function(page, pageSize) | - | | | onShowSizeChange | pageSize 变化的回调 | function(current, size) | - | | -## Design Token +## 主题变量（Design Token） diff --git a/components/popconfirm/index.zh-CN.md b/components/popconfirm/index.zh-CN.md index 7f289f4b013d..743256bbb927 100644 --- a/components/popconfirm/index.zh-CN.md +++ b/components/popconfirm/index.zh-CN.md @@ -52,7 +52,7 @@ demo: 更多属性请参考 [Tooltip](/components/tooltip-cn/#api)。 -## Design Token +## 主题变量（Design Token） diff --git a/components/popover/index.zh-CN.md b/components/popover/index.zh-CN.md index 27ded634f532..218e67f14496 100644 --- a/components/popover/index.zh-CN.md +++ b/components/popover/index.zh-CN.md @@ -45,7 +45,7 @@ demo: 请确保 `Popover` 的子元素能接受 `onMouseEnter`、`onMouseLeave`、`onFocus`、`onClick` 事件。 -## Design Token +## 主题变量（Design Token） diff --git a/components/progress/index.zh-CN.md b/components/progress/index.zh-CN.md index 646c1ecdc6e6..4e8a4d6cbacc 100644 --- a/components/progress/index.zh-CN.md +++ b/components/progress/index.zh-CN.md @@ -77,6 +77,6 @@ demo: | gapPosition | 仪表盘进度条缺口位置 | `top` \| `bottom` \| `left` \| `right` | `bottom` | - | | strokeWidth | 仪表盘进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 | - | -## Design Token +## 主题变量（Design Token） diff --git a/components/qr-code/index.zh-CN.md b/components/qr-code/index.zh-CN.md index b14cd3b2aa25..1e31634998c4 100644 --- a/components/qr-code/index.zh-CN.md +++ b/components/qr-code/index.zh-CN.md @@ -53,7 +53,7 @@ tag: New | status | 二维码状态 | `active \| expired \| loading ` | `active` | | onRefresh | 点击"点击刷新"的回调 | `() => void` | - | -## Design Token +## 主题变量（Design Token） diff --git a/components/radio/index.zh-CN.md b/components/radio/index.zh-CN.md index f7c35d6f8744..4a9d2ef1dc91 100644 --- a/components/radio/index.zh-CN.md +++ b/components/radio/index.zh-CN.md @@ -74,6 +74,6 @@ demo: | blur() | 移除焦点 | | focus() | 获取焦点 | -## Design Token +## 主题变量（Design Token） diff --git a/components/rate/index.zh-CN.md b/components/rate/index.zh-CN.md index cb0b4293639e..d554adbf538c 100644 --- a/components/rate/index.zh-CN.md +++ b/components/rate/index.zh-CN.md @@ -58,6 +58,6 @@ demo: | blur() | 移除焦点 | | focus() | 获取焦点 | -## Design Token +## 主题变量（Design Token） diff --git a/components/result/index.zh-CN.md b/components/result/index.zh-CN.md index afb3d7bff3f8..1867fb58350e 100644 --- a/components/result/index.zh-CN.md +++ b/components/result/index.zh-CN.md @@ -38,6 +38,6 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-0kxQrbHx2kAAA | subTitle | subTitle 文字 | ReactNode | - | | title | title 文字 | ReactNode | - | -## Design Token +## 主题变量（Design Token） diff --git a/components/segmented/index.zh-CN.md b/components/segmented/index.zh-CN.md index c38be07ee8ee..8962c30fe51a 100644 --- a/components/segmented/index.zh-CN.md +++ b/components/segmented/index.zh-CN.md @@ -50,6 +50,6 @@ demo: | size | 控件尺寸 | `large` \| `middle` \| `small` | `middle` | | | value | 当前选中的值 | string \| number | | | -## Design Token +## 主题变量（Design Token） diff --git a/components/select/index.zh-CN.md b/components/select/index.zh-CN.md index 4e4937f9c6fd..1dd288826d50 100644 --- a/components/select/index.zh-CN.md +++ b/components/select/index.zh-CN.md @@ -136,7 +136,7 @@ demo: | key | Key | string | - | | | label | 组名 | string \| React.Element | - | | -## Design Token +## 主题变量（Design Token） diff --git a/components/skeleton/index.zh-CN.md b/components/skeleton/index.zh-CN.md index c5b12708c1b4..3b670bbbc84a 100644 --- a/components/skeleton/index.zh-CN.md +++ b/components/skeleton/index.zh-CN.md @@ -79,6 +79,6 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*VcjGQLSrYdcAAA | active | 是否展示动画效果 | boolean | false | | size | 设置输入框的大小 | `large` \| `small` \| `default` | - | -## Design Token +## 主题变量（Design Token） diff --git a/components/slider/index.zh-CN.md b/components/slider/index.zh-CN.md index 438a12a56be8..1bf140a85f0a 100644 --- a/components/slider/index.zh-CN.md +++ b/components/slider/index.zh-CN.md @@ -80,6 +80,6 @@ demo: | blur() | 移除焦点 | | | focus() | 获取焦点 | | -## Design Token +## 主题变量（Design Token） diff --git a/components/space/index.zh-CN.md b/components/space/index.zh-CN.md index 1c3f05aea4d1..6bc6b2011438 100644 --- a/components/space/index.zh-CN.md +++ b/components/space/index.zh-CN.md @@ -81,6 +81,6 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*37T2R6O9oi0AAA | ---- | --------------------- | ----- | | item | 设置 `Space` 包裹的子组件 | 5.6.0 | -## Design Token +## 主题变量（Design Token） diff --git a/components/spin/index.zh-CN.md b/components/spin/index.zh-CN.md index 47eefecae496..ad3f977fca92 100644 --- a/components/spin/index.zh-CN.md +++ b/components/spin/index.zh-CN.md @@ -45,6 +45,6 @@ demo: 你可以自定义全局默认 Spin 的元素。 -## Design Token +## 主题变量（Design Token） diff --git a/components/statistic/index.zh-CN.md b/components/statistic/index.zh-CN.md index 363b4915632f..ec0224fcd164 100644 --- a/components/statistic/index.zh-CN.md +++ b/components/statistic/index.zh-CN.md @@ -58,6 +58,6 @@ demo: | onFinish | 倒计时完成时触发 | () => void | - | | | onChange | 倒计时时间变化时触发 | (value: number) => void | - | 4.16.0 | -## Design Token +## 主题变量（Design Token） diff --git a/components/steps/index.zh-CN.md b/components/steps/index.zh-CN.md index 768fdf55463b..596915b0f227 100644 --- a/components/steps/index.zh-CN.md +++ b/components/steps/index.zh-CN.md @@ -84,6 +84,6 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*cFsBQLA0b7UAAA | subTitle | 子标题 | ReactNode | - | | | title | 标题 | ReactNode | - | | -## Design Token +## 主题变量（Design Token） diff --git a/components/switch/index.zh-CN.md b/components/switch/index.zh-CN.md index 51402a7f8f7a..386829a6a32a 100644 --- a/components/switch/index.zh-CN.md +++ b/components/switch/index.zh-CN.md @@ -50,6 +50,6 @@ demo: | blur() | 移除焦点 | | focus() | 获取焦点 | -## Design Token +## 主题变量（Design Token） diff --git a/components/table/index.zh-CN.md b/components/table/index.zh-CN.md index 4b81b5fe7fdf..c85414db1392 100644 --- a/components/table/index.zh-CN.md +++ b/components/table/index.zh-CN.md @@ -290,9 +290,9 @@ const columns = [ ## 在 TypeScript 中使用 ```tsx +import React from 'react'; import { Table } from 'antd'; import type { ColumnsType } from 'antd/es/table'; -import React from 'react'; interface User { key: number; @@ -329,7 +329,7 @@ export default Demo; TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/serene-platform-0jo5t)。 -## Design Token +## 主题变量（Design Token） diff --git a/components/tabs/index.zh-CN.md b/components/tabs/index.zh-CN.md index e6f60916bb1a..0a76a2d7c959 100644 --- a/components/tabs/index.zh-CN.md +++ b/components/tabs/index.zh-CN.md @@ -83,6 +83,6 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。 | label | 选项卡头显示文字 | ReactNode | - | | children | 选项卡头显示内容 | ReactNode | - | -## Design Token +## 主题变量（Design Token） diff --git a/components/tag/index.zh-CN.md b/components/tag/index.zh-CN.md index 2898ec49b829..f2706c2f2f4d 100644 --- a/components/tag/index.zh-CN.md +++ b/components/tag/index.zh-CN.md @@ -54,6 +54,6 @@ demo: | checked | 设置标签的选中状态 | boolean | false | | onChange | 点击标签时触发的回调 | (checked) => void | - | -## Design Token +## 主题变量（Design Token） diff --git a/components/time-picker/index.zh-CN.md b/components/time-picker/index.zh-CN.md index 07364a66ea69..1702aae7870b 100644 --- a/components/time-picker/index.zh-CN.md +++ b/components/time-picker/index.zh-CN.md @@ -121,7 +121,7 @@ type RangeDisabledTime = ( }; ``` -## Design Token +## 主题变量（Design Token） diff --git a/components/timeline/index.zh-CN.md b/components/timeline/index.zh-CN.md index d25d9d7f0a9a..8879f4ef46f6 100644 --- a/components/timeline/index.zh-CN.md +++ b/components/timeline/index.zh-CN.md @@ -70,6 +70,6 @@ return ( | children | 设置内容 | ReactNode | - | | position | 自定义节点位置 | `left` \| `right` | - | -## Design Token +## 主题变量（Design Token） diff --git a/components/tooltip/index.zh-CN.md b/components/tooltip/index.zh-CN.md index f0de98cdfc83..23d538f7e515 100644 --- a/components/tooltip/index.zh-CN.md +++ b/components/tooltip/index.zh-CN.md @@ -63,7 +63,7 @@ demo: | zIndex | 设置 Tooltip 的 `z-index` | number | - | | | onOpenChange | 显示隐藏的回调 | (open: boolean) => void | - | 4.23.0 | -## Design Token +## 主题变量（Design Token） diff --git a/components/tour/index.zh-CN.md b/components/tour/index.zh-CN.md index 3e09e4d85dc6..348293ee8b48 100644 --- a/components/tour/index.zh-CN.md +++ b/components/tour/index.zh-CN.md @@ -64,6 +64,6 @@ tag: New | prevButtonProps | 上一步按钮的属性 | `{ children: ReactNode; onClick: Function }` | - | | | scrollIntoViewOptions | 是否支持当前元素滚动到视窗内，也可传入配置指定滚动视窗的相关参数，默认跟随 Tour 的 `scrollIntoViewOptions` 属性 | `boolean \| ScrollIntoViewOptions` | `true` | 5.2.0 | -## Design Token +## 主题变量（Design Token） diff --git a/components/transfer/index.zh-CN.md b/components/transfer/index.zh-CN.md index 4a61c6304be3..555549f6574c 100644 --- a/components/transfer/index.zh-CN.md +++ b/components/transfer/index.zh-CN.md @@ -97,7 +97,7 @@ Transfer 支持接收 `children` 自定义渲染列表，并返回以下参数 return record.uid} />; ``` -## Design Token +## 主题变量（Design Token） diff --git a/components/tree-select/index.zh-CN.md b/components/tree-select/index.zh-CN.md index 00a15d34dd7b..8c2fbd8b2126 100644 --- a/components/tree-select/index.zh-CN.md +++ b/components/tree-select/index.zh-CN.md @@ -110,7 +110,7 @@ demo: | title | 树节点显示的内容 | ReactNode | `---` | | | value | 默认根据此属性值进行筛选（其值在整个树范围内唯一） | string | - | | -## Design Token +## 主题变量（Design Token） diff --git a/components/tree/index.zh-CN.md b/components/tree/index.zh-CN.md index c4d985bdaf8c..58fc9db305ab 100644 --- a/components/tree/index.zh-CN.md +++ b/components/tree/index.zh-CN.md @@ -126,7 +126,7 @@ demo: | --- | --- | | scrollTo({ key: string \| number; align?: 'top' \| 'bottom' \| 'auto'; offset?: number }) | 虚拟滚动下，滚动到指定 key 条目 | -## Design Token +## 主题变量（Design Token） diff --git a/components/typography/index.zh-CN.md b/components/typography/index.zh-CN.md index c9af276415a3..8ef789c95d9c 100644 --- a/components/typography/index.zh-CN.md +++ b/components/typography/index.zh-CN.md @@ -156,7 +156,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LT2jR41Uj2EAAA | onEllipsis | 触发省略时的回调 | function(ellipsis) | - | 4.2.0 | | onExpand | 点击展开时的回调 | function(event) | - | | -## Design Token +## 主题变量（Design Token） diff --git a/components/upload/index.zh-CN.md b/components/upload/index.zh-CN.md index 8a2cd417cd2a..08f2ede31837 100644 --- a/components/upload/index.zh-CN.md +++ b/components/upload/index.zh-CN.md @@ -123,7 +123,7 @@ demo: 3. `event` 上传中的服务端响应内容，包含了上传进度等信息，高级浏览器支持。 -## Design Token +## 主题变量（Design Token） diff --git a/components/watermark/index.zh-CN.md b/components/watermark/index.zh-CN.md index 7fbe6b894742..d68a6d031c58 100644 --- a/components/watermark/index.zh-CN.md +++ b/components/watermark/index.zh-CN.md @@ -54,7 +54,7 @@ tag: New | fontFamily | 字体类型 | string | sans-serif | | | fontStyle | 字体样式 | `none` \| `normal` \| `italic` \| `oblique` | normal | | -## Design Token +## 主题变量（Design Token） From a265257e7dec17bcb178fc3af535525d706d0b12 Mon Sep 17 00:00:00 2001 From: AKing <827088092@qq.com> Date: Wed, 30 Aug 2023 23:24:19 +0800 Subject: [PATCH 86/88] fix: record the completed length of the last calculation as the transison length (#43058) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: record the completed width of the last calculation as the transition width in the calculation * test: add test case * test: correct test case name * refactor：rename conut to count --------- Co-authored-by: afc163 --- components/typography/Base/Ellipsis.tsx | 7 ++ .../typography/__tests__/ellipsis.test.tsx | 76 ++++++++++++++++++- 2 files changed, 82 insertions(+), 1 deletion(-) diff --git a/components/typography/Base/Ellipsis.tsx b/components/typography/Base/Ellipsis.tsx index 9e840e3a0453..9383e1369460 100644 --- a/components/typography/Base/Ellipsis.tsx +++ b/components/typography/Base/Ellipsis.tsx @@ -86,6 +86,8 @@ const Ellipsis: React.FC = ({ 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 [singleRowHeight, setSingleRowHeight] = React.useState(0); @@ -98,6 +100,10 @@ const Ellipsis: React.FC = ({ 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); + return children(nodeList, false); } @@ -153,6 +159,7 @@ const Ellipsis: React.FC = ({ setCutLength([nextStartLen, nextMidLen, nextEndLen]); } else { setWalkingState(DONE_WITH_ELLIPSIS); + setLastLen(midLen); onEllipsis(true); } } diff --git a/components/typography/__tests__/ellipsis.test.tsx b/components/typography/__tests__/ellipsis.test.tsx index 0306cad46f52..e50a47e06d41 100644 --- a/components/typography/__tests__/ellipsis.test.tsx +++ b/components/typography/__tests__/ellipsis.test.tsx @@ -45,7 +45,7 @@ describe('Typography.Ellipsis', () => { computeSpy = jest .spyOn(window, 'getComputedStyle') - .mockImplementation(() => ({ fontSize: 12 } as unknown as CSSStyleDeclaration)); + .mockImplementation(() => ({ fontSize: 12 }) as unknown as CSSStyleDeclaration); }); afterEach(() => { @@ -433,4 +433,78 @@ 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; + }); }); From d0cc758d0e5110ea960c070c3bef8381d8e19149 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: Thu, 31 Aug 2023 09:37:51 +0800 Subject: [PATCH 87/88] fix: Form sm 24 not working (#44541) * fix: Form sm 24 not working * chore: comment it --- components/form/style/index.ts | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/components/form/style/index.ts b/components/form/style/index.ts index 66e435054a98..ae82154bf88f 100644 --- a/components/form/style/index.ts +++ b/components/form/style/index.ts @@ -323,7 +323,7 @@ const genFormItemStyle: GenerateStyle = (token) => { }; const genHorizontalStyle: GenerateStyle = (token) => { - const { componentCls, formItemCls, rootPrefixCls } = token; + const { componentCls, formItemCls } = token; return { [`${componentCls}-horizontal`]: { @@ -338,9 +338,14 @@ const genHorizontalStyle: GenerateStyle = (token) => { minWidth: 0, }, + // Do not change this to `ant-col-24`! `-24` match all the responsive rules // https://github.com/ant-design/ant-design/issues/32980 - [`${formItemCls}-label.${rootPrefixCls}-col-24 + ${formItemCls}-control`]: { - minWidth: 'unset', + // https://github.com/ant-design/ant-design/issues/34903 + // https://github.com/ant-design/ant-design/issues/44538 + [`${formItemCls}-label[class$='-24'], ${formItemCls}-label[class*='-24 ']`]: { + [`& + ${formItemCls}-control`]: { + minWidth: 'unset', + }, }, }, }; From ae53a452f2da2b25d6c741bbee4e454e35e38208 Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 31 Aug 2023 09:48:54 +0800 Subject: [PATCH 88/88] docs: add help text for token customization (#44540) * docs: add help text for token customization * docs: add help text for token customization * docs: add help text for token customization * docs: add help text for token customization --- .../builtins/ComponentTokenTable/index.tsx | 66 +++++++++++++++---- 1 file changed, 54 insertions(+), 12 deletions(-) diff --git a/.dumi/theme/builtins/ComponentTokenTable/index.tsx b/.dumi/theme/builtins/ComponentTokenTable/index.tsx index 54f645583a09..7d64eb2d5aed 100644 --- a/.dumi/theme/builtins/ComponentTokenTable/index.tsx +++ b/.dumi/theme/builtins/ComponentTokenTable/index.tsx @@ -1,11 +1,10 @@ -import { RightOutlined } from '@ant-design/icons'; +import { RightOutlined, LinkOutlined, QuestionCircleOutlined } from '@ant-design/icons'; import { createStyles, css, useTheme } from 'antd-style'; -import Link from '../../common/Link'; import { getDesignToken } from 'antd-token-previewer'; import React, { useMemo, useState } from 'react'; import tokenMeta from 'antd/es/version/token-meta.json'; import tokenData from 'antd/es/version/token.json'; -import { ConfigProvider, Table } from 'antd'; +import { ConfigProvider, Table, Popover, Typography } from 'antd'; import useLocale from '../../../hooks/useLocale'; import { useColumns } from '../TokenTable'; @@ -21,7 +20,7 @@ const locales = { globalToken: '全局 Token', help: '如何定制？', customizeTokenLink: '/docs/react/customize-theme-cn#修改主题变量', - customizeComponentTokenLink: '/docs/react/customize-theme-cn#修改主题变量', + customizeComponentTokenLink: '/docs/react/customize-theme-cn#修改组件变量', }, en: { token: 'Token Name', @@ -30,7 +29,7 @@ const locales = { value: 'Default Value', componentToken: 'Component Token', globalToken: 'Global Token', - help: 'How to customize?', + help: 'How to use?', customizeTokenLink: '/docs/react/customize-theme#customize-design-token', customizeComponentTokenLink: 'docs/react/customize-theme#customize-component-token', }, @@ -53,8 +52,8 @@ const useStyle = createStyles(() => ({ } `, help: css` - margin-left: 6px; - font-size: 13px; + margin-left: 8px; + font-size: 12px; font-weight: normal; color: #999; a { @@ -66,16 +65,18 @@ const useStyle = createStyles(() => ({ interface SubTokenTableProps { defaultOpen?: boolean; title: string; - help: React.ReactNode; + helpText: React.ReactNode; + helpLink: string; tokens: string[]; component?: string; } const SubTokenTable: React.FC = ({ defaultOpen, - help, tokens, title, + helpText, + helpLink, component, }) => { const [, lang] = useLocale(locales); @@ -127,13 +128,52 @@ const SubTokenTable: React.FC = ({ }) .filter(Boolean); + const code = component + ? ` + ... +` + : ` + ... +`; + return ( <>
setOpen(!open)}>

{title} - ({help}) + + 
{code}
+ + + {helpText} + + + } + > + + + {helpText} + +

{open && ( @@ -178,7 +218,8 @@ const ComponentTokenTable: React.FC = ({ component }) {tokenMeta.components[component] && ( {locale.help}} + helpText={locale.help} + helpLink={locale.customizeTokenLink} tokens={tokenMeta.components[component].map((item) => item.token)} component={component} defaultOpen @@ -186,7 +227,8 @@ const ComponentTokenTable: React.FC = ({ component }) )} {locale.help}} + helpText={locale.help} + helpLink={locale.customizeComponentTokenLink} tokens={mergedGlobalTokens} />