Skip to content
Changelog Hub

antd 2.0.0

npm / antd / 2.0.0 source ↗

2016-09-28

After four months, antd@2.0.0 is published. We had refactored code and improve functionalities and details of existing components. What's more, we provide English version of the documentation. The antd community help us a lot in developing antd@2.0.0.

If you meet any problem while you try to upgrade from antd@1.0.0, feel free to create issues on GitHub.

2.x Major changes

  • Refactor components with TypeScript, and provide .d.ts files which are officially supported. Thanks to all the developers that contributed to #1846 and @infeng.
  • Translate the documentation into English, and we are going to provide both of Chinese and English versions of the documentation in the future. Thanks to all the translators and reviewers that contributed to #1471.
  • DatePicker, TimePicker, Calendar and other components that are designed to select time are refactored to replace gregorian-calendar with moment.
  • All the icons are re-designed.
  • New component Mention.
  • New component AutoComplete.
  • The getFieldProps of Form is replaced with getFieldDecorator which will warn developers if they make mistakes. Related discussion #1533.
  • Table supports grouping columns. @yesmeck
  • Removed components and features which are deprecated in antd@1.x, such as QueueAnim, Validation, Form.ValueMixin, Progress.Line, Progress.Circle, Popover[overlay] and Slider[marks] will not support array any more.

2.x Breaking changes

There are some breaking changes in antd@2.0.0, and you need to modify your code to work with it.

  • value and defaultValue of all the time-related components will not support type String/Date, please use moment:

    - <TimePicker defaultValue="12:08:23" />
+ <TimePicker defaultValue={moment('12:08:23', 'HH:mm:ss')} />

- <DatePicker defaultValue="2015/01/01" />
+ <DatePicker defaultValue={moment('2015/01/01', 'YYYY/MM/DD')} />

- <Calendar defaultValue={new Date('2010-10-10')} />
+ <Calendar defaultValue={moment('2010-10-10', 'YYYY-MM-DD')} />

  • Parameters of type Date/GregorianCalendar of functions such as onChange and onPanelChange, plus other callback functions had been changed to type moment. Please consult APIs of gregorian-calendar and APIs of moment, and update your code accordingly. And you can consult this commit to see how to update.

    Because the return value of JSON.stringy(date: moment) will lost time zone, we should use .format to convert date to string first, see related issue #3082 for details:

    handleSubmit() {
  const values = this.props.form.getFieldsValue();
  values.date = values.date.format('YYYY-MM-DD HH:mm:ss'); // or other format
  const data = JSON.stringify(values);
  // send data to server
}

  • For the value of time-related components becomes an instance of moment, you should replace type: 'date' with type: 'object' in form validation.

  • The format of time-related components is changed from gregorian-calendar-format to moment format now, for instance the format yyyy-MM-dd should change to YYYY-MM-DD.

  • linkRender and nameRender of Breadcrumb are removed, please use itemRender.

  • onClose and onOpen of Menu are removed, please use onOpenChange. As being totally different, please check this demo first.

  • Paging columns of Table were removed, please use fixed columns.

  • Popover[overlay] is removed, please use Popover[content] instead.

The following change will throw some warnings in the console and it will still work, but we recommend to update your code.

  • getFieldProps of Form is deprecated, please use getFieldDecorator:

    -  <Input placeholder="text" {...getFieldProps('userName', { ... })} />
