hoaphantn7604/react-native-checkbox-tree

add onlyLeafCheckboxes and hideAllCheckboxes params

Closed this issue ยท 2 comments

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.

hi @carltian ,
You can use renderItem props to customize the item.

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>
)}