From 0065270e7f2515a2a2865ae11ab71c763d3d8e3b Mon Sep 17 00:00:00 2001 From: ioldfish Date: Wed, 5 Aug 2015 17:38:02 +0800 Subject: [PATCH 01/17] update ant-tree style --- components/tree/index.jsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/components/tree/index.jsx b/components/tree/index.jsx index adcdbbb4dd..fd2b5a97de 100644 --- a/components/tree/index.jsx +++ b/components/tree/index.jsx @@ -3,9 +3,14 @@ import Tree from 'rc-tree'; var TreeNode = Tree.TreeNode; var antDTree = React.createClass({ + getDefaultProps() { + return { + prefixCls: 'ant-tree' + }; + }, render() { - return + return {this.props.children} ; } From 817e5ff72a2ebf8fe699420bc6f3ba00f98ecf8a Mon Sep 17 00:00:00 2001 From: ioldfish Date: Thu, 6 Aug 2015 09:17:40 +0800 Subject: [PATCH 02/17] upadte tree style --- components/tree/demo/basic.md | 12 +++++++++--- components/tree/demo/checkbox.md | 32 ++++++++++++++++++++++++++++++++ components/tree/index.jsx | 1 - components/tree/index.md | 9 +++++++++ package.json | 2 +- style/components/tree.less | 26 ++++++++++++++------------ 6 files changed, 65 insertions(+), 17 deletions(-) create mode 100644 components/tree/demo/checkbox.md diff --git a/components/tree/demo/basic.md b/components/tree/demo/basic.md index 6230a151d0..5f36be08ed 100644 --- a/components/tree/demo/basic.md +++ b/components/tree/demo/basic.md @@ -9,9 +9,15 @@ ````jsx var Tree = antd.Tree; var TreeNode = Tree.TreeNode; +function handleSelect(selected, c) { + console.log('selected: ', selected, c ); +} +function handleChecked(checked, c) { + console.log('checked: ', checked, c ); +} React.render( - - + + leaf @@ -26,7 +32,7 @@ React.render( leaf - + , document.getElementById('components-tree-demo-basic')); ```` diff --git a/components/tree/demo/checkbox.md b/components/tree/demo/checkbox.md new file mode 100644 index 0000000000..ebfe757edb --- /dev/null +++ b/components/tree/demo/checkbox.md @@ -0,0 +1,32 @@ +# 基本 + +- order: 1 + +提供复选框操作功能。 + +--- + +````jsx +var Tree = antd.Tree; +var TreeNode = Tree.TreeNode; +React.render( + + + leaf + + + leaf + leaf + + leaf + leaf + + + leaf + + leaf + + +, document.getElementById('components-tree-demo-checkbox')); +```` + diff --git a/components/tree/index.jsx b/components/tree/index.jsx index fd2b5a97de..a90d9afd55 100644 --- a/components/tree/index.jsx +++ b/components/tree/index.jsx @@ -8,7 +8,6 @@ var antDTree = React.createClass({ prefixCls: 'ant-tree' }; }, - render() { return {this.props.children} diff --git a/components/tree/index.md b/components/tree/index.md index 5853657c38..e15d291eff 100644 --- a/components/tree/index.md +++ b/components/tree/index.md @@ -5,4 +5,13 @@ --- +## 何时使用 +简单的树形菜单应用，暂不支持键盘操作。 + +## API + +| 参数 | 说明 | 类型 | 默认值 | +|-----------|------------------------------------------|------------|--------| +| checkable | whether support checked | bool | false | +| expandAll | expand all treeNodes | bool | false | \ No newline at end of file diff --git a/package.json b/package.json index f912ded94e..c87105e40b 100644 --- a/package.json +++ b/package.json @@ -56,7 +56,7 @@ "rc-table": "~3.1.0", "rc-tabs": "~5.2.0", "rc-tooltip": "~2.4.0", - "rc-tree": "~0.10.0", + "rc-tree": "~0.12.1", "rc-util": "~2.0.3", "react-slick": "~0.6.4" }, diff --git a/style/components/tree.less b/style/components/tree.less index a0393182ee..70f8acceca 100644 --- a/style/components/tree.less +++ b/style/components/tree.less @@ -1,4 +1,4 @@ -@treePrefixCls: rc-tree; +@treePrefixCls: ant-tree; .@{treePrefixCls} { margin:0; padding:5px; @@ -30,7 +30,7 @@ border:0 none; cursor: pointer;outline:none; background-color:transparent; background-repeat:no-repeat; background-attachment: scroll; //background-image:url("./img/zTreeStandard.png"); - background-image:url("https://t.alipayobjects.com/images/T1.ANfXhXtXXXXXXXX.png"); + background-image:url("https://t.alipayobjects.com/images/T1NcthXkFdXXXXXXXX.png"); } span.button.roots_open { background-position: -92px 0; } span.button.roots_close{background-position:-74px 0} @@ -38,31 +38,33 @@ span.button.center_close{background-position:-74px -18px} span.button.bottom_open{background-position:-92px -36px} span.button.bottom_close{background-position:-74px -36px} - - span.button.center_docu{background-position:-56px -18px} - span.button.bottom_docu{background-position:-56px -36px} + span.button.noline_open{background-position:-92px -72px} + span.button.noline_close{background-position:-74px -72px} span.button.chk { - width: 13px; height: 13px; - margin: 0 3px 0 0; + width: 15px; height: 16px; + // margin: 0 3px 0 0; + margin: 3px 5px 0 3px; cursor: auto; } span.button.chk.checkbox_false_full {background-position:0 0} + span.button.chk.checkbox_false_full:hover {background-position:0 -15px} span.button.chk.checkbox_false_full_focus {background-position:0 -14px} span.button.chk.checkbox_false_part {background-position:0 -28px} span.button.chk.checkbox_false_part_focus {background-position:0 -42px} span.button.chk.checkbox_false_disable {background-position:0 -56px} - span.button.chk.checkbox_true_full {background-position:-14px 0} + span.button.chk.checkbox_true_full {background-position:-15px 0} + span.button.chk.checkbox_true_full:hover {background-position:-15px -15px} span.button.chk.checkbox_true_full_focus {background-position:-14px -14px} - span.button.chk.checkbox_true_part {background-position:-14px -28px} + span.button.chk.checkbox_true_part {background-position:-14px -30px} span.button.chk.checkbox_true_part_focus {background-position:-14px -42px} span.button.chk.checkbox_true_disable {background-position:-14px -56px} } - &-selected{ + /*&-selected{ background-color:#FFE6B0; border:1px #FFB951 solid; opacity:0.8; - } + }*/ &-treenode-switcher { display: inline-block; @@ -85,4 +87,4 @@ &-switcher__close { //background-position: -74px 0; } -} +} \ No newline at end of file From 6da7db4ec2e2ae49b2c75c5f1da85b48159b1960 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=84=B6=E5=88=99?= Date: Mon, 10 Aug 2015 20:23:18 +0800 Subject: [PATCH 03/17] up rc-tree version --- components/tree/demo/basic.md | 29 ++++---- components/tree/demo/checkbox.md | 28 ++++--- package.json | 4 +- style/components/tree.less | 122 ++++++++++++++----------------- 4 files changed, 84 insertions(+), 99 deletions(-) diff --git a/components/tree/demo/basic.md b/components/tree/demo/basic.md index 5f36be08ed..809f215f99 100644 --- a/components/tree/demo/basic.md +++ b/components/tree/demo/basic.md @@ -9,30 +9,27 @@ ````jsx var Tree = antd.Tree; var TreeNode = Tree.TreeNode; -function handleSelect(selected, c) { - console.log('selected: ', selected, c ); +function handleSelect(selected, c, selectedKeys) { + console.log('selected: ', selected, c, selectedKeys ); } function handleChecked(checked, c) { console.log('checked: ', checked, c ); } React.render( - + + leaf + + + leaf leaf - - - leaf - leaf - - leaf - leaf - leaf - - leaf - - + leaf + + + leaf + leaf + , document.getElementById('components-tree-demo-basic')); ```` - diff --git a/components/tree/demo/checkbox.md b/components/tree/demo/checkbox.md index ebfe757edb..8d73ffecf1 100644 --- a/components/tree/demo/checkbox.md +++ b/components/tree/demo/checkbox.md @@ -9,24 +9,22 @@ ````jsx var Tree = antd.Tree; var TreeNode = Tree.TreeNode; +var Checkbox = antd.Checkbox; React.render( - - + + + leaf + + + leaf leaf - - - leaf - leaf - - leaf - leaf - leaf - - leaf - - + leaf + + + leaf + leaf + , document.getElementById('components-tree-demo-checkbox')); ```` - diff --git a/package.json b/package.json index c87105e40b..1e17edc328 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,7 @@ "is-equal-shallow": "~0.1.3", "object-assign": "3.x", "rc-calendar": "~3.12.3", - "rc-checkbox": "~1.0.6", + "rc-checkbox": "~1.1.0", "rc-collapse": "~1.2.3", "rc-dialog": "~4.4.0", "rc-dropdown": "~1.1.1", @@ -56,7 +56,7 @@ "rc-table": "~3.1.0", "rc-tabs": "~5.2.0", "rc-tooltip": "~2.4.0", - "rc-tree": "~0.12.1", + "rc-tree": "~0.13.0", "rc-util": "~2.0.3", "react-slick": "~0.6.4" }, diff --git a/style/components/tree.less b/style/components/tree.less index 70f8acceca..00474c5254 100644 --- a/style/components/tree.less +++ b/style/components/tree.less @@ -2,74 +2,70 @@ .@{treePrefixCls} { margin:0; padding:5px; - li { - padding: 0; - margin: 0; - list-style: none; - line-height: 14px; - white-space: nowrap; - outline: 0; - - ul{ margin:0; padding:0 0 0 18px} - ul.line{ - //background:url(./img/line_conn.gif) 0 0 repeat-y; - background:url(https://t.alipayobjects.com/images/T13BtfXl0mXXXXXXXX.gif) 0 0 repeat-y; + padding: 0; margin: 0; + list-style: none; white-space: nowrap; outline: 0; + ul { + margin:0; padding:0 0 0 18px; + &.@{treePrefixCls}-line{ + background:url(https://t.alipayobjects.com/images/T13BtfXl0mXXXXXXXX.gif) 0 0 repeat-y; + } } a { + display: inline-block; padding:1px 3px 0 0; margin:0; - cursor:pointer; height:17px; - background-color: transparent; - text-decoration:none; - vertical-align:top; display: inline-block + cursor:pointer; height:20px; + text-decoration:none; vertical-align:top; } - span {line-height:16px; margin-right:2px} - span.button { - line-height:0; margin:0; width:16px; height:16px; - display: inline-block; vertical-align:middle; - border:0 none; cursor: pointer;outline:none; - background-color:transparent; background-repeat:no-repeat; background-attachment: scroll; - //background-image:url("./img/zTreeStandard.png"); - background-image:url("https://t.alipayobjects.com/images/T1NcthXkFdXXXXXXXX.png"); + span { + line-height:20px; margin-right:2px; + &.@{treePrefixCls}-button { + line-height:0; margin:0; width:16px; height:16px; + display: inline-block; vertical-align:middle; + border:0 none; cursor: pointer;outline:none; + background-color:transparent; background-repeat:no-repeat; background-attachment: scroll; + background-image:url("https://t.alipayobjects.com/images/T1NcthXkFdXXXXXXXX.png"); + &.@{treePrefixCls}-switcher { + &-disabled { + background: #fff; position: relative; + &:after{content: '-'; position: absolute; top: 8px; left: 6px; color: gray;} + } + &.@{treePrefixCls}-roots_open { background-position: -94px 0} + &.@{treePrefixCls}-roots_close{ background-position:-76px 0} + &.@{treePrefixCls}-center_open{ background-position:-94px -18px} + &.@{treePrefixCls}-center_close{ background-position:-76px -18px} + &.@{treePrefixCls}-bottom_open{ background-position:-94px -36px} + &.@{treePrefixCls}-bottom_close{ background-position:-76px -36px} + &.@{treePrefixCls}-noline_open{ background-position:-94px -72px} + &.@{treePrefixCls}-noline_close{ background-position:-76px -72px} + } + &.@{treePrefixCls}-chk { + width: 15px; height: 15px; margin: 0 3px; + &-disabled { + background-position: 0 -28px; + } + &.@{treePrefixCls}-checkbox_false_full {background-position:0 0} + &.@{treePrefixCls}-checkbox_false_full_focus {background-position:0 -14px} + &.@{treePrefixCls}-checkbox_false_part {background-position:0 -28px} + &.@{treePrefixCls}-checkbox_false_part_focus {background-position:0 -42px} + &.@{treePrefixCls}-checkbox_false_disable {background-position:0 -56px} + &.@{treePrefixCls}-checkbox_true_full {background-position:-14px 0} + &.@{treePrefixCls}-checkbox_true_full_focus {background-position:-14px -14px} + &.@{treePrefixCls}-checkbox_true_part {background-position:-14px -30px} + &.@{treePrefixCls}-checkbox_true_part_focus {background-position:-14px -42px} + &.@{treePrefixCls}-checkbox_true_disable {background-position:-14px -56px} + } + } } - span.button.roots_open { background-position: -92px 0; } - span.button.roots_close{background-position:-74px 0} - span.button.center_open{background-position:-92px -18px} - span.button.center_close{background-position:-74px -18px} - span.button.bottom_open{background-position:-92px -36px} - span.button.bottom_close{background-position:-74px -36px} - span.button.noline_open{background-position:-92px -72px} - span.button.noline_close{background-position:-74px -72px} - - span.button.chk { - width: 15px; height: 16px; - // margin: 0 3px 0 0; - margin: 3px 5px 0 3px; - cursor: auto; - } - span.button.chk.checkbox_false_full {background-position:0 0} - span.button.chk.checkbox_false_full:hover {background-position:0 -15px} - span.button.chk.checkbox_false_full_focus {background-position:0 -14px} - span.button.chk.checkbox_false_part {background-position:0 -28px} - span.button.chk.checkbox_false_part_focus {background-position:0 -42px} - span.button.chk.checkbox_false_disable {background-position:0 -56px} - span.button.chk.checkbox_true_full {background-position:-15px 0} - span.button.chk.checkbox_true_full:hover {background-position:-15px -15px} - span.button.chk.checkbox_true_full_focus {background-position:-14px -14px} - span.button.chk.checkbox_true_part {background-position:-14px -30px} - span.button.chk.checkbox_true_part_focus {background-position:-14px -42px} - span.button.chk.checkbox_true_disable {background-position:-14px -56px} } - - /*&-selected{ + &-treenode-disabled { + >span, >a { + color: gray; + } + } + &-selected{ background-color:#FFE6B0; border:1px #FFB951 solid; opacity:0.8; - }*/ - - &-treenode-switcher { - display: inline-block; - width: 18px; - height: 18px; } &-icon__open { margin-right: 2px; @@ -81,10 +77,4 @@ background-position: -110px 0; vertical-align: top; } - &-switcher__open { - //background-position: -92px 0; - } - &-switcher__close { - //background-position: -74px 0; - } -} \ No newline at end of file +} From 82bf118a73e5f7496f0817bc42ff168e619b93b1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=84=B6=E5=88=99?= Date: Fri, 14 Aug 2015 23:28:20 +0800 Subject: [PATCH 04/17] up iconfont --- components/tree/demo/basic.md | 10 ++----- components/tree/demo/checkbox.md | 1 - package.json | 2 +- style/components/tree.less | 46 +++++++++++++++++++++++++------- 4 files changed, 39 insertions(+), 20 deletions(-) diff --git a/components/tree/demo/basic.md b/components/tree/demo/basic.md index 809f215f99..44cb2657d6 100644 --- a/components/tree/demo/basic.md +++ b/components/tree/demo/basic.md @@ -9,27 +9,21 @@ ````jsx var Tree = antd.Tree; var TreeNode = Tree.TreeNode; -function handleSelect(selected, c, selectedKeys) { - console.log('selected: ', selected, c, selectedKeys ); -} function handleChecked(checked, c) { console.log('checked: ', checked, c ); } React.render( - - + + leaf leaf - leaf leaf - leaf leaf - leaf , document.getElementById('components-tree-demo-basic')); ```` diff --git a/components/tree/demo/checkbox.md b/components/tree/demo/checkbox.md index 8d73ffecf1..dd3455625d 100644 --- a/components/tree/demo/checkbox.md +++ b/components/tree/demo/checkbox.md @@ -9,7 +9,6 @@ ````jsx var Tree = antd.Tree; var TreeNode = Tree.TreeNode; -var Checkbox = antd.Checkbox; React.render( diff --git a/package.json b/package.json index 1e17edc328..389985635c 100644 --- a/package.json +++ b/package.json @@ -56,7 +56,7 @@ "rc-table": "~3.1.0", "rc-tabs": "~5.2.0", "rc-tooltip": "~2.4.0", - "rc-tree": "~0.13.0", + "rc-tree": "~0.13.1", "rc-util": "~2.0.3", "react-slick": "~0.6.4" }, diff --git a/style/components/tree.less b/style/components/tree.less index 00474c5254..fd88b1c28e 100644 --- a/style/components/tree.less +++ b/style/components/tree.less @@ -1,7 +1,24 @@ @treePrefixCls: ant-tree; +@import "../mixins/iconfont"; +@openIcon: '\e60f'; +.switcher_icon() { + position: relative; + &:after { + .iconfont-size-under-12px(6px); + content: @openIcon; + display: inline-block; + font-family: 'anticon'; + font-weight: bold; + position: absolute; + top: 10px; + right: 4px; + color: #666; + } +} + .@{treePrefixCls} { - margin:0; padding:5px; + margin:0; padding:5px; font-size: 12px; li { padding: 0; margin: 0; list-style: none; white-space: nowrap; outline: 0; @@ -16,6 +33,7 @@ padding:1px 3px 0 0; margin:0; cursor:pointer; height:20px; text-decoration:none; vertical-align:top; + color: #666; } span { line-height:20px; margin-right:2px; @@ -30,17 +48,25 @@ background: #fff; position: relative; &:after{content: '-'; position: absolute; top: 8px; left: 6px; color: gray;} } - &.@{treePrefixCls}-roots_open { background-position: -94px 0} - &.@{treePrefixCls}-roots_close{ background-position:-76px 0} - &.@{treePrefixCls}-center_open{ background-position:-94px -18px} - &.@{treePrefixCls}-center_close{ background-position:-76px -18px} - &.@{treePrefixCls}-bottom_open{ background-position:-94px -36px} - &.@{treePrefixCls}-bottom_close{ background-position:-76px -36px} - &.@{treePrefixCls}-noline_open{ background-position:-94px -72px} - &.@{treePrefixCls}-noline_close{ background-position:-76px -72px} + background-position: 0 20px; + &.@{treePrefixCls}-roots_open, + &.@{treePrefixCls}-center_open, + &.@{treePrefixCls}-bottom_open, + &.@{treePrefixCls}-noline_open{ .switcher_icon(); } + &.@{treePrefixCls}-roots_close, + &.@{treePrefixCls}-center_close, + &.@{treePrefixCls}-bottom_close, + &.@{treePrefixCls}-noline_close{ + .switcher_icon(); + &:after{ + .ie-rotate(3); + // .rotate(270deg); + transform: rotate(270deg) scale(0.5); + } + } } &.@{treePrefixCls}-chk { - width: 15px; height: 15px; margin: 0 3px; + width: 15px; height: 15px; margin: 0 3px 0 0; &-disabled { background-position: 0 -28px; } From 61f061b00ffca5859ef80bdfd3cf591d3e217da6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=84=B6=E5=88=99?= Date: Sat, 15 Aug 2015 23:45:25 +0800 Subject: [PATCH 05/17] up api --- components/tree/demo/basic.md | 5 +---- components/tree/demo/checkbox.md | 5 ++++- components/tree/index.md | 19 ++++++++++++++++--- package.json | 2 +- style/components/tree.less | 20 ++++---------------- 5 files changed, 26 insertions(+), 25 deletions(-) diff --git a/components/tree/demo/basic.md b/components/tree/demo/basic.md index 44cb2657d6..5d1db2db8a 100644 --- a/components/tree/demo/basic.md +++ b/components/tree/demo/basic.md @@ -9,11 +9,8 @@ ````jsx var Tree = antd.Tree; var TreeNode = Tree.TreeNode; -function handleChecked(checked, c) { - console.log('checked: ', checked, c ); -} React.render( - + leaf diff --git a/components/tree/demo/checkbox.md b/components/tree/demo/checkbox.md index dd3455625d..baa35506a4 100644 --- a/components/tree/demo/checkbox.md +++ b/components/tree/demo/checkbox.md @@ -9,8 +9,11 @@ ````jsx var Tree = antd.Tree; var TreeNode = Tree.TreeNode; +function handleCheck(checked, c, checkedKeys) { + console.log('checked: ', checked, c ); +} React.render( - + leaf diff --git a/components/tree/index.md b/components/tree/index.md index e15d291eff..9d48cf8eb4 100644 --- a/components/tree/index.md +++ b/components/tree/index.md @@ -11,7 +11,20 @@ ## API -| 参数 | 说明 | 类型 | 默认值 | +### Tree props + +| 参数 | 说明 | 类型 | 默认值 | |-----------|------------------------------------------|------------|--------| -| checkable | whether support checked | bool | false | -| expandAll | expand all treeNodes | bool | false | \ No newline at end of file +| checkable | 是否支持选中 | bool | false | +|defaultExpandAll | 设置展开所有树节点 | bool | false | +|defaultExpandedKeys | 展开指定的树节点 | String[] | false | +|defaultCheckedKeys | 默认选中的树节点 | String[] | [] | +|onCheck | 点击树节点触发 | function(e:{checked:bool,node,checkedKeys}) | - | + +### TreeNode props + +| 参数 | 说明 | 类型 | 默认值 | +|-----------|------------------------------------------|------------|--------| +|disabled | 禁掉响应 | bool | false | +|title | 标题 | String | '---' | +|key | 被树的selectedKeys或defaultSelectedKeys所用 | String | 内部计算出的节点位置 | diff --git a/package.json b/package.json index 389985635c..5c1c7d6075 100644 --- a/package.json +++ b/package.json @@ -56,7 +56,7 @@ "rc-table": "~3.1.0", "rc-tabs": "~5.2.0", "rc-tooltip": "~2.4.0", - "rc-tree": "~0.13.1", + "rc-tree": "~0.14.x", "rc-util": "~2.0.3", "react-slick": "~0.6.4" }, diff --git a/style/components/tree.less b/style/components/tree.less index fd88b1c28e..f4b11d17d6 100644 --- a/style/components/tree.less +++ b/style/components/tree.less @@ -60,26 +60,18 @@ .switcher_icon(); &:after{ .ie-rotate(3); - // .rotate(270deg); transform: rotate(270deg) scale(0.5); } } } - &.@{treePrefixCls}-chk { + &.@{treePrefixCls}-checkbox { width: 15px; height: 15px; margin: 0 3px 0 0; + background-position:0 0; &-disabled { background-position: 0 -28px; } - &.@{treePrefixCls}-checkbox_false_full {background-position:0 0} - &.@{treePrefixCls}-checkbox_false_full_focus {background-position:0 -14px} - &.@{treePrefixCls}-checkbox_false_part {background-position:0 -28px} - &.@{treePrefixCls}-checkbox_false_part_focus {background-position:0 -42px} - &.@{treePrefixCls}-checkbox_false_disable {background-position:0 -56px} - &.@{treePrefixCls}-checkbox_true_full {background-position:-14px 0} - &.@{treePrefixCls}-checkbox_true_full_focus {background-position:-14px -14px} - &.@{treePrefixCls}-checkbox_true_part {background-position:-14px -30px} - &.@{treePrefixCls}-checkbox_true_part_focus {background-position:-14px -42px} - &.@{treePrefixCls}-checkbox_true_disable {background-position:-14px -56px} + &.@{treePrefixCls}-checkbox-checked {background-position:-14px 0} + &.@{treePrefixCls}-checkbox-indeterminate {background-position:-14px -30px} } } } @@ -89,10 +81,6 @@ color: gray; } } - &-selected{ - background-color:#FFE6B0; - border:1px #FFB951 solid; opacity:0.8; - } &-icon__open { margin-right: 2px; background-position: -110px -16px; From bf520267898838a5eb480daf670885e3b4183c6d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=84=B6=E5=88=99?= Date: Sun, 16 Aug 2015 20:04:42 +0800 Subject: [PATCH 06/17] up tree and checkbox --- components/tree/demo/checkbox.md | 2 +- components/tree/index.md | 2 +- style/components/checkbox.less | 21 ++++++ style/components/tree.less | 110 ++++++++++++++++++------------- 4 files changed, 87 insertions(+), 48 deletions(-) diff --git a/components/tree/demo/checkbox.md b/components/tree/demo/checkbox.md index baa35506a4..01b0518378 100644 --- a/components/tree/demo/checkbox.md +++ b/components/tree/demo/checkbox.md @@ -13,7 +13,7 @@ function handleCheck(checked, c, checkedKeys) { console.log('checked: ', checked, c ); } React.render( - + } onCheck={handleCheck}> leaf diff --git a/components/tree/index.md b/components/tree/index.md index 9d48cf8eb4..420bae1bf4 100644 --- a/components/tree/index.md +++ b/components/tree/index.md @@ -15,7 +15,7 @@ | 参数 | 说明 | 类型 | 默认值 | |-----------|------------------------------------------|------------|--------| -| checkable | 是否支持选中 | bool | false | +|checkable | 是否支持选中 | bool/React Node | false | |defaultExpandAll | 设置展开所有树节点 | bool | false | |defaultExpandedKeys | 展开指定的树节点 | String[] | false | |defaultCheckedKeys | 默认选中的树节点 | String[] | [] | diff --git a/style/components/checkbox.less b/style/components/checkbox.less index 8693f9d703..1ea18fb5a3 100644 --- a/style/components/checkbox.less +++ b/style/components/checkbox.less @@ -59,6 +59,27 @@ } } +/* 半选状态 */ +.@{checkboxWrapPrefixCls}-indeterminate { + .@{checkboxInnerPrefixCls} { + border-color: @primary-color; + background-color: rgba(215, 216, 217, 1); + &:after { + transform: rotate(45deg) scale(1); + position: absolute; + left: 4px; + top: 1px; + display: table; + width: 5px; + height: 8px; + border: 2px solid #ffffff; + border-top: 0; + border-left: 0; + content: ' '; + transition: all .2s @ease-out-back .1s; + } + } +} /* 选中状态 */ .@{checkboxWrapPrefixCls}-checked { diff --git a/style/components/tree.less b/style/components/tree.less index f4b11d17d6..a99f610fe2 100644 --- a/style/components/tree.less +++ b/style/components/tree.less @@ -1,5 +1,6 @@ @treePrefixCls: ant-tree; - +@import "./checkbox"; +@checkboxWrapPrefixCls: ant-tree-checkbox; @import "../mixins/iconfont"; @openIcon: '\e60f'; .switcher_icon() { @@ -16,68 +17,85 @@ color: #666; } } - .@{treePrefixCls} { - margin:0; padding:5px; font-size: 12px; + margin: 0; + padding: 5px; + font-size: 12px; li { - padding: 0; margin: 0; - list-style: none; white-space: nowrap; outline: 0; + padding: 0; + margin: 0; + list-style: none; + white-space: nowrap; + outline: 0; ul { - margin:0; padding:0 0 0 18px; - &.@{treePrefixCls}-line{ - background:url(https://t.alipayobjects.com/images/T13BtfXl0mXXXXXXXX.gif) 0 0 repeat-y; - } + margin: 0; + padding: 0 0 0 18px; + &.@{treePrefixCls}-line { + background: url("https://t.alipayobjects.com/images/T13BtfXl0mXXXXXXXX.gif") 0 0 repeat-y; + } } a { display: inline-block; - padding:1px 3px 0 0; margin:0; - cursor:pointer; height:20px; - text-decoration:none; vertical-align:top; + padding: 1px 3px 0 0; + margin: 0; + cursor: pointer; + height: 20px; + text-decoration: none; + vertical-align: top; color: #666; } span { - line-height:20px; margin-right:2px; - &.@{treePrefixCls}-button { - line-height:0; margin:0; width:16px; height:16px; - display: inline-block; vertical-align:middle; - border:0 none; cursor: pointer;outline:none; - background-color:transparent; background-repeat:no-repeat; background-attachment: scroll; - background-image:url("https://t.alipayobjects.com/images/T1NcthXkFdXXXXXXXX.png"); - &.@{treePrefixCls}-switcher { - &-disabled { - background: #fff; position: relative; - &:after{content: '-'; position: absolute; top: 8px; left: 6px; color: gray;} - } - background-position: 0 20px; - &.@{treePrefixCls}-roots_open, - &.@{treePrefixCls}-center_open, - &.@{treePrefixCls}-bottom_open, - &.@{treePrefixCls}-noline_open{ .switcher_icon(); } - &.@{treePrefixCls}-roots_close, - &.@{treePrefixCls}-center_close, - &.@{treePrefixCls}-bottom_close, - &.@{treePrefixCls}-noline_close{ - .switcher_icon(); - &:after{ - .ie-rotate(3); - transform: rotate(270deg) scale(0.5); - } + &.@{treePrefixCls}-switcher, + &.@{treePrefixCls}-iconEle { + line-height: 0; + margin: 0; + width: 16px; + height: 16px; + display: inline-block; + vertical-align: middle; + border: 0 none; + cursor: pointer; + outline: none; + background-color: transparent; + background-repeat: no-repeat; + background-attachment: scroll; + // background-image:url("https://t.alipayobjects.com/images/T1NcthXkFdXXXXXXXX.png"); + } + &.@{treePrefixCls}-switcher { + &-disabled { + background: #fff; + position: relative; + &:after { + content: '-'; + position: absolute; + top: 8px; + left: 6px; + color: gray; } } - &.@{treePrefixCls}-checkbox { - width: 15px; height: 15px; margin: 0 3px 0 0; - background-position:0 0; - &-disabled { - background-position: 0 -28px; + background-position: 0 20px; + &.@{treePrefixCls}-roots_open, + &.@{treePrefixCls}-center_open, + &.@{treePrefixCls}-bottom_open, + &.@{treePrefixCls}-noline_open { + .switcher_icon(); + } + &.@{treePrefixCls}-roots_close, + &.@{treePrefixCls}-center_close, + &.@{treePrefixCls}-bottom_close, + &.@{treePrefixCls}-noline_close { + .switcher_icon(); + &:after { + .ie-rotate(3); + transform: rotate(270deg) scale(0.5); } - &.@{treePrefixCls}-checkbox-checked {background-position:-14px 0} - &.@{treePrefixCls}-checkbox-indeterminate {background-position:-14px -30px} } } } } &-treenode-disabled { - >span, >a { + >span, + >a { color: gray; } } From 23948c8588786875fab5fcabf751b1345c3718ea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=84=B6=E5=88=99?= Date: Sun, 16 Aug 2015 20:38:58 +0800 Subject: [PATCH 07/17] up checkbox --- style/components/checkbox.less | 19 +++++++------------ 1 file changed, 7 insertions(+), 12 deletions(-) diff --git a/style/components/checkbox.less b/style/components/checkbox.less index 1ea18fb5a3..eacd0a2b8c 100644 --- a/style/components/checkbox.less +++ b/style/components/checkbox.less @@ -63,20 +63,15 @@ .@{checkboxWrapPrefixCls}-indeterminate { .@{checkboxInnerPrefixCls} { border-color: @primary-color; - background-color: rgba(215, 216, 217, 1); + 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 #ffffff; - border-top: 0; - border-left: 0; content: ' '; - transition: all .2s @ease-out-back .1s; + transform: scale(1); + position: absolute; + left: 2px; + top: 5px; + width: 8px; + height: 1px; } } } From ad02ebe11481aa7994e03e3f0db2383009d2b8f6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=84=B6=E5=88=99?= Date: Mon, 17 Aug 2015 00:24:39 +0800 Subject: [PATCH 08/17] up mixin fn --- style/components/checkbox.less | 6 +++++- style/components/tree.less | 3 +-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/style/components/checkbox.less b/style/components/checkbox.less index eacd0a2b8c..adda7d8a78 100644 --- a/style/components/checkbox.less +++ b/style/components/checkbox.less @@ -1,4 +1,6 @@ -@checkboxWrapPrefixCls: ant-checkbox; +.checkboxFn(); +.checkboxFn(@checkboxPrefixCls: ant-checkbox) { +@checkboxWrapPrefixCls: @checkboxPrefixCls; @checkboxInnerPrefixCls: ~"@{checkboxWrapPrefixCls}-inner"; /* 一般状态 */ @@ -149,3 +151,5 @@ .@{checkboxWrapPrefixCls} + span { margin-left: 8px; } + +} diff --git a/style/components/tree.less b/style/components/tree.less index a99f610fe2..d845dc9bca 100644 --- a/style/components/tree.less +++ b/style/components/tree.less @@ -1,6 +1,5 @@ @treePrefixCls: ant-tree; -@import "./checkbox"; -@checkboxWrapPrefixCls: ant-tree-checkbox; +.checkboxFn(@checkboxPrefixCls: ant-tree-checkbox); @import "../mixins/iconfont"; @openIcon: '\e60f'; .switcher_icon() { From 4b705d7c8561c4744bcad973393093e4dae8e7fa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=84=B6=E5=88=99?= Date: Mon, 17 Aug 2015 12:17:20 +0800 Subject: [PATCH 09/17] up less --- components/tree/index.jsx | 2 +- style/components/tree.less | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/components/tree/index.jsx b/components/tree/index.jsx index a90d9afd55..02ed4e39a1 100644 --- a/components/tree/index.jsx +++ b/components/tree/index.jsx @@ -9,7 +9,7 @@ var antDTree = React.createClass({ }; }, render() { - return + return {this.props.children} ; } diff --git a/style/components/tree.less b/style/components/tree.less index d845dc9bca..9e1cfa18c6 100644 --- a/style/components/tree.less +++ b/style/components/tree.less @@ -14,6 +14,7 @@ top: 10px; right: 4px; color: #666; + transition: transform .3s ease; } } .@{treePrefixCls} { From 40e998f37702661b010affb740db07508d9375a8 Mon Sep 17 00:00:00 2001 From: ioldfish Date: Mon, 17 Aug 2015 12:49:19 +0800 Subject: [PATCH 10/17] update api --- components/tree/index.md | 1 + 1 file changed, 1 insertion(+) diff --git a/components/tree/index.md b/components/tree/index.md index 420bae1bf4..87a2138e77 100644 --- a/components/tree/index.md +++ b/components/tree/index.md @@ -20,6 +20,7 @@ |defaultExpandedKeys | 展开指定的树节点 | String[] | false | |defaultCheckedKeys | 默认选中的树节点 | String[] | [] | |onCheck | 点击树节点触发 | function(e:{checked:bool,node,checkedKeys}) | - | +|showIcon | 是否设置节点图标 | bool | true | ### TreeNode props From cbcceab1e95002dbc3b9506aa2f921442522abfd Mon Sep 17 00:00:00 2001 From: ioldfish Date: Mon, 17 Aug 2015 12:50:02 +0800 Subject: [PATCH 11/17] fix style --- style/components/tree.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/style/components/tree.less b/style/components/tree.less index 9e1cfa18c6..ac448940f8 100644 --- a/style/components/tree.less +++ b/style/components/tree.less @@ -50,7 +50,7 @@ line-height: 0; margin: 0; width: 16px; - height: 16px; + height: 17px; display: inline-block; vertical-align: middle; border: 0 none; From 4af25dffb25989e21d13004d1416e5847c156eb9 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 17 Aug 2015 15:17:04 +0800 Subject: [PATCH 12/17] code style --- components/carousel/index.jsx | 8 +++----- index.js | 2 +- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/components/carousel/index.jsx b/components/carousel/index.jsx index a3dd9d5750..8412c872d2 100644 --- a/components/carousel/index.jsx +++ b/components/carousel/index.jsx @@ -2,23 +2,21 @@ import Carousel from 'react-slick'; import React from 'react'; import assign from 'object-assign'; -var AntCarousel = React.createClass({ - +const AntCarousel = React.createClass({ getDefaultProps() { return { dots: true, arrows: false }; }, - render() { - var props = assign({}, this.props); + let props = assign({}, this.props); if (props.effect === 'fade') { props.fade = true; } - var className = 'ant-carousel'; + let className = 'ant-carousel'; if (props.vertical) { className = className + ' ant-carousel-vertical'; } diff --git a/index.js b/index.js index ea3c9711ca..d253cb845e 100644 --- a/index.js +++ b/index.js @@ -10,7 +10,7 @@ window.matchMedia = window.matchMedia || function() { }; }; -var antd = { +const antd = { Affix: require('./components/affix'), Datepicker: require('./components/datepicker'), Tooltip: require('./components/tooltip'), From 539ac649982cc15a2762d888b43cad6f01fde469 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 17 Aug 2015 16:42:33 +0800 Subject: [PATCH 13/17] =?UTF-8?q?=E9=99=A4=E4=BA=86=E8=87=AA=E5=AE=9A?= =?UTF-8?q?=E4=B9=89=E9=A1=B5=E8=84=9A=E5=A4=96=EF=BC=8C=E7=82=B9=E5=87=BB?= =?UTF-8?q?=E5=8F=96=E6=B6=88=E4=B8=8D=E9=9C=80=E8=A6=81=E6=89=8B=E5=8A=A8?= =?UTF-8?q?=E8=AE=BE=E7=BD=AE=E5=85=B3=E9=97=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/modal/demo/basic.md | 6 ------ components/modal/demo/custom.md | 3 --- components/modal/index.jsx | 3 +-- 3 files changed, 1 insertion(+), 11 deletions(-) diff --git a/components/modal/demo/basic.md b/components/modal/demo/basic.md index 1c034fb118..ea75bd061a 100644 --- a/components/modal/demo/basic.md +++ b/components/modal/demo/basic.md @@ -26,12 +26,6 @@ var Test = React.createClass({ visible: false }); }, - handleCancel() { - console.log('点击了取消'); - this.setState({ - visible: false - }); - }, render() { return
diff --git a/components/modal/demo/custom.md b/components/modal/demo/custom.md index 0d5c13e1c2..08848efce1 100644 --- a/components/modal/demo/custom.md +++ b/components/modal/demo/custom.md @@ -34,9 +34,6 @@ var Test = React.createClass({ }, handleCancel() { console.log('点击了取消'); - this.setState({ - visible: false - }); }, render() { return
diff --git a/components/modal/index.jsx b/components/modal/index.jsx index 5d5d8d8d1a..6099dc79cc 100644 --- a/components/modal/index.jsx +++ b/components/modal/index.jsx @@ -12,8 +12,7 @@ export default React.createClass({ }, handleCancel() { - var d = this.refs.d; - d.requestClose(); + this.refs.d.requestClose(); }, getDefaultProps() { From 9d5e0a2e58d25937205541ac56b74d854d1048f5 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 17 Aug 2015 16:44:38 +0800 Subject: [PATCH 14/17] remove unused state visible --- components/modal/demo/basic.md | 3 +-- components/modal/index.jsx | 3 +-- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/components/modal/demo/basic.md b/components/modal/demo/basic.md index ea75bd061a..3a438d147d 100644 --- a/components/modal/demo/basic.md +++ b/components/modal/demo/basic.md @@ -31,8 +31,7 @@ var Test = React.createClass({ + onOk={this.handleOk}>

对话框的内容

对话框的内容

对话框的内容

diff --git a/components/modal/index.jsx b/components/modal/index.jsx index 6099dc79cc..d54613af39 100644 --- a/components/modal/index.jsx +++ b/components/modal/index.jsx @@ -6,7 +6,6 @@ function noop() { export default React.createClass({ getInitialState() { return { - visible: false, confirmLoading: false }; }, @@ -53,6 +52,6 @@ export default React.createClass({ 确 定 {loadingIcon} ]; - return ; + return ; } }); From 39226565660f723470b9190b804252f7daba37bc Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 17 Aug 2015 16:54:42 +0800 Subject: [PATCH 15/17] RadioGroup defaultValue --- components/radio/index.md | 1 + 1 file changed, 1 insertion(+) diff --git a/components/radio/index.md b/components/radio/index.md index 2d8f9498cc..6094c20d1f 100644 --- a/components/radio/index.md +++ b/components/radio/index.md @@ -32,3 +32,4 @@ |----------------|----------------------------------|-------------------|--------|--------| | onChange | 选项变化时的回调函数 | Function(e:Event) | 无 | 无 | | value | 用于设置当前选中的值 | String | 无 | 无 | +| defaultValue | 默认选中的值 | String | 无 | 无 | From fab3280ed211b311ba75bab19c4cc9e9ec97cfe3 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 17 Aug 2015 17:03:16 +0800 Subject: [PATCH 16/17] code style update --- components/radio/demo/radiogroup.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/radio/demo/radiogroup.md b/components/radio/demo/radiogroup.md index 1ce350d199..f124fac2a1 100644 --- a/components/radio/demo/radiogroup.md +++ b/components/radio/demo/radiogroup.md @@ -23,7 +23,7 @@ var App = React.createClass({ }); }, render() { - return
+ return
A B @@ -31,7 +31,7 @@ var App = React.createClass({ D
你选中的: {this.state.value}
-
+
; } }); React.render(, document.getElementById('components-radio-demo-radiogroup')); From 662f8889bf89ae5e3f4b31113c421e04c261938b Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 17 Aug 2015 17:28:48 +0800 Subject: [PATCH 17/17] fix menu-item link, #139 --- components/menu/demo/horizontal.md | 5 ++++- style/components/menu.less | 16 +++++++++++++++- 2 files changed, 19 insertions(+), 2 deletions(-) diff --git a/components/menu/demo/horizontal.md b/components/menu/demo/horizontal.md index 9ef8bf9484..11022bf478 100644 --- a/components/menu/demo/horizontal.md +++ b/components/menu/demo/horizontal.md @@ -30,12 +30,15 @@ var App = React.createClass({ 导航二 - 导航三（子菜单）}> + 导航 - 子菜单}> 选项1 选项2 选项3 选项4 + + 导航四 - 链接 + } }); diff --git a/style/components/menu.less b/style/components/menu.less index 0e0776f2d1..ad10a9e6bf 100644 --- a/style/components/menu.less +++ b/style/components/menu.less @@ -156,9 +156,23 @@ & > .@{menuPrefixCls}-item, & > .@{menuPrefixCls}-submenu > .@{menuPrefixCls}-submenu-title { - padding: 15px 20px; + padding: 0 20px; + line-height: 50px; position: relative; top: 1px; + > a { + display: block; + &:before, &:after { + position: absolute; + background-color: rgba(255,255,255,0.001); + width: 20px; + height: 50px; + content: ''; + } + &:before { + left: 0; + } + } } & > .@{menuPrefixCls}-submenu, & > .@{menuPrefixCls}-item {