react-native-tree-multi-select 0.8.8 → 0.8.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# react-native-tree-multi-select
|
|
2
2
|
|
|
3
|
-
Tree view with multi
|
|
3
|
+
Super-fast Tree view with multi-selection capabilities, using checkboxes and search filtering.
|
|
4
4
|
|
|
5
5
|
[](https://badge.fury.io/js/react-native-tree-multi-select)    
|
|
6
6
|
|
|
@@ -13,22 +13,22 @@ Tree view with multi selection using checkbox + search filtering.
|
|
|
13
13
|
Using yarn
|
|
14
14
|
|
|
15
15
|
```sh
|
|
16
|
-
yarn add react-native-tree-multi-select
|
|
16
|
+
yarn add react-native-tree-multi-select
|
|
17
17
|
```
|
|
18
18
|
|
|
19
19
|
using npm:
|
|
20
20
|
|
|
21
21
|
```sh
|
|
22
|
-
npm install react-native-tree-multi-select
|
|
22
|
+
npm install react-native-tree-multi-select
|
|
23
23
|
```
|
|
24
24
|
|
|
25
|
-
Dependencies
|
|
25
|
+
Dependencies that need to be installed for this library to work:
|
|
26
26
|
|
|
27
27
|
1. [@shopify/flash-list](https://github.com/Shopify/flash-list)
|
|
28
28
|
2. [react-native-paper](https://github.com/callstack/react-native-paper)
|
|
29
29
|
3. [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons)
|
|
30
30
|
|
|
31
|
-
Make sure to follow the native-related installation for these dependencies.
|
|
31
|
+
Make sure to follow the native-related installation instructions for these dependencies.
|
|
32
32
|
|
|
33
33
|
## Usage
|
|
34
34
|
|
|
@@ -39,18 +39,19 @@ import {
|
|
|
39
39
|
type TreeViewRef
|
|
40
40
|
} from 'react-native-tree-multi-select';
|
|
41
41
|
|
|
42
|
+
// Refer to the Properties table below or the example app for the TreeNode type
|
|
42
43
|
const myData: TreeNode[] = [...];
|
|
43
44
|
|
|
44
|
-
export function
|
|
45
|
+
export function TreeViewUsageExample(){
|
|
45
46
|
const treeViewRef = React.useRef<TreeViewRef | null>(null);
|
|
46
47
|
|
|
47
|
-
//
|
|
48
|
+
// It's recommended to use debounce for the search function (refer to the example app)
|
|
48
49
|
function triggerSearch(text: string){
|
|
49
50
|
// Pass search text to the tree along with the keys on which search is to be done(optional)
|
|
50
51
|
treeViewRef.current?.setSearchText(text, ["name"]);
|
|
51
52
|
}
|
|
52
53
|
|
|
53
|
-
// Callback functions for check and expand state changes
|
|
54
|
+
// Callback functions for check and expand state changes:
|
|
54
55
|
const handleSelectionChange = (checkedIds: string[]) => {
|
|
55
56
|
// NOTE: Do something with updated checkedIds here
|
|
56
57
|
};
|
|
@@ -69,7 +70,7 @@ export function MyAppScreen(){
|
|
|
69
70
|
const onUnselectAllFilteredPress = () => treeViewRef.current?.unselectAllFiltered?.();
|
|
70
71
|
|
|
71
72
|
return(
|
|
72
|
-
// ...
|
|
73
|
+
// ... Remember to keep a fixed height for the parent. Read Flash List docs to know why
|
|
73
74
|
<TreeView
|
|
74
75
|
ref={treeViewRef}
|
|
75
76
|
data={myData}
|
|
@@ -82,19 +83,29 @@ export function MyAppScreen(){
|
|
|
82
83
|
|
|
83
84
|
### Properties
|
|
84
85
|
|
|
85
|
-
| Property | Type
|
|
86
|
-
| ---------------------------------- |
|
|
87
|
-
| `data` | `TreeNode[]`
|
|
88
|
-
| `onCheck` | `(checkedIds: string[]) => void`
|
|
89
|
-
| `onExpand` | `(expandedIds: string[]) => void`
|
|
90
|
-
| `preselectedIds` | `string[]`
|
|
91
|
-
| `
|
|
92
|
-
| `
|
|
93
|
-
| `
|
|
94
|
-
| `
|
|
95
|
-
| `
|
|
86
|
+
| Property | Type | Required | Description |
|
|
87
|
+
| ---------------------------------- | ------------------------------------------------------------ | -------- | ------------------------------------------------------------ |
|
|
88
|
+
| `data` | `TreeNode[]` | Yes | An array of `TreeNode` objects |
|
|
89
|
+
| `onCheck` | `(checkedIds: string[]) => void` | No | Callback when a checkbox is checked |
|
|
90
|
+
| `onExpand` | `(expandedIds: string[]) => void` | No | Callback when a node is expanded |
|
|
91
|
+
| `preselectedIds` | `string[]` | No | An array of `id`s that should be preselected |
|
|
92
|
+
| `indentationMultiplier` | `number` | No | Indentation (`marginStart`) per level (defaults to 15) |
|
|
93
|
+
| `treeFlashListProps` | `TreeFlatListProps` | No | Props for the flash list |
|
|
94
|
+
| `checkBoxViewStyleProps` | `CheckBoxViewStyleProps` | No | Props for the checkbox view |
|
|
95
|
+
| `CheckboxComponent` | `ComponentType<CheckBoxViewProps>` | No | A custom checkbox component. Defaults to React Native Paper's Checkbox |
|
|
96
|
+
| `ExpandCollapseIconComponent` | `ComponentType<ExpandIconProps>` | No | A custom expand/collapse icon component |
|
|
97
|
+
| `ExpandCollapseTouchableComponent` | `ComponentType<TouchableOpacityProps>`<br />(React Native's `TouchableOpacityProps`) | No | A custom expand/collapse touchable component |
|
|
98
|
+
|
|
99
|
+
#### TreeNode
|
|
96
100
|
|
|
97
|
-
|
|
101
|
+
| Property | Type | Required | Description |
|
|
102
|
+
| --------------- | ------------ | -------- | ------------------------------------------------------------ |
|
|
103
|
+
| `id` | `string` | Yes | Unique identifier for the node |
|
|
104
|
+
| `name` | `string` | Yes | The display name of the node |
|
|
105
|
+
| `children` | `TreeNode[]` | No | An array of child `TreeNode` objects |
|
|
106
|
+
| `[key: string]` | `any` | No | Any additional properties for the node <br />(May be useful to perform search on) |
|
|
107
|
+
|
|
108
|
+
#### TreeViewRef
|
|
98
109
|
|
|
99
110
|
| Property | Type | Description |
|
|
100
111
|
| --------------------- | ----------------------------------------------------- | ------------------------------------------------------------ |
|
|
@@ -106,14 +117,35 @@ export function MyAppScreen(){
|
|
|
106
117
|
| `collapseAll` | `() => void` | Collapses all nodes |
|
|
107
118
|
| `setSearchText` | `(searchText: string, searchKeys?: string[]) => void` | Set the search text and optionally the search keys. Default search key is "name"<br /><br />Recommended to call this inside a debounced function if you find any performance issue otherwise. |
|
|
108
119
|
|
|
109
|
-
|
|
120
|
+
#### CheckBoxViewStyleProps
|
|
110
121
|
|
|
111
|
-
| Property
|
|
112
|
-
|
|
|
113
|
-
| `
|
|
114
|
-
| `
|
|
115
|
-
| `
|
|
116
|
-
| `
|
|
122
|
+
| Property | Type | Required | Description |
|
|
123
|
+
| -------------------------- | -------------------------------- | -------- | ------------------------------------------------------ |
|
|
124
|
+
| `outermostParentViewStyle` | `StyleProp<ViewStyle>` | No | Optional style modifier for the outermost parent view. |
|
|
125
|
+
| `checkboxParentViewStyle` | `StyleProp<ViewStyle>` | No | Optional style modifier for the checkbox parent view. |
|
|
126
|
+
| `textTouchableStyle` | `StyleProp<ViewStyle>` | No | Optional style modifier for the text touchable style. |
|
|
127
|
+
| `checkboxProps` | `CheckboxProps` | No | Optional props for the checkbox component. |
|
|
128
|
+
| `textProps` | `TextProps` <br />(React Native) | No | Optional props for the text component. |
|
|
129
|
+
|
|
130
|
+
#### CheckboxProps
|
|
131
|
+
|
|
132
|
+
All properties of `RNPaperCheckboxAndroidProps`(from `react-native-paper`) except for `onPress` and `status`
|
|
133
|
+
|
|
134
|
+
#### TreeFlatListProps
|
|
135
|
+
|
|
136
|
+
All properties of `FlashListProps`(from `@shopify/flash-list`) except for `data` and `renderItem`
|
|
137
|
+
|
|
138
|
+
#### ExpandIconProps
|
|
139
|
+
|
|
140
|
+
| Property | Type | Required | Description |
|
|
141
|
+
| ---------- | ------- | -------- | --------------------------------- |
|
|
142
|
+
| isExpanded | boolean | Yes | Indicates if the icon is expanded |
|
|
143
|
+
|
|
144
|
+
---
|
|
145
|
+
|
|
146
|
+
More customization options are on the way 🙌
|
|
147
|
+
|
|
148
|
+
---
|
|
117
149
|
|
|
118
150
|
## Contributing
|
|
119
151
|
|
|
@@ -127,18 +159,19 @@ MIT
|
|
|
127
159
|
|
|
128
160
|
<p align="center" valign="center">
|
|
129
161
|
<a href="https://liberapay.com/FutureJJ/donate">
|
|
130
|
-
<img src="https://liberapay.com/assets/widgets/donate.svg" alt="LiberPay_Donation_Button"
|
|
162
|
+
<img src="https://liberapay.com/assets/widgets/donate.svg" alt="LiberPay_Donation_Button" height="50" >
|
|
131
163
|
</a>
|
|
132
164
|
|
|
133
|
-
<a href="
|
|
134
|
-
<img src="
|
|
165
|
+
<a href=".github/assets/Jairaj_Jangle_Google_Pay_UPI_QR_Code.jpg">
|
|
166
|
+
<img src=".github/assets/upi.png" alt="Paypal_Donation_Button" height="50" >
|
|
135
167
|
</a>
|
|
136
168
|
|
|
137
169
|
<a href="https://www.paypal.com/paypalme/jairajjangle001/usd">
|
|
138
|
-
<img src="
|
|
170
|
+
<img src=".github/assets/paypal_donate.png" alt="Paypal_Donation_Button" height="50" >
|
|
139
171
|
</a>
|
|
140
172
|
</p>
|
|
141
173
|
|
|
174
|
+
|
|
142
175
|
---
|
|
143
176
|
|
|
144
177
|
Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)
|
|
@@ -38,9 +38,9 @@ export interface TreeViewProps extends NodeListProps {
|
|
|
38
38
|
}
|
|
39
39
|
type CheckboxProps = Omit<RNPaperCheckboxAndroidProps, "onPress" | "status">;
|
|
40
40
|
export interface CheckBoxViewStyleProps {
|
|
41
|
-
outermostParentViewStyle?: StyleProp<ViewStyle
|
|
42
|
-
checkboxParentViewStyle?: StyleProp<ViewStyle
|
|
43
|
-
textTouchableStyle?: StyleProp<ViewStyle
|
|
41
|
+
outermostParentViewStyle?: StyleProp<ViewStyle>;
|
|
42
|
+
checkboxParentViewStyle?: StyleProp<ViewStyle>;
|
|
43
|
+
textTouchableStyle?: StyleProp<ViewStyle>;
|
|
44
44
|
checkboxProps?: CheckboxProps;
|
|
45
45
|
textProps?: TextProps;
|
|
46
46
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"treeView.types.d.ts","sourceRoot":"","sources":["../../../src/types/treeView.types.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,EACR,SAAS,EACT,SAAS,EACT,qBAAqB,EACrB,SAAS,EACZ,MAAM,cAAc,CAAC;AACtB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EACH,KAAK,KAAK,IAAI,2BAA2B,EAC5C,MAAM,4DAA4D,CAAC;AAEpE,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,eAAe,CAAC;AAE1D,MAAM,WAAW,eAAe;IAC5B,UAAU,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,QAAQ;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC;IACtB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAED,MAAM,WAAW,qBAAsB,SAAQ,QAAQ;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAGD,MAAM,MAAM,iBAAiB,CAAC,KAAK,GAAG,GAAG,IAAI,IAAI,CAC7C,cAAc,CAAC,KAAK,CAAC,EACrB,MAAM,GACJ,YAAY,CACjB,CAAC;AAEF,MAAM,WAAW,sBAAsB;IACnC,sBAAsB,CAAC,EAAE,sBAAsB,CAAC;IAEhD,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAE/B,iBAAiB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;IAC3D,2BAA2B,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;IACnE,gCAAgC,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC;CACjF;AAED,MAAM,WAAW,SAAU,SAAQ,sBAAsB;IACrD,IAAI,EAAE,qBAAqB,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,aAAc,SAAQ,sBAAsB;IACzD,kBAAkB,CAAC,EAAE,iBAAiB,CAAC;CAC1C;AAED,MAAM,WAAW,aAAc,SAAQ,aAAa;IAChD,IAAI,EAAE,QAAQ,EAAE,CAAC;IAEjB,OAAO,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACzC,QAAQ,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAE3C,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;CAC7B;AAED,KAAK,aAAa,GAAG,IAAI,CAAC,2BAA2B,EAAE,SAAS,GAAG,QAAQ,CAAC,CAAC;AAE7E,MAAM,WAAW,sBAAsB;IAEnC,wBAAwB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,
|
|
1
|
+
{"version":3,"file":"treeView.types.d.ts","sourceRoot":"","sources":["../../../src/types/treeView.types.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -65,9 +65,9 @@ type CheckboxProps = Omit<RNPaperCheckboxAndroidProps, "onPress" | "status">;
|
|
|
65
65
|
|
|
66
66
|
export interface CheckBoxViewStyleProps {
|
|
67
67
|
// Optional style modifiers
|
|
68
|
-
outermostParentViewStyle?: StyleProp<ViewStyle
|
|
69
|
-
checkboxParentViewStyle?: StyleProp<ViewStyle
|
|
70
|
-
textTouchableStyle?: StyleProp<ViewStyle
|
|
68
|
+
outermostParentViewStyle?: StyleProp<ViewStyle>;
|
|
69
|
+
checkboxParentViewStyle?: StyleProp<ViewStyle>;
|
|
70
|
+
textTouchableStyle?: StyleProp<ViewStyle>;
|
|
71
71
|
|
|
72
72
|
// Optional checkbox and text component props
|
|
73
73
|
checkboxProps?: CheckboxProps;
|