Skip to content

Commit efdd02c

Browse files
JairajJangleJairajJangle
authored
Merge pull request #113 from JairajJangle/beta
Added feature to scroll to provided node id
2 parents 8b1e85d + dfa29fd commit efdd02c

File tree

20 files changed

+3619
-2428
lines changed

20 files changed

+3619
-2428
lines changed

‎.github/workflows/beta-release.yml‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ jobs:
5858
env:
5959
TURBO_CACHE_DIR: .turbo/android
6060
ANDROID_HOME: /usr/local/lib/android/sdk
61-
JAVA_HOME: /usr/lib/jvm/zulu-11-amd64
61+
JAVA_HOME: /usr/lib/jvm/zulu-17-amd64
6262
steps:
6363
- name: Checkout
6464
uses: actions/checkout@v4
@@ -87,7 +87,7 @@ jobs:
8787
uses: actions/setup-java@v4
8888
with:
8989
distribution: 'zulu'
90-
java-version: '11'
90+
java-version: '17'
9191

9292
- name: Set up Android SDK
9393
if: env.turbo_cache_hit != 1
@@ -96,7 +96,7 @@ jobs:
9696
api-level: 30
9797
build-tools: 30.0.3
9898
ndk: "23.1.7779620"
99-
99+
100100
- name: Create local.properties
101101
if: env.turbo_cache_hit != 1
102102
run: |

