Skip to content

Commit 5d2d5e6

Browse files
chetoncheton
committed
Initial commit
1 parent e80103f commit 5d2d5e6

26 files changed

+24966
-0
lines changed

‎.babelrc

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"presets": ["es2015", "stage-0", "react"]
3+
}

‎.eslintrc

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
{
2+
"plugins": [
3+
"react"
4+
],
5+
"extends": "airbnb",
6+
"env": {
7+
"browser": true,
8+
"node": true,
9+
"es6": true
10+
},
11+
"parser": "babel-eslint",
12+
"parserOptions": {
13+
"ecmaVersion": 7,
14+
"sourceType": "module",
15+
"ecmaFeatures": {
16+
"experimentalObjectRestSpread": true,
17+
"jsx": true
18+
}
19+
},
20+
"rules": {
21+
"arrow-body-style": 0,
22+
"block-spacing": 2,
23+
"brace-style": [2, "1tbs"],
24+
"callback-return": [2, ["cb", "callback", "next"]],
25+
"camelcase": [2, { "properties": "never" }],
26+
"comma-spacing": 2,
27+
"comma-style": [2, "last"],
28+
"comma-dangle": [2, "never"],
29+
"consistent-return": 2,
30+
"curly": [2, "all"],
31+
"default-case": 2,
32+
"dot-notation": [2, { "allowKeywords": true }],
33+
"eol-last": 2,
34+
"eqeqeq": 2,
35+
"func-names": 0,
36+
"indent": [2, 4],
37+
"key-spacing": [2, {
38+
"beforeColon": false,
39+
"afterColon": true
40+
}],
41+
"max-len": [1, 160, 2, { "ignoreComments": true }],
42+
"new-cap": [2, { "newIsCap": true, "capIsNew": false }],
43+
"new-parens": 2,
44+
"no-alert": 2,
45+
"no-array-constructor": 2,
46+
"no-caller": 2,
47+
"no-cond-assign": [2, "except-parens"],
48+
"no-const-assign": 2,
49+
"no-console": [1, { "allow": ["assert", "warn", "error"]}],
50+
"no-else-return": 0,
51+
"no-lone-blocks": 0,
52+
"no-param-reassign": 0,
53+
"no-shadow": 0,
54+
"no-var": 1,
55+
"no-unused-expressions": [2, {
56+
"allowShortCircuit": true,
57+
"allowTernary": true
58+
}],
59+
"no-unused-vars": [1, {
60+
"vars": "local",
61+
"args": "none"
62+
}],
63+
"no-use-before-define": 0,
64+
"object-shorthand": 0,
65+
"one-var": 0,
66+
"one-var-declaration-per-line": 0,
67+
"prefer-const": 0,
68+
"prefer-template": 0,
69+
"quote-props": [0, "as-needed"],
70+
"quotes": [2, "single"],
71+
"space-before-function-paren": 0,
72+
"spaced-comment": 0,
73+
"vars-on-top": 0,
74+
75+
"react/jsx-boolean-value": 0,
76+
"react/jsx-curly-spacing": 1,
77+
"react/jsx-indent-props": [1, 4],
78+
"react/jsx-max-props-per-line": [1, { "maximum": 3 }],
79+
"react/jsx-no-bind": [1, {
80+
"ignoreRefs": false,
81+
"allowArrowFunctions": true,
82+
"allowBind": false
83+
}],
84+
"react/jsx-no-duplicate-props": 1,
85+
"react/jsx-no-undef": 1,
86+
"react/jsx-uses-react": 1,
87+
"react/jsx-uses-vars": 1,
88+
"react/no-danger": 1,
89+
"react/no-did-mount-set-state": 1,
90+
"react/no-did-update-set-state": 1,
91+
"react/no-multi-comp": [1, { "ignoreStateless": true }],
92+
"react/no-unknown-property": 1,
93+
"react/prefer-stateless-function": 1,
94+
"react/prop-types": [1, { "ignore": ["className"] }],
95+
"react/react-in-jsx-scope": 1,
96+
"react/require-extension": 1,
97+
"react/self-closing-comp": 1,
98+
"react/sort-comp": 0,
99+
"react/wrap-multilines": 1
100+
}
101+
}

‎.gitignore

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
node_modules
2+
npm-debug.log
3+
/.nyc_output
4+
/coverage
5+
/lib
6+
/releases

‎.npmignore

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
npm-debug.log
2+
/.nyc_output
3+
/coverage
4+
/releases

