+
+
+
+
+
+
`;
diff --git a/components/badge/demo/colorful.md b/components/badge/demo/colorful.md
index 7d4c39c123..096c6c22d2 100644
--- a/components/badge/demo/colorful.md
+++ b/components/badge/demo/colorful.md
@@ -11,8 +11,8 @@ title:
## en-US
-New feature after 3.16.0. We preset a series of colorful Badge style for different situation usage.
-And you can always set it to a hex color string for custom color.
+New feature after 3.16.0. We preset a series of colorful Badge styles for use in different situations.
+You can also set it to a hex color string for custom color.
````jsx
import { Badge } from 'antd';
diff --git a/components/breadcrumb/__tests__/__snapshots__/router.test.js.snap b/components/breadcrumb/__tests__/__snapshots__/router.test.js.snap
index 3cdcb013d4..7c8a37e198 100644
--- a/components/breadcrumb/__tests__/__snapshots__/router.test.js.snap
+++ b/components/breadcrumb/__tests__/__snapshots__/router.test.js.snap
@@ -75,101 +75,91 @@ exports[`react router react router 3 1`] = `
}
separator="/"
>
-
-
+
+
+
diff --git a/components/collapse/demo/accordion.md b/components/collapse/demo/accordion.md
index a96ccf5ead..356143d8e8 100644
--- a/components/collapse/demo/accordion.md
+++ b/components/collapse/demo/accordion.md
@@ -11,7 +11,7 @@ title:
## en-US
-Accordion mode, only one panel can be expanded at a time. The first panel will be expanded by default.
+In accordion mode, only one panel can be expanded at a time. The first panel will be expanded by default.
````jsx
import { Collapse } from 'antd';
diff --git a/components/collapse/demo/basic.md b/components/collapse/demo/basic.md
index 4e5ea09287..2f8f04475f 100644
--- a/components/collapse/demo/basic.md
+++ b/components/collapse/demo/basic.md
@@ -11,7 +11,7 @@ title:
## en-US
-More than one panel can be expanded at a time, the first panel is initialized to be active in this case.
+By default, any number of panels can be expanded at a time. The first panel is expanded in this example.
````jsx
import { Collapse } from 'antd';
diff --git a/components/collapse/demo/noarrow.md b/components/collapse/demo/noarrow.md
index 6e6e2f9d4b..f40a1c7fc9 100644
--- a/components/collapse/demo/noarrow.md
+++ b/components/collapse/demo/noarrow.md
@@ -11,7 +11,7 @@ title:
## en-US
-You can disable showing arrow icon by passing `showArrow={false}` to `CollapsePanel` component.
+You can hide the arrow icon by passing `showArrow={false}` to `CollapsePanel` component.
````jsx
import { Collapse } from 'antd';
diff --git a/components/comment/demo/editor.md b/components/comment/demo/editor.md
index 4cc8430142..d021c5d095 100644
--- a/components/comment/demo/editor.md
+++ b/components/comment/demo/editor.md
@@ -11,7 +11,7 @@ title:
## en-US
-Comment can be used as editor, user can customize the editor component.
+Comment can be used as an editor, so the user can customize the contents of the component.
````jsx
import {
diff --git a/components/config-provider/index.tsx b/components/config-provider/index.tsx
index 401879984e..9ca54423f9 100644
--- a/components/config-provider/index.tsx
+++ b/components/config-provider/index.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import createReactContext, { Context } from 'create-react-context';
+import createReactContext, { Context } from '@ant-design/create-react-context';
import defaultRenderEmpty, { RenderEmptyHandler } from './renderEmpty';
diff --git a/components/divider/demo/horizontal.md b/components/divider/demo/horizontal.md
index 7fdc990acb..bccee30515 100644
--- a/components/divider/demo/horizontal.md
+++ b/components/divider/demo/horizontal.md
@@ -11,7 +11,7 @@ title:
## en-US
-Divider default type is `horizontal`. Support inner text inside Divider.
+Divider is `horizontal` by default. You can add text within Divider.
````jsx
import { Divider } from 'antd';
diff --git a/components/divider/demo/orientation.md b/components/divider/demo/orientation.md
index 056c7c3e68..d1fd386d29 100644
--- a/components/divider/demo/orientation.md
+++ b/components/divider/demo/orientation.md
@@ -11,7 +11,7 @@ title:
## en-US
-Set orientation of divider to left or right.
+Set `orientation="left/right"` to align the inner text.
````jsx
import { Divider } from 'antd';
diff --git a/components/drawer/demo/form-in-drawer.md b/components/drawer/demo/form-in-drawer.md
index c23f45baab..17f0673ce2 100644
--- a/components/drawer/demo/form-in-drawer.md
+++ b/components/drawer/demo/form-in-drawer.md
@@ -11,7 +11,7 @@ title:
## en-US
-Use form in drawer with submit button.
+Use a form in Drawer with a submit button.
```jsx
import {
diff --git a/components/drawer/demo/multi-level-drawer.md b/components/drawer/demo/multi-level-drawer.md
index c64dfd7fde..31ff7ee3e5 100644
--- a/components/drawer/demo/multi-level-drawer.md
+++ b/components/drawer/demo/multi-level-drawer.md
@@ -11,7 +11,7 @@ title:
## en-US
-Open a new drawer on top of an existing drawer to handle multi branch tasks
+Open a new drawer on top of an existing drawer to handle multi branch tasks.
```jsx
import { Drawer, Button } from 'antd';
diff --git a/components/drawer/demo/placement.md b/components/drawer/demo/placement.md
index a1a5907a0b..c359f30573 100644
--- a/components/drawer/demo/placement.md
+++ b/components/drawer/demo/placement.md
@@ -11,7 +11,7 @@ title:
## en-US
-Basic drawer.
+The Drawer can appear from any edge of the screen.
```jsx
import { Drawer, Button, Radio } from 'antd';
diff --git a/components/drawer/demo/user-profile.md b/components/drawer/demo/user-profile.md
index d4542cb4b0..4a013589b8 100644
--- a/components/drawer/demo/user-profile.md
+++ b/components/drawer/demo/user-profile.md
@@ -11,7 +11,7 @@ title:
## en-US
-Use when you need to quickly preview the outline of the object. Such as list item preview.
+Use Drawer to quickly preview details of an object, such as those in a list.
```jsx
import {
diff --git a/components/drawer/index.en-US.md b/components/drawer/index.en-US.md
index 30f45e4001..2b83e46def 100644
--- a/components/drawer/index.en-US.md
+++ b/components/drawer/index.en-US.md
@@ -5,15 +5,15 @@ subtitle:
title: Drawer
---
-Panel slides from screen edge.
+A panel which slides in from the edge of the screen.
## When To Use
-A Drawer is a panel that is typically overlaid on top of a page and slides in from the side. It contains a set of information or actions. Since that user can interact with the Drawer without leaving the current page, tasks can be achieved more efficient within the same context.
+A Drawer is a panel that is typically overlaid on top of a page and slides in from the side. It contains a set of information or actions. Since the user can interact with the Drawer without leaving the current page, tasks can be achieved more efficiently within the same context.
* Use a Form to create or edit a set of information.
-* Processing subtasks. When subtasks are too heavy for Popover and we still want to keep the subtasks in the context of the main task, Drawer comes very handy.
-* When a same Form is needed in multiple places.
+* Processing subtasks. When subtasks are too heavy for a Popover and we still want to keep the subtasks in the context of the main task, Drawer comes very handy.
+* When the same Form is needed in multiple places.
## API
diff --git a/components/drawer/index.tsx b/components/drawer/index.tsx
index 40b271b95c..65bdeae29c 100644
--- a/components/drawer/index.tsx
+++ b/components/drawer/index.tsx
@@ -1,7 +1,7 @@
import * as React from 'react';
import * as PropTypes from 'prop-types';
import RcDrawer from 'rc-drawer';
-import createReactContext, { Context } from 'create-react-context';
+import createReactContext, { Context } from '@ant-design/create-react-context';
import warning from '../_util/warning';
import classNames from 'classnames';
import Icon from '../icon';
diff --git a/components/form/Form.tsx b/components/form/Form.tsx
index fceae02d07..42008573b2 100755
--- a/components/form/Form.tsx
+++ b/components/form/Form.tsx
@@ -6,11 +6,12 @@ import createFormField from 'rc-form/lib/createFormField';
import omit from 'omit.js';
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
import { ColProps } from '../grid/col';
-import { Omit, tuple } from '../_util/type';
+import { tuple } from '../_util/type';
import warning from '../_util/warning';
import FormItem, { FormLabelAlign } from './FormItem';
import { FIELD_META_PROP, FIELD_DATA_PROP } from './constants';
import { FormContext } from './context';
+import { FormWrappedProps } from './interface';
type FormCreateOptionMessagesCallback = (...args: any[]) => string;
@@ -193,12 +194,6 @@ export interface RcBaseFormProps {
wrappedComponentRef?: any;
}
-export interface ComponentDecorator {
-
(
- component: React.ComponentClass
| React.SFC
,
- ): React.ComponentClass>;
-}
-
export default class Form extends React.Component {
static defaultProps = {
colon: true,
@@ -222,9 +217,9 @@ export default class Form extends React.Component {
static createFormField = createFormField;
- static create = function(
+ static create = function(
options: FormCreateOption = {},
- ): ComponentDecorator {
+ ): FormWrappedProps {
return createDOMForm({
fieldNameProp: 'id',
...options,
diff --git a/components/form/__tests__/type.tsx b/components/form/__tests__/type.tsx
index 728f53ea1c..5a8d04cad0 100644
--- a/components/form/__tests__/type.tsx
+++ b/components/form/__tests__/type.tsx
@@ -31,7 +31,7 @@ class WithOwnProps extends React.Component {
}
}
-const WithOwnPropsForm = Form.create()(WithOwnProps);
+const WithOwnPropsForm = Form.create()(WithOwnProps);
;
diff --git a/components/form/context.ts b/components/form/context.ts
index cb58a6698a..9caf0828fc 100644
--- a/components/form/context.ts
+++ b/components/form/context.ts
@@ -1,4 +1,4 @@
-import createReactContext, { Context } from 'create-react-context';
+import createReactContext, { Context } from '@ant-design/create-react-context';
import { ColProps } from '../grid/col';
import { FormLabelAlign } from './FormItem';
diff --git a/components/form/interface.ts b/components/form/interface.ts
new file mode 100644
index 0000000000..fa2fa03628
--- /dev/null
+++ b/components/form/interface.ts
@@ -0,0 +1,18 @@
+import * as React from 'react';
+import hoistNonReactStatics from 'hoist-non-react-statics';
+import { Omit } from '../_util/type';
+import { FormComponentProps } from './Form';
+
+// Copy from @types/react-redux https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react-redux/index.d.ts
+export type ConnectedComponentClass<
+ C extends React.ComponentType,
+ P
+> = React.ComponentClass> & hoistNonReactStatics.NonReactStatics & {
+ WrappedComponent: C;
+};
+
+export type FormWrappedProps =
+ <
+ C extends React.ComponentType
+ >(component: C)
+ => ConnectedComponentClass>;
diff --git a/components/grid/RowContext.tsx b/components/grid/RowContext.tsx
index 67d347ceb5..c16af4888b 100644
--- a/components/grid/RowContext.tsx
+++ b/components/grid/RowContext.tsx
@@ -1,4 +1,4 @@
-import createContext, { Context } from 'create-react-context';
+import createContext, { Context } from '@ant-design/create-react-context';
export interface RowContextState {
gutter?: number;
diff --git a/components/grid/demo/playground.md b/components/grid/demo/playground.md
index 6714d75165..d3c347588d 100644
--- a/components/grid/demo/playground.md
+++ b/components/grid/demo/playground.md
@@ -89,11 +89,11 @@ ReactDOM.render(, mountNode);
````
````css
-#components-grid-demo-playground [class^="ant-col-"] {
+#components-grid-demo-playground [class~="ant-col"] {
background: transparent;
border: 0;
}
-#components-grid-demo-playground [class^="ant-col-"] > div {
+#components-grid-demo-playground [class~="ant-col"] > div {
background: #00A0E9;
height: 120px;
line-height: 120px;
diff --git a/components/icon/index.tsx b/components/icon/index.tsx
index b3bf5e5f94..6306872ed5 100755
--- a/components/icon/index.tsx
+++ b/components/icon/index.tsx
@@ -33,7 +33,7 @@ export interface CustomIconComponentProps {
style?: React.CSSProperties;
spin?: boolean;
rotate?: number;
- ['aria-hidden']?: string;
+ ['aria-hidden']?: React.AriaAttributes['aria-hidden'];
}
export type ThemeType = 'filled' | 'outlined' | 'twoTone';
diff --git a/components/icon/utils.ts b/components/icon/utils.ts
index a9777adf35..d076693104 100644
--- a/components/icon/utils.ts
+++ b/components/icon/utils.ts
@@ -7,7 +7,7 @@ export const svgBaseProps = {
width: '1em',
height: '1em',
fill: 'currentColor',
- ['aria-hidden']: 'true',
+ ['aria-hidden']: true,
focusable: 'false',
};
diff --git a/components/input/__tests__/__snapshots__/index.test.js.snap b/components/input/__tests__/__snapshots__/index.test.js.snap
index e8f61a4814..01449c85b5 100644
--- a/components/input/__tests__/__snapshots__/index.test.js.snap
+++ b/components/input/__tests__/__snapshots__/index.test.js.snap
@@ -6,66 +6,64 @@ exports[`Input allowClear should change type when click 1`] = `
disabled={false}
type="text"
>
-
+
+
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
-
+
`;
@@ -75,24 +73,22 @@ exports[`Input allowClear should change type when click 2`] = `
disabled={false}
type="text"
>
-
+
+
-
-
-
-
+ className="ant-input-suffix"
+ />
+
`;
@@ -103,24 +99,22 @@ exports[`Input allowClear should not show icon if defaultValue is undefined, nul
disabled={false}
type="text"
>
-
+
+
-
-
-
-
+ className="ant-input-suffix"
+ />
+
`;
@@ -130,24 +124,22 @@ exports[`Input allowClear should not show icon if defaultValue is undefined, nul
disabled={false}
type="text"
>
-
+
+
-
-
-
-
+ className="ant-input-suffix"
+ />
+
`;
@@ -158,24 +150,22 @@ exports[`Input allowClear should not show icon if defaultValue is undefined, nul
disabled={false}
type="text"
>
-
+
+
-
-
-
-
+ className="ant-input-suffix"
+ />
+
`;
@@ -186,24 +176,22 @@ exports[`Input allowClear should not show icon if value is undefined, null or em
type="text"
value={null}
>
-
+
+
-
-
-
-
+ className="ant-input-suffix"
+ />
+
`;
@@ -213,24 +201,22 @@ exports[`Input allowClear should not show icon if value is undefined, null or em
disabled={false}
type="text"
>
-
+
+
-
-
-
-
+ className="ant-input-suffix"
+ />
+
`;
@@ -241,24 +227,22 @@ exports[`Input allowClear should not show icon if value is undefined, null or em
type="text"
value=""
>
-
+
+
-
-
-
-
+ className="ant-input-suffix"
+ />
+
`;
@@ -268,17 +252,15 @@ exports[`Input should support maxLength 1`] = `
maxLength={3}
type="text"
>
-
-
-
+
`;
@@ -304,71 +286,69 @@ exports[`Input.Password should change type when click 1`] = `
}
type="password"
>
-
+
+
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
-
+
`;
@@ -395,67 +375,65 @@ exports[`Input.Password should change type when click 2`] = `
}
type="text"
>
-
+
+
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
-
+
`;
@@ -482,71 +460,69 @@ exports[`Input.Password should change type when click 3`] = `
}
type="password"
>
-
+
+
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
-
+
`;
@@ -556,85 +532,81 @@ exports[`Input.Search should support suffix 1`] = `
enterButton={false}
suffix="suffix"
>
-
- ,
- ]
- }
- type="text"
+ ,
+ ]
+ }
+ type="text"
+ >
+
-
-
+
+ suffix
+
-
-
- suffix
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
`;
@@ -642,20 +614,18 @@ exports[`TextArea should support disabled 1`] = `
`;
@@ -663,19 +633,17 @@ exports[`TextArea should support maxLength 1`] = `
`;
diff --git a/components/layout/Sider.tsx b/components/layout/Sider.tsx
index 5ee8b6f8c1..a9fc6e7d63 100644
--- a/components/layout/Sider.tsx
+++ b/components/layout/Sider.tsx
@@ -1,4 +1,4 @@
-import createContext, { Context } from 'create-react-context';
+import createContext, { Context } from '@ant-design/create-react-context';
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
import { LayoutContext, LayoutContextProps } from './layout';
diff --git a/components/layout/layout.tsx b/components/layout/layout.tsx
index 354e1faf72..8a03fdb73d 100644
--- a/components/layout/layout.tsx
+++ b/components/layout/layout.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
import classNames from 'classnames';
-import createContext, { Context } from 'create-react-context';
+import createContext, { Context } from '@ant-design/create-react-context';
import { SiderProps } from './Sider';
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
diff --git a/components/list/demo/grid.md b/components/list/demo/grid.md
index 3e687de802..f20cd83cfb 100644
--- a/components/list/demo/grid.md
+++ b/components/list/demo/grid.md
@@ -11,7 +11,7 @@ title:
## en-US
-Creating a grid list by setting the `grid` property of List
+Create a grid layout by setting the `grid` property of List.
````jsx
import { List, Card } from 'antd';
diff --git a/components/list/demo/infinite-virtualized-load.md b/components/list/demo/infinite-virtualized-load.md
index 8d72c83844..94b621096b 100644
--- a/components/list/demo/infinite-virtualized-load.md
+++ b/components/list/demo/infinite-virtualized-load.md
@@ -13,7 +13,7 @@ title:
## en-US
-An example of infinite list & virtualized loading using [react-virtualized](https://github.com/bvaughn/react-virtualized). [Learn more](https://blog.jscrambler.com/optimizing-react-rendering-through-virtualization/)
+An example of infinite list & virtualized loading using [react-virtualized](https://github.com/bvaughn/react-virtualized). [Learn more](https://blog.jscrambler.com/optimizing-react-rendering-through-virtualization/).
`Virtualized` rendering is a technique to mount big sets of data. It reduces the amount of rendered DOM nodes by tracking and hiding whatever isn't currently visible.
diff --git a/components/list/demo/resposive.md b/components/list/demo/resposive.md
index 6780afb075..c52c491661 100644
--- a/components/list/demo/resposive.md
+++ b/components/list/demo/resposive.md
@@ -1,7 +1,7 @@
---
order: 5
title:
- zh-CN: 响应式的栅格列表
+ zh-CN: 响应式的栅格列表
en-US: Responsive grid list
---
@@ -11,7 +11,7 @@ title:
## en-US
-Responsive grid list. The size property is as same as [Layout Grid](https://ant.design/components/grid/#Col).
+Responsive grid list. The size property the is as same as [Layout Grid](https://ant.design/components/grid/#Col).
````jsx
import { List, Card } from 'antd';
diff --git a/components/list/demo/vertical.md b/components/list/demo/vertical.md
index 6449e4ff7a..fe11533b4b 100644
--- a/components/list/demo/vertical.md
+++ b/components/list/demo/vertical.md
@@ -11,7 +11,7 @@ title:
## en-US
-Setting `itemLayout` property with `vertical` to create a vertical list.
+Set the `itemLayout` property to `vertical` to create a vertical list.
````jsx
import { List, Avatar, Icon } from 'antd';
diff --git a/components/locale-provider/index.en-US.md b/components/locale-provider/index.en-US.md
index c723f3a974..16a2f9f2cf 100644
--- a/components/locale-provider/index.en-US.md
+++ b/components/locale-provider/index.en-US.md
@@ -9,7 +9,7 @@ title: LocaleProvider
## Usage
-`LocaleProvider` takes use of [context](https://facebook.github.io/react/docs/context.html), a feature of React, to accomplish global effectiveness by wrapping the app only once.
+`LocaleProvider` makes use of [context](https://facebook.github.io/react/docs/context.html), a feature of React, to accomplish global effectiveness by wrapping the app only once.
```jsx
import { LocaleProvider } from 'antd';
@@ -23,7 +23,7 @@ moment.locale('fr');
return ;
```
-We provide some locale like English, Chinese, Russian, German, French and etc, all locale packages can be found in [here](https://github.com/ant-design/ant-design/blob/master/components/locale-provider/).
+We provide some locales like English, Chinese, Russian, German, French etc. All locale packages can be found in [here](https://github.com/ant-design/ant-design/blob/master/components/locale-provider/).
Note: if you need to use antd's UMD dist file, please use `antd/dist/antd-with-locales.js` and corresponding moment locale:
@@ -41,7 +41,7 @@ If you can't find your language, you are welcome to create a locale package base
### Other localization needs
-This component aims for localization of the built-in text, if you want to support other documents, we recommend using [react-intl](https://github.com/yahoo/react-intl), refer to [Intl demo 1](http://github.com/ant-design/intl-example) and [Intl demo 2](http://yiminghe.me/learning-react/examples/react-intl.html?locale=en-US).
+This component aims to provide localization of the built-in text. If you want to support other documents, we recommend using [react-intl](https://github.com/yahoo/react-intl), refer to [Intl demo 1](http://github.com/ant-design/intl-example) and [Intl demo 2](http://yiminghe.me/learning-react/examples/react-intl.html?locale=en-US).
## API
diff --git a/components/menu/index.tsx b/components/menu/index.tsx
index 80694a4417..5cd00864c7 100644
--- a/components/menu/index.tsx
+++ b/components/menu/index.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
import RcMenu, { Divider, ItemGroup } from 'rc-menu';
-import createContext, { Context } from 'create-react-context';
+import createContext, { Context } from '@ant-design/create-react-context';
import classNames from 'classnames';
import omit from 'omit.js';
import SubMenu from './SubMenu';
diff --git a/components/message/__tests__/__snapshots__/demo.test.js.snap b/components/message/__tests__/__snapshots__/demo.test.js.snap
index a2b7c67276..267177fbbc 100644
--- a/components/message/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/message/__tests__/__snapshots__/demo.test.js.snap
@@ -68,7 +68,7 @@ exports[`renders ./components/message/demo/thenable.md correctly 1`] = `
type="button"
>
- Display a sequence of message
+ Display sequential messages
`;
diff --git a/components/message/demo/info.md b/components/message/demo/info.md
index f4c6134bea..4ca495f77f 100644
--- a/components/message/demo/info.md
+++ b/components/message/demo/info.md
@@ -11,7 +11,7 @@ title:
## en-US
-Normal messages as feedbacks.
+Normal message for information.
````jsx
import { message, Button } from 'antd';
diff --git a/components/message/demo/loading.md b/components/message/demo/loading.md
index 07596d24cd..8f7f501394 100644
--- a/components/message/demo/loading.md
+++ b/components/message/demo/loading.md
@@ -2,7 +2,7 @@
order: 3
title:
zh-CN: 加载中
- en-US: Message of loading
+ en-US: Message with loading indicator
---
## zh-CN
diff --git a/components/message/demo/thenable.md b/components/message/demo/thenable.md
index 62556efd37..0ec33f5ceb 100644
--- a/components/message/demo/thenable.md
+++ b/components/message/demo/thenable.md
@@ -10,7 +10,7 @@ title:
可以通过 then 接口在关闭后运行 callback 。以上用例将在每个 message 将要结束时通过 then 显示新的 message 。
## en-US
-`message` provides promise interface for `onClose`. The above example will display a new message when old message is about to finish.
+`message` provides a promise interface for `onClose`. The above example will display a new message when the old message is about to close.
````jsx
import { message, Button } from 'antd';
@@ -22,7 +22,7 @@ const success = () => {
};
ReactDOM.render(
- ,
+ ,
mountNode
);
````
diff --git a/components/modal/Modal.tsx b/components/modal/Modal.tsx
index b546e2c8ac..cb4be684cf 100644
--- a/components/modal/Modal.tsx
+++ b/components/modal/Modal.tsx
@@ -11,9 +11,25 @@ import LocaleReceiver from '../locale-provider/LocaleReceiver';
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
let mousePosition: { x: number; y: number } | null;
-let mousePositionEventBinded: boolean;
export const destroyFns: Array<() => void> = [];
+// ref: https://github.com/ant-design/ant-design/issues/15795
+const getClickPosition = (e: MouseEvent) => {
+ mousePosition = {
+ x: e.pageX,
+ y: e.pageY,
+ };
+ // 100ms 内发生过点击事件，则从点击位置动画展示
+ // 否则直接 zoom 展示
+ // 这样可以兼容非点击方式展开
+ setTimeout(() => (mousePosition = null), 100);
+};
+
+// 只有点击事件支持从鼠标位置动画展开
+if (typeof window !== 'undefined' && window.document && window.document.documentElement) {
+ addEventListener(document.documentElement, 'click', getClickPosition);
+}
+
export interface ModalProps {
/** 对话框是否可见*/
visible?: boolean;
@@ -158,24 +174,6 @@ export default class Modal extends React.Component {
}
};
- componentDidMount() {
- if (mousePositionEventBinded) {
- return;
- }
- // 只有点击事件支持从鼠标位置动画展开
- addEventListener(document.documentElement, 'click', (e: MouseEvent) => {
- mousePosition = {
- x: e.pageX,
- y: e.pageY,
- };
- // 100ms 内发生过点击事件，则从点击位置动画展示
- // 否则直接 zoom 展示
- // 这样可以兼容非点击方式展开
- setTimeout(() => (mousePosition = null), 100);
- });
- mousePositionEventBinded = true;
- }
-
renderFooter = (locale: ModalLocale) => {
const { okText, okType, cancelText, confirmLoading } = this.props;
return (
diff --git a/components/modal/demo/async.md b/components/modal/demo/async.md
index 768dfbedc5..b21ee5a40c 100644
--- a/components/modal/demo/async.md
+++ b/components/modal/demo/async.md
@@ -11,7 +11,7 @@ title:
## en-US
-Asynchronously close a modal dialog when a user clicked OK button, for example,
+Asynchronously close a modal dialog when a the OK button is pressed. For example,
you can use this pattern when you submit a form.
````jsx
diff --git a/components/modal/demo/button-props.md b/components/modal/demo/button-props.md
index 72a3e0569c..c7155126ec 100644
--- a/components/modal/demo/button-props.md
+++ b/components/modal/demo/button-props.md
@@ -11,7 +11,7 @@ title:
## en-US
-Passing `okButtonProps` and `cancelButtonProps` can customize the ok button and cancel button props.
+Passing `okButtonProps` and `cancelButtonProps` will customize the OK button and cancel button props.
````jsx
import { Modal, Button } from 'antd';
diff --git a/components/modal/demo/confirm-promise.md b/components/modal/demo/confirm-promise.md
index 4e6512168d..ba14855ef7 100644
--- a/components/modal/demo/confirm-promise.md
+++ b/components/modal/demo/confirm-promise.md
@@ -11,7 +11,7 @@ title:
## en-US
-To use `confirm()` to popup confirmation modal dialog. Let onCancel/onOk function return a promise object to
+Use `confirm()` to show a confirmation modal dialog. Let onCancel/onOk function return a promise object to
delay closing the dialog.
````jsx
diff --git a/components/modal/demo/confirm-router.md b/components/modal/demo/confirm-router.md
index 6326a820e2..0db063bcea 100644
--- a/components/modal/demo/confirm-router.md
+++ b/components/modal/demo/confirm-router.md
@@ -11,7 +11,7 @@ title:
## en-US
-`Modal.destroyAll()` could destroy all confirmation modal dialogs. Usually, you can use it in router change event to destroy confirm modal dialog automatically
+`Modal.destroyAll()` will destroy all confirmation modal dialogs. Usually, you can use it in router change event to destroy confirm modal dialog automatically.
```jsx
import { Modal, Button } from 'antd';
diff --git a/components/modal/demo/confirm.md b/components/modal/demo/confirm.md
index 8ea6f10de0..085c046503 100644
--- a/components/modal/demo/confirm.md
+++ b/components/modal/demo/confirm.md
@@ -11,7 +11,7 @@ title:
## en-US
-To use `confirm()` to popup a confirmation modal dialog.
+Use `confirm()` to show a confirmation modal dialog.
````jsx
import { Modal, Button } from 'antd';
diff --git a/components/modal/demo/footer.md b/components/modal/demo/footer.md
index adc6742721..67700a2587 100644
--- a/components/modal/demo/footer.md
+++ b/components/modal/demo/footer.md
@@ -13,8 +13,8 @@ title:
## en-US
-A more complex example which define a customized footer button bar,
-the dialog will change to loading state after clicking submit button, when the loading is over,
+A more complex example which define a customized footer button bar.
+The dialog will change to loading state after clicking the submit button, and when the loading is done,
the modal dialog will be closed.
You could set `footer` to `null` if you don't need default footer buttons.
diff --git a/components/modal/demo/manual.md b/components/modal/demo/manual.md
index 00f01e8c01..ad7cfbaded 100644
--- a/components/modal/demo/manual.md
+++ b/components/modal/demo/manual.md
@@ -11,7 +11,7 @@ title:
## en-US
-Manually updateing and destroying a modal from `Modal.method`.
+Manually updating and destroying a modal from `Modal.method`.
````jsx
import { Modal, Button } from 'antd';
diff --git a/components/notification/demo/placement.md b/components/notification/demo/placement.md
index be629d0ccc..4bf2dd780d 100755
--- a/components/notification/demo/placement.md
+++ b/components/notification/demo/placement.md
@@ -11,7 +11,7 @@ title:
## en-US
-A notification box can pop up from `topRight` or `bottomRight` or `bottomLeft` or `topLeft`.
+A notification box can appear from the `topRight`, `bottomRight`, `bottomLeft` or `topLeft` of the viewport.
````jsx
import { Button, Select, notification } from 'antd';
diff --git a/components/popconfirm/demo/placement.md b/components/popconfirm/demo/placement.md
index f8c6788828..5f39f85f72 100755
--- a/components/popconfirm/demo/placement.md
+++ b/components/popconfirm/demo/placement.md
@@ -11,7 +11,7 @@ title:
## en-US
-There are 12 `placement` options available. Use `arrowPointAtCenter` if you want arrow point at the center of target.
+There are 12 `placement` options available. Use `arrowPointAtCenter` if you want the arrow to point at the center of target.
````jsx
import { Popconfirm, message, Button } from 'antd';
diff --git a/components/progress/__tests__/__snapshots__/index.test.js.snap b/components/progress/__tests__/__snapshots__/index.test.js.snap
index 34cff74744..b17c86a2cf 100644
--- a/components/progress/__tests__/__snapshots__/index.test.js.snap
+++ b/components/progress/__tests__/__snapshots__/index.test.js.snap
@@ -264,56 +264,54 @@ exports[`Progress render strokeColor 2`] = `
trailColor="#f3f3f3"
type="line"
>
-
-
`;
diff --git a/components/skeleton/index.en-US.md b/components/skeleton/index.en-US.md
index 743a184eeb..e8ea4af2e7 100644
--- a/components/skeleton/index.en-US.md
+++ b/components/skeleton/index.en-US.md
@@ -5,13 +5,13 @@ title: Skeleton
cols: 1
---
-Provide a placeholder at the place which need waiting for loading.
+Provide a placeholder while you wait for content to load, or to visualise content that doesn't exist yet.
## When To Use
-- When resource needs long time to load, like low network speed.
-- The component contains much information. Such as List or Card.
-- Only works when loading data at first time.
-- Could be replaced by Spin in all situation, but provide better user experience than spin if it works.
+- When a resource needs long time to load.
+- When the component contains lots of information, such as List or Card.
+- Only works when loading data for the first time.
+- Could be replaced by Spin in any situation, but can provide a better user experience.
## API
diff --git a/components/spin/demo/nested.md b/components/spin/demo/nested.md
index 5f64bebdd0..8de82cd615 100644
--- a/components/spin/demo/nested.md
+++ b/components/spin/demo/nested.md
@@ -11,7 +11,7 @@ title:
## en-US
-Embedding content into `Spin` will alter it into loading state.
+Embedding content into `Spin` will set it into loading state.
````jsx
import { Spin, Switch, Alert } from 'antd';
diff --git a/components/spin/demo/size.md b/components/spin/demo/size.md
index b37c994b05..d74872a2d4 100644
--- a/components/spin/demo/size.md
+++ b/components/spin/demo/size.md
@@ -1,6 +1,6 @@
---
order: 1
-title:
+title:
zh-CN: 各种大小
en-US: Size
---
@@ -11,7 +11,7 @@ title:
## en-US
-A small `Spin` use in loading text, default `Spin` use in loading card-level block, and large `Spin` use in loading **page**.
+A small `Spin` is used for loading text, default sized `Spin` for loading a card-level block, and large `Spin` used for loading a **page**.
````jsx
import { Spin } from 'antd';
diff --git a/components/style/core/base.less b/components/style/core/base.less
index 305f26ae37..e1041a3c03 100644
--- a/components/style/core/base.less
+++ b/components/style/core/base.less
@@ -501,7 +501,7 @@ mark {
::selection {
color: @text-color-inverse;
- background: @primary-color;
+ background: @text-selection-bg;
}
// Utility classes
diff --git a/components/style/themes/default.less b/components/style/themes/default.less
index 615ef1dc09..d6435dd066 100644
--- a/components/style/themes/default.less
+++ b/components/style/themes/default.less
@@ -56,6 +56,7 @@
@heading-color-dark: fade(@white, 100%);
@text-color-dark: fade(@white, 85%);
@text-color-secondary-dark: fade(@white, 65%);
+@text-selection-bg: @primary-color;
@font-variant-base: tabular-nums;
@font-feature-settings-base: 'tnum';
@font-size-base: 14px;
diff --git a/components/table/Table.tsx b/components/table/Table.tsx
index 083698f848..d9d9a72f8a 100755
--- a/components/table/Table.tsx
+++ b/components/table/Table.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
import * as ReactDOM from 'react-dom';
-import RcTable from 'rc-table';
+import RcTable, { INTERNAL_COL_DEFINE } from 'rc-table';
import * as PropTypes from 'prop-types';
import classNames from 'classnames';
import shallowEqual from 'shallowequal';
@@ -110,6 +110,8 @@ export default class Table extends React.Component, TableState<
constructor(props: TableProps) {
super(props);
+ const { expandedRowRender, columns = [] } = props;
+
warning(
!('columnsPageRange' in props || 'columnsPageSize' in props),
'Table',
@@ -117,11 +119,13 @@ export default class Table extends React.Component, TableState<
'fixed columns instead, see: https://u.ant.design/fixed-columns.',
);
- warning(
- !('expandedRowRender' in props) || !('scroll' in props),
- 'Table',
- '`expandedRowRender` and `scroll` are not compatible. Please use one of them at one time.',
- );
+ if (expandedRowRender && columns.some(({ fixed }) => !!fixed)) {
+ warning(
+ false,
+ 'Table',
+ '`expandedRowRender` and `Column.fixed` are not compatible. Please use one of them at one time.',
+ );
+ }
this.columns = props.columns || normalizeColumns(props.children as React.ReactChildren);
@@ -775,6 +779,9 @@ export default class Table extends React.Component, TableState<
fixed: rowSelection.fixed,
width: rowSelection.columnWidth,
title: rowSelection.columnTitle,
+ [INTERNAL_COL_DEFINE]: {
+ className: `${prefixCls}-selection-col`,
+ },
};
if (rowSelection.type !== 'radio') {
const checkboxAllDisabled = data.every(
diff --git a/components/table/__tests__/Table.test.js b/components/table/__tests__/Table.test.js
index 27daa50b78..dd5bb39e72 100644
--- a/components/table/__tests__/Table.test.js
+++ b/components/table/__tests__/Table.test.js
@@ -87,10 +87,10 @@ describe('Table', () => {
expect(wrapper.find('tbody').props().id).toBe('wrapper2');
});
- it('warning if both `expandedRowRender` & `scroll` are used', () => {
- mount(
null} scroll={{}} />);
+ it('warning if both `expandedRowRender` & `Column.fixed` are used', () => {
+ mount(
null} columns={[{ fixed: true }]} />);
expect(warnSpy).toHaveBeenCalledWith(
- 'Warning: [antd: Table] `expandedRowRender` and `scroll` are not compatible. Please use one of them at one time.',
+ 'Warning: [antd: Table] `expandedRowRender` and `Column.fixed` are not compatible. Please use one of them at one time.',
);
});
});
diff --git a/components/table/__tests__/__snapshots__/Table.rowSelection.test.js.snap b/components/table/__tests__/__snapshots__/Table.rowSelection.test.js.snap
index 7e0b5e23e3..42cc868e9b 100644
--- a/components/table/__tests__/__snapshots__/Table.rowSelection.test.js.snap
+++ b/components/table/__tests__/__snapshots__/Table.rowSelection.test.js.snap
@@ -26,7 +26,9 @@ exports[`Table.rowSelection fix selection column on the left 1`] = `
class=""
>
-