Merge branch 'master' into feature

README-zh_CN.md

@@ -10,8 +10,7 @@
 
 一套企业级的 UI 设计语言和 React 实现。
 
-[![](https://img.shields.io/travis/ant-design/ant-design/master.svg?style=flat-square)](https://travis-ci.org/ant-design/ant-design)
-[![CircleCI](https://circleci.com/gh/ant-design/ant-design/tree/master.svg?style=shield)](https://circleci.com/gh/ant-design/ant-design/tree/master)
+[![CircleCI branch](https://img.shields.io/circleci/project/github/ant-design/ant-design/master.svg?style=flat-square)](https://circleci.com/gh/ant-design/ant-design)
 [![Codecov](https://img.shields.io/codecov/c/github/ant-design/ant-design/master.svg?style=flat-square)](https://codecov.io/gh/ant-design/ant-design/branch/master)
 [![Dependencies](https://img.shields.io/david/ant-design/ant-design.svg)](https://david-dm.org/ant-design/ant-design)
 [![DevDependencies](https://img.shields.io/david/dev/ant-design/ant-design.svg)](https://david-dm.org/ant-design/ant-design?type=dev)

README.md

@@ -10,8 +10,7 @@
 
 An enterprise-class UI design language and React-based implementation.
 
-[![](https://img.shields.io/travis/ant-design/ant-design/master.svg?style=flat-square)](https://travis-ci.org/ant-design/ant-design)
-[![CircleCI](https://circleci.com/gh/ant-design/ant-design/tree/master.svg?style=shield)](https://circleci.com/gh/ant-design/ant-design/tree/master)
+[![CircleCI branch](https://img.shields.io/circleci/project/github/ant-design/ant-design/master.svg?style=flat-square)](https://circleci.com/gh/ant-design/ant-design)
 [![Codecov](https://img.shields.io/codecov/c/github/ant-design/ant-design/master.svg?style=flat-square)](https://codecov.io/gh/ant-design/ant-design/branch/master)
 [![Dependencies](https://img.shields.io/david/ant-design/ant-design.svg)](https://david-dm.org/ant-design/ant-design)
 [![DevDependencies](https://img.shields.io/david/dev/ant-design/ant-design.svg)](https://david-dm.org/ant-design/ant-design?type=dev)

components/form/demo/customized-form-controls.md

@@ -26,6 +26,16 @@ const FormItem = Form.Item;
 const Option = Select.Option;
 
 class PriceInput extends React.Component {
+  static getDerivedStateFromProps(nextProps) {
+    // Should be a controlled component.
+    if ('value' in nextProps) {
+      return {
+        value: nextProps.value || {},
+      };
+    }
+    return null;
+  }
+
   constructor(props) {
     super(props);
 
@@ -36,14 +46,6 @@ class PriceInput extends React.Component {
     };
   }
 
-  componentWillReceiveProps(nextProps) {
-    // Should be a controlled component.
-    if ('value' in nextProps) {
-      const value = nextProps.value;
-      this.setState(value);
-    }
-  }
-
   handleNumberChange = (e) => {
     const number = parseInt(e.target.value || 0, 10);
     if (isNaN(number)) {

components/progress/__tests__/__snapshots__/index.test.js.snap

@@ -172,3 +172,46 @@ exports[`Progress render out-of-range progress with info 1`] = `
   </div>
 </div>
 `;
+
+exports[`Progress render strokeColor 1`] = `
+<div
+  class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
+>
+  <div
+    class="ant-progress-inner"
+    style="width: 120px; height: 120px; font-size: 24px;"
+  >
+    <svg
+      class="ant-progress-circle "
+      viewBox="0 0 100 100"
+    >
+      <path
+        class="ant-progress-circle-trail"
+        d="M 50,50 m 0,-47
+     a 47,47 0 1 1 0,94
+     a 47,47 0 1 1 0,-94"
+        fill-opacity="0"
+        stroke="#f3f3f3"
+        stroke-width="6"
+        style="stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px;"
+      />
+      <path
+        class="ant-progress-circle-path"
+        d="M 50,50 m 0,-47
+     a 47,47 0 1 1 0,94
+     a 47,47 0 1 1 0,-94"
+        fill-opacity="0"
+        stroke-linecap="round"
+        stroke-width="6"
+        style="stroke: red; stroke-dasharray: 147.6548547187203px 295.3097094374406px; stroke-dashoffset: -0px;"
+      />
+    </svg>
+    <span
+      class="ant-progress-text"
+      title="50%"
+    >
+      50%
+    </span>
+  </div>
+</div>
+`;

components/progress/__tests__/index.test.js

@@ -41,4 +41,9 @@ describe('Progress', () => {
     );
     expect(wrapper.render()).toMatchSnapshot();
   });
+
+  it('render strokeColor', () => {
+    const wrapper = mount(<Progress type="circle" percent={50} strokeColor="red" />);
+    expect(wrapper.render()).toMatchSnapshot();
+  });
 });

components/progress/progress.tsx

@@ -145,7 +145,7 @@ export default class Progress extends React.Component<ProgressProps, {}> {
             percent={validProgress(percent)}
             strokeWidth={circleWidth}
             trailWidth={circleWidth}
-            strokeColor={(statusColorMap as any)[progressStatus]}
+            strokeColor={strokeColor || (statusColorMap as any)[progressStatus]}
             strokeLinecap={strokeLinecap}
             trailColor={trailColor}
             prefixCls={prefixCls}

components/table/style/index.less

@@ -96,6 +96,7 @@
 
     &.@{table-prefix-cls}-column-has-actions {
       position: relative;
+      background-clip: padding-box; // For Firefox background bug, https://github.com/ant-design/ant-design/issues/12628
 
       &.@{table-prefix-cls}-column-has-filters {
         .@{iconfont-css-prefix}-filter,

docs/react/getting-started.en-US.md

@@ -29,17 +29,12 @@ $ npm install antd-init -g
 
 Read [the documentation of `antd-init`](https://github.com/ant-design/antd-init/) and [the documentation of `ant-tool`](http://ant-tool.github.io/) to explore more features.
 
-> Also, you can try other scaffolds which is provided below:
->
->   - [Ant Design Pro](http://pro.ant.design/)
->   - [antd-admin](https://github.com/zuiidea/antd-admin)
->   - [reactSPA](https://github.com/JasonBai007/reactSPA)
->   - [react-redux-antd by Justin-lu](https://github.com/Justin-lu/react-redux-antd)
->   - [react-redux-antd by okoala](https://github.com/okoala/react-redux-antd)
->   - [react-antd-admin](https://github.com/fireyy/react-antd-admin)
->   - [react-antd-redux-router-starter](https://github.com/yuzhouisme/react-antd-redux-router-starter)
->   - [react-redux-antd-starter](https://github.com/BetaRabbit/react-redux-antd-starter)
->   - more scaffolds at [Scaffold Market](http://scaffold.ant.design/)
+Also, you can try other scaffolds provided below:
+
+- [Ant Design Pro](http://pro.ant.design/)
+- [antd-admin](https://github.com/zuiidea/antd-admin)
+- [d2-admin](https://github.com/d2-projects/d2-admin)
+- more scaffolds at [Scaffold Market](http://scaffold.ant.design/)
 
 ### 2. Create a New Project
 

docs/react/getting-started.zh-CN.md

@@ -31,17 +31,12 @@ $ npm install antd-init -g
 
 更多功能请参考 [脚手架工具](https://github.com/ant-design/antd-init/) 和 [开发工具文档](http://ant-tool.github.io/)。
 
-> 您也可以使用以下脚手架和范例：
->
->   - [Ant Design Pro](http://pro.ant.design/)
->   - [antd-admin](https://github.com/zuiidea/antd-admin)
->   - [reactSPA](https://github.com/JasonBai007/reactSPA)
->   - [react-redux-antd by Justin-lu](https://github.com/Justin-lu/react-redux-antd)
->   - [react-redux-antd by okoala](https://github.com/okoala/react-redux-antd)
->   - [react-antd-admin](https://github.com/fireyy/react-antd-admin)
->   - [react-antd-redux-router-starter](https://github.com/yuzhouisme/react-antd-redux-router-starter)
->   - [react-redux-antd-starter](https://github.com/BetaRabbit/react-redux-antd-starter)
->   - 更多脚手架可以查看 [脚手架市场](http://scaffold.ant.design/)
+您也可以使用以下脚手架和范例：
+
+- [Ant Design Pro](http://pro.ant.design/)
+- [antd-admin](https://github.com/zuiidea/antd-admin)
+- [d2-admin](https://github.com/d2-projects/d2-admin)
+- 更多脚手架可以查看 [脚手架市场](http://scaffold.ant.design/)
 
 ### 2. 创建一个项目
 
@@ -198,7 +193,7 @@ import { Button } from 'antd';
 
 插件会帮你转换成 `antd/lib/xxx` 的写法。另外此插件配合 [style](https://github.com/ant-design/babel-plugin-import#usage) 属性可以做到模块样式的按需自动加载。
 
-> 注意，babel-plugin-import 的 `style` 属性除了引入对应组件的样式，也会引入一些必要的全局样式。如果你不需要它们，建议不要使用此属性。你可以 `import 'antd/dist/antd.css` 手动引入，并覆盖全局样式。
+> 注意，babel-plugin-import 的 `style` 属性除了引入对应组件的样式，也会引入一些必要的全局样式。如果你不需要它们，建议不要使用此属性。你可以 `import 'antd/dist/antd.css'` 手动引入，并覆盖全局样式。
 
 ## 配置主题和字体
 

docs/react/recommendation.en-US.md

@@ -8,8 +8,8 @@ title: Third-Party Libraries
 Category | Recommended Components
 ---------|-----------------------
 Router | [react-router](https://github.com/ReactTraining/react-router)
-Layout | [react-blocks](http://whoisandy.github.io/react-blocks/) [react-flexbox-grid](https://github.com/roylee0704/react-flexbox-grid)
-Drag and drop | [react-dnd](https://github.com/gaearon/react-dnd)  [react-draggable](https://github.com/mzabriskie/react-draggable)
+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)
+Drag and drop | [react-dnd](https://github.com/gaearon/react-dnd)  [react-draggable](https://github.com/mzabriskie/react-draggable) [react-sortable-hoc](https://github.com/clauderic/react-sortable-hoc)
 Code Editor | [react-codemirror2](https://github.com/scniro/react-codemirror2)
 Rich Text Editor | [react-quill](https://github.com/zenoamaro/react-quill)  [react-draft-wysiwyg](https://github.com/jpuri/react-draft-wysiwyg) [react-lz-editor (Ant Design style)](https://github.com/leejaen/react-lz-editor) [braft-editor](https://github.com/margox/braft-editor)
 Color Picker | [rc-color-picker](https://github.com/react-component/color-picker) [react-color](http://casesandberg.github.io/react-color/)
@@ -27,6 +27,9 @@ Infinite Scroll | [react-virtualized](https://github.com/bvaughn/react-virtualiz
 Map | [react-google-maps](https://github.com/tomchentw/react-google-maps) [google-map-react](https://github.com/istarkov/google-map-react) [react-amap](https://github.com/ElemeFE/react-amap)
 Context Menu | [react-contextmenu](https://github.com/vkbansal/react-contextmenu/) [react-contexify](https://github.com/fkhadra/react-contexify)
 Emoji | [emoji-mart](https://github.com/missive/emoji-mart)
+Split View | [react-split-pane](https://github.com/tomkp/react-split-pane)
+Image Crop | [react-image-crop](https://github.com/DominicTobias/react-image-crop)
+Trend Lines | [react-sparklines](https://github.com/borisyankov/react-sparklines)
 
 <style>
 .markdown table td:first-child {

docs/react/recommendation.zh-CN.md

@@ -8,8 +8,8 @@ title: 社区精选组件
 类型 | 推荐组件
 ----|--------
 路由 | [react-router](https://github.com/ReactTraining/react-router)
-布局 | [react-blocks](https://github.com/whoisandy/react-blocks) [react-flexbox-grid](https://github.com/roylee0704/react-flexbox-grid)
-拖拽 | [react-dnd](https://github.com/gaearon/react-dnd) [react-draggable](https://github.com/mzabriskie/react-draggable)
+布局 | [@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-dnd](https://github.com/gaearon/react-dnd) [react-draggable](https://github.com/mzabriskie/react-draggable) [react-sortable-hoc](https://github.com/clauderic/react-sortable-hoc)
 代码编辑器 | [react-codemirror2](https://github.com/scniro/react-codemirror2)
 富文本编辑器 | [react-quill](https://github.com/zenoamaro/react-quill) [react-draft-wysiwyg](https://github.com/jpuri/react-draft-wysiwyg) [react-lz-editor（Ant Design 风格）](https://github.com/leejaen/react-lz-editor) [braft-editor](https://github.com/margox/braft-editor)
 拾色器 | [rc-color-picker](https://github.com/react-component/color-picker) [react-color](http://casesandberg.github.io/react-color/)
@@ -27,6 +27,9 @@ Markdown 渲染 | [react-markdown](http://rexxars.github.io/react-markdown/)
 地图 | [react-google-maps](https://github.com/tomchentw/react-google-maps) [google-map-react](https://github.com/istarkov/google-map-react) [react-amap 高德](https://github.com/ElemeFE/react-amap)
 右键菜单 | [react-contextmenu](https://github.com/vkbansal/react-contextmenu/) [react-contexify](https://github.com/fkhadra/react-contexify)
 Emoji | [emoji-mart](https://github.com/missive/emoji-mart)
+分割面板 | [react-split-pane](https://github.com/tomkp/react-split-pane)
+图片裁切 | [react-image-crop](https://github.com/DominicTobias/react-image-crop)
+趋势线 | [react-sparklines](https://github.com/borisyankov/react-sparklines)
 
 <style>
 .markdown table td:first-child {

docs/react/use-with-create-react-app.en-US.md

@@ -114,8 +114,8 @@ $ yarn add react-app-rewired
 +   "start": "react-app-rewired start",
 -   "build": "react-scripts build",
 +   "build": "react-app-rewired build",
--   "test": "react-scripts test --env=jsdom",
-+   "test": "react-app-rewired test --env=jsdom",
+-   "test": "react-scripts test",
++   "test": "react-app-rewired test",
 }
 ```
 

docs/react/use-with-create-react-app.zh-CN.md

@@ -111,8 +111,8 @@ $ yarn add react-app-rewired
 +   "start": "react-app-rewired start",
 -   "build": "react-scripts build",
 +   "build": "react-app-rewired build",
--   "test": "react-scripts test --env=jsdom",
-+   "test": "react-app-rewired test --env=jsdom",
+-   "test": "react-scripts test",
++   "test": "react-app-rewired test",
 }
 ```
 

package.json

@@ -152,7 +152,7 @@
     "querystring": "^0.2.0",
     "rc-queue-anim": "^1.6.6",
     "rc-scroll-anim": "^2.5.5",
-    "rc-tween-one": "^2.2.10",
+    "rc-tween-one": "^2.2.12",
     "react": "^16.5.2",
     "react-color": "^2.14.1",
     "react-copy-to-clipboard": "^5.0.1",

site/theme/template/Home/Page1.jsx

@@ -193,7 +193,8 @@ export default class Page1 extends React.PureComponent {
             leave={this.leave}
             {...item.svgBg.props}
             component="svg"
-            resetStyleBool={false}
+            resetStyle={false}
+            exclusive
           >
             {(isMobile || isHover) && this.getSvgChild(item.svgBg.props.children)}
           </TweenOneGroup>