‎.stylintrc

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
//
2+
// https://github.com/rossPatton/stylint
3+
//
4+
{
5+
"blocks": false,
6+
"brackets": "always",
7+
"colons": "always",
8+
"colors": false,
9+
"commaSpace": "always",
10+
"commentSpace": false,
11+
"cssLiteral": "never",
12+
"depthLimit": false,
13+
"duplicates": true,
14+
"efficient": "always",
15+
"extendPref": false,
16+
"globalDupe": false,
17+
"indentPref": false,
18+
"leadingZero": "never",
19+
"maxErrors": false,
20+
"maxWarnings": false,
21+
"mixed": false,
22+
"namingConvention": false,
23+
"namingConventionStrict": false,
24+
"none": "never",
25+
"noImportant": true,
26+
"parenSpace": false,
27+
"placeholders": "always",
28+
"prefixVarsWithDollar": "always",
29+
"quotePref": false,
30+
"semicolons": "always",
31+
"sortOrder": false,
32+
"stackedProperties": "never",
33+
"trailingWhitespace": "never",
34+
"universal": false,
35+
"valid": true,
36+
"zeroUnits": "never",
37+
"zIndexNormalize": false
38+
}

‎.travis.yml

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
language: node_js
2+
node_js:
3+
- '5'
4+
- '4'
5+
- '0.12'
6+
- '0.10'
7+
- 'iojs'
8+
after_success:
9+
- npm run coveralls
10+
- npm run coverage-clean

