Skip to content

Commit bf90edc

Browse files
wangzuowangzuo
committed
3.0.0
1 parent ffc69bf commit bf90edc

File tree

5 files changed

+282
-179
lines changed

5 files changed

+282
-179
lines changed

‎README.md‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,21 @@
1-
# react-ui-tree [![Build Status](https://travis-ci.org/pqx/react-ui-tree.svg)](https://travis-ci.org/pqx/react-ui-tree)
1+
# react-ui-tree
2+
[![Build Status](https://travis-ci.org/pqx/react-ui-tree.svg)](https://travis-ci.org/pqx/react-ui-tree)
3+
![https://www.npmjs.com/package/react-ui-tree](https://img.shields.io/npm/v/react-ui-tree.svg)
4+
![https://www.npmjs.com/package/react-ui-tree](https://img.shields.io/npm/dm/react-ui-tree.svg)
5+
6+
27
React tree component
38

49
This project was initially developed for a webpage builder. It maintains an internal tree structure within the component through [js-tree](https://github.com/wangzuo/js-tree).
10+
511
### Demo
612
[https://pqx.github.io/react-ui-tree](https://pqx.github.io/react-ui-tree)
13+
714
### Installation
815
``` sh
916
npm install react-ui-tree --save
1017
```
18+
1119
### Usage
1220
``` javascript
1321
<Tree

‎dist/node.js‎

Lines changed: 119 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,94 +1,135 @@
11
'use strict';
22

3-
var cx = require('classnames');
4-
var React = require('react');
5-
var ReactDOM = require('react-dom');
3+
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
64

7-
var Node = React.createClass({
8-
displayName: 'UITreeNode',
5+
var _classnames = require('classnames');
96

10-
renderCollapse: function renderCollapse() {
11-
var index = this.props.index;
7+
var _classnames2 = _interopRequireDefault(_classnames);
128

13-
if (index.children && index.children.length) {
14-
var collapsed = index.node.collapsed;
9+
var _react = require('react');
1510

16-
return React.createElement('span', {
17-
className: cx('collapse', collapsed ? 'caret-right' : 'caret-down'),
18-
onMouseDown: function onMouseDown(e) {
19-
e.stopPropagation();
20-
},
21-
onClick: this.handleCollapse });
11+
var _react2 = _interopRequireDefault(_react);
12+
13+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
14+
15+
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
16+
17+
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
18+
19+
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
20+
21+
var UITreeNode = function (_Component) {
22+
_inherits(UITreeNode, _Component);
23+
24+
function UITreeNode() {
25+
var _ref;
26+
27+
var _temp, _this, _ret;
28+
29+
_classCallCheck(this, UITreeNode);
30+
31+
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
32+
args[_key] = arguments[_key];
2233
}
2334

24-
return null;
25-
},
26-
renderChildren: function renderChildren() {
27-
var _this = this;
35+
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = UITreeNode.__proto__ || Object.getPrototypeOf(UITreeNode)).call.apply(_ref, [this].concat(args))), _this), _this.renderCollapse = function () {
36+
var index = _this.props.index;
37+
38+
39+
if (index.children && index.children.length) {
40+
var collapsed = index.node.collapsed;
41+
42+
43+
return _react2.default.createElement('span', {
44+
className: (0, _classnames2.default)('collapse', collapsed ? 'caret-right' : 'caret-down'),
45+
onMouseDown: function onMouseDown(e) {
46+
return e.stopPropagation();
47+
},
48+
onClick: _this.handleCollapse
49+
});
50+
}
2851

29-
var index = this.props.index;
30-
var tree = this.props.tree;
31-
var dragging = this.props.dragging;
52+
return null;
53+
}, _this.renderChildren = function () {
54+
var _this$props = _this.props,
55+
index = _this$props.index,
56+
tree = _this$props.tree,
57+
dragging = _this$props.dragging;
3258

33-
if (index.children && index.children.length) {
34-
var childrenStyles = {};
35-
if (index.node.collapsed) childrenStyles.display = 'none';
36-
childrenStyles['paddingLeft'] = this.props.paddingLeft + 'px';
3759

38-
return React.createElement(
60+
if (index.children && index.children.length) {
61+
var childrenStyles = {
62+
paddingLeft: _this.props.paddingLeft
63+
};
64+
65+
return _react2.default.createElement(
66+
'div',
67+
{ className: 'children', style: childrenStyles },
68+
index.children.map(function (child) {
69+
var childIndex = tree.getIndex(child);
70+
71+
return _react2.default.createElement(UITreeNode, {
72+
tree: tree,
73+
index: childIndex,
74+
key: childIndex.id,
75+
dragging: dragging,
76+
paddingLeft: _this.props.paddingLeft,
77+
onCollapse: _this.props.onCollapse,
78+
onDragStart: _this.props.onDragStart
79+
});
80+
})
81+
);
82+
}
83+
84+
return null;
85+
}, _this.handleCollapse = function (e) {
86+
e.stopPropagation();
87+
var nodeId = _this.props.index.id;
88+
89+
if (_this.props.onCollapse) {
90+
_this.props.onCollapse(nodeId);
91+
}
92+
}, _this.handleMouseDown = function (e) {
93+
var nodeId = _this.props.index.id;
94+
var dom = _this.refs.inner;
95+
96+
if (_this.props.onDragStart) {
97+
_this.props.onDragStart(nodeId, dom, e);
98+
}
99+
}, _temp), _possibleConstructorReturn(_this, _ret);
100+
}
101+
102+
_createClass(UITreeNode, [{
103+
key: 'render',
104+
value: function render() {
105+
var _props = this.props,
106+
tree = _props.tree,
107+
index = _props.index,
108+
dragging = _props.dragging;
109+
var node = index.node;
110+
111+
var styles = {};
112+
113+
return _react2.default.createElement(
39114
'div',
40-
{ className: 'children', style: childrenStyles },
41-
index.children.map(function (child) {
42-
var childIndex = tree.getIndex(child);
43-
return React.createElement(Node, {
44-
tree: tree,
45-
index: childIndex,
46-
key: childIndex.id,
47-
dragging: dragging,
48-
paddingLeft: _this.props.paddingLeft,
49-
onCollapse: _this.props.onCollapse,
50-
onDragStart: _this.props.onDragStart
51-
});
52-
})
115+
{
116+
className: (0, _classnames2.default)('m-node', {
117+
placeholder: index.id === dragging
118+
}),
119+
style: styles
120+
},
121+
_react2.default.createElement(
122+
'div',
123+
{ className: 'inner', ref: 'inner', onMouseDown: this.handleMouseDown },
124+
this.renderCollapse(),
125+
tree.renderNode(node)
126+
),
127+
node.collapsed ? null : this.renderChildren()
53128
);
54129
}
130+
}]);
55131

56-
return null;
57-
},
58-
render: function render() {
59-
var tree = this.props.tree;
60-
var index = this.props.index;
61-
var dragging = this.props.dragging;
62-
var node = index.node;
63-
var styles = {};
64-
65-
return React.createElement(
66-
'div',
67-
{ className: cx('m-node', {
68-
'placeholder': index.id === dragging
69-
}), style: styles },
70-
React.createElement(
71-
'div',
72-
{ className: 'inner', ref: 'inner', onMouseDown: this.handleMouseDown },
73-
this.renderCollapse(),
74-
tree.renderNode(node)
75-
),
76-
this.renderChildren()
77-
);
78-
},
79-
handleCollapse: function handleCollapse(e) {
80-
e.stopPropagation();
81-
var nodeId = this.props.index.id;
82-
if (this.props.onCollapse) this.props.onCollapse(nodeId);
83-
},
84-
handleMouseDown: function handleMouseDown(e) {
85-
var nodeId = this.props.index.id;
86-
var dom = this.refs.inner;
87-
88-
if (this.props.onDragStart) {
89-
this.props.onDragStart(nodeId, dom, e);
90-
}
91-
}
92-
});
132+
return UITreeNode;
133+
}(_react.Component);
93134

94-
module.exports = Node;
135+
module.exports = UITreeNode;

0 commit comments

Comments
 (0)