add onlyLeafCheckboxes and hideAllCheckboxes params
Closed this issue ยท 2 comments
carltian commented
Hi! ๐
Firstly, thanks for your work on this project! ๐
Today I used patch-package to patch react-native-checkbox-tree@1.2.8 for the project I'm working on.
Here is the diff that solved my problem:
diff --git a/node_modules/react-native-checkbox-tree/src/Hierarchy/index.tsx b/node_modules/react-native-checkbox-tree/src/Hierarchy/index.tsx
index c9b39e4..be19189 100644
--- a/node_modules/react-native-checkbox-tree/src/Hierarchy/index.tsx
+++ b/node_modules/react-native-checkbox-tree/src/Hierarchy/index.tsx
@@ -29,6 +29,8 @@ const HierarchyComponent: Hierarchy = React.forwardRef((props, ref) => {
unCheckIcon,
autoSelectParents = true,
autoSelectChilds = true,
+ onlyLeafCheckboxes = false,
+ hideAllCheckboxes = false,
renderItem
} = props;
@@ -162,10 +164,18 @@ const HierarchyComponent: Hierarchy = React.forwardRef((props, ref) => {
if (!item.tick) {
item.tick = false;
}
+ const isParent = childs && childs.length > 0;
+ let showCheckBox = true;
+ if (onlyLeafCheckboxes) {
+ showCheckBox = !isParent;
+ }
+ if (hideAllCheckboxes) {
+ showCheckBox = false;
+ }
return (
<View style={[styles.item, { marginLeft: iconSize }]} key={index}>
<View style={styles.rowItem}>
- {childs && childs.length > 0 ? (
+ {isParent ? (
<TouchableOpacity
onPress={() => {
showChild(item);
@@ -183,7 +193,7 @@ const HierarchyComponent: Hierarchy = React.forwardRef((props, ref) => {
}
}}>
<View style={styles.center}>
- {_renderIcon(item.tick)}
+ {showCheckBox ? _renderIcon(item.tick) : null}
{renderItem ? renderItem(item) : <Text style={[styles.name, textStyle]} numberOfLines={3}>{item[textField]}</Text>}
</View>
</TouchableOpacity>
diff --git a/node_modules/react-native-checkbox-tree/src/Hierarchy/type.ts b/node_modules/react-native-checkbox-tree/src/Hierarchy/type.ts
index 1869abc..328705d 100644
--- a/node_modules/react-native-checkbox-tree/src/Hierarchy/type.ts
+++ b/node_modules/react-native-checkbox-tree/src/Hierarchy/type.ts
@@ -15,6 +15,8 @@ interface Props {
childField: string;
autoSelectParents?: boolean;
autoSelectChilds?: boolean;
+ onlyLeafCheckboxes?: boolean;
+ hideAllCheckboxes?: boolean;
renderItem?: (item: any)=> JSX.Element;
onSelect: (data: any) => void;
}This issue body was partially generated by patch-package.
hoaphantn7604 commented
hi @carltian ,
You can use renderItem props to customize the item.
hoaphantn7604 commented
hi @carltian,
I updated this package.
Use renderItem to customize everything.
renderItem={({ item, isSelect, isOpen, onOpen, onClose, onSelect }) => (
<View style={styles.wrapItem}>
{isOpen ? (
<TouchableOpacity onPress={onClose}>
<AntDesign size={30} name="arrowright" />
</TouchableOpacity>
) : (
<TouchableOpacity onPress={onOpen}>
<AntDesign size={30} name="arrowdown" />
</TouchableOpacity>
)}
<Text>{item.shopName}</Text>
<Checkbox check={isSelect} onPress={onSelect} />
</View>
)}