feat: 增加liAttr属性，用户可自定义节点的属性内容
This commit is contained in:
izbz wh
commit
c7c1cf82fe
67
CHANGELOG.md
67
CHANGELOG.md
|
|
@ -1,5 +1,15 @@
|
|||
<a name="2.0.6"></a>
|
||||
## [2.0.6](https://github.com/tinper-bee/bee-tree/compare/v2.0.2...v2.0.6) (2019-03-19)
|
||||
<a name="2.0.9"></a>
|
||||
## [2.0.9](https://github.com/tinper-bee/bee-tree/compare/v2.0.8...v2.0.9) (2019-04-10)
|
||||
|
||||
|
||||
|
||||
<a name="2.0.8"></a>
|
||||
## [2.0.8](https://github.com/tinper-bee/bee-tree/compare/v2.0.5...v2.0.8) (2019-04-09)
|
||||
|
||||
|
||||
|
||||
<a name="2.0.5"></a>
|
||||
## [2.0.5](https://github.com/tinper-bee/bee-tree/compare/v2.0.4...v2.0.5) (2019-03-08)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
|
@ -8,18 +18,18 @@
|
|||
|
||||
|
||||
|
||||
<a name="2.0.4"></a>
|
||||
## [2.0.4](https://github.com/tinper-bee/bee-tree/compare/v2.0.3...v2.0.4) (2019-03-07)
|
||||
|
||||
|
||||
|
||||
<a name="2.0.3"></a>
|
||||
## [2.0.3](https://github.com/tinper-bee/bee-tree/compare/v2.0.2...v2.0.3) (2019-03-06)
|
||||
|
||||
|
||||
|
||||
<a name="2.0.2"></a>
|
||||
## [2.0.2](https://github.com/tinper-bee/bee-tree/compare/v2.0.1...v2.0.2) (2019-03-02)
|
||||
|
||||
|
||||
|
||||
<a name="2.0.1"></a>
|
||||
## [2.0.1](https://github.com/tinper-bee/bee-tree/compare/v2.0.0...v2.0.1) (2019-02-28)
|
||||
|
||||
|
||||
|
||||
<a name="2.0.0"></a>
|
||||
# [2.0.0](https://github.com/tinper-bee/bee-tree/compare/v1.1.16...v2.0.0) (2019-02-16)
|
||||
## [2.0.2](https://github.com/tinper-bee/bee-tree/compare/v1.1.16...v2.0.2) (2019-03-02)
|
||||
|
||||
|
||||
|
||||
|
|
@ -169,34 +179,14 @@
|
|||
|
||||
|
||||
<a name="1.0.5"></a>
|
||||
## [1.0.5](https://github.com/tinper-bee/bee-tree/compare/v11.0.3...v1.0.5) (2018-01-25)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* children 为0时不显示图标 ([5481ec6](https://github.com/tinper-bee/bee-tree/commit/5481ec6))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* 含有[3~[B[3~heckStrictly复选框tree ([932b9fa](https://github.com/tinper-bee/bee-tree/commit/932b9fa))
|
||||
* **子节节点children为空数组时，不显示扩展图图标:** 子节点children属性为空数组时，不显示扩展图标 ([3536f71](https://github.com/tinper-bee/bee-tree/commit/3536f71))
|
||||
|
||||
|
||||
### BREAKING CHANGES
|
||||
|
||||
* 示例文档描述优化
|
||||
|
||||
|
||||
|
||||
<a name="11.0.3"></a>
|
||||
## [11.0.3](https://github.com/tinper-bee/bee-tree/compare/v1.0.3...v11.0.3) (2018-01-24)
|
||||
## [1.0.5](https://github.com/tinper-bee/bee-tree/compare/v1.0.3...v1.0.5) (2018-01-25)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **解决配置冲突:** 解决配置冲突 ([fb15e37](https://github.com/tinper-bee/bee-tree/commit/fb15e37))
|
||||
* checkStrictly ([5fa28b2](https://github.com/tinper-bee/bee-tree/commit/5fa28b2))
|
||||
* children 为0时不显示图标 ([5481ec6](https://github.com/tinper-bee/bee-tree/commit/5481ec6))
|
||||
* 修改示例 ([6770417](https://github.com/tinper-bee/bee-tree/commit/6770417))
|
||||
|
||||
|
||||
|
|
@ -218,8 +208,15 @@
|
|||
* **文档补充:** 文档补充 ([c123353](https://github.com/tinper-bee/bee-tree/commit/c123353))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* 含有[3~[B[3~heckStrictly复选框tree ([932b9fa](https://github.com/tinper-bee/bee-tree/commit/932b9fa))
|
||||
* **子节节点children为空数组时，不显示扩展图图标:** 子节点children属性为空数组时，不显示扩展图标 ([3536f71](https://github.com/tinper-bee/bee-tree/commit/3536f71))
|
||||
|
||||
|
||||
### BREAKING CHANGES
|
||||
|
||||
* 示例文档描述优化
|
||||
* **依赖修改、object-assign修改:** 依赖修改、object-assign修改
|
||||
* **依赖组件修改:** y
|
||||
* **组件依赖指向具体版本修改:** 组件依赖指向具体版本修改
|
||||
|
|
|
|||
205
build/Tree.css
205
build/Tree.css
|
|
@ -1,172 +1,6 @@
|
|||
@charset "UTF-8";
|
||||
/* FormGroup */
|
||||
/* Navlayout */
|
||||
/* FormGroup */
|
||||
/* Navlayout */
|
||||
.u-checkbox {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
margin: 0 8px;
|
||||
height: 16px;
|
||||
line-height: 16px;
|
||||
font-size: 14px;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
position: relative;
|
||||
line-height: 1;
|
||||
vertical-align: middle; }
|
||||
.u-checkbox input[type='checkbox'] {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%; }
|
||||
.u-checkbox input[disabled] {
|
||||
cursor: not-allowed; }
|
||||
.u-checkbox input[type='checkbox']:focus + .u-checkbox-label:before {
|
||||
border-color: rgb(245, 60, 50); }
|
||||
.u-checkbox.is-checked .u-checkbox-label:before {
|
||||
-moz-box-shadow: inset 0 0 0 10px #fff;
|
||||
-webkit-box-shadow: inset 0 0 0 10px #fff;
|
||||
box-shadow: inset 0 0 0 10px #fff;
|
||||
border-color: rgb(165, 173, 186); }
|
||||
.u-checkbox.is-checked .u-checkbox-label:after {
|
||||
color: rgb(245, 60, 50);
|
||||
content: "\e658";
|
||||
line-height: 16px;
|
||||
font-size: 12px;
|
||||
font-weight: 600; }
|
||||
.u-checkbox.is-checked.u-checkbox-inverse .u-checkbox-label:before {
|
||||
-moz-box-shadow: inset 0 0 0 10px rgb(245, 60, 50);
|
||||
-webkit-box-shadow: inset 0 0 0 10px rgb(245, 60, 50);
|
||||
box-shadow: inset 0 0 0 10px rgb(245, 60, 50);
|
||||
border-color: rgb(245, 60, 50); }
|
||||
.u-checkbox.is-checked.u-checkbox-inverse .u-checkbox-label:after {
|
||||
color: #fff; }
|
||||
.u-checkbox .u-checkbox-label {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
padding-left: 25px;
|
||||
line-height: 16px;
|
||||
color: #212121; }
|
||||
.u-checkbox .u-checkbox-label:before {
|
||||
-moz-border-radius: 3px;
|
||||
-webkit-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid rgb(165, 173, 186);
|
||||
background-color: #fff;
|
||||
content: '';
|
||||
font-family: 'uf';
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
text-align: center;
|
||||
position: absolute; }
|
||||
.u-checkbox .u-checkbox-label:after {
|
||||
content: '';
|
||||
font-family: 'uf';
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
text-align: center;
|
||||
position: absolute; }
|
||||
.u-checkbox.disabled .u-checkbox-label {
|
||||
cursor: not-allowed;
|
||||
color: #909090; }
|
||||
.u-checkbox.disabled .u-checkbox-label:before {
|
||||
border-color: #DFE1E6;
|
||||
color: #909090; }
|
||||
.u-checkbox.disabled .u-checkbox-label:after {
|
||||
color: #c1c7d0; }
|
||||
|
||||
.u-checkbox.u-checkbox-indeterminate .u-checkbox-label:before {
|
||||
box-shadow: inset 0 0 0 10px #fff;
|
||||
border-color: rgb(165, 173, 186); }
|
||||
|
||||
.u-checkbox.u-checkbox-indeterminate .u-checkbox-label:after {
|
||||
color: rgb(245, 60, 50);
|
||||
content: "\e6ce";
|
||||
line-height: 16px;
|
||||
font-size: 12px;
|
||||
font-weight: 600; }
|
||||
|
||||
.u-checkbox.u-checkbox-indeterminate.u-checkbox-inverse .u-checkbox-label:before {
|
||||
-moz-box-shadow: inset 0 0 0 10px rgb(245, 60, 50);
|
||||
-webkit-box-shadow: inset 0 0 0 10px rgb(245, 60, 50);
|
||||
box-shadow: inset 0 0 0 10px rgb(245, 60, 50);
|
||||
border-color: rgb(245, 60, 50); }
|
||||
|
||||
.u-checkbox.u-checkbox-indeterminate.u-checkbox-inverse .u-checkbox-label:after {
|
||||
color: #fff; }
|
||||
|
||||
.u-checkbox.u-checkbox-success.is-checked .u-checkbox-label:before {
|
||||
-moz-box-shadow: inset 0 0 0 10px #fff;
|
||||
-webkit-box-shadow: inset 0 0 0 10px #fff;
|
||||
box-shadow: inset 0 0 0 10px #fff;
|
||||
border-color: rgb(165, 173, 186); }
|
||||
|
||||
.u-checkbox.u-checkbox-success.is-checked .u-checkbox-label:after {
|
||||
color: rgb(76,175,80); }
|
||||
|
||||
.u-checkbox.u-checkbox-success input[type='checkbox']:focus + .u-checkbox-label:before {
|
||||
border-color: rgb(76,175,80); }
|
||||
|
||||
.u-checkbox.u-checkbox-warning.is-checked .u-checkbox-label:before {
|
||||
-moz-box-shadow: inset 0 0 0 10px #fff;
|
||||
-webkit-box-shadow: inset 0 0 0 10px #fff;
|
||||
box-shadow: inset 0 0 0 10px #fff;
|
||||
border-color: rgb(165, 173, 186); }
|
||||
|
||||
.u-checkbox.u-checkbox-warning.is-checked .u-checkbox-label:after {
|
||||
color: rgb(255,152,0); }
|
||||
|
||||
.u-checkbox.u-checkbox-warning input[type='checkbox']:focus + .u-checkbox-label:before {
|
||||
border-color: rgb(255,152,0); }
|
||||
|
||||
.u-checkbox.u-checkbox-danger.is-checked .u-checkbox-label:before {
|
||||
-moz-box-shadow: inset 0 0 0 10px #fff;
|
||||
-webkit-box-shadow: inset 0 0 0 10px #fff;
|
||||
box-shadow: inset 0 0 0 10px #fff;
|
||||
border-color: rgb(165, 173, 186); }
|
||||
|
||||
.u-checkbox.u-checkbox-danger.is-checked .u-checkbox-label:after {
|
||||
color: rgb(244,67,54); }
|
||||
|
||||
.u-checkbox.u-checkbox-danger input[type='checkbox']:focus + .u-checkbox-label:before {
|
||||
border-color: rgb(244,67,54); }
|
||||
|
||||
.u-checkbox.u-checkbox-dark.is-checked .u-checkbox-label:before {
|
||||
-moz-box-shadow: inset 0 0 0 10px #fff;
|
||||
-webkit-box-shadow: inset 0 0 0 10px #fff;
|
||||
box-shadow: inset 0 0 0 10px #fff;
|
||||
border-color: rgb(165, 173, 186); }
|
||||
|
||||
.u-checkbox.u-checkbox-dark.is-checked .u-checkbox-label:after {
|
||||
color: rgb(97,97,97); }
|
||||
|
||||
.u-checkbox.u-checkbox-dark input[type='checkbox']:focus + .u-checkbox-label:before {
|
||||
border-color: rgb(97,97,97); }
|
||||
|
||||
.u-checkbox.u-checkbox-info.is-checked .u-checkbox-label:before {
|
||||
-moz-box-shadow: inset 0 0 0 10px #fff;
|
||||
-webkit-box-shadow: inset 0 0 0 10px #fff;
|
||||
box-shadow: inset 0 0 0 10px #fff;
|
||||
border-color: rgb(165, 173, 186); }
|
||||
|
||||
.u-checkbox.u-checkbox-info.is-checked .u-checkbox-label:after {
|
||||
color: rgb(0,188,212); }
|
||||
|
||||
.u-checkbox.u-checkbox-info input[type='checkbox']:focus + .u-checkbox-label:before {
|
||||
border-color: rgb(0,188,212); }
|
||||
|
||||
.u-tree {
|
||||
margin: 0;
|
||||
padding: 5px;
|
||||
|
|
@ -179,28 +13,24 @@
|
|||
display: inline-block;
|
||||
line-height: 1;
|
||||
position: relative;
|
||||
vertical-align: middle; }
|
||||
.u-tree .u-tree-checkbox-checked .u-tree-checkbox-inner, .u-tree .u-tree-checkbox-indeterminate .u-tree-checkbox-inner {
|
||||
background-color: rgb(245, 60, 50);
|
||||
border-color: rgb(245, 60, 50); }
|
||||
vertical-align: middle;
|
||||
height: 16px; }
|
||||
.u-tree .u-tree-checkbox-inner {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: inline-block;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border: 1px solid #d9d9d9;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 1px solid rgb(165, 173, 186);
|
||||
border-radius: 3px;
|
||||
background-color: #fff;
|
||||
-webkit-transition: all .3s;
|
||||
transition: all .3s; }
|
||||
.u-tree .u-tree-checkbox-checked .u-tree-checkbox-inner, .u-tree .u-tree-checkbox-indeterminate .u-tree-checkbox-inner {
|
||||
background-color: rgb(245, 60, 50);
|
||||
border-color: rgb(245, 60, 50); }
|
||||
transition: all .3s;
|
||||
box-sizing: border-box; }
|
||||
.u-tree .u-tree-checkbox-disabled .u-tree-checkbox-inner {
|
||||
border-color: #d9d9d9;
|
||||
background-color: #f3f3f3; }
|
||||
border-color: #dfe1e6;
|
||||
background-color: #fff; }
|
||||
.u-tree .u-tree-checkbox-indeterminate .u-tree-checkbox-inner:after {
|
||||
content: ' ';
|
||||
-webkit-transform: scale(1);
|
||||
|
|
@ -214,11 +44,11 @@
|
|||
.u-tree .u-tree-checkbox-disabled.u-tree-checkbox-checked .u-tree-checkbox-inner:after {
|
||||
-webkit-animation-name: none;
|
||||
animation-name: none;
|
||||
border-color: #ccc; }
|
||||
border-color: #c1c7d0; }
|
||||
.u-tree .u-tree-checkbox-disabled .u-tree-checkbox-inner:after {
|
||||
-webkit-animation-name: none;
|
||||
animation-name: none;
|
||||
border-color: #f3f3f3; }
|
||||
border-color: #c1c7d0; }
|
||||
.u-tree .u-tree-checkbox-checked .u-tree-checkbox-inner:after {
|
||||
-webkit-transform: rotate(45deg) scale(1);
|
||||
-ms-transform: rotate(45deg) scale(1);
|
||||
|
|
@ -229,7 +59,7 @@
|
|||
display: table;
|
||||
width: 5px;
|
||||
height: 8px;
|
||||
border: 2px solid #fff;
|
||||
border: 2px solid rgb(245, 60, 50);
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
content: ' ';
|
||||
|
|
@ -245,7 +75,7 @@
|
|||
display: table;
|
||||
width: 5px;
|
||||
height: 8px;
|
||||
border: 2px solid #fff;
|
||||
border: 2px solid rgb(245, 60, 50);
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
content: ' ';
|
||||
|
|
@ -286,7 +116,7 @@
|
|||
padding: 0 0 0 18px; }
|
||||
.u-tree li a {
|
||||
display: inline-block;
|
||||
padding: 2px 5px;
|
||||
padding: 3px 4px;
|
||||
border-radius: 2px;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
|
|
@ -308,9 +138,9 @@
|
|||
.u-tree li span.u-tree-switcher,
|
||||
.u-tree li span.u-tree-iconEle {
|
||||
margin: 0;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
line-height: 16px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
border: 0 none;
|
||||
|
|
@ -358,6 +188,7 @@
|
|||
position: absolute;
|
||||
top: 0;
|
||||
right: 0px;
|
||||
left: 0;
|
||||
color: #666;
|
||||
-webkit-transition: -webkit-transform .3s ease;
|
||||
transition: -webkit-transform .3s ease;
|
||||
|
|
|
|||
|
|
@ -539,7 +539,8 @@ var Tree = function (_React$Component) {
|
|||
|
||||
|
||||
Tree.prototype.onKeyDown = function onKeyDown(e, treeNode) {
|
||||
e.stopPropagation();
|
||||
// e.stopPropagation();
|
||||
|
||||
var props = this.props;
|
||||
var currentPos = treeNode.props.pos;
|
||||
var currentIndex = currentPos.substr(currentPos.lastIndexOf('-') + 1);
|
||||
|
|
@ -560,6 +561,7 @@ var Tree = function (_React$Component) {
|
|||
} else if (e.keyCode == _tinperBeeCore.KeyCode.ENTER) {
|
||||
this.onDoubleClick(treeNode);
|
||||
}
|
||||
this.props.keyFun && this.props.keyFun(e, treeNode);
|
||||
// e.preventDefault();
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -493,6 +493,9 @@ var TreeNode = function (_React$Component) {
|
|||
};
|
||||
|
||||
var liProps = {};
|
||||
if (props.liAttr) {
|
||||
liProps = _extends({}, props.liAttr);
|
||||
}
|
||||
if (props.draggable) {
|
||||
liProps.onDragEnter = this.onDragEnter;
|
||||
liProps.onDragOver = this.onDragOver;
|
||||
|
|
|
|||
|
|
@ -22,13 +22,13 @@ hue-6-2: #e6c07b
|
|||
display: block;
|
||||
overflow-x: auto;
|
||||
padding: 0.5em;
|
||||
color: #abb2bf;
|
||||
background: #282c34;
|
||||
color: #424242;
|
||||
background: #FAFAFA;
|
||||
}
|
||||
|
||||
.hljs-comment,
|
||||
.hljs-quote {
|
||||
color: #5c6370;
|
||||
color: #424242;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
|
|
@ -94,3 +94,129 @@ hue-6-2: #e6c07b
|
|||
.hljs-link {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.component-demo .u-panel {
|
||||
padding: 18px 20px;
|
||||
border: 1px solid #F0F0F0;
|
||||
}
|
||||
.component-demo .u-panel-default .u-panel-heading{
|
||||
background-color: #fff;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.component-demo p{
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.component-demo .component-title{
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.component-demo .component-code{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
color: #E14C46;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.component-demo .u-panel .u-panel-body{
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.component-drawerc .pre-js,.component-drawerc .pre-css{
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
.component-drawerc .drawer-body {
|
||||
padding: 20px 20px;
|
||||
}
|
||||
.component-drawerc .component-code-copy {
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
color: #424242;
|
||||
padding: 10px 0;
|
||||
position: relative;
|
||||
}
|
||||
.component-drawerc .component-code-copy .uf-copy::before{
|
||||
content: "\e6fc";
|
||||
}
|
||||
.component-drawerc .component-code-copy .uf{
|
||||
font-weight: 100;
|
||||
}
|
||||
.component-drawerc .component-code-copy.copy-css{
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.component-drawerc .component-code-copy .u-clipboard{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
/* 抽屉组件样式覆盖 */
|
||||
.component-drawerc{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 100000;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
}
|
||||
.component-drawerc .drawer-mask{
|
||||
background-color: rgba(0,0,0,.3);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: transform 300ms ease-in-out, opacity 300ms ease-in-out;
|
||||
}
|
||||
.component-drawerc .drawer-close{
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.component-drawerc .drawer{
|
||||
position: fixed;
|
||||
background-color: #fff;
|
||||
transition: transform 300ms ease-in-out;
|
||||
overflow: auto;
|
||||
}
|
||||
.component-drawerc .drawer-left{
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
}
|
||||
.component-drawerc .drawer-right{
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
}
|
||||
.component-drawerc .drawer-top{
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.component-drawerc .drawer-bottom{
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.component-drawerc .drawer-header{
|
||||
padding: 0 20px;
|
||||
border-radius: 0;
|
||||
background: #E14C46;
|
||||
color: #fff;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
}
|
||||
.component-drawerc .drawer-header-title{
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
|
@ -4,7 +4,9 @@
|
|||
}
|
||||
.edit-icon {
|
||||
float:right;
|
||||
font-size: 14px;
|
||||
font-size: 16px;
|
||||
height: 16px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.title-con {
|
||||
min-width: 150px;
|
||||
|
|
|
|||
|
|
@ -1,76 +1,82 @@
|
|||
import {Col, Row} from 'bee-layout';
|
||||
import {Panel} from 'bee-panel';
|
||||
import Button from 'bee-button';
|
||||
import React, {Component} from 'react';
|
||||
import React, { Component } from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import { Con, Row, Col } from 'bee-layout';
|
||||
import { Panel } from 'bee-panel';
|
||||
import Drawer from 'bee-drawer';
|
||||
import Clipboard from 'bee-clipboard';
|
||||
import Button from '../src';
|
||||
|
||||
|
||||
const CARET = <i className="uf uf-arrow-down"></i>;
|
||||
|
||||
const CARETUP = <i className="uf uf-arrow-up"></i>;
|
||||
|
||||
|
||||
{demolist}
|
||||
|
||||
class Demo extends Component {
|
||||
constructor(props) {
|
||||
constructor(props){
|
||||
super(props);
|
||||
this.state = {
|
||||
open: false
|
||||
}
|
||||
this.handleClick = this.handleClick.bind(this);
|
||||
}
|
||||
handleClick=()=> {
|
||||
this.setState({ open: !this.state.open })
|
||||
}
|
||||
fCloseDrawer=()=>{
|
||||
this.setState({
|
||||
open: false
|
||||
})
|
||||
}
|
||||
|
||||
handleClick() {
|
||||
this.setState({open: !this.state.open})
|
||||
}
|
||||
|
||||
render() {
|
||||
const {title, example, code, desc, scss_code} = this.props;
|
||||
let caret = this.state.open ? CARETUP : CARET;
|
||||
let text = this.state.open ? "隐藏代码" : "查看代码";
|
||||
render () {
|
||||
const { title, example, code, desc, scss_code } = this.props;
|
||||
|
||||
const header = (
|
||||
<div>
|
||||
{example}
|
||||
<Button style={{"marginTop": "10px"}} shape="block" onClick={this.handleClick}>
|
||||
{caret}
|
||||
{text}
|
||||
</Button>
|
||||
<p className='component-title'>{ title }</p>
|
||||
<p>{ desc }</p>
|
||||
<span className='component-code' onClick={this.handleClick}> 查看源码 <i className='uf uf-arrow-right'/> </span>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<Col md={12} id={title.trim()} >
|
||||
<h3>{title}</h3>
|
||||
<p>{desc}</p>
|
||||
<Panel collapsible headerContent expanded={this.state.open} colors='bordered' header={header}
|
||||
footerStyle={{padding: 0}}>
|
||||
<pre><code className="hljs javascript">{code}</code></pre>
|
||||
{!!scss_code ? <pre><code className="hljs css">{scss_code}</code></pre> : null}
|
||||
</Panel>
|
||||
</Col>
|
||||
)
|
||||
<Col md={12} id={title.trim()} className='component-demo'>
|
||||
<Panel header={header}>
|
||||
{example}
|
||||
</Panel>
|
||||
|
||||
<Drawer className='component-drawerc' title={title} show={this.state.open} placement='right' onClose={this.fCloseDrawer}>
|
||||
<div className='component-code-copy'> JS代码
|
||||
<Clipboard action="copy" text={code}/>
|
||||
</div>
|
||||
<pre className="pre-js">
|
||||
<code className="hljs javascript">{ code }</code>
|
||||
</pre >
|
||||
{!!scss_code ?<div className='component-code-copy copy-css'> SCSS代码
|
||||
<Clipboard action="copy" text={scss_code}/>
|
||||
</div>:null }
|
||||
{ !!scss_code ? <pre className="pre-css">
|
||||
<code className="hljs css">{ scss_code }</code>
|
||||
</pre> : null }
|
||||
</Drawer>
|
||||
</Col>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
class DemoGroup extends Component {
|
||||
constructor(props) {
|
||||
constructor(props){
|
||||
super(props)
|
||||
}
|
||||
|
||||
render() {
|
||||
render () {
|
||||
return (
|
||||
<Row>
|
||||
{DemoArray.map((child, index) => {
|
||||
{DemoArray.map((child,index) => {
|
||||
|
||||
return (
|
||||
<Demo example={child.example} title={child.title} code={child.code} scss_code={child.scss_code}
|
||||
desc={child.desc} key={index}/>
|
||||
)
|
||||
return (
|
||||
<Demo example= {child.example} title= {child.title} code= {child.code} scss_code= {child.scss_code} desc= {child.desc} key= {index}/>
|
||||
)
|
||||
|
||||
})}
|
||||
</Row>
|
||||
)
|
||||
})}
|
||||
</Row>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,4 +1,4 @@
|
|||
# Tree
|
||||
# 树形控件 Tree
|
||||
|
||||
## 何时使用
|
||||
文件夹、组织架构、生物分类、国家地区等等，世间万物的大多数结构都是树形结构。使用树控件可以完整展现其中的层级关系，并具有展开收起选择等交互功能。
|
||||
|
|
@ -10,7 +10,7 @@ import { Tree } from 'tinper-bee';
|
|||
or
|
||||
|
||||
import Tree from 'bee-tree';
|
||||
import bee-tree/build/Tree.css;
|
||||
import 'bee-tree/build/Tree.css';
|
||||
|
||||
```
|
||||
|
||||
|
|
|
|||
26
index.html
26
index.html
|
|
@ -2,23 +2,23 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<title>tinper-bee demo</title>
|
||||
<title>neoui-react-button</title>
|
||||
<link rel="stylesheet" href="./dist/demo.css">
|
||||
<link rel="stylesheet" href="./demo/atom-one-dark.css">
|
||||
<link href="//design.yonyoucloud.com/static/tinper-bee/latest/assets/tinper-bee.css" rel="stylesheet" media="screen" />
|
||||
</head>
|
||||
<body style="background: #eceff1">
|
||||
<div id="tinperBeeDemo"></div>
|
||||
<script src="//cdn.jsdelivr.net/highlight.js/9.8.0/highlight.min.js"></script>
|
||||
<script>
|
||||
hljs.initHighlightingOnLoad();
|
||||
</script>
|
||||
<script src="//design.yonyoucloud.com/static/console-polyfill/console-polyfill.js"></script>
|
||||
<script src="//design.yonyoucloud.com/static/es5-shim/es5-shim.min.js"></script>
|
||||
<script src="//design.yonyoucloud.com/static/es5-shim/es5-sham.min.js"></script>
|
||||
<script src="//design.yonyoucloud.com/static/react/16.0.0/umd/react.development.js"></script>
|
||||
<script src="//design.yonyoucloud.com/static/react/16.0.0/umd/react-dom.development.js"></script>
|
||||
<script src="//design.yonyoucloud.com/static/prop-types/15.6.0/prop-types.min.js"></script>
|
||||
<script src="./dist/demo.js"></script>
|
||||
<div id="tinperBeeDemo"></div>
|
||||
<script src="//cdn.jsdelivr.net/highlight.js/9.8.0/highlight.min.js"></script>
|
||||
<script>
|
||||
hljs.initHighlightingOnLoad();
|
||||
</script>
|
||||
<script src="//design.yonyoucloud.com/static/console-polyfill/console-polyfill.js"></script>
|
||||
<script src="//design.yonyoucloud.com/static/es5-shim/es5-shim.min.js"></script>
|
||||
<script src="//design.yonyoucloud.com/static/es5-shim/es5-sham.min.js"></script>
|
||||
<script src="//design.yonyoucloud.com/static/react/16.8.4/umd/react.production.min.js"></script>
|
||||
<script src="//design.yonyoucloud.com/static/react/16.8.4/umd/react-dom.production.min.js"></script>
|
||||
<script src="//design.yonyoucloud.com/static/prop-types/15.6.0/prop-types.min.js"></script>
|
||||
<script src="./dist/demo.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "bee-tree",
|
||||
"version": "2.0.6",
|
||||
"version": "2.0.10-beta.0",
|
||||
"description": "Tree ui component for react",
|
||||
"keywords": [
|
||||
"react",
|
||||
|
|
@ -40,6 +40,7 @@
|
|||
"babel-runtime": "^6.23.0",
|
||||
"bee-animate": "^1.0.0",
|
||||
"bee-checkbox": "latest",
|
||||
"bee-modal": "latest",
|
||||
"classnames": "^2.2.5",
|
||||
"tinper-bee-core": "latest"
|
||||
},
|
||||
|
|
@ -49,11 +50,13 @@
|
|||
"prop-types": "15.6.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"bee-form-control": "latest",
|
||||
"bee-button": "latest",
|
||||
"bee-clipboard": "latest",
|
||||
"bee-drawer": "0.0.2",
|
||||
"bee-form-control": "latest",
|
||||
"bee-icon": "latest",
|
||||
"bee-layout": "latest",
|
||||
"bee-panel": "latest",
|
||||
"bee-icon": "latest",
|
||||
"chai": "^3.5.0",
|
||||
"console-polyfill": "~0.2.1",
|
||||
"cz-conventional-changelog": "^2.1.0",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
@import "../node_modules/tinper-bee-core/scss/minxin-variables";
|
||||
@import "../node_modules/tinper-bee-core/scss/minxin-mixins";
|
||||
@import "../node_modules/bee-checkbox/src/Checkbox";
|
||||
// @import "../node_modules/bee-checkbox/src/Checkbox";
|
||||
// $loading: url('./assets/img/tree-loading.gif');
|
||||
$loading:url('data:image/gif;base64,R0lGODlhEAAQAKIGAMLY8YSx5HOm4Mjc88/g9Ofw+v///wAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFCgAGACwAAAAAEAAQAAADMGi6RbUwGjKIXCAA016PgRBElAVlG/RdLOO0X9nK61W39qvqiwz5Ls/rRqrggsdkAgAh+QQFCgAGACwCAAAABwAFAAADD2hqELAmiFBIYY4MAutdCQAh+QQFCgAGACwGAAAABwAFAAADD1hU1kaDOKMYCGAGEeYFCQAh+QQFCgAGACwKAAIABQAHAAADEFhUZjSkKdZqBQG0IELDQAIAIfkEBQoABgAsCgAGAAUABwAAAxBoVlRKgyjmlAIBqCDCzUoCACH5BAUKAAYALAYACgAHAAUAAAMPaGpFtYYMAgJgLogA610JACH5BAUKAAYALAIACgAHAAUAAAMPCAHWFiI4o1ghZZJB5i0JACH5BAUKAAYALAAABgAFAAcAAAMQCAFmIaEp1motpDQySMNFAgA7');
|
||||
|
||||
|
|
@ -22,6 +22,7 @@ $treePrefixCls : "u-tree";
|
|||
line-height: 1;
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
height: 16px;
|
||||
}
|
||||
.u-tree-checkbox-checked .u-tree-checkbox-inner, .u-tree-checkbox-indeterminate .u-tree-checkbox-inner {
|
||||
// background-color: $tree-checkbox-color;
|
||||
|
|
@ -32,21 +33,22 @@ $treePrefixCls : "u-tree";
|
|||
top: 0;
|
||||
left: 0;
|
||||
display: inline-block;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border: 1px solid #d9d9d9;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 1px solid $border-color-base;
|
||||
border-radius: 3px;
|
||||
background-color: #fff;
|
||||
-webkit-transition: all .3s;
|
||||
transition: all .3s;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.u-tree-checkbox-checked .u-tree-checkbox-inner, .u-tree-checkbox-indeterminate .u-tree-checkbox-inner {
|
||||
// background-color: $tree-checkbox-color;
|
||||
// border-color: $tree-checkbox-color;
|
||||
}
|
||||
.u-tree-checkbox-disabled .u-tree-checkbox-inner {
|
||||
border-color: #d9d9d9;
|
||||
background-color: #f3f3f3;
|
||||
border-color: #dfe1e6;
|
||||
background-color: #fff;
|
||||
}
|
||||
.u-tree-checkbox-indeterminate .u-tree-checkbox-inner:after {
|
||||
content: ' ';
|
||||
|
|
@ -62,12 +64,12 @@ $treePrefixCls : "u-tree";
|
|||
.u-tree-checkbox-disabled.u-tree-checkbox-checked .u-tree-checkbox-inner:after {
|
||||
-webkit-animation-name: none;
|
||||
animation-name: none;
|
||||
border-color: #ccc;
|
||||
border-color: #c1c7d0;
|
||||
}
|
||||
.u-tree-checkbox-disabled .u-tree-checkbox-inner:after {
|
||||
-webkit-animation-name: none;
|
||||
animation-name: none;
|
||||
border-color: #f3f3f3;
|
||||
border-color: #c1c7d0;
|
||||
}
|
||||
.u-tree-checkbox-checked .u-tree-checkbox-inner:after {
|
||||
-webkit-transform: rotate(45deg) scale(1);
|
||||
|
|
@ -150,7 +152,7 @@ $treePrefixCls : "u-tree";
|
|||
}
|
||||
li a {
|
||||
display: inline-block;
|
||||
padding: 2px 5px;
|
||||
padding: 3px 4px;
|
||||
border-radius: 2px;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
|
|
@ -180,9 +182,9 @@ $treePrefixCls : "u-tree";
|
|||
li span.u-tree-switcher,
|
||||
li span.u-tree-iconEle {
|
||||
margin: 0;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
line-height: 16px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
border: 0 none;
|
||||
|
|
@ -241,6 +243,7 @@ $treePrefixCls : "u-tree";
|
|||
top: 0;
|
||||
// right: 4px;
|
||||
right: 0px;
|
||||
left: 0;
|
||||
color: #666;
|
||||
-webkit-transition: -webkit-transform .3s ease;
|
||||
transition: -webkit-transform .3s ease;
|
||||
|
|
|
|||
|
|
@ -453,7 +453,10 @@ class TreeNode extends React.Component {
|
|||
);
|
||||
};
|
||||
|
||||
const liProps = {};
|
||||
let liProps = {};
|
||||
if(props.liAttr){
|
||||
liProps = Object.assign({},props.liAttr);
|
||||
}
|
||||
if (props.draggable) {
|
||||
liProps.onDragEnter = this.onDragEnter;
|
||||
liProps.onDragOver = this.onDragOver;
|
||||
|
|
|
|||
Loading…
Reference in New Issue