zanroo/react-treeview

customize from

$3

ปรับแต่งเยอะพอสมควร ไม่ใช้ remote up-stream ของเดิม

$3

npm install zanroo-react-treeview --save

$3

1. example/app.js

$3

1. npm install

2. npm install --global webpack webpack-dev-server gulp-cli

3. gulp

$3

npm run prepublish

How to use

``javascript
import TreeView from "zanroo-react-treeview"
import '../src/default/style.css';
// You can embed style manual
..
..

render() {
return
}
`
Default Theme Styles: (https://github.com/zanroo/react-treeview/blob/master/src/default/style.css)

Prop Values Required

$3


React.PropTypes.Array.Required or React.PropTypes.Object.Required

$3

React.PropTypes.object
`javascript
{
select: true,
firstChildSelect: true,
colSelect: true,
search: true
}
`

$3

React.PropTypes.object
default
`javascript
{
itemName: 'name',
nodeName: 'children',
selectedName: 'selected'
}
`

$3

ดูจาก src/components/decorators.js
รับต่าแค่ตัวที่จะ overwrite
โดยจะได้
`javascript
Loading.propTypes = undefined;

Toggle.propTypes = {
node: React.PropTypes.object.isRequired,
toggled: React.PropTypes.bool
};

Header.propTypes = {
node: React.PropTypes.object.isRequired,
options: React.PropTypes.object.isRequired
};

Selected.propTypes = {
node: React.PropTypes.object.isRequired,
onEvent: React.PropTypes.func.isRequired,
options: React.PropTypes.object.isRequired
};

FirstChildSelected.propTypes = {
onEvent: React.PropTypes.func.isRequired
};

ColSelected.propTypes = {
maxLevel: React.PropTypes.number.isRequired,
onEvent: React.PropTypes.func.isRequired,
colSelected: React.PropTypes.array
};

SearchTree.propTypes = {
onEvent: React.PropTypes.func
};
`

ระวังการ Overwrite decorators.Container ส่วนนี้ default เป็นส่วนที่ส่งค่า props ด้านบนให้ decorators แต่ละตัว
`javascript
Container.propTypes = {
className: React.PropTypes.string,
decorators: React.PropTypes.object.isRequired,
terminal: React.PropTypes.bool.isRequired,
onEvent: React.PropTypes.func.isRequired,
animations: React.PropTypes.oneOfType([
React.PropTypes.object,
React.PropTypes.bool
]).isRequired,
node: React.PropTypes.object.isRequired,
use: React.PropTypes.object,
options: React.PropTypes.object
};
`

$3


ดูจาก src/components/decorators.js
รับต่าแค่ตัวที่จะ overwrite

$3

React.PropTypes.func
arguments แต่ละตัวดูจาก default/events.js, components/treeview.js, components/node.js`
onToggle, onActive, onSelected, onSelectedCol, onFirstChildSelected, onSearch
เมื่อ overwrite ให้เซตค่าตามที่ต้องการ ตาม arguments ที่ได้รับมา ดูตัวอย่างจาก events.js จากในไฟล์ข้างบน โดย arguments ที่ส่งเข้าแต่ละ event reference กับค่าต้นทางอยู่แล้วหากเรียบร้อยจะมี function _render สั่ง render ใหม่อีกรอบตาม cycle ปกติของ React