‎README.md

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
# react-infinite-tree [![build status](https://travis-ci.org/cheton/react-infinite-tree.svg?branch=master)](https://travis-ci.org/cheton/react-infinite-tree) [![Coverage Status](https://coveralls.io/repos/cheton/react-infinite-tree/badge.svg)](https://coveralls.io/r/cheton/react-infinite-tree)
2+
[![NPM](https://nodei.co/npm/react-infinite-tree.png?downloads=true&stars=true)](https://nodei.co/npm/react-infinite-tree/)
3+
4+
The [infinite-tree](https://github.com/cheton/infinite-tree) library for React.
5+
6+
Demo: http://cheton.github.io/react-infinite-tree
7+
8+
[![react-infinite-tree](https://raw.githubusercontent.com/cheton/react-infinite-tree/master/media/react-infinite-tree.gif)](http://cheton.github.io/react-infinite-tree)
9+
10+
## Features
11+
* High performance infinite scroll with large data set
12+
* [Customizable renderer](https://github.com/cheton/infinite-tree/wiki/Options#rowrenderer) to render the tree in any form
13+
* [Load nodes on demand](https://github.com/cheton/infinite-tree/wiki/Options#loadnodes)
14+
* Native HTML5 drag and drop API
15+
* A rich set of [APIs](https://github.com/cheton/infinite-tree#api-documentation)
16+
17+
## Browser Support
18+
![Chrome](https://raw.github.com/alrra/browser-logos/master/chrome/chrome_48x48.png)<br>Chrome | ![Edge](https://raw.github.com/alrra/browser-logos/master/edge/edge_48x48.png)<br>Edge | ![Firefox](https://raw.github.com/alrra/browser-logos/master/firefox/firefox_48x48.png)<br>Firefox | ![IE](https://raw.github.com/alrra/browser-logos/master/internet-explorer/internet-explorer_48x48.png)<br>IE |
19+
![Opera](https://raw.github.com/alrra/browser-logos/master/opera/opera_48x48.png)<br>Opera | ![Safari](https://raw.github.com/alrra/browser-logos/master/safari/safari_48x48.png)<br>Safari
20+
--- | --- | --- | --- | --- | --- |
21+
Yes | Yes | Yes| 8+ | Yes | Yes |
22+
Need to include [es5-shim](https://github.com/es-shims/es5-shim#example-of-applying-es-compatability-shims-in-a-browser-project) polyfill for IE8
23+
24+
## Notice
25+
<i>The project is under heavy development and a lot of things are changing. Stay tuned for further updates.</i>
26+
27+
## Installation
28+
```bash
29+
npm install --save react react-dom infinite-tree
30+
npm install --save react-infinite-tree
31+
```
32+
33+
## Usage
34+
```jsx
35+
import React from 'react';
36+
import InfiniteTree from 'react-infinite-tree';
37+
import 'react-infinite-tree/dist/react-infinite-tree.css';
38+
39+
class App extends React.Component {
40+
tree = null;
41+
42+
componentDidMount() {
43+
const data = generateData();
44+
this.tree.loadData(data);
45+
46+
// Select the first node
47+
this.tree.selectNode(this.tree.getChildNodes()[0]);
48+
}
49+
render() {
50+
return (
51+
<div>
52+
<InfiniteTree
53+
ref={(c) => this.tree = c.tree}
54+
autoOpen={true}
55+
droppable={true}
56+
loadNodes={(parentNode, done) => {
57+
const suffix = parentNode.id.replace(/(\w)+/, '');
58+
const nodes = [
59+
{
60+
id: 'node1' + suffix,
61+
label: 'Node 1'
62+
},
63+
{
64+
id: 'node2' + suffix,
65+
label: 'Node 2'
66+
}
67+
];
68+
setTimeout(() => {
69+
done(null, nodes);
70+
}, 1000);
71+
}}
72+
selectable={true} // Defaults to true
73+
shouldSelectNode={(node) => { // Defaults to null
74+
if (!node || (node === this.tree.getSelectedNode())) {
75+
return false; // Prevent from deselecting the current node
76+
}
77+
return true;
78+
}}
79+
onDropNode={(node, e) => {
80+
const source = e.dataTransfer.getData('text');
81+
document.querySelector('#dropped-result').innerHTML = 'Dropped to <b>' + quoteattr(node.label) + '</b>';
82+
}}
83+
onOpenNode={(node) => {
84+
console.log('open node:', node);
85+
}}
86+
onCloseNode={(node) => {
87+
console.log('close node:', node);
88+
}}
89+
onScrollProgress={(progress) => {
90+
document.querySelector('#scrolling-progress').style.width = progress + '%';
91+
}}
92+
onSelect={(node) => {
93+
console.log('select node:', node);
94+
}}
95+
onUpdate={() => {
96+
console.log(this.tree.getSelectedNode());
97+
}}
98+
/>
99+
</div>
100+
);
101+
}
102+
}
103+
```
104+
105+
## API Documentation
106+
107+
Check out API documentation from [infinite-tree](https://github.com/cheton/infinite-tree/wiki):
108+
109+
* [Options](https://github.com/cheton/react-infinite-tree/wiki/Options)
110+
* [Functions: Tree](https://github.com/cheton/react-infinite-tree/wiki/Functions:-Tree)
111+
* [Functions: Node](https://github.com/cheton/react-infinite-tree/wiki/Functions:-Node)
112+
* [Events](https://github.com/cheton/react-infinite-tree/wiki/Events)
113+
114+
## License
115+
116+
Copyright (c) 2016 Cheton Wu
117+
118+
Licensed under the [MIT License](LICENSE).

‎babel-tap

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
#!/usr/bin/env node
2+
'use strict';
3+
4+
process.execPath = require.resolve('.bin/babel-node');
5+
require('tap/bin/run.js');

‎dist/react-infinite-tree.css

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
/* Change the max-height to suit your needs. */
2+
.infinite-tree-content {
3+
max-height: 400px;
4+
}
5+
.infinite-tree-scroll {
6+
overflow: auto;
7+
}
8+
.infinite-tree-content {
9+
outline: 0;
10+
}
11+
.infinite-tree-content .tree-selected.tree-item,
12+
.infinite-tree-content .tree-selected.tree-item:hover {
13+
background: #deecfd;
14+
border: 1px solid #06c;
15+
}
16+
.infinite-tree-content .tree-item {
17+
border: 1px solid transparent;
18+
cursor: default;
19+
}
20+
.infinite-tree-content .tree-item:hover {
21+
background: #f2fdff;
22+
}
23+
.infinite-tree-content .tree-item.highlight {
24+
border: 1px dotted #ccc;
25+
background-color: #f5f6f7;
26+
}
27+
.infinite-tree-content .tree-node {
28+
position: relative;
29+
}
30+
.infinite-tree-content .tree-toggler {
31+
color: #666;
32+
-webkit-user-select: none;
33+
-moz-user-select: none;
34+
-ms-user-select: none;
35+
user-select: none;
36+
}
37+
.infinite-tree-content .tree-toggler:hover {
38+
color: #333;
39+
text-decoration: none;
40+
}
41+
.infinite-tree-content .tree-title {
42+
cursor: pointer;
43+
-webkit-user-select: none;
44+
-moz-user-select: none;
45+
-ms-user-select: none;
46+
user-select: none;
47+
}
48+
.infinite-tree-no-data {
49+
text-align: center;
50+
}
51+

0 commit comments

Comments
 (0)