Browse Source

chore: auto merge branchs (#29733)

chore: merge master into feature
pull/29736/head
github-actions[bot] 4 years ago
committed by GitHub
parent
commit
34e7dca02f
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
  1. 4
      components/alert/demo/error-boundary.md
  2. 2
      components/auto-complete/__tests__/__snapshots__/demo.test.js.snap
  3. 10
      components/auto-complete/__tests__/index.test.js
  4. 8
      components/grid/row.tsx
  5. 9
      components/modal/demo/footer.md
  6. 2
      components/modal/style/confirm.less
  7. 2
      components/modal/style/modal.less
  8. 4
      components/modal/style/rtl.less
  9. 3
      components/table/demo/drag-sorting.md
  10. 63
      components/table/index.en-US.md
  11. 1
      components/table/index.zh-CN.md
  12. 1
      components/upload/Upload.tsx
  13. 6
      components/upload/UploadList/ListItem.tsx
  14. 1
      components/upload/UploadList/index.tsx
  15. 34
      components/upload/__tests__/upload.test.js
  16. 8
      components/upload/__tests__/uploadlist.test.js
  17. 10
      components/upload/demo/drag-sorting.md
  18. 56
      components/upload/utils.tsx
  19. 2
      docs/react/faq.en-US.md
  20. 14
      docs/react/faq.zh-CN.md
  21. 2
      docs/react/recommendation.en-US.md
  22. 2
      docs/react/recommendation.zh-CN.md
  23. 6
      package.json

4
components/alert/demo/error-boundary.md

@ -1,8 +1,8 @@
--- ---
order: 8 order: 8
title: title:
zh-CN: ErrorBoundary zh-CN: React 错误处理
en-US: React 错误处理 en-US: ErrorBoundary
--- ---
## zh-CN ## zh-CN

2
components/auto-complete/__tests__/__snapshots__/demo.test.js.snap

@ -153,7 +153,7 @@ exports[`renders ./components/auto-complete/demo/custom.md correctly 1`] = `
aria-haspopup="listbox" aria-haspopup="listbox"
aria-owns="undefined_list" aria-owns="undefined_list"
autocomplete="off" autocomplete="off"
class="ant-input ant-select-selection-search-input" class="ant-input ant-select-selection-search-input custom"
placeholder="input here" placeholder="input here"
role="combobox" role="combobox"
style="height:50px" style="height:50px"

10
components/auto-complete/__tests__/index.test.js

@ -1,6 +1,7 @@
import React from 'react'; import React from 'react';
import { mount } from 'enzyme'; import { mount } from 'enzyme';
import AutoComplete from '..'; import AutoComplete from '..';
import Input from '../../input';
import mountTest from '../../../tests/shared/mountTest'; import mountTest from '../../../tests/shared/mountTest';
import rtlTest from '../../../tests/shared/rtlTest'; import rtlTest from '../../../tests/shared/rtlTest';
@ -78,4 +79,13 @@ describe('AutoComplete', () => {
// eslint-disable-next-line no-console // eslint-disable-next-line no-console
console.warn.mockRestore(); console.warn.mockRestore();
}); });
it('should not override custom input className', () => {
const wrapper = mount(
<AutoComplete>
<Input className="custom" />
</AutoComplete>,
);
expect(wrapper.find('input').hasClass('custom')).toBe(true);
});
}); });

8
components/grid/row.tsx

@ -103,13 +103,15 @@ const Row = React.forwardRef<HTMLDivElement, RowProps>((props, ref) => {
const horizontalGutter = gutters[0] > 0 ? gutters[0] / -2 : undefined; const horizontalGutter = gutters[0] > 0 ? gutters[0] / -2 : undefined;
const verticalGutter = gutters[1] > 0 ? gutters[1] / -2 : undefined; const verticalGutter = gutters[1] > 0 ? gutters[1] / -2 : undefined;
rowStyle.marginLeft = horizontalGutter; if (horizontalGutter) {
rowStyle.marginRight = horizontalGutter; rowStyle.marginLeft = horizontalGutter;
rowStyle.marginRight = horizontalGutter;
}
if (supportFlexGap) { if (supportFlexGap) {
// Set gap direct if flex gap support // Set gap direct if flex gap support
[, rowStyle.rowGap] = gutters; [, rowStyle.rowGap] = gutters;
} else { } else if (verticalGutter) {
rowStyle.marginTop = verticalGutter; rowStyle.marginTop = verticalGutter;
rowStyle.marginBottom = verticalGutter; rowStyle.marginBottom = verticalGutter;
} }

9
components/modal/demo/footer.md

@ -62,6 +62,15 @@ class App extends React.Component {
<Button key="submit" type="primary" loading={loading} onClick={this.handleOk}> <Button key="submit" type="primary" loading={loading} onClick={this.handleOk}>
Submit Submit
</Button>, </Button>,
<Button
key="link"
href="https://google.com"
type="primary"
loading={loading}
onClick={this.handleOk}
>
Search on Google
</Button>,
]} ]}
> >
<p>Some contents...</p> <p>Some contents...</p>

2
components/modal/style/confirm.less

@ -49,7 +49,7 @@
float: right; float: right;
margin-top: 24px; margin-top: 24px;
button + button { .@{ant-prefix}-btn + .@{ant-prefix}-btn {
margin-bottom: 0; margin-bottom: 0;
margin-left: 8px; margin-left: 8px;
} }

2
components/modal/style/modal.less

@ -93,7 +93,7 @@
@modal-footer-border-color-split; @modal-footer-border-color-split;
border-radius: 0 0 @border-radius-base @border-radius-base; border-radius: 0 0 @border-radius-base @border-radius-base;
button + button { .@{ant-prefix}-btn + .@{ant-prefix}-btn {
margin-bottom: 0; margin-bottom: 0;
margin-left: 8px; margin-left: 8px;
} }

4
components/modal/style/rtl.less

@ -23,7 +23,7 @@
.@{dialog-wrap-rtl-cls} & { .@{dialog-wrap-rtl-cls} & {
text-align: left; text-align: left;
} }
button + button { .@{ant-prefix}-btn + .@{ant-prefix}-btn {
.@{dialog-wrap-rtl-cls} & { .@{dialog-wrap-rtl-cls} & {
margin-right: 8px; margin-right: 8px;
margin-left: 0; margin-left: 0;
@ -54,7 +54,7 @@
.@{dialog-wrap-rtl-cls} & { .@{dialog-wrap-rtl-cls} & {
float: left; float: left;
} }
button + button { .@{ant-prefix}-btn + .@{ant-prefix}-btn {
.@{dialog-wrap-rtl-cls} & { .@{dialog-wrap-rtl-cls} & {
margin-right: 8px; margin-right: 8px;
margin-left: 0; margin-left: 0;

3
components/table/demo/drag-sorting.md

@ -45,7 +45,8 @@ const DragableBodyRow = ({ index, moveRow, className, style, ...restProps }) =>
); );
const [, drag] = useDrag( const [, drag] = useDrag(
() => ({ () => ({
item: { type, index }, type,
item: { index },
collect: monitor => ({ collect: monitor => ({
isDragging: monitor.isDragging(), isDragging: monitor.isDragging(),
}), }),

63
components/table/index.en-US.md

@ -113,37 +113,38 @@ Same as `onRow` `onHeaderRow` `onCell` `onHeaderCell`
One of the Table `columns` prop for describing the table's columns, Column has the same API. One of the Table `columns` prop for describing the table's columns, Column has the same API.
| Property | Description | Type | Default | Version | | | Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- | --- | | --- | --- | --- | --- | --- |
| align | The specify which way that column is aligned | `left` \| `right` \| `center` | `left` | | | | align | The specify which way that column is aligned | `left` \| `right` \| `center` | `left` | |
| className | The className of this column | string | - | | | | className | The className of this column | string | - | |
| colSpan | Span of this column's title | number | - | | | | colSpan | Span of this column's title | number | - | |
| dataIndex | Display field of the data record, support nest path by string array | string \| string\[] | - | | | | dataIndex | Display field of the data record, support nest path by string array | string \| string\[] | - | |
| defaultFilteredValue | Default filtered values | string\[] | - | | | | defaultFilteredValue | Default filtered values | string\[] | - | |
| defaultSortOrder | Default order of sorted values | `ascend` \| `descend` | - | | | | defaultSortOrder | Default order of sorted values | `ascend` \| `descend` | - | |
| ellipsis | The ellipsis cell content, not working with sorter and filters for now.<br />tableLayout would be `fixed` when `ellipsis` is `true` or `{ showTitle?: boolean }` | boolean \| {showTitle?: boolean } | false | showTitle: 4.3.0 | | | editable | Whether column can be edited | boolean | false | |
| filterDropdown | Customized filter overlay | ReactNode \| (props: [FilterDropdownProps](https://git.io/fjP5h)) => ReactNode | - | | | | ellipsis | The ellipsis cell content, not working with sorter and filters for now.<br />tableLayout would be `fixed` when `ellipsis` is `true` or `{ showTitle?: boolean }` | boolean \| {showTitle?: boolean } | false | showTitle: 4.3.0 |
| filterDropdownVisible | Whether `filterDropdown` is visible | boolean | - | | | | filterDropdown | Customized filter overlay | ReactNode \| (props: [FilterDropdownProps](https://git.io/fjP5h)) => ReactNode | - | |
| filtered | Whether the `dataSource` is filtered | boolean | false | | | | filterDropdownVisible | Whether `filterDropdown` is visible | boolean | - | |
| filteredValue | Controlled filtered value, filter icon will highlight | string\[] | - | | | | filtered | Whether the `dataSource` is filtered | boolean | false | |
| filterIcon | Customized filter icon | ReactNode \| (filtered: boolean) => ReactNode | - | | | | filteredValue | Controlled filtered value, filter icon will highlight | string\[] | - | |
| filterMultiple | Whether multiple filters can be selected | boolean | true | | | | filterIcon | Customized filter icon | ReactNode \| (filtered: boolean) => ReactNode | - | |
| filters | Filter menu config | object\[] | - | | | | filterMultiple | Whether multiple filters can be selected | boolean | true | |
| fixed | (IE not support) Set column to be fixed: `true`(same as left) `'left'` `'right'` | boolean \| string | false | | | | filters | Filter menu config | object\[] | - | |
| key | Unique key of this column, you can ignore this prop if you've set a unique `dataIndex` | string | - | | | | fixed | (IE not support) Set column to be fixed: `true`(same as left) `'left'` `'right'` | boolean \| string | false | |
| render | Renderer of the table cell. The return value should be a ReactNode, or an object for [colSpan/rowSpan config](#components-table-demo-colspan-rowspan) | function(text, record, index) {} | - | | | | key | Unique key of this column, you can ignore this prop if you've set a unique `dataIndex` | string | - | |
| responsive | The list of breakpoints at which to display this column. Always visible if not set. | [Breakpoint](https://github.com/ant-design/ant-design/blob/015109b42b85c63146371b4e32b883cf97b088e8/components/_util/responsiveObserve.ts#L1)\[] | - | 4.2.0 | | | render | Renderer of the table cell. The return value should be a ReactNode, or an object for [colSpan/rowSpan config](#components-table-demo-colspan-rowspan) | function(text, record, index) {} | - | |
| shouldCellUpdate | Control cell render logic | (record, prevRecord) => boolean | - | 4.3.0 | | | responsive | The list of breakpoints at which to display this column. Always visible if not set. | [Breakpoint](https://github.com/ant-design/ant-design/blob/015109b42b85c63146371b4e32b883cf97b088e8/components/_util/responsiveObserve.ts#L1)\[] | - | 4.2.0 |
| showSorterTooltip | If header show next sorter direction tooltip, override `showSorterTooltip` in table | boolean \| [Tooltip props](/components/tooltip/) | true | | | | shouldCellUpdate | Control cell render logic | (record, prevRecord) => boolean | - | 4.3.0 |
| sortDirections | Supported sort way, override `sortDirections` in `Table`, could be `ascend`, `descend` | Array | \[`ascend`, `descend`] | | | | showSorterTooltip | If header show next sorter direction tooltip, override `showSorterTooltip` in table | boolean \| [Tooltip props](/components/tooltip/) | true | |
| sorter | Sort function for local sort, see [Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)'s compareFunction. If you need sort buttons only, set to `true` | function \| boolean | - | | | | sortDirections | Supported sort way, override `sortDirections` in `Table`, could be `ascend`, `descend` | Array | \[`ascend`, `descend`] | |
| sortOrder | Order of sorted values: `'ascend'` `'descend'` `false` | boolean \| string | - | | | | sorter | Sort function for local sort, see [Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)'s compareFunction. If you need sort buttons only, set to `true` | function \| boolean | - | |
| title | Title of this column | ReactNode \| ({ sortOrder, sortColumn, filters }) => ReactNode | - | | | | sortOrder | Order of sorted values: `'ascend'` `'descend'` `false` | boolean \| string | - | |
| width | Width of this column ([width not working?](https://github.com/ant-design/ant-design/issues/13825#issuecomment-449889241)) | string \| number | - | | | | title | Title of this column | ReactNode \| ({ sortOrder, sortColumn, filters }) => ReactNode | - | |
| onCell | Set props on per cell | function(record, rowIndex) | - | | | | width | Width of this column ([width not working?](https://github.com/ant-design/ant-design/issues/13825#issuecomment-449889241)) | string \| number | - | |
| onFilter | Function that determines if the row is displayed when filtered | function(value, record) => boolean | - | | | | onCell | Set props on per cell | function(record, rowIndex) | - | |
| onFilterDropdownVisibleChange | Callback executed when `filterDropdownVisible` is changed | function(visible) {} | - | | | | onFilter | Function that determines if the row is displayed when filtered | function(value, record) => boolean | - | |
| onHeaderCell | Set props on per header cell | function(column) | - | | | | onFilterDropdownVisibleChange | Callback executed when `filterDropdownVisible` is changed | function(visible) {} | - | |
| onHeaderCell | Set props on per header cell | function(column) | - | |
### ColumnGroup ### ColumnGroup

1
components/table/index.zh-CN.md

@ -128,6 +128,7 @@ const columns = [
| dataIndex | 列数据在数据项中对应的路径,支持通过数组查询嵌套路径 | string \| string\[] | - | | | dataIndex | 列数据在数据项中对应的路径,支持通过数组查询嵌套路径 | string \| string\[] | - | |
| defaultFilteredValue | 默认筛选值 | string\[] | - | | | defaultFilteredValue | 默认筛选值 | string\[] | - | |
| defaultSortOrder | 默认排序顺序 | `ascend` \| `descend` | - | | | defaultSortOrder | 默认排序顺序 | `ascend` \| `descend` | - | |
| editable | 是否可编辑 | boolean | false | |
| ellipsis | 超过宽度将自动省略,暂不支持和排序筛选一起使用。<br />设置为 `true``{ showTitle?: boolean }` 时,表格布局将变成 `tableLayout="fixed"`。 | boolean \| { showTitle?: boolean } | false | showTitle: 4.3.0 | | ellipsis | 超过宽度将自动省略,暂不支持和排序筛选一起使用。<br />设置为 `true``{ showTitle?: boolean }` 时,表格布局将变成 `tableLayout="fixed"`。 | boolean \| { showTitle?: boolean } | false | showTitle: 4.3.0 |
| filterDropdown | 可以自定义筛选菜单,此函数只负责渲染图层,需要自行编写各种交互 | ReactNode \| (props: [FilterDropdownProps](https://git.io/fjP5h)) => ReactNode | - | | | filterDropdown | 可以自定义筛选菜单,此函数只负责渲染图层,需要自行编写各种交互 | ReactNode \| (props: [FilterDropdownProps](https://git.io/fjP5h)) => ReactNode | - | |
| filterDropdownVisible | 用于控制自定义筛选菜单是否可见 | boolean | - | | | filterDropdownVisible | 用于控制自定义筛选菜单是否可见 | boolean | - | |

1
components/upload/Upload.tsx

@ -51,6 +51,7 @@ const InternalUpload: React.ForwardRefRenderFunction<unknown, UploadProps> = (pr
const [mergedFileList, setMergedFileList] = useMergedState(defaultFileList || [], { const [mergedFileList, setMergedFileList] = useMergedState(defaultFileList || [], {
value: fileList, value: fileList,
postState: list => list ?? [],
}); });
const [dragState, setDragState] = React.useState<string>('drop'); const [dragState, setDragState] = React.useState<string>('drop');

6
components/upload/UploadList/ListItem.tsx

@ -238,7 +238,11 @@ const ListItem = React.forwardRef(
<div className={`${prefixCls}-list-item-info`}>{iconAndPreview}</div> <div className={`${prefixCls}-list-item-info`}>{iconAndPreview}</div>
{actions} {actions}
{showProgress && ( {showProgress && (
<CSSMotion motionName={`${rootPrefixCls}-fade`} visible={file.status === 'uploading'}> <CSSMotion
motionName={`${rootPrefixCls}-fade`}
visible={file.status === 'uploading'}
motionDeadline={2000}
>
{({ className: motionClassName }) => { {({ className: motionClassName }) => {
// show loading icon if upload progress listener is disabled // show loading icon if upload progress listener is disabled
const loadingProgress = const loadingProgress =

1
components/upload/UploadList/index.tsx

@ -178,6 +178,7 @@ const InternalUploadList: React.ForwardRefRenderFunction<unknown, UploadListProp
// const transitionName = list.length === 0 ? '' : `${prefixCls}-${animationDirection}`; // const transitionName = list.length === 0 ? '' : `${prefixCls}-${animationDirection}`;
let motionConfig: Omit<CSSMotionListProps, 'onVisibleChanged'> = { let motionConfig: Omit<CSSMotionListProps, 'onVisibleChanged'> = {
motionDeadline: 2000,
motionName: `${prefixCls}-${animationDirection}`, motionName: `${prefixCls}-${animationDirection}`,
keys: motionKeyList, keys: motionKeyList,
motionAppear, motionAppear,

34
components/upload/__tests__/upload.test.js

@ -3,6 +3,7 @@ import React from 'react';
import { mount } from 'enzyme'; import { mount } from 'enzyme';
import { act } from 'react-dom/test-utils'; import { act } from 'react-dom/test-utils';
import produce from 'immer'; import produce from 'immer';
import { cloneDeep } from 'lodash';
import Upload from '..'; import Upload from '..';
import Form from '../../form'; import Form from '../../form';
import { T, wrapFile, getFileItem, removeFileItem } from '../utils'; import { T, wrapFile, getFileItem, removeFileItem } from '../utils';
@ -786,4 +787,37 @@ describe('Upload', () => {
expect(fileList[0].uid).toBeTruthy(); expect(fileList[0].uid).toBeTruthy();
}); });
it('Proxy should support deepClone', async () => {
const onChange = jest.fn();
const wrapper = mount(
<Upload onChange={onChange}>
<button type="button">upload</button>
</Upload>,
);
wrapper.find('input').simulate('change', {
target: {
files: [
new File(['foo'], 'foo.png', {
type: 'image/png',
}),
],
},
});
await sleep();
const { file } = onChange.mock.calls[0][0];
const clone = cloneDeep(file);
expect(Object.getOwnPropertyDescriptor(file, 'name')).toEqual(
expect.objectContaining({ value: 'foo.png' }),
);
['uid', 'name', 'lastModified', 'lastModifiedDate', 'size', 'type'].forEach(key => {
expect(key in clone).toBeTruthy();
});
});
}); });

8
components/upload/__tests__/uploadlist.test.js

@ -1186,4 +1186,12 @@ describe('Upload List', () => {
wrapper.unmount(); wrapper.unmount();
}); });
it('Not crash when fileList is null', () => {
const defaultWrapper = mount(<Upload defaultFileList={null} />);
defaultWrapper.unmount();
const wrapper = mount(<Upload fileList={null} />);
wrapper.unmount();
});
}); });

10
components/upload/demo/drag-sorting.md

@ -47,7 +47,8 @@ const DragableUploadListItem = ({ originNode, moveRow, file, fileList }) => {
); );
const [, drag] = useDrag( const [, drag] = useDrag(
() => ({ () => ({
item: { type, index }, type,
item: { index },
collect: monitor => ({ collect: monitor => ({
isDragging: monitor.isDragging(), isDragging: monitor.isDragging(),
}), }),
@ -55,11 +56,7 @@ const DragableUploadListItem = ({ originNode, moveRow, file, fileList }) => {
[], [],
); );
drop(drag(ref)); drop(drag(ref));
const errorNode = ( const errorNode = <Tooltip title="Upload Error">{originNode.props.children}</Tooltip>;
<Tooltip title="Upload Error" getPopupContainer={() => document.body}>
{originNode.props.children}
</Tooltip>
);
return ( return (
<div <div
ref={ref} ref={ref}
@ -155,7 +152,6 @@ ReactDOM.render(<DragSortingUpload />, mountNode);
#components-upload-demo-drag-sorting .ant-upload-draggable-list-item.drop-over-downward { #components-upload-demo-drag-sorting .ant-upload-draggable-list-item.drop-over-downward {
border-bottom-color: #1890ff; border-bottom-color: #1890ff;
} }
#components-upload-demo-drag-sorting .ant-upload-draggable-list-item.drop-over-upward { #components-upload-demo-drag-sorting .ant-upload-draggable-list-item.drop-over-upward {
border-top-color: #1890ff; border-top-color: #1890ff;
} }

56
components/upload/utils.tsx

@ -4,12 +4,14 @@ export function T() {
return true; return true;
} }
type WrapFile = RcFile | UploadFile;
/** /**
* Wrap file with Proxy to provides more info. Will fallback to object if Proxy not support. * Wrap file with Proxy to provides more info. Will fallback to object if Proxy not support.
* *
* Origin comment: Fix IE file.status problem via coping a new Object * Origin comment: Fix IE file.status problem via coping a new Object
*/ */
export function wrapFile(file: RcFile | UploadFile): UploadFile { export function wrapFile(file: WrapFile): UploadFile {
const filledProps = { const filledProps = {
lastModified: file.lastModified, lastModified: file.lastModified,
lastModifiedDate: file.lastModifiedDate, lastModifiedDate: file.lastModifiedDate,
@ -24,12 +26,16 @@ export function wrapFile(file: RcFile | UploadFile): UploadFile {
if (typeof Proxy !== 'undefined') { if (typeof Proxy !== 'undefined') {
const data = new Map<string | symbol, any>(Object.entries(filledProps)); const data = new Map<string | symbol, any>(Object.entries(filledProps));
const getValue = (key: string | symbol) => {
if (data.has(key)) {
return data.get(key);
}
return (file as any)[key];
};
return new Proxy(file, { return new Proxy(file, {
get(target, key) { get(_, key) {
if (data.has(key)) { return getValue(key);
return data.get(key);
}
return (target as any)[key];
}, },
set(_, key, value) { set(_, key, value) {
data.set(key, value); data.set(key, value);
@ -42,11 +48,39 @@ export function wrapFile(file: RcFile | UploadFile): UploadFile {
const keys = [...Object.keys(target), ...data.keys()]; const keys = [...Object.keys(target), ...data.keys()];
return [...new Set(keys)]; return [...new Set(keys)];
}, },
getOwnPropertyDescriptor() {
return { /**
enumerable: true, * Lodash cloneDeep will use `Object.create(Object.getPrototypeOf(file))` which do not map to
configurable: true, * the correct context. We need do a sub class to make skip fetch the context and still
}; * instance of File. ref: https://github.com/ant-design/ant-design/issues/29646
*/
getPrototypeOf() {
class ProxyFile extends File {}
const fileProtoKeys = Object.keys(File.prototype);
[...fileProtoKeys, 'size', 'type'].forEach(key => {
Object.defineProperty(ProxyFile.prototype, key, {
// Get will never reach but we provide fallback here
/* istanbul ignore next */
get: () => getValue(key),
});
});
return ProxyFile.prototype;
},
getOwnPropertyDescriptor(target, prop) {
if (data.has(prop)) {
return {
value: data.get(prop),
writable: true,
enumerable: true,
configurable: true,
};
}
const descriptor = Object.getOwnPropertyDescriptor(target, prop);
return descriptor;
}, },
}); });
} }

2
docs/react/faq.en-US.md

@ -21,7 +21,7 @@ Related issue: [#3487](https://github.com/ant-design/ant-design/issues/3487) [#3
### How do I prevent `Select Dropdown DatePicker TimePicker Popover Popconfirm` scrolling with the page? ### How do I prevent `Select Dropdown DatePicker TimePicker Popover Popconfirm` scrolling with the page?
Use `<Select getPopupContainer={trigger => trigger.parentElement}>` ([API reference](https://ant.design/components/select-cn/#Select-props)) to render a component inside the scroll area. If you need to config this globally in your application, try `<ConfigProvider getPopupContainer={trigger => trigger.parentElement}>` ([API reference](https://ant.design/components/config-provider-cn/#API)) Use `<Select getPopupContainer={trigger => trigger.parentElement}>` ([API reference](/components/select/#Select-props)) to render a component inside the scroll area. If you need to config this globally in your application, try `<ConfigProvider getPopupContainer={trigger => trigger.parentElement}>` ([API reference](/components/config-provider/#API))
And make sure that parentElement is `position: relative` or `position: absolute`. And make sure that parentElement is `position: relative` or `position: absolute`.

14
docs/react/faq.zh-CN.md

@ -15,13 +15,13 @@ title: FAQ
该问题在 `3.11.0` 后已经解决。如果你仍在使用旧版本,你可以通过 `<Select getPopupContainer={trigger => trigger.parentElement}>` 来在 Popover 中渲染组件,或者使用其他的 `getXxxxContainer` 参数。 该问题在 `3.11.0` 后已经解决。如果你仍在使用旧版本,你可以通过 `<Select getPopupContainer={trigger => trigger.parentElement}>` 来在 Popover 中渲染组件,或者使用其他的 `getXxxxContainer` 参数。
https://ant.design/components/select/#Select-props 可以参考 [Select 属性](/components/select/#Select-props)
相关 issue:[#3487](https://github.com/ant-design/ant-design/issues/3487) [#3438](https://github.com/ant-design/ant-design/issues/3438) 相关 issue:[#3487](https://github.com/ant-design/ant-design/issues/3487) [#3438](https://github.com/ant-design/ant-design/issues/3438)
### `Select Dropdown DatePicker TimePicker Popover Popconfirm` 会跟随滚动条上下移动? ### `Select Dropdown DatePicker TimePicker Popover Popconfirm` 会跟随滚动条上下移动?
使用 `<Select getPopupContainer={trigger => trigger.parentElement}>`([API 文档](https://ant.design/components/select-cn/#Select-props))来将组件渲染到滚动区域内,或者使用其他的 `getXxxxContainer` 参数。如果需要全局解决这个问题,可以使用 `<ConfigProvider getPopupContainer={trigger => trigger.parentElement}>`([API 文档](https://ant.design/components/config-provider-cn/#API)) 使用 `<Select getPopupContainer={trigger => trigger.parentElement}>`([API 文档](/components/select/#Select-props))来将组件渲染到滚动区域内,或者使用其他的 `getXxxxContainer` 参数。如果需要全局解决这个问题,可以使用 `<ConfigProvider getPopupContainer={trigger => trigger.parentElement}>`([API 文档](/components/config-provider/#API))
并且保证 parentElement 是 `position: relative``position: absolute` 并且保证 parentElement 是 `position: relative``position: absolute`
@ -41,19 +41,19 @@ https://ant.design/components/select/#Select-props
### 当我动态改变 `defaultValue` 的时候它并没有生效。 ### 当我动态改变 `defaultValue` 的时候它并没有生效。
`Input`/`Select` 等的 `defaultXxxx`(例如 `defaultValue`)只有在第一次渲染的时候有效,这是 React 的规范,请阅读 [React 的文档](https://reactjs.org/docs/forms.html#controlled-components)。 `Input`/`Select` 等的 `defaultXxxx`(例如 `defaultValue`)只有在第一次渲染的时候有效,这是 React 的规范,请阅读 [React 的文档](https://zh-hans.reactjs.org/docs/forms.html#controlled-components)。
### 为什么修改组件传入的对象或数组属性组件不会更新? ### 为什么修改组件传入的对象或数组属性组件不会更新?
antd 内部会对 props 进行浅比较实现性能优化。当状态变更,你总是应该传递一个新的对象。具体请参考 [React 的文档](https://reactjs.org/docs/thinking-in-react.html) antd 内部会对 props 进行浅比较实现性能优化。当状态变更,你总是应该传递一个新的对象。具体请参考 [React 的文档](https://zh-hans.reactjs.org/docs/thinking-in-react.html)
### 当我设置了 `Input`/`Select` 等的 `value` 时它就无法修改了。 ### 当我设置了 `Input`/`Select` 等的 `value` 时它就无法修改了。
尝试使用 `onChange` 来改变 `value`,请参考 [React 的文档](https://reactjs.org/docs/forms.html#controlled-components)。 尝试使用 `onChange` 来改变 `value`,请参考 [React 的文档](https://zh-hans.reactjs.org/docs/forms.html#controlled-components)。
### 多个组件放一排时没有垂直对齐怎么办? ### 多个组件放一排时没有垂直对齐怎么办?
尝试使用 [Space](https://ant.design/components/space-cn/) 组件来使他们对齐。 尝试使用 [Space](/components/space/) 组件来使他们对齐。
### antd 覆盖了我的全局样式! ### antd 覆盖了我的全局样式!
@ -130,7 +130,7 @@ antd 内部会对 props 进行浅比较实现性能优化。当状态变更,
message/notification/Modal.confirm 等静态方法不同于 `<Button />` 的渲染方式,是单独渲染在 `ReactDOM.render` 生成的 DOM 树节点上,无法共享 ConfigProvider 提供的 context 信息。你有两种解决方式: message/notification/Modal.confirm 等静态方法不同于 `<Button />` 的渲染方式,是单独渲染在 `ReactDOM.render` 生成的 DOM 树节点上,无法共享 ConfigProvider 提供的 context 信息。你有两种解决方式:
1. 使用官方提供的 [message.useMessage](/components/message-cn/#components-message-demo-hooks)、[notification.useNotification](/components/notification-cn/#%E4%B8%BA%E4%BB%80%E4%B9%88-notification-%E4%B8%8D%E8%83%BD%E8%8E%B7%E5%8F%96-context%E3%80%81redux-%E7%9A%84%E5%86%85%E5%AE%B9%E5%92%8C-ConfigProvider-%E7%9A%84-locale/prefixCls-%E9%85%8D%E7%BD%AE%EF%BC%9F) 和 [Modal.useModal](/components/modal-cn/#%E4%B8%BA%E4%BB%80%E4%B9%88-Modal-%E6%96%B9%E6%B3%95%E4%B8%8D%E8%83%BD%E8%8E%B7%E5%8F%96-context%E3%80%81redux%E3%80%81%E7%9A%84%E5%86%85%E5%AE%B9%E5%92%8C-ConfigProvider-locale/prefixCls-%E9%85%8D%E7%BD%AE%EF%BC%9F) 来调用这些方法。 1. 使用官方提供的 [message.useMessage](/components/message-cn/#components-message-demo-hooks)、[notification.useNotification](/components/notification/#%E4%B8%BA%E4%BB%80%E4%B9%88-notification-%E4%B8%8D%E8%83%BD%E8%8E%B7%E5%8F%96-context%E3%80%81redux-%E7%9A%84%E5%86%85%E5%AE%B9%E5%92%8C-ConfigProvider-%E7%9A%84-locale/prefixCls-%E9%85%8D%E7%BD%AE%EF%BC%9F) 和 [Modal.useModal](/components/modal/#%E4%B8%BA%E4%BB%80%E4%B9%88-Modal-%E6%96%B9%E6%B3%95%E4%B8%8D%E8%83%BD%E8%8E%B7%E5%8F%96-context%E3%80%81redux%E3%80%81%E7%9A%84%E5%86%85%E5%AE%B9%E5%92%8C-ConfigProvider-locale/prefixCls-%E9%85%8D%E7%BD%AE%EF%BC%9F) 来调用这些方法。
2. 使用 `ConfigProvider.config` 方法全局设置 `prefixCls` 2. 使用 `ConfigProvider.config` 方法全局设置 `prefixCls`

2
docs/react/recommendation.en-US.md

@ -10,7 +10,7 @@ title: Third-Party Libraries
| Visualization and charts | [AntV Data Visualization](https://antv.vision/en) [🔥 AntV Charting Library](https://g2plot.antv.vision/en) [BizCharts](https://github.com/alibaba/BizCharts) [recharts](https://github.com/recharts/recharts/) [viser](https://viserjs.github.io/) | | Visualization and charts | [AntV Data Visualization](https://antv.vision/en) [🔥 AntV Charting Library](https://g2plot.antv.vision/en) [BizCharts](https://github.com/alibaba/BizCharts) [recharts](https://github.com/recharts/recharts/) [viser](https://viserjs.github.io/) |
| React Hooks Library | [ahooks](https://github.com/alibaba/hooks) | | React Hooks Library | [ahooks](https://github.com/alibaba/hooks) |
| Router | [react-router](https://github.com/ReactTraining/react-router) | | Router | [react-router](https://github.com/ReactTraining/react-router) |
| Layout | [@rebass/grid](https://github.com/rebassjs/grid) [react-blocks](http://whoisandy.github.io/react-blocks/) [react-flexbox-grid](https://github.com/roylee0704/react-flexbox-grid) | | Layout |[react-grid-layout](https://github.com/react-grid-layout/react-grid-layout) [react-grid-system](https://github.com/sealninja/react-grid-system) [rc-dock](https://github.com/ticlo/rc-dock) |
| Drag and drop | [react-beautiful-dnd](https://github.com/atlassian/react-beautiful-dnd/) [react-dnd](https://github.com/gaearon/react-dnd) [react-sortable-hoc](https://github.com/clauderic/react-sortable-hoc) | | Drag and drop | [react-beautiful-dnd](https://github.com/atlassian/react-beautiful-dnd/) [react-dnd](https://github.com/gaearon/react-dnd) [react-sortable-hoc](https://github.com/clauderic/react-sortable-hoc) |
| Code Editor | [react-codemirror2](https://github.com/scniro/react-codemirror2) [react-monaco-editor](https://github.com/superRaytin/react-monaco-editor) | | Code Editor | [react-codemirror2](https://github.com/scniro/react-codemirror2) [react-monaco-editor](https://github.com/superRaytin/react-monaco-editor) |
| Rich Text Editor | [react-quill](https://github.com/zenoamaro/react-quill) [braft-editor](https://github.com/margox/braft-editor) | | Rich Text Editor | [react-quill](https://github.com/zenoamaro/react-quill) [braft-editor](https://github.com/margox/braft-editor) |

2
docs/react/recommendation.zh-CN.md

@ -10,7 +10,7 @@ title: 社区精选组件
| 可视化图表 | [AntV 数据可视化解决方案](https://antv.vision/zh) [🔥 AntV 图表库](https://g2plot.antv.vision/zh) [BizCharts](https://github.com/alibaba/BizCharts) [recharts](https://github.com/recharts/recharts/) [viser](https://viserjs.github.io/) | | 可视化图表 | [AntV 数据可视化解决方案](https://antv.vision/zh) [🔥 AntV 图表库](https://g2plot.antv.vision/zh) [BizCharts](https://github.com/alibaba/BizCharts) [recharts](https://github.com/recharts/recharts/) [viser](https://viserjs.github.io/) |
| React Hooks 库 | [ahooks](https://github.com/alibaba/hooks) | | React Hooks 库 | [ahooks](https://github.com/alibaba/hooks) |
| 路由 | [react-router](https://github.com/ReactTraining/react-router) | | 路由 | [react-router](https://github.com/ReactTraining/react-router) |
| 布局 | [@rebass/grid](https://github.com/rebassjs/grid) [react-blocks](https://github.com/whoisandy/react-blocks) [react-flexbox-grid](https://github.com/roylee0704/react-flexbox-grid) | | 布局 |[react-grid-layout](https://github.com/react-grid-layout/react-grid-layout) [react-grid-system](https://github.com/sealninja/react-grid-system) [rc-dock](https://github.com/ticlo/rc-dock) |
| 拖拽 | [react-beautiful-dnd](https://github.com/atlassian/react-beautiful-dnd/) [react-dnd](https://github.com/gaearon/react-dnd) [react-sortable-hoc](https://github.com/clauderic/react-sortable-hoc) | | 拖拽 | [react-beautiful-dnd](https://github.com/atlassian/react-beautiful-dnd/) [react-dnd](https://github.com/gaearon/react-dnd) [react-sortable-hoc](https://github.com/clauderic/react-sortable-hoc) |
| 代码编辑器 | [react-codemirror2](https://github.com/scniro/react-codemirror2) [react-monaco-editor](https://github.com/superRaytin/react-monaco-editor) | | 代码编辑器 | [react-codemirror2](https://github.com/scniro/react-codemirror2) [react-monaco-editor](https://github.com/superRaytin/react-monaco-editor) |
| 富文本编辑器 | [react-quill](https://github.com/zenoamaro/react-quill) [braft-editor](https://github.com/margox/braft-editor) | | 富文本编辑器 | [react-quill](https://github.com/zenoamaro/react-quill) [braft-editor](https://github.com/margox/braft-editor) |

6
package.json

@ -136,7 +136,7 @@
"rc-progress": "~3.1.0", "rc-progress": "~3.1.0",
"rc-rate": "~2.9.0", "rc-rate": "~2.9.0",
"rc-resize-observer": "^1.0.0", "rc-resize-observer": "^1.0.0",
"rc-select": "~12.1.0", "rc-select": "~12.1.6",
"rc-slider": "~9.7.1", "rc-slider": "~9.7.1",
"rc-steps": "~4.1.0", "rc-steps": "~4.1.0",
"rc-switch": "~3.2.0", "rc-switch": "~3.2.0",
@ -244,8 +244,8 @@
"react": "^17.0.1", "react": "^17.0.1",
"react-color": "^2.17.3", "react-color": "^2.17.3",
"react-copy-to-clipboard": "^5.0.1", "react-copy-to-clipboard": "^5.0.1",
"react-dnd": "^13.0.0", "react-dnd": "^14.0.1",
"react-dnd-html5-backend": "^12.1.0", "react-dnd-html5-backend": "^14.0.0",
"react-dom": "^17.0.1", "react-dom": "^17.0.1",
"react-draggable": "^4.4.3", "react-draggable": "^4.4.3",
"react-github-button": "^0.1.11", "react-github-button": "^0.1.11",

Loading…
Cancel
Save