From ff05904b54593177a016c5e5a7a6972445637ee4 Mon Sep 17 00:00:00 2001 From: detailyang Date: Thu, 25 Aug 2016 10:52:51 +0800 Subject: [PATCH 0001/2145] append slash on URI (#2834) [http://ant.design/components/cascader](http://ant.design/components/cascader) is 404 but [http://ant.design/components/cascader/](http://ant.design/components/cascader/) is good well --- components/select/demo/coordinate.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/select/demo/coordinate.md b/components/select/demo/coordinate.md index c706a77dc6..f37ef7a358 100644 --- a/components/select/demo/coordinate.md +++ b/components/select/demo/coordinate.md @@ -5,7 +5,7 @@ title: 联动 省市联动是典型的例子。 -推荐使用 [Cascader](/components/cascader) 组件。 +推荐使用 [Cascader](/components/cascader/) 组件。 ````jsx import { Select } from 'antd'; From f8294e2332fb931e1d089282b34c054799c280aa Mon Sep 17 00:00:00 2001 From: feng zhi hao Date: Thu, 25 Aug 2016 20:44:28 +0800 Subject: [PATCH 0002/2145] =?UTF-8?q?=E8=A1=A5=E5=85=85index.d.ts=E4=B8=AD?= =?UTF-8?q?notification=E5=92=8CTable=E7=BC=BA=E5=B0=91=E7=9A=84=E5=A3=B0?= =?UTF-8?q?=E6=98=8E=20(#2842)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 补充index.d.ts中notification缺少的声明 * 补充index.d.ts中Table缺少的声明 --- index.d.ts | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/index.d.ts b/index.d.ts index fc8e724c57..04b00bf511 100644 --- a/index.d.ts +++ b/index.d.ts @@ -1006,9 +1006,12 @@ export const notification:{ warn:NotificationFunc close:(key:string) => void destroy:() => void + open:NotificationFunc config:(options:{ /** 消息距离顶部的位置*/ top:number + /** 默认自动关闭延时，单位秒 */ + duration:number }) => void } @@ -1481,10 +1484,14 @@ interface TableProps { columns:Columns, /** 表格行 key 的取值*/ rowKey?:(record:any, index:number) => string, + /** 表格行的类名 */ + rowClassName?:(record:any, index) => string, /** 额外的展开行*/ expandedRowRender?:Function, /** 默认展开的行*/ defaultExpandedRowKeys?:Array, + /** 展开的行，控制属性 */ + expandedRowKeys?:Array, /** 分页、排序、筛选变化时触发*/ onChange?:(pagination:Object, filters:any, sorter:any) => void, /** 页面是否加载中*/ @@ -1503,8 +1510,13 @@ interface TableProps { showHeader?:boolean, /** 表格底部自定义渲染函数*/ footer?:(currentPageData:Object) => void, - - style?:React.CSSProperties + /** 表格头部自定义渲染函数 */ + title?:(currentPageData:Object) => void, + /** 横向或纵向支持滚动，也可用于指定滚动区域的宽高度：{{ x: true, y: 300 }} */ + scroll?:Object, + /** 表格body的样式 */ + bodyStyle?:React.CSSProperties, + style?:React.CSSProperties, } /** * #Table From fb66e9c7e32e6c54a0c435b561ada0da51253161 Mon Sep 17 00:00:00 2001 From: Liu Yang Date: Thu, 25 Aug 2016 21:12:23 +0800 Subject: [PATCH 0003/2145] apply sorter for children --- components/table/Table.jsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/components/table/Table.jsx b/components/table/Table.jsx index fdd7a35d5a..c143fc6455 100644 --- a/components/table/Table.jsx +++ b/components/table/Table.jsx @@ -719,12 +719,16 @@ export default class Table extends React.Component { getLocalData() { const state = this.state; - let data = this.props.dataSource || []; + const { dataSource, childrenColumnName } = this.props; + let data = dataSource || []; // 优化本地排序 data = data.slice(0); const sorterFn = this.getSorterFn(); if (sorterFn) { - data = data.sort(sorterFn); + data = data.sort(sorterFn).map(dataItem => (dataItem[childrenColumnName] ? { + ...dataItem, + [childrenColumnName]: dataItem[childrenColumnName].sort(sorterFn), + } : dataItem)); } // 筛选 if (state.filters) { From 6e94e7b7a42e297373f1a3aeb444f0c4e33f6f1b Mon Sep 17 00:00:00 2001 From: Winsky Date: Fri, 26 Aug 2016 14:42:41 +0800 Subject: [PATCH 0004/2145] [docs] translate menu,popover,popconfirm (#2713) --- components/menu/demo/horizontal.md | 10 ++- components/menu/demo/sider-current.md | 10 ++- components/menu/demo/sider.md | 10 ++- components/menu/demo/switch-mode.md | 10 ++- components/menu/demo/theme.md | 10 ++- components/menu/demo/vertical.md | 10 ++- components/menu/index.en-US.md | 69 +++++++++++++++++++ components/menu/{index.md => index.zh-CN.md} | 0 components/popconfirm/demo/basic.md | 10 ++- components/popconfirm/demo/dynamic-trigger.md | 10 ++- components/popconfirm/demo/locale.md | 10 ++- components/popconfirm/demo/placement.md | 10 ++- components/popconfirm/index.en-US.md | 27 ++++++++ .../popconfirm/{index.md => index.zh-CN.md} | 0 components/popover/demo/basic.md | 10 ++- components/popover/demo/control.md | 10 ++- components/popover/demo/placement.md | 10 ++- components/popover/demo/triggerType.md | 10 ++- components/popover/index.en-US.md | 29 ++++++++ .../popover/{index.md => index.zh-CN.md} | 0 20 files changed, 251 insertions(+), 14 deletions(-) mode change 100644 => 100755 components/menu/demo/horizontal.md mode change 100644 => 100755 components/menu/demo/sider-current.md mode change 100644 => 100755 components/menu/demo/sider.md mode change 100644 => 100755 components/menu/demo/switch-mode.md mode change 100644 => 100755 components/menu/demo/theme.md mode change 100644 => 100755 components/menu/demo/vertical.md create mode 100644 components/menu/index.en-US.md rename components/menu/{index.md => index.zh-CN.md} (100%) mode change 100644 => 100755 components/popconfirm/demo/basic.md mode change 100644 => 100755 components/popconfirm/demo/dynamic-trigger.md mode change 100644 => 100755 components/popconfirm/demo/locale.md mode change 100644 => 100755 components/popconfirm/demo/placement.md create mode 100644 components/popconfirm/index.en-US.md rename components/popconfirm/{index.md => index.zh-CN.md} (100%) mode change 100644 => 100755 components/popover/demo/basic.md mode change 100644 => 100755 components/popover/demo/control.md mode change 100644 => 100755 components/popover/demo/placement.md mode change 100644 => 100755 components/popover/demo/triggerType.md create mode 100644 components/popover/index.en-US.md rename components/popover/{index.md => index.zh-CN.md} (100%) diff --git a/components/menu/demo/horizontal.md b/components/menu/demo/horizontal.md old mode 100644 new mode 100755 index 68966cc171..afa9234976 --- a/components/menu/demo/horizontal.md +++ b/components/menu/demo/horizontal.md @@ -1,10 +1,18 @@ --- order: 0 -title: 顶部导航 +title: + zh-CN: 顶部导航 + en-US: Top Navigation --- +## zh-CN + 水平的顶部导航菜单。 +## en-US + +Horizontal top navigation menu. + ````jsx import { Menu, Icon } from 'antd'; const SubMenu = Menu.SubMenu; diff --git a/components/menu/demo/sider-current.md b/components/menu/demo/sider-current.md old mode 100644 new mode 100755 index 21d03aca97..64acffcab7 --- a/components/menu/demo/sider-current.md +++ b/components/menu/demo/sider-current.md @@ -1,10 +1,18 @@ --- order: 2 -title: 只展开当前父级菜单 +title: + zh−CN: 只展开当前父级菜单 + en-US: only to open the current parant menu --- +## zh-CN + 点击菜单，收起其他展开的所有菜单，保持菜单聚焦简洁。 +## en-US + +Click the menu and you will see that all the other menus gets collapsed to keep the entire menu compact. + ````jsx import { Menu, Icon } from 'antd'; const SubMenu = Menu.SubMenu; diff --git a/components/menu/demo/sider.md b/components/menu/demo/sider.md old mode 100644 new mode 100755 index 326a0ec252..36900be4e1 --- a/components/menu/demo/sider.md +++ b/components/menu/demo/sider.md @@ -1,10 +1,18 @@ --- order: 1 -title: 内嵌菜单 +title: + zh-CN: 内嵌菜单 + en-US: Vertical menu with inline children --- +## zh-CN + 垂直菜单，子菜单内嵌在菜单区域。 +## en-US + +Vertical menu with inline submenus. + ````jsx import { Menu, Icon } from 'antd'; const SubMenu = Menu.SubMenu; diff --git a/components/menu/demo/switch-mode.md b/components/menu/demo/switch-mode.md old mode 100644 new mode 100755 index ad49a9d803..daa16d2e82 --- a/components/menu/demo/switch-mode.md +++ b/components/menu/demo/switch-mode.md @@ -1,10 +1,18 @@ --- order: 5 -title: 切换菜单类型 +title: + zh-CN: 切换菜单类型 + en-US: Switch the menu type --- +## zh-CN + 展示动态切换模式。 +## en-US + +Show the dynamic switching mode (between 'inline' and 'vertical'). + ````jsx import { Menu, Icon, Switch } from 'antd'; const SubMenu = Menu.SubMenu; diff --git a/components/menu/demo/theme.md b/components/menu/demo/theme.md old mode 100644 new mode 100755 index 63abee71a7..173f9a19c8 --- a/components/menu/demo/theme.md +++ b/components/menu/demo/theme.md @@ -1,10 +1,18 @@ --- order: 4 -title: 主题 +title: + zh-CN: 主题 + en-US: Menu Themes --- +## zh-CN + 内建了两套主题 `light|dark`，默认 `light`。 +## en-US + +There are two built-in themes: 'light' and 'dark'. The default value is 'light'. + ````jsx import { Menu, Icon, Switch } from 'antd'; const SubMenu = Menu.SubMenu; diff --git a/components/menu/demo/vertical.md b/components/menu/demo/vertical.md old mode 100644 new mode 100755 index 859a7d1523..5c355833af --- a/components/menu/demo/vertical.md +++ b/components/menu/demo/vertical.md @@ -1,10 +1,18 @@ --- order: 3 -title: 垂直菜单 +title: + zh-CN: 垂直菜单 + en-US: Vertical menu --- +## zh-CN: + 子菜单是弹出的形式。 +## en-US: + +Submenus open as pop-ups. + ````jsx import { Menu, Icon } from 'antd'; const SubMenu = Menu.SubMenu; diff --git a/components/menu/index.en-US.md b/components/menu/index.en-US.md new file mode 100644 index 0000000000..639587ba6b --- /dev/null +++ b/components/menu/index.en-US.md @@ -0,0 +1,69 @@ +--- +category: Components +chinese: 导航菜单 +cols: 1 +type: Navigation +english: Menu +--- + +Menu list of Navigation. + +## When to use + +Navigation menu is important for a website, it helps users jump from one site section to another quickly. Mostly, it includes top navigation and side navigation. Top navigation provides all the category and functions of the website. Side navigation provides the Multi-level structure of the website. + +More layout and samples: [layout](/docs/spec/layout). + +```html + + Menu + + SubMenuItem + + +``` + +## API + +### Menu props + +| Param | Description | Type | Default value | +|----------|---------------|----------|--------------| +| theme | color of the theme | String: `light` `dark` | `light` | +| mode | type of the menu; vertical, horizontal, and inline modes are supported | String: vertical horizontal inline | vertical | +| selectedKeys | array with the keys of currently selected menu items | Array | | +| defaultSelectedKeys | array with the keys of default selected menu items | Array | | +| openKeys | array with the keys of currently opened sub menus | Array | | +| defaultOpenKeys | array with the keys of default opened sub menus | | | +| onOpen | callback of the opened sub menu | Function({ key, item, keyPath }) | | +| onClose | callback of the closed sub menu | Function({ key, item, keyPath }) | | +| onSelect | callback of the selected item | Function({ item, key, selectedKeys }) | none | +| onDeselect | callback of the deselected item, only supported for multiple mode | Function({ item, key, selectedKeys }) | - | +| onClick | callback of the clicked menu item, params: {item, key, keyPath} | function | - | +| style | style of the root node | Object | | + +> More options in [rc-menu](https://github.com/react-component/menu#api) + +### Menu.Item props + +| Param | Description | Type | Default value | +|----------|----------------|----------|--------------| +| disabled | disabled or not | Boolean | false | +| key | unique id of the menu item | String | | + +### Menu.SubMenu props + +| Param | Description | Type | Default value | +|----------|----------------|----------|--------------| +| disabled | disabled or not | Boolean | false | +| key | unique id of the menu item | String | | +| title | title of the sub menu | String or React.Element | | +| children | sub menus or sub menu items | (MenuItem or SubMenu)[] | | +| onTitleClick | callback of the clicked sub menu title | Function({ eventKey, domEvent }) | | + +### Menu.ItemGroup props + +| Param | Description | Type | Default value | +|----------|----------------|----------|--------------| +| title | title of the group | String or React.Element | | +| children | sub menu items | MenuItem[] | | diff --git a/components/menu/index.md b/components/menu/index.zh-CN.md similarity index 100% rename from components/menu/index.md rename to components/menu/index.zh-CN.md diff --git a/components/popconfirm/demo/basic.md b/components/popconfirm/demo/basic.md old mode 100644 new mode 100755 index 41a3267274..62d6ad8ee9 --- a/components/popconfirm/demo/basic.md +++ b/components/popconfirm/demo/basic.md @@ -1,10 +1,18 @@ --- order: 0 -title: 基本 +title: + zh-CN: 基本 + en-US: Basic --- +## zh-CN + 最简单的用法。 +## en-US + +The basic example. + ````jsx import { Popconfirm, message } from 'antd'; diff --git a/components/popconfirm/demo/dynamic-trigger.md b/components/popconfirm/demo/dynamic-trigger.md old mode 100644 new mode 100755 index a5770b77f8..6a3691d854 --- a/components/popconfirm/demo/dynamic-trigger.md +++ b/components/popconfirm/demo/dynamic-trigger.md @@ -1,10 +1,18 @@ --- order: 3 -title: 条件触发 +title: + zh-CN: 条件触发 + en-US: Conditional trigger --- +## zh-CN + 可以判断是否需要弹出。 +## en-US + +Make it pop up under some conditions. + ````jsx import { Popconfirm, Switch, message } from 'antd'; diff --git a/components/popconfirm/demo/locale.md b/components/popconfirm/demo/locale.md old mode 100644 new mode 100755 index 08c59a32f8..82c31dc085 --- a/components/popconfirm/demo/locale.md +++ b/components/popconfirm/demo/locale.md @@ -1,10 +1,18 @@ --- order: 2 -title: 国际化 +title: + zh-CN: 国际化 + en-US: Internationalization --- +## zh-CN + 设置 `okText` `cancelText` 以自定义按钮文字。 +## en-US + +Set `okText` and `cancelText` props to customise the buttons' labels. + ````jsx import { Popconfirm } from 'antd'; diff --git a/components/popconfirm/demo/placement.md b/components/popconfirm/demo/placement.md old mode 100644 new mode 100755 index a67711c832..50a5467b92 --- a/components/popconfirm/demo/placement.md +++ b/components/popconfirm/demo/placement.md @@ -1,10 +1,18 @@ --- order: 1 -title: 位置 +title: + zh-CN: 位置 + en-US: Placement --- +## zh-CN + 位置有十二个方向。 +## en-US + +There are 12 `placement` options available. + ````jsx import { Popconfirm, message, Button } from 'antd'; diff --git a/components/popconfirm/index.en-US.md b/components/popconfirm/index.en-US.md new file mode 100644 index 0000000000..4426862e99 --- /dev/null +++ b/components/popconfirm/index.en-US.md @@ -0,0 +1,27 @@ +--- +category: Components +chinese: 气泡确认框 +type: Views +english: Popconfirm +--- + +A simple and compact confirmation dialog of an action. + +## When to use + +A simple and compact dialog used for asking an user confirmation. + +The difference with `confirm` is more lightweight than the static popped full-screen confirm modal. + +## API + +| Param | Description | Type | Default value | +|-----------|------------------------------------------|---------------|--------| +| placement | position of the confirmation box, optional `top/left/right/bottom` `topLeft/topRight/bottomLeft/bottomRight` `leftTop/leftBottom/rightTop/rightBottom` | string | top | +| title | title of the confirmation box | React.Element | none | +| onConfirm | callback of confirmation | function | none | +| onCancel | callback of cancel | function | none | +| onVisibleChange | callback of the visible attribute changed | function(visible) | none | +| okText | text of the confirmation button | String | Confirm | +| cancelText| text of the cancel button | String | Cancel | +| openClassName | class name of the trigger, using for highlighting the trigger while triggered | string | ant-popover-open | diff --git a/components/popconfirm/index.md b/components/popconfirm/index.zh-CN.md similarity index 100% rename from components/popconfirm/index.md rename to components/popconfirm/index.zh-CN.md diff --git a/components/popover/demo/basic.md b/components/popover/demo/basic.md old mode 100644 new mode 100755 index 7f89a7611f..7b61d9943d --- a/components/popover/demo/basic.md +++ b/components/popover/demo/basic.md @@ -1,10 +1,18 @@ --- order: 0 -title: 基本 +title: + zh-CN: 基本 + en-US: Basic --- +## zh-CN + 最简单的用法，浮层的大小由内容区域决定。 +## en-US + +The most basic example. The size of the floating layer depends on the contents region. + ````jsx import { Popover, Button } from 'antd'; diff --git a/components/popover/demo/control.md b/components/popover/demo/control.md old mode 100644 new mode 100755 index d25e85f5b4..7f1e57e9f0 --- a/components/popover/demo/control.md +++ b/components/popover/demo/control.md @@ -1,10 +1,18 @@ --- order: 3 -title: 从浮层内关闭 +title: + zh-CN: 从浮层内关闭 + en-US: Controlling the close of the dialog --- +## zh-CN + 使用 `visible` 属性控制浮层显示。 +## en-US + +Use `visible` prop to control the display of the card. + ````jsx import { Popover, Button } from 'antd'; diff --git a/components/popover/demo/placement.md b/components/popover/demo/placement.md old mode 100644 new mode 100755 index 123f66e030..5b7f1fa881 --- a/components/popover/demo/placement.md +++ b/components/popover/demo/placement.md @@ -1,10 +1,18 @@ --- order: 1 -title: 位置 +title: + zh-CN: 位置 + en-US: Placement --- +## zh-CN + 位置有十二个方向。 +## en-US + +There are 12 `placement` options available. + ````jsx import { Popover, Button } from 'antd'; diff --git a/components/popover/demo/triggerType.md b/components/popover/demo/triggerType.md old mode 100644 new mode 100755 index e8abd85673..c7cf84bf88 --- a/components/popover/demo/triggerType.md +++ b/components/popover/demo/triggerType.md @@ -1,10 +1,18 @@ --- order: 2 -title: 三种触发方式 +title: + zh-CN: 三种触发方式 + en-US: Three ways to trigger --- +## zh-CN + 鼠标移入、聚集、点击。 +## en-US + +Mouse to click, focus and move in. + ````jsx import { Popover, Button } from 'antd'; diff --git a/components/popover/index.en-US.md b/components/popover/index.en-US.md new file mode 100644 index 0000000000..7b03369716 --- /dev/null +++ b/components/popover/index.en-US.md @@ -0,0 +1,29 @@ +--- +category: Components +chinese: 气泡卡片 +type: Views +english: Popover +--- + +The floating card popped by clicking or hovering. + +## When to use + +A simple and pop-up menu to provide more information and operations of an action. + +Comparing with `Tooltip`, besides information `Popover` card can also provide action elements like links and buttons. + +## API + +| Param | Description | Type | Default value | +|-----------|------------------------------------------|---------------|--------| +| trigger | triggering mode: can be hover, focus, or click. | string | hover | +| placement | position of the card，optional `top/left/right/bottom` `topLeft/topRight/bottomLeft/bottomRight` `leftTop/leftBottom/rightTop/rightBottom` | string | top | +| title | title of the card | React.Element | none | +| content | content of the card | React.Element | none | +| overlayClassName | class name of the card | string | none | +| overlayStyle | style of the card | object | none | +| visible | make the float card visible or not | boolean | false | +| onVisibleChange | callback of the visible attribute changed | function | none | +| getTooltipContainer | rendered to the root of the menu. Default rendered to the body dom. If gets any problem of the menu while scrolling. Try to make the root the dom scrolled, and make it position relative. [Sample](http://codepen.io/anon/pen/xVBOVQ?editors=001) | Function(triggerNode) | () => document.body | +| openClassName | class name of the trigger, using for highlighting the trigger while triggered | string | ant-popover-open | diff --git a/components/popover/index.md b/components/popover/index.zh-CN.md similarity index 100% rename from components/popover/index.md rename to components/popover/index.zh-CN.md From 96c9c11b5570fc12fa8dbaa580a630c2df279e24 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 26 Aug 2016 15:04:19 +0800 Subject: [PATCH 0005/2145] Make children sort recursively --- components/table/Table.jsx | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/components/table/Table.jsx b/components/table/Table.jsx index c143fc6455..542f3b8a83 100644 --- a/components/table/Table.jsx +++ b/components/table/Table.jsx @@ -59,6 +59,7 @@ export default class Table extends React.Component { onChange: noop, locale: {}, rowKey: 'key', + childrenColumnName: 'children', } static contextTypes = { @@ -717,18 +718,23 @@ export default class Table extends React.Component { return flatArray(this.getCurrentPageData()); } + recursiveSort(data, sorterFn) { + const { childrenColumnName } = this.props; + return data.sort(sorterFn).map(item => (item[childrenColumnName] ? { + ...item, + [childrenColumnName]: this.recursiveSort(item[childrenColumnName], sorterFn), + } : item)); + } + getLocalData() { const state = this.state; - const { dataSource, childrenColumnName } = this.props; + const { dataSource } = this.props; let data = dataSource || []; // 优化本地排序 data = data.slice(0); const sorterFn = this.getSorterFn(); if (sorterFn) { - data = data.sort(sorterFn).map(dataItem => (dataItem[childrenColumnName] ? { - ...dataItem, - [childrenColumnName]: dataItem[childrenColumnName].sort(sorterFn), - } : dataItem)); + data = this.recursiveSort(data, sorterFn); } // 筛选 if (state.filters) { From b2349facab5c2f559fce89dfebe50423d556f2fd Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Fri, 26 Aug 2016 15:07:46 +0800 Subject: [PATCH 0006/2145] docs: fix docs' format --- components/menu/demo/sider-current.md | 4 ++-- components/menu/demo/vertical.md | 4 ++-- components/menu/index.en-US.md | 3 +-- components/menu/index.zh-CN.md | 4 ++-- components/popconfirm/index.en-US.md | 3 +-- components/popover/index.en-US.md | 3 +-- 6 files changed, 9 insertions(+), 12 deletions(-) diff --git a/components/menu/demo/sider-current.md b/components/menu/demo/sider-current.md index 64acffcab7..84ffd21c79 100755 --- a/components/menu/demo/sider-current.md +++ b/components/menu/demo/sider-current.md @@ -1,8 +1,8 @@ --- order: 2 title: - zh−CN: 只展开当前父级菜单 - en-US: only to open the current parant menu + zh-CN: 只展开当前父级菜单 + en-US: Only to open the current parant menu --- ## zh-CN diff --git a/components/menu/demo/vertical.md b/components/menu/demo/vertical.md index 5c355833af..e4ee80bdf9 100755 --- a/components/menu/demo/vertical.md +++ b/components/menu/demo/vertical.md @@ -5,11 +5,11 @@ title: en-US: Vertical menu --- -## zh-CN: +## zh-CN 子菜单是弹出的形式。 -## en-US: +## en-US Submenus open as pop-ups. diff --git a/components/menu/index.en-US.md b/components/menu/index.en-US.md index 639587ba6b..f82e4182a3 100644 --- a/components/menu/index.en-US.md +++ b/components/menu/index.en-US.md @@ -1,9 +1,8 @@ --- category: Components -chinese: 导航菜单 cols: 1 type: Navigation -english: Menu +title: Menu --- Menu list of Navigation. diff --git a/components/menu/index.zh-CN.md b/components/menu/index.zh-CN.md index 53735b61cb..296f67355a 100644 --- a/components/menu/index.zh-CN.md +++ b/components/menu/index.zh-CN.md @@ -1,9 +1,9 @@ --- category: Components -chinese: 导航菜单 cols: 1 type: Navigation -english: Menu +title: Menu +subtitle: 导航菜单 --- 为页面和功能提供导航的菜单列表。 diff --git a/components/popconfirm/index.en-US.md b/components/popconfirm/index.en-US.md index 4426862e99..e49cfbc4f1 100644 --- a/components/popconfirm/index.en-US.md +++ b/components/popconfirm/index.en-US.md @@ -1,8 +1,7 @@ --- category: Components -chinese: 气泡确认框 type: Views -english: Popconfirm +title: Popconfirm --- A simple and compact confirmation dialog of an action. diff --git a/components/popover/index.en-US.md b/components/popover/index.en-US.md index 7b03369716..fb38fb1319 100644 --- a/components/popover/index.en-US.md +++ b/components/popover/index.en-US.md @@ -1,6 +1,5 @@ --- category: Components -chinese: 气泡卡片 type: Views english: Popover --- @@ -9,7 +8,7 @@ The floating card popped by clicking or hovering. ## When to use -A simple and pop-up menu to provide more information and operations of an action. +A simple popup menu to provide extra information or operations. Comparing with `Tooltip`, besides information `Popover` card can also provide action elements like links and buttons. From cc92f36c3dc854874bdde4ab6072b1d4497db133 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Fri, 26 Aug 2016 15:19:40 +0800 Subject: [PATCH 0007/2145] docs: update title --- components/menu/demo/sider-current.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/menu/demo/sider-current.md b/components/menu/demo/sider-current.md index 84ffd21c79..98fec46b86 100755 --- a/components/menu/demo/sider-current.md +++ b/components/menu/demo/sider-current.md @@ -2,7 +2,7 @@ order: 2 title: zh-CN: 只展开当前父级菜单 - en-US: Only to open the current parant menu + en-US: Open current submenu only --- ## zh-CN From 4bfe8cbeb177a40eddd483474fefe0beebbea18f Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Fri, 26 Aug 2016 15:38:29 +0800 Subject: [PATCH 0008/2145] chore: update index.js, close: #1846 (#2838) --- index.js | 35 +++++------------------------------ 1 file changed, 5 insertions(+), 30 deletions(-) diff --git a/index.js b/index.js index 4898a3ab53..b34c0eaa3b 100644 --- a/index.js +++ b/index.js @@ -1,34 +1,9 @@ -/* eslint no-console:0 */ // this file is not used if use https://github.com/ant-design/babel-plugin-antd -function camelCase(name) { - return name.charAt(0).toUpperCase() + - name.slice(1).replace(/-(\w)/g, (m, n) => { - return n.toUpperCase(); - }); -} +import warn from 'rc-util/lib/warn'; +import * as antd from './components'; -const req = require.context('./components', true, /^\.\/[^_][\w-]+\/(style\/)?index\.tsx?$/); +warn('You are using prebuilt antd, ' + + 'please use https://github.com/ant-design/babel-plugin-antd to reduce app bundle size.'); -req.keys().forEach((mod) => { - let v = req(mod); - if (v && v.default) { - v = v.default; - } - const match = mod.match(/^\.\/([^_][\w-]+)\/index\.tsx?$/); - if (match && match[1]) { - if (match[1] === 'message' || match[1] === 'notification') { - // message & notification should not be capitalized - exports[match[1]] = v; - } else { - exports[camelCase(match[1])] = v; - } - } -}); - -if (process.env.NODE_ENV !== 'production') { - if (typeof console !== 'undefined' && console.warn) { - console.warn(`You are using prebuilt antd, -please use https://github.com/ant-design/babel-plugin-antd to reduce app bundle size.`); - } -} +export default antd; From f76a6bf107b319bb5c84158ae246477b141b3658 Mon Sep 17 00:00:00 2001 From: afc163 Date: Sun, 28 Aug 2016 17:16:43 +0800 Subject: [PATCH 0009/2145] Improve Alert and notification style --- components/alert/style/index.less | 25 +++++++++-------- components/notification/index.tsx | 2 +- components/notification/style/index.less | 34 +++++++++++++++--------- components/style/themes/default.less | 1 + 4 files changed, 35 insertions(+), 27 deletions(-) diff --git a/components/alert/style/index.less b/components/alert/style/index.less index 56660b1760..a9ad8a891e 100644 --- a/components/alert/style/index.less +++ b/components/alert/style/index.less @@ -7,7 +7,7 @@ padding: 8px 48px 8px 38px; border-radius: @border-radius-base; color: @text-color; - font-size: 12px; + font-size: @font-size-base; line-height: 16px; margin-bottom: 10px; @@ -23,8 +23,7 @@ } &-description { - font-size: 12px; - color: @legend-color; + font-size: @font-size-base; line-height: 21px; display: none; } @@ -62,7 +61,7 @@ } &-close-icon { - font-size: 12px; + font-size: @font-size-base; position: absolute; right: 16px; top: 10px; @@ -75,7 +74,7 @@ color: @legend-color; transition: color .3s ease; &:hover { - color: #444; + color: #404040; } } } @@ -86,7 +85,7 @@ } &-with-description { - padding: 16px 16px 16px 69px; + padding: 16px 16px 16px 60px; position: relative; border-radius: @border-radius-base; margin-bottom: 10px; @@ -100,24 +99,24 @@ &-with-description &-icon { position: absolute; - top: 50%; - left: 24px; - margin-top: -15px; - font-size: 29px; + top: 16px; + left: 20px; + font-size: 24px; } &-with-description &-close-icon { position: absolute; - top: 17px; + top: 16px; right: 16px; cursor: pointer; - font-size: 12px; + font-size: @font-size-base; } &-with-description &-message { font-size: 14px; - color: @text-color; + color: @heading-color; display: block; + margin-bottom: 4px; } &-with-description &-description { diff --git a/components/notification/index.tsx b/components/notification/index.tsx index 86b6b352eb..ff9f242dc0 100644 --- a/components/notification/index.tsx +++ b/components/notification/index.tsx @@ -4,7 +4,7 @@ import Icon from '../icon'; import assign from 'object-assign'; let defaultTop = 24; let notificationInstance; -let defaultDuration = 4.5; +let defaultDuration = 45; export interface ArgsProps { /** 通知提醒标题，必选 */ diff --git a/components/notification/style/index.less b/components/notification/style/index.less index e5172e6840..c5a4888108 100644 --- a/components/notification/style/index.less +++ b/components/notification/style/index.less @@ -25,34 +25,39 @@ &-message { font-size: 14px; - color: @text-color; + color: @heading-color; margin-bottom: 4px; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + line-height: 20px; } &-description { font-size: @font-size-base; - color: @legend-color; } - &-with-icon &-message { + &-closable &-message, + &-closable &-description { + padding-right: 24px; + } + + &-with-icon &-message { font-size: 14px; - color: @text-color; - margin-left: 51px; + margin-left: 48px; margin-bottom: 4px; } - &-with-icon &-description { - margin-left: 51px; + &-with-icon &-description { + margin-left: 48px; font-size: @font-size-base; - color: @legend-color; } &-icon { position: absolute; left: 16px; - top: 50%; - margin-top: -17px; - font-size: 34px; + top: 17px; + font-size: 32px; &-success { color: @success-color; @@ -69,7 +74,7 @@ } &-close-x:after { - font-size: 12px; + font-size: @font-size-base; content: "\e62d"; font-family: "anticon"; cursor: pointer; @@ -79,8 +84,11 @@ position: absolute; right: 16px; top: 10px; - color: #999; + color: @legend-color; outline: none; + &:hover { + color: #404040; + } } &-btn { diff --git a/components/style/themes/default.less b/components/style/themes/default.less index 8bd5980024..6759d03115 100644 --- a/components/style/themes/default.less +++ b/components/style/themes/default.less @@ -11,6 +11,7 @@ @font-family : "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif; @code-family : Consolas,Menlo,Courier,monospace; @text-color : #666; +@heading-color : #404040; @font-size-base : 12px; @line-height-base : 1.5; @line-height-computed : floor((@font-size-base * @line-height-base)); From 59d7a7ee2df7b70e2cdaa998cb0de8723e0153a9 Mon Sep 17 00:00:00 2001 From: afc163 Date: Sun, 28 Aug 2016 17:45:27 +0800 Subject: [PATCH 0010/2145] Support customize the icon for Notification --- components/notification/demo/basic.md | 6 ++--- components/notification/demo/custom-icon.md | 30 +++++++++++++++++++++ components/notification/demo/duration.md | 6 ++--- components/notification/demo/with-btn.md | 14 +++++----- components/notification/demo/with-icon.md | 20 +++++++------- components/notification/index.en-US.md | 15 ++++++----- components/notification/index.tsx | 26 +++++++++++------- components/notification/index.zh-CN.md | 11 ++++---- components/notification/style/index.less | 4 +-- 9 files changed, 84 insertions(+), 48 deletions(-) create mode 100644 components/notification/demo/custom-icon.md diff --git a/components/notification/demo/basic.md b/components/notification/demo/basic.md index 12adc6c994..a7b6b9d931 100644 --- a/components/notification/demo/basic.md +++ b/components/notification/demo/basic.md @@ -1,6 +1,6 @@ --- order: 0 -title: +title: zh-CN: 基本 en-US: Basic --- @@ -18,8 +18,8 @@ import { Button, notification } from 'antd'; const openNotification = function () { notification.open({ - message: 'This is the title', - description: 'This is the content of the notification.This is the content of the notification.This is the content of the notification.', + message: 'Notification Title', + description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.', }); }; diff --git a/components/notification/demo/custom-icon.md b/components/notification/demo/custom-icon.md new file mode 100644 index 0000000000..3957ac76a2 --- /dev/null +++ b/components/notification/demo/custom-icon.md @@ -0,0 +1,30 @@ +--- +order: 4 +title: + zh-CN: 自定义图标 + en-US: Customized Icon +--- + +## zh-CN + +图标可以被自定义。 + +## en-US + +The icon can be customized to any react node. + +````jsx +import { Button, notification, Icon } from 'antd'; + +const openNotification = function () { + notification.open({ + message: 'Notification Title', + description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.', + icon: , + }); +}; + +ReactDOM.render( + +, mountNode); +```` diff --git a/components/notification/demo/duration.md b/components/notification/demo/duration.md index b8a2dc5e50..6f4a7b54c1 100644 --- a/components/notification/demo/duration.md +++ b/components/notification/demo/duration.md @@ -1,6 +1,6 @@ --- order: 1 -title: +title: zh-CN: 自动关闭的延时 en-US: Duration after which the notification box is closed --- @@ -20,8 +20,8 @@ import { Button, notification } from 'antd'; const openNotification = function () { const args = { - message: 'This is the title', - description: 'I will never close automatically.I will be close automatically.I will never close automatically.', + message: 'Notification Title', + description: 'I will never close automatically. I will be close automatically. I will never close automatically.', duration: 0, }; notification.open(args); diff --git a/components/notification/demo/with-btn.md b/components/notification/demo/with-btn.md index f5fc774f75..60117d7e1c 100644 --- a/components/notification/demo/with-btn.md +++ b/components/notification/demo/with-btn.md @@ -1,8 +1,8 @@ --- -order: 4 -title: - zh-CN: 自定义 - en-US: Custom clase button and handler +order: 3 +title: + zh-CN: 自定义按钮 + en-US: Custom close button --- ## zh-CN @@ -28,12 +28,12 @@ const openNotification = function () { }; const btn = ( ); notification.open({ - message: 'This is the title', - description: 'A function will be be called after the notification is closed(automatically after the "duration" time of manually).', + message: 'Notification Title', + description: 'A function will be be called after the notification is closed (automatically after the "duration" time of manually).', btn, key, onClose: close, diff --git a/components/notification/demo/with-icon.md b/components/notification/demo/with-icon.md index 454f86155b..9b4c3a494d 100644 --- a/components/notification/demo/with-icon.md +++ b/components/notification/demo/with-icon.md @@ -1,8 +1,8 @@ --- order: 2 -title: - zh-CN: 带有Icon的通知提醒框 - en-US: A notification box with a icon +title: + zh-CN: 带有图标的通知提醒框 + en-US: Notification with icon --- ## zh-CN @@ -16,14 +16,12 @@ A notification box with a icon at the left side. ````jsx import { Button, notification } from 'antd'; -const openNotificationWithIcon = function (type) { - return function () { - notification[type]({ - message: 'This is the title', - description: 'This is the content of the notification.This is the content of the notification.This is the content of the notification.', - }); - }; -}; +const openNotificationWithIcon = (type) => () => ( + notification[type]({ + message: 'Notification Title', + description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.', + }) +); ReactDOM.render(
diff --git a/components/notification/index.en-US.md b/components/notification/index.en-US.md index 7efabf7010..fe4883bf04 100644 --- a/components/notification/index.en-US.md +++ b/components/notification/index.en-US.md @@ -2,7 +2,7 @@ category: Components type: Views noinstant: true -english: Notification +english: -tification --- To display a notification message globally. @@ -30,15 +30,16 @@ The properties of config are as follows: | Property | Description | Type | Default | |----------- |--------------------------------------------- | ----------- |--------| -| message | The title of notification box (required) | React.Element or String | No | -| description | The content of notification box (required) | React.Element or String | No | -| btn | Custom close button | React.Element | No | -| key | The unique identifer of current notification | String | No | -| onClose | Specify a function that will be called after clicking the default close button | Function | No | +| message | The title of notification box (required) | React.Node | - | +| description | The content of notification box (required) | React.Node | - | +| btn | Customized close button | React.Node | - | +| icon | Customized icon | React.Node | _ | +| key | The unique identifer of current notification | String | - | +| onClose | Specify a function that will be called after clicking the default close button | Function | - | | duration | A notification box is closed after 4.5s by default. When specifying `duration` to null or 0, it will never be closed automatically | Number | 4.5 | -`Notification` also provide a global `config()` method that can be used for specifying the default options. Once this method is used, all the notification boxes +`-tification` also provide a global `config()` method that can be used for specifying the default options. Once this method is used, all the notification boxes will take into account these globally defined options before displaying. - `notification.config(options)` diff --git a/components/notification/index.tsx b/components/notification/index.tsx index ff9f242dc0..c33539bcd1 100644 --- a/components/notification/index.tsx +++ b/components/notification/index.tsx @@ -7,18 +7,13 @@ let notificationInstance; let defaultDuration = 45; export interface ArgsProps { - /** 通知提醒标题，必选 */ message: React.ReactNode; - /** 通知提醒内容，必选*/ description: React.ReactNode; - /** 自定义关闭按钮*/ btn?: React.ReactNode; - /** 当前通知唯一标志*/ key?: string; - /** 点击默认关闭按钮时触发的回调函数*/ onClose?: () => void; - /** 默认 4.5 秒后自动关闭，配置为 null 则不自动关闭*/ duration?: number; + icon?: React.ReactNode; } function getNotificationInstance() { @@ -46,7 +41,7 @@ function notice(args) { } let iconType = ''; - switch (args.icon) { + switch (args.type) { case 'success': iconType = 'check-circle-o'; break; @@ -63,10 +58,21 @@ function notice(args) { iconType = 'info-circle'; } + let iconNode; + if (args.icon) { + iconNode = ( + + {args.icon} + + ); + } else if (args.type) { + iconNode = ; + } + getNotificationInstance().notice({ content: ( -
- {args.icon ? : null} +
+ {iconNode}
{args.message}
{args.description}
{args.btn ? {args.btn} : null} @@ -106,7 +112,7 @@ const api = { }; ['success', 'info', 'warning', 'error'].forEach((type) => { - api[type] = (args: ArgsProps) => api.open(assign({}, args, { icon: type })); + api[type] = (args: ArgsProps) => api.open(assign({}, args, { type })); }); (api as any).warn = (api as any).warning; diff --git a/components/notification/index.zh-CN.md b/components/notification/index.zh-CN.md index 2834e328e9..30c72f419b 100644 --- a/components/notification/index.zh-CN.md +++ b/components/notification/index.zh-CN.md @@ -30,11 +30,12 @@ config 参数如下： | 参数 | 说明 | 类型 | 默认值 | |----------- |--------------------------------------------- | ----------- |--------| -| message | 通知提醒标题，必选 | React.Element or String | 无 | -| description | 通知提醒内容，必选 | React.Element or String | 无 | -| btn | 自定义关闭按钮 | React.Element | 无 | -| key | 当前通知唯一标志 | String | 无 | -| onClose | 点击默认关闭按钮时触发的回调函数 | Function | 无 | +| message | 通知提醒标题，必选 | React.Node | - | +| description | 通知提醒内容，必选 | React.Node | - | +| btn | 自定义关闭按钮 | React.Node | - | +| icon | 自定义图标 | React.Node | - | +| key | 当前通知唯一标志 | String | - | +| onClose | 点击默认关闭按钮时触发的回调函数 | Function | - | | duration | 默认 4.5 秒后自动关闭，配置为 null 则不自动关闭 | Number | 4.5 | 还提供了一个全局配置方法，在调用前提前配置，全局一次生效。 diff --git a/components/notification/style/index.less b/components/notification/style/index.less index c5a4888108..9d954e16c1 100644 --- a/components/notification/style/index.less +++ b/components/notification/style/index.less @@ -37,8 +37,7 @@ font-size: @font-size-base; } - &-closable &-message, - &-closable &-description { + &-closable &-message { padding-right: 24px; } @@ -58,6 +57,7 @@ left: 16px; top: 17px; font-size: 32px; + line-height: 32px; &-success { color: @success-color; From b6222f7c22f05f3653f19b0ab654a5c1c6764ace Mon Sep 17 00:00:00 2001 From: afc163 Date: Sun, 28 Aug 2016 17:47:06 +0800 Subject: [PATCH 0011/2145] fix lints --- components/calendar/demo/notice-calendar.md | 2 +- components/popconfirm/demo/dynamic-trigger.md | 2 +- components/select/demo/multiple.md | 4 ++-- components/select/demo/tags.md | 4 ++-- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/components/calendar/demo/notice-calendar.md b/components/calendar/demo/notice-calendar.md index f6edbb52ae..de63332f22 100644 --- a/components/calendar/demo/notice-calendar.md +++ b/components/calendar/demo/notice-calendar.md @@ -67,7 +67,7 @@ function getMonthData(value) { } function monthCellRender(value) { - let num = getMonthData(value); + const num = getMonthData(value); return num ?
{num}
待办事项数 diff --git a/components/popconfirm/demo/dynamic-trigger.md b/components/popconfirm/demo/dynamic-trigger.md index a5770b77f8..892d0c029f 100644 --- a/components/popconfirm/demo/dynamic-trigger.md +++ b/components/popconfirm/demo/dynamic-trigger.md @@ -8,7 +8,7 @@ title: 条件触发 ````jsx import { Popconfirm, Switch, message } from 'antd'; -let App = React.createClass({ +const App = React.createClass({ getInitialState() { return { visible: false, diff --git a/components/select/demo/multiple.md b/components/select/demo/multiple.md index 1f73f378ed..938b14c09b 100644 --- a/components/select/demo/multiple.md +++ b/components/select/demo/multiple.md @@ -1,6 +1,6 @@ --- order: 2 -title: +title: zh-CN: 多选 en-US: mutiple selection --- @@ -17,7 +17,7 @@ Multiple selection, selecting from existing items (scroll the menu). import { Select } from 'antd'; const Option = Select.Option; -let children = []; +const children = []; for (let i = 10; i < 36; i++) { children.push(); } diff --git a/components/select/demo/tags.md b/components/select/demo/tags.md index 9be289d92c..a1e2ee8da2 100644 --- a/components/select/demo/tags.md +++ b/components/select/demo/tags.md @@ -1,6 +1,6 @@ --- order: 3 -title: +title: zh-CN: 标签 en-US: Tags --- @@ -17,7 +17,7 @@ Select with tags, transform input to tag (scroll the menu) import { Select } from 'antd'; const Option = Select.Option; -let children = []; +const children = []; for (let i = 10; i < 36; i++) { children.push(); } From ced097577f499ee375685260ac33db429859d091 Mon Sep 17 00:00:00 2001 From: afc163 Date: Sun, 28 Aug 2016 17:52:14 +0800 Subject: [PATCH 0012/2145] fix deprecated lint warning --- .eslintrc.js | 1 + 1 file changed, 1 insertion(+) diff --git a/.eslintrc.js b/.eslintrc.js index 5e2173a4e2..b1033ea34b 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -36,6 +36,7 @@ const eslintrc = { 'max-len': 0, 'consistent-return': 0, 'no-redeclare': 0, + 'react/require-extension': 0, } }; From 34974923b88b4f9a3b7e11837c314a01e96ba087 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Mon, 29 Aug 2016 14:38:57 +0800 Subject: [PATCH 0013/2145] docs: remove dead code in demo --- components/mention/demo/custom-tag.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/components/mention/demo/custom-tag.md b/components/mention/demo/custom-tag.md index 83ec1e6b41..fc04ed79d7 100644 --- a/components/mention/demo/custom-tag.md +++ b/components/mention/demo/custom-tag.md @@ -29,7 +29,6 @@ const CustomNavMention = React.createClass({ getInitialState() { return { suggestions: [], - loading: false, }; }, onSearchChange(value) { @@ -44,11 +43,10 @@ const CustomNavMention = React.createClass({ this.setState({ suggestions }); }, render() { - const { suggestions, loading } = this.state; + const { suggestions } = this.state; return ( From 33939312e9ecd2d74d6534d1106b5a3267d7b028 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Mon, 29 Aug 2016 14:46:31 +0800 Subject: [PATCH 0014/2145] docs: fix demos --- components/mention/demo/avatar.md | 4 +--- components/mention/index.en-US.md | 2 +- components/mention/index.zh-CN.md | 2 +- 3 files changed, 3 insertions(+), 5 deletions(-) diff --git a/components/mention/demo/avatar.md b/components/mention/demo/avatar.md index d47adacf26..48352168eb 100644 --- a/components/mention/demo/avatar.md +++ b/components/mention/demo/avatar.md @@ -28,7 +28,6 @@ const CustomNavMention = React.createClass({ getInitialState() { return { suggestions: [], - loading: false, }; }, onSearchChange(value) { @@ -49,11 +48,10 @@ const CustomNavMention = React.createClass({ }); }, render() { - const { suggestions, loading } = this.state; + const { suggestions } = this.state; return ( diff --git a/components/mention/index.en-US.md b/components/mention/index.en-US.md index 061928c242..f329cc2168 100644 --- a/components/mention/index.en-US.md +++ b/components/mention/index.en-US.md @@ -35,7 +35,7 @@ When need to mention someone or something. | Property | Description | Type | Default | |----------|---------------|----------|--------------| | suggestions | suggestion content | Array or Array | [] | -| suggestionStyle | style of suggestion container | Objet | {} | +| suggestionStyle | style of suggestion container | Object | {} | | onSearchChange | Callback function called when search content changes | function(value:String) | [] | | onChange | Callback function called when content of input changes | function(editorState: EditorState) | null | | notFoundContent| suggestion when suggestions empty | string | '无匹配结果，轻敲空格完成输入' | diff --git a/components/mention/index.zh-CN.md b/components/mention/index.zh-CN.md index 08c082db4a..b965f01b9b 100644 --- a/components/mention/index.zh-CN.md +++ b/components/mention/index.zh-CN.md @@ -34,7 +34,7 @@ english: Mention | 参数 | 说明 | 类型 | 默认值 | |----------|---------------|----------|--------------| | suggestions | 建议内容 | Array or Array | [] | -| suggestionStyle | 弹出下拉框样式 | Objet | {} | +| suggestionStyle | 弹出下拉框样式 | Object | {} | | onSearchChange | 输入框中 @ 变化时回调 | function(value:String) | [] | | onChange | 输入框内容变化时回调 | function(editorState: EditorState) | null | | notFoundContent| 未找到时的内容 | string | '无匹配结果，轻敲空格完成输入' | From a7874cd2a23d12b980fa39529ac17a0ef06bbddf Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 29 Aug 2016 16:52:35 +0800 Subject: [PATCH 0015/2145] change `linkRender` and `nameRender` to a simpler `itemRender`, close #2871 --- components/breadcrumb/Breadcrumb.tsx | 51 +++++++++++++++------------- components/breadcrumb/index.en-US.md | 5 +-- components/breadcrumb/index.zh-CN.md | 5 +-- 3 files changed, 34 insertions(+), 27 deletions(-) diff --git a/components/breadcrumb/Breadcrumb.tsx b/components/breadcrumb/Breadcrumb.tsx index 381660040b..2117e961c7 100644 --- a/components/breadcrumb/Breadcrumb.tsx +++ b/components/breadcrumb/Breadcrumb.tsx @@ -2,26 +2,25 @@ import * as React from 'react'; import { cloneElement } from 'react'; import BreadcrumbItem from './BreadcrumbItem'; -const defaultNameRender = (breadcrumbName, route, params) => { - if (!breadcrumbName) { - return null; - } - const paramsKeys = Object.keys(params).join('|'); - const name = breadcrumbName.replace( - new RegExp(`:(${paramsKeys})`, 'g'), - (replacement, key) => params[key] || replacement - ); - return {name}; -}; - -interface BreadcrumbProps { +export interface BreadcrumbProps { prefixCls?: string; routes?: Array; params?: Object; separator?: string | React.ReactNode; - linkRender?: (link, name, paths: Array) => React.ReactNode; - nameRender?: (breadcrumbName, route, params) => React.ReactNode; + itemRender?: (route, params, routes, paths) => React.ReactNode; style?: React.CSSProperties; +}; + +function getBreadcrumbName(route, params, routes) { + if (!route.breadcrumbName) { + return null; + } + const paramsKeys = Object.keys(params).join('|'); + const name = route.breadcrumbName.replace( + new RegExp(`:(${paramsKeys})`, 'g'), + (replacement, key) => params[key] || replacement + ); + return name; } export default class Breadcrumb extends React.Component { @@ -30,8 +29,13 @@ export default class Breadcrumb extends React.Component { static defaultProps = { prefixCls: 'ant-breadcrumb', separator: '/', - linkRender: (href, name) => {name}, - nameRender: defaultNameRender, + itemRender: (route, params, routes, paths) => { + const isLastItem = routes.indexOf(route) === routes.length - 1; + const name = getBreadcrumbName(route, params, routes); + return isLastItem + ? {name} + : {name}; + }, }; static propTypes = { @@ -48,10 +52,9 @@ export default class Breadcrumb extends React.Component { render() { let crumbs; - const { separator, prefixCls, routes, params, children, linkRender, nameRender } = this.props; + const { separator, prefixCls, routes, params, children, itemRender } = this.props; if (routes && routes.length > 0) { const paths = []; - const lastPath = routes.length - 1; crumbs = routes.map((route, i) => { route.path = route.path || ''; let path = route.path.replace(/^\//, ''); @@ -61,10 +64,12 @@ export default class Breadcrumb extends React.Component { if (path) { paths.push(path); } - const name = nameRender(route.breadcrumbName, route, params); - if (name) { - const link = (i === lastPath) ? name : linkRender(`/${paths.join('/')}`, name, paths); - return {link}; + if (route.breadcrumbName) { + return ( + + {itemRender(route, params, routes, paths)} + + ); } return null; }); diff --git a/components/breadcrumb/index.en-US.md b/components/breadcrumb/index.en-US.md index c376881b46..cb8bd7f57e 100644 --- a/components/breadcrumb/index.en-US.md +++ b/components/breadcrumb/index.en-US.md @@ -28,5 +28,6 @@ A breadcrumb displays the current location within a hierarchy. It allows going b | routes | The routing stack information of router | Array | | - | | params | Routing parameter | Object | | - | | separator | Custom separator | String or Element | | '/' | -| linkRender | Custom link function，and react-router configuration | Function(href, name, paths) | | - | -| nameRender | Custom link function，and react-router configuration | Function(breadcrumbName, route, params) | | - | +| itemRender | Custom item renderer | (route, params, routes, paths) => React.ReactNode | | - | + +> `linkRender` and `nameRender` were removed after `antd@2.0`, please use `itemRender` instead. diff --git a/components/breadcrumb/index.zh-CN.md b/components/breadcrumb/index.zh-CN.md index 15aaaf793c..4bce06e129 100644 --- a/components/breadcrumb/index.zh-CN.md +++ b/components/breadcrumb/index.zh-CN.md @@ -29,5 +29,6 @@ english: Breadcrumb | routes | router 的路由栈信息 | Array | | - | | params | 路由的参数 | Object | | - | | separator | 分隔符自定义 | String or Element | | '/' | -| linkRender | 自定义链接函数，和 react-router 配置使用 | Function(href, name, paths) | | - | -| nameRender | 自定义文字函数，和 react-router 配置使用 | Function(breadcrumbName, route, params) | | - | +| itemRender | 自定义链接函数，和 react-router 配置使用 | (route, params, routes, paths) => React.ReactNode | | - | + +> 2.0 之后，`linkRender` 和 `nameRender` 被移除，请使用 `itemRender` 来代替。 From 9ae07d5bc7203703126d52a041782c5e4f46f290 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 29 Aug 2016 18:19:29 +0800 Subject: [PATCH 0016/2145] Fix defaultPageSize in Table.pagination, close #2874 --- components/table/Table.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/table/Table.jsx b/components/table/Table.jsx index 542f3b8a83..c3c419c006 100644 --- a/components/table/Table.jsx +++ b/components/table/Table.jsx @@ -27,7 +27,6 @@ const defaultLocale = { }; const defaultPagination = { - pageSize: 10, onChange: noop, onShowSizeChange: noop, }; @@ -82,6 +81,7 @@ export default class Table extends React.Component { ...defaultPagination, ...pagination, current: pagination.defaultCurrent || pagination.current || 1, + pageSize: pagination.defaultPageSize || pagination.pageSize || 10, } : {}, }; From ee60b42d6d9f7e14bdd739ed16415565d42c488b Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 29 Aug 2016 20:48:47 +0800 Subject: [PATCH 0017/2145] improve Modal code style --- components/modal/Modal.jsx | 23 ++++++++++++++--------- 1 file changed, 14 insertions(+), 9 deletions(-) diff --git a/components/modal/Modal.jsx b/components/modal/Modal.jsx index 090c152c9c..c18d372932 100644 --- a/components/modal/Modal.jsx +++ b/components/modal/Modal.jsx @@ -66,35 +66,40 @@ export default class Modal extends React.Component { } render() { - let props = this.props; + let { okText, cancelText, confirmLoading, footer, visible } = this.props; - let { okText, cancelText } = props; if (this.context.antLocale && this.context.antLocale.Modal) { okText = okText || this.context.antLocale.Modal.okText; cancelText = cancelText || this.context.antLocale.Modal.cancelText; } - let defaultFooter = [ - , - , ]; - let footer = props.footer || defaultFooter; + return ( - ); } From c3c1d091c24c8368ffd321c643acbd2a00607a44 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 29 Aug 2016 20:57:42 +0800 Subject: [PATCH 0018/2145] Fix InputNumber flush style in Chrome, close #2876 --- components/input-number/style/index.less | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/components/input-number/style/index.less b/components/input-number/style/index.less index 3d3fc32074..d0d77b66af 100644 --- a/components/input-number/style/index.less +++ b/components/input-number/style/index.less @@ -34,8 +34,9 @@ transition: all 0.1s linear; display: block; width: 100%; - &:hover { - background: #fefefe; + font-weight: bold; + &:active { + background: #f4f4f4; } &:hover &-up-inner, &:hover &-down-inner { @@ -155,8 +156,8 @@ &-handler-wrap { border-left: 1px solid @border-color-base; width: 22px; - height: 28px; - background: #fff; + height: 100%; + background: transparent; position: absolute; top: 0; right: 0; From 61838ca6b927dee0770d8d77c347bfbdb27e8e44 Mon Sep 17 00:00:00 2001 From: feng zhi hao Date: Mon, 29 Aug 2016 21:28:39 +0800 Subject: [PATCH 0019/2145] =?UTF-8?q?=E8=A1=A5=E5=85=85index.d.ts=E4=B8=AD?= =?UTF-8?q?Form=E7=BC=BA=E5=B0=91=E7=9A=84=E5=A3=B0=E6=98=8E=20(#2853)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.d.ts | 28 ++++++++++++++++------------ 1 file changed, 16 insertions(+), 12 deletions(-) diff --git a/index.d.ts b/index.d.ts index 04b00bf511..96b025a70a 100644 --- a/index.d.ts +++ b/index.d.ts @@ -560,37 +560,41 @@ export class FormComponent extends React.Component { // function create type CreateFormOptions = { /** 获取一组输入控件的值，如不传入参数，则获取全部组件的值*/ - getFieldsValue():(fieldNames?:Array) => any + getFieldsValue:(fieldNames?:Array) => any /** 获取一个输入控件的值*/ - getFieldValue():(fieldName:string) => any + getFieldValue:(fieldName:string) => any /** 设置一组输入控件的值*/ - setFieldsValue():(obj:Object) => void + setFieldsValue:(obj:Object) => void /** 设置一组输入控件的值*/ - setFields():(obj:Object) => void + setFields:(obj:Object) => void /** 校验并获取一组输入域的值与 Error*/ - validateFields():(fieldNames?:Array, options?:Object, callback?:(erros:any, values:any) => void) => any + validateFields:(fieldNames?:Array, options?:Object, callback?:(erros:any, values:any) => void) => any /** 与 `validateFields` 相似，但校验完后，如果校验不通过的菜单域不在可见范围内，则自动滚动进可见范围 */ - validateFieldsAndScroll():(fieldNames?:Array, options?:Object, callback?:(erros:any, values:any) => void) => any + validateFieldsAndScroll:(fieldNames?:Array, options?:Object, callback?:(erros:any, values:any) => void) => any /** 获取某个输入控件的 Error */ - getFieldError():(name:string) => Object + getFieldError:(name:string) => Object /** 判断一个输入控件是否在校验状态*/ - isFieldValidating():(name:string) => Object + isFieldValidating:(name:string) => Object /**重置一组输入控件的值与状态，如不传入参数，则重置所有组件*/ - resetFields():(names?:Array) => void + resetFields:(names?:Array) => void - getFieldsValue():(id:string, options:{ + getFieldProps:(id:string, options:{ /** 子节点的值的属性，如 Checkbox 的是 'checked'*/ valuePropName?:string, /** 子节点的初始值，类型、可选值均由子节点决定*/ initialValue?:any, /** 收集子节点的值的时机*/ trigger?:string, + /** 可以把 onChange 的参数转化为控件的值，例如 DatePicker 可设为：(date, dateString) => dateString */ + getValueFromEvent: (...args:any[]) => any, /** 校验子节点值的时机*/ validateTrigger?:string, /** 校验规则，参见 [async-validator](https://github.com/yiminghe/async-validator) */ rules?:Array, /** 必填输入控件唯一标志*/ - id?:string + id?:string, + /** 是否和其他控件互斥，特别用于 Radio 单选控件 */ + exclusive: boolean }) => Array } @@ -603,7 +607,7 @@ interface FormProps { horizontal?:boolean, /** 行内排列布局*/ inline?:boolean, - /** 经 `Form.create()` 包装过的组件会自带 `this.props.form` 属性，直接传给 Form 即可*/ + /** 经 `Form.create()` 包装过的组件会自带 `this.props.form` 属性，直接传给 Form 即可。1.7.0 之后无需设置*/ form?:Object, /** 数据验证成功后回调事件*/ onSubmit?:React.FormEventHandler, From bffdf731cd06cc749f2dc2548a5bee601c5cbffe Mon Sep 17 00:00:00 2001 From: ddcat1115 Date: Tue, 30 Aug 2016 17:01:51 +0800 Subject: [PATCH 0020/2145] fix #2812 (#2875) --- components/table/Table.jsx | 24 ++++-------------------- components/table/style/index.less | 15 +++++++++++++-- package.json | 2 +- 3 files changed, 18 insertions(+), 23 deletions(-) diff --git a/components/table/Table.jsx b/components/table/Table.jsx index c3c419c006..4649f1eb95 100644 --- a/components/table/Table.jsx +++ b/components/table/Table.jsx @@ -756,8 +756,8 @@ export default class Table extends React.Component { } render() { - const { style, className, rowKey, ...restProps } = this.props; - let data = this.getCurrentPageData(); + const { style, className, ...restProps } = this.props; + const data = this.getCurrentPageData(); let columns = this.renderRowSelection(); const expandIconAsCell = this.props.expandedRowRender && this.props.expandIconAsCell !== false; const locale = this.getLocale(); @@ -765,6 +765,7 @@ export default class Table extends React.Component { const classString = classNames({ [`ant-table-${this.props.size}`]: true, 'ant-table-bordered': this.props.bordered, + 'ant-table-empty': !data.length, }); columns = this.renderColumnsDropdown(columns); @@ -774,23 +775,6 @@ export default class Table extends React.Component { return newColumn; }); - // Empty Data - let emptyRowKey; - if (!data || data.length === 0) { - columns.forEach((column, index) => { - column.render = () => ({ - children: !index ?
{locale.emptyText}
: null, - props: { - colSpan: !index ? columns.length : 0, - }, - }); - }); - emptyRowKey = 'key'; - data = [{ - [emptyRowKey]: 'empty', - }]; - } - let table = ( locale.emptyText} /> ); // if there is no pagination or no data, diff --git a/components/table/style/index.less b/components/table/style/index.less index 7085d39d9b..65676ce311 100644 --- a/components/table/style/index.less +++ b/components/table/style/index.less @@ -68,6 +68,7 @@ padding: 16px 8px; background: @table-head-background-color; position: relative; + z-index: 2; top: -1px; border-radius: 0 0 @border-radius-base @border-radius-base; } @@ -245,12 +246,19 @@ .@{table-prefix-cls}-fixed-right { border-left: 1px solid @border-color-split; } + .@{table-prefix-cls}-placeholder { + border-bottom: 0; + } } .@{table-prefix-cls}-thead > tr > th { border-bottom: 1px solid @border-color-split; } + &.@{table-prefix-cls}-empty .@{table-prefix-cls}-thead > tr > th { + border-bottom: 0; + } + .@{table-prefix-cls}-tbody tr:last-child { > th, > td { @@ -268,9 +276,12 @@ } &-placeholder { - height: 65px; - line-height: 65px; + padding: 16px 8px; + background: #fff; + border-bottom: 1px solid @border-color-split;; text-align: center; + position: relative; + z-index: 2; font-size: 12px; color: #999; .anticon { diff --git a/package.json b/package.json index 518c5ed4e6..d78aea7a15 100644 --- a/package.json +++ b/package.json @@ -60,7 +60,7 @@ "rc-slider": "~4.0.0", "rc-steps": "~2.1.5", "rc-switch": "~1.4.2", - "rc-table": "~4.4.0", + "rc-table": "~4.6.0", "rc-tabs": "~5.9.2", "rc-time-picker": "~1.1.6", "rc-tooltip": "~3.4.2", From 399b3d589ae91d280d25ee3f062dc1f5952f050a Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 30 Aug 2016 19:33:34 +0800 Subject: [PATCH 0021/2145] fix Form.create types, close #2885 --- index.d.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.d.ts b/index.d.ts index 96b025a70a..3e6111f566 100644 --- a/index.d.ts +++ b/index.d.ts @@ -91,7 +91,7 @@ type ButtonSize = 'small' | 'large' // Button interface ButtonProps { /** 设置按钮类型，可选值为 `primary` `ghost` 或者不设 */ - type?:ButtonType, + type?:ButtonType, /** 设置 `button` 原生的 `type` 值，可选值请参考 HTML标准*/ htmlType?:string, @@ -552,7 +552,7 @@ export class FormItem extends React.Component { } interface FormComponentProps { - form:CreateFormOptions + form?:CreateFormOptions } export class FormComponent extends React.Component { } From 6ba30bc485b7570ee1140c3818f836ab04100d41 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 30 Aug 2016 21:30:55 +0800 Subject: [PATCH 0022/2145] Fix calendar card style --- components/calendar/Header.jsx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/components/calendar/Header.jsx b/components/calendar/Header.jsx index 289ee638a6..7f434b3b7c 100644 --- a/components/calendar/Header.jsx +++ b/components/calendar/Header.jsx @@ -25,6 +25,7 @@ export default class Header extends React.Component { prefixCls: PropTypes.string, selectPrefixCls: PropTypes.string, type: PropTypes.string, + fullscreen: PropTypes.boolean, } getYearSelectElement(year) { @@ -39,10 +40,8 @@ export default class Header extends React.Component { } return ( 0 ? null : placeholder} + ref="input" + placeholder={value && value.length > 0 ? null : placeholder} className={`${prefixCls}-input ${sizeCls}`} - value="" + value={state.inputValue} disabled={disabled} - readOnly + readOnly={!showSearch} + onClick={showSearch ? this.handleInputClick : null} + onBlur={showSearch ? this.handleInputBlur : null} + onChange={showSearch ? this.handleInputChange : null} /> {this.getLabel()} {clearIcon} diff --git a/components/cascader/index.zh-CN.md b/components/cascader/index.zh-CN.md index 30029be949..eaa79b54cf 100644 --- a/components/cascader/index.zh-CN.md +++ b/components/cascader/index.zh-CN.md @@ -1,8 +1,8 @@ --- category: Components type: Form Controls -chinese: 级联选择 -english: Cascader +title: Cascader +subtitle: 级联选择 --- 级联选择框。 @@ -22,18 +22,29 @@ english: Cascader | 参数 | 说明 | 类型 | 默认值 | |------|------|------|--------| -| options | 可选项数据源 | object | - | -| defaultValue | 默认的选中项 | array |[] | -| value | 指定选中项 | array | - | +| options | 可选项数据源 | Object | - | +| defaultValue | 默认的选中项 | Array |[] | +| value | 指定选中项 | Array | - | | onChange | 选择完成后的回调 | `function(value, selectedOptions)` | - | | displayRender | 选择后展示的渲染函数 | `function(label, selectedOptions)` | `label => label.join(' / ')` | -| style | 自定义样式 | string | - | -| className | 自定义类名 | string | - | -| popupClassName | 自定义浮层类名 | string | - | -| popupPlacement | 浮层预设位置：`bottomLeft` `bottomRight` `topLeft` `topRight` | string | `bottomLeft` | -| placeholder | 输入框占位文本 | string | '请选择' | -| size | 输入框大小，可选 `large` `default` `small` | string | `default` | -| disabled | 禁用 | boolean | false | -| allowClear | 是否支持清除 | boolean | true | -| expandTrigger | 次级菜单的展开方式，可选 'click' 和 'hover' | string | 'click' | -| changeOnSelect | 当此项为 true 时，点选每级菜单选项值都会发生变化，具体见上面的演示 | boolean | false | +| style | 自定义样式 | String | - | +| className | 自定义类名 | String | - | +| popupClassName | 自定义浮层类名 | String | - | +| popupPlacement | 浮层预设位置：`bottomLeft` `bottomRight` `topLeft` `topRight` | Enum | `bottomLeft` | +| placeholder | 输入框占位文本 | String | '请选择' | +| size | 输入框大小，可选 `large` `default` `small` | String | `default` | +| disabled | 禁用 | Boolean | false | +| allowClear | 是否支持清除 | Boolean | true | +| expandTrigger | 次级菜单的展开方式，可选 'click' 和 'hover' | String | 'click' | +| changeOnSelect | 当此项为 true 时，点选每级菜单选项值都会发生变化，具体见上面的演示 | Boolean | false | +| showSearch | 在选择框中显示搜索框 | Boolean | false | +| notFoundContent | 当下拉列表为空时显示的内容 | String | 'Not Found' | + +`showSearch` 为对象时，其中的字段： + +| 参数 | 说明 | 类型 | 默认值 | +|------|------|------|--------| +| filter | 接收 `inputValue` `path` 两个参数，当 `path` 符合筛选条件时，应返回 true，反之则返回 false。 | `function(inputValue, path): boolean` | | +| render | 用于渲染 filter 后的选项 | `function(inputValue, path): React.ReactNode` | | +| sort | 用于排序 filter 后的选项 | `function(a, b, inputValue)` | | +| matchInputWidth | 搜索结果列表是否与输入框同宽 | boolean | | diff --git a/components/cascader/style/index.less b/components/cascader/style/index.less index 5e12146ff8..8be6ae5076 100644 --- a/components/cascader/style/index.less +++ b/components/cascader/style/index.less @@ -6,6 +6,7 @@ .@{cascader-prefix-cls} { font-size: @font-size-base; &-input.ant-input { + background-color: transparent; display: block; cursor: pointer; width: 100%; @@ -22,6 +23,10 @@ &-disabled { cursor: not-allowed; + + .@{cascader-prefix-cls}-input { + cursor: not-allowed; + } } &-label { @@ -36,7 +41,6 @@ overflow: hidden; width: 100%; padding: 0 12px 0 8px; - z-index: 1; } &-clear { @@ -171,5 +175,9 @@ right: 15px; } } + + & &-keyword { + color: @error-color; + } } } diff --git a/components/input/Input.tsx b/components/input/Input.tsx index fbfbbd3192..25792b4b7a 100644 --- a/components/input/Input.tsx +++ b/components/input/Input.tsx @@ -48,6 +48,8 @@ export interface InputProps { onPressEnter?: React.FormEventHandler; onKeyDown?: React.FormEventHandler; onChange?: React.FormEventHandler; + onClick?: React.FormEventHandler; + onBlur?: React.FormEventHandler; autosize?: boolean | AutoSizeType; } From 6030e6abef6f9ef19a108a42c3b4bb648e09c4a7 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Thu, 1 Sep 2016 11:26:07 +0800 Subject: [PATCH 0031/2145] fix: upgrade rc-menu to close: #2701 (#2836) --- components/menu/demo/sider-current.md | 37 +++++++++++++++++---------- components/menu/index.tsx | 28 ++++---------------- components/menu/index.zh-CN.md | 3 +-- package.json | 6 ++--- 4 files changed, 32 insertions(+), 42 deletions(-) diff --git a/components/menu/demo/sider-current.md b/components/menu/demo/sider-current.md index 98fec46b86..99e840305b 100755 --- a/components/menu/demo/sider-current.md +++ b/components/menu/demo/sider-current.md @@ -9,10 +9,14 @@ title: 点击菜单，收起其他展开的所有菜单，保持菜单聚焦简洁。 +> 该用法要求 antd@2.0+ + ## en-US Click the menu and you will see that all the other menus gets collapsed to keep the entire menu compact. +> This demo is for antd@2.0+. + ````jsx import { Menu, Icon } from 'antd'; const SubMenu = Menu.SubMenu; @@ -26,25 +30,30 @@ const Sider = React.createClass({ }, handleClick(e) { console.log('click ', e); - this.setState({ - current: e.key, - openKeys: e.keyPath.slice(1), - }); + this.setState({ current: e.key }); }, - onToggle(info) { - this.setState({ - openKeys: info.open ? info.keyPath : info.keyPath.slice(1), - }); + onOpenChange(openKeys) { + const latestOpenKey = openKeys.find((key) => !(this.state.openKeys.indexOf(key) > -1)); + this.setState({ openKeys: this.getKeyPath(latestOpenKey) }); + }, + getKeyPath(key) { + const map = { + sub1: ['sub1'], + sub2: ['sub2'], + sub3: ['sub2', 'sub3'], + sub4: ['sub4'], + }; + return map[key] || []; }, render() { return ( - 导航一}> 选项1 diff --git a/components/menu/index.tsx b/components/menu/index.tsx index 9855abae92..645786319a 100644 --- a/components/menu/index.tsx +++ b/components/menu/index.tsx @@ -5,15 +5,6 @@ import animation from '../_util/openAnimation'; function noop() { } -interface OpenCloseParam { - openKeys: Array; - key: string; - item: any; - trigger: string; - open: boolean; - keyPath: Array; -} - interface SelectParam { key: string; keyPath: Array; @@ -43,8 +34,7 @@ export interface MenuProps { openKeys?: Array; /** 初始展开的菜单项 key 数组*/ defaultOpenKeys?: Array; - onOpen?: (param: OpenCloseParam) => void; - onClose?: (param: OpenCloseParam) => void; + onOpenChange?: (openKeys: string[]) => void; /** * 被选中时调用 * @@ -71,8 +61,7 @@ export default class Menu extends React.Component { static defaultProps = { prefixCls: 'ant-menu', onClick: noop, - onOpen: noop, - onClose: noop, + onOpenChange: noop, className: '', theme: 'light', // or dark }; @@ -96,15 +85,9 @@ export default class Menu extends React.Component { this.setOpenKeys([]); this.props.onClick(e); } - handleOpenKeys = (e) => { - const { openKeys } = e; + handleOpenChange = (openKeys: string[]) => { this.setOpenKeys(openKeys); - this.props.onOpen(e); - } - handleCloseKeys = (e) => { - const { openKeys } = e; - this.setOpenKeys(openKeys); - this.props.onClose(e); + this.props.onOpenChange(openKeys); } setOpenKeys(openKeys) { if (!('openKeys' in this.props)) { @@ -144,8 +127,7 @@ export default class Menu extends React.Component { props = { openKeys: this.state.openKeys, onClick: this.handleClick, - onOpen: this.handleOpenKeys, - onClose: this.handleCloseKeys, + onOpenChange: this.handleOpenChange, openTransitionName: openAnimation, className, }; diff --git a/components/menu/index.zh-CN.md b/components/menu/index.zh-CN.md index 296f67355a..b09273e0a2 100644 --- a/components/menu/index.zh-CN.md +++ b/components/menu/index.zh-CN.md @@ -35,8 +35,7 @@ subtitle: 导航菜单 | defaultSelectedKeys | 初始选中的菜单项 key 数组 | Array | | | openKeys | 当前展开的 SubMenu 菜单项 key 数组 | Array | | | defaultOpenKeys | 初始展开的 SubMenu 菜单项 key 数组 | | | -| onOpen | SubMenu 展开回调 | Function({ key, item, keyPath }) | | -| onClose | SubMenu 收起回调 | Function({ key, item, keyPath }) | | +| onOpenChange | SubMenu 展开/关闭的回调 | Function(openKeys: string[]) | noop | | onSelect | 被选中时调 | Function({ item, key, selectedKeys }) | 无 | | onDeselect | 取消选中时调用，仅在 multiple 生效 | Function({ item, key, selectedKeys }) | - | | onClick | 点击 menuitem 调用此函数，参数为 {item, key, keyPath} | function | - | diff --git a/package.json b/package.json index caf2de8a6c..3e3ee695af 100644 --- a/package.json +++ b/package.json @@ -33,8 +33,8 @@ "typings": "lib/index.d.ts", "license": "MIT", "dependencies": { - "babel-runtime": "6.x", "array-tree-filter": "~1.0.0", + "babel-runtime": "6.x", "classnames": "~2.2.0", "css-animation": "^1.2.5", "gregorian-calendar": "~4.1.0", @@ -51,14 +51,14 @@ "rc-editor-mention": "^0.2.2", "rc-form": "~0.17.1", "rc-input-number": "~2.6.3", - "rc-menu": "~4.13.0", + "rc-menu": "^5.0.0", "rc-notification": "~1.3.4", "rc-pagination": "~1.5.3", "rc-progress": "~1.0.4", "rc-queue-anim": "~0.12.4", "rc-radio": "~2.0.0", "rc-rate": "~1.1.2", - "rc-select": "~6.4.6", + "rc-select": "^6.5.1", "rc-slider": "~4.0.0", "rc-steps": "~2.1.5", "rc-switch": "~1.4.2", From 5a4ebe535f0353089b30ac331bc4fb7877963371 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Thu, 1 Sep 2016 11:48:38 +0800 Subject: [PATCH 0032/2145] deps: update rc-form and form's docs (#2873) --- components/affix/demo/target.md | 1 - components/form/Form.tsx | 9 ++ components/form/FormItem.tsx | 6 +- components/form/demo/dynamic-form-item.md | 19 ++- components/form/demo/form-controls.md | 4 +- components/form/demo/form-in-modal.md | 10 +- components/form/demo/horizontal-form.md | 26 ++-- components/form/demo/inline-form.md | 22 +-- components/form/demo/input-group.md | 2 +- components/form/demo/mix.md | 82 ++++++----- components/form/demo/validate-basic.md | 103 ++++++------- components/form/demo/validate-customized.md | 65 +++++---- components/form/demo/validate-other.md | 153 +++++++++++--------- components/form/demo/validate-static.md | 2 +- components/form/index.en-US.md | 13 +- components/form/index.zh-CN.md | 15 +- components/input/Input.tsx | 1 - package.json | 2 +- 18 files changed, 291 insertions(+), 244 deletions(-) diff --git a/components/affix/demo/target.md b/components/affix/demo/target.md index 7000123cc9..f0a6017abd 100644 --- a/components/affix/demo/target.md +++ b/components/affix/demo/target.md @@ -1,6 +1,5 @@ --- order: 4 -title: 滚动容器 title: zh-CN: 滚动容器 en-US: Container to scroll. diff --git a/components/form/Form.tsx b/components/form/Form.tsx index 0190340e96..9e93fa3340 100644 --- a/components/form/Form.tsx +++ b/components/form/Form.tsx @@ -116,6 +116,15 @@ export default class Form extends React.Component { }; }, render() { + const getFieldProps = this.props.form.getFieldProps; + function deprecatedGetFieldProps(name, option) { + warning( + false, + '`getFieldProps` is deprecated and will be removed in future, please use `getFieldDecorator` instead' + ); + return getFieldProps(name, option); + } + this.props.form.getFieldProps = deprecatedGetFieldProps; return ; }, })); diff --git a/components/form/FormItem.tsx b/components/form/FormItem.tsx index cb741ea1f2..3e6714e44d 100644 --- a/components/form/FormItem.tsx +++ b/components/form/FormItem.tsx @@ -14,7 +14,7 @@ export interface FormItemLabelColOption { export interface FormItemProps { prefixCls?: string; id?: string; - label?: string; + label?: string | React.ReactNode; labelCol?: FormItemLabelColOption; wrapperCol?: FormItemLabelColOption; help?: React.ReactNode; @@ -40,7 +40,7 @@ export default class FormItem extends React.Component { static propTypes = { prefixCls: React.PropTypes.string, - label: React.PropTypes.string, + label: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.node]), labelCol: React.PropTypes.object, help: React.PropTypes.oneOfType([React.PropTypes.node, React.PropTypes.bool]), validateStatus: React.PropTypes.oneOf(['', 'success', 'warning', 'error', 'validating']), @@ -187,7 +187,7 @@ export default class FormItem extends React.Component { // remove user input colon let label = props.label; if (typeof label === 'string' && label.trim() !== '') { - label = props.label.replace(/[：|:]\s*$/, ''); + label = (props.label as string).replace(/[：|:]\s*$/, ''); } return props.label ? ( diff --git a/components/form/demo/dynamic-form-item.md b/components/form/demo/dynamic-form-item.md index 1afcccf2b3..8fa5a6f09d 100644 --- a/components/form/demo/dynamic-form-item.md +++ b/components/form/demo/dynamic-form-item.md @@ -1,6 +1,6 @@ --- order: 15 -title: +title: zh-CN: 动态增减表单项 en-US: Dynamic form item --- @@ -18,6 +18,11 @@ import { Form, Input, Button } from 'antd'; let uuid = 0; let Demo = React.createClass({ + componentWillMount() { + this.props.form.setFieldsValue({ + keys: [0], + }); + }, remove(k) { const { form } = this.props; // can use data-binding to get @@ -52,10 +57,7 @@ let Demo = React.createClass({ }); }, render() { - const { getFieldProps, getFieldValue } = this.props.form; - getFieldProps('keys', { - initialValue: [0], - }); + const { getFieldDecorator, getFieldValue } = this.props.form; const formItemLayout = { labelCol: { span: 6 }, @@ -65,14 +67,15 @@ let Demo = React.createClass({ const formItems = getFieldValue('keys').map((k) => { return ( - + })( + + )} ); diff --git a/components/form/demo/form-controls.md b/components/form/demo/form-controls.md index d5df5d8cd4..87c561bd7d 100644 --- a/components/form/demo/form-controls.md +++ b/components/form/demo/form-controls.md @@ -1,6 +1,6 @@ --- order: 3 -title: +title: zh-CN: 表单控件 en-US: Form controls --- @@ -15,7 +15,7 @@ title: A list off all the controls that can be used with form. -**Note**: Input control: Only if set correct type for it, then it will be set correct style +**Note**: Input control: Only if set correct type for it, then it will be set correct style. ````jsx import { Form, Input, Select, Checkbox, Radio } from 'antd'; diff --git a/components/form/demo/form-in-modal.md b/components/form/demo/form-in-modal.md index d40aeb8aa9..a73b69d89a 100644 --- a/components/form/demo/form-in-modal.md +++ b/components/form/demo/form-in-modal.md @@ -37,7 +37,7 @@ let Demo = React.createClass({ }, render() { - const { getFieldProps } = this.props.form; + const { getFieldDecorator } = this.props.form; const formItemLayout = { labelCol: { span: 4 }, @@ -52,13 +52,17 @@ let Demo = React.createClass({ {...formItemLayout} label="User name" > - + {getFieldDecorator('username')( + + )} - + {getFieldDecorator('password')( + + )} diff --git a/components/form/demo/horizontal-form.md b/components/form/demo/horizontal-form.md index 225d4c868f..f9dd76a0b7 100644 --- a/components/form/demo/horizontal-form.md +++ b/components/form/demo/horizontal-form.md @@ -1,6 +1,6 @@ --- order: 2 -title: +title: zh-CN: 典型表单 en-US: Horizontal form --- @@ -25,7 +25,7 @@ let Demo = React.createClass({ }, render() { - const { getFieldProps } = this.props.form; + const { getFieldDecorator } = this.props.form; const formItemLayout = { labelCol: { span: 6 }, wrapperCol: { span: 14 }, @@ -42,29 +42,37 @@ let Demo = React.createClass({ {...formItemLayout} label="Password" > - + {getFieldDecorator('pass', { initialValue: '' })( + + )} - - male - female - + {getFieldDecorator('gender', { initialValue: 'female' })( + + male + female + + )} - + {getFieldDecorator('remark', { initialValue: '' })( + + )} Sold myself } > - agree + {getFieldDecorator('agreement', { initialValue: false, valuePropName: 'checked' })( + agree + )} diff --git a/components/form/demo/inline-form.md b/components/form/demo/inline-form.md index 2151b577d0..1ecd466d7e 100644 --- a/components/form/demo/inline-form.md +++ b/components/form/demo/inline-form.md @@ -1,6 +1,6 @@ --- order: 1 -title: +title: zh-CN: 平行排列 en-US: Inline form --- @@ -11,7 +11,7 @@ title: ## en-US -Inline form is often used for login. +Inline form is often used for login. ````jsx import { Form, Input, Button, Checkbox } from 'antd'; @@ -24,25 +24,27 @@ let Demo = React.createClass({ }, render() { - const { getFieldProps } = this.props.form; + const { getFieldDecorator } = this.props.form; return (
- + {getFieldDecorator('userName')( + + )} - + {getFieldDecorator('password')( + + )} - Remember me + {getFieldDecorator('agreement')( + Remember me + )}
diff --git a/components/form/demo/input-group.md b/components/form/demo/input-group.md index 3f546e2363..d90df6580e 100644 --- a/components/form/demo/input-group.md +++ b/components/form/demo/input-group.md @@ -1,6 +1,6 @@ --- order: 4 -title: +title: zh-CN: 输入框组合 en-US: Input group --- diff --git a/components/form/demo/mix.md b/components/form/demo/mix.md index db925da493..466467d7d1 100644 --- a/components/form/demo/mix.md +++ b/components/form/demo/mix.md @@ -1,6 +1,6 @@ --- order: 5 -title: +title: zh-CN: 表单组合 en-US: mix --- @@ -48,7 +48,7 @@ let Demo = React.createClass({ }, render() { - const { getFieldProps } = this.props.form; + const { getFieldDecorator } = this.props.form; return (
- + {getFieldDecorator('inputNumber', { initialValue: 3 })( + + )} machines @@ -79,7 +79,9 @@ let Demo = React.createClass({ wrapperCol={{ span: 10 }} required > - + {getFieldDecorator('switch', { valuePropName: 'checked' })( + + )} - + {getFieldDecorator('slider')( + + )} - + {getFieldDecorator('select')( + + )} - + {getFieldDecorator('area')( + + )} - + {getFieldDecorator('startDate')( + + )} @@ -132,7 +140,9 @@ let Demo = React.createClass({ - + {getFieldDecorator('endDate')( + + )} @@ -144,18 +154,22 @@ let Demo = React.createClass({ wrapperCol={{ span: 16 }} required > - + {getFieldDecorator('time')( + + )} - - item 1 - item 2 - item 3 - + {getFieldDecorator('rg')( + + item 1 + item 2 + item 3 + + )} - - - + {getFieldDecorator('upload', { + valuePropName: 'fileList', + normalize: this.normFile, + })( + + + + )} diff --git a/components/form/demo/validate-basic.md b/components/form/demo/validate-basic.md index 32f9113453..86fc0323ef 100644 --- a/components/form/demo/validate-basic.md +++ b/components/form/demo/validate-basic.md @@ -72,46 +72,7 @@ let BasicDemo = React.createClass({ }, render() { - const { getFieldProps, getFieldError, isFieldValidating } = this.props.form; - const nameProps = getFieldProps('name', { - rules: [ - { required: true, min: 5, message: 'User name for at least 5 characters' }, - { validator: this.userExists }, - ], - }); - const emailProps = getFieldProps('email', { - validate: [{ - rules: [ - { required: true }, - ], - trigger: 'onBlur', - }, { - rules: [ - { type: 'email', message: 'Please input the correct email' }, - ], - trigger: ['onBlur', 'onChange'], - }], - }); - const passwdProps = getFieldProps('passwd', { - rules: [ - { required: true, whitespace: true, message: 'Please enter your password' }, - { validator: this.checkPass }, - ], - }); - const rePasswdProps = getFieldProps('rePasswd', { - rules: [{ - required: true, - whitespace: true, - message: 'Please confirm your password', - }, { - validator: this.checkPass2, - }], - }); - const textareaProps = getFieldProps('textarea', { - rules: [ - { required: true, message: 'Really not supposed to write something?' }, - ], - }); + const { getFieldDecorator, getFieldError, isFieldValidating } = this.props.form; const formItemLayout = { labelCol: { span: 7 }, wrapperCol: { span: 12 }, @@ -124,7 +85,14 @@ let BasicDemo = React.createClass({ hasFeedback help={isFieldValidating('name') ? 'validating...' : (getFieldError('name') || []).join(', ')} > - + {getFieldDecorator('name', { + rules: [ + { required: true, min: 5, message: 'User name for at least 5 characters' }, + { validator: this.userExists }, + ], + })( + + )} - + {getFieldDecorator('email', { + validate: [{ + rules: [ + { required: true }, + ], + trigger: 'onBlur', + }, { + rules: [ + { type: 'email', message: 'Please input the correct email' }, + ], + trigger: ['onBlur', 'onChange'], + }], + })( + + )} - + {getFieldDecorator('passwd', { + rules: [ + { required: true, whitespace: true, message: 'Please enter your password' }, + { validator: this.checkPass }, + ], + })( + + )} - + {getFieldDecorator('rePasswd', { + rules: [{ + required: true, + whitespace: true, + message: 'Please confirm your password', + }, { + validator: this.checkPass2, + }], + })( + + )} - + {getFieldDecorator('textarea', { + rules: [ + { required: true, message: 'Really not supposed to write something?' }, + ], + })( + + )} diff --git a/components/form/demo/validate-customized.md b/components/form/demo/validate-customized.md index e7752decd3..0536d4b20f 100644 --- a/components/form/demo/validate-customized.md +++ b/components/form/demo/validate-customized.md @@ -122,40 +122,31 @@ let Demo = React.createClass({ }, render() { - const { getFieldProps } = this.props.form; - - const passProps = getFieldProps('pass', { - rules: [ - { required: true, whitespace: true, message: 'Please enter your password' }, - { validator: this.checkPass }, - ], - onChange: (e) => { - console.log('Your password is stolen in this way', e.target.value); - }, - }); - const rePassProps = getFieldProps('rePass', { - rules: [{ - required: true, - whitespace: true, - message: 'Please confirm your password', - }, { - validator: this.checkPass2, - }], - }); + const { getFieldDecorator } = this.props.form; return (
- { - const value = e.target.value; - this.setState({ dirty: this.state.dirty || !!value }); - }} - /> + {getFieldDecorator('pass', { + rules: [ + { required: true, whitespace: true, message: 'Please enter your password' }, + { validator: this.checkPass }, + ], + })( + { + console.log('Your password is stolen in this way', e.target.value); + }} + onBlur={(e) => { + const value = e.target.value; + this.setState({ dirty: this.state.dirty || !!value }); + }} + /> + )} @@ -165,10 +156,20 @@ let Demo = React.createClass({ - + {getFieldDecorator('rePass', { + rules: [{ + required: true, + whitespace: true, + message: 'Please confirm your password', + }, { + validator: this.checkPass2, + }], + })( + + )} diff --git a/components/form/demo/validate-other.md b/components/form/demo/validate-other.md index 84057d328a..cd96259b5e 100644 --- a/components/form/demo/validate-other.md +++ b/components/form/demo/validate-other.md @@ -56,7 +56,7 @@ let Demo = React.createClass({ checkPrime(rule, value, callback) { if (value !== 11) { - callback(new Error('The prime number between 8 to 12 is obiviously 11!')); + callback(new Error('The prime number between 8 to 12 is 11!')); } else { callback(); } @@ -71,45 +71,7 @@ let Demo = React.createClass({ label: 'Hang Zhou', }], }]; - const { getFieldProps } = this.props.form; - const selectProps = getFieldProps('select', { - rules: [ - { required: true, message: 'Please select your country' }, - ], - }); - const multiSelectProps = getFieldProps('multiSelect', { - rules: [ - { required: true, message: 'Please select your favourite colors', type: 'array' }, - ], - }); - const radioProps = getFieldProps('radio', { - rules: [ - { required: true, message: 'Please select your gender' }, - ], - }); - const birthdayProps = getFieldProps('birthday', { - rules: [ - { - required: true, - type: 'date', - message: 'When is your birthday?', - }, { - validator: this.checkBirthday, - }, - ], - }); - const timeProps = getFieldProps('time', { - getValueFromEvent: (value, timeString) => timeString, - rules: [ - { required: true, message: 'Please select the time' }, - ], - }); - const primeNumberProps = getFieldProps('primeNumber', { - rules: [{ validator: this.checkPrime }], - }); - const addressProps = getFieldProps('address', { - rules: [{ required: true, type: 'array' }], - }); + const { getFieldDecorator } = this.props.form; const formItemLayout = { labelCol: { span: 7 }, wrapperCol: { span: 12 }, @@ -120,80 +82,131 @@ let Demo = React.createClass({ {...formItemLayout} label="Country" > - + {getFieldDecorator('select', { + rules: [ + { required: true, message: 'Please select your country' }, + ], + })( + + )} - + {getFieldDecorator('multiSelect', { + rules: [ + { required: true, message: 'Please select your favourite colors', type: 'array' }, + ], + })( + + )} - - male - female - - Temporarily does not support ohter gender + {getFieldDecorator('radio', { + rules: [ + { required: true, message: 'Please select your gender' }, + ], + })( + + male + female + + )} + Temporarily no ohter gender - eat - eat + )} + {getFieldDecorator('sleep', { valuePropName: 'checked', - })}>sleeping - sleeping + )} + {getFieldDecorator('beat', { valuePropName: 'checked', - })}>dozen doug + })( + dozen doug + )} - + {getFieldDecorator('birthday', { + rules: [ + { + required: true, + type: 'date', + message: 'When is your birthday?', + }, { + validator: this.checkBirthday, + }, + ], + })( + + )} - + {getFieldDecorator('time', { + getValueFromEvent: (value, timeString) => timeString, + rules: [ + { required: true, message: 'Please select the time' }, + ], + })( + + )} - + {getFieldDecorator('primeNumber', { + rules: [{ validator: this.checkPrime }], + })( + + )} - + {getFieldDecorator('address', { + rules: [{ required: true, type: 'array' }], + })( + + )} Don't use `defaultValue` in form, please use `initialValue` instead of it. - -#### getFieldProps options +#### getFieldDecorator's parameters | Property | Description | Type | Default Value | |-----------|-----------------------------------------|-----|--------| @@ -96,7 +92,6 @@ The return value of `getFieldProps` contains `id`、`value`(or any other props ` | options.getValueFromEvent | To convert parameters of onChange to the value of control, for example, set value of DatePicker: `(date, dateString) => dateString` | function(..args) | [reference](https://github.com/react-component/form#optiongetvaluefromevent) | | options.validateTrigger | When to validate the value of children node. | string | 'onChange' | | options.rules | Includes validation rules. Please refer to [async-validator](https://github.com/yiminghe/async-validator) for details. | array | n/a | -| options.onXXX | Because `getFieldProps` will replace events like `onChange`, `trigger`, `validateTrigger`, if you still want to bind these events, you may set them in `options` | function | n/a | | options.exclusive | Whether it is exclusive with other controls, particularly for Radio. | boolean | false | ### Form.Item diff --git a/components/form/index.zh-CN.md b/components/form/index.zh-CN.md index 3b0b470a9c..2432961cf9 100644 --- a/components/form/index.zh-CN.md +++ b/components/form/index.zh-CN.md @@ -75,30 +75,25 @@ CustomizedForm = Form.create({})(CustomizedForm); | getFieldError | 获取某个输入控件的 Error | Function(name) | | isFieldValidating | 判断一个输入控件是否在校验状态 | Function(name) | | resetFields | 重置一组输入控件的值与状态，如不传入参数，则重置所有组件 | Function([names: string[]]) | -| getFieldProps | 用于和表单进行双向绑定，详见下方描述 | | +| getFieldDecorator | 用于和表单进行双向绑定，详见下方描述 | | -### this.props.form.getFieldProps(id, options) +### this.props.form.getFieldDecorator(id, options) #### 特别注意 -如果使用的是 `react@<15.3.0`，则 `getFieldProps` 调用不能位于纯函数组件中: https://github.com/facebook/react/pull/6534 +如果使用的是 `react@<15.3.0`，则 `getFieldDecorator` 调用不能位于纯函数组件中: https://github.com/facebook/react/pull/6534 -`getFieldProps` 返回的属性包括 `id`、`value`（或你设置的其它 `valuePropName`）、`ref`、`onChange`（或者你设置的其它 `trigger` `validateTrigger`），**所以不应再设置同样的属性**，以免冲突。如果对其返回值的细节有兴趣，可以 `console.log` 出来查看。 - -> 在表单中 `defaultValue` 也不应该被设置，请使用下面的 `initialValue`。 - -#### getFieldProps options +#### getFieldDecorator 参数 | 参数 | 说明 | 类型 | 默认值 | |-----------|-----------------------------------------|-----|--------| -| options.id | 必填输入控件唯一标志 | string | | +| id | 必填输入控件唯一标志 | string | | | options.valuePropName | 子节点的值的属性，如 Switch 的是 'checked' | string | 'value' | | options.initialValue | 子节点的初始值，类型、可选值均由子节点决定 | | | | options.trigger | 收集子节点的值的时机 | string | 'onChange' | | options.getValueFromEvent | 可以把 onChange 的参数转化为控件的值，例如 DatePicker 可设为：`(date, dateString) => dateString` | function(..args) | [reference](https://github.com/react-component/form#optiongetvaluefromevent) | | options.validateTrigger | 校验子节点值的时机 | string | 'onChange' | | options.rules | 校验规则，参见 [async-validator](https://github.com/yiminghe/async-validator) | array | | -| options.onXXX | 由于 `getFieldProps` 会占用 `onChange` 等事件（即你所设置的 `trigger` `validateTrigger`），所以如果仍需绑定事件，请在 `options` 内设置 | function | 无 | | options.exclusive | 是否和其他控件互斥，特别用于 Radio 单选控件 | boolean | false | ### Form.Item diff --git a/components/input/Input.tsx b/components/input/Input.tsx index 25792b4b7a..ab94a7eb09 100644 --- a/components/input/Input.tsx +++ b/components/input/Input.tsx @@ -56,7 +56,6 @@ export interface InputProps { export default class Input extends Component { static Group: any; static defaultProps = { - defaultValue: '', disabled: false, prefixCls: 'ant-input', type: 'text', diff --git a/package.json b/package.json index 3e3ee695af..950e3cbd75 100644 --- a/package.json +++ b/package.json @@ -49,7 +49,7 @@ "rc-dialog": "~6.2.1", "rc-dropdown": "~1.4.8", "rc-editor-mention": "^0.2.2", - "rc-form": "~0.17.1", + "rc-form": "~1.0.0", "rc-input-number": "~2.6.3", "rc-menu": "^5.0.0", "rc-notification": "~1.3.4", From 570b0bfe3b40bd6045d73b5d61e0599cef2bc803 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Thu, 1 Sep 2016 11:53:55 +0800 Subject: [PATCH 0033/2145] site: translation of home and footer (#2855) --- site/theme/en-US.js | 28 ++++++++++++++++ site/theme/template/Home/Banner.jsx | 6 ++-- site/theme/template/Home/Page1.jsx | 7 ++-- site/theme/template/Home/Page2.jsx | 7 ++-- site/theme/template/Home/Page3.jsx | 7 ++-- site/theme/template/Home/Page4.jsx | 5 +-- site/theme/template/Layout/Footer.jsx | 48 +++++++++++++++++---------- site/theme/zh-CN.js | 28 ++++++++++++++++ 8 files changed, 106 insertions(+), 30 deletions(-) diff --git a/site/theme/en-US.js b/site/theme/en-US.js index bca05861c6..1cefa968eb 100644 --- a/site/theme/en-US.js +++ b/site/theme/en-US.js @@ -11,5 +11,33 @@ module.exports = { 'app.header.menu.spec': 'Specification', 'app.header.menu.resource': 'Resource', 'app.header.lang': '中文', + 'app.home.slogan': 'One Design Language for UI', + 'app.home.start': 'Getting Started', + 'app.home.best-practice': 'Best Practice', + 'app.home.experience': 'Designed by experienced team, and showcase dozens of inspiring projects.', + 'app.home.design-pattern': 'Design Pattern', + 'app.home.pattern': 'Provide solutions for usual problems that may be encountered while developing enterprise-like complex UIs.', + 'app.home.reusable-components': 'Dozens of Reusable Components', + 'app.home.components-intro': 'Dozens of flexible and practical reusable components that increase your productivity.', + 'app.home.learn-more': 'Learn more', + 'app.home.sub-slogan': 'A Little Happiness in Hand', + 'app.home.vision': 'This is a design language dedicated to improve the user and design experience.', + 'app.footer.repo': 'Repository', + 'app.footer.scaffold': 'Scaffold', + 'app.footer.dev-tools': 'Developer Tools', + 'app.footer.dva': 'Framework', + 'app.footer.links': 'Links', + 'app.footer.mobile': 'Mobile', + 'app.footer.data-vis': 'Data Visualization', + 'app.footer.data-vis-spec': 'Specification of Data Visualization', + 'app.footer.motion': 'Motion', + 'app.footer.material': 'Sitemap Template', + 'app.footer.community': 'Community', + 'app.footer.change-log': 'Change Log', + 'app.footer.feedback': 'Feedback', + 'app.footer.discuss': 'Chat Room', + 'app.footer.bug-report': 'Bug Report', + 'app.footer.version': 'Version: ', + 'app.footer.author': 'Created by Ant UED', }, }; diff --git a/site/theme/template/Home/Banner.jsx b/site/theme/template/Home/Banner.jsx index e7f2b65603..5fc7acbf9e 100644 --- a/site/theme/template/Home/Banner.jsx +++ b/site/theme/template/Home/Banner.jsx @@ -1,5 +1,6 @@ import React from 'react'; import { Link } from 'react-router'; +import { FormattedMessage } from 'react-intl'; import ScrollElement from 'rc-scroll-anim/lib/ScrollElement'; import GitHubButton from 'react-github-button'; import 'react-github-button/assets/style.css'; @@ -22,11 +23,12 @@ export default class Banner extends React.Component {

ANT

DESIGN

-

一个 UI 设计语言

+

- 开始探索 + +
-

最佳实践

-

近一年的中后台设计实践，积累了大量的优秀案例。

+

+

diff --git a/site/theme/template/Home/Page2.jsx b/site/theme/template/Home/Page2.jsx index a9223b6302..ce1da9277d 100644 --- a/site/theme/template/Home/Page2.jsx +++ b/site/theme/template/Home/Page2.jsx @@ -1,4 +1,5 @@ import React from 'react'; +import { FormattedMessage } from 'react-intl'; import { Link } from 'react-router'; import TweenOne from 'rc-tween-one'; import ScrollOverPack from 'rc-scroll-anim/lib/ScrollOverPack'; @@ -14,12 +15,12 @@ export default function Page2() { -

设计模式

-

总结中后台设计中反复出现的问题，并提供相应的解决方案。

+

+

diff --git a/site/theme/template/Home/Page3.jsx b/site/theme/template/Home/Page3.jsx index f0cf53ddeb..ba0bfee915 100644 --- a/site/theme/template/Home/Page3.jsx +++ b/site/theme/template/Home/Page3.jsx @@ -1,5 +1,6 @@ import React from 'react'; import { Link } from 'react-router'; +import { FormattedMessage } from 'react-intl'; import TweenOne from 'rc-tween-one'; import ScrollOverPack from 'rc-scroll-anim/lib/ScrollOverPack'; import { Icon, Button } from 'antd'; @@ -17,12 +18,12 @@ export default function Page3() { -

丰富的基础组件

-

丰富、灵活、实用的基础组件，为业务产品提供强有力的设计支持。

+

+

diff --git a/site/theme/template/Home/Page4.jsx b/site/theme/template/Home/Page4.jsx index bccb9176a4..58c540281f 100644 --- a/site/theme/template/Home/Page4.jsx +++ b/site/theme/template/Home/Page4.jsx @@ -1,5 +1,6 @@ import React from 'react'; import TweenOne from 'rc-tween-one'; +import { FormattedMessage } from 'react-intl'; import ScrollOverPack from 'rc-scroll-anim/lib/ScrollOverPack'; import QueueAnim from 'rc-queue-anim'; @@ -11,8 +12,8 @@ export default function Page4() { -

微小·确定·幸福

-

这是一套致力于提升『用户』和『设计者』使用体验的中后台设计语言。

+

+

GitHub

- antd-init - 脚手架 + antd-init - +
- ant-tool - 开发工具 + ant-tool -
- dva - 应用框架 + dva -
  • -

    相关站点

    -
    Ant Design Mobile - 移动版
    -
    G2 - 数据可视化
    -
    AntV - 数据可视化规范
    -
    Ant Motion - 设计动效
    -
    Ant UX - 页面逻辑素材
    +

    + +
    G2 - + +
    +
    AntV - + +
    +
    Ant Motion - + +
    +
    Ant UX - + +
  • -

    社区

    +

  • -
    ©2016 蚂蚁金服体验技术部出品
    +
    ©2016
    Powered by BiSheng
    - 文档版本： +
    - { - window.location.port ? ( - - ) : null - } + diff --git a/site/theme/template/Layout/index.jsx b/site/theme/template/Layout/index.jsx index e0884360b9..ca0f650c73 100644 --- a/site/theme/template/Layout/index.jsx +++ b/site/theme/template/Layout/index.jsx @@ -12,9 +12,8 @@ window.react = React; window['react-dom'] = ReactDOM; window.antd = require('antd'); -const isZhCN = (typeof localStorage !== 'undefined' && localStorage.getItem('locale') !== 'en-US'); - // (typeof localStorage !== 'undefined' && localStorage.getItem('locale') === 'zh-CN') || - // (navigator.language === 'zh-CN'); +const isZhCN = (typeof localStorage !== 'undefined' && localStorage.getItem('locale') === 'zh-CN') || + (navigator.language === 'zh-CN'); const appLocale = isZhCN ? cnLocale : enLocale; addLocaleData(appLocale.data); From 76ce4455762fde568ae9251eb6bc7e7138cd1831 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Thu, 8 Sep 2016 17:48:55 +0800 Subject: [PATCH 0054/2145] site: fix start button --- site/theme/static/home.less | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/site/theme/static/home.less b/site/theme/static/home.less index ce3f52f703..c709cc4816 100644 --- a/site/theme/static/home.less +++ b/site/theme/static/home.less @@ -65,8 +65,9 @@ > a { float: right; - width: 155px; + min-width: 155px; height: 45px; + padding: 0 16px; border-radius: 6px; border: 1px solid #00AAEE; color: #00AAEE; From 4b9d63d08d26a013d8669332a55f085fc203b66f Mon Sep 17 00:00:00 2001 From: yiminghe Date: Thu, 8 Sep 2016 20:38:08 +0800 Subject: [PATCH 0055/2145] add promise polyfill --- site/theme/static/template.html | 114 +++++++++++++++++--------------- 1 file changed, 62 insertions(+), 52 deletions(-) diff --git a/site/theme/static/template.html b/site/theme/static/template.html index 3e47442d71..dbd446cd6a 100644 --- a/site/theme/static/template.html +++ b/site/theme/static/template.html @@ -1,56 +1,66 @@ - - - - - Ant Design - 一个 UI 设计语言 - - - - - - -
    -
    - -
    A Design Language
    -
    - - - - - + if (!window.Promise) { + document.writeln(' + + +
    +
    + +
    A Design Language
    +
    + + + + From 3f1960f233910faef799449b40f1608e2f5f4ffe Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 8 Sep 2016 21:27:38 +0800 Subject: [PATCH 0056/2145] fix fixed columns align bug in small Table, close #2933 --- components/table/style/index.less | 1 + 1 file changed, 1 insertion(+) diff --git a/components/table/style/index.less b/components/table/style/index.less index 65676ce311..0abf231847 100644 --- a/components/table/style/index.less +++ b/components/table/style/index.less @@ -160,6 +160,7 @@ border: 1px solid @border-color-split; border-radius: @border-radius-base; + .@{table-prefix-cls}-header > table, .@{table-prefix-cls}-body > table { border: 0; padding: 0 8px; From 4026221d451b246956983bb42140142d4a48b7d7 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Fri, 9 Sep 2016 13:55:21 +0800 Subject: [PATCH 0057/2145] deps: hello moment (#2887) * deps: upgrade TimePicker * deps: upgrade DatePicker * deps: upgrade Calendar * fix: moment should work with LocaleProvider * feat: update API of TimePicker * feat: update Calendar's APIs * feat: update DatePicker's APIs * doc: update demo * revert: add dateString and timeString and so on * feat: add Calendar[defaultValue] * feat: add defaultPickerValue * docs: update docs about date picker * feat: set moment locale to zh-cn automatically --- components/calendar/Header.tsx | 25 +++-- components/calendar/demo/basic.md | 2 +- components/calendar/demo/custom-render.md | 9 +- components/calendar/demo/locale.md | 9 +- components/calendar/demo/notice-calendar.md | 4 +- components/calendar/index.en-US.md | 14 +-- components/calendar/index.tsx | 37 +++--- components/calendar/index.zh-CN.md | 14 +-- components/date-picker/Calendar.tsx | 2 +- components/date-picker/RangePicker.tsx | 42 +++---- components/date-picker/createPicker.tsx | 33 +++--- components/date-picker/demo/basic.md | 4 +- components/date-picker/demo/disabled-date.md | 2 +- components/date-picker/demo/disabled.md | 3 +- components/date-picker/demo/formatter.md | 8 +- components/date-picker/demo/locale.md | 30 +++-- components/date-picker/demo/month-picker.md | 6 +- components/date-picker/demo/range.md | 10 +- components/date-picker/demo/start-end.md | 8 +- components/date-picker/demo/time.md | 4 +- components/date-picker/index.en-US.md | 39 ++++--- components/date-picker/index.tsx | 19 ++-- components/date-picker/index.zh-CN.md | 39 ++++--- components/date-picker/locale/en_US.tsx | 16 +-- components/date-picker/locale/ru_RU.tsx | 14 +-- components/date-picker/locale/zh_CN.tsx | 21 ++-- components/date-picker/style/MonthPanel.less | 2 +- components/date-picker/style/YearPanel.less | 2 +- components/date-picker/wrapPicker.tsx | 34 +----- components/form/demo/mix.md | 5 +- components/form/demo/validate-other.md | 11 +- components/locale-provider/demo/all.md | 16 ++- components/time-picker/demo/disabled.md | 3 +- components/time-picker/demo/size.md | 7 +- .../time-picker/demo/without-seconds.md | 4 +- components/time-picker/index.en-US.md | 14 +-- components/time-picker/index.tsx | 105 ++++++------------ components/time-picker/index.zh-CN.md | 12 +- components/time-picker/locale/en_US.tsx | 6 +- components/time-picker/locale/ru_RU.tsx | 6 +- components/time-picker/locale/zh_CN.tsx | 6 +- custom-typings.d.ts | 22 +--- package.json | 4 +- tsconfig.json | 3 +- 44 files changed, 319 insertions(+), 357 deletions(-) diff --git a/components/calendar/Header.tsx b/components/calendar/Header.tsx index 8ebf545a33..1af4080988 100644 --- a/components/calendar/Header.tsx +++ b/components/calendar/Header.tsx @@ -1,5 +1,5 @@ +import React from 'react'; import { PropTypes } from 'react'; -import * as React from 'react'; import { PREFIX_CLS } from './Constants'; import Select from '../select'; import { Group, Button } from '../radio'; @@ -64,9 +64,19 @@ export default class Header extends React.Component { ); } - getMonthSelectElement(month) { + getMonthsLocale(value) { + const current = value.clone(); + const localeData = value.localeData(); + const months = []; + for (let i = 0; i < 12; i++) { + current.month(i); + months.push(localeData.monthsShort(current)); + } + return months; + } + + getMonthSelectElement(month, months) { const props = this.props; - const months = props.locale.format.months; const { prefixCls, fullscreen } = props; const options = []; @@ -89,13 +99,13 @@ export default class Header extends React.Component { onYearChange = (year) => { const newValue = this.props.value.clone(); - newValue.setYear(parseInt(year, 10)); + newValue.year(parseInt(year, 10)); this.props.onValueChange(newValue); } onMonthChange = (month) => { const newValue = this.props.value.clone(); - newValue.setMonth(parseInt(month, 10)); + newValue.month(parseInt(month, 10)); this.props.onValueChange(newValue); } @@ -105,8 +115,9 @@ export default class Header extends React.Component { render() { const { type, value, prefixCls, locale, fullscreen } = this.props; - const yearSelect = this.getYearSelectElement(value.getYear()); - const monthSelect = type === 'date' ? this.getMonthSelectElement(value.getMonth()) : null; + const yearSelect = this.getYearSelectElement(value.year()); + const monthSelect = type === 'date' ? + this.getMonthSelectElement(value.month(), this.getMonthsLocale(value)) : null; const size = (fullscreen ? 'default' : 'small') as any; const typeSwitch = ( diff --git a/components/calendar/demo/basic.md b/components/calendar/demo/basic.md index 712ace6d61..6e5093702e 100644 --- a/components/calendar/demo/basic.md +++ b/components/calendar/demo/basic.md @@ -1,6 +1,6 @@ --- order: 0 -title: +title: zh-CN: 基本 en-US: Basic --- diff --git a/components/calendar/demo/custom-render.md b/components/calendar/demo/custom-render.md index e0470ee64c..1cd5ea3041 100644 --- a/components/calendar/demo/custom-render.md +++ b/components/calendar/demo/custom-render.md @@ -1,6 +1,6 @@ --- order: 1 -title: +title: zh-CN: 自定义渲染 en-US: Custom Render --- @@ -15,17 +15,18 @@ This component can be rendered by using `dateCellRender` and `monthCellRender` w ````jsx import { Calendar } from 'antd'; +import moment from 'moment'; function dateCellRender(value) { - return
    自定义日数据 {value.getDayOfMonth()}
    ; + return
    自定义日数据 {value.date()}
    ; } function monthCellRender(value) { - return
    自定义月数据 {value.getMonth()}
    ; + return
    自定义月数据 {value.month()}
    ; } ReactDOM.render( - , mountNode); diff --git a/components/calendar/demo/locale.md b/components/calendar/demo/locale.md index 48b1fdb476..0a5bd4690d 100644 --- a/components/calendar/demo/locale.md +++ b/components/calendar/demo/locale.md @@ -7,21 +7,24 @@ title: ## zh-CN -通过 `locale` 配置时区、语言等, 默认支持 en_US, zh_CN +通过 `locale` 配置语言, 默认支持 en_US, zh_CN ## en-US -To set the properties like time zone, language and etc. en_US, zh_CN are supported by default. +To set the language. en_US, zh_CN are supported by default. ````jsx import { Calendar } from 'antd'; import enUS from 'antd/lib/calendar/locale/en_US'; +import moment from 'moment'; +// It's recommended to set moment locale globally, otherwise, you need to set it by `value` or `defaultValue` +// moment.locale('en'); function onPanelChange(value, mode) { console.log(value, mode); } ReactDOM.render( - + , mountNode); ```` diff --git a/components/calendar/demo/notice-calendar.md b/components/calendar/demo/notice-calendar.md index de63332f22..f3f0b440c1 100644 --- a/components/calendar/demo/notice-calendar.md +++ b/components/calendar/demo/notice-calendar.md @@ -18,7 +18,7 @@ import { Calendar } from 'antd'; function getListData(value) { let listData; - switch (value.getDayOfMonth()) { + switch (value.date()) { case 8: listData = [ { type: 'warning', content: '这里是警告事项.' }, @@ -61,7 +61,7 @@ function dateCellRender(value) { } function getMonthData(value) { - if (value.getMonth() === 8) { + if (value.month() === 8) { return 1394; } } diff --git a/components/calendar/index.en-US.md b/components/calendar/index.en-US.md index 825eae4b60..f9b1d3e0f5 100644 --- a/components/calendar/index.en-US.md +++ b/components/calendar/index.en-US.md @@ -23,11 +23,11 @@ When data is in the form of date, such as schedule, timetable, prices calendar, | Property | Description | Type | Default | |--------------|----------------|----------|--------------| -| value | set date | Date | current date | -| defaultValue | set default date | Date | current date | +| value | set date | [moment](http://momentjs.com/) | current date | +| defaultValue | set default date | [moment](http://momentjs.com/) | default date | | mode | can be set to month or year | string | month | -| fullscreen | to set whether full-screen display | bool | true | -| dateCellRender | to set the way of renderer the date cell| function([GregorianCalendar](https://github.com/yiminghe/gregorian-calendar/))| - | -| monthCellRender | to set the way of renderer the month cell | function([GregorianCalendar](https://github.com/yiminghe/gregorian-calendar/)) | - | -| locale | set locale | object | [defualt](https://github.com/ant-design/ant-design/issues/424) | -| onPanelChange| the callback when panel change | function(date, mode) | - | +| fullscreen | to set whether full-screen display | boolean | true | +| dateCellRender | to set the way of renderer the date cell | function(date: moment): ReactNode | - | +| monthCellRender | to set the way of renderer the month cell | function(date: moment): ReactNode | - | +| locale | set locale | Object | [defualt](https://github.com/ant-design/ant-design/issues/424) | +| onPanelChange| the callback when panel change | function(date: moment, mode: string) | - | diff --git a/components/calendar/index.tsx b/components/calendar/index.tsx index bb185e838e..e7864ca9f6 100644 --- a/components/calendar/index.tsx +++ b/components/calendar/index.tsx @@ -1,8 +1,8 @@ +import React from 'react'; import { PropTypes } from 'react'; -import * as React from 'react'; -import GregorianCalendar from 'gregorian-calendar'; -import defaultLocale from './locale/zh_CN'; +import moment from 'moment'; import FullCalendar from 'rc-calendar/lib/FullCalendar'; +import defaultLocale from './locale/zh_CN'; import { PREFIX_CLS } from './Constants'; import Header from './Header'; import assign from 'object-assign'; @@ -25,15 +25,15 @@ interface CalendarContext { export interface CalendarProps { prefixCls?: string; className?: string; - value?: Date; - defaultValue?: Date; + value?: moment.Moment; + defaultValue?: moment.Moment; mode?: 'month' | 'year'; fullscreen?: boolean; - dateCellRender?: (date) => React.ReactNode; - monthCellRender?: (month) => React.ReactNode; + dateCellRender?: (date: moment.Moment) => React.ReactNode; + monthCellRender?: (date: moment.Moment) => React.ReactNode; locale?: any; style?: React.CSSProperties; - onPanelChange?: (date: Date, mode: string) => void; + onPanelChange?: (date: moment.Moment, mode: string) => void; } export default class Calendar extends React.Component { @@ -56,7 +56,7 @@ export default class Calendar extends React.Component { className: PropTypes.string, style: PropTypes.object, onPanelChange: PropTypes.func, - value: PropTypes.instanceOf(Date), + value: PropTypes.object, }; static contextTypes = { @@ -68,29 +68,23 @@ export default class Calendar extends React.Component { constructor(props) { super(props); this.state = { - value: this.parseDateFromValue(props.value || new Date()), + value: props.value || props.defaultValue || moment(), mode: props.mode, }; } - parseDateFromValue(value) { - const date = new GregorianCalendar(this.getLocale()); - date.setTime(+value); - return date; - } - componentWillReceiveProps(nextProps) { if ('value' in nextProps) { this.setState({ - value: this.parseDateFromValue(nextProps.value), + value: nextProps.value, }); } } getLocale = () => { const props = this.props; - let locale = defaultLocale; const context = this.context; + let locale = defaultLocale; if (context && context.antLocale && context.antLocale.Calendar) { locale = context.antLocale.Calendar; } @@ -100,13 +94,12 @@ export default class Calendar extends React.Component { return result; } - monthCellRender = (value, locale) => { + monthCellRender = (value) => { const prefixCls = this.props.prefixCls; - const month = value.getMonth(); return (
    - {locale.format.shortMonths[month]} + {value.localeData().monthsShort(value)}
    {this.props.monthCellRender(value)} @@ -120,7 +113,7 @@ export default class Calendar extends React.Component { return (
    - {zerofixed(value.getDayOfMonth())} + {zerofixed(value.date())}
    {this.props.dateCellRender(value)} diff --git a/components/calendar/index.zh-CN.md b/components/calendar/index.zh-CN.md index 520abba811..489eda649b 100644 --- a/components/calendar/index.zh-CN.md +++ b/components/calendar/index.zh-CN.md @@ -25,11 +25,11 @@ english: Calendar | 参数 | 说明 | 类型 | 默认值 | |--------------|----------------|----------|--------------| -| value | 展示日期 | Date | 当前日期 | -| defaultValue | 默认展示日期 | Date | 当前日期 | +| value | 展示日期 | [moment](http://momentjs.com/) | 当前日期 | +| defaultValue | 默认展示的日期 | [moment](http://momentjs.com/) | 默认日期 | | mode | 初始模式，`month/year` | string | month | -| fullscreen | 是否全屏显示 | bool | true | -| dateCellRender | 自定义渲染日期单元格| function([GregorianCalendar](https://github.com/yiminghe/gregorian-calendar/))| 无 | -| monthCellRender | 自定义渲染月单元格 | function([GregorianCalendar](https://github.com/yiminghe/gregorian-calendar/)) | 无 | -| locale | 国际化配置 | object | [默认配置](https://github.com/ant-design/ant-design/issues/424) | -| onPanelChange| 日期面板变化回调 | function(date, mode) | 无 | +| fullscreen | 是否全屏显示 | boolean | true | +| dateCellRender | 自定义渲染日期单元格| function(date: moment): ReactNode | 无 | +| monthCellRender | 自定义渲染月单元格 | function(date: moment): ReactNode | 无 | +| locale | 国际化配置 | Object | [默认配置](https://github.com/ant-design/ant-design/issues/424) | +| onPanelChange| 日期面板变化回调 | function(date: moment, mode: string) | 无 | diff --git a/components/date-picker/Calendar.tsx b/components/date-picker/Calendar.tsx index bb60c4cf48..10c1acc42e 100644 --- a/components/date-picker/Calendar.tsx +++ b/components/date-picker/Calendar.tsx @@ -1,4 +1,4 @@ -import * as React from 'react'; +import React from 'react'; import CalendarLocale from 'rc-calendar/lib/locale/zh_CN'; import RcCalendar from 'rc-calendar'; diff --git a/components/date-picker/RangePicker.tsx b/components/date-picker/RangePicker.tsx index 0ef673c41f..8176c11168 100644 --- a/components/date-picker/RangePicker.tsx +++ b/components/date-picker/RangePicker.tsx @@ -1,5 +1,5 @@ -import * as React from 'react'; -import GregorianCalendar from 'gregorian-calendar'; +import React from 'react'; +import moment from 'moment'; import RangeCalendar from 'rc-calendar/lib/RangeCalendar'; import RcDatePicker from 'rc-calendar/lib/Picker'; import classNames from 'classnames'; @@ -12,24 +12,18 @@ export default class RangePicker extends React.Component { constructor(props) { super(props); - const { value, defaultValue, parseDateFromValue } = this.props; + const { value, defaultValue } = this.props; const start = (value && value[0]) || defaultValue[0]; const end = (value && value[1]) || defaultValue[1]; this.state = { - value: [ - parseDateFromValue(start), - parseDateFromValue(end), - ], + value: [start, end], }; } componentWillReceiveProps(nextProps) { if ('value' in nextProps) { - const value = nextProps.value || []; - const start = nextProps.parseDateFromValue(value[0]); - const end = nextProps.parseDateFromValue(value[1]); this.setState({ - value: [start, end], + value: nextProps.value || [], }); } } @@ -46,21 +40,15 @@ export default class RangePicker extends React.Component { if (!('value' in props)) { this.setState({ value }); } - const startDate = value[0] ? new Date(value[0].getTime()) : null; - const endDate = value[1] ? new Date(value[1].getTime()) : null; - const startDateString = value[0] ? props.getFormatter().format(value[0]) : ''; - const endDateString = value[1] ? props.getFormatter().format(value[1]) : ''; - props.onChange([startDate, endDate], [startDateString, endDateString]); + props.onChange(value, [ + (value[0] && value[0].format(props.format)) || '', + (value[1] && value[1].format(props.format)) || '', + ]); } render() { const props = this.props; const locale = props.locale; - // 以下两行代码 - // 给没有初始值的日期选择框提供本地化信息 - // 否则会以周日开始排 - let defaultCalendarValue = new GregorianCalendar(locale); - defaultCalendarValue.setTime(Date.now()); const { disabledDate, showTime, getCalendarContainer, transitionName, disabled, popupStyle, align, style, onOk } = this.props; @@ -92,16 +80,15 @@ export default class RangePicker extends React.Component { const calendar = ( ); @@ -114,7 +101,7 @@ export default class RangePicker extends React.Component { return ( { getCalendarContainer={getCalendarContainer} onOpen={props.toggleOpen} onClose={props.toggleOpen} - {...pickerChangeHandler} > { ({ value }) => { @@ -136,7 +122,7 @@ export default class RangePicker extends React.Component { @@ -144,7 +130,7 @@ export default class RangePicker extends React.Component { diff --git a/components/date-picker/createPicker.tsx b/components/date-picker/createPicker.tsx index d34fd5d59a..c7750e8f2d 100644 --- a/components/date-picker/createPicker.tsx +++ b/components/date-picker/createPicker.tsx @@ -1,14 +1,13 @@ -import * as React from 'react'; +import React from 'react'; +import moment from 'moment'; import MonthCalendar from 'rc-calendar/lib/MonthCalendar'; import RcDatePicker from 'rc-calendar/lib/Picker'; -import GregorianCalendar from 'gregorian-calendar'; import classNames from 'classnames'; import assign from 'object-assign'; import Icon from '../icon'; export interface PickerProps { - parseDateFromValue?: Function; - value?: string | Date; + value?: moment.Moment; } export default function createPicker(TheCalendar) { @@ -16,15 +15,16 @@ export default function createPicker(TheCalendar) { const CalenderWrapper = React.createClass({ getInitialState() { + const props = this.props; return { - value: this.props.parseDateFromValue(this.props.value || this.props.defaultValue), + value: props.value || props.defaultValue, }; }, componentWillReceiveProps(nextProps: PickerProps) { if ('value' in nextProps) { this.setState({ - value: nextProps.parseDateFromValue(nextProps.value), + value: nextProps.value, }); } }, @@ -41,18 +41,12 @@ export default function createPicker(TheCalendar) { if (!('value' in props)) { this.setState({ value }); } - const timeValue = value ? new Date(value.getTime()) : null; - props.onChange(timeValue, value ? props.getFormatter().format(value) : ''); + props.onChange(value, (value && value.format(props.format)) || ''); }, render() { const props = this.props; const locale = props.locale; - // 以下两行代码 - // 给没有初始值的日期选择框提供本地化信息 - // 否则会以周日开始排 - let defaultCalendarValue = new GregorianCalendar(locale); - defaultCalendarValue.setTime(Date.now()); const placeholder = ('placeholder' in props) ? props.placeholder : locale.lang.placeholder; @@ -85,12 +79,11 @@ export default function createPicker(TheCalendar) { const calendar = ( { ({ value }) => { return ( - + {clearIcon} - ); - } + ); } + } ); diff --git a/components/date-picker/demo/basic.md b/components/date-picker/demo/basic.md index 0746f61b44..4e3accd60d 100644 --- a/components/date-picker/demo/basic.md +++ b/components/date-picker/demo/basic.md @@ -16,8 +16,8 @@ The most basic usage. ````jsx import { DatePicker } from 'antd'; -function onChange(value, dateString) { - console.log(value, dateString); +function onChange(date, dateString) { + console.log(date, dateString); } ReactDOM.render(, mountNode); diff --git a/components/date-picker/demo/disabled-date.md b/components/date-picker/demo/disabled-date.md index 23e8ccc0b8..7a1162744c 100644 --- a/components/date-picker/demo/disabled-date.md +++ b/components/date-picker/demo/disabled-date.md @@ -22,7 +22,7 @@ import { DatePicker } from 'antd'; const disabledDate = function (current) { // can not select days after today - return current && current.getTime() > Date.now(); + return current && current.valueOf() > Date.now(); }; ReactDOM.render( diff --git a/components/date-picker/demo/disabled.md b/components/date-picker/demo/disabled.md index d6732ce8f5..8d1b1bbfde 100644 --- a/components/date-picker/demo/disabled.md +++ b/components/date-picker/demo/disabled.md @@ -15,8 +15,9 @@ A disabled state of the `DatePicker`. ````jsx import { DatePicker } from 'antd'; +import moment from 'moment'; ReactDOM.render( - + , mountNode); ```` diff --git a/components/date-picker/demo/formatter.md b/components/date-picker/demo/formatter.md index b1a8634160..fb10eaf41b 100644 --- a/components/date-picker/demo/formatter.md +++ b/components/date-picker/demo/formatter.md @@ -7,16 +7,18 @@ title: ## zh-CN -使用 `format` 属性，可以自定义你需要的日期显示格式，如 `yyyy/MM/dd`。 +使用 `format` 属性，可以自定义你需要的日期显示格式，如 `YYYY/MM/DD`。 ## en-US -By using `format`, you can customize the format(such as `yyyy/MM/dd`) the date is displayed in. +By using `format`, you can customize the format(such as `YYYY/MM/DD`) the date is displayed in. ````jsx import { DatePicker } from 'antd'; +import moment from 'moment'; +const format = 'YYYY/MM/DD'; ReactDOM.render( - + , mountNode); ```` diff --git a/components/date-picker/demo/locale.md b/components/date-picker/demo/locale.md index eabd7a8511..d57647fe67 100644 --- a/components/date-picker/demo/locale.md +++ b/components/date-picker/demo/locale.md @@ -1,28 +1,40 @@ --- order: 10 -title: +title: zh-CN: 国际化 en-US: Locale --- ## zh-CN -通过 `locale` 配置时区、语言等, 默认支持 `en_US`，`zh_CN`。不同版本带有不同的时区配置，如果所在时区与默认配置不同，需要自行设置。上面的 demo 就是在东八区使用 en_US 版本的例子。 +通过 `locale` 语言, 默认支持 `en_US`，`zh_CN`。 + +moment 会自动使用当前时区，如果需要使用别的时区，则需要自行设置，设置方法请参考 [moment 官方文档](http://momentjs.com/)。 ## en-US -Use locale to set the properties like time zone, language and etc. `en_US`, `zh_CN` are supported by default. There are different time zone configuration in different versions, you must set it by yourself if your time zone does not match the default setting. The example above is to show how to use the `en_US` version at GMT+8 time zone. +Use locale to set the language. `en_US`, `zh_CN` are supported by default. + +moment will use your time zone automatically. If you want to set other time zone, please set it by yourself. [More](http://momentjs.com/) ````jsx import { DatePicker } from 'antd'; import enUS from 'antd/lib/date-picker/locale/en_US'; +import moment from 'moment'; +// It's recommended to set moment locale and time zone globally, +// otherwise, you need to set it by `value` or `defaultValue` or `defaultPickerValue`. +// moment.locale('en'); -const customLocale = { - timezoneOffset: 8 * 60, - firstDayOfWeek: 0, - minimalDaysInFirstWeek: 1, -}; +const log = console.log.bind(console); -ReactDOM.render(, mountNode); +ReactDOM.render( + , + mountNode +); ```` diff --git a/components/date-picker/demo/month-picker.md b/components/date-picker/demo/month-picker.md index 5c54f4c806..073608cda6 100644 --- a/components/date-picker/demo/month-picker.md +++ b/components/date-picker/demo/month-picker.md @@ -1,6 +1,6 @@ --- order: 9 -title: +title: zh-CN: 月选择器 en-US: MonthPicker --- @@ -15,8 +15,10 @@ You can get a month selector by using `MonthPicker`. ````jsx import { DatePicker } from 'antd'; +import moment from 'moment'; + const MonthPicker = DatePicker.MonthPicker; ReactDOM.render( - + , mountNode); ```` diff --git a/components/date-picker/demo/range.md b/components/date-picker/demo/range.md index 1b12eb2836..4193fd8e4d 100644 --- a/components/date-picker/demo/range.md +++ b/components/date-picker/demo/range.md @@ -1,6 +1,6 @@ --- order: 8 -title: +title: zh-CN: 日期范围二 en-US: Date range, case 2 --- @@ -19,13 +19,13 @@ By using `RangePicker` to specify a date range, you can achieve a better interac import { DatePicker } from 'antd'; const RangePicker = DatePicker.RangePicker; -function onChange(value, dateString) { - console.log('From: ', value[0], ', to: ', value[1]); - console.log('From: ', dateString[0], ', to: ', dateString[1]); +function onChange(dates, dateStrings) { + console.log('From: ', dates[0], ', to: ', dates[1]); + console.log('From: ', dateStrings[0], ', to: ', dateStrings[1]); } ReactDOM.render(

    - +
    , mountNode); ```` diff --git a/components/date-picker/demo/start-end.md b/components/date-picker/demo/start-end.md index feb5a2bf11..9a95c9ba54 100644 --- a/components/date-picker/demo/start-end.md +++ b/components/date-picker/demo/start-end.md @@ -29,13 +29,13 @@ const DateRange = React.createClass({ if (!startValue || !this.state.endValue) { return false; } - return startValue.getTime() > this.state.endValue.getTime(); + return startValue.valueOf() > this.state.endValue.valueOf(); }, disabledEndDate(endValue) { if (!endValue || !this.state.startValue) { return false; } - return endValue.getTime() <= this.state.startValue.getTime(); + return endValue.valueOf() <= this.state.startValue.valueOf(); }, onChange(field, value) { this.setState({ @@ -61,6 +61,8 @@ const DateRange = React.createClass({
    + , mountNode); ```` diff --git a/components/date-picker/index.en-US.md b/components/date-picker/index.en-US.md index 8f6d1b4f49..b41ecac935 100644 --- a/components/date-picker/index.en-US.md +++ b/components/date-picker/index.en-US.md @@ -1,7 +1,7 @@ --- category: Components type: Form Controls -english: DatePicker +title: DatePicker --- To select/input a date. @@ -14,17 +14,26 @@ By clicking the input box, you can select a date from a popup calendar. ### DatePicker -```html - +```jsx +import moment from 'moment-timezone'; + +// It's recommended to set locale and timezone in entry file globaly. +import 'moment/locale/zh-cn'; +moment.locale('zh-cn'); +moment.tz.setDefault('Aisa/Shanghai'); + + ``` +> Note: `Datepicker` is renamed to `DatePicker` after `0.11`. + | Property | Description | Type | Default | |--------------|----------------|----------|--------------| -| value | to set date | String/Date | - | -| defaultValue | to set default date | String/Date | - | -| format | to set the date format, refer to [GregorianCalendarFormat](https://github.com/yiminghe/gregorian-calendar-format) | String | "yyyy-MM-dd" | +| value | to set date | [moment](http://momentjs.com/) | - | +| defaultValue | to set default date | [moment](http://momentjs.com/) | - | +| format | to set the date format, refer to [moment.js](http://momentjs.com/) | String | "YYYY-MM-DD" | | disabledDate | to specify the date that cannot be selected | function | - | -| onChange | a callback function, can be executed when the selected time is changing | function(date, dateString) | - | +| onChange | a callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) | - | | disabled | determine whether the DatePicker is disabled | Boolean | false | | style | to customize the style of the input box | Object | {} | | popupStyle | to customize the style of the popup calendar | Object | {} | @@ -40,11 +49,11 @@ By clicking the input box, you can select a date from a popup calendar. | Property | Description | Type | Default | |--------------|----------------|----------|--------------| -| value | to set date | String/Date | - | -| defaultValue | to set default date | String/Date | - | -| format | to set the date format, refer to [GregorianCalendarFormat](https://github.com/yiminghe/gregorian-calendar-format) | String | "yyyy-MM" | +| value | to set date | [moment](http://momentjs.com/) | - | +| defaultValue | to set default date | [moment](http://momentjs.com/) | - | +| format | to set the date format, refer to [moment.js](http://momentjs.com/) | String | "YYYY-MM" | | disabledDate | to specify the date that cannot be selected | function | - | -| onChange | a callback function, can be executed when the selected time is changing | function(Date value) | - | +| onChange | a callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) | - | | disabled | determine whether the MonthPicker is disabled | Boolean | false | | style | to customize the style of the input box | Object | {} | | popupStyle | to customize the style of the popup calendar | Object | {} | @@ -56,10 +65,10 @@ By clicking the input box, you can select a date from a popup calendar. | Property | Description | Type | Default | |--------------|----------------|----------|--------------| -| value | to set date | [String/Date, String/Date] | - | -| defaultValue | to set default date | [String/Date, String/Date] | - | -| format | to set the date format | String | "yyyy-MM-dd HH:mm:ss" | -| onChange | a callback function, can be executed when the selected time is changing | function(date[], dateString[]) | - | +| value | to set date | [moment, moment] | - | +| defaultValue | to set default date | [moment, moment] | - | +| format | to set the date format | String | "YYYY-MM-DD HH:mm:ss" | +| onChange | a callback function, can be executed when the selected time is changing | function(dates: [moment, moment], dateStrings: [string, string]) | - | | showTime | to provide an additional time selection | Object/Boolean | [TimePicker Options](http://ant.design/components/time-picker/#api) | The following properties are the same with `DatePicker`: `disabled` `style` `popupStyle` `size` `locale` `showTime` `onOk` `getCalendarContainer` diff --git a/components/date-picker/index.tsx b/components/date-picker/index.tsx index 108cc7824e..145dd2af34 100644 --- a/components/date-picker/index.tsx +++ b/components/date-picker/index.tsx @@ -1,4 +1,5 @@ -import * as React from 'react'; +import React from 'react'; +import moment from 'moment'; import assign from 'object-assign'; import RcCalendar from 'rc-calendar'; import MonthCalendar from 'rc-calendar/lib/MonthCalendar'; @@ -19,9 +20,10 @@ interface PickerProps { } interface SinglePickerProps { - value?: string | Date; - defaultValue?: string | Date; - onChange?: (date: Date, dateString: string) => void; + value?: moment.Moment; + defaultValue?: moment.Moment; + defaultPickerValue?: moment.Moment; + onChange?: (date: moment.Moment, dateString: string) => void; } export interface DatePickerProps extends PickerProps, SinglePickerProps { @@ -31,12 +33,13 @@ const DatePicker = wrapPicker(createPicker(RcCalendar)) as React.ClassicComponen export interface MonthPickerProps extends PickerProps, SinglePickerProps { } -const MonthPicker = wrapPicker(createPicker(MonthCalendar), 'yyyy-MM') as React.ClassicComponentClass; +const MonthPicker = wrapPicker(createPicker(MonthCalendar), 'YYYY-MM') as React.ClassicComponentClass; export interface RangePickerProps extends PickerProps { - value?: [string | Date, string | Date]; - defaultValue?: [string | Date, string | Date]; - onChange?: (dates: [Date, Date], dateStrings: [String, String]) => void; + value?: [moment.Moment, moment.Moment]; + defaultValue?: [moment.Moment, moment.Moment]; + defaultPickerValue?: [moment.Moment, moment.Moment]; + onChange?: (dates: [moment.Moment, moment.Moment], dateStrings: [string, string]) => void; showTime?: TimePickerProps; } diff --git a/components/date-picker/index.zh-CN.md b/components/date-picker/index.zh-CN.md index e52f1d325c..8458a28477 100644 --- a/components/date-picker/index.zh-CN.md +++ b/components/date-picker/index.zh-CN.md @@ -1,8 +1,8 @@ --- category: Components -chinese: 日期选择框 type: Form Controls -english: DatePicker +title: DatePicker +subtitle: 日期选择框 --- 输入或选择日期的控件。 @@ -15,17 +15,24 @@ english: DatePicker ### DatePicker -```html - +```jsx +import moment from 'moment-timezone'; + +// 推荐在入口文件全局设置 locale 与时区 +import 'moment/locale/zh-cn'; +moment.locale('zh-cn'); +moment.tz.setDefault('Aisa/Shanghai'); + + ``` | 参数 | 说明 | 类型 | 默认值 | |--------------|----------------|----------|--------------| -| value | 日期 | string or Date | 无 | -| defaultValue | 默认日期 | string or Date | 无 | -| format | 展示的日期格式，配置参考 [GregorianCalendarFormat](https://github.com/yiminghe/gregorian-calendar-format) | string | "yyyy-MM-dd" | +| value | 日期 | [moment](http://momentjs.com/) | 无 | +| defaultValue | 默认日期 | [moment](http://momentjs.com/) | 无 | +| format | 展示的日期格式，配置参考 [moment.js](http://momentjs.com/) | string | "YYYY-MM-DD" | | disabledDate | 不可选择的日期 | function | 无 | -| onChange | 时间发生变化的回调 | function(date, dateString) | 无 | +| onChange | 时间发生变化的回调 | function(date: moment, dateString: string) | 无 | | disabled | 禁用 | bool | false | | style | 自定义输入框样式 | object | {} | | popupStyle | 格外的弹出日历样式 | object | {} | @@ -40,11 +47,11 @@ english: DatePicker | 参数 | 说明 | 类型 | 默认值 | |--------------|----------------|----------|--------------| -| value | 日期 | string or Date | 无 | -| defaultValue | 默认日期 | string or Date | 无 | -| format | 展示的日期格式，配置参考 [GregorianCalendarFormat](https://github.com/yiminghe/gregorian-calendar-format) | string | "yyyy-MM" | +| value | 日期 | moment | 无 | +| defaultValue | 默认日期 | moment | 无 | +| format | 展示的日期格式，配置参考 [moment.js](http://momentjs.com/) | string | "YYYY-MM" | | disabledDate | 不可选择的日期 | function | 无 | -| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(Date value) | 无 | +| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: moment, dateString: string) | 无 | | disabled | 禁用 | bool | false | | style | 自定义输入框样式 | object | {} | | popupStyle | 格外的弹出日历样式 | object | {} | @@ -56,10 +63,10 @@ english: DatePicker | 参数 | 说明 | 类型 | 默认值 | |--------------|----------------|----------|--------------| -| value | 日期 | [string/Date, string/Date] | 无 | -| defaultValue | 默认日期 | [string/Date, string/Date] | 无 | -| format | 展示的日期格式 | string | "yyyy-MM-dd HH:mm:ss" | -| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date[], dateString[]) | 无 | +| value | 日期 | [moment, moment] | 无 | +| defaultValue | 默认日期 | [moment, moment] | 无 | +| format | 展示的日期格式 | string | "YYYY-MM-DD HH:mm:ss" | +| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(dates: [moment, moment], dateStrings: [string, string]) | 无 | | showTime | 增加时间选择功能 | Object or Boolean | [TimePicker Options](http://ant.design/components/time-picker/#api) | `disabled` `style` `popupStyle` `size` `locale` `showTime` `onOk` `getCalendarContainer` 属性与 DatePicker 的一致。 diff --git a/components/date-picker/locale/en_US.tsx b/components/date-picker/locale/en_US.tsx index 345128852d..67d787d6c7 100644 --- a/components/date-picker/locale/en_US.tsx +++ b/components/date-picker/locale/en_US.tsx @@ -1,15 +1,15 @@ -import GregorianCalendarLocale from 'gregorian-calendar/lib/locale/en_US'; import CalendarLocale from 'rc-calendar/lib/locale/en_US'; import TimePickerLocale from '../../time-picker/locale/en_US'; import assign from 'object-assign'; -// 统一合并为完整的 Locale -const locale = assign({}, GregorianCalendarLocale); -locale.lang = assign({ - placeholder: 'Select date', - rangePlaceholder: ['Start date', 'End date'], -}, CalendarLocale); -locale.timePickerLocale = assign({}, TimePickerLocale); +// 统一合并为完整的 Locale +const locale = { + lang: assign({ + placeholder: 'Select date', + rangePlaceholder: ['Start date', 'End date'], + }, CalendarLocale), + timePickerLocale: assign({}, TimePickerLocale), +}; // All settings at: // https://github.com/ant-design/ant-design/issues/424 diff --git a/components/date-picker/locale/ru_RU.tsx b/components/date-picker/locale/ru_RU.tsx index 80a46415fc..7e305e0b0e 100644 --- a/components/date-picker/locale/ru_RU.tsx +++ b/components/date-picker/locale/ru_RU.tsx @@ -2,17 +2,17 @@ * Created by Andrey Gayvoronsky on 13/04/16. */ -import GregorianCalendarLocale from 'gregorian-calendar/lib/locale/ru_RU'; import CalendarLocale from 'rc-calendar/lib/locale/ru_RU'; import TimePickerLocale from '../../time-picker/locale/ru_RU'; import assign from 'object-assign'; -const locale = assign({}, GregorianCalendarLocale); -locale.lang = assign({ - placeholder: 'Выберите дату', - rangePlaceholder: ['Начальная дата', 'Конечная дата'], -}, CalendarLocale); -locale.timePickerLocale = assign({}, TimePickerLocale); +const locale = { + lang: assign({ + placeholder: 'Выберите дату', + rangePlaceholder: ['Начальная дата', 'Конечная дата'], + }, CalendarLocale), + timePickerLocale: assign({}, TimePickerLocale), +}; // All settings at: // https://github.com/ant-design/ant-design/issues/424 diff --git a/components/date-picker/locale/zh_CN.tsx b/components/date-picker/locale/zh_CN.tsx index 350de8ce06..8a6a6d571d 100644 --- a/components/date-picker/locale/zh_CN.tsx +++ b/components/date-picker/locale/zh_CN.tsx @@ -1,15 +1,20 @@ -import GregorianCalendarLocale from 'gregorian-calendar/lib/locale/zh_CN'; import CalendarLocale from 'rc-calendar/lib/locale/zh_CN'; import TimePickerLocale from '../../time-picker/locale/zh_CN'; import assign from 'object-assign'; -// 统一合并为完整的 Locale -const locale = assign({}, GregorianCalendarLocale); -locale.lang = assign({ - placeholder: '请选择日期', - rangePlaceholder: ['开始日期', '结束日期'], -}, CalendarLocale); -locale.timePickerLocale = assign({}, TimePickerLocale); +// To set the default locale of moment to zh-cn globally. +import moment from 'moment'; +import 'moment/locale/zh-cn'; +moment.locale('zh-cn'); + +// 统一合并为完整的 Locale +const locale = { + lang: assign({ + placeholder: '请选择日期', + rangePlaceholder: ['开始日期', '结束日期'], + }, CalendarLocale), + timePickerLocale: assign({}, TimePickerLocale), +}; // should add whitespace between char in Button locale.lang.ok = '确 定'; diff --git a/components/date-picker/style/MonthPanel.less b/components/date-picker/style/MonthPanel.less index 48bd7083c1..cc7b76972e 100644 --- a/components/date-picker/style/MonthPanel.less +++ b/components/date-picker/style/MonthPanel.less @@ -1,6 +1,6 @@ .@{calendar-prefix-cls}-month-panel { left: 0; - top: 34px; + top: 1px; bottom: 0; right: 0; background: #fff; diff --git a/components/date-picker/style/YearPanel.less b/components/date-picker/style/YearPanel.less index c1b12d6c68..cdc253aeef 100644 --- a/components/date-picker/style/YearPanel.less +++ b/components/date-picker/style/YearPanel.less @@ -1,6 +1,6 @@ .@{calendar-prefix-cls}-year-panel { left: 0; - top: 34px; + top: 1px; bottom: 0; right: 0; background: #fff; diff --git a/components/date-picker/wrapPicker.tsx b/components/date-picker/wrapPicker.tsx index bfb93b465c..e8113067b9 100644 --- a/components/date-picker/wrapPicker.tsx +++ b/components/date-picker/wrapPicker.tsx @@ -1,8 +1,6 @@ +import React from 'react'; import { PropTypes } from 'react'; -import * as React from 'react'; -import TimePickerPanel from 'rc-time-picker/lib/module/Panel'; -import DateTimeFormat from 'gregorian-calendar-format'; -import GregorianCalendar from 'gregorian-calendar'; +import TimePickerPanel from 'rc-time-picker/lib/Panel'; import classNames from 'classnames'; import defaultLocale from './locale/zh_CN'; import assign from 'object-assign'; @@ -11,7 +9,7 @@ export default function wrapPicker(Picker, defaultFormat?) { const PickerWrapper = React.createClass({ getDefaultProps() { return { - format: defaultFormat || 'yyyy-MM-dd', + format: defaultFormat || 'YYYY-MM-DD', transitionName: 'slide-up', popupStyle: {}, onChange() { @@ -33,8 +31,8 @@ export default function wrapPicker(Picker, defaultFormat?) { getLocale() { const props = this.props; - let locale = defaultLocale; const context = this.context; + let locale = defaultLocale; if (context.antLocale && context.antLocale.DatePicker) { locale = context.antLocale.DatePicker; } @@ -44,25 +42,6 @@ export default function wrapPicker(Picker, defaultFormat?) { return result; }, - getFormatter() { - const format = this.props.format; - const formatter = new DateTimeFormat(format as string, this.getLocale().lang.format); - return formatter; - }, - - parseDateFromValue(value) { - if (value) { - if (typeof value === 'string') { - return this.getFormatter().parse(value, {locale: this.getLocale()}); - } else if (value instanceof Date) { - let date = new GregorianCalendar(this.getLocale()); - date.setTime(+value); - return date; - } - } - return value; - }, - toggleOpen ({open}) { this.props.toggleOpen({open}); }, @@ -83,7 +62,7 @@ export default function wrapPicker(Picker, defaultFormat?) { const timeFormat = props.showTime && props.showTime.format; const rcTimePickerProps = { - formatter: new DateTimeFormat(timeFormat || 'HH:mm:ss', locale.timePickerLocale.format), + format: timeFormat || 'HH:mm:ss', showSecond: timeFormat && timeFormat.indexOf('ss') >= 0, showHour: timeFormat && timeFormat.indexOf('HH') >= 0, }; @@ -93,7 +72,6 @@ export default function wrapPicker(Picker, defaultFormat?) { {...props.showTime} prefixCls="ant-calendar-time-picker" placeholder={locale.timePickerLocale.placeholder} - locale={locale.timePickerLocale} transitionName="slide-up" /> ) : null; @@ -106,8 +84,6 @@ export default function wrapPicker(Picker, defaultFormat?) { locale={locale} timePicker={timePicker} toggleOpen={this.toggleOpen} - getFormatter={this.getFormatter} - parseDateFromValue={this.parseDateFromValue} /> ); }, diff --git a/components/form/demo/mix.md b/components/form/demo/mix.md index 466467d7d1..86bbaf426c 100644 --- a/components/form/demo/mix.md +++ b/components/form/demo/mix.md @@ -2,7 +2,7 @@ order: 5 title: zh-CN: 表单组合 - en-US: mix + en-US: Mix --- ## zh-CN @@ -16,6 +16,9 @@ A mix to demonstrate others ant-design component related to form. ````jsx import { Form, Select, InputNumber, DatePicker, TimePicker, Switch, Radio, Cascader, Slider, Button, Col, Upload, Icon } from 'antd'; +import moment from 'moment'; +import 'moment/locale/zh-cn'; +moment.locale('zh-cn'); const FormItem = Form.Item; const Option = Select.Option; const RadioButton = Radio.Button; diff --git a/components/form/demo/validate-other.md b/components/form/demo/validate-other.md index 17f0a6d5a0..41973df38e 100644 --- a/components/form/demo/validate-other.md +++ b/components/form/demo/validate-other.md @@ -47,7 +47,7 @@ let Demo = React.createClass({ }, checkBirthday(rule, value, callback) { - if (value && value.getTime() >= Date.now()) { + if (value && value.valueOf() >= Date.now()) { callback(new Error("You can't be born in the future!")); } else { callback(); @@ -162,7 +162,7 @@ let Demo = React.createClass({ rules: [ { required: true, - type: 'date', + type: 'object', message: 'When is your birthday?', }, { validator: this.checkBirthday, @@ -178,9 +178,12 @@ let Demo = React.createClass({ label="Select the time" > {getFieldDecorator('time', { - getValueFromEvent: (value, timeString) => timeString, rules: [ - { required: true, message: 'Please select the time' }, + { + required: true, + type: 'object', + message: 'Please select the time', + }, ], })( diff --git a/components/locale-provider/demo/all.md b/components/locale-provider/demo/all.md index 2cd9a74c8a..48eb44ca33 100644 --- a/components/locale-provider/demo/all.md +++ b/components/locale-provider/demo/all.md @@ -17,6 +17,10 @@ Components which need localization support are listed here, you can toggle the l import { LocaleProvider, Pagination, DatePicker, TimePicker, Calendar, Popconfirm, Table, Modal, Button, Select, Transfer, Radio } from 'antd'; import enUS from 'antd/lib/locale-provider/en_US'; +import moment from 'moment'; +import 'moment/locale/zh-cn'; +moment.locale('en'); + const Option = Select.Option; const RangePicker = DatePicker.RangePicker; @@ -94,8 +98,8 @@ const Page = React.createClass({ render={item => item.title} />
    -
    - +
    +
    @@ -115,7 +119,13 @@ const App = React.createClass({ }; }, changeLocale(e) { - this.setState({ locale: e.target.value }); + const localeValue = e.target.value; + this.setState({ locale: localeValue }); + if (!localeValue) { + moment.locale('zh-cn'); + } else { + moment.locale('en'); + } }, render() { const locale = { ...this.state.locale }; diff --git a/components/time-picker/demo/disabled.md b/components/time-picker/demo/disabled.md index 67a75f6a7f..ea9e82d612 100644 --- a/components/time-picker/demo/disabled.md +++ b/components/time-picker/demo/disabled.md @@ -16,8 +16,9 @@ A disabled state of the `TimePicker`. ````jsx import { TimePicker } from 'antd'; +import moment from 'moment'; ReactDOM.render( - + , mountNode); ```` diff --git a/components/time-picker/demo/size.md b/components/time-picker/demo/size.md index 42ffaf6bc5..c3ca214076 100644 --- a/components/time-picker/demo/size.md +++ b/components/time-picker/demo/size.md @@ -15,12 +15,13 @@ The input box comes in three sizes. large is used in the form, while the medium ````jsx import { TimePicker } from 'antd'; +import moment from 'moment'; ReactDOM.render(
    - - - + + +
    , mountNode); ```` diff --git a/components/time-picker/demo/without-seconds.md b/components/time-picker/demo/without-seconds.md index a6a38756a0..c1d8aaafb7 100644 --- a/components/time-picker/demo/without-seconds.md +++ b/components/time-picker/demo/without-seconds.md @@ -15,8 +15,10 @@ The `seconds` options are hidden and cannot be selected. ````jsx import { TimePicker } from 'antd'; +import moment from 'moment'; +const format = 'HH:mm'; ReactDOM.render( - + , mountNode); ```` diff --git a/components/time-picker/index.en-US.md b/components/time-picker/index.en-US.md index 99e974adb2..329a9ae31d 100644 --- a/components/time-picker/index.en-US.md +++ b/components/time-picker/index.en-US.md @@ -14,18 +14,19 @@ By clicking the input box, you can select a time from a popup panel. ## API --- -```html - +```jsx +import moment from 'moment'; + ``` -> Warning: `TimePicker` is renamed to `TimePicker` after 0.11. +> Note: `TimePicker` is renamed to `TimePicker` after 0.11. | Property | Description | Type | Default | |---------------------|-----|-----|-------| -| defaultValue | to set default time | string or Date | - | -| value | to set time | string or Date | - | +| defaultValue | to set default time | [moment](http://momentjs.com/) | - | +| value | to set time | [moment](http://momentjs.com/) | - | | placeholder | display when there's no value | string | "Select a time" | -| onChange | a callback function, can be executed when the selected time is changing | function(date, dateString) | - | +| onChange | a callback function, can be executed when the selected time is changing | function(time: moment, timeString: string): void | - | | format | to set the time format | string | "HH:mm:ss"、"HH:mm"、"mm:ss" | | disabled | determine whether the TimePicker is disabled | bool | false | | disabledHours | to specify the hours that cannot be selected | function() | - | @@ -33,6 +34,5 @@ By clicking the input box, you can select a time from a popup panel. | disabledSeconds | to specify the seconds that cannot be selected | function(selectedHour, selectedMinute) | - | | hideDisabledOptions | hide the options that can not be selected | boolean | false | | getPopupContainer | to set the container of the floating layer, while the default is to create a div element in body | function(trigger) | - | -| locale | localization configuration | Object | [default](https://github.com/ant-design/ant-design/issues/1270#issuecomment-201181384) | diff --git a/components/time-picker/index.tsx b/components/time-picker/index.tsx index e35fe70c19..eecffd1c60 100644 --- a/components/time-picker/index.tsx +++ b/components/time-picker/index.tsx @@ -1,28 +1,26 @@ -import * as React from 'react'; -import DateTimeFormat from 'gregorian-calendar-format'; +import React from 'react'; +import moment from 'moment'; import RcTimePicker from 'rc-time-picker/lib/TimePicker'; -import defaultLocale from './locale/zh_CN'; import classNames from 'classnames'; -import GregorianCalendar from 'gregorian-calendar'; import assign from 'object-assign'; +import defaultLocale from './locale/zh_CN'; // TimePicker export interface TimePickerProps { - size: 'large' | 'default' | 'small'; + className?: string; + size?: 'large' | 'default' | 'small'; /** 默认时间 */ - value?: string | Date; + value?: moment.Moment; /** 初始默认时间 */ - defaultValue?: string | Date; + defaultValue?: moment.Moment; /** 展示的时间格式 : "HH:mm:ss"、"HH:mm"、"mm:ss" */ format?: string; /** 时间发生变化的回调 */ - onChange?: (date: Date, dateString: string) => void; + onChange?: (time: moment.Moment, timeString: string) => void; /** 禁用全部操作 */ disabled?: boolean; /** 没有值的时候显示的内容 */ placeholder?: string; - /** 国际化配置 */ - locale?: {}; /** 隐藏禁止选择的选项 */ hideDisabledOptions?: boolean; /** 禁止选择部分小时选项 */ @@ -47,7 +45,6 @@ export default class TimePicker extends React.Component { prefixCls: 'ant-time-picker', onChange() { }, - locale: {}, align: { offset: [0, -2], }, @@ -66,90 +63,52 @@ export default class TimePicker extends React.Component { context: TimePickerContext; - getFormatter() { - return new DateTimeFormat(this.props.format as string, this.getLocale().format); + constructor(props) { + super(props); + + this.state = { + value: props.value || props.defaultValue, + }; } - /** - * 获得输入框的 className - */ - getSizeClass() { - let sizeClass = ''; - if (this.props.size === 'large') { - sizeClass = ' ant-input-lg'; - } else if (this.props.size === 'small') { - sizeClass = ' ant-input-sm'; + componentWillReceiveProps(nextProps) { + if ('value' in nextProps) { + this.setState({ value: nextProps.value }); } - return sizeClass; } - /** - * 获得输入框的默认值 - */ - parseTimeFromValue(value) { - if (value) { - if (typeof value === 'string') { - return this.getFormatter().parse(value, { - locale: this.getLocale().calendar, - obeyCount: true, - }); - } else if (value instanceof Date) { - let date = new GregorianCalendar(this.getLocale().calendar); - date.setTime(+value); - return date; - } + handleChange = (value: moment.Moment) => { + if (!('value' in this.props)) { + this.setState({ value }); } - return value; - } - - handleChange = (value) => { - this.props.onChange( - value ? new Date(value.getTime()) : null, - value ? this.getFormatter().format(value) : '' - ); + this.props.onChange(value, (value && value.format(this.props.format)) || ''); } getLocale() { - let locale = defaultLocale; - if (this.context.antLocale && this.context.antLocale.TimePicker) { - locale = this.context.antLocale.TimePicker; - } - // 统一合并为完整的 Locale - return assign({}, locale, this.props.locale); + const antLocale = this.context.antLocale; + const timePickerLocale = (antLocale && antLocale.TimePicker) || defaultLocale; + return timePickerLocale; } render() { - const locale = this.getLocale(); const props = assign({}, this.props); - props.placeholder = ('placeholder' in this.props) - ? props.placeholder : locale.placeholder; - if (props.defaultValue) { - props.defaultValue = this.parseTimeFromValue(props.defaultValue); - } else { - delete props.defaultValue; - } - if (props.value) { - props.value = this.parseTimeFromValue(props.value); - } - let className = classNames({ + delete props.defaultValue; + + const className = classNames({ [props.className]: !!props.className, [`${props.prefixCls}-${props.size}`]: !!props.size, }); - if (props.format.indexOf('ss') < 0) { - props.showSecond = false; - } - if (props.format.indexOf('HH') < 0) { - props.showHour = false; - } return ( -1} + showSecond={props.format.indexOf('ss') > -1} onChange={this.handleChange} - /> + /> ); } } diff --git a/components/time-picker/index.zh-CN.md b/components/time-picker/index.zh-CN.md index 350ee43160..680c4fb029 100644 --- a/components/time-picker/index.zh-CN.md +++ b/components/time-picker/index.zh-CN.md @@ -15,18 +15,19 @@ english: TimePicker ## API --- -```html - +```jsx +import moment from 'moment'; + ``` > 注意：`0.11+` 后 `Timepicker` 改名为 `TimePicker`。 | 参数 | 说明 | 类型 | 默认值 | |---------------------|-----|-----|-------| -| defaultValue | 初始默认时间 | string or Date | 无 | -| value | 默认时间 | string or Date | 无 | +| defaultValue | 默认时间 | [moment](http://momentjs.com/) | 无 | +| value | 当前时间 | [moment](http://momentjs.com/) | 无 | | placeholder | 没有值的时候显示的内容 | string | "请选择时间" | -| onChange | 时间发生变化的回调 | function(date, dateString) | 无 | +| onChange | 时间发生变化的回调 | function(time: moment, timeString: string): void | 无 | | format | 展示的时间格式 | string | "HH:mm:ss"、"HH:mm"、"mm:ss" | | disabled | 禁用全部操作 | bool | false | | disabledHours | 禁止选择部分小时选项 | function() | 无 | @@ -34,6 +35,5 @@ english: TimePicker | disabledSeconds | 禁止选择部分秒选项 | function(selectedHour, selectedMinute) | 无 | | hideDisabledOptions | 隐藏禁止选择的选项 | boolean | false | | getPopupContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | 无 | -| locale | 国际化配置 | Object | [默认配置](https://github.com/ant-design/ant-design/issues/1270#issuecomment-201181384) | diff --git a/components/time-picker/locale/en_US.tsx b/components/time-picker/locale/en_US.tsx index f5e274cf0c..fa7d5114f8 100644 --- a/components/time-picker/locale/en_US.tsx +++ b/components/time-picker/locale/en_US.tsx @@ -1,7 +1,5 @@ -import TimepickerLocale from 'rc-time-picker/lib/locale/en_US'; -import assign from 'object-assign'; -const locale = assign({}, { +const locale = { placeholder: 'Select a time', -}, TimepickerLocale); +}; export default locale; diff --git a/components/time-picker/locale/ru_RU.tsx b/components/time-picker/locale/ru_RU.tsx index 4e2845e90c..0490573e73 100644 --- a/components/time-picker/locale/ru_RU.tsx +++ b/components/time-picker/locale/ru_RU.tsx @@ -1,10 +1,8 @@ /** * Created by Andrey Gayvoronsky on 13/04/16. */ -import TimepickerLocale from 'rc-time-picker/lib/locale/ru_RU'; -import assign from 'object-assign'; -const locale = assign({}, { +const locale = { placeholder: 'Выберите время', -}, TimepickerLocale); +}; export default locale; diff --git a/components/time-picker/locale/zh_CN.tsx b/components/time-picker/locale/zh_CN.tsx index b7ae75b716..6898e575d1 100644 --- a/components/time-picker/locale/zh_CN.tsx +++ b/components/time-picker/locale/zh_CN.tsx @@ -1,7 +1,5 @@ -import TimepickerLocale from 'rc-time-picker/lib/locale/zh_CN'; -import assign from 'object-assign'; -const locale = assign({}, { +const locale = { placeholder: '请选择时间', -}, TimepickerLocale); +}; export default locale; diff --git a/custom-typings.d.ts b/custom-typings.d.ts index c0350d8592..af6ffcca02 100644 --- a/custom-typings.d.ts +++ b/custom-typings.d.ts @@ -7,26 +7,6 @@ declare module 'react-addons-pure-render-mixin' { export default exports; } -declare module 'gregorian-calendar-format' { - export default function(format: string, localeFormat: Object): void; -} - -declare module 'gregorian-calendar' { - export default function({}): void; -} - -declare module 'gregorian-calendar/lib/locale/en_US' { - export default {}; -} - -declare module 'gregorian-calendar/lib/locale/zh_CN' { - export default {}; -} - -declare module 'gregorian-calendar/lib/locale/ru_RU' { - export default {}; -} - declare module 'rc-calendar/lib/locale/en_US' { export default {}; } @@ -55,7 +35,7 @@ declare module 'rc-calendar/lib/MonthCalendar' { export default function(): any; } -declare module 'rc-time-picker/lib/module/Panel' { +declare module 'rc-time-picker/lib/Panel' { export default function(): any; } diff --git a/package.json b/package.json index 8c8731dd0c..62b7e96e8c 100644 --- a/package.json +++ b/package.json @@ -42,7 +42,7 @@ "object-assign": "~4.1.0", "object.omit": "^2.0.0", "rc-animate": "~2.3.0", - "rc-calendar": "~6.0.2", + "rc-calendar": "^7.0.3", "rc-cascader": "~0.10.1", "rc-checkbox": "~1.4.0", "rc-collapse": "~1.6.4", @@ -64,7 +64,7 @@ "rc-switch": "~1.4.2", "rc-table": "~4.6.0", "rc-tabs": "~5.9.2", - "rc-time-picker": "~1.1.6", + "rc-time-picker": "^2.0.0", "rc-tooltip": "~3.4.2", "rc-tree": "~1.3.6", "rc-tree-select": "~1.8.0", diff --git a/tsconfig.json b/tsconfig.json index 7c27d33193..c77931336e 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,10 +1,11 @@ { "compilerOptions": { "moduleResolution": "node", + "allowSyntheticDefaultImports": true, "jsx": "preserve", "target": "es6" }, "exclude": [ "node_modules" ] -} \ No newline at end of file +} From 77a45f0b0053597b95f1fcc06d6812a324e753e4 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Fri, 9 Sep 2016 13:55:41 +0800 Subject: [PATCH 0058/2145] deps: upgrade rc-table (#2958) * feat: remove Table columns paging, close: #2883 * css: add style for table multi-header * feat: multi-header supports fitler & sorter and so on * feat: multi-heaader works with Table[scroll.y] * feat: multi-header should works with Table[scroll.x] * style: update code style to please lint --- components/table/Table.tsx | 8 +- components/table/demo/grouping-columns.md | 125 ++++++++++++++++++++++ components/table/demo/paging-columns.md | 49 --------- components/table/style/index.less | 3 + components/table/util.tsx | 10 ++ package.json | 2 +- 6 files changed, 143 insertions(+), 54 deletions(-) create mode 100644 components/table/demo/grouping-columns.md delete mode 100644 components/table/demo/paging-columns.md diff --git a/components/table/Table.tsx b/components/table/Table.tsx index c317b0ee20..aeca192fae 100644 --- a/components/table/Table.tsx +++ b/components/table/Table.tsx @@ -7,7 +7,7 @@ import Pagination from '../pagination'; import Icon from '../icon'; import Spin from '../spin'; import classNames from 'classnames'; -import { flatArray } from './util'; +import { flatArray, treeMap } from './util'; import assign from 'object-assign'; import splitObject from '../_util/splitObject'; @@ -280,7 +280,7 @@ export default class Table extends React.Component { } getFilteredValueColumns(columns?) { - return (columns || this.props.columns || []).filter(column => 'filteredValue' in column); + return (columns || this.props.columns || []).filter(column => column.filteredValue); } getFiltersFromColumns(columns?) { @@ -373,7 +373,7 @@ export default class Table extends React.Component { const newState = { selectionDirty: false, pagination, - filters: null, + filters: {}, }; const filtersToSetState = assign({}, filters); // Remove filters which is controlled @@ -631,7 +631,7 @@ export default class Table extends React.Component { renderColumnsDropdown(columns) { const { sortOrder } = this.state; const locale = this.getLocale(); - return columns.map((originColumn, i) => { + return treeMap(columns, (originColumn, i) => { let column = assign({}, originColumn); let key = this.getColumnKey(column, i); let filterDropdown; diff --git a/components/table/demo/grouping-columns.md b/components/table/demo/grouping-columns.md new file mode 100644 index 0000000000..87d833511d --- /dev/null +++ b/components/table/demo/grouping-columns.md @@ -0,0 +1,125 @@ +--- +order: 20 +title: + en-US: Grouping table head + zh-CN: 表头分组 +--- + +## zh-CN + +`columns[n]` 可以内嵌 `children`，以渲染分组表头。 + +## en-US + +Group table head with `columns[n].children`。 + +```jsx +import { Table } from 'antd'; + +const columns = [ + { + title: '姓名', + dataIndex: 'name', + key: 'name', + width: 100, + fixed: 'left', + filters: [{ + text: '姓李的', + value: '李', + }, { + text: '姓胡的', + value: '胡', + }], + onFilter: (value, record) => record.name.indexOf(value) === 0, + }, + { + title: '其它', + children: [ + { + title: '年龄', + dataIndex: 'age', + key: 'age', + width: 100, + sorter: (a, b) => a.age - b.age, + }, + { + title: '住址', + children: [ + { + title: '街道', + dataIndex: 'street', + key: 'street', + width: 200, + }, + { + title: '小区', + children: [ + { + title: '单元', + dataIndex: 'building', + key: 'building', + width: 50, + }, + { + title: '门牌', + dataIndex: 'number', + key: 'number', + width: 100, + }, + ], + }, + ], + }, + ], + }, + { + title: '公司', + children: [ + { + title: '地址', + dataIndex: 'companyAddress', + key: 'companyAddress', + width: 200, + }, + { + title: '名称', + dataIndex: 'companyName', + key: 'companyName', + width: 200, + }, + ], + }, + { + title: '性别', + dataIndex: 'gender', + key: 'gender', + width: 60, + fixed: 'right', + }, +]; + +const data = []; +for (let i = 0; i < 100; i++) { + data.push({ + key: i, + name: '胡彦祖', + age: Math.ceil(Math.random() * 100), + street: '拱墅区和睦街道', + building: 3, + number: 2035, + companyAddress: '西湖区湖底公园', + companyName: '湖底有限公司', + gender: '男', + }); +} + +ReactDOM.render( +
    , + mountNode +); +``` diff --git a/components/table/demo/paging-columns.md b/components/table/demo/paging-columns.md deleted file mode 100644 index 8b38047125..0000000000 --- a/components/table/demo/paging-columns.md +++ /dev/null @@ -1,49 +0,0 @@ ---- -order: 20 -hidden: true -title: - en-US: paging the columns - zh-CN: 列分页 ---- - -## zh-CN - -对于列数很多的数据，可以进行横向的分页，通过切换符切换当前展现的列。 - -## en-US - -You can split long columns to switchable views. - -````jsx -import { Table } from 'antd'; - -const columns = [ - { title: '姓名', dataIndex: 'name', key: 'name' }, - { title: '年龄', dataIndex: 'age', key: 'age' }, - { title: '列1', dataIndex: 'age', key: '1' }, - { title: '列2', dataIndex: 'age', key: '2' }, - { title: '列3', dataIndex: 'age', key: '3' }, - { title: '列4', dataIndex: 'age', key: '4' }, - { title: '列5', dataIndex: 'age', key: '5' }, - { title: '列6', dataIndex: 'age', key: '6' }, - { title: '列7', dataIndex: 'age', key: '7' }, - { title: '列8', dataIndex: 'age', key: '8' }, - { - title: '操作', - key: 'operation', - render: () => 操作, - }, -]; - -const data = [{ - key: '1', - name: '胡彦斌', - age: 32, -}, { - key: '2', - name: '胡彦祖', - age: 42, -}]; - -ReactDOM.render(
    , mountNode); -```` diff --git a/components/table/style/index.less b/components/table/style/index.less index 9dbd9dcf04..98db2830a0 100644 --- a/components/table/style/index.less +++ b/components/table/style/index.less @@ -269,6 +269,9 @@ .@{table-prefix-cls}-thead > tr > th, .@{table-prefix-cls}-tbody > tr > td { border-right: 1px solid @border-color-split; + } + .@{table-prefix-cls}-thead > tr:first-child > th, + .@{table-prefix-cls}-tbody > tr > td { &:last-child { border-right: 0; } diff --git a/components/table/util.tsx b/components/table/util.tsx index 84bf150d2b..245b935365 100644 --- a/components/table/util.tsx +++ b/components/table/util.tsx @@ -14,3 +14,13 @@ export function flatArray(data = [], childrenName = 'children') { loop(data); return result; } + +export function treeMap(tree: Object[], mapper: Function, childrenName = 'children') { + return tree.map((node, index) => { + const extra = {}; + if (node[childrenName]) { + extra[childrenName] = treeMap(node[childrenName], mapper, childrenName); + } + return assign({}, mapper(node, index), extra); + }); +} diff --git a/package.json b/package.json index 62b7e96e8c..5a08a1adc3 100644 --- a/package.json +++ b/package.json @@ -62,7 +62,7 @@ "rc-slider": "~4.0.0", "rc-steps": "~2.1.5", "rc-switch": "~1.4.2", - "rc-table": "~4.6.0", + "rc-table": "~5.0.0", "rc-tabs": "~5.9.2", "rc-time-picker": "^2.0.0", "rc-tooltip": "~3.4.2", From 14fb2c78baaa9b9133cea85d4c3ff181e993c17f Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Fri, 9 Sep 2016 13:55:46 +0800 Subject: [PATCH 0059/2145] chore: remove deprecated code (#2920) * chore: remove deprecated code * chore: add warning for Breadcrumb --- components/affix/index.tsx | 3 -- components/breadcrumb/Breadcrumb.tsx | 10 ++++++ components/form/demo/dynamic-form-item.md | 2 +- components/form/demo/form-in-modal.md | 2 +- components/form/demo/validate-basic.md | 2 +- components/form/demo/validate-customized.md | 2 +- components/form/demo/validate-other.md | 2 +- components/mention/demo/controlled.md | 24 ++++++------- components/notification/index.en-US.md | 2 +- components/notification/index.zh-CN.md | 4 +-- components/popover/index.tsx | 15 ++------ components/progress/index.tsx | 16 +-------- components/slider/index.tsx | 38 ++------------------- components/spin/index.tsx | 17 ++------- 14 files changed, 39 insertions(+), 100 deletions(-) diff --git a/components/affix/index.tsx b/components/affix/index.tsx index d4b70ec732..bbdf2a02d3 100644 --- a/components/affix/index.tsx +++ b/components/affix/index.tsx @@ -2,7 +2,6 @@ import * as React from 'react'; import * as ReactDOM from 'react-dom'; import addEventListener from 'rc-util/lib/Dom/addEventListener'; import classNames from 'classnames'; -import warning from 'warning'; import assign from 'object-assign'; import shallowequal from 'shallowequal'; @@ -182,8 +181,6 @@ export default class Affix extends React.Component { } componentDidMount() { - warning(!('offset' in this.props), '`offset` prop of Affix is deprecated, use `offsetTop` instead.'); - const target = this.props.target; this.setTargetEventListeners(target); } diff --git a/components/breadcrumb/Breadcrumb.tsx b/components/breadcrumb/Breadcrumb.tsx index 2117e961c7..cbab5d7685 100644 --- a/components/breadcrumb/Breadcrumb.tsx +++ b/components/breadcrumb/Breadcrumb.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import { cloneElement } from 'react'; +import warning from 'warning'; import BreadcrumbItem from './BreadcrumbItem'; export interface BreadcrumbProps { @@ -50,6 +51,15 @@ export default class Breadcrumb extends React.Component { nameRender: React.PropTypes.func, }; + constructor(props) { + super(); + + warning( + !('linkRender' in props || 'nameRender' in props), + '`linkRender` and `nameRender` is removed, please use `itemRender` instead.' + ); + } + render() { let crumbs; const { separator, prefixCls, routes, params, children, itemRender } = this.props; diff --git a/components/form/demo/dynamic-form-item.md b/components/form/demo/dynamic-form-item.md index 8fa5a6f09d..0c7f36a325 100644 --- a/components/form/demo/dynamic-form-item.md +++ b/components/form/demo/dynamic-form-item.md @@ -81,7 +81,7 @@ let Demo = React.createClass({ ); }); return ( - + {formItems} diff --git a/components/form/demo/form-in-modal.md b/components/form/demo/form-in-modal.md index a73b69d89a..fa33641f0b 100644 --- a/components/form/demo/form-in-modal.md +++ b/components/form/demo/form-in-modal.md @@ -47,7 +47,7 @@ let Demo = React.createClass({
    - + + - +
    diff --git a/components/form/demo/validate-other.md b/components/form/demo/validate-other.md index 41973df38e..f31d2747c7 100644 --- a/components/form/demo/validate-other.md +++ b/components/form/demo/validate-other.md @@ -77,7 +77,7 @@ let Demo = React.createClass({ wrapperCol: { span: 12 }, }; return ( - + > render', getFieldValue('mention') === this.state.initValue); return ( - + - + {getFieldDecorator('mention', { + rules: [ + { validator: this.checkMention }, + ], + initialValue: this.state.initValue, + })( + + )} diff --git a/components/notification/index.en-US.md b/components/notification/index.en-US.md index a51f24dc7e..ebfd85fbe2 100644 --- a/components/notification/index.en-US.md +++ b/components/notification/index.en-US.md @@ -2,7 +2,7 @@ category: Components type: Views noinstant: true -english: -tification +title: Notification --- To display a notification message globally. diff --git a/components/notification/index.zh-CN.md b/components/notification/index.zh-CN.md index 30c72f419b..6c4276360f 100644 --- a/components/notification/index.zh-CN.md +++ b/components/notification/index.zh-CN.md @@ -1,9 +1,9 @@ --- category: Components -chinese: 通知提醒框 type: Views noinstant: true -english: Notification +title: Notification +subtitle: 通知提醒框 --- 全局展示通知提醒信息。 diff --git a/components/popover/index.tsx b/components/popover/index.tsx index aa97033003..a2a2e5bed5 100644 --- a/components/popover/index.tsx +++ b/components/popover/index.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import Tooltip from '../tooltip'; import getPlacements from './placements'; -import warning from 'warning'; const placements = getPlacements(); @@ -29,8 +28,6 @@ export interface PopoverProps { getTooltipContainer?: (triggerNode: React.ReactNode) => React.ReactNode; /** content of popup-container */ content?: React.ReactNode; - /** keep overlay for compatibility */ - overlay?: React.ReactNode; style?: React.CSSProperties; transitionName?: string; } @@ -63,22 +60,14 @@ export default class Popover extends React.Component { return (this.refs as any).tooltip.getPopupDomNode(); } - componentDidMount() { - if ('overlay' in this.props) { - warning(false, '`overlay` prop of Popover is deprecated, use `content` instead.'); - } - } - getOverlay() { - // use content replace overlay - // keep overlay for compatibility - const { title, prefixCls, overlay, content } = this.props; + const { title, prefixCls, content } = this.props; return (
    {title &&
    {title}
    }
    - {content || overlay} + {content}
    ); diff --git a/components/progress/index.tsx b/components/progress/index.tsx index 56d8445475..1e77982d82 100644 --- a/components/progress/index.tsx +++ b/components/progress/index.tsx @@ -1,17 +1,3 @@ -import * as React from 'react'; import Progress from './progress'; -import warning from 'warning'; -const AntProgress = Progress; - -// For downward compatibility -AntProgress.Line = (props) => { - warning(false, ' is deprecated, use instead.'); - return ; -}; -AntProgress.Circle = (props) => { - warning(false, ' is deprecated, use instead.'); - return ; -}; - -export default AntProgress; +export default Progress; diff --git a/components/slider/index.tsx b/components/slider/index.tsx index 8c86c86298..b1b0e01d13 100644 --- a/components/slider/index.tsx +++ b/components/slider/index.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import { PropTypes } from 'react'; import RcSlider from 'rc-slider'; -import splitObject from '../_util/splitObject'; interface SliderMarks { [key: number]: React.ReactNode | { @@ -23,8 +22,8 @@ export interface SliderProps { defaultValue?: SliderValue; included?: boolean; disabled?: boolean; - onChange?: (value: SliderValue) => any; - onAfterChange?: (value: SliderValue) => any; + onChange?: (value: SliderValue) => void; + onAfterChange?: (value: SliderValue) => void; tipFormatter?: void | ((value: number) => React.ReactNode); } @@ -37,40 +36,9 @@ export default class Slider extends React.Component { static propTypes = { prefixCls: PropTypes.string, tipTransitionName: PropTypes.string, - included: PropTypes.bool, - marks: PropTypes.object, }; render() { - const [{isIncluded, marks, index, defaultIndex}, others] = splitObject(this.props, - ['isIncluded', 'marks', 'index', 'defaultIndex']); - - if (isIncluded !== undefined) { - // 兼容 `isIncluded` - others.included = isIncluded; - } - - if (Array.isArray(marks)) { - // 兼容当 marks 为数组的情况 - others.min = 0; - others.max = marks.length - 1; - others.step = 1; - - if (index !== undefined) { - others.value = index; - } - if (defaultIndex !== undefined) { - others.defaultValue = defaultIndex; - } - - others.marks = {}; - marks.forEach((val, idx) => { - others.marks[idx] = val; - }); - } else { - others.marks = marks; - } - - return ; + return ; } } diff --git a/components/spin/index.tsx b/components/spin/index.tsx index 0b290057b0..495f13e6e9 100644 --- a/components/spin/index.tsx +++ b/components/spin/index.tsx @@ -3,7 +3,6 @@ import { PropTypes } from 'react'; import { findDOMNode } from 'react-dom'; import classNames from 'classnames'; import isCssAnimationSupported from '../_util/isCssAnimationSupported'; -import warning from 'warning'; import splitObject from '../_util/splitObject'; import omit from 'object.omit'; @@ -33,7 +32,7 @@ export default class Spin extends React.Component { constructor(props) { super(props); - const spinning = this.getSpinning(props); + const spinning = props.spinning; this.state = { spinning, }; @@ -44,7 +43,6 @@ export default class Spin extends React.Component { } componentDidMount() { - warning(!('spining' in this.props), '`spining` property of Popover is a spell mistake, use `spinning` instead.'); if (!isCssAnimationSupported()) { // Show text in IE8/9 findDOMNode(this).className += ` ${this.props.prefixCls}-show-text`; @@ -57,18 +55,9 @@ export default class Spin extends React.Component { } } - getSpinning(props) { - // Backwards support - if ('spining' in props) { - warning(false, '`spining` property of Spin is a spell mistake, use `spinning` instead.'); - return props.spining; - } - return props.spinning; - } - componentWillReceiveProps(nextProps) { - const currentSpinning = this.getSpinning(this.props); - const spinning = this.getSpinning(nextProps); + const currentSpinning = this.props.spinning; + const spinning = nextProps.spinning; if (this.debounceTimeout) { clearTimeout(this.debounceTimeout); } From caf218ce4b110d8e65732f6c241f448a818a9b1f Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Fri, 9 Sep 2016 14:37:44 +0800 Subject: [PATCH 0060/2145] chore: integrate typings dir --- .gitignore | 1 - package.json | 1 - typings/globals/react-dom/index.d.ts | 70 + typings/globals/react-dom/typings.json | 8 + typings/globals/react/index.d.ts | 2514 ++++++++++++++++++++++++ typings/globals/react/typings.json | 8 + typings/index.d.ts | 2 + 7 files changed, 2602 insertions(+), 2 deletions(-) create mode 100644 typings/globals/react-dom/index.d.ts create mode 100644 typings/globals/react-dom/typings.json create mode 100644 typings/globals/react/index.d.ts create mode 100644 typings/globals/react/typings.json create mode 100644 typings/index.d.ts diff --git a/.gitignore b/.gitignore index 86665f9ab8..7c16552f87 100644 --- a/.gitignore +++ b/.gitignore @@ -26,6 +26,5 @@ dist /lib elasticsearch-* config/base.yaml -typings components/**/*.js components/**/*.jsx diff --git a/package.json b/package.json index 5a08a1adc3..9d86fb7a2d 100644 --- a/package.json +++ b/package.json @@ -141,7 +141,6 @@ "eslint-fix": "eslint --fix components test site scripts ./*.js --ext '.js,.jsx' && eslint-tinker ./components/*/demo/*.md", "test": "npm run lint && npm run dist", "jest": "jest", - "postinstall": "typings install", "pre-publish": "node ./scripts/prepub", "prepublish": "antd-tools run guard", "pub": "antd-tools run update-self && antd-tools run pub", diff --git a/typings/globals/react-dom/index.d.ts b/typings/globals/react-dom/index.d.ts new file mode 100644 index 0000000000..a38e3e806f --- /dev/null +++ b/typings/globals/react-dom/index.d.ts @@ -0,0 +1,70 @@ +// Generated by typings +// Source: https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/b9642fb8ac07f7164dc643ddd1fa99b58ae9be8b/react/react-dom.d.ts +declare namespace __React { + namespace __DOM { + function findDOMNode(instance: ReactInstance): E; + function findDOMNode(instance: ReactInstance): Element; + + function render

    ( + element: DOMElement, + container: Element, + callback?: (element: T) => any): T; + function render

    ( + element: SFCElement

    , + container: Element, + callback?: () => any): void; + function render>( + element: CElement, + container: Element, + callback?: (component: T) => any): T; + function render

    ( + element: ReactElement

    , + container: Element, + callback?: (component?: Component | Element) => any): Component | Element | void; + + function unmountComponentAtNode(container: Element): boolean; + + var version: string; + + function unstable_batchedUpdates(callback: (a: A, b: B) => any, a: A, b: B): void; + function unstable_batchedUpdates(callback: (a: A) => any, a: A): void; + function unstable_batchedUpdates(callback: () => any): void; + + function unstable_renderSubtreeIntoContainer

    ( + parentComponent: Component, + element: DOMElement, + container: Element, + callback?: (element: T) => any): T; + function unstable_renderSubtreeIntoContainer>( + parentComponent: Component, + element: CElement, + container: Element, + callback?: (component: T) => any): T; + function render

    ( + parentComponent: Component, + element: SFCElement

    , + container: Element, + callback?: () => any): void; + function unstable_renderSubtreeIntoContainer

    ( + parentComponent: Component, + element: ReactElement

    , + container: Element, + callback?: (component?: Component | Element) => any): Component | Element | void; + } + + namespace __DOMServer { + function renderToString(element: ReactElement): string; + function renderToStaticMarkup(element: ReactElement): string; + var version: string; + } +} + +declare module "react-dom" { + import DOM = __React.__DOM; + export = DOM; +} + +declare module "react-dom/server" { + import DOMServer = __React.__DOMServer; + export = DOMServer; +} diff --git a/typings/globals/react-dom/typings.json b/typings/globals/react-dom/typings.json new file mode 100644 index 0000000000..805a35836d --- /dev/null +++ b/typings/globals/react-dom/typings.json @@ -0,0 +1,8 @@ +{ + "resolution": "main", + "tree": { + "src": "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/b9642fb8ac07f7164dc643ddd1fa99b58ae9be8b/react/react-dom.d.ts", + "raw": "registry:dt/react-dom#0.14.0+20160412154040", + "typings": "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/b9642fb8ac07f7164dc643ddd1fa99b58ae9be8b/react/react-dom.d.ts" + } +} diff --git a/typings/globals/react/index.d.ts b/typings/globals/react/index.d.ts new file mode 100644 index 0000000000..457ab043b3 --- /dev/null +++ b/typings/globals/react/index.d.ts @@ -0,0 +1,2514 @@ +// Generated by typings +// Source: https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/03cd162da057a9cbf653119982e12233ae2b90a6/react/react.d.ts +declare namespace __React { + + // + // React Elements + // ---------------------------------------------------------------------- + + type ReactType = string | ComponentClass | StatelessComponent; + + type Key = string | number; + type Ref = string | ((instance: T) => any); + type ComponentState = {} | void; + + interface Attributes { + key?: Key; + } + interface ClassAttributes extends Attributes { + ref?: Ref; + } + + interface ReactElement

    { + type: string | ComponentClass

    | SFC

    ; + props: P; + key?: Key; + } + + interface SFCElement

    extends ReactElement

    { + type: SFC

    ; + } + + type CElement> = ComponentElement; + interface ComponentElement> extends ReactElement

    { + type: ComponentClass

    ; + ref?: Ref; + } + + type ClassicElement

    = CElement>; + + interface DOMElement

    extends ReactElement

    { + type: string; + ref: Ref; + } + + interface ReactHTMLElement extends DOMElement { + } + + interface ReactSVGElement extends DOMElement { + } + + // + // Factories + // ---------------------------------------------------------------------- + + interface Factory

    { + (props?: P & Attributes, ...children: ReactNode[]): ReactElement

    ; + } + + interface SFCFactory

    { + (props?: P & Attributes, ...children: ReactNode[]): SFCElement

    ; + } + + interface ComponentFactory> { + (props?: P & ClassAttributes, ...children: ReactNode[]): CElement; + } + + type CFactory> = ComponentFactory; + type ClassicFactory

    = CFactory>; + + interface DOMFactory

    { + (props?: P & ClassAttributes, ...children: ReactNode[]): DOMElement; + } + + interface HTMLFactory extends DOMFactory { + } + + interface SVGFactory extends DOMFactory { + } + + // + // React Nodes + // http://facebook.github.io/react/docs/glossary.html + // ---------------------------------------------------------------------- + + type ReactText = string | number; + type ReactChild = ReactElement | ReactText; + + // Should be Array but type aliases cannot be recursive + type ReactFragment = {} | Array; + type ReactNode = ReactChild | ReactFragment | boolean; + + // + // Top Level API + // ---------------------------------------------------------------------- + + function createClass(spec: ComponentSpec): ClassicComponentClass

    ; + + function createFactory

    ( + type: string): DOMFactory; + function createFactory

    (type: SFC

    ): SFCFactory

    ; + function createFactory

    ( + type: ClassType, ClassicComponentClass

    >): CFactory>; + function createFactory, C extends ComponentClass

    >( + type: ClassType): CFactory; + function createFactory

    (type: ComponentClass

    | SFC

    ): Factory

    ; + + function createElement

    ( + type: string, + props?: P & ClassAttributes, + ...children: ReactNode[]): DOMElement; + function createElement

    ( + type: SFC

    , + props?: P & Attributes, + ...children: ReactNode[]): SFCElement

    ; + function createElement

    ( + type: ClassType, ClassicComponentClass

    >, + props?: P & ClassAttributes>, + ...children: ReactNode[]): CElement>; + function createElement, C extends ComponentClass

    >( + type: ClassType, + props?: P & ClassAttributes, + ...children: ReactNode[]): CElement; + function createElement

    ( + type: ComponentClass

    | SFC

    , + props?: P & Attributes, + ...children: ReactNode[]): ReactElement

    ; + + function cloneElement

    ( + element: DOMElement, + props?: P & ClassAttributes, + ...children: ReactNode[]): DOMElement; + function cloneElement

    ( + element: SFCElement

    , + props?: Q, // should be Q & Attributes, but then Q is inferred as {} + ...children: ReactNode[]): SFCElement

    ; + function cloneElement

    >( + element: CElement, + props?: Q, // should be Q & ClassAttributes + ...children: ReactNode[]): CElement; + function cloneElement

    ( + element: ReactElement

    , + props?: Q, // should be Q & Attributes + ...children: ReactNode[]): ReactElement

    ; + + function isValidElement

    (object: {}): object is ReactElement

    ; + + var DOM: ReactDOM; + var PropTypes: ReactPropTypes; + var Children: ReactChildren; + var version: string; + + // + // Component API + // ---------------------------------------------------------------------- + + type ReactInstance = Component | Element; + + // Base component for plain JS classes + class Component implements ComponentLifecycle { + constructor(props?: P, context?: any); + setState(f: (prevState: S, props: P) => S, callback?: () => any): void; + setState(state: S, callback?: () => any): void; + forceUpdate(callback?: () => any): void; + render(): JSX.Element; + + // React.Props is now deprecated, which means that the `children` + // property is not available on `P` by default, even though you can + // always pass children as variadic arguments to `createElement`. + // In the future, if we can define its call signature conditionally + // on the existence of `children` in `P`, then we should remove this. + props: P & { children?: ReactNode }; + state: S; + context: {}; + refs: { + [key: string]: ReactInstance + }; + } + + interface ClassicComponent extends Component { + replaceState(nextState: S, callback?: () => any): void; + isMounted(): boolean; + getInitialState?(): S; + } + + interface ChildContextProvider { + getChildContext(): CC; + } + + // + // Class Interfaces + // ---------------------------------------------------------------------- + + type SFC

    = StatelessComponent

    ; + interface StatelessComponent

    { + (props?: P, context?: any): ReactElement; + propTypes?: ValidationMap

    ; + contextTypes?: ValidationMap; + defaultProps?: P; + displayName?: string; + } + + interface ComponentClass

    { + new(props?: P, context?: any): Component; + propTypes?: ValidationMap

    ; + contextTypes?: ValidationMap; + childContextTypes?: ValidationMap; + defaultProps?: P; + displayName?: string; + } + + interface ClassicComponentClass

    extends ComponentClass

    { + new(props?: P, context?: any): ClassicComponent; + getDefaultProps?(): P; + } + + /** + * We use an intersection type to infer multiple type parameters from + * a single argument, which is useful for many top-level API defs. + * See https://github.com/Microsoft/TypeScript/issues/7234 for more info. + */ + type ClassType, C extends ComponentClass

    > = + C & + (new() => T) & + (new() => { props: P }); + + // + // Component Specs and Lifecycle + // ---------------------------------------------------------------------- + + interface ComponentLifecycle { + componentWillMount?(): void; + componentDidMount?(): void; + componentWillReceiveProps?(nextProps: P, nextContext: any): void; + shouldComponentUpdate?(nextProps: P, nextState: S, nextContext: any): boolean; + componentWillUpdate?(nextProps: P, nextState: S, nextContext: any): void; + componentDidUpdate?(prevProps: P, prevState: S, prevContext: any): void; + componentWillUnmount?(): void; + } + + interface Mixin extends ComponentLifecycle { + mixins?: Mixin; + statics?: { + [key: string]: any; + }; + + displayName?: string; + propTypes?: ValidationMap; + contextTypes?: ValidationMap; + childContextTypes?: ValidationMap; + + getDefaultProps?(): P; + getInitialState?(): S; + } + + interface ComponentSpec extends Mixin { + render(): ReactElement; + + [propertyName: string]: any; + } + + // + // Event System + // ---------------------------------------------------------------------- + + interface SyntheticEvent { + bubbles: boolean; + cancelable: boolean; + currentTarget: EventTarget; + defaultPrevented: boolean; + eventPhase: number; + isTrusted: boolean; + nativeEvent: Event; + preventDefault(): void; + stopPropagation(): void; + target: EventTarget; + timeStamp: Date; + type: string; + } + + interface ClipboardEvent extends SyntheticEvent { + clipboardData: DataTransfer; + } + + interface CompositionEvent extends SyntheticEvent { + data: string; + } + + interface DragEvent extends MouseEvent { + dataTransfer: DataTransfer; + } + + interface FocusEvent extends SyntheticEvent { + relatedTarget: EventTarget; + } + + interface FormEvent extends SyntheticEvent { + } + + interface KeyboardEvent extends SyntheticEvent { + altKey: boolean; + charCode: number; + ctrlKey: boolean; + getModifierState(key: string): boolean; + key: string; + keyCode: number; + locale: string; + location: number; + metaKey: boolean; + repeat: boolean; + shiftKey: boolean; + which: number; + } + + interface MouseEvent extends SyntheticEvent { + altKey: boolean; + button: number; + buttons: number; + clientX: number; + clientY: number; + ctrlKey: boolean; + getModifierState(key: string): boolean; + metaKey: boolean; + pageX: number; + pageY: number; + relatedTarget: EventTarget; + screenX: number; + screenY: number; + shiftKey: boolean; + } + + interface TouchEvent extends SyntheticEvent { + altKey: boolean; + changedTouches: TouchList; + ctrlKey: boolean; + getModifierState(key: string): boolean; + metaKey: boolean; + shiftKey: boolean; + targetTouches: TouchList; + touches: TouchList; + } + + interface UIEvent extends SyntheticEvent { + detail: number; + view: AbstractView; + } + + interface WheelEvent extends MouseEvent { + deltaMode: number; + deltaX: number; + deltaY: number; + deltaZ: number; + } + + interface AnimationEvent extends SyntheticEvent { + animationName: string; + pseudoElement: string; + elapsedTime: number; + } + + interface TransitionEvent extends SyntheticEvent { + propertyName: string; + pseudoElement: string; + elapsedTime: number; + } + + // + // Event Handler Types + // ---------------------------------------------------------------------- + + interface EventHandler { + (event: E): void; + } + + type ReactEventHandler = EventHandler; + + type ClipboardEventHandler = EventHandler; + type CompositionEventHandler = EventHandler; + type DragEventHandler = EventHandler; + type FocusEventHandler = EventHandler; + type FormEventHandler = EventHandler; + type KeyboardEventHandler = EventHandler; + type MouseEventHandler = EventHandler; + type TouchEventHandler = EventHandler; + type UIEventHandler = EventHandler; + type WheelEventHandler = EventHandler; + type AnimationEventHandler = EventHandler; + type TransitionEventHandler = EventHandler; + + // + // Props / DOM Attributes + // ---------------------------------------------------------------------- + + /** + * @deprecated. This was used to allow clients to pass `ref` and `key` + * to `createElement`, which is no longer necessary due to intersection + * types. If you need to declare a props object before passing it to + * `createElement` or a factory, use `ClassAttributes`: + * + * ```ts + * var b: Button; + * var props: ButtonProps & ClassAttributes + + , mountNode); ```` diff --git a/components/dropdown/style/index.less b/components/dropdown/style/index.less index 86d44bf2fd..d8824c5fb7 100644 --- a/components/dropdown/style/index.less +++ b/components/dropdown/style/index.less @@ -17,7 +17,7 @@ position: relative; .ant-btn > .@{iconfont-css-prefix}-down { - .iconfont-size-under-12px(10px); + .iconfont-size-under-12px(9px); } .anticon-down:before { @@ -110,7 +110,7 @@ content: "\e600"; right: 15px; color: #999; - .iconfont-size-under-12px(8px); + .iconfont-size-under-12px(9px); } &-submenu-vertical { @@ -157,7 +157,7 @@ .@{dropdown-prefix-cls}-link { font-size: 12px; .anticon-down { - .iconfont-size-under-12px(8px); + .iconfont-size-under-12px(9px); font-weight: bold; } } @@ -167,6 +167,10 @@ padding-right: 7px; } .anticon-down { - .iconfont-size-under-12px(10px); + .iconfont-size-under-12px(9px); } } + +.ant-btn .anticon-down { + .iconfont-size-under-12px(9px); +} From 63789c3838ec465e35fa0247da6e5f855dbb3fd8 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 13 Sep 2016 18:46:45 +0800 Subject: [PATCH 0110/2145] remove text overflow in select, close #2927 --- components/select/style/index.less | 1 - 1 file changed, 1 deletion(-) diff --git a/components/select/style/index.less b/components/select/style/index.less index e8dc1a9164..bd3486e47d 100644 --- a/components/select/style/index.less +++ b/components/select/style/index.less @@ -439,7 +439,6 @@ white-space: nowrap; cursor: pointer; white-space: nowrap; - text-overflow: ellipsis; overflow: hidden; transition: background 0.3s ease; From 03b22e5e8c2585aa8c1cb68101c4862db166ce8a Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 13 Sep 2016 23:02:34 +0800 Subject: [PATCH 0111/2145] update issue template --- .github/ISSUE_TEMPLATE.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md index bfe6da7901..57768cc097 100644 --- a/.github/ISSUE_TEMPLATE.md +++ b/.github/ISSUE_TEMPLATE.md @@ -1,26 +1,26 @@ - + -#### 本地环境 +#### 发生问题的环境是： - antd 版本: -- 操作系统及其版本： +- 操作系统及其版本: - 浏览器及其版本: -#### 你做了什么？ +#### 您做了什么？ - + -#### 你期待的结果是： +#### 您期待的结果是： - + -#### 实际上的结果： +#### 实际上的结果是： - + #### 可重现的在线演示 From 7459be26aa88850dd96b138f9e5a092545c958b7 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Wed, 14 Sep 2016 09:41:34 +0800 Subject: [PATCH 0112/2145] docs: update docs about timezone, ref: #3020 --- components/date-picker/demo/locale.md | 15 +++++++++------ components/date-picker/index.en-US.md | 6 ++++-- components/date-picker/index.zh-CN.md | 6 ++++-- package.json | 1 + 4 files changed, 18 insertions(+), 10 deletions(-) diff --git a/components/date-picker/demo/locale.md b/components/date-picker/demo/locale.md index d57647fe67..3a7508da72 100644 --- a/components/date-picker/demo/locale.md +++ b/components/date-picker/demo/locale.md @@ -9,28 +9,31 @@ title: 通过 `locale` 语言, 默认支持 `en_US`，`zh_CN`。 -moment 会自动使用当前时区，如果需要使用别的时区，则需要自行设置，设置方法请参考 [moment 官方文档](http://momentjs.com/)。 +moment 会自动使用当前时区，如果需要使用别的时区，则需要自行设置，设置方法请参考 [下面的文档](http://ant.design/components/date-picker/#DatePicker)。 ## en-US Use locale to set the language. `en_US`, `zh_CN` are supported by default. -moment will use your time zone automatically. If you want to set other time zone, please set it by yourself. [More](http://momentjs.com/) +moment will use your time zone automatically. If you want to set other time zone, please set it by yourself. [More](http://ant.design/components/date-picker/#DatePicker) ````jsx import { DatePicker } from 'antd'; import enUS from 'antd/lib/date-picker/locale/en_US'; -import moment from 'moment'; -// It's recommended to set moment locale and time zone globally, -// otherwise, you need to set it by `value` or `defaultValue` or `defaultPickerValue`. +import moment from 'moment-timezone/moment-timezone'; +// It's recommended to set moment locale and time zone globally in entry file, +// otherwise, you need to set it by `value` or `defaultValue`. // moment.locale('en'); +// The following data is copied from https://github.com/moment/moment-timezone/blob/develop/data/packed/latest.json +// moment.tz.add('Europe/London|GMT BST BDST|0 -10 -20|0101010101010101010101010101010101010101010101010121212121210101210101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010|-2axa0 Rc0 1fA0 14M0 1fc0 1g00 1co0 1dc0 1co0 1oo0 1400 1dc0 19A0 1io0 1io0 WM0 1o00 14o0 1o00 17c0 1io0 17c0 1fA0 1a00 1lc0 17c0 1io0 17c0 1fA0 1a00 1io0 17c0 1io0 17c0 1fA0 1cM0 1io0 17c0 1fA0 1a00 1io0 17c0 1io0 17c0 1fA0 1a00 1io0 1qM0 Dc0 2Rz0 Dc0 1zc0 Oo0 1zc0 Rc0 1wo0 17c0 1iM0 FA0 xB0 1fA0 1a00 14o0 bb0 LA0 xB0 Rc0 1wo0 11A0 1o00 17c0 1fA0 1a00 1fA0 1cM0 1fA0 1a00 17c0 1fA0 1a00 1io0 17c0 1lc0 17c0 1fA0 1a00 1io0 17c0 1io0 17c0 1fA0 1a00 1a00 1qM0 WM0 1qM0 11A0 1o00 WM0 1qM0 WM0 1qM0 WM0 1qM0 WM0 1tA0 IM0 90o0 U00 1tA0 U00 1tA0 U00 1tA0 U00 1tA0 WM0 1qM0 WM0 1qM0 WM0 1tA0 U00 1tA0 U00 1tA0 11z0 1o00 11A0 1o00 11A0 1o00 11A0 1qM0 11A0 1o00 11A0 1o00 11A0 1o00 11A0 1o00 11A0 1qM0 WM0 1qM0 11A0 1o00 11A0 1o00 11A0 1o00 11A0 1o00 11A0 1o00 14o0 1o00 11A0 1o00 11A0 1o00 11A0 1qM0 WM0 1qM0 WM0 1qM0 11A0 1o00 11A0 1o00 11A0 1qM0 WM0 1qM0 WM0 1qM0 WM0 1qM0 11A0 1o00 11A0 1o00 11A0 1qM0 WM0 1qM0 WM0 1qM0 11A0 1o00 11A0 1o00 11A0 1o00 11A0 1qM0 WM0 1qM0 WM0 1qM0 11A0 1o00 11A0 1o00 11A0 1qM0 WM0 1qM0 WM0 1qM0 11A0 1o00 11A0 1o00 11A0 1o00 11A0 1qM0 WM0 1qM0 WM0 1qM0 11A0 1o00 11A0 1o00 11A0 1qM0 WM0 1qM0 WM0 1qM0 WM0 1qM0 11A0 1o00 11A0 1o00|10e6'); +// moment.tz.setDefault('Europe/London') const log = console.log.bind(console); ReactDOM.render( ``` diff --git a/components/date-picker/index.zh-CN.md b/components/date-picker/index.zh-CN.md index 8458a28477..595acec63c 100644 --- a/components/date-picker/index.zh-CN.md +++ b/components/date-picker/index.zh-CN.md @@ -16,12 +16,14 @@ subtitle: 日期选择框 ### DatePicker ```jsx -import moment from 'moment-timezone'; +import moment from 'moment-timezone/moment-timezone'; // 推荐在入口文件全局设置 locale 与时区 import 'moment/locale/zh-cn'; moment.locale('zh-cn'); -moment.tz.setDefault('Aisa/Shanghai'); +// 从 https://github.com/moment/moment-timezone/blob/develop/data/packed/latest.json 复制 +moment.tz.add('Asia/Shanghai|CST CDT|-80 -90|01010101010101010|-1c1I0 LX0 16p0 1jz0 1Myp0 Rb0 1o10 11z0 1o10 11z0 1qN0 11z0 1o10 11z0 1o10 11z0|23e6'); +moment.tz.setDefault('Asia/Shanghai') ``` diff --git a/package.json b/package.json index af5222c05d..03bf77e7a2 100644 --- a/package.json +++ b/package.json @@ -105,6 +105,7 @@ "jsonp": "^0.2.0", "lesshint": "^2.0.0", "lodash.debounce": "^4.0.6", + "moment-timezone": "^0.5.5", "nunjucks": "^2.4.2", "pre-commit": "1.x", "querystring": "^0.2.0", From 39a11f00a06ad9b296b0b3cbdf2e0108ddbe064f Mon Sep 17 00:00:00 2001 From: Marius Ileana Date: Wed, 14 Sep 2016 04:52:14 +0300 Subject: [PATCH 0113/2145] docs: upload, alert, tooltip - translations of remaining demos (#3035) * upload - translations of two remaining demos * alert & tooltip - remaining demo translations * Prompt typo --- components/alert/demo/icon.md | 24 +++++++++---------- components/alert/demo/style.md | 2 +- .../tooltip/demo/arrow-point-at-center.md | 18 ++++++++++---- components/upload/demo/basic.md | 6 ++--- components/upload/demo/drag.md | 4 ++-- 5 files changed, 31 insertions(+), 23 deletions(-) diff --git a/components/alert/demo/icon.md b/components/alert/demo/icon.md index a6fda9ec68..1e8743db97 100644 --- a/components/alert/demo/icon.md +++ b/components/alert/demo/icon.md @@ -17,31 +17,31 @@ Decent icon make information more clear and more friendly. import { Alert } from 'antd'; ReactDOM.render(

    - - - - + + + + diff --git a/components/alert/demo/style.md b/components/alert/demo/style.md index d5bb487956..7fae3b28b6 100644 --- a/components/alert/demo/style.md +++ b/components/alert/demo/style.md @@ -11,7 +11,7 @@ title: ## en-US -There are 4 kinds of Alert: `success`, `info`, `warning`, `error`. +There are 4 types of Alert: `success`, `info`, `warning`, `error`. ````jsx import { Alert } from 'antd'; diff --git a/components/tooltip/demo/arrow-point-at-center.md b/components/tooltip/demo/arrow-point-at-center.md index 3eb7aa37b1..9e53fe8dbf 100644 --- a/components/tooltip/demo/arrow-point-at-center.md +++ b/components/tooltip/demo/arrow-point-at-center.md @@ -1,20 +1,28 @@ --- order: 2 -title: 箭头指向 +title: + zh-CN: 箭头指向 + en-US: Arrow pointing at the center --- +## zh-CN + 设置了 `arrowPointAtCenter` 后，箭头将指向目标元素的中心。 +## en-US + +By specifying `arrowPointAtCenter` prop, the arrow will point to the center of the target element. + ````jsx import { Tooltip, Button } from 'antd'; ReactDOM.render(
    - - + + - - + +
    , mountNode); diff --git a/components/upload/demo/basic.md b/components/upload/demo/basic.md index 61a7f67f19..c0653c0c46 100644 --- a/components/upload/demo/basic.md +++ b/components/upload/demo/basic.md @@ -27,9 +27,9 @@ const props = { console.log(info.file, info.fileList); } if (info.file.status === 'done') { - message.success(`${info.file.name} 上传成功。`); + message.success(`${info.file.name} file uploaded successfully`); } else if (info.file.status === 'error') { - message.error(`${info.file.name} 上传失败。`); + message.error(`${info.file.name} file upload failed.`); } }, }; @@ -37,7 +37,7 @@ const props = { ReactDOM.render( , mountNode); diff --git a/components/upload/demo/drag.md b/components/upload/demo/drag.md index 0fda933bd2..f460e05d53 100644 --- a/components/upload/demo/drag.md +++ b/components/upload/demo/drag.md @@ -27,9 +27,9 @@ const props = { console.log(info.file, info.fileList); } if (info.file.status === 'done') { - message.success(`${info.file.name} 上传成功。`); + message.success(`${info.file.name} file uploaded successfully.`); } else if (info.file.status === 'error') { - message.error(`${info.file.name} 上传失败。`); + message.error(`${info.file.name} file upload failed.`); } }, }; From 31a0bed13cf61f442d561bf53d24d931c254aced Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Wed, 14 Sep 2016 10:20:42 +0800 Subject: [PATCH 0114/2145] docs: update demo of Tooltip --- components/tooltip/demo/placement.md | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/components/tooltip/demo/placement.md b/components/tooltip/demo/placement.md index 3913789bef..8d7b9d0904 100644 --- a/components/tooltip/demo/placement.md +++ b/components/tooltip/demo/placement.md @@ -21,46 +21,46 @@ ReactDOM.render(     @@ -68,7 +68,7 @@ ReactDOM.render( ```` diff --git a/components/cascader/index.tsx b/components/cascader/index.tsx index ddc946f491..839c20c100 100644 --- a/components/cascader/index.tsx +++ b/components/cascader/index.tsx @@ -144,6 +144,7 @@ export default class Cascader extends React.Component { this.setState({ popupVisible, inputFocused: popupVisible, + inputValue: popupVisible ? this.state.inputValue : '', }); this.props.onPopupVisibleChange(popupVisible); } @@ -256,6 +257,7 @@ export default class Cascader extends React.Component { const pickerCls = classNames({ [className]: !!className, [`${prefixCls}-picker`]: true, + [`${prefixCls}-picker-with-value`]: state.inputValue, [`${prefixCls}-picker-disabled`]: disabled, }); diff --git a/components/cascader/index.zh-CN.md b/components/cascader/index.zh-CN.md index eaa79b54cf..dd99b11009 100644 --- a/components/cascader/index.zh-CN.md +++ b/components/cascader/index.zh-CN.md @@ -48,3 +48,9 @@ subtitle: 级联选择 | render | 用于渲染 filter 后的选项 | `function(inputValue, path): React.ReactNode` | | | sort | 用于排序 filter 后的选项 | `function(a, b, inputValue)` | | | matchInputWidth | 搜索结果列表是否与输入框同宽 | boolean | | + + diff --git a/components/cascader/style/index.less b/components/cascader/style/index.less index de9cf3e05e..20e15b437b 100644 --- a/components/cascader/style/index.less +++ b/components/cascader/style/index.less @@ -11,8 +11,6 @@ cursor: pointer; width: 100%; z-index: 1; - background: transparent; - color: transparent; } &-picker { position: relative; @@ -23,6 +21,10 @@ background-color: #fff; border-radius: @border-radius-base; + &-with-value &-label { + color: transparent; + } + &-disabled { cursor: not-allowed; From 9de4c7f43638980e521307a6b420bcab8a567833 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Fri, 30 Sep 2016 13:55:50 +0800 Subject: [PATCH 0288/2145] site: remove italic to improve Chinese readability --- site/theme/static/markdown.less | 1 - 1 file changed, 1 deletion(-) diff --git a/site/theme/static/markdown.less b/site/theme/static/markdown.less index d6d5573890..2375f91d1f 100644 --- a/site/theme/static/markdown.less +++ b/site/theme/static/markdown.less @@ -149,7 +149,6 @@ border-left: 4px solid #e9e9e9; padding-left: 0.8em; margin: 1em 0; - font-style: italic; } .markdown blockquote p { From 36e50ed79426fea3b24a7ab30a9fdd4738e0da30 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 30 Sep 2016 14:24:41 +0800 Subject: [PATCH 0289/2145] Improve Layout demo style learn from https://www.iviewui.com/components/layout --- components/layout/demo/basic.md | 18 +++++----- components/layout/demo/flex-align.md | 24 +++++++------- components/layout/demo/flex.md | 42 ++++++++++++------------ components/layout/demo/gutter.md | 19 +++++------ components/layout/demo/offset.md | 10 +++--- components/layout/demo/reponsive-more.md | 8 ++--- components/layout/demo/reponsive.md | 8 ++--- components/layout/demo/sort.md | 4 +-- site/theme/static/markdown.less | 26 ++++++++++----- 9 files changed, 82 insertions(+), 77 deletions(-) diff --git a/components/layout/demo/basic.md b/components/layout/demo/basic.md index 75c2c23a99..1778d70749 100644 --- a/components/layout/demo/basic.md +++ b/components/layout/demo/basic.md @@ -23,19 +23,19 @@ import { Row, Col } from 'antd'; ReactDOM.render(
    -
    .ant-col-12 - .ant-col-12 + col-12 + col-12 - .ant-col-8 - .ant-col-8 - .ant-col-8 + col-8 + col-8 + col-8 - .ant-col-6 - .ant-col-6 - .ant-col-6 - .ant-col-6 + col-6 + col-6 + col-6 + col-6, mountNode diff --git a/components/layout/demo/flex-align.md b/components/layout/demo/flex-align.md index 24cee64d12..483b3b5dee 100644 --- a/components/layout/demo/flex-align.md +++ b/components/layout/demo/flex-align.md @@ -22,26 +22,26 @@ ReactDOM.render(

    Align Top

    -
    .ant-col-4 - .ant-col-4 - .ant-col-4 - .ant-col-4 + col-4 + col-4 + col-4 + col-4

    Align Center

    - .ant-col-4 - .ant-col-4 - .ant-col-4 - .ant-col-4 + col-4 + col-4 + col-4 + col-4

    Align Bottom

    - .ant-col-4 - .ant-col-4 - .ant-col-4 - .ant-col-4 + col-4 + col-4 + col-4 + col-4, mountNode diff --git a/components/layout/demo/flex.md b/components/layout/demo/flex.md index a5207de221..8f3b5330f5 100644 --- a/components/layout/demo/flex.md +++ b/components/layout/demo/flex.md @@ -1,6 +1,6 @@ --- order: 4 -title: +title: zh-CN: Flex 布局 en-US: Flex Layout --- @@ -22,42 +22,42 @@ ReactDOM.render(

    sub-element align left

    -
    .ant-col-4 - .ant-col-4 - .ant-col-4 - .ant-col-4 + col-4 + col-4 + col-4 + col-4

    sub-element align center

    - .ant-col-4 - .ant-col-4 - .ant-col-4 - .ant-col-4 + col-4 + col-4 + col-4 + col-4

    sub-element align right

    - .ant-col-4 - .ant-col-4 - .ant-col-4 - .ant-col-4 + col-4 + col-4 + col-4 + col-4

    sub-element monospaced arrangement

    - .ant-col-4 - .ant-col-4 - .ant-col-4 - .ant-col-4 + col-4 + col-4 + col-4 + col-4

    sub-element align full

    - .ant-col-4 - .ant-col-4 - .ant-col-4 - .ant-col-4 + col-4 + col-4 + col-4 + col-4, mountNode diff --git a/components/layout/demo/gutter.md b/components/layout/demo/gutter.md index 1d0d01fde4..d3ad480fd5 100644 --- a/components/layout/demo/gutter.md +++ b/components/layout/demo/gutter.md @@ -1,8 +1,8 @@ --- order: 1 -title: +title: zh-CN: 区块间隔 - en-US: Block Interval + en-US: Grid Gutter --- ## zh-CN @@ -11,7 +11,7 @@ title: ## en-US -Raster intervals and often need to cooperate, you can use the `gutter`` Row` property, we recommend using `(16 + 8n) px` as grid spacing. +You can use the `gutter` property of `Row` as grid spacing, we recommend set it to `(16 + 8n) px`. ````jsx import { Row, Col } from 'antd'; @@ -20,16 +20,16 @@ ReactDOM.render(
    -
    .ant-col-6
    +
    col-6
    -
    .ant-col-6
    +
    col-6
    -
    .ant-col-6
    +
    col-6
    -
    .ant-col-6
    +
    col-6
    @@ -42,9 +42,6 @@ ReactDOM.render( border: 0; } .gutter-box { - background: #2db7f5; - height: 80px; - line-height: 80px; - border-radius: 6px; + background: #00A0E9; } ```` diff --git a/components/layout/demo/offset.md b/components/layout/demo/offset.md index 307b7c69d7..ca91276872 100644 --- a/components/layout/demo/offset.md +++ b/components/layout/demo/offset.md @@ -24,15 +24,15 @@ import { Row, Col } from 'antd'; ReactDOM.render(
    -
    .ant-col-8 - .ant-col-8 + col-8 + col-8 - .ant-col-6 .ant-col-offset-6 - .ant-col-6 .ant-col-offset-6 + col-6 col-offset-6 + col-6 col-offset-6 - .ant-col-12 .ant-col-offset-6 + col-12 col-offset-6, mountNode diff --git a/components/layout/demo/reponsive-more.md b/components/layout/demo/reponsive-more.md index c2508e117c..cd7c1e23f3 100644 --- a/components/layout/demo/reponsive-more.md +++ b/components/layout/demo/reponsive-more.md @@ -1,6 +1,6 @@ --- order: 8 -title: +title: zh-CN: 其他属性的响应式 en-US: More responsive --- @@ -21,9 +21,9 @@ import { Row, Col } from 'antd'; ReactDOM.render( - - - + Col + Col + Col , mountNode); ```` diff --git a/components/layout/demo/reponsive.md b/components/layout/demo/reponsive.md index 71986d9ada..a417fdcc93 100644 --- a/components/layout/demo/reponsive.md +++ b/components/layout/demo/reponsive.md @@ -1,6 +1,6 @@ --- order: 7 -title: +title: zh-CN: 响应式布局 en-US: Responsive --- @@ -18,9 +18,9 @@ import { Row, Col } from 'antd'; ReactDOM.render( - - - + Col + Col + Col , mountNode); ```` diff --git a/components/layout/demo/sort.md b/components/layout/demo/sort.md index b63719e62e..2aa963e15a 100644 --- a/components/layout/demo/sort.md +++ b/components/layout/demo/sort.md @@ -21,8 +21,8 @@ import { Row, Col } from 'antd'; ReactDOM.render(
    -
    .ant-col-18 .ant-col-push-6 - .ant-col-6 .ant-col-pull-18 + col-18 col-push-6 + col-6 col-pull-18, mountNode diff --git a/site/theme/static/markdown.less b/site/theme/static/markdown.less index d6d5573890..015882a728 100644 --- a/site/theme/static/markdown.less +++ b/site/theme/static/markdown.less @@ -213,6 +213,7 @@ .code-box-demo .demo-row { background-image: linear-gradient(90deg, #F5F5F5 4.16666667%, transparent 4.16666667%, transparent 8.33333333%, #F5F5F5 8.33333333%, #F5F5F5 12.5%, transparent 12.5%, transparent 16.66666667%, #F5F5F5 16.66666667%, #F5F5F5 20.83333333%, transparent 20.83333333%, transparent 25%, #F5F5F5 25%, #F5F5F5 29.16666667%, transparent 29.16666667%, transparent 33.33333333%, #F5F5F5 33.33333333%, #F5F5F5 37.5%, transparent 37.5%, transparent 41.66666667%, #F5F5F5 41.66666667%, #F5F5F5 45.83333333%, transparent 45.83333333%, transparent 50%, #F5F5F5 50%, #F5F5F5 54.16666667%, transparent 54.16666667%, transparent 58.33333333%, #F5F5F5 58.33333333%, #F5F5F5 62.5%, transparent 62.5%, transparent 66.66666667%, #F5F5F5 66.66666667%, #F5F5F5 70.83333333%, transparent 70.83333333%, transparent 75%, #F5F5F5 75%, #F5F5F5 79.16666667%, transparent 79.16666667%, transparent 83.33333333%, #F5F5F5 83.33333333%, #F5F5F5 87.5%, transparent 87.5%, transparent 91.66666667%, #F5F5F5 91.66666667%, #F5F5F5 95.83333333%, transparent 95.83333333%); overflow: hidden; + margin-bottom: 8px; } .ant-row-flex, .code-box-demo .ant-row-flex { @@ -224,21 +225,24 @@ .code-box-demo .ant-row-flex > div { padding: 5px 0; text-align: center; - border-radius: 6px; + border-radius: 0; min-height: 30px; - margin-top: 10px; - margin-bottom: 10px; + margin-top: 8px; + margin-bottom: 8px; color: #fff; } .code-box-demo .ant-row > div:not(.gutter-row), .code-box-demo .ant-row-flex > div:not(.gutter-row) { - background: #6AC2F5; - border: 1px solid rgba(0, 0, 0, 0.1); + background: #00A0E9; + padding: 16px 0; + &:nth-child(2n+1) { + background: fade(#00A0E9, 70%); + } } .ant-row .demo-col, .code-box-demo .ant-row .demo-col { text-align: center; - padding: 40px 0; + padding: 30px 0; color: #fff; font-size: 18px; border: none; @@ -247,11 +251,11 @@ } .ant-row .demo-col-1, .ant-row .demo-col-1 { - background: rgba(29, 128, 211, 0.7); + background: fade(#00A0E9, 70%); } .ant-row .demo-col-2, .code-box-demo .ant-row .demo-col-2 { - background: rgba(29, 128, 211, 0.5); + background: fade(#00A0E9, 50%); } .ant-row .demo-col-3, .code-box-demo .ant-row .demo-col-3{ @@ -260,7 +264,7 @@ } .ant-row .demo-col-4, .code-box-demo .ant-row .demo-col-4 { - background: rgba(29, 128, 211, 0.6); + background: fade(#00A0E9, 60%); } .ant-row .demo-col-5, .code-box-demo .ant-row .demo-col-5 { @@ -269,15 +273,19 @@ } .code-box-demo .height-100 { height: 100px; + line-height: 100px; } .code-box-demo .height-50 { height: 50px; + line-height: 50px; } .code-box-demo .height-120 { height: 120px; + line-height: 120px; } .code-box-demo .height-80 { height: 80px; + line-height: 80px; } } From a932a4ac08cb4f43756f69af69bd8166e7634427 Mon Sep 17 00:00:00 2001 From: Shawn Sit Date: Fri, 30 Sep 2016 14:56:53 +0800 Subject: [PATCH 0290/2145] docs: translated controlled demo (#3220) * translated controlled demo * fixs: misspell & shorter label --- components/mention/demo/controlled.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/components/mention/demo/controlled.md b/components/mention/demo/controlled.md index 256f7ceb0e..b20b6024a8 100644 --- a/components/mention/demo/controlled.md +++ b/components/mention/demo/controlled.md @@ -43,7 +43,7 @@ let App = React.createClass({ const { getFieldValue } = this.props.form; const mentions = getMentions(getFieldValue('mention')); if (mentions.length < 2) { - callback(new Error('最帅的码农不止一个！!')); + callback(new Error('More than one must be selected!')); } else { callback(); } @@ -55,7 +55,7 @@ let App = React.createClass({ @@ -71,9 +71,9 @@ let App = React.createClass({ )} - +     - + ); From 06e4eaa7d58c02602773ae93611798cc1b0c0876 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Fri, 30 Sep 2016 15:21:03 +0800 Subject: [PATCH 0291/2145] fix: progress demo and trailWidth --- components/progress/demo/format.md | 4 ++-- components/progress/progress.tsx | 3 ++- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/components/progress/demo/format.md b/components/progress/demo/format.md index 9a8aa87c0e..5d92a56e72 100644 --- a/components/progress/demo/format.md +++ b/components/progress/demo/format.md @@ -18,8 +18,8 @@ import { Progress } from 'antd'; ReactDOM.render(
    - `${percent}% Discount`} /> - 'Complete'} /> + `${percent} Days`} /> + 'Done'} />
    , mountNode); ```` diff --git a/components/progress/progress.tsx b/components/progress/progress.tsx index c384c40c0b..4b79d07af7 100644 --- a/components/progress/progress.tsx +++ b/components/progress/progress.tsx @@ -92,9 +92,10 @@ export default class Progress extends React.Component { height: circleSize, fontSize: circleSize * 0.16 + 6, }; + const circleWidth = strokeWidth || 6; progress = (
    - {progressInfo} From 96e71a4147079fc3bc2ff1fbe60db77039b3e502 Mon Sep 17 00:00:00 2001 From: ddcat1115 Date: Fri, 30 Sep 2016 17:44:55 +0800 Subject: [PATCH 0292/2145] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=20Spin=20?= =?UTF-8?q?=E5=9E=82=E7=9B=B4=E5=B1=85=E4=B8=AD=E9=97=AE=E9=A2=98=20close?= =?UTF-8?q?=20#3097=20(#3214)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/spin/style/index.less | 22 +++++++++++++++++----- 1 file changed, 17 insertions(+), 5 deletions(-) diff --git a/components/spin/style/index.less b/components/spin/style/index.less index eb20f008cc..5a56023e08 100644 --- a/components/spin/style/index.less +++ b/components/spin/style/index.less @@ -46,17 +46,29 @@ margin: -@spin-dot-size-lg / 2; } + &-show-text .@{spin-prefix-cls}-dot { + margin: -@spin-dot-size / 2 - @font-size-base / 2; + } + + &-show-text.@{spin-prefix-cls}-sm .@{spin-prefix-cls}-dot { + margin: -@spin-dot-size-sm / 2 - @font-size-base / 2; + } + + &-show-text.@{spin-prefix-cls}-lg .@{spin-prefix-cls}-dot { + margin: -@spin-dot-size-lg / 2 - @font-size-base / 2; + } + &-text { position: absolute; top: 50%; width: 100%; - padding-top: @spin-dot-size / 2; + padding-top: (@spin-dot-size - @font-size-base) / 2; } - &-sm &-text { - padding-top: @spin-dot-size-sm / 2; + &-sm .@{spin-prefix-cls}-text { + padding-top: (@spin-dot-size-sm - @font-size-base) / 2; } - &-lg &-text { - padding-top: @spin-dot-size-lg / 2; + &-lg .@{spin-prefix-cls}-text { + padding-top: (@spin-dot-size-lg - @font-size-base) / 2; } } From 9c83538621b3cae052abd4e8f675e8572f832269 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Fri, 30 Sep 2016 17:45:58 +0800 Subject: [PATCH 0293/2145] fix: should work with getFieldDecorator (#3251) --- components/transfer/index.tsx | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/components/transfer/index.tsx b/components/transfer/index.tsx index 605bfe9c8a..0627170751 100644 --- a/components/transfer/index.tsx +++ b/components/transfer/index.tsx @@ -1,9 +1,9 @@ import React from 'react'; import { PropTypes } from 'react'; +import classNames from 'classnames'; import List from './list'; import Operation from './operation'; import Search from './search'; -import classNames from 'classnames'; function noop() { } @@ -46,7 +46,6 @@ export default class Transfer extends React.Component { prefixCls: 'ant-transfer', dataSource: [], render: noop, - targetKeys: [], onChange: noop, onSelectChange: noop, titles: ['源列表', '目的列表'], @@ -95,15 +94,16 @@ export default class Transfer extends React.Component { // clear cached splited dataSource this.splitedDataSource = null; - const { dataSource, targetKeys } = nextProps; + const { dataSource, targetKeys = [] } = nextProps; + function existInDateSourcekey(key) { + return dataSource.filter(item => item.key === key).length; + } // clear key nolonger existed // clear checkedKeys according to targetKeys this.setState({ - leftCheckedKeys: leftCheckedKeys - .filter(data => dataSource.filter(item => item.key === data).length) + leftCheckedKeys: leftCheckedKeys.filter(existInDateSourcekey) .filter(data => targetKeys.filter(key => key === data).length === 0), - rightCheckedKeys: rightCheckedKeys - .filter(data => dataSource.filter(item => item.key === data).length) + rightCheckedKeys: rightCheckedKeys.filter(existInDateSourcekey) .filter(data => targetKeys.filter(key => key === data).length > 0), }); } @@ -113,7 +113,7 @@ export default class Transfer extends React.Component { return this.splitedDataSource; } - const { dataSource, targetKeys } = props; + const { dataSource, targetKeys = [] } = props; if (props.rowKey) { dataSource.forEach(record => { record.key = props.rowKey(record); @@ -138,7 +138,7 @@ export default class Transfer extends React.Component { } moveTo = (direction) => { - const { targetKeys, onChange } = this.props; + const { targetKeys = [], onChange } = this.props; const { leftCheckedKeys, rightCheckedKeys } = this.state; const moveKeys = direction === 'right' ? leftCheckedKeys : rightCheckedKeys; // move items to target box From e4ed800b6164baba2703c2ef0407ae9bd6f3ab41 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Fri, 30 Sep 2016 18:13:22 +0800 Subject: [PATCH 0294/2145] docs: should not jump to other website --- components/menu/demo/horizontal.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/menu/demo/horizontal.md b/components/menu/demo/horizontal.md index 8798b7865e..53b580a3af 100755 --- a/components/menu/demo/horizontal.md +++ b/components/menu/demo/horizontal.md @@ -53,7 +53,7 @@ const App = React.createClass({ - Navigation Four - Link + Navigation Four - Link ); From 5705f72fb80678691631f7df1b01a8f5127edc03 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Sat, 1 Oct 2016 00:17:31 +0800 Subject: [PATCH 0295/2145] fix: make sure en|ru locale import after zh-CN (#3246) * fix: make sure en|ru locale import after zh-CN * refactor: simplify code --- components/_util/getLocale.tsx | 14 ++++++++++++++ components/calendar/index.tsx | 22 ++++++---------------- components/date-picker/wrapPicker.tsx | 22 ++++++---------------- components/locale-provider/en_US.tsx | 3 +++ components/locale-provider/ru_RU.tsx | 4 ++++ site/theme/template/Layout/index.jsx | 14 +++++++++----- 6 files changed, 42 insertions(+), 37 deletions(-) create mode 100644 components/_util/getLocale.tsx diff --git a/components/_util/getLocale.tsx b/components/_util/getLocale.tsx new file mode 100644 index 0000000000..55a19ff04b --- /dev/null +++ b/components/_util/getLocale.tsx @@ -0,0 +1,14 @@ +import assign from 'object-assign'; + +export default function getLocale(props, context, component, getDefaultLocale) { + let locale = null; + if (context && context.antLocale && context.antLocale[component]) { + locale = context.antLocale[component]; + } else { + locale = getDefaultLocale(); + } + // 统一合并为完整的 Locale + const result = assign({}, locale, props.locale); + result.lang = assign({}, locale.lang, props.locale.lang); + return result; +} diff --git a/components/calendar/index.tsx b/components/calendar/index.tsx index 7d50e289d4..6d9ab7956c 100644 --- a/components/calendar/index.tsx +++ b/components/calendar/index.tsx @@ -2,10 +2,10 @@ import React from 'react'; import { PropTypes } from 'react'; import moment from 'moment'; import FullCalendar from 'rc-calendar/lib/FullCalendar'; -import defaultLocale from './locale/zh_CN'; import { PREFIX_CLS } from './Constants'; import Header from './Header'; -import assign from 'object-assign'; +import getLocale from '../_util/getLocale'; +declare const require: Function; function noop() { return null; } @@ -81,19 +81,6 @@ export default class Calendar extends React.Component { } } - getLocale = () => { - const props = this.props; - const context = this.context; - let locale = defaultLocale; - if (context && context.antLocale && context.antLocale.Calendar) { - locale = context.antLocale.Calendar; - } - // 统一合并为完整的 Locale - const result = assign({}, locale, props.locale); - result.lang = assign({}, locale.lang, props.locale.lang); - return result; - } - monthCellRender = (value) => { const prefixCls = this.props.prefixCls; return ( @@ -142,7 +129,10 @@ export default class Calendar extends React.Component { const { value, mode } = this.state; const { prefixCls, style, className, fullscreen } = props; const type = (mode === 'year') ? 'month' : 'date'; - const locale = this.getLocale(); + const locale = getLocale( + this.props, this.context, 'Calendar', + () => require('./locale/zh_CN') + ); let cls = className || ''; if (fullscreen) { diff --git a/components/date-picker/wrapPicker.tsx b/components/date-picker/wrapPicker.tsx index d4453d9303..85345fbf9e 100644 --- a/components/date-picker/wrapPicker.tsx +++ b/components/date-picker/wrapPicker.tsx @@ -2,9 +2,9 @@ import React from 'react'; import { PropTypes } from 'react'; import TimePickerPanel from 'rc-time-picker/lib/Panel'; import classNames from 'classnames'; -import defaultLocale from './locale/zh_CN'; -import assign from 'object-assign'; import warning from 'warning'; +import getLocale from '../_util/getLocale'; +declare const require: Function; export default function wrapPicker(Picker, defaultFormat?) { const PickerWrapper = React.createClass({ @@ -32,19 +32,6 @@ export default function wrapPicker(Picker, defaultFormat?) { antLocale: PropTypes.object, }, - getLocale() { - const props = this.props; - const context = this.context; - let locale = defaultLocale; - if (context.antLocale && context.antLocale.DatePicker) { - locale = context.antLocale.DatePicker; - } - // 统一合并为完整的 Locale - const result = assign({}, locale, props.locale); - result.lang = assign({}, locale.lang, props.locale.lang); - return result; - }, - handleOpenChange(open) { const { onOpenChange, toggleOpen } = this.props; onOpenChange(open); @@ -72,7 +59,10 @@ export default function wrapPicker(Picker, defaultFormat?) { [`${inputPrefixCls}-sm`]: props.size === 'small', }); - const locale = this.getLocale(); + const locale = getLocale( + this.props, this.context, 'DatePicker', + () => require('./locale/zh_CN') + ); const timeFormat = (props.showTime && props.showTime.format) || 'HH:mm:ss'; const rcTimePickerProps = { diff --git a/components/locale-provider/en_US.tsx b/components/locale-provider/en_US.tsx index 3a159c3e20..7381ebe7ae 100644 --- a/components/locale-provider/en_US.tsx +++ b/components/locale-provider/en_US.tsx @@ -1,3 +1,6 @@ +import moment from 'moment'; +moment.locale('en'); + import Pagination from 'rc-pagination/lib/locale/en_US'; import DatePicker from '../date-picker/locale/en_US'; import TimePicker from '../time-picker/locale/en_US'; diff --git a/components/locale-provider/ru_RU.tsx b/components/locale-provider/ru_RU.tsx index dfa0f495f7..4c97feb50d 100644 --- a/components/locale-provider/ru_RU.tsx +++ b/components/locale-provider/ru_RU.tsx @@ -2,6 +2,10 @@ * Created by Andrey Gayvoronsky on 13/04/16. */ +import moment from 'moment'; +import 'moment/locale/ru'; +moment.locale('ru'); + import Pagination from 'rc-pagination/lib/locale/ru_RU'; import DatePicker from '../date-picker/locale/ru_RU'; import TimePicker from '../time-picker/locale/ru_RU'; diff --git a/site/theme/template/Layout/index.jsx b/site/theme/template/Layout/index.jsx index 67ed963dc7..da2eddaa71 100644 --- a/site/theme/template/Layout/index.jsx +++ b/site/theme/template/Layout/index.jsx @@ -1,6 +1,8 @@ import React from 'react'; import ReactDOM from 'react-dom'; import { addLocaleData, IntlProvider } from 'react-intl'; +import { LocaleProvider } from 'antd'; +import enUS from 'antd/lib/locale-provider/en_US'; import Header from './Header'; import Footer from './Footer'; import enLocale from '../../en-US'; @@ -47,11 +49,13 @@ export default class Layout extends React.Component { const { children, ...restProps } = this.props; return ( -
    -
    - {children} -
    -
    + +
    +
    + {children} +
    +
    +     ); } From 2ddc2fc5830980fbf464e4f1117b2d51f0063df2 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Sat, 1 Oct 2016 00:17:35 +0800 Subject: [PATCH 0296/2145] docs: add change log for 2.0.1 (#3254) --- CHANGELOG.en-US.md | 14 ++++++++++++++ CHANGELOG.zh-CN.md | 14 ++++++++++++++ 2 files changed, 28 insertions(+) diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index 129b66b0ad..e665ba9b09 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -9,6 +9,20 @@ If you want to read change logs before `2.0.0`, please visit [GitHub](https://gi --- +## 2.0.1 + +`2016-09-30` + +- Fix developers cannot call methods of react-slick. [#3164](https://github.com/ant-design/ant-design/issues/3164) +- Fix Steps.Step[icon] should support React.ReactNode. [#3159](https://github.com/ant-design/ant-design/issues/3159) +- Fix server-side render for Affix. [#3216](https://github.com/ant-design/ant-design/issues/3216) +- Fix Mention should supoort `onSelect` `placeholder`. [#3236](https://github.com/ant-design/ant-design/issues/3236) [#3226](https://github.com/ant-design/ant-design/issues/3226) +- Fix Transfer cannot work with `getFieldDecorator`. +- Fix LocaleProvider doesn't work for time-related components. +- Fix Cascader doesn't show search text in search mode. +- Fix the animation & text Spin should be placed in vertical middle. +- Fix styles of RangePicker Modal Tag Progress. + ## 2.0.0 `2016-09-28` diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index 124eaea52c..8abbfc37d8 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -9,6 +9,20 @@ timeline: true --- +## 2.0.1 + +`2016-09-30` + +- 修复无法调用 react-slick 方法的问题。[#3164](https://github.com/ant-design/ant-design/issues/3164) +- 修复 Steps.Step[icon] 不支持 React.ReactNode 的问题。[#3159](https://github.com/ant-design/ant-design/issues/3159) +- 修复 Affix 不支持服务端渲染的问题。[#3216](https://github.com/ant-design/ant-design/issues/3216) +- 修复 Mention 不支持 `onSelect` `placeholder` 的问题。[#3236](https://github.com/ant-design/ant-design/issues/3236) [#3226](https://github.com/ant-design/ant-design/issues/3226) +- 修复 Transfer 与 `getFieldDecorator` 一起使用时的报错问题。 +- 修复 LocaleProvider 对时间组件无效的问题。 +- 修复 Cascader 搜索模式搜索文字显示不了的问题。 +- 修复 Spin 动画与文案整体不垂直居中的问题。 +- 修复 RangePicker Modal Tag Progress 等组件样式问题。 + ## 2.0.0 `2016-09-28` From 94f2d089781569be6116d70657a56c16939268f9 Mon Sep 17 00:00:00 2001 From: kvetoslavnovak Date: Sat, 1 Oct 2016 02:01:18 +0200 Subject: [PATCH 0297/2145] docs: Table Checkbox props - English Translation (#3258) --- components/table/demo/row-selection-props.md | 22 ++++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/components/table/demo/row-selection-props.md b/components/table/demo/row-selection-props.md index b62f9a43a2..613539e8d4 100644 --- a/components/table/demo/row-selection-props.md +++ b/components/table/demo/row-selection-props.md @@ -17,37 +17,37 @@ Set props to Checkbox or Radio. import { Table } from 'antd'; const columns = [{ - title: '姓名', + title: 'Name', dataIndex: 'name', render: text => {text}, }, { - title: '年龄', + title: 'Age', dataIndex: 'age', }, { - title: '住址', + title: 'Address', dataIndex: 'address', }]; const data = [{ key: '1', - name: '胡彦斌', + name: 'John Brown', age: 32, - address: '西湖区湖底公园1号', + address: 'New York No. 1 Lake Park', }, { key: '2', - name: '胡彦祖', + name: 'Jim Green', age: 42, - address: '西湖区湖底公园1号', + address: 'London No. 1 Lake Park', }, { key: '3', - name: '李大嘴', + name: 'Joe Black', age: 32, - address: '西湖区湖底公园1号', + address: 'Sidney No. 1 Lake Park', }]; -// 通过 rowSelection 对象表明需要行选择 +// rowSelection object indicates the need for row selection const rowSelection = { getCheckboxProps: record => ({ - disabled: record.name === '胡彦祖', // 配置无法勾选的列 + disabled: record.name === 'Jim Green', // Column configuration not to be checked }), }; From 5d914d6ba32b84db092c4752fb30f39fe32c5a68 Mon Sep 17 00:00:00 2001 From: kvetoslavnovak Date: Sat, 1 Oct 2016 02:02:01 +0200 Subject: [PATCH 0298/2145] docs: Reset filters and sorters - English Translation (#3259) --- components/table/demo/reset-filter.md | 38 +++++++++++++-------------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/components/table/demo/reset-filter.md b/components/table/demo/reset-filter.md index 750ef64fd8..c08f91d370 100644 --- a/components/table/demo/reset-filter.md +++ b/components/table/demo/reset-filter.md @@ -30,24 +30,24 @@ import { Table } from 'antd'; const data = [{ key: '1', - name: '胡斌', + name: 'John Brown', age: 32, - address: '南湖区湖底公园1号', + address: 'New York No. 1 Lake Park', }, { key: '2', - name: '胡彦祖', + name: 'Jim Green', age: 42, - address: '西湖区湖底公园12号', + address: 'London No. 1 Lake Park', }, { key: '3', - name: '李大嘴', + name: 'Joe Black', age: 32, - address: '南湖区湖底公园123号', + address: 'Sidney No. 1 Lake Park', }, { key: '4', - name: '李秀莲大嘴哥', + name: 'Jim Red', age: 32, - address: '西湖区湖底公园123号', + address: 'London No. 2 Lake Park', }]; const App = React.createClass({ @@ -58,7 +58,7 @@ const App = React.createClass({ }; }, handleChange(pagination, filters, sorter) { - console.log('各类参数是', pagination, filters, sorter); + console.log('Various parameters', pagination, filters, sorter); this.setState({ filteredInfo: filters, sortedInfo: sorter, @@ -89,30 +89,30 @@ const App = React.createClass({ sortedInfo = sortedInfo || {}; filteredInfo = filteredInfo || {}; const columns = [{ - title: '姓名', + title: 'Name', dataIndex: 'name', key: 'name', filters: [ - { text: '姓李的', value: '李' }, - { text: '姓胡的', value: '胡' }, + { text: 'Joe', value: 'Joe' }, + { text: 'Jim', value: 'Jim' }, ], filteredValue: filteredInfo.name, onFilter: (value, record) => record.name.includes(value), sorter: (a, b) => a.name.length - b.name.length, sortOrder: sortedInfo.columnKey === 'name' && sortedInfo.order, }, { - title: '年龄', + title: 'Age', dataIndex: 'age', key: 'age', sorter: (a, b) => a.age - b.age, sortOrder: sortedInfo.columnKey === 'age' && sortedInfo.order, }, { - title: '地址', + title: 'Address', dataIndex: 'address', key: 'address', filters: [ - { text: '南湖', value: '南湖' }, - { text: '西湖', value: '西湖' }, + { text: 'London', value: 'London' }, + { text: 'New York', value: 'New York' }, ], filteredValue: filteredInfo.address, onFilter: (value, record) => record.address.includes(value), @@ -122,9 +122,9 @@ const App = React.createClass({ return (
    From 7a40f8f2007a1bcd9cfabdb803dad981ef4f2cc8 Mon Sep 17 00:00:00 2001 From: kvetoslavnovak Date: Sat, 1 Oct 2016 02:02:18 +0200 Subject: [PATCH 0299/2145] docs: Table selection - English Translation (#3257) --- components/table/demo/row-selection.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/components/table/demo/row-selection.md b/components/table/demo/row-selection.md index 8d20be05ed..9ce02fc6ae 100644 --- a/components/table/demo/row-selection.md +++ b/components/table/demo/row-selection.md @@ -17,34 +17,34 @@ Rows can be selectable by making fisrt column as a selectable column. import { Table } from 'antd'; const columns = [{ - title: '姓名', + title: 'Name', dataIndex: 'name', render: text => {text}, }, { - title: '年龄', + title: 'Age', dataIndex: 'age', }, { - title: '住址', + title: 'Address', dataIndex: 'address', }]; const data = [{ key: '1', - name: '胡彦斌', + name: 'John Brown', age: 32, - address: '西湖区湖底公园1号', + address: 'New York No. 1 Lake Park', }, { key: '2', - name: '胡彦祖', + name: 'Jim Green', age: 42, - address: '西湖区湖底公园1号', + address: 'London No. 1 Lake Park', }, { key: '3', - name: '李大嘴', + name: 'Joe Black', age: 32, - address: '西湖区湖底公园1号', + address: 'Sidney No. 1 Lake Park', }]; -// 通过 rowSelection 对象表明需要行选择 +// rowSelection object indicates the need for row selection const rowSelection = { onChange(selectedRowKeys, selectedRows) { console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows); From e9ba1e83c720e5cf00bb31c794da04e860a9631f Mon Sep 17 00:00:00 2001 From: kvetoslavnovak Date: Sat, 1 Oct 2016 02:03:20 +0200 Subject: [PATCH 0300/2145] docs: Table Basic usage - English Translation (#3256) --- components/table/demo/basic.md | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/components/table/demo/basic.md b/components/table/demo/basic.md index 43598609c7..75c7b81890 100644 --- a/components/table/demo/basic.md +++ b/components/table/demo/basic.md @@ -17,29 +17,29 @@ Simple table with operations. import { Table, Icon } from 'antd'; const columns = [{ - title: '姓名', + title: 'Name', dataIndex: 'name', key: 'name', render: text => {text}, }, { - title: '年龄', + title: 'Age', dataIndex: 'age', key: 'age', }, { - title: '住址', + title: 'Address', dataIndex: 'address', key: 'address', }, { - title: '操作', + title: 'Operation', key: 'operation', render: (text, record) => ( - 操作一{record.name} + Operation 一 {record.name} - 操作二 + Next operation - 更多 + More ), @@ -47,19 +47,19 @@ const columns = [{ const data = [{ key: '1', - name: '胡彦斌', + name: 'John Brown', age: 32, - address: '西湖区湖底公园1号', + address: 'New York No. 1 Lake Park', }, { key: '2', - name: '胡彦祖', + name: 'Jim Green', age: 42, - address: '西湖区湖底公园1号', + address: 'London No. 1 Lake Park', }, { key: '3', - name: '李大嘴', + name: 'Joe Black', age: 32, - address: '西湖区湖底公园1号', + address: 'Sidney No. 1 Lake Park', }]; ReactDOM.render(
    , mountNode); From 7e4efe57b9d6f178f73106b206c605b266b16699 Mon Sep 17 00:00:00 2001 From: kvetoslavnovak Date: Sat, 1 Oct 2016 02:03:36 +0200 Subject: [PATCH 0301/2145] docs: Timeline Basic - English Translation (#3260) --- components/timeline/demo/basic.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/components/timeline/demo/basic.md b/components/timeline/demo/basic.md index 225a589a3b..365a080a8a 100644 --- a/components/timeline/demo/basic.md +++ b/components/timeline/demo/basic.md @@ -18,10 +18,10 @@ import { Timeline } from 'antd'; ReactDOM.render( - 创建服务现场 2015-09-01 - 初步排除网络异常 2015-09-01 - 技术测试异常 2015-09-01 - 网络异常正在修复 2015-09-01 + Create a services site 2015-09-01 + Solve initial network problems 2015-09-01 + Technical testing 2015-09-01 + Network problems being solved 2015-09-01 , mountNode); ```` From 79f28295842dbabfcb37bf4f17755d5eab2f75b9 Mon Sep 17 00:00:00 2001 From: kvetoslavnovak Date: Sat, 1 Oct 2016 02:03:50 +0200 Subject: [PATCH 0302/2145] docs: Timeline Color - English Translation (#3261) --- components/timeline/demo/color.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/components/timeline/demo/color.md b/components/timeline/demo/color.md index 9ea5cac62d..dd8d2d14f5 100644 --- a/components/timeline/demo/color.md +++ b/components/timeline/demo/color.md @@ -18,17 +18,17 @@ import { Timeline } from 'antd'; ReactDOM.render( - 创建服务现场 2015-09-01 - 创建服务现场 2015-09-01 + Create a services site 2015-09-01 + Create a services site 2015-09-01 -

    初步排除网络异常1

    -

    初步排除网络异常2

    -

    初步排除网络异常3 2015-09-01

    +

    Solve initial network problems 1

    +

    Solve initial network problems 2

    +

    Solve initial network problems 3 2015-09-01

     -

    技术测试异常1

    -

    技术测试异常2

    -

    技术测试异常3 2015-09-01

    +

    Technical testing 1

    +

    Technical testing 2

    +

    Technical testing 3 2015-09-01

         , mountNode); From a3fb631ece9059ed6d67fe848b8ddcc927066cba Mon Sep 17 00:00:00 2001 From: kvetoslavnovak Date: Sat, 1 Oct 2016 02:04:13 +0200 Subject: [PATCH 0303/2145] docs: Timeline Last node - English Translation (#3262) --- components/timeline/demo/pending.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/components/timeline/demo/pending.md b/components/timeline/demo/pending.md index f8ad3a18b6..2f7c2b6b23 100644 --- a/components/timeline/demo/pending.md +++ b/components/timeline/demo/pending.md @@ -17,10 +17,10 @@ When the timeline is incomplete and ongoing, put a ghost node at last. set `pend import { Timeline } from 'antd'; ReactDOM.render( - 查看更多}> - 创建服务现场 2015-09-01 - 初步排除网络异常 2015-09-01 - 技术测试异常 2015-09-01 + See more}> + Create a services site 2015-09-01 + Solve initial network problems 2015-09-01 + Technical testing 2015-09-01 , mountNode); ```` From bfb063e5257171daa6029aa6ee951ca84f4e4879 Mon Sep 17 00:00:00 2001 From: kvetoslavnovak Date: Sat, 1 Oct 2016 02:04:27 +0200 Subject: [PATCH 0304/2145] docs: Timeline Custom - English Translation (#3263) --- components/timeline/demo/custom.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/components/timeline/demo/custom.md b/components/timeline/demo/custom.md index d3dfbd8948..39b73d9cdb 100644 --- a/components/timeline/demo/custom.md +++ b/components/timeline/demo/custom.md @@ -18,10 +18,10 @@ import { Timeline, Icon } from 'antd'; ReactDOM.render( - 创建服务现场 2015-09-01 - 初步排除网络异常 2015-09-01 - } color="red">技术测试异常 2015-09-01 - 网络异常正在修复 2015-09-01 + Create a services site 2015-09-01 + Solve initial network problems 2015-09-01 + } color="red">Technical testing 2015-09-01 + Network problems being solved 2015-09-01 , mountNode); ```` From 27649dd8d84618681e116ceb4b40e10aefbbcb71 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Sat, 1 Oct 2016 08:27:07 +0800 Subject: [PATCH 0305/2145] fix: should generate style/css for LocaleProvider, close: #3255 --- components/locale-provider/style/index.less | 0 components/locale-provider/style/index.tsx | 1 + 2 files changed, 1 insertion(+) create mode 100644 components/locale-provider/style/index.less diff --git a/components/locale-provider/style/index.less b/components/locale-provider/style/index.less new file mode 100644 index 0000000000..e69de29bb2 diff --git a/components/locale-provider/style/index.tsx b/components/locale-provider/style/index.tsx index e69de29bb2..d74e52ee9f 100644 --- a/components/locale-provider/style/index.tsx +++ b/components/locale-provider/style/index.tsx @@ -0,0 +1 @@ +import './index.less'; From d9e6e5bc15cffd9a1ed3992bfb1c8f2b9e74665a Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Sat, 1 Oct 2016 08:29:06 +0800 Subject: [PATCH 0306/2145] bump 2.0.1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 46a95cb86d..d24e416663 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "antd", - "version": "2.0.0", + "version": "2.0.1", "title": "Ant Design", "description": "An enterprise-class UI design language and React-based implementation", "homepage": "http://ant.design/", From cd84cee399dc9cef548a0ba83ed5ecf9e3251079 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Sat, 1 Oct 2016 08:34:00 +0800 Subject: [PATCH 0307/2145] docs: fix update publish date --- CHANGELOG.en-US.md | 2 +- CHANGELOG.zh-CN.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index e665ba9b09..9c4aeb4457 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -11,7 +11,7 @@ If you want to read change logs before `2.0.0`, please visit [GitHub](https://gi ## 2.0.1 -`2016-09-30` +`2016-10-01` - Fix developers cannot call methods of react-slick. [#3164](https://github.com/ant-design/ant-design/issues/3164) - Fix Steps.Step[icon] should support React.ReactNode. [#3159](https://github.com/ant-design/ant-design/issues/3159) diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index 8abbfc37d8..cb7a81a077 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -11,7 +11,7 @@ timeline: true ## 2.0.1 -`2016-09-30` +`2016-10-01` - 修复无法调用 react-slick 方法的问题。[#3164](https://github.com/ant-design/ant-design/issues/3164) - 修复 Steps.Step[icon] 不支持 React.ReactNode 的问题。[#3159](https://github.com/ant-design/ant-design/issues/3159) From 61910bc2cb65e08287b4e91d094d3f6549d954ee Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Sun, 2 Oct 2016 08:21:10 +0800 Subject: [PATCH 0308/2145] fix: SSR for Affix and BackTop, close: #3283 --- components/affix/index.tsx | 3 ++- components/back-top/index.tsx | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/components/affix/index.tsx b/components/affix/index.tsx index d5f2eae115..2b9ff4cc99 100644 --- a/components/affix/index.tsx +++ b/components/affix/index.tsx @@ -57,7 +57,8 @@ export default class Affix extends React.Component { static defaultProps = { target() { - return window; + return typeof window !== 'undefined' ? + window : null; }, onChange() {}, prefixCls: 'ant-affix', diff --git a/components/back-top/index.tsx b/components/back-top/index.tsx index a10e5187fc..e8fd369b0b 100644 --- a/components/back-top/index.tsx +++ b/components/back-top/index.tsx @@ -44,7 +44,8 @@ export default class BackTop extends React.Component { onClick() {}, visibilityHeight: 400, target() { - return window; + return typeof window !== 'undefined' ? + window : null; }, prefixCls: 'ant-back-top', }; From 74ae8f4283de528c52ea2fa806dbb3202bbecbf5 Mon Sep 17 00:00:00 2001 From: kvetoslavnovak Date: Sun, 2 Oct 2016 02:32:04 +0200 Subject: [PATCH 0309/2145] docs: Table - Grouping table head - English Translation (#3281) * Table - Grouping table head - English Translation * Update grouping-columns.md --- components/table/demo/grouping-columns.md | 44 +++++++++++------------ 1 file changed, 22 insertions(+), 22 deletions(-) diff --git a/components/table/demo/grouping-columns.md b/components/table/demo/grouping-columns.md index 87d833511d..0226a5d8ff 100644 --- a/components/table/demo/grouping-columns.md +++ b/components/table/demo/grouping-columns.md @@ -18,50 +18,50 @@ import { Table } from 'antd'; const columns = [ { - title: '姓名', + title: 'Name', dataIndex: 'name', key: 'name', width: 100, fixed: 'left', filters: [{ - text: '姓李的', - value: '李', + text: 'Joe', + value: 'Joe', }, { - text: '姓胡的', - value: '胡', + text: 'John', + value: 'John', }], onFilter: (value, record) => record.name.indexOf(value) === 0, }, { - title: '其它', + title: 'Other', children: [ { - title: '年龄', + title: 'Age', dataIndex: 'age', key: 'age', width: 100, sorter: (a, b) => a.age - b.age, }, { - title: '住址', + title: 'Address', children: [ { - title: '街道', + title: 'Street', dataIndex: 'street', key: 'street', width: 200, }, { - title: '小区', + title: 'Block', children: [ { - title: '单元', + title: 'Building', dataIndex: 'building', key: 'building', width: 50, }, { - title: '门牌', + title: 'Door No.', dataIndex: 'number', key: 'number', width: 100, @@ -73,16 +73,16 @@ const columns = [ ], }, { - title: '公司', + title: 'Company', children: [ { - title: '地址', + title: 'Company Address', dataIndex: 'companyAddress', key: 'companyAddress', width: 200, }, { - title: '名称', + title: 'Company Name', dataIndex: 'companyName', key: 'companyName', width: 200, @@ -90,7 +90,7 @@ const columns = [ ], }, { - title: '性别', + title: 'Gender', dataIndex: 'gender', key: 'gender', width: 60, @@ -102,14 +102,14 @@ const data = []; for (let i = 0; i < 100; i++) { data.push({ key: i, - name: '胡彦祖', + name: 'John Brown', age: Math.ceil(Math.random() * 100), - street: '拱墅区和睦街道', - building: 3, + street: 'Lake Park', + building: 'C', number: 2035, - companyAddress: '西湖区湖底公园', - companyName: '湖底有限公司', - gender: '男', + companyAddress: 'Lake Street 42', + companyName: 'SoftLake Co', + gender: 'M', }); } From 54994bf13632f2b0f6ceedb020c32c830f7d2655 Mon Sep 17 00:00:00 2001 From: kvetoslavnovak Date: Sun, 2 Oct 2016 02:32:27 +0200 Subject: [PATCH 0310/2145] docs: Table - Fixed columns - English Translation (#3279) --- components/table/demo/fixed-columns.md | 32 +++++++++++++------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/components/table/demo/fixed-columns.md b/components/table/demo/fixed-columns.md index 69915553e1..53bfb9a620 100644 --- a/components/table/demo/fixed-columns.md +++ b/components/table/demo/fixed-columns.md @@ -25,35 +25,35 @@ Fix some columns and scroll in other columns. You must set `scoll.x` meanwhile. import { Table } from 'antd'; const columns = [ - { title: '姓名', width: 100, dataIndex: 'name', key: 'name', fixed: 'left' }, - { title: '年龄', width: 100, dataIndex: 'age', key: 'age', fixed: 'left' }, - { title: '列1', dataIndex: 'address', key: '1' }, - { title: '列2', dataIndex: 'address', key: '2' }, - { title: '列3', dataIndex: 'address', key: '3' }, - { title: '列4', dataIndex: 'address', key: '4' }, - { title: '列5', dataIndex: 'address', key: '5' }, - { title: '列6', dataIndex: 'address', key: '6' }, - { title: '列7', dataIndex: 'address', key: '7' }, - { title: '列8', dataIndex: 'address', key: '8' }, + { title: 'Full Name', width: 100, dataIndex: 'name', key: 'name', fixed: 'left' }, + { title: 'Age', width: 100, dataIndex: 'age', key: 'age', fixed: 'left' }, + { title: 'Column 1', dataIndex: 'address', key: '1' }, + { title: 'Column 2', dataIndex: 'address', key: '2' }, + { title: 'Column 3', dataIndex: 'address', key: '3' }, + { title: 'Column 4', dataIndex: 'address', key: '4' }, + { title: 'Column 5', dataIndex: 'address', key: '5' }, + { title: 'Column 6', dataIndex: 'address', key: '6' }, + { title: 'Column 7', dataIndex: 'address', key: '7' }, + { title: 'Column 8', dataIndex: 'address', key: '8' }, { - title: '操作', + title: 'Action', key: 'operation', fixed: 'right', width: 100, - render: () => 操作, + render: () => action, }, ]; const data = [{ key: '1', - name: '胡彦斌', + name: 'John Brown', age: 32, - address: '西湖区湖底公园0号', + address: 'New York No. 1 Lake Park', }, { key: '2', - name: '胡彦祖', + name: 'Jim Green', age: 40, - address: '西湖区湖底公园1号', + address: 'London No. 1 Lake Park', }]; function App() { From e246b9984996c522e424dbd4f2deee2c1ec8e43d Mon Sep 17 00:00:00 2001 From: kvetoslavnovak Date: Sun, 2 Oct 2016 02:35:06 +0200 Subject: [PATCH 0311/2145] docs: Table - Tree data - English Translation (#3277) --- components/table/demo/expand-children.md | 60 ++++++++++++------------ 1 file changed, 30 insertions(+), 30 deletions(-) diff --git a/components/table/demo/expand-children.md b/components/table/demo/expand-children.md index 102fedff9f..a63dc4008e 100644 --- a/components/table/demo/expand-children.md +++ b/components/table/demo/expand-children.md @@ -21,17 +21,17 @@ Display tree structure data in Table, control the indent width by setting `inden import { Table } from 'antd'; const columns = [{ - title: '姓名', + title: 'Name', dataIndex: 'name', key: 'name', width: '40%', }, { - title: '年龄', + title: 'Age', dataIndex: 'age', key: 'age', width: '30%', }, { - title: '住址', + title: 'Address', dataIndex: 'address', key: 'address', width: '30%', @@ -39,56 +39,56 @@ const columns = [{ const data = [{ key: 1, - name: 'a', - age: 32, - address: '我是a', + name: 'John Brown sr.', + age: 60, + address: 'New York No. 1 Lake Park', children: [{ key: 11, - name: 'aa', - age: 33, - address: '我是aa', + name: 'John Brown', + age: 42, + address: 'New York No. 2 Lake Park', }, { key: 12, - name: 'ab', - age: 33, - address: '我是ab', + name: 'John Brown jr.', + age: 30, + address: 'New York No. 3 Lake Park', children: [{ key: 121, - name: 'aba', - age: 33, - address: '我是aba', + name: 'Jimmy Brown', + age: 16, + address: 'New York No. 3 Lake Park', }], }, { key: 13, - name: 'ac', - age: 33, - address: '我是ac', + name: 'Jim Green sr.', + age: 72, + address: 'London No. 1 Lake Park', children: [{ key: 131, - name: 'aca', - age: 33, - address: '我是aca', + name: 'Jim Green', + age: 42, + address: 'London No. 2 Lake Park', children: [{ key: 1311, - name: 'acaa', - age: 33, - address: '我是acaa', + name: 'Jim Green jr.', + age: 25, + address: 'London No. 3 Lake Park', }, { key: 1312, - name: 'acab', - age: 33, - address: '我是acab', + name: 'Jimmy Green sr.', + age: 18, + address: 'London No. 4 Lake Park', }], }], }], }, { key: 2, - name: 'b', + name: 'Joe Black', age: 32, - address: '我是b', + address: 'Sidney No. 1 Lake Park', }]; -// 通过 rowSelection 对象表明需要行选择 +// rowSelection objects indicates the need for row selection const rowSelection = { onChange(selectedRowKeys, selectedRows) { console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows); From 2e4e159ed8329e81e439fbaa5bf3400892cdd1b4 Mon Sep 17 00:00:00 2001 From: kvetoslavnovak Date: Sun, 2 Oct 2016 02:36:10 +0200 Subject: [PATCH 0312/2145] docs: Table - colSpan and rowSpan - English Translation (#3275) --- components/table/demo/colspan-rowspan.md | 30 ++++++++++++------------ 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/components/table/demo/colspan-rowspan.md b/components/table/demo/colspan-rowspan.md index ae49aba907..f851ba1145 100644 --- a/components/table/demo/colspan-rowspan.md +++ b/components/table/demo/colspan-rowspan.md @@ -34,7 +34,7 @@ const renderContent = function (value, row, index) { }; const columns = [{ - title: '姓名', + title: 'Name', dataIndex: 'name', render(text, row, index) { if (index < 4) { @@ -48,11 +48,11 @@ const columns = [{ }; }, }, { - title: '年龄', + title: 'Age', dataIndex: 'age', render: renderContent, }, { - title: '家庭电话', + title: 'Home phone', colSpan: 2, dataIndex: 'tel', render(value, row, index) { @@ -73,51 +73,51 @@ const columns = [{ return obj; }, }, { - title: '手机号', + title: 'Phone', colSpan: 0, dataIndex: 'phone', render: renderContent, }, { - title: '住址', + title: 'Address', dataIndex: 'address', render: renderContent, }]; const data = [{ key: '1', - name: '胡彦斌', + name: 'John Brown', age: 32, tel: '0571-22098909', phone: 18889898989, - address: '西湖区湖底公园1号', + address: 'New York No. 1 Lake Park', }, { key: '2', - name: '胡彦祖', + name: 'Jim Green', tel: '0571-22098333', phone: 18889898888, age: 42, - address: '西湖区湖底公园1号', + address: 'London No. 1 Lake Park', }, { key: '3', - name: '李大嘴', + name: 'Joe Black', age: 32, tel: '0575-22098909', phone: 18900010002, - address: '西湖区湖底公园1号', + address: 'Sidney No. 1 Lake Park', }, { key: '4', - name: '李夫人', + name: 'Jim Red', age: 18, tel: '0575-22098909', phone: 18900010002, - address: '西湖区湖底公园1号', + address: 'London No. 2 Lake Park', }, { key: '5', - name: '习大大', + name: 'Jake White', age: 18, tel: '0575-22098909', phone: 18900010002, - address: '西湖区湖底公园1号', + address: 'Dublin No. 2 Lake Park', }]; ReactDOM.render(
    From 5373f52d27d51f8388042efa10c8d6beada6e904 Mon Sep 17 00:00:00 2001 From: kvetoslavnovak Date: Sun, 2 Oct 2016 02:37:14 +0200 Subject: [PATCH 0313/2145] docs: Table - Loading - English Translation (#3276) --- components/table/demo/loading.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/components/table/demo/loading.md b/components/table/demo/loading.md index ce30762541..2076001a55 100644 --- a/components/table/demo/loading.md +++ b/components/table/demo/loading.md @@ -17,30 +17,30 @@ Controll loading states by `loading` property. import { Table, Button } from 'antd'; const columns = [{ - title: '姓名', + title: 'Name', dataIndex: 'name', }, { - title: '年龄', + title: 'Age', dataIndex: 'age', }, { - title: '住址', + title: 'Address', dataIndex: 'address', }]; const data = [{ key: '1', - name: '胡彦斌', + name: 'John Brown', age: 32, - address: '西湖区湖底公园1号', + address: 'New York No. 1 Lake Park', }, { key: '2', - name: '胡彦祖', + name: 'Jim Green', age: 42, - address: '西湖区湖底公园1号', + address: 'London No. 1 Lake Park', }, { key: '3', - name: '李大嘴', + name: 'Joe Black', age: 32, - address: '西湖区湖底公园1号', + address: 'Sidney No. 1 Lake Park', }]; const App = React.createClass({ @@ -58,7 +58,7 @@ const App = React.createClass({ return (
    - + ); }, From c0ee38b1733766c9afd46c7cc11c8d99371d585e Mon Sep 17 00:00:00 2001 From: kvetoslavnovak Date: Sun, 2 Oct 2016 02:37:51 +0200 Subject: [PATCH 0314/2145] docs: Table - Expandable Row - English Translation (#3274) --- components/table/demo/expand.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/components/table/demo/expand.md b/components/table/demo/expand.md index 6c535bd9e1..abdd9a834f 100644 --- a/components/table/demo/expand.md +++ b/components/table/demo/expand.md @@ -17,16 +17,16 @@ When there's too much information to show and the table can't display all at onc import { Table } from 'antd'; const columns = [ - { title: '姓名', dataIndex: 'name', key: 'name' }, - { title: '年龄', dataIndex: 'age', key: 'age' }, - { title: '住址', dataIndex: 'address', key: 'address' }, - { title: '操作', dataIndex: '', key: 'x', render: () => 删除 }, + { title: 'Name', dataIndex: 'name', key: 'name' }, + { title: 'Age', dataIndex: 'age', key: 'age' }, + { title: 'Address', dataIndex: 'address', key: 'address' }, + { title: 'Action', dataIndex: '', key: 'x', render: () => Delete }, ]; const data = [ - { key: 1, name: '胡彦斌', age: 32, address: '西湖区湖底公园1号', description: '我是胡彦斌，今年32岁，住在西湖区湖底公园1号。' }, - { key: 2, name: '吴彦祖', age: 42, address: '西湖区湖底公园2号', description: '我是吴彦祖，今年42岁，住在西湖区湖底公园2号。' }, - { key: 3, name: '李大嘴', age: 32, address: '西湖区湖底公园3号', description: '我是李大嘴，今年32岁，住在西湖区湖底公园3号。' }, + { key: 1, name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park', description: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.' }, + { key: 2, name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park', description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' }, + { key: 3, name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park', description: 'My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.' }, ]; ReactDOM.render( From 142227d3fa4168bc415a1ad5e5ac6206d50016ca Mon Sep 17 00:00:00 2001 From: kvetoslavnovak Date: Sun, 2 Oct 2016 02:38:16 +0200 Subject: [PATCH 0315/2145] docs: Table - border, title and footer - English Trans. (#3273) --- components/table/demo/bordered.md | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/components/table/demo/bordered.md b/components/table/demo/bordered.md index 904576cc9f..6d1a6f1ddf 100644 --- a/components/table/demo/bordered.md +++ b/components/table/demo/bordered.md @@ -17,33 +17,33 @@ Add border, title and footer for table. import { Table } from 'antd'; const columns = [{ - title: '姓名', + title: 'Name', dataIndex: 'name', render: text => {text}, }, { - title: '资产', + title: 'Cash Assets', className: 'column-money', dataIndex: 'money', }, { - title: '住址', + title: 'Address', dataIndex: 'address', }]; const data = [{ key: '1', - name: '胡彦斌', + name: 'John Brown', money: '￥300,000.00', - address: '西湖区湖底公园1号', + address: 'New York No. 1 Lake Park', }, { key: '2', - name: '胡彦祖', + name: 'Jim Green', money: '￥1,256,000.00', - address: '西湖区湖底公园1号', + address: 'London No. 1 Lake Park', }, { key: '3', - name: '李大嘴', + name: 'Joe Black', money: '￥120,000.00', - address: '西湖区湖底公园1号', + address: 'Sidney No. 1 Lake Park', }]; ReactDOM.render( @@ -51,8 +51,8 @@ ReactDOM.render( columns={columns} dataSource={data} bordered - title={() => '页头'} - footer={() => '页脚'} + title={() => 'Header'} + footer={() => 'Footer'} /> , mountNode); ```` From 27a53b5c6c07cfc4bf7d267f227cc4d76ff0fc51 Mon Sep 17 00:00:00 2001 From: kvetoslavnovak Date: Sun, 2 Oct 2016 02:38:34 +0200 Subject: [PATCH 0316/2145] docs: Table - No pagination - English Translation (#3271) --- components/table/demo/nopagination.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/components/table/demo/nopagination.md b/components/table/demo/nopagination.md index 545980e8e4..23e54f7e25 100644 --- a/components/table/demo/nopagination.md +++ b/components/table/demo/nopagination.md @@ -17,31 +17,31 @@ Set `pagination={false}`, then no data paging and pagination will be shown. import { Table } from 'antd'; const columns = [{ - title: '姓名', + title: 'Name', dataIndex: 'name', }, { - title: '年龄', + title: 'Age', dataIndex: 'age', }, { - title: '住址', + title: 'Address', dataIndex: 'address', }]; const data = [{ key: '1', - name: '胡彦斌', + name: 'John Brown', age: 32, - address: '西湖区湖底公园1号', + address: 'New York No. 1 Lake Park', }, { key: '2', - name: '胡彦祖', + name: 'Jim Green', age: 42, - address: '西湖区湖底公园1号', + address: 'London No. 1 Lake Park', }, { key: '3', - name: '李大嘴', + name: 'Joe Black', age: 32, - address: '西湖区湖底公园1号', + address: 'Sidney No. 1 Lake Park', }]; ReactDOM.render(
    From a7b9266e104ee9cb6bc6e7ebf80d0343cc9868bb Mon Sep 17 00:00:00 2001 From: kvetoslavnovak Date: Sun, 2 Oct 2016 02:38:54 +0200 Subject: [PATCH 0317/2145] docs: Table - size - English Translation (#3272) --- components/table/demo/size.md | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/components/table/demo/size.md b/components/table/demo/size.md index 8849738f42..d5e5cea362 100644 --- a/components/table/demo/size.md +++ b/components/table/demo/size.md @@ -17,36 +17,36 @@ Two compacted table size: `middle` and `small`, `small` size is used in Modal on import { Table } from 'antd'; const columns = [{ - title: '姓名', + title: 'Name', dataIndex: 'name', }, { - title: '年龄', + title: 'Age', dataIndex: 'age', }, { - title: '住址', + title: 'Address', dataIndex: 'address', }]; const data = [{ key: '1', - name: '胡彦斌', + name: 'John Brown', age: 32, - address: '西湖区湖底公园1号', + address: 'New York No. 1 Lake Park', }, { key: '2', - name: '胡彦祖', + name: 'Jim Green', age: 42, - address: '西湖区湖底公园1号', + address: 'London No. 1 Lake Park', }, { key: '3', - name: '李大嘴', + name: 'Joe Black', age: 32, - address: '西湖区湖底公园1号', + address: 'Sidney No. 1 Lake Park', }]; ReactDOM.render(
    -

    中号表格（紧凑型）

    +

    No. Form (Middle size table)

    -

    小号表格

    +

    Small size table

    , mountNode); ```` From e76f604e257121daeb48f9cbfb1957315324ab14 Mon Sep 17 00:00:00 2001 From: kvetoslavnovak Date: Sun, 2 Oct 2016 02:39:23 +0200 Subject: [PATCH 0318/2145] docs: Table - Filter and sorter - English Translation (#3269) --- components/table/demo/head.md | 50 +++++++++++++++++------------------ 1 file changed, 25 insertions(+), 25 deletions(-) diff --git a/components/table/demo/head.md b/components/table/demo/head.md index fc16e8bc3a..4425f77f12 100644 --- a/components/table/demo/head.md +++ b/components/table/demo/head.md @@ -21,23 +21,23 @@ Use `sorter` to make a column sortable. `sorter` can be a function `function(a, import { Table } from 'antd'; const columns = [{ - title: '姓名', + title: 'Name', dataIndex: 'name', filters: [{ - text: '姓李的', - value: '李', + text: 'Joe', + value: 'Joe', }, { - text: '姓胡的', - value: '胡', + text: 'Jim', + value: 'Jim', }, { - text: '子菜单', - value: '子菜单', + text: 'Submenu', + value: 'Submenu', children: [{ - text: '姓陈的', - value: '陈', + text: 'Green', + value: 'Green', }, { - text: '姓王的', - value: '王', + text: 'Black', + value: 'Black', }], }], // specify the condition of filtering result @@ -45,18 +45,18 @@ const columns = [{ onFilter: (value, record) => record.name.indexOf(value) === 0, sorter: (a, b) => a.name.length - b.name.length, }, { - title: '年龄', + title: 'Age', dataIndex: 'age', sorter: (a, b) => a.age - b.age, }, { - title: '地址', + title: 'Address', dataIndex: 'address', filters: [{ - text: '南湖', - value: '南湖', + text: 'London', + value: 'London', }, { - text: '西湖', - value: '西湖', + text: 'New York', + value: 'New York', }], filterMultiple: false, onFilter: (value, record) => record.address.indexOf(value) === 0, @@ -65,24 +65,24 @@ const columns = [{ const data = [{ key: '1', - name: '胡斌', + name: 'John Brown', age: 32, - address: '南湖区湖底公园1号', + address: 'New York No. 1 Lake Park', }, { key: '2', - name: '胡彦祖', + name: 'Jim Green', age: 42, - address: '西湖区湖底公园12号', + address: 'London No. 1 Lake Park', }, { key: '3', - name: '李大嘴', + name: 'Joe Black', age: 32, - address: '南湖区湖底公园123号', + address: 'Sidney No. 1 Lake Park', }, { key: '4', - name: '李秀莲大嘴哥', + name: 'Jim Red', age: 32, - address: '西湖区湖底公园123号', + address: 'London No. 2 Lake Park', }]; function onChange(pagination, filters, sorter) { From bf105e64c954dc52f7bee540e5f511ad59815b57 Mon Sep 17 00:00:00 2001 From: kvetoslavnovak Date: Sun, 2 Oct 2016 02:40:34 +0200 Subject: [PATCH 0319/2145] docs: Calendar Custom Render - English Translation (#3265) --- components/calendar/demo/custom-render.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/calendar/demo/custom-render.md b/components/calendar/demo/custom-render.md index 1cd5ea3041..656cfa955b 100644 --- a/components/calendar/demo/custom-render.md +++ b/components/calendar/demo/custom-render.md @@ -18,11 +18,11 @@ import { Calendar } from 'antd'; import moment from 'moment'; function dateCellRender(value) { - return
    自定义日数据 {value.date()}
    ; + return
    Custom date data {value.date()}
    ; } function monthCellRender(value) { - return
    自定义月数据 {value.month()}
    ; + return
    Custom monthly data {value.month()}
    ; } ReactDOM.render( From 1ff8a020d1a600b5f048b260788d749257c6082c Mon Sep 17 00:00:00 2001 From: kvetoslavnovak Date: Sun, 2 Oct 2016 02:41:41 +0200 Subject: [PATCH 0320/2145] docs: Table - Pagination - English Translation (#3268) --- components/table/demo/paging.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/components/table/demo/paging.md b/components/table/demo/paging.md index 07f8b71cbd..4b7371b758 100644 --- a/components/table/demo/paging.md +++ b/components/table/demo/paging.md @@ -17,16 +17,16 @@ when use pagination in table. import { Table } from 'antd'; const columns = [{ - title: '姓名', + title: 'Name', dataIndex: 'name', render(text) { return {text}; }, }, { - title: '年龄', + title: 'Age', dataIndex: 'age', }, { - title: '住址', + title: 'Address', dataIndex: 'address', }]; @@ -34,9 +34,9 @@ const data = []; for (let i = 0; i < 46; i++) { data.push({ key: i, - name: `李大嘴${i}`, + name: `Edward King ${i}`, age: 32, - address: `西湖区湖底公园${i}号`, + address: `London, Park Lane no. ${i}`, }); } From d3667b8a580309a56d25ab7b0de0663d7e2d3156 Mon Sep 17 00:00:00 2001 From: kvetoslavnovak Date: Sun, 2 Oct 2016 02:41:53 +0200 Subject: [PATCH 0321/2145] docs: Table - Selection&operation - English Translation (#3267) * Table - Selection&operation - English Translation * Table - Selection&operation - English Translation * Update row-selection-and-operation.md * Update row-selection-and-operation.md --- .../table/demo/row-selection-and-operation.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/components/table/demo/row-selection-and-operation.md b/components/table/demo/row-selection-and-operation.md index 9201207eaa..1d821e8326 100644 --- a/components/table/demo/row-selection-and-operation.md +++ b/components/table/demo/row-selection-and-operation.md @@ -18,13 +18,13 @@ To perform operations and clear selections after selecting some rows, use `rowSe import { Table, Button } from 'antd'; const columns = [{ - title: '姓名', + title: 'Name', dataIndex: 'name', }, { - title: '年龄', + title: 'Age', dataIndex: 'age', }, { - title: '住址', + title: 'Address', dataIndex: 'address', }]; @@ -32,22 +32,22 @@ const data = []; for (let i = 0; i < 46; i++) { data.push({ key: i, - name: `李大嘴${i}`, + name: `Edward King ${i}`, age: 32, - address: `西湖区湖底公园${i}号`, + address: `London, Park Lane no. ${i}`, }); } const App = React.createClass({ getInitialState() { return { - selectedRowKeys: [], // 这里配置默认勾选列 + selectedRowKeys: [], // Check here to configure the default column loading: false, }; }, start() { this.setState({ loading: true }); - // 模拟 ajax 请求，完成后清空 + // ajax request after empty completing setTimeout(() => { this.setState({ selectedRowKeys: [], @@ -71,8 +71,8 @@ const App = React.createClass({
    - {hasSelected ? `选择了 ${selectedRowKeys.length} 个对象` : ''} + >Reload + {hasSelected ? `Selected ${selectedRowKeys.length} items` : ''}
    From 8128a94b71c5e309cc5a544ae6e73259efea4372 Mon Sep 17 00:00:00 2001 From: kvetoslavnovak Date: Sun, 2 Oct 2016 02:46:19 +0200 Subject: [PATCH 0322/2145] docs: Table - Fixed Columns and Header - English Trans. (#3280) --- components/table/demo/fixed-columns-header.md | 28 +++++++++---------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/components/table/demo/fixed-columns-header.md b/components/table/demo/fixed-columns-header.md index 4ba8decdb6..e19d55859c 100644 --- a/components/table/demo/fixed-columns-header.md +++ b/components/table/demo/fixed-columns-header.md @@ -25,22 +25,22 @@ Suitable for large amounts of data with long columns. import { Table } from 'antd'; const columns = [ - { title: '姓名', width: 100, dataIndex: 'name', key: 'name', fixed: 'left' }, - { title: '年龄', width: 100, dataIndex: 'age', key: 'age', fixed: 'left' }, - { title: '列1', dataIndex: 'address', key: '1', width: 150 }, - { title: '列2', dataIndex: 'address', key: '2', width: 150 }, - { title: '列3', dataIndex: 'address', key: '3', width: 150 }, - { title: '列4', dataIndex: 'address', key: '4', width: 150 }, - { title: '列5', dataIndex: 'address', key: '5', width: 150 }, - { title: '列6', dataIndex: 'address', key: '6', width: 150 }, - { title: '列7', dataIndex: 'address', key: '7', width: 150 }, - { title: '列8', dataIndex: 'address', key: '8', width: 150 }, + { title: 'Full Name', width: 100, dataIndex: 'name', key: 'name', fixed: 'left' }, + { title: 'Age', width: 100, dataIndex: 'age', key: 'age', fixed: 'left' }, + { title: 'Column 1', dataIndex: 'address', key: '1', width: 150 }, + { title: 'Column 2', dataIndex: 'address', key: '2', width: 150 }, + { title: 'Column 3', dataIndex: 'address', key: '3', width: 150 }, + { title: 'Column 4', dataIndex: 'address', key: '4', width: 150 }, + { title: 'Column 5', dataIndex: 'address', key: '5', width: 150 }, + { title: 'Column 6', dataIndex: 'address', key: '6', width: 150 }, + { title: 'Column 7', dataIndex: 'address', key: '7', width: 150 }, + { title: 'Column 8', dataIndex: 'address', key: '8', width: 150 }, { - title: '操作', + title: 'Action', key: 'operation', fixed: 'right', width: 100, - render: () => 操作, + render: () => action, }, ]; @@ -48,9 +48,9 @@ const data = []; for (let i = 0; i < 100; i++) { data.push({ key: i, - name: `李大嘴${i}`, + name: `Edrward King ${i}`, age: 32, - address: `西湖区湖底公园${i}号`, + address: `London, Park Lane no. ${i}`, }); } From c2fb8f30a14043e73b5d338340e1af0cee37c0ca Mon Sep 17 00:00:00 2001 From: kvetoslavnovak Date: Sun, 2 Oct 2016 02:47:13 +0200 Subject: [PATCH 0323/2145] docs: Table - ajax - English Translation (#3270) --- components/table/demo/ajax.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/components/table/demo/ajax.md b/components/table/demo/ajax.md index 58ded7cb4c..08c7aa161a 100644 --- a/components/table/demo/ajax.md +++ b/components/table/demo/ajax.md @@ -24,13 +24,13 @@ import { Table } from 'antd'; import reqwest from 'reqwest'; const columns = [{ - title: '姓名', + title: 'Name', dataIndex: 'name', sorter: true, render: name => `${name.first} ${name.last}`, width: '20%', }, { - title: '性别', + title: 'Gender', dataIndex: 'gender', filters: [ { text: 'Male', value: 'male' }, @@ -38,7 +38,7 @@ const columns = [{ ], width: '20%', }, { - title: '邮箱', + title: 'Email', dataIndex: 'email', }]; From e1b1f7f3746e7077adfa676da99a930dc1c5228a Mon Sep 17 00:00:00 2001 From: kvetoslavnovak Date: Sun, 2 Oct 2016 02:47:34 +0200 Subject: [PATCH 0324/2145] docs: Calendar - Demo of notice - English Translation (#3266) --- components/calendar/demo/notice-calendar.md | 24 ++++++++++----------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/components/calendar/demo/notice-calendar.md b/components/calendar/demo/notice-calendar.md index f3f0b440c1..2f078ed65d 100644 --- a/components/calendar/demo/notice-calendar.md +++ b/components/calendar/demo/notice-calendar.md @@ -21,23 +21,23 @@ function getListData(value) { switch (value.date()) { case 8: listData = [ - { type: 'warning', content: '这里是警告事项.' }, - { type: 'normal', content: '这里是普通事项.' }, + { type: 'warning', content: 'This is warning event.' }, + { type: 'normal', content: 'This is usual event.' }, ]; break; case 10: listData = [ - { type: 'warning', content: '这里是警告事项.' }, - { type: 'normal', content: '这里是普通事项.' }, - { type: 'error', content: '这里是错误事项.' }, + { type: 'warning', content: 'This is warning event.' }, + { type: 'normal', content: 'This is usual event.' }, + { type: 'error', content: 'This is error event.' }, ]; break; case 15: listData = [ - { type: 'warning', content: '这里是警告事项.' }, - { type: 'normal', content: '这里是普通事项好长啊。。....' }, - { type: 'error', content: '这里是错误事项.' }, - { type: 'error', content: '这里是错误事项.' }, - { type: 'error', content: '这里是错误事项.' }, - { type: 'error', content: '这里是错误事项.' }, + { type: 'warning', content: 'This is warning event' }, + { type: 'normal', content: 'This is very long usual event。。....' }, + { type: 'error', content: 'This is error event.' }, + { type: 'error', content: 'This is error event.' }, + { type: 'error', content: 'This is error event.' }, + { type: 'error', content: 'This is error event.' }, ]; break; default: } @@ -70,7 +70,7 @@ function monthCellRender(value) { const num = getMonthData(value); return num ?
    {num}
    - 待办事项数 + Backlog number
    : null; } From b3729806ef1df10b64ddbabd0c10ece247591f11 Mon Sep 17 00:00:00 2001 From: kvetoslavnovak Date: Sun, 2 Oct 2016 02:47:42 +0200 Subject: [PATCH 0325/2145] docs: Table - Fixed header - English Translation (#3278) --- components/table/demo/fixed-header.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/components/table/demo/fixed-header.md b/components/table/demo/fixed-header.md index 8096dfed0b..61179f7202 100644 --- a/components/table/demo/fixed-header.md +++ b/components/table/demo/fixed-header.md @@ -21,15 +21,15 @@ Display large amounts of data in scrollable view. import { Table } from 'antd'; const columns = [{ - title: '姓名', + title: 'Name', dataIndex: 'name', width: 150, }, { - title: '年龄', + title: 'Age', dataIndex: 'age', width: 150, }, { - title: '住址', + title: 'Address', dataIndex: 'address', }]; @@ -37,9 +37,9 @@ const data = []; for (let i = 0; i < 100; i++) { data.push({ key: i, - name: `李大嘴${i}`, + name: `Edward King ${i}`, age: 32, - address: `西湖区湖底公园${i}号`, + address: `London, Park Lane no. ${i}`, }); } From 64079f181a5601cf136483142ff1be5e339cac25 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Sun, 2 Oct 2016 08:55:40 +0800 Subject: [PATCH 0326/2145] docs: update demos text --- components/calendar/demo/custom-render.md | 4 ++-- components/table/demo/fixed-columns-header.md | 4 ++-- components/table/demo/fixed-columns.md | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/components/calendar/demo/custom-render.md b/components/calendar/demo/custom-render.md index 656cfa955b..8d06258893 100644 --- a/components/calendar/demo/custom-render.md +++ b/components/calendar/demo/custom-render.md @@ -18,11 +18,11 @@ import { Calendar } from 'antd'; import moment from 'moment'; function dateCellRender(value) { - return
    Custom date data {value.date()}
    ; + return
    Custom date {value.date()}
    ; } function monthCellRender(value) { - return
    Custom monthly data {value.month()}
    ; + return
    Custom monthly {value.month()}
    ; } ReactDOM.render( diff --git a/components/table/demo/fixed-columns-header.md b/components/table/demo/fixed-columns-header.md index e19d55859c..66f25c40a1 100644 --- a/components/table/demo/fixed-columns-header.md +++ b/components/table/demo/fixed-columns-header.md @@ -48,9 +48,9 @@ const data = []; for (let i = 0; i < 100; i++) { data.push({ key: i, - name: `Edrward King ${i}`, + name: `Edrward ${i}`, age: 32, - address: `London, Park Lane no. ${i}`, + address: `London Park no. ${i}`, }); } diff --git a/components/table/demo/fixed-columns.md b/components/table/demo/fixed-columns.md index 53bfb9a620..3a39d1f167 100644 --- a/components/table/demo/fixed-columns.md +++ b/components/table/demo/fixed-columns.md @@ -48,12 +48,12 @@ const data = [{ key: '1', name: 'John Brown', age: 32, - address: 'New York No. 1 Lake Park', + address: 'New York Park', }, { key: '2', name: 'Jim Green', age: 40, - address: 'London No. 1 Lake Park', + address: 'London Park', }]; function App() { From 5982aacacb79f957f182b6eaaab87a5047dba7b1 Mon Sep 17 00:00:00 2001 From: Andrey G Date: Thu, 6 Oct 2016 06:39:56 +0300 Subject: [PATCH 0327/2145] Update ru_RU.tsx (#3306) --- components/locale-provider/ru_RU.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/components/locale-provider/ru_RU.tsx b/components/locale-provider/ru_RU.tsx index 4c97feb50d..0ca2823bbd 100644 --- a/components/locale-provider/ru_RU.tsx +++ b/components/locale-provider/ru_RU.tsx @@ -32,12 +32,12 @@ export default { cancelText: 'Отмена', }, Transfer: { - notFoundContent: 'Not Found', - searchPlaceholder: 'Search here', + notFoundContent: 'Ничего не найдено', + searchPlaceholder: 'Введите название для поиска', itemUnit: 'item', itemsUnit: 'items', }, Select: { - notFoundContent: 'Not Found', + notFoundContent: 'Ничего не найдено', }, }; From 502d0f4f2939b35a1f3ac9789a2087d2e20d9e4d Mon Sep 17 00:00:00 2001 From: Danny Hoower Antonio Viasus Avila Date: Thu, 6 Oct 2016 05:00:35 -0500 Subject: [PATCH 0328/2145] Adding Spanish Support - LocaleProvider - Spanish Translation (#3285) * Spanish support Intld * Update es_ES.js --- components/locale-provider/es_ES.js | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) create mode 100644 components/locale-provider/es_ES.js diff --git a/components/locale-provider/es_ES.js b/components/locale-provider/es_ES.js new file mode 100644 index 0000000000..f0cfdd7788 --- /dev/null +++ b/components/locale-provider/es_ES.js @@ -0,0 +1,26 @@ +module.exports = { + Pagination: require('rc-pagination/lib/locale/en_US'), + DatePicker: require('../date-picker/locale/en_US'), + TimePicker: require('../time-picker/locale/en_US'), + Table: { + filterTitle: 'Filtrar Menu', + filterConfirm: 'OK', + filterReset: 'Resetear', + emptyText: 'No Hay Datos', + }, + Modal: { + okText: 'OK', + cancelText: 'Cancelar', + justOkText: 'OK', + }, + Popconfirm: { + okText: 'OK', + cancelText: 'Cancelar', + }, + Transfer: { + notFoundContent: 'No Encontrado', + searchPlaceholder: 'Buscar Aquí', + itemUnit: 'item', + itemsUnit: 'items', + }, +}; From 1ef72deadb04143aac6a5ae5517aed96b1956b8c Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 6 Oct 2016 18:50:17 +0800 Subject: [PATCH 0329/2145] update Changelog --- CHANGELOG.en-US.md | 2 +- CHANGELOG.zh-CN.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index 129b66b0ad..c1d59daa46 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -53,7 +53,7 @@ There are some breaking changes in `antd@2.0.0`, and you need to modify your cod // send data to server } ``` -* The `format` of time-related components is the same as [moment's format](http://momentjs.com/docs/) now. +* The `format` of time-related components is changed from [gregorian-calendar-format](https://github.com/yiminghe/gregorian-calendar-format#api) to [moment format](http://momentjs.com/docs/#/parsing/string-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](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). diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index 124eaea52c..717a83f2ac 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -51,7 +51,7 @@ timeline: true // 发送 data 到服务器 } ``` -* 时间类组件的 `format` 属性配置也调整为与 [moment](http://momentjs.com/docs/) 的一致。 +* 时间类组件的 `format` 属性也发生了变化，从 [gregorian-calendar-format 的格式](https://github.com/yiminghe/gregorian-calendar-format#api) 变化为与 [moment 的格式](http://momentjs.com/docs/#/parsing/string-format/)，例如原来的 `yyyy-MM-dd` 将变为 `YYYY-MM-DD`。 * 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)。 From 58d7741709741e070a6978fa5c044f3a34a9762a Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 6 Oct 2016 18:54:28 +0800 Subject: [PATCH 0330/2145] http => https, close #3303 --- components/select/demo/search-box.md | 4 ++-- components/table/demo/ajax.md | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/components/select/demo/search-box.md b/components/select/demo/search-box.md index 53b77a41a6..0ba9df4f40 100644 --- a/components/select/demo/search-box.md +++ b/components/select/demo/search-box.md @@ -1,6 +1,6 @@ --- order: 9 -title: +title: zh-CN: 搜索框 en-US: Search Box --- @@ -36,7 +36,7 @@ function fetch(value, callback) { code: 'utf-8', q: value, }); - jsonp(`http://suggest.taobao.com/sug?${str}`, (err, d) => { + jsonp(`https://suggest.taobao.com/sug?${str}`, (err, d) => { if (currentValue === value) { const result = d.result; const data = []; diff --git a/components/table/demo/ajax.md b/components/table/demo/ajax.md index 58ded7cb4c..f1beba75bc 100644 --- a/components/table/demo/ajax.md +++ b/components/table/demo/ajax.md @@ -68,7 +68,7 @@ const Test = React.createClass({ console.log('params:', params); this.setState({ loading: true }); reqwest({ - url: 'http://api.randomuser.me', + url: 'https://randomuser.me/api', method: 'get', data: { results: 10, From e5fab55d6b41e6e1892c83cb77229881f08ece91 Mon Sep 17 00:00:00 2001 From: kvetoslavnovak Date: Thu, 6 Oct 2016 12:56:57 +0200 Subject: [PATCH 0331/2145] Tabs - Basic - Typo correction (#3292) --- components/tabs/demo/basic.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/tabs/demo/basic.md b/components/tabs/demo/basic.md index 13c38066e7..c4e2316fce 100644 --- a/components/tabs/demo/basic.md +++ b/components/tabs/demo/basic.md @@ -25,7 +25,7 @@ ReactDOM.render( Conten of Tab Pane 1 Conten of Tab Pane 2 - Conten of Tab Pane 2 + Conten of Tab Pane 3 , mountNode); ```` From 70fa956301331c354212a1cd89fbf75664d09aed Mon Sep 17 00:00:00 2001 From: kvetoslavnovak Date: Thu, 6 Oct 2016 12:57:25 +0200 Subject: [PATCH 0332/2145] Tabs - Container of Card - Typo trigger (#3291) --- components/tabs/demo/card-top.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/tabs/demo/card-top.md b/components/tabs/demo/card-top.md index 66d53ccbf5..23bb30d417 100644 --- a/components/tabs/demo/card-top.md +++ b/components/tabs/demo/card-top.md @@ -22,7 +22,7 @@ ReactDOM.render( Conten of Tab Pane 1 Conten of Tab Pane 2 - Conten of Tab Pane 2 + Conten of Tab Pane 3 , mountNode); From fc0b8e543161f6816bcdbc7d5aa57aa4e028409d Mon Sep 17 00:00:00 2001 From: kvetoslavnovak Date: Thu, 6 Oct 2016 12:57:34 +0200 Subject: [PATCH 0333/2145] Tabs - Custom Trigger - Typo correction (#3290) --- components/tabs/demo/custom-add-trigger.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/tabs/demo/custom-add-trigger.md b/components/tabs/demo/custom-add-trigger.md index 39353089d6..93f608c3a7 100644 --- a/components/tabs/demo/custom-add-trigger.md +++ b/components/tabs/demo/custom-add-trigger.md @@ -22,7 +22,7 @@ const Demo = React.createClass({ this.newTabIndex = 0; const panes = [ { title: 'Tab 1', content: 'Content of Tab Pane 1', key: '1' }, - { title: 'Tab 2', content: 'Content of Tab Pane', key: '2' }, + { title: 'Tab 2', content: 'Content of Tab Pane 2', key: '2' }, ]; return { activeKey: panes[0].key, From dded174ece82e6096bef70d9faaca204c47b2ebf Mon Sep 17 00:00:00 2001 From: kvetoslavnovak Date: Thu, 6 Oct 2016 12:57:40 +0200 Subject: [PATCH 0334/2145] Tabs - Card - Typo correction (#3289) --- components/tabs/demo/card.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/tabs/demo/card.md b/components/tabs/demo/card.md index 9984606983..2f9a717dee 100644 --- a/components/tabs/demo/card.md +++ b/components/tabs/demo/card.md @@ -26,7 +26,7 @@ ReactDOM.render( Conten of Tab Pane 1 Conten of Tab Pane 2 - Conten of Tab Pane 2 + Conten of Tab Pane 3 , mountNode); ```` From f15d62e189814e302de3126e5e1be7feb1434267 Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 6 Oct 2016 19:10:01 +0800 Subject: [PATCH 0335/2145] adjust transfer button style --- components/transfer/style/index.less | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/components/transfer/style/index.less b/components/transfer/style/index.less index 3cc5e26127..8045d2e6ff 100644 --- a/components/transfer/style/index.less +++ b/components/transfer/style/index.less @@ -133,15 +133,14 @@ vertical-align: middle; .@{ant-prefix}-btn { - float: left; - clear: both; + display: block; &:first-child { margin-bottom: 4px; } .@{iconfont-css-prefix} { - .iconfont-size-under-12px(8px); + .iconfont-size-under-12px(10px); } } } From 847e40eac003a135e9bae2d93e5e4ef368cc553f Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 7 Oct 2016 14:33:08 +0800 Subject: [PATCH 0336/2145] Adjust site layout --- components/form/index.en-US.md | 3 +-- components/form/index.zh-CN.md | 1 - docs/spec/introduce.en-US.md | 2 +- site/theme/en-US.js | 4 ++-- site/theme/static/header.less | 2 +- site/theme/static/responsive.less | 4 ++-- site/theme/template/Home/index.jsx | 4 ++-- site/theme/template/Layout/Footer.jsx | 24 ++++++++++++++++++------ site/theme/template/Layout/Header.jsx | 26 +++++++++++++------------- site/theme/zh-CN.js | 4 ++-- 10 files changed, 42 insertions(+), 32 deletions(-) diff --git a/components/form/index.en-US.md b/components/form/index.en-US.md index b6965ec8ca..af2b641be1 100644 --- a/components/form/index.en-US.md +++ b/components/form/index.en-US.md @@ -5,8 +5,7 @@ cols: 1 title: Form --- -Forms are used to collect, validate, and submit the user input. They contain one or more form items. -There are many types of form items including checkbox, radio, input, select, and more. +Form is used to collect, validate, and submit the user input, usually contains various form items including checkbox, radio, input, select, and etc. ## Form diff --git a/components/form/index.zh-CN.md b/components/form/index.zh-CN.md index cd062e2118..a09646fe59 100644 --- a/components/form/index.zh-CN.md +++ b/components/form/index.zh-CN.md @@ -8,7 +8,6 @@ title: Form 具有数据收集、校验和提交功能的表单，包含复选框、单选框、输入框、下拉选择框等元素。 - ## 表单 我们为 `form` 提供了以下两种排列方式： diff --git a/docs/spec/introduce.en-US.md b/docs/spec/introduce.en-US.md index 10a7522886..6671723beb 100644 --- a/docs/spec/introduce.en-US.md +++ b/docs/spec/introduce.en-US.md @@ -26,7 +26,7 @@ Ant Design, created specially for middleware design, is committed to improving t [React](http://facebook.github.io/react/) is used to encapsulate a library of Ant Design components. Any other version of frameworks to implement is also welcome. -- [Ant Design of React](/docs/react/introduce)(official implementation) +- [Ant Design of React](/docs/react/introduce) (official implementation) -
    vue-beauty
    -
    Ant Design of Angular 2.0
    -
    vue-antd
    diff --git a/site/theme/en-US.js b/site/theme/en-US.js index d9d141cf14..63ef4fe0e2 100644 --- a/site/theme/en-US.js +++ b/site/theme/en-US.js @@ -16,7 +16,7 @@ module.exports = { 'app.component.examples': 'Examples', 'app.home.slogan': 'One Design Language for UI', 'app.home.introduce': 'Introduce', - 'app.home.start': 'Getting Started', + 'app.home.start': 'Get Started', 'app.home.best-practice': 'Best Practice', 'app.home.experience': 'Designed by experienced team, and showcase dozens of inspiring projects.', 'app.home.design-pattern': 'Design Pattern', @@ -33,7 +33,7 @@ module.exports = { 'app.footer.links': 'Links', 'app.footer.mobile': 'Mobile', 'app.footer.data-vis': 'Data Visualization', - 'app.footer.data-vis-spec': 'Specification of Data Visualization', + 'app.footer.data-vis-spec': 'Data Visualization Specification', 'app.footer.motion': 'Motion', 'app.footer.antd-library': 'Axure library of Ant Design', 'app.footer.material': 'Sitemap Template', diff --git a/site/theme/static/header.less b/site/theme/static/header.less index cd32d01319..f44df79bf3 100644 --- a/site/theme/static/header.less +++ b/site/theme/static/header.less @@ -63,7 +63,7 @@ box-shadow: none; } -#lang { +.lang { float: right; margin-top: 29px; margin-left: 12px; diff --git a/site/theme/static/responsive.less b/site/theme/static/responsive.less index acbf9542ef..d4d5dad2f3 100644 --- a/site/theme/static/responsive.less +++ b/site/theme/static/responsive.less @@ -53,10 +53,10 @@ text-align: center; } - #nav, #lang { + #nav, .lang { float: none; } - button#lang { + button.lang { display: block; margin: 29px auto 16px; color: #666; diff --git a/site/theme/template/Home/index.jsx b/site/theme/template/Home/index.jsx index 78a6c8ca2b..c1d0e5817c 100644 --- a/site/theme/template/Home/index.jsx +++ b/site/theme/template/Home/index.jsx @@ -44,7 +44,7 @@ function getStyle() { .home-nav-white #nav a { color: #666; } - .home-nav-white #lang { + .home-nav-white .lang:not(:hover) { color: #666; border-color: #666; } @@ -56,7 +56,7 @@ function getStyle() { background: #777; box-shadow: 0 7px 0 0 #777, 0 14px 0 0 #777; } - #lang, + .lang, #nav a { color: #eee; transition: color 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955); diff --git a/site/theme/template/Layout/Footer.jsx b/site/theme/template/Layout/Footer.jsx index dbaa591b00..1171a869c4 100644 --- a/site/theme/template/Layout/Footer.jsx +++ b/site/theme/template/Layout/Footer.jsx @@ -91,22 +91,34 @@ class Footer extends React.Component {

  • -
    Ant Design Mobile - + -
    G2 - +
    + G2 + -
    -
    AntV - +
    + AntV + -
    -
    Ant Motion - +
    + Ant Motion + -
    -
    AntD Library - +
    + AntD Library + -
    -
    Ant UX - +
    + Ant UX + -
    • diff --git a/site/theme/template/Layout/Header.jsx b/site/theme/template/Layout/Header.jsx index a578d3135c..31c88a9763 100644 --- a/site/theme/template/Layout/Header.jsx +++ b/site/theme/template/Layout/Header.jsx @@ -100,7 +100,7 @@ export default class Header extends React.Component { const menuMode = this.state.menuMode; const menu = [ - , @@ -109,14 +109,9 @@ export default class Header extends React.Component { - - - - - - - - + + + @@ -124,9 +119,14 @@ export default class Header extends React.Component { - - - + + + + + + + + @@ -137,7 +137,7 @@ export default class Header extends React.Component { , ]; - const searchPlaceholder = locale === 'zh-CN' ? '搜索组件...' : 'Search...'; + const searchPlaceholder = locale === 'zh-CN' ? '搜索组件...' : 'Search Components...'; return (     - - {getFieldDecorator('pass', { - rules: [ - { required: true, whitespace: true, message: 'Please enter your password' }, - { validator: this.checkPass }, - ], - })( - { - console.log('Your password is stolen in this way', e.target.value); - }} - onBlur={(e) => { - const value = e.target.value; - this.setState({ dirty: this.state.dirty || !!value }); - }} - /> - )} - - - - {this.state.passBarShow ? this.renderPassStrengthBar('pass') : null} - - - - - - {getFieldDecorator('rePass', { - rules: [{ - required: true, - whitespace: true, - message: 'Please confirm your password', - }, { - validator: this.checkPass2, - }], - })( - - )} - - - - {this.state.rePassBarShow ? this.renderPassStrengthBar('rePass') : null} - - - - - - ); - }, -}); - -Demo = createForm()(Demo); - -ReactDOM.render(, mountNode); -```` - -````css -.ant-pwd-strength { - display: inline-block; - margin-left: 8px; - line-height: 32px; - height: 32px; - vertical-align: middle; -} - -.ant-pwd-strength-item { - float: left; - margin-right: 1px; - margin-top: 12px; - width: 19px; - height: 8px; - line-height: 8px; - list-style: none; - background-color: #f3f3f3; - transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); -} - -.ant-pwd-strength-item-1 { - border-top-left-radius: 6px; - border-bottom-left-radius: 6px; -} - -.ant-pwd-strength-item-2 { - width: 20px; -} - -.ant-pwd-strength-item-3 { - border-top-right-radius: 6px; - border-bottom-right-radius: 6px; - margin-right: 8px; -} - -.ant-pwd-strength-low .ant-pwd-strength-item-1, .ant-pwd-strength-medium .ant-pwd-strength-item-1, .ant-pwd-strength-high .ant-pwd-strength-item-1 { - background-color: #FAC450; -} - -.ant-pwd-strength-medium .ant-pwd-strength-item-2, .ant-pwd-strength-high .ant-pwd-strength-item-2 { - background-color: rgba(135, 208, 104, .6); - filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#9987D068,endColorstr=#9987D068); -} - -.ant-pwd-strength-high .ant-pwd-strength-item-3 { - background-color: #87D068; -} -```` diff --git a/components/slider/style/index.less b/components/slider/style/index.less index 5721586617..55770379bc 100644 --- a/components/slider/style/index.less +++ b/components/slider/style/index.less @@ -91,7 +91,6 @@ position: absolute; width: 100%; height: 4px; - margin: 5px 0; background: transparent; z-index: 1; } From 0e3d40e6d9b38594a2bb55edf98e0789bc0f1cc1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=81=8F=E5=8F=B3?= Date: Thu, 27 Oct 2016 13:17:09 +0800 Subject: [PATCH 0522/2145] Update ISSUE_TEMPLATE.md --- .github/ISSUE_TEMPLATE.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md index 57768cc097..d8aa94b089 100644 --- a/.github/ISSUE_TEMPLATE.md +++ b/.github/ISSUE_TEMPLATE.md @@ -10,17 +10,17 @@ - 操作系统及其版本: - 浏览器及其版本: -#### 您做了什么？ +#### 您做了什么？请提供尽可能详细的重现步骤。 -#### 您期待的结果是： +#### 您期待的结果是: -#### 实际上的结果是： +#### 实际上的结果是: - + #### 可重现的在线演示 From 7860d74725d5a1b064fc8da0495f23100b7b74a9 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Thu, 27 Oct 2016 17:14:53 +0800 Subject: [PATCH 0523/2145] docs: update advance search form demo, ref: #3558 --- components/form/demo/advanced-search.md | 179 ++++++++++++------------ 1 file changed, 88 insertions(+), 91 deletions(-) diff --git a/components/form/demo/advanced-search.md b/components/form/demo/advanced-search.md index c950f02929..62d522d098 100644 --- a/components/form/demo/advanced-search.md +++ b/components/form/demo/advanced-search.md @@ -19,109 +19,106 @@ Because the width of label is not fixed, you may need to adjust it by customizin ````jsx -import { Form, Input, Row, Col, Button, DatePicker } from 'antd'; +import { Form, Row, Col, Input, Button, Icon } from 'antd'; const FormItem = Form.Item; -const formItemLayout = { - labelCol: { span: 10 }, - wrapperCol: { span: 14 }, -}; +const usualShowedChildren = 2 * 3; // row * col +const AdvancedSearchForm = Form.create()(React.createClass({ + getInitialState() { + return { + expand: false, + }; + }, + handleSearch(e) { + e.preventDefault(); -ReactDOM.render( -
    - -     - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - , - mountNode -); + this.props.form.validateFields((err, values) => { + if (err) { + return; + } + + console.log('Received values of form: ', values); + }); + }, + handleReset() { + this.props.form.resetFields(); + }, + toggle(expand) { + this.setState({ expand }); + }, + render() { + const { getFieldDecorator } = this.props.form; + const formItemLayout = { + labelCol: { span: 5 }, + wrapperCol: { span: 19 }, + }; + + // To generate mock Form.Item + const children = []; + for (let i = 0; i < 10; i++) { + children.push( + + + {getFieldDecorator(`field-${i}`)( + + )} + + + ); + } + + const expand = this.state.expand; + const showedChildren = expand ? children.length : usualShowedChildren; + return ( + + + {children.slice(0, showedChildren)} + + + + + + { + expand ? ( + this.toggle(false)}> + Collapse + + ) : ( + this.toggle(true)}> + Expand + + ) + } + + + + ); + }, +})); + +ReactDOM.render(, mountNode); ```` ````css -/* custom style */ - -.ant-advanced-search-form { - padding: 16px 8px; +#components-form-demo-advanced-search .ant-advanced-search-form { + padding: 24px; background: #f8f8f8; border: 1px solid #d9d9d9; border-radius: 6px; } - -/* because the label length is variable, you may need to adjust the left edge to have the form centered */ - -.ant-advanced-search-form > .ant-row { - position: relative; - left: -6px; -} - -.ant-advanced-search-form .ant-btn + .ant-btn { +#components-form-demo-advanced-search .ant-advanced-search-form .ant-btn + .ant-btn { margin-left: 8px; } +#components-form-demo-advanced-search .ant-advanced-search-form .ant-dropdown-link { + margin-left: 16px; +} ```` From baa0c531322d0e7fc2b0f0c05aac97f1dbcec13d Mon Sep 17 00:00:00 2001 From: afc163 Date: Sun, 30 Oct 2016 21:00:33 +0800 Subject: [PATCH 0549/2145] code style --- scripts/prepub.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/prepub.js b/scripts/prepub.js index 051115dc3d..42a8b1ff51 100644 --- a/scripts/prepub.js +++ b/scripts/prepub.js @@ -12,7 +12,7 @@ if(fs.existsSync(path.join(__dirname,'../dist'))) { var componentsPath = path.join(process.cwd(), 'components'); var componentsLessContent = ''; -// Build components in one file: lib/style/components.less + // Build components in one file: lib/style/components.less fs.readdir(componentsPath, function (err, files) { files.forEach(function (file) { if (fs.existsSync(path.join(componentsPath, file, 'style', 'index.less'))) { From 915ebd6a28dda543366c47e9fa7dd5ea35585759 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Mon, 31 Oct 2016 12:01:38 +0800 Subject: [PATCH 0550/2145] deps: update rc-slider --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 30f3107a06..0161fbb45c 100644 --- a/package.json +++ b/package.json @@ -60,7 +60,7 @@ "rc-radio": "~2.0.0", "rc-rate": "~1.1.2", "rc-select": "~6.5.1", - "rc-slider": "~5.1.0", + "rc-slider": "~5.2.0", "rc-steps": "~2.2.0", "rc-switch": "~1.4.2", "rc-table": "~5.0.0", From 1deea83a05481d5f4d676ddd7da92a1cd37dcf1a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=81=8F=E5=8F=B3?= Date: Mon, 31 Oct 2016 12:09:06 +0800 Subject: [PATCH 0551/2145] refactor: keep index.js as entry (#3397) --- components/index.tsx | 9 +++++++++ index.js | 35 +---------------------------------- package.json | 2 +- typings/custom-typings.d.ts | 6 ++++++ 4 files changed, 17 insertions(+), 35 deletions(-) diff --git a/components/index.tsx b/components/index.tsx index 47244c7f55..6dca06cac8 100644 --- a/components/index.tsx +++ b/components/index.tsx @@ -1,3 +1,12 @@ +/* eslint no-console:0 */ +// this file is not used if use https://github.com/ant-design/babel-plugin-import +if (process.env.NODE_ENV !== 'production') { + if (typeof console !== 'undefined' && console.warn) { + console.warn(`You are using prebuilt antd, +please use https://www.npmjs.com/package/babel-plugin-import to reduce app bundle size.`); + } +} + export { default as Affix } from './affix'; export { default as AutoComplete } from './auto-complete'; diff --git a/index.js b/index.js index c672262baa..94017e32ba 100644 --- a/index.js +++ b/index.js @@ -1,34 +1 @@ -/* eslint no-console:0 */ -// this file is not used if use https://github.com/ant-design/babel-plugin-import - -function camelCase(name) { - return name.charAt(0).toUpperCase() + - name.slice(1).replace(/-(\w)/g, (m, n) => { - return n.toUpperCase(); - }); -} - -const req = require.context('./components', true, /^\.\/[^_][\w-]+\/(style\/)?index\.tsx?$/); - -req.keys().forEach((mod) => { - let v = req(mod); - if (v && v.default) { - v = v.default; - } - const match = mod.match(/^\.\/([^_][\w-]+)\/index\.tsx?$/); - if (match && match[1]) { - if (match[1] === 'message' || match[1] === 'notification') { - // message & notification should not be capitalized - exports[match[1]] = v; - } else { - exports[camelCase(match[1])] = v; - } - } -}); - -if (process.env.NODE_ENV !== 'production') { - if (typeof console !== 'undefined' && console.warn) { - console.warn(`You are using prebuilt antd, -please use https://www.npmjs.com/package/babel-plugin-import to reduce app bundle size.`); - } -} +module.exports = require('./components'); diff --git a/package.json b/package.json index 0161fbb45c..f92a85a56c 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,7 @@ "bugs": { "url": "https://github.com/ant-design/ant-design/issues" }, - "main": "dist/antd", + "main": "lib/index.js", "files": [ "dist", "lib" diff --git a/typings/custom-typings.d.ts b/typings/custom-typings.d.ts index 2d82bbe31d..e0b46ce082 100644 --- a/typings/custom-typings.d.ts +++ b/typings/custom-typings.d.ts @@ -75,3 +75,9 @@ declare module 'rc-upload'; declare module 'rc-collapse'; declare module 'rc-form*'; + +declare var process: { + env: { + NODE_ENV: string + } +}; From edb41f4420befbdcb114260d3ade2ed91dd97e98 Mon Sep 17 00:00:00 2001 From: feng zhi hao Date: Mon, 31 Oct 2016 13:15:13 +0800 Subject: [PATCH 0552/2145] update types in Tabs and FormItem (#3653) * update types in Tabs and FormItem * remove children prop in FormItem and Tabs --- components/form/FormItem.tsx | 3 +-- components/tabs/index.tsx | 3 +-- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/components/form/FormItem.tsx b/components/form/FormItem.tsx index f4a29a4a16..d3c8339fac 100644 --- a/components/form/FormItem.tsx +++ b/components/form/FormItem.tsx @@ -26,7 +26,6 @@ export interface FormItemProps { required?: boolean; style?: React.CSSProperties; colon?: boolean; - children: any; } export interface FormItemContext { @@ -239,7 +238,7 @@ export default class FormItem extends React.Component { renderChildren() { const props = this.props; - const children = React.Children.map(props.children, (child: React.ReactElement) => { + const children = React.Children.map(props.children as React.ReactNode, (child: React.ReactElement) => { if (child && typeof child.type === 'function' && !child.props.size) { return React.cloneElement(child, { size: 'large' }); } diff --git a/components/tabs/index.tsx b/components/tabs/index.tsx index cb47341b04..89dbd50b75 100755 --- a/components/tabs/index.tsx +++ b/components/tabs/index.tsx @@ -24,7 +24,6 @@ export interface TabsProps { prefixCls?: string; className?: string; animated?: boolean; - children: any; } // Tabs @@ -94,7 +93,7 @@ export default class Tabs extends React.Component { let childrenWithClose; if (type === 'editable-card') { childrenWithClose = []; - React.Children.forEach(children, (child: React.ReactElement, index) => { + React.Children.forEach(children as React.ReactNode, (child: React.ReactElement, index) => { childrenWithClose.push(cloneElement(child, { tab: (
    From ea4e98d5f7b41dd4f87fc45440ba75ffa6c81c17 Mon Sep 17 00:00:00 2001 From: edgji Date: Sun, 30 Oct 2016 22:36:40 -0700 Subject: [PATCH 0553/2145] docs: add documentation and reference for customRequest (#3651) --- components/upload/index.en-US.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/components/upload/index.en-US.md b/components/upload/index.en-US.md index d2c4a438a6..45bbc5a5e9 100644 --- a/components/upload/index.en-US.md +++ b/components/upload/index.en-US.md @@ -30,6 +30,7 @@ Uploading is the process of publishing information (web pages, text, pictures, v | multiple | Whether to support selected multiple file. `IE10+` supported. You can select multiple files with CTRL holding down while multiple is set to be true | Boolean | false | | accept | File types that can be accepted. See [input accept Attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept) | String | - | | beforeUpload | Hook function which takes an argument: the uploaded file, will be executed before uploading. Uploading will be stopped with `false` or a rejected Promise returned. **Warning：this function is not supported by old IE**。 | Function | - | +| customRequest | override for the default xhr behavior allowing for additional customization and ability to implement your own XMLHttpRequest | Function | - | | onChange | A callback function, can be executed when uploading state is changing. See [onChange](#onChange) | Function | - | | listType | Built-in stylesheets, support for two types: `text` or `picture` | String | 'text'| | onPreview | A callback function, will be executed when file link is clicked. | Function(file) | - | @@ -70,6 +71,10 @@ When uploading state change, it returns: please set property `url` of property `fileList` to control content of link +## customRequest + +* https://github.com/react-component/upload#customrequest + ## IE note - [https://github.com/react-component/upload#ie89-note](https://github.com/react-component/upload#ie89-note) From 27708b702cc9b0a8f3698078afe958f82482f1c5 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Mon, 31 Oct 2016 13:44:13 +0800 Subject: [PATCH 0554/2145] docs: update docs for upload, ref: #3651 --- components/upload/index.zh-CN.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/components/upload/index.zh-CN.md b/components/upload/index.zh-CN.md index 4f8ab7f031..a1d9c5b632 100644 --- a/components/upload/index.zh-CN.md +++ b/components/upload/index.zh-CN.md @@ -31,6 +31,7 @@ title: Upload | multiple | 是否支持多选文件，`ie10+` 支持。开启后按住 ctrl 可选择多个文件。 | Boolean | false | | accept | 接受上传的文件类型, 详见 [input accept Attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept) | String | 无 | | beforeUpload | 上传文件之前的钩子，参数为上传的文件，若返回 `false` 或者 Promise 则停止上传。**注意：该方法不支持老 IE**。 | Function | 无 | +| customRequest | 通过覆盖默认的上传行为，可以自定义自己的上传实现 | Function | 无 | | onChange | 上传文件改变时的状态，详见 onChange | Function | 无 | | listType | 上传列表的内建样式，支持两种基本样式 `text` or `picture` | String | 'text'| | onPreview | 点击文件链接时的回调 | Function(file) | 无 | @@ -71,6 +72,10 @@ title: Upload 请使用 fileList 属性设置数组项的 url 属性进行展示控制。 +## customRequest + +* https://github.com/react-component/upload#customrequest + ## IE note - [https://github.com/react-component/upload#ie89-note](https://github.com/react-component/upload#ie89-note) From 49e5bfa7caeec9825891d1dcb364ec198d57f897 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Mon, 31 Oct 2016 15:03:48 +0800 Subject: [PATCH 0555/2145] docs: add demo for customized form control, close: #3585, ref: #3594 --- .../form/demo/customized-form-controls.md | 96 +++++++++++++++++++ components/form/demo/dynamic-form-item.md | 2 +- components/form/demo/mix.md | 2 +- components/form/demo/validate-other.md | 2 +- components/form/demo/validate-static.md | 2 +- 5 files changed, 100 insertions(+), 4 deletions(-) create mode 100644 components/form/demo/customized-form-controls.md diff --git a/components/form/demo/customized-form-controls.md b/components/form/demo/customized-form-controls.md new file mode 100644 index 0000000000..b75558e8e0 --- /dev/null +++ b/components/form/demo/customized-form-controls.md @@ -0,0 +1,96 @@ +--- +order: 6 +title: + zh-CN: 自定义表单控件 + en-US: Customized Form Controls +--- + +## zh-CN + +自定义或第三方的表单控件，也可以与 Form 组件一起使用。只要该组件遵循以下的约定： +> * 提供受控属性 `value` 或其它与 [`valuePropName`](http://ant.design/components/form/#getFieldDecorator-参数) 的值同名的属性。 +> * 提供 `onChange` 事件或 [`trigger`](http://ant.design/components/form/#getFieldDecorator-参数) 的值同名的事件。 + +## en-US + +Customized or third-party form controls can be used in Form, too. Controls must follow these conventions: +> * It has a controlled property `value` or other name which is equal to the value of [`valuePropName`](http://ant.design/components/form/?locale=en-US#getFieldDecorator's-parameters). +> * It has event `onChange` or an event which name is equal to the value of [`trigger`](http://ant.design/components/form/?locale=en-US#getFieldDecorator's-parameters). + + +````jsx +import { Form, Input, Button } from 'antd'; +const FormItem = Form.Item; + +const CustomizedInputNumber = React.createClass({ + getInitialState() { + return { + value: this.props.value || 0, + }; + }, + componentWillReceiveProps(nextProps) { + // Should be a controlled component. + if ('value' in nextProps) { + const value = nextProps.value; + this.setState({ value }); + } + }, + handleChange(e) { + const number = parseFloat(e.target.value || 0); + if (isNaN(number)) { + return; + } + + if (!('value' in this.props)) { + this.setState({ value: number }); + } + + // Should provide an event to pass value to Form. + const onChange = this.props.onChange; + if (onChange) { + onChange(number); + } + }, + render() { + return ( + + ); + }, +}); + +const Demo = Form.create()(React.createClass({ + handleSubmit(e) { + e.preventDefault(); + + this.props.form.validateFields((err, values) => { + if (err) { + return; + } + + console.log('Received values of form: ', values); + }); + }, + render() { + const { getFieldDecorator } = this.props.form; + return ( +
    + + {getFieldDecorator('number', { + rules: [{ type: 'number' }], + })()} + + + + + + ); + }, +})); + +ReactDOM.render(, mountNode); +```` diff --git a/components/form/demo/dynamic-form-item.md b/components/form/demo/dynamic-form-item.md index 8651922a90..3ac809a45d 100644 --- a/components/form/demo/dynamic-form-item.md +++ b/components/form/demo/dynamic-form-item.md @@ -1,5 +1,5 @@ --- -order: 15 +order: 10 title: zh-CN: 动态增减表单项 en-US: Dynamic form item diff --git a/components/form/demo/mix.md b/components/form/demo/mix.md index 9f6932cce8..866ff4535b 100644 --- a/components/form/demo/mix.md +++ b/components/form/demo/mix.md @@ -1,5 +1,5 @@ --- -order: 6 +order: 7 title: zh-CN: 表单组合 en-US: Mix diff --git a/components/form/demo/validate-other.md b/components/form/demo/validate-other.md index 0c2984f3cd..2bab4de698 100644 --- a/components/form/demo/validate-other.md +++ b/components/form/demo/validate-other.md @@ -1,5 +1,5 @@ --- -order: 12 +order: 9 title: zh-CN: 校验其他组件 en-US: Others components related to validation diff --git a/components/form/demo/validate-static.md b/components/form/demo/validate-static.md index fa6700f93c..70c4446a77 100644 --- a/components/form/demo/validate-static.md +++ b/components/form/demo/validate-static.md @@ -1,5 +1,5 @@ --- -order: 6 +order: 8 title: zh-CN: 校验提示 en-US: Validation message From 037d739fa46930cf5f92397b542c8ba976c4ad87 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Mon, 31 Oct 2016 15:42:57 +0800 Subject: [PATCH 0556/2145] docs: update demo order --- .../form/demo/customized-form-controls.md | 2 +- components/form/demo/dynamic-form-item.md | 33 ++++++++++--------- components/form/demo/mix.md | 2 +- components/form/demo/register.md | 2 +- components/form/demo/time-related-controls.md | 2 +- components/form/demo/validate-other.md | 2 +- components/form/demo/validate-static.md | 2 +- 7 files changed, 23 insertions(+), 22 deletions(-) diff --git a/components/form/demo/customized-form-controls.md b/components/form/demo/customized-form-controls.md index b75558e8e0..0e1be84f0c 100644 --- a/components/form/demo/customized-form-controls.md +++ b/components/form/demo/customized-form-controls.md @@ -1,5 +1,5 @@ --- -order: 6 +order: 7 title: zh-CN: 自定义表单控件 en-US: Customized Form Controls diff --git a/components/form/demo/dynamic-form-item.md b/components/form/demo/dynamic-form-item.md index 3ac809a45d..e800a230e6 100644 --- a/components/form/demo/dynamic-form-item.md +++ b/components/form/demo/dynamic-form-item.md @@ -1,8 +1,8 @@ --- -order: 10 +order: 5 title: zh-CN: 动态增减表单项 - en-US: Dynamic form item + en-US: Dynamic Form Item --- ## zh-CN @@ -26,34 +26,36 @@ let Demo = React.createClass({ remove(k) { const { form } = this.props; // can use data-binding to get - let keys = form.getFieldValue('keys'); - keys = keys.filter((key) => { + const keys = form.getFieldValue('keys'); + const nextKeys = keys.filter((key) => { return key !== k; }); // can use data-binding to set form.setFieldsValue({ - keys, + keys: nextKeys, }); }, add() { uuid++; const { form } = this.props; // can use data-binding to get - let keys = form.getFieldValue('keys'); - keys = keys.concat(uuid); + const keys = form.getFieldValue('keys'); + const nextKeys = keys.concat(uuid); // can use data-binding to set // important! notify form to detect changes form.setFieldsValue({ - keys, + keys: nextKeys, }); }, - submit(e) { + handleSubmit(e) { e.preventDefault(); - this.props.form.validateFields((errors, values) => { - if (errors) { - console.log(errors); + + this.props.form.validateFields((err, values) => { + if (err) { + return; } - console.log(values); + + console.log('Received values of form: ', values); }); }, render() { @@ -81,11 +83,11 @@ let Demo = React.createClass({ ); }); return ( -
    + {formItems} - + ); @@ -93,6 +95,5 @@ let Demo = React.createClass({ }); Demo = Form.create()(Demo); - ReactDOM.render(, mountNode); ```` diff --git a/components/form/demo/mix.md b/components/form/demo/mix.md index 866ff4535b..5e9e303d70 100644 --- a/components/form/demo/mix.md +++ b/components/form/demo/mix.md @@ -1,5 +1,5 @@ --- -order: 7 +order: 8 title: zh-CN: 表单组合 en-US: Mix diff --git a/components/form/demo/register.md b/components/form/demo/register.md index 5c75a7b18e..587656344e 100644 --- a/components/form/demo/register.md +++ b/components/form/demo/register.md @@ -51,7 +51,7 @@ const RegistrationForm = Form.create()(React.createClass({ handleSubmit(e) { e.preventDefault(); - this.props.form.validateFields((err, values) => { + this.props.form.validateFieldsAndScroll((err, values) => { if (err) { return; } diff --git a/components/form/demo/time-related-controls.md b/components/form/demo/time-related-controls.md index a390f81e1f..d627750f1a 100644 --- a/components/form/demo/time-related-controls.md +++ b/components/form/demo/time-related-controls.md @@ -1,5 +1,5 @@ --- -order: 5 +order: 6 title: zh-CN: 时间类控件 en-US: Time-related Controls diff --git a/components/form/demo/validate-other.md b/components/form/demo/validate-other.md index 2bab4de698..bd6931b267 100644 --- a/components/form/demo/validate-other.md +++ b/components/form/demo/validate-other.md @@ -1,5 +1,5 @@ --- -order: 9 +order: 10 title: zh-CN: 校验其他组件 en-US: Others components related to validation diff --git a/components/form/demo/validate-static.md b/components/form/demo/validate-static.md index 70c4446a77..14a04e1847 100644 --- a/components/form/demo/validate-static.md +++ b/components/form/demo/validate-static.md @@ -1,5 +1,5 @@ --- -order: 8 +order: 9 title: zh-CN: 校验提示 en-US: Validation message From c5a043b4c8122275ecdb69847ef48e3ff2f26b84 Mon Sep 17 00:00:00 2001 From: RaoHai Date: Mon, 31 Oct 2016 15:39:03 +0800 Subject: [PATCH 0557/2145] Mention Improvement + add `getSuggestionContainer` callback function, which allow users modify the container element of suggestions dropdown. + the suggestions dropdown will mount on `document.body` defaultly, instead of on editor. + close #3588 --- components/mention/demo/async.md | 2 +- components/mention/demo/avatar.md | 4 +- components/mention/demo/basic.md | 2 +- components/mention/demo/controlled.md | 2 +- components/mention/demo/custom-tag.md | 2 +- components/mention/demo/multilines.md | 2 +- components/mention/index.en-US.md | 2 +- components/mention/index.tsx | 1 + components/mention/index.zh-CN.md | 2 +- components/mention/style/index.less | 129 +++++++++++++------------- package.json | 2 +- 11 files changed, 76 insertions(+), 74 deletions(-) diff --git a/components/mention/demo/async.md b/components/mention/demo/async.md index 89e958ad33..dc0dc465e5 100644 --- a/components/mention/demo/async.md +++ b/components/mention/demo/async.md @@ -44,7 +44,7 @@ const AsyncMention = React.createClass({ const { suggestions, loading } = this.state; return ( diff --git a/components/mention/demo/basic.md b/components/mention/demo/basic.md index eb674db09a..0fc1d17a89 100644 --- a/components/mention/demo/basic.md +++ b/components/mention/demo/basic.md @@ -27,7 +27,7 @@ function onSelect(suggestion) { ReactDOM.render( diff --git a/components/mention/demo/custom-tag.md b/components/mention/demo/custom-tag.md index 548f5e654b..e1ca42ebcf 100644 --- a/components/mention/demo/custom-tag.md +++ b/components/mention/demo/custom-tag.md @@ -52,7 +52,7 @@ const CustomNavMention = React.createClass({ return ( document.ready | ### Nav props diff --git a/components/mention/index.tsx b/components/mention/index.tsx index d625c56ada..0db0f29a61 100644 --- a/components/mention/index.tsx +++ b/components/mention/index.tsx @@ -17,6 +17,7 @@ export interface MentionProps { multiLines?: Boolean; prefix?: string; placeholder?: string; + getSuggestionContainer?: Function; } export interface MentionState { diff --git a/components/mention/index.zh-CN.md b/components/mention/index.zh-CN.md index a878d26328..4a2b2bff23 100644 --- a/components/mention/index.zh-CN.md +++ b/components/mention/index.zh-CN.md @@ -1,7 +1,6 @@ --- category: Components subtitle: 提及 -cols: 1 type: Views title: Mention --- @@ -45,6 +44,7 @@ title: Mention | placeHolder | 输入框默认文字 | string | null | | defaultValue | 默认值 | EditorState, 可以用 Mention.toEditorState(text) 把文字转换成 EditorState | null | | value | 值 | EditorState | null | +| getSuggestionContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位| Function() | () => document.body | ### Nav props diff --git a/components/mention/style/index.less b/components/mention/style/index.less index 05669deb1b..f5b6ebfb58 100644 --- a/components/mention/style/index.less +++ b/components/mention/style/index.less @@ -35,76 +35,77 @@ height: auto; padding: 4px 7px; } +} - .@{ant-prefix}-mention-dropdown { - margin-top: 1.5em; - max-height: 250px; - min-width: 120px; - background-color: white; - box-shadow: @box-shadow-base; - border-radius: @border-radius-base; - box-sizing: border-box; - z-index: @zindex-dropdown; - left: -9999px; - top: -9999px; - position: absolute; - outline: none; - overflow-x: hidden; - overflow-y: auto; - font-size: @font-size-base; - &-notfound.@{ant-prefix}-mention-dropdown-item { +.@{ant-prefix}-mention-dropdown { + margin-top: 1.5em; + max-height: 250px; + min-width: 120px; + background-color: white; + box-shadow: @box-shadow-base; + border-radius: @border-radius-base; + box-sizing: border-box; + z-index: @zindex-dropdown; + left: -9999px; + top: -9999px; + position: absolute; + outline: none; + overflow-x: hidden; + overflow-y: auto; + font-size: @font-size-base; + &-notfound.@{ant-prefix}-mention-dropdown-item { + color: #ccc; + + .@{iconfont-css-prefix}-loading { + color: @primary-color; + } + } + &-item { + position: relative; + display: block; + padding: 7px 16px; + font-weight: normal; + color: #666; + white-space: nowrap; + cursor: pointer; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + transition: background 0.3s ease; + + &:hover, + &.focus, + &-active { + background-color: tint(@primary-color, 90%); + } + + &-disabled { color: #ccc; + cursor: not-allowed; - .@{iconfont-css-prefix}-loading { - color: @primary-color; + &:hover { + color: #ccc; + background-color: #fff; + cursor: not-allowed; } } - &-item { - position: relative; - display: block; - padding: 7px 16px; - font-weight: normal; - color: #666; - white-space: nowrap; - cursor: pointer; - white-space: nowrap; - text-overflow: ellipsis; + + &-selected { + &, + &:hover { + background-color: @background-color-base; + font-weight: bold; + color: #666; + } + } + + &-divider { + height: 1px; + margin: 1px 0; overflow: hidden; - transition: background 0.3s ease; - - &:hover, - &.focus, - &-active { - background-color: tint(@primary-color, 90%); - } - - &-disabled { - color: #ccc; - cursor: not-allowed; - - &:hover { - color: #ccc; - background-color: #fff; - cursor: not-allowed; - } - } - - &-selected { - &, - &:hover { - background-color: @background-color-base; - font-weight: bold; - color: #666; - } - } - - &-divider { - height: 1px; - margin: 1px 0; - overflow: hidden; - background-color: #e5e5e5; - line-height: 0; - } + background-color: #e5e5e5; + line-height: 0; } } } + diff --git a/package.json b/package.json index f92a85a56c..a6f1270f9f 100644 --- a/package.json +++ b/package.json @@ -49,7 +49,7 @@ "rc-collapse": "~1.6.4", "rc-dialog": "~6.4.0", "rc-dropdown": "~1.4.8", - "rc-editor-mention": "~0.2.2", + "rc-editor-mention": "~0.3.0", "rc-form": "~1.0.0", "rc-input-number": "~2.7.0", "rc-menu": "~5.0.1", From 42d06e1f0e210746ea80137a2b515de8257cbb62 Mon Sep 17 00:00:00 2001 From: RaoHai Date: Mon, 31 Oct 2016 15:49:35 +0800 Subject: [PATCH 0558/2145] fix `getPopupDomNode` --- components/mention/demo/popupContainer.md | 47 +++++++++++++++++++++++ 1 file changed, 47 insertions(+) create mode 100644 components/mention/demo/popupContainer.md diff --git a/components/mention/demo/popupContainer.md b/components/mention/demo/popupContainer.md new file mode 100644 index 0000000000..b69fe9e531 --- /dev/null +++ b/components/mention/demo/popupContainer.md @@ -0,0 +1,47 @@ +--- +order: 6 +title: + zh-CN: 建议渲染父节点 + en-US: SuggestionContainer +--- + +## zh-CN + +指定提示渲染的父节点。 + +## en-US + +To set the container of the suggestion. + +````jsx +import { Mention, Popover, Button } from 'antd'; +const { toString, toEditorState } = Mention; + +function onChange(editorState) { + console.log(toString(editorState)); +} + +function onSelect(suggestion) { + console.log('onSelect', suggestion); +} + +const PopoverContainer = React.createClass({ + getSuggestionContainer() { + return this.popover.getPopupDomNode(); + }, + render() { + const mention = (); + return ( this.popover = popover}> + + ); + }, +}); +ReactDOM.render(, mountNode); +```` From 4b5353b45704a0778938d604e9925afdf358e0e8 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Mon, 31 Oct 2016 16:33:25 +0800 Subject: [PATCH 0559/2145] docs: add demo for mapPropsToFields, close: #3493 --- components/form/demo/global-state.md | 80 +++++++++++++++++++++++++ components/form/demo/mix.md | 2 +- components/form/demo/validate-other.md | 2 +- components/form/demo/validate-static.md | 2 +- 4 files changed, 83 insertions(+), 3 deletions(-) create mode 100644 components/form/demo/global-state.md diff --git a/components/form/demo/global-state.md b/components/form/demo/global-state.md new file mode 100644 index 0000000000..64785eb0c2 --- /dev/null +++ b/components/form/demo/global-state.md @@ -0,0 +1,80 @@ +--- +order: 8 +title: + zh-CN: 表单数据存储于上层组件 + en-US: Store Form Data into Upper Component +--- + +## zh-CN + +通过使用 `onFieldsChange` 与 `mapPropsToFields`，可以把表单的数据存储到上层组件或者 [Redux](https://github.com/reactjs/redux)、[dva](https://github.com/dvajs/dva) 中。 + +## en-US + +We can store form data into upper component or [Redux](https://github.com/reactjs/redux) or [dva](https://github.com/dvajs/dva) by using `onFieldsChange` and `mapPropsToFields`. + +````jsx +import { Form, Input } from 'antd'; +const FormItem = Form.Item; + +const CustomizedForm = Form.create({ + onFieldsChange(props, fields) { + props.onChange(fields); + }, + mapPropsToFields(props) { + return { + username: { + ...props.username, + value: props.username.value.toUpperCase(), + }, + }; + }, +})((props) => { + const { getFieldDecorator } = props.form; + return ( +
    + + {getFieldDecorator('username', { + rules: [{ required: true, message: 'Username is required!' }], + })()} + + + ); +}); + +const Demo = React.createClass({ + getInitialState() { + return { + fields: { + username: { + value: 'benjycui', + }, + }, + }; + }, + handleFormChange(fields) { + this.setState({ fields }); + }, + render() { + const fields = this.state.fields; + return ( +
    + + 
    +          {JSON.stringify(fields, null, 2)}
+
    +
    + ); + }, +}); + +ReactDOM.render(, mountNode); +```` + + diff --git a/components/form/demo/mix.md b/components/form/demo/mix.md index 5e9e303d70..634dc6a2f4 100644 --- a/components/form/demo/mix.md +++ b/components/form/demo/mix.md @@ -1,5 +1,5 @@ --- -order: 8 +order: 9 title: zh-CN: 表单组合 en-US: Mix diff --git a/components/form/demo/validate-other.md b/components/form/demo/validate-other.md index bd6931b267..e35371e14c 100644 --- a/components/form/demo/validate-other.md +++ b/components/form/demo/validate-other.md @@ -1,5 +1,5 @@ --- -order: 10 +order: 11 title: zh-CN: 校验其他组件 en-US: Others components related to validation diff --git a/components/form/demo/validate-static.md b/components/form/demo/validate-static.md index 14a04e1847..4d4ac48a77 100644 --- a/components/form/demo/validate-static.md +++ b/components/form/demo/validate-static.md @@ -1,5 +1,5 @@ --- -order: 9 +order: 10 title: zh-CN: 校验提示 en-US: Validation message From 44f61ac987daccc96fafb6de9ad8c1309321d555 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 31 Oct 2016 17:41:45 +0800 Subject: [PATCH 0560/2145] smaller Icon[loading] --- components/style/themes/default.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/style/themes/default.less b/components/style/themes/default.less index 4d71f1ce4e..268dd4fc54 100644 --- a/components/style/themes/default.less +++ b/components/style/themes/default.less @@ -23,7 +23,7 @@ // ICONFONT @iconfont-css-prefix : anticon; -@icon-url : "https://at.alicdn.com/t/font_pldm8phsjkathuxr"; +@icon-url : "https://at.alicdn.com/t/font_uzv8nkw1nabgldi"; // LINK @link-color : #2db7f5; From b2e6bdcf942701601756897736e237c4d417b0ba Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Mon, 31 Oct 2016 17:58:12 +0800 Subject: [PATCH 0561/2145] feat: deprecate Tag[color], ref: #3560 --- components/tag/demo/colorful.md | 29 +++++++++++++---------------- components/tag/demo/control.md | 2 +- components/tag/index.en-US.md | 1 - components/tag/index.tsx | 8 ++++---- components/tag/index.zh-CN.md | 1 - 5 files changed, 18 insertions(+), 23 deletions(-) diff --git a/components/tag/demo/colorful.md b/components/tag/demo/colorful.md index 9fa67d2f53..3453a7ab67 100644 --- a/components/tag/demo/colorful.md +++ b/components/tag/demo/colorful.md @@ -1,24 +1,21 @@ --- -order: 1 -title: - zh-CN: 各种类型 - en-US: Colorful tags +debug: true +order: -1 +title: Colorful Tags for Debugging --- -## zh-CN - -四种颜色的标签。 - -## en-US -Colorful tags. +`Tag[color]` is deprecated, but we need this demo for debugging until next major version. ````jsx import { Tag } from 'antd'; -ReactDOM.render(
    - Blue - Green - Yellow - Red -
    , mountNode); +ReactDOM.render( +
    + Blue + Green + Yellow + Red +
    , + mountNode +); ```` diff --git a/components/tag/demo/control.md b/components/tag/demo/control.md index f18d88b4f9..6eec297369 100644 --- a/components/tag/demo/control.md +++ b/components/tag/demo/control.md @@ -1,5 +1,5 @@ --- -order: 2 +order: 1 title: zh-CN: 动态添加和删除 en-US: Dynamically add and remove diff --git a/components/tag/index.en-US.md b/components/tag/index.en-US.md index 99404515cf..31d507f353 100644 --- a/components/tag/index.en-US.md +++ b/components/tag/index.en-US.md @@ -19,4 +19,3 @@ Tag for categorizing or markuping. | closable | Tag can be closed. | boolean | false | | onClose | Callback when tag was closed | function(event)| - | | afterClose | Callback when closed animation is complete | function(event)| - | -| color | Tag's color: `blue` `green` `yellow` `red` | string | - | diff --git a/components/tag/index.tsx b/components/tag/index.tsx index 8606625542..27bb9167d9 100644 --- a/components/tag/index.tsx +++ b/components/tag/index.tsx @@ -1,10 +1,11 @@ import React from 'react'; import ReactDOM from 'react-dom'; import Animate from 'rc-animate'; -import Icon from '../icon'; import classNames from 'classnames'; -import splitObject from '../_util/splitObject'; import omit from 'omit.js'; +import warning from 'warning'; +import Icon from '../icon'; +import splitObject from '../_util/splitObject'; export interface TagProps { /** 标签是否可以关闭 */ @@ -13,8 +14,6 @@ export interface TagProps { onClose?: Function; /** 动画关闭后的回调 */ afterClose?: Function; - /** 标签的色彩 */ - color?: string; style?: React.CSSProperties; } @@ -26,6 +25,7 @@ export default class Tag extends React.Component { constructor(props) { super(props); + warning(!('color' in props), '`Tag[color]` is deprecated, please override color by CSS instead.'); this.state = { closing: false, diff --git a/components/tag/index.zh-CN.md b/components/tag/index.zh-CN.md index c48e9acbb1..0964839737 100644 --- a/components/tag/index.zh-CN.md +++ b/components/tag/index.zh-CN.md @@ -19,4 +19,3 @@ title: Tag | closable | 标签是否可以关闭 | boolean | false | | onClose | 关闭时的回调 | function(event) | - | | afterClose | 关闭动画完成后的回调 | function(event) | - | -| color | 标签的色彩：`blue` `green` `yellow` `red` | string | - | From ad9cfe89149e9fe5cd9f06e75d4e681666745b39 Mon Sep 17 00:00:00 2001 From: ddcat1115 Date: Mon, 31 Oct 2016 19:31:43 +0800 Subject: [PATCH 0562/2145] Button add `Multiple Buttons` demo (#3660) --- components/button/demo/multiple.md | 44 ++++++++++++++++++++++++++++++ 1 file changed, 44 insertions(+) create mode 100644 components/button/demo/multiple.md diff --git a/components/button/demo/multiple.md b/components/button/demo/multiple.md new file mode 100644 index 0000000000..c2d378a7d2 --- /dev/null +++ b/components/button/demo/multiple.md @@ -0,0 +1,44 @@ +--- +order: 6 +title: + zh-CN: 多个按钮组合 + en-US: Multiple Buttons +--- + +## zh-CN + +按钮组合使用时，推荐使用1个主操作 + n 个次操作，3个以上操作时把更多操作放到 `Dropdown.Button` 中组合使用。 + +## en-US + +If you need several buttons, we recommend that you use 1 primary button + n secondary buttons, and if there are more than three operations, you can group some of them into `Dropdown.Button`. + + +````jsx +import { Button, Menu, Dropdown, Icon } from 'antd'; + +function handleMenuClick(e) { + console.log('click', e); +} + +const menu = ( + + 1st item + 2nd item + 3rd item + +); + +ReactDOM.render( +
    + + + + + +
    , + mountNode +); +```` From d997dc9e1e94e404c17e72ae4a8653615e51bc48 Mon Sep 17 00:00:00 2001 From: Nathan Wells Date: Mon, 31 Oct 2016 11:32:16 -0400 Subject: [PATCH 0563/2145] typo (#3663) --- components/table/demo/row-selection.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/table/demo/row-selection.md b/components/table/demo/row-selection.md index 9ce02fc6ae..1f21597f6d 100644 --- a/components/table/demo/row-selection.md +++ b/components/table/demo/row-selection.md @@ -11,7 +11,7 @@ title: ## en-US -Rows can be selectable by making fisrt column as a selectable column. +Rows can be selectable by making first column as a selectable column. ````jsx import { Table } from 'antd'; From 002f3f5127bbcfa99e6ccfebec49c1fada6e19f9 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 1 Nov 2016 00:54:47 +0800 Subject: [PATCH 0564/2145] Fix Radio[disabled] style and add label-hovering style, close #3590 --- components/checkbox/style/mixin.less | 126 ++++++++++----------------- components/radio/style/index.less | 25 ++---- 2 files changed, 56 insertions(+), 95 deletions(-) diff --git a/components/checkbox/style/mixin.less b/components/checkbox/style/mixin.less index 3c3c8607e6..43b7c9b008 100644 --- a/components/checkbox/style/mixin.less +++ b/components/checkbox/style/mixin.less @@ -12,14 +12,26 @@ position: relative; vertical-align: middle; + .@{checkbox-prefix-cls}-wrapper:hover &, &:hover, &-focused { .@{checkbox-inner-prefix-cls} { - border-color: #bcbcbc; + border-color: #bbb; } } &-inner { + position: relative; + top: 0; + left: 0; + display: inline-block; + width: 14px; + height: 14px; + border: 1px solid @border-color-base; + border-radius: 3px; + background-color: #fff; + transition: all .3s; + &:after { transform: rotate(45deg) scale(0); position: absolute; @@ -34,19 +46,6 @@ content: ' '; transition: all .1s @ease-in-back; } - - position: relative; - top: 0; - left: 0; - display: inline-block; - width: 14px; - height: 14px; - border-width: 1px; - border-style: solid; - border-radius: 3px; - border-color: @border-color-base; - background-color: #fff; - transition: border-color 0.1s @ease-in-out-back, background-color 0.1s @ease-in-out-back; } &-input { @@ -64,83 +63,56 @@ } // 半选状态 + .@{checkbox-prefix-cls}-indeterminate .@{checkbox-inner-prefix-cls}:after { + content: ' '; + transform: scale(1); + position: absolute; + left: 2px; + top: 5px; + width: 8px; + height: 1px; + } + + // 选中状态 + .@{checkbox-prefix-cls}-checked .@{checkbox-inner-prefix-cls}:after { + transform: rotate(45deg) scale(1); + position: absolute; + left: 4px; + top: 1px; + display: table; + width: 5px; + height: 8px; + border: 2px solid #fff; + border-top: 0; + border-left: 0; + content: ' '; + transition: all .2s @ease-out-back .1s; + } + + .@{checkbox-prefix-cls}-checked, .@{checkbox-prefix-cls}-indeterminate { .@{checkbox-inner-prefix-cls} { border-color: @primary-color; background-color: @primary-color; - &:after { - content: ' '; - transform: scale(1); - position: absolute; - left: 2px; - top: 5px; - width: 8px; - height: 1px; - } } + .@{checkbox-prefix-cls}-wrapper:hover &, &:hover { .@{checkbox-inner-prefix-cls} { border-color: @primary-color; } } } - // 选中状态 - .@{checkbox-prefix-cls}-checked { - - &:hover { - .@{checkbox-inner-prefix-cls} { - border-color: @primary-color; - } - } - - .@{checkbox-inner-prefix-cls} { - border-color: @primary-color; - background-color: @primary-color; - - &:after { - transform: rotate(45deg) scale(1); - position: absolute; - left: 4px; - top: 1px; - display: table; - width: 5px; - height: 8px; - border: 2px solid #fff; - border-top: 0; - border-left: 0; - content: ' '; - transition: all .2s @ease-out-back .1s; - } - } - } .@{checkbox-prefix-cls}-disabled { &.@{checkbox-prefix-cls}-checked { - &:hover { - .@{checkbox-inner-prefix-cls} { - border-color: @border-color-base; - } - } - - .@{checkbox-inner-prefix-cls} { - background-color: #f3f3f3; - border-color: @border-color-base; - - &:after { - animation-name: none; - border-color: #ccc; - } - } - } - - &:hover { - .@{checkbox-inner-prefix-cls} { - border-color: @border-color-base; + .@{checkbox-inner-prefix-cls}:after { + animation-name: none; + border-color: #ccc; } } .@{checkbox-inner-prefix-cls} { - border-color: @border-color-base; + border-color: @border-color-base!important; background-color: #f3f3f3; &:after { animation-name: none; @@ -148,10 +120,6 @@ } } - .@{checkbox-inner-prefix-cls}-input { - cursor: default; - } - & + span { color: #ccc; cursor: @cursor-disabled; @@ -169,8 +137,8 @@ .@{checkbox-prefix-cls}-wrapper + span, .@{checkbox-prefix-cls} + span { - margin-left: 8px; - margin-right: 8px; + padding-left: 8px; + padding-right: 8px; } .@{checkbox-prefix-cls}-group { diff --git a/components/radio/style/index.less b/components/radio/style/index.less index 1faafb0d34..4417cb10fe 100644 --- a/components/radio/style/index.less +++ b/components/radio/style/index.less @@ -4,7 +4,7 @@ @radio-prefix-cls: ~"@{ant-prefix}-radio"; @radio-group-prefix-cls: ~"@{radio-prefix-cls}-group"; @radio-inner-prefix-cls: ~"@{radio-prefix-cls}-inner"; -@radio-duration: .2s; +@radio-duration: .3s; .@{radio-group-prefix-cls} { display: inline-block; @@ -19,6 +19,7 @@ position: relative; white-space: nowrap; margin-right: 8px; + cursor: pointer; } .@{radio-prefix-cls} { @@ -29,10 +30,11 @@ line-height: 1; vertical-align: middle; cursor: pointer; + .@{radio-prefix-cls}-wrapper:hover &, &:hover, &-focused { .@{radio-inner-prefix-cls} { - border-color: #bcbcbc; + border-color: #bbb; } } &-inner { @@ -64,7 +66,7 @@ border-radius: 14px; border-color: @border-color-base; background-color: #fff; - transition: all @radio-duration @ease-in-out-circ; + transition: all @radio-duration; } &-input { @@ -92,32 +94,23 @@ } .@{radio-prefix-cls}-disabled { - &:hover { - .@{radio-inner-prefix-cls} { - border-color: @border-color-base; - } - } .@{radio-inner-prefix-cls} { - border-color: @border-color-base; + border-color: @border-color-base!important; background-color: #f3f3f3; &:after { background-color: #cccccc; } } - .@{radio-inner-prefix-cls}-input { - cursor: default; - } - - .@{radio-prefix-cls}-disabled + span { + & + span { color: #ccc; cursor: @cursor-disabled; } } span.@{radio-prefix-cls} + * { - margin-left: 8px; - margin-right: 8px; + padding-left: 8px; + padding-right: 8px; } .@{radio-prefix-cls}-button-wrapper { From 984a03e203b1f689222da9cb4c0cd4b0f3329d32 Mon Sep 17 00:00:00 2001 From: Meck Date: Mon, 31 Oct 2016 15:51:47 +0800 Subject: [PATCH 0565/2145] docs: add a note for AutoComplete's API --- components/auto-complete/index.en-US.md | 2 +- components/auto-complete/index.zh-CN.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/components/auto-complete/index.en-US.md b/components/auto-complete/index.en-US.md index 29144b4604..61653be008 100644 --- a/components/auto-complete/index.en-US.md +++ b/components/auto-complete/index.en-US.md @@ -17,7 +17,7 @@ When need to use autocomplete function. const dataSource = ['12345', '23456', '34567']; ``` - +Since `AutoComplete` is based on `Select`, so besides following API, `AutoComplete` has same API as `Select`. | Property | Description | Type | Default | |----------------|----------------------------------|------------|--------| diff --git a/components/auto-complete/index.zh-CN.md b/components/auto-complete/index.zh-CN.md index 0787d6c3df..65293f80db 100644 --- a/components/auto-complete/index.zh-CN.md +++ b/components/auto-complete/index.zh-CN.md @@ -18,7 +18,7 @@ title: AutoComplete const dataSource = ['12345', '23456', '34567']; ``` - +因为 `AutoComplete` 是基于 `Select` 封装的，所以除了以下 API 外，`AutoComplete` 跟 `Select` 拥有一样的 API。 | 参数 | 说明 | 类型 | 默认值 | |----------------|----------------------------------|------------|---------| From 048e3c9246e87570cabd64dbeb9460b077ea5c91 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Tue, 1 Nov 2016 10:11:02 +0800 Subject: [PATCH 0566/2145] docs: update demo for time-relate controls --- components/form/demo/time-related-controls.md | 66 ++++++++++++++----- 1 file changed, 49 insertions(+), 17 deletions(-) diff --git a/components/form/demo/time-related-controls.md b/components/form/demo/time-related-controls.md index d627750f1a..1b9034cb03 100644 --- a/components/form/demo/time-related-controls.md +++ b/components/form/demo/time-related-controls.md @@ -23,24 +23,40 @@ const TimeRelatedForm = Form.create()(React.createClass({ handleSubmit(e) { e.preventDefault(); - const fieldsValue = this.props.form.getFieldsValue(); + this.props.form.validateFields((err, fieldsValue) => { + if (err) { + return; + } - // Should format date value before submit. - const rangeValue = fieldsValue['range-picker']; - const values = { - ...fieldsValue, - 'date-picker': fieldsValue['date-picker'].format('YYYY-MM-DD'), - 'month-picker': fieldsValue['month-picker'].format('YYYY-MM'), - 'range-picker': [rangeValue[0].format('YYYY-MM-DD'), rangeValue[1].format('YYYY-MM-DD')], - 'time-picker': fieldsValue['time-picker'].format('HH:mm:ss'), - }; - console.log('Received values of form: ', values); + // Should format date value before submit. + const rangeValue = fieldsValue['range-picker']; + const rangeTimeValue = fieldsValue['range-time-picker']; + const values = { + ...fieldsValue, + 'date-picker': fieldsValue['date-picker'].format('YYYY-MM-DD'), + 'date-time-picker': fieldsValue['date-time-picker'].format('YYYY-MM-DD HH:mm:ss'), + 'month-picker': fieldsValue['month-picker'].format('YYYY-MM'), + 'range-picker': [rangeValue[0].format('YYYY-MM-DD'), rangeValue[1].format('YYYY-MM-DD')], + 'range-time-picker': [ + rangeTimeValue[0].format('YYYY-MM-DD HH:mm:ss'), + rangeTimeValue[1].format('YYYY-MM-DD HH:mm:ss'), + ], + 'time-picker': fieldsValue['time-picker'].format('HH:mm:ss'), + }; + console.log('Received values of form: ', values); + }); }, render() { const { getFieldDecorator } = this.props.form; const formItemLayout = { - labelCol: { span: 6 }, - wrapperCol: { span: 14 }, + labelCol: { span: 8 }, + wrapperCol: { span: 16 }, + }; + const config = { + rules: [{ type: 'object', required: true, message: 'Please select time!' }], + }; + const rangeConfig = { + rules: [{ type: 'array', required: true, message: 'Please select time!' }], }; return (
    @@ -48,15 +64,23 @@ const TimeRelatedForm = Form.create()(React.createClass({ {...formItemLayout} label="DatePicker" > - {getFieldDecorator('date-picker')( + {getFieldDecorator('date-picker', config)( )}     + + {getFieldDecorator('date-time-picker', config)( + + )} + - {getFieldDecorator('month-picker')( + {getFieldDecorator('month-picker', config)( )} @@ -64,15 +88,23 @@ const TimeRelatedForm = Form.create()(React.createClass({ {...formItemLayout} label="RangePicker" > - {getFieldDecorator('range-picker')( + {getFieldDecorator('range-picker', rangeConfig)( )} + + {getFieldDecorator('range-time-picker', rangeConfig)( + + )} + - {getFieldDecorator('time-picker')( + {getFieldDecorator('time-picker', config)( )} From 0b7856b7127a6ff165e5e74c78dc3f74bdb0a1ca Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Tue, 1 Nov 2016 10:12:34 +0800 Subject: [PATCH 0567/2145] fix: should check undefined value, close: #3665 --- components/date-picker/createPicker.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/components/date-picker/createPicker.tsx b/components/date-picker/createPicker.tsx index fb06424a2b..54f1705586 100644 --- a/components/date-picker/createPicker.tsx +++ b/components/date-picker/createPicker.tsx @@ -31,7 +31,7 @@ export default function createPicker(TheCalendar) { }, componentWillReceiveProps(nextProps: PickerProps) { - if ('value' in nextProps) { + if (nextProps.value !== undefined) { this.setState({ value: nextProps.value, }); @@ -47,14 +47,14 @@ export default function createPicker(TheCalendar) { handleChange(value) { const props = this.props; - if (!('value' in props)) { + if (props.value === undefined) { this.setState({ value }); } props.onChange(value, (value && value.format(props.format)) || ''); }, handleTempChange(tempValue) { - if (!('value' in this.props)) { + if (this.props.value === undefined) { this.setState({ tempValue }); } }, From 60ecb3c62843b1e7b7649fb7ea633da3102cdd81 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Tue, 1 Nov 2016 11:10:11 +0800 Subject: [PATCH 0568/2145] refactor: each message should warn just once --- components/_util/warning.tsx | 9 +++++++++ components/badge/index.tsx | 2 +- components/breadcrumb/Breadcrumb.tsx | 7 +++---- components/date-picker/wrapPicker.tsx | 2 +- components/form/Form.tsx | 21 ++++++--------------- components/form/FormItem.tsx | 18 +++++++----------- components/menu/index.tsx | 2 +- components/table/Table.tsx | 2 +- components/tag/index.tsx | 2 +- 9 files changed, 30 insertions(+), 35 deletions(-) create mode 100644 components/_util/warning.tsx diff --git a/components/_util/warning.tsx b/components/_util/warning.tsx new file mode 100644 index 0000000000..144130e529 --- /dev/null +++ b/components/_util/warning.tsx @@ -0,0 +1,9 @@ +import warning from 'warning'; + +const warned: { [msg: string]: boolean} = {}; +export default (valid: boolean, message: string): void => { + if (!valid && !warned[message]) { + warning(false, message); + warned[message] = true; + } +}; diff --git a/components/badge/index.tsx b/components/badge/index.tsx index fe8e9901a4..c7097e4b7e 100644 --- a/components/badge/index.tsx +++ b/components/badge/index.tsx @@ -2,7 +2,7 @@ import React from 'react'; import Animate from 'rc-animate'; import ScrollNumber from './ScrollNumber'; import classNames from 'classnames'; -import warning from 'warning'; +import warning from '../_util/warning'; import splitObject from '../_util/splitObject'; export interface BadgeProps { diff --git a/components/breadcrumb/Breadcrumb.tsx b/components/breadcrumb/Breadcrumb.tsx index e0879fd4d4..1342d3df53 100755 --- a/components/breadcrumb/Breadcrumb.tsx +++ b/components/breadcrumb/Breadcrumb.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { cloneElement } from 'react'; -import warning from 'warning'; +import warning from '../_util/warning'; import BreadcrumbItem from './BreadcrumbItem'; export interface BreadcrumbProps { @@ -52,9 +52,8 @@ export default class Breadcrumb extends React.Component { nameRender: React.PropTypes.func, }; - constructor(props) { - super(); - + componentDidMount() { + const props = this.props; warning( !('linkRender' in props || 'nameRender' in props), '`linkRender` and `nameRender` are removed, please use `itemRender` instead.' diff --git a/components/date-picker/wrapPicker.tsx b/components/date-picker/wrapPicker.tsx index 47d3933e21..ed010293a0 100644 --- a/components/date-picker/wrapPicker.tsx +++ b/components/date-picker/wrapPicker.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { PropTypes } from 'react'; import TimePickerPanel from 'rc-time-picker/lib/Panel'; import classNames from 'classnames'; -import warning from 'warning'; +import warning from '../_util/warning'; import getLocale from '../_util/getLocale'; declare const require: Function; diff --git a/components/form/Form.tsx b/components/form/Form.tsx index e54dfbfb2a..f963f32134 100755 --- a/components/form/Form.tsx +++ b/components/form/Form.tsx @@ -81,8 +81,6 @@ export interface ComponentDecorator { (component: T): T; } -let warnedGetFieldProps = false; - export default class Form extends React.Component { static defaultProps = { prefixCls: 'ant-form', @@ -123,24 +121,17 @@ export default class Form extends React.Component { }; }, componentWillMount() { - if (!warnedGetFieldProps) { - this.getFieldProps = this.props.form.getFieldProps; - } + this.getFieldProps = this.deprecatedGetFieldProps; }, deprecatedGetFieldProps(name, option) { - if (!warnedGetFieldProps) { - warnedGetFieldProps = true; - warning( - false, - '`getFieldProps` is not recommended, please use `getFieldDecorator` instead' - ); - } + warning( + false, + '`getFieldProps` is not recommended, please use `getFieldDecorator` instead' + ); return this.getFieldProps(name, option); }, render() { - if (!warnedGetFieldProps) { - this.props.form.getFieldProps = this.deprecatedGetFieldProps; - } + this.props.form.getFieldProps = this.deprecatedGetFieldProps; const withRef: any = {}; if (options && options.withRef) { diff --git a/components/form/FormItem.tsx b/components/form/FormItem.tsx index d3c8339fac..4f3d6708b8 100644 --- a/components/form/FormItem.tsx +++ b/components/form/FormItem.tsx @@ -1,11 +1,11 @@ import React from 'react'; import classNames from 'classnames'; -import warning from 'warning'; import PureRenderMixin from 'rc-util/lib/PureRenderMixin'; import Row from '../row'; import Col from '../col'; import { WrappedFormUtils } from './Form'; import { FIELD_META_PROP } from './constants'; +import warning from '../_util/warning'; export interface FormItemLabelColOption { span: number; @@ -32,7 +32,6 @@ export interface FormItemContext { form: WrappedFormUtils; } -let autoGenerateWarning = false; export default class FormItem extends React.Component { static defaultProps = { hasFeedback: false, @@ -61,14 +60,11 @@ export default class FormItem extends React.Component { context: FormItemContext; componentDidMount() { - if (!autoGenerateWarning && (this.getControls(this.props.children, true).length > 1)) { - autoGenerateWarning = true; - warning( - false, - '`Form.Item` cannot generate `validateStatus` and `help` automatically, ' + - 'while there are more than one `getFieldDecorator` in it.' - ); - } + warning( + this.getControls(this.props.children, true).length <= 1, + '`Form.Item` cannot generate `validateStatus` and `help` automatically, ' + + 'while there are more than one `getFieldDecorator` in it.' + ); } shouldComponentUpdate(...args) { @@ -85,7 +81,7 @@ export default class FormItem extends React.Component { return props.help; } - getControls(children, recursively) { + getControls(children, recursively: boolean) { let controls: React.ReactElement[] = []; const childrenArray = React.Children.toArray(children); for (let i = 0; i < childrenArray.length; i++) { diff --git a/components/menu/index.tsx b/components/menu/index.tsx index 36cd62273f..f72b94a79a 100644 --- a/components/menu/index.tsx +++ b/components/menu/index.tsx @@ -1,7 +1,7 @@ import React from 'react'; import RcMenu, { Item, Divider, SubMenu, ItemGroup } from 'rc-menu'; import animation from '../_util/openAnimation'; -import warning from 'warning'; +import warning from '../_util/warning'; export interface SelectParam { key: string; diff --git a/components/table/Table.tsx b/components/table/Table.tsx index b0d4d459ac..ffa3398ea3 100755 --- a/components/table/Table.tsx +++ b/components/table/Table.tsx @@ -10,7 +10,7 @@ import classNames from 'classnames'; import { flatArray, treeMap } from './util'; import assign from 'object-assign'; import splitObject from '../_util/splitObject'; -import warning from 'warning'; +import warning from '../_util/warning'; function noop() { } diff --git a/components/tag/index.tsx b/components/tag/index.tsx index 27bb9167d9..be6eb5f2dc 100644 --- a/components/tag/index.tsx +++ b/components/tag/index.tsx @@ -3,8 +3,8 @@ import ReactDOM from 'react-dom'; import Animate from 'rc-animate'; import classNames from 'classnames'; import omit from 'omit.js'; -import warning from 'warning'; import Icon from '../icon'; +import warning from '../_util/warning'; import splitObject from '../_util/splitObject'; export interface TagProps { From 8c68e8f64bfdfc1d80e34d310c3aee68f05e7599 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 1 Nov 2016 11:58:43 +0800 Subject: [PATCH 0569/2145] improve tabs switch animation --- components/tabs/style/index.less | 2 ++ 1 file changed, 2 insertions(+) diff --git a/components/tabs/style/index.less b/components/tabs/style/index.less index f8fb2f67a7..e8881f0c58 100644 --- a/components/tabs/style/index.less +++ b/components/tabs/style/index.less @@ -200,6 +200,8 @@ .@{tab-prefix-cls}-tabpane { flex-shrink: 0; width: 100%; + transition: opacity 0.3s; + opacity: 1; } .@{tab-prefix-cls}-tabpane-inactive { From fa06625de0cf9e41af9af11ecdce20d8e5209fa3 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 1 Nov 2016 12:34:39 +0800 Subject: [PATCH 0570/2145] Fix popover arrow style in nested example, close #3448 --- components/popover/style/index.less | 49 +++++++++++++++-------------- 1 file changed, 25 insertions(+), 24 deletions(-) diff --git a/components/popover/style/index.less b/components/popover/style/index.less index ab507ff00c..812883f596 100644 --- a/components/popover/style/index.less +++ b/components/popover/style/index.less @@ -113,14 +113,15 @@ &-arrow { border-width: @popover-arrow-outer-width; } + &-arrow:after { border-width: @popover-arrow-width; content: ""; } - &-placement-top &-arrow, - &-placement-topLeft &-arrow, - &-placement-topRight &-arrow { + &-placement-top > &-content > &-arrow, + &-placement-topLeft > &-content > &-arrow, + &-placement-topRight > &-content > &-arrow { border-bottom-width: 0; border-top-color: @popover-arrow-outer-color; bottom: -1px; @@ -132,20 +133,20 @@ border-top-color: @popover-arrow-color; } } - &-placement-top &-arrow { + &-placement-top > &-content > &-arrow { left: 50%; margin-left: -@popover-arrow-outer-width; } - &-placement-topLeft &-arrow { + &-placement-topLeft > &-content > &-arrow { left: 16px; } - &-placement-topRight &-arrow { + &-placement-topRight > &-content > &-arrow { right: 16px; } - &-placement-right &-arrow, - &-placement-rightTop &-arrow, - &-placement-rightBottom &-arrow { + &-placement-right > &-content > &-arrow, + &-placement-rightTop > &-content > &-arrow, + &-placement-rightBottom > &-content > &-arrow { left: -1px; border-left-width: 0; border-right-color: @popover-arrow-outer-color; @@ -157,20 +158,20 @@ border-right-color: @popover-arrow-color; } } - &-placement-right &-arrow { + &-placement-right > &-content > &-arrow { top: 50%; margin-top: -@popover-arrow-outer-width; } - &-placement-rightTop &-arrow { + &-placement-rightTop > &-content > &-arrow { top: 12px; } - &-placement-rightBottom &-arrow { + &-placement-rightBottom > &-content > &-arrow { bottom: 12px; } - &-placement-bottom &-arrow, - &-placement-bottomLeft &-arrow, - &-placement-bottomRight &-arrow { + &-placement-bottom > &-content > &-arrow, + &-placement-bottomLeft > &-content > &-arrow, + &-placement-bottomRight > &-content > &-arrow { border-top-width: 0; border-bottom-color: @popover-arrow-outer-color; top: -1px; @@ -182,20 +183,20 @@ border-bottom-color: @popover-arrow-color; } } - &-placement-bottom &-arrow { + &-placement-bottom > &-content > &-arrow { left: 50%; margin-left: -@popover-arrow-outer-width; } - &-placement-bottomLeft &-arrow { + &-placement-bottomLeft > &-content > &-arrow { left: 16px; } - &-placement-bottomRight &-arrow { + &-placement-bottomRight > &-content > &-arrow { right: 16px; } - &-placement-left &-arrow, - &-placement-leftTop &-arrow, - &-placement-leftBottom &-arrow { + &-placement-left > &-content > &-arrow, + &-placement-leftTop > &-content > &-arrow, + &-placement-leftBottom > &-content > &-arrow { right: -1px; border-right-width: 0; border-left-color: @popover-arrow-outer-color; @@ -207,14 +208,14 @@ bottom: -@popover-arrow-width; } } - &-placement-left &-arrow { + &-placement-left > &-content > &-arrow { top: 50%; margin-top: -@popover-arrow-outer-width; } - &-placement-leftTop &-arrow { + &-placement-leftTop > &-content > &-arrow { top: 12px; } - &-placement-leftBottom &-arrow { + &-placement-leftBottom > &-content > &-arrow { bottom: 12px; } } From 14cbb03dc18413e17fc599823873929d28db0a8e Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 1 Nov 2016 14:47:52 +0800 Subject: [PATCH 0571/2145] fix link --- components/table/index.en-US.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/table/index.en-US.md b/components/table/index.en-US.md index c09a0e45dd..d7d6ee69b4 100644 --- a/components/table/index.en-US.md +++ b/components/table/index.en-US.md @@ -53,7 +53,7 @@ const columns = [{ | Property | Description | Type | Default | |---------------|--------------------------|-----------------|--------------| | rowSelection | row selection [config](#rowSelection) | Object | null | -| pagination | pagination [config](/components/pagination), hide it via setting to `false` | Object | | +| pagination | pagination [config](/components/pagination/), hide it via setting to `false` | Object | | | size | size of table: `default` or `small` | String | `default` | | dataSource | data record array to be rendered | Array | | | columns | columns of table | Array | - | From 479e975d29b1d37557247e0f96eb323f2dde8298 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 1 Nov 2016 15:02:48 +0800 Subject: [PATCH 0572/2145] Improve API table style --- site/theme/static/markdown.less | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/site/theme/static/markdown.less b/site/theme/static/markdown.less index 2804746ef2..455d4bf8e5 100644 --- a/site/theme/static/markdown.less +++ b/site/theme/static/markdown.less @@ -89,7 +89,7 @@ } .markdown code { - margin: 0 3px; + margin: 0 1px; background: #f7f7f7; padding: .2em .4em; border-radius: 3px; @@ -205,6 +205,20 @@ .markdown.api-container table { font-family: Consolas, Menlo, Courier, monospace; font-size: 13px; + td:first-child { + background: #fcfcfc; + font-weight: 500; + width: 20%; + } + td:nth-child(3) { + width: 20%; + word-break: break-all; + font-size: 12px; + } + td:last-child { + width: 15%; + font-size: 12px; + } } .layout-demo, From a105876ff1f7efce02394292101f9015bc759d70 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 1 Nov 2016 15:08:31 +0800 Subject: [PATCH 0573/2145] update style --- site/theme/static/demo.less | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/site/theme/static/demo.less b/site/theme/static/demo.less index 60268904ef..4b3601965f 100644 --- a/site/theme/static/demo.less +++ b/site/theme/static/demo.less @@ -91,14 +91,10 @@ .code-box-meta h4, section.code-box-meta p { - margin: 0; + margin: 4px 0; width: 93%; } -.code-box-meta p + p { - margin-top: 8px; -} - .code-box-meta blockquote { margin: 0; } From 29a732e3a92bb76c582dd7b7ac4c8fbb3356e6d8 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Tue, 1 Nov 2016 15:30:02 +0800 Subject: [PATCH 0574/2145] docs: fix typo, close: #3672 --- components/form/demo/horizontal-login.md | 4 ++-- components/form/demo/normal-login.md | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/components/form/demo/horizontal-login.md b/components/form/demo/horizontal-login.md index 3eb2b114be..f41363f41c 100644 --- a/components/form/demo/horizontal-login.md +++ b/components/form/demo/horizontal-login.md @@ -1,13 +1,13 @@ --- order: 0 title: - zh-CN: 水平登陆栏 + zh-CN: 水平登录栏 en-US: Horizontal Login Form --- ## zh-CN -水平登陆栏，常用在顶部导航栏中。 +水平登录栏，常用在顶部导航栏中。 ## en-US diff --git a/components/form/demo/normal-login.md b/components/form/demo/normal-login.md index 865b77ddd7..1afe13388c 100644 --- a/components/form/demo/normal-login.md +++ b/components/form/demo/normal-login.md @@ -1,13 +1,13 @@ --- order: 1 title: - zh-CN: 登陆框 + zh-CN: 登录框 en-US: Login Form --- ## zh-CN -普通的登陆框，可以容纳更多的元素。 +普通的登录框，可以容纳更多的元素。 ## en-US From 7e73725c686b02f86f0ae6febb7f3ca126a8834b Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 1 Nov 2016 16:11:06 +0800 Subject: [PATCH 0575/2145] update form demo --- components/form/demo/validate-static.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/components/form/demo/validate-static.md b/components/form/demo/validate-static.md index 4d4ac48a77..f92ee8088a 100644 --- a/components/form/demo/validate-static.md +++ b/components/form/demo/validate-static.md @@ -38,7 +38,7 @@ ReactDOM.render( validateStatus="error" help="Should be combination of numbers & alphabets" > - + - + - + - + - + - + Date: Wed, 2 Nov 2016 10:47:50 +0800 Subject: [PATCH 0576/2145] docs: simplify demo --- components/form/demo/global-state.md | 10 +- components/form/demo/register.md | 22 ++- components/form/demo/time-related-controls.md | 10 +- components/form/demo/validate-other.md | 137 ++---------------- 4 files changed, 32 insertions(+), 147 deletions(-) diff --git a/components/form/demo/global-state.md b/components/form/demo/global-state.md index 64785eb0c2..6b21852451 100644 --- a/components/form/demo/global-state.md +++ b/components/form/demo/global-state.md @@ -18,8 +18,8 @@ import { Form, Input } from 'antd'; const FormItem = Form.Item; const CustomizedForm = Form.create({ - onFieldsChange(props, fields) { - props.onChange(fields); + onFieldsChange(props, changedFields) { + props.onChange(changedFields); }, mapPropsToFields(props) { return { @@ -52,8 +52,10 @@ const Demo = React.createClass({ }, }; }, - handleFormChange(fields) { - this.setState({ fields }); + handleFormChange(changedFields) { + this.setState({ + fields: { ...this.state.fields, ...changedFields }, + }); }, render() { const fields = this.state.fields; diff --git a/components/form/demo/register.md b/components/form/demo/register.md index 587656344e..d16e48a09b 100644 --- a/components/form/demo/register.md +++ b/components/form/demo/register.md @@ -195,19 +195,15 @@ const RegistrationForm = Form.create()(React.createClass({ - - -
    -

    - {getFieldDecorator('agreement', { - valuePropName: 'checked', - })( - I had read the agreement - )} -

    - - - + +

    + {getFieldDecorator('agreement', { + valuePropName: 'checked', + })( + I had read the agreement + )} +

    +     ); diff --git a/components/form/demo/time-related-controls.md b/components/form/demo/time-related-controls.md index 1b9034cb03..a25cbd48dc 100644 --- a/components/form/demo/time-related-controls.md +++ b/components/form/demo/time-related-controls.md @@ -14,7 +14,7 @@ title: After `antd@2.0`, the `value` of time-related components had been changed to `moment`. So, we need to pre-process those values. ````jsx -import { Form, DatePicker, TimePicker, Row, Col, Button } from 'antd'; +import { Form, DatePicker, TimePicker, Button } from 'antd'; const FormItem = Form.Item; const MonthPicker = DatePicker.MonthPicker; const RangePicker = DatePicker.RangePicker; @@ -108,12 +108,8 @@ const TimeRelatedForm = Form.create()(React.createClass({ )} - - - - - - + + ); diff --git a/components/form/demo/validate-other.md b/components/form/demo/validate-other.md index e35371e14c..a56d83e933 100644 --- a/components/form/demo/validate-other.md +++ b/components/form/demo/validate-other.md @@ -2,56 +2,33 @@ order: 11 title: zh-CN: 校验其他组件 - en-US: Others components related to validation + en-US: Other Form Controls --- ## zh-CN -提供以下组件表单域的校验：`Select` `Radio` `DatePicker` `InputNumber` `Cascader`。在 submit 时使用 `validateFieldsAndScroll`，进行校验，可以自动把不在可见范围内的校验不通过的菜单域滚动进可见范围。 +以上演示没有出现的表单控件对应的校验演示。 ## en-US -Provide validation for following input filed: `Select` `Radio` `DatePicker` `InputNumber` `Cascader`. To use `validateFieldsAndScroll` with form validation, it will scroll the form to the failed input field which is not in visible area. +Demostration for validataion configuration for form controls which are not show in the above demos. ````jsx -import { Select, Radio, Checkbox, Button, DatePicker, TimePicker, InputNumber, Form, Cascader, Icon } from 'antd'; +import { Select, Button, InputNumber, Form } from 'antd'; const Option = Select.Option; -const RadioGroup = Radio.Group; -const createForm = Form.create; const FormItem = Form.Item; -let Demo = React.createClass({ - componentDidMount() { - this.props.form.setFieldsValue({ - eat: true, - sleep: true, - beat: true, - }); - }, - - handleReset(e) { - e.preventDefault(); - this.props.form.resetFields(); - }, - +const Demo = Form.create()(React.createClass({ handleSubmit(e) { e.preventDefault(); - this.props.form.validateFieldsAndScroll((errors, values) => { - if (errors) { - console.log('Errors in form!!!'); + + this.props.form.validateFields((err, values) => { + if (err) { return; } - console.log('Submit!!!'); - console.log(values); - }); - }, - checkBirthday(rule, value, callback) { - if (value && value.valueOf() >= Date.now()) { - callback(new Error("You can't be born in the future!")); - } else { - callback(); - } + console.log('Received values of form: ', values); + }); }, checkPrime(rule, value, callback) { @@ -63,21 +40,13 @@ let Demo = React.createClass({ }, render() { - const address = [{ - value: 'zhejiang', - label: 'Zhe Jiang', - children: [{ - value: 'hangzhou', - label: 'Hang Zhou', - }], - }]; const { getFieldDecorator } = this.props.form; const formItemLayout = { labelCol: { span: 7 }, wrapperCol: { span: 12 }, }; return ( - + - - {getFieldDecorator('radio', { - rules: [ - { required: true, message: 'Please select your gender' }, - ], - })( - - male - female - - )} - No other gender - - - - {getFieldDecorator('hobby')( - - )} - - - - {getFieldDecorator('birthday', { - rules: [ - { - required: true, - type: 'object', - message: 'When is your birthday?', - }, { - validator: this.checkBirthday, - }, - ], - })( - - )} - - - - {getFieldDecorator('time', { - rules: [ - { - required: true, - type: 'object', - message: 'Please select the time', - }, - ], - })( - - )} - - - - {getFieldDecorator('address', { - rules: [{ required: true, type: 'array' }], - })( - - )} - - - - -     - + + ); }, -}); +})); -Demo = createForm()(Demo); ReactDOM.render(, mountNode); ```` From 20bbf43ccdfb3e30e4acf4b354cb870b03e03d45 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 2 Nov 2016 11:14:21 +0800 Subject: [PATCH 0577/2145] Fix Transfer ssr bug, close #3686 --- components/transfer/list.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/transfer/list.tsx b/components/transfer/list.tsx index f21183fec4..e9e1924543 100644 --- a/components/transfer/list.tsx +++ b/components/transfer/list.tsx @@ -240,7 +240,7 @@ export default class TransferList extends React.Component {showItems.length > 0 ? showItems - :
    {notFoundContent || '列表为空'}
    } + :
    {notFoundContent || '列表为空'}
    } } {footerDom ?
    From 7372893b8e1289d98a3877710c56a45716bc7fe0 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Wed, 2 Nov 2016 11:24:52 +0800 Subject: [PATCH 0578/2145] docs: add demo for without Form.create, ref: #3594 --- components/form/demo/mix.md | 2 +- components/form/demo/validate-other.md | 2 +- components/form/demo/validate-static.md | 2 +- components/form/demo/without-form-create.md | 75 +++++++++++++++++++++ 4 files changed, 78 insertions(+), 3 deletions(-) create mode 100644 components/form/demo/without-form-create.md diff --git a/components/form/demo/mix.md b/components/form/demo/mix.md index 634dc6a2f4..2b917e9ec8 100644 --- a/components/form/demo/mix.md +++ b/components/form/demo/mix.md @@ -1,5 +1,5 @@ --- -order: 9 +order: 10 title: zh-CN: 表单组合 en-US: Mix diff --git a/components/form/demo/validate-other.md b/components/form/demo/validate-other.md index a56d83e933..59cf57f37e 100644 --- a/components/form/demo/validate-other.md +++ b/components/form/demo/validate-other.md @@ -1,5 +1,5 @@ --- -order: 11 +order: 12 title: zh-CN: 校验其他组件 en-US: Other Form Controls diff --git a/components/form/demo/validate-static.md b/components/form/demo/validate-static.md index f92ee8088a..93d3c7bb05 100644 --- a/components/form/demo/validate-static.md +++ b/components/form/demo/validate-static.md @@ -1,5 +1,5 @@ --- -order: 10 +order: 11 title: zh-CN: 校验提示 en-US: Validation message diff --git a/components/form/demo/without-form-create.md b/components/form/demo/without-form-create.md new file mode 100644 index 0000000000..13ea524f02 --- /dev/null +++ b/components/form/demo/without-form-create.md @@ -0,0 +1,75 @@ +--- +order: 9 +title: + zh-CN: 自行处理表单数据 + en-US: Handle Form Data Manually +--- + +## zh-CN + +使用 `Form.create` 处理后的表单具有自动收集数据并校验的功能，但如果您不需要这个功能，或者默认的行为无法满足业务需求，可以选择不使用 `Form.create` 并自行处理数据。 + +## en-US + +`Form.create` will collect and validate form data automatically. But if you don't need this feature or the default behaviour cannot satisfy you business, you can drop `Form.create` and handle form data manually. + +````jsx +import { Form, InputNumber } from 'antd'; +const FormItem = Form.Item; + +const RawForm = React.createClass({ + getInitialState() { + return { + number: { + value: 11, + }, + }; + }, + handleNumberChange(value) { + this.setState({ + number: { + ...this.validatePrimeNumber(value), + value, + }, + }); + }, + validatePrimeNumber(number) { + if (number === 11) { + return { + validateStatus: 'success', + errorMsg: null, + }; + } + return { + validateStatus: 'error', + errorMsg: 'The prime number between 8 to 12 is 11!', + }; + }, + render() { + const formItemLayout = { + labelCol: { span: 8 }, + wrapperCol: { span: 12 }, + }; + const number = this.state.number; + return ( +
    + + + + + ); + }, +}); + +ReactDOM.render(, mountNode); +```` From d198c63a68d2fee0fbc3bf32f20e78a4b28ba8a5 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Wed, 2 Nov 2016 11:42:12 +0800 Subject: [PATCH 0579/2145] docs: update demo, close: #3673 --- components/form/demo/register.md | 22 ++++++++++++++-------- 1 file changed, 14 insertions(+), 8 deletions(-) diff --git a/components/form/demo/register.md b/components/form/demo/register.md index d16e48a09b..5281ed69ed 100644 --- a/components/form/demo/register.md +++ b/components/form/demo/register.md @@ -85,6 +85,12 @@ const RegistrationForm = Form.create()(React.createClass({ labelCol: { span: 6 }, wrapperCol: { span: 14 }, }; + const tailFormItemLayout = { + wrapperCol: { + span: 14, + offset: 6, + }, + }; const prefixSelector = getFieldDecorator('prefix', { initialValue: '86', })( @@ -195,14 +201,14 @@ const RegistrationForm = Form.create()(React.createClass({ - -

    - {getFieldDecorator('agreement', { - valuePropName: 'checked', - })( - I had read the agreement - )} -

    + + {getFieldDecorator('agreement', { + valuePropName: 'checked', + })( + I had read the agreement + )} + + From 82c816fbc9f02e49fb5d52a09ce2bf16002dd4db Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 2 Nov 2016 12:03:13 +0800 Subject: [PATCH 0580/2145] Fix controlled DatePicker[showTime] not working, close #3665 --- components/date-picker/createPicker.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/components/date-picker/createPicker.tsx b/components/date-picker/createPicker.tsx index 54f1705586..b6b1fc3e5e 100644 --- a/components/date-picker/createPicker.tsx +++ b/components/date-picker/createPicker.tsx @@ -34,6 +34,7 @@ export default function createPicker(TheCalendar) { if (nextProps.value !== undefined) { this.setState({ value: nextProps.value, + tempValue: nextProps.value, }); } }, @@ -54,9 +55,7 @@ export default function createPicker(TheCalendar) { }, handleTempChange(tempValue) { - if (this.props.value === undefined) { - this.setState({ tempValue }); - } + this.setState({ tempValue }); }, // Clear temp value when hide picker panel From 59805843e5766087cff19bbbbe1825772493524b Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Wed, 2 Nov 2016 12:13:00 +0800 Subject: [PATCH 0581/2145] docs: merge mix demo into validate-other --- components/form/demo/mix.md | 207 ------------------------ components/form/demo/validate-other.md | 98 ++++++++--- components/form/demo/validate-static.md | 2 +- 3 files changed, 73 insertions(+), 234 deletions(-) delete mode 100644 components/form/demo/mix.md diff --git a/components/form/demo/mix.md b/components/form/demo/mix.md deleted file mode 100644 index 2b917e9ec8..0000000000 --- a/components/form/demo/mix.md +++ /dev/null @@ -1,207 +0,0 @@ ---- -order: 10 -title: - zh-CN: 表单组合 - en-US: Mix ---- - -## zh-CN - -集中营，展示和表单相关的其他 ant-design 组件。 - -## en-US - -A mix to demonstrate others ant-design component related to form. - -````jsx -import { Form, Select, InputNumber, DatePicker, TimePicker, Switch, Radio, - Cascader, Slider, Button, Col, Upload, Icon } from 'antd'; -import moment from 'moment'; -import 'moment/locale/zh-cn'; -moment.locale('zh-cn'); -const FormItem = Form.Item; -const Option = Select.Option; -const RadioButton = Radio.Button; -const RadioGroup = Radio.Group; - -const areaData = [{ - value: 'shanghai', - label: 'Shanghai', - children: [{ - value: 'shanghaishi', - label: 'Shanghai', - children: [{ - value: 'pudongxinqu', - label: 'Pudong New District', - }], - }], -}]; - -let Demo = React.createClass({ - handleSubmit(e) { - e.preventDefault(); - console.log('Received the values of form', this.props.form.getFieldsValue()); - }, - - normFile(e) { - if (Array.isArray(e)) { - return e; - } - return e && e.fileList; - }, - - render() { - const { getFieldDecorator } = this.props.form; - return ( -
    - -

    O, wind, if winter comes, can spring be far behind?

    -

    - link -

    -     - - - {getFieldDecorator('inputNumber', { initialValue: 3 })( - - )} - machines - - - - {getFieldDecorator('switch', { valuePropName: 'checked' })( - - )} - - - - {getFieldDecorator('slider')( - - )} - - - - {getFieldDecorator('select')( - - )} - - - - {getFieldDecorator('area')( - - )} - - - -
    - - {getFieldDecorator('startDate')( - - )} - - - -

    -

    - - - - {getFieldDecorator('endDate')( - - )} - - - - - - - {getFieldDecorator('time')( - - )} - - - - {getFieldDecorator('rg')( - - item 1 - item 2 - item 3 - - )} - - - - {getFieldDecorator('upload', { - valuePropName: 'fileList', - normalize: this.normFile, - })( - - - - )} - - - - - - - ); - }, -}); - -Demo = Form.create()(Demo); - -ReactDOM.render(, mountNode); -```` diff --git a/components/form/demo/validate-other.md b/components/form/demo/validate-other.md index 59cf57f37e..7c01c1cfed 100644 --- a/components/form/demo/validate-other.md +++ b/components/form/demo/validate-other.md @@ -1,5 +1,5 @@ --- -order: 12 +order: 11 title: zh-CN: 校验其他组件 en-US: Other Form Controls @@ -14,9 +14,14 @@ title: Demostration for validataion configuration for form controls which are not show in the above demos. ````jsx -import { Select, Button, InputNumber, Form } from 'antd'; -const Option = Select.Option; +import { + Form, Select, InputNumber, Switch, Radio, + Slider, Button, Upload, Icon, +} from 'antd'; const FormItem = Form.Item; +const Option = Select.Option; +const RadioButton = Radio.Button; +const RadioGroup = Radio.Group; const Demo = Form.create()(React.createClass({ handleSubmit(e) { @@ -31,54 +36,48 @@ const Demo = Form.create()(React.createClass({ }); }, - checkPrime(rule, value, callback) { - if (value !== 11) { - callback(new Error('The prime number between 8 to 12 is 11!')); - } else { - callback(); + normFile(e) { + if (Array.isArray(e)) { + return e; } + return e && e.fileList; }, render() { const { getFieldDecorator } = this.props.form; const formItemLayout = { - labelCol: { span: 7 }, - wrapperCol: { span: 12 }, + labelCol: { span: 6 }, + wrapperCol: { span: 14 }, }; return (
    {getFieldDecorator('select', { rules: [ - { required: true, message: 'Please select your country' }, + { required: true, message: 'Please select your country!' }, ], })( - - - - )} - {getFieldDecorator('multiSelect', { + {getFieldDecorator('select-multiple', { rules: [ - { required: true, message: 'Please select your favourite colors', type: 'array' }, + { required: true, message: 'Please select your favourite colors!', type: 'array' }, ], })( - - - @@ -87,12 +86,59 @@ const Demo = Form.create()(React.createClass({ - {getFieldDecorator('primeNumber', { - rules: [{ validator: this.checkPrime }], + {getFieldDecorator('input-number', { initialValue: 3 })( + + )} + machines + + + + {getFieldDecorator('switch', { valuePropName: 'checked' })( + + )} + + + + {getFieldDecorator('slider')( + + )} + + + + {getFieldDecorator('radio-group')( + + item 1 + item 2 + item 3 + + )} + + + + {getFieldDecorator('upload', { + valuePropName: 'fileList', + normalize: this.normFile, })( - + + + )} diff --git a/components/form/demo/validate-static.md b/components/form/demo/validate-static.md index 93d3c7bb05..f92ee8088a 100644 --- a/components/form/demo/validate-static.md +++ b/components/form/demo/validate-static.md @@ -1,5 +1,5 @@ --- -order: 11 +order: 10 title: zh-CN: 校验提示 en-US: Validation message From 2dc5b11c43720d029cac7ea65537220b5a77aee0 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Wed, 2 Nov 2016 13:47:05 +0800 Subject: [PATCH 0582/2145] docs: update docs about timezone --- components/date-picker/index.en-US.md | 2 ++ components/date-picker/index.zh-CN.md | 2 ++ 2 files changed, 4 insertions(+) diff --git a/components/date-picker/index.en-US.md b/components/date-picker/index.en-US.md index e0338dac2b..54221954ed 100644 --- a/components/date-picker/index.en-US.md +++ b/components/date-picker/index.en-US.md @@ -20,6 +20,8 @@ import moment from 'moment-timezone/moment-timezone'; // It's recommended to set locale and timezone in entry file globaly. import 'moment/locale/zh-cn'; moment.locale('zh-cn'); + +// Set timezone if you need it. // The following data is copied from https://github.com/moment/moment-timezone/blob/develop/data/packed/latest.json moment.tz.add('Asia/Shanghai|CST CDT|-80 -90|01010101010101010|-1c1I0 LX0 16p0 1jz0 1Myp0 Rb0 1o10 11z0 1o10 11z0 1qN0 11z0 1o10 11z0 1o10 11z0|23e6'); moment.tz.setDefault('Asia/Shanghai') diff --git a/components/date-picker/index.zh-CN.md b/components/date-picker/index.zh-CN.md index 74d281909f..100d4c6672 100644 --- a/components/date-picker/index.zh-CN.md +++ b/components/date-picker/index.zh-CN.md @@ -21,6 +21,8 @@ import moment from 'moment-timezone/moment-timezone'; // 推荐在入口文件全局设置 locale 与时区 import 'moment/locale/zh-cn'; moment.locale('zh-cn'); + +// 按需设置时区 // 从 https://github.com/moment/moment-timezone/blob/develop/data/packed/latest.json 复制 moment.tz.add('Asia/Shanghai|CST CDT|-80 -90|01010101010101010|-1c1I0 LX0 16p0 1jz0 1Myp0 Rb0 1o10 11z0 1o10 11z0 1qN0 11z0 1o10 11z0 1o10 11z0|23e6'); moment.tz.setDefault('Asia/Shanghai') From 7fad45403eb4649d3d69236e9c201b56481dfc6d Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 2 Nov 2016 13:38:37 +0800 Subject: [PATCH 0583/2145] changelog for 2.2.1 --- CHANGELOG.en-US.md | 6 ++++++ CHANGELOG.zh-CN.md | 6 ++++++ package.json | 2 +- 3 files changed, 13 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index f1c0c8c12c..cb32afe936 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -9,6 +9,12 @@ If you want to read change logs before `2.0.0`, please visit [GitHub](https://gi --- +## 2.2.1 + +`2016-11-02` + +* Fix controlled DatePicker[showTime] not working bug. [#3665](https://github.com/ant-design/ant-design/issues/3665) + ## 2.2.0 `2016-10-28` diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index b133bb4cdd..4fdb907e73 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -9,6 +9,12 @@ timeline: true --- +## 2.2.1 + +`2016-11-02` + +* 修复 Form 中 DatePicker[showTime]（受控）无法使用的问题。[#3665](https://github.com/ant-design/ant-design/issues/3665) + ## 2.2.0 `2016-10-28` diff --git a/package.json b/package.json index f92a85a56c..2daa1ecbc5 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "antd", - "version": "2.2.0", + "version": "2.2.1", "title": "Ant Design", "description": "An enterprise-class UI design language and React-based implementation", "homepage": "http://ant.design/", From 168370fb8206aec7bc5487822e0efd2c4ad1d2a3 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Wed, 2 Nov 2016 13:58:30 +0800 Subject: [PATCH 0584/2145] docs: remove documentation about timezone --- components/date-picker/index.en-US.md | 9 ++------- components/date-picker/index.zh-CN.md | 9 ++------- 2 files changed, 4 insertions(+), 14 deletions(-) diff --git a/components/date-picker/index.en-US.md b/components/date-picker/index.en-US.md index 54221954ed..aecba60af9 100644 --- a/components/date-picker/index.en-US.md +++ b/components/date-picker/index.en-US.md @@ -15,17 +15,12 @@ By clicking the input box, you can select a date from a popup calendar. Note: Part of locale of DatePicker, MonthPicker, RangePicker is read from value. So, please set the locale of moment correctly. ```jsx -import moment from 'moment-timezone/moment-timezone'; +import moment from 'moment'; -// It's recommended to set locale and timezone in entry file globaly. +// It's recommended to set locale in entry file globaly. import 'moment/locale/zh-cn'; moment.locale('zh-cn'); -// Set timezone if you need it. -// The following data is copied from https://github.com/moment/moment-timezone/blob/develop/data/packed/latest.json -moment.tz.add('Asia/Shanghai|CST CDT|-80 -90|01010101010101010|-1c1I0 LX0 16p0 1jz0 1Myp0 Rb0 1o10 11z0 1o10 11z0 1qN0 11z0 1o10 11z0 1o10 11z0|23e6'); -moment.tz.setDefault('Asia/Shanghai') - ``` diff --git a/components/date-picker/index.zh-CN.md b/components/date-picker/index.zh-CN.md index 100d4c6672..202e60694c 100644 --- a/components/date-picker/index.zh-CN.md +++ b/components/date-picker/index.zh-CN.md @@ -16,17 +16,12 @@ subtitle: 日期选择框 注意：DatePicker、MonthPicker、RangePicker 部分 locale 是从 value 中读取，所以请先正确设置 moment 的 locale。 ```jsx -import moment from 'moment-timezone/moment-timezone'; +import moment from 'moment'; -// 推荐在入口文件全局设置 locale 与时区 +// 推荐在入口文件全局设置 locale import 'moment/locale/zh-cn'; moment.locale('zh-cn'); -// 按需设置时区 -// 从 https://github.com/moment/moment-timezone/blob/develop/data/packed/latest.json 复制 -moment.tz.add('Asia/Shanghai|CST CDT|-80 -90|01010101010101010|-1c1I0 LX0 16p0 1jz0 1Myp0 Rb0 1o10 11z0 1o10 11z0 1qN0 11z0 1o10 11z0 1o10 11z0|23e6'); -moment.tz.setDefault('Asia/Shanghai') - ``` From 137299f4c8a87879cf70f133e42b87e611dc154c Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 2 Nov 2016 15:02:21 +0800 Subject: [PATCH 0585/2145] blur DatePicker[showTime] will trigger onChange --- components/date-picker/createPicker.tsx | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/components/date-picker/createPicker.tsx b/components/date-picker/createPicker.tsx index b6b1fc3e5e..6d4013568f 100644 --- a/components/date-picker/createPicker.tsx +++ b/components/date-picker/createPicker.tsx @@ -60,13 +60,18 @@ export default function createPicker(TheCalendar) { // Clear temp value when hide picker panel handleOpenChange(open) { + const { showTime, onOpenChange } = this.props; + const { tempValue } = this.state; if (!open) { + if (showTime && tempValue) { + this.handleChange(tempValue); + } this.setState({ tempValue: undefined, }); } - if (this.props.onOpenChange) { - this.props.onOpenChange(open); + if (onOpenChange) { + onOpenChange(open); } }, @@ -90,14 +95,9 @@ export default function createPicker(TheCalendar) { let calendarHandler: Object = {}; if (props.showTime) { calendarHandler = { - onOk: this.handleChange, // fix https://github.com/ant-design/ant-design/issues/1902 - onSelect: (value, cause) => { - if (cause && cause.source === 'todayButton') { - this.handleChange(value); - } else { - this.handleTempChange(value); - } + onSelect: (value) => { + this.handleTempChange(value); }, }; } else { From 248f0d12ad828fe9bc474fbd94a581d726208f6b Mon Sep 17 00:00:00 2001 From: Meck Date: Wed, 2 Nov 2016 15:04:42 +0800 Subject: [PATCH 0586/2145] Fix typo --- components/mention/index.en-US.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/mention/index.en-US.md b/components/mention/index.en-US.md index 8066d519c0..e011ad30f8 100644 --- a/components/mention/index.en-US.md +++ b/components/mention/index.en-US.md @@ -44,7 +44,7 @@ When need to mention someone or something. | defaultValue | default value | EditorState, you can use `Mention.toEditorState` to convert text to `EditorState` | null | | value | core state of mention | EditorState | null | | placeHolder | placeholder of input | string | null | -| getSuggestionContainer | rendered to the root of the menu. Default rendered to the body dom. If gets any problem of the menu while scrolling. Try to make the root the dom scrolled, and make it position relative. | Function() | () => document.ready | +| getSuggestionContainer | rendered to the root of the menu. Default rendered to the body dom. If gets any problem of the menu while scrolling. Try to make the root the dom scrolled, and make it position relative. | Function() | () => document.body | ### Nav props From e4b6ccf7f01c26d301ff6c200c2262ffc5da66b4 Mon Sep 17 00:00:00 2001 From: Wei Zhu Date: Wed, 2 Nov 2016 15:09:54 +0800 Subject: [PATCH 0587/2145] docs: add dynamic setting demo for table (#3690) --- components/table/demo/dynamic-settings.md | 177 ++++++++++++++++++++++ 1 file changed, 177 insertions(+) create mode 100644 components/table/demo/dynamic-settings.md diff --git a/components/table/demo/dynamic-settings.md b/components/table/demo/dynamic-settings.md new file mode 100644 index 0000000000..e3352ae4ee --- /dev/null +++ b/components/table/demo/dynamic-settings.md @@ -0,0 +1,177 @@ +--- +order: 21 +title: + en-US: Dynamic Settings + zh-CN: 动态控制表格属性 +--- + +## zh-CN + +选择不同配置组合查看效果。 + +## en-US + +Select different settings to see the result. + +````jsx +import { Table, Icon, Select, Form } from 'antd'; + +const Option = Select.Option; +const FormItem = Form.Item; + +const columns = [{ + title: 'Name', + dataIndex: 'name', + key: 'name', + render: text => {text}, +}, { + title: 'Age', + dataIndex: 'age', + key: 'age', +}, { + title: 'Address', + dataIndex: 'address', + key: 'address', +}, { + title: 'Action', + key: 'action', + render: (text, record) => ( + + Action 一 {record.name} + + Delete + + + More actions + + + ), +}]; + +const data = [{ + key: '1', + name: 'John Brown', + age: 32, + address: 'New York No. 1 Lake Park', + description: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.', +}, { + key: '2', + name: 'Jim Green', + age: 42, + address: 'London No. 1 Lake Park', + description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.', +}, { + key: '3', + name: 'Joe Black', + age: 32, + address: 'Sidney No. 1 Lake Park', + description: 'My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.', +}]; + +const expandedRowRender = record =>

    {record.description}

    ; +const title = () => 'Here is title'; +const footer = () => 'Here is footer'; + +class Demo extends React.Component { + state = { + size: 'default', + pagination: true, + expandedRowRender, + loading: false, + bordered: true, + header: true, + title, + footer, + } + + handleToggle = (prop) => { + return (value) => { + this.setState({ [prop]: value === 'show' }); + }; + } + + handleSizeChange = (value) => { + this.setState({ size: value }); + } + + handleExpandChange = (value) => { + this.setState({ expandedRowRender: value === 'enabled' ? expandedRowRender : false }); + } + + handleTitleChange = (value) => { + this.setState({ title: value === 'show' ? title : undefined }); + } + + handleFooterChange = (value) => { + this.setState({ footer: value === 'show' ? footer : undefined }); + } + + render() { + return ( +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + +
    +
    + + ); + } +} + +ReactDOM.render(, mountNode); +```` + + From 24f71ac6becf81ae4884df704331daefcb96863b Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 2 Nov 2016 16:55:15 +0800 Subject: [PATCH 0588/2145] remove some blanks --- components/modal/index.en-US.md | 3 --- components/modal/index.zh-CN.md | 2 -- 2 files changed, 5 deletions(-) diff --git a/components/modal/index.en-US.md b/components/modal/index.en-US.md index aea5206750..39fd5641f5 100644 --- a/components/modal/index.en-US.md +++ b/components/modal/index.en-US.md @@ -14,11 +14,8 @@ getting feedback or information purposes. Additionally, if you need show a simple confirmation dialog, you can use `ant.Modal.confirm()`, and so on. - - ## API - | Property | Description | Type | Default | |------------|----------------|------------------|--------------| | visible | Determine whether a modal dialog is visible or not | Boolean | no | diff --git a/components/modal/index.zh-CN.md b/components/modal/index.zh-CN.md index 8b5260e021..e733af2025 100644 --- a/components/modal/index.zh-CN.md +++ b/components/modal/index.zh-CN.md @@ -13,10 +13,8 @@ title: Modal 另外当需要一个简洁的确认框询问用户时，可以使用精心封装好的 `ant.Modal.confirm()` 等方法。 - ## API - | 参数 | 说明 | 类型 | 默认值 | |------------|----------------|------------------|--------------| | visible | 对话框是否可见 | Boolean | 无 | From 5c711a275eb60008703187f73a42878b751ffdb3 Mon Sep 17 00:00:00 2001 From: Wei Zhu Date: Wed, 2 Nov 2016 17:35:05 +0800 Subject: [PATCH 0589/2145] deps: update rc-select (#3692) * Update rc-select * Add automatic tokenization demo --- .../select/demo/automatic-tokenization.md | 38 +++++++++++++++++++ components/select/index.en-US.md | 4 ++ components/select/index.zh-CN.md | 3 ++ package.json | 2 +- 4 files changed, 46 insertions(+), 1 deletion(-) create mode 100644 components/select/demo/automatic-tokenization.md diff --git a/components/select/demo/automatic-tokenization.md b/components/select/demo/automatic-tokenization.md new file mode 100644 index 0000000000..d2c6c569a7 --- /dev/null +++ b/components/select/demo/automatic-tokenization.md @@ -0,0 +1,38 @@ +--- +order: 11 +title: + zh-CN: 自动分词 + en-US: Automatic tokenization +--- + +## zh-CN + +试下复制`露西,杰克`到输入框里。只在 tags 和 multiple 模式下可用。 + +## en-US + +Try copy `Lucy,Jack` to the input. Only available in tags and multiple mode. + +````jsx +import { Select } from 'antd'; +const Option = Select.Option; + +const children = []; +for (let i = 10; i < 36; i++) { + children.push(); +} + +function handleChange(value) { + console.log(`selected ${value}`); +} + +ReactDOM.render( + +, mountNode); +```` diff --git a/components/select/index.en-US.md b/components/select/index.en-US.md index d3930592d4..d0972e59e0 100644 --- a/components/select/index.en-US.md +++ b/components/select/index.en-US.md @@ -33,6 +33,8 @@ A Selector similar to Select2. | onDeselect | Called when a option is deselected. param is option's value. only called for multiple or tags, effective in multiple or tags mode only. | function(value) | - | | onChange | Called when select an option or input value change, or value of input is changed in combobox mode | function(value, label) | - | | onSearch | Callback function that is fired when input changed. | function(value: String) | | +| onBlur | Called when blur | function | - | +| onFocus | Called when focus | function | - | | placeholder | Placeholder of select | string | - | | notFoundContent | Specify content to show when no result matches..| string | 'Not Found' | | dropdownMatchSelectWidth | Whether dropdown's with is same with select. | boolean | true | @@ -46,6 +48,8 @@ A Selector similar to Select2. | dropdownClassName | className of dropdown menu | string | - | | getPopupContainer | Parent Node which the selector should be rendered to. Default to `body`. When position issues happen, try to modify it into scrollable content and position it relative.[example](http://codepen.io/anon/pen/xVBOVQ?editors=001) | function(triggerNode) | () => document.body | | labelInValue | whether to embed label in value | boolean | false | +| tokenSeparators | Separator used to tokenize on tag/multiple mode | string[]? | | + ### Option props diff --git a/components/select/index.zh-CN.md b/components/select/index.zh-CN.md index 690faada06..eb9fa137e0 100644 --- a/components/select/index.zh-CN.md +++ b/components/select/index.zh-CN.md @@ -34,6 +34,8 @@ title: Select | onDeselect | 取消选中时调用，参数为选中项的 option value 值，仅在 multiple 或 tags 模式下生效 | function(value) | 无 | | onChange | 选中 option，或 input 的 value 变化（combobox 模式下）时，调用此函数 | function(value) | 无 | | onSearch | 文本框值变化时回调 | function(value: String) | | +| onBlur | 失去焦点的时回调 | function | - | +| onFocus | 获得焦点时回调 | function | - | | placeholder | 选择框默认文字 | string | 无 | | notFoundContent | 当下拉列表为空时显示的内容 | string | 'Not Found' | | dropdownMatchSelectWidth | 下拉菜单和选择器同宽 | boolean | true | @@ -48,6 +50,7 @@ title: Select | dropdownClassName | 下拉菜单的 className 属性 | string | - | | getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](http://codepen.io/anon/pen/xVBOVQ?editors=001) | Function(triggerNode) | () => document.body | | labelInValue | 是否把每个选项的 label 包装到 value 中，决定 Select 的 value 类型。 | boolean | false | +| tokenSeparators | 在 tags 和 multiple 模式下自动分词的分隔符 | string[]? | | ### Option props diff --git a/package.json b/package.json index f4e94f0453..2c60aab2a3 100644 --- a/package.json +++ b/package.json @@ -59,7 +59,7 @@ "rc-queue-anim": "~0.12.4", "rc-radio": "~2.0.0", "rc-rate": "~1.1.2", - "rc-select": "~6.5.1", + "rc-select": "^6.6.1", "rc-slider": "~5.2.0", "rc-steps": "~2.2.0", "rc-switch": "~1.4.2", From d0c34380d49c2ad943664967d54110278838a3e4 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 2 Nov 2016 18:08:48 +0800 Subject: [PATCH 0590/2145] simplify form demo code --- components/date-picker/createPicker.tsx | 9 +--- components/form/demo/advanced-search.md | 46 ++++++------------- .../form/demo/customized-form-controls.md | 9 +--- components/form/demo/dynamic-form-item.md | 18 +++----- components/form/demo/horizontal-login.md | 7 +-- components/form/demo/normal-login.md | 7 +-- components/form/demo/register.md | 8 +--- components/form/demo/validate-other.md | 7 +-- 8 files changed, 30 insertions(+), 81 deletions(-) diff --git a/components/date-picker/createPicker.tsx b/components/date-picker/createPicker.tsx index 6d4013568f..2b61657860 100644 --- a/components/date-picker/createPicker.tsx +++ b/components/date-picker/createPicker.tsx @@ -3,7 +3,6 @@ import moment from 'moment'; import MonthCalendar from 'rc-calendar/lib/MonthCalendar'; import RcDatePicker from 'rc-calendar/lib/Picker'; import classNames from 'classnames'; -import assign from 'object-assign'; import omit from 'omit.js'; import Icon from '../icon'; @@ -122,19 +121,13 @@ export default function createPicker(TheCalendar) { /> ); - // default width for showTime - const pickerStyle: { width?: number } = {}; - if (props.showTime) { - pickerStyle.width = 180; - } - const clearIcon = (!props.disabled && props.allowClear && this.state.value) ? : null; return ( - + { - if (err) { - return; - } - console.log('Received values of form: ', values); }); }, handleReset() { this.props.form.resetFields(); }, - toggle(expand) { - this.setState({ expand }); + toggle() { + const { expand } = this.state; + this.setState({ expand: !expand }); }, render() { const { getFieldDecorator } = this.props.form; @@ -58,10 +53,7 @@ const AdvancedSearchForm = Form.create()(React.createClass({ for (let i = 0; i < 10; i++) { children.push( - + {getFieldDecorator(`field-${i}`)( )} @@ -71,7 +63,7 @@ const AdvancedSearchForm = Form.create()(React.createClass({ } const expand = this.state.expand; - const showedChildren = expand ? children.length : usualShowedChildren; + const shownCount = expand ? children.length : 6; return (
    - {children.slice(0, showedChildren)} + {children.slice(0, shownCount)}     - - { - expand ? ( - this.toggle(false)}> - Collapse - - ) : ( - this.toggle(true)}> - Expand - - ) - } + + + Collapse + @@ -109,16 +95,10 @@ ReactDOM.render(, mountNode); ````css #components-form-demo-advanced-search .ant-advanced-search-form { padding: 24px; - background: #f8f8f8; + background: #fbfbfb; border: 1px solid #d9d9d9; border-radius: 6px; } -#components-form-demo-advanced-search .ant-advanced-search-form .ant-btn + .ant-btn { - margin-left: 8px; -} -#components-form-demo-advanced-search .ant-advanced-search-form .ant-dropdown-link { - margin-left: 16px; -} ```` From d10026b0942ca1c29d2b35dac6e27ed5ea5c8db9 Mon Sep 17 00:00:00 2001 From: Meck Date: Thu, 3 Nov 2016 10:41:43 +0800 Subject: [PATCH 0592/2145] Using tidle range --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 2c60aab2a3..1c4dc7a82f 100644 --- a/package.json +++ b/package.json @@ -59,7 +59,7 @@ "rc-queue-anim": "~0.12.4", "rc-radio": "~2.0.0", "rc-rate": "~1.1.2", - "rc-select": "^6.6.1", + "rc-select": "~6.6.1", "rc-slider": "~5.2.0", "rc-steps": "~2.2.0", "rc-switch": "~1.4.2", From 7d2328b910f984ae6a9988308d4f1b2c0b4081e4 Mon Sep 17 00:00:00 2001 From: Meck Date: Thu, 3 Nov 2016 10:43:02 +0800 Subject: [PATCH 0593/2145] docs: improve --- components/select/demo/automatic-tokenization.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/select/demo/automatic-tokenization.md b/components/select/demo/automatic-tokenization.md index d2c6c569a7..238acb21de 100644 --- a/components/select/demo/automatic-tokenization.md +++ b/components/select/demo/automatic-tokenization.md @@ -11,7 +11,7 @@ title: ## en-US -Try copy `Lucy,Jack` to the input. Only available in tags and multiple mode. +Try to copy `Lucy,Jack` to the input. Only available in tags and multiple mode. ````jsx import { Select } from 'antd'; From 01ddb398c76f881c6cee026cbb09ec77ef0c866f Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Thu, 3 Nov 2016 11:33:26 +0800 Subject: [PATCH 0594/2145] feat: add Radio.Group[className] --- components/radio/group.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/components/radio/group.tsx b/components/radio/group.tsx index fdeb52a0ee..1ef5bbe33c 100644 --- a/components/radio/group.tsx +++ b/components/radio/group.tsx @@ -18,6 +18,8 @@ function getCheckedValue(children) { } export interface RadioGroupProps { + prefixCls?: string; + className?: string; /** 选项变化时的回调函数*/ onChange?: React.FormEventHandler; /** 用于设置当前选中的值*/ @@ -27,7 +29,6 @@ export interface RadioGroupProps { /** 大小，只对按钮样式生效*/ size?: 'large' | 'default' | 'small'; style?: React.CSSProperties; - prefixCls?: string; disabled?: boolean; } @@ -95,10 +96,12 @@ export default class RadioGroup extends React.Component { } return radio; }); - const prefixCls = props.prefixCls || 'ant-radio-group'; + + const { prefixCls = 'ant-radio-group', className = '' } = props; const classString = classNames({ [prefixCls]: true, [`${prefixCls}-${props.size}`]: props.size, + [className]: className, }); return
    {children}
    ; } From 5fb01c83005625d0e1dab8ce1c6f167cbe037d33 Mon Sep 17 00:00:00 2001 From: denzw Date: Thu, 3 Nov 2016 13:43:34 +0800 Subject: [PATCH 0595/2145] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E4=B8=8A=E4=BC=A0?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=8D=A1=E7=89=87=E6=A0=B7=E5=BC=8F=E6=97=B6?= =?UTF-8?q?,=E6=96=B0=E5=A2=9E=E5=8A=A0=E4=B8=8A=E4=BC=A0=E5=9B=BE?= =?UTF-8?q?=E7=89=87=E4=B8=8D=E8=83=BD=E9=A2=84=E8=A7=88=E7=9A=84=E9=97=AE?= =?UTF-8?q?=E9=A2=98=20(#3706)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/upload/uploadList.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/upload/uploadList.tsx b/components/upload/uploadList.tsx index fcaee44211..be9222fc80 100644 --- a/components/upload/uploadList.tsx +++ b/components/upload/uploadList.tsx @@ -132,7 +132,7 @@ export default class UploadList extends React.Component { this.handlePreview(file, e)} > From d44271ce45d53f37e7817b9a2dd7a4a71eb0d625 Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 3 Nov 2016 16:58:51 +0800 Subject: [PATCH 0596/2145] Fix badge initial position jump bug again, close #3709 --- components/badge/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/badge/index.tsx b/components/badge/index.tsx index c7097e4b7e..0ad8cb6cfe 100644 --- a/components/badge/index.tsx +++ b/components/badge/index.tsx @@ -89,7 +89,7 @@ export default class Badge extends React.Component { { From bd8482c893e08af866791ab40513c132d62405ca Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 3 Nov 2016 16:59:42 +0800 Subject: [PATCH 0597/2145] update doc --- CHANGELOG.en-US.md | 1 - CHANGELOG.zh-CN.md | 1 - components/badge/demo/change.md | 4 +--- 3 files changed, 1 insertion(+), 5 deletions(-) diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index cb32afe936..47921b77fe 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -33,7 +33,6 @@ If you want to read change logs before `2.0.0`, please visit [GitHub](https://gi * New icons `bulb` `select` `like-o` `dislike-o`. * Adjust existing icons `loading` `like` `dislike`. * Improve the TypeScript definition of Card & DatePicker & Icon & Table. [@infeng](https://github.com/infeng) [3468](https://github.com/ant-design/ant-design/pull/3468) [#3603](https://github.com/ant-design/ant-design/pull/3603) [#3531](https://github.com/ant-design/ant-design/pull/3531) - * Fix Cascader `defaultValue` should work. [#3470](https://github.com/ant-design/ant-design/issues/3470) * Fix the alignment of Button & Input & DatePicker & Select. [#3481](https://github.com/ant-design/ant-design/issues/3481) * DatePicker diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index 4fdb907e73..b014014113 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -33,7 +33,6 @@ timeline: true * 新增 `bulb` `select` `like-o` `dislike-o`。 * 调整 `loading` `like` `dislike`。 * 优化 Card DatePicker Icon Table 的 TypeScript 定义。[@infeng](https://github.com/infeng) [3468](https://github.com/ant-design/ant-design/pull/3468) [#3603](https://github.com/ant-design/ant-design/pull/3603) [#3531](https://github.com/ant-design/ant-design/pull/3531) - * 修复 Cascader `defaultValue` 失效的问题。[#3470](https://github.com/ant-design/ant-design/issues/3470) * 修复在一行内同时使用 Button Input DatePicker Select 时对齐的问题。[#3481](https://github.com/ant-design/ant-design/issues/3481) * DatePicker diff --git a/components/badge/demo/change.md b/components/badge/demo/change.md index 808d777bc2..e817b8cec0 100644 --- a/components/badge/demo/change.md +++ b/components/badge/demo/change.md @@ -67,7 +67,5 @@ const Test = React.createClass({ }, }); -ReactDOM.render( - -, mountNode); +ReactDOM.render(, mountNode); ```` From ef720db420c0b0f561f295a8ef8a2fbe4d4c82c8 Mon Sep 17 00:00:00 2001 From: RaoHai Date: Fri, 28 Oct 2016 14:02:55 +0800 Subject: [PATCH 0598/2145] anchor --- components/affix/demo/basic.md | 2 +- components/anchor/AnchorLink.tsx | 21 ++++ components/anchor/demo/basic.md | 27 ++++++ components/anchor/demo/independ.md | 24 +++++ components/anchor/index.en-US.md | 29 ++++++ components/anchor/index.tsx | 128 +++++++++++++++++++++++++ components/anchor/index.zh-CN.md | 31 ++++++ components/anchor/style/index.less | 5 + components/anchor/style/index.tsx | 2 + components/anchor/style/index.zh-CN.md | 31 ++++++ components/index.tsx | 4 +- 11 files changed, 302 insertions(+), 2 deletions(-) create mode 100644 components/anchor/AnchorLink.tsx create mode 100644 components/anchor/demo/basic.md create mode 100644 components/anchor/demo/independ.md create mode 100644 components/anchor/index.en-US.md create mode 100644 components/anchor/index.tsx create mode 100644 components/anchor/index.zh-CN.md create mode 100644 components/anchor/style/index.less create mode 100644 components/anchor/style/index.tsx create mode 100644 components/anchor/style/index.zh-CN.md diff --git a/components/affix/demo/basic.md b/components/affix/demo/basic.md index 59c8605560..fc47830b77 100644 --- a/components/affix/demo/basic.md +++ b/components/affix/demo/basic.md @@ -14,7 +14,7 @@ title: The simplest usage. ````jsx -import { Affix, Button } from 'antd'; +import { Anchor } from 'antd'; ReactDOM.render(
    diff --git a/components/anchor/AnchorLink.tsx b/components/anchor/AnchorLink.tsx new file mode 100644 index 0000000000..ee912467ad --- /dev/null +++ b/components/anchor/AnchorLink.tsx @@ -0,0 +1,21 @@ +import React from 'react'; + + +export interface AnchorLinkProps { + href: string; + onClick: (href: string) => {}; + active: boolean; +} + +export default class AnchorLink extends React.Component { + onClick = () => { + if (this.props.href) { + this.props.onClick(this.props.href); + } + } + render() { + return
    + {this.props.active ? 'active':null } {this.props.children} +
    ; + } +} \ No newline at end of file diff --git a/components/anchor/demo/basic.md b/components/anchor/demo/basic.md new file mode 100644 index 0000000000..8ead991dd9 --- /dev/null +++ b/components/anchor/demo/basic.md @@ -0,0 +1,27 @@ +--- +order: 0 +title: + zh-CN: 基本 + en-US: Basic +--- + +## zh-CN + +最简单的用法。 + +## en-US + +The simplest usage. + +```jsx + +const { Anchor } = antd; + +const { AnchorLink } = Anchor; + +ReactDOM.render( + + 锚点1 + +, mountNode); +``` \ No newline at end of file diff --git a/components/anchor/demo/independ.md b/components/anchor/demo/independ.md new file mode 100644 index 0000000000..fecdcf2d45 --- /dev/null +++ b/components/anchor/demo/independ.md @@ -0,0 +1,24 @@ +--- +order: 1 +title: + zh-CN: 独立使用 AnchorLink + en-US: Independent AnchorLink +--- + +## zh-CN + +独立使用 AnchorLink + +## en-US + +Independent AnchorLink + +```jsx + +const { Anchor } = antd; +const { AnchorLink } = Anchor; + +ReactDOM.render( + 锚点1 +, mountNode); +``` \ No newline at end of file diff --git a/components/anchor/index.en-US.md b/components/anchor/index.en-US.md new file mode 100644 index 0000000000..8e082887d9 --- /dev/null +++ b/components/anchor/index.en-US.md @@ -0,0 +1,29 @@ +--- +category: Components +type: Other +title: Anchor +--- + +Make an element sticky to viewport. + +## When To Use + +When user browses a long web page, some content need to sticky to viewport. It is common for menus and actions. + +Please note that Affix should not cover other content in page, especially when the size of viewport is small. + +## API + +| Property | Description | Type | Default | +|--------------|-----------------------|----------|--------------| +| offsetTop | Pixels to offset from top when calculating position of scroll | Number | 0 | +| offsetBottom | Pixels to offset from bottom when calculating position of scroll | Number | - | +| onChange | Callback when affix state is changed | Function(affixed) | - | + +**Note:** Children of `Affix` can not be `position: absolute`, but you can set `Affix` as `position: absolute`: + +```jsx + + ... + +``` diff --git a/components/anchor/index.tsx b/components/anchor/index.tsx new file mode 100644 index 0000000000..2efd17d26a --- /dev/null +++ b/components/anchor/index.tsx @@ -0,0 +1,128 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import addEventListener from 'rc-util/lib/Dom/addEventListener'; +import getScroll from '../_util/getScroll'; +import AnchorLink from './AnchorLink'; +import Affix from '../affix'; +import getRequestAnimationFrame from '../_util/getRequestAnimationFrame'; + +const reqAnimFrame = getRequestAnimationFrame(); + +const easeInOutCubic = (t, b, c, d) => { + t /= d/2; + if (t < 1) return c/2*t*t*t + b; + t -= 2; + return c/2*(t*t*t + 2) + b; +}; + +function getDefaultTarget() { + return typeof window !== 'undefined' ? + window : null; +} + +function getOffsetTop(element): number { + if (!element) { + return 0; + } + + if (!element.getClientRects().length) { + return 0; + } + + const rect = element.getBoundingClientRect(); + + if ( rect.width || rect.height ) { + const doc = element.ownerDocument; + const docElem = doc.documentElement; + return rect.top + window.pageYOffset - docElem.clientTop; + } + + return rect.top; +} + +export interface AnchorProps { + target: () => HTMLElement | Window; + children: React.ReactNode; +} + + +export default class Anchor extends React.Component { + static AnchorLink = AnchorLink; + + private scrollEvent: any; + private sections: Array = []; + + constructor(props) { + super(props); + this.state = { + activeAnchor: null, + }; + } + handleScroll = () => { + const { target = getDefaultTarget } = this.props; + const scrollTop = getScroll(target(), true); + let activeAnchor; + + this.sections.forEach(section => { + const target = document.querySelector(section); + if (target) { + const top = target.offsetTop; + const bottom = top + target.clientHeight; + if ((scrollTop >= top) && (scrollTop <= bottom)) { + activeAnchor = section; + } + } + }); + + if (activeAnchor) { + this.setState({ + activeAnchor, + }); + } + } + + componentDidMount() { + this.handleScroll(); + this.scrollEvent = addEventListener((this.props.target || getDefaultTarget)(), 'scroll', this.handleScroll); + } + + componentWillUnmount() { + if (this.scrollEvent) { + this.scrollEvent.remove(); + } + } + + scrollTo = (href) => { + const { target = getDefaultTarget } = this.props; + const scrollTop = getScroll(target(), true); + const offsetTop = getOffsetTop(document.querySelector(href)); + const startTime = Date.now(); + const frameFunc = () => { + const timestamp = Date.now(); + const time = timestamp - startTime; + document.body.scrollTop = easeInOutCubic(time, scrollTop, offsetTop, 450); + if (time < 450) { + reqAnimFrame(frameFunc); + } + }; + reqAnimFrame(frameFunc); + } + + renderAnchorLink = (child) => { + const { href } = child.props; + if (href) { + if (this.sections.indexOf(href) === -1) { + this.sections.push(href); + } + return React.cloneElement(child, { onClick: this.scrollTo, active: this.state.activeAnchor === href }); + } + return child; + } + + render() { + return +
    {React.Children.map(this.props.children, this.renderAnchorLink)}
    +     ; + } +} + diff --git a/components/anchor/index.zh-CN.md b/components/anchor/index.zh-CN.md new file mode 100644 index 0000000000..9912071da8 --- /dev/null +++ b/components/anchor/index.zh-CN.md @@ -0,0 +1,31 @@ +--- +category: Components +subtitle: 锚点 +type: Other +title: Anchor +--- + +将页面元素钉在可视范围。 + +## 何时使用 + +当内容区域比较长，需要滚动页面时，这部分内容对应的操作或者导航需要在滚动范围内始终展现。常用于侧边菜单和按钮组合。 + +页面可视范围过小时，慎用此功能以免遮挡页面内容。 + +## API + +| 成员 | 说明 | 类型 | 默认值 | +|-------------|----------------|--------------------|--------------| +| offsetTop | 距离窗口顶部达到指定偏移量后触发 | Number | | +| offsetBottom | 距离窗口底部达到指定偏移量后触发 | Number | | +| target | 设置 `Affix` 需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 | Function | () => window | +| onChange | 固定状态改变时触发的回调函数 | Function(affixed) | 无 | + +**注意：**`Affix` 内的元素不要使用绝对定位，如需要绝对定位的效果，可以直接设置 `Affix` 为绝对定位： + +```jsx + + ... + +``` diff --git a/components/anchor/style/index.less b/components/anchor/style/index.less new file mode 100644 index 0000000000..34b46f360b --- /dev/null +++ b/components/anchor/style/index.less @@ -0,0 +1,5 @@ +@import "../../style/themes/default"; + +.@{ant-prefix}-anchor { + color: red; +} diff --git a/components/anchor/style/index.tsx b/components/anchor/style/index.tsx new file mode 100644 index 0000000000..3a3ab0de59 --- /dev/null +++ b/components/anchor/style/index.tsx @@ -0,0 +1,2 @@ +import '../../style/index.less'; +import './index.less'; diff --git a/components/anchor/style/index.zh-CN.md b/components/anchor/style/index.zh-CN.md new file mode 100644 index 0000000000..531bed8ddd --- /dev/null +++ b/components/anchor/style/index.zh-CN.md @@ -0,0 +1,31 @@ +--- +category: Components +subtitle: 固钉 +type: Other +title: Affix +--- + +将页面元素钉在可视范围。 + +## 何时使用 + +当内容区域比较长，需要滚动页面时，这部分内容对应的操作或者导航需要在滚动范围内始终展现。常用于侧边菜单和按钮组合。 + +页面可视范围过小时，慎用此功能以免遮挡页面内容。 + +## API + +| 成员 | 说明 | 类型 | 默认值 | +|-------------|----------------|--------------------|--------------| +| offsetTop | 距离窗口顶部达到指定偏移量后触发 | Number | | +| offsetBottom | 距离窗口底部达到指定偏移量后触发 | Number | | +| target | 设置 `Affix` 需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 | Function | () => window | +| onChange | 固定状态改变时触发的回调函数 | Function(affixed) | 无 | + +**注意：**`Affix` 内的元素不要使用绝对定位，如需要绝对定位的效果，可以直接设置 `Affix` 为绝对定位： + +```jsx + + ... + +``` diff --git a/components/index.tsx b/components/index.tsx index 6dca06cac8..c537d6169c 100644 --- a/components/index.tsx +++ b/components/index.tsx @@ -9,6 +9,8 @@ please use https://www.npmjs.com/package/babel-plugin-import to reduce app bundl export { default as Affix } from './affix'; +export { default as Anchor } from './anchor'; + export { default as AutoComplete } from './auto-complete'; export { default as Alert } from './alert'; @@ -101,4 +103,4 @@ export { default as Tooltip } from './tooltip'; export { default as Mention } from './mention'; -export { default as Upload } from './upload'; +export { default as Upload } from './upload'; \ No newline at end of file From 616ecf19807fb1e0ad302ffd7d5c3e49a0146a88 Mon Sep 17 00:00:00 2001 From: RaoHai Date: Fri, 28 Oct 2016 16:53:59 +0800 Subject: [PATCH 0599/2145] waiting for sketch --- components/anchor/AnchorLink.tsx | 21 ++++++++++----------- components/anchor/demo/basic.md | 3 ++- components/anchor/index.en-US.md | 1 + components/anchor/index.tsx | 27 +++++++++++++++++---------- components/anchor/index.zh-CN.md | 1 + components/anchor/style/index.less | 13 +++++++++++-- 6 files changed, 42 insertions(+), 24 deletions(-) diff --git a/components/anchor/AnchorLink.tsx b/components/anchor/AnchorLink.tsx index ee912467ad..1411946fdb 100644 --- a/components/anchor/AnchorLink.tsx +++ b/components/anchor/AnchorLink.tsx @@ -1,5 +1,5 @@ import React from 'react'; - +import classnames from 'classnames'; export interface AnchorLinkProps { href: string; @@ -7,15 +7,14 @@ export interface AnchorLinkProps { active: boolean; } -export default class AnchorLink extends React.Component { - onClick = () => { - if (this.props.href) { - this.props.onClick(this.props.href); - } - } - render() { - return
    - {this.props.active ? 'active':null } {this.props.children} +export default function AnchorLink(props) { + const { prefixCls, active, href, children, onClick } = props; + const cls = classnames({ + [`${prefixCls}-link`]: true, + [`${prefixCls}-link-active`]: active, + }); + + return
    onClick(props.href)} > + {children}
    ; - } } \ No newline at end of file diff --git a/components/anchor/demo/basic.md b/components/anchor/demo/basic.md index 8ead991dd9..3ab4161e18 100644 --- a/components/anchor/demo/basic.md +++ b/components/anchor/demo/basic.md @@ -21,7 +21,8 @@ const { AnchorLink } = Anchor; ReactDOM.render( - 锚点1 + 基本 + 独立使用 , mountNode); ``` \ No newline at end of file diff --git a/components/anchor/index.en-US.md b/components/anchor/index.en-US.md index 8e082887d9..ebab6b49bb 100644 --- a/components/anchor/index.en-US.md +++ b/components/anchor/index.en-US.md @@ -1,6 +1,7 @@ --- category: Components type: Other +cols: 1 title: Anchor --- diff --git a/components/anchor/index.tsx b/components/anchor/index.tsx index 2efd17d26a..a9a2e6e09c 100644 --- a/components/anchor/index.tsx +++ b/components/anchor/index.tsx @@ -34,7 +34,7 @@ function getOffsetTop(element): number { if ( rect.width || rect.height ) { const doc = element.ownerDocument; const docElem = doc.documentElement; - return rect.top + window.pageYOffset - docElem.clientTop; + return rect.top - docElem.clientTop; } return rect.top; @@ -43,11 +43,15 @@ function getOffsetTop(element): number { export interface AnchorProps { target: () => HTMLElement | Window; children: React.ReactNode; + prefixCls?: string; } export default class Anchor extends React.Component { static AnchorLink = AnchorLink; + static defaultProps = { + prefixCls: 'ant-anchor' + }; private scrollEvent: any; private sections: Array = []; @@ -66,19 +70,17 @@ export default class Anchor extends React.Component { this.sections.forEach(section => { const target = document.querySelector(section); if (target) { - const top = target.offsetTop; + const top = getOffsetTop(target); const bottom = top + target.clientHeight; - if ((scrollTop >= top) && (scrollTop <= bottom)) { + if ((top <= 5) && (bottom >= -5)) { activeAnchor = section; } } }); - if (activeAnchor) { - this.setState({ - activeAnchor, - }); - } + this.setState({ + activeAnchor, + }); } componentDidMount() { @@ -114,14 +116,19 @@ export default class Anchor extends React.Component { if (this.sections.indexOf(href) === -1) { this.sections.push(href); } - return React.cloneElement(child, { onClick: this.scrollTo, active: this.state.activeAnchor === href }); + return React.cloneElement(child, { + onClick: this.scrollTo, + active: this.state.activeAnchor === href, + prefixCls: this.props.prefixCls, + }); } return child; } render() { + const { prefixCls } = this.props; return -
    {React.Children.map(this.props.children, this.renderAnchorLink)}
    +
    {React.Children.map(this.props.children, this.renderAnchorLink)}
    ; } } diff --git a/components/anchor/index.zh-CN.md b/components/anchor/index.zh-CN.md index 9912071da8..f104ab0faf 100644 --- a/components/anchor/index.zh-CN.md +++ b/components/anchor/index.zh-CN.md @@ -1,6 +1,7 @@ --- category: Components subtitle: 锚点 +cols: 1 type: Other title: Anchor --- diff --git a/components/anchor/style/index.less b/components/anchor/style/index.less index 34b46f360b..70139da8ff 100644 --- a/components/anchor/style/index.less +++ b/components/anchor/style/index.less @@ -1,5 +1,14 @@ @import "../../style/themes/default"; -.@{ant-prefix}-anchor { - color: red; +.@{ant-prefix}{ + &-anchor { + background-color: white; + padding: 6px; + &-link { + &:hover, &-active { + color: @primary-color; + } + } + } } + From 0a0e14d6101032cba4fd2bbc18971e50e804f57c Mon Sep 17 00:00:00 2001 From: RaoHai Date: Thu, 3 Nov 2016 16:45:13 +0800 Subject: [PATCH 0600/2145] Anchor Component + close #3557 --- components/affix/demo/basic.md | 2 +- components/anchor/AnchorLink.tsx | 74 ++++++++++++--- components/anchor/anchorHelper.ts | 98 ++++++++++++++++++++ components/anchor/demo/basic.md | 10 +- components/anchor/demo/independ.md | 9 +- components/anchor/demo/mix.md | 28 ++++++ components/anchor/index.en-US.md | 22 ++--- components/anchor/index.tsx | 132 +++++++++++---------------- components/anchor/index.zh-CN.md | 23 +++-- components/anchor/style/index.less | 59 ++++++++++-- components/index.tsx | 2 +- components/style/themes/default.less | 2 +- 12 files changed, 328 insertions(+), 133 deletions(-) create mode 100644 components/anchor/anchorHelper.ts create mode 100644 components/anchor/demo/mix.md diff --git a/components/affix/demo/basic.md b/components/affix/demo/basic.md index fc47830b77..59c8605560 100644 --- a/components/affix/demo/basic.md +++ b/components/affix/demo/basic.md @@ -14,7 +14,7 @@ title: The simplest usage. ````jsx -import { Anchor } from 'antd'; +import { Affix, Button } from 'antd'; ReactDOM.render(
    diff --git a/components/anchor/AnchorLink.tsx b/components/anchor/AnchorLink.tsx index 1411946fdb..575de0b5d9 100644 --- a/components/anchor/AnchorLink.tsx +++ b/components/anchor/AnchorLink.tsx @@ -1,20 +1,72 @@ import React from 'react'; import classnames from 'classnames'; +import AnchorHelper, { scrollTo } from './anchorHelper'; export interface AnchorLinkProps { href: string; - onClick: (href: string) => {}; - active: boolean; + onClick: (href: string) => void; + active?: boolean; + prefixCls?: string; + children?: any; + title?: Element; + bounds: number; + target?: () => HTMLElement | Window; } -export default function AnchorLink(props) { - const { prefixCls, active, href, children, onClick } = props; - const cls = classnames({ - [`${prefixCls}-link`]: true, - [`${prefixCls}-link-active`]: active, - }); +export default class AnchorLink extends React.Component { + static contextTypes = { + anchorHelper: React.PropTypes.any, + }; - return
    onClick(props.href)} > - {children} + static childContextTypes = { + anchorHelper: React.PropTypes.any, + }; + + static defaultProps = { + href: '#', + prefixCls: 'ant-anchor', + }; + + context: { + anchorHelper: AnchorHelper; + }; + + constructor(props, context) { + super(props, context); + } + + getChildContext() { + return { + anchorHelper: this.context.anchorHelper, + }; + } + renderAnchorLink = (child) => { + const { href } = child.props; + if (href) { + this.context.anchorHelper.addLink(href); + return React.cloneElement(child, { + onClick: this.context.anchorHelper.scrollTo, + prefixCls: this.props.prefixCls, + }); + } + return child; + } + render() { + const { prefixCls, href, children, onClick, title, bounds } = this.props; + const { anchorHelper } = this.context; + const active = anchorHelper && anchorHelper.getCurrentAnchor(bounds) === href; + const cls = classnames({ + [`${prefixCls}-link`]: true, + [`${prefixCls}-link-active`]: active, + }); + const scrollToFn = anchorHelper ? anchorHelper.scrollTo : scrollTo; + return
    + component && active && anchorHelper ? anchorHelper.setActiveAnchor(component) : null} + className={`${prefixCls}-link-title`} + onClick={() => onClick ? onClick(href) : scrollToFn(href)} + >{title} + {React.Children.map(children, this.renderAnchorLink)}
    ; -} \ No newline at end of file + } +} diff --git a/components/anchor/anchorHelper.ts b/components/anchor/anchorHelper.ts new file mode 100644 index 0000000000..0c54ccc7ed --- /dev/null +++ b/components/anchor/anchorHelper.ts @@ -0,0 +1,98 @@ +import getScroll from '../_util/getScroll'; +import getRequestAnimationFrame from '../_util/getRequestAnimationFrame'; + +export const reqAnimFrame = getRequestAnimationFrame(); + +export const easeInOutCubic = (t, b, c, d) => { + t /= d/2; + if (t < 1) return c/2*t*t*t + b; + t -= 2; + return c/2*(t*t*t + 2) + b; +}; + +export function getDefaultTarget() { + return typeof window !== 'undefined' ? + window : null; +} + +export function getOffsetTop(element): number { + if (!element) { + return 0; + } + + if (!element.getClientRects().length) { + return 0; + } + + const rect = element.getBoundingClientRect(); + + if ( rect.width || rect.height ) { + const doc = element.ownerDocument; + const docElem = doc.documentElement; + return rect.top - docElem.clientTop; + } + + return rect.top; +} + +export function scrollTo(href, target = getDefaultTarget){ + const scrollTop = getScroll(target(), true); + const offsetTop = getOffsetTop(document.querySelector(href)); + const startTime = Date.now(); + const frameFunc = () => { + const timestamp = Date.now(); + const time = timestamp - startTime; + document.body.scrollTop = easeInOutCubic(time, scrollTop, offsetTop, 450); + if (time < 450) { + reqAnimFrame(frameFunc); + } + }; + reqAnimFrame(frameFunc); + history.pushState(null, undefined, href); + } + +class AnchorHelper { + private links: Array; + private currentAnchor: HTMLElement | null; + + constructor() { + this.links = []; + this.currentAnchor = null; + } + + addLink(link) { + if (this.links.indexOf(link) === -1) { + this.links.push(link); + } + } + + getCurrentActiveAnchor(): HTMLElement | null { + return this.currentAnchor; + } + + setActiveAnchor(component) { + this.currentAnchor = component; + } + + getCurrentAnchor(bounds = 5) { + let activeAnchor = ''; + this.links.forEach(section => { + const target = document.querySelector(section); + if (target) { + const top = getOffsetTop(target); + const bottom = top + target.clientHeight; + if ((top <= bounds) && (bottom >= -bounds)) { + activeAnchor = section; + } + } + }); + return activeAnchor; + } + + scrollTo(href, target = getDefaultTarget){ + scrollTo(href, target); + } +} + +// const anchorHelper = new AnchorHelper(); +export default AnchorHelper; \ No newline at end of file diff --git a/components/anchor/demo/basic.md b/components/anchor/demo/basic.md index 3ab4161e18..da74d079d8 100644 --- a/components/anchor/demo/basic.md +++ b/components/anchor/demo/basic.md @@ -14,15 +14,13 @@ title: The simplest usage. ```jsx - -const { Anchor } = antd; - -const { AnchorLink } = Anchor; +import { Anchor } from 'antd'; +const { AnchorLink } = Anchor; ReactDOM.render( - 基本 - 独立使用 + + , mountNode); ``` \ No newline at end of file diff --git a/components/anchor/demo/independ.md b/components/anchor/demo/independ.md index fecdcf2d45..ca9a94c7a9 100644 --- a/components/anchor/demo/independ.md +++ b/components/anchor/demo/independ.md @@ -1,5 +1,5 @@ --- -order: 1 +order: 2 title: zh-CN: 独立使用 AnchorLink en-US: Independent AnchorLink @@ -14,11 +14,10 @@ title: Independent AnchorLink ```jsx - -const { Anchor } = antd; -const { AnchorLink } = Anchor; +import { Anchor } from 'antd'; +const { AnchorLink } = Anchor; ReactDOM.render( - 锚点1 + , mountNode); ``` \ No newline at end of file diff --git a/components/anchor/demo/mix.md b/components/anchor/demo/mix.md new file mode 100644 index 0000000000..d640fcd10e --- /dev/null +++ b/components/anchor/demo/mix.md @@ -0,0 +1,28 @@ +--- +order: 1 +title: + zh-CN: 嵌套的 AnchorLink + en-US: Mixed AnchorLink +--- + +## zh-CN + +最简单的用法。 + +## en-US + +The simplest usage. + +```jsx +import { Anchor } from 'antd'; +const { AnchorLink } = Anchor; + +ReactDOM.render( + + + + + + +, mountNode); +``` \ No newline at end of file diff --git a/components/anchor/index.en-US.md b/components/anchor/index.en-US.md index ebab6b49bb..d36c48aade 100644 --- a/components/anchor/index.en-US.md +++ b/components/anchor/index.en-US.md @@ -5,26 +5,26 @@ cols: 1 title: Anchor --- -Make an element sticky to viewport. +A hyperlink to a location on same page. ## When To Use -When user browses a long web page, some content need to sticky to viewport. It is common for menus and actions. - -Please note that Affix should not cover other content in page, especially when the size of viewport is small. +For displaying anchor hyperlink on page, and jump between then. ## API +### Anchor Props + | Property | Description | Type | Default | |--------------|-----------------------|----------|--------------| | offsetTop | Pixels to offset from top when calculating position of scroll | Number | 0 | | offsetBottom | Pixels to offset from bottom when calculating position of scroll | Number | - | -| onChange | Callback when affix state is changed | Function(affixed) | - | +| bounds | Bounding distance of anchor area | Number | 5(px) | -**Note:** Children of `Affix` can not be `position: absolute`, but you can set `Affix` as `position: absolute`: +### AnchorLink Props + +| Property | Description | Type | Default | +|-------------|----------------|--------------------|--------------| +| href | target of hyperlink | String | | +| title | content of hyperlink | String | | -```jsx - - ... - -``` diff --git a/components/anchor/index.tsx b/components/anchor/index.tsx index a9a2e6e09c..cb60ca11e3 100644 --- a/components/anchor/index.tsx +++ b/components/anchor/index.tsx @@ -1,90 +1,57 @@ import React from 'react'; -import ReactDOM from 'react-dom'; +import className from 'classnames'; import addEventListener from 'rc-util/lib/Dom/addEventListener'; -import getScroll from '../_util/getScroll'; import AnchorLink from './AnchorLink'; import Affix from '../affix'; -import getRequestAnimationFrame from '../_util/getRequestAnimationFrame'; - -const reqAnimFrame = getRequestAnimationFrame(); - -const easeInOutCubic = (t, b, c, d) => { - t /= d/2; - if (t < 1) return c/2*t*t*t + b; - t -= 2; - return c/2*(t*t*t + 2) + b; -}; - -function getDefaultTarget() { - return typeof window !== 'undefined' ? - window : null; -} - -function getOffsetTop(element): number { - if (!element) { - return 0; - } - - if (!element.getClientRects().length) { - return 0; - } - - const rect = element.getBoundingClientRect(); - - if ( rect.width || rect.height ) { - const doc = element.ownerDocument; - const docElem = doc.documentElement; - return rect.top - docElem.clientTop; - } - - return rect.top; -} +import AnchorHelper, { getDefaultTarget } from './anchorHelper'; export interface AnchorProps { target: () => HTMLElement | Window; children: React.ReactNode; prefixCls?: string; -} - + offsetTop?: number; + bounds?: number; +} export default class Anchor extends React.Component { static AnchorLink = AnchorLink; + static defaultProps = { - prefixCls: 'ant-anchor' + prefixCls: 'ant-anchor', + }; + + static childContextTypes = { + anchorHelper: React.PropTypes.any, + }; + + refs: { + ink?: any; }; private scrollEvent: any; - private sections: Array = []; + private anchorHelper: AnchorHelper; constructor(props) { super(props); this.state = { activeAnchor: null, }; + this.anchorHelper = new AnchorHelper(); } handleScroll = () => { - const { target = getDefaultTarget } = this.props; - const scrollTop = getScroll(target(), true); - let activeAnchor; - - this.sections.forEach(section => { - const target = document.querySelector(section); - if (target) { - const top = getOffsetTop(target); - const bottom = top + target.clientHeight; - if ((top <= 5) && (bottom >= -5)) { - activeAnchor = section; - } - } - }); - this.setState({ - activeAnchor, + activeAnchor: this.anchorHelper.getCurrentAnchor(this.props.bounds), }); } + getChildContext() { + return { + anchorHelper: this.anchorHelper, + }; + } componentDidMount() { this.handleScroll(); + this.updateInk(); this.scrollEvent = addEventListener((this.props.target || getDefaultTarget)(), 'scroll', this.handleScroll); } @@ -94,42 +61,47 @@ export default class Anchor extends React.Component { } } - scrollTo = (href) => { - const { target = getDefaultTarget } = this.props; - const scrollTop = getScroll(target(), true); - const offsetTop = getOffsetTop(document.querySelector(href)); - const startTime = Date.now(); - const frameFunc = () => { - const timestamp = Date.now(); - const time = timestamp - startTime; - document.body.scrollTop = easeInOutCubic(time, scrollTop, offsetTop, 450); - if (time < 450) { - reqAnimFrame(frameFunc); - } - }; - reqAnimFrame(frameFunc); + componentDidUpdate() { + this.updateInk(); + } + + updateInk = () => { + const activeAnchor = this.anchorHelper.getCurrentActiveAnchor(); + if (activeAnchor) { + this.refs.ink.style.top = `${activeAnchor.offsetTop + activeAnchor.clientHeight / 2 - 4.5}px`; + } } renderAnchorLink = (child) => { const { href } = child.props; if (href) { - if (this.sections.indexOf(href) === -1) { - this.sections.push(href); - } + this.anchorHelper.addLink(href); return React.cloneElement(child, { - onClick: this.scrollTo, - active: this.state.activeAnchor === href, + onClick: this.anchorHelper.scrollTo, prefixCls: this.props.prefixCls, + bounds: this.props.bounds, }); } return child; } render() { - const { prefixCls } = this.props; - return -
    {React.Children.map(this.props.children, this.renderAnchorLink)}
    + const { prefixCls, offsetTop } = this.props; + const { activeAnchor } = this.state; + const inkClass = className({ + [`${prefixCls}-ink-ball`]: true, + visible: !!activeAnchor, + }); + + return +
    +
    +
    + +
    + {React.Children.map(this.props.children, this.renderAnchorLink)} +
    +
    ; } } - diff --git a/components/anchor/index.zh-CN.md b/components/anchor/index.zh-CN.md index f104ab0faf..794070ec52 100644 --- a/components/anchor/index.zh-CN.md +++ b/components/anchor/index.zh-CN.md @@ -6,27 +6,30 @@ type: Other title: Anchor --- -将页面元素钉在可视范围。 +用于跳转到页面指定位置 ## 何时使用 -当内容区域比较长，需要滚动页面时，这部分内容对应的操作或者导航需要在滚动范围内始终展现。常用于侧边菜单和按钮组合。 - -页面可视范围过小时，慎用此功能以免遮挡页面内容。 +需要展现当前页面上可供跳转的锚点链接，以及快速在锚点之间跳转。 ## API +### Anchor Props + | 成员 | 说明 | 类型 | 默认值 | |-------------|----------------|--------------------|--------------| | offsetTop | 距离窗口顶部达到指定偏移量后触发 | Number | | | offsetBottom | 距离窗口底部达到指定偏移量后触发 | Number | | -| target | 设置 `Affix` 需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 | Function | () => window | -| onChange | 固定状态改变时触发的回调函数 | Function(affixed) | 无 | +| bounds | 锚点区域边界 | Number | 5(px) | +### AnchorLink Props -**注意：**`Affix` 内的元素不要使用绝对定位，如需要绝对定位的效果，可以直接设置 `Affix` 为绝对定位： +| 成员 | 说明 | 类型 | 默认值 | +|-------------|----------------|--------------------|--------------| +| href | 锚点链接 | String | | +| title | 文字内容 | String | | ```jsx - - ... - + + + ``` diff --git a/components/anchor/style/index.less b/components/anchor/style/index.less index 70139da8ff..cf1fc1229c 100644 --- a/components/anchor/style/index.less +++ b/components/anchor/style/index.less @@ -1,14 +1,59 @@ @import "../../style/themes/default"; -.@{ant-prefix}{ +.@{ant-prefix} { &-anchor { - background-color: white; - padding: 6px; - &-link { - &:hover, &-active { - color: @primary-color; + position: relative; + &-wrapper { + padding: 6px; + background-color: white; + } + } + &-anchor-ink { + position: absolute; + width: 9px; + height: 100%; + left: 0; + top: 0; + &:before { + content: ' '; + position: relative; + width: 2px; + height: 100%; + display: block; + background-color: #ccc; + margin: 0 auto; + } + &-ball { + display: none; + position: absolute; + width: 9px; + height: 9px; + border-radius: 9px; + border: 3px solid @primary-color; + background-color: white; + transition: top .3s ease-in-out; + + &.visible { + display: inline-block; } } } -} + &-anchor-link { + padding-left: 16px; + &-title { + display: inline-block; + position: relative; + } + + &-active > &-title, + &-title:hover { + cursor: pointer; + color: @primary-color; + } + + & > & { + font-size: 12px; + } + } +} diff --git a/components/index.tsx b/components/index.tsx index c537d6169c..6371c3655f 100644 --- a/components/index.tsx +++ b/components/index.tsx @@ -103,4 +103,4 @@ export { default as Tooltip } from './tooltip'; export { default as Mention } from './mention'; -export { default as Upload } from './upload'; \ No newline at end of file +export { default as Upload } from './upload'; diff --git a/components/style/themes/default.less b/components/style/themes/default.less index 268dd4fc54..4452eef3ae 100644 --- a/components/style/themes/default.less +++ b/components/style/themes/default.less @@ -132,7 +132,7 @@ @container-lg : (1140px + @grid-gutter-width); // z-index list -@zindex-affix : 10; +@zindex-affix : 11; @zindex-back-top : 10; @zindex-modal-mask : 1000; @zindex-modal : 1000; From b6f9ac40581f5c21405c52759cb0cb1881dce9b4 Mon Sep 17 00:00:00 2001 From: RaoHai Date: Thu, 3 Nov 2016 19:28:28 +0800 Subject: [PATCH 0601/2145] test fix --- .../{anchorHelper.ts => anchorHelper.tsx} | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) rename components/anchor/{anchorHelper.ts => anchorHelper.tsx} (87%) diff --git a/components/anchor/anchorHelper.ts b/components/anchor/anchorHelper.tsx similarity index 87% rename from components/anchor/anchorHelper.ts rename to components/anchor/anchorHelper.tsx index 0c54ccc7ed..f80240e41f 100644 --- a/components/anchor/anchorHelper.ts +++ b/components/anchor/anchorHelper.tsx @@ -4,10 +4,12 @@ import getRequestAnimationFrame from '../_util/getRequestAnimationFrame'; export const reqAnimFrame = getRequestAnimationFrame(); export const easeInOutCubic = (t, b, c, d) => { - t /= d/2; - if (t < 1) return c/2*t*t*t + b; - t -= 2; - return c/2*(t*t*t + 2) + b; + const cc = c - b; + t /= d / 2; + if (t < 1) { + return cc / 2 * t * t * t + b; + } + return cc / 2 * ((t -= 2) * t * t + 2) + b; }; export function getDefaultTarget() { @@ -35,7 +37,7 @@ export function getOffsetTop(element): number { return rect.top; } -export function scrollTo(href, target = getDefaultTarget){ +export function scrollTo(href, target = getDefaultTarget) { const scrollTop = getScroll(target(), true); const offsetTop = getOffsetTop(document.querySelector(href)); const startTime = Date.now(); @@ -68,7 +70,7 @@ class AnchorHelper { getCurrentActiveAnchor(): HTMLElement | null { return this.currentAnchor; - } + } setActiveAnchor(component) { this.currentAnchor = component; @@ -89,10 +91,9 @@ class AnchorHelper { return activeAnchor; } - scrollTo(href, target = getDefaultTarget){ + scrollTo(href, target = getDefaultTarget) { scrollTo(href, target); } } -// const anchorHelper = new AnchorHelper(); -export default AnchorHelper; \ No newline at end of file +export default AnchorHelper; From ad88118373957c4322a44c61dd719ae41469eeb3 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Fri, 4 Nov 2016 09:38:57 +0800 Subject: [PATCH 0602/2145] feat: support Radio.Group[children] = undefined | null, ref: #3721 --- components/radio/group.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/radio/group.tsx b/components/radio/group.tsx index 1ef5bbe33c..d5d784a870 100644 --- a/components/radio/group.tsx +++ b/components/radio/group.tsx @@ -82,7 +82,7 @@ export default class RadioGroup extends React.Component { } render() { const props = this.props; - const children = React.Children.map((props.children || {}), (radio: any) => { + const children = !props.children ? [] : React.Children.map(props.children, (radio: any) => { if (radio && (radio.type === Radio || radio.type === RadioButton) && radio.props) { const keyProps = {}; if (!('key' in radio) && typeof radio.props.value === 'string') { From 7f974877bc9c2b6817b38fc25723796805e0665c Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 4 Nov 2016 11:55:20 +0800 Subject: [PATCH 0603/2145] update Tree document (#3730) --- components/tree/index.en-US.md | 4 ++-- components/tree/index.zh-CN.md | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/components/tree/index.en-US.md b/components/tree/index.en-US.md index 3043a489fc..8c7d672ce0 100644 --- a/components/tree/index.en-US.md +++ b/components/tree/index.en-US.md @@ -14,8 +14,8 @@ Directory, organization, biological classification, country, and etc. Almost thi | Property | Description | Type | Default | |----------------|--------------------------------------------------|------------|---------| -|multiple | Whether allow to multiple select treeNode | bool | false | -|checkable | Whether support checkable treeNode | bool | false | +|multiple | Whether allow to select multiple treeNodes | bool | false | +|checkable | Whether support add Checkbox before treeNode | bool | false | |defaultExpandAll | Whether default to expand all treeNodes | bool | false | |defaultExpandedKeys | Specify keys of default expanded treeNodes | String[] | [] | |expandedKeys |(controlled) Specifies keys of expanded treeNodes | String[] | [] | diff --git a/components/tree/index.zh-CN.md b/components/tree/index.zh-CN.md index 5dab0d667e..0d18992bd6 100644 --- a/components/tree/index.zh-CN.md +++ b/components/tree/index.zh-CN.md @@ -15,8 +15,8 @@ subtitle: 树形控件 | 参数 | 说明 | 类型 | 默认值 | |-----------|------------------------------------------|------------|--------| -|multiple | 是否支持多选 | bool | false | -|checkable | 是否支持选中 | bool | false | +|multiple | 支持点选多个节点（节点本身） | bool | false | +|checkable | 节点前添加 Checkbox 复选框 | bool | false | |defaultExpandAll | 默认展开所有树节点 | bool | false | |defaultExpandedKeys | 默认展开指定的树节点 | String[] | [] | |expandedKeys | （受控）展开指定的树节点 | String[] | [] | From 33a30ae927a0cac124be977c8ca2b85349742a26 Mon Sep 17 00:00:00 2001 From: jiang <155259966@qq.com> Date: Fri, 4 Nov 2016 13:50:32 +0800 Subject: [PATCH 0604/2145] update spin animation style (#3722) * update spin animation style * update spin animation * update code --- components/spin/index.tsx | 29 +++++++---- components/spin/style/index.less | 82 +++++++++++++++++++++----------- 2 files changed, 75 insertions(+), 36 deletions(-) diff --git a/components/spin/index.tsx b/components/spin/index.tsx index 6c6d0b8c13..b2ebb4b60b 100644 --- a/components/spin/index.tsx +++ b/components/spin/index.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { PropTypes } from 'react'; import { findDOMNode } from 'react-dom'; import classNames from 'classnames'; +import Animate from 'rc-animate'; import isCssAnimationSupported from '../_util/isCssAnimationSupported'; import splitObject from '../_util/splitObject'; import omit from 'omit.js'; @@ -67,7 +68,6 @@ export default class Spin extends React.Component { this.setState({ spinning }); } } - render() { const [{ className, size, prefixCls, tip, @@ -90,20 +90,33 @@ export default class Spin extends React.Component { ]); const spinElement = ( -
    - +
    + + + + + + {tip ?
    {tip}
    : null}
    ); - if (this.isNestedPattern()) { + const containerClassName = classNames({ + [`${prefixCls}-container`]: true, + [`${prefixCls}-filter`]: spinning, + }); return ( -
    - {spinElement} -
    + + {spinning &&
    {spinElement}
    } +
    {this.props.children}
    -
    + ); } return spinElement; diff --git a/components/spin/style/index.less b/components/spin/style/index.less index 5a56023e08..790718be05 100644 --- a/components/spin/style/index.less +++ b/components/spin/style/index.less @@ -3,9 +3,9 @@ @spin-prefix-cls: ~"@{ant-prefix}-spin"; @spin-dot-default: #999; -@spin-dot-size-sm: 12px; +@spin-dot-size-sm: 14px; @spin-dot-size: 20px; -@spin-dot-size-lg: 32px; +@spin-dot-size-lg: 30px; .@{spin-prefix-cls} { color: @primary-color; @@ -71,17 +71,16 @@ padding-top: (@spin-dot-size-lg - @font-size-base) / 2; } } - &-container { - transition: all 0.3s @ease-in-out-circ; + transition: all 0.3s @ease-in-out; + position: relative; } - &-nested-loading > &-container { + &-filter { opacity: 0.7; -webkit-filter: blur(1px); filter: blur(1px); filter: ~"progid\:DXImageTransform\.Microsoft\.Blur(PixelRadius\=1, MakeShadow\=false)"; /* IE6~IE9 */ - position: relative; &:after { content: ''; position: absolute; @@ -106,22 +105,38 @@ position: relative; display: block; .square(@spin-dot-size); - &:before, - &:after { - content: ''; + transform: rotate(45deg); + animation: antRotate 3.2s infinite linear; + i { + width: 8px; + height: 8px; border-radius: 50%; background-color: @primary-color; - animation: antSpinBounce 2.2s infinite ease-in-out; + transform: scale(0.6); display: block; position: absolute; - opacity: 0.5; - top: 0; - left: 0; - bottom: 0; - right: 0; - } - &:after { - animation-delay: -1.1s; + opacity: 0.3; + animation: antSpinMove .8s infinite linear alternate; + transform-origin: 0 0; + &:nth-child(1) { + left: 0; + top: 0; + } + &:nth-child(2) { + right: 0; + top: 0; + animation-delay: 0.4s; + } + &:nth-child(3) { + right: 0; + bottom: 0; + animation-delay: 0.8s; + } + &:nth-child(4) { + left: 0; + bottom: 0; + animation-delay: 1.2s; + } } } @@ -130,11 +145,19 @@ // small &-sm &-dot { .square(@spin-dot-size-sm); + i { + width: 6px; + height: 6px; + } } // large &-lg &-dot { .square(@spin-dot-size-lg); + i { + width: 12px; + height: 12px; + } } &&-show-text &-text { @@ -142,16 +165,6 @@ } } -@keyframes antSpinBounce { - 0%, - 100% { - transform: scale(0); - } - 50% { - transform: scale(1); - } -} - @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { /* IE10+ */ .@{ant-prefix}-spin-nested-loading > .@{ant-prefix}-spin-container { @@ -159,3 +172,16 @@ opacity: 0.5; } } + +@keyframes antSpinMove { + to { + transform: scale(1); + opacity: 1; + } +} + +@keyframes antRotate { + to { + transform: rotate(405deg); + } +} From 894a4ceb5373b46fc6eb04915efc2d7ba7111e79 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 4 Nov 2016 13:52:30 +0800 Subject: [PATCH 0605/2145] remove unnecessary demo (#3690) --- components/table/demo/loading.md | 68 -------------------------------- 1 file changed, 68 deletions(-) delete mode 100644 components/table/demo/loading.md diff --git a/components/table/demo/loading.md b/components/table/demo/loading.md deleted file mode 100644 index 2076001a55..0000000000 --- a/components/table/demo/loading.md +++ /dev/null @@ -1,68 +0,0 @@ ---- -order: 14 -title: - en-US: Loading - zh-CN: 加载中的表格 ---- - -## zh-CN - -用属性 `loading` 控制表格加载中状态。 - -## en-US - -Controll loading states by `loading` property. - -````jsx -import { Table, Button } from 'antd'; - -const columns = [{ - title: 'Name', - dataIndex: 'name', -}, { - title: 'Age', - dataIndex: 'age', -}, { - title: 'Address', - dataIndex: 'address', -}]; -const data = [{ - key: '1', - name: 'John Brown', - age: 32, - address: 'New York No. 1 Lake Park', -}, { - key: '2', - name: 'Jim Green', - age: 42, - address: 'London No. 1 Lake Park', -}, { - key: '3', - name: 'Joe Black', - age: 32, - address: 'Sidney No. 1 Lake Park', -}]; - -const App = React.createClass({ - getInitialState() { - return { - loading: false, - }; - }, - toggleLoading() { - this.setState({ - loading: !this.state.loading, - }); - }, - render() { - return ( -
    -
    - - - ); - }, -}); - -ReactDOM.render(, mountNode); -```` From 6a1b1476be7c17cf67e8a164c0b810aadd293c05 Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 3 Nov 2016 15:33:58 +0800 Subject: [PATCH 0606/2145] improve transfer style --- components/transfer/style/index.less | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/components/transfer/style/index.less b/components/transfer/style/index.less index 0d85178d10..f56cf56937 100644 --- a/components/transfer/style/index.less +++ b/components/transfer/style/index.less @@ -47,7 +47,7 @@ } &-header { - padding: 7px 16px; + padding: 7px 15px; border-radius: @border-radius-base @border-radius-base 0 0; background: #fff; color: #666; @@ -59,7 +59,8 @@ width: 100%; &-title { - float: right; + position: absolute; + right: 15px; } } @@ -96,7 +97,7 @@ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; - padding: 7px 16px; + padding: 7px 15px; transition: all 0.3s ease; } From 7373ce07582b5f853fbd392076fa2fbd34e7aa16 Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 3 Nov 2016 16:05:59 +0800 Subject: [PATCH 0607/2145] Add react-lazy-load for Transfer perfermance, close #2860 --- components/transfer/demo/large-data.md | 64 ++++++++++++++++++++++++++ components/transfer/index.en-US.md | 5 +- components/transfer/index.tsx | 15 ++++-- components/transfer/index.zh-CN.md | 3 +- components/transfer/list.tsx | 28 +++++++---- components/transfer/style/index.less | 1 + package.json | 1 + typings/custom-typings.d.ts | 2 + 8 files changed, 100 insertions(+), 19 deletions(-) create mode 100644 components/transfer/demo/large-data.md diff --git a/components/transfer/demo/large-data.md b/components/transfer/demo/large-data.md new file mode 100644 index 0000000000..090eba2266 --- /dev/null +++ b/components/transfer/demo/large-data.md @@ -0,0 +1,64 @@ +--- +order: 4 +debug: true +title: + zh-CN: 大数据性能测试 + en-US: Performance Test +--- + +## zh-CN + +2000 条数据。 + +## en-US + +2000 items. + +````jsx +import { Transfer } from 'antd'; + +const App = React.createClass({ + getInitialState() { + return { + mockData: [], + targetKeys: [], + }; + }, + componentDidMount() { + this.getMock(); + }, + getMock() { + const targetKeys = []; + const mockData = []; + for (let i = 0; i < 2000; i++) { + const data = { + key: i.toString(), + title: `content${i + 1}`, + description: `description of content${i + 1}`, + chosen: Math.random() * 2 > 1, + }; + if (data.chosen) { + targetKeys.push(data.key); + } + mockData.push(data); + } + this.setState({ mockData, targetKeys }); + }, + handleChange(targetKeys, direction, moveKeys) { + console.log(targetKeys, direction, moveKeys); + this.setState({ targetKeys }); + }, + render() { + return ( + item.title} + /> + ); + }, +}); + +ReactDOM.render(, mountNode); +```` diff --git a/components/transfer/index.en-US.md b/components/transfer/index.en-US.md index 325f2294f8..f42d6f9b87 100644 --- a/components/transfer/index.en-US.md +++ b/components/transfer/index.en-US.md @@ -15,7 +15,6 @@ To transfer the elements between two columns in an intuitive and efficient way. ## API - | Property | Description | Type | Default | |-----------|------------------------------------------|------------|--------| | dataSource | Used for setting the source data. The elements that are part of this array will be present the left column. Except the elements whose keys are included in `targetKeys` prop. | Array | [] | @@ -31,11 +30,11 @@ To transfer the elements between two columns in an intuitive and efficient way. | searchPlaceholder | The hint text of the search box. | String | 'Search here' | | notFoundContent | Text to display when a column is empty. | React.node | 'The list is empty' | | footer | A function used for rendering the footer. | Function(props) | | - +| lazy | property of [react-lazy-load](https://github.com/loktar00/react-lazy-load) for lazy rendering items | Object | `{ height: 32, offset: 32 }` | ## Warning -According the [standard](http://facebook.github.io/react/docs/multiple-components.html#dynamic-children) of React, the key should always be supplied directly to the elements in the array. In Transfer, the keys should be set on the elements included in `dataSource` array. By default, `key` property is used as an unique identifier. +According the [standard](http://facebook.github.io/react/docs/multiple-components.html#dynamic-children) of React, the key should always be supplied directly to the elements in the array. In Transfer, the keys should be set on the elements included in `dataSource` array. By default, `key` property is used as an unique identifier. If there's no `key` in your data, you should use `rowKey` to specify the key that will be used for uniquely identify each element. ```jsx diff --git a/components/transfer/index.tsx b/components/transfer/index.tsx index 8d238d9416..051f974822 100644 --- a/components/transfer/index.tsx +++ b/components/transfer/index.tsx @@ -35,6 +35,7 @@ export interface TransferProps { filterOption: (inputValue: any, item: any) => boolean; body?: (props: any) => any; rowKey?: (record: any) => string; + lazy?: {}; } export interface TransferContext { @@ -73,6 +74,7 @@ export default class Transfer extends React.Component { body: PropTypes.func, footer: PropTypes.func, rowKey: PropTypes.func, + lazy: PropTypes.object, }; static contextTypes = { @@ -255,7 +257,7 @@ export default class Transfer extends React.Component { const { prefixCls = 'ant-transfer', operations = [], showSearch, notFoundContent, searchPlaceholder, body, footer, listStyle, className = '', - filterOption, render, + filterOption, render, lazy, } = this.props; const { leftFilter, rightFilter, leftCheckedKeys, rightCheckedKeys } = this.state; @@ -271,7 +273,8 @@ export default class Transfer extends React.Component { const titles = this.getTitles(); return (
    - { body={body} footer={footer} prefixCls={`${prefixCls}-list`} + lazy={lazy} /> - { moveToLeft={this.moveToLeft} className={`${prefixCls}-operation`} /> - { body={body} footer={footer} prefixCls={`${prefixCls}-list`} + lazy={lazy} />
    ); diff --git a/components/transfer/index.zh-CN.md b/components/transfer/index.zh-CN.md index 026906dd9e..3880736a9b 100644 --- a/components/transfer/index.zh-CN.md +++ b/components/transfer/index.zh-CN.md @@ -16,7 +16,6 @@ title: Transfer ## API - | 参数 | 说明 | 类型 | 默认值 | |-----------|------------------------------------------|------------|--------| | dataSource | 数据源，其中的数据将会被渲染到左边一栏中，`targetKeys` 中指定的除外。 | Array | [] | @@ -33,7 +32,7 @@ title: Transfer | searchPlaceholder | 搜索框的默认值 | String | '请输入搜索内容' | | notFoundContent | 当列表为空时显示的内容 | React.node | '列表为空' | | footer | 底部渲染函数 | Function(props) | | - +| lazy | Transfer 使用了 [react-lazy-load](https://github.com/loktar00/react-lazy-load) 优化性能，这里可以设置相关参数 | Object | `{ height: 32, offset: 32 }` | ## 注意 diff --git a/components/transfer/list.tsx b/components/transfer/list.tsx index e9e1924543..39e97921c5 100644 --- a/components/transfer/list.tsx +++ b/components/transfer/list.tsx @@ -5,6 +5,7 @@ import classNames from 'classnames'; import Animate from 'rc-animate'; import PureRenderMixin from 'rc-util/lib/PureRenderMixin'; import assign from 'object-assign'; +import Lazyload from 'react-lazy-load'; import { TransferItem } from './index'; function noop() { @@ -35,6 +36,7 @@ export interface TransferListProps { position?: string; notFoundContent?: React.ReactNode | string; filterOption: (filterText: any, item: any) => boolean; + lazy?: {}; } export interface TransferListContext { @@ -135,7 +137,7 @@ export default class TransferList extends React.Component this.handleSelect(item)} - > - key === item.key)} disabled={item.disabled} /> - {renderedEl} - + +
  • this.handleSelect(item)} + > + key === item.key)} disabled={item.disabled} /> + {renderedEl} +
    • +     ); }); diff --git a/components/transfer/style/index.less b/components/transfer/style/index.less index f56cf56937..c1d20d8cf4 100644 --- a/components/transfer/style/index.less +++ b/components/transfer/style/index.less @@ -98,6 +98,7 @@ white-space: nowrap; text-overflow: ellipsis; padding: 7px 15px; + min-height: 32px; transition: all 0.3s ease; } diff --git a/package.json b/package.json index 1c4dc7a82f..fb5d72d107 100644 --- a/package.json +++ b/package.json @@ -71,6 +71,7 @@ "rc-tree-select": "~1.8.0", "rc-upload": "~2.2.0", "rc-util": "^4.0.1", + "react-lazy-load": "^3.0.10", "react-slick": "~0.14.2", "shallowequal": "^0.2.2", "warning": "~3.0.0" diff --git a/typings/custom-typings.d.ts b/typings/custom-typings.d.ts index e0b46ce082..0a1a968908 100644 --- a/typings/custom-typings.d.ts +++ b/typings/custom-typings.d.ts @@ -76,6 +76,8 @@ declare module 'rc-collapse'; declare module 'rc-form*'; +declare module 'react-lazy-load'; + declare var process: { env: { NODE_ENV: string From e253cce9931d4b38b70be14eac49413b97b1f295 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 4 Nov 2016 15:16:16 +0800 Subject: [PATCH 0608/2145] change react-lazy-load default props --- components/transfer/index.zh-CN.md | 1 + components/transfer/list.tsx | 4 +++- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/components/transfer/index.zh-CN.md b/components/transfer/index.zh-CN.md index 3880736a9b..14fae9d0c5 100644 --- a/components/transfer/index.zh-CN.md +++ b/components/transfer/index.zh-CN.md @@ -39,6 +39,7 @@ title: Transfer 按照 React 的[规范](http://facebook.github.io/react/docs/multiple-components.html#dynamic-children)，所有的组件数组必须绑定 key。在 Transfer 中，`dataSource`里的数据值需要指定 `key` 值。对于 `dataSource` 默认将每列数据的 `key` 属性作为唯一的标识。 如果你的数据没有这个属性，务必使用 `rowKey` 来指定数据列的主键。 + ```jsx // 比如你的数据主键是 uid return record.uid} />; diff --git a/components/transfer/list.tsx b/components/transfer/list.tsx index 39e97921c5..aa92930e2c 100644 --- a/components/transfer/list.tsx +++ b/components/transfer/list.tsx @@ -181,7 +181,9 @@ export default class TransferList extends React.Component From afb49f95d057be69548bd998e95d3971bd0c56d8 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 4 Nov 2016 16:52:57 +0800 Subject: [PATCH 0609/2145] separate item component --- components/transfer/item.tsx | 66 ++++++++++++++++++++++++++++++++++ components/transfer/list.tsx | 69 ++++++++---------------------------- 2 files changed, 80 insertions(+), 55 deletions(-) create mode 100644 components/transfer/item.tsx diff --git a/components/transfer/item.tsx b/components/transfer/item.tsx new file mode 100644 index 0000000000..34426ef28a --- /dev/null +++ b/components/transfer/item.tsx @@ -0,0 +1,66 @@ +import React from 'react'; +import classNames from 'classnames'; +import PureRenderMixin from 'rc-util/lib/PureRenderMixin'; +import assign from 'object-assign'; +import Lazyload from 'react-lazy-load'; +import Checkbox from '../checkbox'; + +function isRenderResultPlainObject(result) { + return result && !React.isValidElement(result) && + Object.prototype.toString.call(result) === '[object Object]'; +} + +export default class Item extends React.Component { + shouldComponentUpdate(...args) { + return PureRenderMixin.shouldComponentUpdate.apply(this, args); + } + matchFilter = (text) => { + const { filter, filterOption, item } = this.props; + if (filterOption) { + return filterOption(filter, item); + } + return text.indexOf(filter) >= 0; + } + render() { + const { render, filter, item, lazy, checked, prefixCls, onClick } = this.props; + const renderResult = render(item); + let renderedText; + let renderedEl; + if (isRenderResultPlainObject(renderResult)) { + renderedText = renderResult.value; + renderedEl = renderResult.label; + } else { + renderedText = renderResult; + renderedEl = renderResult; + } + + if (filter && filter.trim() && !this.matchFilter(renderedText)) { + return null; + } + + const className = classNames({ + [`${prefixCls}-content-item`]: true, + [`${prefixCls}-content-item-disabled`]: item.disabled, + }); + + const lazyProps = assign({ + height: 32, + offset: 500, + throttle: 0, + debounce: false, + }, lazy); + + return ( + +
  • onClick(item)} + > + + {renderedEl} +
    • +     + ); + } +} diff --git a/components/transfer/list.tsx b/components/transfer/list.tsx index aa92930e2c..ef02077c97 100644 --- a/components/transfer/list.tsx +++ b/components/transfer/list.tsx @@ -1,21 +1,15 @@ import React from 'react'; -import Checkbox from '../checkbox'; import Search from './search'; import classNames from 'classnames'; import Animate from 'rc-animate'; import PureRenderMixin from 'rc-util/lib/PureRenderMixin'; import assign from 'object-assign'; -import Lazyload from 'react-lazy-load'; import { TransferItem } from './index'; +import Item from './item'; function noop() { } -export function isRenderResultPlainObject(result) { - return result && !React.isValidElement(result) && - Object.prototype.toString.call(result) === '[object Object]'; -} - export interface TransferListProps { prefixCls: string; dataSource: TransferItem[]; @@ -128,16 +122,8 @@ export default class TransferList extends React.Component= 0; - } - render() { - const { prefixCls, dataSource, titleText, filter, checkedKeys, lazy, + const { prefixCls, dataSource, titleText, filter, checkedKeys, lazy, filterOption, body = noop, footer = noop, showSearch, render = noop, style } = this.props; let { searchPlaceholder, notFoundContent } = this.props; @@ -154,49 +140,22 @@ export default class TransferList extends React.Component { - const renderResult = render(item); - - if (isRenderResultPlainObject(renderResult)) { - return { - item: item, - renderedText: renderResult.value, - renderedEl: renderResult.label, - }; - } - return { - item: item, - renderedText: renderResult, - renderedEl: renderResult, - }; - }).filter(({ item, renderedText }) => { - return !(filter && filter.trim() && !this.matchFilter(filter, item, renderedText)); - }).map(({ item, renderedText, renderedEl }) => { if (!item.disabled) { filteredDataSource.push(item); } - - const className = classNames({ - [`${prefixCls}-content-item`]: true, - [`${prefixCls}-content-item-disabled`]: item.disabled, - }); - const lazyProps = assign({ - height: 32, - offset: 500, - throttle: 0, - debounce: false, - }, lazy); + const checked = checkedKeys.indexOf(item.key) >= 0; return ( - -
  • this.handleSelect(item)} - > - key === item.key)} disabled={item.disabled} /> - {renderedEl} -
    • -     + ); }); From 954c3a13f1b0be00497408ee3d5ef4a803136cc7 Mon Sep 17 00:00:00 2001 From: RaoHai Date: Sat, 5 Nov 2016 09:24:36 +0800 Subject: [PATCH 0610/2145] remove useless files and sentences --- components/anchor/index.zh-CN.md | 5 ----- components/anchor/style/index.zh-CN.md | 31 -------------------------- 2 files changed, 36 deletions(-) delete mode 100644 components/anchor/style/index.zh-CN.md diff --git a/components/anchor/index.zh-CN.md b/components/anchor/index.zh-CN.md index 794070ec52..93d47aba9d 100644 --- a/components/anchor/index.zh-CN.md +++ b/components/anchor/index.zh-CN.md @@ -28,8 +28,3 @@ title: Anchor | href | 锚点链接 | String | | | title | 文字内容 | String | | -```jsx - - - -``` diff --git a/components/anchor/style/index.zh-CN.md b/components/anchor/style/index.zh-CN.md deleted file mode 100644 index 531bed8ddd..0000000000 --- a/components/anchor/style/index.zh-CN.md +++ /dev/null @@ -1,31 +0,0 @@ ---- -category: Components -subtitle: 固钉 -type: Other -title: Affix ---- - -将页面元素钉在可视范围。 - -## 何时使用 - -当内容区域比较长，需要滚动页面时，这部分内容对应的操作或者导航需要在滚动范围内始终展现。常用于侧边菜单和按钮组合。 - -页面可视范围过小时，慎用此功能以免遮挡页面内容。 - -## API - -| 成员 | 说明 | 类型 | 默认值 | -|-------------|----------------|--------------------|--------------| -| offsetTop | 距离窗口顶部达到指定偏移量后触发 | Number | | -| offsetBottom | 距离窗口底部达到指定偏移量后触发 | Number | | -| target | 设置 `Affix` 需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 | Function | () => window | -| onChange | 固定状态改变时触发的回调函数 | Function(affixed) | 无 | - -**注意：**`Affix` 内的元素不要使用绝对定位，如需要绝对定位的效果，可以直接设置 `Affix` 为绝对定位： - -```jsx - - ... - -``` From 5cebea6b47316f34a04ff5ff5c35fafee12df09c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=90=95=E7=AB=8B=E9=9D=92?= Date: Sat, 5 Nov 2016 15:31:43 +0800 Subject: [PATCH 0611/2145] Update practical-projects.zh-CN.md Just fixed small typo. --- docs/react/practical-projects.zh-CN.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/react/practical-projects.zh-CN.md b/docs/react/practical-projects.zh-CN.md index de09cdbb31..2f05dea155 100644 --- a/docs/react/practical-projects.zh-CN.md +++ b/docs/react/practical-projects.zh-CN.md @@ -131,7 +131,7 @@ const ProductList = ({ onDelete, products }) => { ); }; -ProductList.proptypes = { +ProductList.propTypes = { onDelete: PropTypes.func.isRequired, products: PropTypes.array.isRequired, }; From 952f8aabbc6d07aea5dd105ca2047da40cabf746 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=81=8F=E5=8F=B3?= Date: Sat, 5 Nov 2016 15:35:28 +0800 Subject: [PATCH 0612/2145] Update README.md --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index e35d563f58..2caac1a084 100644 --- a/README.md +++ b/README.md @@ -9,6 +9,7 @@ [![npm package](https://img.shields.io/npm/v/antd.svg?style=flat-square)](https://www.npmjs.org/package/antd) [![NPM downloads](http://img.shields.io/npm/dm/antd.svg?style=flat-square)](https://npmjs.org/package/antd) [![Dependency Status](https://david-dm.org/ant-design/ant-design.svg?style=flat-square)](https://david-dm.org/ant-design/ant-design) +[![Average time to resolve an issue](http://isitmaintained.com/badge/resolution/ant-design/ant-design.svg)](http://isitmaintained.com/project/ant-design/ant-design "Average time to resolve an issue") [![Join the chat at https://gitter.im/ant-design/ant-design](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) An enterprise-class UI design language and React-based implementation. From d4e13e7616250c7fb0347b5c2c61dab415519183 Mon Sep 17 00:00:00 2001 From: afc163 Date: Sat, 5 Nov 2016 15:46:50 +0800 Subject: [PATCH 0613/2145] update layout --- components/layout/demo/basic.md | 6 +++--- components/layout/demo/offset.md | 7 ++----- components/layout/demo/reponsive-more.md | 2 +- components/layout/demo/reponsive.md | 2 +- components/layout/demo/sort.md | 6 +++--- 5 files changed, 10 insertions(+), 13 deletions(-) diff --git a/components/layout/demo/basic.md b/components/layout/demo/basic.md index 1778d70749..9f23ce6bcc 100644 --- a/components/layout/demo/basic.md +++ b/components/layout/demo/basic.md @@ -1,8 +1,8 @@ --- order: 0 title: - zh-CN: 基础布局 - en-US: Basic Layout + zh-CN: 基础栅格 + en-US: Basic Grid --- ## zh-CN @@ -15,7 +15,7 @@ title: From the stack to the horizontal arrangement. -You can create a basic grid system by using a single set of `Row` and` Col` grid assembly, ,all of the columns (Col) must be placed in `Row`. +You can create a basic grid system by using a single set of `Row` and` Col` grid assembly, all of the columns (Col) must be placed in `Row`. ````jsx import { Row, Col } from 'antd'; diff --git a/components/layout/demo/offset.md b/components/layout/demo/offset.md index ca91276872..f746608835 100644 --- a/components/layout/demo/offset.md +++ b/components/layout/demo/offset.md @@ -1,8 +1,8 @@ --- order: 2 -title: +title: zh-CN: 左右偏移 - en-US: Offset + en-US: Column offset --- ## zh-CN @@ -15,9 +15,6 @@ title: `Offset` can set the column to the right side. For example, using `offset = {4}` can set the element shifted to the right four columns width. -Column offset. - - ````jsx import { Row, Col } from 'antd'; diff --git a/components/layout/demo/reponsive-more.md b/components/layout/demo/reponsive-more.md index cd7c1e23f3..f91b30f5ae 100644 --- a/components/layout/demo/reponsive-more.md +++ b/components/layout/demo/reponsive-more.md @@ -13,7 +13,7 @@ title: ## en-US -`Span`` pull` `push`` offset` `order` property can be embedded into` xs` `sm`` md` `lg` properties to use, +`Span` pull` `push` offset` `order` property can be embedded into` xs` `sm` md` `lg` properties to use, where `xs = {6}` is equivalent to `xs = {{span: 6}}`. ````jsx diff --git a/components/layout/demo/reponsive.md b/components/layout/demo/reponsive.md index a417fdcc93..4a2306ebfb 100644 --- a/components/layout/demo/reponsive.md +++ b/components/layout/demo/reponsive.md @@ -11,7 +11,7 @@ title: ## en-US -Referring to the Bootstrap [responsive design] (http://getbootstrap.com/css/#grid-media-queries), here preset four dimensions: `xs`` sm` `md`` lg`. +Referring to the Bootstrap [responsive design] (http://getbootstrap.com/css/#grid-media-queries), here preset four dimensions: `xs` sm` `md` lg`. ````jsx import { Row, Col } from 'antd'; diff --git a/components/layout/demo/sort.md b/components/layout/demo/sort.md index 2aa963e15a..8352bb2c8d 100644 --- a/components/layout/demo/sort.md +++ b/components/layout/demo/sort.md @@ -1,8 +1,8 @@ --- order: 3 -title: - zh-CN: 布局排序 - en-US: Layout sort +title: + zh-CN: 栅格排序 + en-US: Grid sort --- ## zh-CN From d3788034e5237cab68053057026da4d6d660875a Mon Sep 17 00:00:00 2001 From: afc163 Date: Sat, 5 Nov 2016 16:54:00 +0800 Subject: [PATCH 0614/2145] remove hover card border --- components/card/style/index.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/card/style/index.less b/components/card/style/index.less index f4c79e0dc3..0101ce919a 100644 --- a/components/card/style/index.less +++ b/components/card/style/index.less @@ -12,7 +12,7 @@ &:hover { box-shadow: @box-shadow-base; - border-color: #eee; + border-color: transparent; } &-bordered { From caf09cd99e5c659088cbf36ce522fdbd7817ef8b Mon Sep 17 00:00:00 2001 From: Wei Zhu Date: Sun, 6 Nov 2016 14:32:47 +0800 Subject: [PATCH 0615/2145] Release 2.3.0 (#3735) * docs: add change log for 2.3.0 * Update dependencies. * Add TimePicker addon demo --- CHANGELOG.en-US.md | 38 ++++++++++++++++++++++++ CHANGELOG.zh-CN.md | 38 ++++++++++++++++++++++++ components/date-picker/index.en-US.md | 2 ++ components/date-picker/index.zh-CN.md | 2 ++ components/time-picker/demo/addon.md | 42 +++++++++++++++++++++++++++ components/time-picker/index.en-US.md | 1 + components/time-picker/index.zh-CN.md | 1 + components/tree/index.en-US.md | 1 + components/tree/index.zh-CN.md | 2 ++ package.json | 8 ++--- 10 files changed, 131 insertions(+), 4 deletions(-) create mode 100644 components/time-picker/demo/addon.md diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index 47921b77fe..43be594fc2 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -9,6 +9,44 @@ If you want to read change logs before `2.0.0`, please visit [GitHub](https://gi --- +## 2.3.0 + +`2016-11-04` + +* Upgrade normalize.css to 5.0. +* Point main file to `lib/index.js` in package.json. [#3397](https://github.com/ant-design/ant-design/pull/3397) +* A brand new `Spin` design. +* Add `addon` for `TimePicker` to allow render some addon to its bottom. +* Add `onDragEnd` for `Tree`. +* Improve `Tabs` switch animation. +* Improve `Radio` and `Checkbox` style when it's disabled and mouse hovered. [#3590](https://github.com/ant-design/ant-design/issues/3590) +* Opitimize `Transfer` performance.[#2860](https://github.com/ant-design/ant-design/issues/2860) +* Fix nested `Popover` style issue. [#3448](https://github.com/ant-design/ant-design/issues/3448) +* Fix issue resulting in server side render `Transfer` failed. [#3686](https://github.com/ant-design/ant-design/issues/3686) +* Fix issue resulting in preview image not display when `Upload` in `picture-card` mode. [#3706](https://github.com/ant-design/ant-design/pull/3706) [@denzw](https://github.com/denzw) +* DatePicker + * `onChange` will be triggered when `DatePicker` in `showTime` mode on blur now. + * Add `monthCellContentRender` and `cellContentRender` for `MonthPicker`. + * `Rangepicker` can input time manually now.[#3718](https://github.com/ant-design/ant-design/issues/3718) + * Add czech locale/translations. +* Badge + * Improve number over 99 displaying when mouse hovering. [#3645](https://github.com/ant-design/ant-design/issues/3645) + * Fix moving animation when using `Badge` alone. [#3709](https://github.com/ant-design/ant-design/issues/3709) +* Mention + * Fix issue resulting in `Mention` will be covered by `Table`. [#3588](https://github.com/ant-design/ant-design/issues/3588) + * Add `getSuggestionContainer` to allow specify container. [#3658](https://github.com/ant-design/ant-design/pull/3658) +* Tag + * Deprecate `color`. [#3560](https://github.com/ant-design/ant-design/issues/3560) + * Add `type`. [#3560](https://github.com/ant-design/ant-design/issues/3560) + * Add `checkable`. [#3560](https://github.com/ant-design/ant-design/issues/3560) +* Radio.Group + * Add `className`。 + * `null` or `undefined` `children` will be ignored. +* Select + * Add `tokenSeparators` to supoort automatic tokenization。[#2071](https://github.com/ant-design/ant-design/issues/2071) + * Add `onFocus` callback. [#3587](https://github.com/ant-design/ant-design/issues/3587) + * Fix issue resulting in Select can't display correct selected item text in `combobox` mode. [#3401](https://github.com/ant-design/ant-design/issues/3401) + ## 2.2.1 `2016-11-02` diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index b014014113..6cf86fbe1b 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -9,6 +9,44 @@ timeline: true --- +## 2.3.0 + +`2016-11-04` + +* 升级 normalize.css 到 5.0。 +* package.json 的 main 换成了 `lib/index.js`。[#3397](https://github.com/ant-design/ant-design/pull/3397) +* 全新的 `Spin` 设计。 +* `TimePicker` 新增了 `addon` 以支持自定义的附加内容。 +* `Tree` 新增了 `onDragEnd`。 +* 优化 `Tabs` 切换时的动画效果。 +* 优化 `Radio` 和 `Checkbox` 在禁用和鼠标停留时的样式。[#3590](https://github.com/ant-design/ant-design/issues/3590) +* 优化 `Transfer` 的性能。[#2860](https://github.com/ant-design/ant-design/issues/2860) +* 修复 `Popover` 嵌套时的样式问题。[#3448](https://github.com/ant-design/ant-design/issues/3448) +* 修复 `Transfer` 服务端渲染报错的问题。[#3686](https://github.com/ant-design/ant-design/issues/3686) +* 修复 `Upload` `picture-card` 模式下新上传的图片不显示预览的问题。[#3706](https://github.com/ant-design/ant-design/pull/3706) [@denzw](https://github.com/denzw) +* DatePicker + * 在 `showTime` 模式下现在失去焦点也会触发 `onChange`。 + * `MonthPicker` 增加了 `monthCellContentRender` 和 `cellContentRender`。 + * `RangePicker` 现在可以手动输入时间了。[#3718](https://github.com/ant-design/ant-design/issues/3718) + * 新增了捷克语的翻译。 +* Badge + * 优化鼠标停留时超过 99 的数字显示。[#3645](https://github.com/ant-design/ant-design/issues/3645) + * 修复单独使用时会有移动动画的问题。[#3709](https://github.com/ant-design/ant-design/issues/3709) +* Mention + * 修复会被 `Table` 遮住的问题。[#3588](https://github.com/ant-design/ant-design/issues/3588) + * 新增 `getSuggestionContainer` 来指定容器。[#3658](https://github.com/ant-design/ant-design/pull/3658) +* Tag + * 废弃 `color` 属性。[#3560](https://github.com/ant-design/ant-design/issues/3560) + * 新增 `type`。[#3560](https://github.com/ant-design/ant-design/issues/3560) + * 新增 `checkable`。[#3560](https://github.com/ant-design/ant-design/issues/3560) +* Radio.Group + * 新增 `className`。 + * `children` 为 `null` 或 `undefined` 时现在会被忽略。 +* Select + * 新增 `tokenSeparators` 支持粘贴时自动分词。[#2071](https://github.com/ant-design/ant-design/issues/2071) + * 新增 `onFocus` 回调。[#3587](https://github.com/ant-design/ant-design/issues/3587) + * 修复 `combobox` 模式下选中项不能正确显示的问题。[#3401](https://github.com/ant-design/ant-design/issues/3401) + ## 2.2.1 `2016-11-02` diff --git a/components/date-picker/index.en-US.md b/components/date-picker/index.en-US.md index aecba60af9..4b75e4227b 100644 --- a/components/date-picker/index.en-US.md +++ b/components/date-picker/index.en-US.md @@ -59,6 +59,8 @@ The following APIs are shared by DatePicker, MonthPicker, RangePicker. | defaultValue | to set default date | [moment](http://momentjs.com/) | - | | format | to set the date format, refer to [moment.js](http://momentjs.com/) | String | "YYYY-MM" | | onChange | a callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) | - | +| monthCellContentRender | Custom month cell render method | function | 无 | +| cellContentRender | Custom month cell content render method,the content will be appended to the cell. | function | 无 | ### RangePicker diff --git a/components/date-picker/index.zh-CN.md b/components/date-picker/index.zh-CN.md index 202e60694c..1fdd800d0e 100644 --- a/components/date-picker/index.zh-CN.md +++ b/components/date-picker/index.zh-CN.md @@ -60,6 +60,8 @@ moment.locale('zh-cn'); | defaultValue | 默认日期 | [moment](http://momentjs.com/) | 无 | | format | 展示的日期格式，配置参考 [moment.js](http://momentjs.com/) | string | "YYYY-MM" | | onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: moment, dateString: string) | 无 | +| monthCellContentRender | 自定义的月份渲染方法 | function | 无 | +| cellContentRender | 自定义的月份渲染方法，内容会被附加在月份后面 | function | 无 | ### RangePicker diff --git a/components/time-picker/demo/addon.md b/components/time-picker/demo/addon.md new file mode 100644 index 0000000000..3975fc1590 --- /dev/null +++ b/components/time-picker/demo/addon.md @@ -0,0 +1,42 @@ +--- +order: 7 +title: + zh-CN: 附加内容 + en-US: Addon +--- + +## zh-CN + +在 TimePicker 选择框底部显示自定义的内容。 + +## en-US + +Render addon contents to timepicker panel's bottom. + + +````jsx +import { TimePicker, Button } from 'antd'; + +function onChange(time, timeString) { + console.log(time, timeString); +} + +ReactDOM.render( + ( +
    + +
    + )} + /> +, mountNode); +```` + + diff --git a/components/time-picker/index.en-US.md b/components/time-picker/index.en-US.md index c6e06a47a0..4379bcf34a 100644 --- a/components/time-picker/index.en-US.md +++ b/components/time-picker/index.en-US.md @@ -34,5 +34,6 @@ import moment from 'moment'; | disabledSeconds | to specify the seconds that cannot be selected | function(selectedHour, selectedMinute) | - | | hideDisabledOptions | hide the options that can not be selected | boolean | false | | getPopupContainer | to set the container of the floating layer, while the default is to create a div element in body | function(trigger) | - | +| addon | called from timepicker panel to render some addon to its bottom | function | 无 | diff --git a/components/time-picker/index.zh-CN.md b/components/time-picker/index.zh-CN.md index d166e0e9b0..e2852fdced 100644 --- a/components/time-picker/index.zh-CN.md +++ b/components/time-picker/index.zh-CN.md @@ -35,5 +35,6 @@ import moment from 'moment'; | disabledSeconds | 禁止选择部分秒选项 | function(selectedHour, selectedMinute) | 无 | | hideDisabledOptions | 隐藏禁止选择的选项 | boolean | false | | getPopupContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | 无 | +| addon | 选择框底部显示自定义的内容 | function | 无 | diff --git a/components/tree/index.en-US.md b/components/tree/index.en-US.md index 8c7d672ce0..faf3bd75ee 100644 --- a/components/tree/index.en-US.md +++ b/components/tree/index.en-US.md @@ -36,6 +36,7 @@ Directory, organization, biological classification, country, and etc. Almost thi |onDragEnter | Defines a function will be called when the onDragEnter event occurs | function({event,node,expandedKeys}) | - | |onDragOver | Defines a function will be called when the onDragOver event occurs | function({event,node}) | - | |onDragLeave | Defines a function will be called when the onDragLeave event occurs | function({event,node}) | - | +|onDragEnd | Defines a function will be called when the onDragEnd event occurs | function({event,node}) | - | |onDrop | Defines a function will be called when the onDrop event occurs | function({event, node, dragNode, dragNodesKeys}) | - | ### TreeNode props diff --git a/components/tree/index.zh-CN.md b/components/tree/index.zh-CN.md index 0d18992bd6..67654bc620 100644 --- a/components/tree/index.zh-CN.md +++ b/components/tree/index.zh-CN.md @@ -37,8 +37,10 @@ subtitle: 树形控件 |onDragEnter | dragenter 触发时调用 | function({event,node,expandedKeys}) | - | |onDragOver | dragover 触发时调用 | function({event,node}) | - | |onDragLeave | dragleave 触发时调用 | function({event,node}) | - | +|onDragEnd | dragend 触发时调用 | function({event,node}) | - | |onDrop | drop 触发时调用 | function({event, node, dragNode, dragNodesKeys}) | - | + ### TreeNode props | 参数 | 说明 | 类型 | 默认值 | diff --git a/package.json b/package.json index fb5d72d107..d30ab53639 100644 --- a/package.json +++ b/package.json @@ -43,11 +43,11 @@ "object-assign": "~4.1.0", "omit.js": "^0.1.0", "rc-animate": "~2.3.0", - "rc-calendar": "~7.3.1", + "rc-calendar": "~7.4.1", "rc-cascader": "~0.10.1", "rc-checkbox": "~1.4.0", "rc-collapse": "~1.6.4", - "rc-dialog": "~6.4.0", + "rc-dialog": "~6.5.0", "rc-dropdown": "~1.4.8", "rc-editor-mention": "~0.3.0", "rc-form": "~1.0.0", @@ -65,9 +65,9 @@ "rc-switch": "~1.4.2", "rc-table": "~5.0.0", "rc-tabs": "~7.0.5", - "rc-time-picker": "~2.0.0", + "rc-time-picker": "~2.1.0", "rc-tooltip": "~3.4.2", - "rc-tree": "~1.3.6", + "rc-tree": "~1.4.0", "rc-tree-select": "~1.8.0", "rc-upload": "~2.2.0", "rc-util": "^4.0.1", From d9dd3114c3bed7d4031d5450ec52bf355bdaee56 Mon Sep 17 00:00:00 2001 From: Meck Date: Sun, 6 Nov 2016 14:36:11 +0800 Subject: [PATCH 0616/2145] Bump version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index d30ab53639..c25b379f2c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "antd", - "version": "2.2.1", + "version": "2.3.0", "title": "Ant Design", "description": "An enterprise-class UI design language and React-based implementation", "homepage": "http://ant.design/", From 63a15f0d926b14e6a1039870664f8c5fbd0cf726 Mon Sep 17 00:00:00 2001 From: afc163 Date: Sun, 6 Nov 2016 14:41:34 +0800 Subject: [PATCH 0617/2145] fix time-picker style --- components/time-picker/style/index.less | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/components/time-picker/style/index.less b/components/time-picker/style/index.less index eed40d998e..e804f7a407 100644 --- a/components/time-picker/style/index.less +++ b/components/time-picker/style/index.less @@ -80,8 +80,7 @@ &-select { float: left; font-size: 12px; - border: 1px solid @border-color-split; - border-width: 0 1px; + border-left: 1px solid @border-color-split; margin-left: -1px; box-sizing: border-box; width: 56px; From af2cec65c56a0557702f54e5485ae253893b75bd Mon Sep 17 00:00:00 2001 From: afc163 Date: Sun, 6 Nov 2016 14:53:29 +0800 Subject: [PATCH 0618/2145] improve TimePicker addon style --- components/time-picker/demo/addon.md | 19 +++---------------- components/time-picker/index.tsx | 7 ++++++- components/time-picker/style/index.less | 10 +++++++++- 3 files changed, 18 insertions(+), 18 deletions(-) diff --git a/components/time-picker/demo/addon.md b/components/time-picker/demo/addon.md index 3975fc1590..ddbc4e4c58 100644 --- a/components/time-picker/demo/addon.md +++ b/components/time-picker/demo/addon.md @@ -17,26 +17,13 @@ Render addon contents to timepicker panel's bottom. ````jsx import { TimePicker, Button } from 'antd'; -function onChange(time, timeString) { - console.log(time, timeString); -} - ReactDOM.render( ( -
    - -
    + )} /> , mountNode); ```` - - diff --git a/components/time-picker/index.tsx b/components/time-picker/index.tsx index 1f09a65a80..0aaa63ca9a 100644 --- a/components/time-picker/index.tsx +++ b/components/time-picker/index.tsx @@ -29,9 +29,9 @@ export interface TimePickerProps { disabledMinutes?: Function; /** 禁止选择部分秒选项 */ disabledSeconds?: Function; - style?: React.CSSProperties; getPopupContainer?: (trigger: any) => any; + addon?: Function; } export interface TimePickerContext { @@ -109,6 +109,11 @@ export default class TimePicker extends React.Component { showHour={props.format.indexOf('HH') > -1} showSecond={props.format.indexOf('ss') > -1} onChange={this.handleChange} + addon={(panel) => ( + props.addon ?
    + {props.addon(panel)} +
    : null + )} /> ); } diff --git a/components/time-picker/style/index.less b/components/time-picker/style/index.less index e804f7a407..0f6481a882 100644 --- a/components/time-picker/style/index.less +++ b/components/time-picker/style/index.less @@ -81,7 +81,6 @@ float: left; font-size: 12px; border-left: 1px solid @border-color-split; - margin-left: -1px; box-sizing: border-box; width: 56px; overflow: hidden; @@ -147,6 +146,15 @@ } } + &-combobox { + .clearfix; + } + + &-addon { + padding: 8px; + border-top: 1px solid @border-color-split; + } + &.slide-up-enter.slide-up-enter-active&-placement-topLeft, &.slide-up-enter.slide-up-enter-active&-placement-topRight, &.slide-up-appear.slide-up-appear-active&-placement-topLeft, From 7f422c9e18daf891adfb45703943286cdd5fccd3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=81=8F=E5=8F=B3?= Date: Sun, 6 Nov 2016 15:06:34 +0800 Subject: [PATCH 0619/2145] Feat collapse bordered (#3698) * update ts types * Add borderless style Collapse, close #3559 * update Collapse mix demo * update demo description --- components/collapse/demo/borderless.md | 39 ++++++++++++++++++++++++++ components/collapse/demo/mix.md | 8 +++--- components/collapse/index.en-US.md | 2 +- components/collapse/index.tsx | 22 +++++++++------ components/collapse/index.zh-CN.md | 1 + components/collapse/style/index.less | 18 ++++++++++++ 6 files changed, 77 insertions(+), 13 deletions(-) create mode 100644 components/collapse/demo/borderless.md diff --git a/components/collapse/demo/borderless.md b/components/collapse/demo/borderless.md new file mode 100644 index 0000000000..c60f5a396c --- /dev/null +++ b/components/collapse/demo/borderless.md @@ -0,0 +1,39 @@ +--- +order: 3 +title: + zh-CN: 简洁风格 + en-US: Borderless +--- + +## zh-CN + +一套没有边框的简洁样式。 + +## en-US + +A borderless style of Collapse. + +````jsx +import { Collapse } from 'antd'; +const Panel = Collapse.Panel; + +const text = ` + A dog is a type of domesticated animal. + Known for its loyalty and faithfulness, + it can be found as a welcome guest in many households across the world. +`; + +ReactDOM.render( + + +

    {text}

    +     + +

    {text}

    +     + +

    {text}

    +     +     +, mountNode); +```` diff --git a/components/collapse/demo/mix.md b/components/collapse/demo/mix.md index 324e9f8c9b..b6124e715b 100644 --- a/components/collapse/demo/mix.md +++ b/components/collapse/demo/mix.md @@ -1,17 +1,17 @@ --- order: 2 -title: +title: zh-CN: 面板嵌套 en-US: Nested panel --- ## zh-CN -手风琴嵌套折叠面板。 +嵌套折叠面板。 ## en-US -`Collapse` is nested inside the `Accordion`. +`Collapse` is nested inside the `Collapse`. ````jsx import { Collapse } from 'antd'; @@ -28,7 +28,7 @@ const text = ` `; ReactDOM.render( - + diff --git a/components/collapse/index.en-US.md b/components/collapse/index.en-US.md index 59eebc2675..84b019e972 100644 --- a/components/collapse/index.en-US.md +++ b/components/collapse/index.en-US.md @@ -2,6 +2,7 @@ category: Components type: Views title: Collapse +cols: 1 --- A content area which can be collapsed and expanded. @@ -27,4 +28,3 @@ A content area which can be collapsed and expanded. |----------|----------------|----------|--------------| | key | corresponds to the `activeKey` | String | - | | header | title of the panel | React.Element or String | - | - diff --git a/components/collapse/index.tsx b/components/collapse/index.tsx index cf5e7b7f63..769fd6bb68 100644 --- a/components/collapse/index.tsx +++ b/components/collapse/index.tsx @@ -1,27 +1,27 @@ -import RcCollapse from 'rc-collapse'; import React from 'react'; +import RcCollapse from 'rc-collapse'; +import classNames from 'classnames'; export interface CollapseProps { activeKey?: Array | string; - /** 初始化选中面板的key */ defaultActiveKey?: Array; - /** accordion 为 true 的时候，一次只可以打开一个面板 */ + /** 手风琴效果 */ accordion?: boolean; - /** 切换面板的回调 */ onChange?: (key: string) => void; style?: React.CSSProperties; + className?: string; + bordered?: boolean; + prefixCls?: string; } export interface CollapsePanelProps { - /** 对应 activeKey */ key: string; - /** 面板头内容 */ header: React.ReactNode; style?: React.CSSProperties; + className?: string; } export class CollapsePanel extends React.Component { - } export default class Collapse extends React.Component { @@ -29,9 +29,15 @@ export default class Collapse extends React.Component { static defaultProps = { prefixCls: 'ant-collapse', + bordered: true, }; render() { - return ; + const { prefixCls, className = '', bordered } = this.props; + const collapseClassName = classNames({ + [`${prefixCls}-borderless`]: !bordered, + [className]: !!className, + }); + return ; } } diff --git a/components/collapse/index.zh-CN.md b/components/collapse/index.zh-CN.md index 49e447c795..c25339dcd3 100644 --- a/components/collapse/index.zh-CN.md +++ b/components/collapse/index.zh-CN.md @@ -3,6 +3,7 @@ category: Components type: Views title: Collapse subtitle: 折叠面板 +cols: 1 --- 可以折叠/展开的内容区域。 diff --git a/components/collapse/style/index.less b/components/collapse/style/index.less index b1b0ff3ae6..43e6467eb1 100644 --- a/components/collapse/style/index.less +++ b/components/collapse/style/index.less @@ -82,4 +82,22 @@ .collapse-open(); } } + + &-borderless { + background-color: #fff; + border: 0; + } + + &-borderless > &-item { + border: 0; + } + + &-borderless > &-item > &-header { + border-bottom: 1px solid @border-color-base; + transition: all .3s; + border-radius: @border-color-base @border-color-base 0 0; + &:hover { + background-color: #fcfcfc; + } + } } From b64ea0edcc8dc410c21b2700d956358b48054d20 Mon Sep 17 00:00:00 2001 From: Meck Date: Sun, 6 Nov 2016 15:11:00 +0800 Subject: [PATCH 0620/2145] Add Collapse to CHANGELOG --- CHANGELOG.en-US.md | 1 + CHANGELOG.zh-CN.md | 1 + 2 files changed, 2 insertions(+) diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index 43be594fc2..dc4949356d 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -18,6 +18,7 @@ If you want to read change logs before `2.0.0`, please visit [GitHub](https://gi * A brand new `Spin` design. * Add `addon` for `TimePicker` to allow render some addon to its bottom. * Add `onDragEnd` for `Tree`. +* Add `bordered` for `Collapse`. * Improve `Tabs` switch animation. * Improve `Radio` and `Checkbox` style when it's disabled and mouse hovered. [#3590](https://github.com/ant-design/ant-design/issues/3590) * Opitimize `Transfer` performance.[#2860](https://github.com/ant-design/ant-design/issues/2860) diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index 6cf86fbe1b..51f447e713 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -18,6 +18,7 @@ timeline: true * 全新的 `Spin` 设计。 * `TimePicker` 新增了 `addon` 以支持自定义的附加内容。 * `Tree` 新增了 `onDragEnd`。 +* `Collapse` 新增了 `bordered`。 * 优化 `Tabs` 切换时的动画效果。 * 优化 `Radio` 和 `Checkbox` 在禁用和鼠标停留时的样式。[#3590](https://github.com/ant-design/ant-design/issues/3590) * 优化 `Transfer` 的性能。[#2860](https://github.com/ant-design/ant-design/issues/2860) From ebe2379a95702d6e7bd7b34279f71c946a6db5c9 Mon Sep 17 00:00:00 2001 From: afc163 Date: Sun, 6 Nov 2016 15:45:39 +0800 Subject: [PATCH 0621/2145] fix radio-button doc link --- components/tabs/index.en-US.md | 4 +--- components/tabs/index.zh-CN.md | 2 +- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/components/tabs/index.en-US.md b/components/tabs/index.en-US.md index 55ee768ca4..79eedae575 100644 --- a/components/tabs/index.en-US.md +++ b/components/tabs/index.en-US.md @@ -11,10 +11,8 @@ Tabs make it easy to switch between different views. Ant Design has 3 types Tabs for different situation. - Card Tabs: for managing too many closeable views. - - Normal Tabs: for functional aspects of a page. - -- RadioButton: for secondary tabs. +- [RadioButton](/components/radio/#components-radio-demo-radiobutton): for secondary tabs. ## API diff --git a/components/tabs/index.zh-CN.md b/components/tabs/index.zh-CN.md index 424cc39b4e..f755fd37d1 100644 --- a/components/tabs/index.zh-CN.md +++ b/components/tabs/index.zh-CN.md @@ -15,7 +15,7 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。 - 卡片式的页签，提供可关闭的样式，常用于容器顶部。 - 标准线条式页签，用于容器内部的主功能切换，这是最常用的 Tabs。 -- [RadioButton](/components/radio/#demo-radiobutton) 可作为更次级的页签来使用。 +- [RadioButton](/components/radio/#components-radio-demo-radiobutton) 可作为更次级的页签来使用。 ## API From 224281f42536604a8b9c81aee967d881c4e7bffd Mon Sep 17 00:00:00 2001 From: afc163 Date: Sun, 6 Nov 2016 17:09:06 +0800 Subject: [PATCH 0622/2145] fix responsive menu style --- site/theme/static/responsive.less | 21 ++++++++++++--------- site/theme/template/Layout/Header.jsx | 11 ++++++----- 2 files changed, 18 insertions(+), 14 deletions(-) diff --git a/site/theme/static/responsive.less b/site/theme/static/responsive.less index d4d5dad2f3..ca3ec8ec75 100644 --- a/site/theme/static/responsive.less +++ b/site/theme/static/responsive.less @@ -5,7 +5,7 @@ top: 32px; z-index: 1; width: 16px; - height: 50px; + height: 22px; cursor: pointer; } @@ -53,9 +53,6 @@ text-align: center; } - #nav, .lang { - float: none; - } button.lang { display: block; margin: 29px auto 16px; @@ -63,12 +60,17 @@ border-color: #666; } - .nav { - .ant-popover-inner-content { - padding: 0; + .popover-menu { + width: 300px; + button.lang { + margin: 16px auto; + float: none; } - .ant-menu-item-selected { - border-right: 1px solid #e9e9e9; + .ant-popover-inner { + overflow: hidden; + &-content { + padding: 0; + } } } @@ -82,6 +84,7 @@ line-height: 60px; height: 60px; padding: 0 !important; + border: 0; a { color: #333; } diff --git a/site/theme/template/Layout/Header.jsx b/site/theme/template/Layout/Header.jsx index a8f6fc0c22..8afd0fbfc4 100644 --- a/site/theme/template/Layout/Header.jsx +++ b/site/theme/template/Layout/Header.jsx @@ -141,19 +141,20 @@ export default class Header extends React.Component { const searchPlaceholder = locale === 'zh-CN' ? '搜索组件...' : 'Search Components...'; return (     + logo Ant Design From 1e95ad9bade46a162fb89c559b7405c4204c3482 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=94=A1=E4=BC=A6?= Date: Mon, 7 Nov 2016 11:02:53 +0800 Subject: [PATCH 0623/2145] fix typo (#3744) --- docs/spec/colors.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/spec/colors.md b/docs/spec/colors.md index 2496b311fe..e2f91761de 100644 --- a/docs/spec/colors.md +++ b/docs/spec/colors.md @@ -82,7 +82,7 @@ const ExtendPalettes = React.createClass({ ] }, { - 'title': 'Magenta #E9259', + 'title': 'Magenta #E9259E', 'description': '玫红色是较为正面的色彩，含有鼓励、友好、活力的意义。但考虑到洋红色的特性，建议作为辅助色来使用。', 'colors': [ "#F8C5ED", "#F5A6D3", "#F387C0", From 03b4edee4ac91fc985adcefe787296872d4ca9cc Mon Sep 17 00:00:00 2001 From: RaoHai Date: Mon, 7 Nov 2016 11:04:36 +0800 Subject: [PATCH 0624/2145] AnchorLink -> Link and bug fix --- components/anchor/anchorHelper.tsx | 3 ++- components/anchor/demo/basic.md | 6 +++--- components/anchor/demo/independ.md | 4 ++-- components/anchor/demo/mix.md | 10 +++++----- components/anchor/index.en-US.md | 2 +- components/anchor/index.tsx | 2 +- components/anchor/index.zh-CN.md | 3 ++- 7 files changed, 16 insertions(+), 14 deletions(-) diff --git a/components/anchor/anchorHelper.tsx b/components/anchor/anchorHelper.tsx index f80240e41f..7d922c5d72 100644 --- a/components/anchor/anchorHelper.tsx +++ b/components/anchor/anchorHelper.tsx @@ -40,11 +40,12 @@ export function getOffsetTop(element): number { export function scrollTo(href, target = getDefaultTarget) { const scrollTop = getScroll(target(), true); const offsetTop = getOffsetTop(document.querySelector(href)); + const targetScrollTop = scrollTop + offsetTop; const startTime = Date.now(); const frameFunc = () => { const timestamp = Date.now(); const time = timestamp - startTime; - document.body.scrollTop = easeInOutCubic(time, scrollTop, offsetTop, 450); + document.body.scrollTop = easeInOutCubic(time, scrollTop, targetScrollTop, 450); if (time < 450) { reqAnimFrame(frameFunc); } diff --git a/components/anchor/demo/basic.md b/components/anchor/demo/basic.md index da74d079d8..fb1795dbc9 100644 --- a/components/anchor/demo/basic.md +++ b/components/anchor/demo/basic.md @@ -15,12 +15,12 @@ The simplest usage. ```jsx import { Anchor } from 'antd'; -const { AnchorLink } = Anchor; +const { Link } = Anchor; ReactDOM.render( - - + + , mountNode); ``` \ No newline at end of file diff --git a/components/anchor/demo/independ.md b/components/anchor/demo/independ.md index ca9a94c7a9..ae0000daf5 100644 --- a/components/anchor/demo/independ.md +++ b/components/anchor/demo/independ.md @@ -15,9 +15,9 @@ Independent AnchorLink ```jsx import { Anchor } from 'antd'; -const { AnchorLink } = Anchor; +const { Link } = Anchor; ReactDOM.render( - + , mountNode); ``` \ No newline at end of file diff --git a/components/anchor/demo/mix.md b/components/anchor/demo/mix.md index d640fcd10e..89cfd014f4 100644 --- a/components/anchor/demo/mix.md +++ b/components/anchor/demo/mix.md @@ -15,14 +15,14 @@ The simplest usage. ```jsx import { Anchor } from 'antd'; -const { AnchorLink } = Anchor; +const { Link } = Anchor; ReactDOM.render( - - - - + + + + , mountNode); ``` \ No newline at end of file diff --git a/components/anchor/index.en-US.md b/components/anchor/index.en-US.md index d36c48aade..e5ef176a41 100644 --- a/components/anchor/index.en-US.md +++ b/components/anchor/index.en-US.md @@ -21,7 +21,7 @@ For displaying anchor hyperlink on page, and jump between then. | offsetBottom | Pixels to offset from bottom when calculating position of scroll | Number | - | | bounds | Bounding distance of anchor area | Number | 5(px) | -### AnchorLink Props +### Link Props | Property | Description | Type | Default | |-------------|----------------|--------------------|--------------| diff --git a/components/anchor/index.tsx b/components/anchor/index.tsx index cb60ca11e3..9149590015 100644 --- a/components/anchor/index.tsx +++ b/components/anchor/index.tsx @@ -14,7 +14,7 @@ export interface AnchorProps { } export default class Anchor extends React.Component { - static AnchorLink = AnchorLink; + static Link = AnchorLink; static defaultProps = { prefixCls: 'ant-anchor', diff --git a/components/anchor/index.zh-CN.md b/components/anchor/index.zh-CN.md index 93d47aba9d..5d8d221390 100644 --- a/components/anchor/index.zh-CN.md +++ b/components/anchor/index.zh-CN.md @@ -21,7 +21,8 @@ title: Anchor | offsetTop | 距离窗口顶部达到指定偏移量后触发 | Number | | | offsetBottom | 距离窗口底部达到指定偏移量后触发 | Number | | | bounds | 锚点区域边界 | Number | 5(px) | -### AnchorLink Props + +### Link Props | 成员 | 说明 | 类型 | 默认值 | |-------------|----------------|--------------------|--------------| From e02d77b3df954416d900a4f49d7a4912cd89af30 Mon Sep 17 00:00:00 2001 From: Meck Date: Mon, 7 Nov 2016 11:48:28 +0800 Subject: [PATCH 0625/2145] Styles should be exported as well. --- index.js | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/index.js b/index.js index 94017e32ba..e43cee1955 100644 --- a/index.js +++ b/index.js @@ -1 +1,31 @@ +/* eslint no-console:0 */ +// this file is not used if use https://github.com/ant-design/babel-plugin-import + +function camelCase(name) { + return name.charAt(0).toUpperCase() + + name.slice(1).replace(/-(\w)/g, (m, n) => { + return n.toUpperCase(); + }); +} + +const req = require.context('./components', true, /^\.\/[^_][\w-]+\/(style\/)index\.tsx?$/); + +console.log(req.keys()); + +req.keys().forEach((mod) => { + let v = req(mod); + if (v && v.default) { + v = v.default; + } + const match = mod.match(/^\.\/([^_][\w-]+)\/index\.tsx?$/); + if (match && match[1]) { + if (match[1] === 'message' || match[1] === 'notification') { + // message & notification should not be capitalized + exports[match[1]] = v; + } else { + exports[camelCase(match[1])] = v; + } + } +}); + module.exports = require('./components'); From d8ea555ee871f456d984d97b0086add3904245cf Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Mon, 7 Nov 2016 11:00:43 +0800 Subject: [PATCH 0626/2145] docs: update menu demo --- components/menu/demo/sider-current.md | 23 +++++++++++++++-------- 1 file changed, 15 insertions(+), 8 deletions(-) diff --git a/components/menu/demo/sider-current.md b/components/menu/demo/sider-current.md index 9a6b78f33e..dc676add39 100755 --- a/components/menu/demo/sider-current.md +++ b/components/menu/demo/sider-current.md @@ -29,19 +29,26 @@ const Sider = React.createClass({ }; }, handleClick(e) { - console.log('click ', e); + console.log('Clicked: ', e); this.setState({ current: e.key }); }, onOpenChange(openKeys) { - const latestOpenKey = openKeys.find(key => !(this.state.openKeys.indexOf(key) > -1)); - this.setState({ openKeys: this.getKeyPath(latestOpenKey) }); + const state = this.state; + const latestOpenKey = openKeys.find(key => !(state.openKeys.indexOf(key) > -1)); + const latestCloseKey = state.openKeys.find(key => !(openKeys.indexOf(key) > -1)); + + let nextOpenKeys = []; + if (latestOpenKey) { + nextOpenKeys = this.getAncestorKeys(latestOpenKey).concat(latestOpenKey); + } + if (latestCloseKey) { + nextOpenKeys = this.getAncestorKeys(latestCloseKey); + } + this.setState({ openKeys: nextOpenKeys }); }, - getKeyPath(key) { + getAncestorKeys(key) { const map = { - sub1: ['sub1'], - sub2: ['sub2'], - sub3: ['sub2', 'sub3'], - sub4: ['sub4'], + sub3: ['sub2'], }; return map[key] || []; }, From 9360c02129cb332779f9e52ac73f19b0ffdedc27 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Mon, 7 Nov 2016 11:54:25 +0800 Subject: [PATCH 0627/2145] docs: update docs about resetFields, close: #3746 --- components/form/index.en-US.md | 2 +- components/form/index.zh-CN.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/components/form/index.en-US.md b/components/form/index.en-US.md index 17f6d80614..ca254eb32c 100644 --- a/components/form/index.en-US.md +++ b/components/form/index.en-US.md @@ -70,7 +70,7 @@ If the form has been decorated by `Form.create` then it has `this.props.form` pr | validateFieldsAndScroll | This function is similar to `validateFields`, but after validation, if the target field is not in visible area of form, form will be automatically scrolled to the target field area. | same as `validateFields` | | getFieldError | Get the error of a field. | Function(name) | | isFieldValidating | Check if the specified field is being validated. | Function(name) | -| resetFields | Reset the specified fields' value and status. If you don't specify a parameter, all the fields will be reset. | Function([names: string[]]) | +| resetFields | Reset the specified fields' value(to `initialValue`) and status. If you don't specify a parameter, all the fields will be reset. | Function([names: string[]]) | | getFieldDecorator | Two-way binding for form, please read below for details. | | ### this.props.form.getFieldDecorator(id, options) diff --git a/components/form/index.zh-CN.md b/components/form/index.zh-CN.md index 2f84c4e744..e3a45b8986 100644 --- a/components/form/index.zh-CN.md +++ b/components/form/index.zh-CN.md @@ -72,7 +72,7 @@ CustomizedForm = Form.create({})(CustomizedForm); | validateFieldsAndScroll | 与 `validateFields` 相似，但校验完后，如果校验不通过的菜单域不在可见范围内，则自动滚动进可见范围 | 参考 `validateFields` | | getFieldError | 获取某个输入控件的 Error | Function(name) | | isFieldValidating | 判断一个输入控件是否在校验状态 | Function(name) | -| resetFields | 重置一组输入控件的值与状态，如不传入参数，则重置所有组件 | Function([names: string[]]) | +| resetFields | 重置一组输入控件的值（为 `initialValue`）与状态，如不传入参数，则重置所有组件 | Function([names: string[]]) | | getFieldDecorator | 用于和表单进行双向绑定，详见下方描述 | | ### this.props.form.getFieldDecorator(id, options) From 446315faf4c271900766d9f070bd8e0398efc597 Mon Sep 17 00:00:00 2001 From: Meck Date: Mon, 7 Nov 2016 11:58:31 +0800 Subject: [PATCH 0628/2145] 2.3.1 CHANGELOG --- CHANGELOG.en-US.md | 6 ++++++ CHANGELOG.zh-CN.md | 6 ++++++ 2 files changed, 12 insertions(+) diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index dc4949356d..c87eadcb69 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -9,6 +9,12 @@ If you want to read change logs before `2.0.0`, please visit [GitHub](https://gi --- +## 2.3.1 + +`2016-11-07` + +* Add missing `dist/antd.css` back. + ## 2.3.0 `2016-11-04` diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index 51f447e713..5944ba1df0 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -9,6 +9,12 @@ timeline: true --- +## 2.3.1 + +`2016-11-07` + +* 修正上个版本缺少 `dist/antd.css` 的问题。 + ## 2.3.0 `2016-11-04` From 449a982f927b60ea040aca4992276ec9edc3b070 Mon Sep 17 00:00:00 2001 From: Meck Date: Mon, 7 Nov 2016 11:55:19 +0800 Subject: [PATCH 0629/2145] Bump version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index c25b379f2c..de3c0699b3 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "antd", - "version": "2.3.0", + "version": "2.3.1", "title": "Ant Design", "description": "An enterprise-class UI design language and React-based implementation", "homepage": "http://ant.design/", From b39d96ec7536a85c6140f85a6b7c3da927374285 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Fri, 4 Nov 2016 17:06:57 +0800 Subject: [PATCH 0630/2145] refactor: make variables' name meaningful --- components/transfer/index.tsx | 54 +++++++++++++++++++---------------- 1 file changed, 30 insertions(+), 24 deletions(-) diff --git a/components/transfer/index.tsx b/components/transfer/index.tsx index 051f974822..b6a2f5ee1a 100644 --- a/components/transfer/index.tsx +++ b/components/transfer/index.tsx @@ -19,18 +19,19 @@ export interface TransferItem { export interface TransferProps { dataSource: TransferItem[]; targetKeys: string[]; - render?: (record: TransferItem) => any; - onChange?: (targetKeys: TransferItem[], direction: string, moveKeys: any) => void; + selectedKeys: string[]; + render?: (record: TransferItem) => React.ReactNode; + onChange?: (targetKeys: string[], direction: string, moveKeys: any) => void; onSelectChange?: (sourceSelectedKeys: string[], targetSelectedKeys: string[]) => void; listStyle?: React.CSSProperties; - className?: string; prefixCls?: string; + className?: string; titles?: string[]; operations?: string[]; showSearch?: boolean; searchPlaceholder?: string; notFoundContent?: React.ReactNode; - footer?: (props: any) => any; + footer?: (props: any) => React.ReactNode; style?: React.CSSProperties; filterOption: (inputValue: any, item: any) => boolean; body?: (props: any) => any; @@ -46,6 +47,7 @@ export interface TransferContext { const defaultTitles = ['源列表', '目的列表']; export default class Transfer extends React.Component { + // For high-level customized Transfer @dqaria static List = List; static Operation = Operation; static Search = Search; @@ -89,13 +91,13 @@ export default class Transfer extends React.Component { this.state = { leftFilter: '', rightFilter: '', - leftCheckedKeys: [], - rightCheckedKeys: [], + sourceSelectedKeys: [], + targetSelectedKeys: [], }; } componentWillReceiveProps(nextProps) { - const { leftCheckedKeys, rightCheckedKeys } = this.state; + const { sourceSelectedKeys, targetSelectedKeys } = this.state; if (nextProps.targetKeys !== this.props.targetKeys || nextProps.dataSource !== this.props.dataSource) { // clear cached splited dataSource @@ -108,9 +110,9 @@ export default class Transfer extends React.Component { // clear key nolonger existed // clear checkedKeys according to targetKeys this.setState({ - leftCheckedKeys: leftCheckedKeys.filter(existInDateSourcekey) + sourceSelectedKeys: sourceSelectedKeys.filter(existInDateSourcekey) .filter(data => targetKeys.filter(key => key === data).length === 0), - rightCheckedKeys: rightCheckedKeys.filter(existInDateSourcekey) + targetSelectedKeys: targetSelectedKeys.filter(existInDateSourcekey) .filter(data => targetKeys.filter(key => key === data).length > 0), }); } @@ -146,8 +148,8 @@ export default class Transfer extends React.Component { moveTo = (direction) => { const { targetKeys = [], onChange } = this.props; - const { leftCheckedKeys, rightCheckedKeys } = this.state; - const moveKeys = direction === 'right' ? leftCheckedKeys : rightCheckedKeys; + const { sourceSelectedKeys, targetSelectedKeys } = this.state; + const moveKeys = direction === 'right' ? sourceSelectedKeys : targetSelectedKeys; // move items to target box const newTargetKeys = direction === 'right' ? moveKeys.concat(targetKeys) @@ -156,7 +158,7 @@ export default class Transfer extends React.Component { // empty checked keys const oppositeDirection = direction === 'right' ? 'left' : 'right'; this.setState({ - [`${oppositeDirection}CheckedKeys`]: [], + [this.getSelectedKeysName(oppositeDirection)]: [], }); this.handleSelectChange(oppositeDirection, []); @@ -169,23 +171,23 @@ export default class Transfer extends React.Component { moveToRight = () => this.moveTo('right') handleSelectChange(direction: string, holder: string[]) { - const { leftCheckedKeys, rightCheckedKeys } = this.state; + const { sourceSelectedKeys, targetSelectedKeys } = this.state; const onSelectChange = this.props.onSelectChange; if (!onSelectChange) { return; } if (direction === 'left') { - onSelectChange(holder, rightCheckedKeys); + onSelectChange(holder, targetSelectedKeys); } else { - onSelectChange(leftCheckedKeys, holder); + onSelectChange(sourceSelectedKeys, holder); } } handleSelectAll = (direction, filteredDataSource, checkAll) => { const holder = checkAll ? [] : filteredDataSource.map(item => item.key); this.setState({ - [`${direction}CheckedKeys`]: holder, + [this.getSelectedKeysName(direction)]: holder, }); this.handleSelectChange(direction, holder); } @@ -217,8 +219,8 @@ export default class Transfer extends React.Component { handleRightClear = () => this.handleClear('right') handleSelect = (direction, selectedItem, checked) => { - const { leftCheckedKeys, rightCheckedKeys } = this.state; - const holder = direction === 'left' ? [...leftCheckedKeys] : [...rightCheckedKeys]; + const { sourceSelectedKeys, targetSelectedKeys } = this.state; + const holder = direction === 'left' ? [...sourceSelectedKeys] : [...targetSelectedKeys]; let index; holder.forEach((key, i) => { if (key === selectedItem.key) { @@ -232,7 +234,7 @@ export default class Transfer extends React.Component { holder.push(selectedItem.key); } this.setState({ - [`${direction}CheckedKeys`]: holder, + [this.getSelectedKeysName(direction)]: holder, }); this.handleSelectChange(direction, holder); } @@ -253,17 +255,21 @@ export default class Transfer extends React.Component { return defaultTitles; } + getSelectedKeysName(direction) { + return direction === 'left' ? 'sourceSelectedKeys' : 'targetSelectedKeys'; + } + render() { const { prefixCls = 'ant-transfer', operations = [], showSearch, notFoundContent, searchPlaceholder, body, footer, listStyle, className = '', filterOption, render, lazy, } = this.props; - const { leftFilter, rightFilter, leftCheckedKeys, rightCheckedKeys } = this.state; + const { leftFilter, rightFilter, sourceSelectedKeys, targetSelectedKeys } = this.state; const { leftDataSource, rightDataSource } = this.splitDataSource(this.props); - const leftActive = rightCheckedKeys.length > 0; - const rightActive = leftCheckedKeys.length > 0; + const leftActive = targetSelectedKeys.length > 0; + const rightActive = sourceSelectedKeys.length > 0; const cls = classNames({ [className]: !!className, @@ -279,7 +285,7 @@ export default class Transfer extends React.Component { filter={leftFilter} filterOption={filterOption} style={listStyle} - checkedKeys={leftCheckedKeys} + checkedKeys={sourceSelectedKeys} handleFilter={this.handleLeftFilter} handleClear={this.handleLeftClear} handleSelect={this.handleLeftSelect} @@ -308,7 +314,7 @@ export default class Transfer extends React.Component { filter={rightFilter} filterOption={filterOption} style={listStyle} - checkedKeys={rightCheckedKeys} + checkedKeys={targetSelectedKeys} handleFilter={this.handleRightFilter} handleClear={this.handleRightClear} handleSelect={this.handleRightSelect} From 7042e09a9947347ce0f674dda7dfe950a0a77629 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Fri, 4 Nov 2016 17:46:01 +0800 Subject: [PATCH 0631/2145] feat: add controlled property Transfer[selectedKeys], close: #3729 --- components/transfer/demo/basic.md | 56 +++++++++++++++--------------- components/transfer/index.en-US.md | 12 ++++--- components/transfer/index.tsx | 37 ++++++++++++++------ components/transfer/index.zh-CN.md | 15 ++++---- 4 files changed, 69 insertions(+), 51 deletions(-) diff --git a/components/transfer/demo/basic.md b/components/transfer/demo/basic.md index 2a821a990d..67f496d662 100644 --- a/components/transfer/demo/basic.md +++ b/components/transfer/demo/basic.md @@ -16,47 +16,47 @@ The most basic usage of `Transfer` involves providing the source data and target ````jsx import { Transfer } from 'antd'; +const mockData = []; +for (let i = 0; i < 20; i++) { + mockData.push({ + key: i.toString(), + title: `content${i + 1}`, + description: `description of content${i + 1}`, + disabled: Math.random() * 3 < 1, + }); +} + +const targetKeys = mockData + .filter(() => Math.random() * 2 > 1) + .map(item => item.key); + const App = React.createClass({ getInitialState() { return { - mockData: [], - targetKeys: [], + targetKeys, + selectedKeys: [], }; }, - componentDidMount() { - this.getMock(); - }, - getMock() { - const targetKeys = []; - const mockData = []; - for (let i = 0; i < 20; i++) { - const data = { - key: i.toString(), - title: `content${i + 1}`, - description: `description of content${i + 1}`, - chosen: Math.random() * 2 > 1, - disabled: Math.random() * 3 < 1, - }; - if (data.chosen) { - targetKeys.push(data.key); - } - mockData.push(data); - } - this.setState({ mockData, targetKeys }); - }, - handleChange(targetKeys, direction, moveKeys) { - console.log(targetKeys, direction, moveKeys); - this.setState({ targetKeys }); + handleChange(nextTargetKeys, direction, moveKeys) { + this.setState({ targetKeys: nextTargetKeys }); + + console.log('targetKeys: ', targetKeys); + console.log('direction: ', direction); + console.log('moveKeys: ', moveKeys); }, handleSelectChange(sourceSelectedKeys, targetSelectedKeys) { + this.setState({ selectedKeys: [...sourceSelectedKeys, ...targetSelectedKeys] }); + console.log('sourceSelectedKeys: ', sourceSelectedKeys); console.log('targetSelectedKeys: ', targetSelectedKeys); }, render() { + const state = this.state; return ( item.title} diff --git a/components/transfer/index.en-US.md b/components/transfer/index.en-US.md index f42d6f9b87..24a29fabfd 100644 --- a/components/transfer/index.en-US.md +++ b/components/transfer/index.en-US.md @@ -19,17 +19,19 @@ To transfer the elements between two columns in an intuitive and efficient way. |-----------|------------------------------------------|------------|--------| | dataSource | Used for setting the source data. The elements that are part of this array will be present the left column. Except the elements whose keys are included in `targetKeys` prop. | Array | [] | | render | The function to generate the item shown on a column. Based on an record (element of the dataSource array), this function should return a React element which is generated from that record. | Function(record) | | -| targetKeys | A set of keys of elements that are listed on the right column. | Array | [] | -| onChange | A callback function that is executed when the transfer between columns is complete. | Function(targetKeys, direction, moveKeys) | | -| onSelectChange | A callback function which is executed when selected items are changed. | Function(sourceSelectedKeys, targetSelectedKeys) | | +| targetKeys | A set of keys of elements that are listed on the right column. | string[] | [] | +| selectedKeys | A set of keys of selected items. | string[] | [] | +| onChange | A callback function that is executed when the transfer between columns is complete. | (targetKeys, direction, moveKeys): void | | +| onSelectChange | A callback function which is executed when selected items are changed. | (sourceSelectedKeys, targetSelectedKeys): void | | | listStyle | A custom CSS style used for rendering the transfer columns. | Object | | | className | A custom CSS class. | String | | | titles | A set of titles that are sorted from left to right. | Array | ['Source, 'Target] | | operations | A set of operations that are sorted from top to bottom. | Array | [] | | showSearch | If included, a search box is shown on each column. | Boolean | false | +| filterOption | A function to determine whether an item should show in search result list | (inputValue, option): boolean | | | searchPlaceholder | The hint text of the search box. | String | 'Search here' | -| notFoundContent | Text to display when a column is empty. | React.node | 'The list is empty' | -| footer | A function used for rendering the footer. | Function(props) | | +| notFoundContent | Text to display when a column is empty. | React.ReactNode | 'The list is empty' | +| footer | A function used for rendering the footer. | (props): React.ReactNode | | | lazy | property of [react-lazy-load](https://github.com/loktar00/react-lazy-load) for lazy rendering items | Object | `{ height: 32, offset: 32 }` | ## Warning diff --git a/components/transfer/index.tsx b/components/transfer/index.tsx index b6a2f5ee1a..447217f613 100644 --- a/components/transfer/index.tsx +++ b/components/transfer/index.tsx @@ -19,7 +19,7 @@ export interface TransferItem { export interface TransferProps { dataSource: TransferItem[]; targetKeys: string[]; - selectedKeys: string[]; + selectedKeys?: string[]; render?: (record: TransferItem) => React.ReactNode; onChange?: (targetKeys: string[], direction: string, moveKeys: any) => void; onSelectChange?: (sourceSelectedKeys: string[], targetSelectedKeys: string[]) => void; @@ -86,17 +86,19 @@ export default class Transfer extends React.Component { context: TransferContext; splitedDataSource: any; - constructor(props) { + constructor(props: TransferProps) { super(props); + + const { selectedKeys = [], targetKeys = [] } = props; this.state = { leftFilter: '', rightFilter: '', - sourceSelectedKeys: [], - targetSelectedKeys: [], + sourceSelectedKeys: selectedKeys.filter(key => targetKeys.indexOf(key) === -1), + targetSelectedKeys: selectedKeys.filter(key => targetKeys.indexOf(key) > -1), }; } - componentWillReceiveProps(nextProps) { + componentWillReceiveProps(nextProps: TransferProps) { const { sourceSelectedKeys, targetSelectedKeys } = this.state; if (nextProps.targetKeys !== this.props.targetKeys || nextProps.dataSource !== this.props.dataSource) { @@ -116,6 +118,13 @@ export default class Transfer extends React.Component { .filter(data => targetKeys.filter(key => key === data).length > 0), }); } + if (nextProps.selectedKeys) { + const targetKeys = nextProps.targetKeys; + this.setState({ + sourceSelectedKeys: nextProps.selectedKeys.filter(key => targetKeys.indexOf(key) === -1), + targetSelectedKeys: nextProps.selectedKeys.filter(key => targetKeys.indexOf(key) > -1), + }); + } } splitDataSource(props: TransferProps) { if (this.splitedDataSource) { @@ -186,10 +195,13 @@ export default class Transfer extends React.Component { handleSelectAll = (direction, filteredDataSource, checkAll) => { const holder = checkAll ? [] : filteredDataSource.map(item => item.key); - this.setState({ - [this.getSelectedKeysName(direction)]: holder, - }); this.handleSelectChange(direction, holder); + + if (!this.props.selectedKeys) { + this.setState({ + [this.getSelectedKeysName(direction)]: holder, + }); + } } handleLeftSelectAll = (filteredDataSource, checkAll) => ( @@ -233,10 +245,13 @@ export default class Transfer extends React.Component { if (checked) { holder.push(selectedItem.key); } - this.setState({ - [this.getSelectedKeysName(direction)]: holder, - }); this.handleSelectChange(direction, holder); + + if (!this.props.selectedKeys) { + this.setState({ + [this.getSelectedKeysName(direction)]: holder, + }); + } } handleLeftSelect = (selectedItem, checked) => this.handleSelect('left', selectedItem, checked); diff --git a/components/transfer/index.zh-CN.md b/components/transfer/index.zh-CN.md index 14fae9d0c5..ad51bb1720 100644 --- a/components/transfer/index.zh-CN.md +++ b/components/transfer/index.zh-CN.md @@ -20,18 +20,19 @@ title: Transfer |-----------|------------------------------------------|------------|--------| | dataSource | 数据源，其中的数据将会被渲染到左边一栏中，`targetKeys` 中指定的除外。 | Array | [] | | render | 每行数据渲染函数，该函数的入参为 `dataSource` 中的项，返回值为 React element | Function(record) | | -| targetKeys | 显示在右侧框数据的key集合 | Array | [] | -| onChange | 选项在两栏之间转移时的回调函数 | Function(targetKeys, direction, moveKeys) | | -| onSelectChange | 选中项发生改变时的回调函数 | Function(sourceSelectedKeys, targetSelectedKeys) | | +| targetKeys | 显示在右侧框数据的key集合 | string[] | [] | +| selectedKeys | 设置哪些项应该被选中 | string[] | [] | +| onChange | 选项在两栏之间转移时的回调函数 | (targetKeys, direction, moveKeys): void | | +| onSelectChange | 选中项发生改变时的回调函数 | (sourceSelectedKeys, targetSelectedKeys): void | | | listStyle | 两个穿梭框的自定义样式 | Object | | | className | 自定义类 | String | | | titles | 标题集合,顺序从左至右 | Array | ['源列表', '目的列表'] | | operations | 操作文案集合,顺序从上至下 | Array | [] | | showSearch | 是否显示搜索框 | Boolean | false | -| filterOption | 接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 `true`，反之则返回 `false`。| Function(inputValue, option) | | -| searchPlaceholder | 搜索框的默认值 | String | '请输入搜索内容' | -| notFoundContent | 当列表为空时显示的内容 | React.node | '列表为空' | -| footer | 底部渲染函数 | Function(props) | | +| filterOption | 接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 `true`，反之则返回 `false`。| (inputValue, option): boolean | | +| searchPlaceholder | 搜索框的默认值 | string | '请输入搜索内容' | +| notFoundContent | 当列表为空时显示的内容 | React.ReactNode | '列表为空' | +| footer | 底部渲染函数 | (props): React.ReactNode | | | lazy | Transfer 使用了 [react-lazy-load](https://github.com/loktar00/react-lazy-load) 优化性能，这里可以设置相关参数 | Object | `{ height: 32, offset: 32 }` | ## 注意 From 6d91290f958fa9ebfbf08dea2981df8f6f33c300 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 7 Nov 2016 14:02:07 +0800 Subject: [PATCH 0632/2145] remove vue-antd --- docs/spec/introduce.en-US.md | 1 - docs/spec/introduce.zh-CN.md | 1 - 2 files changed, 2 deletions(-) diff --git a/docs/spec/introduce.en-US.md b/docs/spec/introduce.en-US.md index abfd1e75ca..254ee5786b 100644 --- a/docs/spec/introduce.en-US.md +++ b/docs/spec/introduce.en-US.md @@ -30,7 +30,6 @@ Ant Design, created specially for middleware design, is committed to improving t - [Ant Design of React](/docs/react/introduce) (official implementation) - -
    Ant Design of Angular 2.0
    --
    vue-antd
    -
    antd-ember
    ## How to Contribute diff --git a/docs/spec/introduce.zh-CN.md b/docs/spec/introduce.zh-CN.md index ad04ce0b99..ac84820c43 100644 --- a/docs/spec/introduce.zh-CN.md +++ b/docs/spec/introduce.zh-CN.md @@ -30,7 +30,6 @@ Ant Design 是一个致力于提升『用户』和『设计者』使用体验的 - [Ant Design of React](/docs/react/introduce)（官方实现） -
    vue-beauty
    -
    Ant Design of Angular 2.0
    --
    vue-antd
    -
    antd-ember
    ## 如何贡献 From 1fde7de40488dd62e2a25412643fd811465185b0 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 7 Nov 2016 14:03:45 +0800 Subject: [PATCH 0633/2145] update index.js --- index.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/index.js b/index.js index e43cee1955..1337fd4fdd 100644 --- a/index.js +++ b/index.js @@ -1,6 +1,4 @@ /* eslint no-console:0 */ -// this file is not used if use https://github.com/ant-design/babel-plugin-import - function camelCase(name) { return name.charAt(0).toUpperCase() + name.slice(1).replace(/-(\w)/g, (m, n) => { @@ -8,10 +6,9 @@ function camelCase(name) { }); } +// Just import style for https://github.com/ant-design/ant-design/issues/3745 const req = require.context('./components', true, /^\.\/[^_][\w-]+\/(style\/)index\.tsx?$/); -console.log(req.keys()); - req.keys().forEach((mod) => { let v = req(mod); if (v && v.default) { From 0acbba983864282af3beae05801f96558c308b69 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 7 Nov 2016 14:52:57 +0800 Subject: [PATCH 0634/2145] fix DatePicker[showTime] now link, close #3748 --- components/date-picker/createPicker.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/components/date-picker/createPicker.tsx b/components/date-picker/createPicker.tsx index 2b61657860..d53b8ad3a8 100644 --- a/components/date-picker/createPicker.tsx +++ b/components/date-picker/createPicker.tsx @@ -95,8 +95,11 @@ export default function createPicker(TheCalendar) { if (props.showTime) { calendarHandler = { // fix https://github.com/ant-design/ant-design/issues/1902 - onSelect: (value) => { + onSelect: (value, cause) => { this.handleTempChange(value); + if (cause && cause.source === 'todayButton') { + this.handleChange(value); + } }, }; } else { From b9863f044c41e456e552bea9840296a6f36d2d7e Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Mon, 7 Nov 2016 14:54:39 +0800 Subject: [PATCH 0635/2145] site: update deps --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index de3c0699b3..e0066dd886 100644 --- a/package.json +++ b/package.json @@ -85,7 +85,7 @@ "babel-plugin-import": "^1.0.0", "babel-plugin-transform-runtime": "~6.15.0", "bisheng": "^0.14.0", - "bisheng-plugin-antd": "~0.3.0", + "bisheng-plugin-antd": "~0.6.0", "bisheng-plugin-description": "^0.1.1", "bisheng-plugin-react": "^0.2.0", "bisheng-plugin-toc": "^0.3.0", From 8f01552e0fdb04c737a718cb16b21aaf7333107c Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 7 Nov 2016 15:41:03 +0800 Subject: [PATCH 0636/2145] better way to fixing #3748 --- components/date-picker/createPicker.tsx | 25 ++++++++++++++----------- 1 file changed, 14 insertions(+), 11 deletions(-) diff --git a/components/date-picker/createPicker.tsx b/components/date-picker/createPicker.tsx index d53b8ad3a8..158c69f349 100644 --- a/components/date-picker/createPicker.tsx +++ b/components/date-picker/createPicker.tsx @@ -57,16 +57,22 @@ export default function createPicker(TheCalendar) { this.setState({ tempValue }); }, - // Clear temp value when hide picker panel + // Clear temp value and trigger onChange when hide DatePicker[showTime] panel handleOpenChange(open) { const { showTime, onOpenChange } = this.props; - const { tempValue } = this.state; if (!open) { - if (showTime && tempValue) { - this.handleChange(tempValue); - } - this.setState({ - tempValue: undefined, + // tricky code to avoid triggering onChange multiple times + // when click `Now` button + let tempValue; + this.setState(prevState => { + tempValue = prevState.tempValue; + return { + tempValue: undefined, + }; + }, () => { + if (showTime && tempValue) { + this.handleChange(tempValue); + } }); } if (onOpenChange) { @@ -95,11 +101,8 @@ export default function createPicker(TheCalendar) { if (props.showTime) { calendarHandler = { // fix https://github.com/ant-design/ant-design/issues/1902 - onSelect: (value, cause) => { + onSelect: (value) => { this.handleTempChange(value); - if (cause && cause.source === 'todayButton') { - this.handleChange(value); - } }, }; } else { From 6c16d738eeb69b29a4cd72245f056d402e1c4ca3 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 7 Nov 2016 15:55:14 +0800 Subject: [PATCH 0637/2145] upgrade deps and fix lints --- .eslintrc.js | 1 + package.json | 8 ++++---- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 818638258b..39e614aaf7 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -39,6 +39,7 @@ const eslintrc = { 'jsx-a11y/no-static-element-interactions': 0, 'jsx-a11y/anchor-has-content': 0, 'react/no-danger': 0, + 'comma-dangle': ['error', 'always-multiline'], }, }; diff --git a/package.json b/package.json index e0066dd886..aadf21e7ae 100644 --- a/package.json +++ b/package.json @@ -80,8 +80,8 @@ "@types/react": "~0.14.41", "@types/react-dom": "~0.14.18", "antd-tools": "^0.13.0", - "babel-eslint": "^6.0.2", - "babel-jest": "^13.2.2", + "babel-eslint": "^7.1.0", + "babel-jest": "^16.0.0", "babel-plugin-import": "^1.0.0", "babel-plugin-transform-runtime": "~6.15.0", "bisheng": "^0.14.0", @@ -96,13 +96,13 @@ "eslint": "^3.0.1", "eslint-config-airbnb": "latest", "eslint-plugin-babel": "^3.0.0", - "eslint-plugin-import": "^1.6.1", + "eslint-plugin-import": "^2.1.0", "eslint-plugin-jsx-a11y": "^2.0.1", "eslint-plugin-markdown": "*", "eslint-plugin-react": "^6.1.2", "eslint-tinker": "^0.4.0", "history": "^3.0.0", - "jest-cli": "^15.1.1", + "jest-cli": "^16.0.2", "jsonml-to-react-component": "~0.2.0", "jsonml.js": "^0.1.0", "jsonp": "^0.2.0", From 985d20ad805a9a77df79fbfdbc7c0c66c0ed568c Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 7 Nov 2016 17:53:12 +0800 Subject: [PATCH 0638/2145] Fix spin compatibility, close #3755 --- components/spin/index.tsx | 4 ++-- components/spin/style/index.less | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/components/spin/index.tsx b/components/spin/index.tsx index b2ebb4b60b..7e9cdffc4f 100644 --- a/components/spin/index.tsx +++ b/components/spin/index.tsx @@ -63,7 +63,7 @@ export default class Spin extends React.Component { clearTimeout(this.debounceTimeout); } if (currentSpinning && !spinning) { - this.debounceTimeout = setTimeout(() => this.setState({ spinning }), 500); + this.debounceTimeout = setTimeout(() => this.setState({ spinning }), 300); } else { this.setState({ spinning }); } @@ -103,7 +103,7 @@ export default class Spin extends React.Component { if (this.isNestedPattern()) { const containerClassName = classNames({ [`${prefixCls}-container`]: true, - [`${prefixCls}-filter`]: spinning, + [`${prefixCls}-blur`]: spinning, }); return ( .@{ant-prefix}-spin-container { + .@{spin-prefix-cls}-blur { background: #fff; opacity: 0.5; } From e6dd9a93d00470a45380496dd641c8eeb87a1927 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 8 Nov 2016 11:46:41 +0800 Subject: [PATCH 0639/2145] expand Input addon icon click area, close #3714 --- components/input/demo/addon.md | 11 ++++++++--- components/input/style/mixin.less | 12 ++++++++++++ 2 files changed, 20 insertions(+), 3 deletions(-) diff --git a/components/input/demo/addon.md b/components/input/demo/addon.md index 9dd46faf6a..c1ce8b5082 100644 --- a/components/input/demo/addon.md +++ b/components/input/demo/addon.md @@ -14,7 +14,7 @@ title: Using pre & post tabs example. ````jsx -import { Input, Select } from 'antd'; +import { Input, Select, Icon } from 'antd'; const Option = Select.Option; const selectBefore = ( @@ -34,10 +34,15 @@ const selectAfter = ( ReactDOM.render(
    - -
    +
    + +
    +
    +
    + } defaultValue="mysite" /> +
    , mountNode); ```` diff --git a/components/input/style/mixin.less b/components/input/style/mixin.less index f46b79dcdc..336342893a 100644 --- a/components/input/style/mixin.less +++ b/components/input/style/mixin.less @@ -157,6 +157,7 @@ background-color: #eee; border: 1px solid @input-border-color; border-radius: @border-radius-base; + position: relative; // Reset Select's style in addon .@{ant-prefix}-select { @@ -176,6 +177,17 @@ } } } + + // Expand addon icon click area + // https://github.com/ant-design/ant-design/issues/3714 + > i:only-child:after { + position: absolute; + content: ''; + top: 0; + left: 0; + right: 0; + bottom: 0; + } } // Reset rounded corners From f98005a696174aab4009ff3c32938580972c5883 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 8 Nov 2016 12:03:20 +0800 Subject: [PATCH 0640/2145] update meta description --- site/theme/static/template.html | 1 + 1 file changed, 1 insertion(+) diff --git a/site/theme/static/template.html b/site/theme/static/template.html index 8e945f85c4..b9c57fb49d 100644 --- a/site/theme/static/template.html +++ b/site/theme/static/template.html @@ -4,6 +4,7 @@ + Ant Design - One Design Language From 6bf9ac4e04ac8870bb306d2d0a8146af263b95f7 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 8 Nov 2016 13:46:11 +0800 Subject: [PATCH 0641/2145] Fix Steps vertical align style, close #3760 --- components/steps/style/index.less | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/components/steps/style/index.less b/components/steps/style/index.less index f6edf8e9e4..76a230d16d 100644 --- a/components/steps/style/index.less +++ b/components/steps/style/index.less @@ -148,7 +148,7 @@ border: 1px solid @wait-icon-color; width: 26px; height: 26px; - line-height: 26px; + line-height: 24px; text-align: center; border-radius: 26px; font-size: 14px; @@ -157,10 +157,8 @@ > .@{steps-prefix-cls}-icon { line-height: 1; - top: -1.5px; color: @primary-color; position: relative; - &.@{iconfont-css-prefix} { font-size: 12px; &-cross, @@ -226,7 +224,7 @@ border: 1px solid @wait-icon-color; width: 18px; height: 18px; - line-height: 18px; + line-height: 16px; text-align: center; border-radius: 18px; font-size: 12px; From 8dd48e0e267d7ab0c906e185eb6ac084ac16f4fa Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 8 Nov 2016 14:10:43 +0800 Subject: [PATCH 0642/2145] adjust for #3760 --- components/steps/style/index.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/steps/style/index.less b/components/steps/style/index.less index 76a230d16d..4aa4e8d470 100644 --- a/components/steps/style/index.less +++ b/components/steps/style/index.less @@ -148,7 +148,7 @@ border: 1px solid @wait-icon-color; width: 26px; height: 26px; - line-height: 24px; + line-height: 23px; text-align: center; border-radius: 26px; font-size: 14px; @@ -224,7 +224,7 @@ border: 1px solid @wait-icon-color; width: 18px; height: 18px; - line-height: 16px; + line-height: 15px; text-align: center; border-radius: 18px; font-size: 12px; From 5782253a0ff6ec8f2537f074886670cdd48ef7fe Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Tue, 8 Nov 2016 16:13:07 +0800 Subject: [PATCH 0643/2145] fix: infinite loop, ref: #3759 --- components/form/Form.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/components/form/Form.tsx b/components/form/Form.tsx index f963f32134..1c21967936 100755 --- a/components/form/Form.tsx +++ b/components/form/Form.tsx @@ -1,12 +1,12 @@ import React from 'react'; import { PropTypes } from 'react'; import classNames from 'classnames'; +import createDOMForm from 'rc-form/lib/createDOMForm'; import PureRenderMixin from 'rc-util/lib/PureRenderMixin'; import omit from 'omit.js'; -import warning from 'warning'; import assign from 'object-assign'; +import warning from '../_util/warning'; import FormItem from './FormItem'; -import createDOMForm from 'rc-form/lib/createDOMForm'; import { FIELD_META_PROP } from './constants'; export interface FormCreateOption { @@ -121,14 +121,14 @@ export default class Form extends React.Component { }; }, componentWillMount() { - this.getFieldProps = this.deprecatedGetFieldProps; + this.__getFieldProps = this.props.form.getFieldProps; }, deprecatedGetFieldProps(name, option) { warning( false, '`getFieldProps` is not recommended, please use `getFieldDecorator` instead' ); - return this.getFieldProps(name, option); + return this.__getFieldProps(name, option); }, render() { this.props.form.getFieldProps = this.deprecatedGetFieldProps; From a7b384112e3195588836dc90d08a209ac2441ae4 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 8 Nov 2016 18:03:22 +0800 Subject: [PATCH 0644/2145] es6-shim for ie10/11 --- docs/react/getting-started.zh-CN.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/docs/react/getting-started.zh-CN.md b/docs/react/getting-started.zh-CN.md index e49e67612e..1a067b5ae1 100644 --- a/docs/react/getting-started.zh-CN.md +++ b/docs/react/getting-started.zh-CN.md @@ -123,6 +123,9 @@ Ant Design React 支持所有的现代浏览器和 IE9+。 + From 9b81fe86d99244ee4e79a662eacfa93f0928ddc1 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 8 Nov 2016 20:45:56 +0800 Subject: [PATCH 0645/2145] clear less variables and add @text-color-secondary --- components/alert/style/index.less | 2 +- components/breadcrumb/style/index.less | 2 +- components/button/style/mixin.less | 2 +- components/calendar/style/index.less | 6 +++--- components/cascader/style/index.less | 6 +++--- components/checkbox/style/mixin.less | 2 +- components/date-picker/style/Calendar.less | 4 ++-- components/date-picker/style/Picker.less | 6 +++--- components/date-picker/style/RangePicker.less | 4 ++-- components/date-picker/style/TimePicker.less | 2 +- components/dropdown/style/index.less | 2 +- components/form/style/index.less | 10 +++++----- components/form/style/mixin.less | 4 ++-- components/input-number/style/index.less | 4 ++-- components/input/style/mixin.less | 2 +- components/menu/style/index.less | 10 +++++----- components/modal/style/modal.less | 2 +- components/notification/style/index.less | 2 +- components/radio/style/index.less | 2 +- components/select/style/index.less | 6 +++--- components/slider/style/index.less | 2 +- components/spin/style/index.less | 2 +- components/steps/style/index.less | 6 +++--- components/style/core/base.less | 2 +- components/style/themes/default.less | 13 +------------ components/table/style/index.less | 2 +- components/tabs/style/index.less | 6 +++--- components/time-picker/style/index.less | 8 ++++---- components/transfer/style/index.less | 2 +- components/upload/style/index.less | 14 +++++++------- 30 files changed, 63 insertions(+), 74 deletions(-) diff --git a/components/alert/style/index.less b/components/alert/style/index.less index e80e77dcba..4a45547d71 100644 --- a/components/alert/style/index.less +++ b/components/alert/style/index.less @@ -71,7 +71,7 @@ cursor: pointer; .@{iconfont-css-prefix}-cross { - color: @legend-color; + color: @text-color-secondary; transition: color .3s ease; &:hover { color: #404040; diff --git a/components/breadcrumb/style/index.less b/components/breadcrumb/style/index.less index f28f4bff97..e244bca535 100644 --- a/components/breadcrumb/style/index.less +++ b/components/breadcrumb/style/index.less @@ -3,7 +3,7 @@ @breadcrumb-prefix-cls: ~"@{ant-prefix}-breadcrumb"; .@{breadcrumb-prefix-cls} { - color: #999; + color: @text-color-secondary; font-size: @font-size-base; a { diff --git a/components/button/style/mixin.less b/components/button/style/mixin.less index 8bc2b0c922..e364b14cf6 100644 --- a/components/button/style/mixin.less +++ b/components/button/style/mixin.less @@ -137,7 +137,7 @@ &.disabled, &[disabled] { - cursor: @cursor-disabled; + cursor: not-allowed; > * { pointer-events: none; } diff --git a/components/calendar/style/index.less b/components/calendar/style/index.less index 643e0267ad..e8f48ff8c8 100644 --- a/components/calendar/style/index.less +++ b/components/calendar/style/index.less @@ -4,7 +4,9 @@ .@{full-calendar-prefix-cls} { font-size: @font-size-base; - line-height: 1.5; + line-height: @line-height-base; + outline: none; + border-top: 1px solid @border-color-base; &-month-select { margin-left: 5px; @@ -30,8 +32,6 @@ } } - outline: none; - border-top: 1px solid @legend-border-color; &-date-panel { position: relative; outline: none; diff --git a/components/cascader/style/index.less b/components/cascader/style/index.less index bff22de83d..bca070e913 100644 --- a/components/cascader/style/index.less +++ b/components/cascader/style/index.less @@ -63,7 +63,7 @@ cursor: pointer; transition: color 0.3s ease, opacity 0.15s ease; &:hover { - color: #999; + color: @text-color-secondary; } } @@ -81,7 +81,7 @@ height: 12px; margin-top: -6px; line-height: 12px; - color: #999; + color: @text-color-secondary; .iconfont-size-under-12px(9px); &:before { transition: transform 0.2s ease; @@ -173,7 +173,7 @@ &:after { .iconfont-font("\e61f"); .iconfont-size-under-12px(8px); - color: #999; + color: @text-color-secondary; position: absolute; right: 15px; } diff --git a/components/checkbox/style/mixin.less b/components/checkbox/style/mixin.less index 43b7c9b008..d063cd2b35 100644 --- a/components/checkbox/style/mixin.less +++ b/components/checkbox/style/mixin.less @@ -122,7 +122,7 @@ & + span { color: #ccc; - cursor: @cursor-disabled; + cursor: not-allowed; } } diff --git a/components/date-picker/style/Calendar.less b/components/date-picker/style/Calendar.less index c0ac6d5e67..49ef7a5472 100644 --- a/components/date-picker/style/Calendar.less +++ b/components/date-picker/style/Calendar.less @@ -37,7 +37,7 @@ .@{calendar-prefix-cls}-next-year-btn { position: absolute; top: 0; - color: #999; + color: @text-color-secondary; font-family: Arial, "Hiragino Sans GB", "Microsoft Yahei", "Microsoft Sans Serif", sans-serif; padding: 0 5px; font-size: 16px; @@ -291,7 +291,7 @@ } .@{calendar-prefix-cls}-clear-btn:hover:after { - color: #999; + color: @text-color-secondary; } .@{calendar-prefix-cls}-ok-btn { diff --git a/components/date-picker/style/Picker.less b/components/date-picker/style/Picker.less index 8d38a0dbf1..091083d51b 100644 --- a/components/date-picker/style/Picker.less +++ b/components/date-picker/style/Picker.less @@ -53,7 +53,7 @@ cursor: pointer; transition: color 0.3s ease, opacity 0.15s ease; &:hover { - color: #999; + color: @text-color-secondary; } } @@ -69,14 +69,14 @@ height: 12px; line-height: 12px; right: 8px; - color: #999; + color: @text-color-secondary; top: 50%; margin-top: -6px; &:after { content: "\e6bb"; font-family: "anticon"; font-size: 12px; - color: #999; + color: @text-color-secondary; display: inline-block; line-height: 1; vertical-align: bottom; diff --git a/components/date-picker/style/RangePicker.less b/components/date-picker/style/RangePicker.less index 13b606254d..e866236d6f 100644 --- a/components/date-picker/style/RangePicker.less +++ b/components/date-picker/style/RangePicker.less @@ -19,7 +19,7 @@ } .@{calendar-prefix-cls}-range-picker-separator { - color: #999; + color: @text-color-secondary; } .@{calendar-prefix-cls}-range { @@ -67,7 +67,7 @@ text-align: center; height: @input-box-height; line-height: @input-box-height; - color: #999; + color: @text-color-secondary; } &-right .@{calendar-prefix-cls}-date-input-wrap { diff --git a/components/date-picker/style/TimePicker.less b/components/date-picker/style/TimePicker.less index e9933cd1d5..2d717907e5 100644 --- a/components/date-picker/style/TimePicker.less +++ b/components/date-picker/style/TimePicker.less @@ -108,7 +108,7 @@ color: @btn-disable-color; &:hover { background: transparent; - cursor: @cursor-disabled; + cursor: not-allowed; } } } diff --git a/components/dropdown/style/index.less b/components/dropdown/style/index.less index c235189ab1..129a5f5f5d 100644 --- a/components/dropdown/style/index.less +++ b/components/dropdown/style/index.less @@ -108,7 +108,7 @@ position: absolute; content: "\e61f"; right: 16px; - color: #999; + color: @text-color-secondary; .iconfont-size-under-12px(9px); } diff --git a/components/form/style/index.less b/components/form/style/index.less index ddd97911bf..9b2ff8d963 100644 --- a/components/form/style/index.less +++ b/components/form/style/index.less @@ -32,7 +32,7 @@ input[type="radio"], input[type="checkbox"] { &[disabled], &.disabled { - cursor: @cursor-disabled; + cursor: not-allowed; } } @@ -42,7 +42,7 @@ input[type="checkbox"] { .@{ant-prefix}-checkbox-inline, .@{ant-prefix}-checkbox-vertical { &.disabled { - cursor: @cursor-disabled; + cursor: not-allowed; } } @@ -51,7 +51,7 @@ input[type="checkbox"] { .@{ant-prefix}-checkbox { &.disabled { label { - cursor: @cursor-disabled; + cursor: not-allowed; } } } @@ -116,7 +116,7 @@ input[type="checkbox"] { .@{form-prefix-cls}-explain, .@{form-prefix-cls}-extra { - color: #999; + color: @text-color-secondary; } .@{form-prefix-cls}-text { @@ -426,7 +426,7 @@ form { display: inline-block; animation: loadingCircle 1s infinite linear; content: "\e6ae"; - color: #999; + color: @text-color-secondary; } } diff --git a/components/form/style/mixin.less b/components/form/style/mixin.less index 7635111ca9..801cdae8a5 100644 --- a/components/form/style/mixin.less +++ b/components/form/style/mixin.less @@ -52,9 +52,9 @@ margin-bottom: 20px; font-size: 14px; line-height: inherit; - color: @legend-color; + color: @text-color-secondary; border: 0; - border-bottom: 1px solid @legend-border-color; + border-bottom: 1px solid @border-color-base; } label { diff --git a/components/input-number/style/index.less b/components/input-number/style/index.less index 5720efcb77..64dc9d2eb3 100644 --- a/components/input-number/style/index.less +++ b/components/input-number/style/index.less @@ -29,7 +29,7 @@ line-height: 0; height: 14px; overflow: hidden; - color: #999; + color: @text-color-secondary; position: relative; transition: all 0.1s linear; display: block; @@ -55,7 +55,7 @@ transition: all 0.1s linear; .iconfont-size-under-12px(7px); right: 4px; - color: #999; + color: @text-color-secondary; } &:hover { diff --git a/components/input/style/mixin.less b/components/input/style/mixin.less index 336342893a..cc681262e8 100644 --- a/components/input/style/mixin.less +++ b/components/input/style/mixin.less @@ -29,7 +29,7 @@ .disabled() { background-color: @input-disabled-bg; opacity: 1; - cursor: @cursor-disabled; + cursor: not-allowed; color: #ccc; &:hover { .hover(@input-border-color); diff --git a/components/menu/style/index.less b/components/menu/style/index.less index 8ddb50f2c2..976d1c5bce 100644 --- a/components/menu/style/index.less +++ b/components/menu/style/index.less @@ -25,7 +25,7 @@ } &-item-group-title { - color: #999; + color: @text-color-secondary; font-size: 12px; line-height: 1.5; padding: 8px 16px; @@ -155,11 +155,11 @@ // Disabled state sets text to gray and nukes hover/tab effects &.@{menu-prefix-cls}-item-disabled, &.@{menu-prefix-cls}-submenu-disabled { - color: #999 !important; + color: @text-color-secondary !important; cursor: not-allowed; background: none; > a { - color: #999 !important; + color: @text-color-secondary !important; pointer-events: none; } } @@ -319,7 +319,7 @@ .@{menu-prefix-cls} { &-dark, &-dark &-sub { - color: #999; + color: @text-color-secondary; background: #404040; } @@ -340,7 +340,7 @@ &-dark &-item, &-dark &-item > a { - color: #999; + color: @text-color-secondary; } &-dark&-inline, diff --git a/components/modal/style/modal.less b/components/modal/style/modal.less index 84e6686671..73813ce69d 100644 --- a/components/modal/style/modal.less +++ b/components/modal/style/modal.less @@ -47,7 +47,7 @@ line-height: 1; text-decoration: none; transition: color .3s ease; - color: #999; + color: @text-color-secondary; outline: 0; &-x { diff --git a/components/notification/style/index.less b/components/notification/style/index.less index 36050fba37..c61d9aa23f 100644 --- a/components/notification/style/index.less +++ b/components/notification/style/index.less @@ -83,7 +83,7 @@ position: absolute; right: 16px; top: 10px; - color: @legend-color; + color: @text-color-secondary; outline: none; &:hover { color: #404040; diff --git a/components/radio/style/index.less b/components/radio/style/index.less index 4417cb10fe..bbf493d141 100644 --- a/components/radio/style/index.less +++ b/components/radio/style/index.less @@ -104,7 +104,7 @@ & + span { color: #ccc; - cursor: @cursor-disabled; + cursor: not-allowed; } } diff --git a/components/select/style/index.less b/components/select/style/index.less index ae89868d39..3817e1b46f 100644 --- a/components/select/style/index.less +++ b/components/select/style/index.less @@ -30,7 +30,7 @@ .iconfont-font("\e62e"); } &:hover { - color: #999; + color: @text-color-secondary; } } @@ -318,7 +318,7 @@ .@{select-prefix-cls}-selection__choice__remove { .iconfont-mixin(); - color: #999; + color: @text-color-secondary; line-height: inherit; cursor: pointer; display: inline-block; @@ -437,7 +437,7 @@ } &-item-group-title { - color: #999; + color: @text-color-secondary; line-height: 1.5; padding: 8px 16px; } diff --git a/components/slider/style/index.less b/components/slider/style/index.less index 5ff45bd08c..eaffafc914 100644 --- a/components/slider/style/index.less +++ b/components/slider/style/index.less @@ -82,7 +82,7 @@ vertical-align: middle; text-align: center; cursor: pointer; - color: #999; + color: @text-color-secondary; &-active { color: #666; diff --git a/components/spin/style/index.less b/components/spin/style/index.less index 85ad715998..81d25a7a12 100644 --- a/components/spin/style/index.less +++ b/components/spin/style/index.less @@ -2,7 +2,7 @@ @import "../../style/mixins/index"; @spin-prefix-cls: ~"@{ant-prefix}-spin"; -@spin-dot-default: #999; +@spin-dot-default: @text-color-secondary; @spin-dot-size-sm: 14px; @spin-dot-size: 20px; @spin-dot-size-lg: 30px; diff --git a/components/steps/style/index.less b/components/steps/style/index.less index 4aa4e8d470..8134f5db13 100644 --- a/components/steps/style/index.less +++ b/components/steps/style/index.less @@ -7,7 +7,7 @@ @process-description-color: @process-title-color; @process-tail-color: @border-color-split; @wait-icon-color: #ccc; -@wait-title-color: #999; +@wait-title-color: @text-color-secondary; @wait-description-color: @wait-title-color; @wait-tail-color: @process-tail-color; @finish-icon-color: @process-icon-color; @@ -191,7 +191,7 @@ } .@{steps-prefix-cls}-description { font-size: 12px; - color: #999; + color: @text-color-secondary; } .@{steps-prefix-cls}-tail { position: absolute; @@ -245,7 +245,7 @@ } .@{steps-prefix-cls}-description { font-size: 12px; - color: #999; + color: @text-color-secondary; } .@{steps-prefix-cls}-tail { top: 8px; diff --git a/components/style/core/base.less b/components/style/core/base.less index 90b96922cc..180f0ea9ff 100644 --- a/components/style/core/base.less +++ b/components/style/core/base.less @@ -84,7 +84,7 @@ a { .@{ant-prefix}-divider { margin: 0 4px; - color: #999; + color: @text-color-secondary; display: inline-block; height: 8px; width: 1px; diff --git a/components/style/themes/default.less b/components/style/themes/default.less index 4452eef3ae..a4314996e8 100644 --- a/components/style/themes/default.less +++ b/components/style/themes/default.less @@ -15,6 +15,7 @@ @code-family : Consolas,Menlo,Courier,monospace; @text-color : #666; @heading-color : #404040; +@text-color-secondary : #999; @font-size-base : 12px; @line-height-base : 1.5; @line-height-computed : floor((@font-size-base * @line-height-base)); @@ -31,9 +32,6 @@ @link-active-color : shade(@link-color, 5%); @link-hover-decoration : none; -// Disabled cursor for form controls and buttons. -@cursor-disabled : not-allowed; - // Animation @ease-out : cubic-bezier(0.215, 0.61, 0.355, 1); @ease-in : cubic-bezier(0.55, 0.055, 0.675, 0.19); @@ -91,10 +89,8 @@ @btn-disable-border : @border-color-base; @btn-padding-base : 4px 15px; - @btn-font-size-lg : 14px; @btn-padding-lg : 4px 15px 5px 15px; - @btn-padding-sm : 1px 7px; @btn-circle-size : 28px; @@ -126,11 +122,6 @@ @grid-columns : 24; @grid-gutter-width : 0; -// Container sizes -@container-sm : (720px + @grid-gutter-width); -@container-md : (940px + @grid-gutter-width); -@container-lg : (1140px + @grid-gutter-width); - // z-index list @zindex-affix : 11; @zindex-back-top : 10; @@ -150,8 +141,6 @@ // Form // --- -@legend-color : #999; -@legend-border-color : @border-color-base; @label-required-color : #f50; @label-color : @text-color; @form-item-margin-bottom : 24px; diff --git a/components/table/style/index.less b/components/table/style/index.less index db738684ad..b8c925682c 100644 --- a/components/table/style/index.less +++ b/components/table/style/index.less @@ -293,7 +293,7 @@ position: relative; z-index: 2; font-size: 12px; - color: #999; + color: @text-color-secondary; .@{iconfont-css-prefix} { margin-right: 4px; } diff --git a/components/tabs/style/index.less b/components/tabs/style/index.less index e8881f0c58..82d6b21c7d 100644 --- a/components/tabs/style/index.less +++ b/components/tabs/style/index.less @@ -61,7 +61,7 @@ background-color: transparent; position: absolute; text-align: center; - color: #999; + color: @text-color-secondary; transition: color 0.3s ease; &:hover { @@ -339,7 +339,7 @@ } &&-card > &-bar &-tab .@{iconfont-css-prefix}-close { margin-right: 0; - color: #999; + color: @text-color-secondary; transition: all 0.3s @ease-in-out; .iconfont-size-under-12px(9px); transform-origin: 100% 50%; @@ -378,7 +378,7 @@ border: 1px solid @border-color-base; font-size: 12px; .iconfont-size-under-12px(10px); - color: #999; + color: @text-color-secondary; transition: color 0.3s ease; &:hover { color: #404040; diff --git a/components/time-picker/style/index.less b/components/time-picker/style/index.less index 0f6481a882..e38699a30b 100644 --- a/components/time-picker/style/index.less +++ b/components/time-picker/style/index.less @@ -70,7 +70,7 @@ } &-clear-btn:hover:after { - color: #999; + color: @text-color-secondary; } &-narrow &-input-wrap { @@ -141,7 +141,7 @@ color: @btn-disable-color; &:hover { background: transparent; - cursor: @cursor-disabled; + cursor: not-allowed; } } } @@ -212,14 +212,14 @@ height: 12px; line-height: 12px; right: 8px; - color: #999; + color: @text-color-secondary; top: 50%; margin-top: -6px; &:after { content: "\e641"; font-family: "anticon"; font-size: 12px; - color: #999; + color: @text-color-secondary; display: inline-block; line-height: 1; vertical-align: bottom; diff --git a/components/transfer/style/index.less b/components/transfer/style/index.less index c1d20d8cf4..83f18df763 100644 --- a/components/transfer/style/index.less +++ b/components/transfer/style/index.less @@ -40,7 +40,7 @@ font-size: 12px; color: #ccc; &:hover { - color: #999; + color: @text-color-secondary; } } } diff --git a/components/upload/style/index.less b/components/upload/style/index.less index 8e6bf2f0e9..292c2a3def 100644 --- a/components/upload/style/index.less +++ b/components/upload/style/index.less @@ -95,18 +95,18 @@ } p.@{upload-prefix-cls}-hint { font-size: 12px; - color: #999; + color: @text-color-secondary; } .@{iconfont-css-prefix}-plus { font-size: 30px; transition: all 0.3s ease; color: #ccc; &:hover { - color: #999; + color: @text-color-secondary; } } &:hover .@{iconfont-css-prefix}-plus { - color: #999; + color: @text-color-secondary; } } } @@ -127,7 +127,7 @@ .@{iconfont-css-prefix}-paper-clip { margin-right: 4px; font-size: 12px; - color: #999; + color: @text-color-secondary; } .@{iconfont-css-prefix}-cross { .iconfont-size-under-12px(10px); @@ -135,7 +135,7 @@ opacity: 0; cursor: pointer; float: right; - color: #999; + color: @text-color-secondary; line-height: 22px; &:hover { color: #666; @@ -213,7 +213,7 @@ .@{upload-item}-thumbnail.@{iconfont-css-prefix}:before { line-height: 48px; font-size: 24px; - color: #999; + color: @text-color-secondary; } .@{upload-item}-name { @@ -338,7 +338,7 @@ &-text { margin-top: 18px; - color: #999; + color: @text-color-secondary; } } From 0a48c62dcb27cb8abca2d2baa2505f762d5dd140 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 8 Nov 2016 20:50:59 +0800 Subject: [PATCH 0646/2145] use @text-color --- components/calendar/style/index.less | 2 +- components/collapse/style/index.less | 4 ++-- components/date-picker/style/Calendar.less | 4 ++-- components/date-picker/style/DecadePanel.less | 2 +- components/date-picker/style/MonthPanel.less | 2 +- components/date-picker/style/TimePicker.less | 2 +- components/date-picker/style/YearPanel.less | 2 +- components/dropdown/style/index.less | 4 ++-- components/form/style/index.less | 2 +- components/input-number/style/index.less | 2 +- components/mention/style/index.less | 4 ++-- components/modal/style/modal.less | 2 +- components/pagination/style/index.less | 6 +++--- components/popover/style/index.less | 2 +- components/select/style/index.less | 6 +++--- components/slider/style/index.less | 4 ++-- components/steps/style/index.less | 8 ++++---- components/table/style/index.less | 4 ++-- components/tabs/style/index.less | 2 +- components/tag/style/index.less | 2 +- components/transfer/style/index.less | 2 +- components/tree-select/style/index.less | 2 +- components/tree/style/index.less | 2 +- components/tree/style/mixin.less | 2 +- components/upload/style/index.less | 2 +- 25 files changed, 38 insertions(+), 38 deletions(-) diff --git a/components/calendar/style/index.less b/components/calendar/style/index.less index e8f48ff8c8..f1aaa8230c 100644 --- a/components/calendar/style/index.less +++ b/components/calendar/style/index.less @@ -201,7 +201,7 @@ } &-fullscreen &-today &-value { - color: #666; + color: @text-color; } diff --git a/components/collapse/style/index.less b/components/collapse/style/index.less index 43e6467eb1..b3b9914e67 100644 --- a/components/collapse/style/index.less +++ b/components/collapse/style/index.less @@ -25,7 +25,7 @@ height: 38px; line-height: 38px; padding-left: 32px; - color: #666; + color: @text-color; cursor: pointer; position: relative; @@ -33,7 +33,7 @@ .collapse-close(); .iconfont-mixin(); position: absolute; - color: #666; + color: @text-color; display: inline-block; margin-right: 8px; line-height: 40px; diff --git a/components/date-picker/style/Calendar.less b/components/date-picker/style/Calendar.less index 49ef7a5472..f64676796c 100644 --- a/components/date-picker/style/Calendar.less +++ b/components/date-picker/style/Calendar.less @@ -16,7 +16,7 @@ padding: 0 2px; font-weight: bold; display: inline-block; - color: #666; + color: @text-color; line-height: 34px; } @@ -168,7 +168,7 @@ &-date { display: block; margin: 0 auto; - color: #666; + color: @text-color; border-radius: @border-radius-sm; width: 20px; height: 20px; diff --git a/components/date-picker/style/DecadePanel.less b/components/date-picker/style/DecadePanel.less index 87016f0676..c4cc0ca766 100644 --- a/components/date-picker/style/DecadePanel.less +++ b/components/date-picker/style/DecadePanel.less @@ -32,7 +32,7 @@ .@{calendar-prefix-cls}-decade-panel-decade { display: inline-block; margin: 0 auto; - color: #666; + color: @text-color; background: transparent; text-align: center; height: 24px; diff --git a/components/date-picker/style/MonthPanel.less b/components/date-picker/style/MonthPanel.less index cc7b76972e..bd6b39dfcf 100644 --- a/components/date-picker/style/MonthPanel.less +++ b/components/date-picker/style/MonthPanel.less @@ -51,7 +51,7 @@ .@{calendar-prefix-cls}-month-panel-month { display: inline-block; margin: 0 auto; - color: #666; + color: @text-color; background: transparent; text-align: center; height: 24px; diff --git a/components/date-picker/style/TimePicker.less b/components/date-picker/style/TimePicker.less index 2d717907e5..9074f3d5dc 100644 --- a/components/date-picker/style/TimePicker.less +++ b/components/date-picker/style/TimePicker.less @@ -119,7 +119,7 @@ padding: 0 2px; font-weight: bold; display: inline-block; - color: #666; + color: @text-color; line-height: 34px; } diff --git a/components/date-picker/style/YearPanel.less b/components/date-picker/style/YearPanel.less index 8ef89c21f4..13c56538dd 100644 --- a/components/date-picker/style/YearPanel.less +++ b/components/date-picker/style/YearPanel.less @@ -32,7 +32,7 @@ .@{calendar-prefix-cls}-year-panel-year { display: inline-block; margin: 0 auto; - color: #666; + color: @text-color; background: transparent; text-align: center; height: 24px; diff --git a/components/dropdown/style/index.less b/components/dropdown/style/index.less index 129a5f5f5d..9ab0465e89 100644 --- a/components/dropdown/style/index.less +++ b/components/dropdown/style/index.less @@ -55,13 +55,13 @@ clear: both; font-size: 12px; font-weight: normal; - color: #666; + color: @text-color; white-space: nowrap; cursor: pointer; transition: background 0.3s ease; > a { - color: #666; + color: @text-color; display: block; padding: 7px 16px; margin: -7px -16px; diff --git a/components/form/style/index.less b/components/form/style/index.less index 9b2ff8d963..6e45d13fd9 100644 --- a/components/form/style/index.less +++ b/components/form/style/index.less @@ -61,7 +61,7 @@ input[type="checkbox"] { .@{form-prefix-cls}-item { font-size: @font-size-base; margin-bottom: @form-item-margin-bottom; - color: #666; + color: @text-color; vertical-align: top; // nested FormItem diff --git a/components/input-number/style/index.less b/components/input-number/style/index.less index 64dc9d2eb3..bc4c14ff12 100644 --- a/components/input-number/style/index.less +++ b/components/input-number/style/index.less @@ -83,7 +83,7 @@ line-height: 28px; height: 28px; transition: all 0.3s linear; - color: #666; + color: @text-color; border: 0; border-radius: @border-radius-base; padding: 0 7px; diff --git a/components/mention/style/index.less b/components/mention/style/index.less index f5b6ebfb58..c5e93d76ce 100644 --- a/components/mention/style/index.less +++ b/components/mention/style/index.less @@ -65,7 +65,7 @@ display: block; padding: 7px 16px; font-weight: normal; - color: #666; + color: @text-color; white-space: nowrap; cursor: pointer; white-space: nowrap; @@ -95,7 +95,7 @@ &:hover { background-color: @background-color-base; font-weight: bold; - color: #666; + color: @text-color; } } diff --git a/components/modal/style/modal.less b/components/modal/style/modal.less index 73813ce69d..41a6be5763 100644 --- a/components/modal/style/modal.less +++ b/components/modal/style/modal.less @@ -80,7 +80,7 @@ padding: 14px 16px; border-radius: @border-radius-base @border-radius-base 0 0; background: #fff; - color: #666; + color: @text-color; border-bottom: 1px solid @border-color-split; } diff --git a/components/pagination/style/index.less b/components/pagination/style/index.less index 1d79725b93..0c9b7015d9 100644 --- a/components/pagination/style/index.less +++ b/components/pagination/style/index.less @@ -40,7 +40,7 @@ a { text-decoration: none; - color: #666; + color: @text-color; transition: none; margin: 0 6px; } @@ -112,7 +112,7 @@ &-jump-next { font-family: Arial; cursor: pointer; - color: #666; + color: @text-color; border-radius: @border-radius-base; list-style: none; min-width: 28px; @@ -130,7 +130,7 @@ background-color: #fff; a { - color: #666; + color: @text-color; &:after { .iconfont-size-under-12px(8px); diff --git a/components/popover/style/index.less b/components/popover/style/index.less index 812883f596..d0c76bfb99 100644 --- a/components/popover/style/index.less +++ b/components/popover/style/index.less @@ -65,7 +65,7 @@ line-height: 32px; height: 32px; border-bottom: 1px solid @border-color-split; - color: #666; + color: @text-color; } &-inner-content { diff --git a/components/select/style/index.less b/components/select/style/index.less index 3817e1b46f..2cd70342fd 100644 --- a/components/select/style/index.less +++ b/components/select/style/index.less @@ -38,7 +38,7 @@ box-sizing: border-box; display: inline-block; position: relative; - color: #666; + color: @text-color; font-size: @font-size-base; > ul > li > a { @@ -447,7 +447,7 @@ display: block; padding: 7px 16px; font-weight: normal; - color: #666; + color: @text-color; white-space: nowrap; cursor: pointer; white-space: nowrap; @@ -475,7 +475,7 @@ &:hover { background-color: @background-color-base; font-weight: bold; - color: #666; + color: @text-color; } } diff --git a/components/slider/style/index.less b/components/slider/style/index.less index eaffafc914..dbe07c5ec5 100644 --- a/components/slider/style/index.less +++ b/components/slider/style/index.less @@ -6,7 +6,7 @@ @slider-disabled-color: #ccc; // tooltip @slider-tooltip-color: #fff; -@slider-tooltip-bg: tint(#666, 4%); +@slider-tooltip-bg: tint(@text-color, 4%); @slider-tooltip-arrow-width: 4px; @slider-tooltip-distance: @slider-tooltip-arrow-width + 4; @slider-tooltip-arrow-color: @slider-tooltip-bg; @@ -85,7 +85,7 @@ color: @text-color-secondary; &-active { - color: #666; + color: @text-color; } } diff --git a/components/steps/style/index.less b/components/steps/style/index.less index 8134f5db13..9be2bf5e49 100644 --- a/components/steps/style/index.less +++ b/components/steps/style/index.less @@ -3,7 +3,7 @@ @steps-prefix-cls: ~"@{ant-prefix}-steps"; @process-icon-color: @primary-color; -@process-title-color: #666; +@process-title-color: @text-color; @process-description-color: @process-title-color; @process-tail-color: @border-color-split; @wait-icon-color: #ccc; @@ -174,13 +174,13 @@ .@{steps-prefix-cls}-title { font-size: 14px; margin-bottom: 4px; - color: #666; + color: @text-color; font-weight: bold; background: #fff; display: inline-block; padding-right: 10px; > a:first-child:last-child { - color: #666; + color: @text-color; } } .@{steps-prefix-cls}-item-last { @@ -240,7 +240,7 @@ .@{steps-prefix-cls}-title { font-size: 12px; margin-bottom: 4px; - color: #666; + color: @text-color; font-weight: bold; } .@{steps-prefix-cls}-description { diff --git a/components/table/style/index.less b/components/table/style/index.less index b8c925682c..aaff19db6d 100644 --- a/components/table/style/index.less +++ b/components/table/style/index.less @@ -38,7 +38,7 @@ color: #aaa; transition: all 0.3s ease; &:hover { - color: #666; + color: @text-color; } } @@ -209,7 +209,7 @@ width: 12px; cursor: pointer; &:hover .@{iconfont-css-prefix} { - color: #666; + color: @text-color; } &.on { .@{iconfont-css-prefix}-caret-up, diff --git a/components/tabs/style/index.less b/components/tabs/style/index.less index 82d6b21c7d..5bb6ab4279 100644 --- a/components/tabs/style/index.less +++ b/components/tabs/style/index.less @@ -65,7 +65,7 @@ transition: color 0.3s ease; &:hover { - color: #666; + color: @text-color; } &-icon { diff --git a/components/tag/style/index.less b/components/tag/style/index.less index ede79fc7d7..a6eafe91c3 100644 --- a/components/tag/style/index.less +++ b/components/tag/style/index.less @@ -42,7 +42,7 @@ cursor: pointer; font-weight: bold; margin-left: 3px; - color: #666; + color: @text-color; transition: all 0.3s ease; opacity: 0.66; diff --git a/components/transfer/style/index.less b/components/transfer/style/index.less index 83f18df763..3712371ebc 100644 --- a/components/transfer/style/index.less +++ b/components/transfer/style/index.less @@ -50,7 +50,7 @@ padding: 7px 15px; border-radius: @border-radius-base @border-radius-base 0 0; background: #fff; - color: #666; + color: @text-color; border-bottom: 1px solid @border-color-split; overflow: hidden; position: absolute; diff --git a/components/tree-select/style/index.less b/components/tree-select/style/index.less index e651eeef53..bab62e0da7 100644 --- a/components/tree-select/style/index.less +++ b/components/tree-select/style/index.less @@ -35,7 +35,7 @@ cursor: pointer; text-decoration: none; vertical-align: top; - color: #666; + color: @text-color; transition: all 0.3s ease; &:hover { background-color: tint(@primary-color, 90%); diff --git a/components/tree/style/index.less b/components/tree/style/index.less index a5d0c1985a..ec64042698 100644 --- a/components/tree/style/index.less +++ b/components/tree/style/index.less @@ -58,7 +58,7 @@ cursor: pointer; text-decoration: none; vertical-align: top; - color: #666; + color: @text-color; transition: all 0.3s ease; &:hover { background-color: tint(@primary-color, 90%); diff --git a/components/tree/style/mixin.less b/components/tree/style/mixin.less index a2a387bcc9..97b5bde4bf 100644 --- a/components/tree/style/mixin.less +++ b/components/tree/style/mixin.less @@ -10,7 +10,7 @@ position: absolute; top: 0; right: 4px; - color: #666; + color: @text-color; transition: transform .3s ease; } } diff --git a/components/upload/style/index.less b/components/upload/style/index.less index 292c2a3def..8305f81eb6 100644 --- a/components/upload/style/index.less +++ b/components/upload/style/index.less @@ -138,7 +138,7 @@ color: @text-color-secondary; line-height: 22px; &:hover { - color: #666; + color: @text-color; } } } From e4974ac72aa48b7c37a3827d4f7a7bdd4eab8714 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 8 Nov 2016 20:57:07 +0800 Subject: [PATCH 0647/2145] use @font-size-base (#1752) --- components/anchor/style/index.less | 2 +- components/badge/style/index.less | 2 +- components/cascader/style/index.less | 4 ++-- components/date-picker/style/Calendar.less | 2 +- components/date-picker/style/Picker.less | 4 ++-- components/date-picker/style/TimePicker.less | 4 ++-- components/dropdown/style/index.less | 6 +++--- components/input-number/style/index.less | 2 +- components/menu/style/index.less | 4 ++-- components/message/style/index.less | 2 +- components/modal/style/modal.less | 2 +- components/popover/style/index.less | 2 +- components/progress/style/index.less | 4 ++-- components/select/style/index.less | 2 +- components/slider/style/index.less | 2 +- components/steps/style/index.less | 10 +++++----- components/switch/style/index.less | 2 +- components/table/style/index.less | 4 ++-- components/tabs/style/index.less | 4 ++-- components/time-picker/style/index.less | 8 ++++---- components/timeline/style/index.less | 2 +- components/transfer/style/index.less | 6 +++--- components/tree-select/style/index.less | 2 +- components/tree/style/index.less | 2 +- components/upload/style/index.less | 8 ++++---- 25 files changed, 46 insertions(+), 46 deletions(-) diff --git a/components/anchor/style/index.less b/components/anchor/style/index.less index cf1fc1229c..f73630af72 100644 --- a/components/anchor/style/index.less +++ b/components/anchor/style/index.less @@ -53,7 +53,7 @@ } & > & { - font-size: 12px; + font-size: @font-size-base; } } } diff --git a/components/badge/style/index.less b/components/badge/style/index.less index 3eb82bcd2c..74d7337fab 100644 --- a/components/badge/style/index.less +++ b/components/badge/style/index.less @@ -22,7 +22,7 @@ line-height: 18px; text-align: center; padding: 0 6px; - font-size: 12px; + font-size: @font-size-base; white-space: nowrap; transform-origin: -10% center; z-index: 10; diff --git a/components/cascader/style/index.less b/components/cascader/style/index.less index bca070e913..1c85387fc1 100644 --- a/components/cascader/style/index.less +++ b/components/cascader/style/index.less @@ -54,7 +54,7 @@ z-index: 2; background: #fff; top: 50%; - font-size: 12px; + font-size: @font-size-base; color: #ccc; width: 12px; height: 12px; @@ -95,7 +95,7 @@ } } &-menus { - font-size: 12px; + font-size: @font-size-base; background: #fff; position: absolute; z-index: @zindex-dropdown; diff --git a/components/date-picker/style/Calendar.less b/components/date-picker/style/Calendar.less index f64676796c..4632728444 100644 --- a/components/date-picker/style/Calendar.less +++ b/components/date-picker/style/Calendar.less @@ -281,7 +281,7 @@ .@{calendar-prefix-cls}-clear-btn:after { .iconfont-font("\e62e"); - font-size: 12px; + font-size: @font-size-base; color: #ccc; display: inline-block; line-height: 1; diff --git a/components/date-picker/style/Picker.less b/components/date-picker/style/Picker.less index 091083d51b..c68b96d4ac 100644 --- a/components/date-picker/style/Picker.less +++ b/components/date-picker/style/Picker.less @@ -44,7 +44,7 @@ right: 7px; background: #fff; top: 50%; - font-size: 12px; + font-size: @font-size-base; color: #ccc; width: 14px; height: 14px; @@ -75,7 +75,7 @@ &:after { content: "\e6bb"; font-family: "anticon"; - font-size: 12px; + font-size: @font-size-base; color: @text-color-secondary; display: inline-block; line-height: 1; diff --git a/components/date-picker/style/TimePicker.less b/components/date-picker/style/TimePicker.less index 9074f3d5dc..a3104982c7 100644 --- a/components/date-picker/style/TimePicker.less +++ b/components/date-picker/style/TimePicker.less @@ -16,7 +16,7 @@ position: relative; outline: none; list-style: none; - font-size: 12px; + font-size: @font-size-base; text-align: left; background-color: #fff; background-clip: padding-box; @@ -45,7 +45,7 @@ &-select { float: left; - font-size: 12px; + font-size: @font-size-base; border: 1px solid @border-color-split; border-width: 0 1px; margin-left: -1px; diff --git a/components/dropdown/style/index.less b/components/dropdown/style/index.less index 9ab0465e89..89d5c5903a 100644 --- a/components/dropdown/style/index.less +++ b/components/dropdown/style/index.less @@ -9,7 +9,7 @@ top: -9999px; z-index: @zindex-dropdown; display: block; - font-size: 12px; + font-size: @font-size-base; font-weight: normal; line-height: 1.5; @@ -53,7 +53,7 @@ padding: 7px 16px; margin: 0; clear: both; - font-size: 12px; + font-size: @font-size-base; font-weight: normal; color: @text-color; white-space: nowrap; @@ -154,7 +154,7 @@ } .@{dropdown-prefix-cls}-link { - font-size: 12px; + font-size: @font-size-base; .@{iconfont-css-prefix}-down { .iconfont-size-under-12px(9px); } diff --git a/components/input-number/style/index.less b/components/input-number/style/index.less index bc4c14ff12..408cabc035 100644 --- a/components/input-number/style/index.less +++ b/components/input-number/style/index.less @@ -15,7 +15,7 @@ margin: 0; padding: 0; line-height: 28px; - font-size: 12px; + font-size: @font-size-base; height: 28px; display: inline-block; vertical-align: middle; diff --git a/components/menu/style/index.less b/components/menu/style/index.less index 976d1c5bce..6b4564c95a 100644 --- a/components/menu/style/index.less +++ b/components/menu/style/index.less @@ -26,7 +26,7 @@ &-item-group-title { color: @text-color-secondary; - font-size: 12px; + font-size: @font-size-base; line-height: 1.5; padding: 8px 16px; } @@ -275,7 +275,7 @@ & > .@{menu-prefix-cls}-item, & > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title { padding: 0px 16px 0 28px; - font-size: 12px; + font-size: @font-size-base; line-height: 42px; height: 42px; } diff --git a/components/message/style/index.less b/components/message/style/index.less index 65e2044f24..b1d43cc313 100644 --- a/components/message/style/index.less +++ b/components/message/style/index.less @@ -3,7 +3,7 @@ @message-prefix-cls: ~"@{ant-prefix}-message"; .@{message-prefix-cls} { - font-size: 12px; + font-size: @font-size-base; position: fixed; z-index: @zindex-message; width: 100%; diff --git a/components/modal/style/modal.less b/components/modal/style/modal.less index 41a6be5763..ac7174a629 100644 --- a/components/modal/style/modal.less +++ b/components/modal/style/modal.less @@ -86,7 +86,7 @@ &-body { padding: 16px; - font-size: 12px; + font-size: @font-size-base; line-height: 1.5; } diff --git a/components/popover/style/index.less b/components/popover/style/index.less index d0c76bfb99..caea75eb19 100644 --- a/components/popover/style/index.less +++ b/components/popover/style/index.less @@ -75,7 +75,7 @@ &-message { padding: 8px 0 16px; - font-size: 12px; + font-size: @font-size-base; color: @text-color; > .@{iconfont-css-prefix} { color: @warning-color; diff --git a/components/progress/style/index.less b/components/progress/style/index.less index bed3d30f05..65045dd6c9 100644 --- a/components/progress/style/index.less +++ b/components/progress/style/index.less @@ -8,7 +8,7 @@ &-line { width: 100%; - font-size: 12px; + font-size: @font-size-base; position: relative; } @@ -47,7 +47,7 @@ display: inline-block; font-family: tahoma; .@{iconfont-css-prefix} { - font-size: 12px; + font-size: @font-size-base; } } diff --git a/components/select/style/index.less b/components/select/style/index.less index 2cd70342fd..b2f1b4559f 100644 --- a/components/select/style/index.less +++ b/components/select/style/index.less @@ -17,7 +17,7 @@ z-index: 1; background: #fff; top: 50%; - font-size: 12px; + font-size: @font-size-base; color: #ccc; width: 12px; height: 12px; diff --git a/components/slider/style/index.less b/components/slider/style/index.less index dbe07c5ec5..8a5ff7e7c3 100644 --- a/components/slider/style/index.less +++ b/components/slider/style/index.less @@ -72,7 +72,7 @@ top: 10px; left: 0; width: 100%; - font-size: 12px; + font-size: @font-size-base; z-index: 3; } diff --git a/components/steps/style/index.less b/components/steps/style/index.less index 9be2bf5e49..f6a434ef90 100644 --- a/components/steps/style/index.less +++ b/components/steps/style/index.less @@ -160,7 +160,7 @@ color: @primary-color; position: relative; &.@{iconfont-css-prefix} { - font-size: 12px; + font-size: @font-size-base; &-cross, &-check { font-weight: bold; @@ -190,7 +190,7 @@ } } .@{steps-prefix-cls}-description { - font-size: 12px; + font-size: @font-size-base; color: @text-color-secondary; } .@{steps-prefix-cls}-tail { @@ -227,7 +227,7 @@ line-height: 15px; text-align: center; border-radius: 18px; - font-size: 12px; + font-size: @font-size-base; margin-right: 10px; > .@{steps-prefix-cls}-icon.@{iconfont-css-prefix} { .iconfont-size-under-12px(9px); @@ -238,13 +238,13 @@ margin-top: 0; } .@{steps-prefix-cls}-title { - font-size: 12px; + font-size: @font-size-base; margin-bottom: 4px; color: @text-color; font-weight: bold; } .@{steps-prefix-cls}-description { - font-size: 12px; + font-size: @font-size-base; color: @text-color-secondary; } .@{steps-prefix-cls}-tail { diff --git a/components/switch/style/index.less b/components/switch/style/index.less index 1b35fb039c..ad46deba62 100644 --- a/components/switch/style/index.less +++ b/components/switch/style/index.less @@ -21,7 +21,7 @@ &-inner { color: #fff; - font-size: 12px; + font-size: @font-size-base; margin-left: 24px; margin-right: 6px; display: block; diff --git a/components/table/style/index.less b/components/table/style/index.less index aaff19db6d..3d253294a4 100644 --- a/components/table/style/index.less +++ b/components/table/style/index.less @@ -33,7 +33,7 @@ .@{iconfont-css-prefix}-filter { margin-left: 4px; - font-size: 12px; + font-size: @font-size-base; cursor: pointer; color: #aaa; transition: all 0.3s ease; @@ -292,7 +292,7 @@ text-align: center; position: relative; z-index: 2; - font-size: 12px; + font-size: @font-size-base; color: @text-color-secondary; .@{iconfont-css-prefix} { margin-right: 4px; diff --git a/components/tabs/style/index.less b/components/tabs/style/index.less index 5bb6ab4279..9e6fa5696e 100644 --- a/components/tabs/style/index.less +++ b/components/tabs/style/index.less @@ -181,7 +181,7 @@ } &-mini &-nav-container { - font-size: 12px; + font-size: @font-size-base; } &-mini &-tab { @@ -376,7 +376,7 @@ cursor: pointer; border-radius: 3px; border: 1px solid @border-color-base; - font-size: 12px; + font-size: @font-size-base; .iconfont-size-under-12px(10px); color: @text-color-secondary; transition: color 0.3s ease; diff --git a/components/time-picker/style/index.less b/components/time-picker/style/index.less index e38699a30b..cae1ab17c1 100644 --- a/components/time-picker/style/index.less +++ b/components/time-picker/style/index.less @@ -14,7 +14,7 @@ position: relative; outline: none; list-style: none; - font-size: 12px; + font-size: @font-size-base; text-align: left; background-color: #fff; border-radius: @border-radius-base; @@ -60,7 +60,7 @@ } &-clear-btn:after { - font-size: 12px; + font-size: @font-size-base; color: #ccc; display: inline-block; line-height: 1; @@ -79,7 +79,7 @@ &-select { float: left; - font-size: 12px; + font-size: @font-size-base; border-left: 1px solid @border-color-split; box-sizing: border-box; width: 56px; @@ -218,7 +218,7 @@ &:after { content: "\e641"; font-family: "anticon"; - font-size: 12px; + font-size: @font-size-base; color: @text-color-secondary; display: inline-block; line-height: 1; diff --git a/components/timeline/style/index.less b/components/timeline/style/index.less index 068b61bb40..a07bbb27d2 100644 --- a/components/timeline/style/index.less +++ b/components/timeline/style/index.less @@ -59,7 +59,7 @@ height: auto; border-radius: 0; padding: 3px 0; - font-size: 12px; + font-size: @font-size-base; transform: translateY(-50%); } diff --git a/components/transfer/style/index.less b/components/transfer/style/index.less index 3712371ebc..6952c85e31 100644 --- a/components/transfer/style/index.less +++ b/components/transfer/style/index.less @@ -10,7 +10,7 @@ line-height: @line-height-base; &-list { - font-size: 12px; + font-size: @font-size-base; border: 1px solid @border-color-base; display: inline-block; border-radius: @border-radius-base; @@ -37,7 +37,7 @@ font-size: 14px; .@{iconfont-css-prefix} { transition: all .3s; - font-size: 12px; + font-size: @font-size-base; color: #ccc; &:hover { color: @text-color-secondary; @@ -65,7 +65,7 @@ } &-body { - font-size: 12px; + font-size: @font-size-base; position: relative; height: 100%; diff --git a/components/tree-select/style/index.less b/components/tree-select/style/index.less index bab62e0da7..3718735d7b 100644 --- a/components/tree-select/style/index.less +++ b/components/tree-select/style/index.less @@ -11,7 +11,7 @@ .@{select-tree-prefix-cls} { margin: 0; padding: 8px; - font-size: 12px; + font-size: @font-size-base; li { padding: 0; margin: 8px 0; diff --git a/components/tree/style/index.less b/components/tree/style/index.less index ec64042698..ea485fdb32 100644 --- a/components/tree/style/index.less +++ b/components/tree/style/index.less @@ -9,7 +9,7 @@ .@{tree-prefix-cls} { margin: 0; padding: 5px; - font-size: 12px; + font-size: @font-size-base; li { padding: 0; margin: 7px 0; diff --git a/components/upload/style/index.less b/components/upload/style/index.less index 8305f81eb6..2ad5832956 100644 --- a/components/upload/style/index.less +++ b/components/upload/style/index.less @@ -94,7 +94,7 @@ font-size: 14px; } p.@{upload-prefix-cls}-hint { - font-size: 12px; + font-size: @font-size-base; color: @text-color-secondary; } .@{iconfont-css-prefix}-plus { @@ -116,7 +116,7 @@ &-item { overflow: hidden; margin-top: 8px; - font-size: 12px; + font-size: @font-size-base; &-info { height: 22px; @@ -126,7 +126,7 @@ .@{iconfont-css-prefix}-paper-clip { margin-right: 4px; - font-size: 12px; + font-size: @font-size-base; color: @text-color-secondary; } .@{iconfont-css-prefix}-cross { @@ -164,7 +164,7 @@ padding: 0 8px 0 20px; margin-top: -2px; margin-bottom: 1px; - font-size: 12px; + font-size: @font-size-base; .@{ant-prefix}-progress-line-inner { vertical-align: middle; } From 4844d92709eec36543104b1cd97fc2b00ce4213f Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 8 Nov 2016 20:59:25 +0800 Subject: [PATCH 0648/2145] remove unused variable --- components/style/themes/default.less | 1 - 1 file changed, 1 deletion(-) diff --git a/components/style/themes/default.less b/components/style/themes/default.less index a4314996e8..db3a15518d 100644 --- a/components/style/themes/default.less +++ b/components/style/themes/default.less @@ -18,7 +18,6 @@ @text-color-secondary : #999; @font-size-base : 12px; @line-height-base : 1.5; -@line-height-computed : floor((@font-size-base * @line-height-base)); @border-radius-base : 6px; @border-radius-sm : 4px; From 0ec4276eab2852816adae31fef69603306171f07 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 8 Nov 2016 21:07:01 +0800 Subject: [PATCH 0649/2145] @font-size-lg (#1752) --- components/alert/style/index.less | 4 ++-- components/card/style/index.less | 2 +- components/form/style/index.less | 2 +- components/form/style/mixin.less | 2 +- components/input/style/mixin.less | 2 +- components/message/style/index.less | 2 +- components/modal/style/confirm.less | 2 +- components/modal/style/modal.less | 4 ++-- components/notification/style/index.less | 4 ++-- components/steps/style/index.less | 4 ++-- components/style/themes/default.less | 3 ++- components/tabs/style/index.less | 2 +- components/transfer/style/index.less | 2 +- components/upload/style/index.less | 2 +- 14 files changed, 19 insertions(+), 18 deletions(-) diff --git a/components/alert/style/index.less b/components/alert/style/index.less index 4a45547d71..3bfff2fc36 100644 --- a/components/alert/style/index.less +++ b/components/alert/style/index.less @@ -16,7 +16,7 @@ } &-icon { - font-size: 14px; + font-size: @font-size-lg; top: 9px; left: 16px; position: absolute; @@ -113,7 +113,7 @@ } &-with-description &-message { - font-size: 14px; + font-size: @font-size-lg; color: @heading-color; display: block; margin-bottom: 4px; diff --git a/components/card/style/index.less b/components/card/style/index.less index 0101ce919a..1e1fc33f44 100644 --- a/components/card/style/index.less +++ b/components/card/style/index.less @@ -26,7 +26,7 @@ padding: 0 24px; &-title { - font-size: 14px; + font-size: @font-size-lg; display: inline-block; text-overflow: ellipsis; width: 100%; diff --git a/components/form/style/index.less b/components/form/style/index.less index 6e45d13fd9..b84d914dfd 100644 --- a/components/form/style/index.less +++ b/components/form/style/index.less @@ -292,7 +292,7 @@ form { .square(@input-height-lg); line-height: @input-height-lg; text-align: center; - font-size: 14px; + font-size: @font-size-lg; animation: zoomIn .3s @ease-out-back; .iconfont-font(""); } diff --git a/components/form/style/mixin.less b/components/form/style/mixin.less index 801cdae8a5..9646bac3ec 100644 --- a/components/form/style/mixin.less +++ b/components/form/style/mixin.less @@ -50,7 +50,7 @@ width: 100%; padding: 0; margin-bottom: 20px; - font-size: 14px; + font-size: @font-size-lg; line-height: inherit; color: @text-color-secondary; border: 0; diff --git a/components/input/style/mixin.less b/components/input/style/mixin.less index cc681262e8..476998af73 100644 --- a/components/input/style/mixin.less +++ b/components/input/style/mixin.less @@ -93,7 +93,7 @@ right: 0; z-index: 2; .square(@height); - font-size: 14px; + font-size: @font-size-lg; line-height: @height; text-align: center; pointer-events: none; diff --git a/components/message/style/index.less b/components/message/style/index.less index b1d43cc313..fe7be3809a 100644 --- a/components/message/style/index.less +++ b/components/message/style/index.less @@ -46,7 +46,7 @@ .@{iconfont-css-prefix} { margin-right: 8px; - font-size: 14px; + font-size: @font-size-lg; top: 1px; position: relative; } diff --git a/components/modal/style/confirm.less b/components/modal/style/confirm.less index e76ec03622..3d8348d94a 100644 --- a/components/modal/style/confirm.less +++ b/components/modal/style/confirm.less @@ -23,7 +23,7 @@ .@{confirm-prefix-cls}-title { color: @text-color; font-weight: bold; - font-size: 14px; + font-size: @font-size-lg; } .@{confirm-prefix-cls}-content { diff --git a/components/modal/style/modal.less b/components/modal/style/modal.less index ac7174a629..452bcb98b8 100644 --- a/components/modal/style/modal.less +++ b/components/modal/style/modal.less @@ -21,7 +21,7 @@ &-title { margin: 0; - font-size: 14px; + font-size: @font-size-lg; line-height: 21px; font-weight: bold; } @@ -59,7 +59,7 @@ text-rendering: auto; width: 14px; height: 14px; - font-size: 14px; + font-size: @font-size-lg; line-height: 1; &:before { diff --git a/components/notification/style/index.less b/components/notification/style/index.less index c61d9aa23f..f8fcb09a0b 100644 --- a/components/notification/style/index.less +++ b/components/notification/style/index.less @@ -23,7 +23,7 @@ overflow: hidden; &-message { - font-size: 14px; + font-size: @font-size-lg; color: @heading-color; margin-bottom: 4px; white-space: nowrap; @@ -41,7 +41,7 @@ } &-with-icon &-message { - font-size: 14px; + font-size: @font-size-lg; margin-left: 48px; margin-bottom: 4px; } diff --git a/components/steps/style/index.less b/components/steps/style/index.less index f6a434ef90..099343d221 100644 --- a/components/steps/style/index.less +++ b/components/steps/style/index.less @@ -151,7 +151,7 @@ line-height: 23px; text-align: center; border-radius: 26px; - font-size: 14px; + font-size: @font-size-lg; margin-right: 8px; transition: background-color 0.3s ease, border-color 0.3s ease; @@ -172,7 +172,7 @@ margin-top: 2.5px; } .@{steps-prefix-cls}-title { - font-size: 14px; + font-size: @font-size-lg; margin-bottom: 4px; color: @text-color; font-weight: bold; diff --git a/components/style/themes/default.less b/components/style/themes/default.less index db3a15518d..bcef05dec3 100644 --- a/components/style/themes/default.less +++ b/components/style/themes/default.less @@ -17,6 +17,7 @@ @heading-color : #404040; @text-color-secondary : #999; @font-size-base : 12px; +@font-size-lg : @font-size-base + 2px; @line-height-base : 1.5; @border-radius-base : 6px; @border-radius-sm : 4px; @@ -88,7 +89,7 @@ @btn-disable-border : @border-color-base; @btn-padding-base : 4px 15px; -@btn-font-size-lg : 14px; +@btn-font-size-lg : @font-size-lg; @btn-padding-lg : 4px 15px 5px 15px; @btn-padding-sm : 1px 7px; diff --git a/components/tabs/style/index.less b/components/tabs/style/index.less index 9e6fa5696e..f35c556bf3 100644 --- a/components/tabs/style/index.less +++ b/components/tabs/style/index.less @@ -33,7 +33,7 @@ &-nav-container { overflow: hidden; - font-size: 14px; + font-size: @font-size-lg; line-height: @line-height-base; box-sizing: border-box; position: relative; diff --git a/components/transfer/style/index.less b/components/transfer/style/index.less index 6952c85e31..cd73ce100a 100644 --- a/components/transfer/style/index.less +++ b/components/transfer/style/index.less @@ -34,7 +34,7 @@ height: 32px; line-height: 32px; text-align: center; - font-size: 14px; + font-size: @font-size-lg; .@{iconfont-css-prefix} { transition: all .3s; font-size: @font-size-base; diff --git a/components/upload/style/index.less b/components/upload/style/index.less index 2ad5832956..7e19c730f9 100644 --- a/components/upload/style/index.less +++ b/components/upload/style/index.less @@ -91,7 +91,7 @@ margin-bottom: 24px; } p.@{upload-prefix-cls}-text { - font-size: 14px; + font-size: @font-size-lg; } p.@{upload-prefix-cls}-hint { font-size: @font-size-base; From 5aea5b24ef432b7fef880ec8e43e07c4396d7d82 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 8 Nov 2016 21:23:29 +0800 Subject: [PATCH 0650/2145] update select demo code style --- components/select/demo/automatic-tokenization.md | 5 +++-- components/select/demo/label-in-value.md | 12 +++++------- 2 files changed, 8 insertions(+), 9 deletions(-) diff --git a/components/select/demo/automatic-tokenization.md b/components/select/demo/automatic-tokenization.md index 238acb21de..a9d6e80dd3 100644 --- a/components/select/demo/automatic-tokenization.md +++ b/components/select/demo/automatic-tokenization.md @@ -7,7 +7,7 @@ title: ## zh-CN -试下复制`露西,杰克`到输入框里。只在 tags 和 multiple 模式下可用。 +试下复制 `露西,杰克` 到输入框里。只在 tags 和 multiple 模式下可用。 ## en-US @@ -27,7 +27,8 @@ function handleChange(value) { } ReactDOM.render( - - - - -
    + , mountNode); ```` From 0d013be7fa85fd4976f19ed6d9fa19e63219b7a7 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 8 Nov 2016 21:25:57 +0800 Subject: [PATCH 0651/2145] fix iconfont-size-under-12px mixin --- components/style/mixins/iconfont.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/style/mixins/iconfont.less b/components/style/mixins/iconfont.less index 37612e2bb4..d07ca4a479 100644 --- a/components/style/mixins/iconfont.less +++ b/components/style/mixins/iconfont.less @@ -27,7 +27,7 @@ // fix chrome 12px bug, support ie .iconfont-size-under-12px(@size, @rotate: 0deg) { display: inline-block; - @font-scale: unit(@size / @font-size-base); + @font-scale: unit(@size / 12px); font-size: @font-size-base; font-size: ~"@{size} \9"; // ie8-9 transform: scale(@font-scale) rotate(@rotate); From 2d0f532f736dc2da3e6b0735216ae6183b242def Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 8 Nov 2016 21:42:46 +0800 Subject: [PATCH 0652/2145] Improve checkbox and radio style (ref #3590) --- components/checkbox/style/mixin.less | 9 +-------- components/radio/style/index.less | 4 ++-- 2 files changed, 3 insertions(+), 10 deletions(-) diff --git a/components/checkbox/style/mixin.less b/components/checkbox/style/mixin.less index d063cd2b35..fe771cdfd5 100644 --- a/components/checkbox/style/mixin.less +++ b/components/checkbox/style/mixin.less @@ -16,7 +16,7 @@ &:hover, &-focused { .@{checkbox-inner-prefix-cls} { - border-color: #bbb; + border-color: @primary-color; } } @@ -92,15 +92,8 @@ .@{checkbox-prefix-cls}-checked, .@{checkbox-prefix-cls}-indeterminate { .@{checkbox-inner-prefix-cls} { - border-color: @primary-color; background-color: @primary-color; } - .@{checkbox-prefix-cls}-wrapper:hover &, - &:hover { - .@{checkbox-inner-prefix-cls} { - border-color: @primary-color; - } - } } .@{checkbox-prefix-cls}-disabled { diff --git a/components/radio/style/index.less b/components/radio/style/index.less index bbf493d141..09d1824d8b 100644 --- a/components/radio/style/index.less +++ b/components/radio/style/index.less @@ -34,7 +34,7 @@ &:hover, &-focused { .@{radio-inner-prefix-cls} { - border-color: #bbb; + border-color: @primary-color; } } &-inner { @@ -84,7 +84,7 @@ // 选中状态 .@{radio-prefix-cls}-checked { .@{radio-inner-prefix-cls} { - border-color: @border-color-base; + border-color: @primary-color; &:after { transform: scale(1); opacity: 1; From a91a7208a66752cc4e0f5de84c79574b88b4f1ae Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 8 Nov 2016 21:51:28 +0800 Subject: [PATCH 0653/2145] update steps demo --- components/steps/demo/icon.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/components/steps/demo/icon.md b/components/steps/demo/icon.md index 51383431ad..e0c51f029e 100644 --- a/components/steps/demo/icon.md +++ b/components/steps/demo/icon.md @@ -19,9 +19,10 @@ const Step = Steps.Step; ReactDOM.render( - - - } /> + + + + } /> , mountNode); ```` From 4d2bdfd93dc3039f48c91ddfa47d0dd2cdccc6f8 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Wed, 9 Nov 2016 10:16:36 +0800 Subject: [PATCH 0654/2145] docs: update docs for form --- components/form/index.en-US.md | 7 +++---- components/form/index.zh-CN.md | 6 +++--- 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/components/form/index.en-US.md b/components/form/index.en-US.md index ca254eb32c..e16e7e02ee 100644 --- a/components/form/index.en-US.md +++ b/components/form/index.en-US.md @@ -75,11 +75,10 @@ If the form has been decorated by `Form.create` then it has `this.props.form` pr ### this.props.form.getFieldDecorator(id, options) -After wrapped by `getFieldDecorator`, `value` `onChange` props will be added to form controls，the flow of form data will be handled by Form which will cause: +After wrapped by `getFieldDecorator`, `value`(or other property defined by `valuePropName`) `onChange`(or other property defined by `trigger`) props will be added to form controls，the flow of form data will be handled by Form which will cause: - -1. You don't need to use `onChange` and should not add `value` `onChange` to controls. (There are warnings after `antd@2.0`) -2. You can not set default value via `defaultValue` prop, you should use `initialValue` in `getFieldDecorator` instead. +1. You don't need to use `onChange` to collect data, but you still can listen to `onChange`(and so on) events. +2. You can not set value of form control via `value` `defaultValue` prop, and you should set default value with `initialValue` in `getFieldDecorator` instead. 3. You don't need to call `setState` manully, please use `this.props.form.setFieldsValue` to change value programmatically. #### Special attention diff --git a/components/form/index.zh-CN.md b/components/form/index.zh-CN.md index e3a45b8986..a0004c8df6 100644 --- a/components/form/index.zh-CN.md +++ b/components/form/index.zh-CN.md @@ -77,10 +77,10 @@ CustomizedForm = Form.create({})(CustomizedForm); ### this.props.form.getFieldDecorator(id, options) -经过 `getFieldDecorator` 包装的控件，表单控件会自动添加 `value` `onChange` 等属性，数据同步将被 Form 接管，这会导致以下结果： +经过 `getFieldDecorator` 包装的控件，表单控件会自动添加 `value`（或 `valuePropName` 指定的其他属性） `onChange`（或 `trigger` 指定的其他属性），数据同步将被 Form 接管，这会导致以下结果： -1. 你不再需要用 `onChange` 来做同步，也不应该给控件单独添加 `value` `onChange` 等属性。（2.0 后会在控制台进行警告） -2. 你不能用控件的 `defaultValue` 属性来设置默认值，请用 `getFieldDecorator` 里的 `initialValue`。 +1. 你不再需要用 `onChange` 来做同步，但还是可以继续监听 `onChange` 等事件。 +2. 你不能用控件的 `value` `defaultValue` 等属性来设置表单域的值，默认值可以用 `getFieldDecorator` 里的 `initialValue`。 3. 你不需要用 `setState`，可以使用 `this.props.form.setFieldsValue` 来动态改变表单值。 #### 特别注意 From 2df6476572724b1bccbee9a9c1724f7972d56f69 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 9 Nov 2016 14:22:38 +0800 Subject: [PATCH 0655/2145] update anchor docs --- components/anchor/AnchorLink.tsx | 22 ++++++++++------ components/anchor/anchorHelper.tsx | 42 +++++++++++++++--------------- components/anchor/demo/basic.md | 9 ++++--- components/anchor/demo/fixed.md | 29 +++++++++++++++++++++ components/anchor/demo/independ.md | 23 ---------------- components/anchor/demo/mix.md | 28 -------------------- components/anchor/index.en-US.md | 3 +-- components/anchor/index.tsx | 20 ++++++++------ components/anchor/index.zh-CN.md | 3 +-- 9 files changed, 84 insertions(+), 95 deletions(-) create mode 100644 components/anchor/demo/fixed.md delete mode 100644 components/anchor/demo/independ.md delete mode 100644 components/anchor/demo/mix.md diff --git a/components/anchor/AnchorLink.tsx b/components/anchor/AnchorLink.tsx index 575de0b5d9..df18d9b16d 100644 --- a/components/anchor/AnchorLink.tsx +++ b/components/anchor/AnchorLink.tsx @@ -40,6 +40,7 @@ export default class AnchorLink extends React.Component { anchorHelper: this.context.anchorHelper, }; } + renderAnchorLink = (child) => { const { href } = child.props; if (href) { @@ -51,6 +52,7 @@ export default class AnchorLink extends React.Component { } return child; } + render() { const { prefixCls, href, children, onClick, title, bounds } = this.props; const { anchorHelper } = this.context; @@ -60,13 +62,17 @@ export default class AnchorLink extends React.Component { [`${prefixCls}-link-active`]: active, }); const scrollToFn = anchorHelper ? anchorHelper.scrollTo : scrollTo; - return
    - component && active && anchorHelper ? anchorHelper.setActiveAnchor(component) : null} - className={`${prefixCls}-link-title`} - onClick={() => onClick ? onClick(href) : scrollToFn(href)} - >{title} - {React.Children.map(children, this.renderAnchorLink)} -
    ; + return ( +
    + component && active && anchorHelper ? anchorHelper.setActiveAnchor(component) : null} + className={`${prefixCls}-link-title`} + onClick={() => onClick ? onClick(href) : scrollToFn(href)} + > + {title} + + {React.Children.map(children, this.renderAnchorLink)} +
    + ); } } diff --git a/components/anchor/anchorHelper.tsx b/components/anchor/anchorHelper.tsx index 7d922c5d72..1fee9de42f 100644 --- a/components/anchor/anchorHelper.tsx +++ b/components/anchor/anchorHelper.tsx @@ -4,12 +4,12 @@ import getRequestAnimationFrame from '../_util/getRequestAnimationFrame'; export const reqAnimFrame = getRequestAnimationFrame(); export const easeInOutCubic = (t, b, c, d) => { - const cc = c - b; - t /= d / 2; - if (t < 1) { - return cc / 2 * t * t * t + b; - } - return cc / 2 * ((t -= 2) * t * t + 2) + b; + const cc = c - b; + t /= d / 2; + if (t < 1) { + return cc / 2 * t * t * t + b; + } + return cc / 2 * ((t -= 2) * t * t + 2) + b; }; export function getDefaultTarget() { @@ -38,21 +38,21 @@ export function getOffsetTop(element): number { } export function scrollTo(href, target = getDefaultTarget) { - const scrollTop = getScroll(target(), true); - const offsetTop = getOffsetTop(document.querySelector(href)); - const targetScrollTop = scrollTop + offsetTop; - const startTime = Date.now(); - const frameFunc = () => { - const timestamp = Date.now(); - const time = timestamp - startTime; - document.body.scrollTop = easeInOutCubic(time, scrollTop, targetScrollTop, 450); - if (time < 450) { - reqAnimFrame(frameFunc); - } - }; - reqAnimFrame(frameFunc); - history.pushState(null, undefined, href); - } + const scrollTop = getScroll(target(), true); + const offsetTop = getOffsetTop(document.querySelector(href)); + const targetScrollTop = scrollTop + offsetTop; + const startTime = Date.now(); + const frameFunc = () => { + const timestamp = Date.now(); + const time = timestamp - startTime; + document.body.scrollTop = easeInOutCubic(time, scrollTop, targetScrollTop, 450); + if (time < 450) { + reqAnimFrame(frameFunc); + } + }; + reqAnimFrame(frameFunc); + history.pushState(null, undefined, href); +} class AnchorHelper { private links: Array; diff --git a/components/anchor/demo/basic.md b/components/anchor/demo/basic.md index fb1795dbc9..55dfd38114 100644 --- a/components/anchor/demo/basic.md +++ b/components/anchor/demo/basic.md @@ -19,8 +19,11 @@ const { Link } = Anchor; ReactDOM.render( - - + + + + + , mountNode); -``` \ No newline at end of file +``` diff --git a/components/anchor/demo/fixed.md b/components/anchor/demo/fixed.md new file mode 100644 index 0000000000..af59b14e4e --- /dev/null +++ b/components/anchor/demo/fixed.md @@ -0,0 +1,29 @@ +--- +order: 2 +title: + zh-CN: 固定 + en-US: Fixed Anchor +--- + +## zh-CN + +不会随页面滚动变化。 + +## en-US + +Do not change state when page is scrolling. + +```jsx +import { Anchor } from 'antd'; +const { Link } = Anchor; + +ReactDOM.render( + + + + + + + +, mountNode); +``` diff --git a/components/anchor/demo/independ.md b/components/anchor/demo/independ.md deleted file mode 100644 index ae0000daf5..0000000000 --- a/components/anchor/demo/independ.md +++ /dev/null @@ -1,23 +0,0 @@ ---- -order: 2 -title: - zh-CN: 独立使用 AnchorLink - en-US: Independent AnchorLink ---- - -## zh-CN - -独立使用 AnchorLink - -## en-US - -Independent AnchorLink - -```jsx -import { Anchor } from 'antd'; -const { Link } = Anchor; - -ReactDOM.render( - -, mountNode); -``` \ No newline at end of file diff --git a/components/anchor/demo/mix.md b/components/anchor/demo/mix.md deleted file mode 100644 index 89cfd014f4..0000000000 --- a/components/anchor/demo/mix.md +++ /dev/null @@ -1,28 +0,0 @@ ---- -order: 1 -title: - zh-CN: 嵌套的 AnchorLink - en-US: Mixed AnchorLink ---- - -## zh-CN - -最简单的用法。 - -## en-US - -The simplest usage. - -```jsx -import { Anchor } from 'antd'; -const { Link } = Anchor; - -ReactDOM.render( - - - - - - -, mountNode); -``` \ No newline at end of file diff --git a/components/anchor/index.en-US.md b/components/anchor/index.en-US.md index e5ef176a41..123bbc7050 100644 --- a/components/anchor/index.en-US.md +++ b/components/anchor/index.en-US.md @@ -9,7 +9,7 @@ A hyperlink to a location on same page. ## When To Use -For displaying anchor hyperlink on page, and jump between then. +For displaying anchor hyperlink on page, and jump between them. ## API @@ -27,4 +27,3 @@ For displaying anchor hyperlink on page, and jump between then. |-------------|----------------|--------------------|--------------| | href | target of hyperlink | String | | | title | content of hyperlink | String | | - diff --git a/components/anchor/index.tsx b/components/anchor/index.tsx index 9149590015..a206a84ade 100644 --- a/components/anchor/index.tsx +++ b/components/anchor/index.tsx @@ -38,6 +38,7 @@ export default class Anchor extends React.Component { }; this.anchorHelper = new AnchorHelper(); } + handleScroll = () => { this.setState({ activeAnchor: this.anchorHelper.getCurrentAnchor(this.props.bounds), @@ -49,6 +50,7 @@ export default class Anchor extends React.Component { anchorHelper: this.anchorHelper, }; } + componentDidMount() { this.handleScroll(); this.updateInk(); @@ -93,15 +95,17 @@ export default class Anchor extends React.Component { visible: !!activeAnchor, }); - return -
    -
    -
    - + return ( + +
    +
    +
    + +
    + {React.Children.map(this.props.children, this.renderAnchorLink)}
    - {React.Children.map(this.props.children, this.renderAnchorLink)}
    -
    - ; + + ); } } diff --git a/components/anchor/index.zh-CN.md b/components/anchor/index.zh-CN.md index 5d8d221390..edde5696ba 100644 --- a/components/anchor/index.zh-CN.md +++ b/components/anchor/index.zh-CN.md @@ -6,7 +6,7 @@ type: Other title: Anchor --- -用于跳转到页面指定位置 +用于跳转到页面指定位置。 ## 何时使用 @@ -28,4 +28,3 @@ title: Anchor |-------------|----------------|--------------------|--------------| | href | 锚点链接 | String | | | title | 文字内容 | String | | - From ec3f20936e774f639b1d371ec20d70088bd6d2e3 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 9 Nov 2016 14:40:31 +0800 Subject: [PATCH 0656/2145] update anchor style --- components/anchor/AnchorLink.tsx | 24 ++++++++++++++++++------ components/anchor/index.tsx | 2 ++ components/anchor/style/index.less | 11 ++++++----- 3 files changed, 26 insertions(+), 11 deletions(-) diff --git a/components/anchor/AnchorLink.tsx b/components/anchor/AnchorLink.tsx index df18d9b16d..165bcf62c7 100644 --- a/components/anchor/AnchorLink.tsx +++ b/components/anchor/AnchorLink.tsx @@ -53,24 +53,36 @@ export default class AnchorLink extends React.Component { return child; } + scrollTo(e) { + const { onClick, href } = this.props; + const { anchorHelper } = this.context; + if (onClick) { + onClick(href); + } else { + e.stopPreventDefault(); + const scrollToFn = anchorHelper ? anchorHelper.scrollTo : scrollTo; + scrollToFn(href); + } + } + render() { - const { prefixCls, href, children, onClick, title, bounds } = this.props; + const { prefixCls, href, children, title, bounds } = this.props; const { anchorHelper } = this.context; const active = anchorHelper && anchorHelper.getCurrentAnchor(bounds) === href; const cls = classnames({ [`${prefixCls}-link`]: true, [`${prefixCls}-link-active`]: active, }); - const scrollToFn = anchorHelper ? anchorHelper.scrollTo : scrollTo; return (
    - component && active && anchorHelper ? anchorHelper.setActiveAnchor(component) : null} className={`${prefixCls}-link-title`} - onClick={() => onClick ? onClick(href) : scrollToFn(href)} + onClick={this.scrollTo} + href={href} > - {title} - + {title} + {React.Children.map(children, this.renderAnchorLink)}
    ); diff --git a/components/anchor/index.tsx b/components/anchor/index.tsx index a206a84ade..45226e53c8 100644 --- a/components/anchor/index.tsx +++ b/components/anchor/index.tsx @@ -11,6 +11,8 @@ export interface AnchorProps { prefixCls?: string; offsetTop?: number; bounds?: number; + className?: string; + style?: React.CSSProperties; } export default class Anchor extends React.Component { diff --git a/components/anchor/style/index.less b/components/anchor/style/index.less index f73630af72..321e663fec 100644 --- a/components/anchor/style/index.less +++ b/components/anchor/style/index.less @@ -32,7 +32,8 @@ border: 3px solid @primary-color; background-color: white; transition: top .3s ease-in-out; - + left: 50%; + transform: translateX(-50%); &.visible { display: inline-block; } @@ -42,13 +43,13 @@ padding-left: 16px; &-title { - display: inline-block; + display: block; position: relative; + transition: all .3s; + color: @text-color; } - &-active > &-title, - &-title:hover { - cursor: pointer; + &-active > &-title { color: @primary-color; } From 74932b5de9ce65be7290b4ad19caa0275335cd3a Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 9 Nov 2016 14:43:12 +0800 Subject: [PATCH 0657/2145] Add className and style props for Anchor --- components/anchor/AnchorLink.tsx | 4 ++-- components/anchor/index.tsx | 13 +++++++++---- 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/components/anchor/AnchorLink.tsx b/components/anchor/AnchorLink.tsx index 165bcf62c7..5e07602884 100644 --- a/components/anchor/AnchorLink.tsx +++ b/components/anchor/AnchorLink.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import classnames from 'classnames'; +import classNames from 'classnames'; import AnchorHelper, { scrollTo } from './anchorHelper'; export interface AnchorLinkProps { @@ -69,7 +69,7 @@ export default class AnchorLink extends React.Component { const { prefixCls, href, children, title, bounds } = this.props; const { anchorHelper } = this.context; const active = anchorHelper && anchorHelper.getCurrentAnchor(bounds) === href; - const cls = classnames({ + const cls = classNames({ [`${prefixCls}-link`]: true, [`${prefixCls}-link-active`]: active, }); diff --git a/components/anchor/index.tsx b/components/anchor/index.tsx index 45226e53c8..ef76318fd6 100644 --- a/components/anchor/index.tsx +++ b/components/anchor/index.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import className from 'classnames'; +import classNames from 'classnames'; import addEventListener from 'rc-util/lib/Dom/addEventListener'; import AnchorLink from './AnchorLink'; import Affix from '../affix'; @@ -90,16 +90,21 @@ export default class Anchor extends React.Component { } render() { - const { prefixCls, offsetTop } = this.props; + const { prefixCls, offsetTop, style, className = '' } = this.props; const { activeAnchor } = this.state; - const inkClass = className({ + const inkClass = classNames({ [`${prefixCls}-ink-ball`]: true, visible: !!activeAnchor, }); + const wrapperClass = classNames({ + [`${prefixCls}-wrapper`]: true, + [className]: !!className, + }); + return ( -
    +
    From 0baef0627e403de9ecf83b74dbdbb3c57d79a3a9 Mon Sep 17 00:00:00 2001 From: ddcat1115 Date: Wed, 9 Nov 2016 14:43:32 +0800 Subject: [PATCH 0658/2145] =?UTF-8?q?docs:=20=E8=B0=83=E6=95=B4=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E5=AF=BC=E8=88=AA=E7=BB=93=E6=9E=84=20(#3758)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Layout 更名为 Grid --- .lesshintrc | 2 +- components/affix/index.en-US.md | 2 +- components/affix/index.zh-CN.md | 2 +- components/alert/index.en-US.md | 2 +- components/alert/index.zh-CN.md | 2 +- components/auto-complete/index.en-US.md | 2 +- components/auto-complete/index.zh-CN.md | 2 +- components/back-top/index.en-US.md | 2 +- components/back-top/index.zh-CN.md | 2 +- components/badge/index.en-US.md | 2 +- components/badge/index.zh-CN.md | 2 +- components/button/index.en-US.md | 2 +- components/button/index.zh-CN.md | 2 +- components/calendar/index.en-US.md | 2 +- components/calendar/index.zh-CN.md | 2 +- components/card/index.en-US.md | 2 +- components/card/index.zh-CN.md | 2 +- components/carousel/index.en-US.md | 2 +- components/carousel/index.zh-CN.md | 2 +- components/cascader/index.en-US.md | 2 +- components/cascader/index.zh-CN.md | 2 +- components/checkbox/index.en-US.md | 2 +- components/checkbox/index.zh-CN.md | 2 +- components/col/index.tsx | 2 +- components/col/style/index.tsx | 2 +- components/collapse/index.en-US.md | 2 +- components/collapse/index.zh-CN.md | 2 +- components/date-picker/index.en-US.md | 2 +- components/date-picker/index.zh-CN.md | 2 +- components/dropdown/index.en-US.md | 2 +- components/dropdown/index.zh-CN.md | 2 +- components/form/index.en-US.md | 2 +- components/form/index.zh-CN.md | 2 +- components/form/style/index.less | 2 +- components/form/style/index.tsx | 2 +- components/{layout => grid}/col.tsx | 0 components/{layout => grid}/demo/basic.md | 0 components/{layout => grid}/demo/flex-align.md | 0 components/{layout => grid}/demo/flex-order.md | 0 components/{layout => grid}/demo/flex.md | 0 components/{layout => grid}/demo/gutter.md | 0 components/{layout => grid}/demo/offset.md | 0 components/{layout => grid}/demo/reponsive-more.md | 0 components/{layout => grid}/demo/reponsive.md | 0 components/{layout => grid}/demo/sort.md | 0 components/{layout => grid}/index.en-US.md | 6 +++--- components/{layout => grid}/index.tsx | 0 components/{layout => grid}/index.zh-CN.md | 6 +++--- components/{layout => grid}/row.tsx | 0 components/{layout => grid}/style/index.less | 0 components/{layout => grid}/style/index.tsx | 0 components/{layout => grid}/style/mixin.less | 0 components/icon/index.en-US.md | 2 +- components/icon/index.zh-CN.md | 2 +- components/input-number/index.en-US.md | 2 +- components/input-number/index.zh-CN.md | 2 +- components/input/index.en-US.md | 2 +- components/input/index.zh-CN.md | 2 +- components/locale-provider/index.en-US.md | 2 +- components/locale-provider/index.zh-CN.md | 2 +- components/mention/index.en-US.md | 2 +- components/mention/index.zh-CN.md | 2 +- components/message/index.en-US.md | 2 +- components/message/index.zh-CN.md | 2 +- components/modal/index.en-US.md | 2 +- components/modal/index.zh-CN.md | 2 +- components/notification/index.en-US.md | 2 +- components/notification/index.zh-CN.md | 2 +- components/popconfirm/index.en-US.md | 2 +- components/popconfirm/index.zh-CN.md | 2 +- components/popover/index.en-US.md | 2 +- components/popover/index.zh-CN.md | 2 +- components/progress/index.en-US.md | 2 +- components/progress/index.zh-CN.md | 2 +- components/radio/index.en-US.md | 2 +- components/radio/index.zh-CN.md | 2 +- components/rate/index.en-US.md | 2 +- components/rate/index.zh-CN.md | 2 +- components/row/index.tsx | 2 +- components/row/style/index.tsx | 2 +- components/select/index.en-US.md | 2 +- components/select/index.zh-CN.md | 2 +- components/slider/index.en-US.md | 2 +- components/slider/index.zh-CN.md | 2 +- components/spin/index.en-US.md | 2 +- components/spin/index.zh-CN.md | 2 +- components/switch/index.en-US.md | 2 +- components/switch/index.zh-CN.md | 2 +- components/table/index.en-US.md | 2 +- components/table/index.zh-CN.md | 2 +- components/tag/index.en-US.md | 2 +- components/tag/index.zh-CN.md | 2 +- components/time-picker/index.en-US.md | 2 +- components/time-picker/index.zh-CN.md | 2 +- components/timeline/index.en-US.md | 2 +- components/timeline/index.zh-CN.md | 2 +- components/tooltip/index.en-US.md | 2 +- components/tooltip/index.zh-CN.md | 2 +- components/transfer/index.en-US.md | 2 +- components/transfer/index.zh-CN.md | 2 +- components/tree-select/index.en-US.md | 2 +- components/tree-select/index.zh-CN.md | 2 +- components/tree/index.en-US.md | 2 +- components/tree/index.zh-CN.md | 2 +- components/upload/index.en-US.md | 2 +- components/upload/index.zh-CN.md | 2 +- site/theme/index.js | 12 +++++++----- site/theme/static/markdown.less | 4 ++-- tests/layout.test.js | 4 ++-- 109 files changed, 106 insertions(+), 104 deletions(-) rename components/{layout => grid}/col.tsx (100%) rename components/{layout => grid}/demo/basic.md (100%) rename components/{layout => grid}/demo/flex-align.md (100%) rename components/{layout => grid}/demo/flex-order.md (100%) rename components/{layout => grid}/demo/flex.md (100%) rename components/{layout => grid}/demo/gutter.md (100%) rename components/{layout => grid}/demo/offset.md (100%) rename components/{layout => grid}/demo/reponsive-more.md (100%) rename components/{layout => grid}/demo/reponsive.md (100%) rename components/{layout => grid}/demo/sort.md (100%) rename components/{layout => grid}/index.en-US.md (98%) rename components/{layout => grid}/index.tsx (100%) rename components/{layout => grid}/index.zh-CN.md (98%) rename components/{layout => grid}/row.tsx (100%) rename components/{layout => grid}/style/index.less (100%) rename components/{layout => grid}/style/index.tsx (100%) rename components/{layout => grid}/style/mixin.less (100%) diff --git a/.lesshintrc b/.lesshintrc index 64c458cff1..09df84a9dc 100644 --- a/.lesshintrc +++ b/.lesshintrc @@ -12,7 +12,7 @@ "newlineAfterBlock": false, "maxCharPerLine": false, "excludedFiles": [ - "components/layout/style/mixin.less", + "components/grid/style/mixin.less", "components/style/core/base.less", "components/style/core/iconfont.less", "components/style/core/normalize.less", diff --git a/components/affix/index.en-US.md b/components/affix/index.en-US.md index c8d88a3267..f939a0abeb 100644 --- a/components/affix/index.en-US.md +++ b/components/affix/index.en-US.md @@ -1,6 +1,6 @@ --- category: Components -type: Other +type: Navigation title: Affix --- diff --git a/components/affix/index.zh-CN.md b/components/affix/index.zh-CN.md index 531bed8ddd..1248efc396 100644 --- a/components/affix/index.zh-CN.md +++ b/components/affix/index.zh-CN.md @@ -1,7 +1,7 @@ --- category: Components subtitle: 固钉 -type: Other +type: Navigation title: Affix --- diff --git a/components/alert/index.en-US.md b/components/alert/index.en-US.md index 0a711d30c2..5b9ee80a5a 100644 --- a/components/alert/index.en-US.md +++ b/components/alert/index.en-US.md @@ -1,6 +1,6 @@ --- category: Components -type: Views +type: Feedback title: Alert --- diff --git a/components/alert/index.zh-CN.md b/components/alert/index.zh-CN.md index 978d50d289..9bf91f7e62 100644 --- a/components/alert/index.zh-CN.md +++ b/components/alert/index.zh-CN.md @@ -1,7 +1,7 @@ --- category: Components subtitle: 警告提示 -type: Views +type: Feedback title: Alert --- diff --git a/components/auto-complete/index.en-US.md b/components/auto-complete/index.en-US.md index 61653be008..e49e6bd4c0 100644 --- a/components/auto-complete/index.en-US.md +++ b/components/auto-complete/index.en-US.md @@ -1,6 +1,6 @@ --- category: Components -type: Form Controls +type: Data Entry cols: 1 title: AutoComplete --- diff --git a/components/auto-complete/index.zh-CN.md b/components/auto-complete/index.zh-CN.md index 65293f80db..f2fa375d0e 100644 --- a/components/auto-complete/index.zh-CN.md +++ b/components/auto-complete/index.zh-CN.md @@ -1,7 +1,7 @@ --- category: Components subtitle: 自动完成 -type: Form Controls +type: Data Entry cols: 1 title: AutoComplete --- diff --git a/components/back-top/index.en-US.md b/components/back-top/index.en-US.md index 91a54eea1b..0c04f41619 100644 --- a/components/back-top/index.en-US.md +++ b/components/back-top/index.en-US.md @@ -1,6 +1,6 @@ --- category: Components -type: Other +type: Navigation title: BackTop --- diff --git a/components/back-top/index.zh-CN.md b/components/back-top/index.zh-CN.md index e02f593d40..f6dc13920d 100644 --- a/components/back-top/index.zh-CN.md +++ b/components/back-top/index.zh-CN.md @@ -1,6 +1,6 @@ --- category: Components -type: Other +type: Navigation subtitle: 回到顶部 title: BackTop --- diff --git a/components/badge/index.en-US.md b/components/badge/index.en-US.md index 3299fee4ff..df6aaec0d4 100644 --- a/components/badge/index.en-US.md +++ b/components/badge/index.en-US.md @@ -1,6 +1,6 @@ --- category: Components -type: Views +type: Data Display title: Badge --- diff --git a/components/badge/index.zh-CN.md b/components/badge/index.zh-CN.md index d2c73cfe38..27eb3986aa 100644 --- a/components/badge/index.zh-CN.md +++ b/components/badge/index.zh-CN.md @@ -1,7 +1,7 @@ --- category: Components subtitle: 徽标数 -type: Views +type: Data Display title: Badge --- diff --git a/components/button/index.en-US.md b/components/button/index.en-US.md index 993135178b..51f12d8f43 100644 --- a/components/button/index.en-US.md +++ b/components/button/index.en-US.md @@ -1,6 +1,6 @@ --- category: Components -type: Basic +type: General title: Button --- diff --git a/components/button/index.zh-CN.md b/components/button/index.zh-CN.md index 6c34fa30af..8f09d36e8f 100644 --- a/components/button/index.zh-CN.md +++ b/components/button/index.zh-CN.md @@ -1,6 +1,6 @@ --- category: Components -type: Basic +type: General title: Button subtitle: 按钮 --- diff --git a/components/calendar/index.en-US.md b/components/calendar/index.en-US.md index 2b157a94f9..3954d32eb6 100644 --- a/components/calendar/index.en-US.md +++ b/components/calendar/index.en-US.md @@ -1,6 +1,6 @@ --- category: Components -type: Views +type: Data Display cols: 1 title: Calendar --- diff --git a/components/calendar/index.zh-CN.md b/components/calendar/index.zh-CN.md index bb83cd9cf4..892dff8253 100644 --- a/components/calendar/index.zh-CN.md +++ b/components/calendar/index.zh-CN.md @@ -1,6 +1,6 @@ --- category: Components -type: Views +type: Data Display subtitle: 日历 cols: 1 title: Calendar diff --git a/components/card/index.en-US.md b/components/card/index.en-US.md index 00e78e5292..d40391c00b 100644 --- a/components/card/index.en-US.md +++ b/components/card/index.en-US.md @@ -1,6 +1,6 @@ --- category: Components -type: Views +type: Data Display title: Card cols: 1 --- diff --git a/components/card/index.zh-CN.md b/components/card/index.zh-CN.md index 58dffef938..4b1a8f4df0 100644 --- a/components/card/index.zh-CN.md +++ b/components/card/index.zh-CN.md @@ -1,6 +1,6 @@ --- category: Components -type: Views +type: Data Display title: Card subtitle: 卡片 cols: 1 diff --git a/components/carousel/index.en-US.md b/components/carousel/index.en-US.md index 7855b0f134..890dd85965 100644 --- a/components/carousel/index.en-US.md +++ b/components/carousel/index.en-US.md @@ -1,6 +1,6 @@ --- category: Components -type: Views +type: Data Display title: Carousel --- diff --git a/components/carousel/index.zh-CN.md b/components/carousel/index.zh-CN.md index a208db80a5..12fbf9dd7b 100644 --- a/components/carousel/index.zh-CN.md +++ b/components/carousel/index.zh-CN.md @@ -1,6 +1,6 @@ --- category: Components -type: Views +type: Data Display title: Carousel subtitle: 走马灯 --- diff --git a/components/cascader/index.en-US.md b/components/cascader/index.en-US.md index e57b91f642..b8d7cd2310 100644 --- a/components/cascader/index.en-US.md +++ b/components/cascader/index.en-US.md @@ -1,6 +1,6 @@ --- category: Components -type: Form Controls +type: Data Entry title: Cascader --- diff --git a/components/cascader/index.zh-CN.md b/components/cascader/index.zh-CN.md index 72b94dfe49..2d316f2d9c 100644 --- a/components/cascader/index.zh-CN.md +++ b/components/cascader/index.zh-CN.md @@ -1,6 +1,6 @@ --- category: Components -type: Form Controls +type: Data Entry title: Cascader subtitle: 级联选择 --- diff --git a/components/checkbox/index.en-US.md b/components/checkbox/index.en-US.md index b8add7624e..43b5a54a13 100644 --- a/components/checkbox/index.en-US.md +++ b/components/checkbox/index.en-US.md @@ -1,6 +1,6 @@ --- category: Components -type: Form Controls +type: Data Entry title: Checkbox --- diff --git a/components/checkbox/index.zh-CN.md b/components/checkbox/index.zh-CN.md index 85d98c807b..5992304558 100644 --- a/components/checkbox/index.zh-CN.md +++ b/components/checkbox/index.zh-CN.md @@ -1,7 +1,7 @@ --- category: Components subtitle: 多选框 -type: Form Controls +type: Data Entry title: Checkbox --- diff --git a/components/col/index.tsx b/components/col/index.tsx index 752938c58d..4bf59d7c27 100644 --- a/components/col/index.tsx +++ b/components/col/index.tsx @@ -1,2 +1,2 @@ -import { Col } from '../layout'; +import { Col } from '../grid'; export default Col; diff --git a/components/col/style/index.tsx b/components/col/style/index.tsx index 875df4fa55..cc2ae69eee 100644 --- a/components/col/style/index.tsx +++ b/components/col/style/index.tsx @@ -1,2 +1,2 @@ import '../../style/index.less'; -import '../../layout/style/index.less'; +import '../../grid/style/index.less'; diff --git a/components/collapse/index.en-US.md b/components/collapse/index.en-US.md index 84b019e972..2d0fa95d9a 100644 --- a/components/collapse/index.en-US.md +++ b/components/collapse/index.en-US.md @@ -1,6 +1,6 @@ --- category: Components -type: Views +type: Data Display title: Collapse cols: 1 --- diff --git a/components/collapse/index.zh-CN.md b/components/collapse/index.zh-CN.md index c25339dcd3..ff2cebf214 100644 --- a/components/collapse/index.zh-CN.md +++ b/components/collapse/index.zh-CN.md @@ -1,6 +1,6 @@ --- category: Components -type: Views +type: Data Display title: Collapse subtitle: 折叠面板 cols: 1 diff --git a/components/date-picker/index.en-US.md b/components/date-picker/index.en-US.md index 4b75e4227b..5d30ef98b8 100644 --- a/components/date-picker/index.en-US.md +++ b/components/date-picker/index.en-US.md @@ -1,6 +1,6 @@ --- category: Components -type: Form Controls +type: Data Entry title: DatePicker --- diff --git a/components/date-picker/index.zh-CN.md b/components/date-picker/index.zh-CN.md index 1fdd800d0e..a424c9d938 100644 --- a/components/date-picker/index.zh-CN.md +++ b/components/date-picker/index.zh-CN.md @@ -1,6 +1,6 @@ --- category: Components -type: Form Controls +type: Data Entry title: DatePicker subtitle: 日期选择框 --- diff --git a/components/dropdown/index.en-US.md b/components/dropdown/index.en-US.md index 9497ffc1f8..cd2c9f8143 100644 --- a/components/dropdown/index.en-US.md +++ b/components/dropdown/index.en-US.md @@ -1,6 +1,6 @@ --- category: Components -type: Views +type: Navigation title: Dropdown --- diff --git a/components/dropdown/index.zh-CN.md b/components/dropdown/index.zh-CN.md index 134beb0e72..625317861e 100644 --- a/components/dropdown/index.zh-CN.md +++ b/components/dropdown/index.zh-CN.md @@ -1,7 +1,7 @@ --- category: Components subtitle: 下拉菜单 -type: Views +type: Navigation title: Dropdown --- diff --git a/components/form/index.en-US.md b/components/form/index.en-US.md index e16e7e02ee..8cf1f640a3 100644 --- a/components/form/index.en-US.md +++ b/components/form/index.en-US.md @@ -1,6 +1,6 @@ --- category: Components -type: Form Controls +type: Data Entry cols: 1 title: Form --- diff --git a/components/form/index.zh-CN.md b/components/form/index.zh-CN.md index a0004c8df6..aaa25a42a0 100644 --- a/components/form/index.zh-CN.md +++ b/components/form/index.zh-CN.md @@ -1,7 +1,7 @@ --- category: Components subtitle: 表单 -type: Form Controls +type: Data Entry cols: 1 title: Form --- diff --git a/components/form/style/index.less b/components/form/style/index.less index b84d914dfd..6be2fdefd3 100644 --- a/components/form/style/index.less +++ b/components/form/style/index.less @@ -2,7 +2,7 @@ @import "../../style/mixins/index"; @import "../../input/style/mixin"; @import "../../button/style/mixin"; -@import "../../layout/style/mixin"; +@import "../../grid/style/mixin"; @import "./mixin"; @form-prefix-cls: ~"@{ant-prefix}-form"; diff --git a/components/form/style/index.tsx b/components/form/style/index.tsx index eebb04b5f1..30c84ff816 100644 --- a/components/form/style/index.tsx +++ b/components/form/style/index.tsx @@ -2,4 +2,4 @@ import '../../style/index.less'; import './index.less'; // style dependencies -import '../../layout/style'; +import '../../grid/style'; diff --git a/components/layout/col.tsx b/components/grid/col.tsx similarity index 100% rename from components/layout/col.tsx rename to components/grid/col.tsx diff --git a/components/layout/demo/basic.md b/components/grid/demo/basic.md similarity index 100% rename from components/layout/demo/basic.md rename to components/grid/demo/basic.md diff --git a/components/layout/demo/flex-align.md b/components/grid/demo/flex-align.md similarity index 100% rename from components/layout/demo/flex-align.md rename to components/grid/demo/flex-align.md diff --git a/components/layout/demo/flex-order.md b/components/grid/demo/flex-order.md similarity index 100% rename from components/layout/demo/flex-order.md rename to components/grid/demo/flex-order.md diff --git a/components/layout/demo/flex.md b/components/grid/demo/flex.md similarity index 100% rename from components/layout/demo/flex.md rename to components/grid/demo/flex.md diff --git a/components/layout/demo/gutter.md b/components/grid/demo/gutter.md similarity index 100% rename from components/layout/demo/gutter.md rename to components/grid/demo/gutter.md diff --git a/components/layout/demo/offset.md b/components/grid/demo/offset.md similarity index 100% rename from components/layout/demo/offset.md rename to components/grid/demo/offset.md diff --git a/components/layout/demo/reponsive-more.md b/components/grid/demo/reponsive-more.md similarity index 100% rename from components/layout/demo/reponsive-more.md rename to components/grid/demo/reponsive-more.md diff --git a/components/layout/demo/reponsive.md b/components/grid/demo/reponsive.md similarity index 100% rename from components/layout/demo/reponsive.md rename to components/grid/demo/reponsive.md diff --git a/components/layout/demo/sort.md b/components/grid/demo/sort.md similarity index 100% rename from components/layout/demo/sort.md rename to components/grid/demo/sort.md diff --git a/components/layout/index.en-US.md b/components/grid/index.en-US.md similarity index 98% rename from components/layout/index.en-US.md rename to components/grid/index.en-US.md index 96f7c2514a..702b790f6a 100644 --- a/components/layout/index.en-US.md +++ b/components/grid/index.en-US.md @@ -1,15 +1,15 @@ --- category: Components -type: Basic +type: Layout cols: 1 -title: Layout +title: Grid --- 24 Grids System。 ## Design concept -
    +
    100% diff --git a/components/layout/index.tsx b/components/grid/index.tsx similarity index 100% rename from components/layout/index.tsx rename to components/grid/index.tsx diff --git a/components/layout/index.zh-CN.md b/components/grid/index.zh-CN.md similarity index 98% rename from components/layout/index.zh-CN.md rename to components/grid/index.zh-CN.md index 1267d4ef87..afb0fb9484 100644 --- a/components/layout/index.zh-CN.md +++ b/components/grid/index.zh-CN.md @@ -1,16 +1,16 @@ --- category: Components subtitle: 栅格 -type: Basic +type: Layout cols: 1 -title: Layout +title: Grid --- 24 栅格系统。 ## 设计理念 -
    +
    100% diff --git a/components/layout/row.tsx b/components/grid/row.tsx similarity index 100% rename from components/layout/row.tsx rename to components/grid/row.tsx diff --git a/components/layout/style/index.less b/components/grid/style/index.less similarity index 100% rename from components/layout/style/index.less rename to components/grid/style/index.less diff --git a/components/layout/style/index.tsx b/components/grid/style/index.tsx similarity index 100% rename from components/layout/style/index.tsx rename to components/grid/style/index.tsx diff --git a/components/layout/style/mixin.less b/components/grid/style/mixin.less similarity index 100% rename from components/layout/style/mixin.less rename to components/grid/style/mixin.less diff --git a/components/icon/index.en-US.md b/components/icon/index.en-US.md index 340018ad69..4a6779b3fe 100644 --- a/components/icon/index.en-US.md +++ b/components/icon/index.en-US.md @@ -1,6 +1,6 @@ --- category: Components -type: Basic +type: General title: Icon toc: false --- diff --git a/components/icon/index.zh-CN.md b/components/icon/index.zh-CN.md index 4efe8d1f51..39fd4be213 100644 --- a/components/icon/index.zh-CN.md +++ b/components/icon/index.zh-CN.md @@ -1,7 +1,7 @@ --- category: Components subtitle: 图标 -type: Basic +type: General title: Icon toc: false --- diff --git a/components/input-number/index.en-US.md b/components/input-number/index.en-US.md index 0e2c327e47..1cd9dd7b54 100644 --- a/components/input-number/index.en-US.md +++ b/components/input-number/index.en-US.md @@ -1,6 +1,6 @@ --- category: Components -type: Form Controls +type: Data Entry title: InputNumber --- diff --git a/components/input-number/index.zh-CN.md b/components/input-number/index.zh-CN.md index 50f96ac84e..cf80721934 100644 --- a/components/input-number/index.zh-CN.md +++ b/components/input-number/index.zh-CN.md @@ -1,7 +1,7 @@ --- category: Components subtitle: 数字输入框 -type: Form Controls +type: Data Entry title: InputNumber --- diff --git a/components/input/index.en-US.md b/components/input/index.en-US.md index e5012f3016..e82d2f4497 100644 --- a/components/input/index.en-US.md +++ b/components/input/index.en-US.md @@ -1,6 +1,6 @@ --- category: Components -type: Form Controls +type: Data Entry title: Input --- diff --git a/components/input/index.zh-CN.md b/components/input/index.zh-CN.md index 3af2ce0588..7e5582b77a 100644 --- a/components/input/index.zh-CN.md +++ b/components/input/index.zh-CN.md @@ -1,7 +1,7 @@ --- category: Components subtitle: 输入框 -type: Form Controls +type: Data Entry title: Input --- diff --git a/components/locale-provider/index.en-US.md b/components/locale-provider/index.en-US.md index 4e28155193..85f6618687 100644 --- a/components/locale-provider/index.en-US.md +++ b/components/locale-provider/index.en-US.md @@ -1,6 +1,6 @@ --- category: Components -type: Other +type: Localization cols: 1 title: LocaleProvider --- diff --git a/components/locale-provider/index.zh-CN.md b/components/locale-provider/index.zh-CN.md index 5cd04cd982..232ee1224b 100644 --- a/components/locale-provider/index.zh-CN.md +++ b/components/locale-provider/index.zh-CN.md @@ -2,7 +2,7 @@ category: Components subtitle: 国际化 cols: 1 -type: Other +type: Localization title: LocaleProvider --- diff --git a/components/mention/index.en-US.md b/components/mention/index.en-US.md index e011ad30f8..8969714000 100644 --- a/components/mention/index.en-US.md +++ b/components/mention/index.en-US.md @@ -1,6 +1,6 @@ --- category: Components -type: Views +type: Data Entry title: Mention --- diff --git a/components/mention/index.zh-CN.md b/components/mention/index.zh-CN.md index 4a2b2bff23..245c1025b9 100644 --- a/components/mention/index.zh-CN.md +++ b/components/mention/index.zh-CN.md @@ -1,7 +1,7 @@ --- category: Components subtitle: 提及 -type: Views +type: Data Entry title: Mention --- diff --git a/components/message/index.en-US.md b/components/message/index.en-US.md index 231112ff30..388fcb87ca 100644 --- a/components/message/index.en-US.md +++ b/components/message/index.en-US.md @@ -1,6 +1,6 @@ --- category: Components -type: Views +type: Feedback noinstant: true title: Message --- diff --git a/components/message/index.zh-CN.md b/components/message/index.zh-CN.md index 0d8911303a..d47a4d2868 100644 --- a/components/message/index.zh-CN.md +++ b/components/message/index.zh-CN.md @@ -1,7 +1,7 @@ --- category: Components subtitle: 全局提示 -type: Views +type: Feedback noinstant: true title: Message --- diff --git a/components/modal/index.en-US.md b/components/modal/index.en-US.md index 39fd5641f5..7b7f882d52 100644 --- a/components/modal/index.en-US.md +++ b/components/modal/index.en-US.md @@ -1,5 +1,5 @@ --- -type: Views +type: Feedback category: Components title: Modal --- diff --git a/components/modal/index.zh-CN.md b/components/modal/index.zh-CN.md index e733af2025..c6eead3e81 100644 --- a/components/modal/index.zh-CN.md +++ b/components/modal/index.zh-CN.md @@ -1,5 +1,5 @@ --- -type: Views +type: Feedback category: Components subtitle: 对话框 title: Modal diff --git a/components/notification/index.en-US.md b/components/notification/index.en-US.md index 330760fda3..83c1622cdb 100644 --- a/components/notification/index.en-US.md +++ b/components/notification/index.en-US.md @@ -1,6 +1,6 @@ --- category: Components -type: Views +type: Feedback noinstant: true title: Notification --- diff --git a/components/notification/index.zh-CN.md b/components/notification/index.zh-CN.md index 6c4276360f..b578b825ef 100644 --- a/components/notification/index.zh-CN.md +++ b/components/notification/index.zh-CN.md @@ -1,6 +1,6 @@ --- category: Components -type: Views +type: Feedback noinstant: true title: Notification subtitle: 通知提醒框 diff --git a/components/popconfirm/index.en-US.md b/components/popconfirm/index.en-US.md index d31f5bb77f..982b92a1d4 100644 --- a/components/popconfirm/index.en-US.md +++ b/components/popconfirm/index.en-US.md @@ -1,6 +1,6 @@ --- category: Components -type: Views +type: Feedback title: Popconfirm --- diff --git a/components/popconfirm/index.zh-CN.md b/components/popconfirm/index.zh-CN.md index 09ad9caf10..279eec9342 100644 --- a/components/popconfirm/index.zh-CN.md +++ b/components/popconfirm/index.zh-CN.md @@ -1,7 +1,7 @@ --- category: Components subtitle: 气泡确认框 -type: Views +type: Feedback title: Popconfirm --- diff --git a/components/popover/index.en-US.md b/components/popover/index.en-US.md index e77474eed4..3788a28702 100644 --- a/components/popover/index.en-US.md +++ b/components/popover/index.en-US.md @@ -1,6 +1,6 @@ --- category: Components -type: Views +type: Data Display title: Popover --- diff --git a/components/popover/index.zh-CN.md b/components/popover/index.zh-CN.md index db64047d2a..fec1bde0c7 100644 --- a/components/popover/index.zh-CN.md +++ b/components/popover/index.zh-CN.md @@ -1,7 +1,7 @@ --- category: Components subtitle: 气泡卡片 -type: Views +type: Data Display title: Popover --- diff --git a/components/progress/index.en-US.md b/components/progress/index.en-US.md index 5475a0746a..595386f8ef 100644 --- a/components/progress/index.en-US.md +++ b/components/progress/index.en-US.md @@ -1,6 +1,6 @@ --- category: Components -type: Views +type: Feedback title: Progress --- diff --git a/components/progress/index.zh-CN.md b/components/progress/index.zh-CN.md index 83ec1b3216..512d73beb9 100644 --- a/components/progress/index.zh-CN.md +++ b/components/progress/index.zh-CN.md @@ -1,7 +1,7 @@ --- category: Components subtitle: 进度条 -type: Views +type: Feedback title: Progress --- diff --git a/components/radio/index.en-US.md b/components/radio/index.en-US.md index 585c7ea11b..838188b52f 100644 --- a/components/radio/index.en-US.md +++ b/components/radio/index.en-US.md @@ -1,6 +1,6 @@ --- category: Components -type: Form Controls +type: Data Entry title: Radio --- diff --git a/components/radio/index.zh-CN.md b/components/radio/index.zh-CN.md index 8a4ab7b72f..b4e3843ea6 100644 --- a/components/radio/index.zh-CN.md +++ b/components/radio/index.zh-CN.md @@ -1,7 +1,7 @@ --- category: Components subtitle: 单选框 -type: Form Controls +type: Data Entry title: Radio --- diff --git a/components/rate/index.en-US.md b/components/rate/index.en-US.md index 640e042fec..f98c186c14 100644 --- a/components/rate/index.en-US.md +++ b/components/rate/index.en-US.md @@ -1,6 +1,6 @@ --- category: Components -type: Form Controls +type: Data Entry title: Rate --- diff --git a/components/rate/index.zh-CN.md b/components/rate/index.zh-CN.md index 7bcb7efa9b..b41b2c4a05 100644 --- a/components/rate/index.zh-CN.md +++ b/components/rate/index.zh-CN.md @@ -1,7 +1,7 @@ --- category: Components subtitle: 评分 -type: Form Controls +type: Data Entry title: Rate --- diff --git a/components/row/index.tsx b/components/row/index.tsx index a17e1a2c22..3bba089796 100644 --- a/components/row/index.tsx +++ b/components/row/index.tsx @@ -1,2 +1,2 @@ -import { Row } from '../layout'; +import { Row } from '../grid'; export default Row; diff --git a/components/row/style/index.tsx b/components/row/style/index.tsx index 875df4fa55..cc2ae69eee 100644 --- a/components/row/style/index.tsx +++ b/components/row/style/index.tsx @@ -1,2 +1,2 @@ import '../../style/index.less'; -import '../../layout/style/index.less'; +import '../../grid/style/index.less'; diff --git a/components/select/index.en-US.md b/components/select/index.en-US.md index d0972e59e0..5f76069034 100644 --- a/components/select/index.en-US.md +++ b/components/select/index.en-US.md @@ -1,6 +1,6 @@ --- category: Components -type: Form Controls +type: Data Entry title: Select --- diff --git a/components/select/index.zh-CN.md b/components/select/index.zh-CN.md index eb9fa137e0..e6c3e978fc 100644 --- a/components/select/index.zh-CN.md +++ b/components/select/index.zh-CN.md @@ -1,7 +1,7 @@ --- category: Components subtitle: 选择器 -type: Form Controls +type: Data Entry title: Select --- diff --git a/components/slider/index.en-US.md b/components/slider/index.en-US.md index 555e88c791..113327ceab 100644 --- a/components/slider/index.en-US.md +++ b/components/slider/index.en-US.md @@ -1,6 +1,6 @@ --- category: Components -type: Form Controls +type: Data Entry title: Slider --- diff --git a/components/slider/index.zh-CN.md b/components/slider/index.zh-CN.md index 6acc226996..0a09e6a378 100644 --- a/components/slider/index.zh-CN.md +++ b/components/slider/index.zh-CN.md @@ -1,7 +1,7 @@ --- category: Components subtitle: 滑动输入条 -type: Form Controls +type: Data Entry title: Slider --- diff --git a/components/spin/index.en-US.md b/components/spin/index.en-US.md index fa918b455e..bbb2131ea7 100644 --- a/components/spin/index.en-US.md +++ b/components/spin/index.en-US.md @@ -1,6 +1,6 @@ --- category: Components -type: Other +type: Feedback title: Spin --- diff --git a/components/spin/index.zh-CN.md b/components/spin/index.zh-CN.md index de34fe25c6..92a8d9f782 100644 --- a/components/spin/index.zh-CN.md +++ b/components/spin/index.zh-CN.md @@ -1,6 +1,6 @@ --- category: Components -type: Other +type: Feedback title: Spin subtitle: 加载中 --- diff --git a/components/switch/index.en-US.md b/components/switch/index.en-US.md index e0ceaf1619..c1c827d067 100644 --- a/components/switch/index.en-US.md +++ b/components/switch/index.en-US.md @@ -1,6 +1,6 @@ --- category: Components -type: Form Controls +type: Data Entry title: Switch --- diff --git a/components/switch/index.zh-CN.md b/components/switch/index.zh-CN.md index 6f841f54c2..ad73e2de5d 100644 --- a/components/switch/index.zh-CN.md +++ b/components/switch/index.zh-CN.md @@ -1,7 +1,7 @@ --- category: Components subtitle: 开关 -type: Form Controls +type: Data Entry title: Switch --- diff --git a/components/table/index.en-US.md b/components/table/index.en-US.md index d7d6ee69b4..7d84d059d8 100644 --- a/components/table/index.en-US.md +++ b/components/table/index.en-US.md @@ -1,7 +1,7 @@ --- category: Components cols: 1 -type: Views +type: Data Display title: Table --- diff --git a/components/table/index.zh-CN.md b/components/table/index.zh-CN.md index 65c108518e..00816fadfd 100644 --- a/components/table/index.zh-CN.md +++ b/components/table/index.zh-CN.md @@ -1,7 +1,7 @@ --- category: Components cols: 1 -type: Views +type: Data Display title: Table subtitle: 表格 --- diff --git a/components/tag/index.en-US.md b/components/tag/index.en-US.md index 31d507f353..835fae246d 100644 --- a/components/tag/index.en-US.md +++ b/components/tag/index.en-US.md @@ -1,6 +1,6 @@ --- category: Components -type: Views +type: Data Display title: Tag --- diff --git a/components/tag/index.zh-CN.md b/components/tag/index.zh-CN.md index 0964839737..4e23029349 100644 --- a/components/tag/index.zh-CN.md +++ b/components/tag/index.zh-CN.md @@ -1,7 +1,7 @@ --- category: Components subtitle: 标签 -type: Views +type: Data Display title: Tag --- diff --git a/components/time-picker/index.en-US.md b/components/time-picker/index.en-US.md index 4379bcf34a..580c6269a9 100644 --- a/components/time-picker/index.en-US.md +++ b/components/time-picker/index.en-US.md @@ -1,6 +1,6 @@ --- category: Components -type: Form Controls +type: Data Entry title: TimePicker --- diff --git a/components/time-picker/index.zh-CN.md b/components/time-picker/index.zh-CN.md index e2852fdced..d79501d8e5 100644 --- a/components/time-picker/index.zh-CN.md +++ b/components/time-picker/index.zh-CN.md @@ -1,7 +1,7 @@ --- category: Components subtitle: 时间选择框 -type: Form Controls +type: Data Entry title: TimePicker --- diff --git a/components/timeline/index.en-US.md b/components/timeline/index.en-US.md index 220391770c..f64c907ab2 100644 --- a/components/timeline/index.en-US.md +++ b/components/timeline/index.en-US.md @@ -1,6 +1,6 @@ --- category: Components -type: Views +type: Data Display title: Timeline --- diff --git a/components/timeline/index.zh-CN.md b/components/timeline/index.zh-CN.md index f246c81075..c633961efb 100644 --- a/components/timeline/index.zh-CN.md +++ b/components/timeline/index.zh-CN.md @@ -1,7 +1,7 @@ --- category: Components subtitle: 时间轴 -type: Views +type: Data Display title: Timeline --- diff --git a/components/tooltip/index.en-US.md b/components/tooltip/index.en-US.md index 6d92d208e5..7fe5660ec5 100644 --- a/components/tooltip/index.en-US.md +++ b/components/tooltip/index.en-US.md @@ -1,6 +1,6 @@ --- category: Components -type: Views +type: Data Display title: Tooltip --- diff --git a/components/tooltip/index.zh-CN.md b/components/tooltip/index.zh-CN.md index 8df6f80814..5a83cdd701 100644 --- a/components/tooltip/index.zh-CN.md +++ b/components/tooltip/index.zh-CN.md @@ -1,7 +1,7 @@ --- category: Components subtitle: 文字提示 -type: Views +type: Data Display title: Tooltip --- diff --git a/components/transfer/index.en-US.md b/components/transfer/index.en-US.md index 24a29fabfd..b22d828389 100644 --- a/components/transfer/index.en-US.md +++ b/components/transfer/index.en-US.md @@ -1,6 +1,6 @@ --- category: Components -type: Form Controls +type: Data Entry cols: 1 title: Transfer --- diff --git a/components/transfer/index.zh-CN.md b/components/transfer/index.zh-CN.md index ad51bb1720..4165be073e 100644 --- a/components/transfer/index.zh-CN.md +++ b/components/transfer/index.zh-CN.md @@ -1,7 +1,7 @@ --- category: Components subtitle: 穿梭框 -type: Form Controls +type: Data Entry cols: 1 title: Transfer --- diff --git a/components/tree-select/index.en-US.md b/components/tree-select/index.en-US.md index ff048bb6c4..c1087f8774 100644 --- a/components/tree-select/index.en-US.md +++ b/components/tree-select/index.en-US.md @@ -1,6 +1,6 @@ --- category: Components -type: Form Controls +type: Data Entry title: TreeSelect --- diff --git a/components/tree-select/index.zh-CN.md b/components/tree-select/index.zh-CN.md index 5361dedd86..767dbe06c0 100644 --- a/components/tree-select/index.zh-CN.md +++ b/components/tree-select/index.zh-CN.md @@ -1,7 +1,7 @@ --- category: Components subtitle: 树选择 -type: Form Controls +type: Data Entry title: TreeSelect --- diff --git a/components/tree/index.en-US.md b/components/tree/index.en-US.md index faf3bd75ee..9b632becb9 100644 --- a/components/tree/index.en-US.md +++ b/components/tree/index.en-US.md @@ -1,6 +1,6 @@ --- category: Components -type: Views +type: Data Display title: Tree --- diff --git a/components/tree/index.zh-CN.md b/components/tree/index.zh-CN.md index 67654bc620..a86d261afc 100644 --- a/components/tree/index.zh-CN.md +++ b/components/tree/index.zh-CN.md @@ -1,6 +1,6 @@ --- category: Components -type: Views +type: Data Display title: Tree subtitle: 树形控件 --- diff --git a/components/upload/index.en-US.md b/components/upload/index.en-US.md index 45bbc5a5e9..02524de411 100644 --- a/components/upload/index.en-US.md +++ b/components/upload/index.en-US.md @@ -1,6 +1,6 @@ --- category: Components -type: Form Controls +type: Data Entry title: Upload --- diff --git a/components/upload/index.zh-CN.md b/components/upload/index.zh-CN.md index a1d9c5b632..e53513b4a3 100644 --- a/components/upload/index.zh-CN.md +++ b/components/upload/index.zh-CN.md @@ -1,7 +1,7 @@ --- category: Components subtitle: 上传 -type: Form Controls +type: Data Entry title: Upload --- diff --git a/site/theme/index.js b/site/theme/index.js index 711f478ce7..c4f50fa842 100644 --- a/site/theme/index.js +++ b/site/theme/index.js @@ -8,11 +8,13 @@ module.exports = { 'Design Fundamental': 1, }, typeOrder: { - Basic: 0, - 'Form Controls': 1, - Views: 2, - Navigation: 3, - Other: 4, + General: 0, + Layout: 1, + Navigation: 2, + 'Data Entry': 3, + 'Data Display': 4, + Feedback: 5, + Localization: 6, }, docVersions: { '0.9.x': 'http://09x.ant.design', diff --git a/site/theme/static/markdown.less b/site/theme/static/markdown.less index 455d4bf8e5..e65417c4e8 100644 --- a/site/theme/static/markdown.less +++ b/site/theme/static/markdown.less @@ -221,8 +221,8 @@ } } -.layout-demo, -[id^="components-layout-demo-"] { +.grid-demo, +[id^="components-grid-demo-"] { .demo-row, .code-box-demo .demo-row { background-image: linear-gradient(90deg, #F5F5F5 4.16666667%, transparent 4.16666667%, transparent 8.33333333%, #F5F5F5 8.33333333%, #F5F5F5 12.5%, transparent 12.5%, transparent 16.66666667%, #F5F5F5 16.66666667%, #F5F5F5 20.83333333%, transparent 20.83333333%, transparent 25%, #F5F5F5 25%, #F5F5F5 29.16666667%, transparent 29.16666667%, transparent 33.33333333%, #F5F5F5 33.33333333%, #F5F5F5 37.5%, transparent 37.5%, transparent 41.66666667%, #F5F5F5 41.66666667%, #F5F5F5 45.83333333%, transparent 45.83333333%, transparent 50%, #F5F5F5 50%, #F5F5F5 54.16666667%, transparent 54.16666667%, transparent 58.33333333%, #F5F5F5 58.33333333%, #F5F5F5 62.5%, transparent 62.5%, transparent 66.66666667%, #F5F5F5 66.66666667%, #F5F5F5 70.83333333%, transparent 70.83333333%, transparent 75%, #F5F5F5 75%, #F5F5F5 79.16666667%, transparent 79.16666667%, transparent 83.33333333%, #F5F5F5 83.33333333%, #F5F5F5 87.5%, transparent 87.5%, transparent 91.66666667%, #F5F5F5 91.66666667%, #F5F5F5 95.83333333%, transparent 95.83333333%); diff --git a/tests/layout.test.js b/tests/layout.test.js index 8d38864f18..515f182332 100644 --- a/tests/layout.test.js +++ b/tests/layout.test.js @@ -1,8 +1,8 @@ import React from 'react'; import TestUtils from 'react-addons-test-utils'; -let { Col, Row } = require('../components/layout/index'); +let { Col, Row } = require('../components/grid/index'); -describe('Layout', function() { +describe('Grid', function() { it('should render Col', () => { const col = TestUtils.renderIntoDocument(
    vue-beauty
    From 228b7328d32b1378fab64353e4ea8e1d48a81bdc Mon Sep 17 00:00:00 2001 From: ddcat1115 Date: Wed, 9 Nov 2016 14:45:10 +0800 Subject: [PATCH 0659/2145] docs: Steps demo update (#3708) * Steps demo update * update --- components/steps/demo/step-next.md | 91 ++++++++++++++++++++++-------- 1 file changed, 66 insertions(+), 25 deletions(-) diff --git a/components/steps/demo/step-next.md b/components/steps/demo/step-next.md index 1a5727d232..027d9e6dc7 100644 --- a/components/steps/demo/step-next.md +++ b/components/steps/demo/step-next.md @@ -1,54 +1,95 @@ --- order: 3 title: - zh-CN: 切换到下一步 - en-US: Switch to next + zh-CN: 步骤切换 + en-US: Switch Step --- ## zh-CN -随机生成 3~6 个步骤，初始随机进行到其中一个步骤。 +通常配合内容及按钮使用，表示一个流程的处理进度。 ## en-US -Let's generate 3~6 steps randomly, and proceed to a random step. +Cooperate with the content and buttons, to represent the progress of a process. ````jsx -import { Steps, Button } from 'antd'; +import { Steps, Button, message } from 'antd'; const Step = Steps.Step; -const array = [...Array(Math.floor(Math.random() * 3) + 3)]; -const steps = array.map((item, i) => ({ - title: `Step ${i + 1}`, -})); -const App = React.createClass({ - getInitialState() { - return { - current: Math.floor(Math.random() * steps.length), +const steps = [{ + title: 'First', + content: 'First-content', +}, { + title: 'Second', + content: 'Second-content', +}, { + title: 'Last', + content: 'Last-content', +}]; + +class App extends React.Component { + constructor(props) { + super(props); + this.state = { + current: 0, }; - }, + } next() { - let current = this.state.current + 1; - if (current === steps.length) { - current = 0; - } + const current = this.state.current + 1; this.setState({ current }); - }, + } + prev() { + const current = this.state.current - 1; + this.setState({ current }); + } render() { const { current } = this.state; return (
    -
    Curent Step {current + 1}
    - {steps.map((s, i) => )} + {steps.map(item => )} -
    - +
    {steps[this.state.current].content}
    +
    + { + this.state.current < steps.length - 1 + && + + } + { + this.state.current === steps.length - 1 + && + + } + { + this.state.current > 0 + && + + }
    ); - }, -}); + } +} ReactDOM.render(, mountNode); ```` + +````css +.steps-content { + margin-top: 16px; + border: 1px dashed #e9e9e9; + border-radius: 6px; + background-color: #fafafa; + min-height: 200px; + text-align: center; + padding-top: 80px; +} + +.steps-action { + margin-top: 40px; +} +```` From c32256c204726887594047813b0aa931ed56818d Mon Sep 17 00:00:00 2001 From: ddcat1115 Date: Wed, 9 Nov 2016 14:45:49 +0800 Subject: [PATCH 0660/2145] docs: add searchable Tree demo (#3693) --- components/tree/demo/search.md | 156 +++++++++++++++++++++++++++++++++ 1 file changed, 156 insertions(+) create mode 100644 components/tree/demo/search.md diff --git a/components/tree/demo/search.md b/components/tree/demo/search.md new file mode 100644 index 0000000000..659e644cb9 --- /dev/null +++ b/components/tree/demo/search.md @@ -0,0 +1,156 @@ +--- +order: 4 +title: + zh-CN: 可搜索 + en-US: Searchable +--- + +## zh-CN + +可搜索的树。 + +## en-US + +Searchable Tree. + +````jsx +import { Tree, Input } from 'antd'; + +const TreeNode = Tree.TreeNode; + +const x = 3; +const y = 2; +const z = 1; +const gData = []; + +const generateData = (_level, _preKey, _tns) => { + const preKey = _preKey || '0'; + const tns = _tns || gData; + + const children = []; + for (let i = 0; i < x; i++) { + const key = `${preKey}-${i}`; + tns.push({ title: key, key }); + if (i < y) { + children.push(key); + } + } + if (_level < 0) { + return tns; + } + const level = _level - 1; + children.forEach((key, index) => { + tns[index].children = []; + return generateData(level, key, tns[index].children); + }); +}; +generateData(z); + +const dataList = []; +const generateList = (data) => { + for (let i = 0; i < data.length; i++) { + const node = data[i]; + const key = node.key; + dataList.push({ key, title: key }); + if (node.children) { + generateList(node.children, node.key); + } + } +}; +generateList(gData); + +const getParentKey = (key, tree) => { + let parentKey; + for (let i = 0; i < tree.length; i++) { + const node = tree[i]; + if (node.children) { + if (node.children.some(item => item.key === key)) { + parentKey = node.key; + } else if (getParentKey(key, node.children)) { + parentKey = getParentKey(key, node.children); + } + } + } + return parentKey; +}; + + +class SearchTree extends React.Component { + constructor(props) { + super(props); + this.state = { + expandedKeys: [], + searchValue: '', + }; + } + onExpand = (expandedKeys) => { + this.setState({ expandedKeys }); + } + onChange = (e) => { + const value = e.target.value; + const expandedKeys = []; + dataList.forEach((item) => { + if (item.key.indexOf(value) > -1) { + expandedKeys.push(getParentKey(item.key, gData)); + } + }); + const uniqueExpandedKeys = []; + expandedKeys.forEach((item) => { + if (item && uniqueExpandedKeys.indexOf(item) === -1) { + uniqueExpandedKeys.push(item); + } + }); + this.setState({ + expandedKeys: uniqueExpandedKeys, + searchValue: value, + }); + } + render() { + const { searchValue, expandedKeys } = this.state; + const loop = data => data.map((item) => { + const index = item.key.search(searchValue); + const beforeStr = item.key.substr(0, index); + const afterStr = item.key.substr(index + searchValue.length); + const title = index > -1 ? + + {beforeStr} + {searchValue} + {afterStr} + + : {item.key}; + if (item.children) { + return ( + + {loop(item.children)} + + ); + } + return ; + }); + return ( +
    + + + {loop(gData)} + +
    + ); + } +} + +ReactDOM.render(, mountNode); +```` + +````css +.ant-tree-searchable-filter { + color: #f50; + transition: all .3s ease; +} +```` \ No newline at end of file From c04707d3e30514d8f7480b808520ff6bcdf3e026 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 9 Nov 2016 14:45:50 +0800 Subject: [PATCH 0661/2145] fix demo z-index --- components/anchor/demo/basic.md | 6 ++++++ components/style/themes/default.less | 2 +- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/components/anchor/demo/basic.md b/components/anchor/demo/basic.md index 55dfd38114..5bb2953f6b 100644 --- a/components/anchor/demo/basic.md +++ b/components/anchor/demo/basic.md @@ -27,3 +27,9 @@ ReactDOM.render( , mountNode); ``` + + diff --git a/components/style/themes/default.less b/components/style/themes/default.less index bcef05dec3..4f58a7599e 100644 --- a/components/style/themes/default.less +++ b/components/style/themes/default.less @@ -123,7 +123,7 @@ @grid-gutter-width : 0; // z-index list -@zindex-affix : 11; +@zindex-affix : 10; @zindex-back-top : 10; @zindex-modal-mask : 1000; @zindex-modal : 1000; From 5c29fe41f74cb9a6614243335c87a71d087a804a Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 9 Nov 2016 15:26:22 +0800 Subject: [PATCH 0662/2145] improve anchor style --- components/anchor/demo/basic.md | 7 ++++--- components/anchor/style/index.less | 5 ++++- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/components/anchor/demo/basic.md b/components/anchor/demo/basic.md index 5bb2953f6b..182e10278a 100644 --- a/components/anchor/demo/basic.md +++ b/components/anchor/demo/basic.md @@ -21,9 +21,10 @@ ReactDOM.render( - - - + + + + , mountNode); ``` diff --git a/components/anchor/style/index.less b/components/anchor/style/index.less index 321e663fec..2e390db66f 100644 --- a/components/anchor/style/index.less +++ b/components/anchor/style/index.less @@ -20,8 +20,9 @@ width: 2px; height: 100%; display: block; - background-color: #ccc; + background-color: @border-color-split; margin: 0 auto; + border-radius: 1px; } &-ball { display: none; @@ -41,6 +42,8 @@ } &-anchor-link { padding-left: 16px; + line-height: 1; + margin: 12px 0; &-title { display: block; From 156242053f038e67a20798b412e7dc54273e43a1 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 9 Nov 2016 15:26:56 +0800 Subject: [PATCH 0663/2145] update demo --- components/anchor/demo/fixed.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/components/anchor/demo/fixed.md b/components/anchor/demo/fixed.md index af59b14e4e..29f57688a1 100644 --- a/components/anchor/demo/fixed.md +++ b/components/anchor/demo/fixed.md @@ -21,9 +21,10 @@ ReactDOM.render( - - - + + + + , mountNode); ``` From df4509bbda67cbb20fa5571a2319fe4b7dc65f55 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 9 Nov 2016 16:56:49 +0800 Subject: [PATCH 0664/2145] Improve Carousel default UI style --- components/carousel/index.en-US.md | 9 ++-- components/carousel/index.zh-CN.md | 9 ++-- components/carousel/style/index.less | 67 ++++++++++------------------ 3 files changed, 30 insertions(+), 55 deletions(-) diff --git a/components/carousel/index.en-US.md b/components/carousel/index.en-US.md index 890dd85965..db257f4439 100644 --- a/components/carousel/index.en-US.md +++ b/components/carousel/index.en-US.md @@ -29,13 +29,10 @@ For more info on the parameters, refer to the https://github.com/akiran/react-sl diff --git a/components/carousel/index.zh-CN.md b/components/carousel/index.zh-CN.md index 12fbf9dd7b..e8db4547cf 100644 --- a/components/carousel/index.zh-CN.md +++ b/components/carousel/index.zh-CN.md @@ -30,13 +30,10 @@ subtitle: 走马灯 diff --git a/components/carousel/style/index.less b/components/carousel/style/index.less index a96f7baa68..c2ff5626f2 100644 --- a/components/carousel/style/index.less +++ b/components/carousel/style/index.less @@ -138,14 +138,9 @@ } // Dots - - .slick-slider { - padding-bottom: 45px; - } - .slick-dots { position: absolute; - bottom: 0; + bottom: 6px; list-style: none; display: block; text-align: center; @@ -156,62 +151,48 @@ display: inline-block; height: 20px; width: 20px; - margin: 0 5px; + line-height: 20px; + text-align: center; + margin: 0 2px; padding: 0; - cursor: pointer; button { border: 0; - background: transparent; - display: block; - height: 20px; - width: 20px; + cursor: pointer; + background: #000; + opacity: 0.3; + display: inline-block; + width: 7px; + height: 7px; + border-radius: 7px; outline: none; - line-height: 0; font-size: 0; color: transparent; - padding: 5px; cursor: pointer; + transition: all .3s; &:hover, &:focus { - outline: none; - &:before { - opacity: 1; - } - } - &:before { - position: absolute; - top: 0; - left: 0; - content: "•"; - width: 20px; - height: 20px; - font-size: 18px; - font-family: arial, sans-serif; - line-height: 20px; - text-align: center; - color: gray; - transition: all .3s; - opacity: 0.25; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; + opacity: 0.75; } } - &.slick-active button:before { - color: black; - opacity: 0.75; + &.slick-active button { + background: #fff; + opacity: 1; + box-shadow: 0 0 3px rgba(0, 0, 0, .25); + &:hover, + &:focus { + opacity: 1; + } } } } } .@{ant-prefix}-carousel-vertical { - .slick-slider { - padding-bottom: 0; - } .slick-dots { width: 20px; bottom: auto; - right: -35px; - top: 0; + right: 8px; + top: 50%; + transform: translateY(-50%); } } From 5aafe0d8dec1f19fceef52be68eb4cc577888eb9 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 9 Nov 2016 17:10:05 +0800 Subject: [PATCH 0665/2145] Fix tag[style] not working (#3773) --- components/tag/index.tsx | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/components/tag/index.tsx b/components/tag/index.tsx index be6eb5f2dc..a507539399 100644 --- a/components/tag/index.tsx +++ b/components/tag/index.tsx @@ -3,6 +3,7 @@ import ReactDOM from 'react-dom'; import Animate from 'rc-animate'; import classNames from 'classnames'; import omit from 'omit.js'; +import assign from 'object-assign'; import Icon from '../icon'; import warning from '../_util/warning'; import splitObject from '../_util/splitObject'; @@ -66,10 +67,10 @@ export default class Tag extends React.Component { render() { const [{ - prefixCls, closable, color, className, children, + prefixCls, closable, color, className, children, style, }, otherProps] = splitObject( this.props, - ['prefixCls', 'closable', 'color', 'className', 'children'] + ['prefixCls', 'closable', 'color', 'className', 'children', 'style'] ); const closeIcon = closable ? : ''; const classString = classNames({ @@ -85,18 +86,21 @@ export default class Tag extends React.Component { 'afterClose', ]); return ( - + > {this.state.closed ? null : (
    {children} {closeIcon} From 9afec1a638d20bcbc5487752858f429874a93458 Mon Sep 17 00:00:00 2001 From: jiang <155259966@qq.com> Date: Wed, 9 Nov 2016 18:17:41 +0800 Subject: [PATCH 0666/2145] Update README.md --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 2caac1a084..52b9fe3006 100644 --- a/README.md +++ b/README.md @@ -97,6 +97,7 @@ tsconfig.json - [Development tool](http://ant-tool.github.io/) - [React components](http://react-component.github.io/) - [Mobile UI](http://mobile.ant.design) +- [Motion](https://motion.ant.design) - [React style guide](https://github.com/react-component/react-component.github.io/blob/master/docs/zh-cn/component-code-style.md) - [React component design guide](https://github.com/react-component/react-component.github.io/blob/master/docs/zh-cn/component-design.md) - [Developer Instruction](https://github.com/ant-design/ant-design/wiki/Development) @@ -106,6 +107,7 @@ tsconfig.json - [CodePen boilerplate](http://codepen.io/benjycui/pen/KgPZrE?editors=001) for bug reports - [Awesome Ant Design](https://github.com/websemantics/awesome-ant-design) + ## Contributing We welcome all contributions, please read our [CONTRIBUTING.md](https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.md) first. You can submit any ideas as [pull requests](https://github.com/ant-design/ant-design/pulls) or as a [GitHub issue](https://github.com/ant-design/ant-design/issues). If you'd like to improve code, check out the [Development Instruction](https://github.com/ant-design/ant-design/wiki/Development) and have a good time! :) From d0f2ff83b63c94f1f24081addcd950e75437da7c Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 9 Nov 2016 19:55:14 +0800 Subject: [PATCH 0667/2145] Fix scroll page will trigger setState in Header --- site/theme/template/Home/Banner.jsx | 10 +++--- site/theme/template/Layout/Header.jsx | 50 ++++++++------------------- site/theme/template/Layout/index.jsx | 19 ++++++++-- 3 files changed, 36 insertions(+), 43 deletions(-) diff --git a/site/theme/template/Home/Banner.jsx b/site/theme/template/Home/Banner.jsx index c884c8e14f..68c74ee4db 100644 --- a/site/theme/template/Home/Banner.jsx +++ b/site/theme/template/Home/Banner.jsx @@ -1,7 +1,7 @@ import React from 'react'; import { Link } from 'react-router'; import { FormattedMessage } from 'react-intl'; -import ScrollElement from 'rc-scroll-anim/lib/ScrollElement'; +import ScrollOverPack from 'rc-scroll-anim/lib/ScrollOverPack'; import GitHubButton from 'react-github-button'; import 'react-github-button/assets/style.css'; import { Icon } from 'antd'; @@ -16,12 +16,12 @@ function typeFunc(a) { return 'left'; } -export default function Banner({ location }) { +export default function Banner({ location, onEnterChange }) { const query = location.query; return ( ); } diff --git a/site/theme/template/Layout/Header.jsx b/site/theme/template/Layout/Header.jsx index 8afd0fbfc4..a1dc513469 100644 --- a/site/theme/template/Layout/Header.jsx +++ b/site/theme/template/Layout/Header.jsx @@ -2,7 +2,6 @@ import React from 'react'; import { Link } from 'react-router'; import { FormattedMessage } from 'react-intl'; import enquire from 'enquire.js'; -import debounce from 'lodash.debounce'; import classNames from 'classnames'; import { Select, Menu, Row, Col, Icon, Button, Popover } from 'antd'; @@ -17,25 +16,12 @@ export default class Header extends React.Component { constructor(props) { super(props); - this.onScroll = debounce(() => { - const scrollTop = document.body.scrollTop || document.documentElement.scrollTop; - const clientHeight = document.documentElement.clientHeight; - if (scrollTop >= clientHeight) { - this.setState({ isFirstFrame: false }); - } else { - this.setState({ isFirstFrame: true }); - } - }, 100); - this.state = { menuMode: 'horizontal', - isFirstFrame: true, }; } componentDidMount() { - window.addEventListener('scroll', this.onScroll); - enquire.register('only screen and (min-width: 320px) and (max-width: 940px)', { match: () => { this.setState({ menuMode: 'inline' }); @@ -46,10 +32,6 @@ export default class Header extends React.Component { }); } - componentWillUnmount() { - window.removeEventListener('scroll', this.onScroll); - } - handleSearch = (value) => { this.context.router.push({ pathname: `${value}/` }); } @@ -67,11 +49,9 @@ export default class Header extends React.Component { } render() { - const { location, picked } = this.props; + const { location, picked, isFirstScreen } = this.props; const components = picked.components; - const module = location.pathname.replace(/\/$/, '') - .split('/').slice(0, -1) - .join('/'); + const module = location.pathname.replace(/\/$/, '').split('/').slice(0, -1).join('/'); let activeMenuItem = module || 'home'; if (activeMenuItem === 'components' || location.pathname === 'changelog') { activeMenuItem = 'docs/react'; @@ -80,22 +60,22 @@ export default class Header extends React.Component { const locale = this.context.intl.locale; const excludedSuffix = locale === 'zh-CN' ? 'en-US.md' : 'zh-CN.md'; const options = components - .filter(({ meta }) => !meta.filename.endsWith(excludedSuffix)) - .map(({ meta }) => { - const pathSnippet = meta.filename.split('/')[1]; - const url = `/components/${pathSnippet}`; - const subtitle = meta.subtitle; - return ( - - ); - }); + .filter(({ meta }) => !meta.filename.endsWith(excludedSuffix)) + .map(({ meta }) => { + const pathSnippet = meta.filename.split('/')[1]; + const url = `/components/${pathSnippet}`; + const subtitle = meta.subtitle; + return ( + + ); + }); const headerClassName = classNames({ clearfix: true, - 'home-nav-white': !this.state.isFirstFrame, + 'home-nav-white': !isFirstScreen, }); const menuMode = this.state.menuMode; diff --git a/site/theme/template/Layout/index.jsx b/site/theme/template/Layout/index.jsx index e673eb7e65..7815785bcb 100644 --- a/site/theme/template/Layout/index.jsx +++ b/site/theme/template/Layout/index.jsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { cloneElement } from 'react'; import ReactDOM from 'react-dom'; import { addLocaleData, IntlProvider } from 'react-intl'; import { LocaleProvider } from 'antd'; @@ -23,6 +23,13 @@ export default class Layout extends React.Component { router: React.PropTypes.object.isRequired, } + constructor(props) { + super(props); + this.state = { + isFirstScreen: true, + }; + } + componentDidMount() { if (typeof ga !== 'undefined') { this.context.router.listen((loc) => { @@ -42,14 +49,20 @@ export default class Layout extends React.Component { clearTimeout(this.timer); } + onEnterChange = (mode) => { + this.setState({ + isFirstScreen: mode === 'enter', + }); + } + render() { const { children, ...restProps } = this.props; return (
    -
    - {children} +
    + {cloneElement(children, { onEnterChange: this.onEnterChange })}
    From 0fa41ebfb9159b7ebbff31c9e9633908f8b1407a Mon Sep 17 00:00:00 2001 From: Wei Zhu Date: Wed, 9 Nov 2016 20:16:57 +0800 Subject: [PATCH 0668/2145] Fix small table style (#3761) * Tweak small table style, fix #3743 * Add checkbox switch to dynamic settings demo * Add fixed header to dynamic settings demo --- components/table/demo/dynamic-settings.md | 49 ++++++++++++++--------- components/table/style/index.less | 28 +++++++++++-- 2 files changed, 54 insertions(+), 23 deletions(-) diff --git a/components/table/demo/dynamic-settings.md b/components/table/demo/dynamic-settings.md index 40908f4b53..ae8b596f3b 100644 --- a/components/table/demo/dynamic-settings.md +++ b/components/table/demo/dynamic-settings.md @@ -21,11 +21,13 @@ const columns = [{ title: 'Name', dataIndex: 'name', key: 'name', + width: 150, render: text => {text}, }, { title: 'Age', dataIndex: 'age', key: 'age', + width: 100, }, { title: 'Address', dataIndex: 'address', @@ -33,6 +35,7 @@ const columns = [{ }, { title: 'Action', key: 'action', + width: 400, render: (text, record) => ( Action 一 {record.name} @@ -46,29 +49,21 @@ const columns = [{ ), }]; -const data = [{ - key: '1', - name: 'John Brown', - age: 32, - address: 'New York No. 1 Lake Park', - description: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.', -}, { - key: '2', - name: 'Jim Green', - age: 42, - address: 'London No. 1 Lake Park', - description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.', -}, { - key: '3', - name: 'Joe Black', - age: 32, - address: 'Sidney No. 1 Lake Park', - description: 'My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.', -}]; +const data = []; +for (let i = 1; i <= 10; i++) { + data.push({ + key: i, + name: 'John Brown', + age: `${i}2`, + address: `New York No. ${i} Lake Park`, + description: `My name is John Brown, I am ${i}2 years old, living in New York No. ${i} Lake Park.`, + }); +} const expandedRowRender = record =>

    {record.description}

    ; const title = () => 'Here is title'; const footer = () => 'Here is footer'; +const scroll = { y: 240 }; class Demo extends React.Component { state = { @@ -79,6 +74,8 @@ class Demo extends React.Component { expandedRowRender, title, footer, + rowSelection: {}, + scroll, } handleToggle = (prop) => { @@ -103,6 +100,14 @@ class Demo extends React.Component { this.setState({ footer: enable ? footer : undefined }); } + handleRowSelectionChange = (enable) => { + this.setState({ rowSelection: enable ? {} : undefined }); + } + + handleScollChange = (enable) => { + this.setState({ scroll: enable ? scroll : undefined }); + } + render() { const state = this.state; return ( @@ -127,6 +132,12 @@ class Demo extends React.Component { + + + + + + Default diff --git a/components/table/style/index.less b/components/table/style/index.less index 3d253294a4..c80bc879f2 100644 --- a/components/table/style/index.less +++ b/components/table/style/index.less @@ -165,10 +165,6 @@ padding: 0 8px; } - &.@{table-prefix-cls}-bordered .@{table-prefix-cls}-body > table { - border: 0; - } - .@{table-prefix-cls}-thead > tr > th { padding: 10px 8px; background: #fff; @@ -192,6 +188,11 @@ .@{table-prefix-cls}-row:last-child td { border-bottom: 0; } + + .@{table-prefix-cls}-title, + .@{table-prefix-cls}-footer { + top: 0; + } } &-column-sorter { @@ -283,6 +284,25 @@ border-right: 0; } } + + &.@{table-prefix-cls}-small { + .@{table-prefix-cls}-header > table, + .@{table-prefix-cls}-body > table, + .@{table-prefix-cls}-fixed-left table, + .@{table-prefix-cls}-fixed-right table { + border: 0; + } + + .@{table-prefix-cls}-title { + border: 0; + border-bottom: 1px solid @border-color-split; + } + + .@{table-prefix-cls}-footer { + border: 0; + border-top: 1px solid @border-color-split; + } + } } &-placeholder { From 45d2182137d36872f71c8ce5585933159fa5e50b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=86=E7=A6=BB?= Date: Wed, 9 Nov 2016 20:17:02 +0800 Subject: [PATCH 0669/2145] fix some anchor bug (#3777) * fix some anchor bug * lint --- components/anchor/AnchorLink.tsx | 3 +- components/anchor/anchorHelper.tsx | 13 +++++-- components/anchor/index.tsx | 31 +++++++++------ components/anchor/style/index.less | 61 +++++++++++++++++------------- 4 files changed, 65 insertions(+), 43 deletions(-) diff --git a/components/anchor/AnchorLink.tsx b/components/anchor/AnchorLink.tsx index 5e07602884..0b5faa05d1 100644 --- a/components/anchor/AnchorLink.tsx +++ b/components/anchor/AnchorLink.tsx @@ -53,9 +53,10 @@ export default class AnchorLink extends React.Component { return child; } - scrollTo(e) { + scrollTo = (e) => { const { onClick, href } = this.props; const { anchorHelper } = this.context; + e.preventDefault(); if (onClick) { onClick(href); } else { diff --git a/components/anchor/anchorHelper.tsx b/components/anchor/anchorHelper.tsx index 1fee9de42f..0dcf732bb3 100644 --- a/components/anchor/anchorHelper.tsx +++ b/components/anchor/anchorHelper.tsx @@ -39,13 +39,17 @@ export function getOffsetTop(element): number { export function scrollTo(href, target = getDefaultTarget) { const scrollTop = getScroll(target(), true); - const offsetTop = getOffsetTop(document.querySelector(href)); + const targetElement = document.querySelector(href); + if (!targetElement) { + return; + } + const offsetTop = getOffsetTop(targetElement); const targetScrollTop = scrollTop + offsetTop; const startTime = Date.now(); const frameFunc = () => { const timestamp = Date.now(); const time = timestamp - startTime; - document.body.scrollTop = easeInOutCubic(time, scrollTop, targetScrollTop, 450); + window.scrollTo(window.pageXOffset, easeInOutCubic(time, scrollTop, targetScrollTop, 450)); if (time < 450) { reqAnimFrame(frameFunc); } @@ -57,10 +61,12 @@ export function scrollTo(href, target = getDefaultTarget) { class AnchorHelper { private links: Array; private currentAnchor: HTMLElement | null; + private _activeAnchor: string; constructor() { this.links = []; this.currentAnchor = null; + this._activeAnchor = ''; } addLink(link) { @@ -89,7 +95,8 @@ class AnchorHelper { } } }); - return activeAnchor; + this._activeAnchor = activeAnchor || this._activeAnchor; + return this._activeAnchor; } scrollTo(href, target = getDefaultTarget) { diff --git a/components/anchor/index.tsx b/components/anchor/index.tsx index ef76318fd6..1cd0af2693 100644 --- a/components/anchor/index.tsx +++ b/components/anchor/index.tsx @@ -13,6 +13,7 @@ export interface AnchorProps { bounds?: number; className?: string; style?: React.CSSProperties; + affix?: boolean; } export default class Anchor extends React.Component { @@ -20,6 +21,7 @@ export default class Anchor extends React.Component { static defaultProps = { prefixCls: 'ant-anchor', + affix: true, }; static childContextTypes = { @@ -90,7 +92,7 @@ export default class Anchor extends React.Component { } render() { - const { prefixCls, offsetTop, style, className = '' } = this.props; + const { prefixCls, offsetTop, style, className = '', affix} = this.props; const { activeAnchor } = this.state; const inkClass = classNames({ [`${prefixCls}-ink-ball`]: true, @@ -102,17 +104,22 @@ export default class Anchor extends React.Component { [className]: !!className, }); - return ( - -
    -
    -
    - -
    - {React.Children.map(this.props.children, this.renderAnchorLink)} -
    + const anchorClass = classNames({ + [`${prefixCls}`]: true, + affix, + }); + + const anchorContent = (
    +
    +
    +
    - - ); + {React.Children.map(this.props.children, this.renderAnchorLink)} +
    +
    ); + + return affix === false ? anchorContent : + {anchorContent} + ; } } diff --git a/components/anchor/style/index.less b/components/anchor/style/index.less index 2e390db66f..9d5c0d9318 100644 --- a/components/anchor/style/index.less +++ b/components/anchor/style/index.less @@ -7,39 +7,46 @@ padding: 6px; background-color: white; } - } - &-anchor-ink { - position: absolute; - width: 9px; - height: 100%; - left: 0; - top: 0; - &:before { - content: ' '; - position: relative; - width: 2px; - height: 100%; - display: block; - background-color: @border-color-split; - margin: 0 auto; - border-radius: 1px; - } - &-ball { + + &-ink { display: none; + padding-left: 0; + } + + &.affix &-ink { + display: block; position: absolute; width: 9px; - height: 9px; - border-radius: 9px; - border: 3px solid @primary-color; - background-color: white; - transition: top .3s ease-in-out; - left: 50%; - transform: translateX(-50%); - &.visible { - display: inline-block; + height: 100%; + left: 0; + top: 0; + &:before { + content: ' '; + position: relative; + width: 2px; + height: 100%; + display: block; + background-color: @border-color-split; + margin: 0 auto; + } + &-ball { + display: none; + position: absolute; + width: 9px; + height: 9px; + border-radius: 9px; + border: 3px solid @primary-color; + background-color: white; + transition: top .3s ease-in-out; + left: 50%; + transform: translateX(-50%); + &.visible { + display: inline-block; + } } } } + &-anchor-link { padding-left: 16px; line-height: 1; From 733a4cdc402fdff16eb45dc453da2b11b606d46e Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 9 Nov 2016 20:30:31 +0800 Subject: [PATCH 0670/2145] remove default chinese text in Transfer (#3768) --- components/locale-provider/en_US.tsx | 1 - components/transfer/demo/basic.md | 1 + components/transfer/index.en-US.md | 4 ++-- components/transfer/index.tsx | 2 +- components/transfer/index.zh-CN.md | 2 +- components/transfer/list.tsx | 6 +++--- 6 files changed, 8 insertions(+), 8 deletions(-) diff --git a/components/locale-provider/en_US.tsx b/components/locale-provider/en_US.tsx index 03166bc0be..7381ebe7ae 100644 --- a/components/locale-provider/en_US.tsx +++ b/components/locale-provider/en_US.tsx @@ -27,7 +27,6 @@ export default { cancelText: 'Cancel', }, Transfer: { - titles: ['Source', 'Target'], notFoundContent: 'Not Found', searchPlaceholder: 'Search here', itemUnit: 'item', diff --git a/components/transfer/demo/basic.md b/components/transfer/demo/basic.md index 67f496d662..6eb9d1824a 100644 --- a/components/transfer/demo/basic.md +++ b/components/transfer/demo/basic.md @@ -55,6 +55,7 @@ const App = React.createClass({ return ( { // For high-level customized Transfer @dqaria static List = List; diff --git a/components/transfer/index.zh-CN.md b/components/transfer/index.zh-CN.md index 4165be073e..c5ad21ac71 100644 --- a/components/transfer/index.zh-CN.md +++ b/components/transfer/index.zh-CN.md @@ -26,7 +26,7 @@ title: Transfer | onSelectChange | 选中项发生改变时的回调函数 | (sourceSelectedKeys, targetSelectedKeys): void | | | listStyle | 两个穿梭框的自定义样式 | Object | | | className | 自定义类 | String | | -| titles | 标题集合,顺序从左至右 | Array | ['源列表', '目的列表'] | +| titles | 标题集合,顺序从左至右 | Array | ['', ''] | | operations | 操作文案集合,顺序从上至下 | Array | [] | | showSearch | 是否显示搜索框 | Boolean | false | | filterOption | 接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 `true`，反之则返回 `false`。| (inputValue, option): boolean | | diff --git a/components/transfer/list.tsx b/components/transfer/list.tsx index ef02077c97..186b12675f 100644 --- a/components/transfer/list.tsx +++ b/components/transfer/list.tsx @@ -159,7 +159,7 @@ export default class TransferList extends React.Component
    : null} @@ -209,7 +209,7 @@ export default class TransferList extends React.Component {showItems.length > 0 ? showItems - :
    {notFoundContent || '列表为空'}
    } + :
    {notFoundContent || 'Not Found'}
    }
    } {footerDom ?
    From 19039903156067a00ec70bf4ca38b68af34175bf Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 9 Nov 2016 20:37:10 +0800 Subject: [PATCH 0671/2145] update transfer doc --- components/transfer/index.en-US.md | 8 ++++---- components/transfer/index.zh-CN.md | 7 ++++--- 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/components/transfer/index.en-US.md b/components/transfer/index.en-US.md index 0bab5737aa..9544e0ec07 100644 --- a/components/transfer/index.en-US.md +++ b/components/transfer/index.en-US.md @@ -5,13 +5,13 @@ cols: 1 title: Transfer --- -Double column transfer choice box. One or more elements can be selected from either column, one click on the proper 'direction' button, and the transfer is done. - -The left column is considered the 'source' and the right column is considered the 'target'. As you can see in the API description, these names are reflected in. +Double column transfer choice box. ## When To Use -To transfer the elements between two columns in an intuitive and efficient way. +Transfer the elements between two columns in an intuitive and efficient way. + +One or more elements can be selected from either column, one click on the proper 'direction' button, and the transfer is done. The left column is considered the 'source' and the right column is considered the 'target'. As you can see in the API description, these names are reflected in. ## API diff --git a/components/transfer/index.zh-CN.md b/components/transfer/index.zh-CN.md index c5ad21ac71..4c9be7581f 100644 --- a/components/transfer/index.zh-CN.md +++ b/components/transfer/index.zh-CN.md @@ -6,14 +6,15 @@ cols: 1 title: Transfer --- -双栏穿梭选择框。选择一个或以上的选项后，点击对应的方向键，可以把选中的选项移动到另一栏。 - -其中，左边一栏为 `source`，右边一栏为 `target`，API 的设计也反应了这两个概念。 +双栏穿梭选择框。 ## 何时使用 用直观的方式在两栏中移动元素，完成选择行为。 +选择一个或以上的选项后，点击对应的方向键，可以把选中的选项移动到另一栏。 +其中，左边一栏为 `source`，右边一栏为 `target`，API 的设计也反应了这两个概念。 + ## API | 参数 | 说明 | 类型 | 默认值 | From 563f8120cd87fe6676e4bad55cb5be9a01a7548a Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 9 Nov 2016 20:38:57 +0800 Subject: [PATCH 0672/2145] fix Checkbox border --- components/checkbox/style/mixin.less | 1 + 1 file changed, 1 insertion(+) diff --git a/components/checkbox/style/mixin.less b/components/checkbox/style/mixin.less index fe771cdfd5..30e7d0444f 100644 --- a/components/checkbox/style/mixin.less +++ b/components/checkbox/style/mixin.less @@ -93,6 +93,7 @@ .@{checkbox-prefix-cls}-indeterminate { .@{checkbox-inner-prefix-cls} { background-color: @primary-color; + border-color: @primary-color; } } From 19be7db53fc10a75779f2b99c02c3873895777bf Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 9 Nov 2016 21:06:43 +0800 Subject: [PATCH 0673/2145] improve anchor detail --- components/anchor/AnchorLink.tsx | 5 +++-- components/anchor/demo/basic.md | 2 +- components/anchor/demo/fixed.md | 4 ++-- components/anchor/index.en-US.md | 6 +++--- components/anchor/index.tsx | 27 ++++++++++++++++----------- components/anchor/index.zh-CN.md | 2 +- components/anchor/style/index.less | 14 +++++--------- 7 files changed, 31 insertions(+), 29 deletions(-) diff --git a/components/anchor/AnchorLink.tsx b/components/anchor/AnchorLink.tsx index 0b5faa05d1..74aae24947 100644 --- a/components/anchor/AnchorLink.tsx +++ b/components/anchor/AnchorLink.tsx @@ -11,6 +11,7 @@ export interface AnchorLinkProps { title?: Element; bounds: number; target?: () => HTMLElement | Window; + affix?: boolean; } export default class AnchorLink extends React.Component { @@ -67,9 +68,9 @@ export default class AnchorLink extends React.Component { } render() { - const { prefixCls, href, children, title, bounds } = this.props; + const { prefixCls, href, children, title, bounds, affix } = this.props; const { anchorHelper } = this.context; - const active = anchorHelper && anchorHelper.getCurrentAnchor(bounds) === href; + const active = affix && anchorHelper && anchorHelper.getCurrentAnchor(bounds) === href; const cls = classNames({ [`${prefixCls}-link`]: true, [`${prefixCls}-link-active`]: active, diff --git a/components/anchor/demo/basic.md b/components/anchor/demo/basic.md index 182e10278a..d193e0c818 100644 --- a/components/anchor/demo/basic.md +++ b/components/anchor/demo/basic.md @@ -20,7 +20,7 @@ const { Link } = Anchor; ReactDOM.render( - + diff --git a/components/anchor/demo/fixed.md b/components/anchor/demo/fixed.md index 29f57688a1..2e0fdbb8f9 100644 --- a/components/anchor/demo/fixed.md +++ b/components/anchor/demo/fixed.md @@ -7,7 +7,7 @@ title: ## zh-CN -不会随页面滚动变化。 +不浮动，状态不随页面滚动变化。 ## en-US @@ -20,7 +20,7 @@ const { Link } = Anchor; ReactDOM.render( - + diff --git a/components/anchor/index.en-US.md b/components/anchor/index.en-US.md index 123bbc7050..7b2b4ffbdb 100644 --- a/components/anchor/index.en-US.md +++ b/components/anchor/index.en-US.md @@ -5,11 +5,11 @@ cols: 1 title: Anchor --- -A hyperlink to a location on same page. +Hyperlinks to scroll on one page. ## When To Use -For displaying anchor hyperlink on page, and jump between them. +For displaying anchor hyperlinks on page, and jump between them. ## API @@ -26,4 +26,4 @@ For displaying anchor hyperlink on page, and jump between them. | Property | Description | Type | Default | |-------------|----------------|--------------------|--------------| | href | target of hyperlink | String | | -| title | content of hyperlink | String | | +| title | content of hyperlink | React.Node | | diff --git a/components/anchor/index.tsx b/components/anchor/index.tsx index 1cd0af2693..2f0de969c2 100644 --- a/components/anchor/index.tsx +++ b/components/anchor/index.tsx @@ -86,13 +86,14 @@ export default class Anchor extends React.Component { onClick: this.anchorHelper.scrollTo, prefixCls: this.props.prefixCls, bounds: this.props.bounds, + affix: this.props.affix, }); } return child; } render() { - const { prefixCls, offsetTop, style, className = '', affix} = this.props; + const { prefixCls, offsetTop, style, className = '', affix } = this.props; const { activeAnchor } = this.state; const inkClass = classNames({ [`${prefixCls}-ink-ball`]: true, @@ -106,20 +107,24 @@ export default class Anchor extends React.Component { const anchorClass = classNames({ [`${prefixCls}`]: true, - affix, + 'fixed': !affix, }); - const anchorContent = (
    -
    -
    - + const anchorContent = ( +
    +
    +
    + +
    + {React.Children.map(this.props.children, this.renderAnchorLink)}
    - {React.Children.map(this.props.children, this.renderAnchorLink)}
    -
    ); + ); - return affix === false ? anchorContent : - {anchorContent} - ; + return affix === false ? anchorContent : ( + + {anchorContent} + + ); } } diff --git a/components/anchor/index.zh-CN.md b/components/anchor/index.zh-CN.md index edde5696ba..f662d8fe36 100644 --- a/components/anchor/index.zh-CN.md +++ b/components/anchor/index.zh-CN.md @@ -27,4 +27,4 @@ title: Anchor | 成员 | 说明 | 类型 | 默认值 | |-------------|----------------|--------------------|--------------| | href | 锚点链接 | String | | -| title | 文字内容 | String | | +| title | 文字内容 | React.Node | | diff --git a/components/anchor/style/index.less b/components/anchor/style/index.less index 9d5c0d9318..7d158351cf 100644 --- a/components/anchor/style/index.less +++ b/components/anchor/style/index.less @@ -9,12 +9,6 @@ } &-ink { - display: none; - padding-left: 0; - } - - &.affix &-ink { - display: block; position: absolute; width: 9px; height: 100%; @@ -30,7 +24,6 @@ margin: 0 auto; } &-ball { - display: none; position: absolute; width: 9px; height: 9px; @@ -45,12 +38,15 @@ } } } + + &.fixed &-ink &-ink-ball { + display: none; + } } &-anchor-link { - padding-left: 16px; + padding: 4px 0 4px 16px; line-height: 1; - margin: 12px 0; &-title { display: block; From 64e549be9d55524df31396b64b7906779e446da6 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 9 Nov 2016 21:12:26 +0800 Subject: [PATCH 0674/2145] fix anchor ball --- components/anchor/style/index.less | 1 + 1 file changed, 1 insertion(+) diff --git a/components/anchor/style/index.less b/components/anchor/style/index.less index 7d158351cf..2c18dfc62b 100644 --- a/components/anchor/style/index.less +++ b/components/anchor/style/index.less @@ -24,6 +24,7 @@ margin: 0 auto; } &-ball { + display: none; position: absolute; width: 9px; height: 9px; From 5d2a2cc39b54f1a784534e9ab04d6ab4101e47db Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 9 Nov 2016 21:30:02 +0800 Subject: [PATCH 0675/2145] Add @highlight-color less variables --- components/badge/style/index.less | 13 ++----------- components/cascader/style/index.less | 2 +- components/style/themes/default.less | 3 ++- components/tree/style/index.less | 2 +- 4 files changed, 6 insertions(+), 14 deletions(-) diff --git a/components/badge/style/index.less b/components/badge/style/index.less index 74d7337fab..1ef35ab881 100644 --- a/components/badge/style/index.less +++ b/components/badge/style/index.less @@ -16,7 +16,7 @@ height: 20px; border-radius: 10px; min-width: 20px; - background: @error-color; + background: @highlight-color; border: 1px solid transparent; color: #fff; line-height: 18px; @@ -42,7 +42,7 @@ height: 8px; width: 8px; border-radius: 100%; - background: @error-color; + background: @highlight-color; z-index: 10; box-shadow: 0 0 0 1px #fff; } @@ -109,15 +109,6 @@ } } -a & { - &-count:hover { - background: tint(@error-color, 20%); - } - &-count:active { - background: shade(@error-color, 5%); - } -} - .@{number-prefix-cls} { overflow: hidden; &-only { diff --git a/components/cascader/style/index.less b/components/cascader/style/index.less index 1c85387fc1..6fac9f40d1 100644 --- a/components/cascader/style/index.less +++ b/components/cascader/style/index.less @@ -180,7 +180,7 @@ } & &-keyword { - color: @error-color; + color: @highlight-color; } } } diff --git a/components/style/themes/default.less b/components/style/themes/default.less index 4f58a7599e..78fcd2ded1 100644 --- a/components/style/themes/default.less +++ b/components/style/themes/default.less @@ -6,6 +6,7 @@ @info-color : #2db7f5; @success-color : #87d068; @error-color : #f50; +@highlight-color : #f50; @warning-color : #fa0; @normal-color : #d9d9d9; @@ -141,7 +142,7 @@ // Form // --- -@label-required-color : #f50; +@label-required-color : @highlight-color; @label-color : @text-color; @form-item-margin-bottom : 24px; diff --git a/components/tree/style/index.less b/components/tree/style/index.less index ea485fdb32..980f8b6d96 100644 --- a/components/tree/style/index.less +++ b/components/tree/style/index.less @@ -42,7 +42,7 @@ } &.filter-node { > a { - color: @error-color!important; + color: @highlight-color!important; font-weight: bold!important; } } From 51dae474ccce64668b9bd1b290f7159592a846a6 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 9 Nov 2016 22:12:21 +0800 Subject: [PATCH 0676/2145] fix form demo align --- components/form/demo/validate-other.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/form/demo/validate-other.md b/components/form/demo/validate-other.md index c34397f579..6c1c8cebbe 100644 --- a/components/form/demo/validate-other.md +++ b/components/form/demo/validate-other.md @@ -125,7 +125,7 @@ const Demo = Form.create()(React.createClass({ {getFieldDecorator('upload', { valuePropName: 'fileList', @@ -139,7 +139,7 @@ const Demo = Form.create()(React.createClass({ )} - + From 88d470220baa2f2e90232eed68977ae67ada5a7c Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 9 Nov 2016 22:25:39 +0800 Subject: [PATCH 0677/2145] Fix wrong error style for Form Validation --- components/form/style/index.less | 7 ++++++- components/form/style/mixin.less | 6 ++++-- components/input/style/mixin.less | 3 ++- 3 files changed, 12 insertions(+), 4 deletions(-) diff --git a/components/form/style/index.less b/components/form/style/index.less index 6be2fdefd3..194e898497 100644 --- a/components/form/style/index.less +++ b/components/form/style/index.less @@ -380,6 +380,9 @@ form { .@{ant-prefix}-select { &-selection { border-color: @error-color; + } + + &-focused &-selection { .active(@error-color); } @@ -402,7 +405,9 @@ form { .@{ant-prefix}-input-number, .@{ant-prefix}-time-picker-input { border-color: @error-color; - .active(@error-color); + &:focus { + .active(@error-color); + } &:not([disabled]):hover { border-color: @error-color; } diff --git a/components/form/style/mixin.less b/components/form/style/mixin.less index 9646bac3ec..1fdc0bd150 100644 --- a/components/form/style/mixin.less +++ b/components/form/style/mixin.less @@ -8,9 +8,11 @@ // 输入框的不同校验状态 .@{ant-prefix}-input { &, - &:hover, - &:focus { + &:hover { border-color: @border-color; + } + + &:focus { .active(@border-color); } diff --git a/components/input/style/mixin.less b/components/input/style/mixin.less index 476998af73..870892f1cb 100644 --- a/components/input/style/mixin.less +++ b/components/input/style/mixin.less @@ -168,12 +168,13 @@ border: 0; margin: -1px; border: 1px solid transparent; + box-shadow: none; } &-open, &-focused { .@{ant-prefix}-select-selection { - border-color: tint(@primary-color, 20%); + color: @primary-color; } } } From b75201485dbbf8d7ffaf009a9110fc552a2e46a8 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Thu, 10 Nov 2016 10:30:50 +0800 Subject: [PATCH 0678/2145] docs: update change log for 2.3.2 (#3776) * fix: infinite loop, ref: #3759 * bump 2.3.2 --- CHANGELOG.en-US.md | 6 ++++++ CHANGELOG.zh-CN.md | 6 ++++++ package.json | 2 +- 3 files changed, 13 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index c87eadcb69..a3759cf861 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -9,6 +9,12 @@ If you want to read change logs before `2.0.0`, please visit [GitHub](https://gi --- +## 2.3.2 + +`2016-11-09` + +* Fix dead loop while using `getFieldProps`. + ## 2.3.1 `2016-11-07` diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index 5944ba1df0..92276ee06c 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -9,6 +9,12 @@ timeline: true --- +## 2.3.2 + +`2016-11-09` + +* 修复使用 `getFieldProps` 会导致死循环的问题。 + ## 2.3.1 `2016-11-07` diff --git a/package.json b/package.json index aadf21e7ae..7b8a80cc83 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "antd", - "version": "2.3.1", + "version": "2.3.2", "title": "Ant Design", "description": "An enterprise-class UI design language and React-based implementation", "homepage": "http://ant.design/", From 9cc05c530b55a9ea9d9101cedf649e0cac67aab5 Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 10 Nov 2016 11:09:41 +0800 Subject: [PATCH 0679/2145] Add iView link, iview/iview#55 --- docs/spec/introduce.en-US.md | 1 + docs/spec/introduce.zh-CN.md | 1 + 2 files changed, 2 insertions(+) diff --git a/docs/spec/introduce.en-US.md b/docs/spec/introduce.en-US.md index 254ee5786b..5fa67636b5 100644 --- a/docs/spec/introduce.en-US.md +++ b/docs/spec/introduce.en-US.md @@ -28,6 +28,7 @@ Ant Design, created specially for middleware design, is committed to improving t [React](http://facebook.github.io/react/) is used to encapsulate a library of Ant Design components. Any other version of frameworks to implement is also welcome. - [Ant Design of React](/docs/react/introduce) (official implementation) +-
    iView
    -
    vue-beauty
    -
    Ant Design of Angular 2.0
    -
    antd-ember
    diff --git a/docs/spec/introduce.zh-CN.md b/docs/spec/introduce.zh-CN.md index ac84820c43..64fef091a9 100644 --- a/docs/spec/introduce.zh-CN.md +++ b/docs/spec/introduce.zh-CN.md @@ -28,6 +28,7 @@ Ant Design 是一个致力于提升『用户』和『设计者』使用体验的 我们采用 [React](http://facebook.github.io/react/) 封装了一套 Ant Design 的组件库，也欢迎社区其他框架的实现版本。 - [Ant Design of React](/docs/react/introduce)（官方实现） +-
    iView
    -
    vue-beauty
    -
    Ant Design of Angular 2.0
    -
    antd-ember
    From 8dcdd12bef2acbd9c73f51977196f4c882ecb83a Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Thu, 10 Nov 2016 10:29:06 +0800 Subject: [PATCH 0680/2145] feat: bring Tag[color] back, close: #3773 --- components/tag/demo/basic.md | 22 +++++++++++++--------- components/tag/demo/colorful.md | 22 ++++++++++++++-------- components/tag/demo/control.md | 15 ++++++--------- components/tag/index.en-US.md | 5 +++-- components/tag/index.tsx | 9 +++++++-- components/tag/index.zh-CN.md | 5 +++-- components/tag/style/index.less | 6 ------ 7 files changed, 46 insertions(+), 38 deletions(-) diff --git a/components/tag/demo/basic.md b/components/tag/demo/basic.md index 00cd4676c5..a4d91c7d5a 100644 --- a/components/tag/demo/basic.md +++ b/components/tag/demo/basic.md @@ -1,28 +1,32 @@ --- order: 0 -title: +title: zh-CN: 基本 en-US: Basic --- ## zh-CN -简单的标签展示，添加 closable 表示可关闭。 +基本标签的用法，可以通过添加 `closable` 变为可关闭标签。可关闭标签具有 `onClose` `afterClose` 两个事件。 ## en-US -Simple demo of tag, 'closable' property represents which can be closed. +Usage of basic Tag, and it could be closable by set `closable` property. Closable Tag supports `onClose` `afterClose` events. ````jsx import { Tag } from 'antd'; -function onClose(e) { +function log(e) { console.log(e); } -ReactDOM.render(
    - Tag 1 - Tag 2 - Tag 3 -
    , mountNode); +ReactDOM.render( +
    + Tag 1 + Tag 2 + Tag 3 + Link +
    , + mountNode +); ```` diff --git a/components/tag/demo/colorful.md b/components/tag/demo/colorful.md index 3453a7ab67..a7fb357db8 100644 --- a/components/tag/demo/colorful.md +++ b/components/tag/demo/colorful.md @@ -1,20 +1,26 @@ --- -debug: true -order: -1 -title: Colorful Tags for Debugging +order: 1 +title: + zh-ch: 多彩标签 + en-US: Colorful --- -`Tag[color]` is deprecated, but we need this demo for debugging until next major version. +## zh-CN + +基本标签可以通过 `color` 设置背景色，以提供视觉暗示区分不同目的的标签。 + +## en-US + +We can set the background color of basic Tag by `color`, and it's helpful to tell different Tags. ````jsx import { Tag } from 'antd'; ReactDOM.render(
    - Blue - Green - Yellow - Red + #f50 + #87d068 + #2db7f5
    , mountNode ); diff --git a/components/tag/demo/control.md b/components/tag/demo/control.md index 6eec297369..65fb320238 100644 --- a/components/tag/demo/control.md +++ b/components/tag/demo/control.md @@ -1,21 +1,18 @@ --- -order: 1 -title: +order: 3 +title: zh-CN: 动态添加和删除 - en-US: Dynamically add and remove + en-US: Add & Remove Dynamically --- ## zh-CN -用数组生成一组标签，可以动态添加和删除。 - -使用 `afterClose` 删除时有动画效果。 +用数组生成一组标签，可以动态添加和删除，通过监听删除动画结束的事件 `afterClose` 实现。 ## en-US -Generating a set of tag by array, you can dynamically add and remove. - -Using 'afterClose' property, There are animated when a tag was removed. +Generating a set of Tags by array, you can add and remove dynamically. +It's based on `afterClose` event, which will be triggered while the close animation end. ````jsx import { Tag, Button } from 'antd'; diff --git a/components/tag/index.en-US.md b/components/tag/index.en-US.md index 835fae246d..f6f828d7a9 100644 --- a/components/tag/index.en-US.md +++ b/components/tag/index.en-US.md @@ -16,6 +16,7 @@ Tag for categorizing or markuping. | Property | Description | Type | Default | |--------------|-----------------------|----------|--------------| +| color | The background color of Tag | string | - | | closable | Tag can be closed. | boolean | false | -| onClose | Callback when tag was closed | function(event)| - | -| afterClose | Callback when closed animation is complete | function(event)| - | +| onClose | Callback when tag was closed | (e) => void| - | +| afterClose | Callback when closed animation is complete | () => void | - | diff --git a/components/tag/index.tsx b/components/tag/index.tsx index a507539399..34a9cbba61 100644 --- a/components/tag/index.tsx +++ b/components/tag/index.tsx @@ -9,6 +9,7 @@ import warning from '../_util/warning'; import splitObject from '../_util/splitObject'; export interface TagProps { + color?: string; /** 标签是否可以关闭 */ closable?: boolean; /** 关闭时的回调 */ @@ -24,9 +25,13 @@ export default class Tag extends React.Component { closable: false, }; - constructor(props) { + constructor(props: TagProps) { super(props); - warning(!('color' in props), '`Tag[color]` is deprecated, please override color by CSS instead.'); + warning( + !/blue|red|green|yellow/.test(props.color || ''), + '`Tag[color=red|green|blue|yellow]` is deprecated, ' + + 'please set color by `#abc` or `rgb(a, b, c)` instead.' + ); this.state = { closing: false, diff --git a/components/tag/index.zh-CN.md b/components/tag/index.zh-CN.md index 4e23029349..f487afc8e3 100644 --- a/components/tag/index.zh-CN.md +++ b/components/tag/index.zh-CN.md @@ -16,6 +16,7 @@ title: Tag | 参数 | 说明 | 类型 | 默认值 | |----------------|-------------------------------|------|--------| +| color | 标签背景色 | string | - | | closable | 标签是否可以关闭 | boolean | false | -| onClose | 关闭时的回调 | function(event) | - | -| afterClose | 关闭动画完成后的回调 | function(event) | - | +| onClose | 关闭时的回调 | (e) => void | - | +| afterClose | 关闭动画完成后的回调 | () => void | - | diff --git a/components/tag/style/index.less b/components/tag/style/index.less index a6eafe91c3..34af62f00a 100644 --- a/components/tag/style/index.less +++ b/components/tag/style/index.less @@ -53,12 +53,6 @@ &-has-color { border-color: transparent; - } - - &-blue, - &-green, - &-yellow, - &-red { &, a, a:hover, From e64f04cee55c484b192a43043bf63a0bc79d8ace Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Thu, 10 Nov 2016 11:14:03 +0800 Subject: [PATCH 0681/2145] feat: CheckableTag, close: #3560 --- components/tag/CheckableTag.tsx | 33 +++++++++++++++++++++++++ components/tag/demo/checkable.md | 39 ++++++++++++++++++++++++++++++ components/tag/demo/colorful.md | 2 +- components/tag/demo/control.md | 41 ++++++++++++++++---------------- components/tag/index.en-US.md | 9 +++++++ components/tag/index.tsx | 2 ++ components/tag/index.zh-CN.md | 9 +++++++ components/tag/style/index.less | 20 +++++++++++++++- 8 files changed, 133 insertions(+), 22 deletions(-) create mode 100644 components/tag/CheckableTag.tsx create mode 100644 components/tag/demo/checkable.md diff --git a/components/tag/CheckableTag.tsx b/components/tag/CheckableTag.tsx new file mode 100644 index 0000000000..ecf4ab88dd --- /dev/null +++ b/components/tag/CheckableTag.tsx @@ -0,0 +1,33 @@ +import React from 'react'; +import classNames from 'classnames'; +import splitObject from '../_util/splitObject'; + +export interface CheckableTagProps { + prefixCls?: string; + className?: string; + checked: boolean; + onChange?: (checked) => void; +} + +export default class CheckableTag extends React.Component { + handleClick = () => { + const { checked, onChange } = this.props; + if (onChange) { + onChange(!checked); + } + } + render() { + const [{ prefixCls = 'ant-tag', className = '', checked }, restProps ] = splitObject( + this.props, ['prefixCls', 'className', 'checked'] + ); + const cls = classNames({ + [`${prefixCls}`]: true, + [`${prefixCls}-checkable`]: true, + [`${prefixCls}-checkable-checked`]: checked, + [className]: className, + }); + + delete restProps.onChange; + return
    ; + } +} diff --git a/components/tag/demo/checkable.md b/components/tag/demo/checkable.md new file mode 100644 index 0000000000..cf0c07365c --- /dev/null +++ b/components/tag/demo/checkable.md @@ -0,0 +1,39 @@ +--- +order: 3 +title: + zh-CN: 可选择 + en-US: Checkable +--- + +## zh-CN + +可通过 Tag.CheckableTag 实现类似 Checkbox 的效果，该组件为完全受控组件，不支持非受控用法。 + +## en-US + +Tag.CheckableTag works like Checkbox, and it is an absolute controlled component and has no uncontrolled mode. + +````jsx +import { Tag } from 'antd'; +const CheckableTag = Tag.CheckableTag; + +class ControlledCheckableTag extends React.Component { + state = { checked: false }; + handleChange = (checked) => { + this.setState({ checked }); + } + + render() { + return ; + } +} + +ReactDOM.render( +
    + Unchecked + Checked + Controlled +
    , + mountNode +); +```` diff --git a/components/tag/demo/colorful.md b/components/tag/demo/colorful.md index a7fb357db8..f9155eb1aa 100644 --- a/components/tag/demo/colorful.md +++ b/components/tag/demo/colorful.md @@ -1,7 +1,7 @@ --- order: 1 title: - zh-ch: 多彩标签 + zh-CN: 多彩标签 en-US: Colorful --- diff --git a/components/tag/demo/control.md b/components/tag/demo/control.md index 65fb320238..2bdd5497f7 100644 --- a/components/tag/demo/control.md +++ b/components/tag/demo/control.md @@ -1,5 +1,5 @@ --- -order: 3 +order: 2 title: zh-CN: 动态添加和删除 en-US: Add & Remove Dynamically @@ -18,27 +18,28 @@ It's based on `afterClose` event, which will be triggered while the close animat import { Tag, Button } from 'antd'; let index = 3; -const App = React.createClass({ - getInitialState() { - return { - tags: [ - { key: 1, name: 'Unremovable' }, - { key: 2, name: 'Tag 2' }, - { key: 3, name: 'Tag 3' }, - ], - }; - }, - handleClose(key) { +class EditableTagGroup extends React.Component { + state = { + tags: [ + { key: 1, name: 'Unremovable' }, + { key: 2, name: 'Tag 2' }, + { key: 3, name: 'Tag 3' }, + ], + }; + + handleClose = (key) => { const tags = [...this.state.tags].filter(tag => (tag.key !== key) && tag); console.log(tags); this.setState({ tags }); - }, - addTag() { - const tags = [...this.state.tags]; + } + + addTag = () => { index += 1; - tags.push({ key: index, name: `New tag ${index}` }); + const tags = [...this.state.tags, { key: index, name: `New tag ${index}` }]; + console.log(tags); this.setState({ tags }); - }, + } + render() { const { tags } = this.state; return ( @@ -51,8 +52,8 @@ const App = React.createClass({
    ); - }, -}); + } +} -ReactDOM.render(, mountNode); +ReactDOM.render(, mountNode); ```` diff --git a/components/tag/index.en-US.md b/components/tag/index.en-US.md index f6f828d7a9..decd0e910a 100644 --- a/components/tag/index.en-US.md +++ b/components/tag/index.en-US.md @@ -14,9 +14,18 @@ Tag for categorizing or markuping. ## API +### Tag + | Property | Description | Type | Default | |--------------|-----------------------|----------|--------------| | color | The background color of Tag | string | - | | closable | Tag can be closed. | boolean | false | | onClose | Callback when tag was closed | (e) => void| - | | afterClose | Callback when closed animation is complete | () => void | - | + +### Tag.CheckableTag + +| Property | Description | Type | Default | +|--------------|-----------------------|----------|--------------| +| checked | To set the checked status for Tag | boolean | false | +| onChange | A callback which will be called while Tag is clicked | (checked) => void | - | diff --git a/components/tag/index.tsx b/components/tag/index.tsx index 34a9cbba61..5371b717be 100644 --- a/components/tag/index.tsx +++ b/components/tag/index.tsx @@ -7,6 +7,7 @@ import assign from 'object-assign'; import Icon from '../icon'; import warning from '../_util/warning'; import splitObject from '../_util/splitObject'; +import CheckableTag from './CheckableTag'; export interface TagProps { color?: string; @@ -20,6 +21,7 @@ export interface TagProps { } export default class Tag extends React.Component { + static CheckableTag = CheckableTag; static defaultProps = { prefixCls: 'ant-tag', closable: false, diff --git a/components/tag/index.zh-CN.md b/components/tag/index.zh-CN.md index f487afc8e3..c311a7029d 100644 --- a/components/tag/index.zh-CN.md +++ b/components/tag/index.zh-CN.md @@ -14,9 +14,18 @@ title: Tag ## API +### Tag + | 参数 | 说明 | 类型 | 默认值 | |----------------|-------------------------------|------|--------| | color | 标签背景色 | string | - | | closable | 标签是否可以关闭 | boolean | false | | onClose | 关闭时的回调 | (e) => void | - | | afterClose | 关闭动画完成后的回调 | () => void | - | + +### Tag.CheckableTag + +| 参数 | 说明 | 类型 | 默认值 | +|----------------|-------------------------------|------|--------| +| checked | 设置标签的选中状态 | boolean | false | +| onChange | 点击标签时触发的回调 | (checked) => void | - | diff --git a/components/tag/style/index.less b/components/tag/style/index.less index 34af62f00a..0014a4a21d 100644 --- a/components/tag/style/index.less +++ b/components/tag/style/index.less @@ -16,7 +16,7 @@ vertical-align: middle; opacity: 1; overflow: hidden; - margin: 2px 4px 2px 0; + margin: 4px 8px 4px 0; cursor: pointer; &:hover { @@ -78,6 +78,24 @@ background: @error-color; } + &-checkable { + background-color: transparent; + border-color: transparent; + + &:hover, + &:active, + &-checked { + color: #fff; + } + &:hover { + background-color: tint(@primary-color, 20%); + } + &:active, + &-checked { + background-color: shade(@primary-color, 5%); + } + } + &-close { width: 0 !important; padding: 0; From 850e713e7f570381be2f0cfbb622a1945f0fcfa7 Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 10 Nov 2016 11:35:12 +0800 Subject: [PATCH 0682/2145] Improve text overflow for MenuItem and AnchorLink, close #3712 --- components/anchor/AnchorLink.tsx | 1 + components/anchor/style/index.less | 3 +++ components/menu/style/index.less | 2 ++ 3 files changed, 6 insertions(+) diff --git a/components/anchor/AnchorLink.tsx b/components/anchor/AnchorLink.tsx index 74aae24947..0a65380ed5 100644 --- a/components/anchor/AnchorLink.tsx +++ b/components/anchor/AnchorLink.tsx @@ -82,6 +82,7 @@ export default class AnchorLink extends React.Component { className={`${prefixCls}-link-title`} onClick={this.scrollTo} href={href} + title={typeof title === 'string' ? title : ''} > {title} diff --git a/components/anchor/style/index.less b/components/anchor/style/index.less index 2c18dfc62b..2737b63278 100644 --- a/components/anchor/style/index.less +++ b/components/anchor/style/index.less @@ -54,6 +54,9 @@ position: relative; transition: all .3s; color: @text-color; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } &-active > &-title { diff --git a/components/menu/style/index.less b/components/menu/style/index.less index 6b4564c95a..82651ccd4e 100644 --- a/components/menu/style/index.less +++ b/components/menu/style/index.less @@ -278,6 +278,8 @@ font-size: @font-size-base; line-height: 42px; height: 42px; + overflow: hidden; + text-overflow: ellipsis; } } From 751b597df14141b5b3b00f353603b5e7336ea7aa Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Thu, 10 Nov 2016 11:44:12 +0800 Subject: [PATCH 0683/2145] docs: update demo variable name --- components/tag/demo/checkable.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/tag/demo/checkable.md b/components/tag/demo/checkable.md index cf0c07365c..fd04012b3a 100644 --- a/components/tag/demo/checkable.md +++ b/components/tag/demo/checkable.md @@ -17,7 +17,7 @@ Tag.CheckableTag works like Checkbox, and it is an absolute controlled component import { Tag } from 'antd'; const CheckableTag = Tag.CheckableTag; -class ControlledCheckableTag extends React.Component { +class UncontrolledCheckableTag extends React.Component { state = { checked: false }; handleChange = (checked) => { this.setState({ checked }); @@ -32,7 +32,7 @@ ReactDOM.render(
    Unchecked Checked - Controlled + Uncontrolled
    , mountNode ); From 8fa50cfddccc187d586c3534f110986f3bd9648d Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Thu, 10 Nov 2016 14:32:17 +0800 Subject: [PATCH 0684/2145] docs: add meaningful demo for CheckableTag --- components/tag/demo/hot-tags.md | 56 +++++++++++++++++++++++++++++++++ 1 file changed, 56 insertions(+) create mode 100644 components/tag/demo/hot-tags.md diff --git a/components/tag/demo/hot-tags.md b/components/tag/demo/hot-tags.md new file mode 100644 index 0000000000..1e1d26fb23 --- /dev/null +++ b/components/tag/demo/hot-tags.md @@ -0,0 +1,56 @@ +--- +order: 4 +title: + zh-CN: 热门标签 + en-US: Hot Tags +--- + +## zh-CN + +选择你感兴趣的话题。 + +## en-US + +Select your favourite topics. + +````jsx +import { Tag } from 'antd'; +const CheckableTag = Tag.CheckableTag; + +const tagsFromServer = ['Movie', 'Books', 'Music']; + +class HotTags extends React.Component { + state = { + selectedTags: [], + }; + + handleChange(tag, checked) { + const { selectedTags } = this.state; + const nextSelectedTags = checked ? + [...selectedTags, tag] : + selectedTags.filter(t => t !== tag); + console.log('You are interested in: ', nextSelectedTags); + this.setState({ selectedTags: nextSelectedTags }); + } + + render() { + const { selectedTags } = this.state; + return ( +
    + Hots: + {tagsFromServer.map(tag => ( + -1} + onChange={checked => this.handleChange(tag, checked)} + > + {tag} + + ))} +
    + ); + } +} + +ReactDOM.render(, mountNode); +```` From e7cf2a4f3f63822e8b38f4ac9f10e506b492cde9 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Thu, 10 Nov 2016 16:11:22 +0800 Subject: [PATCH 0685/2145] docs: update demos for Form, close: #3558 --- components/form/demo/advanced-search.md | 48 +++++++---- components/form/demo/dynamic-form-item.md | 95 ++++++++++++++------- components/form/demo/without-form-create.md | 54 ++++++------ 3 files changed, 123 insertions(+), 74 deletions(-) diff --git a/components/form/demo/advanced-search.md b/components/form/demo/advanced-search.md index 45bf9d947e..b6aeb0e172 100644 --- a/components/form/demo/advanced-search.md +++ b/components/form/demo/advanced-search.md @@ -22,25 +22,27 @@ Because the width of label is not fixed, you may need to adjust it by customizin import { Form, Row, Col, Input, Button, Icon } from 'antd'; const FormItem = Form.Item; -const AdvancedSearchForm = Form.create()(React.createClass({ - getInitialState() { - return { - expand: false, - }; - }, - handleSearch(e) { +class AdvancedSearchForm extends React.Component { + state = { + expand: false, + }; + + handleSearch = (e) => { e.preventDefault(); this.props.form.validateFields((err, values) => { console.log('Received values of form: ', values); }); - }, - handleReset() { + } + + handleReset = () => { this.props.form.resetFields(); - }, - toggle() { + } + + toggle = () => { const { expand } = this.state; this.setState({ expand: !expand }); - }, + } + render() { const { getFieldDecorator } = this.props.form; const formItemLayout = { @@ -86,10 +88,17 @@ const AdvancedSearchForm = Form.create()(React.createClass({ ); - }, -})); + } +} -ReactDOM.render(, mountNode); +const WrappedAdvancedSearchForm = Form.create()(AdvancedSearchForm); +ReactDOM.render( +
    + +
    Search Result List
    +
    , + mountNode +); ```` ````css @@ -105,4 +114,13 @@ ReactDOM.render(, mountNode); #components-form-demo-advanced-search .ant-form-horizontal { max-width: none; } +#components-form-demo-advanced-search .search-result-list { + margin-top: 16px; + border: 1px dashed #e9e9e9; + border-radius: 6px; + background-color: #fafafa; + min-height: 200px; + text-align: center; + padding-top: 80px; +} diff --git a/components/form/demo/dynamic-form-item.md b/components/form/demo/dynamic-form-item.md index 637b31452f..1fbd72a39d 100644 --- a/components/form/demo/dynamic-form-item.md +++ b/components/form/demo/dynamic-form-item.md @@ -14,25 +14,33 @@ title: Add or remove form items dynamically. ````jsx -import { Form, Input, Button } from 'antd'; +import { Form, Input, Icon, Button } from 'antd'; +const FormItem = Form.Item; let uuid = 0; -let Demo = React.createClass({ +class DynamicFieldSet extends React.Component { componentWillMount() { this.props.form.setFieldsValue({ keys: [0], }); - }, - remove(k) { + } + + remove = (k) => { const { form } = this.props; // can use data-binding to get const keys = form.getFieldValue('keys'); + // We need at least one passenger + if (keys.length === 1) { + return; + } + // can use data-binding to set form.setFieldsValue({ keys: keys.filter(key => key !== k), }); - }, - add() { + } + + add = () => { uuid++; const { form } = this.props; // can use data-binding to get @@ -43,51 +51,72 @@ let Demo = React.createClass({ form.setFieldsValue({ keys: nextKeys, }); - }, - handleSubmit(e) { - e.preventDefault(); - this.props.form.validateFields((err, values) => { - if (!err) { - console.log('Received values of form: ', values); - } - }); - }, + } + render() { const { getFieldDecorator, getFieldValue } = this.props.form; - const formItemLayout = { - labelCol: { span: 6 }, - wrapperCol: { span: 18 }, + labelCol: { span: 4 }, + wrapperCol: { span: 20 }, + }; + const formItemLayoutWithOutLabel = { + wrapperCol: { span: 20, offset: 4 }, }; - const formItems = getFieldValue('keys').map((k) => { + const keys = getFieldValue('keys'); + const formItems = keys.map((k, index) => { return ( - - {getFieldDecorator(`name${k}`, { + + {getFieldDecorator(`names-${k}`, { + validateTrigger: ['onChange', 'onBlur'], rules: [{ required: true, whitespace: true, - message: "Your good friend's name", + message: "Please input passenger's name or delete this field.", }], })( )} - - + this.remove(k)} + /> +     ); }); return ( -
    + {formItems} - - - - + + + ); - }, -}); + } +} -Demo = Form.create()(Demo); -ReactDOM.render(, mountNode); +const WrappedDynamicFieldSet = Form.create()(DynamicFieldSet); +ReactDOM.render(, mountNode); +```` + +````css +#components-form-demo-dynamic-form-item .delete-button { + cursor: pointer; + position: relative; + top: 4px; + font-size: 24px; + color: #999; +} +#components-form-demo-dynamic-form-item .delete-button[disabled] { + cursor: not-allowed; +} ```` diff --git a/components/form/demo/without-form-create.md b/components/form/demo/without-form-create.md index 13ea524f02..fa74d6df17 100644 --- a/components/form/demo/without-form-create.md +++ b/components/form/demo/without-form-create.md @@ -17,47 +17,49 @@ title: import { Form, InputNumber } from 'antd'; const FormItem = Form.Item; -const RawForm = React.createClass({ - getInitialState() { +function validatePrimeNumber(number) { + if (number === 11) { return { - number: { - value: 11, - }, + validateStatus: 'success', + errorMsg: null, }; - }, - handleNumberChange(value) { + } + return { + validateStatus: 'error', + errorMsg: 'The prime between 8 and 12 is 11!', + }; +} + +class RawForm extends React.Component { + state = { + number: { + value: 11, + }, + }; + + handleNumberChange = (value) => { this.setState({ number: { - ...this.validatePrimeNumber(value), + ...validatePrimeNumber(value), value, }, }); - }, - validatePrimeNumber(number) { - if (number === 11) { - return { - validateStatus: 'success', - errorMsg: null, - }; - } - return { - validateStatus: 'error', - errorMsg: 'The prime number between 8 to 12 is 11!', - }; - }, + } + render() { const formItemLayout = { - labelCol: { span: 8 }, + labelCol: { span: 7 }, wrapperCol: { span: 12 }, }; const number = this.state.number; + const tips = 'A prime is a natural number greater than 1 that has no positive divisors other than 1 and itself.'; return (
    ); - }, -}); + } +} ReactDOM.render(, mountNode); ```` From 01f5b619823f1392ebeb9b33cc4b34b1233290d0 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 11 Nov 2016 00:57:14 +0800 Subject: [PATCH 0686/2145] Add position relative for table cell --- components/table/style/index.less | 1 + 1 file changed, 1 insertion(+) diff --git a/components/table/style/index.less b/components/table/style/index.less index c80bc879f2..42a3957ab7 100644 --- a/components/table/style/index.less +++ b/components/table/style/index.less @@ -49,6 +49,7 @@ &-tbody > tr > td { border-bottom: 1px solid @border-color-split; + position: relative; } &-thead > tr, From 4da0ae4f42a24e71788c5e87700332e4a2339fc6 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Fri, 11 Nov 2016 12:08:18 +0800 Subject: [PATCH 0687/2145] docs: update demos for DatePicker, ref: #3793 --- components/date-picker/demo/basic.md | 14 ++- components/date-picker/demo/disabled-date.md | 56 +++++++----- components/date-picker/demo/disabled.md | 16 +++- components/date-picker/demo/format.md | 34 ++++++++ components/date-picker/demo/formatter.md | 24 ------ components/date-picker/demo/locale.md | 10 ++- components/date-picker/demo/month-picker.md | 24 ------ components/date-picker/demo/range.md | 31 ------- components/date-picker/demo/size.md | 47 +++++++--- components/date-picker/demo/start-end.md | 90 +++++++++++--------- components/date-picker/demo/time.md | 21 +++-- components/date-picker/index.en-US.md | 7 +- components/date-picker/index.zh-CN.md | 7 +- 13 files changed, 207 insertions(+), 174 deletions(-) create mode 100644 components/date-picker/demo/format.md delete mode 100644 components/date-picker/demo/formatter.md delete mode 100644 components/date-picker/demo/month-picker.md delete mode 100644 components/date-picker/demo/range.md diff --git a/components/date-picker/demo/basic.md b/components/date-picker/demo/basic.md index 4e3accd60d..39db1ce6f7 100644 --- a/components/date-picker/demo/basic.md +++ b/components/date-picker/demo/basic.md @@ -7,18 +7,26 @@ title: ## zh-CN -最简单的用法。 +最简单的用法，在浮层中可以选择或者输入日期。 ## en-US -The most basic usage. +Basic use case. Users can select or input a date in panel. ````jsx import { DatePicker } from 'antd'; +const { MonthPicker, RangePicker } = DatePicker; function onChange(date, dateString) { console.log(date, dateString); } -ReactDOM.render(, mountNode); +ReactDOM.render( +
    +
    +
    + +
    , + mountNode +); ```` diff --git a/components/date-picker/demo/disabled-date.md b/components/date-picker/demo/disabled-date.md index 7df897b895..ad845d9f45 100644 --- a/components/date-picker/demo/disabled-date.md +++ b/components/date-picker/demo/disabled-date.md @@ -1,28 +1,23 @@ --- order: 6 title: - zh-CN: 指定不可选择日期 - en-US: Specify the date that cannot be selected + zh-CN: 不可选择日期和时间 + en-US: Disabled Date & Time --- ## zh-CN -设置 `disabledDate` 方法，来确定不可选时段。 -设置 `disabledTime` 方法，来确定 showTime 的 RangePicker 的不可选时间段。 - -如上例：不可选择今天之后的日期。 +可用 `disabledDate` 和 `disabledTime` 分别禁止选择部分日期和时间，其中 `disabledTime` 需要和 `showTime` 一起使用。 ## en-US -Specify unselectable period by `disabledDate`. - -As in the example above: you can't select a date later than today. +Disabled part of dates and time by `disabledDate` and `disabledTime` respectively, and `disabledTime` only works with `showTime`. ````jsx import { DatePicker } from 'antd'; const RangePicker = DatePicker.RangePicker; -function newArray(start, end) { +function range(start, end) { const result = []; for (let i = start; i < end; i++) { result.push(i); @@ -31,20 +26,33 @@ function newArray(start, end) { } -const disabledDate = function (current) { +function disabledDate(current) { // can not select days after today return current && current.valueOf() > Date.now(); -}; +} -function disabledTime(time, type) { - console.log('disabledTime', time, type); +function disabledDateTime() { + return { + disabledHours() { + return range(0, 60).splice(4, 20); + }, + disabledMinutes() { + return range(30, 60); + }, + disabledSeconds() { + return [55, 56]; + }, + }; +} + +function disabledRangeTime(_, type) { if (type === 'start') { return { disabledHours() { - return newArray(0, 60).splice(4, 20); + return range(0, 60).splice(4, 20); }, disabledMinutes() { - return newArray(30, 60); + return range(30, 60); }, disabledSeconds() { return [55, 56]; @@ -53,10 +61,10 @@ function disabledTime(time, type) { } return { disabledHours() { - return newArray(0, 60).splice(20, 4); + return range(0, 60).splice(20, 4); }, disabledMinutes() { - return newArray(0, 31); + return range(0, 31); }, disabledSeconds() { return [55, 56]; @@ -64,10 +72,12 @@ function disabledTime(time, type) { }; } -ReactDOM.render(
    - +ReactDOM.render( +
    +
    - -
    -, mountNode); + +
    , + mountNode +); ```` diff --git a/components/date-picker/demo/disabled.md b/components/date-picker/demo/disabled.md index 8d1b1bbfde..b45430c9a7 100644 --- a/components/date-picker/demo/disabled.md +++ b/components/date-picker/demo/disabled.md @@ -1,5 +1,5 @@ --- -order: 5 +order: 4 title: zh-CN: 禁用 en-US: Disabled @@ -16,8 +16,18 @@ A disabled state of the `DatePicker`. ````jsx import { DatePicker } from 'antd'; import moment from 'moment'; +const { MonthPicker, RangePicker } = DatePicker; +const dateFormat = 'YYYY-MM-DD'; ReactDOM.render( - -, mountNode); +
    +
    +
    + +
    , + mountNode +); ```` diff --git a/components/date-picker/demo/format.md b/components/date-picker/demo/format.md new file mode 100644 index 0000000000..c774919530 --- /dev/null +++ b/components/date-picker/demo/format.md @@ -0,0 +1,34 @@ +--- +order: 1 +title: + zh-CN: 日期格式 + en-US: Date Format +--- + +## zh-CN + +使用 `format` 属性，可以自定义日期显示格式。 + +## en-US + +We can set the date format by `format`. + +````jsx +import { DatePicker } from 'antd'; +import moment from 'moment'; +const { MonthPicker, RangePicker } = DatePicker; + +const dateFormat = 'YYYY/MM/DD'; +const monthFormat = 'YYYY/MM'; +ReactDOM.render( +
    +
    +
    +
    +
    , + mountNode +); +```` diff --git a/components/date-picker/demo/formatter.md b/components/date-picker/demo/formatter.md deleted file mode 100644 index fb10eaf41b..0000000000 --- a/components/date-picker/demo/formatter.md +++ /dev/null @@ -1,24 +0,0 @@ ---- -order: 1 -title: - zh-CN: 日期格式 - en-US: Date format ---- - -## zh-CN - -使用 `format` 属性，可以自定义你需要的日期显示格式，如 `YYYY/MM/DD`。 - -## en-US - -By using `format`, you can customize the format(such as `YYYY/MM/DD`) the date is displayed in. - -````jsx -import { DatePicker } from 'antd'; -import moment from 'moment'; - -const format = 'YYYY/MM/DD'; -ReactDOM.render( - -, mountNode); -```` diff --git a/components/date-picker/demo/locale.md b/components/date-picker/demo/locale.md index 00d15d15eb..846883df88 100644 --- a/components/date-picker/demo/locale.md +++ b/components/date-picker/demo/locale.md @@ -1,5 +1,5 @@ --- -order: 10 +order: 7 title: zh-CN: 国际化 en-US: Locale @@ -7,24 +7,26 @@ title: ## zh-CN -通过 `locale` 语言, 默认支持 `en_US`，`zh_CN`。 +通过 `locale` 设置语言, 默认支持 `en_US`，`zh_CN`。 -moment 会自动使用当前时区，如果需要使用别的时区，则需要自行设置，设置方法请参考 [下面的文档](/components/date-picker/#DatePicker)。 +moment 会自动使用当前时区，如果需要使用别的时区，则需要自行设置，设置方法请参考示例代码中的注释。 ## en-US Use locale to set the language. `en_US`, `zh_CN` are supported by default. -moment will use your time zone automatically. If you want to set other time zone, please set it by yourself. [More](/components/date-picker/#DatePicker) +moment will use your time zone automatically. If you want to set other time zone, please set it by yourself. ````jsx import { DatePicker } from 'antd'; import enUS from 'antd/lib/date-picker/locale/en_US'; import moment from 'moment-timezone/moment-timezone'; + // It's recommended to set moment locale and time zone globally in entry file, // otherwise, you need to set it by `value` or `defaultValue`. // moment.locale('en'); + // The following data is copied from https://github.com/moment/moment-timezone/blob/develop/data/packed/latest.json // moment.tz.add('Europe/London|GMT BST BDST|0 -10 -20|0101010101010101010101010101010101010101010101010121212121210101210101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010|-2axa0 Rc0 1fA0 14M0 1fc0 1g00 1co0 1dc0 1co0 1oo0 1400 1dc0 19A0 1io0 1io0 WM0 1o00 14o0 1o00 17c0 1io0 17c0 1fA0 1a00 1lc0 17c0 1io0 17c0 1fA0 1a00 1io0 17c0 1io0 17c0 1fA0 1cM0 1io0 17c0 1fA0 1a00 1io0 17c0 1io0 17c0 1fA0 1a00 1io0 1qM0 Dc0 2Rz0 Dc0 1zc0 Oo0 1zc0 Rc0 1wo0 17c0 1iM0 FA0 xB0 1fA0 1a00 14o0 bb0 LA0 xB0 Rc0 1wo0 11A0 1o00 17c0 1fA0 1a00 1fA0 1cM0 1fA0 1a00 17c0 1fA0 1a00 1io0 17c0 1lc0 17c0 1fA0 1a00 1io0 17c0 1io0 17c0 1fA0 1a00 1a00 1qM0 WM0 1qM0 11A0 1o00 WM0 1qM0 WM0 1qM0 WM0 1qM0 WM0 1tA0 IM0 90o0 U00 1tA0 U00 1tA0 U00 1tA0 U00 1tA0 WM0 1qM0 WM0 1qM0 WM0 1tA0 U00 1tA0 U00 1tA0 11z0 1o00 11A0 1o00 11A0 1o00 11A0 1qM0 11A0 1o00 11A0 1o00 11A0 1o00 11A0 1o00 11A0 1qM0 WM0 1qM0 11A0 1o00 11A0 1o00 11A0 1o00 11A0 1o00 11A0 1o00 14o0 1o00 11A0 1o00 11A0 1o00 11A0 1qM0 WM0 1qM0 WM0 1qM0 11A0 1o00 11A0 1o00 11A0 1qM0 WM0 1qM0 WM0 1qM0 WM0 1qM0 11A0 1o00 11A0 1o00 11A0 1qM0 WM0 1qM0 WM0 1qM0 11A0 1o00 11A0 1o00 11A0 1o00 11A0 1qM0 WM0 1qM0 WM0 1qM0 11A0 1o00 11A0 1o00 11A0 1qM0 WM0 1qM0 WM0 1qM0 11A0 1o00 11A0 1o00 11A0 1o00 11A0 1qM0 WM0 1qM0 WM0 1qM0 11A0 1o00 11A0 1o00 11A0 1qM0 WM0 1qM0 WM0 1qM0 WM0 1qM0 11A0 1o00 11A0 1o00|10e6'); // moment.tz.setDefault('Europe/London') diff --git a/components/date-picker/demo/month-picker.md b/components/date-picker/demo/month-picker.md deleted file mode 100644 index 073608cda6..0000000000 --- a/components/date-picker/demo/month-picker.md +++ /dev/null @@ -1,24 +0,0 @@ ---- -order: 9 -title: - zh-CN: 月选择器 - en-US: MonthPicker ---- - -## zh-CN - -使用 `MonthPicker` 实现月选择器。 - -## en-US - -You can get a month selector by using `MonthPicker`. - -````jsx -import { DatePicker } from 'antd'; -import moment from 'moment'; - -const MonthPicker = DatePicker.MonthPicker; -ReactDOM.render( - -, mountNode); -```` diff --git a/components/date-picker/demo/range.md b/components/date-picker/demo/range.md deleted file mode 100644 index c1e13b7a77..0000000000 --- a/components/date-picker/demo/range.md +++ /dev/null @@ -1,31 +0,0 @@ ---- -order: 8 -title: - zh-CN: 日期范围二 - en-US: Date range, case 2 ---- - -## zh-CN - -使用 `RangePicker` 实现日期范围选择有更好的交互体验。 - -## en-US - -By using `RangePicker` to specify a date range, you can achieve a better interactive experience. - - - -````jsx -import { DatePicker } from 'antd'; -const RangePicker = DatePicker.RangePicker; - -function onChange(dates, dateStrings) { - console.log('From: ', dates[0], ', to: ', dates[1]); - console.log('From: ', dateStrings[0], ', to: ', dateStrings[1]); -} -ReactDOM.render(
    - -
    - -
    , mountNode); -```` diff --git a/components/date-picker/demo/size.md b/components/date-picker/demo/size.md index 132651517a..f8fd8fc007 100644 --- a/components/date-picker/demo/size.md +++ b/components/date-picker/demo/size.md @@ -1,27 +1,48 @@ --- -order: 1 -title: +order: 2 +title: zh-CN: 三种大小 - en-US: Three sizes + en-US: Three Sizes --- ## zh-CN -三种大小的输入框，大的用在表单中，中的为默认。 +三种大小的输入框，若不设置，则为 `default`。 ## en-US -The input box comes in three sizes. `large` is used in the form, while the medium size is the default. +The input box comes in three sizes. `default` will be used if `size` is omitted. ````jsx -import { DatePicker } from 'antd'; +import { DatePicker, Radio } from 'antd'; +const { MonthPicker, RangePicker } = DatePicker; -ReactDOM.render( -
    - - - -
    -, mountNode); +class PickerSizesDemo extends React.Component { + state = { + size: 'default', + }; + + handleSizeChange = (e) => { + this.setState({ size: e.target.value }); + } + + render() { + const { size } = this.state; + return ( +
    + + Large + Default + Small +

    +
    +
    + +
    + ); + } +} + +ReactDOM.render(, mountNode); ```` diff --git a/components/date-picker/demo/start-end.md b/components/date-picker/demo/start-end.md index 87982832e8..453c51dcbc 100644 --- a/components/date-picker/demo/start-end.md +++ b/components/date-picker/demo/start-end.md @@ -1,69 +1,81 @@ --- -order: 7 +order: 6 title: - zh-CN: 日期范围一 - en-US: Date range, case 1 + zh-CN: 自定义日期范围选择 + en-US: Customized Range Picker --- ## zh-CN -可以设置 `disabledDate` 方法，来约束开始和结束日期。 +当 `RangePicker` 无法满足业务需求时，可以使用两个 `DatePicker` 实现类似的功能。 +> * 通过设置 `disabledDate` 方法，来约束开始和结束日期。 +> * 通过 `open` `onOpenChange` 来优化交互。 ## en-US -You can use the `disabledDate` property to limit the start and end dates. - +When `RangePicker` is not satisfied your requirements, try to implement similar functionality with two `DatePicker`. +> * Use the `disabledDate` property to limit the start and end dates. +> * Imporve user experience with `open` `onOpenChange`. ````jsx import { DatePicker } from 'antd'; -const DateRange = React.createClass({ - getInitialState() { - return { - startValue: null, - endValue: null, - endOpen: false, - }; - }, - disabledStartDate(startValue) { - if (!startValue || !this.state.endValue) { +class DateRange extends React.Component { + state = { + startValue: null, + endValue: null, + endOpen: false, + }; + + disabledStartDate = (startValue) => { + const endValue = this.state.endValue; + if (!startValue || !endValue) { return false; } - return startValue.valueOf() > this.state.endValue.valueOf(); - }, - disabledEndDate(endValue) { - if (!endValue || !this.state.startValue) { + return startValue.valueOf() > endValue.valueOf(); + } + + disabledEndDate = (endValue) => { + const startValue = this.state.startValue; + if (!endValue || !startValue) { return false; } - return endValue.valueOf() <= this.state.startValue.valueOf(); - }, - onChange(field, value) { + return endValue.valueOf() <= startValue.valueOf(); + } + + onChange = (field, value) => { this.setState({ [field]: value, }); - }, - onStartChange(value) { + } + + onStartChange = (value) => { this.onChange('startValue', value); - }, - onEndChange(value) { + } + + onEndChange = (value) => { this.onChange('endValue', value); - }, - handleStartOpenChange(open) { + } + + handleStartOpenChange = (open) => { if (!open) { this.setState({ endOpen: true }); } - }, - handleEndOpenChange(open) { + } + + handleEndOpenChange = (open) => { this.setState({ endOpen: open }); - }, + } + render() { + const { startValue, endValue, endOpen } = this.state; return (
    ); - }, -}); + } +} -ReactDOM.render( - -, mountNode); +ReactDOM.render(, mountNode); ```` diff --git a/components/date-picker/demo/time.md b/components/date-picker/demo/time.md index 02e99ff4a1..36e0501b29 100644 --- a/components/date-picker/demo/time.md +++ b/components/date-picker/demo/time.md @@ -1,8 +1,8 @@ --- -order: 4 +order: 3 title: zh-CN: 日期时间选择 - en-US: To choose time + en-US: Choose Time --- ## zh-CN @@ -11,10 +11,11 @@ title: ## en-US -This property provide an additional time selection. When `showTime` is an Object, its properties will be passed on to `TimePicker`, which is a built-in function. +This property provide an additional time selection. When `showTime` is an Object, its properties will be passed on to built-in `TimePicker`. ````jsx import { DatePicker } from 'antd'; +const { RangePicker } = DatePicker; function onChange(value, dateString) { console.log('Selected Time: ', value); @@ -22,6 +23,16 @@ function onChange(value, dateString) { } ReactDOM.render( - -, mountNode); +
    +
    + +
    , + mountNode +); ```` diff --git a/components/date-picker/index.en-US.md b/components/date-picker/index.en-US.md index 5d30ef98b8..49b43e19d4 100644 --- a/components/date-picker/index.en-US.md +++ b/components/date-picker/index.en-US.md @@ -4,7 +4,10 @@ type: Data Entry title: DatePicker --- -To select/input a date. +To select or input a date. There are three kinds of picker: +* DatePicker +* MonthPicker +* RangePicker ## When To Use @@ -12,7 +15,7 @@ By clicking the input box, you can select a date from a popup calendar. ## API -Note: Part of locale of DatePicker, MonthPicker, RangePicker is read from value. So, please set the locale of moment correctly. +**Note:** Part of locale of DatePicker, MonthPicker, RangePicker is read from value. So, please set the locale of moment correctly. ```jsx import moment from 'moment'; diff --git a/components/date-picker/index.zh-CN.md b/components/date-picker/index.zh-CN.md index a424c9d938..78dc446966 100644 --- a/components/date-picker/index.zh-CN.md +++ b/components/date-picker/index.zh-CN.md @@ -5,7 +5,10 @@ title: DatePicker subtitle: 日期选择框 --- -输入或选择日期的控件。 +输入或选择日期的控件，包括以下三种形式。 +* DatePicker +* MonthPicker +* RangePicker ## 何时使用 @@ -13,7 +16,7 @@ subtitle: 日期选择框 ## API -注意：DatePicker、MonthPicker、RangePicker 部分 locale 是从 value 中读取，所以请先正确设置 moment 的 locale。 +**注意：**DatePicker、MonthPicker、RangePicker 部分 locale 是从 value 中读取，所以请先正确设置 moment 的 locale。 ```jsx import moment from 'moment'; From 524a421d728b77976a4082f8e7c144288b160123 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 11 Nov 2016 14:28:29 +0800 Subject: [PATCH 0688/2145] upgrade rc-time-picker to 2.2.0, support TimePicker[format="HH"] (#3793) --- components/time-picker/demo/addon.md | 1 - components/time-picker/demo/basic.md | 6 +++--- components/time-picker/demo/disable-options.md | 4 ++-- components/time-picker/demo/disabled.md | 2 +- components/time-picker/demo/hide-options.md | 2 +- components/time-picker/demo/size.md | 4 ++-- components/time-picker/demo/value.md | 4 ++-- components/time-picker/demo/without-seconds.md | 3 ++- components/time-picker/index.tsx | 1 + package.json | 2 +- 10 files changed, 15 insertions(+), 14 deletions(-) diff --git a/components/time-picker/demo/addon.md b/components/time-picker/demo/addon.md index ddbc4e4c58..becc0adf6c 100644 --- a/components/time-picker/demo/addon.md +++ b/components/time-picker/demo/addon.md @@ -13,7 +13,6 @@ title: Render addon contents to timepicker panel's bottom. - ````jsx import { TimePicker, Button } from 'antd'; diff --git a/components/time-picker/demo/basic.md b/components/time-picker/demo/basic.md index 69f780bc93..632963fe6e 100644 --- a/components/time-picker/demo/basic.md +++ b/components/time-picker/demo/basic.md @@ -1,6 +1,6 @@ --- order: 0 -title: +title: zh-CN: 基本 en-US: Basic --- @@ -9,9 +9,9 @@ title: 最简单的用法。 -## en-US +## en-US -The most basic usage. +The most basic usage. ````jsx import { TimePicker } from 'antd'; diff --git a/components/time-picker/demo/disable-options.md b/components/time-picker/demo/disable-options.md index e7efeba8a5..e3c56505fa 100644 --- a/components/time-picker/demo/disable-options.md +++ b/components/time-picker/demo/disable-options.md @@ -1,6 +1,6 @@ --- order: 5 -title: +title: zh-CN: 禁止选项 en-US: Specify the time that cannot be selected --- @@ -8,7 +8,7 @@ title: 限制选择 `20:30` 到 `23:30` 这个时间段。 -## en-US +## en-US You can't select the time from `20:30` to `23:30`. diff --git a/components/time-picker/demo/disabled.md b/components/time-picker/demo/disabled.md index ea9e82d612..d496c93346 100644 --- a/components/time-picker/demo/disabled.md +++ b/components/time-picker/demo/disabled.md @@ -1,6 +1,6 @@ --- order: 4 -title: +title: zh-CN: 禁用 en-US: disabled --- diff --git a/components/time-picker/demo/hide-options.md b/components/time-picker/demo/hide-options.md index 00ca58ec13..2bbb6c5c27 100644 --- a/components/time-picker/demo/hide-options.md +++ b/components/time-picker/demo/hide-options.md @@ -1,6 +1,6 @@ --- order: 6 -title: +title: zh-CN: 只显示部分选项 en-US: Show part of options. --- diff --git a/components/time-picker/demo/size.md b/components/time-picker/demo/size.md index c3ca214076..890f234181 100644 --- a/components/time-picker/demo/size.md +++ b/components/time-picker/demo/size.md @@ -1,6 +1,6 @@ --- -order: 2 -title: +order: 2 +title: zh-CN: 三种大小 en-US: Three sizes --- diff --git a/components/time-picker/demo/value.md b/components/time-picker/demo/value.md index b75c0f2968..c09f9d8213 100644 --- a/components/time-picker/demo/value.md +++ b/components/time-picker/demo/value.md @@ -1,6 +1,6 @@ --- order: 1 -title: +title: zh-CN: 受控组件 en-US: Under control --- @@ -11,7 +11,7 @@ value 和 onChange 需要配合使用。 ## en-US -`Value` and `onChange` should be used together, +`Value` and `onChange` should be used together, ````jsx import { TimePicker } from 'antd'; diff --git a/components/time-picker/demo/without-seconds.md b/components/time-picker/demo/without-seconds.md index c1d8aaafb7..1bc24c791e 100644 --- a/components/time-picker/demo/without-seconds.md +++ b/components/time-picker/demo/without-seconds.md @@ -1,6 +1,6 @@ --- order: 3 -title: +title: zh-CN: 不展示秒 en-US: Hide the seconds options --- @@ -18,6 +18,7 @@ import { TimePicker } from 'antd'; import moment from 'moment'; const format = 'HH:mm'; + ReactDOM.render( , mountNode); diff --git a/components/time-picker/index.tsx b/components/time-picker/index.tsx index 0aaa63ca9a..ee9f2d7e33 100644 --- a/components/time-picker/index.tsx +++ b/components/time-picker/index.tsx @@ -107,6 +107,7 @@ export default class TimePicker extends React.Component { value={this.state.value} placeholder={props.placeholder || this.getLocale().placeholder} showHour={props.format.indexOf('HH') > -1} + showMinute={props.format.indexOf('mm') > -1} showSecond={props.format.indexOf('ss') > -1} onChange={this.handleChange} addon={(panel) => ( diff --git a/package.json b/package.json index 7b8a80cc83..93ee223941 100644 --- a/package.json +++ b/package.json @@ -65,7 +65,7 @@ "rc-switch": "~1.4.2", "rc-table": "~5.0.0", "rc-tabs": "~7.0.5", - "rc-time-picker": "~2.1.0", + "rc-time-picker": "~2.2.0", "rc-tooltip": "~3.4.2", "rc-tree": "~1.4.0", "rc-tree-select": "~1.8.0", From d6288e5994bd6f50db56c7fbd095e62cb8c71341 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 11 Nov 2016 14:44:37 +0800 Subject: [PATCH 0689/2145] Fix TimePicker panel style (#3793) --- components/time-picker/style/index.less | 14 ++++++-------- package.json | 2 +- 2 files changed, 7 insertions(+), 9 deletions(-) diff --git a/components/time-picker/style/index.less b/components/time-picker/style/index.less index cae1ab17c1..6802f65fb9 100644 --- a/components/time-picker/style/index.less +++ b/components/time-picker/style/index.less @@ -85,6 +85,7 @@ width: 56px; overflow: hidden; position: relative; // Fix chrome weird render bug + max-height: 144px; &:hover { overflow-y: auto; @@ -99,13 +100,16 @@ border-right: 0; } + &:only-child { + width: 100%; + } + ul { list-style: none; box-sizing: border-box; margin: 0; - padding: 0; + padding: 0 0 120px 0; width: 100%; - max-height: 144px; } li { @@ -122,12 +126,6 @@ transition: background 0.3s ease; } - li:last-child:after { - content: ''; - height: 120px; - display: block; - } - li:hover { background: tint(@primary-color, 90%); } diff --git a/package.json b/package.json index 93ee223941..0b7204b00c 100644 --- a/package.json +++ b/package.json @@ -65,7 +65,7 @@ "rc-switch": "~1.4.2", "rc-table": "~5.0.0", "rc-tabs": "~7.0.5", - "rc-time-picker": "~2.2.0", + "rc-time-picker": "~2.2.1", "rc-tooltip": "~3.4.2", "rc-tree": "~1.4.0", "rc-tree-select": "~1.8.0", From be9ed0388cf378bc507a73e7fafc93c4dab9b2d6 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 11 Nov 2016 15:08:02 +0800 Subject: [PATCH 0690/2145] Fix form controls focused error style --- components/form/style/index.less | 20 ++++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/components/form/style/index.less b/components/form/style/index.less index 194e898497..fc714bdbad 100644 --- a/components/form/style/index.less +++ b/components/form/style/index.less @@ -361,7 +361,10 @@ form { .@{ant-prefix}-input-number, .@{ant-prefix}-time-picker-input { border-color: @warning-color; - .active(@warning-color); + &-focused, + &:focus { + .active(@warning-color); + } &:not([disabled]):hover { border-color: @warning-color; } @@ -405,6 +408,7 @@ form { .@{ant-prefix}-input-number, .@{ant-prefix}-time-picker-input { border-color: @error-color; + &-focused, &:focus { .active(@error-color); } @@ -412,17 +416,17 @@ form { border-color: @error-color; } } - .@{ant-prefix}-mention-wrapper, - .@{ant-prefix}-mention-wrapper.active { + .@{ant-prefix}-mention-wrapper { .@{ant-prefix}-mention-editor { - border-color: @error-color; - .active(@error-color); - &:not([disabled]):hover, - &:not([disabled]):focus { + &, + &:not([disabled]):hover { border-color: @error-color; - .active(@error-color); } } + &.active .@{ant-prefix}-mention-editor, + .@{ant-prefix}-mention-editor:not([disabled]):focus { + .active(@error-color); + } } } From 0e6ac6bc4c278a0a42a9bcc8f849945ae800dcfa Mon Sep 17 00:00:00 2001 From: Wei Zhu Date: Fri, 11 Nov 2016 15:26:51 +0800 Subject: [PATCH 0691/2145] Optimize table selection (#3757) * Extract SelectionRadio, SelectionCheckbox, SelectionCheckboxAll * Add some tests --- components/table/SelectionBox.tsx | 81 ++++++++++ components/table/SelectionCheckboxAll.tsx | 114 ++++++++++++++ components/table/Table.tsx | 176 ++++++++-------------- components/table/createStore.tsx | 38 +++++ tests/table/SelectionBox.test.js | 87 +++++++++++ tests/table/Table.test.js | 91 +++++++++++ 6 files changed, 475 insertions(+), 112 deletions(-) create mode 100644 components/table/SelectionBox.tsx create mode 100644 components/table/SelectionCheckboxAll.tsx create mode 100644 components/table/createStore.tsx create mode 100644 tests/table/SelectionBox.test.js create mode 100644 tests/table/Table.test.js diff --git a/components/table/SelectionBox.tsx b/components/table/SelectionBox.tsx new file mode 100644 index 0000000000..f2035ee896 --- /dev/null +++ b/components/table/SelectionBox.tsx @@ -0,0 +1,81 @@ +import React from 'react'; +import Checkbox from '../checkbox'; +import Radio from '../radio'; +import { Store } from './createStore'; + +export interface SelectionBoxProps { + store: Store; + type: string; + defaultSelection: string[]; + rowIndex: string; + disabled?: boolean; + onChange: (e) => void; +} + +export default class SelectionBox extends React.Component { + unsubscribe: () => void; + + constructor(props) { + super(props); + + this.state = { + checked: this.getCheckState(props), + }; + } + + componentDidMount() { + this.subscribe(); + } + + componentWillUnmount() { + if (this.unsubscribe) { + this.unsubscribe(); + } + } + + subscribe() { + const { store } = this.props; + this.unsubscribe = store.subscribe(() => { + const checked = this.getCheckState(this.props); + if (checked !== this.state.checked) { + this.setState({ checked }); + } + }); + } + + getCheckState(props) { + const { store, defaultSelection, rowIndex } = props; + let checked = false; + if (store.getState().selectionDirty) { + checked = store.getState().selectedRowKeys.indexOf(rowIndex) >= 0; + } else { + checked = (store.getState().selectedRowKeys.indexOf(rowIndex) >= 0 || + defaultSelection.indexOf(rowIndex) >= 0); + } + return checked; + } + + render() { + const { type, rowIndex, disabled, onChange } = this.props; + const { checked } = this.state; + + if (type === 'radio') { + return ( + + ); + } + + return ( + + ); + } +} diff --git a/components/table/SelectionCheckboxAll.tsx b/components/table/SelectionCheckboxAll.tsx new file mode 100644 index 0000000000..ad7d78ae88 --- /dev/null +++ b/components/table/SelectionCheckboxAll.tsx @@ -0,0 +1,114 @@ +import React from 'react'; +import Checkbox from '../checkbox'; +import { Store } from './createStore'; + +export interface SelectionCheckboxAllProps { + store: Store; + disabled: boolean; + getCheckboxPropsByItem: (item) => any; + getRecordKey: (record, index?) => string; + data: any[]; + onChange: (e) => void; +} + +export default class SelectionCheckboxAll extends React.Component { + unsubscribe: () => void; + + constructor(props) { + super(props); + + this.state = { + checked: this.getCheckState(), + indeterminate: this.getIndeterminateState(), + }; + } + + componentDidMount() { + this.subscribe(); + } + + componentWillUnmount() { + if (this.unsubscribe) { + this.unsubscribe(); + } + } + + subscribe() { + const { store } = this.props; + this.unsubscribe = store.subscribe(() => { + const checked = this.getCheckState(); + const indeterminate = this.getIndeterminateState(); + if (checked !== this.state.checked) { + this.setState({ checked }); + } + if (indeterminate !== this.state.indeterminate) { + this.setState({ indeterminate }); + } + }); + } + + checkSelection(data, type, byDefaultChecked) { + const { store, getCheckboxPropsByItem, getRecordKey } = this.props; + // type should be 'every' | 'some' + if (type === 'every' || type === 'some') { + return ( + byDefaultChecked + ? data[type](item => getCheckboxPropsByItem(item).defaultChecked) + : data[type]((item, i) => + store.getState().selectedRowKeys.indexOf(getRecordKey(item, i)) >= 0) + ); + } + return false; + } + + getCheckState() { + const { store, data } = this.props; + let checked; + if (!data.length) { + checked = false; + } else { + checked = store.getState().selectionDirty + ? this.checkSelection(data, 'every', false) + : ( + this.checkSelection(data, 'every', false) || + this.checkSelection(data, 'every', true) + ); + + } + return checked; + } + + getIndeterminateState() { + const { store, data } = this.props; + let indeterminate; + if (!data.length) { + indeterminate = false; + } else { + indeterminate = store.getState().selectionDirty + ? ( + this.checkSelection(data, 'some', false) && + !this.checkSelection(data, 'every', false) + ) + : ((this.checkSelection(data, 'some', false) && + !this.checkSelection(data, 'every', false)) || + (this.checkSelection(data, 'some', true) && + !this.checkSelection(data, 'every', true)) + ); + } + return indeterminate; + } + + render() { + const { disabled, onChange } = this.props; + const { checked, indeterminate } = this.state; + + return ( + + ); + } +} diff --git a/components/table/Table.tsx b/components/table/Table.tsx index ffa3398ea3..ac56a6df39 100755 --- a/components/table/Table.tsx +++ b/components/table/Table.tsx @@ -1,7 +1,5 @@ import React from 'react'; import RcTable from 'rc-table'; -import Checkbox from '../checkbox'; -import Radio from '../radio'; import FilterDropdown from './filterDropdown'; import Pagination, { PaginationProps } from '../pagination'; import Icon from '../icon'; @@ -11,6 +9,9 @@ import { flatArray, treeMap } from './util'; import assign from 'object-assign'; import splitObject from '../_util/splitObject'; import warning from '../_util/warning'; +import createStore, { Store } from './createStore'; +import SelectionBox from './SelectionBox'; +import SelectionCheckboxAll from './SelectionCheckboxAll'; function noop() { } @@ -134,6 +135,7 @@ export default class Table extends React.Component, any> { context: TableContext; CheckboxPropsCache: Object; + store: Store; constructor(props) { super(props); @@ -149,9 +151,7 @@ export default class Table extends React.Component, any> { this.state = assign({}, this.getSortStateFromColumns(), { // 减少状态 - selectedRowKeys: (props.rowSelection || {}).selectedRowKeys || [], filters: this.getFiltersFromColumns(), - selectionDirty: false, pagination: this.hasPagination() ? assign({}, defaultPagination, pagination, { current: pagination.defaultCurrent || pagination.current || 1, @@ -160,9 +160,14 @@ export default class Table extends React.Component, any> { }); this.CheckboxPropsCache = {}; + + this.store = createStore({ + selectedRowKeys: (props.rowSelection || {}).selectedRowKeys || [], + selectionDirty: false, + }); } - getCheckboxPropsByItem(item) { + getCheckboxPropsByItem = (item) => { const { rowSelection = {} } = this.props; if (!rowSelection.getCheckboxProps) { return {}; @@ -204,14 +209,14 @@ export default class Table extends React.Component, any> { // dataSource 的变化会清空选中项 if ('dataSource' in nextProps && nextProps.dataSource !== this.props.dataSource) { - this.setState({ + this.store.setState({ selectionDirty: false, }); this.CheckboxPropsCache = {}; } if (nextProps.rowSelection && 'selectedRowKeys' in nextProps.rowSelection) { - this.setState({ + this.store.setState({ selectedRowKeys: nextProps.rowSelection.selectedRowKeys || [], }); const { rowSelection } = this.props; @@ -246,7 +251,7 @@ export default class Table extends React.Component, any> { setSelectedRowKeys(selectedRowKeys, { selectWay, record, checked, changeRowKeys }: any) { const { rowSelection = {} } = this.props; if (rowSelection && !('selectedRowKeys' in rowSelection)) { - this.setState({ selectedRowKeys }); + this.store.setState({ selectedRowKeys }); } const data = this.getFlatData(); if (!rowSelection.onChange && !rowSelection[selectWay]) { @@ -385,7 +390,6 @@ export default class Table extends React.Component, any> { } const newState = { - selectionDirty: false, pagination, filters: {}, }; @@ -409,6 +413,9 @@ export default class Table extends React.Component, any> { } this.setState(newState, () => { + this.store.setState({ + selectionDirty: false, + }); const onChange = this.props.onChange; if (onChange) { onChange.apply(null, this.prepareParamsArguments(assign({}, this.state, { @@ -422,15 +429,15 @@ export default class Table extends React.Component, any> { handleSelect = (record, rowIndex, e) => { const checked = e.target.checked; - const defaultSelection = this.state.selectionDirty ? [] : this.getDefaultSelection(); - let selectedRowKeys = this.state.selectedRowKeys.concat(defaultSelection); + const defaultSelection = this.store.getState().selectionDirty ? [] : this.getDefaultSelection(); + let selectedRowKeys = this.store.getState().selectedRowKeys.concat(defaultSelection); let key = this.getRecordKey(record, rowIndex); if (checked) { selectedRowKeys.push(this.getRecordKey(record, rowIndex)); } else { selectedRowKeys = selectedRowKeys.filter((i) => key !== i); } - this.setState({ + this.store.setState({ selectionDirty: true, }); this.setSelectedRowKeys(selectedRowKeys, { @@ -442,11 +449,11 @@ export default class Table extends React.Component, any> { handleRadioSelect = (record, rowIndex, e) => { const checked = e.target.checked; - const defaultSelection = this.state.selectionDirty ? [] : this.getDefaultSelection(); - let selectedRowKeys = this.state.selectedRowKeys.concat(defaultSelection); + const defaultSelection = this.store.getState().selectionDirty ? [] : this.getDefaultSelection(); + let selectedRowKeys = this.store.getState().selectedRowKeys.concat(defaultSelection); let key = this.getRecordKey(record, rowIndex); selectedRowKeys = [key]; - this.setState({ + this.store.setState({ selectionDirty: true, }); this.setSelectedRowKeys(selectedRowKeys, { @@ -459,8 +466,8 @@ export default class Table extends React.Component, any> { handleSelectAllRow = (e) => { const checked = e.target.checked; const data = this.getFlatCurrentPageData(); - const defaultSelection = this.state.selectionDirty ? [] : this.getDefaultSelection(); - const selectedRowKeys = this.state.selectedRowKeys.concat(defaultSelection); + const defaultSelection = this.store.getState().selectionDirty ? [] : this.getDefaultSelection(); + const selectedRowKeys = this.store.getState().selectedRowKeys.concat(defaultSelection); const changableRowKeys = data .filter(item => !this.getCheckboxPropsByItem(item).disabled) .map((item, i) => this.getRecordKey(item, i)); @@ -482,7 +489,7 @@ export default class Table extends React.Component, any> { } }); } - this.setState({ + this.store.setState({ selectionDirty: true, }); this.setSelectedRowKeys(selectedRowKeys, { @@ -503,7 +510,6 @@ export default class Table extends React.Component, any> { pagination.onChange(pagination.current); const newState = { - selectionDirty: false, pagination, }; // Controlled current prop will not respond user interaction @@ -514,6 +520,10 @@ export default class Table extends React.Component, any> { } this.setState(newState); + this.store.setState({ + selectionDirty: false, + }); + const onChange = this.props.onChange; if (onChange) { onChange.apply(null, this.prepareParamsArguments(assign({}, this.state, { @@ -523,48 +533,31 @@ export default class Table extends React.Component, any> { } } - renderSelectionRadio = (_, record, index) => { - let rowIndex = this.getRecordKey(record, index); // 从 1 开始 - const props = this.getCheckboxPropsByItem(record); - let checked; - if (this.state.selectionDirty) { - checked = this.state.selectedRowKeys.indexOf(rowIndex) >= 0; - } else { - checked = (this.state.selectedRowKeys.indexOf(rowIndex) >= 0 || - this.getDefaultSelection().indexOf(rowIndex) >= 0); - } - return ( - - this.handleRadioSelect(record, rowIndex, e)} - value={rowIndex} checked={checked} - /> - - ); + renderSelectionBox = (type) => { + return (_, record, index) => { + let rowIndex = this.getRecordKey(record, index); // 从 1 开始 + const props = this.getCheckboxPropsByItem(record); + const handleChange = (e) => { + type === 'radio' ? this.handleRadioSelect(record, rowIndex, e) : + this.handleSelect(record, rowIndex, e); + }; + + return ( + + + + ); + }; } - renderSelectionCheckBox = (_, record, index) => { - let rowIndex = this.getRecordKey(record, index); // 从 1 开始 - let checked; - if (this.state.selectionDirty) { - checked = this.state.selectedRowKeys.indexOf(rowIndex) >= 0; - } else { - checked = (this.state.selectedRowKeys.indexOf(rowIndex) >= 0 || - this.getDefaultSelection().indexOf(rowIndex) >= 0); - } - const props = this.getCheckboxPropsByItem(record); - return ( - - this.handleSelect(record, rowIndex, e)} - /> - - ); - } - - getRecordKey(record, index?): string { + getRecordKey = (record, index?): string => { const rowKey = this.props.rowKey; if (typeof rowKey === 'function') { return rowKey(record, index); @@ -576,19 +569,6 @@ export default class Table extends React.Component, any> { return recordKey; } - checkSelection(data, type, byDefaultChecked) { - // type should be 'every' | 'some' - if (type === 'every' || type === 'some') { - return ( - byDefaultChecked - ? data[type](item => this.getCheckboxPropsByItem(item).defaultChecked) - : data[type]((item, i) => - this.state.selectedRowKeys.indexOf(this.getRecordKey(item, i)) >= 0) - ); - } - return false; - } - renderRowSelection() { const { prefixCls, rowSelection } = this.props; const columns = this.props.columns.concat(); @@ -599,51 +579,23 @@ export default class Table extends React.Component, any> { } return true; }); - let checked; - let indeterminate; - if (!data.length) { - checked = false; - indeterminate = false; - } else { - checked = this.state.selectionDirty - ? this.checkSelection(data, 'every', false) - : ( - this.checkSelection(data, 'every', false) || - this.checkSelection(data, 'every', true) - ); - indeterminate = this.state.selectionDirty - ? ( - this.checkSelection(data, 'some', false) && - !this.checkSelection(data, 'every', false) - ) - : ((this.checkSelection(data, 'some', false) && - !this.checkSelection(data, 'every', false)) || - (this.checkSelection(data, 'some', true) && - !this.checkSelection(data, 'every', true)) - ); - } - let selectionColumn; - if (rowSelection.type === 'radio') { - selectionColumn = { - key: 'selection-column', - render: this.renderSelectionRadio, - className: `${prefixCls}-selection-column`, - }; - } else { + const selectionColumn: TableColumnConfig = { + key: 'selection-column', + render: this.renderSelectionBox(rowSelection.type), + className: `${prefixCls}-selection-column`, + }; + if (rowSelection.type !== 'radio') { const checkboxAllDisabled = data.every(item => this.getCheckboxPropsByItem(item).disabled); - const checkboxAll = ( - ); - selectionColumn = { - key: 'selection-column', - title: checkboxAll, - render: this.renderSelectionCheckBox, - className: `${prefixCls}-selection-column`, - }; } if (columns.some(column => column.fixed === 'left' || column.fixed === true)) { selectionColumn.fixed = 'left'; diff --git a/components/table/createStore.tsx b/components/table/createStore.tsx new file mode 100644 index 0000000000..3476fac609 --- /dev/null +++ b/components/table/createStore.tsx @@ -0,0 +1,38 @@ +import assign from 'object-assign'; + +export interface Store { + setState: (Object) => void; + getState: () => any; + subscribe: (listener: () => void) => () => void; +} + +export default function createStore(initialState): Store { + let state = initialState; + const listeners: any[] = []; + + function setState(partial) { + state = assign({}, state, partial); + for (let i = 0; i < listeners.length; i++) { + listeners[i](); + } + } + + function getState() { + return state; + } + + function subscribe(listener) { + listeners.push(listener); + + return function unsubscribe() { + const index = listeners.indexOf(listener); + listeners.splice(index, 1); + }; + } + + return { + setState, + getState, + subscribe, + }; +} diff --git a/tests/table/SelectionBox.test.js b/tests/table/SelectionBox.test.js new file mode 100644 index 0000000000..905afe2e55 --- /dev/null +++ b/tests/table/SelectionBox.test.js @@ -0,0 +1,87 @@ +import React from 'react'; +import createStore from '../../components/table/createStore'; +import SelectionBox from '../../components/table/SelectionBox'; +import TestUtils from 'react-addons-test-utils'; + +describe('SelectionBox', () => { + it('unchecked by selectedRowKeys ', () => { + const store = createStore({ + selectedRowKeys: [], + selectionDirty: false, + }); + + const instance = TestUtils.renderIntoDocument( + {}} + defaultSelection={[]} + /> + ); + + expect(instance.state).toEqual({ checked: false }); + }); + + it('checked by selectedRowKeys ', () => { + const store = createStore({ + selectedRowKeys: ['1'], + selectionDirty: false, + }); + + const instance = TestUtils.renderIntoDocument( + {}} + defaultSelection={[]} + /> + ); + + expect(instance.state).toEqual({ checked: true }); + }); + + it('checked by defaultSelection', () => { + const store = createStore({ + selectedRowKeys: [], + selectionDirty: false, + }); + + const instance = TestUtils.renderIntoDocument( + {}} + defaultSelection={['1']} + /> + ); + + expect(instance.state).toEqual({ checked: true }); + }); + + it('checked when store change', () => { + const store = createStore({ + selectedRowKeys: [], + selectionDirty: false, + }); + + const instance = TestUtils.renderIntoDocument( + {}} + defaultSelection={[]} + /> + ); + + store.setState({ + selectedRowKeys: ['1'], + selectionDirty: true, + }); + + expect(instance.state).toEqual({ checked: true }); + }); +}) diff --git a/tests/table/Table.test.js b/tests/table/Table.test.js new file mode 100644 index 0000000000..9748d31af8 --- /dev/null +++ b/tests/table/Table.test.js @@ -0,0 +1,91 @@ +import React from 'react'; +import createStore from '../../components/table/createStore'; +import Table from '../../components/table'; +import TestUtils from 'react-addons-test-utils'; + +describe('Table', () => { + describe('row selection', () => { + it('allow select by checkbox', () => { + const columns = [{ + title: 'Name', + dataIndex: 'name', + }]; + + const data = [{ + name: 'Jack', + }, { + name: 'Lucy', + }]; + + const instance = TestUtils.renderIntoDocument( +
    + ); + + const checkboxes = TestUtils.scryRenderedDOMComponentsWithTag(instance, 'input'); + const checkboxAll = checkboxes[0]; + + checkboxAll.checked = true; + TestUtils.Simulate.change(checkboxAll); + + expect(instance.store.getState()).toEqual({ + selectedRowKeys: [0, 1], + selectionDirty: true, + }); + + checkboxes[1].checked = false; + TestUtils.Simulate.change(checkboxes[1]); + + expect(instance.store.getState()).toEqual({ + selectedRowKeys: [1], + selectionDirty: true, + }); + + checkboxes[1].checked = true; + TestUtils.Simulate.change(checkboxes[1]); + + expect(instance.store.getState()).toEqual({ + selectedRowKeys: [1, 0], + selectionDirty: true, + }); + }); + + it('pass getCheckboxProps to checkbox', () => { + const columns = [{ + title: 'Name', + dataIndex: 'name', + }]; + + const data = [{ + id: 0, + name: 'Jack', + }, { + id: 1, + name: 'Lucy', + }]; + + const rowSelection = { + getCheckboxProps: record => ({ + disabled: record.name === 'Lucy', + }), + }; + + const instance = TestUtils.renderIntoDocument( +
    + ); + + const checkboxes = TestUtils.scryRenderedDOMComponentsWithTag(instance, 'input'); + + expect(checkboxes[1].disabled).toBe(false); + expect(checkboxes[2].disabled).toBe(true); + }); + }); +}) From 926425d8ecab548a460509db1156e364cb39da3c Mon Sep 17 00:00:00 2001 From: Wei Zhu Date: Fri, 11 Nov 2016 15:26:57 +0800 Subject: [PATCH 0692/2145] Pass visible and onVisibleChange to Dropdown, fix #3779 (#3782) --- components/dropdown/dropdown-button.tsx | 16 ++++++++++---- package.json | 1 + tests/dropdown/dropdown-button.test.js | 29 +++++++++++++++++++++++++ 3 files changed, 42 insertions(+), 4 deletions(-) create mode 100644 tests/dropdown/dropdown-button.test.js diff --git a/components/dropdown/dropdown-button.tsx b/components/dropdown/dropdown-button.tsx index 3904eb10b6..aa5dcb853c 100644 --- a/components/dropdown/dropdown-button.tsx +++ b/components/dropdown/dropdown-button.tsx @@ -34,17 +34,25 @@ export default class DropdownButton extends React.Component - + diff --git a/package.json b/package.json index 0b7204b00c..b5664fa571 100644 --- a/package.json +++ b/package.json @@ -92,6 +92,7 @@ "css-split-webpack-plugin": "^0.2.1", "dora-plugin-upload": "^0.3.1", "enquire.js": "^2.1.1", + "enzyme": "^2.6.0", "es6-shim": "^0.35.0", "eslint": "^3.0.1", "eslint-config-airbnb": "latest", diff --git a/tests/dropdown/dropdown-button.test.js b/tests/dropdown/dropdown-button.test.js new file mode 100644 index 0000000000..471ec2c5db --- /dev/null +++ b/tests/dropdown/dropdown-button.test.js @@ -0,0 +1,29 @@ +import React from 'react'; +import { shallow } from 'enzyme'; +import Dropdown from '../../components/dropdown'; +import Menu from '../../components/menu'; + +describe('DropdownButton', () => { + it('pass appropriate props to Dropdown', () => { + const props = { + align: { + offset: [10, 20], + }, + overlay: ( + + foo + + ), + trigger: ['hover'], + visible: true, + onVisibleChange: () => {}, + }; + + const wrapper = shallow(); + const dropdownProps = wrapper.find(Dropdown).props(); + + Object.keys(props).forEach(key => { + expect(dropdownProps[key]).toBe(props[key]); + }); + }); +}); From d4b5b701bd5c3d8f91606390b3c0cbfe76845d44 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Fri, 11 Nov 2016 16:06:11 +0800 Subject: [PATCH 0693/2145] docs: update demos for TimePicker --- components/date-picker/index.en-US.md | 1 + components/date-picker/index.zh-CN.md | 1 + components/time-picker/demo/addon.md | 7 ++-- components/time-picker/demo/basic.md | 8 ++-- .../time-picker/demo/disable-options.md | 24 +++++++----- components/time-picker/demo/disabled.md | 7 ++-- components/time-picker/demo/hide-column.md | 26 +++++++++++++ components/time-picker/demo/hide-options.md | 38 ------------------- components/time-picker/demo/size.md | 7 ++-- components/time-picker/demo/value.md | 26 ++++++------- .../time-picker/demo/without-seconds.md | 25 ------------ 11 files changed, 71 insertions(+), 99 deletions(-) create mode 100644 components/time-picker/demo/hide-column.md delete mode 100644 components/time-picker/demo/hide-options.md delete mode 100644 components/time-picker/demo/without-seconds.md diff --git a/components/date-picker/index.en-US.md b/components/date-picker/index.en-US.md index 49b43e19d4..80da370d89 100644 --- a/components/date-picker/index.en-US.md +++ b/components/date-picker/index.en-US.md @@ -53,6 +53,7 @@ The following APIs are shared by DatePicker, MonthPicker, RangePicker. | open | open state of picker | bool | - | | onOpenChange | a callback function, can be executed whether the popup calendar is popped up or closed | function(status) | - | | showTime | to provide an additional time selection | Object/Boolean | [TimePicker Options](/components/time-picker/#api) | +| disabledTime | to specify the time that cannot be selected | function(date) | - | ### MonthPicker diff --git a/components/date-picker/index.zh-CN.md b/components/date-picker/index.zh-CN.md index 78dc446966..67b5100b5d 100644 --- a/components/date-picker/index.zh-CN.md +++ b/components/date-picker/index.zh-CN.md @@ -54,6 +54,7 @@ moment.locale('zh-cn'); | open | 控制弹层是否展开 | bool | - | | onOpenChange | 弹出日历和关闭日历的回调 | function(status) | 无 | | showTime | 增加时间选择功能 | Object or Boolean | [TimePicker Options](/components/time-picker/#api) | +| disabledTime | 不可选择的时间 | function(date) | 无 | ### MonthPicker diff --git a/components/time-picker/demo/addon.md b/components/time-picker/demo/addon.md index becc0adf6c..0991792505 100644 --- a/components/time-picker/demo/addon.md +++ b/components/time-picker/demo/addon.md @@ -1,5 +1,5 @@ --- -order: 7 +order: 6 title: zh-CN: 附加内容 en-US: Addon @@ -23,6 +23,7 @@ ReactDOM.render( Ok )} - /> -, mountNode); + />, + mountNode +); ```` diff --git a/components/time-picker/demo/basic.md b/components/time-picker/demo/basic.md index 632963fe6e..118df8f67e 100644 --- a/components/time-picker/demo/basic.md +++ b/components/time-picker/demo/basic.md @@ -7,11 +7,11 @@ title: ## zh-CN -最简单的用法。 +点击 TimePicker，然后可以在浮层中选择或者输入某一时间。 ## en-US -The most basic usage. +Click `TimePicker`, and then we could select or input a time in panel. ````jsx import { TimePicker } from 'antd'; @@ -20,7 +20,5 @@ function onChange(time, timeString) { console.log(time, timeString); } -ReactDOM.render( - -, mountNode); +ReactDOM.render(, mountNode); ```` diff --git a/components/time-picker/demo/disable-options.md b/components/time-picker/demo/disable-options.md index e3c56505fa..8dd21c7c8e 100644 --- a/components/time-picker/demo/disable-options.md +++ b/components/time-picker/demo/disable-options.md @@ -2,20 +2,20 @@ order: 5 title: zh-CN: 禁止选项 - en-US: Specify the time that cannot be selected + en-US: Disabled Time --- ## zh-CN -限制选择 `20:30` 到 `23:30` 这个时间段。 +可以使用 `disabledHours` `disabledMinutes` `disabledSeconds` 组合禁止用户选择某个时间，配合 `hideDisabledOptions` 可以直接把不可选择的项隐藏。 ## en-US -You can't select the time from `20:30` to `23:30`. +Make part of time unselectable by `disabledHours` `disabledMinutes` `disabledSeconds`, and we even can hide those unselectable options by `hideDisabledOptions`. ````jsx import { TimePicker } from 'antd'; -function newArray(start, end) { +function range(start, end) { const result = []; for (let i = start; i < end; i++) { result.push(i); @@ -24,21 +24,27 @@ function newArray(start, end) { } function disabledHours() { - const hours = newArray(0, 60); + const hours = range(0, 60); hours.splice(20, 4); return hours; } function disabledMinutes(h) { if (h === 20) { - return newArray(0, 31); + return range(0, 31); } else if (h === 23) { - return newArray(30, 60); + return range(30, 60); } return []; } ReactDOM.render( - -, mountNode); +
    + Just Disabled: +
    + Hide Directly: + +
    , + mountNode +); ```` diff --git a/components/time-picker/demo/disabled.md b/components/time-picker/demo/disabled.md index d496c93346..d0c0fbdb5d 100644 --- a/components/time-picker/demo/disabled.md +++ b/components/time-picker/demo/disabled.md @@ -1,5 +1,5 @@ --- -order: 4 +order: 3 title: zh-CN: 禁用 en-US: disabled @@ -19,6 +19,7 @@ import { TimePicker } from 'antd'; import moment from 'moment'; ReactDOM.render( - -, mountNode); + , + mountNode +); ```` diff --git a/components/time-picker/demo/hide-column.md b/components/time-picker/demo/hide-column.md new file mode 100644 index 0000000000..6ac479ed8b --- /dev/null +++ b/components/time-picker/demo/hide-column.md @@ -0,0 +1,26 @@ +--- +order: 4 +title: + zh-CN: 隐藏某列 + en-US: Hide Column +--- + +## zh-CN + +TimePicker 浮层中的列会随着 `format` 变化，当略去 `format` 中的某部分时，浮层中对应的列也会消失。 + +## en-US + +While part of `format` is omitted, the corresponding column in panel will disappear, too. + +````jsx +import { TimePicker } from 'antd'; +import moment from 'moment'; + +const format = 'HH:mm'; + +ReactDOM.render( + , + mountNode +); +```` diff --git a/components/time-picker/demo/hide-options.md b/components/time-picker/demo/hide-options.md deleted file mode 100644 index 2bbb6c5c27..0000000000 --- a/components/time-picker/demo/hide-options.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -order: 6 -title: - zh-CN: 只显示部分选项 - en-US: Show part of options. ---- - -## zh-CN - -通过 hideDisabledOptions 将不可选的选项隐藏。 - -## en-US - -use `hideDisabledOptions` to hide the disabled options. - -````jsx -import { TimePicker } from 'antd'; - -function newArray(start, end) { - const result = []; - for (let i = start; i < end; i++) { - result.push(i); - } - return result; -} - -function disabledMinutes() { - return newArray(0, 60).filter(value => value % 10 !== 0); -} - -function disabledSeconds() { - return newArray(0, 60).filter(value => value % 30 !== 0); -} - -ReactDOM.render( - -, mountNode); -```` diff --git a/components/time-picker/demo/size.md b/components/time-picker/demo/size.md index 890f234181..52972db482 100644 --- a/components/time-picker/demo/size.md +++ b/components/time-picker/demo/size.md @@ -2,7 +2,7 @@ order: 2 title: zh-CN: 三种大小 - en-US: Three sizes + en-US: Three Sizes --- ## zh-CN @@ -22,6 +22,7 @@ ReactDOM.render( - -, mountNode); + , + mountNode +); ```` diff --git a/components/time-picker/demo/value.md b/components/time-picker/demo/value.md index c09f9d8213..eaf13f83c3 100644 --- a/components/time-picker/demo/value.md +++ b/components/time-picker/demo/value.md @@ -2,7 +2,7 @@ order: 1 title: zh-CN: 受控组件 - en-US: Under control + en-US: Under Control --- ## zh-CN @@ -11,25 +11,25 @@ value 和 onChange 需要配合使用。 ## en-US -`Value` and `onChange` should be used together, +`value` and `onChange` should be used together, ````jsx import { TimePicker } from 'antd'; -const Test = React.createClass({ - getInitialState() { - return { - value: null, - }; - }, - onChange(time) { +class Demo extends React.Component { + state = { + value: null, + }; + + onChange = (time) => { console.log(time); this.setState({ value: time }); - }, + } + render() { return ; - }, -}); + } +} -ReactDOM.render(, mountNode); +ReactDOM.render(, mountNode); ```` diff --git a/components/time-picker/demo/without-seconds.md b/components/time-picker/demo/without-seconds.md deleted file mode 100644 index 1bc24c791e..0000000000 --- a/components/time-picker/demo/without-seconds.md +++ /dev/null @@ -1,25 +0,0 @@ ---- -order: 3 -title: - zh-CN: 不展示秒 - en-US: Hide the seconds options ---- - -## zh-CN - -不展示秒，也不允许选择。 - -## en-US - -The `seconds` options are hidden and cannot be selected. - -````jsx -import { TimePicker } from 'antd'; -import moment from 'moment'; - -const format = 'HH:mm'; - -ReactDOM.render( - -, mountNode); -```` From 7879421ec28fcfb3ada312a52d5ed4261d44a64c Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 11 Nov 2016 16:28:05 +0800 Subject: [PATCH 0694/2145] upgrade some devDeps --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index b5664fa571..e8dc18ae07 100644 --- a/package.json +++ b/package.json @@ -102,7 +102,7 @@ "eslint-plugin-markdown": "*", "eslint-plugin-react": "^6.1.2", "eslint-tinker": "^0.4.0", - "history": "^3.0.0", + "history": "^4.4.0", "jest-cli": "^16.0.2", "jsonml-to-react-component": "~0.2.0", "jsonml.js": "^0.1.0", @@ -123,7 +123,7 @@ "react-dom": "^15.0.0", "react-github-button": "^0.1.1", "react-intl": "^2.0.1", - "react-router": "^2.0.0", + "react-router": "^3.0.0", "react-stateless-wrapper": "^1.0.2", "react-sublime-video": "^0.2.0", "reqwest": "^2.0.5", From 88d428bcc45d1ba4ef27756079b74b585317448f Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Fri, 11 Nov 2016 16:28:10 +0800 Subject: [PATCH 0695/2145] docs: update demo --- components/back-top/demo/basic.md | 4 +++- components/back-top/demo/custom.md | 4 +++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/components/back-top/demo/basic.md b/components/back-top/demo/basic.md index a51b371cd3..65d51cba26 100644 --- a/components/back-top/demo/basic.md +++ b/components/back-top/demo/basic.md @@ -19,7 +19,9 @@ import { BackTop } from 'antd'; ReactDOM.render(
    - Scroll down to see the bottom right gray button. + Scroll down to see the bottom-right + gray + button.
    , mountNode ); diff --git a/components/back-top/demo/custom.md b/components/back-top/demo/custom.md index 411cbe1850..5091d26cb4 100644 --- a/components/back-top/demo/custom.md +++ b/components/back-top/demo/custom.md @@ -22,7 +22,9 @@ ReactDOM.render(
    UP
     - Scroll down to see the bottom right blue button. + Scroll down to see the bottom-right + blue + button. , mountNode ); From ae8f3c5b565a2cb72276c45eec78d821f75ffab3 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 11 Nov 2016 16:34:26 +0800 Subject: [PATCH 0696/2145] clean devDeps --- package.json | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index e8dc18ae07..aa5bf911f4 100644 --- a/package.json +++ b/package.json @@ -81,7 +81,7 @@ "@types/react-dom": "~0.14.18", "antd-tools": "^0.13.0", "babel-eslint": "^7.1.0", - "babel-jest": "^16.0.0", + "babel-jest": "^17.0.0", "babel-plugin-import": "^1.0.0", "babel-plugin-transform-runtime": "~6.15.0", "bisheng": "^0.14.0", @@ -98,22 +98,20 @@ "eslint-config-airbnb": "latest", "eslint-plugin-babel": "^3.0.0", "eslint-plugin-import": "^2.1.0", - "eslint-plugin-jsx-a11y": "^2.0.1", + "eslint-plugin-jsx-a11y": "^3.0.1", "eslint-plugin-markdown": "*", "eslint-plugin-react": "^6.1.2", "eslint-tinker": "^0.4.0", "history": "^4.4.0", - "jest-cli": "^16.0.2", + "jest-cli": "^17.0.0", "jsonml-to-react-component": "~0.2.0", "jsonml.js": "^0.1.0", "jsonp": "^0.2.0", "lesshint": "^2.0.0", "lodash.debounce": "^4.0.6", "moment-timezone": "^0.5.5", - "nunjucks": "^2.4.2", "pre-commit": "1.x", "querystring": "^0.2.0", - "ramda": "^0.21.0", "rc-scroll-anim": "~0.3.0", "rc-tween-one": "~0.6.20", "react": "^15.0.0", @@ -128,7 +126,6 @@ "react-sublime-video": "^0.2.0", "reqwest": "^2.0.5", "typescript-babel-jest": "^0.1.5", - "typings": "^1.3.2", "values.js": "^1.0.3" }, "scripts": { From c073e7807488a14a0f0113d01064ebea2e5584d3 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Fri, 11 Nov 2016 17:50:48 +0800 Subject: [PATCH 0697/2145] fix: should work with timepicker without minutes and so on, ref: #3793 (#3799) --- components/date-picker/demo/disabled-date.md | 4 ++-- components/date-picker/style/RangePicker.less | 11 ++++++++--- components/date-picker/style/TimePicker.less | 8 ++++++-- 3 files changed, 16 insertions(+), 7 deletions(-) diff --git a/components/date-picker/demo/disabled-date.md b/components/date-picker/demo/disabled-date.md index ad845d9f45..8862c0c8c0 100644 --- a/components/date-picker/demo/disabled-date.md +++ b/components/date-picker/demo/disabled-date.md @@ -27,8 +27,8 @@ function range(start, end) { function disabledDate(current) { - // can not select days after today - return current && current.valueOf() > Date.now(); + // can not select days before today and today + return current && current.valueOf() < Date.now(); } function disabledDateTime() { diff --git a/components/date-picker/style/RangePicker.less b/components/date-picker/style/RangePicker.less index e866236d6f..c224e05a18 100644 --- a/components/date-picker/style/RangePicker.less +++ b/components/date-picker/style/RangePicker.less @@ -53,7 +53,7 @@ float: right; .@{calendar-prefix-cls} { &-time-picker-inner { - margin-left: 21px; + margin-left: 3%; border-left: 1px solid @border-color-split; } } @@ -164,6 +164,7 @@ &.@{calendar-prefix-cls}-time { .@{calendar-timepicker-prefix-cls} { height: 207px; + width: 97%; top: 68px; z-index: 2; // cover .ant-calendar-range .ant-calendar-in-range-cell > div (z-index: 1) &-panel { @@ -183,8 +184,6 @@ border-top: 1px solid @border-color-split; } &-select { - width: 71px; - ul { max-height: 206px; } @@ -209,3 +208,9 @@ } } } + +.@{calendar-prefix-cls}-range.@{calendar-prefix-cls}-show-time-picker { + .@{calendar-prefix-cls}-body { + border-top-color: transparent; + } +} \ No newline at end of file diff --git a/components/date-picker/style/TimePicker.less b/components/date-picker/style/TimePicker.less index a3104982c7..eeba3b3020 100644 --- a/components/date-picker/style/TimePicker.less +++ b/components/date-picker/style/TimePicker.less @@ -22,6 +22,10 @@ background-clip: padding-box; line-height: 1.5; overflow: hidden; + width: 100%; + } + &-combobox { + width: 100%; } &-1-column, @@ -29,7 +33,7 @@ width: 100%; } &-2-columns &-select { - width: 115px; + width: 50%; } &-1-column &-select, &-2-columns &-select { @@ -50,7 +54,7 @@ border-width: 0 1px; margin-left: -1px; box-sizing: border-box; - width: 77px; + width: 33.6%; overflow: hidden; position: relative; // Fix chrome weird render bug From f206cc4c900592e96da0d45b1078ef20a603f701 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 11 Nov 2016 17:55:10 +0800 Subject: [PATCH 0698/2145] downgrade eslint-plugin-jsx-a11y --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index aa5bf911f4..9271550b9b 100644 --- a/package.json +++ b/package.json @@ -98,7 +98,7 @@ "eslint-config-airbnb": "latest", "eslint-plugin-babel": "^3.0.0", "eslint-plugin-import": "^2.1.0", - "eslint-plugin-jsx-a11y": "^3.0.1", + "eslint-plugin-jsx-a11y": "^2.2.3", "eslint-plugin-markdown": "*", "eslint-plugin-react": "^6.1.2", "eslint-tinker": "^0.4.0", From f703e00c0f8a6a3509bf025efeb3fc428bd60125 Mon Sep 17 00:00:00 2001 From: jiang <155259966@qq.com> Date: Fri, 11 Nov 2016 17:56:05 +0800 Subject: [PATCH 0699/2145] Home fix (#3807) * fix home * update Banner min height --- package.json | 6 +++--- site/theme/static/home.less | 2 ++ site/theme/template/Home/Banner.jsx | 8 ++++---- site/theme/template/Home/Link.jsx | 10 +++++----- site/theme/template/Home/Page1.jsx | 6 +++--- site/theme/template/Home/Page2.jsx | 8 ++++---- site/theme/template/Home/Page3.jsx | 6 +++--- site/theme/template/Home/Page4.jsx | 7 ++++--- 8 files changed, 28 insertions(+), 25 deletions(-) diff --git a/package.json b/package.json index 9271550b9b..94112f5089 100644 --- a/package.json +++ b/package.json @@ -56,7 +56,6 @@ "rc-notification": "~1.3.4", "rc-pagination": "~1.5.3", "rc-progress": "~2.0.1", - "rc-queue-anim": "~0.12.4", "rc-radio": "~2.0.0", "rc-rate": "~1.1.2", "rc-select": "~6.6.1", @@ -112,8 +111,9 @@ "moment-timezone": "^0.5.5", "pre-commit": "1.x", "querystring": "^0.2.0", - "rc-scroll-anim": "~0.3.0", - "rc-tween-one": "~0.6.20", + "rc-scroll-anim": "~0.5.0", + "rc-tween-one": "~0.11.0", + "rc-queue-anim": "~0.12.4", "react": "^15.0.0", "react-addons-test-utils": "^15.0.0", "react-copy-to-clipboard": "^4.0.1", diff --git a/site/theme/static/home.less b/site/theme/static/home.less index 7c5b82c31f..83aa2993ef 100644 --- a/site/theme/static/home.less +++ b/site/theme/static/home.less @@ -25,6 +25,7 @@ position: relative; height: 100%; width: 100%; + overflow: hidden; background: url("https://os.alipayobjects.com/rmsportal/GhjqstwSgxBXrZS.png") no-repeat center / cover; } .banner-text-wrapper { @@ -111,6 +112,7 @@ .content-wrapper { width: 100%; height: 100%; + max-width: 1500px; margin: auto; overflow: hidden; background: #fff; diff --git a/site/theme/template/Home/Banner.jsx b/site/theme/template/Home/Banner.jsx index 68c74ee4db..9eb5d8ae24 100644 --- a/site/theme/template/Home/Banner.jsx +++ b/site/theme/template/Home/Banner.jsx @@ -1,7 +1,7 @@ import React from 'react'; import { Link } from 'react-router'; import { FormattedMessage } from 'react-intl'; -import ScrollOverPack from 'rc-scroll-anim/lib/ScrollOverPack'; +import ScrollElement from 'rc-scroll-anim/lib/ScrollElement'; import GitHubButton from 'react-github-button'; import 'react-github-button/assets/style.css'; import { Icon } from 'antd'; @@ -19,8 +19,8 @@ function typeFunc(a) { export default function Banner({ location, onEnterChange }) { const query = location.query; return ( -
    { - +const Products = ({ dispatch, products }) => { function handleDelete(id) { - props.dispatch({ + dispatch({ type: 'products/delete', payload: id, }); } - return (

    List of Products

    - +
    ); }; // export default Products; export default connect(({ products }) => ({ - products + products, }))(Products); ``` @@ -266,7 +259,7 @@ We have completed a simple application, but you may still have lots of questions You can: -- Visit [dva offical website](https://github.com/dvajs/dva) -- View all the [API](https://github.com/dvajs/dva#api) -- View [toturial](https://github.com/dvajs/dva-docs/blob/master/v1/zh-cn/tutorial/01-%E6%A6%82%E8%A6%81.md), complete a medium application step by step -- View examples, such as [dva version of hackernews](https://github.com/dvajs/dva-hackernews) +- Visit [dva offical website](https://github.com/dvajs/dva). +- View all the [API](https://github.com/dvajs/dva#api). +- View [toturial](https://github.com/dvajs/dva-docs/blob/master/v1/zh-cn/tutorial/01-%E6%A6%82%E8%A6%81.md), complete a medium application step by step. +- View examples, such as [dva version of hackernews](https://github.com/dvajs/dva-hackernews). diff --git a/docs/react/practical-projects.zh-CN.md b/docs/react/practical-projects.zh-CN.md index 2f05dea155..9b94b45f66 100644 --- a/docs/react/practical-projects.zh-CN.md +++ b/docs/react/practical-projects.zh-CN.md @@ -75,11 +75,9 @@ $ npm install antd babel-plugin-import --save ```javascript import React from 'react'; -const Products = (props) => { - return ( -

    List of Products

    - ); -}; +const Products = (props) => ( +

    List of Products

    +); export default Products; ``` @@ -107,22 +105,19 @@ import React, { PropTypes } from 'react'; import { Table, Popconfirm, Button } from 'antd'; const ProductList = ({ onDelete, products }) => { - const columns = [ - { - title: 'Name', - dataIndex: 'name', + const columns = [{ + title: 'Name', + dataIndex: 'name', + }, { + title: 'Actions', + render: (text, record) => { + return ( + onDelete(record.id)}> + + + ); }, - { - title: 'Actions', - render(text, record) { - return ( - - - - ); - }, - }, - ]; + }]; return (
    { - +const Products = ({ dispatch, products }) => { function handleDelete(id) { - props.dispatch({ + dispatch({ type: 'products/delete', payload: id, }); } - return (

    List of Products

    - +
    ); }; // export default Products; export default connect(({ products }) => ({ - products + products, }))(Products); ``` @@ -266,7 +259,7 @@ Child 你可以： -- 访问 [dva 官网](https://github.com/dvajs/dva) -- 查看所有 [API](https://github.com/dvajs/dva#api) -- [教程](https://github.com/dvajs/dva-docs/blob/master/v1/zh-cn/tutorial/01-%E6%A6%82%E8%A6%81.md)，一步步完成一个中型应用 -- 看看 [dva 版 hackernews](https://github.com/dvajs/dva-hackernews) 是[如何实现](https://github.com/sorrycc/blog/issues/9)的 +- 访问 [dva 官网](https://github.com/dvajs/dva)。 +- 查看所有 [API](https://github.com/dvajs/dva#api)。 +- [教程](https://github.com/dvajs/dva-docs/blob/master/v1/zh-cn/tutorial/01-%E6%A6%82%E8%A6%81.md)，一步步完成一个中型应用。 +- 看看 [dva 版 hackernews](https://github.com/dvajs/dva-hackernews) 是 [如何实现](https://github.com/sorrycc/blog/issues/9) 的。 From 05213a582716790b880143731d84a99801481937 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 14 Nov 2016 14:26:08 +0800 Subject: [PATCH 0721/2145] update table demos --- components/table/demo/bordered.md | 2 +- components/table/demo/dynamic-settings.md | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/components/table/demo/bordered.md b/components/table/demo/bordered.md index 6d1a6f1ddf..bea509f200 100644 --- a/components/table/demo/bordered.md +++ b/components/table/demo/bordered.md @@ -2,7 +2,7 @@ order: 10 title: en-US: border, title and footer - zh-CN: 基本用法 + zh-CN: 带边框 --- ## zh-CN diff --git a/components/table/demo/dynamic-settings.md b/components/table/demo/dynamic-settings.md index ae8b596f3b..7d3268b367 100644 --- a/components/table/demo/dynamic-settings.md +++ b/components/table/demo/dynamic-settings.md @@ -27,7 +27,7 @@ const columns = [{ title: 'Age', dataIndex: 'age', key: 'age', - width: 100, + width: 70, }, { title: 'Address', dataIndex: 'address', @@ -35,7 +35,7 @@ const columns = [{ }, { title: 'Action', key: 'action', - width: 400, + width: 360, render: (text, record) => ( Action 一 {record.name} @@ -67,7 +67,7 @@ const scroll = { y: 240 }; class Demo extends React.Component { state = { - bordered: true, + bordered: false, loading: false, pagination: true, size: 'default', @@ -139,7 +139,7 @@ class Demo extends React.Component { - + Default Middle Small From 4b2e9bbd23b93cb146a0a2b8622d260f7eada941 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 14 Nov 2016 14:37:04 +0800 Subject: [PATCH 0722/2145] Fix non-bordered Table column header border radius https://zos.alipayobjects.com/rmsportal/khxltYwtEiBKtHE.png --- components/table/style/index.less | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/components/table/style/index.less b/components/table/style/index.less index 8e501cfbc4..8af0d1b897 100644 --- a/components/table/style/index.less +++ b/components/table/style/index.less @@ -91,10 +91,13 @@ &-title + &-content { position: relative; - - table { - border-top-left-radius: 0; - border-top-right-radius: 0; + border-radius: 6px 6px 0 0; + overflow: hidden; + .@{table-prefix-cls}-bordered & { + &, + table { + border-radius: 0; + } } } From a0de4d6865863b7fc88fd7501bf6226c7dee6988 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Sat, 12 Nov 2016 16:21:11 +0800 Subject: [PATCH 0723/2145] chore: check whether compiled files are valid --- package.json | 30 ++++++++++++++++++------------ tests/dekko/dist.test.js | 12 ++++++++++++ tests/dekko/lib.test.js | 28 ++++++++++++++++++++++++++++ 3 files changed, 58 insertions(+), 12 deletions(-) create mode 100644 tests/dekko/dist.test.js create mode 100644 tests/dekko/lib.test.js diff --git a/package.json b/package.json index 0ebfbf9ed3..79782059f9 100644 --- a/package.json +++ b/package.json @@ -89,6 +89,7 @@ "bisheng-plugin-react": "^0.2.0", "bisheng-plugin-toc": "^0.3.0", "css-split-webpack-plugin": "^0.2.1", + "dekko": "^0.2.0", "dora-plugin-upload": "^0.3.1", "enquire.js": "^2.1.1", "enzyme": "^2.6.0", @@ -111,9 +112,9 @@ "moment-timezone": "^0.5.5", "pre-commit": "1.x", "querystring": "^0.2.0", + "rc-queue-anim": "~0.12.4", "rc-scroll-anim": "~0.5.0", "rc-tween-one": "~0.11.0", - "rc-queue-anim": "~0.12.4", "react": "^15.0.0", "react-addons-test-utils": "^15.0.0", "react-copy-to-clipboard": "^4.0.1", @@ -129,23 +130,27 @@ "values.js": "^1.0.3" }, "scripts": { - "dist": "antd-tools run dist", - "compile": "antd-tools run compile", - "clean": "antd-tools run clean", - "start": "bisheng start -c ./site/bisheng.config.js --no-livereload", - "site": "bisheng build -c ./site/bisheng.config.js", - "deploy": "npm run clean && bisheng gh-pages -c ./site/bisheng.config.js", - "lint": "npm run tslint && npm run srclint && npm run demolint && npm run lesshint", - "srclint": "RUN_ENV=SRC eslint test site scripts ./.eslintrc.js ./webpack.config.js --ext '.js,.jsx,.tsx' --ignore-pattern '!.eslintrc.js'", + "test": "npm run lint && npm run dist && npm run jest", + "lint": "npm run tslint && npm run eslint && npm run demolint && npm run lesshint", "tslint": "antd-tools run ts-lint && npm run compile && rm -rf lib", + "eslint": "eslint test site scripts ./.eslintrc.js ./webpack.config.js --ext '.js,.jsx,.tsx' --ignore-pattern '!.eslintrc.js'", "demolint": "RUN_ENV=DEMO eslint components/*/demo/*.md --ext '.md'", "lesshint": "lesshint components -r scripts/lesshint-report.js", "eslint-fix": "eslint --fix test site scripts ./.eslintrc.js ./webpack.config.js --ext '.js,.jsx,.tsx' --ignore-pattern '!.eslintrc.js' && eslint-tinker ./components/*/demo/*.md", - "test": "npm run lint && npm run dist && npm run jest", + "jest": "jest --no-cache", - "pre-publish": "node ./scripts/prepub", - "prepublish": "antd-tools run guard", + + "clean": "antd-tools run clean", + "dist": "antd-tools run dist && node ./tests/dekko/dist.test.js", + "compile": "antd-tools run compile && node ./tests/dekko/lib.test.js", + + "start": "bisheng start -c ./site/bisheng.config.js --no-livereload", + "site": "bisheng build -c ./site/bisheng.config.js", + "deploy": "npm run clean && bisheng gh-pages -c ./site/bisheng.config.js", + "pub": "antd-tools run update-self && antd-tools run pub", + "prepublish": "antd-tools run guard", + "pre-publish": "node ./scripts/prepub", "authors": "git log --format='%aN <%aE>' | sort -u | grep -v 'users.noreply.github.com' | grep -v 'gitter.im' | grep -v '.local>' | grep -v 'alibaba-inc.com' | grep -v 'alipay.com' | grep -v 'taobao.com' > AUTHORS.txt" }, "jest": { @@ -160,6 +165,7 @@ "/_site/" ], "testPathIgnorePatterns": [ + "dekko", "/node_modules/" ], "transform": { diff --git a/tests/dekko/dist.test.js b/tests/dekko/dist.test.js new file mode 100644 index 0000000000..689ba852ce --- /dev/null +++ b/tests/dekko/dist.test.js @@ -0,0 +1,12 @@ +'use strict'; + +const $ = require('dekko'); + +$('dist') + .isDirectory() + .hasFile('antd.css') + .hasFile('antd.min.css') + .hasFile('antd.js') + .hasFile('antd.min.js'); + +console.log('`dist` directory is valid.'); diff --git a/tests/dekko/lib.test.js b/tests/dekko/lib.test.js new file mode 100644 index 0000000000..dd8fd9e985 --- /dev/null +++ b/tests/dekko/lib.test.js @@ -0,0 +1,28 @@ +'use strict'; + +const $ = require('dekko'); + +$('lib') + .isDirectory() + .hasFile('index.js') + .hasFile('index.d.ts'); + +$('lib/*') + .filter((filename) => { + return !filename.endsWith('index.js') && + !filename.endsWith('index.d.ts'); + }) + .isDirectory() + .filter((filename) => { + return !filename.endsWith('style') && + !filename.endsWith('_util'); + }) + .hasFile('index.js') + .hasFile('index.d.ts') + .hasDirectory('style'); + +$('lib/*/style') + .hasFile('css.js') + .hasFile('index.js'); + +console.log('`lib` directory is valid.'); From 76b91812f4d0ea155795355d10dc948d2fdf770c Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Mon, 14 Nov 2016 15:53:47 +0800 Subject: [PATCH 0724/2145] site: fix type order, ref: #3758 --- site/theme/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/site/theme/index.js b/site/theme/index.js index c4f50fa842..d229bbffad 100644 --- a/site/theme/index.js +++ b/site/theme/index.js @@ -15,6 +15,7 @@ module.exports = { 'Data Display': 4, Feedback: 5, Localization: 6, + Other: 7, }, docVersions: { '0.9.x': 'http://09x.ant.design', From a6d2de1a7b62d2ff1392317a8ab2cedfc9d34c17 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 14 Nov 2016 17:53:02 +0800 Subject: [PATCH 0725/2145] controlled filterDropdown props, close #3003 --- components/table/demo/ajax.md | 2 +- components/table/demo/custom-filter-panel.md | 125 +++++++++++++++++++ components/table/filterDropdown.tsx | 40 ++++-- components/table/index.en-US.md | 4 +- components/table/index.zh-CN.md | 4 +- 5 files changed, 161 insertions(+), 14 deletions(-) create mode 100644 components/table/demo/custom-filter-panel.md diff --git a/components/table/demo/ajax.md b/components/table/demo/ajax.md index 413419bdbe..fe4cf61a3c 100644 --- a/components/table/demo/ajax.md +++ b/components/table/demo/ajax.md @@ -1,5 +1,5 @@ --- -order: 7 +order: 8 title: en-US: Ajax zh-CN: 远程加载数据 diff --git a/components/table/demo/custom-filter-panel.md b/components/table/demo/custom-filter-panel.md new file mode 100644 index 0000000000..33d92d9936 --- /dev/null +++ b/components/table/demo/custom-filter-panel.md @@ -0,0 +1,125 @@ +--- +order: 7 +title: + en-US: Customized filter panel + zh-CN: 自定义筛选菜单 +--- + +## zh-CN + +通过 `filterDropdown`、`filterDropdownVisible` 和 `filterDropdownVisibleChange` 定义自定义的列筛选功能，并实现一个搜索列的示例。 + +## en-US + +Implement a customized column search example via `filterDropdown`, `filterDropdownVisible` and `filterDropdownVisibleChange`. + +````jsx +import { Table, Input, Button } from 'antd'; + +const data = [{ + key: '1', + name: 'John Brown', + age: 32, + address: 'New York No. 1 Lake Park', +}, { + key: '2', + name: 'Jim Green', + age: 42, + address: 'London No. 1 Lake Park', +}, { + key: '3', + name: 'Joe Black', + age: 32, + address: 'Sidney No. 1 Lake Park', +}, { + key: '4', + name: 'Jim Red', + age: 32, + address: 'London No. 2 Lake Park', +}]; + +const App = React.createClass({ + getInitialState() { + return { + filterDropdownVisible: false, + data, + searchText: '', + }; + }, + onInputChange(e) { + this.setState({ searchText: e.target.value }); + }, + onSearch() { + const { searchText } = this.state; + const reg = new RegExp(searchText, 'gi'); + this.setState({ + filterDropdownVisible: false, + data: data.map((record) => { + const match = record.name.match(reg); + if (!match) { + return null; + } + return { + ...record, + name: ( + + {record.name.split(reg).map((text, i) => ( + i > 0 ? [{match[0]}, text] : text + ))} + + ), + }; + }).filter(record => !!record), + }); + }, + render() { + const columns = [{ + title: 'Name', + dataIndex: 'name', + key: 'name', + filterDropdown: ( +
    + + +
    + ), + filterDropdownVisible: this.state.filterDropdownVisible, + onFilterDropdownVisibleChange: visible => this.setState({ filterDropdownVisible: visible }), + }, { + title: 'Age', + dataIndex: 'age', + key: 'age', + }, { + title: 'Address', + dataIndex: 'address', + key: 'address', + }]; + return
    ; + }, +}); + +ReactDOM.render(, mountNode); +```` + +````css +.custom-filter-dropdown { + padding: 8px; + border-radius: 6px; + background: #fff; + box-shadow: 0 1px 6px rgba(0, 0, 0, .2); +} + +.custom-filter-dropdown input { + width: 130px; + margin-right: 8px; +} + +.highlight { + color: #f50; +} +```` diff --git a/components/table/filterDropdown.tsx b/components/table/filterDropdown.tsx index 2b6813499b..32f5e36a6a 100755 --- a/components/table/filterDropdown.tsx +++ b/components/table/filterDropdown.tsx @@ -12,7 +12,9 @@ export interface FilterMenuProps { column: { filterMultiple?: boolean, filterDropdown?: React.ReactNode, - filters?: string[] + filters?: string[], + filterDropdownVisible?: boolean, + onFilterDropdownVisibleChange?: (visible: boolean) => any, }; confirmFilter: (column: Object, selectedKeys: string[]) => any; prefixCls: string; @@ -22,7 +24,7 @@ export interface FilterMenuProps { export default class FilterMenu extends React.Component { static defaultProps = { handleFilter() {}, - column: null, + column: {}, }; constructor(props) { @@ -36,15 +38,35 @@ export default class FilterMenu extends React.Component { } componentWillReceiveProps(nextProps) { - this.setState({ - selectedKeys: nextProps.selectedKeys, - }); + const { column } = nextProps; + let newState; + if ('selectedKeys' in nextProps) { + newState = newState || {}; + newState.selectedKeys = nextProps.selectedKeys; + } + if ('filterDropdownVisible' in column) { + newState = newState || {}; + newState.visible = column.filterDropdownVisible; + } + if (newState) { + this.setState(newState); + } } setSelectedKeys = ({ selectedKeys }) => { this.setState({ selectedKeys }); } + setVisible(visible) { + const { column } = this.props; + if (!('filterDropdownVisible' in column)) { + this.setState({ visible }); + } + if (column.onFilterDropdownVisibleChange) { + column.onFilterDropdownVisibleChange(visible); + } + } + handleClearFilters = () => { this.setState({ selectedKeys: [], @@ -52,16 +74,12 @@ export default class FilterMenu extends React.Component { } handleConfirm = () => { - this.setState({ - visible: false, - }); + this.setVisible(false); this.confirmFilter(); } onVisibleChange = (visible) => { - this.setState({ - visible, - }); + this.setVisible(visible); if (!visible) { this.confirmFilter(); } diff --git a/components/table/index.en-US.md b/components/table/index.en-US.md index 7d84d059d8..e69bee8005 100644 --- a/components/table/index.en-US.md +++ b/components/table/index.en-US.md @@ -90,12 +90,14 @@ One of Property `columns` for descriping column. | onFilter | callback that is called when when click confirm filter button | Function | - | | filterMultiple | whether to select multiple filtered item | Boolean | true | | filterDropdown | customized filter overlay | React.Element | - | +| filterDropdownVisible | whether filterDropdown is visible | Boolean | - | +| onFilterDropdownVisibleChange | called when filterDropdownVisible is changed | function(visible) {} | - | +| filteredValue | controlled filtered value | Array | - | | sorter | sort function for local sort. If you need sort buttons only, set it `true` | Function or Boolean | - | | colSpan | span of this column's title | Number | | | width | width of this column | String or Number | - | | className | className of this column | String | - | | fixed | set column to be fixed: `true`(same as left) `'left'` `'right'` | Boolean or String | false | -| filteredValue | controlled filtered value | Array | - | | sortOrder | controlled sorted value: `'ascend'` `'descend'` `false` | Boolean or String | - | ### rowSelection diff --git a/components/table/index.zh-CN.md b/components/table/index.zh-CN.md index 00816fadfd..650f2f378e 100644 --- a/components/table/index.zh-CN.md +++ b/components/table/index.zh-CN.md @@ -91,12 +91,14 @@ const columns = [{ | onFilter | 本地模式下，确定筛选的运行函数 | Function | - | | filterMultiple | 是否多选 | Boolean | true | | filterDropdown | 可以自定义筛选菜单，此函数只负责渲染图层，需要自行编写各种交互 | React.Element | - | +| filterDropdownVisible | 用于控制自定义筛选菜单是否可见 | Boolean | - | +| onFilterDropdownVisibleChange | 自定义筛选菜单可见变化时调用 | function(visible) {} | - | +| filteredValue | 筛选的受控属性，外界可用此控制列的筛选状态，值为已筛选的 value 数组 | Array | - | | sorter | 排序函数，本地排序使用一个函数，需要服务端排序可设为 true | Function or Boolean | - | | colSpan | 表头列合并,设置为 0 时，不渲染 | Number | | | width | 列宽度 | String or Number | - | | className | 列的 className | String | - | | fixed | 列是否固定，可选 `true`(等效于 left) `'left'` `'right'` | Boolean or String | false | -| filteredValue | 筛选的受控属性，外界可用此控制列的筛选状态，值为已筛选的 value 数组 | Array | - | | sortOrder | 排序的受控属性，外界可用此控制列的排序，可设置为 `'ascend'` `'descend'` `false` | Boolean or String | - | ### rowSelection From 92df002fb08e79b135c12842cde5598e89b226f2 Mon Sep 17 00:00:00 2001 From: Meck Date: Mon, 14 Nov 2016 18:31:08 +0800 Subject: [PATCH 0726/2145] Introduce jest snapshots --- package.json | 4 +++- tests/__snapshots__/button.test.js.snap | 19 +++++++++++++++++ tests/button.test.js | 27 ++++++++----------------- 3 files changed, 30 insertions(+), 20 deletions(-) create mode 100644 tests/__snapshots__/button.test.js.snap diff --git a/package.json b/package.json index 0ebfbf9ed3..fe82707c59 100644 --- a/package.json +++ b/package.json @@ -92,6 +92,7 @@ "dora-plugin-upload": "^0.3.1", "enquire.js": "^2.1.1", "enzyme": "^2.6.0", + "enzyme-to-json": "^1.3.0", "es6-shim": "^0.35.0", "eslint": "^3.0.1", "eslint-config-airbnb": "latest", @@ -102,6 +103,7 @@ "eslint-plugin-react": "^6.1.2", "eslint-tinker": "^0.4.0", "history": "^4.4.0", + "jest": "^17.0.1", "jest-cli": "^17.0.0", "jsonml-to-react-component": "~0.2.0", "jsonml.js": "^0.1.0", @@ -111,9 +113,9 @@ "moment-timezone": "^0.5.5", "pre-commit": "1.x", "querystring": "^0.2.0", + "rc-queue-anim": "~0.12.4", "rc-scroll-anim": "~0.5.0", "rc-tween-one": "~0.11.0", - "rc-queue-anim": "~0.12.4", "react": "^15.0.0", "react-addons-test-utils": "^15.0.0", "react-copy-to-clipboard": "^4.0.1", diff --git a/tests/__snapshots__/button.test.js.snap b/tests/__snapshots__/button.test.js.snap new file mode 100644 index 0000000000..e9c1b2ac20 --- /dev/null +++ b/tests/__snapshots__/button.test.js.snap @@ -0,0 +1,19 @@ +exports[`Button renders Chinese characters correctly 1`] = ` + +`; + +exports[`Button renders correctly 1`] = ` + +`; diff --git a/tests/button.test.js b/tests/button.test.js index 5f6cc2a3ec..6ad29d39a5 100644 --- a/tests/button.test.js +++ b/tests/button.test.js @@ -1,31 +1,20 @@ import React from 'react'; -import TestUtils from 'react-addons-test-utils'; +import { render } from 'enzyme'; +import { renderToJson } from 'enzyme-to-json'; import Button from '../components/button/button'; describe('Button', function() { - let button; - let buttonNode; - - beforeEach(() => { - button = TestUtils.renderIntoDocument( + it('renders correctly', () => { + const wrapper = render( ); - buttonNode = TestUtils.findRenderedDOMComponentWithTag(button, 'button'); + expect(renderToJson(wrapper)).toMatchSnapshot(); }); - it('should set the type to button by default', () => { - expect(buttonNode.type).toBe('button'); - }); - - it('should set the default className to button', () => { - expect(buttonNode.className).toBe('ant-btn'); - }); - - it('should has a whitespace in two Chinese characters', () => { - button = TestUtils.renderIntoDocument( + it('renders Chinese characters correctly', () => { + const wrapper = render( ); - buttonNode = TestUtils.findRenderedDOMComponentWithTag(button, 'button'); - expect(buttonNode.textContent).toBe('按 钮'); + expect(renderToJson(wrapper)).toMatchSnapshot(); }); }); From b54d0ccc31d93d0f29a242b2e35be8da76c49dae Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 14 Nov 2016 18:52:50 +0800 Subject: [PATCH 0727/2145] Fix active Switch style, close #3838 --- components/switch/style/index.less | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/components/switch/style/index.less b/components/switch/style/index.less index 0a0eceb4e4..8d8faa6dd6 100644 --- a/components/switch/style/index.less +++ b/components/switch/style/index.less @@ -88,10 +88,8 @@ } } - - &-small:active&-checked:after { - left: 10px; + margin-left: -16.5px; } &-checked { @@ -109,7 +107,7 @@ } &:active:after { - left: 16px; + margin-left: -25px; } } From 1850e4b7cf3dc14682545e8105a8f8dc03a7e6a7 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 14 Nov 2016 19:00:17 +0800 Subject: [PATCH 0728/2145] fix disabled today style --- components/date-picker/style/Calendar.less | 1 + 1 file changed, 1 insertion(+) diff --git a/components/date-picker/style/Calendar.less b/components/date-picker/style/Calendar.less index 4632728444..520474f221 100644 --- a/components/date-picker/style/Calendar.less +++ b/components/date-picker/style/Calendar.less @@ -221,6 +221,7 @@ background: #f3f3f3; border-radius: 0; width: auto; + border: 1px solid transparent; &:hover { background: #f3f3f3; From 82fa3ed2a595f783df39e6021df38b66b8628a1b Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 14 Nov 2016 19:13:37 +0800 Subject: [PATCH 0729/2145] update DatePicker doc and demo --- components/date-picker/demo/basic.md | 5 +-- components/date-picker/demo/disabled-date.md | 46 ++++++-------------- components/date-picker/demo/disabled.md | 11 ++--- components/date-picker/demo/format.md | 13 +++--- components/date-picker/demo/locale.md | 5 +-- components/date-picker/demo/size.md | 9 ++-- components/date-picker/demo/time.md | 22 ++++++---- components/date-picker/index.en-US.md | 11 +++-- components/date-picker/index.zh-CN.md | 11 +++-- 9 files changed, 63 insertions(+), 70 deletions(-) diff --git a/components/date-picker/demo/basic.md b/components/date-picker/demo/basic.md index 39db1ce6f7..ba3912f110 100644 --- a/components/date-picker/demo/basic.md +++ b/components/date-picker/demo/basic.md @@ -26,7 +26,6 @@ ReactDOM.render(

    - , - mountNode -); + +, mountNode); ```` diff --git a/components/date-picker/demo/disabled-date.md b/components/date-picker/demo/disabled-date.md index 8862c0c8c0..9a8c32bba2 100644 --- a/components/date-picker/demo/disabled-date.md +++ b/components/date-picker/demo/disabled-date.md @@ -25,7 +25,6 @@ function range(start, end) { return result; } - function disabledDate(current) { // can not select days before today and today return current && current.valueOf() < Date.now(); @@ -33,51 +32,32 @@ function disabledDate(current) { function disabledDateTime() { return { - disabledHours() { - return range(0, 60).splice(4, 20); - }, - disabledMinutes() { - return range(30, 60); - }, - disabledSeconds() { - return [55, 56]; - }, + disabledHours: () => range(0, 60).splice(4, 20), + disabledMinutes: () => range(30, 60), + disabledSeconds: () => [55, 56], }; } function disabledRangeTime(_, type) { if (type === 'start') { return { - disabledHours() { - return range(0, 60).splice(4, 20); - }, - disabledMinutes() { - return range(30, 60); - }, - disabledSeconds() { - return [55, 56]; - }, + disabledHours: () => range(0, 60).splice(4, 20), + disabledMinutes: () => range(30, 60), + disabledSeconds: () => [55, 56], }; } return { - disabledHours() { - return range(0, 60).splice(20, 4); - }, - disabledMinutes() { - return range(0, 31); - }, - disabledSeconds() { - return [55, 56]; - }, + disabledHours: () => range(0, 60).splice(20, 4), + disabledMinutes: () => range(0, 31), + disabledSeconds: () => [55, 56], }; } ReactDOM.render(
    - +
    - -
    , - mountNode -); + + +, mountNode); ```` diff --git a/components/date-picker/demo/disabled.md b/components/date-picker/demo/disabled.md index b45430c9a7..7fbe5347cf 100644 --- a/components/date-picker/demo/disabled.md +++ b/components/date-picker/demo/disabled.md @@ -21,13 +21,14 @@ const { MonthPicker, RangePicker } = DatePicker; const dateFormat = 'YYYY-MM-DD'; ReactDOM.render(
    -
    -
    + +
    + +
    -
    , - mountNode -); + +, mountNode); ```` diff --git a/components/date-picker/demo/format.md b/components/date-picker/demo/format.md index c774919530..60cb0a5847 100644 --- a/components/date-picker/demo/format.md +++ b/components/date-picker/demo/format.md @@ -22,13 +22,14 @@ const dateFormat = 'YYYY/MM/DD'; const monthFormat = 'YYYY/MM'; ReactDOM.render(
    -
    -
    + +
    + +

    -
    , - mountNode -); + /> + +, mountNode); ```` diff --git a/components/date-picker/demo/locale.md b/components/date-picker/demo/locale.md index 846883df88..a3357eedb6 100644 --- a/components/date-picker/demo/locale.md +++ b/components/date-picker/demo/locale.md @@ -39,7 +39,6 @@ ReactDOM.render( locale={enUS} showTime onChange={log} - />, - mountNode -); + /> +, mountNode); ```` diff --git a/components/date-picker/demo/size.md b/components/date-picker/demo/size.md index f8fd8fc007..cefbfb4070 100644 --- a/components/date-picker/demo/size.md +++ b/components/date-picker/demo/size.md @@ -35,9 +35,12 @@ class PickerSizesDemo extends React.Component { Large Default Small -

    -
    -
    + +

    + +
    + +
    ); diff --git a/components/date-picker/demo/time.md b/components/date-picker/demo/time.md index 36e0501b29..475f6f40eb 100644 --- a/components/date-picker/demo/time.md +++ b/components/date-picker/demo/time.md @@ -25,14 +25,18 @@ function onChange(value, dateString) { ReactDOM.render(

    - -
    , - mountNode -); +
    + + +, mountNode); ```` diff --git a/components/date-picker/index.en-US.md b/components/date-picker/index.en-US.md index ed142f814b..4f7ec23be0 100644 --- a/components/date-picker/index.en-US.md +++ b/components/date-picker/index.en-US.md @@ -4,10 +4,7 @@ type: Data Entry title: DatePicker --- -To select or input a date. There are three kinds of picker: -* DatePicker -* MonthPicker -* RangePicker +To select or input a date. ## When To Use @@ -15,6 +12,12 @@ By clicking the input box, you can select a date from a popup calendar. ## API +There are three kinds of picker: + +* DatePicker +* MonthPicker +* RangePicker + **Note:** Part of locale of DatePicker, MonthPicker, RangePicker is read from value. So, please set the locale of moment correctly. ```jsx diff --git a/components/date-picker/index.zh-CN.md b/components/date-picker/index.zh-CN.md index 52332f395e..a4390750d2 100644 --- a/components/date-picker/index.zh-CN.md +++ b/components/date-picker/index.zh-CN.md @@ -5,10 +5,7 @@ title: DatePicker subtitle: 日期选择框 --- -输入或选择日期的控件，包括以下三种形式。 -* DatePicker -* MonthPicker -* RangePicker +输入或选择日期的控件。 ## 何时使用 @@ -16,6 +13,12 @@ subtitle: 日期选择框 ## API +日期类组件包括以下三种形式。 + +* DatePicker +* MonthPicker +* RangePicker + **注意：**DatePicker、MonthPicker、RangePicker 部分 locale 是从 value 中读取，所以请先正确设置 moment 的 locale。 ```jsx From fc3d320872ac931c13c3dcf15195a26603407fd8 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 14 Nov 2016 19:38:24 +0800 Subject: [PATCH 0730/2145] much better way for #3748 and fix ok close animation --- components/date-picker/createPicker.tsx | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/components/date-picker/createPicker.tsx b/components/date-picker/createPicker.tsx index 0ffcd65d55..320b0c55ef 100644 --- a/components/date-picker/createPicker.tsx +++ b/components/date-picker/createPicker.tsx @@ -60,20 +60,19 @@ export default function createPicker(TheCalendar) { // Clear temp value and trigger onChange when hide DatePicker[showTime] panel handleOpenChange(open) { - const { showTime, onOpenChange } = this.props; + const { showTime, onOpenChange, onChange, format } = this.props; if (!open) { // tricky code to avoid triggering onChange multiple times // when click `Now` button let tempValue; this.setState(prevState => { tempValue = prevState.tempValue; - return { - tempValue: undefined, - }; - }, () => { + const nextState = { tempValue: undefined } as any; if (showTime && tempValue) { - this.handleChange(tempValue); + nextState.value = tempValue; + onChange(tempValue, (tempValue && tempValue.format(format)) || ''); } + return nextState; }); } if (onOpenChange) { From b0f366cb0f341a692d95bf4d1bd4a7325dd2c0a1 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 14 Nov 2016 20:15:51 +0800 Subject: [PATCH 0731/2145] Fix TreeSelect[multiple] placeholder margin bug, close #3841 --- components/select/style/index.less | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/components/select/style/index.less b/components/select/style/index.less index b2f1b4559f..2e26fbffc9 100644 --- a/components/select/style/index.less +++ b/components/select/style/index.less @@ -226,6 +226,10 @@ white-space: nowrap; } + &-search__field__placeholder { + left: 8px; + } + &-search--inline { position: absolute; height: 100%; From d4269f8f3041b1b658904c26c892ece2b611af82 Mon Sep 17 00:00:00 2001 From: RaoHai Date: Mon, 14 Nov 2016 11:56:05 +0800 Subject: [PATCH 0732/2145] fix `format` props of RangePicker + close #3808 --- components/date-picker/RangePicker.tsx | 6 +++++- components/date-picker/demo/disabled-date.md | 7 ++++--- components/date-picker/index.tsx | 2 +- 3 files changed, 10 insertions(+), 5 deletions(-) diff --git a/components/date-picker/RangePicker.tsx b/components/date-picker/RangePicker.tsx index bcc6693f36..637be7b272 100644 --- a/components/date-picker/RangePicker.tsx +++ b/components/date-picker/RangePicker.tsx @@ -46,7 +46,10 @@ export default class RangePicker extends React.Component { render() { const props = this.props; - const { disabledDate, disabledTime, showTime, prefixCls, popupStyle, style, onOk, locale } = props; + const { disabledDate, disabledTime, showTime, + prefixCls, popupStyle, style, onOk, locale, + format, + } = props; const state = this.state; const calendarClassName = classNames({ @@ -74,6 +77,7 @@ export default class RangePicker extends React.Component { const calendar = (
    - - -, mountNode); + + , + mountNode +); ```` diff --git a/components/date-picker/index.tsx b/components/date-picker/index.tsx index 105ddeb8d2..7901eefd0a 100755 --- a/components/date-picker/index.tsx +++ b/components/date-picker/index.tsx @@ -55,7 +55,7 @@ export interface RangePickerProps extends PickerProps { } assign(DatePicker, { - RangePicker: wrapPicker(RangePicker), + RangePicker: wrapPicker(RangePicker, 'YYYY-MM-DD hh:mm:ss'), Calendar, MonthPicker, }); From d8516ee8df1d276d09208c9ecd40d2334ed1ff08 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 14 Nov 2016 22:06:07 +0800 Subject: [PATCH 0733/2145] adjust progress vertical align --- components/progress/style/index.less | 2 ++ 1 file changed, 2 insertions(+) diff --git a/components/progress/style/index.less b/components/progress/style/index.less index 65045dd6c9..bed5fb2b38 100644 --- a/components/progress/style/index.less +++ b/components/progress/style/index.less @@ -46,6 +46,8 @@ vertical-align: middle; display: inline-block; font-family: tahoma; + position: relative; + top: -1px; .@{iconfont-css-prefix} { font-size: @font-size-base; } From 7526d7be0846c43dfcf9754052d315d3fe36481a Mon Sep 17 00:00:00 2001 From: parlop Date: Mon, 14 Nov 2016 09:12:05 -0500 Subject: [PATCH 0734/2145] fix typo toturial to tutorial fix typo toturial to tutorial --- docs/react/practical-projects.en-US.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/react/practical-projects.en-US.md b/docs/react/practical-projects.en-US.md index d153ae2866..6f8b18a2c7 100644 --- a/docs/react/practical-projects.en-US.md +++ b/docs/react/practical-projects.en-US.md @@ -261,5 +261,5 @@ You can: - Visit [dva offical website](https://github.com/dvajs/dva). - View all the [API](https://github.com/dvajs/dva#api). -- View [toturial](https://github.com/dvajs/dva-docs/blob/master/v1/zh-cn/tutorial/01-%E6%A6%82%E8%A6%81.md), complete a medium application step by step. +- View [tutorial](https://github.com/dvajs/dva-docs/blob/master/v1/zh-cn/tutorial/01-%E6%A6%82%E8%A6%81.md), complete a medium application step by step. - View examples, such as [dva version of hackernews](https://github.com/dvajs/dva-hackernews). From ab8f8e4506cd6748786db5e80250ba3ffea0d932 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 15 Nov 2016 12:01:06 +0800 Subject: [PATCH 0735/2145] update table demo --- components/table/demo/colspan-rowspan.md | 6 +- components/table/demo/expand-children.md | 11 +- components/table/demo/fixed-columns-header.md | 6 +- components/table/demo/fixed-columns.md | 6 +- components/table/demo/grouping-columns.md | 149 ++++++++---------- components/table/demo/paging.md | 11 +- components/table/demo/row-selection.md | 6 +- components/table/demo/size.md | 14 +- 8 files changed, 92 insertions(+), 117 deletions(-) diff --git a/components/table/demo/colspan-rowspan.md b/components/table/demo/colspan-rowspan.md index f851ba1145..7fca9d3d0f 100644 --- a/components/table/demo/colspan-rowspan.md +++ b/components/table/demo/colspan-rowspan.md @@ -22,7 +22,7 @@ import { Table } from 'antd'; // In the fifth row, other columns are merged into first column // by setting it's colSpan to be 0 -const renderContent = function (value, row, index) { +const renderContent = (value, row, index) => { const obj = { children: value, props: {}, @@ -36,7 +36,7 @@ const renderContent = function (value, row, index) { const columns = [{ title: 'Name', dataIndex: 'name', - render(text, row, index) { + render: (text, row, index) => { if (index < 4) { return {text}; } @@ -55,7 +55,7 @@ const columns = [{ title: 'Home phone', colSpan: 2, dataIndex: 'tel', - render(value, row, index) { + render: (value, row, index) => { const obj = { children: value, props: {}, diff --git a/components/table/demo/expand-children.md b/components/table/demo/expand-children.md index a63dc4008e..ac8380944d 100644 --- a/components/table/demo/expand-children.md +++ b/components/table/demo/expand-children.md @@ -90,19 +90,18 @@ const data = [{ // rowSelection objects indicates the need for row selection const rowSelection = { - onChange(selectedRowKeys, selectedRows) { + onChange: (selectedRowKeys, selectedRows) => { console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows); }, - onSelect(record, selected, selectedRows) { + onSelect: (record, selected, selectedRows) => { console.log(record, selected, selectedRows); }, - onSelectAll(selected, selectedRows, changeRows) { + onSelectAll: (selected, selectedRows, changeRows) => { console.log(selected, selectedRows, changeRows); }, }; ReactDOM.render( -
    , - mountNode -); +
    +, mountNode); ```` diff --git a/components/table/demo/fixed-columns-header.md b/components/table/demo/fixed-columns-header.md index 6ae2916c6a..3c7766e66c 100644 --- a/components/table/demo/fixed-columns-header.md +++ b/components/table/demo/fixed-columns-header.md @@ -54,9 +54,5 @@ for (let i = 0; i < 100; i++) { }); } -function App() { - return
    ; -} - -ReactDOM.render(, mountNode); +ReactDOM.render(
    , mountNode); ```` diff --git a/components/table/demo/fixed-columns.md b/components/table/demo/fixed-columns.md index 3a39d1f167..eee2fe8fa9 100644 --- a/components/table/demo/fixed-columns.md +++ b/components/table/demo/fixed-columns.md @@ -56,9 +56,5 @@ const data = [{ address: 'London Park', }]; -function App() { - return
    ; -} - -ReactDOM.render(, mountNode); +ReactDOM.render(
    , mountNode); ```` diff --git a/components/table/demo/grouping-columns.md b/components/table/demo/grouping-columns.md index 0226a5d8ff..d93c405c86 100644 --- a/components/table/demo/grouping-columns.md +++ b/components/table/demo/grouping-columns.md @@ -11,92 +11,75 @@ title: ## en-US -Group table head with `columns[n].children`。 +Group table head with `columns[n].children`. ```jsx import { Table } from 'antd'; -const columns = [ - { - title: 'Name', - dataIndex: 'name', - key: 'name', +const columns = [{ + title: 'Name', + dataIndex: 'name', + key: 'name', + width: 100, + fixed: 'left', + filters: [{ + text: 'Joe', + value: 'Joe', + }, { + text: 'John', + value: 'John', + }], + onFilter: (value, record) => record.name.indexOf(value) === 0, +}, { + title: 'Other', + children: [{ + title: 'Age', + dataIndex: 'age', + key: 'age', width: 100, - fixed: 'left', - filters: [{ - text: 'Joe', - value: 'Joe', + sorter: (a, b) => a.age - b.age, + }, { + title: 'Address', + children: [{ + title: 'Street', + dataIndex: 'street', + key: 'street', + width: 200, }, { - text: 'John', - value: 'John', - }], - onFilter: (value, record) => record.name.indexOf(value) === 0, - }, - { - title: 'Other', - children: [ - { - title: 'Age', - dataIndex: 'age', - key: 'age', + title: 'Block', + children: [{ + title: 'Building', + dataIndex: 'building', + key: 'building', + width: 50, + }, { + title: 'Door No.', + dataIndex: 'number', + key: 'number', width: 100, - sorter: (a, b) => a.age - b.age, - }, - { - title: 'Address', - children: [ - { - title: 'Street', - dataIndex: 'street', - key: 'street', - width: 200, - }, - { - title: 'Block', - children: [ - { - title: 'Building', - dataIndex: 'building', - key: 'building', - width: 50, - }, - { - title: 'Door No.', - dataIndex: 'number', - key: 'number', - width: 100, - }, - ], - }, - ], - }, - ], - }, - { - title: 'Company', - children: [ - { - title: 'Company Address', - dataIndex: 'companyAddress', - key: 'companyAddress', - width: 200, - }, - { - title: 'Company Name', - dataIndex: 'companyName', - key: 'companyName', - width: 200, - }, - ], - }, - { - title: 'Gender', - dataIndex: 'gender', - key: 'gender', - width: 60, - fixed: 'right', - }, -]; + }], + }], + }], +}, { + title: 'Company', + children: [{ + title: 'Company Address', + dataIndex: 'companyAddress', + key: 'companyAddress', + width: 200, + }, { + title: 'Company Name', + dataIndex: 'companyName', + key: 'companyName', + width: 200, + }], +}, { + title: 'Gender', + dataIndex: 'gender', + key: 'gender', + width: 60, + fixed: 'right', +}]; const data = []; for (let i = 0; i < 100; i++) { @@ -117,9 +100,9 @@ ReactDOM.render(
    , - mountNode -); + /> +, mountNode); ``` diff --git a/components/table/demo/paging.md b/components/table/demo/paging.md index 4b7371b758..37847a9d2b 100644 --- a/components/table/demo/paging.md +++ b/components/table/demo/paging.md @@ -19,9 +19,7 @@ import { Table } from 'antd'; const columns = [{ title: 'Name', dataIndex: 'name', - render(text) { - return {text}; - }, + render: text => {text}, }, { title: 'Age', dataIndex: 'age', @@ -43,14 +41,15 @@ for (let i = 0; i < 46; i++) { const pagination = { total: data.length, showSizeChanger: true, - onShowSizeChange(current, pageSize) { + onShowSizeChange: (current, pageSize) => { console.log('Current: ', current, '; PageSize: ', pageSize); }, - onChange(current) { + onChange: (current) => { console.log('Current: ', current); }, }; -ReactDOM.render(
    +ReactDOM.render( +
    , mountNode); ```` diff --git a/components/table/demo/row-selection.md b/components/table/demo/row-selection.md index 1f21597f6d..7639677055 100644 --- a/components/table/demo/row-selection.md +++ b/components/table/demo/row-selection.md @@ -46,13 +46,13 @@ const data = [{ // rowSelection object indicates the need for row selection const rowSelection = { - onChange(selectedRowKeys, selectedRows) { + onChange: (selectedRowKeys, selectedRows) => { console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows); }, - onSelect(record, selected, selectedRows) { + onSelect: (record, selected, selectedRows) => { console.log(record, selected, selectedRows); }, - onSelectAll(selected, selectedRows, changeRows) { + onSelectAll: (selected, selectedRows, changeRows) => { console.log(selected, selectedRows, changeRows); }, }; diff --git a/components/table/demo/size.md b/components/table/demo/size.md index d5e5cea362..881b25fdea 100644 --- a/components/table/demo/size.md +++ b/components/table/demo/size.md @@ -43,12 +43,14 @@ const data = [{ address: 'Sidney No. 1 Lake Park', }]; -ReactDOM.render(
    -

    No. Form (Middle size table)

    -
    -

    Small size table

    -
    -, mountNode); +ReactDOM.render( +
    +

    No. Form (Middle size table)

    +
    +

    Small size table

    +
    + +, mountNode); ```` From bc45f430428e3bca961d2519585d489292872a18 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 15 Nov 2016 14:12:25 +0800 Subject: [PATCH 0736/2145] Fix Menu Devider style and document, close #3813 --- components/menu/index.en-US.md | 4 ++++ components/menu/index.zh-CN.md | 4 ++++ components/menu/style/index.less | 7 +++++++ 3 files changed, 15 insertions(+) diff --git a/components/menu/index.en-US.md b/components/menu/index.en-US.md index cfa0d6e480..c488b599b9 100644 --- a/components/menu/index.en-US.md +++ b/components/menu/index.en-US.md @@ -65,3 +65,7 @@ More layout and samples: [layout](/docs/spec/layout). |----------|----------------|----------|--------------| | title | title of the group | String or React.Element | | | children | sub menu items | MenuItem[] | | + +### Menu.Divider + +divider line in between menu items, only used in vertical popup Menu or Dropdown Menu. diff --git a/components/menu/index.zh-CN.md b/components/menu/index.zh-CN.md index b09273e0a2..3ad9125e1b 100644 --- a/components/menu/index.zh-CN.md +++ b/components/menu/index.zh-CN.md @@ -66,3 +66,7 @@ subtitle: 导航菜单 |----------|----------------|----------|--------------| | title | 分组标题 | String or React.Element | | | children | 分组的菜单项 | MenuItem[] | | + +### Menu.Divider + +菜单项分割线，只用在弹出菜单内。 diff --git a/components/menu/style/index.less b/components/menu/style/index.less index 82651ccd4e..0b9ece82ce 100644 --- a/components/menu/style/index.less +++ b/components/menu/style/index.less @@ -61,6 +61,13 @@ } } + &-item-divider { + height: 1px; + overflow: hidden; + background-color: @border-color-split; + line-height: 0; + } + &-item:hover, &-item-active, &-submenu-active, From b875a6104b39225f3ca72cec979e14eaa09d0a16 Mon Sep 17 00:00:00 2001 From: Bruce Mitchener Date: Tue, 15 Nov 2016 13:30:17 +0700 Subject: [PATCH 0737/2145] docs: Button: Add `dashed` to type property description. --- components/button/index.en-US.md | 2 +- components/button/index.zh-CN.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/components/button/index.en-US.md b/components/button/index.en-US.md index 51f12d8f43..14c79fac4f 100644 --- a/components/button/index.en-US.md +++ b/components/button/index.en-US.md @@ -16,7 +16,7 @@ To get a customized button, just set `type`/`shape`/`size`/`loading`/`disabled`. Property | Description | Type | Default -----|-----|-----|------ -type | can be set to `primary` `ghost` or omitted | string | - +type | can be set to `primary` `ghost` `dashed` or omitted | string | - htmlType | to set the original `type` of `button`, see: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string | `button` icon | set the icon of button, see: Icon component | string | - shape | can be set to `circle` `circle-outline` or omitted | string | - diff --git a/components/button/index.zh-CN.md b/components/button/index.zh-CN.md index 8f09d36e8f..9a4355bbe3 100644 --- a/components/button/index.zh-CN.md +++ b/components/button/index.zh-CN.md @@ -19,7 +19,7 @@ subtitle: 按钮 属性 | 说明 | 类型 | 默认值 -----|-----|-----|------ -type | 设置按钮类型，可选值为 `primary` `ghost` 或者不设 | string | - +type | 设置按钮类型，可选值为 `primary` `ghost` `dashed` 或者不设 | string | - htmlType | 设置 `button` 原生的 `type` 值，可选值请参考 [HTML 标准](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string | `button` icon | 设置按钮的图标类型 | string | - shape | 设置按钮形状，可选值为 `circle` `circle-outline` 或者不设 | string | - From a1ee6bfa22e96f6ceb3e3f1a7c8c75fc01a22541 Mon Sep 17 00:00:00 2001 From: Bruce Mitchener Date: Tue, 15 Nov 2016 13:44:35 +0700 Subject: [PATCH 0738/2145] Fix some typos. --- .github/CONTRIBUTING.md | 4 ++-- CHANGELOG.en-US.md | 10 +++++----- README.md | 2 +- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index 3889b37fc2..ac8da7d402 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -19,7 +19,7 @@ Tips: choose the corresponding documentation with versions selector which in the ### 2. Make sure that your question is about Ant Design, not React -Someone may think all of the questions that he/she meets in developing are about Ant Design, but it's not true. So, please read [React's documentaion](http://facebook.github.io/react/docs/getting-started.html) or just Google(not Baidu, seriously) your questions with keywork *React* first. If you are sure that your question is about Ant Design, go ahead. +Someone may think all of the questions that he/she meets in developing are about Ant Design, but it's not true. So, please read [React's documentation](http://facebook.github.io/react/docs/getting-started.html) or just Google (not Baidu, seriously) your questions with keyword *React* first. If you are sure that your question is about Ant Design, go ahead. ### 3. Read the FAQ and search the issues list of Ant Design @@ -50,7 +50,7 @@ If you believe that Ant Design should provide some features, but it does not. Yo It's welcomed to pull request. And there are some tips about that: -1. It is a good habit to create a feature request issue to disscuss whether the feature is necessary before you implement it. However, it's unnecessary to create an issue to claim that you found a typo or improved the readability of documentaion, just create a pull request. +1. It is a good habit to create a feature request issue to discuss whether the feature is necessary before you implement it. However, it's unnecessary to create an issue to claim that you found a typo or improved the readability of documentation, just create a pull request. 1. Run `npm run lint` and fix those errors before committing in order to keep consistent code style. 1. Rebase before creating a PR to keep commit history clear. 1. Add some descriptions and refer relative issues for you PR. diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index 3ef9622ac5..8136f2c56f 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -39,7 +39,7 @@ If you want to read change logs before `2.0.0`, please visit [GitHub](https://gi * Fix animate bug of `Progress` component. [#3784](https://github.com/ant-design/ant-design/issues/3784) * Fix focus bug of `Select` component. [#3778](https://github.com/ant-design/ant-design/issues/3778) * Fix `TimePicker` not support `format="HH"` bug. [#3793](https://github.com/ant-design/ant-design/issues/3793) -* Improve perfermance of `Table` selection. [#3757](https://github.com/ant-design/ant-design/pull/3757) +* Improve performance of `Table` selection. [#3757](https://github.com/ant-design/ant-design/pull/3757) * Improve Carousel default UI style. * Improve style of `Checkbox` and `Radio`. [#3590](https://github.com/ant-design/ant-design/issues/3590) * Fix style of DatePickek, Form, Table. @@ -68,7 +68,7 @@ If you want to read change logs before `2.0.0`, please visit [GitHub](https://gi * Add `bordered` for `Collapse`. * Improve `Tabs` switch animation. * Improve `Radio` and `Checkbox` style when it's disabled and mouse hovered. [#3590](https://github.com/ant-design/ant-design/issues/3590) -* Opitimize `Transfer` performance.[#2860](https://github.com/ant-design/ant-design/issues/2860) +* Optimize `Transfer` performance.[#2860](https://github.com/ant-design/ant-design/issues/2860) * Fix nested `Popover` style issue. [#3448](https://github.com/ant-design/ant-design/issues/3448) * Fix issue resulting in server side render `Transfer` failed. [#3686](https://github.com/ant-design/ant-design/issues/3686) * Fix issue resulting in preview image not display when `Upload` in `picture-card` mode. [#3706](https://github.com/ant-design/ant-design/pull/3706) [@denzw](https://github.com/denzw) @@ -91,7 +91,7 @@ If you want to read change logs before `2.0.0`, please visit [GitHub](https://gi * Add `className`。 * `null` or `undefined` `children` will be ignored. * Select - * Add `tokenSeparators` to supoort automatic tokenization。[#2071](https://github.com/ant-design/ant-design/issues/2071) + * Add `tokenSeparators` to support automatic tokenization。[#2071](https://github.com/ant-design/ant-design/issues/2071) * Add `onFocus` callback. [#3587](https://github.com/ant-design/ant-design/issues/3587) * Fix issue resulting in Select can't display correct selected item text in `combobox` mode. [#3401](https://github.com/ant-design/ant-design/issues/3401) @@ -188,7 +188,7 @@ If you want to read change logs before `2.0.0`, please visit [GitHub](https://gi - Fix developers cannot call methods of react-slick. [#3164](https://github.com/ant-design/ant-design/issues/3164) - Fix Steps.Step[icon] should support React.ReactNode. [#3159](https://github.com/ant-design/ant-design/issues/3159) - Fix server-side render for Affix. [#3216](https://github.com/ant-design/ant-design/issues/3216) -- Fix Mention should supoort `onSelect` `placeholder`. [#3236](https://github.com/ant-design/ant-design/issues/3236) [#3226](https://github.com/ant-design/ant-design/issues/3226) +- Fix Mention should support `onSelect` `placeholder`. [#3236](https://github.com/ant-design/ant-design/issues/3236) [#3226](https://github.com/ant-design/ant-design/issues/3226) - Fix Transfer cannot work with `getFieldDecorator`. - Fix LocaleProvider doesn't work for time-related components. - Fix Cascader doesn't show search text in search mode. @@ -230,7 +230,7 @@ There are some breaking changes in `antd@2.0.0`, and you need to modify your cod - + ``` -* 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. And you can consult this [commit](https://github.com/ant-design/ant-design/commit/5a4ebe535f0353089b30ac331bc4fb7877963371) to see how to upate. +* 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. And you can consult this [commit](https://github.com/ant-design/ant-design/commit/5a4ebe535f0353089b30ac331bc4fb7877963371) 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](https://github.com/ant-design/ant-design/issues/3082) for details: ```js diff --git a/README.md b/README.md index b58b412aaa..a75cb77fea 100644 --- a/README.md +++ b/README.md @@ -18,7 +18,7 @@ An enterprise-class UI design language and React-based implementation. - An enterprise-class design language and high quality UI. - Graceful UI components out of the box, base on [React Component](http://react-component.github.io/badgeboard/). -- Writen in TypeScript with complete define types. +- Written in TypeScript with complete define types. - A npm + webpack + babel + [dora](https://github.com/dora-js/dora) + [dva](https://github.com/dvajs/dva) development framework. ## Install From f9319e244bea02bafabb666b3f93ae1bf7aec565 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 15 Nov 2016 15:02:30 +0800 Subject: [PATCH 0739/2145] Add compatible css centered demo code, close #3849 --- components/modal/demo/manual.md | 3 ++- components/modal/demo/position.md | 25 ++++++++++++++++++++++++- 2 files changed, 26 insertions(+), 2 deletions(-) diff --git a/components/modal/demo/manual.md b/components/modal/demo/manual.md index 3d680d3b7c..3f09e47861 100644 --- a/components/modal/demo/manual.md +++ b/components/modal/demo/manual.md @@ -1,6 +1,7 @@ --- order: 7 -title: +debug: true +title: zh-CN: 手动移除 en-US: Manual to destroy --- diff --git a/components/modal/demo/position.md b/components/modal/demo/position.md index fb15f62494..d27ab08539 100644 --- a/components/modal/demo/position.md +++ b/components/modal/demo/position.md @@ -1,6 +1,6 @@ --- order: 7 -title: +title: zh-CN: 自定义位置 en-US: To customize the position of modal --- @@ -68,6 +68,28 @@ ReactDOM.render(, mountNode); ````css /* use css to set position of modal */ +.vertical-center-modal { + text-align: center; + white-space: nowrap; +} + +.vertical-center-modal:before { + content: ''; + display: inline-block; + height: 100%; + vertical-align: middle; + width: 0; +} + +.vertical-center-modal .ant-modal { + display: inline-block; + vertical-align: middle; + top: 0; + text-align: left; +} + +/* +// Use flex which not working in IE .vertical-center-modal { display: flex; align-items: center; @@ -77,4 +99,5 @@ ReactDOM.render(, mountNode); .vertical-center-modal .ant-modal { top: 0; } +*/ ```` From dde040e3e8349606a43d0f4808e0a8cac7b9bf31 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 15 Nov 2016 15:10:01 +0800 Subject: [PATCH 0740/2145] fix lints --- site/theme/template/Content/MainContent.jsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/site/theme/template/Content/MainContent.jsx b/site/theme/template/Content/MainContent.jsx index d420708642..3317e1cd17 100644 --- a/site/theme/template/Content/MainContent.jsx +++ b/site/theme/template/Content/MainContent.jsx @@ -83,13 +83,15 @@ export default class MainContent extends React.Component { ]; const disabled = item.disabled; const url = item.filename.replace(/(\/index)?((\.zh-CN)|(\.en-US))?\.md$/i, '').toLowerCase(); - const child = !item.link ? + const child = !item.link ? ( {text} - : + + ) : ( {text} - ; + + ); return ( From 12c974660ec8ee942e202d9e090a6fd7a91cd255 Mon Sep 17 00:00:00 2001 From: RaoHai Date: Mon, 14 Nov 2016 15:43:55 +0800 Subject: [PATCH 0741/2145] =?UTF-8?q?Anchor=20=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit + using `document.getElementById` instead of `document.querySelector` + ink will scroll to target position directly --- components/anchor/AnchorLink.tsx | 30 +++++++++++++++++++++++++++--- components/anchor/anchorHelper.tsx | 12 +++++++----- components/anchor/index.tsx | 21 ++++++++++++++++++--- components/anchor/style/index.less | 2 +- 4 files changed, 53 insertions(+), 12 deletions(-) diff --git a/components/anchor/AnchorLink.tsx b/components/anchor/AnchorLink.tsx index 0a65380ed5..7b5cf3b803 100644 --- a/components/anchor/AnchorLink.tsx +++ b/components/anchor/AnchorLink.tsx @@ -28,6 +28,8 @@ export default class AnchorLink extends React.Component { prefixCls: 'ant-anchor', }; + private _component: Element; + context: { anchorHelper: AnchorHelper; }; @@ -40,6 +42,23 @@ export default class AnchorLink extends React.Component { return { anchorHelper: this.context.anchorHelper, }; + } + + setActiveAnchor() { + const { bounds, href, affix } = this.props; + const { anchorHelper } = this.context; + const active = affix && anchorHelper && anchorHelper.getCurrentAnchor(bounds) === href; + if (active && anchorHelper) { + anchorHelper.setActiveAnchor(this._component); + } + } + + componentDidMount() { + this.setActiveAnchor(); + } + + componentDidUpdate() { + this.setActiveAnchor(); } renderAnchorLink = (child) => { @@ -47,19 +66,24 @@ export default class AnchorLink extends React.Component { if (href) { this.context.anchorHelper.addLink(href); return React.cloneElement(child, { - onClick: this.context.anchorHelper.scrollTo, + onClick: this.props.onClick, prefixCls: this.props.prefixCls, + affix: this.props.affix, }); } return child; } + refsTo = (component) => { + this._component = component; + } + scrollTo = (e) => { const { onClick, href } = this.props; const { anchorHelper } = this.context; e.preventDefault(); if (onClick) { - onClick(href); + onClick(href, this._component); } else { e.stopPreventDefault(); const scrollToFn = anchorHelper ? anchorHelper.scrollTo : scrollTo; @@ -78,7 +102,7 @@ export default class AnchorLink extends React.Component { return (
    component && active && anchorHelper ? anchorHelper.setActiveAnchor(component) : null} + ref={this.refsTo} className={`${prefixCls}-link-title`} onClick={this.scrollTo} href={href} diff --git a/components/anchor/anchorHelper.tsx b/components/anchor/anchorHelper.tsx index 0dcf732bb3..39cb8c9bec 100644 --- a/components/anchor/anchorHelper.tsx +++ b/components/anchor/anchorHelper.tsx @@ -37,9 +37,9 @@ export function getOffsetTop(element): number { return rect.top; } -export function scrollTo(href, target = getDefaultTarget) { +export function scrollTo(href, target = getDefaultTarget, callback) { const scrollTop = getScroll(target(), true); - const targetElement = document.querySelector(href); + const targetElement = document.getElementById(href.substring(1)); if (!targetElement) { return; } @@ -52,6 +52,8 @@ export function scrollTo(href, target = getDefaultTarget) { window.scrollTo(window.pageXOffset, easeInOutCubic(time, scrollTop, targetScrollTop, 450)); if (time < 450) { reqAnimFrame(frameFunc); + } else { + callback(); } }; reqAnimFrame(frameFunc); @@ -86,7 +88,7 @@ class AnchorHelper { getCurrentAnchor(bounds = 5) { let activeAnchor = ''; this.links.forEach(section => { - const target = document.querySelector(section); + const target = document.getElementById(section.substring(1)); if (target) { const top = getOffsetTop(target); const bottom = top + target.clientHeight; @@ -99,8 +101,8 @@ class AnchorHelper { return this._activeAnchor; } - scrollTo(href, target = getDefaultTarget) { - scrollTo(href, target); + scrollTo(href, target = getDefaultTarget, callback = () => {}) { + scrollTo(href, target, callback); } } diff --git a/components/anchor/index.tsx b/components/anchor/index.tsx index 2f0de969c2..4bd6369b6f 100644 --- a/components/anchor/index.tsx +++ b/components/anchor/index.tsx @@ -34,11 +34,13 @@ export default class Anchor extends React.Component { private scrollEvent: any; private anchorHelper: AnchorHelper; + private _avoidInk: boolean; constructor(props) { super(props); this.state = { activeAnchor: null, + animated: true, }; this.anchorHelper = new AnchorHelper(); } @@ -68,7 +70,9 @@ export default class Anchor extends React.Component { } componentDidUpdate() { - this.updateInk(); + if (!this._avoidInk) { + this.updateInk(); + } } updateInk = () => { @@ -78,12 +82,22 @@ export default class Anchor extends React.Component { } } + clickAnchorLink = (href, component) => { + this.refs.ink.style.transition = 'top 0.01s ease-in-out'; + this._avoidInk = true; + this.refs.ink.style.top = `${component.offsetTop + component.clientHeight / 2 - 4.5}px`; + this.anchorHelper.scrollTo(href, getDefaultTarget, () => { + this.refs.ink.style.transition = 'top 0.3s ease-in-out'; + this._avoidInk = false; + }); + } + renderAnchorLink = (child) => { const { href } = child.props; if (href) { this.anchorHelper.addLink(href); return React.cloneElement(child, { - onClick: this.anchorHelper.scrollTo, + onClick: this.clickAnchorLink, prefixCls: this.props.prefixCls, bounds: this.props.bounds, affix: this.props.affix, @@ -94,9 +108,10 @@ export default class Anchor extends React.Component { render() { const { prefixCls, offsetTop, style, className = '', affix } = this.props; - const { activeAnchor } = this.state; + const { activeAnchor, animated } = this.state; const inkClass = classNames({ [`${prefixCls}-ink-ball`]: true, + animated, visible: !!activeAnchor, }); diff --git a/components/anchor/style/index.less b/components/anchor/style/index.less index 36b84a4295..841ad5b2b3 100644 --- a/components/anchor/style/index.less +++ b/components/anchor/style/index.less @@ -29,8 +29,8 @@ border-radius: 9px; border: 3px solid @primary-color; background-color: white; - transition: top .3s ease-in-out; left: 50%; + transition: top .3s ease-in-out; transform: translateX(-50%); &.visible { display: inline-block; From e2b6054cc479dae87e619dd0f2b7d93993f687ec Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Tue, 15 Nov 2016 15:18:40 +0800 Subject: [PATCH 0742/2145] style: update code style --- components/input/Group.tsx | 4 ---- components/input/Input.tsx | 11 +++-------- components/tree/demo/search.md | 16 ++++++++-------- 3 files changed, 11 insertions(+), 20 deletions(-) diff --git a/components/input/Group.tsx b/components/input/Group.tsx index 63e66ece75..9b9ce64db0 100644 --- a/components/input/Group.tsx +++ b/components/input/Group.tsx @@ -24,8 +24,4 @@ const Group: React.StatelessComponent = (props) => { ); }; -Group.propTypes = { - children: React.PropTypes.any, -}; - export default Group; diff --git a/components/input/Input.tsx b/components/input/Input.tsx index da073f3462..d178a1f164 100644 --- a/components/input/Input.tsx +++ b/components/input/Input.tsx @@ -85,16 +85,12 @@ export default class Input extends Component { nextFrameActionId: number; refs: { - [key: string]: any; input: any; }; - constructor(props) { - super(props); - this.state = { - textareaStyles: null, - }; - } + state = { + textareaStyles: null, + }; componentDidMount() { this.resizeTextarea(); @@ -173,7 +169,6 @@ export default class Input extends Component { renderInput() { const props = assign({}, this.props); - // Fix https://fb.me/react-unknown-prop const otherProps = omit(this.props, [ 'prefixCls', diff --git a/components/tree/demo/search.md b/components/tree/demo/search.md index 659e644cb9..80b147df08 100644 --- a/components/tree/demo/search.md +++ b/components/tree/demo/search.md @@ -111,13 +111,13 @@ class SearchTree extends React.Component { const index = item.key.search(searchValue); const beforeStr = item.key.substr(0, index); const afterStr = item.key.substr(index + searchValue.length); - const title = index > -1 ? - - {beforeStr} - {searchValue} - {afterStr} - - : {item.key}; + const title = index > -1 ? ( + + {beforeStr} + {searchValue} + {afterStr} + + ) : {item.key}; if (item.children) { return ( @@ -153,4 +153,4 @@ ReactDOM.render(, mountNode); color: #f50; transition: all .3s ease; } -```` \ No newline at end of file +```` From b69fd4bf9f8968ef4d80a20da57fd7578c489c87 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 15 Nov 2016 15:21:13 +0800 Subject: [PATCH 0743/2145] fix lints --- components/anchor/anchorHelper.tsx | 2 +- components/transfer/index.tsx | 7 +------ components/tree/demo/search.md | 16 ++++++++-------- 3 files changed, 10 insertions(+), 15 deletions(-) diff --git a/components/anchor/anchorHelper.tsx b/components/anchor/anchorHelper.tsx index 0dcf732bb3..3092d058b4 100644 --- a/components/anchor/anchorHelper.tsx +++ b/components/anchor/anchorHelper.tsx @@ -55,7 +55,7 @@ export function scrollTo(href, target = getDefaultTarget) { } }; reqAnimFrame(frameFunc); - history.pushState(null, undefined, href); + history.pushState(null, '', href); } class AnchorHelper { diff --git a/components/transfer/index.tsx b/components/transfer/index.tsx index bfe71b227c..471b4ad0c3 100644 --- a/components/transfer/index.tsx +++ b/components/transfer/index.tsx @@ -233,12 +233,7 @@ export default class Transfer extends React.Component { handleSelect = (direction, selectedItem, checked) => { const { sourceSelectedKeys, targetSelectedKeys } = this.state; const holder = direction === 'left' ? [...sourceSelectedKeys] : [...targetSelectedKeys]; - let index; - holder.forEach((key, i) => { - if (key === selectedItem.key) { - index = i; - } - }); + const index = holder.indexOf(selectedItem.key); if (index > -1) { holder.splice(index, 1); } diff --git a/components/tree/demo/search.md b/components/tree/demo/search.md index 659e644cb9..80b147df08 100644 --- a/components/tree/demo/search.md +++ b/components/tree/demo/search.md @@ -111,13 +111,13 @@ class SearchTree extends React.Component { const index = item.key.search(searchValue); const beforeStr = item.key.substr(0, index); const afterStr = item.key.substr(index + searchValue.length); - const title = index > -1 ? - - {beforeStr} - {searchValue} - {afterStr} - - : {item.key}; + const title = index > -1 ? ( + + {beforeStr} + {searchValue} + {afterStr} + + ) : {item.key}; if (item.children) { return ( @@ -153,4 +153,4 @@ ReactDOM.render(, mountNode); color: #f50; transition: all .3s ease; } -```` \ No newline at end of file +```` From 146f3180aa0b3cb472f2ed96523604e789ddf536 Mon Sep 17 00:00:00 2001 From: RaoHai Date: Tue, 15 Nov 2016 15:33:13 +0800 Subject: [PATCH 0744/2145] lint fix --- components/anchor/AnchorLink.tsx | 8 ++++---- components/anchor/anchorHelper.tsx | 4 ++-- components/anchor/index.tsx | 2 +- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/components/anchor/AnchorLink.tsx b/components/anchor/AnchorLink.tsx index 7b5cf3b803..7b2dcb1f4b 100644 --- a/components/anchor/AnchorLink.tsx +++ b/components/anchor/AnchorLink.tsx @@ -4,7 +4,7 @@ import AnchorHelper, { scrollTo } from './anchorHelper'; export interface AnchorLinkProps { href: string; - onClick: (href: string) => void; + onClick: (href: string, component: Element) => void; active?: boolean; prefixCls?: string; children?: any; @@ -28,12 +28,12 @@ export default class AnchorLink extends React.Component { prefixCls: 'ant-anchor', }; - private _component: Element; - context: { anchorHelper: AnchorHelper; }; + private _component: Element; + constructor(props, context) { super(props, context); } @@ -42,7 +42,7 @@ export default class AnchorLink extends React.Component { return { anchorHelper: this.context.anchorHelper, }; - } + } setActiveAnchor() { const { bounds, href, affix } = this.props; diff --git a/components/anchor/anchorHelper.tsx b/components/anchor/anchorHelper.tsx index 39cb8c9bec..ab90da0808 100644 --- a/components/anchor/anchorHelper.tsx +++ b/components/anchor/anchorHelper.tsx @@ -37,7 +37,7 @@ export function getOffsetTop(element): number { return rect.top; } -export function scrollTo(href, target = getDefaultTarget, callback) { +export function scrollTo(href, target = getDefaultTarget, callback = () => {}) { const scrollTop = getScroll(target(), true); const targetElement = document.getElementById(href.substring(1)); if (!targetElement) { @@ -57,7 +57,7 @@ export function scrollTo(href, target = getDefaultTarget, callback) { } }; reqAnimFrame(frameFunc); - history.pushState(null, undefined, href); + history.pushState(null, '', href); } class AnchorHelper { diff --git a/components/anchor/index.tsx b/components/anchor/index.tsx index 4bd6369b6f..9e030fa8f6 100644 --- a/components/anchor/index.tsx +++ b/components/anchor/index.tsx @@ -91,7 +91,7 @@ export default class Anchor extends React.Component { this._avoidInk = false; }); } - + renderAnchorLink = (child) => { const { href } = child.props; if (href) { From 36003d03acbfb2b3918771930db2dff9bb3eed60 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 15 Nov 2016 16:44:00 +0800 Subject: [PATCH 0745/2145] improve demo code style --- components/pagination/demo/basic.md | 4 +--- components/pagination/demo/changer.md | 4 ++-- components/pagination/demo/jump.md | 4 ++-- components/pagination/demo/mini.md | 16 +++++++++------- components/pagination/demo/more.md | 4 ++-- components/pagination/demo/simple.md | 4 ++-- components/pagination/demo/total.md | 8 ++++---- 7 files changed, 22 insertions(+), 22 deletions(-) diff --git a/components/pagination/demo/basic.md b/components/pagination/demo/basic.md index 04009468c0..f79eb3c9df 100644 --- a/components/pagination/demo/basic.md +++ b/components/pagination/demo/basic.md @@ -16,7 +16,5 @@ Basic pagination. ````jsx import { Pagination } from 'antd'; -ReactDOM.render( - , - mountNode); +ReactDOM.render(, mountNode); ```` diff --git a/components/pagination/demo/changer.md b/components/pagination/demo/changer.md index a88bcbbedd..5662ef4028 100644 --- a/components/pagination/demo/changer.md +++ b/components/pagination/demo/changer.md @@ -21,6 +21,6 @@ function onShowSizeChange(current, pageSize) { } ReactDOM.render( - , - mountNode); + +, mountNode); ```` diff --git a/components/pagination/demo/jump.md b/components/pagination/demo/jump.md index f210be6c9f..ec27760f06 100644 --- a/components/pagination/demo/jump.md +++ b/components/pagination/demo/jump.md @@ -17,6 +17,6 @@ Jump to a page directly. import { Pagination } from 'antd'; ReactDOM.render( - , - mountNode); + +, mountNode); ```` diff --git a/components/pagination/demo/mini.md b/components/pagination/demo/mini.md index 0acd5c3809..1bd2344fab 100644 --- a/components/pagination/demo/mini.md +++ b/components/pagination/demo/mini.md @@ -20,11 +20,13 @@ function showTotal(total) { return `Total ${total} items`; } -ReactDOM.render(
    - -
    - -
    - -
    , mountNode); +ReactDOM.render( +
    + +
    + +
    + +
    +, mountNode); ```` diff --git a/components/pagination/demo/more.md b/components/pagination/demo/more.md index 5374e75f06..5d4d38a301 100644 --- a/components/pagination/demo/more.md +++ b/components/pagination/demo/more.md @@ -17,6 +17,6 @@ More pages. import { Pagination } from 'antd'; ReactDOM.render( - , - mountNode); + +, mountNode); ```` diff --git a/components/pagination/demo/simple.md b/components/pagination/demo/simple.md index 1e315849e9..290fd7efb3 100644 --- a/components/pagination/demo/simple.md +++ b/components/pagination/demo/simple.md @@ -17,6 +17,6 @@ Simple mode. import { Pagination } from 'antd'; ReactDOM.render( - , -mountNode); + +, mountNode); ```` diff --git a/components/pagination/demo/total.md b/components/pagination/demo/total.md index 30745af53e..36b3b6c5eb 100644 --- a/components/pagination/demo/total.md +++ b/components/pagination/demo/total.md @@ -21,8 +21,8 @@ ReactDOM.render( selectComponentClass={Select} total={80} showTotal={total => `Total ${total} items`} - pageSize={20} defaultCurrent={1} - />, - mountNode -); + pageSize={20} + defaultCurrent={1} + /> +, mountNode); ```` From 92d77e4c5ddcb31bae2f5a580b3d2b990a666193 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 15 Nov 2016 19:16:23 +0800 Subject: [PATCH 0746/2145] Add internal link --- docs/spec/introduce.en-US.md | 3 ++- docs/spec/introduce.zh-CN.md | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/docs/spec/introduce.en-US.md b/docs/spec/introduce.en-US.md index 5fa67636b5..8e6c7d46e0 100644 --- a/docs/spec/introduce.en-US.md +++ b/docs/spec/introduce.en-US.md @@ -28,9 +28,10 @@ Ant Design, created specially for middleware design, is committed to improving t [React](http://facebook.github.io/react/) is used to encapsulate a library of Ant Design components. Any other version of frameworks to implement is also welcome. - [Ant Design of React](/docs/react/introduce) (official implementation) --
    iView
    +-
    iView (vue)
    -
    vue-beauty
    -
    Ant Design of Angular 2.0
    +-
    ATUI (vue)
    -
    antd-ember
    ## How to Contribute diff --git a/docs/spec/introduce.zh-CN.md b/docs/spec/introduce.zh-CN.md index 64fef091a9..694d5a80f5 100644 --- a/docs/spec/introduce.zh-CN.md +++ b/docs/spec/introduce.zh-CN.md @@ -28,9 +28,10 @@ Ant Design 是一个致力于提升『用户』和『设计者』使用体验的 我们采用 [React](http://facebook.github.io/react/) 封装了一套 Ant Design 的组件库，也欢迎社区其他框架的实现版本。 - [Ant Design of React](/docs/react/introduce)（官方实现） --
    iView
    +-
    iView (vue)
    -
    vue-beauty
    -
    Ant Design of Angular 2.0
    +-
    ATUI (vue)
    -
    antd-ember
    ## 如何贡献 From 9e6439b06cd099ab384a4a2f026f0def6e12bf23 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 15 Nov 2016 20:06:41 +0800 Subject: [PATCH 0747/2145] fix title and footer height according to Table[size] --- components/table/demo/dynamic-settings.md | 14 ++++----- components/table/demo/size.md | 2 +- components/table/style/index.less | 38 +++++++++++++++++------ site/theme/static/demo.less | 3 ++ 4 files changed, 40 insertions(+), 17 deletions(-) diff --git a/components/table/demo/dynamic-settings.md b/components/table/demo/dynamic-settings.md index 7d3268b367..bec6d6dd05 100644 --- a/components/table/demo/dynamic-settings.md +++ b/components/table/demo/dynamic-settings.md @@ -75,7 +75,7 @@ class Demo extends React.Component { title, footer, rowSelection: {}, - scroll, + scroll: undefined, } handleToggle = (prop) => { @@ -124,19 +124,19 @@ class Demo extends React.Component { - + - + - + - - + + - + diff --git a/components/table/demo/size.md b/components/table/demo/size.md index 881b25fdea..ec3bb8a586 100644 --- a/components/table/demo/size.md +++ b/components/table/demo/size.md @@ -45,7 +45,7 @@ const data = [{ ReactDOM.render(
    -

    No. Form (Middle size table)

    +

    Middle size table

    Small size table

    diff --git a/components/table/style/index.less b/components/table/style/index.less index 8af0d1b897..9cb42ace25 100644 --- a/components/table/style/index.less +++ b/components/table/style/index.less @@ -68,10 +68,17 @@ &-footer { padding: 16px 8px; background: @table-head-background-color; - position: relative; - z-index: 2; - top: -1px; border-radius: 0 0 @border-radius-base @border-radius-base; + position: relative; + &:before { + content: ''; + height: 1px; + background: @table-head-background-color; + position: absolute; + top: -1px; + width: 100%; + left: 0; + } } &.@{table-prefix-cls}-bordered &-footer { @@ -157,6 +164,11 @@ .@{table-prefix-cls}-tbody > tr > td { padding: 10px 8px; } + + .@{table-prefix-cls}-title, + .@{table-prefix-cls}-footer { + padding: 10px 8px; + } } &-small { @@ -170,7 +182,6 @@ } .@{table-prefix-cls}-thead > tr > th { - padding: 10px 8px; background: #fff; border-bottom: 1px solid @border-color-split; } @@ -179,6 +190,17 @@ padding: 6px 8px; } + .@{table-prefix-cls}-title, + .@{table-prefix-cls}-footer, + .@{table-prefix-cls}-thead > tr > th { + padding: 10px 8px; + } + + .@{table-prefix-cls}-title { + border-bottom: 1px solid @border-color-split; + top: 0; + } + .@{table-prefix-cls}-header { background: #fff; table { @@ -192,11 +214,6 @@ .@{table-prefix-cls}-row:last-child td { border-bottom: 0; } - - .@{table-prefix-cls}-title, - .@{table-prefix-cls}-footer { - top: 0; - } } &-column-sorter { @@ -279,11 +296,14 @@ } &.@{table-prefix-cls}-small { + border-right: 0; + .@{table-prefix-cls}-header > table, .@{table-prefix-cls}-body > table, .@{table-prefix-cls}-fixed-left table, .@{table-prefix-cls}-fixed-right table { border: 0; + padding: 0; } .@{table-prefix-cls}-title { diff --git a/site/theme/static/demo.less b/site/theme/static/demo.less index 4b3601965f..00a6cf638f 100644 --- a/site/theme/static/demo.less +++ b/site/theme/static/demo.less @@ -43,6 +43,9 @@ .code-box:target { border: 1px solid rgba(45, 183, 245, 0.7); box-shadow: 0 0 4px rgba(45, 183, 245, 0.5); + z-index: 10; + background: #fff; + position: relative; } .code-box { From 321f4e1402f3e1a244d181a7a7319c66b20c1fde Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 15 Nov 2016 21:19:02 +0800 Subject: [PATCH 0748/2145] update demo style --- site/theme/static/demo.less | 3 --- 1 file changed, 3 deletions(-) diff --git a/site/theme/static/demo.less b/site/theme/static/demo.less index 00a6cf638f..4b3601965f 100644 --- a/site/theme/static/demo.less +++ b/site/theme/static/demo.less @@ -43,9 +43,6 @@ .code-box:target { border: 1px solid rgba(45, 183, 245, 0.7); box-shadow: 0 0 4px rgba(45, 183, 245, 0.5); - z-index: 10; - background: #fff; - position: relative; } .code-box { From 0d63e5f6b5678b29cb6874073003f07e79afcb0d Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 15 Nov 2016 21:54:22 +0800 Subject: [PATCH 0749/2145] Fix select[combobox] vertical align, close #3855 --- components/form/style/index.less | 1 + components/select/style/index.less | 10 ---------- 2 files changed, 1 insertion(+), 10 deletions(-) diff --git a/components/form/style/index.less b/components/form/style/index.less index fc714bdbad..8b7ccdd360 100644 --- a/components/form/style/index.less +++ b/components/form/style/index.less @@ -252,6 +252,7 @@ form { > div { display: inline-block; + vertical-align: middle; } } diff --git a/components/select/style/index.less b/components/select/style/index.less index 2e26fbffc9..8c6b3489a6 100644 --- a/components/select/style/index.less +++ b/components/select/style/index.less @@ -375,16 +375,6 @@ transition: all .3s @ease-in-out; box-shadow: none; } - .@{select-prefix-cls}-selection__rendered { - padding: 0; - height: 100%; - position: absolute; - left: 0; - right: 0; - > ul { - height: 100%; - } - } } } From 34b420022031a94543bdceea35d45c7892016b60 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 15 Nov 2016 21:59:29 +0800 Subject: [PATCH 0750/2145] adjust search input style for combobox change (#3855) --- components/input/style/search-input.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/input/style/search-input.less b/components/input/style/search-input.less index 3352a8cdb3..60abf166fe 100644 --- a/components/input/style/search-input.less +++ b/components/input/style/search-input.less @@ -40,7 +40,7 @@ } .@{ant-prefix}-select-combobox { .@{ant-prefix}-select-selection__rendered { - right: 29px; + margin-right: 29px; } } } From 5b3df08adecd2557d8f549fc3afdf0cc1a49c952 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 16 Nov 2016 11:34:25 +0800 Subject: [PATCH 0751/2145] use @input-placeholder-color in select and mention, close #3858 --- components/mention/style/index.less | 2 +- components/select/style/index.less | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/components/mention/style/index.less b/components/mention/style/index.less index 7975d7d23d..7c74bc8326 100644 --- a/components/mention/style/index.less +++ b/components/mention/style/index.less @@ -22,7 +22,7 @@ .public-DraftEditorPlaceholder-root { position: absolute; .public-DraftEditorPlaceholder-inner { - color: #ccc; + color: @input-placeholder-color; opacity: 1; outline: none; white-space: pre-wrap; diff --git a/components/select/style/index.less b/components/select/style/index.less index 8c6b3489a6..e9dcced238 100644 --- a/components/select/style/index.less +++ b/components/select/style/index.less @@ -216,7 +216,7 @@ top: 50%; left: 0; right: 9px; - color: #ccc; + color: @input-placeholder-color; line-height: 20px; height: 20px; max-width: 100%; From 200d3715e3c6cdc4fbfd88ef2bbb6b1f57c276d5 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 16 Nov 2016 12:53:21 +0800 Subject: [PATCH 0752/2145] update tests/index.test.js --- tests/index.test.js | 1 + 1 file changed, 1 insertion(+) diff --git a/tests/index.test.js b/tests/index.test.js index 5e93293316..0e3808afb6 100644 --- a/tests/index.test.js +++ b/tests/index.test.js @@ -31,6 +31,7 @@ describe('antd dist files', function() { it('should has modules in antd', () => { expect('Affix' in antd).toBeTruthy(); expect('Alert' in antd).toBeTruthy(); + expect('Anchor' in antd).toBeTruthy(); expect('AutoComplete' in antd).toBeTruthy(); expect('BackTop' in antd).toBeTruthy(); expect('Badge' in antd).toBeTruthy(); From b0bdfcb94cfdda9ea909131980c60534e9f3e5d5 Mon Sep 17 00:00:00 2001 From: RaoHai Date: Wed, 16 Nov 2016 17:16:32 +0800 Subject: [PATCH 0753/2145] onSelect of `Mention` component pass extra data + close #3867 --- components/mention/demo/custom-tag.md | 6 +++--- components/mention/index.en-US.md | 2 +- components/mention/index.zh-CN.md | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/components/mention/demo/custom-tag.md b/components/mention/demo/custom-tag.md index e1ca42ebcf..b80f3148dc 100644 --- a/components/mention/demo/custom-tag.md +++ b/components/mention/demo/custom-tag.md @@ -27,8 +27,8 @@ const webFrameworks = [ { name: 'Django', type: 'Python' }, ]; -function onSelect(suggestion) { - console.log('onSelect', suggestion); +function onSelect(suggestion, data) { + console.log('onSelect', suggestion, data); } const CustomNavMention = React.createClass({ getInitialState() { @@ -42,7 +42,7 @@ const CustomNavMention = React.createClass({ item.name.toLowerCase().indexOf(searchValue) !== -1 ); const suggestions = filtered.map(suggestion => -
    + ); + } +} + +ReactDOM.render(, mountNode); +```` + +````css +.editable-cell { + position: relative; +} + +.editable-cell-input-wrapper, +.editable-cell-text-wrapper { + padding-right: 24px; +} + +.editable-cell-text-wrapper { + padding: 5px 24px 5px 5px; +} + +.editable-cell-icon, +.editable-cell-icon-check { + position: absolute; + right: 0; + width: 20px; + cursor: pointer; +} + +.editable-cell-icon { + line-height: 18px; + display: none; +} + +.editable-cell-icon-check { + line-height: 28px; +} + +.editable-cell:hover .editable-cell-icon { + display: inline-block; +} + +.editable-cell-icon:hover, +.editable-cell-icon-check:hover { + color:#2db7f5; +} + +.editable-add-btn { + margin-bottom: 8px; +} +```` diff --git a/components/table/demo/edit-row.md b/components/table/demo/edit-row.md new file mode 100644 index 0000000000..0992f33657 --- /dev/null +++ b/components/table/demo/edit-row.md @@ -0,0 +1,192 @@ +--- +order: 23 +title: + en-US: Editable Rows + zh-CN: 可编辑行 +--- + +## zh-CN + +带行编辑功能的表格。 + +## en-US + +Table with editable rows. + +````jsx +import { Table, Input, Popconfirm } from 'antd'; + +class EditableCell extends React.Component { + state = { + value: this.props.value, + editable: this.props.editable || false, + } + componentWillReceiveProps(nextProps) { + if (nextProps.editable !== this.state.editable) { + this.setState({ editable: nextProps.editable }); + if (nextProps.editable) { + this.cacheValue = this.state.value; + } + } + if (nextProps.status && nextProps.status !== this.props.status) { + if (nextProps.status === 'save') { + this.props.onChange(this.state.value); + } else if (nextProps.status === 'cancel') { + this.setState({ value: this.cacheValue }); + this.props.onChange(this.cacheValue); + } + } + } + shouldComponentUpdate(nextProps, nextState) { + return nextProps.editable !== this.state.editable || + nextState.value !== this.state.value; + } + handleChange(e) { + const value = e.target.value; + this.setState({ value }); + } + render() { + const { value, editable } = this.state; + return (
    + { + editable ? +
    + this.handleChange(e)} + /> +
    + : +
    + {value || ' '} +
    + } +
    ); + } +} + +class EditableTable extends React.Component { + constructor(props) { + super(props); + this.columns = [{ + title: 'name', + dataIndex: 'name', + width: '25%', + render: (text, record, index) => this.renderColumns(this.state.data, index, 'name', text), + }, { + title: 'age', + dataIndex: 'age', + width: '15%', + render: (text, record, index) => this.renderColumns(this.state.data, index, 'age', text), + }, { + title: 'address', + dataIndex: 'address', + width: '40%', + render: (text, record, index) => this.renderColumns(this.state.data, index, 'address', text), + }, { + title: 'operation', + dataIndex: 'operation', + render: (text, record, index) => { + const { editable } = this.state.data[index].name; + return (
    + { + editable ? + + this.editDone(index, 'save')}>Save + this.editDone(index, 'cancel')}> + Cancel + + + : + + this.edit(index)}>Edit + + } +
    ); + }, + }]; + this.state = { + data: [{ + key: '0', + name: { + editable: false, + value: 'Edward King 0', + }, + age: { + editable: false, + value: '32', + }, + address: { + value: 'London, Park Lane no. 0', + }, + }], + }; + } + renderColumns(data, index, key, text) { + const { editable, status } = data[index][key]; + if (typeof editable === 'undefined') { + return text; + } + return ( this.handleChange(key, index, value)} + status={status} + />); + } + handleChange(key, index, value) { + const { data } = this.state; + data[index][key].value = value; + this.setState({ data }); + } + edit(index) { + const { data } = this.state; + Object.keys(data[index]).forEach((item) => { + if (data[index][item] && typeof data[index][item].editable !== 'undefined') { + data[index][item].editable = true; + } + }); + this.setState({ data }); + } + editDone(index, type) { + const { data } = this.state; + Object.keys(data[index]).forEach((item) => { + if (data[index][item] && typeof data[index][item].editable !== 'undefined') { + data[index][item].editable = false; + data[index][item].status = type; + } + }); + this.setState({ data }, () => { + Object.keys(data[index]).forEach((item) => { + if (data[index][item] && typeof data[index][item].editable !== 'undefined') { + delete data[index][item].status; + } + }); + }); + } + render() { + const { data } = this.state; + const dataSource = data.map((item) => { + const obj = {}; + Object.keys(item).forEach((key) => { + obj[key] = key === 'key' ? item[key] : item[key].value; + }); + return obj; + }); + const columns = this.columns; + return
    ; + } +} + +ReactDOM.render(, mountNode); +```` + +````css +.editable-row-text { + padding: 5px; +} + +.editable-row-operations a { + margin-right: 8px; +} +```` From 1ae5bb9845dd216071d343cf744535cc45fe7c46 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Mon, 21 Nov 2016 11:41:33 +0800 Subject: [PATCH 0786/2145] chore: remove quick selector label, ref: #3753 --- components/date-picker/RangePicker.tsx | 3 +-- components/date-picker/locale/en_US.tsx | 1 - components/date-picker/locale/ru_RU.tsx | 1 - components/date-picker/locale/zh_CN.tsx | 1 - components/date-picker/style/RangePicker.less | 8 -------- 5 files changed, 1 insertion(+), 13 deletions(-) diff --git a/components/date-picker/RangePicker.tsx b/components/date-picker/RangePicker.tsx index c777334c14..9d516a89f5 100644 --- a/components/date-picker/RangePicker.tsx +++ b/components/date-picker/RangePicker.tsx @@ -68,7 +68,7 @@ export default class RangePicker extends React.Component { } renderFooter = () => { - const { prefixCls, ranges, locale } = this.props; + const { prefixCls, ranges } = this.props; if (!ranges) { return null; } @@ -79,7 +79,6 @@ export default class RangePicker extends React.Component { }); return (
    - {operations}
    ); diff --git a/components/date-picker/locale/en_US.tsx b/components/date-picker/locale/en_US.tsx index 4dc9542b14..67d787d6c7 100644 --- a/components/date-picker/locale/en_US.tsx +++ b/components/date-picker/locale/en_US.tsx @@ -7,7 +7,6 @@ const locale = { lang: assign({ placeholder: 'Select date', rangePlaceholder: ['Start date', 'End date'], - quickSelection: 'Quick selection', }, CalendarLocale), timePickerLocale: assign({}, TimePickerLocale), }; diff --git a/components/date-picker/locale/ru_RU.tsx b/components/date-picker/locale/ru_RU.tsx index e4d9193448..7e305e0b0e 100644 --- a/components/date-picker/locale/ru_RU.tsx +++ b/components/date-picker/locale/ru_RU.tsx @@ -10,7 +10,6 @@ const locale = { lang: assign({ placeholder: 'Выберите дату', rangePlaceholder: ['Начальная дата', 'Конечная дата'], - quickSelection: 'Quick selection', }, CalendarLocale), timePickerLocale: assign({}, TimePickerLocale), }; diff --git a/components/date-picker/locale/zh_CN.tsx b/components/date-picker/locale/zh_CN.tsx index 293b225ca8..8a6a6d571d 100644 --- a/components/date-picker/locale/zh_CN.tsx +++ b/components/date-picker/locale/zh_CN.tsx @@ -12,7 +12,6 @@ const locale = { lang: assign({ placeholder: '请选择日期', rangePlaceholder: ['开始日期', '结束日期'], - quickSelection: '快捷选择', }, CalendarLocale), timePickerLocale: assign({}, TimePickerLocale), }; diff --git a/components/date-picker/style/RangePicker.less b/components/date-picker/style/RangePicker.less index 2ca580385f..68ed8ba0ad 100644 --- a/components/date-picker/style/RangePicker.less +++ b/components/date-picker/style/RangePicker.less @@ -159,14 +159,6 @@ border-bottom: 1px solid @border-color-split; padding: 10.5px 10px; - > label { - color: @text-color-secondary; - &:after { - content: ":"; - margin: 0 8px 0 2px; - } - } - > a { margin-right: 16px; } From b51b18acd620da0d7b84029faa627838b78d7f36 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 21 Nov 2016 12:31:23 +0800 Subject: [PATCH 0787/2145] fix image background --- docs/spec/alignment.en-US.md | 2 +- docs/spec/alignment.zh-CN.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/spec/alignment.en-US.md b/docs/spec/alignment.en-US.md index 53c79e46bf..b0bcd609bf 100644 --- a/docs/spec/alignment.en-US.md +++ b/docs/spec/alignment.en-US.md @@ -22,7 +22,7 @@ If the paragraphs or the length of the words are too short or too loose, then a ## Form Alignment -example of colon alignment +example of colon alignment Colon alignment(right-align) can encircle the content into a certain range. Users can infer where the chart is through the regular arranged colon so that the speed of filling in the chart can be speeded up. diff --git a/docs/spec/alignment.zh-CN.md b/docs/spec/alignment.zh-CN.md index fb56718948..64dfa4f618 100644 --- a/docs/spec/alignment.zh-CN.md +++ b/docs/spec/alignment.zh-CN.md @@ -21,7 +21,7 @@ title: 对齐 ## 表单类对齐 -冒号对齐示例 +冒号对齐示例 冒号对齐（右对齐）能让内容锁定在一定范围内，让用户眼球顺着冒号的视觉流，就能找到所有填写项，从而提高填写效率。 From 16c2ee69abd5ad2e7db828bc71af0b8a745b0efc Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 21 Nov 2016 13:56:35 +0800 Subject: [PATCH 0788/2145] update rate api doc --- components/rate/index.en-US.md | 2 +- components/rate/index.zh-CN.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/components/rate/index.en-US.md b/components/rate/index.en-US.md index 8e65743450..2f3a5c8d3b 100644 --- a/components/rate/index.en-US.md +++ b/components/rate/index.en-US.md @@ -18,6 +18,6 @@ Rate component. | count | star count | Number | 5 | | value | current value | Number | - | | defaultValue | default value | Number | 0 | -| onChange(value: Number) | callback | Function | - | +| onChange | callback | Function(value: Number) | - | | allowHalf | whether to allow semi selection | Boolean | false | | disabled | read only, unable to interact | Boolean | false | diff --git a/components/rate/index.zh-CN.md b/components/rate/index.zh-CN.md index b41b2c4a05..13bb171fbe 100644 --- a/components/rate/index.zh-CN.md +++ b/components/rate/index.zh-CN.md @@ -19,6 +19,6 @@ title: Rate | count | star 总数 | Number | 5 | | value | 当前数，受控值 | Number | - | | defaultValue | 默认值 | Number | 0 | -| onChange(value: Number) | 回调 | Function | - | +| onChange | 回调 | Function(value: Number) | - | | allowHalf | 是否允许半选 | Boolean | false | | disabled | 只读，无法进行交互 | Boolean | false | From 84d036bfefa3de50d2833b79e8d71995ab0603bb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B9=90=E4=BB=AA?= Date: Thu, 17 Nov 2016 12:06:40 +0800 Subject: [PATCH 0789/2145] version -> 2.4.3 --- CHANGELOG.en-US.md | 6 ++++++ CHANGELOG.zh-CN.md | 6 ++++++ package.json | 2 +- 3 files changed, 13 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index 6115162cbc..34252aa8a9 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -9,6 +9,12 @@ If you want to read change logs before `2.0.0`, please visit [GitHub](https://gi --- +## 2.4.3 + +`2016-11-17` + +* Fix errors in `Anchor` about querySelector, and make some experience Optimization .[#3832](https://github.com/ant-design/ant-design/issues/3832) [#3844](https://github.com/ant-design/ant-design/issues/3844) + ## 2.4.2 `2016-11-13` diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index 999cdc030a..3f1fa57061 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -9,6 +9,12 @@ timeline: true --- +## 2.4.3 + +`2016-11-17` + +* 修复 `Anchor` 内部 querySelector 报错，并做了一些体验优化 。[#3832](https://github.com/ant-design/ant-design/issues/3832) [#3844](https://github.com/ant-design/ant-design/issues/3844) + ## 2.4.2 `2016-11-13` diff --git a/package.json b/package.json index 40b0f4fe62..2a7337b84c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "antd", - "version": "2.4.2", + "version": "2.4.3", "title": "Ant Design", "description": "An enterprise-class UI design language and React-based implementation", "homepage": "http://ant.design/", From 34f353deb0e05ebe8bca63344f6f6c4d55fa451a Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 21 Nov 2016 14:28:20 +0800 Subject: [PATCH 0790/2145] update form API doc --- components/form/index.en-US.md | 28 ++++++++++++++-------------- components/form/index.zh-CN.md | 20 ++++++++++---------- 2 files changed, 24 insertions(+), 24 deletions(-) diff --git a/components/form/index.en-US.md b/components/form/index.en-US.md index c089b261ff..8ecee5aac4 100644 --- a/components/form/index.en-US.md +++ b/components/form/index.en-US.md @@ -53,14 +53,14 @@ CustomizedForm = Form.create({})(CustomizedForm); The following `options` are available: -| Property | Description | Type | +| Property | Description | Type | |-----------|------------------------------------------|------------| | onFieldsChange | Specify a function that will be called when the value a `Form.Item` gets changed. Usage example: saving the field's value to Redux store. | Function(props, fields) | | mapPropsToFields | Convert props to corresponding field value. Usage example: reading the values from Redux store. | Function(props): Object{ fieldName: Object{ value } } | If the form has been decorated by `Form.create` then it has `this.props.form` property. `this.props.form` provides some APIs as follows: -| Property | Description | Type | +| Property | Description | Type | |-----------|------------------------------------------|------------| | getFieldsValue | Get the specified fields' values. If you don't specify a parameter, you will get all fields' values. | Function([fieldNames: string[]]) | | getFieldValue | Get the value of a field. | Function(fieldName: string) | @@ -87,8 +87,8 @@ If you use `react@<15.3.0`, then, you can't use `getFieldDecorator` in stateless #### getFieldDecorator's parameters -| Property | Description | Type | Default Value | -|-----------|-----------------------------------------|-----|--------| +| Property | Description | Type | Default Value | +|-----------|-----------------------------------------|------|---------------| | options.id | The unique identifier is required. | string | | | options.valuePropName | Props of children node, for example, the prop of Switch is 'checked'. | string | 'value' | | options.initialValue | You can specify initial value, type, optional value of children node. | | n/a | @@ -104,16 +104,16 @@ Note: * If Form.Item has multiple children that had been decorated by `getFieldDecorator`, `help` and `required` and `validateStatus` can't be generated automatically. * Before `2.2.0`, form controls must be child of Form.Item, otherwise, you need to set `help`, `required` and `validateStatus` by yourself. -| Property | Description | Type | Optional | Default Value | -|-----------|------------------------------------------|-----------|-------|--------| -| label | Label text | string | | | -| labelCol | The layout of label. You can set `span` `offset` to something like `{span: 3, offset: 12}` same as with `    ` | object | | | -| wrapperCol | The layout for input controls. Same as `labelCol` | object | | | -| help | The prompt message. If not provided, the prompt message will be generated by the validation rule. | string | | | -| extra | The extra prompt message. It is similar to help. Usage example: to display error message and prompt message at the same time. | string | | | -| required | Whether provided or not, it will be generated by the validation rule. | bool | | false | -| validateStatus | The validation status. If not provided, it will be generated by validation rule | string | 'success' 'warning' 'error' 'validating' | | -| hasFeedback | Used with `validateStatus`, this option specifies the validation status icon. Recommended to be used only with `Input`. | bool | | false | +| Property | Description | Type | Default Value | +|---------------|--------------------------------------|--------|---------------| +| label | Label text | string | | +| labelCol | The layout of label. You can set `span` `offset` to something like `{span: 3, offset: 12}` same as with `` | object | | +| wrapperCol | The layout for input controls. Same as `labelCol` | object | | +| help | The prompt message. If not provided, the prompt message will be generated by the validation rule. | string | | +| extra | The extra prompt message. It is similar to help. Usage example: to display error message and prompt message at the same time. | string | | +| required | Whether provided or not, it will be generated by the validation rule. | boolean | false | +| validateStatus | The validation status. If not provided, it will be generated by validation rule. options: 'success' 'warning' 'error' 'validating' | string | | +| hasFeedback | Used with `validateStatus`, this option specifies the validation status icon. Recommended to be used only with `Input`. | boolean | false | diff --git a/components/slider/style/index.less b/components/slider/style/index.less index a3afce84c2..ecef656d56 100644 --- a/components/slider/style/index.less +++ b/components/slider/style/index.less @@ -22,6 +22,10 @@ border-bottom: 4px solid #fff; transition: background-color 0.3s ease; + &-with-marks { + margin-bottom: 28px; + } + &-track { position: absolute; left: 0; diff --git a/package.json b/package.json index 5cc4f6ae27..b1aac70ca2 100644 --- a/package.json +++ b/package.json @@ -59,7 +59,7 @@ "rc-radio": "~2.0.0", "rc-rate": "~1.1.2", "rc-select": "~6.6.1", - "rc-slider": "~5.2.0", + "rc-slider": "~5.3.0", "rc-steps": "~2.2.0", "rc-switch": "~1.4.2", "rc-table": "~5.0.0", From c3064949cccfce4e4d14ff6d1876d1217dd04888 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Mon, 21 Nov 2016 16:37:04 +0800 Subject: [PATCH 0793/2145] docs: update demos for Slider --- components/slider/demo/basic.md | 30 +++++++++++++++++++------ components/slider/demo/event.md | 22 ++++++++++-------- components/slider/demo/icon-slider.md | 14 +++++------- components/slider/demo/input-number.md | 19 +++++++++------- components/slider/demo/mark.md | 17 +++++++------- components/slider/demo/tip-formatter.md | 11 +++++---- 6 files changed, 69 insertions(+), 44 deletions(-) diff --git a/components/slider/demo/basic.md b/components/slider/demo/basic.md index a610dc064a..94cd5cbb66 100644 --- a/components/slider/demo/basic.md +++ b/components/slider/demo/basic.md @@ -14,12 +14,28 @@ title: Basic slider. When `range` is `true`, display as dual thumb mode. When `disable` is `true`, the slider will not be interactable. ````jsx -import { Slider } from 'antd'; +import { Slider, Switch } from 'antd'; -ReactDOM.render(
    - - - -
    -, mountNode); +class Demo extends React.Component { + state = { + disabled: false, + }; + + handleDisabledChange = (disabled) => { + this.setState({ disabled }); + } + + render() { + const { disabled } = this.state; + return ( +
    + Disabled: + + +
    + ); + } +} + +ReactDOM.render(, mountNode); ```` diff --git a/components/slider/demo/event.md b/components/slider/demo/event.md index 79e8211b8a..d8104cb8d0 100644 --- a/components/slider/demo/event.md +++ b/components/slider/demo/event.md @@ -1,6 +1,6 @@ --- order: 4 -title: +title: zh-CN: 事件 en-US: Event --- @@ -11,21 +11,25 @@ title: ## en-US -The `onChange` callback function will fire when the user changes the slider's value. +The `onChange` callback function will fire when the user changes the slider's value. The `onAfterChange` callback function will fire when `onmouseup` fired. ````jsx import { Slider } from 'antd'; -function log(value) { - console.log(value); +function onChange(value) { + console.log('onChange: ', value); +} + +function onAfterChange(value) { + console.log('onAfterChange: ', value); } ReactDOM.render(
    - - - -
    -, mountNode); + + + , + mountNode +); ```` diff --git a/components/slider/demo/icon-slider.md b/components/slider/demo/icon-slider.md index 1c63dd851c..01acbdb00c 100644 --- a/components/slider/demo/icon-slider.md +++ b/components/slider/demo/icon-slider.md @@ -39,7 +39,7 @@ const IconSlider = React.createClass({ render() { return ( -
    +
    @@ -48,18 +48,16 @@ const IconSlider = React.createClass({ }, }); -ReactDOM.render( - -, mountNode); +ReactDOM.render(, mountNode); ```` ````css -.iconWrapper { +.icon-wrapper { position: relative; padding: 0px 30px; } -.iconWrapper .anticon { +.icon-wrapper .anticon { position: absolute; top: -3px; width: 16px; @@ -69,11 +67,11 @@ ReactDOM.render( color: #ccc; } -.iconWrapper .anticon:first-child { +.icon-wrapper .anticon:first-child { left: 0; } -.iconWrapper .anticon:last-child { +.icon-wrapper .anticon:last-child { right: 0; } diff --git a/components/slider/demo/input-number.md b/components/slider/demo/input-number.md index 85c3a85ef4..76e5adc21a 100644 --- a/components/slider/demo/input-number.md +++ b/components/slider/demo/input-number.md @@ -1,8 +1,8 @@ --- order: 1 -title: +title: zh-CN: 带输入框的滑块 - en-US: Slider with input field + en-US: Slider with InputNumber --- ## zh-CN @@ -34,7 +34,7 @@ const IntegerStep = React.createClass({
    - @@ -61,7 +61,7 @@ const DecimalStep = React.createClass({ - @@ -70,8 +70,11 @@ const DecimalStep = React.createClass({ }, }); -ReactDOM.render(
    - - -
    , mountNode); +ReactDOM.render( +
    + + +
    , + mountNode +); ```` diff --git a/components/slider/demo/mark.md b/components/slider/demo/mark.md index 197d20262f..f0f14d0919 100644 --- a/components/slider/demo/mark.md +++ b/components/slider/demo/mark.md @@ -1,7 +1,7 @@ --- order: 3 -title: - zh-CN: 分段式滑块 +title: + zh-CN: 带标签的滑块 en-US: Graduated slider --- @@ -33,15 +33,16 @@ const marks = { ReactDOM.render(
    -

    `included=true`

    +

    included=true

    -

    `included=false`

    +

    included=false

    -

    `marks && step`

    +

    marks && step

    -

    `step=null`

    +

    step=null

    -
    -, mountNode); + , + mountNode +); ```` diff --git a/components/slider/demo/tip-formatter.md b/components/slider/demo/tip-formatter.md index 8fac16fa78..fba9817d2f 100644 --- a/components/slider/demo/tip-formatter.md +++ b/components/slider/demo/tip-formatter.md @@ -20,8 +20,11 @@ function formatter(value) { return `${value}%`; } -ReactDOM.render(
    - - -
    , mountNode); +ReactDOM.render( +
    + + +
    , + mountNode +); ```` From ca881823f20fa1e8dafc660245d5b2970ad17032 Mon Sep 17 00:00:00 2001 From: jiang <155259966@qq.com> Date: Mon, 21 Nov 2016 17:48:39 +0800 Subject: [PATCH 0794/2145] site: update home (#3939) --- site/theme/static/home.less | 5 ++--- site/theme/template/Home/Banner.jsx | 2 +- site/theme/template/Home/Link.jsx | 2 +- site/theme/template/Home/index.jsx | 12 ++---------- 4 files changed, 6 insertions(+), 15 deletions(-) diff --git a/site/theme/static/home.less b/site/theme/static/home.less index cf448b4f6d..8becfbd9ff 100644 --- a/site/theme/static/home.less +++ b/site/theme/static/home.less @@ -21,9 +21,8 @@ opacity: 1; } -#banner { +.banner-wrapper { position: relative; - height: 100%; width: 100%; overflow: hidden; background: url("https://os.alipayobjects.com/rmsportal/GhjqstwSgxBXrZS.png") no-repeat center / cover; @@ -107,11 +106,11 @@ .page { min-height: 700px; + height: 100vh; } .content-wrapper { width: 100%; - height: 100%; max-width: 1500px; margin: auto; overflow: hidden; diff --git a/site/theme/template/Home/Banner.jsx b/site/theme/template/Home/Banner.jsx index 7424805107..a048261829 100644 --- a/site/theme/template/Home/Banner.jsx +++ b/site/theme/template/Home/Banner.jsx @@ -18,7 +18,7 @@ function typeFunc(a) { export default function Banner({ location, onEnterChange }) { const query = location.query; return ( -     From 9febc9e71e5e546173b3280c759c40943160da61 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 21 Nov 2016 20:06:42 +0800 Subject: [PATCH 0799/2145] update Changelog --- CHANGELOG.en-US.md | 1 + CHANGELOG.zh-CN.md | 1 + 2 files changed, 2 insertions(+) diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index 34252aa8a9..22e2336095 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -45,6 +45,7 @@ If you want to read change logs before `2.0.0`, please visit [GitHub](https://gi * Fix animate bug of `Progress` component. [#3784](https://github.com/ant-design/ant-design/issues/3784) * Fix focus bug of `Select` component. [#3778](https://github.com/ant-design/ant-design/issues/3778) * Fix `TimePicker` not support `format="HH"` bug. [#3793](https://github.com/ant-design/ant-design/issues/3793) +* Fix `Input` `suffix` mouse event responsive area. [#3714](https://github.com/ant-design/ant-design/issues/3714) * Improve performance of `Table` selection. [#3757](https://github.com/ant-design/ant-design/pull/3757) * Improve Carousel default UI style. * Improve style of `Checkbox` and `Radio`. [#3590](https://github.com/ant-design/ant-design/issues/3590) diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index 3f1fa57061..a8c7c5d10f 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -44,6 +44,7 @@ timeline: true * 修复 `Progress` 组件的动画问题。[#3784](https://github.com/ant-design/ant-design/issues/3784) * 修复 `Select` 搜索时的丢失焦点问题。[#3778](https://github.com/ant-design/ant-design/issues/3778) * 修复 `TimePicker` 不支持 `format="HH"` 等格式的问题。[#3793](https://github.com/ant-design/ant-design/issues/3793) +* 修复 `Input` 的 `suffix` 部分区域中鼠标事件无法响应的问题。[#3714](https://github.com/ant-design/ant-design/issues/3714) * 优化了 `Table` 选择的性能。[#3757](https://github.com/ant-design/ant-design/pull/3757) * 优化 `Carousel` 的默认样式。 * 优化 `Checkbox` 和 `Radio` 的样式。[#3590](https://github.com/ant-design/ant-design/issues/3590) From 1c26bca8fee7e7c55d90a9c4ef20140e853e973d Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Tue, 22 Nov 2016 09:49:25 +0800 Subject: [PATCH 0800/2145] docs: update demo for Pagination, close: #3944 --- components/pagination/demo/jump.md | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/components/pagination/demo/jump.md b/components/pagination/demo/jump.md index ec27760f06..83042d3090 100644 --- a/components/pagination/demo/jump.md +++ b/components/pagination/demo/jump.md @@ -16,7 +16,12 @@ Jump to a page directly. ````jsx import { Pagination } from 'antd'; +function onChange(pageNumber) { + console.log('Page: ', pageNumber); +} + ReactDOM.render( - -, mountNode); + , + mountNode +); ```` From ed455c01d19891b4365ff19aac7f3bde5601edc1 Mon Sep 17 00:00:00 2001 From: Wei Zhu Date: Tue, 22 Nov 2016 10:11:12 +0800 Subject: [PATCH 0801/2145] feat: Implement Table.Column and Table.ColumnGroup (#3868) * Implement Table.Column and Table.ColumnGroup * Upgrade rc-table --- components/table/Column.tsx | 22 ++++ components/table/ColumnGroup.tsx | 8 ++ components/table/Table.tsx | 46 ++++---- components/table/demo/bordered.md | 2 +- components/table/demo/colspan-rowspan.md | 2 +- components/table/demo/dynamic-settings.md | 2 +- components/table/demo/expand-children.md | 2 +- components/table/demo/expand.md | 2 +- components/table/demo/fixed-columns-header.md | 2 +- components/table/demo/fixed-columns.md | 2 +- components/table/demo/fixed-header.md | 2 +- components/table/demo/grouping-columns.md | 2 +- components/table/demo/head.md | 2 +- components/table/demo/jsx.md | 82 ++++++++++++++ components/table/demo/nopagination.md | 2 +- components/table/demo/paging.md | 2 +- components/table/demo/reset-filter.md | 2 +- .../table/demo/row-selection-and-operation.md | 2 +- components/table/demo/row-selection-props.md | 2 +- components/table/demo/row-selection.md | 2 +- components/table/demo/size.md | 2 +- components/table/index.en-US.md | 8 +- components/table/index.zh-CN.md | 8 +- components/table/util.tsx | 26 +++++ package.json | 2 +- tests/table/Table.test.js | 44 ++++++++ tests/table/__snapshots__/Table.test.js.snap | 105 ++++++++++++++++++ 27 files changed, 338 insertions(+), 47 deletions(-) create mode 100644 components/table/Column.tsx create mode 100644 components/table/ColumnGroup.tsx create mode 100644 components/table/demo/jsx.md create mode 100644 tests/table/__snapshots__/Table.test.js.snap diff --git a/components/table/Column.tsx b/components/table/Column.tsx new file mode 100644 index 0000000000..6fd34100f0 --- /dev/null +++ b/components/table/Column.tsx @@ -0,0 +1,22 @@ +import React from 'react'; +import RcTable from 'rc-table'; + +export interface ColumnProps { + title?: React.ReactNode; + key?: string; + dataIndex?: string; + render?: (text: any, record: T, index: number) => React.ReactNode; + filters?: { text: string; value: string }[]; + onFilter?: (value: any, record: T) => boolean; + filterMultiple?: boolean; + filterDropdown?: React.ReactNode; + sorter?: boolean | ((a: any, b: any) => number); + colSpan?: number; + width?: string | number; + className?: string; + fixed?: boolean | ('left' | 'right'); + filteredValue?: any[]; + sortOrder?: boolean | ('ascend' | 'descend'); +} + +export default class Column extends (RcTable.Column as React.ComponentClass>) {} diff --git a/components/table/ColumnGroup.tsx b/components/table/ColumnGroup.tsx new file mode 100644 index 0000000000..2128d08695 --- /dev/null +++ b/components/table/ColumnGroup.tsx @@ -0,0 +1,8 @@ +import React from 'react'; +import RcTable from 'rc-table'; + +export interface ColumnGroupProps { + title?: React.ReactNode; +} + +export default class ColumnGroup extends (RcTable.ColumnGroup as React.ComponentClass) {} diff --git a/components/table/Table.tsx b/components/table/Table.tsx index ac56a6df39..c826b19abd 100755 --- a/components/table/Table.tsx +++ b/components/table/Table.tsx @@ -5,13 +5,15 @@ import Pagination, { PaginationProps } from '../pagination'; import Icon from '../icon'; import Spin from '../spin'; import classNames from 'classnames'; -import { flatArray, treeMap } from './util'; +import { flatArray, treeMap, normalizeColumns } from './util'; import assign from 'object-assign'; import splitObject from '../_util/splitObject'; import warning from '../_util/warning'; import createStore, { Store } from './createStore'; import SelectionBox from './SelectionBox'; import SelectionCheckboxAll from './SelectionCheckboxAll'; +import Column, { ColumnProps } from './Column'; +import ColumnGroup from './ColumnGroup'; function noop() { } @@ -44,24 +46,6 @@ export interface TableRowSelection { onSelectAll?: (selected: boolean, selectedRows: Object[], changeRows: Object[]) => any; } -export interface TableColumnConfig { - title?: React.ReactNode; - key?: string; - dataIndex?: string; - render?: (text: any, record: T, index: number) => React.ReactNode; - filters?: { text: string; value: string }[]; - onFilter?: (value: any, record: T) => boolean; - filterMultiple?: boolean; - filterDropdown?: React.ReactNode; - sorter?: boolean | ((a: any, b: any) => number); - colSpan?: number; - width?: string | number; - className?: string; - fixed?: boolean | ('left' | 'right'); - filteredValue?: any[]; - sortOrder?: boolean | ('ascend' | 'descend'); -} - export interface TableProps { prefixCls?: string; dropdownPrefixCls?: string; @@ -69,7 +53,7 @@ export interface TableProps { pagination?: PaginationProps | boolean; size?: 'default' | 'small'; dataSource?: T[]; - columns: TableColumnConfig[]; + columns?: ColumnProps[]; rowKey?: string | ((record: T, index: number) => string); rowClassName?: (record: T, index: number) => string; expandedRowRender?: any; @@ -100,9 +84,12 @@ export interface TableContext { } export default class Table extends React.Component, any> { + static Column = Column; + static ColumnGroup = ColumnGroup; + static propTypes = { dataSource: React.PropTypes.array, - columns: React.PropTypes.array.isRequired, + columns: React.PropTypes.array, prefixCls: React.PropTypes.string, useFixedHeader: React.PropTypes.bool, rowSelection: React.PropTypes.object, @@ -136,6 +123,7 @@ export default class Table extends React.Component, any> { context: TableContext; CheckboxPropsCache: Object; store: Store; + columns: ColumnProps[]; constructor(props) { super(props); @@ -149,6 +137,8 @@ export default class Table extends React.Component, any> { const pagination = props.pagination || {}; + this.columns = props.columns || normalizeColumns(props.children); + this.state = assign({}, this.getSortStateFromColumns(), { // 减少状态 filters: this.getFiltersFromColumns(), @@ -225,6 +215,8 @@ export default class Table extends React.Component, any> { )) { this.CheckboxPropsCache = {}; } + + this.columns = nextProps.columns || normalizeColumns(nextProps.children); } if (this.getSortOrderColumns(nextProps.columns).length > 0) { @@ -292,11 +284,11 @@ export default class Table extends React.Component, any> { } getSortOrderColumns(columns?) { - return (columns || this.props.columns || []).filter(column => 'sortOrder' in column); + return (columns || this.columns || []).filter(column => 'sortOrder' in column); } getFilteredValueColumns(columns?) { - return (columns || this.props.columns || []).filter(column => column.filteredValue); + return (columns || this.columns || []).filter(column => column.filteredValue); } getFiltersFromColumns(columns?) { @@ -376,7 +368,7 @@ export default class Table extends React.Component, any> { [this.getColumnKey(column)]: nextFilters, }); // Remove filters not in current columns - const currentColumnKeys = props.columns.map(c => this.getColumnKey(c)); + const currentColumnKeys = this.columns.map(c => this.getColumnKey(c)); Object.keys(filters).forEach((columnKey) => { if (currentColumnKeys.indexOf(columnKey) < 0) { delete filters[columnKey]; @@ -571,7 +563,7 @@ export default class Table extends React.Component, any> { renderRowSelection() { const { prefixCls, rowSelection } = this.props; - const columns = this.props.columns.concat(); + const columns = this.columns.concat(); if (rowSelection) { const data = this.getFlatCurrentPageData().filter((item) => { if (rowSelection.getCheckboxProps) { @@ -579,7 +571,7 @@ export default class Table extends React.Component, any> { } return true; }); - const selectionColumn: TableColumnConfig = { + const selectionColumn: ColumnProps = { key: 'selection-column', render: this.renderSelectionBox(rowSelection.type), className: `${prefixCls}-selection-column`, @@ -743,7 +735,7 @@ export default class Table extends React.Component, any> { } findColumn(myKey) { - return this.props.columns.filter(c => this.getColumnKey(c) === myKey)[0]; + return this.columns.filter(c => this.getColumnKey(c) === myKey)[0]; } getCurrentPageData() { diff --git a/components/table/demo/bordered.md b/components/table/demo/bordered.md index bea509f200..f62973ee56 100644 --- a/components/table/demo/bordered.md +++ b/components/table/demo/bordered.md @@ -1,5 +1,5 @@ --- -order: 10 +order: 11 title: en-US: border, title and footer zh-CN: 带边框 diff --git a/components/table/demo/colspan-rowspan.md b/components/table/demo/colspan-rowspan.md index 7fca9d3d0f..8d1d81826a 100644 --- a/components/table/demo/colspan-rowspan.md +++ b/components/table/demo/colspan-rowspan.md @@ -1,5 +1,5 @@ --- -order: 13 +order: 14 title: en-US: colSpan and rowSpan zh-CN: 表格行/列合并 diff --git a/components/table/demo/dynamic-settings.md b/components/table/demo/dynamic-settings.md index bec6d6dd05..f151428e3b 100644 --- a/components/table/demo/dynamic-settings.md +++ b/components/table/demo/dynamic-settings.md @@ -1,5 +1,5 @@ --- -order: 21 +order: 22 title: en-US: Dynamic Settings zh-CN: 动态控制表格属性 diff --git a/components/table/demo/expand-children.md b/components/table/demo/expand-children.md index ac8380944d..206b9fb68c 100644 --- a/components/table/demo/expand-children.md +++ b/components/table/demo/expand-children.md @@ -1,5 +1,5 @@ --- -order: 15 +order: 16 title: en-US: Tree data zh-CN: 树形数据展示 diff --git a/components/table/demo/expand.md b/components/table/demo/expand.md index abdd9a834f..020d3dbf6b 100644 --- a/components/table/demo/expand.md +++ b/components/table/demo/expand.md @@ -1,5 +1,5 @@ --- -order: 12 +order: 13 title: en-US: Expandable Row zh-CN: 可展开 diff --git a/components/table/demo/fixed-columns-header.md b/components/table/demo/fixed-columns-header.md index 3c7766e66c..3d99ef7244 100644 --- a/components/table/demo/fixed-columns-header.md +++ b/components/table/demo/fixed-columns-header.md @@ -1,5 +1,5 @@ --- -order: 18 +order: 19 title: en-US: Fixed Columns and Header zh-CN: 固定头和列 diff --git a/components/table/demo/fixed-columns.md b/components/table/demo/fixed-columns.md index eee2fe8fa9..1f8b3ed854 100644 --- a/components/table/demo/fixed-columns.md +++ b/components/table/demo/fixed-columns.md @@ -1,5 +1,5 @@ --- -order: 17 +order: 18 title: en-US: Fixed Columns zh-CN: 固定列 diff --git a/components/table/demo/fixed-header.md b/components/table/demo/fixed-header.md index 61179f7202..5b02f7c617 100644 --- a/components/table/demo/fixed-header.md +++ b/components/table/demo/fixed-header.md @@ -1,5 +1,5 @@ --- -order: 16 +order: 17 title: en-US: Fixed Header zh-CN: 固定表头 diff --git a/components/table/demo/grouping-columns.md b/components/table/demo/grouping-columns.md index d93c405c86..27849c94ca 100644 --- a/components/table/demo/grouping-columns.md +++ b/components/table/demo/grouping-columns.md @@ -1,5 +1,5 @@ --- -order: 20 +order: 21 title: en-US: Grouping table head zh-CN: 表头分组 diff --git a/components/table/demo/head.md b/components/table/demo/head.md index 4425f77f12..00d76afb02 100644 --- a/components/table/demo/head.md +++ b/components/table/demo/head.md @@ -1,5 +1,5 @@ --- -order: 6 +order: 7 title: en-US: Filter and sorter zh-CN: 筛选和排序 diff --git a/components/table/demo/jsx.md b/components/table/demo/jsx.md new file mode 100644 index 0000000000..aa433c4e23 --- /dev/null +++ b/components/table/demo/jsx.md @@ -0,0 +1,82 @@ +--- +order: 1 +title: + en-US: JSX style API + zh-CN: JSX 风格的 API +--- + +## zh-CN + +使用 JSX 风格的 API（2.5.0 以后引入） + +## en-US + +Using JSX style API (introduced in 2.5.0) + +````jsx +import { Table, Icon } from 'antd'; + +const { Column, ColumnGroup } = Table; + +const data = [{ + key: '1', + firstName: 'John', + lastName: 'Brown', + age: 32, + address: 'New York No. 1 Lake Park', +}, { + key: '2', + firstName: 'Jim', + lastName: 'Green', + age: 42, + address: 'London No. 1 Lake Park', +}, { + key: '3', + firstName: 'Joe', + lastName: 'Black', + age: 32, + address: 'Sidney No. 1 Lake Park', +}]; + +ReactDOM.render( +
    + + + + + + + ( + + Action 一 {record.name} + + Delete + + + More actions + + + )} + /> +
    +, mountNode); +```` diff --git a/components/table/demo/nopagination.md b/components/table/demo/nopagination.md index 23e54f7e25..1cc88d8ea8 100644 --- a/components/table/demo/nopagination.md +++ b/components/table/demo/nopagination.md @@ -1,5 +1,5 @@ --- -order: 8 +order: 9 title: en-US: No pagination zh-CN: 不显示分页 diff --git a/components/table/demo/paging.md b/components/table/demo/paging.md index 37847a9d2b..0ff6ef4f3f 100644 --- a/components/table/demo/paging.md +++ b/components/table/demo/paging.md @@ -1,5 +1,5 @@ --- -order: 5 +order: 6 title: en-US: pagination zh-CN: 分页 diff --git a/components/table/demo/reset-filter.md b/components/table/demo/reset-filter.md index f9494e7c9f..04e11ce1dd 100644 --- a/components/table/demo/reset-filter.md +++ b/components/table/demo/reset-filter.md @@ -1,5 +1,5 @@ --- -order: 6 +order: 7 title: en-US: Reset filters and sorters zh-CN: 可控的筛选和排序 diff --git a/components/table/demo/row-selection-and-operation.md b/components/table/demo/row-selection-and-operation.md index 1d821e8326..9bb40d93c1 100644 --- a/components/table/demo/row-selection-and-operation.md +++ b/components/table/demo/row-selection-and-operation.md @@ -1,5 +1,5 @@ --- -order: 2 +order: 3 title: en-US: Selection and operation zh-CN: 选择和操作 diff --git a/components/table/demo/row-selection-props.md b/components/table/demo/row-selection-props.md index 613539e8d4..7b4e50ccd8 100644 --- a/components/table/demo/row-selection-props.md +++ b/components/table/demo/row-selection-props.md @@ -1,5 +1,5 @@ --- -order: 3 +order: 4 title: en-US: Checkbox props zh-CN: 选择框属性 diff --git a/components/table/demo/row-selection.md b/components/table/demo/row-selection.md index 7639677055..cd3b2f76c0 100644 --- a/components/table/demo/row-selection.md +++ b/components/table/demo/row-selection.md @@ -1,5 +1,5 @@ --- -order: 1 +order: 2 title: en-US: selection zh-CN: 可选择 diff --git a/components/table/demo/size.md b/components/table/demo/size.md index ec3bb8a586..44bd495347 100644 --- a/components/table/demo/size.md +++ b/components/table/demo/size.md @@ -1,5 +1,5 @@ --- -order: 9 +order: 10 title: en-US: size zh-CN: 紧凑型 diff --git a/components/table/index.en-US.md b/components/table/index.en-US.md index ccb0918ed9..d13e03cfb6 100644 --- a/components/table/index.en-US.md +++ b/components/table/index.en-US.md @@ -78,7 +78,7 @@ const columns = [{ ### Column -One of Property `columns` for describing column. +One of Property `columns` for descriping column, Column has the same API. | Property | Description | Type | Default | |---------------|--------------------------|-----------------|--------------| @@ -100,6 +100,12 @@ One of Property `columns` for describing column. | fixed | set column to be fixed: `true`(same as left) `'left'` `'right'` | Boolean or String | false | | sortOrder | controlled sorted value: `'ascend'` `'descend'` `false` | Boolean or String | - | +### ColumnGroup + +| Property | Description | Type | Default | +|---------------|--------------------------|-----------------|--------------| +| title | title of the column group | String or React.Element | - | + ### rowSelection Properties for selection. diff --git a/components/table/index.zh-CN.md b/components/table/index.zh-CN.md index 650f2f378e..91fd107f9d 100644 --- a/components/table/index.zh-CN.md +++ b/components/table/index.zh-CN.md @@ -79,7 +79,7 @@ const columns = [{ ### Column -列描述数据对象，是 columns 中的一项。 +列描述数据对象，是 columns 中的一项，Column 使用相同的 API。 | 参数 | 说明 | 类型 | 默认值 | |-----------|----------------------------|-----------------|---------| @@ -101,6 +101,12 @@ const columns = [{ | fixed | 列是否固定，可选 `true`(等效于 left) `'left'` `'right'` | Boolean or String | false | | sortOrder | 排序的受控属性，外界可用此控制列的排序，可设置为 `'ascend'` `'descend'` `false` | Boolean or String | - | +### ColumnGroup + +| 参数 | 说明 | 类型 | 默认值 | +|-----------|----------------------------|-----------------|---------| +| title | 列头显示文字 | String or React.Element | - | + ### rowSelection 选择功能的配置。 diff --git a/components/table/util.tsx b/components/table/util.tsx index 6c7b56e9e4..ebd1abdb1a 100644 --- a/components/table/util.tsx +++ b/components/table/util.tsx @@ -1,4 +1,8 @@ +import React from 'react'; import assign from 'object-assign'; +import Column from './Column'; +import ColumnGroup from './ColumnGroup'; + export function flatArray(data: Object[] = [], childrenName = 'children') { const result: Object[] = []; const loop = (array) => { @@ -24,3 +28,25 @@ export function treeMap(tree: Object[], mapper: Function, childrenName = 'childr return assign({}, mapper(node, index), extra); }); } + +export function normalizeColumns(elements) { + const columns: any[] = []; + React.Children.forEach(elements, (element: React.ReactElement) => { + if (!isColumnElement(element)) { + return; + } + const column = assign({}, element.props); + if (element.key) { + column.key = element.key; + } + if (element.type as any === ColumnGroup) { + column.children = normalizeColumns(column.children); + } + columns.push(column); + }); + return columns; +} + +function isColumnElement(element) { + return element && (element.type === Column || element.type === ColumnGroup); +} diff --git a/package.json b/package.json index b1aac70ca2..4313b0235a 100644 --- a/package.json +++ b/package.json @@ -62,7 +62,7 @@ "rc-slider": "~5.3.0", "rc-steps": "~2.2.0", "rc-switch": "~1.4.2", - "rc-table": "~5.0.0", + "rc-table": "~5.2.0", "rc-tabs": "~7.0.5", "rc-time-picker": "~2.2.1", "rc-tooltip": "~3.4.2", diff --git a/tests/table/Table.test.js b/tests/table/Table.test.js index 9748d31af8..ff2efb16af 100644 --- a/tests/table/Table.test.js +++ b/tests/table/Table.test.js @@ -2,6 +2,10 @@ import React from 'react'; import createStore from '../../components/table/createStore'; import Table from '../../components/table'; import TestUtils from 'react-addons-test-utils'; +import { render } from 'enzyme'; +import { renderToJson } from 'enzyme-to-json'; + +const { Column, ColumnGroup } = Table; describe('Table', () => { describe('row selection', () => { @@ -88,4 +92,44 @@ describe('Table', () => { expect(checkboxes[2].disabled).toBe(true); }); }); + + describe('JSX style API', () => { + it('renders correctly', () => { + const data = [{ + key: '1', + firstName: 'John', + lastName: 'Brown', + age: 32, + }, { + key: '2', + firstName: 'Jim', + lastName: 'Green', + age: 42, + }]; + + const wrapper = render( + + + + + + +
    + ); + + expect(renderToJson(wrapper)).toMatchSnapshot(); + }); + }); }) diff --git a/tests/table/__snapshots__/Table.test.js.snap b/tests/table/__snapshots__/Table.test.js.snap new file mode 100644 index 0000000000..75e3471c0b --- /dev/null +++ b/tests/table/__snapshots__/Table.test.js.snap @@ -0,0 +1,105 @@ +exports[`Table JSX style API renders correctly 1`] = ` +
    +
    +
    +
    +
    +
    + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + + Name + + + + Age + +
    + + First Name + + + + Last Name + +
    + + John + + Brown + + 32 +
    + + Jim + + Green + + 42 +
    +
    +     +
    +
    +
    +
    +
    +
    +`; From 7748471fa07376a4cc3e8b0a9147ba503ba7b17f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=81=8F=E5=8F=B3?= Date: Tue, 22 Nov 2016 10:12:14 +0800 Subject: [PATCH 0802/2145] feat: Add range into showTotal (#2240#issuecomment-234766623) (#3863) --- components/pagination/demo/total.md | 14 +++++++++++--- components/pagination/index.en-US.md | 2 +- components/pagination/index.zh-CN.md | 2 +- package.json | 2 +- 4 files changed, 14 insertions(+), 6 deletions(-) diff --git a/components/pagination/demo/total.md b/components/pagination/demo/total.md index 36b3b6c5eb..3cce6e3dd4 100644 --- a/components/pagination/demo/total.md +++ b/components/pagination/demo/total.md @@ -14,15 +14,23 @@ title: You can show the total number of data by setting `showTotal`. ````jsx -import { Pagination, Select } from 'antd'; +import { Pagination } from 'antd'; ReactDOM.render( +
    `Total ${total} items`} pageSize={20} defaultCurrent={1} /> +
    + `${range[0]}-${range[1]} of ${total} items`} + pageSize={20} + defaultCurrent={1} + /> +
    , mountNode); ```` diff --git a/components/pagination/index.en-US.md b/components/pagination/index.en-US.md index 70ca385f3f..ec722373a0 100644 --- a/components/pagination/index.en-US.md +++ b/components/pagination/index.en-US.md @@ -31,4 +31,4 @@ onShowSizeChange | a callback function, can be executed when `pageSize` is chang showQuickJumper | determine whether you can jump to a page directly | Boolean | false size | specify the size of `Pagination`, can be set to `small` | String | "" simple | whether to use simple mode | Object | - -showTotal | to custom the total number display | Function | - +showTotal | to display the total number and range | Function(total, range) | - diff --git a/components/pagination/index.zh-CN.md b/components/pagination/index.zh-CN.md index 394adfab4e..e4ee547130 100644 --- a/components/pagination/index.zh-CN.md +++ b/components/pagination/index.zh-CN.md @@ -32,4 +32,4 @@ title: Pagination | showQuickJumper | 是否可以快速跳转至某页 | Boolean | false | | size | 当为「small」时，是小尺寸分页 | String | "" | | simple | 当添加该属性时，显示为简单分页 | Object | - | -| showTotal | 用于显示总共有多少条数据 | Function | - | +| showTotal | 用于显示数据总量和当前数据顺序 | Function(total, range) | - | diff --git a/package.json b/package.json index 4313b0235a..75d2acf99b 100644 --- a/package.json +++ b/package.json @@ -54,7 +54,7 @@ "rc-input-number": "~2.7.0", "rc-menu": "~5.0.1", "rc-notification": "~1.3.4", - "rc-pagination": "~1.5.3", + "rc-pagination": "~1.6.0", "rc-progress": "~2.0.1", "rc-radio": "~2.0.0", "rc-rate": "~1.1.2", From 4b1722e95d2e2418b92492a22a74c8328ff7da91 Mon Sep 17 00:00:00 2001 From: Wei Zhu Date: Tue, 22 Nov 2016 13:42:45 +0800 Subject: [PATCH 0803/2145] fix: wrong select all checkbox displaying when pagination changes (#3904) --- components/table/SelectionCheckboxAll.tsx | 36 +++++++++++------- tests/table/Table.test.js | 45 ++++++++++++++++++++++- 2 files changed, 66 insertions(+), 15 deletions(-) diff --git a/components/table/SelectionCheckboxAll.tsx b/components/table/SelectionCheckboxAll.tsx index ad7d78ae88..318f75812a 100644 --- a/components/table/SelectionCheckboxAll.tsx +++ b/components/table/SelectionCheckboxAll.tsx @@ -18,8 +18,8 @@ export default class SelectionCheckboxAll extends React.Component { - const checked = this.getCheckState(); - const indeterminate = this.getIndeterminateState(); - if (checked !== this.state.checked) { - this.setState({ checked }); - } - if (indeterminate !== this.state.indeterminate) { - this.setState({ indeterminate }); - } + this.setCheckState(this.props); }); } @@ -61,8 +58,19 @@ export default class SelectionCheckboxAll extends React.Component { expect(checkboxes[1].disabled).toBe(false); expect(checkboxes[2].disabled).toBe(true); }); + + it('works with pagination', () => { + const columns = [{ + title: 'Name', + dataIndex: 'name', + }]; + + const data = [{ + id: 0, + name: 'Jack', + }, { + id: 1, + name: 'Lucy', + }, { + id: 3, + name: 'Tom', + }, { + id: 4, + name: 'Jerry', + }]; + + const wrapper = mount( + + ); + + const checkboxAll = wrapper.find('SelectionCheckboxAll'); + const pagers = wrapper.find('Pager'); + + checkboxAll.find('input').simulate('change', { target: { checked: true } }); + expect(checkboxAll.node.state).toEqual({ checked: true, indeterminate: false }); + + pagers.at(1).simulate('click'); + expect(checkboxAll.node.state).toEqual({ checked: false, indeterminate: false }); + + pagers.at(0).simulate('click'); + expect(checkboxAll.node.state).toEqual({ checked: true, indeterminate: false }); + }); }); describe('JSX style API', () => { From d20572bdabb89c8f24b08914fd26070b51a1811b Mon Sep 17 00:00:00 2001 From: Wei Zhu Date: Tue, 22 Nov 2016 13:43:53 +0800 Subject: [PATCH 0804/2145] test: demo snapshot testing (#3916) * Run snapshot testing against all demos * Split demo tests * ignore coverage folder * Upgrade antd-demo-jest * enable cache * intergate with coveralls.io * Add node test * Set worker to 2 https://github.com/facebook/jest/issues/1742 * config coverage * Set default supportServerRender to true --- .babelrc | 5 ++- .gitignore | 1 + .jest.node.json | 15 ++++++++ .travis.yml | 3 ++ components/table/demo/grouping-columns.md | 2 +- components/transfer/demo/basic.md | 4 +-- components/upload/index.tsx | 1 + package.json | 35 +++++++++++++------ tests/affix/demo.test.js | 3 ++ tests/alert/demo.test.js | 3 ++ tests/anchor/demo.test.js | 3 ++ tests/auto-complete/demo.test.js | 3 ++ tests/back-top/demo.test.js | 3 ++ tests/badge/demo.test.js | 3 ++ tests/breadcrumb/demo.test.js | 3 ++ .../__snapshots__/index.test.js.snap} | 0 tests/button/demo.test.js | 3 ++ .../{button.test.js => button/index.test.js} | 2 +- tests/calendar/demo.test.js | 3 ++ tests/card/demo.test.js | 3 ++ tests/carousel/demo.test.js | 12 +++++++ tests/checkbox/demo.test.js | 3 ++ tests/collapse/demo.test.js | 3 ++ tests/date-picker/demo.test.js | 3 ++ tests/dropdown/demo.test.js | 3 ++ tests/form/demo.test.js | 3 ++ tests/grid/demo.test.js | 3 ++ tests/{icon.test.js => icon/index.test.js} | 2 +- tests/input-number/demo.test.js | 3 ++ tests/input/demo.test.js | 3 ++ .../{layout.test.js => layout/index.test.js} | 2 +- tests/locale-provider/demo.test.js | 3 ++ tests/mention/demo.test.js | 3 ++ tests/menu/demo.test.js | 3 ++ tests/message/demo.test.js | 3 ++ tests/modal/demo.test.js | 3 ++ tests/notification/demo.test.js | 3 ++ tests/pagination/demo.test.js | 3 ++ tests/popconfirm/demo.test.js | 3 ++ tests/popover/demo.test.js | 3 ++ .../index.test.js} | 2 +- tests/progress/demo.test.js | 3 ++ tests/radio/demo.test.js | 3 ++ tests/rate/demo.test.js | 3 ++ tests/select/demo.test.js | 3 ++ tests/shared/demoTest.js | 16 +++++++++ tests/slider/demo.test.js | 3 ++ tests/spin/demo.test.js | 3 ++ tests/steps/demo.test.js | 3 ++ tests/switch/demo.test.js | 3 ++ tests/table/demo.test.js | 3 ++ tests/tabs/demo.test.js | 3 ++ tests/tag/demo.test.js | 3 ++ tests/time-picker/demo.test.js | 3 ++ tests/timeline/demo.test.js | 3 ++ tests/tooltip/demo.test.js | 3 ++ tests/transfer/demo.test.js | 3 ++ tests/tree-select/demo.test.js | 3 ++ tests/tree/demo.test.js | 3 ++ tests/upload/demo.test.js | 3 ++ 60 files changed, 219 insertions(+), 18 deletions(-) create mode 100644 .jest.node.json create mode 100644 tests/affix/demo.test.js create mode 100644 tests/alert/demo.test.js create mode 100644 tests/anchor/demo.test.js create mode 100644 tests/auto-complete/demo.test.js create mode 100644 tests/back-top/demo.test.js create mode 100644 tests/badge/demo.test.js create mode 100644 tests/breadcrumb/demo.test.js rename tests/{__snapshots__/button.test.js.snap => button/__snapshots__/index.test.js.snap} (100%) create mode 100644 tests/button/demo.test.js rename tests/{button.test.js => button/index.test.js} (90%) create mode 100644 tests/calendar/demo.test.js create mode 100644 tests/card/demo.test.js create mode 100644 tests/carousel/demo.test.js create mode 100644 tests/checkbox/demo.test.js create mode 100644 tests/collapse/demo.test.js create mode 100644 tests/date-picker/demo.test.js create mode 100644 tests/dropdown/demo.test.js create mode 100644 tests/form/demo.test.js create mode 100644 tests/grid/demo.test.js rename tests/{icon.test.js => icon/index.test.js} (93%) create mode 100644 tests/input-number/demo.test.js create mode 100644 tests/input/demo.test.js rename tests/{layout.test.js => layout/index.test.js} (90%) create mode 100644 tests/locale-provider/demo.test.js create mode 100644 tests/mention/demo.test.js create mode 100644 tests/menu/demo.test.js create mode 100644 tests/message/demo.test.js create mode 100644 tests/modal/demo.test.js create mode 100644 tests/notification/demo.test.js create mode 100644 tests/pagination/demo.test.js create mode 100644 tests/popconfirm/demo.test.js create mode 100644 tests/popover/demo.test.js rename tests/{popover.test.js => popover/index.test.js} (94%) create mode 100644 tests/progress/demo.test.js create mode 100644 tests/radio/demo.test.js create mode 100644 tests/rate/demo.test.js create mode 100644 tests/select/demo.test.js create mode 100644 tests/shared/demoTest.js create mode 100644 tests/slider/demo.test.js create mode 100644 tests/spin/demo.test.js create mode 100644 tests/steps/demo.test.js create mode 100644 tests/switch/demo.test.js create mode 100644 tests/table/demo.test.js create mode 100644 tests/tabs/demo.test.js create mode 100644 tests/tag/demo.test.js create mode 100644 tests/time-picker/demo.test.js create mode 100644 tests/timeline/demo.test.js create mode 100644 tests/tooltip/demo.test.js create mode 100644 tests/transfer/demo.test.js create mode 100644 tests/tree-select/demo.test.js create mode 100644 tests/tree/demo.test.js create mode 100644 tests/upload/demo.test.js diff --git a/.babelrc b/.babelrc index 4687bc4f44..36a371c9f7 100644 --- a/.babelrc +++ b/.babelrc @@ -1,3 +1,6 @@ { - "presets": ["es2015", "react", "stage-0"] + "presets": ["es2015", "react", "stage-0"], + "plugins": [ + "add-module-exports" + ] } diff --git a/.gitignore b/.gitignore index 940aeae84e..fcc3d98669 100644 --- a/.gitignore +++ b/.gitignore @@ -30,3 +30,4 @@ config/base.yaml components/**/*.js components/**/*.jsx /.vscode/ +/coverage diff --git a/.jest.node.json b/.jest.node.json new file mode 100644 index 0000000000..b82fdee94c --- /dev/null +++ b/.jest.node.json @@ -0,0 +1,15 @@ +{ + "moduleFileExtensions": [ + "ts", + "tsx", + "js", + "md" + ], + "transform": { + "\\.tsx?$": "node_modules/typescript-babel-jest", + "tests/.*\\.js$": "node_modules/babel-jest", + "\\.md$": "node_modules/antd-demo-jest" + }, + "testRegex": "/tests/node/.*\\.test\\.js$", + "testEnvironment": "node" +} diff --git a/.travis.yml b/.travis.yml index f9b1f3ad6f..293cbbca2e 100644 --- a/.travis.yml +++ b/.travis.yml @@ -4,3 +4,6 @@ language: node_js node_js: - "6" + +after_script: + - cat ./coverage/lcov.info | node_modules/coveralls/bin/coveralls.js diff --git a/components/table/demo/grouping-columns.md b/components/table/demo/grouping-columns.md index 27849c94ca..e0e033f6bf 100644 --- a/components/table/demo/grouping-columns.md +++ b/components/table/demo/grouping-columns.md @@ -86,7 +86,7 @@ for (let i = 0; i < 100; i++) { data.push({ key: i, name: 'John Brown', - age: Math.ceil(Math.random() * 100), + age: i + 1, street: 'Lake Park', building: 'C', number: 2035, diff --git a/components/transfer/demo/basic.md b/components/transfer/demo/basic.md index 6eb9d1824a..ff4ae5facc 100644 --- a/components/transfer/demo/basic.md +++ b/components/transfer/demo/basic.md @@ -22,12 +22,12 @@ for (let i = 0; i < 20; i++) { key: i.toString(), title: `content${i + 1}`, description: `description of content${i + 1}`, - disabled: Math.random() * 3 < 1, + disabled: i % 3 < 1, }); } const targetKeys = mockData - .filter(() => Math.random() * 2 > 1) + .filter(item => +item.key % 3 > 1) .map(item => item.key); const App = React.createClass({ diff --git a/components/upload/index.tsx b/components/upload/index.tsx index 633a412dca..b8ee7901ac 100644 --- a/components/upload/index.tsx +++ b/components/upload/index.tsx @@ -71,6 +71,7 @@ export default class Upload extends React.Component { listType: 'text', // or pictrue className: '', disabled: false, + supportServerRender: true, }; recentUploadStatus: boolean | PromiseLike; diff --git a/package.json b/package.json index 75d2acf99b..6f53a12e45 100644 --- a/package.json +++ b/package.json @@ -78,20 +78,22 @@ "devDependencies": { "@types/react": "~0.14.41", "@types/react-dom": "~0.14.18", + "antd-demo-jest": "^1.0.5", "antd-tools": "0.14.2", "babel-cli": "^6.18.0", - "babel-preset-es2015": "^6.18.0", - "babel-preset-react": "^6.16.0", - "babel-preset-stage-0": "^6.16.0", "babel-eslint": "^7.1.0", "babel-jest": "^17.0.0", "babel-plugin-import": "^1.0.0", "babel-plugin-transform-runtime": "~6.15.0", + "babel-preset-es2015": "^6.18.0", + "babel-preset-react": "^6.16.0", + "babel-preset-stage-0": "^6.16.0", "bisheng": "^0.17.0", "bisheng-plugin-antd": "~0.6.0", "bisheng-plugin-description": "^0.1.1", "bisheng-plugin-react": "^0.3.0", "bisheng-plugin-toc": "^0.3.0", + "coveralls": "^2.11.15", "css-split-webpack-plugin": "^0.2.1", "dekko": "^0.2.0", "dora-plugin-upload": "^0.3.1", @@ -107,6 +109,7 @@ "eslint-plugin-markdown": "*", "eslint-plugin-react": "^6.1.2", "eslint-tinker": "^0.4.0", + "glob": "^7.1.1", "history": "^4.4.0", "jest": "^17.0.1", "jest-cli": "^17.0.0", @@ -133,7 +136,8 @@ "react-sublime-video": "^0.2.0", "reqwest": "^2.0.5", "typescript-babel-jest": "^0.1.5", - "values.js": "^1.0.3" + "values.js": "^1.0.3", + "xhr2": "^0.1.3" }, "babel": { "presets": [ @@ -143,7 +147,7 @@ ] }, "scripts": { - "test": "npm run lint && npm run dist && npm run jest && npm run site", + "test": "npm run lint && npm run dist && npm run jest -- --coverage -w 2 && npm run jest:node -- -w 2 && npm run site", "lint": "npm run tslint && npm run eslint && npm run demolint && npm run lesshint", "tslint": "antd-tools run ts-lint && npm run compile && rm -rf lib", "eslint": "eslint test site scripts ./.eslintrc.js ./webpack.config.js --ext '.js,.jsx,.tsx' --ignore-pattern '!.eslintrc.js'", @@ -151,7 +155,8 @@ "lesshint": "lesshint components -r scripts/lesshint-report.js", "eslint-fix": "eslint --fix test site scripts ./.eslintrc.js ./webpack.config.js --ext '.js,.jsx,.tsx' --ignore-pattern '!.eslintrc.js' && eslint-tinker ./components/*/demo/*.md", - "jest": "jest --no-cache", + "jest": "jest", + "jest:node": "jest --config .jest.node.json", "clean": "antd-tools run clean", "dist": "antd-tools run dist && node ./tests/dekko/dist.test.js", @@ -174,19 +179,29 @@ "tsx", "js", "jsx", - "json" + "json", + "md" ], "modulePathIgnorePatterns": [ "/_site/" ], "testPathIgnorePatterns": [ "dekko", - "/node_modules/" + "/node_modules/", + "node" ], "transform": { - ".*": "node_modules/typescript-babel-jest" + "\\.tsx?$": "node_modules/typescript-babel-jest", + "tests/.*\\.js$": "node_modules/babel-jest", + "\\.md$": "node_modules/antd-demo-jest" }, - "testRegex": "(/tests/.*|\\.(test|spec))\\.(js)$" + "testRegex": "/tests/.*\\.test\\.js$", + "coveragePathIgnorePatterns": [ + "/node_modules/", + "components/.*/demo", + "/dist/", + "/tests/" + ] }, "pre-commit": [ "lint" diff --git a/tests/affix/demo.test.js b/tests/affix/demo.test.js new file mode 100644 index 0000000000..581b91466f --- /dev/null +++ b/tests/affix/demo.test.js @@ -0,0 +1,3 @@ +import demoTest from '../shared/demoTest'; + +demoTest('affix'); diff --git a/tests/alert/demo.test.js b/tests/alert/demo.test.js new file mode 100644 index 0000000000..60ec055e1e --- /dev/null +++ b/tests/alert/demo.test.js @@ -0,0 +1,3 @@ +import demoTest from '../shared/demoTest'; + +demoTest('alert'); diff --git a/tests/anchor/demo.test.js b/tests/anchor/demo.test.js new file mode 100644 index 0000000000..eacddd3d06 --- /dev/null +++ b/tests/anchor/demo.test.js @@ -0,0 +1,3 @@ +import demoTest from '../shared/demoTest'; + +demoTest('anchor'); diff --git a/tests/auto-complete/demo.test.js b/tests/auto-complete/demo.test.js new file mode 100644 index 0000000000..14c4743fd8 --- /dev/null +++ b/tests/auto-complete/demo.test.js @@ -0,0 +1,3 @@ +import demoTest from '../shared/demoTest'; + +demoTest('auto-complete'); diff --git a/tests/back-top/demo.test.js b/tests/back-top/demo.test.js new file mode 100644 index 0000000000..4415e98eeb --- /dev/null +++ b/tests/back-top/demo.test.js @@ -0,0 +1,3 @@ +import demoTest from '../shared/demoTest'; + +demoTest('back-top'); diff --git a/tests/badge/demo.test.js b/tests/badge/demo.test.js new file mode 100644 index 0000000000..6c55fba0b5 --- /dev/null +++ b/tests/badge/demo.test.js @@ -0,0 +1,3 @@ +import demoTest from '../shared/demoTest'; + +demoTest('badge'); diff --git a/tests/breadcrumb/demo.test.js b/tests/breadcrumb/demo.test.js new file mode 100644 index 0000000000..27e49e4df2 --- /dev/null +++ b/tests/breadcrumb/demo.test.js @@ -0,0 +1,3 @@ +import demoTest from '../shared/demoTest'; + +demoTest('breadcrumb'); diff --git a/tests/__snapshots__/button.test.js.snap b/tests/button/__snapshots__/index.test.js.snap similarity index 100% rename from tests/__snapshots__/button.test.js.snap rename to tests/button/__snapshots__/index.test.js.snap diff --git a/tests/button/demo.test.js b/tests/button/demo.test.js new file mode 100644 index 0000000000..d68c668d7b --- /dev/null +++ b/tests/button/demo.test.js @@ -0,0 +1,3 @@ +import demoTest from '../shared/demoTest'; + +demoTest('button'); diff --git a/tests/button.test.js b/tests/button/index.test.js similarity index 90% rename from tests/button.test.js rename to tests/button/index.test.js index 6ad29d39a5..6acf2e4af6 100644 --- a/tests/button.test.js +++ b/tests/button/index.test.js @@ -1,7 +1,7 @@ import React from 'react'; import { render } from 'enzyme'; import { renderToJson } from 'enzyme-to-json'; -import Button from '../components/button/button'; +import Button from '../../components/button'; describe('Button', function() { it('renders correctly', () => { diff --git a/tests/calendar/demo.test.js b/tests/calendar/demo.test.js new file mode 100644 index 0000000000..e78ba2a2c2 --- /dev/null +++ b/tests/calendar/demo.test.js @@ -0,0 +1,3 @@ +import demoTest from '../shared/demoTest'; + +demoTest('calendar'); diff --git a/tests/card/demo.test.js b/tests/card/demo.test.js new file mode 100644 index 0000000000..1dcff50924 --- /dev/null +++ b/tests/card/demo.test.js @@ -0,0 +1,3 @@ +import demoTest from '../shared/demoTest'; + +demoTest('card'); diff --git a/tests/carousel/demo.test.js b/tests/carousel/demo.test.js new file mode 100644 index 0000000000..48ab0969fb --- /dev/null +++ b/tests/carousel/demo.test.js @@ -0,0 +1,12 @@ +import demoTest from '../shared/demoTest'; + +// https://github.com/WickyNilliams/enquire.js/issues/82 +window.matchMedia = window.matchMedia || function() { + return { + matches : false, + addListener : function() {}, + removeListener: function() {} + }; +}; + +demoTest('carousel'); diff --git a/tests/checkbox/demo.test.js b/tests/checkbox/demo.test.js new file mode 100644 index 0000000000..e08e5f8c65 --- /dev/null +++ b/tests/checkbox/demo.test.js @@ -0,0 +1,3 @@ +import demoTest from '../shared/demoTest'; + +demoTest('checkbox'); diff --git a/tests/collapse/demo.test.js b/tests/collapse/demo.test.js new file mode 100644 index 0000000000..36b509eaa2 --- /dev/null +++ b/tests/collapse/demo.test.js @@ -0,0 +1,3 @@ +import demoTest from '../shared/demoTest'; + +demoTest('collapse'); diff --git a/tests/date-picker/demo.test.js b/tests/date-picker/demo.test.js new file mode 100644 index 0000000000..02f56fb651 --- /dev/null +++ b/tests/date-picker/demo.test.js @@ -0,0 +1,3 @@ +import demoTest from '../shared/demoTest'; + +demoTest('date-picker'); diff --git a/tests/dropdown/demo.test.js b/tests/dropdown/demo.test.js new file mode 100644 index 0000000000..20ccb8c698 --- /dev/null +++ b/tests/dropdown/demo.test.js @@ -0,0 +1,3 @@ +import demoTest from '../shared/demoTest'; + +demoTest('dropdown'); diff --git a/tests/form/demo.test.js b/tests/form/demo.test.js new file mode 100644 index 0000000000..5602c6ec53 --- /dev/null +++ b/tests/form/demo.test.js @@ -0,0 +1,3 @@ +import demoTest from '../shared/demoTest'; + +demoTest('form'); diff --git a/tests/grid/demo.test.js b/tests/grid/demo.test.js new file mode 100644 index 0000000000..1ec1b50a00 --- /dev/null +++ b/tests/grid/demo.test.js @@ -0,0 +1,3 @@ +import demoTest from '../shared/demoTest'; + +demoTest('grid'); diff --git a/tests/icon.test.js b/tests/icon/index.test.js similarity index 93% rename from tests/icon.test.js rename to tests/icon/index.test.js index 146e7a1f74..435f02b1c8 100644 --- a/tests/icon.test.js +++ b/tests/icon/index.test.js @@ -1,7 +1,7 @@ import React from 'react'; import TestUtils from 'react-addons-test-utils'; import { wrap } from 'react-stateless-wrapper'; -import AntIcon from '../components/icon/index'; +import AntIcon from '../../components/icon/index'; const Icon = wrap(AntIcon); describe('Icon', function() { diff --git a/tests/input-number/demo.test.js b/tests/input-number/demo.test.js new file mode 100644 index 0000000000..5988e3c819 --- /dev/null +++ b/tests/input-number/demo.test.js @@ -0,0 +1,3 @@ +import demoTest from '../shared/demoTest'; + +demoTest('input-number'); diff --git a/tests/input/demo.test.js b/tests/input/demo.test.js new file mode 100644 index 0000000000..889e45b68c --- /dev/null +++ b/tests/input/demo.test.js @@ -0,0 +1,3 @@ +import demoTest from '../shared/demoTest'; + +demoTest('input'); diff --git a/tests/layout.test.js b/tests/layout/index.test.js similarity index 90% rename from tests/layout.test.js rename to tests/layout/index.test.js index 515f182332..c838e4366c 100644 --- a/tests/layout.test.js +++ b/tests/layout/index.test.js @@ -1,6 +1,6 @@ import React from 'react'; import TestUtils from 'react-addons-test-utils'; -let { Col, Row } = require('../components/grid/index'); +let { Col, Row } = require('../../components/grid/index'); describe('Grid', function() { it('should render Col', () => { diff --git a/tests/locale-provider/demo.test.js b/tests/locale-provider/demo.test.js new file mode 100644 index 0000000000..ad1c96858f --- /dev/null +++ b/tests/locale-provider/demo.test.js @@ -0,0 +1,3 @@ +import demoTest from '../shared/demoTest'; + +demoTest('locale-provider'); diff --git a/tests/mention/demo.test.js b/tests/mention/demo.test.js new file mode 100644 index 0000000000..5d6c37652b --- /dev/null +++ b/tests/mention/demo.test.js @@ -0,0 +1,3 @@ +import demoTest from '../shared/demoTest'; + +demoTest('mention', { skip: true }); diff --git a/tests/menu/demo.test.js b/tests/menu/demo.test.js new file mode 100644 index 0000000000..b26914c1fe --- /dev/null +++ b/tests/menu/demo.test.js @@ -0,0 +1,3 @@ +import demoTest from '../shared/demoTest'; + +demoTest('menu', { skip: true }); diff --git a/tests/message/demo.test.js b/tests/message/demo.test.js new file mode 100644 index 0000000000..f306fc93d5 --- /dev/null +++ b/tests/message/demo.test.js @@ -0,0 +1,3 @@ +import demoTest from '../shared/demoTest'; + +demoTest('message'); diff --git a/tests/modal/demo.test.js b/tests/modal/demo.test.js new file mode 100644 index 0000000000..aaa1f5469e --- /dev/null +++ b/tests/modal/demo.test.js @@ -0,0 +1,3 @@ +import demoTest from '../shared/demoTest'; + +demoTest('modal'); diff --git a/tests/notification/demo.test.js b/tests/notification/demo.test.js new file mode 100644 index 0000000000..e43068d343 --- /dev/null +++ b/tests/notification/demo.test.js @@ -0,0 +1,3 @@ +import demoTest from '../shared/demoTest'; + +demoTest('notification'); diff --git a/tests/pagination/demo.test.js b/tests/pagination/demo.test.js new file mode 100644 index 0000000000..c84a2ae6fd --- /dev/null +++ b/tests/pagination/demo.test.js @@ -0,0 +1,3 @@ +import demoTest from '../shared/demoTest'; + +demoTest('pagination'); diff --git a/tests/popconfirm/demo.test.js b/tests/popconfirm/demo.test.js new file mode 100644 index 0000000000..c9a8aea0f5 --- /dev/null +++ b/tests/popconfirm/demo.test.js @@ -0,0 +1,3 @@ +import demoTest from '../shared/demoTest'; + +demoTest('popconfirm'); diff --git a/tests/popover/demo.test.js b/tests/popover/demo.test.js new file mode 100644 index 0000000000..91724fd313 --- /dev/null +++ b/tests/popover/demo.test.js @@ -0,0 +1,3 @@ +import demoTest from '../shared/demoTest'; + +demoTest('popover'); diff --git a/tests/popover.test.js b/tests/popover/index.test.js similarity index 94% rename from tests/popover.test.js rename to tests/popover/index.test.js index 7f30d55702..33b53b3a48 100644 --- a/tests/popover.test.js +++ b/tests/popover/index.test.js @@ -1,6 +1,6 @@ import React from 'react'; import TestUtils from 'react-addons-test-utils'; -import Popover from '../components/popover/index'; +import Popover from '../../components/popover/index'; describe('Popover', function() { it('should show overlay when trigger is clicked', () => { diff --git a/tests/progress/demo.test.js b/tests/progress/demo.test.js new file mode 100644 index 0000000000..fbc616ffc7 --- /dev/null +++ b/tests/progress/demo.test.js @@ -0,0 +1,3 @@ +import demoTest from '../shared/demoTest'; + +demoTest('progress'); diff --git a/tests/radio/demo.test.js b/tests/radio/demo.test.js new file mode 100644 index 0000000000..a663362e32 --- /dev/null +++ b/tests/radio/demo.test.js @@ -0,0 +1,3 @@ +import demoTest from '../shared/demoTest'; + +demoTest('radio'); diff --git a/tests/rate/demo.test.js b/tests/rate/demo.test.js new file mode 100644 index 0000000000..4e4b67d61e --- /dev/null +++ b/tests/rate/demo.test.js @@ -0,0 +1,3 @@ +import demoTest from '../shared/demoTest'; + +demoTest('rate'); diff --git a/tests/select/demo.test.js b/tests/select/demo.test.js new file mode 100644 index 0000000000..5a5353703b --- /dev/null +++ b/tests/select/demo.test.js @@ -0,0 +1,3 @@ +import demoTest from '../shared/demoTest'; + +demoTest('select'); diff --git a/tests/shared/demoTest.js b/tests/shared/demoTest.js new file mode 100644 index 0000000000..73543b72aa --- /dev/null +++ b/tests/shared/demoTest.js @@ -0,0 +1,16 @@ +import glob from 'glob' +import { render } from 'enzyme'; +import { renderToJson } from 'enzyme-to-json'; + +export default function demoTest(component, options = {}) { + const testMethod = options.skip ? test.skip : test; + const files = glob.sync(`./components/${component}/demo/*.md`); + + files.forEach(file => { + testMethod(`renders ${file} correctly`, () => { + const demo = require('../.' + file); + const wrapper = render(demo); + expect(renderToJson(wrapper)).toMatchSnapshot(); + }); + }); +} diff --git a/tests/slider/demo.test.js b/tests/slider/demo.test.js new file mode 100644 index 0000000000..2f14516574 --- /dev/null +++ b/tests/slider/demo.test.js @@ -0,0 +1,3 @@ +import demoTest from '../shared/demoTest'; + +demoTest('slider'); diff --git a/tests/spin/demo.test.js b/tests/spin/demo.test.js new file mode 100644 index 0000000000..595ee83522 --- /dev/null +++ b/tests/spin/demo.test.js @@ -0,0 +1,3 @@ +import demoTest from '../shared/demoTest'; + +demoTest('spin'); diff --git a/tests/steps/demo.test.js b/tests/steps/demo.test.js new file mode 100644 index 0000000000..964edffe5b --- /dev/null +++ b/tests/steps/demo.test.js @@ -0,0 +1,3 @@ +import demoTest from '../shared/demoTest'; + +demoTest('steps'); diff --git a/tests/switch/demo.test.js b/tests/switch/demo.test.js new file mode 100644 index 0000000000..8646786f73 --- /dev/null +++ b/tests/switch/demo.test.js @@ -0,0 +1,3 @@ +import demoTest from '../shared/demoTest'; + +demoTest('switch'); diff --git a/tests/table/demo.test.js b/tests/table/demo.test.js new file mode 100644 index 0000000000..78f2d9ff47 --- /dev/null +++ b/tests/table/demo.test.js @@ -0,0 +1,3 @@ +import demoTest from '../shared/demoTest'; + +demoTest('table'); diff --git a/tests/tabs/demo.test.js b/tests/tabs/demo.test.js new file mode 100644 index 0000000000..3538aa6237 --- /dev/null +++ b/tests/tabs/demo.test.js @@ -0,0 +1,3 @@ +import demoTest from '../shared/demoTest'; + +demoTest('tabs'); diff --git a/tests/tag/demo.test.js b/tests/tag/demo.test.js new file mode 100644 index 0000000000..5785e200c2 --- /dev/null +++ b/tests/tag/demo.test.js @@ -0,0 +1,3 @@ +import demoTest from '../shared/demoTest'; + +demoTest('tag'); diff --git a/tests/time-picker/demo.test.js b/tests/time-picker/demo.test.js new file mode 100644 index 0000000000..fb38b7f321 --- /dev/null +++ b/tests/time-picker/demo.test.js @@ -0,0 +1,3 @@ +import demoTest from '../shared/demoTest'; + +demoTest('time-picker'); diff --git a/tests/timeline/demo.test.js b/tests/timeline/demo.test.js new file mode 100644 index 0000000000..bf13d7ec8b --- /dev/null +++ b/tests/timeline/demo.test.js @@ -0,0 +1,3 @@ +import demoTest from '../shared/demoTest'; + +demoTest('timeline'); diff --git a/tests/tooltip/demo.test.js b/tests/tooltip/demo.test.js new file mode 100644 index 0000000000..1a6442a18a --- /dev/null +++ b/tests/tooltip/demo.test.js @@ -0,0 +1,3 @@ +import demoTest from '../shared/demoTest'; + +demoTest('tooltip'); diff --git a/tests/transfer/demo.test.js b/tests/transfer/demo.test.js new file mode 100644 index 0000000000..74fc0ccdea --- /dev/null +++ b/tests/transfer/demo.test.js @@ -0,0 +1,3 @@ +import demoTest from '../shared/demoTest'; + +demoTest('transfer'); diff --git a/tests/tree-select/demo.test.js b/tests/tree-select/demo.test.js new file mode 100644 index 0000000000..a4ae76676f --- /dev/null +++ b/tests/tree-select/demo.test.js @@ -0,0 +1,3 @@ +import demoTest from '../shared/demoTest'; + +demoTest('tree-select'); diff --git a/tests/tree/demo.test.js b/tests/tree/demo.test.js new file mode 100644 index 0000000000..a0eecf4bce --- /dev/null +++ b/tests/tree/demo.test.js @@ -0,0 +1,3 @@ +import demoTest from '../shared/demoTest'; + +demoTest('tree'); diff --git a/tests/upload/demo.test.js b/tests/upload/demo.test.js new file mode 100644 index 0000000000..0bb0c95a99 --- /dev/null +++ b/tests/upload/demo.test.js @@ -0,0 +1,3 @@ +import demoTest from '../shared/demoTest'; + +demoTest('upload'); From f77d568322c8660036653446173deca6e05634bd Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 22 Nov 2016 13:48:47 +0800 Subject: [PATCH 0805/2145] fix upload prefixCls --- components/upload/index.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/components/upload/index.tsx b/components/upload/index.tsx index b8ee7901ac..9813d44bf3 100644 --- a/components/upload/index.tsx +++ b/components/upload/index.tsx @@ -61,6 +61,7 @@ export default class Upload extends React.Component { static Dragger = Dragger; static defaultProps = { + prefixCls: 'ant-upload', type: 'select', multiple: false, action: '', @@ -238,7 +239,7 @@ export default class Upload extends React.Component { render() { const { - prefixCls = 'ant-upload', showUploadList, listType, onPreview, + prefixCls = '', showUploadList, listType, onPreview, type, disabled, children, className, } = this.props; From e552880c32aaa3f5b0fb09a5e1fb7454c24d5378 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 22 Nov 2016 14:21:42 +0800 Subject: [PATCH 0806/2145] update upload detail --- components/upload/demo/inplace.md | 15 ++++++++------- components/upload/demo/picture-card.md | 15 ++++++++++----- components/upload/demo/picture-style.md | 8 ++++---- components/upload/style/index.less | 4 +++- components/upload/uploadList.tsx | 11 +++++------ 5 files changed, 30 insertions(+), 23 deletions(-) diff --git a/components/upload/demo/inplace.md b/components/upload/demo/inplace.md index 03c79ae477..3b4c0b7ca9 100644 --- a/components/upload/demo/inplace.md +++ b/components/upload/demo/inplace.md @@ -24,7 +24,7 @@ const Demo = React.createClass({ if (info.file.status === 'done') { this.setState({ // Get this url from response in real world. - imageUrl: 'https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg', + imageUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png', }); } }, @@ -52,21 +52,22 @@ ReactDOM.render(, mountNode); ``` ```css -#components-upload-demo-inplace .avatar-uploader, -#components-upload-demo-inplace .avatar-uploader-trigger, -#components-upload-demo-inplace .avatar { +.avatar-uploader, +.avatar-uploader-trigger, +.avatar { width: 150px; height: 150px; } -#components-upload-demo-inplace .avatar-uploader { +.avatar-uploader { display: block; - border: 1px solid #d9d9d9; + border: 1px dashed #d9d9d9; border-radius: 6px; cursor: pointer; } -#components-upload-demo-inplace .avatar-uploader-trigger { +.avatar-uploader-trigger { display: table-cell; vertical-align: middle; font-size: 28px; + color: #999; } ``` diff --git a/components/upload/demo/picture-card.md b/components/upload/demo/picture-card.md index b9e82dce81..efd2c56d70 100644 --- a/components/upload/demo/picture-card.md +++ b/components/upload/demo/picture-card.md @@ -36,8 +36,8 @@ const ImageUploadList = React.createClass({ uid: -1, name: 'xxx.png', status: 'done', - url: 'https://os.alipayobjects.com/rmsportal/NDbkJhpzmLxtPhB.png', - thumbUrl: 'https://os.alipayobjects.com/rmsportal/NDbkJhpzmLxtPhB.png', + url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png', + thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png', }], onPreview: (file) => { this.setState({ @@ -52,12 +52,17 @@ const ImageUploadList = React.createClass({
    Upload
    - - example + + example sample - example + example ); diff --git a/components/upload/demo/picture-style.md b/components/upload/demo/picture-style.md index 178db4ed8a..b830a6fdd5 100644 --- a/components/upload/demo/picture-style.md +++ b/components/upload/demo/picture-style.md @@ -24,14 +24,14 @@ const props = { uid: -1, name: 'xxx.png', status: 'done', - url: 'https://os.alipayobjects.com/rmsportal/NDbkJhpzmLxtPhB.png', - thumbUrl: 'https://os.alipayobjects.com/rmsportal/NDbkJhpzmLxtPhB.png', + url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png', + thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png', }, { uid: -2, name: 'yyy.png', status: 'done', - url: 'https://os.alipayobjects.com/rmsportal/NDbkJhpzmLxtPhB.png', - thumbUrl: 'https://os.alipayobjects.com/rmsportal/NDbkJhpzmLxtPhB.png', + url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png', + thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png', }], }; diff --git a/components/upload/style/index.less b/components/upload/style/index.less index 7e19c730f9..d0c29847a7 100644 --- a/components/upload/style/index.less +++ b/components/upload/style/index.less @@ -208,6 +208,8 @@ width: 48px; height: 48px; display: block; + overflow: hidden; + border-radius: @border-radius-sm; } .@{upload-item}-thumbnail.@{iconfont-css-prefix}:before { @@ -221,7 +223,7 @@ text-overflow: ellipsis; white-space: nowrap; margin: 0 0 0 8px; - line-height: 42px; + line-height: 44px; transition: all 0.3s ease; padding-left: 48px; padding-right: 8px; diff --git a/components/upload/uploadList.tsx b/components/upload/uploadList.tsx index be9222fc80..4d592615e5 100644 --- a/components/upload/uploadList.tsx +++ b/components/upload/uploadList.tsx @@ -30,12 +30,11 @@ export default class UploadList extends React.Component { } handlePreview = (file, e) => { - e.preventDefault(); - const onPreview = this.props.onPreview; + const { onPreview } = this.props; if (!onPreview) { return; } - + e.preventDefault(); return onPreview(file); } @@ -81,7 +80,7 @@ export default class UploadList extends React.Component { this.handlePreview(file, e)} - href={file.url} + href={file.thumbUrl || file.url} target="_blank" rel="noopener noreferrer" > {file.name} @@ -137,9 +136,9 @@ export default class UploadList extends React.Component { > - this.handleClose(file)} /> + this.handleClose(file)} /> - ) : this.handleClose(file)} /> + ) : this.handleClose(file)} /> } {progress} From 57f5d299af033c3813e68414d949ba3012dd6615 Mon Sep 17 00:00:00 2001 From: Wei Zhu Date: Tue, 22 Nov 2016 14:28:05 +0800 Subject: [PATCH 0807/2145] Check in snapshots --- tests/affix/__snapshots__/demo.test.js.snap | 71 + tests/alert/__snapshots__/demo.test.js.snap | 308 + tests/anchor/__snapshots__/demo.test.js.snap | 122 + .../__snapshots__/demo.test.js.snap | 73 + .../back-top/__snapshots__/demo.test.js.snap | 21 + tests/badge/__snapshots__/demo.test.js.snap | 1287 + .../__snapshots__/demo.test.js.snap | 178 + tests/button/__snapshots__/demo.test.js.snap | 406 + .../calendar/__snapshots__/demo.test.js.snap | 4333 +++ tests/card/__snapshots__/demo.test.js.snap | 201 + .../carousel/__snapshots__/demo.test.js.snap | 245 + .../checkbox/__snapshots__/demo.test.js.snap | 304 + .../collapse/__snapshots__/demo.test.js.snap | 183 + .../__snapshots__/demo.test.js.snap | 446 + .../dropdown/__snapshots__/demo.test.js.snap | 111 + tests/form/__snapshots__/demo.test.js.snap | 1751 + tests/grid/__snapshots__/demo.test.js.snap | 423 + .../__snapshots__/demo.test.js.snap | 203 + tests/input/__snapshots__/demo.test.js.snap | 232 + .../__snapshots__/demo.test.js.snap | 1287 + tests/menu/__snapshots__/demo.test.js.snap | 516 + tests/message/__snapshots__/demo.test.js.snap | 55 + tests/modal/__snapshots__/demo.test.js.snap | 143 + tests/node/__snapshots__/demo.test.js.snap | 28802 ++++++++++++++++ tests/node/demo.test.js | 23 + .../__snapshots__/demo.test.js.snap | 74 + .../__snapshots__/demo.test.js.snap | 672 + .../__snapshots__/demo.test.js.snap | 133 + tests/popover/__snapshots__/demo.test.js.snap | 166 + .../progress/__snapshots__/demo.test.js.snap | 546 + tests/radio/__snapshots__/demo.test.js.snap | 584 + tests/rate/__snapshots__/demo.test.js.snap | 129 + tests/select/__snapshots__/demo.test.js.snap | 537 + tests/slider/__snapshots__/demo.test.js.snap | 540 + tests/spin/__snapshots__/demo.test.js.snap | 130 + tests/steps/__snapshots__/demo.test.js.snap | 665 + tests/switch/__snapshots__/demo.test.js.snap | 77 + tests/table/__snapshots__/demo.test.js.snap | 8393 +++++ tests/tabs/__snapshots__/demo.test.js.snap | 831 + tests/tag/__snapshots__/demo.test.js.snap | 154 + .../__snapshots__/demo.test.js.snap | 135 + .../timeline/__snapshots__/demo.test.js.snap | 222 + tests/tooltip/__snapshots__/demo.test.js.snap | 89 + .../transfer/__snapshots__/demo.test.js.snap | 580 + .../__snapshots__/demo.test.js.snap | 97 + tests/tree/__snapshots__/demo.test.js.snap | 593 + tests/upload/__snapshots__/demo.test.js.snap | 318 + 47 files changed, 57389 insertions(+) create mode 100644 tests/affix/__snapshots__/demo.test.js.snap create mode 100644 tests/alert/__snapshots__/demo.test.js.snap create mode 100644 tests/anchor/__snapshots__/demo.test.js.snap create mode 100644 tests/auto-complete/__snapshots__/demo.test.js.snap create mode 100644 tests/back-top/__snapshots__/demo.test.js.snap create mode 100644 tests/badge/__snapshots__/demo.test.js.snap create mode 100644 tests/breadcrumb/__snapshots__/demo.test.js.snap create mode 100644 tests/button/__snapshots__/demo.test.js.snap create mode 100644 tests/calendar/__snapshots__/demo.test.js.snap create mode 100644 tests/card/__snapshots__/demo.test.js.snap create mode 100644 tests/carousel/__snapshots__/demo.test.js.snap create mode 100644 tests/checkbox/__snapshots__/demo.test.js.snap create mode 100644 tests/collapse/__snapshots__/demo.test.js.snap create mode 100644 tests/date-picker/__snapshots__/demo.test.js.snap create mode 100644 tests/dropdown/__snapshots__/demo.test.js.snap create mode 100644 tests/form/__snapshots__/demo.test.js.snap create mode 100644 tests/grid/__snapshots__/demo.test.js.snap create mode 100644 tests/input-number/__snapshots__/demo.test.js.snap create mode 100644 tests/input/__snapshots__/demo.test.js.snap create mode 100644 tests/locale-provider/__snapshots__/demo.test.js.snap create mode 100644 tests/menu/__snapshots__/demo.test.js.snap create mode 100644 tests/message/__snapshots__/demo.test.js.snap create mode 100644 tests/modal/__snapshots__/demo.test.js.snap create mode 100644 tests/node/__snapshots__/demo.test.js.snap create mode 100644 tests/node/demo.test.js create mode 100644 tests/notification/__snapshots__/demo.test.js.snap create mode 100644 tests/pagination/__snapshots__/demo.test.js.snap create mode 100644 tests/popconfirm/__snapshots__/demo.test.js.snap create mode 100644 tests/popover/__snapshots__/demo.test.js.snap create mode 100644 tests/progress/__snapshots__/demo.test.js.snap create mode 100644 tests/radio/__snapshots__/demo.test.js.snap create mode 100644 tests/rate/__snapshots__/demo.test.js.snap create mode 100644 tests/select/__snapshots__/demo.test.js.snap create mode 100644 tests/slider/__snapshots__/demo.test.js.snap create mode 100644 tests/spin/__snapshots__/demo.test.js.snap create mode 100644 tests/steps/__snapshots__/demo.test.js.snap create mode 100644 tests/switch/__snapshots__/demo.test.js.snap create mode 100644 tests/table/__snapshots__/demo.test.js.snap create mode 100644 tests/tabs/__snapshots__/demo.test.js.snap create mode 100644 tests/tag/__snapshots__/demo.test.js.snap create mode 100644 tests/time-picker/__snapshots__/demo.test.js.snap create mode 100644 tests/timeline/__snapshots__/demo.test.js.snap create mode 100644 tests/tooltip/__snapshots__/demo.test.js.snap create mode 100644 tests/transfer/__snapshots__/demo.test.js.snap create mode 100644 tests/tree-select/__snapshots__/demo.test.js.snap create mode 100644 tests/tree/__snapshots__/demo.test.js.snap create mode 100644 tests/upload/__snapshots__/demo.test.js.snap diff --git a/tests/affix/__snapshots__/demo.test.js.snap b/tests/affix/__snapshots__/demo.test.js.snap new file mode 100644 index 0000000000..20e070f68d --- /dev/null +++ b/tests/affix/__snapshots__/demo.test.js.snap @@ -0,0 +1,71 @@ +exports[`test renders ./components/affix/demo/basic.md correctly 1`] = ` +
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    +
    +`; + +exports[`test renders ./components/affix/demo/on-change.md correctly 1`] = ` +
    +
    + +
    +
    +`; + +exports[`test renders ./components/affix/demo/target.md correctly 1`] = ` +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +`; diff --git a/tests/alert/__snapshots__/demo.test.js.snap b/tests/alert/__snapshots__/demo.test.js.snap new file mode 100644 index 0000000000..9aa2789de8 --- /dev/null +++ b/tests/alert/__snapshots__/demo.test.js.snap @@ -0,0 +1,308 @@ +exports[`test renders ./components/alert/demo/banner.md correctly 1`] = ` +
    +
    + + + Warning text + + +
    +
    +
    + + + Very long warning text warning text text text text text text text + + + + + +
    +
    +`; + +exports[`test renders ./components/alert/demo/basic.md correctly 1`] = ` +
    + + Success Text + + +
    +`; + +exports[`test renders ./components/alert/demo/closable.md correctly 1`] = ` +
    +
    + + Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text + + + + + +
    +
    + + Error Text + + + Error Description Error Description Error Description Error Description Error Description Error Description + + + + +
    +
    +`; + +exports[`test renders ./components/alert/demo/close-text.md correctly 1`] = ` +
    + + Info Text + + + + Close Now + +
    +`; + +exports[`test renders ./components/alert/demo/description.md correctly 1`] = ` +
    +
    + + Success Text + + + Success Description Success Description Success Description + +
    +
    + + Info Text + + + Info Description Info Description Info Description Info Description + +
    +
    + + Warning Text + + + Warning Description Warning Description Warning Description Warning Description + +
    +
    + + Error Text + + + Error Description Error Description Error Description Error Description + +
    +
    +`; + +exports[`test renders ./components/alert/demo/icon.md correctly 1`] = ` +
    +
    + + + Success Tips + + +
    +
    + + + Informational Notes + + +
    +
    + + + Warning + + +
    +
    + + + Error + + +
    +
    + + + success tips + + + Detailed description and advices about successful copywriting. + +
    +
    + + + Informational Notes + + + Additional description and informations about copywriting. + +
    +
    + + + Warning + + + This is a warning notice about copywriting. + +
    +
    + + + Error + + + This is an error message about copywriting. + +
    +
    +`; + +exports[`test renders ./components/alert/demo/style.md correctly 1`] = ` +
    +
    + + Success Text + + +
    +
    + + Info Text + + +
    +
    + + Warning Text + + +
    +
    + + Error Text + + +
    +
    +`; diff --git a/tests/anchor/__snapshots__/demo.test.js.snap b/tests/anchor/__snapshots__/demo.test.js.snap new file mode 100644 index 0000000000..a24189ed32 --- /dev/null +++ b/tests/anchor/__snapshots__/demo.test.js.snap @@ -0,0 +1,122 @@ +exports[`test renders ./components/anchor/demo/basic.md correctly 1`] = ` + +`; + +exports[`test renders ./components/anchor/demo/fixed.md correctly 1`] = ` +
    +
    +
    + +
    +
    + + Basic demo + +
    +
    + + Fixed demo + +
    +
    + + API + +
    + + Anchor Props + +
    +
    + + Link Props + +
    +
    +
    +
    +`; diff --git a/tests/auto-complete/__snapshots__/demo.test.js.snap b/tests/auto-complete/__snapshots__/demo.test.js.snap new file mode 100644 index 0000000000..8bf02cc5b9 --- /dev/null +++ b/tests/auto-complete/__snapshots__/demo.test.js.snap @@ -0,0 +1,73 @@ +exports[`test renders ./components/auto-complete/demo/basic.md correctly 1`] = ` +
    + +
    +`; + +exports[`test renders ./components/auto-complete/demo/options.md correctly 1`] = ` +
    + +
    +`; diff --git a/tests/back-top/__snapshots__/demo.test.js.snap b/tests/back-top/__snapshots__/demo.test.js.snap new file mode 100644 index 0000000000..97b6b6e477 --- /dev/null +++ b/tests/back-top/__snapshots__/demo.test.js.snap @@ -0,0 +1,21 @@ +exports[`test renders ./components/back-top/demo/basic.md correctly 1`] = ` +
    + Scroll down to see the bottom-right + + gray + + button. +
    +`; + +exports[`test renders ./components/back-top/demo/custom.md correctly 1`] = ` +
    + Scroll down to see the bottom-right + + blue + + button. +
    +`; diff --git a/tests/badge/__snapshots__/demo.test.js.snap b/tests/badge/__snapshots__/demo.test.js.snap new file mode 100644 index 0000000000..a9ea15ddaa --- /dev/null +++ b/tests/badge/__snapshots__/demo.test.js.snap @@ -0,0 +1,1287 @@ +exports[`test renders ./components/badge/demo/99plus.md correctly 1`] = ` + +`; + +exports[`test renders ./components/badge/demo/basic.md correctly 1`] = ` + + + + +

    + 0 +

    +

    + 1 +

    +

    + 2 +

    +

    + 3 +

    +

    + 4 +

    +

    + 5 +

    +

    + 6 +

    +

    + 7 +

    +

    + 8 +

    +

    + 9 +

    +

    + 0 +

    +

    + 1 +

    +

    + 2 +

    +

    + 3 +

    +

    + 4 +

    +

    + 5 +

    +

    + 6 +

    +

    + 7 +

    +

    + 8 +

    +

    + 9 +

    +

    + 0 +

    +

    + 1 +

    +

    + 2 +

    +

    + 3 +

    +

    + 4 +

    +

    + 5 +

    +

    + 6 +

    +

    + 7 +

    +

    + 8 +

    +

    + 9 +

    +     +     + +`; + +exports[`test renders ./components/badge/demo/change.md correctly 1`] = ` +     +`; + +exports[`test renders ./components/badge/demo/dot.md correctly 1`] = ` + +`; + +exports[`test renders ./components/badge/demo/link.md correctly 1`] = ` + + + + + +

    + 0 +

    +

    + 1 +

    +

    + 2 +

    +

    + 3 +

    +

    + 4 +

    +

    + 5 +

    +

    + 6 +

    +

    + 7 +

    +

    + 8 +

    +

    + 9 +

    +

    + 0 +

    +

    + 1 +

    +

    + 2 +

    +

    + 3 +

    +

    + 4 +

    +

    + 5 +

    +

    + 6 +

    +

    + 7 +

    +

    + 8 +

    +

    + 9 +

    +

    + 0 +

    +

    + 1 +

    +

    + 2 +

    +

    + 3 +

    +

    + 4 +

    +

    + 5 +

    +

    + 6 +

    +

    + 7 +

    +

    + 8 +

    +

    + 9 +

    +     +     +     +     +`; + +exports[`test renders ./components/badge/demo/no-wrapper.md correctly 1`] = ` +
    + + + +

    + 0 +

    +

    + 1 +

    +

    + 2 +

    +

    + 3 +

    +

    + 4 +

    +

    + 5 +

    +

    + 6 +

    +

    + 7 +

    +

    + 8 +

    +

    + 9 +

    +

    + 0 +

    +

    + 1 +

    +

    + 2 +

    +

    + 3 +

    +

    + 4 +

    +

    + 5 +

    +

    + 6 +

    +

    + 7 +

    +

    + 8 +

    +

    + 9 +

    +

    + 0 +

    +

    + 1 +

    +

    + 2 +

    +

    + 3 +

    +

    + 4 +

    +

    + 5 +

    +

    + 6 +

    +

    + 7 +

    +

    + 8 +

    +

    + 9 +

    +     + +

    + 0 +

    +

    + 1 +

    +

    + 2 +

    +

    + 3 +

    +

    + 4 +

    +

    + 5 +

    +

    + 6 +

    +

    + 7 +

    +

    + 8 +

    +

    + 9 +

    +

    + 0 +

    +

    + 1 +

    +

    + 2 +

    +

    + 3 +

    +

    + 4 +

    +

    + 5 +

    +

    + 6 +

    +

    + 7 +

    +

    + 8 +

    +

    + 9 +

    +

    + 0 +

    +

    + 1 +

    +

    + 2 +

    +

    + 3 +

    +

    + 4 +

    +

    + 5 +

    +

    + 6 +

    +

    + 7 +

    +

    + 8 +

    +

    + 9 +

    +     +     +     + + + +

    + 0 +

    +

    + 1 +

    +

    + 2 +

    +

    + 3 +

    +

    + 4 +

    +

    + 5 +

    +

    + 6 +

    +

    + 7 +

    +

    + 8 +

    +

    + 9 +

    +

    + 0 +

    +

    + 1 +

    +

    + 2 +

    +

    + 3 +

    +

    + 4 +

    +

    + 5 +

    +

    + 6 +

    +

    + 7 +

    +

    + 8 +

    +

    + 9 +

    +

    + 0 +

    +

    + 1 +

    +

    + 2 +

    +

    + 3 +

    +

    + 4 +

    +

    + 5 +

    +

    + 6 +

    +

    + 7 +

    +

    + 8 +

    +

    + 9 +

    +     +     +     + + + 99+ + + +
    +`; + +exports[`test renders ./components/badge/demo/overflow.md correctly 1`] = ` + +`; + +exports[`test renders ./components/badge/demo/status.md correctly 1`] = ` +
    + + + + + + + + + + + + + + + + + + + + +
    + + + + Success + + +
    + + + + Error + + +
    + + + + Default + + +
    + + + + Processing + + +
    + + + + Warning + + +
    +`; diff --git a/tests/breadcrumb/__snapshots__/demo.test.js.snap b/tests/breadcrumb/__snapshots__/demo.test.js.snap new file mode 100644 index 0000000000..f200565bd0 --- /dev/null +++ b/tests/breadcrumb/__snapshots__/demo.test.js.snap @@ -0,0 +1,178 @@ +exports[`test renders ./components/breadcrumb/demo/basic.md correctly 1`] = ` +
    + + + Home + + + / + + + + + + Application Center + + + + / + + + + + + Application List + + + + / + + + + + An Application + + + / + + +
    +`; + +exports[`test renders ./components/breadcrumb/demo/router.md correctly 1`] = ` +
    +
    + + Home + + + Application List + +
    + Home +
    + Click the navigation above to switch: +
    +
    + + + + Home + + + + / + + +
    +
    +`; + +exports[`test renders ./components/breadcrumb/demo/separator.md correctly 1`] = ` +
    + + + Home + + + > + + + + + Application Center + + + > + + + + + Application List + + + > + + + + + An Application + + + > + + +
    +`; + +exports[`test renders ./components/breadcrumb/demo/withIcon.md correctly 1`] = ` +
    + + + + + + / + + + + + + + Application List + + + + / + + + + + Application + + + / + + +
    +`; diff --git a/tests/button/__snapshots__/demo.test.js.snap b/tests/button/__snapshots__/demo.test.js.snap new file mode 100644 index 0000000000..58c302a623 --- /dev/null +++ b/tests/button/__snapshots__/demo.test.js.snap @@ -0,0 +1,406 @@ +exports[`test renders ./components/button/demo/basic.md correctly 1`] = ` +
    + + + + +
    +`; + +exports[`test renders ./components/button/demo/button-group.md correctly 1`] = ` +
    +

    + Basic +

    +
    + + +
    +
    + + + +
    +
    + + + + +
    +

    + With Icon +

    +
    + + +
    +
    + + +
    +

    + Size +

    +
    + + +
    +
    + + +
    +
    + + +
    +
    +`; + +exports[`test renders ./components/button/demo/disabled.md correctly 1`] = ` +
    + + +
    + + +
    + + +
    + + +
    +`; + +exports[`test renders ./components/button/demo/icon.md correctly 1`] = ` +
    + + +
    + + +
    +`; + +exports[`test renders ./components/button/demo/loading.md correctly 1`] = ` +
    + + +
    + + +
    +`; + +exports[`test renders ./components/button/demo/multiple.md correctly 1`] = ` +
    + + + +
    +`; + +exports[`test renders ./components/button/demo/size.md correctly 1`] = ` +
    + + + +
    +`; diff --git a/tests/calendar/__snapshots__/demo.test.js.snap b/tests/calendar/__snapshots__/demo.test.js.snap new file mode 100644 index 0000000000..4898ce7ad4 --- /dev/null +++ b/tests/calendar/__snapshots__/demo.test.js.snap @@ -0,0 +1,4333 @@ +exports[`test renders ./components/calendar/demo/basic.md correctly 1`] = ` +
    +
    +
    + +
    +
    + +
    +
    + + +
    +
    +
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + + Su + + + + Mo + + + + Tu + + + + We + + + + Th + + + + Fr + + + + Sa + +
    +
    +
    + 30 +
    +
    +
    +
    		+
    +
    + 31 +
    +
    +
    +
    		+
    +
    + 01 +
    +
    +
    +
    		+
    +
    + 02 +
    +
    +
    +
    		+
    +
    + 03 +
    +
    +
    +
    		+
    +
    + 04 +
    +
    +
    +
    		+
    +
    + 05 +
    +
    +
    +
    +
    +
    + 06 +
    +
    +
    +
    		+
    +
    + 07 +
    +
    +
    +
    		+
    +
    + 08 +
    +
    +
    +
    		+
    +
    + 09 +
    +
    +
    +
    		+
    +
    + 10 +
    +
    +
    +
    		+
    +
    + 11 +
    +
    +
    +
    		+
    +
    + 12 +
    +
    +
    +
    +
    +
    + 13 +
    +
    +
    +
    		+
    +
    + 14 +
    +
    +
    +
    		+
    +
    + 15 +
    +
    +
    +
    		+
    +
    + 16 +
    +
    +
    +
    		+
    +
    + 17 +
    +
    +
    +
    		+
    +
    + 18 +
    +
    +
    +
    		+
    +
    + 19 +
    +
    +
    +
    +
    +
    + 20 +
    +
    +
    +
    		+
    +
    + 21 +
    +
    +
    +
    		+
    +
    + 22 +
    +
    +
    +
    		+
    +
    + 23 +
    +
    +
    +
    		+
    +
    + 24 +
    +
    +
    +
    		+
    +
    + 25 +
    +
    +
    +
    		+
    +
    + 26 +
    +
    +
    +
    +
    +
    + 27 +
    +
    +
    +
    		+
    +
    + 28 +
    +
    +
    +
    		+
    +
    + 29 +
    +
    +
    +
    		+
    +
    + 30 +
    +
    +
    +
    		+
    +
    + 01 +
    +
    +
    +
    		+
    +
    + 02 +
    +
    +
    +
    		+
    +
    + 03 +
    +
    +
    +
    +
    +
    + 04 +
    +
    +
    +
    		+
    +
    + 05 +
    +
    +
    +
    		+
    +
    + 06 +
    +
    +
    +
    		+
    +
    + 07 +
    +
    +
    +
    		+
    +
    + 08 +
    +
    +
    +
    		+
    +
    + 09 +
    +
    +
    +
    		+
    +
    + 10 +
    +
    +
    +
    +
    +
    +
    +`; + +exports[`test renders ./components/calendar/demo/card.md correctly 1`] = ` +
    +
    +
    +
    + +
    +
    + +
    +
    + + +
    +
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + + 一 + + + + 二 + + + + 三 + + + + 四 + + + + 五 + + + + 六 + + + + 日 + +
    +
    +
    + 31 +
    +
    +
    +
    		+
    +
    + 01 +
    +
    +
    +
    		+
    +
    + 02 +
    +
    +
    +
    		+
    +
    + 03 +
    +
    +
    +
    		+
    +
    + 04 +
    +
    +
    +
    		+
    +
    + 05 +
    +
    +
    +
    		+
    +
    + 06 +
    +
    +
    +
    +
    +
    + 07 +
    +
    +
    +
    		+
    +
    + 08 +
    +
    +
    +
    		+
    +
    + 09 +
    +
    +
    +
    		+
    +
    + 10 +
    +
    +
    +
    		+
    +
    + 11 +
    +
    +
    +
    		+
    +
    + 12 +
    +
    +
    +
    		+
    +
    + 13 +
    +
    +
    +
    +
    +
    + 14 +
    +
    +
    +
    		+
    +
    + 15 +
    +
    +
    +
    		+
    +
    + 16 +
    +
    +
    +
    		+
    +
    + 17 +
    +
    +
    +
    		+
    +
    + 18 +
    +
    +
    +
    		+
    +
    + 19 +
    +
    +
    +
    		+
    +
    + 20 +
    +
    +
    +
    +
    +
    + 21 +
    +
    +
    +
    		+
    +
    + 22 +
    +
    +
    +
    		+
    +
    + 23 +
    +
    +
    +
    		+
    +
    + 24 +
    +
    +
    +
    		+
    +
    + 25 +
    +
    +
    +
    		+
    +
    + 26 +
    +
    +
    +
    		+
    +
    + 27 +
    +
    +
    +
    +
    +
    + 28 +
    +
    +
    +
    		+
    +
    + 29 +
    +
    +
    +
    		+
    +
    + 30 +
    +
    +
    +
    		+
    +
    + 01 +
    +
    +
    +
    		+
    +
    + 02 +
    +
    +
    +
    		+
    +
    + 03 +
    +
    +
    +
    		+
    +
    + 04 +
    +
    +
    +
    +
    +
    + 05 +
    +
    +
    +
    		+
    +
    + 06 +
    +
    +
    +
    		+
    +
    + 07 +
    +
    +
    +
    		+
    +
    + 08 +
    +
    +
    +
    		+
    +
    + 09 +
    +
    +
    +
    		+
    +
    + 10 +
    +
    +
    +
    		+
    +
    + 11 +
    +
    +
    +
    +
    +
    +
    +
    +`; + +exports[`test renders ./components/calendar/demo/custom-render.md correctly 1`] = ` +
    +
    +
    + +
    +
    + +
    +
    + + +
    +
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + + 一 + + + + 二 + + + + 三 + + + + 四 + + + + 五 + + + + 六 + + + + 日 + +
    +
    +
    + 27 +
    +
    +
    + Custom date 27 +
    +
    +
    +     		+
    +
    + 28 +
    +
    +
    + Custom date 28 +
    +
    +
    +     		+
    +
    + 29 +
    +
    +
    + Custom date 29 +
    +
    +
    +     		+
    +
    + 30 +
    +
    +
    + Custom date 30 +
    +
    +
    +     		+
    +
    + 01 +
    +
    +
    + Custom date 1 +
    +
    +
    +     		+
    +
    + 02 +
    +
    +
    + Custom date 2 +
    +
    +
    +     		+
    +
    + 03 +
    +
    +
    + Custom date 3 +
    +
    +
    +
    +
    +
    + 04 +
    +
    +
    + Custom date 4 +
    +
    +
    +     		+
    +
    + 05 +
    +
    +
    + Custom date 5 +
    +
    +
    +     		+
    +
    + 06 +
    +
    +
    + Custom date 6 +
    +
    +
    +     		+
    +
    + 07 +
    +
    +
    + Custom date 7 +
    +
    +
    +     		+
    +
    + 08 +
    +
    +
    + Custom date 8 +
    +
    +
    +     		+
    +
    + 09 +
    +
    +
    + Custom date 9 +
    +
    +
    +     		+
    +
    + 10 +
    +
    +
    + Custom date 10 +
    +
    +
    +
    +
    +
    + 11 +
    +
    +
    + Custom date 11 +
    +
    +
    +     		+
    +
    + 12 +
    +
    +
    + Custom date 12 +
    +
    +
    +     		+
    +
    + 13 +
    +
    +
    + Custom date 13 +
    +
    +
    +     		+
    +
    + 14 +
    +
    +
    + Custom date 14 +
    +
    +
    +     		+
    +
    + 15 +
    +
    +
    + Custom date 15 +
    +
    +
    +     		+
    +
    + 16 +
    +
    +
    + Custom date 16 +
    +
    +
    +     		+
    +
    + 17 +
    +
    +
    + Custom date 17 +
    +
    +
    +
    +
    +
    + 18 +
    +
    +
    + Custom date 18 +
    +
    +
    +     		+
    +
    + 19 +
    +
    +
    + Custom date 19 +
    +
    +
    +     		+
    +
    + 20 +
    +
    +
    + Custom date 20 +
    +
    +
    +     		+
    +
    + 21 +
    +
    +
    + Custom date 21 +
    +
    +
    +     		+
    +
    + 22 +
    +
    +
    + Custom date 22 +
    +
    +
    +     		+
    +
    + 23 +
    +
    +
    + Custom date 23 +
    +
    +
    +     		+
    +
    + 24 +
    +
    +
    + Custom date 24 +
    +
    +
    +
    +
    +
    + 25 +
    +
    +
    + Custom date 25 +
    +
    +
    +     		+
    +
    + 26 +
    +
    +
    + Custom date 26 +
    +
    +
    +     		+
    +
    + 27 +
    +
    +
    + Custom date 27 +
    +
    +
    +     		+
    +
    + 28 +
    +
    +
    + Custom date 28 +
    +
    +
    +     		+
    +
    + 29 +
    +
    +
    + Custom date 29 +
    +
    +
    +     		+
    +
    + 30 +
    +
    +
    + Custom date 30 +
    +
    +
    +     		+
    +
    + 31 +
    +
    +
    + Custom date 31 +
    +
    +
    +
    +
    +
    + 01 +
    +
    +
    + Custom date 1 +
    +
    +
    +     		+
    +
    + 02 +
    +
    +
    + Custom date 2 +
    +
    +
    +     		+
    +
    + 03 +
    +
    +
    + Custom date 3 +
    +
    +
    +     		+
    +
    + 04 +
    +
    +
    + Custom date 4 +
    +
    +
    +     		+
    +
    + 05 +
    +
    +
    + Custom date 5 +
    +
    +
    +     		+
    +
    + 06 +
    +
    +
    + Custom date 6 +
    +
    +
    +     		+
    +
    + 07 +
    +
    +
    + Custom date 7 +
    +
    +
    +
    +
    +
    +
    +`; + +exports[`test renders ./components/calendar/demo/locale.md correctly 1`] = ` +
    +
    +
    + +
    +
    + +
    +
    + + +
    +
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + + Su + + + + Mo + + + + Tu + + + + We + + + + Th + + + + Fr + + + + Sa + +
    +
    +
    + 30 +
    +
    +
    +
    		+
    +
    + 31 +
    +
    +
    +
    		+
    +
    + 01 +
    +
    +
    +
    		+
    +
    + 02 +
    +
    +
    +
    		+
    +
    + 03 +
    +
    +
    +
    		+
    +
    + 04 +
    +
    +
    +
    		+
    +
    + 05 +
    +
    +
    +
    +
    +
    + 06 +
    +
    +
    +
    		+
    +
    + 07 +
    +
    +
    +
    		+
    +
    + 08 +
    +
    +
    +
    		+
    +
    + 09 +
    +
    +
    +
    		+
    +
    + 10 +
    +
    +
    +
    		+
    +
    + 11 +
    +
    +
    +
    		+
    +
    + 12 +
    +
    +
    +
    +
    +
    + 13 +
    +
    +
    +
    		+
    +
    + 14 +
    +
    +
    +
    		+
    +
    + 15 +
    +
    +
    +
    		+
    +
    + 16 +
    +
    +
    +
    		+
    +
    + 17 +
    +
    +
    +
    		+
    +
    + 18 +
    +
    +
    +
    		+
    +
    + 19 +
    +
    +
    +
    +
    +
    + 20 +
    +
    +
    +
    		+
    +
    + 21 +
    +
    +
    +
    		+
    +
    + 22 +
    +
    +
    +
    		+
    +
    + 23 +
    +
    +
    +
    		+
    +
    + 24 +
    +
    +
    +
    		+
    +
    + 25 +
    +
    +
    +
    		+
    +
    + 26 +
    +
    +
    +
    +
    +
    + 27 +
    +
    +
    +
    		+
    +
    + 28 +
    +
    +
    +
    		+
    +
    + 29 +
    +
    +
    +
    		+
    +
    + 30 +
    +
    +
    +
    		+
    +
    + 01 +
    +
    +
    +
    		+
    +
    + 02 +
    +
    +
    +
    		+
    +
    + 03 +
    +
    +
    +
    +
    +
    + 04 +
    +
    +
    +
    		+
    +
    + 05 +
    +
    +
    +
    		+
    +
    + 06 +
    +
    +
    +
    		+
    +
    + 07 +
    +
    +
    +
    		+
    +
    + 08 +
    +
    +
    +
    		+
    +
    + 09 +
    +
    +
    +
    		+
    +
    + 10 +
    +
    +
    +
    +
    +
    +
    +`; + +exports[`test renders ./components/calendar/demo/notice-calendar.md correctly 1`] = ` +
    +
    +
    + +
    +
    + +
    +
    + + +
    +
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + + 一 + + + + 二 + + + + 三 + + + + 四 + + + + 五 + + + + 六 + + + + 日 + +
    +
    +
    + 31 +
    +
    +
      +
    +
    +     		+
    +
    + 01 +
    +
    +
      +
    +
    +     		+
    +
    + 02 +
    +
    +
      +
    +
    +     		+
    +
    + 03 +
    +
    +
      +
    +
    +     		+
    +
    + 04 +
    +
    +
      +
    +
    +     		+
    +
    + 05 +
    +
    +
      +
    +
    +     		+
    +
    + 06 +
    +
    +
      +
    +
    +
    +
    +
    + 07 +
    +
    +
      +
    +
    +     		+
    +
    + 08 +
    +
    +
      +
    • + + ● + + This is warning event. +
      • +
    • + + ● + + This is usual event. +
      • +
    +
    +
    +     		+
    +
    + 09 +
    +
    +
      +
    +
    +     		+
    +
    + 10 +
    +
    +
      +
    • + + ● + + This is warning event. +
      • +
    • + + ● + + This is usual event. +
      • +
    • + + ● + + This is error event. +
      • +
    +
    +
    +     		+
    +
    + 11 +
    +
    +
      +
    +
    +     		+
    +
    + 12 +
    +
    +
      +
    +
    +     		+
    +
    + 13 +
    +
    +
      +
    +
    +
    +
    +
    + 14 +
    +
    +
      +
    +
    +     		+
    +
    + 15 +
    +
    +
      +
    • + + ● + + This is warning event +
      • +
    • + + ● + + This is very long usual event。。.... +
      • +
    • + + ● + + This is error event. +
      • +
    • + + ● + + This is error event. +
      • +
    • + + ● + + This is error event. +
      • +
    • + + ● + + This is error event. +
      • +
    +
    +
    +     		+
    +
    + 16 +
    +
    +
      +
    +
    +     		+
    +
    + 17 +
    +
    +
      +
    +
    +     		+
    +
    + 18 +
    +
    +
      +
    +
    +     		+
    +
    + 19 +
    +
    +
      +
    +
    +     		+
    +
    + 20 +
    +
    +
      +
    +
    +
    +
    +
    + 21 +
    +
    +
      +
    +
    +     		+
    +
    + 22 +
    +
    +
      +
    +
    +     		+
    +
    + 23 +
    +
    +
      +
    +
    +     		+
    +
    + 24 +
    +
    +
      +
    +
    +     		+
    +
    + 25 +
    +
    +
      +
    +
    +     		+
    +
    + 26 +
    +
    +
      +
    +
    +     		+
    +
    + 27 +
    +
    +
      +
    +
    +
    +
    +
    + 28 +
    +
    +
      +
    +
    +     		+
    +
    + 29 +
    +
    +
      +
    +
    +     		+
    +
    + 30 +
    +
    +
      +
    +
    +     		+
    +
    + 01 +
    +
    +
      +
    +
    +     		+
    +
    + 02 +
    +
    +
      +
    +
    +     		+
    +
    + 03 +
    +
    +
      +
    +
    +     		+
    +
    + 04 +
    +
    +
      +
    +
    +
    +
    +
    + 05 +
    +
    +
      +
    +
    +     		+
    +
    + 06 +
    +
    +
      +
    +
    +     		+
    +
    + 07 +
    +
    +
      +
    +
    +     		+
    +
    + 08 +
    +
    +
      +
    • + + ● + + This is warning event. +
      • +
    • + + ● + + This is usual event. +
      • +
    +
    +
    +     		+
    +
    + 09 +
    +
    +
      +
    +
    +     		+
    +
    + 10 +
    +
    +
      +
    • + + ● + + This is warning event. +
      • +
    • + + ● + + This is usual event. +
      • +
    • + + ● + + This is error event. +
      • +
    +
    +
    +     		+
    +
    + 11 +
    +
    +
      +
    +
    +
    +
    +
    +
    +`; diff --git a/tests/card/__snapshots__/demo.test.js.snap b/tests/card/__snapshots__/demo.test.js.snap new file mode 100644 index 0000000000..888926282c --- /dev/null +++ b/tests/card/__snapshots__/demo.test.js.snap @@ -0,0 +1,201 @@ +exports[`test renders ./components/card/demo/basic.md correctly 1`] = ` +
    +
    +

    + Card title +

    +
    +
    + + More + +
    +
    +

    + Card content +

    +

    + Card content +

    +

    + Card content +

    +
    +
    +`; + +exports[`test renders ./components/card/demo/border-less.md correctly 1`] = ` +
    +
    +
    +

    + Card title +

    +
    +
    +

    + Card content +

    +

    + Card content +

    +

    + Card content +

    +
    +
    +
    +`; + +exports[`test renders ./components/card/demo/grid.md correctly 1`] = ` +
    +
    +
    +
    +
    +

    + Card title +

    +
    +
    + Card content +
    +
    +
    +
    +
    +
    +

    + Card title +

    +
    +
    + Card content +
    +
    +
    +
    +
    +
    +

    + Card title +

    +
    +
    + Card content +
    +
    +
    +
    +
    +`; + +exports[`test renders ./components/card/demo/loading.md correctly 1`] = ` +
    +
    +

    + Card title +

    +
    +
    +
    +

    + ████████████████████████ +

    +

    + ██████　███████████████████ +

    +

    + ██████████████　██████████ +

    +

    + █████　██████　█████████████ +

    +

    + ███████████　██████████　███ +

    +
    +
    +
    +`; + +exports[`test renders ./components/card/demo/no-padding.md correctly 1`] = ` +
    +
    +
    + example +
    +
    +

    + Europe Street beat +

    +

    + www.instagram.com +

    +
    +
    +
    +`; + +exports[`test renders ./components/card/demo/simple.md correctly 1`] = ` +
    +
    +

    + Card content +

    +

    + Card content +

    +

    + Card content +

    +
    +
    +`; diff --git a/tests/carousel/__snapshots__/demo.test.js.snap b/tests/carousel/__snapshots__/demo.test.js.snap new file mode 100644 index 0000000000..4377d2bc22 --- /dev/null +++ b/tests/carousel/__snapshots__/demo.test.js.snap @@ -0,0 +1,245 @@ +exports[`test renders ./components/carousel/demo/autoplay.md correctly 1`] = ` +
    +
    +
    +
    +
    +

    + 4 +

    +
    +
    +

    + 1 +

    +
    +
    +

    + 2 +

    +
    +
    +

    + 3 +

    +
    +
    +

    + 4 +

    +
    +
    +

    + 1 +

    +
    +
    +
    +
    +
    +`; + +exports[`test renders ./components/carousel/demo/basic.md correctly 1`] = ` +
    +
    +
    +
    +
    +

    + 4 +

    +
    +
    +

    + 1 +

    +
    +
    +

    + 2 +

    +
    +
    +

    + 3 +

    +
    +
    +

    + 4 +

    +
    +
    +

    + 1 +

    +
    +
    +
    +
    +
    +`; + +exports[`test renders ./components/carousel/demo/fade.md correctly 1`] = ` +
    +
    +
    +
    +
    +

    + 1 +

    +
    +
    +

    + 2 +

    +
    +
    +

    + 3 +

    +
    +
    +

    + 4 +

    +
    +
    +
    +
    +
    +`; + +exports[`test renders ./components/carousel/demo/vertical.md correctly 1`] = ` +
    +
    +
    +
    +
    +

    + 4 +

    +
    +
    +

    + 1 +

    +
    +
    +

    + 2 +

    +
    +
    +

    + 3 +

    +
    +
    +

    + 4 +

    +
    +
    +

    + 1 +

    +
    +
    +
    +
    +
    +`; diff --git a/tests/checkbox/__snapshots__/demo.test.js.snap b/tests/checkbox/__snapshots__/demo.test.js.snap new file mode 100644 index 0000000000..678433cf4c --- /dev/null +++ b/tests/checkbox/__snapshots__/demo.test.js.snap @@ -0,0 +1,304 @@ +exports[`test renders ./components/checkbox/demo/basic.md correctly 1`] = ` + +`; + +exports[`test renders ./components/checkbox/demo/check-all.md correctly 1`] = ` +
    +
    + +
    +
    +
    + + + +
    +
    +`; + +exports[`test renders ./components/checkbox/demo/controller.md correctly 1`] = ` +
    +

    + +

    +

    + + +

    +
    +`; + +exports[`test renders ./components/checkbox/demo/disabled.md correctly 1`] = ` +
    + +
    + +
    +`; + +exports[`test renders ./components/checkbox/demo/group.md correctly 1`] = ` +
    +
    + + + +
    +
    +
    + + + +
    +
    +
    + + + +
    +
    +`; diff --git a/tests/collapse/__snapshots__/demo.test.js.snap b/tests/collapse/__snapshots__/demo.test.js.snap new file mode 100644 index 0000000000..124b5f1423 --- /dev/null +++ b/tests/collapse/__snapshots__/demo.test.js.snap @@ -0,0 +1,183 @@ +exports[`test renders ./components/collapse/demo/accordion.md correctly 1`] = ` +
    +
    + +
    +
    + +
    +
    + +
    +
    +`; + +exports[`test renders ./components/collapse/demo/basic.md correctly 1`] = ` +
    +
    + +
    +
    +

    + + A dog is a type of domesticated animal. + Known for its loyalty and faithfulness, + it can be found as a welcome guest in many households across the world. + +

    +
    +
    +
    +
    + +
    +
    + +
    +
    +`; + +exports[`test renders ./components/collapse/demo/borderless.md correctly 1`] = ` +
    +
    + +
    +
    +

    + + A dog is a type of domesticated animal. + Known for its loyalty and faithfulness, + it can be found as a welcome guest in many households across the world. + +

    +
    +
    +
    +
    + +
    +
    + +
    +
    +`; + +exports[`test renders ./components/collapse/demo/mix.md correctly 1`] = ` +
    +
    + +
    +
    + +
    +
    + +
    +
    +`; diff --git a/tests/date-picker/__snapshots__/demo.test.js.snap b/tests/date-picker/__snapshots__/demo.test.js.snap new file mode 100644 index 0000000000..212b5f1f92 --- /dev/null +++ b/tests/date-picker/__snapshots__/demo.test.js.snap @@ -0,0 +1,446 @@ +exports[`test renders ./components/date-picker/demo/basic.md correctly 1`] = ` +
    + + + + + + +
    + + + + + + +
    + + + + + ~ + + + + + +
    +`; + +exports[`test renders ./components/date-picker/demo/disabled.md correctly 1`] = ` +
    + + + + + + +
    + + + + + + +
    + + + + + ~ + + + + + +
    +`; + +exports[`test renders ./components/date-picker/demo/disabled-date.md correctly 1`] = ` +
    + + + + + + +
    + + + + + ~ + + + + + +
    +`; + +exports[`test renders ./components/date-picker/demo/format.md correctly 1`] = ` +
    + + + + + + + +
    + + + + + + + +
    + + + + + ~ + + + + + + +
    +`; + +exports[`test renders ./components/date-picker/demo/locale.md correctly 1`] = ` + + + + + + + +`; + +exports[`test renders ./components/date-picker/demo/presetted-ranges.md correctly 1`] = ` +
    + + + + + ~ + + + + + +
    + + + + + ~ + + + + + +
    +`; + +exports[`test renders ./components/date-picker/demo/size.md correctly 1`] = ` +
    +
    + + + +
    +
    +
    + + + + + + +
    + + + + + + +
    + + + + + ~ + + + + + +
    +`; + +exports[`test renders ./components/date-picker/demo/start-end.md correctly 1`] = ` +
    + + + + + + + + + + + + +
    +`; + +exports[`test renders ./components/date-picker/demo/time.md correctly 1`] = ` +
    + + + + + + +
    + + + + + ~ + + + + + +
    +`; diff --git a/tests/dropdown/__snapshots__/demo.test.js.snap b/tests/dropdown/__snapshots__/demo.test.js.snap new file mode 100644 index 0000000000..14f77b10eb --- /dev/null +++ b/tests/dropdown/__snapshots__/demo.test.js.snap @@ -0,0 +1,111 @@ +exports[`test renders ./components/dropdown/demo/basic.md correctly 1`] = ` + + Hover me + + +`; + +exports[`test renders ./components/dropdown/demo/dropdown-button.md correctly 1`] = ` +
    +
    + + +
    +
    + + +
    + +
    +`; + +exports[`test renders ./components/dropdown/demo/event.md correctly 1`] = ` + + Hover me, Click menu item + + +`; + +exports[`test renders ./components/dropdown/demo/item.md correctly 1`] = ` + + Hover me + + +`; + +exports[`test renders ./components/dropdown/demo/overlay-visible.md correctly 1`] = ` + + Hover me + + +`; + +exports[`test renders ./components/dropdown/demo/sub-menu.md correctly 1`] = ` + + Cascading menu + + +`; + +exports[`test renders ./components/dropdown/demo/trigger.md correctly 1`] = ` + +`; diff --git a/tests/form/__snapshots__/demo.test.js.snap b/tests/form/__snapshots__/demo.test.js.snap new file mode 100644 index 0000000000..a676b4e923 --- /dev/null +++ b/tests/form/__snapshots__/demo.test.js.snap @@ -0,0 +1,1751 @@ +exports[`test renders ./components/form/demo/advanced-search.md correctly 1`] = ` +
    + +
    +
    +
    +
    + +
    +
    +
    + + + +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    + + + +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    + + + +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    + + + +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    + + + +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    + + + +
    +
    +
    +
    +
    +
    +
    + + + + Collapse + + +
    +
    + +
    + Search Result List +
    +
    +`; + +exports[`test renders ./components/form/demo/customized-form-controls.md correctly 1`] = ` +
    +
    +
    + +
    +
    +
    + + + + +
    + +
    +     +
    +
    +
    +
    +
    +
    + +
    +
    +
    + +`; + +exports[`test renders ./components/form/demo/dynamic-form-item.md correctly 1`] = ` +
    +
    +
    + +
    +
    +
    + + + + +
    +
    +
    +
    +
    +
    + +
    +
    +
    + +`; + +exports[`test renders ./components/form/demo/form-in-modal.md correctly 1`] = ` +
    + +
    +`; + +exports[`test renders ./components/form/demo/global-state.md correctly 1`] = ` +
    +
    +
    +
    + +
    +
    +
    + + + +
    +
    +
    +
    + 
    +    {
+      \"username\": {
+        \"value\": \"benjycui\"
+      }
+    }
+
    +
    +`; + +exports[`test renders ./components/form/demo/horizontal-login.md correctly 1`] = ` +
    +
    +
    +
    + + + + + + +
    +
    +
    +
    +
    +
    + + + + + + +
    +
    +
    +
    +
    +
    + +
    +
    +
    + +`; + +exports[`test renders ./components/form/demo/normal-login.md correctly 1`] = ` +