+ );
+};
+
+it('Cached RowContext is working', () => {
+ const wrapper = mount();
+ const childCount = wrapper.find('#child_count').text();
+
+ wrapper.find('#parent_btn').at(0).simulate('click');
+ expect(wrapper.find('#parent_count').text()).toBe('2');
+ // child component won't rerender
+ expect(wrapper.find('#child_count').text()).toBe(childCount);
+
+ wrapper.find('#parent_btn').at(0).simulate('click');
+ expect(wrapper.find('#parent_count').text()).toBe('3');
+ // child component won't rerender
+ expect(wrapper.find('#child_count').text()).toBe(childCount);
+});
diff --git a/components/grid/row.tsx b/components/grid/row.tsx
index 28f22bba4e..c154f50489 100644
--- a/components/grid/row.tsx
+++ b/components/grid/row.tsx
@@ -116,11 +116,13 @@ const Row = React.forwardRef((props, ref) => {
rowStyle.marginBottom = verticalGutter;
}
- const rowContext = React.useMemo(() => ({ gutter: gutters, wrap, supportFlexGap }), [
- gutters,
- wrap,
- supportFlexGap,
- ]);
+ // "gutters" is a new array in each rendering phase, it'll make 'React.useMemo' effectless.
+ // So we deconstruct "gutters" variable here.
+ const [gutterH, gutterV] = gutters;
+ const rowContext = React.useMemo(
+ () => ({ gutter: [gutterH, gutterV] as [number, number], wrap, supportFlexGap }),
+ [gutterH, gutterV, wrap, supportFlexGap],
+ );
return (
diff --git a/components/layout/Sider.tsx b/components/layout/Sider.tsx
index 01ac838d41..a1efbf8b42 100644
--- a/components/layout/Sider.tsx
+++ b/components/layout/Sider.tsx
@@ -136,7 +136,7 @@ const Sider = React.forwardRef(
mql?.removeListener(responsiveHandler);
}
};
- }, []);
+ }, [breakpoint]); // in order to accept dynamic 'breakpoint' property, we need to add 'breakpoint' into dependency array.
useEffect(() => {
const uniqueId = generateId('ant-sider-');
diff --git a/components/layout/__tests__/dynamic-breakpoint.test.tsx b/components/layout/__tests__/dynamic-breakpoint.test.tsx
new file mode 100644
index 0000000000..b5cab4834e
--- /dev/null
+++ b/components/layout/__tests__/dynamic-breakpoint.test.tsx
@@ -0,0 +1,47 @@
+import React, { useState } from 'react';
+import { mount } from 'enzyme';
+import Sider from '../Sider';
+
+const Content = () => {
+ const [breakpoint, setBreakpoint] = useState('sm');
+ const toggleBreakpoint = () => {
+ if (breakpoint === 'sm') {
+ setBreakpoint('lg');
+ } else {
+ setBreakpoint('sm');
+ }
+ };
+ return (
+
+
+
+ );
+};
+
+it('Dynamic breakpoint in Sider component', () => {
+ const add = jest.fn();
+ const remove = jest.fn();
+ jest.spyOn(window, 'matchMedia').mockReturnValue({
+ matches: true,
+ addEventListener: add,
+ removeEventListener: remove,
+ } as any);
+
+ const wrapper = mount();
+ const newMatch = window.matchMedia as jest.Mock;
+
+ // subscribe at first
+ expect(newMatch.mock.calls.length).toBe(1);
+ expect(add.mock.calls.length).toBe(1);
+ expect(remove.mock.calls.length).toBe(0);
+
+ wrapper.find('#toggle').at(0).simulate('click');
+ // unsubscribe then subscribe again
+ expect(newMatch.mock.calls.length).toBe(2);
+ expect(add.mock.calls.length).toBe(2);
+ expect(remove.mock.calls.length).toBe(1);
+
+ jest.restoreAllMocks();
+});
diff --git a/components/menu/style/index.less b/components/menu/style/index.less
index f8ed296080..d4cdcfff08 100644
--- a/components/menu/style/index.less
+++ b/components/menu/style/index.less
@@ -315,7 +315,7 @@
position: absolute;
width: 6px;
height: 1.5px;
- background-color: currentColor;
+ background-color: currentcolor;
border-radius: 2px;
transition: background @animation-duration-slow @ease-in-out,
transform @animation-duration-slow @ease-in-out, top @animation-duration-slow @ease-in-out,
diff --git a/components/style/mixins/iconfont.less b/components/style/mixins/iconfont.less
index 000e1ecd7b..dd32dd73ac 100644
--- a/components/style/mixins/iconfont.less
+++ b/components/style/mixins/iconfont.less
@@ -6,7 +6,7 @@
text-align: center;
text-transform: none;
vertical-align: -0.125em; // for SVG icon, see https://blog.prototypr.io/align-svg-icons-to-text-and-say-goodbye-to-font-icons-d44b3d7b26b4
- text-rendering: optimizeLegibility;
+ text-rendering: optimizelegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
diff --git a/components/table/style/index.less b/components/table/style/index.less
index 88e6e8d1b6..abf4bd9079 100644
--- a/components/table/style/index.less
+++ b/components/table/style/index.less
@@ -508,13 +508,13 @@
&:focus,
&:hover,
&:active {
- border-color: currentColor;
+ border-color: currentcolor;
}
&::before,
&::after {
position: absolute;
- background: currentColor;
+ background: currentcolor;
transition: transform 0.3s ease-out;
content: '';
}
diff --git a/components/tabs/style/index.less b/components/tabs/style/index.less
index d6ffe501c0..4947f57a33 100644
--- a/components/tabs/style/index.less
+++ b/components/tabs/style/index.less
@@ -171,7 +171,7 @@
&&-active &-btn {
color: @tabs-highlight-color;
- text-shadow: 0 0 0.25px currentColor;
+ text-shadow: 0 0 0.25px currentcolor;
}
&&-disabled {
diff --git a/components/upload/index.en-US.md b/components/upload/index.en-US.md
index 900babf5d6..10903a9177 100644
--- a/components/upload/index.en-US.md
+++ b/components/upload/index.en-US.md
@@ -94,7 +94,7 @@ When uploading state change, it returns:
## FAQ
-### How to implement upload server side?
+### How do I implement upload server side?
- You can consult [jQuery-File-Upload](https://github.com/blueimp/jQuery-File-Upload/wiki#server-side) about how to implement server side upload interface.
- There is a mock example of [express](https://github.com/react-component/upload/blob/master/server.js) in rc-upload.
@@ -107,10 +107,10 @@ Please set property `url` of each item in `fileList` to control content of link.
See .
-### Why `fileList` in control will not trigger `onChange` `status` update when file not in the list?
+### Why will the `fileList` that's in control not trigger `onChange` `status` update when the file is not in the list?
-`onChange` only trigger when file in the list, it will ignore left events when removed from the list. Please note that there exist bug which makes event still trigger even the file is not in the list before `4.13.0`.
+`onChange` will only trigger when the file is in the list, it will ignore any events removed from the list. Please note that there does exist a bug which makes an event still trigger even when the file is not in the list before `4.13.0`.
-### Why sometime `onChange` return File object and sometime return { originFileObj: File }?
+### Why does `onChange` sometimes return File object and other times return { originFileObj: File }?
For compatible case, we return File object when `beforeUpload` return `false`. It will merge to `{ originFileObj: File }` in next major version. Current version is compatible to get origin file by `info.file.originFileObj`. You can change this before major release.
diff --git a/docs/react/i18n.en-US.md b/docs/react/i18n.en-US.md
index a464fe7ee9..cd16e2c9d5 100644
--- a/docs/react/i18n.en-US.md
+++ b/docs/react/i18n.en-US.md
@@ -100,3 +100,29 @@ See more usage at [ConfigProvider](/components/config-provider).
## Adding new language
If your language is not in above list, feel free to create a locale package based on the [en_US](https://github.com/ant-design/ant-design/blob/master/components/locale/en_US.tsx) lanugage pack and send us a pull request. For reference, you can refer to the pull request of adding the [Azerbaijani](https://github.com/ant-design/ant-design/pull/21387) language as a sample.
+
+Do it step by step:
+
+1. Fork `antd` and git clone to local, switch to `feature` branch, pull it to make sure it's up-to-date, create a new branch based on `feature` branch, all work will be done in it.
+
+ ```bash
+ git clone git@github.com:/ant-design.git
+ cd ant-design/
+ git remote add upstream origin git@github.com:ant-design/ant-design.git
+ git checkout -b
+ ```
+
+2. Add the language support for [rc-picker](https://github.com/react-component/picker), for example [this](https://github.com/react-component/picker/blob/master/src/locale/en_US.ts).
+3. Add the language support for [rc-pagination](https://github.com/react-component/pagination), for example [this](https://github.com/react-component/pagination/blob/master/src/locale/en_US.js).
+4. Wait for `rc-picker` and `rc-pagination` to release the new version containing the above.
+5. Update the `rc-picker` and `rc-pagination` versions in `antd` and add the remaining other necessary content for the language. for example [Azerbaijani PR](https://github.com/ant-design/ant-design/pull/21387).
+6. Add a test case for the language in [index.test.js](https://github.com/ant-design/ant-design/blob/master/components/locale-provider/__tests__/index.test.js).
+7. update snapshots, you may also need to delete `node_modules`, lock files (`yarn.lock` or `package-lock.json`) and reinstall at first.
+
+ ```bash
+ npm run test -- components/locale-provider -u
+ ```
+
+8. Add the language to i18n list [docs/react/i18n.zh-CN.md](https://github.com/ant-design/ant-design/blob/master/docs/react/i18n.en-US.md) and [docs/react/i18n.zh-CN.md](https://github.com/ant-design/ant-design/blob/master/docs/react/i18n.zh-CN.md).
+9. Watch out the CI status, and if it failed, look at the logs and make some changes until it all passes.
+10. Ok, now everything is ready for review.
diff --git a/docs/react/i18n.zh-CN.md b/docs/react/i18n.zh-CN.md
index b37d8a024c..bddcc4f3d2 100644
--- a/docs/react/i18n.zh-CN.md
+++ b/docs/react/i18n.zh-CN.md
@@ -98,6 +98,32 @@ return (
如果你找不到你需要的语言包，欢迎你在 [英文语言包](https://github.com/ant-design/ant-design/blob/master/components/locale/en_US.tsx) 的基础上创建一个新的语言包，并给我们发一个 Pull Request，可以参考 [阿塞拜疆语的 PR](https://github.com/ant-design/ant-design/pull/21387)。
+基本步骤如下：
+
+1. Fork `antd` 并 git clone 到本地，切换到 `feature` 分支，执行一次拉取确保最新，基于 `feature` 分支切换一个新分支，以下工作将在新分支完成。
+
+ ```bash
+ git clone git@github.com:/ant-design.git
+ cd ant-design/
+ git remote add upstream origin git@github.com:ant-design/ant-design.git
+ git checkout -b
+ ```
+
+2. 为 [rc-picker](https://github.com/react-component/picker) 添加对应语言，参考 [这个](https://github.com/react-component/picker/blob/master/src/locale/en_US.ts)。
+3. 为 [rc-pagination](https://github.com/react-component/pagination) 添加对应语言，参考 [这个](https://github.com/react-component/pagination/blob/master/src/locale/en_US.js)。
+4. 等待 `rc-picker` 和 `rc-pagination` 发布含上述内容的最低版本。
+5. 参考 [阿塞拜疆语的 PR](https://github.com/ant-design/ant-design/pull/21387) 向 `antd` 发起 PR，完善对应语言的其他内容和更新 `rc-picker` 和 `rc-pagination` 版本。
+6. 在 [index.test.js](https://github.com/ant-design/ant-design/blob/master/components/locale-provider/__tests__/index.test.js) 添加该语言的测试用例。
+7. 更新 snapshot，在这之前或许你还需要先删除 `node_modules` 和 lock 文件 （`yarn.lock` or `package-lock.json`） 并全新安装。
+
+ ```bash
+ npm run test -- components/locale-provider -u
+ ```
+
+8. 更新 [docs/react/i18n.zh-CN.md](https://github.com/ant-design/ant-design/blob/master/docs/react/i18n.zh-CN.md) 和 [docs/react/i18n.zh-CN.md](https://github.com/ant-design/ant-design/blob/master/docs/react/i18n.zh-CN.md)，将对应语言添加到文档列表。
+9. 观察 CI 是否通过，若未通过，根据日志进行修改直至通过。
+10. 万事俱备等待 review 。
+
## i18n 项目示例
你可以参考 [Ant Design Pro 国际化文档](https://pro.ant.design/docs/i18n-cn) 查看完整的国际化项目示例。
diff --git a/docs/resources.en-US.md b/docs/resources.en-US.md
index de0b008c34..b2dc6b8044 100644
--- a/docs/resources.en-US.md
+++ b/docs/resources.en-US.md
@@ -70,6 +70,10 @@ Please find below some of the design resources and tools about Ant Design that w
- https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*dxzdQYWlmjMAAAAAAAAAAAAAARQnAQ
- Use fully components and templates on JiShi Design
- https://js.design/antd
+- Ant for Plasmic
+ - https://user-images.githubusercontent.com/7129/149994038-76214796-cd6a-4e80-b0a4-117e8edac050.png
+ - Drag/drop live Ant components and manipulate props in this React visual builder
+ - https://www.plasmic.app/ant-design
## Articles
diff --git a/package.json b/package.json
index dd3c5863ba..c886639144 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "antd",
- "version": "4.18.4",
+ "version": "4.18.5",
"description": "An enterprise-class UI design language and React components implementation",
"title": "Ant Design",
"keywords": [
@@ -272,7 +272,7 @@
"rimraf": "^3.0.0",
"scrollama": "^3.0.0",
"semver": "^7.3.5",
- "simple-git": "^2.23.0",
+ "simple-git": "^3.0.0",
"string-replace-loader": "^3.0.3",
"stylelint": "^14.0.0",
"stylelint-config-prettier": "^9.0.2",
diff --git a/scripts/post-script.js b/scripts/post-script.js
index 2f8c50a638..d9c21aad26 100644
--- a/scripts/post-script.js
+++ b/scripts/post-script.js
@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
const fetch = require('isomorphic-fetch');
const semver = require('semver');
const moment = require('moment');