react-native-tree-multi-select 1.9.3 → 1.9.4
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/lib/commonjs/components/CheckboxView.js +6 -6
- package/lib/commonjs/components/CustomExpandCollapseIcon.js +1 -1
- package/lib/commonjs/constants/tests.constants.js +1 -1
- package/lib/module/TreeView.js +7 -7
- package/lib/module/components/CheckboxView.js +7 -7
- package/lib/module/components/CustomExpandCollapseIcon.js +2 -2
- package/lib/module/constants/tests.constants.js +1 -1
- package/lib/module/jest.setup.js +1 -1
- package/lib/typescript/TreeView.d.ts +2 -2
- package/lib/typescript/jest.setup.d.ts +1 -1
- package/lib/typescript/types/treeView.types.d.ts +2 -2
- package/package.json +9 -6
- package/src/TreeView.tsx +8 -8
- package/src/components/CheckboxView.tsx +10 -10
- package/src/components/CustomExpandCollapseIcon.tsx +3 -3
- package/src/constants/tests.constants.ts +1 -1
- package/src/jest.setup.ts +1 -1
- package/src/types/treeView.types.ts +2 -2
|
@@ -29,7 +29,7 @@ function _CheckboxView(props) {
|
|
|
29
29
|
}
|
|
30
30
|
} = props;
|
|
31
31
|
const customCheckboxValueTypeToRNPaperType = _react.default.useCallback(customCheckboxValueType => {
|
|
32
|
-
return customCheckboxValueType ===
|
|
32
|
+
return customCheckboxValueType === "indeterminate" ? "indeterminate" : customCheckboxValueType ? "checked" : "unchecked";
|
|
33
33
|
}, []);
|
|
34
34
|
|
|
35
35
|
/**
|
|
@@ -40,7 +40,7 @@ function _CheckboxView(props) {
|
|
|
40
40
|
*/
|
|
41
41
|
const onValueChangeModifier = _react.default.useCallback(() => {
|
|
42
42
|
// If the previous state was 'indeterminate', set checked to true
|
|
43
|
-
if (value ===
|
|
43
|
+
if (value === "indeterminate") onValueChange(true);else onValueChange(!value);
|
|
44
44
|
}, [onValueChange, value]);
|
|
45
45
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
46
46
|
style: outermostParentViewStyle,
|
|
@@ -63,9 +63,9 @@ function _CheckboxView(props) {
|
|
|
63
63
|
}
|
|
64
64
|
const defaultCheckboxViewStyles = exports.defaultCheckboxViewStyles = _reactNative.StyleSheet.create({
|
|
65
65
|
mainView: {
|
|
66
|
-
alignSelf:
|
|
67
|
-
alignItems:
|
|
68
|
-
flexDirection:
|
|
66
|
+
alignSelf: "center",
|
|
67
|
+
alignItems: "center",
|
|
68
|
+
flexDirection: "row",
|
|
69
69
|
marginEnd: 10
|
|
70
70
|
},
|
|
71
71
|
checkboxView: {
|
|
@@ -76,7 +76,7 @@ const defaultCheckboxViewStyles = exports.defaultCheckboxViewStyles = _reactNati
|
|
|
76
76
|
},
|
|
77
77
|
checkboxTextStyle: {
|
|
78
78
|
color: "black",
|
|
79
|
-
marginTop: _reactNative.Platform.OS ===
|
|
79
|
+
marginTop: _reactNative.Platform.OS === "android" ? 2 : undefined
|
|
80
80
|
}
|
|
81
81
|
});
|
|
82
82
|
//# sourceMappingURL=CheckboxView.js.map
|
|
@@ -14,7 +14,7 @@ function _CustomExpandCollapseIcon(props) {
|
|
|
14
14
|
isExpanded
|
|
15
15
|
} = props;
|
|
16
16
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FontAwesome.default, {
|
|
17
|
-
name: isExpanded ?
|
|
17
|
+
name: isExpanded ? "caret-down" : "caret-right",
|
|
18
18
|
size: 20,
|
|
19
19
|
color: "black"
|
|
20
20
|
});
|
package/lib/module/TreeView.js
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
import React from
|
|
4
|
-
import { InteractionManager } from
|
|
5
|
-
import NodeList from
|
|
6
|
-
import { selectAll, selectAllFiltered, unselectAll, unselectAllFiltered, initializeNodeMaps, expandAll, collapseAll, toggleCheckboxes, expandNodes, collapseNodes } from
|
|
7
|
-
import { getTreeViewStore, useTreeViewStore } from
|
|
8
|
-
import usePreviousState from
|
|
3
|
+
import React from "react";
|
|
4
|
+
import { InteractionManager } from "react-native";
|
|
5
|
+
import NodeList from "./components/NodeList";
|
|
6
|
+
import { selectAll, selectAllFiltered, unselectAll, unselectAllFiltered, initializeNodeMaps, expandAll, collapseAll, toggleCheckboxes, expandNodes, collapseNodes } from "./helpers";
|
|
7
|
+
import { getTreeViewStore, useTreeViewStore } from "./store/treeView.store";
|
|
8
|
+
import usePreviousState from "./utils/usePreviousState";
|
|
9
9
|
import { useShallow } from "zustand/react/shallow";
|
|
10
10
|
import uuid from "react-native-uuid";
|
|
11
11
|
import useDeepCompareEffect from "./utils/useDeepCompareEffect";
|
|
12
|
-
import { typedMemo } from
|
|
12
|
+
import { typedMemo } from "./utils/typedMemo";
|
|
13
13
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
14
14
|
function _innerTreeView(props, ref) {
|
|
15
15
|
const {
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
import React from "react";
|
|
4
4
|
import { Platform, StyleSheet, Text, TouchableOpacity, View } from "react-native";
|
|
5
|
-
import { Checkbox } from
|
|
5
|
+
import { Checkbox } from "react-native-paper";
|
|
6
6
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
7
7
|
function arePropsEqual(prevProps, nextProps) {
|
|
8
8
|
return prevProps.value === nextProps.value && prevProps.text === nextProps.text;
|
|
@@ -24,7 +24,7 @@ function _CheckboxView(props) {
|
|
|
24
24
|
}
|
|
25
25
|
} = props;
|
|
26
26
|
const customCheckboxValueTypeToRNPaperType = React.useCallback(customCheckboxValueType => {
|
|
27
|
-
return customCheckboxValueType ===
|
|
27
|
+
return customCheckboxValueType === "indeterminate" ? "indeterminate" : customCheckboxValueType ? "checked" : "unchecked";
|
|
28
28
|
}, []);
|
|
29
29
|
|
|
30
30
|
/**
|
|
@@ -35,7 +35,7 @@ function _CheckboxView(props) {
|
|
|
35
35
|
*/
|
|
36
36
|
const onValueChangeModifier = React.useCallback(() => {
|
|
37
37
|
// If the previous state was 'indeterminate', set checked to true
|
|
38
|
-
if (value ===
|
|
38
|
+
if (value === "indeterminate") onValueChange(true);else onValueChange(!value);
|
|
39
39
|
}, [onValueChange, value]);
|
|
40
40
|
return /*#__PURE__*/_jsxs(View, {
|
|
41
41
|
style: outermostParentViewStyle,
|
|
@@ -58,9 +58,9 @@ function _CheckboxView(props) {
|
|
|
58
58
|
}
|
|
59
59
|
export const defaultCheckboxViewStyles = StyleSheet.create({
|
|
60
60
|
mainView: {
|
|
61
|
-
alignSelf:
|
|
62
|
-
alignItems:
|
|
63
|
-
flexDirection:
|
|
61
|
+
alignSelf: "center",
|
|
62
|
+
alignItems: "center",
|
|
63
|
+
flexDirection: "row",
|
|
64
64
|
marginEnd: 10
|
|
65
65
|
},
|
|
66
66
|
checkboxView: {
|
|
@@ -71,7 +71,7 @@ export const defaultCheckboxViewStyles = StyleSheet.create({
|
|
|
71
71
|
},
|
|
72
72
|
checkboxTextStyle: {
|
|
73
73
|
color: "black",
|
|
74
|
-
marginTop: Platform.OS ===
|
|
74
|
+
marginTop: Platform.OS === "android" ? 2 : undefined
|
|
75
75
|
}
|
|
76
76
|
});
|
|
77
77
|
//# sourceMappingURL=CheckboxView.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
import React from "react";
|
|
4
|
-
import FontAwesomeIcon from
|
|
4
|
+
import FontAwesomeIcon from "react-native-vector-icons/FontAwesome";
|
|
5
5
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
6
6
|
export const CustomExpandCollapseIcon = /*#__PURE__*/React.memo(_CustomExpandCollapseIcon);
|
|
7
7
|
function _CustomExpandCollapseIcon(props) {
|
|
@@ -9,7 +9,7 @@ function _CustomExpandCollapseIcon(props) {
|
|
|
9
9
|
isExpanded
|
|
10
10
|
} = props;
|
|
11
11
|
return /*#__PURE__*/_jsx(FontAwesomeIcon, {
|
|
12
|
-
name: isExpanded ?
|
|
12
|
+
name: isExpanded ? "caret-down" : "caret-right",
|
|
13
13
|
size: 20,
|
|
14
14
|
color: "black"
|
|
15
15
|
});
|
package/lib/module/jest.setup.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import React from
|
|
2
|
-
import type { TreeViewProps, TreeViewRef } from
|
|
1
|
+
import React from "react";
|
|
2
|
+
import type { TreeViewProps, TreeViewRef } from "./types/treeView.types";
|
|
3
3
|
declare function _innerTreeView<ID>(props: TreeViewProps<ID>, ref: React.ForwardedRef<TreeViewRef<ID>>): React.JSX.Element;
|
|
4
4
|
export declare const TreeView: <ID>(props: TreeViewProps<ID> & {
|
|
5
5
|
ref?: React.ForwardedRef<TreeViewRef<ID>>;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import
|
|
1
|
+
import "@testing-library/jest-native/extend-expect";
|
|
2
2
|
//# sourceMappingURL=jest.setup.d.ts.map
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import type { StyleProp, TextProps, TouchableOpacityProps, ViewStyle } from "react-native";
|
|
2
2
|
import type { FlashListProps } from "@shopify/flash-list";
|
|
3
|
-
import { type Props as RNPaperCheckboxAndroidProps } from
|
|
3
|
+
import { type Props as RNPaperCheckboxAndroidProps } from "react-native-paper/src/components/Checkbox/CheckboxAndroid";
|
|
4
4
|
import { ScrollToNodeHandlerRef, ScrollToNodeParams } from "../handlers/ScrollToNodeHandler";
|
|
5
|
-
export type CheckboxValueType = boolean |
|
|
5
|
+
export type CheckboxValueType = boolean | "indeterminate";
|
|
6
6
|
export interface ExpandIconProps {
|
|
7
7
|
isExpanded: boolean;
|
|
8
8
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-native-tree-multi-select",
|
|
3
|
-
"version": "1.9.
|
|
3
|
+
"version": "1.9.4",
|
|
4
4
|
"description": "A super-fast, customizable tree view component for React Native with multi-selection, checkboxes, and search filtering capabilities.",
|
|
5
5
|
"main": "lib/commonjs/index.js",
|
|
6
6
|
"module": "lib/module/index.js",
|
|
@@ -36,9 +36,8 @@
|
|
|
36
36
|
"example": "yarn --cwd example",
|
|
37
37
|
"build:android": "cd example/android && ./gradlew assembleDebug --no-daemon --console=plain -PreactNativeArchitectures=arm64-v8a",
|
|
38
38
|
"build:ios": "cd example/ios && pod install && xcodebuild -workspace TreeMultiSelectExample.xcworkspace -scheme TreeMultiSelectExample -configuration Debug -sdk iphonesimulator CC=clang CPLUSPLUS=clang++ LD=clang LDPLUSPLUS=clang++ GCC_OPTIMIZATION_LEVEL=0 GCC_PRECOMPILE_PREFIX_HEADER=YES ASSETCATALOG_COMPILER_OPTIMIZATION=time DEBUG_INFORMATION_FORMAT=dwarf COMPILER_INDEX_STORE_ENABLE=NO",
|
|
39
|
-
"bootstrap": "yarn example && yarn install && yarn example pods",
|
|
40
|
-
"clean": "del-cli android/build example/android/build example/android/app/build example/ios/build"
|
|
41
|
-
"postinstall": "patch-package"
|
|
39
|
+
"bootstrap": "yarn example && yarn install && yarn example pods && yarn patch-package",
|
|
40
|
+
"clean": "del-cli android/build example/android/build example/android/app/build example/ios/build"
|
|
42
41
|
},
|
|
43
42
|
"keywords": [
|
|
44
43
|
"react-native",
|
|
@@ -177,7 +176,11 @@
|
|
|
177
176
|
"prettier"
|
|
178
177
|
],
|
|
179
178
|
"rules": {
|
|
180
|
-
"prettier/prettier": "off"
|
|
179
|
+
"prettier/prettier": "off",
|
|
180
|
+
"quotes": [
|
|
181
|
+
"error",
|
|
182
|
+
"double"
|
|
183
|
+
]
|
|
181
184
|
}
|
|
182
185
|
},
|
|
183
186
|
"eslintIgnore": [
|
|
@@ -187,7 +190,7 @@
|
|
|
187
190
|
],
|
|
188
191
|
"prettier": {
|
|
189
192
|
"quoteProps": "consistent",
|
|
190
|
-
"singleQuote":
|
|
193
|
+
"singleQuote": false,
|
|
191
194
|
"tabWidth": 2,
|
|
192
195
|
"trailingComma": "es5",
|
|
193
196
|
"useTabs": false
|
package/src/TreeView.tsx
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import React from
|
|
2
|
-
import { InteractionManager } from
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { InteractionManager } from "react-native";
|
|
3
3
|
import type {
|
|
4
4
|
TreeNode,
|
|
5
5
|
TreeViewProps,
|
|
6
6
|
TreeViewRef
|
|
7
|
-
} from
|
|
8
|
-
import NodeList from
|
|
7
|
+
} from "./types/treeView.types";
|
|
8
|
+
import NodeList from "./components/NodeList";
|
|
9
9
|
import {
|
|
10
10
|
selectAll,
|
|
11
11
|
selectAllFiltered,
|
|
@@ -17,13 +17,13 @@ import {
|
|
|
17
17
|
toggleCheckboxes,
|
|
18
18
|
expandNodes,
|
|
19
19
|
collapseNodes
|
|
20
|
-
} from
|
|
21
|
-
import { getTreeViewStore, useTreeViewStore } from
|
|
22
|
-
import usePreviousState from
|
|
20
|
+
} from "./helpers";
|
|
21
|
+
import { getTreeViewStore, useTreeViewStore } from "./store/treeView.store";
|
|
22
|
+
import usePreviousState from "./utils/usePreviousState";
|
|
23
23
|
import { useShallow } from "zustand/react/shallow";
|
|
24
24
|
import uuid from "react-native-uuid";
|
|
25
25
|
import useDeepCompareEffect from "./utils/useDeepCompareEffect";
|
|
26
|
-
import { typedMemo } from
|
|
26
|
+
import { typedMemo } from "./utils/typedMemo";
|
|
27
27
|
import {
|
|
28
28
|
ScrollToNodeHandlerRef,
|
|
29
29
|
ScrollToNodeParams
|
|
@@ -7,7 +7,7 @@ import {
|
|
|
7
7
|
View
|
|
8
8
|
} from "react-native";
|
|
9
9
|
|
|
10
|
-
import { Checkbox } from
|
|
10
|
+
import { Checkbox } from "react-native-paper";
|
|
11
11
|
import type {
|
|
12
12
|
BuiltInCheckBoxViewProps,
|
|
13
13
|
CheckboxValueType
|
|
@@ -46,11 +46,11 @@ function _CheckboxView(props: BuiltInCheckBoxViewProps) {
|
|
|
46
46
|
const customCheckboxValueTypeToRNPaperType = React.useCallback((
|
|
47
47
|
customCheckboxValueType: CheckboxValueType
|
|
48
48
|
) => {
|
|
49
|
-
return customCheckboxValueType ===
|
|
50
|
-
?
|
|
49
|
+
return customCheckboxValueType === "indeterminate"
|
|
50
|
+
? "indeterminate"
|
|
51
51
|
: customCheckboxValueType
|
|
52
|
-
?
|
|
53
|
-
:
|
|
52
|
+
? "checked"
|
|
53
|
+
: "unchecked";
|
|
54
54
|
}, []);
|
|
55
55
|
|
|
56
56
|
/**
|
|
@@ -61,7 +61,7 @@ function _CheckboxView(props: BuiltInCheckBoxViewProps) {
|
|
|
61
61
|
*/
|
|
62
62
|
const onValueChangeModifier = React.useCallback(() => {
|
|
63
63
|
// If the previous state was 'indeterminate', set checked to true
|
|
64
|
-
if (value ===
|
|
64
|
+
if (value === "indeterminate") onValueChange(true);
|
|
65
65
|
else onValueChange(!value);
|
|
66
66
|
}, [onValueChange, value]);
|
|
67
67
|
|
|
@@ -92,9 +92,9 @@ function _CheckboxView(props: BuiltInCheckBoxViewProps) {
|
|
|
92
92
|
|
|
93
93
|
export const defaultCheckboxViewStyles = StyleSheet.create({
|
|
94
94
|
mainView: {
|
|
95
|
-
alignSelf:
|
|
96
|
-
alignItems:
|
|
97
|
-
flexDirection:
|
|
95
|
+
alignSelf: "center",
|
|
96
|
+
alignItems: "center",
|
|
97
|
+
flexDirection: "row",
|
|
98
98
|
|
|
99
99
|
marginEnd: 10
|
|
100
100
|
},
|
|
@@ -104,6 +104,6 @@ export const defaultCheckboxViewStyles = StyleSheet.create({
|
|
|
104
104
|
},
|
|
105
105
|
checkboxTextStyle: {
|
|
106
106
|
color: "black",
|
|
107
|
-
marginTop: Platform.OS ===
|
|
107
|
+
marginTop: Platform.OS === "android" ? 2 : undefined,
|
|
108
108
|
},
|
|
109
109
|
});
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import FontAwesomeIcon from
|
|
2
|
+
import FontAwesomeIcon from "react-native-vector-icons/FontAwesome";
|
|
3
3
|
|
|
4
4
|
import { ExpandIconProps } from "src/types/treeView.types";
|
|
5
5
|
|
|
@@ -14,8 +14,8 @@ function _CustomExpandCollapseIcon(props: ExpandIconProps) {
|
|
|
14
14
|
<FontAwesomeIcon
|
|
15
15
|
name={
|
|
16
16
|
isExpanded
|
|
17
|
-
?
|
|
18
|
-
:
|
|
17
|
+
? "caret-down"
|
|
18
|
+
: "caret-right"
|
|
19
19
|
}
|
|
20
20
|
size={20}
|
|
21
21
|
color="black"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export const testStoreId =
|
|
1
|
+
export const testStoreId = "test-store-id";
|
package/src/jest.setup.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import "@testing-library/jest-native/extend-expect";
|
|
@@ -7,13 +7,13 @@ import type {
|
|
|
7
7
|
import type { FlashListProps } from "@shopify/flash-list";
|
|
8
8
|
import {
|
|
9
9
|
type Props as RNPaperCheckboxAndroidProps
|
|
10
|
-
} from
|
|
10
|
+
} from "react-native-paper/src/components/Checkbox/CheckboxAndroid";
|
|
11
11
|
import {
|
|
12
12
|
ScrollToNodeHandlerRef,
|
|
13
13
|
ScrollToNodeParams
|
|
14
14
|
} from "../handlers/ScrollToNodeHandler";
|
|
15
15
|
|
|
16
|
-
export type CheckboxValueType = boolean |
|
|
16
|
+
export type CheckboxValueType = boolean | "indeterminate";
|
|
17
17
|
|
|
18
18
|
export interface ExpandIconProps {
|
|
19
19
|
isExpanded: boolean;
|