Merge branch 'master' into feature

This commit is contained in:
afc163 2018-09-16 17:29:04 +08:00
commit cd9b8b20b5
33 changed files with 478 additions and 58 deletions

View File

@ -87,7 +87,7 @@ import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
- [设计规范速查手册](https://github.com/ant-design/ant-design/wiki/Ant-Design-%E8%AE%BE%E8%AE%A1%E5%9F%BA%E7%A1%80%E7%AE%80%E7%89%88) - [设计规范速查手册](https://github.com/ant-design/ant-design/wiki/Ant-Design-%E8%AE%BE%E8%AE%A1%E5%9F%BA%E7%A1%80%E7%AE%80%E7%89%88)
- [开发者说明](https://github.com/ant-design/ant-design/wiki/Development) - [开发者说明](https://github.com/ant-design/ant-design/wiki/Development)
- [版本发布规则](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B) - [版本发布规则](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
- [常见问题](https://github.com/ant-design/ant-design/wiki/FAQ) - [常见问题](https://ant.design/docs/react/faq-cn)
- [CodeSandbox 模板](https://u.ant.design/codesandbox-repro) for bug reports - [CodeSandbox 模板](https://u.ant.design/codesandbox-repro) for bug reports
- [Awesome Ant Design](https://github.com/websemantics/awesome-ant-design) - [Awesome Ant Design](https://github.com/websemantics/awesome-ant-design)
- [定制主题](http://ant.design/docs/react/customize-theme-cn) - [定制主题](http://ant.design/docs/react/customize-theme-cn)

View File

@ -86,7 +86,7 @@ See [i18n](http://ant.design/docs/react/i18n).
- [Motion](https://motion.ant.design) - [Motion](https://motion.ant.design)
- [Developer Instruction](https://github.com/ant-design/ant-design/wiki/Development) - [Developer Instruction](https://github.com/ant-design/ant-design/wiki/Development)
- [Versioning Release Note](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B) - [Versioning Release Note](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
- [FAQ](https://github.com/ant-design/ant-design/wiki/FAQ) - [FAQ](https://ant.design/docs/react/faq)
- [CodeSandbox Template](https://u.ant.design/codesandbox-repro) for bug reports - [CodeSandbox Template](https://u.ant.design/codesandbox-repro) for bug reports
- [Awesome Ant Design](https://github.com/websemantics/awesome-ant-design) - [Awesome Ant Design](https://github.com/websemantics/awesome-ant-design)
- [Customize Theme](http://ant.design/docs/react/customize-theme) - [Customize Theme](http://ant.design/docs/react/customize-theme)

View File

@ -813,7 +813,7 @@ exports[`renders ./components/card/demo/tabs.md correctly 1`] = `
class="ant-tabs ant-tabs-top ant-card-head-tabs ant-tabs-large ant-tabs-line" class="ant-tabs ant-tabs-top ant-card-head-tabs ant-tabs-large ant-tabs-line"
> >
<div <div
class="ant-tabs-bar ant-card-head-tabs" class="ant-tabs-bar"
role="tablist" role="tablist"
tabindex="0" tabindex="0"
> >
@ -948,7 +948,7 @@ exports[`renders ./components/card/demo/tabs.md correctly 1`] = `
class="ant-tabs ant-tabs-top ant-card-head-tabs ant-tabs-large ant-tabs-line" class="ant-tabs ant-tabs-top ant-card-head-tabs ant-tabs-large ant-tabs-line"
> >
<div <div
class="ant-tabs-bar ant-card-head-tabs" class="ant-tabs-bar"
role="tablist" role="tablist"
tabindex="0" tabindex="0"
> >

View File

@ -182,10 +182,7 @@ More option at [rc-form option](https://github.com/react-component/form#option-o
### Form.Item ### Form.Item
Note: Note: if Form.Item has multiple children that had been decorated by `getFieldDecorator`, `help` and `required` and `validateStatus` can't be generated automatically.
- If Form.Item has multiple children that had been decorated by `getFieldDecorator`, `help` and `required` and `validateStatus` can't be generated automatically.
- Before `2.2.0`, form controls must be child of Form.Item, otherwise, you need to set `help`, `required` and `validateStatus` by yourself.
| Property | Description | Type | Default Value | | Property | Description | Type | Default Value |
| -------- | ----------- | ---- | ------------- | | -------- | ----------- | ---- | ------------- |

View File

@ -183,10 +183,7 @@ validateFields(['field1', 'field2'], options, (errors, values) => {
### Form.Item ### Form.Item
注意: 注意:一个 Form.Item 建议只放一个被 getFieldDecorator 装饰过的 child当有多个被装饰过的 child 时,`help` `required` `validateStatus` 无法自动生成。
- 一个 Form.Item 建议只放一个被 getFieldDecorator 装饰过的 child当有多个被装饰过的 child 时,`help` `required` `validateStatus` 无法自动生成。
- `2.2.0` 之前,只有当表单域为 Form.Item 的子元素时,才会自动生成 `help` `required` `validateStatus`,嵌套情况需要自行设置。
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- | | --- | --- | --- | --- |

View File

@ -29,6 +29,19 @@ ReactDOM.render(<IconDisplay />, mountNode);
| component | The component used for the root node. This will override the **`type`** property. | ComponentType<CustomIconComponentProps\> | - | | component | The component used for the root node. This will override the **`type`** property. | ComponentType<CustomIconComponentProps\> | - |
| twoToneColor | Only support the two-tone icon. Specific the primary color. | string (hex color) | - | | twoToneColor | Only support the two-tone icon. Specific the primary color. | string (hex color) | - |
### Svg icons
We introduced svg icons in `3.9.x` version replacing font icons which brings benefits below:
- Complete offline usage of icon, no dependency of alipay cdn font icon file and no more empty square during downloading than no need to deploy icon font files locally either.
- Much more display accuracy in lower-level screens.
- Support multiple colors for icon.
- No need to change built-in icons with overriding styles by providing more props in component.
More disscussion of svg icon reference to [#10353](https://github.com/ant-design/ant-design/issues/10353).
> ⚠️ About the extra bundle size brought by all svg icons we imported in antd@3.9.x, we will provide new API to allow developers importing icons as your need, you can trace [#12011](https://github.com/ant-design/ant-design/issues/12011) for further progress.
The properties `theme`, `component` and `twoToneColor` are added in `antd@3.9.x`. The best practice is to pass the property `theme` to every `<Icon />` components. The properties `theme`, `component` and `twoToneColor` are added in `antd@3.9.x`. The best practice is to pass the property `theme` to every `<Icon />` components.
```jsx ```jsx
@ -41,6 +54,8 @@ All the icons will render to `<svg>`. You can still set `style` and `className`
<Icon type="message" style={{ fontSize: '16px', color: '#08c' }} theme="outlined" /> <Icon type="message" style={{ fontSize: '16px', color: '#08c' }} theme="outlined" />
``` ```
### Set TwoTone Color
When using the two-tone icons, you can use the static methods `Icon.getTwoToneColor()` and `Icon.setTwoToneColor(colorString)` to spicify the primary color. When using the two-tone icons, you can use the static methods `Icon.getTwoToneColor()` and `Icon.setTwoToneColor(colorString)` to spicify the primary color.
```jsx ```jsx
@ -48,6 +63,8 @@ Icon.setTwoToneColor('#eb2f96');
Icon.getTwoToneColor(); // #eb2f96 Icon.getTwoToneColor(); // #eb2f96
``` ```
### Custom Svg Icon
You can import svg icon as an react component by using `webpack` and [`@svgr/webpack`](https://www.npmjs.com/package/@svgr/webpack). `@svgr/webpack`'s `options` [reference](https://github.com/smooth-code/svgr#options). You can import svg icon as an react component by using `webpack` and [`@svgr/webpack`](https://www.npmjs.com/package/@svgr/webpack). `@svgr/webpack`'s `options` [reference](https://github.com/smooth-code/svgr#options).
```js ```js
@ -89,12 +106,11 @@ The following properties are available for the component:
| className | The computed class name of the `svg` element | string | - | | className | The computed class name of the `svg` element | string | - |
| style | The computed style of the `svg` element | CSSProperties | - | | style | The computed style of the `svg` element | CSSProperties | - |
### Custom Font Icon
### Use custom icon with iconfont.cn We added a `createFromIconfontCN` function to help developer using their own icons deployed at [iconfont.cn](http://iconfont.cn/) in a convenient way.
#### Icon.createFromIconfontCN(options) > This method is specified for [iconfont.cn](http://iconfont.cn/).
This method is specified for [iconfont.cn](http://iconfont.cn/).
```js ```js
const MyIcon = Icon.createFromIconfontCN({ const MyIcon = Icon.createFromIconfontCN({

View File

@ -16,7 +16,7 @@ toc: false
> 点击图标即可复制代码。 > 点击图标即可复制代码。
双色图标可能略有缺失,我们还在持续补充中。 新版图标可能略有缺失,我们还在持续补充中。
```__react ```__react
import IconDisplay from 'site/theme/template/IconDisplay'; import IconDisplay from 'site/theme/template/IconDisplay';
@ -32,9 +32,22 @@ ReactDOM.render(<IconDisplay />, mountNode);
| theme | 图标主题风格。可选实心、描线、双色等主题风格,适用于官方图标 | 'filled' \| 'outlined' \| 'twoTone' | 'outlined' | | theme | 图标主题风格。可选实心、描线、双色等主题风格,适用于官方图标 | 'filled' \| 'outlined' \| 'twoTone' | 'outlined' |
| spin | 是否有旋转动画 | boolean | false | | spin | 是否有旋转动画 | boolean | false |
| component | 控制如何渲染图标,通常是一个渲染根标签为 `<svg>``React` 组件,**会使 `type` 属性失效** | ComponentType<CustomIconComponentProps\> | - | | component | 控制如何渲染图标,通常是一个渲染根标签为 `<svg>``React` 组件,**会使 `type` 属性失效** | ComponentType<CustomIconComponentProps\> | - |
| twoToneColor | 仅适用双色图标。设置双色图标的主要颜色 | string (十六进制颜色) | - | | twoToneColor | 仅适用双色图标。设置双色图标的主要颜色 | string (十六进制颜色) | - |
其中 `theme`, `component`, `twoToneColor``antd@3.9.x` 新增加的属性。最佳实践是给使用的 `<Icon />` 组件传入属性 `theme` 以明确图标的主题风格。例如: ### Svg 图标
`3.9.x` 版本后,我们使用了 svg 图标替换了原先的 font 图标,从而带来了以下优势:
- 完全离线化使用,不需要从支付宝 cdn 下载字体文件,图标不会因为网络问题呈现方块,也无需字体文件本地部署。
- 在低端设备上 svg 有更好的清晰度。
- 支持多色图标。
- 对于内建图标的更换可以提供更多 API而不需要进行样式覆盖。
更多讨论可参考:[#10353](https://github.com/ant-design/ant-design/issues/10353)。
> ⚠️ 目前 3.9.x 上我们全量引入了所有图标,导致 antd 默认的包体积有一定增加,我们会在不远的未来增加新的 API 来实现图标的按需使用,更多相关讨论可关注:[#12011](https://github.com/ant-design/ant-design/issues/12011)。
其中 `theme`, `component`, `twoToneColor``3.9.x` 版本新增加的属性。最佳实践是给使用的 `<Icon />` 组件传入属性 `theme` 以明确图标的主题风格。例如:
```jsx ```jsx
<Icon type="star" theme="filled" /> <Icon type="star" theme="filled" />
@ -46,13 +59,17 @@ ReactDOM.render(<IconDisplay />, mountNode);
<Icon type="message" style={{ fontSize: '16px', color: '#08c' }} /> <Icon type="message" style={{ fontSize: '16px', color: '#08c' }} />
``` ```
对于双色图标,可以通过使用 `Icon.getTwoToneColor()``Icon.setTwoToneColor(colorString)` 来设置图标主色。 ### 双色图标主色
对于双色图标,可以通过使用 `Icon.getTwoToneColor()``Icon.setTwoToneColor(colorString)` 来全局设置图标主色。
```jsx ```jsx
Icon.setTwoToneColor('#eb2f96'); Icon.setTwoToneColor('#eb2f96');
Icon.getTwoToneColor(); // #eb2f96 Icon.getTwoToneColor(); // #eb2f96
``` ```
### 自定义 svg 图标
如果使用 `webpack`,可以通过配置 [@svgr/webpack](https://www.npmjs.com/package/@svgr/webpack) 来将 `svg` 图标作为 `React` 组件导入。`@svgr/webpack` 的 `options` 选项请参阅 [svgr文档](https://github.com/smooth-code/svgr#options)。 如果使用 `webpack`,可以通过配置 [@svgr/webpack](https://www.npmjs.com/package/@svgr/webpack) 来将 `svg` 图标作为 `React` 组件导入。`@svgr/webpack` 的 `options` 选项请参阅 [svgr文档](https://github.com/smooth-code/svgr#options)。
```js ```js
@ -94,11 +111,9 @@ ReactDOM.render(
| className | 计算后的 `svg` 类名 | string | - | | className | 计算后的 `svg` 类名 | string | - |
| style | 计算后的 `svg` 元素样式 | CSSProperties | - | | style | 计算后的 `svg` 元素样式 | CSSProperties | - |
### 使用 iconfont.cn 的自定义图标 ### 自定义 font 图标
#### Icon.createFromIconfontCN(options) `3.9.x` 里,我们提供了一个 `createFromIconfontCN` 方法,方便开发者调用在 [iconfont.cn](http://iconfont.cn/) 上自行管理的图标。
这个方法适用于 `iconfont.cn` 的用户
```js ```js
const MyIcon = Icon.createFromIconfontCN({ const MyIcon = Icon.createFromIconfontCN({

View File

@ -5873,6 +5873,7 @@ exports[`Locale Provider should display the text as ar 1`] = `
/> />
<div <div
class="ant-popover-inner" class="ant-popover-inner"
role="tooltip"
> >
<div> <div>
<div <div
@ -10750,6 +10751,7 @@ exports[`Locale Provider should display the text as bg 1`] = `
/> />
<div <div
class="ant-popover-inner" class="ant-popover-inner"
role="tooltip"
> >
<div> <div>
<div <div
@ -15627,6 +15629,7 @@ exports[`Locale Provider should display the text as ca 1`] = `
/> />
<div <div
class="ant-popover-inner" class="ant-popover-inner"
role="tooltip"
> >
<div> <div>
<div <div
@ -20504,6 +20507,7 @@ exports[`Locale Provider should display the text as cs 1`] = `
/> />
<div <div
class="ant-popover-inner" class="ant-popover-inner"
role="tooltip"
> >
<div> <div>
<div <div
@ -25381,6 +25385,7 @@ exports[`Locale Provider should display the text as de 1`] = `
/> />
<div <div
class="ant-popover-inner" class="ant-popover-inner"
role="tooltip"
> >
<div> <div>
<div <div
@ -30258,6 +30263,7 @@ exports[`Locale Provider should display the text as el 1`] = `
/> />
<div <div
class="ant-popover-inner" class="ant-popover-inner"
role="tooltip"
> >
<div> <div>
<div <div
@ -35135,6 +35141,7 @@ exports[`Locale Provider should display the text as en 1`] = `
/> />
<div <div
class="ant-popover-inner" class="ant-popover-inner"
role="tooltip"
> >
<div> <div>
<div <div
@ -40012,6 +40019,7 @@ exports[`Locale Provider should display the text as en-gb 1`] = `
/> />
<div <div
class="ant-popover-inner" class="ant-popover-inner"
role="tooltip"
> >
<div> <div>
<div <div
@ -44889,6 +44897,7 @@ exports[`Locale Provider should display the text as es 1`] = `
/> />
<div <div
class="ant-popover-inner" class="ant-popover-inner"
role="tooltip"
> >
<div> <div>
<div <div
@ -49766,6 +49775,7 @@ exports[`Locale Provider should display the text as et 1`] = `
/> />
<div <div
class="ant-popover-inner" class="ant-popover-inner"
role="tooltip"
> >
<div> <div>
<div <div
@ -54643,6 +54653,7 @@ exports[`Locale Provider should display the text as fa 1`] = `
/> />
<div <div
class="ant-popover-inner" class="ant-popover-inner"
role="tooltip"
> >
<div> <div>
<div <div
@ -59520,6 +59531,7 @@ exports[`Locale Provider should display the text as fi 1`] = `
/> />
<div <div
class="ant-popover-inner" class="ant-popover-inner"
role="tooltip"
> >
<div> <div>
<div <div
@ -64397,6 +64409,7 @@ exports[`Locale Provider should display the text as fr 1`] = `
/> />
<div <div
class="ant-popover-inner" class="ant-popover-inner"
role="tooltip"
> >
<div> <div>
<div <div
@ -69274,6 +69287,7 @@ exports[`Locale Provider should display the text as fr 2`] = `
/> />
<div <div
class="ant-popover-inner" class="ant-popover-inner"
role="tooltip"
> >
<div> <div>
<div <div
@ -74151,6 +74165,7 @@ exports[`Locale Provider should display the text as is 1`] = `
/> />
<div <div
class="ant-popover-inner" class="ant-popover-inner"
role="tooltip"
> >
<div> <div>
<div <div
@ -79028,6 +79043,7 @@ exports[`Locale Provider should display the text as it 1`] = `
/> />
<div <div
class="ant-popover-inner" class="ant-popover-inner"
role="tooltip"
> >
<div> <div>
<div <div
@ -83905,6 +83921,7 @@ exports[`Locale Provider should display the text as ja 1`] = `
/> />
<div <div
class="ant-popover-inner" class="ant-popover-inner"
role="tooltip"
> >
<div> <div>
<div <div
@ -88782,6 +88799,7 @@ exports[`Locale Provider should display the text as ko 1`] = `
/> />
<div <div
class="ant-popover-inner" class="ant-popover-inner"
role="tooltip"
> >
<div> <div>
<div <div
@ -93659,6 +93677,7 @@ exports[`Locale Provider should display the text as ku-iq 1`] = `
/> />
<div <div
class="ant-popover-inner" class="ant-popover-inner"
role="tooltip"
> >
<div> <div>
<div <div
@ -98536,6 +98555,7 @@ exports[`Locale Provider should display the text as mn-mn 1`] = `
/> />
<div <div
class="ant-popover-inner" class="ant-popover-inner"
role="tooltip"
> >
<div> <div>
<div <div
@ -103413,6 +103433,7 @@ exports[`Locale Provider should display the text as nb 1`] = `
/> />
<div <div
class="ant-popover-inner" class="ant-popover-inner"
role="tooltip"
> >
<div> <div>
<div <div
@ -108290,6 +108311,7 @@ exports[`Locale Provider should display the text as nl 1`] = `
/> />
<div <div
class="ant-popover-inner" class="ant-popover-inner"
role="tooltip"
> >
<div> <div>
<div <div
@ -113167,6 +113189,7 @@ exports[`Locale Provider should display the text as nl-be 1`] = `
/> />
<div <div
class="ant-popover-inner" class="ant-popover-inner"
role="tooltip"
> >
<div> <div>
<div <div
@ -118044,6 +118067,7 @@ exports[`Locale Provider should display the text as pl 1`] = `
/> />
<div <div
class="ant-popover-inner" class="ant-popover-inner"
role="tooltip"
> >
<div> <div>
<div <div
@ -122921,6 +122945,7 @@ exports[`Locale Provider should display the text as pt 1`] = `
/> />
<div <div
class="ant-popover-inner" class="ant-popover-inner"
role="tooltip"
> >
<div> <div>
<div <div
@ -127798,6 +127823,7 @@ exports[`Locale Provider should display the text as pt-br 1`] = `
/> />
<div <div
class="ant-popover-inner" class="ant-popover-inner"
role="tooltip"
> >
<div> <div>
<div <div
@ -132675,6 +132701,7 @@ exports[`Locale Provider should display the text as ru 1`] = `
/> />
<div <div
class="ant-popover-inner" class="ant-popover-inner"
role="tooltip"
> >
<div> <div>
<div <div
@ -137552,6 +137579,7 @@ exports[`Locale Provider should display the text as sk 1`] = `
/> />
<div <div
class="ant-popover-inner" class="ant-popover-inner"
role="tooltip"
> >
<div> <div>
<div <div
@ -142429,6 +142457,7 @@ exports[`Locale Provider should display the text as sl 1`] = `
/> />
<div <div
class="ant-popover-inner" class="ant-popover-inner"
role="tooltip"
> >
<div> <div>
<div <div
@ -147306,6 +147335,7 @@ exports[`Locale Provider should display the text as sr 1`] = `
/> />
<div <div
class="ant-popover-inner" class="ant-popover-inner"
role="tooltip"
> >
<div> <div>
<div <div
@ -152183,6 +152213,7 @@ exports[`Locale Provider should display the text as sv 1`] = `
/> />
<div <div
class="ant-popover-inner" class="ant-popover-inner"
role="tooltip"
> >
<div> <div>
<div <div
@ -157060,6 +157091,7 @@ exports[`Locale Provider should display the text as th 1`] = `
/> />
<div <div
class="ant-popover-inner" class="ant-popover-inner"
role="tooltip"
> >
<div> <div>
<div <div
@ -161937,6 +161969,7 @@ exports[`Locale Provider should display the text as tr 1`] = `
/> />
<div <div
class="ant-popover-inner" class="ant-popover-inner"
role="tooltip"
> >
<div> <div>
<div <div
@ -166814,6 +166847,7 @@ exports[`Locale Provider should display the text as uk 1`] = `
/> />
<div <div
class="ant-popover-inner" class="ant-popover-inner"
role="tooltip"
> >
<div> <div>
<div <div
@ -171691,6 +171725,7 @@ exports[`Locale Provider should display the text as vi 1`] = `
/> />
<div <div
class="ant-popover-inner" class="ant-popover-inner"
role="tooltip"
> >
<div> <div>
<div <div
@ -176568,6 +176603,7 @@ exports[`Locale Provider should display the text as zh-cn 1`] = `
/> />
<div <div
class="ant-popover-inner" class="ant-popover-inner"
role="tooltip"
> >
<div> <div>
<div <div
@ -181445,6 +181481,7 @@ exports[`Locale Provider should display the text as zh-tw 1`] = `
/> />
<div <div
class="ant-popover-inner" class="ant-popover-inner"
role="tooltip"
> >
<div> <div>
<div <div

View File

@ -20,7 +20,7 @@ const openNotification = () => {
notification.open({ notification.open({
message: 'Notification Title', message: 'Notification Title',
description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.', description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
icon: <Icon type="smile-circle" style={{ color: '#108ee9' }} />, icon: <Icon type="smile" style={{ color: '#108ee9' }} />,
}); });
}; };

View File

@ -1,5 +1,5 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Popconfirm should show overlay when trigger is clicked 1`] = `"<div class=\\"ant-popover-content\\"><div class=\\"ant-popover-arrow\\"></div><div class=\\"ant-popover-inner\\"><div><div class=\\"ant-popover-inner-content\\"><div class=\\"ant-popover-message\\"><i class=\\"anticon anticon-exclamation-circle\\"><svg viewBox=\\"64 64 896 896\\" class=\\"\\" data-icon=\\"exclamation-circle\\" width=\\"1em\\" height=\\"1em\\" fill=\\"currentColor\\" aria-hidden=\\"true\\"><path d=\\"M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z\\"></path></svg></i><div class=\\"ant-popover-message-title\\">code</div></div><div class=\\"ant-popover-buttons\\"><button type=\\"button\\" class=\\"ant-btn ant-btn-sm\\"><span>Cancel</span></button><button type=\\"button\\" class=\\"ant-btn ant-btn-primary ant-btn-sm\\"><span>OK</span></button></div></div></div></div></div>"`; exports[`Popconfirm should show overlay when trigger is clicked 1`] = `"<div class=\\"ant-popover-content\\"><div class=\\"ant-popover-arrow\\"></div><div class=\\"ant-popover-inner\\" role=\\"tooltip\\"><div><div class=\\"ant-popover-inner-content\\"><div class=\\"ant-popover-message\\"><i class=\\"anticon anticon-exclamation-circle\\"><svg viewBox=\\"64 64 896 896\\" class=\\"\\" data-icon=\\"exclamation-circle\\" width=\\"1em\\" height=\\"1em\\" fill=\\"currentColor\\" aria-hidden=\\"true\\"><path d=\\"M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z\\"></path></svg></i><div class=\\"ant-popover-message-title\\">code</div></div><div class=\\"ant-popover-buttons\\"><button type=\\"button\\" class=\\"ant-btn ant-btn-sm\\"><span>Cancel</span></button><button type=\\"button\\" class=\\"ant-btn ant-btn-primary ant-btn-sm\\"><span>OK</span></button></div></div></div></div></div>"`;
exports[`Popconfirm should show overlay when trigger is clicked 2`] = `"<div class=\\"ant-popover-content\\"><div class=\\"ant-popover-arrow\\"></div><div class=\\"ant-popover-inner\\"><div><div class=\\"ant-popover-inner-content\\"><div class=\\"ant-popover-message\\"><i class=\\"anticon anticon-exclamation-circle\\"><svg viewBox=\\"64 64 896 896\\" class=\\"\\" data-icon=\\"exclamation-circle\\" width=\\"1em\\" height=\\"1em\\" fill=\\"currentColor\\" aria-hidden=\\"true\\"><path d=\\"M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z\\"></path></svg></i><div class=\\"ant-popover-message-title\\">code</div></div><div class=\\"ant-popover-buttons\\"><button type=\\"button\\" class=\\"ant-btn ant-btn-sm\\"><span>Cancel</span></button><button type=\\"button\\" class=\\"ant-btn ant-btn-primary ant-btn-sm\\"><span>OK</span></button></div></div></div></div></div>"`; exports[`Popconfirm should show overlay when trigger is clicked 2`] = `"<div class=\\"ant-popover-content\\"><div class=\\"ant-popover-arrow\\"></div><div class=\\"ant-popover-inner\\" role=\\"tooltip\\"><div><div class=\\"ant-popover-inner-content\\"><div class=\\"ant-popover-message\\"><i class=\\"anticon anticon-exclamation-circle\\"><svg viewBox=\\"64 64 896 896\\" class=\\"\\" data-icon=\\"exclamation-circle\\" width=\\"1em\\" height=\\"1em\\" fill=\\"currentColor\\" aria-hidden=\\"true\\"><path d=\\"M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z\\"></path></svg></i><div class=\\"ant-popover-message-title\\">code</div></div><div class=\\"ant-popover-buttons\\"><button type=\\"button\\" class=\\"ant-btn ant-btn-sm\\"><span>Cancel</span></button><button type=\\"button\\" class=\\"ant-btn ant-btn-primary ant-btn-sm\\"><span>OK</span></button></div></div></div></div></div>"`;

View File

@ -1,5 +1,5 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Popover should show overlay when trigger is clicked 1`] = `"<div class=\\"ant-popover-content\\"><div class=\\"ant-popover-arrow\\"></div><div class=\\"ant-popover-inner\\"><div><div class=\\"ant-popover-title\\">code</div><div class=\\"ant-popover-inner-content\\">console.log('hello world')</div></div></div></div>"`; exports[`Popover should show overlay when trigger is clicked 1`] = `"<div class=\\"ant-popover-content\\"><div class=\\"ant-popover-arrow\\"></div><div class=\\"ant-popover-inner\\" role=\\"tooltip\\"><div><div class=\\"ant-popover-title\\">code</div><div class=\\"ant-popover-inner-content\\">console.log('hello world')</div></div></div></div>"`;
exports[`Popover should show overlay when trigger is clicked 2`] = `"<div class=\\"ant-popover-content\\"><div class=\\"ant-popover-arrow\\"></div><div class=\\"ant-popover-inner\\"><div><div class=\\"ant-popover-title\\">code</div><div class=\\"ant-popover-inner-content\\">console.log('hello world')</div></div></div></div>"`; exports[`Popover should show overlay when trigger is clicked 2`] = `"<div class=\\"ant-popover-content\\"><div class=\\"ant-popover-arrow\\"></div><div class=\\"ant-popover-inner\\" role=\\"tooltip\\"><div><div class=\\"ant-popover-title\\">code</div><div class=\\"ant-popover-inner-content\\">console.log('hello world')</div></div></div></div>"`;

View File

@ -13,6 +13,7 @@ exports[`Slider should show tooltip when hovering slider handler 1`] = `
/> />
<div <div
class="ant-tooltip-inner" class="ant-tooltip-inner"
role="tooltip"
> >
30 30
</div> </div>
@ -34,6 +35,7 @@ exports[`Slider should show tooltip when hovering slider handler 2`] = `
/> />
<div <div
class="ant-tooltip-inner" class="ant-tooltip-inner"
role="tooltip"
> >
30 30
</div> </div>

View File

@ -4,13 +4,13 @@
vertical-align: -0.125em; // for SVG icon, see https://blog.prototypr.io/align-svg-icons-to-text-and-say-goodbye-to-font-icons-d44b3d7b26b4 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-align: center; text-align: center;
text-transform: none; text-transform: none;
line-height: 1; line-height: 0;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
svg { svg {
display: block; display: inline-block;
} }
&:before { &:before {

View File

@ -95,7 +95,7 @@
&-thead > tr, &-thead > tr,
&-tbody > tr { &-tbody > tr {
transition: all .3s; transition: all .3s, height 0s;
&.@{table-prefix-cls}-row-hover, &.@{table-prefix-cls}-row-hover,
&:hover { &:hover {
& > td { & > td {

View File

@ -158,12 +158,14 @@ export default class Tabs extends React.Component<TabsProps, any> {
</div> </div>
) : null; ) : null;
const { className: dropped, ...tabBarProps } = this.props;
return ( return (
<RcTabs <RcTabs
{...this.props} {...this.props}
className={cls} className={cls}
tabBarPosition={tabPosition} tabBarPosition={tabPosition}
renderTabBar={() => <TabBar {...this.props} tabBarExtraContent={tabBarExtraContent}/>} renderTabBar={() => <TabBar {...tabBarProps} tabBarExtraContent={tabBarExtraContent}/>}
renderTabContent={() => <TabContent animated={tabPaneAnimated} animatedWithMargin />} renderTabContent={() => <TabContent animated={tabPaneAnimated} animatedWithMargin />}
onChange={this.handleChange} onChange={this.handleChange}
> >

View File

@ -26,7 +26,7 @@ The following APIs are shared by Tooltip, Popconfirm, Popover.
| arrowPointAtCenter | Whether the arrow is pointed at the center of target, supported after `antd@1.11+` | boolean | `false` | | arrowPointAtCenter | Whether the arrow is pointed at the center of target, supported after `antd@1.11+` | boolean | `false` |
| autoAdjustOverflow | Whether to adjust popup placement automatically when popup is off screen | boolean | `true` | | autoAdjustOverflow | Whether to adjust popup placement automatically when popup is off screen | boolean | `true` |
| defaultVisible | Whether the floating tooltip card is visible by default | boolean | `false` | | defaultVisible | Whether the floating tooltip card is visible by default | boolean | `false` |
| getPopupContainer | The DOM container of the tip, the default behavior is to create a `div` element in `body`. Use `getTooltipContainer` if you are using `antd@<2.5.2` | Function(triggerNode) | () => document.body | | getPopupContainer | The DOM container of the tip, the default behavior is to create a `div` element in `body` | Function(triggerNode) | () => document.body |
| mouseEnterDelay | Delay in seconds, before tooltip is shown on mouse enter | number | 0 | | mouseEnterDelay | Delay in seconds, before tooltip is shown on mouse enter | number | 0 |
| mouseLeaveDelay | Delay in seconds, before tooltip is hidden on mouse leave | number | 0.1 | | mouseLeaveDelay | Delay in seconds, before tooltip is hidden on mouse leave | number | 0.1 |
| overlayClassName | Class name of the tooltip card | string | - | | overlayClassName | Class name of the tooltip card | string | - |

View File

@ -28,7 +28,7 @@ title: Tooltip
| arrowPointAtCenter | 箭头是否指向目标元素中心,`antd@1.11+` 支持 | boolean | `false` | | arrowPointAtCenter | 箭头是否指向目标元素中心,`antd@1.11+` 支持 | boolean | `false` |
| autoAdjustOverflow | 气泡被遮挡时自动调整位置 | boolean | `true` | | autoAdjustOverflow | 气泡被遮挡时自动调整位置 | boolean | `true` |
| defaultVisible | 默认是否显隐 | boolean | false | | defaultVisible | 默认是否显隐 | boolean | false |
| getPopupContainer | 浮层渲染父节点,默认渲染到 body 上。`2.5.2` 之前请使用 `getTooltipContainer` | Function(triggerNode) | () => document.body | | getPopupContainer | 浮层渲染父节点,默认渲染到 body 上 | Function(triggerNode) | () => document.body |
| mouseEnterDelay | 鼠标移入后延时多少才显示 Tooltip单位秒 | number | 0 | | mouseEnterDelay | 鼠标移入后延时多少才显示 Tooltip单位秒 | number | 0 |
| mouseLeaveDelay | 鼠标移出后延时多少才隐藏 Tooltip单位秒 | number | 0.1 | | mouseLeaveDelay | 鼠标移出后延时多少才隐藏 Tooltip单位秒 | number | 0.1 |
| overlayClassName | 卡片类名 | string | 无 | | overlayClassName | 卡片类名 | string | 无 |

View File

@ -35,7 +35,7 @@ export interface TreeSelectProps extends AbstractSelectProps {
multiple?: boolean; multiple?: boolean;
maxTagCount?: number; maxTagCount?: number;
onSelect?: (value: any) => void; onSelect?: (value: any) => void;
onChange?: (value: any, label: any) => void; onChange?: (value: any, label: any, extra: any) => void;
onSearch?: (value: any) => void; onSearch?: (value: any) => void;
searchPlaceholder?: string; searchPlaceholder?: string;
dropdownStyle?: React.CSSProperties; dropdownStyle?: React.CSSProperties;

View File

@ -136,15 +136,17 @@ export default class UploadList extends React.Component<UploadListProps, any> {
[`${prefixCls}-list-item`]: true, [`${prefixCls}-list-item`]: true,
[`${prefixCls}-list-item-${file.status}`]: true, [`${prefixCls}-list-item-${file.status}`]: true,
}); });
const linkProps = typeof file.linkProps === 'string'
? JSON.parse(file.linkProps) : file.linkProps;
const preview = file.url ? ( const preview = file.url ? (
<a <a
{...file.linkProps}
href={file.url}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className={`${prefixCls}-list-item-name`} className={`${prefixCls}-list-item-name`}
onClick={e => this.handlePreview(file, e)}
title={file.name} title={file.name}
{...linkProps}
href={file.url}
onClick={e => this.handlePreview(file, e)}
> >
{file.name} {file.name}
</a> </a>

View File

@ -185,4 +185,43 @@ describe('Upload', () => {
}); });
}); });
}); });
it('should support linkProps as object', () => {
const fileList = [{
uid: '-1',
name: 'foo.png',
status: 'done',
url: 'http://www.baidu.com/xxx.png',
linkProps: {
download: 'image',
rel: 'noopener',
},
}];
const wrapper = mount(
<Upload fileList={fileList} />
);
const linkNode = wrapper.find('a.ant-upload-list-item-name');
expect(linkNode.props().download).toBe('image');
expect(linkNode.props().rel).toBe('noopener');
});
it('should support linkProps as json stringify', () => {
const linkPropsString = JSON.stringify({
download: 'image',
rel: 'noopener',
});
const fileList = [{
uid: '-1',
name: 'foo.png',
status: 'done',
url: 'http://www.baidu.com/xxx.png',
linkProps: linkPropsString,
}];
const wrapper = mount(
<Upload fileList={fileList} />
);
const linkNode = wrapper.find('a.ant-upload-list-item-name');
expect(linkNode.props().download).toBe('image');
expect(linkNode.props().rel).toBe('noopener');
});
}); });

View File

@ -66,8 +66,6 @@ When uploading state change, it returns:
} }
``` ```
> Before `antd@1.9.0`, this parameter will be Array Object `[file, ...]` in multiple mode, while in `antd@1.9.0+`, it will always be an Object.
2. `fileList` current list of files 2. `fileList` current list of files
3. `event` response from server, including uploading progress, supported by advanced browsers. 3. `event` response from server, including uploading progress, supported by advanced browsers.

View File

@ -67,8 +67,6 @@ title: Upload
} }
``` ```
> `antd@1.9.0` 之前multiple 模式下,此参数为一个对象数组 `[file, ...]``antd@1.9.0` 开始无论是否多选,均为一个对象。
2. `fileList` 当前的文件列表。 2. `fileList` 当前的文件列表。
3. `event` 上传中的服务端响应内容,包含了上传进度等信息,高级浏览器支持。 3. `event` 上传中的服务端响应内容,包含了上传进度等信息,高级浏览器支持。

View File

@ -1,5 +1,5 @@
--- ---
order: 9 order: 10
title: Contributing title: Contributing
toc: false toc: false
--- ---
@ -16,13 +16,13 @@ All work on Ant Design happens directly on [GitHub](https://github.com/ant-desig
## Branch Organization ## Branch Organization
According to our [release schedule](changelog#Release-Schedule), we'll cut a `feature` branch (e.g. `feature-3.1` for 3.1 release) from `master` every month. If you send a bugfix pull request, please do it against the `master` branch, if it's a feature pull request, please do it against the `feature` branch. According to our [release schedule](changelog#Release-Schedule), we maintians two branchs `master` and `feature`. If you send a bugfix pull request, please do it against the `master` branch, if it's a feature pull request, please do it against the `feature` branch.
## Bugs ## Bugs
We are using [GitHub Issues](https://github.com/ant-design/ant-design/issues) for bug tracing. The best way to get your bug fixed is using our [issue helper](http://new-issue.ant.design) and provide a reprduction with this [template](https://u.ant.design/codesandbox-repro). We are using [GitHub Issues](https://github.com/ant-design/ant-design/issues) for bug tracing. The best way to get your bug fixed is using our [issue helper](http://new-issue.ant.design) and provide a reprduction with this [template](https://u.ant.design/codesandbox-repro).
Before you reporting a bug, please make sure you've searched exists issues, and read our [FAQ](https://github.com/ant-design/ant-design/wiki/FAQ). Before you reporting a bug, please make sure you've searched exists issues, and read our [FAQ](/docs/react/faq).
## Proposing a Change ## Proposing a Change

View File

@ -1,5 +1,5 @@
--- ---
order: 9 order: 10
title: 贡献指南 title: 贡献指南
toc: false toc: false
--- ---
@ -16,13 +16,13 @@ toc: false
## 分支管理 ## 分支管理
基于我们的 [发布周期](/changelog),我们每个月都会从 `master` 分支切一个 `feature` 分支出来(比如 `features-3.1` 分支用来发布 3.1 版本)。 如果你要修一个 bug那么请发 pull request 到 `master`;如果你要提一个增加新功能的 pull request那么请基于 `feature` 分支来做。 基于我们的 [发布周期](/changelog),我们长期维护两个分支 `master``feature`如果你要修一个 bug那么请发 pull request 到 `master`;如果你要提一个增加新功能的 pull request那么请基于 `feature` 分支来做。
## Bugs ## Bugs
我们使用 [GitHub Issues](https://github.com/ant-design/ant-design/issues) 来做 bug 追踪。 如果你想要你发现的 bug 被快速解决,最好的办法就是通过我们提供的 [issue 小助手](http://new-issue.ant.design) 来提 issue。并且能使用这个 [模板](https://u.ant.design/codesandbox-repro) 来提供重现。 我们使用 [GitHub Issues](https://github.com/ant-design/ant-design/issues) 来做 bug 追踪。 如果你想要你发现的 bug 被快速解决,最好的办法就是通过我们提供的 [issue 小助手](http://new-issue.ant.design) 来提 issue。并且能使用这个 [模板](https://u.ant.design/codesandbox-repro) 来提供重现。
在你报告一个 bug 之前,请先确保已经搜索过已有的 issue 和阅读了我们的 [常见问题](https://github.com/ant-design/ant-design/wiki/FAQ)。 在你报告一个 bug 之前,请先确保已经搜索过已有的 issue 和阅读了我们的 [常见问题](/docs/react/faq)。
## 新增功能 ## 新增功能

160
docs/react/faq.en-US.md Normal file
View File

@ -0,0 +1,160 @@
---
order: 9
title: FAQ
---
Search in the questions about React first: https://reactfaq.site .
---
### Are you going to provide Vue(etc...) edition?
No, but [the LICENSE of ant-design](https://github.com/ant-design/ant-design/blob/master/LICENSE) is MIT. So, you can try to implement it with ant-design's [style](https://github.com/ant-design/ant-design/tree/master/style), like: [ant-design-vue](https://github.com/vueComponent/ant-design-vue) [vue-beauty)](https://github.com/FE-Driver/vue-beauty) or [antue](https://github.com/zzuu666/antue).
### Are you going to provide Sass/Stylus(etc...) style file?
No, actually, you can convert Less to Sass/Stylus(etc...) with tools (which you can Google).
### `Select Dropdown DatePicker TimePicker Popover Popconfirm` will disappear when I click another popup component inside it, How to resolve it?
Use `<Select getPopupContainer={trigger => trigger.parentNode}>` to render component inside Popover. (Or other getXxxxContainer props)
https://ant.design/components/select/#Select-props
related 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` will scroll with page?
Use `<Select getPopupContainer={trigger => trigger.parentNode}>` to render component inside the scroll area. (Or other getXxxxContainer props).
https://ant.design/components/select/#Select-props
related issue: [#3487](https://github.com/ant-design/ant-design/issues/3487) [#3438](https://github.com/ant-design/ant-design/issues/3438)
### How to modify default theme of Ant Design?
See: https://ant.design/docs/react/customize-theme .
### Would you supply other themes?
No, we follow Ant Design specification. https://github.com/ant-design/ant-design/issues/1241
### How to modify `Menu`/`Button`(etc...)'s style?
You can override its style. But we don't recommend to do so. antd is not only a set of React components but also a design specification.
### I just want to use `Menu`/`Button`(etc...), but it seems that I have to import the whole antd and its style.
Try [babel-plugin-import](https://github.com/ant-design/babel-plugin-import), or import what you need in this way:
```jsx
import Menu from 'antd/lib/menu';
import 'antd/lib/button/style/css';
```
or (ES6 way with tree shaking):
```jsx
import { Menu, Breadcrumb, Icon } from 'antd';
```
### How to optimize momentjs bundle size with webpack?
See: https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
### It doesn't work when I change `defaultValue` dynamically.
The `defaultXxxx` (like `defaultValue`) of `Input`/`Select`(etc...) only works in first render. It is a specification of React, please read [React's documentation](https://facebook.github.io/react/docs/forms.html#controlled-components).
### I set the `value` of `Input`/`Select`(etc...), and then, it cannot be changed by user's action.
Try `defaultValue` or `onChange` to change `value`, and please read [React's documentation](https://facebook.github.io/react/docs/forms.html#controlled-components).
### antd override my global styles!
Yes, antd is designed to develop a complete background application, we override some global styles for styling convenience and it can't be removed now. More info trace https://github.com/ant-design/ant-design/issues/4331 .
Or follow instruction in [How to avoid modifying global styles?](docs/react/customize-theme#How-to-avoid-modifying-global-styles-?)
### I cannot install `antd` and `antd`'s dependencies(etc...). FYI, I live in China mainland.
Long live the Girl Friend Wall! And try [cnpm](http://npm.taobao.org/).
### I set `dependencies.antd` as git repository in package.json, but it doesn't work.
Yes, please install `antd` with npm.
### `message` and `notification` is lower case, but other components are capitalized. Typo?
No, as `message` is just a function, not a React Component.
### `antd` doesn't work well in mobile.
Please check [And Design Mobile](http://mobile.ant.design) for details. `antd` has not been optimized to do so. You may try [react-component](https://github.com/react-component/), those repositories which start with 'm-' 'rn-' are designed for mobile.
### Does `antd` supply standalone files like 'react' do?
Yep, you can [import `antd` with script tag](https://ant.design/docs/react/install?locale=en-US#Import-in-Browser). But we recommend use `npm` to import `antd`, it is simple and ease to maintain.
### I can't visit `icon` in my network environment.
You should deploy the iconfont files to your network by following this [example](https://github.com/ant-design/antd-init/tree/7c1a33cadb98f2fd8688fe527dd7f98215b9bced/examples/local-iconfont). [#1070](https://github.com/ant-design/ant-design/issues/1070)
After 3.9.x [we are using svg icon](/components/icon#svg-icons) so you don't need to deploy iconfont locally any more!
### How to extend antd's components?
If you need some features which should not be included in antd, try to extend antd's component with [HOC](https://gist.github.com/sebmarkbage/ef0bf1f338a7182b6775). [more](https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750#.eeu8q01s1)
### How to spell Ant Design correctly?
- ✅ **Ant Design**: Capitalized with space, for the design language
- ✅ **antd**: all lowercase, for the React UI library
Here are some typical wrong examples:
- ❌ AntD
- ❌ antD
- ❌ Antd
- ❌ ant design
- ❌ AntDesign
- ❌ antdesign
- ❌ Antdesign
### Do you guys have any channel for donation? like PayPal or Alipay.
No yet.
### Why not?
Alibaba will pay us.
---
## Errors & Warnings
Here are some errors & warnings that you may meet while using antd, but most of them are not bugs of antd.
### Adjacent JSX elements must be wrapped in an enclosing tag
An [answer from StackOverflow](http://stackoverflow.com/questions/25034994/how-to-correctly-wrap-few-td-tags-for-jsxtransformer), and please read [React's documentation](http://facebook.github.io/react/docs/displaying-data.html#components-are-just-like-functions).
### React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components)
Please make sure that you import `antd`'s components correctly. Read the corresponding documentation of the `antd`'s version which you use. And pay attention to typo.
### rm is not recognized as an internal or external command
Please read this [issue](https://github.com/ant-design/ant-design/issues/650#issuecomment-164966511), or try Linux/Unix.
### Failed propType: Invalid prop `AAA` of type `BBB` supplied to `CCC`, expected `DDD`. Check the render method of `EEE`.
Please read the corresponding documentation of the `antd`'s version which you use, and make sure that you pass value with correct type to `antd`'s components,
### Unknown option: xxx/package.json.presets
An [answer from Stack Overflow](http://stackoverflow.com/questions/33685365/unknown-option-babelrc-presets).
### Invariant Violation: findComponentRoot(...): Unable to find element.
You may import React twice. Set React & ReactDOM as external, if you are using webpack, See: [#525](https://github.com/ant-design/ant-design/issues/525). If you are using others(browserify, etc...), please read its documentation and find options which can set React & ReactDOM as external.

160
docs/react/faq.zh-CN.md Normal file
View File

@ -0,0 +1,160 @@
---
order: 9
title: FAQ
---
Search in the questions about React first: https://reactfaq.site .
---
### Are you going to provide Vue(etc...) edition?
No, but [the LICENSE of ant-design](https://github.com/ant-design/ant-design/blob/master/LICENSE) is MIT. So, you can try to implement it with ant-design's [style](https://github.com/ant-design/ant-design/tree/master/style), like: [ant-design-vue](https://github.com/vueComponent/ant-design-vue) [vue-beauty)](https://github.com/FE-Driver/vue-beauty) or [antue](https://github.com/zzuu666/antue).
### Are you going to provide Sass/Stylus(etc...) style file?
No, actually, you can convert Less to Sass/Stylus(etc...) with tools (which you can Google).
### `Select Dropdown DatePicker TimePicker Popover Popconfirm` will disappear when I click another popup component inside it, How to resolve it?
Use `<Select getPopupContainer={trigger => trigger.parentNode}>` to render component inside Popover. (Or other getXxxxContainer props)
https://ant.design/components/select/#Select-props
related 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` will scroll with page?
Use `<Select getPopupContainer={trigger => trigger.parentNode}>` to render component inside the scroll area. (Or other getXxxxContainer props).
https://ant.design/components/select/#Select-props
related issue: [#3487](https://github.com/ant-design/ant-design/issues/3487) [#3438](https://github.com/ant-design/ant-design/issues/3438)
### How to modify default theme of Ant Design?
See: https://ant.design/docs/react/customize-theme .
### Would you supply other themes?
No, we follow Ant Design specification. https://github.com/ant-design/ant-design/issues/1241
### How to modify `Menu`/`Button`(etc...)'s style?
You can override its style. But we don't recommend to do so. antd is not only a set of React components but also a design specification.
### I just want to use `Menu`/`Button`(etc...), but it seems that I have to import the whole antd and its style.
Try [babel-plugin-import](https://github.com/ant-design/babel-plugin-import), or import what you need in this way:
```jsx
import Menu from 'antd/lib/menu';
import 'antd/lib/button/style/css';
```
or (ES6 way with tree shaking):
```jsx
import { Menu, Breadcrumb, Icon } from 'antd';
```
### How to optimize momentjs bundle size with webpack?
See: https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
### It doesn't work when I change `defaultValue` dynamically.
The `defaultXxxx` (like `defaultValue`) of `Input`/`Select`(etc...) only works in first render. It is a specification of React, please read [React's documentation](https://facebook.github.io/react/docs/forms.html#controlled-components).
### I set the `value` of `Input`/`Select`(etc...), and then, it cannot be changed by user's action.
Try `defaultValue` or `onChange` to change `value`, and please read [React's documentation](https://facebook.github.io/react/docs/forms.html#controlled-components).
### antd override my global styles!
Yes, antd is designed to develop a complete background application, we override some global styles for styling convenience and it can't be removed now. More info trace https://github.com/ant-design/ant-design/issues/4331 .
Or follow instruction in [How to avoid modifying global styles?](docs/react/customize-theme#How-to-avoid-modifying-global-styles-?)
### I cannot install `antd` and `antd`'s dependencies(etc...). FYI, I live in China mainland.
Long live the Girl Friend Wall! And try [cnpm](http://npm.taobao.org/).
### I set `dependencies.antd` as git repository in package.json, but it doesn't work.
Yes, please install `antd` with npm.
### `message` and `notification` is lower case, but other components are capitalized. Typo?
No, as `message` is just a function, not a React Component.
### `antd` doesn't work well in mobile.
Please check [And Design Mobile](http://mobile.ant.design) for details. `antd` has not been optimized to do so. You may try [react-component](https://github.com/react-component/), those repositories which start with 'm-' 'rn-' are designed for mobile.
### Does `antd` supply standalone files like 'react' do?
Yep, you can [import `antd` with script tag](https://ant.design/docs/react/install?locale=en-US#Import-in-Browser). But we recommend use `npm` to import `antd`, it is simple and ease to maintain.
### I can't visit `icon` in my network environment.
You should deploy the iconfont files to your network by following this [example](https://github.com/ant-design/antd-init/tree/7c1a33cadb98f2fd8688fe527dd7f98215b9bced/examples/local-iconfont). [#1070](https://github.com/ant-design/ant-design/issues/1070)
After 3.9.x [we are using svg icon](/components/icon#svg-icons) so you don't need to deploy iconfont locally any more!
### How to extend antd's components?
If you need some features which should not be included in antd, try to extend antd's component with [HOC](https://gist.github.com/sebmarkbage/ef0bf1f338a7182b6775). [more](https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750#.eeu8q01s1)
### How to spell Ant Design correctly?
- ✅ **Ant Design**: Capitalized with space, for the design language
- ✅ **antd**: all lowercase, for the React UI library
Here are some typical wrong examples:
- ❌ AntD
- ❌ antD
- ❌ Antd
- ❌ ant design
- ❌ AntDesign
- ❌ antdesign
- ❌ Antdesign
### Do you guys have any channel for donation? like PayPal or Alipay.
No yet.
### Why not?
Alibaba will pay us.
---
## Errors & Warnings
Here are some errors & warnings that you may meet while using antd, but most of them are not bugs of antd.
### Adjacent JSX elements must be wrapped in an enclosing tag
An [answer from StackOverflow](http://stackoverflow.com/questions/25034994/how-to-correctly-wrap-few-td-tags-for-jsxtransformer), and please read [React's documentation](http://facebook.github.io/react/docs/displaying-data.html#components-are-just-like-functions).
### React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components)
Please make sure that you import `antd`'s components correctly. Read the corresponding documentation of the `antd`'s version which you use. And pay attention to typo.
### rm is not recognized as an internal or external command
Please read this [issue](https://github.com/ant-design/ant-design/issues/650#issuecomment-164966511), or try Linux/Unix.
### Failed propType: Invalid prop `AAA` of type `BBB` supplied to `CCC`, expected `DDD`. Check the render method of `EEE`.
Please read the corresponding documentation of the `antd`'s version which you use, and make sure that you pass value with correct type to `antd`'s components,
### Unknown option: xxx/package.json.presets
An [answer from Stack Overflow](http://stackoverflow.com/questions/33685365/unknown-option-babelrc-presets).
### Invariant Violation: findComponentRoot(...): Unable to find element.
You may import React twice. Set React & ReactDOM as external, if you are using webpack, See: [#525](https://github.com/ant-design/ant-design/issues/525). If you are using others(browserify, etc...), please read its documentation and find options which can set React & ReactDOM as external.

View File

@ -129,7 +129,7 @@ import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
- [Motion](https://motion.ant.design) - [Motion](https://motion.ant.design)
- [Developer Instruction](https://github.com/ant-design/ant-design/wiki/Development) - [Developer Instruction](https://github.com/ant-design/ant-design/wiki/Development)
- [Versioning Release Note](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B) - [Versioning Release Note](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
- [FAQ](https://github.com/ant-design/ant-design/wiki/FAQ) - [FAQ](/docs/react/faq)
- [CodeSandbox template](https://u.ant.design/codesandbox-repro) for bug reports - [CodeSandbox template](https://u.ant.design/codesandbox-repro) for bug reports
- [Awesome Ant Design](https://github.com/websemantics/awesome-ant-design) - [Awesome Ant Design](https://github.com/websemantics/awesome-ant-design)
- [Customize Theme](/docs/react/customize-theme) - [Customize Theme](/docs/react/customize-theme)

View File

@ -128,7 +128,7 @@ import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
- [设计规范速查手册](https://github.com/ant-design/ant-design/wiki/Ant-Design-%E8%AE%BE%E8%AE%A1%E5%9F%BA%E7%A1%80%E7%AE%80%E7%89%88) - [设计规范速查手册](https://github.com/ant-design/ant-design/wiki/Ant-Design-%E8%AE%BE%E8%AE%A1%E5%9F%BA%E7%A1%80%E7%AE%80%E7%89%88)
- [开发者说明](https://github.com/ant-design/ant-design/wiki/Development) - [开发者说明](https://github.com/ant-design/ant-design/wiki/Development)
- [版本发布规则](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B) - [版本发布规则](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
- [常见问题](https://github.com/ant-design/ant-design/wiki/FAQ) - [常见问题](/docs/react/faq)
- [CodeSandbox 模板](https://u.ant.design/codesandbox-repro) for bug reports - [CodeSandbox 模板](https://u.ant.design/codesandbox-repro) for bug reports
- [Awesome Ant Design](https://github.com/websemantics/awesome-ant-design) - [Awesome Ant Design](https://github.com/websemantics/awesome-ant-design)
- [定制主题](/docs/react/customize-theme) - [定制主题](/docs/react/customize-theme)

View File

@ -206,6 +206,7 @@
"site": "cross-env NODE_ENV=production bisheng build --ssr -c ./site/bisheng.config.js && node ./scripts/generateColorLess.js", "site": "cross-env NODE_ENV=production bisheng build --ssr -c ./site/bisheng.config.js && node ./scripts/generateColorLess.js",
"predeploy": "antd-tools run clean && npm run site && cp netlify.toml _site && cp -r .circleci _site", "predeploy": "antd-tools run clean && npm run site && cp netlify.toml _site && cp -r .circleci _site",
"deploy": "bisheng gh-pages --push-only", "deploy": "bisheng gh-pages --push-only",
"deploy:china-mirror": "git checkout gh-pages && git pull origin gh-pages && git push git@gitee.com:ant-design/ant-design.git gh-pages",
"pub": "antd-tools run pub", "pub": "antd-tools run pub",
"prepublish": "antd-tools run guard", "prepublish": "antd-tools run guard",
"pre-publish": "npm run test-all && node ./scripts/prepub", "pre-publish": "npm run test-all && node ./scripts/prepub",

View File

@ -193,10 +193,6 @@
border-radius: 20px; border-radius: 20px;
opacity: 0; opacity: 0;
svg {
display: inline-block;
}
&:hover { &:hover {
color: @site-text-color-secondary; color: @site-text-color-secondary;
transform: scale(1.2); transform: scale(1.2);

View File

@ -59,7 +59,7 @@
height: 1px; height: 1px;
border: 0; border: 0;
background: @site-border-color-split; background: @site-border-color-split;
margin: 72px 0; margin: 56px 0;
clear: both; clear: both;
} }

View File

@ -205,7 +205,7 @@ class Footer extends React.Component {
</a> </a>
</div> </div>
<div> <div>
<a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/wiki/FAQ"> <a target="_blank" rel="noopener noreferrer" href="/docs/react/faq">
<FormattedMessage id="app.footer.faq" /> <FormattedMessage id="app.footer.faq" />
</a> </a>
</div> </div>