bootstrap react component for view tree
npm install fmihel-react-bootstrap-treebash
$ npm i fmihel-react-bootstrap-tree
`
---
Simple use
`js
import "fmihel-react-bootstrap-tree/style/tree.scss";
import Tree from 'fmihel-react-bootstrap-tree';
class App extends React.Component {
constructor(p){
super(p);
this.onChangeTreeSetup = this.onChangeTreeSetup.bind(this);
this.state={
setup:{}
};
}
onChangeTreeSetup({ setup }) {
this.setState({ setup });
}
render() {
return (
id={'my-tree'}
data={this.props.tree}
setup={this.state.setup}
onChange={this.onChangeTreeSetup}
/>
);
}
}
App.defaultProps = {
data:[
{
id:1,
caption: 'folder-1',
childs: [
{ id:4,caption: 'sub1' },
{ id:5,caption: 'sub2' },
],
},
{
id:2,
caption: 'folder-2',
childs: [
{ id:6,caption: 'sub3' },
{ id:7,caption: 'sub4' },
],
},
{
id:3,
caption: 'folder-3',
childs: [
{ id:8,caption: 'sub5' },
{ id:9,caption: 'sub6' },
],
},
]
};
`
---
Свойства компонента
|name|type|default|global*|notes|
|---|---|---|---|---|
|id|string|||идентификатор верхнего объекта DOM|
|data|array|[]||древовидная структура |
|setup|object|{}||текущая настройка дерева ( какие узлы раскрыты, какиен выделены)|
|idName|string|id|*|имя поля отвечающее за идентификатор|
|captionName|string|caption|*|имя поля отвечающее за текст|
|childsName|string|childs|*|имя поля отвечающее за поля с дочерними узлами|
|IconComponent|object|null|*|компонент отображающий иконку|
|icons|object|icons||объект с описанием иконок для сворачиваемых разворачиваемых и конечных узлов|
|expandOnDoubleClickCaption|boolean|true|*|разворачивать при двойном клике на иконку|
|expandOnDoubleClickIcon|boolean|false|*|разворачивать при двойном клике на тексте|
|collapsing|boolean|false|*|при разворачивании, сворачивать другие неучавствующие в ветке узлы|
|animate|int|0|*|скорость анимации в мс, требует установки `jQuery`|
|className|string||*|дополнительный верхний класс|
|classNameItem|string||*|дополнительный класс для узла|
|styleItem|string \| function||*|дополнительный стиль (или ф-ция возвращающая стиль) для узла|
|styleIcon|string \| function||*|дополнительный стиль (или ф-ция возвращающая стиль) для иконки|
|styleCaption|string \| function||*|дополнительный стиль (или ф-ция возвращающая стиль) для текста|
|onClick|function|undefined|||
|onDoubleClick|function|undefined|||
|onSelect|`function({ [idName]:string, item:object })`|undefined||Событие при выборе узла|
|onChange|`function({ setup:object })`|undefined||Событие на изменение визуального состояния(раскрытие, выбор ..) дерева|
|onGetIcon|function|undefined|||
###### ` global* - можно установить через глобальное статическое свойство Tree.global`
###### ` icons* = {expand:undefined,collapse:undefined,file:undefined}`
---
Утилиты для работы со структурой дерева
`js
Tree.map(tree:array,callback:function,param?:{idName,childsName}):array
`
Возвращает новую карту дерва, для каждого узла вызывает `callback(child,parent)` (если указан), который должен вернуть узел
---
`js
Tree.each(tree:array, callbackOrId:function | string , param?:{idName,childsName} ):object | undefined
`
Цикл по всем узлам дерева tree, до момента пока `callbackOrId(item,parent)` не вернет true (или пока не найден узел с id = callbackOrId). Для верхнего уровня parent = 'root'. Вернет либо найденный элемент или undefined
---
`js
Tree.filter(tree:array, callback:functikon,param?:{childsName} ):object
`
Возыращает новое дерево, для узлов которого `callback(child,parent)` возвращает true
---
`js
Tree.parent(tree, callbackOrId, param?:{idName, childsName}):array | undefined
`
Возвращает родительский узел для узла с id = callbackOrId или для, которого `callback(item,parent)` вернет
true
---
`js
Tree.parents(tree, callbackOrId, param?:{idName, childsName}):array
`
Возырвщает список всех родительских узлов для узла с id = callbackOrId или для, которого `callback(item,parent)` вернет
true
---
`js
Tree.childs(tree, callbackOrId, param?:{idName, childsName}):array | undefined
`
Возвращает список childs, т.е. список соседних элементов для узла с id = callbackOrId или для которого `callback(item,parent)` вернетtrue
---
`js
Tree.eq(id1, id2):boolean
`
Алгоритм сравнения двух идентификаторов. Сравнение производится с привидением типов, но с учетом что false != 0/
---
`js
Tree.scroll(scroll:string, target:string, animate:integer, off:integer)
`
Динамический скролинг контейнера с DOM.id = scroll до попадания DOM.id = target в область видимости внутри scroll.\
scroll - id в дерева (задавать при использовании ``)\
target - id узла\
animate - время анимации в мсек\
off - смещение относительно верхней граница scroll\
---
`txt
param = {idName:string,childsName:string} в случае если ключевые поля в основной структуре
tree имеют другое название, нужно указать их с помощью param ( можно сделать через глобальную настройку Tree.global)
`
---
TreeSetupUtils - утилит работы с состоянием узлов дерева (раскрыты, закрыты, выбраны ... )
$3
`js
import {TreeSetupUtils} from 'fmihel-react-bootstrap-tree';
`
---
`js
TreeSetupUtils.each(setup, callback)
`
Цикл по всем элементам `setup`, вернет id для которого `callback({id,item,setup})` вернет true
---
`js
TreeSetupUtils.map(setup, callback = undefined)
`
Возвращает новый `setup`, выполняя для каждого элемента `callback({id,item,setup})`,
---
`js
TreeSetupUtils.expandTo(tree, setup, toId, idName?:string = 'id', childsName?:string = 'childs')
`
Возвращает новый `setup`, где раскрыты все родительские элементы для toId, при этом не сворачивает другие узлы,
но снимает с них выделенин `(select = false)` и помечает toId
---
Использование утилит для навигации, поиска, позиционирования и т.д.( Issue )
$3
`js
let item = Tree.each(tree,(item,parent)=>{
return item.id === '100';
});
`
$3
`js
let newTree = Tree.filter(tree, (item) => !Tree.eq(item.id, ID));
`
$3
`js
const to = Tree.each(tree, TOID);
if (to ){
if (!('childs' in to))
to.childs = [];
to.childs.push({id:ID,caption:'new'});
}
``