+  {getFieldDecorator('userName', { ... })(
+    <Input placeholder="text" />
+  )}

    Look up to #1533 for related discussion.

  • toggleOpen of DatePicker is deprecated, please use onOpenChange:

    - handleToggleOpen({ open }) {
+ handleOpenChange(open) {
  ...
}

2.x Bug fixes

  • Dropdown.Button[disabled] should work. #3070
  • option.withRef of Form.create should work. #2843
  • Fix slow response of expanding sub menu in Menu[inline] mode. #2701
  • The button of Modal.confirm(and so on) should not be clickable while it is closed asynchronously. #2684
  • format of DatePicker[showTime] should work. #3123
  • Fix Table[dataSource] treat key whose value is 0 as inexisting. #3166 @noonnightstorm
  • Tree.Node should not show arrow if it has no child nodes. #2616
  • Fix cursor style of arrows that are hidden of Tree.Node. #2748

2.x Other improvements

2.x Workflow

  • AntD Library a collection of Axure files which includes components and patterns that follow Ant Design Specification.

  • Rename babel-plugin-antd to babel-plugin-import, and this means that babel-plugin-import becomes an common load-on-demand solution and not just for antd.

    Please update package.json:

    {
  "devDependencies": {
-   "babel-plugin-antd": "^0.x.x",
+   "babel-plugin-import": "^1.0.0",
  }
}

    And update your babel config in .babelrc or other place:

    {
-  "plugins": [["antd", { style: "css" }]]
+  "plugins": [["import", { libraryName: "antd", style: "css" }]]
}

  • dva@1.0.0 is published and it is officially recommended framework in real world.

  • The officially recommended scaffold is dva-cli now, the old antd-init is just for studying and demo.

很高兴的通知各位，经过四个月时间的紧密开发，antd@2.0.0 终于发布了。这个版本我们重构了底层代码，持续完善现有组件功能和优化细节，并提供了英文版的文档，其中很多都来自社区的贡献，无法一一感谢，欢迎各位持续关注和鞭策。在升级过程中遇到任何问题，请及时 反馈给我们。

2.x 主要变化

  • 开发语言改为 TypeScript，提供 官方支持的 .d.ts 文件，感谢 #1846 中所有参与到这次重构的人以及后期 @infeng 对其的完善。
  • 新增英文文档， 以后将同时提供中英双语文档，感谢 #1471 里所有参与到翻译和审阅工作中的人。
  • 时间类组件 DatePicker、TimePicker、Calendar 等的底层 使用 moment 替换 gregorian-calendar。
  • 全新设计的 图标。
  • 新增提及组件 Mention。
  • 新增自动完成组件 AutoComplete。
  • Form 新增 getFieldDecorator 作为 getFieldProps 的替代，对于不正确的使用方式 getFieldDecorator 会给出提示，可以降低踩坑的概率。相关讨论见 #1533。
  • Table 支持 表头分组。@yesmeck
  • 完全移除 antd@1.x 中已经废弃的 QueueAnim、Validation、Form.ValueMixin、Progress.Line、Progress.Circle、Popover[overlay] 及 Slider[marks] 对数组的支持。

2.x 不兼容改动

此版本有部分不兼容的改动，升级时确保修改相应的使用代码。

  • 时间类组件的 value 和 defaultValue 不再支持 String/Date 类型，请使用 moment。

    - <TimePicker defaultValue="12:08:23" />
+ <TimePicker defaultValue={moment('12:08:23', 'HH:mm:ss')} />

- <DatePicker defaultValue="2015/01/01" />
+ <DatePicker defaultValue={moment('2015/01/01', 'YYYY/MM/DD')} />

- <Calendar defaultValue={new Date('2010-10-10')} />
+ <Calendar defaultValue={moment('2010-10-10', 'YYYY-MM-DD')} />

  • 时间类组件的 onChange 和 onPanelChange 及其他回调函数中为 Date/GregorianCalendar 类型的参数，均修改为 moment 类型，两者 API 有所不同，但功能基本一致，请对照 moment 的 API 文档 和 gregorian-calendar 的文档 进行修改。你也可以参考这个 commit 来进行修改。

    由于 JSON.stringy(date: moment) 返回的值会丢失时区设置，所以要先使用 .format 把日期转成字符串，相关 issue 见 #3082：

    handleSubmit() {
  const values = this.props.form.getFieldsValue();
  values.date = values.date.format('YYYY-MM-DD HH:mm:ss'); // 或其它格式
  const data = JSON.stringify(values);
  // 发送 data 到服务器
}

  • 时间类组件与表单校验一起使用时，type: 'date' 改为 type: 'object'。

  • 时间类组件的 format 属性也发生了变化，从 gregorian-calendar-format 的格式 变化为与 moment 的格式，例如原来的 yyyy-MM-dd 将变为 YYYY-MM-DD。

  • Breadcrumb 移除 linkRender 和 nameRender，请使用 itemRender。

  • Menu 移除 onClose onOpen，请使用 onOpenChange。API 差异较大，请先研究 demo。

  • Table 移除列分页功能，请使用 固定列。

  • Popover 移除 overlay ，请使用 content。

以下变化升级后旧代码仍然能正常运行，但是控制台会出现警告提示，建议按提示进行修改。

  • Form 废弃 getFieldProps，请使用 getFieldDecorator：

    -  <Input placeholder="text" {...getFieldProps('userName', { ... })} />
+  {getFieldDecorator('userName', { ... })(
+    <Input placeholder="text" />
+  )}

    相关讨论可以看 #1533。

  • DatePicker 废弃 toggleOpen，请使用 onOpenChange：

    - handleToggleOpen({ open }) {
+ handleOpenChange(open) {
  ...
}

2.x Bug 修复

  • 修复 Dropdown.Button disabled 属性无效的问题。#3070
  • 修复 Form.create withRef 选项失效的问题。#2843
  • 修复 Menu inline 模式下子菜单展开的问题。#2701
  • 修复 Modal.confirm 之类的弹窗在异步调用时按钮仍可点击的问题。#2684
  • 修复 DatePicker[showTime] 参数中的 format 失效的问题。#3123
  • 修复 Table[dataSource] 中的项的 key 为 0 时识别错误的问题。#3166 @noonnightstorm
  • 修复 Tree.Node 无子节点时仍然显示箭头的问题。#2616
  • 修复 Tree.Node 箭头隐藏后鼠标 hover 上去光标仍会发生变化的问题。#2748

2.x 其他改进

2.x 相关工具发布

  • 新增配套网站 AntD Library，提供遵循 Ant Design 设计规范的组件、模式等的 Axure 资源。

  • babel-plugin-antd 更名为 babel-plugin-import，标志着该插件将作为一个通用的按需加载方案存在，而不再是 antd 专有。

    请更新 package.json：

    {
  "devDependencies": {
-   "babel-plugin-antd": "^0.x.x",
+   "babel-plugin-import": "^1.0.0",
  }
}

    同时更新 .babelrc 或你在其它地方对其的配置：

    {
-  "plugins": [["antd", { style: "css" }]]
+  "plugins": [["import", { libraryName: "antd", style: "css" }]]
}

  • dva@1.0.0 也已经发布，并推荐 在实战项目中使用。

  • 脚手架工具推荐使用 dva-cli，原来的 antd-init 以后仅会用于学习以及 demo。