From 630bf741d5e27af9cbd63aa583f07602ef430a83 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Wed, 28 Sep 2016 13:43:32 +0800 Subject: [PATCH] docs: add change log for 2.0, close: #3020 (#3087) --- CHANGELOG.en-US.md | 130 ++++++++++++++++++++++++++ CHANGELOG.md => CHANGELOG.zh-CN.md | 118 +++++++++++++++++++++++ site/bisheng.config.js | 5 +- site/theme/en-US.js | 6 ++ site/theme/template/Layout/Footer.jsx | 66 +++++++------ site/theme/zh-CN.js | 6 ++ 6 files changed, 301 insertions(+), 30 deletions(-) create mode 100644 CHANGELOG.en-US.md rename CHANGELOG.md => CHANGELOG.zh-CN.md (79%) diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md new file mode 100644 index 0000000000..b89cf60622 --- /dev/null +++ b/CHANGELOG.en-US.md @@ -0,0 +1,130 @@ +--- +order: 3 +title: Change Log +toc: false +timeline: true +--- + +If you want to read change logs before `2.0.0`, please visit [GitHub](https://github.com/ant-design/ant-design/releases?after=2.0.0). + +--- + +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](https://github.com/ant-design/ant-design/issues). + +### 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](https://github.com/ant-design/ant-design/issues/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](https://github.com/ant-design/ant-design/issues/1471). +* DatePicker, TimePicker, Calendar and other components that are designed to select time **are refactored to replace [gregorian-calendar](github.com/yiminghe/gregorian-calendar) with [moment](http://momentjs.com/)**. +* All the [icons](http://ant.design/components/icon/) are re-designed. +* New component [Mention](http://ant.design/components/mention/). +* New component [AutoComplete](http://ant.design/components/auto-complete/). +* The `getFieldProps` of Form is replaced with `getFieldDecorator` which will warn developers if they make mistakes. Related discussion [#1533](https://github.com/ant-design/ant-design/issues/1533). +* Table supports [grouping columns](http://ant.design/components/table/#components-table-demo-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](http://momentjs.com/): + ```diff + - + + + + - + + + + - + + + ``` +* 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](https://github.com/yiminghe/gregorian-calendar) and [APIs of moment](http://momentjs.com/docs/), and update your code accordingly. 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](https://github.com/ant-design/ant-design/issues/3082) for details: + ```js + 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 + } + ``` +* The `format` of time-related components is the same as [moment's format](http://momentjs.com/docs/) now. +* `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](http://beta.ant.design/components/menu/#components-menu-demo-sider-current) first. +* Paging columns of Table were removed, please use [fixed columns](http://ant.design/components/table/#components-table-demo-fixed-columns). + +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`: + ```diff + + getFieldDecorator('userName', { ... })( + + + ) + ``` +* `toggleOpen` of DatePicker is deprecated, please use `onOpenChange`: + ```diff + - handleToggleOpen({ open }) { + + handleOpenChange(open) { + ... + } + ``` + +### 2.x Bug fixes + +* Dropdown.Button[disabled] should work. [#3070](https://github.com/ant-design/ant-design/issues/3070) +* `option.withRef` of Form.create should work. [#2843](https://github.com/ant-design/ant-design/issues/2843) +* Fix slow response of expanding sub menu in Menu[inline] mode. [#2701](https://github.com/ant-design/ant-design/issues/2701) +* The button of Modal.confirm(and so on) should not be clickable while it is closed asynchronously. [#2684](https://github.com/ant-design/ant-design/issues/2684) +* `format` of DatePicker[showTime] should work. [#3123](https://github.com/ant-design/ant-design/issues/3123) +* Fix Table[dataSource] treat key whose value is `0` as inexisting. [#3166](https://github.com/ant-design/ant-design/pull/3166) @noonnightstorm +* Tree.Node should not show arrow if it has no child nodes. [#2616](https://github.com/ant-design/ant-design/issues/2616) +* Fix cursor style of arrows that are hidden of Tree.Node. [#2748](https://github.com/ant-design/ant-design/issues/2748) + +### 2.x Other improvements + +* Alert supports [`banner` mode](http://ant.design/components/alert/#components-alert-demo-banner). +* BackTop will scroll to top with animation. +* Badge supports [status dot mode](http://ant.design/components/badge/#components-badge-demo-status). +* Cascader supports [searching options directly](http://ant.design/components/cascader/#components-cascader-demo-search). +* Checkbox supports [indeterminate mode](http://ant.design/components/checkbox/#components-checkbox-demo-check-all). +* Form supports [vertical layout](http://ant.design/components/form/#components-form-demo-validate-customized). +* InputNumber supports long press to increase/decrease number. [#](http://ant.design/components/input-number/#components-input-number-demo-basic) +* notification supports [customized icon](http://ant.design/components/notification/#components-notification-demo-custom-icon). +* Spin allows [customized tips and animation work together](http://ant.design/components/spin/#components-spin-demo-tip). @jerrybendy +* Transfer can handle event while options are checked/unchecked. [#](http://ant.design/components/transfer/#components-transfer-demo-basic) +* Transfer can determine [whether an option is checkable](http://ant.design/components/transfer/#components-transfer-demo-basic). +* Improve style of Alert and notification. +* Modal.confirm(and so on) can be closed by keyboard. @Dafrok +* Improve the user experience of [selecting time in DatePicker](http://ant.design/components/date-picker/#components-date-picker-demo-time). +* Improve the status changed animation of [Spin](http://ant.design/components/spin/#components-spin-demo-nested ). +* Update [font-family](https://github.com/ant-design/ant-design/commit/2f308b0f995cfcb2a3c8feb1e35ffd3f0bf93cfc). + +### 2.x Workflow + +* [AntD Library](http://library.ant.design/) a collection of Axure files which includes components and patterns that follow Ant Design Specification. +* Rename `babel-plugin-antd` to [`babel-plugin-import`](https://github.com/ant-design/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`: + ```diff + { + "devDependencies": { + - "babel-plugin-antd": "^0.x.x", + + "babel-plugin-import": "^1.0.0", + } + } + ``` + And update your babel config in `.babelrc` or other place: + ```diff + { + - "plugins": [["antd", { style: "css" }]] + + "plugins": [["import", { libraryName: "antd", style: "css" }]] + } + ``` +* [`dva@1.0.0`](https://github.com/dvajs/dva) is published and it is officially recommended framework [in real world](http://ant.design/docs/react/practical-projects). +* The officially recommended scaffold is [`dva-cli`](https://github.com/dvajs/dva-cli) now, the old `antd-init` is just for studying and demo. + +## 1.0.0 + +Visit [GitHub](https://github.com/ant-design/ant-design/releases?after=2.0.0) to read change logs from `0.x` to `1.x`。 diff --git a/CHANGELOG.md b/CHANGELOG.zh-CN.md similarity index 79% rename from CHANGELOG.md rename to CHANGELOG.zh-CN.md index 115f739e9b..4e04671c25 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.zh-CN.md @@ -9,6 +9,124 @@ timeline: true --- +## 2.0.0 + +`2016-09-x` + +很高兴的通知各位，经过四个月时间的紧密开发，`antd@2.0.0` 终于发布了。这个版本我们重构了底层代码，持续完善现有组件功能和优化细节，并提供了英文版的文档，其中很多都来自社区的贡献，无法一一感谢，欢迎各位持续关注和鞭策。在升级过程中遇到任何问题，请及时 [反馈给我们](https://github.com/ant-design/ant-design/issues)。 + +### 2.x 主要变化 + +* 开发语言改为 TypeScript，提供 **官方支持的 `.d.ts` 文件**，感谢 [#1846](https://github.com/ant-design/ant-design/issues/1846) 中所有参与到这次重构的人以及后期 @infeng 对其的完善。 +* **新增英文文档**， 以后将同时提供中英双语文档，感谢 [#1471](https://github.com/ant-design/ant-design/issues/1471) 里所有参与到翻译、review 中的人。 +* 时间类组件 DatePicker、TimePicker、Calendar 等的底层 **使用 [moment](http://momentjs.com/) 替换 [gregorian-calendar](github.com/yiminghe/gregorian-calendar)**。 +* 全新设计的 [图标](http://ant.design/components/icon/)。 +* 新增提及组件 [Mention](http://ant.design/components/mention/)。 +* 新增自动完成组件 [AutoComplete](http://ant.design/components/auto-complete/)。 +* Form 新增 `getFieldDecorator` 作为 `getFieldProps` 的替代，对于不正确的使用方式 `getFieldDecorator` 会给出提示，可以降低踩坑的概率。相关讨论见 [#1533](https://github.com/ant-design/ant-design/issues/1533)。 +* Table 支持 [表头分组](http://ant.design/components/table/#components-table-demo-grouping-columns)。@yesmeck +* 完全移除 `antd@1.x` 中已经废弃的 QueueAnim、Validation、Form.ValueMixin、Progress.Line、Progress.Circle、Popover[overlay] 及 Slider[marks] 对数组的支持。 + +### 2.x 不兼容改动 + +此版本有部分不兼容的改动，升级时确保修改相应的使用代码。 + +* 时间类组件的 `value` 和 `defaultValue` 不再支持 `String/Date` 类型，请使用 [moment](http://momentjs.com/)。 + ```diff + - + + + + - + + + + - + + + ``` +* 时间类组件的 `onChange` 和 `onPanelChange` 及其他回调函数中为 `Date/GregorianCalendar` 类型的参数，均修改为 moment 类型，两者 API 有所不同，但功能基本一致，请对照 [moment 的 API 文档](http://momentjs.com/docs/) 和 [gregorian-calendar 的文档](https://github.com/yiminghe/gregorian-calendar) 进行修改。由于 `JSON.stringy(date: moment)` 返回的值会丢失时区设置，所以要先使用 `.format` 把日期转成字符串，相关 issue 见 [#3082](https://github.com/ant-design/ant-design/issues/3082)： + ```js + handleSubmit() { + const values = this.props.form.getFieldsValue(); + values.date = values.date.format('YYYY-MM-DD HH:mm:ss'); // 或其它格式 + const data = JSON.stringify(values); + // 发送 data 到服务器 + } + ``` +* 时间类组件的 `format` 属性配置也调整为与 [moment](http://momentjs.com/docs/) 的一致。 +* Breadcrumb 移除 `linkRender` 和 `nameRender`，请使用 `itemRender`。 +* Menu 移除 `onClose` `onOpen`，请使用 `onOpenChange`。API 差异较大，请先研究 [demo](http://beta.ant.design/components/menu/#components-menu-demo-sider-current)。 +* Table 移除列分页功能，请使用 [固定列](http://ant.design/components/table/#components-table-demo-fixed-columns)。 + +以下变化升级后旧代码仍然能正常运行，但是控制台会出现警告提示，建议按提示进行修改。 + +* Form 废弃 `getFieldProps`，请使用 `getFieldDecorator`： + ```diff + + getFieldDecorator('userName', { ... })( + + + ) + ``` +* DatePicker 废弃 `toggleOpen`，请使用 `onOpenChange`： + ```diff + - handleToggleOpen({ open }) { + + handleOpenChange(open) { + ... + } + ``` + +### 2.x Bug 修复 + +* 修复 Dropdown.Button `disabled` 属性无效的问题。[#3070](https://github.com/ant-design/ant-design/issues/3070) +* 修复 Form.create `withRef` 选项失效的问题。[#2843](https://github.com/ant-design/ant-design/issues/2843) +* 修复 Menu inline 模式下子菜单展开的问题。[#2701](https://github.com/ant-design/ant-design/issues/2701) +* 修复 Modal.confirm 之类的弹窗在异步调用时按钮仍可点击的问题。[#2684](https://github.com/ant-design/ant-design/issues/2684) +* 修复 DatePicker[showTime] 参数中的 `format` 失效的问题。[#3123](https://github.com/ant-design/ant-design/issues/3123) +* 修复 Table[dataSource] 中的项的 key 为 `0` 时识别错误的问题。[#3166](https://github.com/ant-design/ant-design/pull/3166) @noonnightstorm +* 修复 Tree.Node 无子节点时仍然显示箭头的问题。[#2616](https://github.com/ant-design/ant-design/issues/2616) +* 修复 Tree.Node 箭头隐藏后鼠标 hover 上去光标仍会发生变化的问题。[#2748](https://github.com/ant-design/ant-design/issues/2748) + +### 2.x 其他改进 + +* Alert 新增 [`banner` 模式](http://ant.design/components/alert/#components-alert-demo-banner)。 +* BackTop 增加回到顶部的动画效果。 +* Badge 新增 [状态点模式](http://ant.design/components/badge/#components-badge-demo-status)。 +* Cascader 新增 [搜索功能](http://ant.design/components/cascader/#components-cascader-demo-search)。 +* Checkbox 新增 [indeterminate 状态](http://ant.design/components/checkbox/#components-checkbox-demo-check-all)。 +* Form 新增 [垂直布局](http://ant.design/components/form/#components-form-demo-validate-customized)。 +* InputNumber 现在支持长按。[#](http://ant.design/components/input-number/#components-input-number-demo-basic) +* notification 支持 [自定义 icon](http://ant.design/components/notification/#components-notification-demo-custom-icon)。 +* Spin 现在允许 [自定义文案与动画共存](http://ant.design/components/spin/#components-spin-demo-tip)。@jerrybendy +* Transfer 现在可以监听用户选择了哪些选项。[#](http://ant.design/components/transfer/#components-transfer-demo-basic) +* Transfer 现在可以定义哪些选项是 [不可选择的](http://ant.design/components/transfer/#components-transfer-demo-basic)。 +* 优化 Alert 和 notification 的样式。 +* 优化 Modal.confirm 之类的弹窗的键盘交互。@Dafrok +* 优化 [DatePicker 的时间选择](http://ant.design/components/date-picker/#components-date-picker-demo-time) 交互。 +* 优化 [Spin 状态切换](http://ant.design/components/spin/#components-spin-demo-nested ) 时的效果。 +* 更新 [font-family](https://github.com/ant-design/ant-design/commit/2f308b0f995cfcb2a3c8feb1e35ffd3f0bf93cfc)。 + +### 2.x 相关工具发布 + +* 新增配套网站 [AntD Library](http://library.ant.design/)，提供遵循 Ant Design 设计规范的组件、模式等的 Axure 资源。 +* `babel-plugin-antd` 更名为 [`babel-plugin-import`](https://github.com/ant-design/babel-plugin-import)，标志着该插件将作为一个通用的按需加载方案存在，而不再是 `antd` 专有。 + 请更新 `package.json`： + ```diff + { + "devDependencies": { + - "babel-plugin-antd": "^0.x.x", + + "babel-plugin-import": "^1.0.0", + } + } + ``` + 同时更新 `.babelrc` 或你在其它地方对其的配置： + ```diff + { + - "plugins": [["antd", { style: "css" }]] + + "plugins": [["import", { libraryName: "antd", style: "css" }]] + } + ``` +* [`dva@1.0.0`](https://github.com/dvajs/dva) 也已经发布，并推荐 [在实战项目中使用](http://ant.design/docs/react/practical-projects)。 +* 脚手架工具推荐使用 [`dva-cli`](https://github.com/dvajs/dva-cli)，原来的 `antd-init` 以后仅会用于学习以及 demo。 + ## 1.11.2 `2016-09-26` diff --git a/site/bisheng.config.js b/site/bisheng.config.js index 4544cbd1ae..d1cb113b2f 100644 --- a/site/bisheng.config.js +++ b/site/bisheng.config.js @@ -19,7 +19,8 @@ module.exports = { source: [ './components', './docs', - 'CHANGELOG.md', // TODO: fix it in bisheng + 'CHANGELOG.zh-CN.md', // TODO: fix it in bisheng + 'CHANGELOG.en-US.md', ], lazyLoad(nodePath, nodeValue) { if (typeof nodeValue === 'string') { @@ -38,7 +39,7 @@ module.exports = { }; }, changelog(markdownData) { - if (markdownData.meta.filename === 'CHANGELOG.md') { + if (/CHANGELOG/.test(markdownData.meta.filename)) { return { meta: markdownData.meta, }; diff --git a/site/theme/en-US.js b/site/theme/en-US.js index b809259ccd..d9d141cf14 100644 --- a/site/theme/en-US.js +++ b/site/theme/en-US.js @@ -35,6 +35,7 @@ module.exports = { 'app.footer.data-vis': 'Data Visualization', 'app.footer.data-vis-spec': 'Specification of Data Visualization', 'app.footer.motion': 'Motion', + 'app.footer.antd-library': 'Axure library of Ant Design', 'app.footer.material': 'Sitemap Template', 'app.footer.community': 'Community', 'app.footer.change-log': 'Change Log', @@ -43,5 +44,10 @@ module.exports = { 'app.footer.bug-report': 'Bug Report', 'app.footer.version': 'Version: ', 'app.footer.author': 'Created by Ant UED', + 'app.publish.title': 'antd@2.0.0 is released!', + 'app.publish.greeting': 'Hello, ', + 'app.publish.intro': ' is released, and please upgrade. ', + 'app.publish.old-version-guide': 'If you want to read old version documentation, please visit ', + 'app.publish.old-version-tips': ', or change the version of documentation with the bottom-right selector.', }, }; diff --git a/site/theme/template/Layout/Footer.jsx b/site/theme/template/Layout/Footer.jsx index bdb142611c..dbaa591b00 100644 --- a/site/theme/template/Layout/Footer.jsx +++ b/site/theme/template/Layout/Footer.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import { FormattedMessage } from 'react-intl'; +import { FormattedMessage, injectIntl } from 'react-intl'; import { Select, Modal } from 'antd'; import { version as antdVersion } from 'antd/package.json'; import { docVersions } from '../../'; @@ -18,28 +18,9 @@ function isLocalStorageNameSupported() { } } -function infoNewVersion() { - Modal.info({ - title: 'antd 新版发布！', - content: ( -
- Ant Design -

