diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index 8cfdbc3446..04a21111a9 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -15,6 +15,16 @@ timeline: true --- +## 4.15.6 + +`2021-05-18` + +- 🐞 Upload will ignore `accept` if it's invalidate MIME type to follow native behavior. [#30549](https://github.com/ant-design/ant-design/pull/30549) +- 💄 Remove reset style of `th` `text-align`. [#30399](https://github.com/ant-design/ant-design/pull/30399) [@lbwa](https://github.com/lbwa) +- 🌐 Locale + - 🇮🇳 Improve hi_IN locale. [#30541](https://github.com/ant-design/ant-design/pull/30541) [@jaideepghosh](https://github.com/jaideepghosh) + - 🇧🇷 Improve pt-BR locale. [#30532](https://github.com/ant-design/ant-design/pull/30532) [@buzs](https://github.com/buzs) + ## 4.15.5 `2021-05-10` diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index 4c10bdda0d..ccd185ead4 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -15,6 +15,16 @@ timeline: true --- +## 4.15.6 + +`2021-05-18` + +- 🐞 Upload `accept` 将无视无效的 MIME 类型，以更贴近原生行为。[#30549](https://github.com/ant-design/ant-design/pull/30549) +- 💄 移除全局样式中对 `th` 的 `text-align` 属性的重置。[#30399](https://github.com/ant-design/ant-design/pull/30399) [@lbwa](https://github.com/lbwa) +- 🌐 国际化 + - 🇮🇳 补充印地语国际化文案。[#30541](https://github.com/ant-design/ant-design/pull/30541) [@jaideepghosh](https://github.com/jaideepghosh) + - 🇧🇷 补充葡萄牙语（巴西）国际化文案。[#30532](https://github.com/ant-design/ant-design/pull/30532) [@buzs](https://github.com/buzs) + ## 4.15.5 `2021-05-10` diff --git a/components/_util/motion.tsx b/components/_util/motion.tsx index 0b5fa529f7..2ded358b41 100644 --- a/components/_util/motion.tsx +++ b/components/_util/motion.tsx @@ -1,11 +1,12 @@ import { CSSMotionProps, MotionEventHandler, MotionEndEventHandler } from 'rc-motion'; +import { MotionEvent } from 'rc-motion/lib/interface'; // ================== Collapse Motion ================== const getCollapsedHeight: MotionEventHandler = () => ({ height: 0, opacity: 0 }); const getRealHeight: MotionEventHandler = node => ({ height: node.scrollHeight, opacity: 1 }); const getCurrentHeight: MotionEventHandler = node => ({ height: node.offsetHeight }); -const skipOpacityTransition: MotionEndEventHandler = (_, event) => - (event as TransitionEvent).propertyName === 'height'; +const skipOpacityTransition: MotionEndEventHandler = (_, event: MotionEvent) => + event?.deadline === true || (event as TransitionEvent).propertyName === 'height'; const collapseMotion: CSSMotionProps = { motionName: 'ant-motion-collapse', diff --git a/components/anchor/Anchor.tsx b/components/anchor/Anchor.tsx index e0aec98753..23de276c70 100644 --- a/components/anchor/Anchor.tsx +++ b/components/anchor/Anchor.tsx @@ -163,12 +163,6 @@ export default class Anchor extends React.Component = []; const container = this.getContainer(); this.links.forEach(link => { @@ -229,14 +223,15 @@ export default class Anchor extends React.Component { const { activeLink } = this.state; - const { onChange } = this.props; - - if (activeLink !== link) { - this.setState({ - activeLink: link, - }); - onChange?.(link); + const { onChange, getCurrentAnchor } = this.props; + if (activeLink === link) { + return; } + // https://github.com/ant-design/ant-design/issues/30584 + this.setState({ + activeLink: typeof getCurrentAnchor === 'function' ? getCurrentAnchor() : link, + }); + onChange?.(link); }; handleScroll = () => { diff --git a/components/anchor/__tests__/Anchor.test.tsx b/components/anchor/__tests__/Anchor.test.tsx index ad54eb82b3..41c3104e62 100644 --- a/components/anchor/__tests__/Anchor.test.tsx +++ b/components/anchor/__tests__/Anchor.test.tsx @@ -359,6 +359,23 @@ describe('Anchor Render', () => { expect(onChange).toHaveBeenCalledWith(hash2); }); + // https://github.com/ant-design/ant-design/issues/30584 + it('should trigger onChange when have getCurrentAnchor', async () => { + const hash1 = getHashUrl(); + const hash2 = getHashUrl(); + const onChange = jest.fn(); + const wrapper = mount( + hash1}> + + + , + ); + expect(onChange).toHaveBeenCalledTimes(1); + wrapper.instance().handleScrollTo(hash2); + expect(onChange).toHaveBeenCalledTimes(2); + expect(onChange).toHaveBeenCalledWith(hash2); + }); + it('invalid hash', async () => { const wrapper = mount( diff --git a/components/collapse/__tests__/index.test.js b/components/collapse/__tests__/index.test.js index ad8d7209ee..07a4587564 100644 --- a/components/collapse/__tests__/index.test.js +++ b/components/collapse/__tests__/index.test.js @@ -1,5 +1,6 @@ import React from 'react'; import { mount } from 'enzyme'; +import { act } from 'react-dom/test-utils'; import { sleep } from '../../../tests/utils'; import { resetWarned } from '../../_util/devWarning'; @@ -101,4 +102,39 @@ describe('Collapse', () => { wrapper.find('.ant-collapse-header').simulate('click'); expect(wrapper.find('.ant-collapse-item-active').length).toBe(0); }); + + it('should end motion when set activeKey while hiding', async () => { + jest.useFakeTimers(); + jest.spyOn(window, 'requestAnimationFrame').mockImplementation(cb => { + setTimeout(cb, 16.66); + }); + + let setActiveKeyOuter; + const Test = () => { + const [activeKey, setActiveKey] = React.useState(); + setActiveKeyOuter = setActiveKey; + return ( + + ); + }; + + const wrapper = mount(); + + await act(async () => { + setActiveKeyOuter('1'); + await Promise.resolve(); + jest.runAllTimers(); + }); + + expect(wrapper.render().find('.ant-motion-collapse').length).toBe(0); + + window.requestAnimationFrame.mockRestore(); + jest.useRealTimers(); + }); }); diff --git a/components/collapse/style/index.less b/components/collapse/style/index.less index 7b83e895a0..ca1d251185 100644 --- a/components/collapse/style/index.less +++ b/components/collapse/style/index.less @@ -24,7 +24,6 @@ > .@{collapse-prefix-cls}-header { position: relative; padding: @collapse-header-padding; - padding-left: @collapse-header-padding-extra; color: @heading-color; line-height: @line-height-base; cursor: pointer; @@ -32,17 +31,10 @@ .clearfix(); .@{collapse-prefix-cls}-arrow { - .iconfont-mixin(); - - position: absolute; - top: ((@font-size-base * @line-height-base - @font-size-sm) / 2); - left: @collapse-header-arrow-left; display: inline-block; - padding: @collapse-header-padding; - padding-right: 0; - padding-bottom: 0; - padding-left: 0; + margin-right: 12px; font-size: @font-size-sm; + vertical-align: -1px; & svg { transition: transform 0.24s; diff --git a/components/config-provider/__tests__/index.test.js b/components/config-provider/__tests__/index.test.js index 514c4d897a..83f93d9aca 100644 --- a/components/config-provider/__tests__/index.test.js +++ b/components/config-provider/__tests__/index.test.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useState } from 'react'; import { mount } from 'enzyme'; import { SmileOutlined } from '@ant-design/icons'; import ConfigProvider, { ConfigContext } from '..'; @@ -57,6 +57,30 @@ describe('ConfigProvider', () => { expect(wrapper.find('button').props().className).toEqual('bamboo-btn'); }); + it('dynamic prefixCls', () => { + const DynamicPrefixCls = () => { + const [prefixCls, setPrefixCls] = useState('bamboo'); + return ( +
+ + + +
+ ); + }; + + const wrapper = mount(); + + expect(wrapper.find('button').last().props().className).toEqual('bamboo-btn'); + wrapper.find('.toggle-button').first().simulate('click'); + expect(wrapper.find('button').last().props().className).toEqual('light-btn'); + }); + it('iconPrefixCls', () => { const wrapper = mount( diff --git a/components/config-provider/demo/prefixCls.md b/components/config-provider/demo/prefixCls.md index b7efba778d..3d9781a7cc 100644 --- a/components/config-provider/demo/prefixCls.md +++ b/components/config-provider/demo/prefixCls.md @@ -15,18 +15,29 @@ debug: true Config component and icon prefixCls. ```jsx -import { ConfigProvider, Select } from 'antd'; +import { ConfigProvider, Select, Button } from 'antd'; import { SmileOutlined } from '@ant-design/icons'; +import React, { useState } from 'react'; // Ant Design site use `es` module for view // but do not replace related lib `lib` with `es` // which do not show correct in site. // We may need do convert in site also. -const FormSizeDemo = () => ( - - - + + + + ); +}; ReactDOM.render(, mountNode); ``` diff --git a/components/config-provider/index.tsx b/components/config-provider/index.tsx index 47a3946881..2c669a4c69 100644 --- a/components/config-provider/index.tsx +++ b/components/config-provider/index.tsx @@ -149,7 +149,7 @@ const ProviderChildren: React.FC = props => { return suffixCls ? `${mergedPrefixCls}-${suffixCls}` : mergedPrefixCls; }, - [parentContext.getPrefixCls], + [parentContext.getPrefixCls, props.prefixCls], ); const config = { diff --git a/components/notification/style/index.less b/components/notification/style/index.less index a998f11948..7ded96f53d 100644 --- a/components/notification/style/index.less +++ b/components/notification/style/index.less @@ -31,14 +31,19 @@ cursor: pointer; } - &-hook-holder, + &-hook-holder { + position: relative; + } + &-notice { position: relative; width: @notification-width; max-width: ~'calc(100vw - @{notification-margin-edge} * 2)'; margin-bottom: @notification-margin-bottom; margin-left: auto; + padding: @notification-padding; overflow: hidden; + line-height: @line-height-base; word-wrap: break-word; background: @notification-bg; border-radius: @border-radius-base; @@ -49,16 +54,6 @@ margin-right: auto; margin-left: 0; } - } - - &-hook-holder > &-notice { - margin-bottom: 0; - box-shadow: none; - } - - &-notice { - padding: @notification-padding; - line-height: @line-height-base; &-message { margin-bottom: 8px; diff --git a/components/space/index.tsx b/components/space/index.tsx index 6bebb9fff2..12a5ef1009 100644 --- a/components/space/index.tsx +++ b/components/space/index.tsx @@ -15,7 +15,7 @@ export const SpaceContext = React.createContext({ export type SpaceSize = SizeType | number; -export interface SpaceProps { +export interface SpaceProps extends React.HTMLAttributes { prefixCls?: string; className?: string; style?: React.CSSProperties; diff --git a/components/table/style/index.less b/components/table/style/index.less index b5d5f4b117..9394c63cf3 100644 --- a/components/table/style/index.less +++ b/components/table/style/index.less @@ -107,7 +107,8 @@ transition: background 0.3s; // ========================= Nest Table =========================== - > .@{table-prefix-cls}-wrapper:only-child { + > .@{table-prefix-cls}-wrapper:only-child, + > .@{table-prefix-cls}-expanded-row-fixed > .@{table-prefix-cls}-wrapper:only-child { .@{table-prefix-cls} { margin: -@table-padding-vertical -@table-padding-horizontal -@table-padding-vertical (@table-padding-horizontal + ceil(@font-size-sm * 1.4)); diff --git a/components/transfer/index.en-US.md b/components/transfer/index.en-US.md index 8bc4b064dd..ce924e4d2f 100644 --- a/components/transfer/index.en-US.md +++ b/components/transfer/index.en-US.md @@ -47,14 +47,14 @@ One or more elements can be selected from either column, one click on the proper Transfer accept `children` to customize render list, using follow props: -| Property | Description | Type | Version | -| --- | --- | --- | --- | -| direction | List render direction | `left` \| `right` | | -| disabled | Disable list or not | boolean | | -| filteredItems | Filtered items | RecordType\[] | | -| selectedKeys | Selected items | string\[] | | -| onItemSelect | Select item | (key: string, selected: boolean) | | -| onItemSelectAll | Select a group of items | (keys: string\[], selected: boolean) | | +| Property | Description | Type | Version | +| --------------- | ----------------------- | ------------------------------------ | ------- | +| direction | List render direction | `left` \| `right` | | +| disabled | Disable list or not | boolean | | +| filteredItems | Filtered items | RecordType\[] | | +| selectedKeys | Selected items | string\[] | | +| onItemSelect | Select item | (key: string, selected: boolean) | | +| onItemSelectAll | Select a group of items | (keys: string\[], selected: boolean) | | #### example @@ -77,4 +77,4 @@ return record.uid} />; ### How to support fetch and present data from a remote server in Transfer column. -In order to keep the page number synchronized, you can disable columns you checked without removing the option: +In order to keep the page number synchronized, you can disable columns you checked without removing the option: diff --git a/components/transfer/index.zh-CN.md b/components/transfer/index.zh-CN.md index c5db150964..6a6cebbda7 100644 --- a/components/transfer/index.zh-CN.md +++ b/components/transfer/index.zh-CN.md @@ -49,14 +49,14 @@ cover: https://gw.alipayobjects.com/zos/alicdn/QAXskNI4G/Transfer.svg Transfer 支持接收 `children` 自定义渲染列表，并返回以下参数： -| 参数 | 说明 | 类型 | 版本 | -| --- | --- | --- | --- | -| direction | 渲染列表的方向 | `left` \| `right` | | -| disabled | 是否禁用列表 | boolean | | -| filteredItems | 过滤后的数据 | RecordType\[] | | -| selectedKeys | 选中的条目 | string\[] | | -| onItemSelect | 勾选条目 | (key: string, selected: boolean) | | -| onItemSelectAll | 勾选一组条目 | (keys: string\[], selected: boolean) | | +| 参数 | 说明 | 类型 | 版本 | +| --------------- | -------------- | ------------------------------------ | ---- | +| direction | 渲染列表的方向 | `left` \| `right` | | +| disabled | 是否禁用列表 | boolean | | +| filteredItems | 过滤后的数据 | RecordType\[] | | +| selectedKeys | 选中的条目 | string\[] | | +| onItemSelect | 勾选条目 | (key: string, selected: boolean) | | +| onItemSelectAll | 勾选一组条目 | (keys: string\[], selected: boolean) | | #### 参考示例 @@ -79,4 +79,4 @@ return record.uid} />; ### 怎样让 Transfer 穿梭框列表支持异步数据加载 -为了保持页码同步，在勾选时可以不移除选项而以禁用代替： +为了保持页码同步，在勾选时可以不移除选项而以禁用代替： diff --git a/components/typography/Base.tsx b/components/typography/Base.tsx index ba107cabad..f2896e59ba 100644 --- a/components/typography/Base.tsx +++ b/components/typography/Base.tsx @@ -524,6 +524,7 @@ class Base extends React.Component { [`${prefixCls}-${type}`]: type, [`${prefixCls}-disabled`]: disabled, [`${prefixCls}-ellipsis`]: rows, + [`${prefixCls}-single-line`]: rows === 1, [`${prefixCls}-ellipsis-single-line`]: cssTextOverflow, [`${prefixCls}-ellipsis-multiple-line`]: cssLineClamp, }, diff --git a/components/typography/__tests__/__snapshots__/demo.test.js.snap b/components/typography/__tests__/__snapshots__/demo.test.js.snap index b157134f56..9aebc22519 100644 --- a/components/typography/__tests__/__snapshots__/demo.test.js.snap +++ b/components/typography/__tests__/__snapshots__/demo.test.js.snap @@ -231,7 +231,7 @@ Array [ /> ,
Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team.
, @@ -241,7 +241,7 @@ Array [ Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. , Ant Design, a design language for background applications, is refined by Ant UED Team. @@ -333,7 +333,7 @@ Array [ /> ,
Ant Design, a design language for background applications, is refined by Ant UED Team. This is a nest sample 2333 2333 @@ -853,7 +853,7 @@ Array [ />
,
To be, or not to be, that is a question: Whether it is nobler in the mind to suffer. The slings and arrows of outrageous fortune Or to take arms against a sea of troubles, And by opposing end them? To die: to sleep; No more; and by a sleep to say we end The heart-ache and the thousand natural shocks That flesh is heir to, 'tis a consummation Devoutly to be wish'd. To die, to sleep To sleep- perchance to dream: ay, there's the rub! For in that sleep of death what dreams may come When we have shuffled off this mortal coil, Must give us pause. There 's the respect That makes calamity of so long life--William Shakespeare diff --git a/components/typography/style/index.less b/components/typography/style/index.less index db1d4e4f6b..04f7566856 100644 --- a/components/typography/style/index.less +++ b/components/typography/style/index.less @@ -259,9 +259,12 @@ } // ============ Ellipsis ============ + &-single-line { + white-space: nowrap; + } + &-ellipsis-single-line { overflow: hidden; - white-space: nowrap; text-overflow: ellipsis; // https://blog.csdn.net/iefreer/article/details/50421025 diff --git a/package.json b/package.json index c816dd63cd..ac69b9e58e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "antd", - "version": "4.16.0-alpha.2", + "version": "4.15.6", "description": "An enterprise-class UI design language and React components implementation", "title": "Ant Design", "keywords": [ diff --git a/site/theme/static/template.html b/site/theme/static/template.html index 84580dde5c..ed7d9a89cf 100644 --- a/site/theme/static/template.html +++ b/site/theme/static/template.html @@ -116,5 +116,12 @@ a.appendChild(r); })(window, document, '//static.hotjar.com/c/hotjar-', '.js?sv='); + +