‎CHANGELOG.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,13 @@
1+
# [1.9.0-beta.1](https://github.com/JairajJangle/react-native-tree-multi-select/compare/v1.8.1...v1.9.0-beta.1) (2025-02-06)
2+
3+
4+
### Features
5+
6+
* added ref method to get child to parent map used in the tree view ([e496a70](https://github.com/JairajJangle/react-native-tree-multi-select/commit/e496a703ee26663626c30d0a82dcd452344de42d))
7+
* added scroll to node id feature ([1f87730](https://github.com/JairajJangle/react-native-tree-multi-select/commit/1f877305ab891e2ec6f007b45cb9cd2782a89121))
8+
* added scroll to node id feature ([38d7236](https://github.com/JairajJangle/react-native-tree-multi-select/commit/38d723680d829f6cc57717537a8fb31e2aa1687b))
9+
* updated example app with new scroll to node id feature ([db8dcdd](https://github.com/JairajJangle/react-native-tree-multi-select/commit/db8dcdd98f2a33ce225f200933afee7953ff00c5))
10+
111
## [1.8.1](https://github.com/JairajJangle/react-native-tree-multi-select/compare/v1.8.0...v1.8.1) (2025-02-02)
212

313

‎README.md‎

Lines changed: 52 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -115,35 +115,45 @@ export function TreeViewUsageExample(){
115115

116116
### Properties
117117

118+
#### TreeViewProps`<ID = string>`
119+
120+
*The `TreeViewProps` interface defines the properties for the tree view component.*
121+
118122
| Property | Type | Required | Description |
119123
| ---------------------------------- | ------------------------------------------------------------ | -------- | ------------------------------------------------------------ |
120-
| `data` | [TreeNode](#treenode) | Yes | An array of `TreeNode` objects |
121-
| `onCheck` | `(checkedIds: string[], indeterminateIds: string[]) => void` | No | Callback when a checkbox state changes |
122-
| `onExpand` | `(expandedIds: string[]) => void` | No | Callback when a node is expanded |
123-
| `preselectedIds` | `string[]` | No | An array of `id`s that should be pre-selected |
124-
| `preExpandedIds` | `string[]` | No | An array of `id`s that should be pre-expanded |
124+
| `data` | [TreeNode](#treenode)`<ID = string>[]` | Yes | An array of `TreeNode` objects |
125+
| `onCheck` | `(checkedIds: ID[], indeterminateIds: ID[]) => void` | No | Callback when a checkbox state changes |
126+
| `onExpand` | `(expandedIds: ID[]) => void` | No | Callback when a node is expanded |
127+
| `preselectedIds` | `ID[]` | No | An array of `id`s that should be pre-selected |
128+
| `preExpandedIds` | `ID[]` | No | An array of `id`s that should be pre-expanded |
125129
| `selectionPropagation` | [SelectionPropagation](#selectionpropagation) | No | Control Selection Propagation Behavior. Choose whether you want to auto-select children or parents. |
130+
| `initialScrollNodeID` | `ID` | No | Set node ID to scroll to intiially on tree view render. |
126131
| `indentationMultiplier` | `number` | No | Indentation (`marginStart`) per level (defaults to 15) |
127132
| `treeFlashListProps` | [TreeFlatListProps](#treeflatlistprops) | No | Props for the flash list |
128133
| `checkBoxViewStyleProps` | [BuiltInCheckBoxViewStyleProps](#builtincheckboxviewstyleprops) | No | Props for the checkbox view |
129134
| `CheckboxComponent` | `ComponentType<`[CheckBoxViewProps](#checkboxviewprops)`>` | No | A custom checkbox component. Defaults to React Native Paper's Checkbox |
130135
| `ExpandCollapseIconComponent` | `ComponentType<`[ExpandIconProps](#expandiconprops)`>` | No | A custom expand/collapse icon component |
131136
| `ExpandCollapseTouchableComponent` | `ComponentType<`[TouchableOpacityProps](https://reactnative.dev/docs/touchableopacity#props)`>` | No | A custom expand/collapse touchable component |
132-
| `CustomNodeRowComponent` | `React.ComponentType<`[NodeRowProps](#noderowprops)`>` | No | Custom row item component |
133-
134-
ℹ️ If `CustomNodeRowComponent` is provided then below props are not applied:
135-
136-
1. `indentationMultiplier`
137-
2. `checkBoxViewStyleProps`
138-
3. `CheckboxComponent`
139-
4. `ExpandCollapseIconComponent`
140-
5. `ExpandCollapseTouchableComponent`.
141-
142-
⚠️ If the tree view doesn't scroll if rendered in a complex nested scroll view/s then try setting the `renderScrollComponent` value in `treeFlashListProps` to `ScrollView` from `react-native-gesture-handler`.
137+
| `CustomNodeRowComponent` | `React.ComponentType<`[NodeRowProps](#noderowprops)`<ID>>` | No | Custom row item component |
138+
139+
##### Notes
140+
141+
- The `ID` type parameter allows flexibility in specifying the type of node identifiers (e.g., `string`, `number`, or custom types).
142+
- ℹ️ If `CustomNodeRowComponent` is provided then below props are not applied:
143+
1. `indentationMultiplier`
144+
1. `checkBoxViewStyleProps`
145+
1. `CheckboxComponent`
146+
1. `BuiltInCheckBoxViewStyleProps`
147+
1. `ExpandCollapseIconComponent`
148+
1. `ExpandCollapseTouchableComponent`.
149+
150+
- ⚠️ If the tree view doesn't scroll if rendered in a complex nested scroll view/s then try setting the `renderScrollComponent` value in `treeFlashListProps` to `ScrollView` from `react-native-gesture-handler`.
143151

144152
---
145153

146-
#### TreeNode
154+
#### TreeNode`<ID = string>`
155+
156+
*The `TreeNode` interface defines the properties for individual item of the tree view*
147157

148158
| Property | Type | Required | Description |
149159
| --------------- | ------------------------ | -------- | ------------------------------------------------------------ |
@@ -154,7 +164,9 @@ export function TreeViewUsageExample(){
154164

155165
---
156166

157-
#### TreeViewRef
167+
#### TreeViewRef`<ID = string>`
168+
169+
*The `TreeViewRef` interface defines the properties for the ref object of the tree view component*
158170

159171
| Property | Type | Description |
160172
| --------------------- | ----------------------------------------------------- | ------------------------------------------------------------ |
@@ -164,16 +176,30 @@ export function TreeViewUsageExample(){
164176
| `unselectAllFiltered` | `() => void` | Unselects all **filtered** nodes |
165177
| `expandAll` | `() => void` | Expands all nodes |
166178
| `collapseAll` | `() => void` | Collapses all nodes |
167-
| `expandNodes` | `(ids: string[]) => void` | Expands specified nodes |
168-
| `collapseNodes` | `(ids: string[]) => void` | Collapses specified nodes |
169-
| `selectNodes` | `(ids: string[]) => void` | Selects specified nodes |
170-
| `unSelectNodes` | `(ids: string[]) => void` | Unselects specified nodes |
179+
| `expandNodes` | `(ids: ID[]) => void` | Expands specified nodes |
180+
| `collapseNodes` | `(ids: ID[]) => void` | Collapses specified nodes |
181+
| `selectNodes` | `(ids: ID[]) => void` | Selects specified nodes |
182+
| `unSelectNodes` | `(ids: ID[]) => void` | Unselects specified nodes |
171183
| `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. |
184+
| `scrollToNodeID` | `(params: `[ScrollToNodeParams](#scrolltonodeparams)`<ID>) => void;` | Scrolls the tree view to the node of the specified ID. |
185+
| `getChildToParentMap` | `() => Map<ID, ID>` | Get the child to parent tree view map. |
186+
187+
#### ScrollToNodeParams
188+
| Property | Type | Required | Description |
189+
| -------------------- | --------- | -------- | ------------------------------------------------------------ |
190+
| `nodeId` | `ID` | Yes | Node ID to expand and scroll to. |
191+
| `expandScrolledNode` | `boolean` | No | Whether to expand scrolled node to reveal its children. Defaults to `false`. |
192+
| `animated` | `boolean` | No | Control if scrolling should be animated. |
193+
| `viewOffset` | `number` | No | A fixed number of pixels to offset the scrolled node position. |
194+
| `viewPosition` | `number` | No | A value of `0` places the scrolled node item at the top, `1` at the bottom, and `0.5` centered in the middle. |
195+
172196

173197
---
174198

175199
#### SelectionPropagation
176200

201+
*The `SelectionPropagation` interface defines the selection propagation behaviour of the tree view*
202+
177203
| Property | Type | Required | Description |
178204
| ------------ | --------- | -------- | ------------------------------------------------------------ |
179205
| `toChildren` | `boolean` | No | Whether to propagate selection to children nodes. Defaults to `true`. |
@@ -183,12 +209,14 @@ export function TreeViewUsageExample(){
183209

184210
#### TreeFlatListProps
185211

186-
All properties of `FlashListProps`(from `@shopify/flash-list`) except for `data` and `renderItem`
212+
*All properties of `FlashListProps`(from `@shopify/flash-list`) except for `data` and `renderItem`*
187213

188214
---
189215

190216
#### BuiltInCheckBoxViewStyleProps
191217

218+
*This interface allows you to customize the style of the built-in checkbox component that is rendered in the tree view by default. Overriden if `CustomNodeRowComponent` is used.*
219+
192220
| Property | Type | Required | Description |
193221
| -------------------------- | -------------------------------- | -------- | ------------------------------------------------------ |
194222
| `outermostParentViewStyle` | `StyleProp<ViewStyle>` | No | Optional style modifier for the outermost parent view. |
@@ -225,7 +253,7 @@ Type: `boolean` OR `"indeterminate"`
225253

226254
---
227255

228-
#### NodeRowProps
256+
#### NodeRowProps`<ID = string>`
229257

230258
| Property | Type | Required | Description |
231259
| -------------- | --------------------------------------- | -------- | ------------------------------------------------------- |

‎example/android/build.gradle‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
buildscript {
44
ext {
55
buildToolsVersion = "33.0.0"
6-
minSdkVersion = 21
6+
minSdkVersion = 29
77
compileSdkVersion = 33
88
targetSdkVersion = 33
99

@@ -19,5 +19,6 @@ buildscript {
1919
dependencies {
2020
classpath("com.android.tools.build:gradle")
2121
classpath("com.facebook.react:react-native-gradle-plugin")
22+
classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:1.9.0")
2223
}
2324
}

‎example/ios/Podfile.lock‎

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -427,10 +427,10 @@ PODS:
427427
- React-jsi (= 0.72.17)
428428
- React-logger (= 0.72.17)
429429
- React-perflogger (= 0.72.17)
430-
- RNFlashList (1.7.2):
430+
- RNFlashList (1.7.3):
431431
- RCT-Folly (= 2021.07.22.00)
432432
- React-Core
433-
- RNGestureHandler (2.21.2):
433+
- RNGestureHandler (2.17.1):
434434
- RCT-Folly (= 2021.07.22.00)
435435
- React-Core
436436
- RNScreens (3.35.0):
@@ -596,28 +596,28 @@ SPEC CHECKSUMS:
596596
glog: 04b94705f318337d7ead9e6d17c019bd9b1f6b1b
597597
hermes-engine: 982096772bd947125ee3b4f72ace6cb9a33f1d02
598598
libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
599-
RCT-Folly: 424b8c9a7a0b9ab2886ffe9c3b041ef628fd4fb1
599+
RCT-Folly: 8dc08ca5a393b48b1c523ab6220dfdcc0fe000ad
600600
RCTRequired: 01c639ec840ee03928b2d65f5cd5297d737b3834
601601
RCTTypeSafety: 9623592521a1576363baf3d6ab8d164cfe9062bf
602602
React: 3c0beeda318c3c515a6bb2c1f197b55bd731aa43
603603
React-callinvoker: 0cd6ff2cdd80255c82cd4628fc925df1e7133a1a
604-
React-Codegen: 20cfee78965306e4a5bb65d95958142eda116cfc
605-
React-Core: df691c59e0c8a3db4d138a51bb8862c52c8b14f1
606-
React-CoreModules: cebd223e814ac07bc1f597bbd2480167a2c7a130
607-
React-cxxreact: dec3959d439708cb7dd73b46a11ed64c3eea79da
604+
React-Codegen: d3239ad82b29f93beeeb154ac0c776719d1164bc
605+
React-Core: 24c3b4beb23e45bdfe1a57cc7687b8ead142a43b
606+
React-CoreModules: 24415fff794f24f8269846b88d9ac6b172ce4171
607+
React-cxxreact: 9c9d59b4ce6f2535f31e0d812af6a58bc304ba85
608608
React-debug: 3a5091cbda7ffe5f11ad0443109810fcd1a3e885
609-
React-hermes: f3b6b278c4ff7e6664a86b2bf964a4dc4ae72d34
610-
React-jsi: 6ec4bd4cd929ae9d468b4984b0ae2c657aeeb2da
611-
React-jsiexecutor: 8dc585381e476c3ff2e9468f444c90c4d1d5b874
609+
React-hermes: 773790a092f8e0939e1aa3ee6cd10e928f2ce643
610+
React-jsi: 33409556a868a4cf41347e68ffd270cbba1d218a
611+
React-jsiexecutor: 8d95d2ed8969c2ce7eb8b4bfaccb0bb9c0423761
612612
React-jsinspector: 853b8631b908636bb09ef77cb217376c38a0c8ff
613-
React-logger: 9ca44bb5703bf2355f3c2d2e5e67bfe98ca2dc34
614-
react-native-safe-area-context: 141eca0fd4e4191288dfc8b96a7c7e1c2983447a
615-
React-NativeModulesApple: 2edfcbb25329e3eb5f76eb79d89010de7c1c6f1f
613+
React-logger: afa402da502a35728c9073804b1802861783a996
614+
react-native-safe-area-context: 758e894ca5a9bd1868d2a9cfbca7326a2b6bf9dc
615+
React-NativeModulesApple: a3b3019ffee56cf78bbf09c48e056072f3bb4ea4
616616
React-perflogger: 785b0063af5178298a61b54bb46aae9a19c7bbb5
617617
React-RCTActionSheet: 84f37b34bd77249263ace75471d6664393c29972
618618
React-RCTAnimation: 5713910b6223154df4bba80a0bda4e2e671b00f8
619-
React-RCTAppDelegate: d3777d05bf6b65fed847536af520731c1a167dea
620-
React-RCTBlob: d4d3fb21c0bf1ce2f0308e05227ecd3f19266bf7
619+
React-RCTAppDelegate: 11fe0debffcd253bfee81d68fc588f6367444caf
620+
React-RCTBlob: 0f191768e0be79ab0cf487be4cab6e88e5c4e480
621621
React-RCTImage: 2e63a483be5d4e46a80dea3b17c9abee38006feb
622622
React-RCTLinking: e3ff685ee62187f8f61e938357307c1f890125b5
623623
React-RCTNetwork: a35842997a403edfdc1ec25b61a0e10a0526368d
@@ -626,16 +626,16 @@ SPEC CHECKSUMS:
626626
React-RCTVibration: defaae8016de9b3351a2a67ee8ef3fbdd643b0e1
627627
React-rncore: dfd20469cfad38e48b1c3cc9c4367db63f5231d7
628628
React-runtimeexecutor: 448409b5ae5a01b7793239f630051960c7dd39f9
629-
React-runtimescheduler: ff30efdf24f8ce62eb517a391ded3d99c4263bb0
630-
React-utils: 7959d4553163b61e01bbe83dbd80e58ca420aecb
631-
ReactCommon: 841449721eb2e004de2c3366844b0a03f329f2cb
632-
RNFlashList: 6c2a9e447b143b4cd6f0f9cdd6e5ff9b0d52bab4
633-
RNGestureHandler: 21ec7c46741881c8f164961da99c6ec42e9d544b
634-
RNScreens: 2fc874a2605e88dedf43204a79fad1d2da4abfbe
635-
RNVectorIcons: 4785c0f1161b4fdc691c802c989248326d0b005d
629+
React-runtimescheduler: 5cd71d2becb07952525bd137963ca5cb98597bc0
630+
React-utils: 389181b1411d047f3d9c4913930b9e806d59d0b1
631+
ReactCommon: 561cfc1683ccdebe8a377b4616958ea6a1f62d91
632+
RNFlashList: 08c81ebc1e4540a5edce29e75f7bd18a07f3e292
633+
RNGestureHandler: 1afb4b52b44d68a545706e74821890d260d9fb71
634+
RNScreens: c09986e2086f03fb9fcaefbff7126fd3a2bb1cf5
635+
RNVectorIcons: 4a5bf25944f3f8157ec86845a967fb10f29bceef
636636
SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17
637637
Yoga: ef534101bb891fb09bae657417f34d399c1efe38
638638

639639
PODFILE CHECKSUM: 724628ab4c479b51512d6556b947334166b91272
640640

641-
COCOAPODS: 1.15.2
641+
COCOAPODS: 1.16.2

‎example/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "tree-multi-select-example",
3-
"version": "0.5.0",
3+
"version": "0.6.0",
44
"private": true,
55
"scripts": {
66
"android": "react-native run-android",
@@ -18,7 +18,7 @@
1818
"lodash": "^4.17.21",
1919
"react": "18.2.0",
2020
"react-native": "0.72.17",
21-
"react-native-gesture-handler": "^2.12.0",
21+
"react-native-gesture-handler": "2.17.1",
2222
"react-native-paper": "^5.13.1",
2323
"react-native-safe-area-context": "^4.7.1",
2424
"react-native-screens": "^3.22.1",

‎example/src/App.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import {
1818
import packageJson from '../../package.json';
1919
import { TwoTreeViewsScreen } from "./screens/TwoTreeViewsScreen";
2020
import CustomNodeID from './screens/CustomNodeIDScreen';
21+
import ControlsDemoScreen from "./screens/ControlsDemoScreen";
2122

2223
const data: ShowcaseExampleScreenSectionType[] = [
2324
{
@@ -37,6 +38,11 @@ const data: ShowcaseExampleScreenSectionType[] = [
3738
name: 'Large Data',
3839
slug: 'large-data',
3940
getScreen: () => LargeDataScreen,
41+
},
42+
{
43+
name: 'Adv. Controls',
44+
slug: 'controls',
45+
getScreen: () => ControlsDemoScreen,
4046
}
4147
],
4248
},

0 commit comments

Comments
 (0)