- 您好，antd@1.0 已正式发布，欢迎升级。 - 如果您还需要使用旧版，请查阅 012x.ant.design - ，也可通过页面右下角的文档版本选择框进行切换。 -

-
- ), - onOk: () => localStorage.setItem('infoNewVersionSent', 'true'), - className: 'new-version-info-modal', - width: 470, - }); -} - docVersions[antdVersion] = antdVersion; -export default class Footer extends React.Component { +class Footer extends React.Component { componentDidMount() { // for some iOS // http://stackoverflow.com/a/14555361 @@ -49,12 +30,36 @@ export default class Footer extends React.Component { // 大版本发布后全局弹窗提示 // 1. 点击『知道了』之后不再提示 // 2. 超过截止日期后不再提示 - if (localStorage.getItem('infoNewVersionSent') !== 'true' && - new Date().getTime() < new Date('2016/05/22').getTime()) { - infoNewVersion(); + if (localStorage.getItem('antd@2.0.0-notification-sent') !== 'true' && + Date.now() < new Date('2016/10/14').getTime()) { + this.infoNewVersion(); } } + infoNewVersion() { + const messages = this.props.intl.messages; + Modal.info({ + title: messages['app.publish.title'], + content: ( +
+ Ant Design +

+ {messages['app.publish.greeting']} + antd@2.0.0 + {messages['app.publish.intro']} + {messages['app.publish.old-version-guide']} + 1x.ant.design + {messages['app.publish.old-version-tips']} +

+
+ ), + okText: 'OK', + onOk: () => localStorage.setItem('antd@2.0.0-notification-sent', 'true'), + className: 'new-version-info-modal', + width: 470, + }); + } + handleVersionChange = (url) => { window.location.href = url; } @@ -74,15 +79,15 @@ export default class Footer extends React.Component {
- antd-init - + dva - +
+
+ dva-cli -
-
- dva - -

  • @@ -98,6 +103,9 @@ export default class Footer extends React.Component { + @@ -145,3 +153,5 @@ export default class Footer extends React.Component { ); } } + +export default injectIntl(Footer); diff --git a/site/theme/zh-CN.js b/site/theme/zh-CN.js index 55e5c926fd..03916f8054 100644 --- a/site/theme/zh-CN.js +++ b/site/theme/zh-CN.js @@ -35,6 +35,7 @@ module.exports = { 'app.footer.data-vis': '数据可视化', 'app.footer.data-vis-spec': '数据可视化规范', 'app.footer.motion': '设计动效', + 'app.footer.antd-library': 'Ant Design 的 Axure 部件库', 'app.footer.material': '页面逻辑素材', 'app.footer.community': '社区', 'app.footer.change-log': '更新记录', @@ -43,5 +44,10 @@ module.exports = { 'app.footer.bug-report': '报告 Bug,', 'app.footer.version': '文档版本：', 'app.footer.author': '蚂蚁金服体验技术部出品', + 'app.publish.title': 'antd@2.0.0 发布！', + 'app.publish.greeting': '你好，', + 'app.publish.intro': ' 已正式发布，欢迎升级。', + 'app.publish.old-version-guide': '如果您还需要使用旧版，请查阅 ', + 'app.publish.old-version-tips': '，也可通过页面右下角的文档版本选择框进行切换。', }, };