From 5a17df49028e166c762726c529d7c43e53658293 Mon Sep 17 00:00:00 2001 From: ddcat1115 Date: Thu, 23 Jun 2016 23:12:18 +0800 Subject: [PATCH 1/7] add BackTop (#2160) --- components/back-top/demo/basic.md | 14 ++++ components/back-top/demo/custom.md | 30 ++++++++ components/back-top/index.jsx | 109 +++++++++++++++++++++++++++ components/back-top/index.md | 23 ++++++ components/back-top/style/index.js | 2 + components/back-top/style/index.less | 33 ++++++++ components/style/themes/default.less | 1 + 7 files changed, 212 insertions(+) create mode 100644 components/back-top/demo/basic.md create mode 100644 components/back-top/demo/custom.md create mode 100644 components/back-top/index.jsx create mode 100644 components/back-top/index.md create mode 100644 components/back-top/style/index.js create mode 100644 components/back-top/style/index.less diff --git a/components/back-top/demo/basic.md b/components/back-top/demo/basic.md new file mode 100644 index 0000000000..aaeb0361f1 --- /dev/null +++ b/components/back-top/demo/basic.md @@ -0,0 +1,14 @@ +--- +order: 0 +title: 基本 +--- + +最简单的用法，demo 见右下角灰色按钮。 + +````jsx +import { BackTop } from 'antd'; + +ReactDOM.render( + +, mountNode); +```` diff --git a/components/back-top/demo/custom.md b/components/back-top/demo/custom.md new file mode 100644 index 0000000000..4d52c24c73 --- /dev/null +++ b/components/back-top/demo/custom.md @@ -0,0 +1,30 @@ +--- +order: 1 +title: 自定义样式 +--- + +可以自定义置顶按钮的样式，限制宽高: 40px * 40px。(右下角蓝色按钮) + +````jsx +import { BackTop } from 'antd'; + +const style = { + height: 40, + width: 40, + borderRadius: 3, + backgroundColor: '#57c5f7', + color: '#fff', + textAlign: 'center', + fontSize: 20, +}; + +const onClick = (e) => { + console.log(e); +}; + +ReactDOM.render( + +
UP
+ +, mountNode); +```` diff --git a/components/back-top/index.jsx b/components/back-top/index.jsx new file mode 100644 index 0000000000..7450b7b66c --- /dev/null +++ b/components/back-top/index.jsx @@ -0,0 +1,109 @@ +import React from 'react'; +import Animate from 'rc-animate'; +import Icon from '../icon'; +import addEventListener from 'rc-util/lib/Dom/addEventListener'; +import classNames from 'classnames'; + +function getScroll(w, top) { + let ret = w[`page${top ? 'Y' : 'X'}Offset`]; + const method = `scroll${top ? 'Top' : 'Left'}`; + if (typeof ret !== 'number') { + const d = w.document; + // ie6,7,8 standard mode + ret = d.documentElement[method]; + if (typeof ret !== 'number') { + // quirks mode + ret = d.body[method]; + } + } + return ret; +} + +export default class BackTop extends React.Component { + + static propTypes = { + visibilityHeight: React.PropTypes.number, + } + + static defaultProps = { + onClick() {}, + visibilityHeight: 400, + prefixCls: 'ant-back-top', + } + + constructor(props) { + super(props); + const scrollTop = getScroll(window, true); + this.state = { + visible: scrollTop > this.props.visibilityHeight, + }; + } + + scrollToTop = (e) => { + if (e) e.preventDefault(); + this.setScrollTop(0); + this.props.onClick(e); + } + + setScrollTop(value) { + document.body.scrollTop = value; + document.documentElement.scrollTop = value; + } + + handleScroll = () => { + const scrollTop = getScroll(window, true); + this.setState({ + visible: scrollTop > this.props.visibilityHeight, + }); + } + + animationEnd = () => { + const scrollTop = getScroll(window, true); + this.setState({ + visible: scrollTop > this.props.visibilityHeight, + }); + } + + componentDidMount() { + this.scrollEvent = addEventListener(window, 'scroll', this.handleScroll); + } + + componentWillUnmount() { + if (this.scrollEvent) { + this.scrollEvent.remove(); + } + } + + render() { + const { prefixCls, className, children, ...restProps } = this.props; + const classString = classNames({ + [prefixCls]: true, + [className]: !!className, + }); + + const defaultElement = ( +
+ +
+ ); + + const style = { + display: this.state.visible ? 'block' : 'none', + }; + + return ( + +
+
+ {children || defaultElement} +
+
+ + ); + } +} diff --git a/components/back-top/index.md b/components/back-top/index.md new file mode 100644 index 0000000000..260d57b612 --- /dev/null +++ b/components/back-top/index.md @@ -0,0 +1,23 @@ +--- +category: Components +chinese: 置顶 +type: Other +english: BackTop +--- + +使用 `BackTop` 可以方便地回到顶部。 + +## 何时使用 + +当内容区域比较长，需要提供快速回到顶部的功能时。 + +## API + +> 有默认样式，距离底部 `50px`，可覆盖。 + +> 自定义样式宽高有限制，不大于 40px * 40px。 + +| 参数 | 说明 | 类型 | 默认值 | +|-------------|----------------|--------------------|--------------| +| visibilityHeight | 滚动高度达到此参数值才出现 `BackTop` | Number | 400 | +| onClick | 点击按钮的回调函数 | Function | - | diff --git a/components/back-top/style/index.js b/components/back-top/style/index.js new file mode 100644 index 0000000000..3a3ab0de59 --- /dev/null +++ b/components/back-top/style/index.js @@ -0,0 +1,2 @@ +import '../../style/index.less'; +import './index.less'; diff --git a/components/back-top/style/index.less b/components/back-top/style/index.less new file mode 100644 index 0000000000..c96e94552d --- /dev/null +++ b/components/back-top/style/index.less @@ -0,0 +1,33 @@ +@import "../../style/themes/default"; + +@backtop-prefix-cls: ant-back-top; + +.@{backtop-prefix-cls} { + z-index: @zindex-back-top; + position: fixed; + right: 100px; + bottom: 50px; + height: 40px; + width: 40px; + cursor: pointer; + + &-content { + height: 40px; + width: 40px; + border-radius: 20px; + background-color: rgba(64, 64, 64, 0.4); + color: #fff; + text-align: center; + transition: all .3s @ease-in-out; + + &:hover { + background-color: rgba(64, 64, 64, 0.6); + transition: all .3s @ease-in-out; + } + } + + &-icon { + font-size: 20px; + margin-top: 10px; + } +} diff --git a/components/style/themes/default.less b/components/style/themes/default.less index f3dcb3a30d..01be373723 100644 --- a/components/style/themes/default.less +++ b/components/style/themes/default.less @@ -119,6 +119,7 @@ // z-index list @zindex-affix : 10; +@zindex-back-top : 10; @zindex-modal-mask : 1000; @zindex-modal : 1000; @zindex-notification : 1010; From 5f6a97dff3bf49354f961c5a32c47c1fbdfac7c4 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 24 Jun 2016 11:29:15 +0800 Subject: [PATCH 2/7] Fix scroll top in Chrome (#1949) --- site/theme/template/Content/MainContent.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/site/theme/template/Content/MainContent.jsx b/site/theme/template/Content/MainContent.jsx index cbe7899651..f54d4ce64c 100644 --- a/site/theme/template/Content/MainContent.jsx +++ b/site/theme/template/Content/MainContent.jsx @@ -14,6 +14,7 @@ export default class MainContent extends React.Component { componentDidMount() { if (!location.hash) { + document.body.scrollTop = 0; document.documentElement.scrollTop = 0; } else { location.hash = location.hash; From 37cf2a3d5efdefa9a0495b6ac4f40475e19d2cfe Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 24 Jun 2016 13:05:16 +0800 Subject: [PATCH 3/7] update docs --- docs/react/install.en-US.md | 3 +++ docs/react/install.zh-CN.md | 2 ++ 2 files changed, 5 insertions(+) diff --git a/docs/react/install.en-US.md b/docs/react/install.en-US.md index 615ee6627c..cf56c325f3 100644 --- a/docs/react/install.en-US.md +++ b/docs/react/install.en-US.md @@ -18,6 +18,9 @@ Stable version： $ npm install antd --save ``` +You can Subscribe to this feed for new version notification: https://github.com/ant-design/ant-design/releases.atom + + Beta version： [![](https://cnpmjs.org/badge/v/antd.svg?&tag=beta&subject=npm)](https://www.npmjs.org/package/antd) diff --git a/docs/react/install.zh-CN.md b/docs/react/install.zh-CN.md index 7268dbe3ed..0ecc24744a 100644 --- a/docs/react/install.zh-CN.md +++ b/docs/react/install.zh-CN.md @@ -17,6 +17,8 @@ title: 安装 $ npm install antd --save ``` +你可以订阅：https://github.com/ant-design/ant-design/releases.atom 来获得稳定版发布的通知。 + 开发版本： [![](https://cnpmjs.org/badge/v/antd.svg?&tag=beta&subject=npm)](https://www.npmjs.org/package/antd) From dc191a321bb06c25a346b00fe8fb257a91f2625d Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 24 Jun 2016 13:35:11 +0800 Subject: [PATCH 4/7] fix for onPreview works only when file.url existed close #2163 --- components/upload/uploadList.jsx | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/components/upload/uploadList.jsx b/components/upload/uploadList.jsx index 54131b09c3..6f9b358d4b 100644 --- a/components/upload/uploadList.jsx +++ b/components/upload/uploadList.jsx @@ -100,23 +100,31 @@ export default class UploadList extends React.Component { file.url ? ( this.handlePreview(file, e)} - href={file.url} target="_blank" + href={file.url} + target="_blank" className={`${prefixCls}-list-item-name`} + onClick={e => this.handlePreview(file, e)} > {file.name} - ) : {file.name} + ) : ( + this.handlePreview(file, e)} + > + {file.name} + + ) } { this.props.listType === 'picture-card' && file.status !== 'uploading' ? ( this.handlePreview(file, e)} href={file.url} target="_blank" style={{ pointerEvents: file.url ? '' : 'none' }} + onClick={e => this.handlePreview(file, e)} > From 2007b2173e849861851dcd5d3cbcf8ab710ec41e Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 24 Jun 2016 13:42:46 +0800 Subject: [PATCH 5/7] 1.6.0 --- CHANGELOG.md | 23 +++++++++++++++++++++++ package.json | 2 +- tests/index.test.js | 1 + 3 files changed, 25 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index a329de7e7d..0ee85e4a1b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,27 @@ timeline: true --- +## 1.6.0 + +`2016-06-24` + +- 新增置顶组件 [BackTop](/components/back-top)。 +- 全新的 [Spin](/components/spin) 样式。 +- 给 `Modal.xxx` 系列方法添加了 `{ destory }` 的访问值，方便事后销毁。[#2110](https://github.com/ant-design/ant-design/issues/2110) +- Table 的 `rowKey` 属性支持直接使用字符串。[#2058](https://github.com/ant-design/ant-design/issues/2058) +- Table 增加 `column.filterDropdown` 属性用于自定义渲染筛选菜单的浮层。[#1736](https://github.com/ant-design/ant-design/issues/1736) +- 修复 Tooltip、Popover、Popconfirm 设置 `onVisibleChange` 后失效的问题。[#2134](https://github.com/ant-design/ant-design/issues/2134) +- 修复在 IE8 下 Checkbox 的勾样式变形的问题。[#2148](https://github.com/ant-design/ant-design/issues/2148) +- 优化 Checkbox、Radio 失效状态的文字颜色。[#2114](https://github.com/ant-design/ant-design/issues/2114) +- - 优化 Checkbox、Radio 的默认边距过于拥挤的问题。[#2137](https://github.com/ant-design/ant-design/issues/2137) +- 优化 Pagination 在暗色背景下的样式。[#2126](https://github.com/ant-design/ant-design/issues/2126) +- 修复 Table 固定列时内容无法换行和高度对齐的问题，同时修复了一个 Chrome 下的表格内容错位问题。[#2130](https://github.com/ant-design/ant-design/issues/2130) +- 修复一个 Table 的 `rowSelection` 设为 null 时可能导致报错的问题。[#2127](https://github.com/ant-design/ant-design/issues/2127) +- 修复在 IE8 下点击 Table 选择框报错的问题。[#2154](https://github.com/ant-design/ant-design/issues/2154) +- 小幅优化了 Transfer 的渲染性能。[#2112](https://github.com/ant-design/ant-design/issues/2112) +- 将 DatePicker 的清除按钮从面板上移到外部输入框，解决用户容易误解为关闭的问题。[#1708](https://github.com/ant-design/ant-design/issues/1708) +- Upload 的 `onPreview` 现在没有 `file.url` 时也能生效。[#2163](https://github.com/ant-design/ant-design/issues/2163) + ## 1.5.1 `2016-06-21` @@ -44,6 +65,8 @@ timeline: true `2016-06-12` +此版本之后你可能会遇到 [#2030](https://github.com/ant-design/ant-design/issues/2030)，请使用 `react@15+` 或 `npm@3+`。 + - `Input[type="textarea"]` 支持自动调整高度。 [#](http://ant.design/components/input#components-input-demo-autosize-textarea) - `Breadcrumb` - `nameRender` 新增 `route` 和 `params` 参数。 [#1999](https://github.com/ant-design/ant-design/issues/1999) diff --git a/package.json b/package.json index 2aa765d0d9..6371a6d5f9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "antd", - "version": "1.5.1", + "version": "1.6.0", "title": "Ant Design", "description": "一个 UI 设计语言", "homepage": "http://ant.design/", diff --git a/tests/index.test.js b/tests/index.test.js index d6235906af..898be2913d 100644 --- a/tests/index.test.js +++ b/tests/index.test.js @@ -77,6 +77,7 @@ describe('antd dist files', function() { expect('TreeSelect' in antd).toBeTruthy(); expect('Upload' in antd).toBeTruthy(); expect('Validation' in antd).toBeTruthy(); + expect('BackTop' in antd).toBeTruthy(); }); // https://github.com/ant-design/ant-design/issues/1970 From bd5311c9081b0fb915b1ffa2541ed68dd68b5bb5 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 24 Jun 2016 13:53:19 +0800 Subject: [PATCH 6/7] update back-top doc --- components/back-top/demo/basic.md | 7 +++++-- components/back-top/demo/custom.md | 18 +++++++++--------- components/back-top/index.md | 8 ++++---- 3 files changed, 18 insertions(+), 15 deletions(-) diff --git a/components/back-top/demo/basic.md b/components/back-top/demo/basic.md index aaeb0361f1..d213ef2dc8 100644 --- a/components/back-top/demo/basic.md +++ b/components/back-top/demo/basic.md @@ -3,12 +3,15 @@ order: 0 title: 基本 --- -最简单的用法，demo 见右下角灰色按钮。 +最简单的用法。 ````jsx import { BackTop } from 'antd'; ReactDOM.render( - +
+ + 向下滚动后，见右下角灰色按钮 +
, mountNode); ```` diff --git a/components/back-top/demo/custom.md b/components/back-top/demo/custom.md index 4d52c24c73..88cc67b1f2 100644 --- a/components/back-top/demo/custom.md +++ b/components/back-top/demo/custom.md @@ -3,7 +3,7 @@ order: 1 title: 自定义样式 --- -可以自定义置顶按钮的样式，限制宽高: 40px * 40px。(右下角蓝色按钮) +可以自定义置顶按钮的样式，限制宽高：`40px * 40px`。 ````jsx import { BackTop } from 'antd'; @@ -11,20 +11,20 @@ import { BackTop } from 'antd'; const style = { height: 40, width: 40, - borderRadius: 3, + lineHeight: '40px', + borderRadius: 4, backgroundColor: '#57c5f7', color: '#fff', textAlign: 'center', fontSize: 20, }; -const onClick = (e) => { - console.log(e); -}; - ReactDOM.render( - -
UP
- +
+ +
UP
+ + 向下滚动后，见右下角蓝色按钮 +
, mountNode); ```` diff --git a/components/back-top/index.md b/components/back-top/index.md index 260d57b612..c6b2740794 100644 --- a/components/back-top/index.md +++ b/components/back-top/index.md @@ -5,17 +5,17 @@ type: Other english: BackTop --- -使用 `BackTop` 可以方便地回到顶部。 +使用置顶组件可以方便地回到页面顶部。 ## 何时使用 -当内容区域比较长，需要提供快速回到顶部的功能时。 +- 当页面内容区域比较长时； +- 当用户需要频繁返回顶部查看相关内容时。 ## API > 有默认样式，距离底部 `50px`，可覆盖。 - -> 自定义样式宽高有限制，不大于 40px * 40px。 +> 自定义样式宽高不大于 40px * 40px。 | 参数 | 说明 | 类型 | 默认值 | |-------------|----------------|--------------------|--------------| From 3e787112534a5a5ab80afc530edd71c659c96798 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 24 Jun 2016 14:05:56 +0800 Subject: [PATCH 7/7] fix typo --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0ee85e4a1b..082062b184 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -21,7 +21,7 @@ timeline: true - 修复 Tooltip、Popover、Popconfirm 设置 `onVisibleChange` 后失效的问题。[#2134](https://github.com/ant-design/ant-design/issues/2134) - 修复在 IE8 下 Checkbox 的勾样式变形的问题。[#2148](https://github.com/ant-design/ant-design/issues/2148) - 优化 Checkbox、Radio 失效状态的文字颜色。[#2114](https://github.com/ant-design/ant-design/issues/2114) -- - 优化 Checkbox、Radio 的默认边距过于拥挤的问题。[#2137](https://github.com/ant-design/ant-design/issues/2137) +- 优化 Checkbox、Radio 的默认边距过于拥挤的问题。[#2137](https://github.com/ant-design/ant-design/issues/2137) - 优化 Pagination 在暗色背景下的样式。[#2126](https://github.com/ant-design/ant-design/issues/2126) - 修复 Table 固定列时内容无法换行和高度对齐的问题，同时修复了一个 Chrome 下的表格内容错位问题。[#2130](https://github.com/ant-design/ant-design/issues/2130) - 修复一个 Table 的 `rowSelection` 设为 null 时可能导致报错的问题。[#2127](https://github.com/ant-design/ant-design/issues/2127)