Merge branch 'master' into feature

2024-11-24 11:10:01 +08:00 · 2018-09-21 14:03:04 +08:00 · 2018-09-21 14:03:04 +08:00 · 7c6299e12e
commit 7c6299e12e
parent 74f36c6e69 c4b17f23ef
19 changed files with 103 additions and 80 deletions
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@ -827,6 +827,10 @@ Learn more in the [Ant Design 3.0 announcement post](https://medium.com/ant-desi

 ### Breaking Changes

+> We suggest you upgrade to latest 3.x verison directly.
+
+> Some APIs may be daparated in other 3.x versions which don't described below, please pay attention to warning in browser console and upgrade them.
+
 We provide a [migration tool](https://github.com/ant-design/antd-migration-helper) to help you find deprecated usages in your codebase.

 - Card's `noHovering` has been renamed to `hoverable`, and its default value now is `true`.
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@ -830,6 +830,8 @@ timeline: true

 > 如果你从 2.x 升级到 3.x，建议直接升级到 3.x 的最新版本。

+> 3.x 后续的版本可能已经废弃了一些下面没有提到的改动，请参考控制台的警告提示相应升级。
+
 此版本有部分不兼容的改动，升级时确保修改相应的使用代码。另外由于人肉查找代码中的废弃用法过于低效，所以我们提供了 [antd-migration-helper](https://github.com/ant-design/antd-migration-helper) 用于扫描代码中的废弃用法。

 - Card 的 `noHovering` 属性重命名为 `hoverable`，且默认值改为 `true`。
--- a/components/auto-complete/index.en-US.md
+++ b/components/auto-complete/index.en-US.md
@ -38,6 +38,9 @@ const dataSource = ['12345', '23456', '34567'];
 | onFocus | Called when entering the component | function() | - |
 | onSearch | Called when searching items. | function(value) | - |
 | onSelect | Called when a option is selected. param is option's value and option instance. | function(value, option) | - |
+| defaultOpen | Initial open state of dropdown | boolean | - |
+| open | Controlled open state of dropdown | boolean | - |
+| onDropdownVisibleChange | Call when dropdown open | function(open) | - |

 ## Methods

--- a/components/auto-complete/index.zh-CN.md
+++ b/components/auto-complete/index.zh-CN.md
@ -39,6 +39,9 @@ const dataSource = ['12345', '23456', '34567'];
 | onFocus | 获得焦点时的回调 | function() | - |
 | onSearch | 搜索补全项的时候调用 | function(value) | 无 |
 | onSelect | 被选中时调用，参数为选中项的 value 值 | function(value, option) | 无 |
+| defaultOpen | 是否默认展开下拉菜单 | boolean | - |
+| open | 是否展开下拉菜单 | boolean | - |
+| onDropdownVisibleChange | 展开下拉菜单的回调 | function(open) | - |

 ## 方法

--- a/components/button/tests/index.test.js
+++ b/components/button/tests/index.test.js
@ -13,13 +13,10 @@ describe('Button', () => {
  });

  it('mount correctly', () => {
-    const wrapper = mount(
-      <Button>Follow</Button>
-    );
    if (process.env.REACT === '15') {
      return;
    }
-    expect(() => renderer.create(wrapper).toJSON()).not.toThrow();
+    expect(() => renderer.create(<Button>Follow</Button>)).not.toThrow();
  });

  it('renders Chinese characters correctly', () => {
--- a/components/icon/index.en-US.md
+++ b/components/icon/index.en-US.md
@ -63,6 +63,33 @@ Icon.setTwoToneColor('#eb2f96');
 Icon.getTwoToneColor(); // #eb2f96
 ```

+### Custom Font Icon
+
+We added a `createFromIconfontCN` function to help developer using their own icons deployed at [iconfont.cn](http://iconfont.cn/) in a convenient way.
+
+> This method is specified for [iconfont.cn](http://iconfont.cn/).
+
+```js
+const MyIcon = Icon.createFromIconfontCN({
+  scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', // generated by iconfont.cn
+});
+
+ReactDOM.render(<MyIcon type="icon-example" />, mountedNode);
+```
+
+It create a component that uses SVG sprites in essence.
+
+The following options are available:
+
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| scriptUrl | The URL generated by [iconfont.cn](http://iconfont.cn/) project. | string | - |
+| extraCommonProps | Define extra properties to the component | `{ [key: string]: any }` | {} |
+
+The property `scriptUrl` should be set to import the svg sprite symbols.
+
+See [iconfont.cn documents](http://iconfont.cn/help/detail?spm=a313x.7781069.1998910419.15&helptype=code) to learn about how to generate `scriptUrl`.
+
 ### 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).
@ -105,30 +132,3 @@ The following properties are available for the component:
 | fill | Define the color used to paint the `svg` element | string | 'currentColor' |
 | className | The computed class name of the `svg` element | string | - |
 | style | The computed style of the `svg` element | CSSProperties | - |
-
-### Custom Font Icon
-
-We added a `createFromIconfontCN` function to help developer using their own icons deployed at [iconfont.cn](http://iconfont.cn/) in a convenient way.
-
-> This method is specified for [iconfont.cn](http://iconfont.cn/).
-
-```js
-const MyIcon = Icon.createFromIconfontCN({
-  scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', // generated by iconfont.cn
-});
-
-ReactDOM.render(<MyIcon type="icon-example" />, mountedNode);
-```
-
-It create a component that uses SVG sprites in essence.
-
-The following options are available:
-
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| scriptUrl | The URL generated by [iconfont.cn](http://iconfont.cn/) project. | string | - |
-| extraCommonProps | Define extra properties to the component | `{ [key: string]: any }` | {} |
-
-The property `scriptUrl` should be set to import the svg sprite symbols.
-
-See [iconfont.cn documents](http://iconfont.cn/help/detail?spm=a313x.7781069.1998910419.15&helptype=code) to learn about how to generate `scriptUrl`.
--- a/components/icon/index.zh-CN.md
+++ b/components/icon/index.zh-CN.md
@ -68,6 +68,31 @@ Icon.setTwoToneColor('#eb2f96');
 Icon.getTwoToneColor(); // #eb2f96
 ```

+### 自定义 font 图标
+
+在 `3.9.x` 里，我们提供了一个 `createFromIconfontCN` 方法，方便开发者调用在 [iconfont.cn](http://iconfont.cn/) 上自行管理的图标。
+
+```js
+const MyIcon = Icon.createFromIconfontCN({
+  scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', // generated by iconfont.cn
+});
+
+ReactDOM.render(<MyIcon type="icon-example" />, mountedNode);
+```
+
+其本质上是创建了一个使用 `<use>` 标签来渲染图标的组件。
+
+`options` 的配置项如下：
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| scriptUrl | [iconfont.cn](http://iconfont.cn/) 项目在线生成的 `js` 地址，在 `namespace` 也设置的情况下有效 | string | - |
+| extraCommonProps | 给所有的 `svg` 图标 `<Icon />` 组件设置额外的属性 | `{ [key: string]: any }` | {} |
+
+在 `scriptUrl` 都设置有效的情况下，组件在渲染前会自动引入 [iconfont.cn](http://iconfont.cn/) 项目中的图标符号集，无需手动引入。
+
+见 [iconfont.cn 使用帮助](http://iconfont.cn/help/detail?spm=a313x.7781069.1998910419.15&helptype=code) 查看如何生成 `js` 地址。
+
 ### 自定义 svg 图标

 如果使用 `webpack`，可以通过配置 [@svgr/webpack](https://www.npmjs.com/package/@svgr/webpack) 来将 `svg` 图标作为 `React` 组件导入。`@svgr/webpack` 的 `options` 选项请参阅 [svgr文档](https://github.com/smooth-code/svgr#options)。
@ -110,28 +135,3 @@ ReactDOM.render(
 | fill | `svg` 元素填充的颜色 | string | 'currentColor' |
 | className | 计算后的 `svg` 类名 | string | - |
 | style | 计算后的 `svg` 元素样式 | CSSProperties | - |
-
-### 自定义 font 图标
-
-在 `3.9.x` 里，我们提供了一个 `createFromIconfontCN` 方法，方便开发者调用在 [iconfont.cn](http://iconfont.cn/) 上自行管理的图标。
-
-```js
-const MyIcon = Icon.createFromIconfontCN({
-  scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', // generated by iconfont.cn
-});
-
-ReactDOM.render(<MyIcon type="icon-example" />, mountedNode);
-```
-
-其本质上是创建了一个使用 `<use>` 标签来渲染图标的组件。
-
-`options` 的配置项如下：
-
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| scriptUrl | [iconfont.cn](http://iconfont.cn/) 项目在线生成的 `js` 地址，在 `namespace` 也设置的情况下有效 | string | - |
-| extraCommonProps | 给所有的 `svg` 图标 `<Icon />` 组件设置额外的属性 | `{ [key: string]: any }` | {} |
-
-在 `scriptUrl` 都设置有效的情况下，组件在渲染前会自动引入 [iconfont.cn](http://iconfont.cn/) 项目中的图标符号集，无需手动引入。
-
-见 [iconfont.cn 使用帮助](http://iconfont.cn/help/detail?spm=a313x.7781069.1998910419.15&helptype=code) 查看如何生成 `js` 地址。
--- a/components/layout/style/index.less
+++ b/components/layout/style/index.less
@ -8,6 +8,8 @@
  flex-direction: column;
  flex: auto;
  background: @layout-body-background;
+  /* fix firefox can't set height smaller than content on flex item */
+  min-height: 0;

  &,
  * {
@ -43,6 +45,8 @@

  &-content {
    flex: auto;
+    /* fix firefox can't set height smaller than content on flex item */
+    min-height: 0;
  }

  &-sider {
--- a/components/select/index.en-US.md
+++ b/components/select/index.en-US.md
@ -58,8 +58,9 @@ Select component to select value from options.
 | onPopupScroll | Called when dropdown scrolls | function | - |
 | onSearch | Callback function that is fired when input changed. | function(value: string) |  |
 | onSelect | Called when a option is selected, the params are option's value (or key) and option instance. | function(value, option:Option) | - |
-| open | controlled open state of dropdown | boolean | - |
-| onDropdownVisibleChange | call when dropdown open | function(open) | - |
+| defaultOpen | Initial open state of dropdown | boolean | - |
+| open | Controlled open state of dropdown | boolean | - |
+| onDropdownVisibleChange | Call when dropdown open | function(open) | - |

 ### Select Methods

--- a/components/select/index.tsx
+++ b/components/select/index.tsx
@ -31,6 +31,7 @@ export interface AbstractSelectProps {
  getPopupContainer?: (triggerNode: Element) => HTMLElement;
  filterOption?: boolean | ((inputValue: string, option: React.ReactElement<OptionProps>) => any);
  id?: string;
+  defaultOpen?: boolean;
  open?: boolean;
  onDropdownVisibleChange?: (open: boolean) => void;
 }
--- a/components/select/index.zh-CN.md
+++ b/components/select/index.zh-CN.md
@ -58,6 +58,7 @@ title: Select
 | onPopupScroll | 下拉列表滚动时的回调 | function | - |
 | onSearch | 文本框值变化时回调 | function(value: string) |  |
 | onSelect | 被选中时调用，参数为选中项的 value (或 key) 值 | function(value, option:Option) | - |
+| defaultOpen | 是否默认展开下拉菜单 | boolean | - |
 | open | 是否展开下拉菜单 | boolean | - |
 | onDropdownVisibleChange | 展开下拉菜单的回调 | function(open) | - |

--- a/components/table/filterDropdown.tsx
+++ b/components/table/filterDropdown.tsx
@ -108,7 +108,10 @@ export default class FilterMenu<T> extends React.Component<FilterMenuProps<T>, F

  handleConfirm = () => {
    this.setVisible(false);
-    this.confirmFilter();
+
+    // Call `setSelectedKeys` & `confirm` in the same time will make filter data not up to date
+    // https://github.com/ant-design/ant-design/issues/12284
+    this.setState({}, this.confirmFilter);
  }

  onVisibleChange = (visible: boolean) => {
--- a/components/transfer/tests/index.test.js
+++ b/components/transfer/tests/index.test.js
@ -9,6 +9,8 @@ import TransferItem from '../item';
 import Button from '../../button';
 import Checkbox from '../../checkbox';

+const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+
 const listCommonProps = {
  dataSource: [{
    key: 'a',
@ -210,6 +212,11 @@ describe('Transfer', () => {
        .find('.ant-transfer-list-body-not-found').at(0)
        .text()
    ).toEqual('old1');
+
+    expect(consoleErrorSpy).toBeCalledWith(
+      'Warning: Transfer[notFoundContent] and Transfer[searchPlaceholder] will be removed, please use Transfer[locale] instead.'
+    );
+    consoleErrorSpy.mockRestore();
  });

  it('should display the correct items unit', () => {
--- a/components/upload/Upload.tsx
+++ b/components/upload/Upload.tsx
@ -67,11 +67,18 @@ class Upload extends React.Component<UploadProps, UploadState> {
  }

  onStart = (file: RcFile) => {
-    let targetItem;
-    let nextFileList = this.state.fileList.concat();
-    targetItem = fileToObject(file);
+    const targetItem = fileToObject(file);
    targetItem.status = 'uploading';
-    nextFileList.push(targetItem);
+
+    const nextFileList = this.state.fileList.concat();
+
+    const fileIndex = nextFileList.findIndex(({ uid }) => uid === targetItem.uid);
+    if (fileIndex === -1) {
+      nextFileList.push(targetItem);
+    } else {
+      nextFileList[fileIndex] = targetItem;
+    }
+
    this.onChange({
      file: targetItem,
      fileList: nextFileList,
--- a/components/upload/style/index.less
+++ b/components/upload/style/index.less
@ -166,7 +166,7 @@
      top: 6px;
      right: 4px;
      color: @text-color-secondary;
-      line-height: 22px;
+      line-height: 0;
      &:hover {
        color: @text-color;
      }
--- a/docs/react/customize-theme.en-US.md
+++ b/docs/react/customize-theme.en-US.md
@ -69,7 +69,7 @@ Note that do not exclude antd package in node_modules when using less-loader.

 ### Customize in roadhog or Umi

-You can easily use `theme` field in `.webpackrc` file of your project root directory if you are using [roadhog](https://github.com/sorrycc/roadhog) or [Umi](http://umijs.org/)，which could be a object or a javascript file path.
+You can easily use `theme` field in [.webpackrc](https://github.com/ant-design/ant-design-pro/blob/b7e7983661eb5e53dc807452e9653e93e74276d4/.webpackrc.js#L18) (roadhog) or [config/config.js](https://github.com/ant-design/ant-design-pro/blob/56e648ec14bdb9f6724169fd64830447e224ccb1/config/config.js#L45) (Umi) file of your project root directory if you are using [roadhog](https://github.com/sorrycc/roadhog) or [Umi](http://umijs.org/)，which could be a object or a javascript file path.

 ```js
 "theme": {
@ -77,7 +77,7 @@ You can easily use `theme` field in `.webpackrc` file of your project root direc
 },
 ```

-Or just [a javascript file path](https://github.com/ant-design/ant-design-pro/blob/3c2a056ef0dac06ce3b4389192691bb1f5c448e2/.webpackrc.js#L19):
+Or just [a javascript file path](https://github.com/ant-design/ant-design-pro/blob/b7e7983661eb5e53dc807452e9653e93e74276d4/.webpackrc.js#L18):

 ```js
 "theme": "./theme.js",
--- a/docs/react/customize-theme.zh-CN.md
+++ b/docs/react/customize-theme.zh-CN.md
@ -69,7 +69,7 @@ module.exports = {

 ### 在 roadhog 或 Umi 里配置主题

-如果你在使用 [roadhog](https://github.com/sorrycc/roadhog) 或者 [Umi](http://umijs.org/)，那么可以很方便地在项目根目录的 `.webpackrc` 文件中 `theme` 字段进行主题配置。`theme` 可以配置为一个对象或文件路径。
+如果你在使用 [roadhog](https://github.com/sorrycc/roadhog) 或者 [Umi](http://umijs.org/)，那么可以很方便地在项目根目录的 [.webpackrc](https://github.com/ant-design/ant-design-pro/blob/b7e7983661eb5e53dc807452e9653e93e74276d4/.webpackrc.js#L18)（roadhog）或 [config/config.js](https://github.com/ant-design/ant-design-pro/blob/56e648ec14bdb9f6724169fd64830447e224ccb1/config/config.js#L45)（Umi）文件中 `theme` 字段进行主题配置。`theme` 可以配置为一个对象或文件路径。

 ```js
 "theme": {
@ -77,7 +77,7 @@ module.exports = {
 },
 ```

-或者 [一个 js 文件](https://github.com/ant-design/ant-design-pro/blob/3c2a056ef0dac06ce3b4389192691bb1f5c448e2/.webpackrc.js#L19)：
+或者 [一个 js 文件](https://github.com/ant-design/ant-design-pro/blob/b7e7983661eb5e53dc807452e9653e93e74276d4/.webpackrc.js#L18)：

 ```js
 "theme": "./theme.js",
--- a/docs/spec/values.zh-CN.md
+++ b/docs/spec/values.zh-CN.md
@ -23,6 +23,7 @@ title: 设计价值观
 - 在行为的执行中，利用[行为分析](https://zhuanlan.zhihu.com/p/41952711)、人工智能、传感器、[元数据](https://zhuanlan.zhihu.com/p/43613398)等一系列方式，辅助用户有效决策、减少用户额外操作，从而节省用户脑力和体力，让人机交互行为更自然。
 - 在感知和认知中，视觉系统扮演着最重要的角色，通过提炼自然界中的客观规律并运用到界面设计中，从而创建更有层次产品体验；同时，适时加入听觉系统、触觉系统等，创建更多维、更真实的产品体验。详见视觉语言

+> 想了解自然价值观的前世今生，[请移步至专栏](https://zhuanlan.zhihu.com/p/44809866)。

 ## 确定

--- a/site/theme/static/responsive.less
+++ b/site/theme/static/responsive.less
@ -108,17 +108,6 @@
    display: block;
  }

-  .nav-phone-icon:before {
-    content: "";
-    display: block;
-    border-radius: 2px;
-    width: 16px;
-    height: 2px;
-    background: #777;
-    box-shadow: 0 6px 0 0 #777, 0 12px 0 0 #777;
-    position: absolute;
-  }
-
  .main {
    height: calc(100% - 86px);
  }
@ -247,7 +236,7 @@
    min-height: 1538px;
    .ant-row {
      margin: 24px auto 64px;
-      >div {
+      > div {
        margin-bottom: 48px;
      }
    }