hoaphantn7604 / react-native-checkbox-tree Goto Github PK
View Code? Open in Web Editor NEWA simple and elegant checkbox tree for React Native.
License: MIT License
A simple and elegant checkbox tree for React Native.
License: MIT License
ví dụ trong readme thì mảng cha chỉ có 1 phần tử. bây giờ em muốn select all n phần tử cha. em nghĩ nên có thêm 1 prop nữa để giúp việc này trở nên dễ dàng hơn
Would be nice if i could customize the entire item, so i could change the position of elements.
In my case i would like to use the icon on the right side of the text instead of left side.
something like:
renderItem(({ item, onSelect, onOpen, onClose, isOpen }) => (
<View>
<Checkbox onCheck={onSelect} />
<Text>{item.label}</Text>
{isOpen ? (
<TouchableOpacity onPress={onClose}>
<Icon name="arrow-up" />
</TouchableOpacity>
) : (
<TouchableOpacity onPress={onOpen}>
<Icon name="arrow-down" />
</TouchableOpacity>
)}
</View>
)
import {StyleSheet, View} from 'react-native';
import CheckboxTree from 'react-native-checkbox-tree';
import ArrowDown from './arrowDown';
import RightArrow from './rightArrow';
import Check from './check';
import Uncheck from './uncheck';
const recursiveData = [
{
shopReportName: 'Name 1',
shopCode: '00001',
shopType: '2',
shopId: 1,
shopName: 'Name 1',
},
{
shopReportName: 'Name 11',
shopCode: '00002',
shopType: '2',
shopId: 11,
shopName: 'Name 11',
},
];
const ApplyJobScreen = () => {
const checkboxTreeRef = useRef();
const intialSelect = () => {
checkboxTreeRef.current.setSelectedItem([{shopName: 'Name 11'}]);
};
useEffect(() => {
if (checkboxTreeRef.current) {
intialSelect();
}
}, [checkboxTreeRef.current]);
return (
<View style={styles.treeContainer}>
<View style={styles.container}>
<CheckboxTree
ref={checkboxTreeRef}
data={recursiveData}
textField="shopName"
childField="childs"
textStyle={{color: 'black'}}
iconColor="black"
openIcon={
<ArrowDown
style={{marginVertical: 8}}
fill="#000"
width="15"
height="15"
/>
}
closeIcon={
<RightArrow
style={{marginVertical: 8}}
fill="#000"
width="15"
height="15"
/>
}
checkIcon={
<Check
style={{marginHorizontal: 8}}
/>
}
unCheckIcon={
<Uncheck
fill="#000"
style={{marginHorizontal: 8}}
/>
}
onSelect={item => {
console.log(`Selected ${item.length} item`);
}}
/>
</View>
</View>
);
};
RN: 0.67.2
OS: Android
I am trying to make the checkbox Name 11
(the second item in the array) selected by default on the rendering, but it doesn't work. The default selection works only for the first item in the recursiveData
array.
Please advice if I am doing something wrong
Thanks
Hi! 👋
Firstly, thanks for your work on this project! 🙂
Today I used patch-package to patch [email protected]
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.
RN version : 0.67.2
The issue happens in Android. Nor checked IOS yet.
The tree is not rendered, only something like a small symbol coming up as shown below in the pic.
The code I used is exactly same as given in the example here https://github.com/hoaphantn7604/react-native-checkbox-tree
The latest React Native installations will give you react@18
and [email protected]
. These are not compatible with version 2.1.0 of this library.
Can you upgrade the library to be compatible with reacct@18
?
I want to make sure that the parent's check box is not checked together when checking the child check box.
How to do that?
When I called local api data that time I saved data in my local storage by using useState() hook, that's cool. but when I bind data in data={dara} that time data is not rendering in react-native-checkbox-tree.
I think There is a problem with onSelect function. it only returns Untick and tick by writing down them to console in latest version.
it does not return anything about current item and does not print number of selected items as you intended to code in example usage.
I am currently using 1.3.4 and it works as expected.
Thank you and have a nice day.
Best regards,
Beton.
Hi, I am trying to use in javascript mode but the onSelect function dont return item. just log tick and untick.
can you help?
tks
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.