Merge branch 'master' into feature-3.7.0

CHANGELOG.en-US.md

@@ -15,6 +15,19 @@ timeline: true
 
 ---
 
+## 3.6.5
+
+`2018-07-02`
+
+- 🐞 Fixed wired `Transfer` repaint problem in IE or Edge. [#9697](https://github.com/ant-design/ant-design/issues/9697)
+- 🐞 Fixed `Card` background overflow when zoom in chrome. [#9085](https://github.com/ant-design/ant-design/issues/9085)
+- TypeScript
+  - 🐞 Fixed `Table` incompatible type `size`. [bf5b6ae1](https://github.com/ant-design/ant-design/commit/bf5b6ae1f3b5da4629a7d10a2d1764eaa3fbbb04)
+  - 🐞 Fixed `Select` missing showArrow option in types. [cde2a6b6](https://github.com/ant-design/ant-design/commit/cde2a6b6f011a5b3a367b3f58731def547bc98d8)
+- 🐞 Add custom local support in `Pagination`. [babbbdd4](https://github.com/ant-design/ant-design/commit/babbbdd4e5c33ca050f8ee08969185c8d3269b4c)
+- 🐞 Move max-width to ant-tooltip, so that it can be override by overlayStyle.maxWidth. [e2b359e9](https://github.com/ant-design/ant-design/commit/e2b359e9c3dae067eeba37a886f7896474c87e31)
+- 🐞 Adjust `Select` mirror style to avoid to long string. [#11035](https://github.com/ant-design/ant-design/issues/11035)
+
 ## 3.6.4
 
 `2018-06-23`

CHANGELOG.zh-CN.md

@@ -15,6 +15,19 @@ timeline: true
 
 ---
 
+## 3.6.5
+
+`2018-07-02`
+
+- 🐞 修复 `Transfer` 组件的文本 "Not Found" 在 IE 或 Edge 浏览器上显示异常。[#9697](https://github.com/ant-design/ant-design/issues/9697)
+- 🐞 修复 Chrome 在缩放模式下，`Card` 组件的边框被标题的背景色覆盖。[#9085](https://github.com/ant-design/ant-design/issues/9085)
+- TypeScript
+  - 🐞 修复 `Table` 不兼容的类型 `size`。[bf5b6ae1](https://github.com/ant-design/ant-design/commit/bf5b6ae1f3b5da4629a7d10a2d1764eaa3fbbb04)
+  - 🐞 修复 `Select` 组件的 `showArrow` 类型定义。[cde2a6b6](https://github.com/ant-design/ant-design/commit/cde2a6b6f011a5b3a367b3f58731def547bc98d8)
+- 🐞 修复 Pagination 全局 locale 设置不能被组件 locale 覆盖的问题。[babbbdd4](https://github.com/ant-design/ant-design/commit/babbbdd4e5c33ca050f8ee08969185c8d3269b4c)
+- 🐞 修复 `Tooltip` 组件的 `max-width` 样式，使 `overlayStyle.maxWidth` 可覆盖。[e2b359e9](https://github.com/ant-design/ant-design/commit/e2b359e9c3dae067eeba37a886f7896474c87e31)
+- 🐞 修复 `Select` 组件的样式，避免过长文本的溢出。[#11035](https://github.com/ant-design/ant-design/issues/11035)
+
 ## 3.6.4
 
 `2018-06-23`

README.md

@@ -6,7 +6,7 @@
 
 # Ant Design
 
-[![](https://img.shields.io/travis/ant-design/ant-design.svg?style=flat-square)](https://travis-ci.org/ant-design/ant-design)
+[![](https://img.shields.io/travis/ant-design/ant-design/master.svg?style=flat-square)](https://travis-ci.org/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#info=devDependencies&view=list)

components/cascader/index.tsx

@@ -341,7 +341,7 @@ export default class Cascader extends React.Component<CascaderProps, CascaderSta
       prefixCls, inputPrefixCls, children, placeholder, size, disabled,
       className, style, allowClear, showSearch = false, ...otherProps
     } = props;
-    const value = state.value;
+    const { value, inputFocused } = state;
 
     const sizeCls = classNames({
       [`${inputPrefixCls}-lg`]: size === 'large',
@@ -364,6 +364,7 @@ export default class Cascader extends React.Component<CascaderProps, CascaderSta
       [`${prefixCls}-picker-disabled`]: disabled,
       [`${prefixCls}-picker-${size}`]: !!size,
       [`${prefixCls}-picker-show-search`]: !!showSearch,
+      [`${prefixCls}-picker-focused`]: inputFocused,
     });
 
     // Fix bug of https://github.com/facebook/react/pull/5004

components/cascader/style/index.less

@@ -13,7 +13,6 @@
     background-color: transparent !important;
     cursor: pointer;
     width: 100%;
-    display: block;
     position: static;
   }
 
@@ -29,6 +28,7 @@
     background-color: @component-background;
     border-radius: @border-radius-base;
     outline: 0;
+    transition: color .3s;
 
     &-with-value &-label {
       color: transparent;
@@ -47,6 +47,10 @@
       .active;
     }
 
+    &-show-search&-focused {
+      color: @disabled-color;
+    }
+
     &-label {
       position: absolute;
       left: 0;

components/collapse/index.en-US.md

@@ -23,6 +23,7 @@ A content area which can be collapsed and expanded.
 | bordered | Toggles rendering of the border around the collapse block | boolean | `true` |
 | defaultActiveKey | Key of the initial active panel | string | - |
 | onChange | Callback function executed when active panel is changed | Function | - |
+| destroyInactivePanel | Destroy Inactive Panel | boolean | `false` |
 
 ### Collapse.Panel
 

components/date-picker/style/Calendar.less

@@ -211,12 +211,18 @@
   }
 
   &-selected-day &-date {
-    background: @primary-color;
-    color: #fff;
-    border: @border-width-base @border-style-base transparent;
+    background: tint(@primary-color, 80%);
+  }
 
-    &:hover {
+  &-selected-date, &-selected-start-date, &-selected-end-date {
+    .@{calendar-prefix-cls}-date {
       background: @primary-color;
+      color: #fff;
+      border: @border-width-base @border-style-base transparent;
+
+      &:hover {
+        background: @primary-color;
+      }
     }
   }
 

components/date-picker/style/Picker.less

@@ -39,7 +39,6 @@
 
   &-input {
     outline: none;
-    display: block;
   }
 
   &:hover &-input:not(.@{ant-prefix}-input-disabled) {

components/form/index.en-US.md

@@ -99,6 +99,40 @@ If the form has been decorated by `Form.create` then it has `this.props.form` pr
 | options.force | Should validate validated field again when `validateTrigger` is been triggered again | boolean | false |
 | options.scroll | Config scroll behavior of `validateFieldsAndScroll`, more: [dom-scroll-into-view's config](https://github.com/yiminghe/dom-scroll-into-view#function-parameter) | Object | {} |
 
+#### Callback arguments example of validateFields
+
+- `errors`:
+
+   ```js
+   {
+     "userName": {
+       "errors": [
+         {
+           "message": "Please input your username!",
+           "field": "userName"
+         }
+       ]
+     },
+     "password": {
+       "errors": [
+         {
+           "message": "Please input your Password!",
+           "field": "password"
+         }
+       ]
+     }
+   }
+   ```
+
+- `values`:
+
+   ```js
+   {
+     "userName": "username",
+     "password": "password",
+   }
+   ```
+
 ### Form.createFormField
 
 To mark the returned fields data in `mapPropsToFields`, [demo](#components-form-demo-global-state).

components/form/index.zh-CN.md

@@ -100,6 +100,41 @@ this.form // => The instance of CustomizedForm
 | options.force | 对已经校验过的表单域，在 validateTrigger 再次被触发时是否再次校验 | boolean | false |
 | options.scroll | 定义 validateFieldsAndScroll 的滚动行为，详细配置见 [dom-scroll-into-view config](https://github.com/yiminghe/dom-scroll-into-view#function-parameter) | Object | {} |
 
+#### validateFields 的 callback 参数示例
+
+- `errors`:
+
+   ```js
+   {
+     "userName": {
+       "errors": [
+         {
+           "message": "Please input your username!",
+           "field": "userName"
+         }
+       ]
+     },
+     "password": {
+       "errors": [
+         {
+           "message": "Please input your Password!",
+           "field": "password"
+         }
+       ]
+     }
+   }
+   ```
+
+- `values`:
+
+   ```js
+   {
+     "userName": "username",
+     "password": "password",
+   }
+   ```
+
+
 ### Form.createFormField
 
 用于标记 `mapPropsToFields` 返回的表单域数据，[例子](#components-form-demo-global-state)。

components/input-number/style/index.less

@@ -77,7 +77,6 @@
     border: 0;
     border-radius: @border-radius-base;
     padding: 0 @control-padding-horizontal - 1px;
-    display: block;
     .placeholder();
   }
 
@@ -103,7 +102,7 @@
     border-left: @border-width-base @border-style-base @border-color-base;
     width: 22px;
     height: 100%;
-    background: transparent;
+    background: @component-background;
     position: absolute;
     top: 0;
     right: 0;

components/select/index.tsx

@@ -16,6 +16,7 @@ export interface AbstractSelectProps {
   showSearch?: boolean;
   allowClear?: boolean;
   disabled?: boolean;
+  showArrow?: boolean;
   style?: React.CSSProperties;
   tabIndex?: number;
   placeholder?: string | React.ReactNode;

components/style/themes/default.less

@@ -380,7 +380,7 @@
 // Card
 // ---
 @card-head-color: @heading-color;
-@card-head-background: @component-background;
+@card-head-background: transparent;
 @card-head-padding: 16px;
 @card-inner-head-padding: 12px;
 @card-padding-base: 24px;

components/table/style/index.less

@@ -229,7 +229,7 @@
     margin-left: 8px;
     display: inline-block;
     width: 14px;
-    height: 14px;
+    height: @font-size-base;
     vertical-align: middle;
     text-align: center;
     font-weight: normal;
@@ -237,10 +237,10 @@
 
     &-up,
     &-down {
-      line-height: 6px;
       display: block;
       width: 14px;
-      height: 6px;
+      height: @font-size-base / 2 - 1px;
+      line-height: @font-size-base / 2 - 1px;
       cursor: pointer;
       position: relative;
       &:hover .@{iconfont-css-prefix} {

components/transfer/list.tsx

@@ -9,6 +9,10 @@ import Search from './search';
 import Item from './item';
 import triggerEvent from '../_util/triggerEvent';
 
+function isIEorEDGE() {
+  return (document as any).documentMode || /Edge/.test(navigator.userAgent);
+}
+
 function noop() {
 }
 
@@ -52,6 +56,8 @@ export default class TransferList extends React.Component<TransferListProps, any
 
   timer: number;
   triggerScrollTimer: number;
+  fixIERepaintTimer: number;
+  notFoundNode: HTMLDivElement;
 
   constructor(props: TransferListProps) {
     super(props);
@@ -71,6 +77,7 @@ export default class TransferList extends React.Component<TransferListProps, any
   componentWillUnmount() {
     clearTimeout(this.timer);
     clearTimeout(this.triggerScrollTimer);
+    clearTimeout(this.fixIERepaintTimer);
   }
 
   shouldComponentUpdate(...args: any[]) {
@@ -107,10 +114,12 @@ export default class TransferList extends React.Component<TransferListProps, any
         triggerEvent(listNode, 'scroll');
       }
     }, 0);
+    this.fixIERepaint();
   }
 
   handleClear = () => {
     this.props.handleClear();
+    this.fixIERepaint();
   }
 
   matchFilter = (text: string, item: TransferItem) => {
@@ -131,6 +140,24 @@ export default class TransferList extends React.Component<TransferListProps, any
     };
   }
 
+  saveNotFoundRef = (node: HTMLDivElement) => {
+    this.notFoundNode = node;
+  }
+
+  // Fix IE/Edge repaint
+  // https://github.com/ant-design/ant-design/issues/9697
+  // https://stackoverflow.com/q/27947912/3040605
+  fixIERepaint() {
+    if (!isIEorEDGE()) {
+      return;
+    }
+    this.fixIERepaintTimer = window.setTimeout(() => {
+      if (this.notFoundNode) {
+        this.notFoundNode.className = this.notFoundNode.className;
+      }
+    }, 0);
+  }
+
   render() {
     const {
       prefixCls, dataSource, titleText, checkedKeys, lazy,
@@ -203,7 +230,7 @@ export default class TransferList extends React.Component<TransferListProps, any
         >
           {showItems}
         </Animate>
-        <div className={`${prefixCls}-body-not-found`}>
+        <div className={`${prefixCls}-body-not-found`} ref={this.saveNotFoundRef}>
           {notFoundContent}
         </div>
       </div>

components/transfer/search.tsx

@@ -16,7 +16,7 @@ export default class Search extends React.Component<TransferSearchProps, any> {
   };
 
   handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const onChange = this.props.onChange;
+    const { onChange } = this.props;
     if (onChange) {
       onChange(e);
     }
@@ -24,8 +24,7 @@ export default class Search extends React.Component<TransferSearchProps, any> {
 
   handleClear = (e: React.MouseEvent<HTMLAnchorElement>) => {
     e.preventDefault();
-
-    const handleClear = this.props.handleClear;
+    const { handleClear } = this.props;
     if (handleClear) {
       handleClear(e);
     }

components/tree-select/demo/treeData.md

@@ -2,7 +2,7 @@
 order: 2
 title:
   zh-CN: 从数据直接生成
-  en-US: Generate form tree data
+  en-US: Generate from tree data
 ---
 
 ## zh-CN

components/upload/Upload.tsx

@@ -196,7 +196,10 @@ export default class Upload extends React.Component<UploadProps, UploadState> {
     if (result === false) {
       this.onChange({
         file,
-        fileList: uniqBy(this.state.fileList.concat(fileList.map(fileToObject)),  (item: UploadFile) => item.uid),
+        fileList: uniqBy(
+          this.state.fileList.concat(fileList.map(fileToObject)),
+          (item: UploadFile) => item.uid,
+        ),
       });
       return false;
     } else if (result && (result as PromiseLike<any>).then) {

components/upload/demo/defaultFileList.md

@@ -27,7 +27,7 @@ const props = {
     uid: 1,
     name: 'xxx.png',
     status: 'done',
-    reponse: 'Server Error 500', // custom error message to show
+    response: 'Server Error 500', // custom error message to show
     url: 'http://www.baidu.com/xxx.png',
   }, {
     uid: 2,
@@ -38,7 +38,7 @@ const props = {
     uid: 3,
     name: 'zzz.png',
     status: 'error',
-    reponse: 'Server Error 500', // custom error message to show
+    response: 'Server Error 500', // custom error message to show
     url: 'http://www.baidu.com/zzz.png',
   }],
 };

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

@@ -185,6 +185,7 @@ $ yarn add react-app-rewire-less --dev
 -   config = injectBabelPlugin(['import', { libraryName: 'antd', style: 'css' }], config);
 +   config = injectBabelPlugin(['import', { libraryName: 'antd', style: true }], config);  // change importing css to less
 +   config = rewireLess.withLoaderOptions({
++     javascriptEnabled: true,
 +     modifyVars: { "@primary-color": "#1DA57A" },
 +   })(config, env);
     return config;

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

@@ -182,6 +182,7 @@ $ yarn add react-app-rewire-less --dev
 -   config = injectBabelPlugin(['import', { libraryName: 'antd', style: 'css' }], config);
 +   config = injectBabelPlugin(['import', { libraryName: 'antd', style: true }], config);
 +   config = rewireLess.withLoaderOptions({
++     javascriptEnabled: true,
 +     modifyVars: { "@primary-color": "#1DA57A" },
 +   })(config, env);
     return config;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "antd",
-  "version": "3.6.4",
+  "version": "3.6.5",
   "title": "Ant Design",
   "description": "An enterprise-class UI design language and React-based implementation",
   "homepage": "http://ant.design/",
@@ -124,7 +124,7 @@
     "eslint-plugin-jsx-a11y": "^6.0.2",
     "eslint-plugin-markdown": "~1.0.0-beta.4",
     "eslint-plugin-react": "^7.10.0",
-    "eslint-tinker-antd": "^0.5.0",
+    "eslint-tinker": "^0.5.0",
     "fetch-jsonp": "^1.0.3",
     "glob": "^7.1.1",
     "immutability-helper": "^2.5.0",
@@ -137,7 +137,7 @@
     "majo": "^0.6.2",
     "mockdate": "^2.0.1",
     "moment-timezone": "^0.5.5",
-    "offline-plugin": "^5.0.5",
+    "offline-plugin": "yesmeck/offline-plugin#fix-cache-key",
     "pre-commit": "^1.2.2",
     "preact": "^8.2.5",
     "preact-compat": "^3.17.0",
@@ -158,7 +158,7 @@
     "react-intl": "^2.0.1",
     "react-router-dom": "^4.2.2",
     "react-sublime-video": "^0.2.0",
-    "react-virtualized": "~9.19.0",
+    "react-virtualized": "~9.20.0",
     "remark-frontmatter": "^1.1.0",
     "remark-parse": "^5.0.0",
     "remark-stringify": "^5.0.0",

site/theme/en-US.js

@@ -17,6 +17,8 @@ module.exports = {
     'app.content.edit-page': 'Edit this page on GitHub!',
     'app.content.edit-demo': 'Edit this demo on GitHub!',
     'app.component.examples': 'Examples',
+    'app.component.examples.expand': 'Expand all code',
+    'app.component.examples.collpse': 'Collpse all code',
     'app.demo.copy': 'Copy code',
     'app.demo.copied': 'Copied!',
     'app.demo.codepen': 'Open in CodePen',

site/theme/static/demo.less

@@ -23,16 +23,12 @@
   &-expand-trigger {
     cursor: pointer;
     font-size: 14px;
-    color: #9199ac;
-    margin-left: 5px;
+    color: #3b4357;
+    margin-left: 8px;
     opacity: .8;
     transition: all .3s;
     top: -2px;
     position: relative;
-
-    &-active {
-      color: #3b4357;
-    }
   }
 
   &-title {

site/theme/template/Content/ComponentDoc.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import DocumentTitle from 'react-document-title';
 import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
-import { Row, Col, Icon, Affix } from 'antd';
+import { Row, Col, Icon, Affix, Tooltip } from 'antd';
 import { getChildren } from 'jsonml.js/lib/utils';
 import Demo from './Demo';
 import EditButton from './EditButton';
@@ -34,7 +34,7 @@ export default class ComponentDoc extends React.Component {
     const { content, meta } = doc;
     const { intl: { locale } } = this.context;
     const demos = Object.keys(props.demos).map(key => props.demos[key]);
-    const { expandAll: { expand } } = this.state;
+    const { expandAll } = this.state;
 
     const isSingleCol = meta.cols === 1;
     const leftChildren = [];
@@ -48,7 +48,7 @@ export default class ComponentDoc extends React.Component {
             {...demoData}
             key={demoData.meta.filename}
             utils={props.utils}
-            expand={expand}
+            expand={expandAll}
             location={location}
           />
         );
@@ -60,7 +60,7 @@ export default class ComponentDoc extends React.Component {
       });
     const expandTriggerClass = classNames({
       'code-box-expand-trigger': true,
-      'code-box-expand-trigger-active': expand,
+      'code-box-expand-trigger-active': expandAll,
     });
 
     const jumper = showedDemo.map((demo) => {
@@ -100,12 +100,15 @@ export default class ComponentDoc extends React.Component {
             }
             <h2>
               <FormattedMessage id="app.component.examples" />
-              <Icon
-                type="appstore"
-                className={expandTriggerClass}
-                title={expand ? '收起全部代码' : '展开全部代码'}
-                onClick={this.handleExpandToggle}
-              />
+              <Tooltip
+                title={<FormattedMessage id={`app.component.examples.${expandAll ? 'collpse' : 'expand'}`} />}
+              >
+                <Icon
+                  type={`${expandAll ? 'appstore' : 'appstore-o'}`}
+                  className={expandTriggerClass}
+                  onClick={this.handleExpandToggle}
+                />
+              </Tooltip>
             </h2>
           </section>
           <Row gutter={16}>

site/theme/zh-CN.js

@@ -17,6 +17,8 @@ module.exports = {
     'app.content.edit-page': '在 Github 上编辑此页！',
     'app.content.edit-demo': '在 Github 上编辑此示例！',
     'app.component.examples': '代码演示',
+    'app.component.examples.expand': '展开全部代码',
+    'app.component.examples.collpse': '收起全部代码',
     'app.demo.copy': '复制代码',
     'app.demo.copied': '复制成功',
     'app.demo.codepen': '在 CodePen 中打开',