react-native-tree-selection
Version:
A high-performance and lightweight tree selection library for React Native.
100 lines • 3.79 kB
JavaScript
import { cloneDeep, isNull, isObject } from 'lodash';
import { useState } from 'react';
import { StaticData } from '../../constants';
let selectItem = [];
const useTreeSelect = ({ data, onCheckBoxPress, onParentPress, autoSelectParents, autoSelectChildren, childKey, autoExpandable, }) => {
const [refresh, setRefresh] = useState(false);
const [listData, setListData] = useState(cloneDeep(data !== null && data !== void 0 ? data : StaticData));
/**
* This @selectAll function will call when selectAll Parents items.
*/
const selectAll = (item) => {
// Select all parent items.
if (autoSelectParents && (item === null || item === void 0 ? void 0 : item.parent)) {
selectParentItems(item === null || item === void 0 ? void 0 : item.parent);
}
};
/**
* This @onSelectOrUnselect function will call when clicked on checkbox or call when checked checkbox clicked again.
*/
const onSelectOrUnselect = (item, isSelect) => {
var _a;
item.isSelected = isSelect;
selectAll(item);
if (autoSelectChildren &&
item[childKey] &&
isObject(item[childKey]) &&
!isNull(item[childKey])) {
(_a = item[childKey]) === null || _a === void 0 ? void 0 : _a.forEach((child) => onSelectOrUnselect(child, isSelect));
}
reload();
};
/**
* This @reload function will call model value update with isExpanded & isSelected value.
*/
const reload = () => {
setRefresh(!refresh);
selectItem = [];
selectChildrenItems(listData);
};
/**
* This @selectParentItems function will call when checkbox value is change`s and its update that parent item and reflected in UI.
*/
const selectParentItems = (item) => {
var _a;
const children = (_a = item === null || item === void 0 ? void 0 : item[childKey]) !== null && _a !== void 0 ? _a : [];
if ((children === null || children === void 0 ? void 0 : children.length) > 0) {
const check = item[childKey].filter((child) => !(child === null || child === void 0 ? void 0 : child.isSelected));
item.isSelected = check.length === 0;
}
if (item.parent) {
selectParentItems(item.parent);
}
reload();
};
/**
* This @selectChildrenItems function will call when children's value update and reflected in UI.
*/
const selectChildrenItems = (childData) => {
childData.forEach((item) => {
if (item.isSelected) {
selectItem.push(item);
}
if (Array.isArray(item[childKey])) {
selectChildrenItems(item[childKey]);
}
});
};
/**
* showChildren called when you click on any @string key.
*
* It will manipulate the @boolean isExpanded key.
*/
const showChildren = (item) => {
item.isExpanded = !(item === null || item === void 0 ? void 0 : item.isExpanded);
onParentPress(item);
reload();
};
const onPressCheckbox = (item) => {
if (!(item === null || item === void 0 ? void 0 : item.isSelected) && autoExpandable) {
item.isExpanded = !(item === null || item === void 0 ? void 0 : item.isSelected);
}
if (!(item === null || item === void 0 ? void 0 : item.isSelected)) {
onSelectOrUnselect(item, true);
}
else {
onSelectOrUnselect(item, false);
}
onCheckBoxPress(selectItem);
};
return {
selectAll,
onPressCheckbox,
showChildren,
setListData,
listData,
refresh,
};
};
export default useTreeSelect;
//# sourceMappingURL=useTreeSelect.js.map