@draftbit/core 50.1.0 → 50.1.1-2e3307.2
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/Button.js +1 -1
- package/lib/commonjs/components/Picker/PickerCommon.js +1 -1
- package/lib/commonjs/components/Picker/dropdown/DropDownModalPicker.js +1 -0
- package/lib/commonjs/components/Picker/dropdown/DropDownPicker.js +1 -1
- package/lib/commonjs/components/Picker/index.js +1 -1
- package/lib/typescript/src/components/Button.js +4 -3
- package/lib/typescript/src/components/Button.js.map +1 -1
- package/lib/typescript/src/components/Picker/PickerCommon.d.ts +6 -0
- package/lib/typescript/src/components/Picker/PickerCommon.js +11 -0
- package/lib/typescript/src/components/Picker/PickerCommon.js.map +1 -1
- package/lib/typescript/src/components/Picker/dropdown/DropDownModalPicker.d.ts +6 -0
- package/lib/typescript/src/components/Picker/dropdown/DropDownModalPicker.js +70 -0
- package/lib/typescript/src/components/Picker/dropdown/DropDownModalPicker.js.map +1 -0
- package/lib/typescript/src/components/Picker/dropdown/DropDownPicker.js +3 -9
- package/lib/typescript/src/components/Picker/dropdown/DropDownPicker.js.map +1 -1
- package/lib/typescript/src/components/Picker/index.d.ts +3 -3
- package/lib/typescript/src/components/Picker/index.js +4 -0
- package/lib/typescript/src/components/Picker/index.js.map +1 -1
- package/lib/typescript/tsconfig.tsbuildinfo +1 -1
- package/package.json +4 -3
- package/src/components/Button.js +4 -3
- package/src/components/Button.js.map +1 -1
- package/src/components/Button.tsx +14 -2
- package/src/components/Picker/PickerCommon.js +11 -0
- package/src/components/Picker/PickerCommon.js.map +1 -1
- package/src/components/Picker/PickerCommon.ts +22 -0
- package/src/components/Picker/dropdown/DropDownModalPicker.js +70 -0
- package/src/components/Picker/dropdown/DropDownModalPicker.js.map +1 -0
- package/src/components/Picker/dropdown/DropDownModalPicker.tsx +155 -0
- package/src/components/Picker/dropdown/DropDownPicker.js +3 -9
- package/src/components/Picker/dropdown/DropDownPicker.js.map +1 -1
- package/src/components/Picker/dropdown/DropDownPicker.tsx +3 -16
- package/src/components/Picker/index.js +4 -0
- package/src/components/Picker/index.js.map +1 -1
- package/src/components/Picker/index.tsx +14 -3
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@draftbit/core",
|
|
3
|
-
"version": "50.1.
|
|
3
|
+
"version": "50.1.1-2e3307.2+2e33076",
|
|
4
4
|
"description": "Core (non-native) Components",
|
|
5
5
|
"main": "lib/commonjs/index.js",
|
|
6
6
|
"types": "lib/typescript/src/index.d.ts",
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
"dependencies": {
|
|
42
42
|
"@date-io/date-fns": "^1.3.13",
|
|
43
43
|
"@draftbit/react-theme-provider": "^2.1.1",
|
|
44
|
-
"@draftbit/types": "50.1.
|
|
44
|
+
"@draftbit/types": "^50.1.1-2e3307.2+2e33076",
|
|
45
45
|
"@expo/vector-icons": "^14.0.0",
|
|
46
46
|
"@gorhom/bottom-sheet": "5.0.0-alpha.7",
|
|
47
47
|
"@material-ui/core": "^4.11.0",
|
|
@@ -66,6 +66,7 @@
|
|
|
66
66
|
"react-native-modal-datetime-picker": "^13.0.0",
|
|
67
67
|
"react-native-pager-view": "6.2.3",
|
|
68
68
|
"react-native-reanimated": "~3.6.2",
|
|
69
|
+
"react-native-select-dropdown": "4.0.1",
|
|
69
70
|
"react-native-shadow-2": "^7.0.7",
|
|
70
71
|
"react-native-svg": "14.1.0",
|
|
71
72
|
"react-native-swipe-list-view": "^3.2.9",
|
|
@@ -114,5 +115,5 @@
|
|
|
114
115
|
],
|
|
115
116
|
"testEnvironment": "node"
|
|
116
117
|
},
|
|
117
|
-
"gitHead": "
|
|
118
|
+
"gitHead": "2e3307675421d1acda7aa57d3db4346c1cbee445"
|
|
118
119
|
}
|
package/src/components/Button.js
CHANGED
|
@@ -7,7 +7,7 @@ const CONSTANTS = {
|
|
|
7
7
|
padding: 8,
|
|
8
8
|
icon: 24,
|
|
9
9
|
};
|
|
10
|
-
function Base({ Icon, icon, title, loading, disabled, style, activeOpacity = 0.8, disabledOpacity = 0.8, ...props }) {
|
|
10
|
+
function Base({ Icon, icon, iconPosition = "left", iconSize = CONSTANTS.icon, title, loading, disabled, style, activeOpacity = 0.8, disabledOpacity = 0.8, ...props }) {
|
|
11
11
|
const { color, fontFamily, fontWeight, fontSize, lineHeight, letterSpacing, textTransform, textAlign, textDecorationLine, textDecorationColor, textDecorationStyle, ...buttonStyles } = StyleSheet.flatten(style || {});
|
|
12
12
|
const titleStyles = {
|
|
13
13
|
color,
|
|
@@ -38,8 +38,9 @@ function Base({ Icon, icon, title, loading, disabled, style, activeOpacity = 0.8
|
|
|
38
38
|
];
|
|
39
39
|
}, ...props },
|
|
40
40
|
loading ? (React.createElement(ActivityIndicator, { size: "small", color: color, style: styles.loading })) : null,
|
|
41
|
-
icon && !loading ? (React.createElement(Icon, { name: icon, color: color, style: styles.icon, size:
|
|
42
|
-
React.createElement(Text, { style: titleStyles }, title)
|
|
41
|
+
iconPosition === "left" && icon && !loading ? (React.createElement(Icon, { name: icon, color: color, style: styles.icon, size: iconSize })) : null,
|
|
42
|
+
React.createElement(Text, { style: titleStyles }, title),
|
|
43
|
+
iconPosition === "right" && icon && !loading ? (React.createElement(Icon, { name: icon, color: color, style: styles.icon, size: iconSize })) : null));
|
|
43
44
|
}
|
|
44
45
|
const Solid = ({ style, theme, ...props }) => {
|
|
45
46
|
return (React.createElement(Base, { style: [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sourceRoot":"","sources":["Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACL,IAAI,EACJ,SAAS,EAET,QAAQ,EACR,UAAU,EAEV,iBAAiB,GAClB,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAKvC,MAAM,SAAS,GAAG;IAChB,UAAU,EAAE,EAAE;IACd,YAAY,EAAE,CAAC;IACf,OAAO,EAAE,CAAC;IACV,IAAI,EAAE,EAAE;CACT,CAAC;
|
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["Button.tsx"],"names":[],"mappings":"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"}
|
|
@@ -33,6 +33,8 @@ type BaseProps = {
|
|
|
33
33
|
delayLongPress?: number;
|
|
34
34
|
hitSlop?: number;
|
|
35
35
|
icon?: string;
|
|
36
|
+
iconSize?: number;
|
|
37
|
+
iconPosition?: "left" | "right";
|
|
36
38
|
} & PressableProps &
|
|
37
39
|
IconSlot;
|
|
38
40
|
|
|
@@ -55,6 +57,8 @@ type Props = {
|
|
|
55
57
|
function Base({
|
|
56
58
|
Icon,
|
|
57
59
|
icon,
|
|
60
|
+
iconPosition = "left",
|
|
61
|
+
iconSize = CONSTANTS.icon,
|
|
58
62
|
title,
|
|
59
63
|
loading,
|
|
60
64
|
disabled,
|
|
@@ -117,15 +121,23 @@ function Base({
|
|
|
117
121
|
{loading ? (
|
|
118
122
|
<ActivityIndicator size="small" color={color} style={styles.loading} />
|
|
119
123
|
) : null}
|
|
120
|
-
{icon && !loading ? (
|
|
124
|
+
{iconPosition === "left" && icon && !loading ? (
|
|
121
125
|
<Icon
|
|
122
126
|
name={icon}
|
|
123
127
|
color={color as string}
|
|
124
128
|
style={styles.icon}
|
|
125
|
-
size={
|
|
129
|
+
size={iconSize}
|
|
126
130
|
/>
|
|
127
131
|
) : null}
|
|
128
132
|
<Text style={titleStyles}>{title}</Text>
|
|
133
|
+
{iconPosition === "right" && icon && !loading ? (
|
|
134
|
+
<Icon
|
|
135
|
+
name={icon}
|
|
136
|
+
color={color as string}
|
|
137
|
+
style={styles.icon}
|
|
138
|
+
size={iconSize}
|
|
139
|
+
/>
|
|
140
|
+
) : null}
|
|
129
141
|
</Pressable>
|
|
130
142
|
);
|
|
131
143
|
}
|
|
@@ -1,4 +1,7 @@
|
|
|
1
1
|
import { isObject } from "lodash";
|
|
2
|
+
import React from "react";
|
|
3
|
+
import { flattenReactFragments } from "../../utilities";
|
|
4
|
+
import PickerItem from "./dropdown/PickerItem";
|
|
2
5
|
export function normalizeToPickerOptions(options) {
|
|
3
6
|
if (options.length === 0) {
|
|
4
7
|
return [];
|
|
@@ -22,4 +25,12 @@ export function normalizeToPickerOptions(options) {
|
|
|
22
25
|
}
|
|
23
26
|
throw new Error('Picker options must be either an array of strings, numbers, or an array of { "label": string | number; "value": string | number; } objects.');
|
|
24
27
|
}
|
|
28
|
+
export function usePickerItemProps(childrenProp) {
|
|
29
|
+
return React.useMemo(() => {
|
|
30
|
+
const children = flattenReactFragments(React.Children.toArray(childrenProp));
|
|
31
|
+
// Only the props of the first PickerItem are used, any others are ignored
|
|
32
|
+
const firstPickerItem = children.find((child) => child.type === PickerItem);
|
|
33
|
+
return (firstPickerItem === null || firstPickerItem === void 0 ? void 0 : firstPickerItem.props) || {};
|
|
34
|
+
}, [childrenProp]);
|
|
35
|
+
}
|
|
25
36
|
//# sourceMappingURL=PickerCommon.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PickerCommon.js","sourceRoot":"","sources":["PickerCommon.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;
|
|
1
|
+
{"version":3,"file":"PickerCommon.js","sourceRoot":"","sources":["PickerCommon.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AACxD,OAAO,UAA+B,MAAM,uBAAuB,CAAC;AAsDpE,MAAM,UAAU,wBAAwB,CACtC,OAA6C;IAE7C,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE;QACxB,OAAO,EAAE,CAAC;KACX;IAED,MAAM,WAAW,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;IAE/B,IAAI,OAAO,WAAW,KAAK,QAAQ,IAAI,OAAO,WAAW,KAAK,QAAQ,EAAE;QACtE,OAAO,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;YAC9B,KAAK,EAAE,MAAyB;YAChC,KAAK,EAAE,MAAyB;SACjC,CAAC,CAAC,CAAC;KACL;IAED,IACE,QAAQ,CAAC,WAAW,CAAC;QACrB,WAAW,CAAC,KAAK,KAAK,SAAS;QAC/B,WAAW,CAAC,KAAK,KAAK,SAAS,EAC/B;QACA,OAAQ,OAA0B,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;YAChD,OAAO;gBACL,KAAK,EAAE,MAAM,CAAC,KAAK;gBACnB,KAAK,EAAE,MAAM,CAAC,KAAK;aACpB,CAAC;QACJ,CAAC,CAAC,CAAC;KACJ;IAED,MAAM,IAAI,KAAK,CACb,6IAA6I,CAC9I,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,kBAAkB,CAChC,YAA6B;IAE7B,OAAO,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACxB,MAAM,QAAQ,GAAG,qBAAqB,CACpC,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,YAAY,CAAyB,CAC7D,CAAC;QAEF,0EAA0E;QAC1E,MAAM,eAAe,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,KAAK,UAAU,CAAC,CAAC;QAE5E,OAAO,CAAA,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,KAAK,KAAI,EAAE,CAAC;IACtC,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;AACrB,CAAC"}
|
|
@@ -2,6 +2,9 @@ import { StyleProp, ViewStyle, TextStyle } from "react-native";
|
|
|
2
2
|
import { IconSlot } from "../../interfaces/Icon";
|
|
3
3
|
import { isObject } from "lodash";
|
|
4
4
|
import { Theme } from "../../styles/DefaultTheme";
|
|
5
|
+
import React from "react";
|
|
6
|
+
import { flattenReactFragments } from "../../utilities";
|
|
7
|
+
import PickerItem, { PickerItemProps } from "./dropdown/PickerItem";
|
|
5
8
|
|
|
6
9
|
export interface PickerOption {
|
|
7
10
|
value: string | number;
|
|
@@ -40,6 +43,10 @@ export interface MultiSelectPickerProps {
|
|
|
40
43
|
onValueChange: (value: (string | number)[]) => void;
|
|
41
44
|
}
|
|
42
45
|
|
|
46
|
+
export interface DropDownModalPickerProps {
|
|
47
|
+
dropdownOverlayColor?: string;
|
|
48
|
+
}
|
|
49
|
+
|
|
43
50
|
export interface CommonDropDownPickerProps extends CommonPickerProps {
|
|
44
51
|
selectedIconName?: string;
|
|
45
52
|
selectedIconColor?: string;
|
|
@@ -84,3 +91,18 @@ export function normalizeToPickerOptions(
|
|
|
84
91
|
'Picker options must be either an array of strings, numbers, or an array of { "label": string | number; "value": string | number; } objects.'
|
|
85
92
|
);
|
|
86
93
|
}
|
|
94
|
+
|
|
95
|
+
export function usePickerItemProps(
|
|
96
|
+
childrenProp: React.ReactNode
|
|
97
|
+
): PickerItemProps {
|
|
98
|
+
return React.useMemo(() => {
|
|
99
|
+
const children = flattenReactFragments(
|
|
100
|
+
React.Children.toArray(childrenProp) as React.ReactElement[]
|
|
101
|
+
);
|
|
102
|
+
|
|
103
|
+
// Only the props of the first PickerItem are used, any others are ignored
|
|
104
|
+
const firstPickerItem = children.find((child) => child.type === PickerItem);
|
|
105
|
+
|
|
106
|
+
return firstPickerItem?.props || {};
|
|
107
|
+
}, [childrenProp]);
|
|
108
|
+
}
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { View, Text, Keyboard } from "react-native";
|
|
3
|
+
import { extractStyles, useDeepCompareMemo } from "../../../utilities";
|
|
4
|
+
import { normalizeToPickerOptions, usePickerItemProps, } from "../PickerCommon";
|
|
5
|
+
import PickerInputContainer from "../PickerInputContainer";
|
|
6
|
+
import ModalPickerComponent from "react-native-select-dropdown";
|
|
7
|
+
import { withTheme } from "../../../theming";
|
|
8
|
+
import { useOnUpdate } from "../../../hooks";
|
|
9
|
+
const ModalPicker = ({ theme, options: optionsProp = [], onValueChange, Icon, placeholder, value, autoDismissKeyboard = true, selectedIconName = "Feather/check", selectedIconColor = theme.colors.strong, selectedIconSize = 20, dropDownBackgroundColor = theme.colors.background, dropDownBorderColor = theme.colors.divider, dropDownTextColor = theme.colors.strong, dropDownBorderWidth = 1, dropDownBorderRadius = 8, children: childrenProp, disabled, dropdownOverlayColor, ...rest }) => {
|
|
10
|
+
const dropdownRef = React.useRef();
|
|
11
|
+
const [internalValue, setInternalValue] = React.useState(value);
|
|
12
|
+
const pickerItemProps = usePickerItemProps(childrenProp);
|
|
13
|
+
const { viewStyles: pickerItemViewStyles, textStyles: pickerItemTextStyles } = extractStyles(pickerItemProps.style);
|
|
14
|
+
const options = useDeepCompareMemo(() => normalizeToPickerOptions(optionsProp).map((option) => ({
|
|
15
|
+
label: option.label.toString(),
|
|
16
|
+
value: option.value,
|
|
17
|
+
})), [optionsProp]);
|
|
18
|
+
useOnUpdate(() => {
|
|
19
|
+
onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(internalValue !== null && internalValue !== void 0 ? internalValue : "");
|
|
20
|
+
// onValueChange excluded to prevent running on every re-render when using an anoymous function, which is the common case
|
|
21
|
+
}, [internalValue]);
|
|
22
|
+
return (React.createElement(PickerInputContainer, { testID: "dropdown-modal-picker", Icon: Icon, placeholder: placeholder, selectedValue: value, options: options, onPress: () => {
|
|
23
|
+
var _a;
|
|
24
|
+
(_a = dropdownRef.current) === null || _a === void 0 ? void 0 : _a.openDropdown();
|
|
25
|
+
if (autoDismissKeyboard) {
|
|
26
|
+
Keyboard.dismiss();
|
|
27
|
+
}
|
|
28
|
+
}, disabled: disabled, ...rest },
|
|
29
|
+
React.createElement(ModalPickerComponent, { ref: dropdownRef, data: options, defaultValue: internalValue, onSelect: (selectedItem) => {
|
|
30
|
+
setInternalValue(selectedItem.value);
|
|
31
|
+
}, renderButton: () => {
|
|
32
|
+
return React.createElement(React.Fragment, null);
|
|
33
|
+
}, renderItem: (item, _, isSelected) => {
|
|
34
|
+
var _a, _b, _c;
|
|
35
|
+
const backgroundColor = isSelected
|
|
36
|
+
? (_a = pickerItemProps.selectedBackgroundColor) !== null && _a !== void 0 ? _a : pickerItemViewStyles.backgroundColor
|
|
37
|
+
: pickerItemViewStyles.backgroundColor;
|
|
38
|
+
const textColor = isSelected
|
|
39
|
+
? (_b = pickerItemProps.selectedTextColor) !== null && _b !== void 0 ? _b : dropDownTextColor
|
|
40
|
+
: dropDownTextColor;
|
|
41
|
+
const textSize = isSelected
|
|
42
|
+
? (_c = pickerItemProps.selectedTextSize) !== null && _c !== void 0 ? _c : 14
|
|
43
|
+
: 14;
|
|
44
|
+
return (React.createElement(View, { style: [
|
|
45
|
+
{
|
|
46
|
+
padding: 10,
|
|
47
|
+
flexDirection: "row",
|
|
48
|
+
alignItems: "center",
|
|
49
|
+
backgroundColor: backgroundColor,
|
|
50
|
+
},
|
|
51
|
+
pickerItemViewStyles,
|
|
52
|
+
] },
|
|
53
|
+
React.createElement(Text, { style: [
|
|
54
|
+
{
|
|
55
|
+
color: textColor,
|
|
56
|
+
fontSize: textSize,
|
|
57
|
+
flex: 1,
|
|
58
|
+
},
|
|
59
|
+
pickerItemTextStyles,
|
|
60
|
+
] }, item.label),
|
|
61
|
+
isSelected ? (React.createElement(Icon, { name: selectedIconName, size: selectedIconSize, color: selectedIconColor })) : null));
|
|
62
|
+
}, showsVerticalScrollIndicator: false, dropdownOverlayColor: dropdownOverlayColor, dropdownStyle: {
|
|
63
|
+
borderColor: dropDownBorderColor,
|
|
64
|
+
borderWidth: dropDownBorderWidth,
|
|
65
|
+
borderRadius: dropDownBorderRadius,
|
|
66
|
+
backgroundColor: dropDownBackgroundColor,
|
|
67
|
+
}, disableAutoScroll: true, statusBarTranslucent: true })));
|
|
68
|
+
};
|
|
69
|
+
export default withTheme(ModalPicker);
|
|
70
|
+
//# sourceMappingURL=DropDownModalPicker.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DropDownModalPicker.js","sourceRoot":"","sources":["DropDownModalPicker.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,155 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { View, Text, Keyboard } from "react-native";
|
|
3
|
+
import { extractStyles, useDeepCompareMemo } from "../../../utilities";
|
|
4
|
+
import {
|
|
5
|
+
CommonDropDownPickerProps,
|
|
6
|
+
DropDownModalPickerProps,
|
|
7
|
+
SinglePickerProps,
|
|
8
|
+
normalizeToPickerOptions,
|
|
9
|
+
usePickerItemProps,
|
|
10
|
+
} from "../PickerCommon";
|
|
11
|
+
import PickerInputContainer from "../PickerInputContainer";
|
|
12
|
+
import ModalPickerComponent from "react-native-select-dropdown";
|
|
13
|
+
import { withTheme } from "../../../theming";
|
|
14
|
+
import { useOnUpdate } from "../../../hooks";
|
|
15
|
+
|
|
16
|
+
const ModalPicker: React.FC<
|
|
17
|
+
React.PropsWithChildren<
|
|
18
|
+
CommonDropDownPickerProps & SinglePickerProps & DropDownModalPickerProps
|
|
19
|
+
>
|
|
20
|
+
> = ({
|
|
21
|
+
theme,
|
|
22
|
+
options: optionsProp = [],
|
|
23
|
+
onValueChange,
|
|
24
|
+
Icon,
|
|
25
|
+
placeholder,
|
|
26
|
+
value,
|
|
27
|
+
autoDismissKeyboard = true,
|
|
28
|
+
selectedIconName = "Feather/check",
|
|
29
|
+
selectedIconColor = theme.colors.strong,
|
|
30
|
+
selectedIconSize = 20,
|
|
31
|
+
dropDownBackgroundColor = theme.colors.background,
|
|
32
|
+
dropDownBorderColor = theme.colors.divider,
|
|
33
|
+
dropDownTextColor = theme.colors.strong,
|
|
34
|
+
dropDownBorderWidth = 1,
|
|
35
|
+
dropDownBorderRadius = 8,
|
|
36
|
+
children: childrenProp,
|
|
37
|
+
disabled,
|
|
38
|
+
dropdownOverlayColor,
|
|
39
|
+
...rest
|
|
40
|
+
}) => {
|
|
41
|
+
const dropdownRef = React.useRef<ModalPickerComponent>();
|
|
42
|
+
|
|
43
|
+
const [internalValue, setInternalValue] = React.useState<
|
|
44
|
+
string | number | undefined
|
|
45
|
+
>(value);
|
|
46
|
+
|
|
47
|
+
const pickerItemProps = usePickerItemProps(childrenProp);
|
|
48
|
+
|
|
49
|
+
const { viewStyles: pickerItemViewStyles, textStyles: pickerItemTextStyles } =
|
|
50
|
+
extractStyles(pickerItemProps.style);
|
|
51
|
+
|
|
52
|
+
const options = useDeepCompareMemo(
|
|
53
|
+
() =>
|
|
54
|
+
normalizeToPickerOptions(optionsProp).map((option) => ({
|
|
55
|
+
label: option.label.toString(),
|
|
56
|
+
value: option.value,
|
|
57
|
+
})),
|
|
58
|
+
[optionsProp]
|
|
59
|
+
);
|
|
60
|
+
|
|
61
|
+
useOnUpdate(() => {
|
|
62
|
+
onValueChange?.(internalValue ?? "");
|
|
63
|
+
// onValueChange excluded to prevent running on every re-render when using an anoymous function, which is the common case
|
|
64
|
+
}, [internalValue]);
|
|
65
|
+
|
|
66
|
+
return (
|
|
67
|
+
<PickerInputContainer
|
|
68
|
+
testID="dropdown-modal-picker"
|
|
69
|
+
Icon={Icon}
|
|
70
|
+
placeholder={placeholder}
|
|
71
|
+
selectedValue={value}
|
|
72
|
+
options={options}
|
|
73
|
+
onPress={() => {
|
|
74
|
+
dropdownRef.current?.openDropdown();
|
|
75
|
+
if (autoDismissKeyboard) {
|
|
76
|
+
Keyboard.dismiss();
|
|
77
|
+
}
|
|
78
|
+
}}
|
|
79
|
+
disabled={disabled}
|
|
80
|
+
{...rest}
|
|
81
|
+
>
|
|
82
|
+
<ModalPickerComponent
|
|
83
|
+
ref={dropdownRef as React.LegacyRef<ModalPickerComponent>}
|
|
84
|
+
data={options}
|
|
85
|
+
defaultValue={internalValue}
|
|
86
|
+
onSelect={(selectedItem) => {
|
|
87
|
+
setInternalValue(selectedItem.value);
|
|
88
|
+
}}
|
|
89
|
+
renderButton={() => {
|
|
90
|
+
return <></>;
|
|
91
|
+
}}
|
|
92
|
+
renderItem={(item, _, isSelected) => {
|
|
93
|
+
const backgroundColor = isSelected
|
|
94
|
+
? pickerItemProps.selectedBackgroundColor ??
|
|
95
|
+
pickerItemViewStyles.backgroundColor
|
|
96
|
+
: pickerItemViewStyles.backgroundColor;
|
|
97
|
+
|
|
98
|
+
const textColor = isSelected
|
|
99
|
+
? pickerItemProps.selectedTextColor ?? dropDownTextColor
|
|
100
|
+
: dropDownTextColor;
|
|
101
|
+
|
|
102
|
+
const textSize = isSelected
|
|
103
|
+
? pickerItemProps.selectedTextSize ?? 14
|
|
104
|
+
: 14;
|
|
105
|
+
|
|
106
|
+
return (
|
|
107
|
+
<View
|
|
108
|
+
style={[
|
|
109
|
+
{
|
|
110
|
+
padding: 10,
|
|
111
|
+
flexDirection: "row",
|
|
112
|
+
alignItems: "center",
|
|
113
|
+
backgroundColor: backgroundColor,
|
|
114
|
+
},
|
|
115
|
+
pickerItemViewStyles,
|
|
116
|
+
]}
|
|
117
|
+
>
|
|
118
|
+
<Text
|
|
119
|
+
style={[
|
|
120
|
+
{
|
|
121
|
+
color: textColor,
|
|
122
|
+
fontSize: textSize,
|
|
123
|
+
flex: 1,
|
|
124
|
+
},
|
|
125
|
+
pickerItemTextStyles,
|
|
126
|
+
]}
|
|
127
|
+
>
|
|
128
|
+
{item.label}
|
|
129
|
+
</Text>
|
|
130
|
+
{isSelected ? (
|
|
131
|
+
<Icon
|
|
132
|
+
name={selectedIconName}
|
|
133
|
+
size={selectedIconSize}
|
|
134
|
+
color={selectedIconColor}
|
|
135
|
+
/>
|
|
136
|
+
) : null}
|
|
137
|
+
</View>
|
|
138
|
+
);
|
|
139
|
+
}}
|
|
140
|
+
showsVerticalScrollIndicator={false}
|
|
141
|
+
dropdownOverlayColor={dropdownOverlayColor}
|
|
142
|
+
dropdownStyle={{
|
|
143
|
+
borderColor: dropDownBorderColor,
|
|
144
|
+
borderWidth: dropDownBorderWidth,
|
|
145
|
+
borderRadius: dropDownBorderRadius,
|
|
146
|
+
backgroundColor: dropDownBackgroundColor,
|
|
147
|
+
}}
|
|
148
|
+
disableAutoScroll
|
|
149
|
+
statusBarTranslucent
|
|
150
|
+
/>
|
|
151
|
+
</PickerInputContainer>
|
|
152
|
+
);
|
|
153
|
+
};
|
|
154
|
+
|
|
155
|
+
export default withTheme(ModalPicker);
|
|
@@ -1,22 +1,16 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { Keyboard } from "react-native";
|
|
3
|
-
import { extractStyles,
|
|
4
|
-
import { normalizeToPickerOptions, } from "../PickerCommon";
|
|
3
|
+
import { extractStyles, useDeepCompareMemo } from "../../../utilities";
|
|
4
|
+
import { normalizeToPickerOptions, usePickerItemProps, } from "../PickerCommon";
|
|
5
5
|
import PickerInputContainer from "../PickerInputContainer";
|
|
6
6
|
import DropDownPickerComponent from "react-native-dropdown-picker";
|
|
7
7
|
import { withTheme } from "../../../theming";
|
|
8
|
-
import PickerItem from "./PickerItem";
|
|
9
8
|
import { useOnUpdate } from "../../../hooks";
|
|
10
9
|
const DropDownPicker = ({ theme, options: optionsProp = [], onValueChange, Icon, placeholder, value, autoDismissKeyboard = true, selectedIconName = "Feather/check", selectedIconColor = theme.colors.strong, selectedIconSize = 20, dropDownBackgroundColor = theme.colors.background, dropDownBorderColor = theme.colors.divider, dropDownTextColor = theme.colors.strong, dropDownBorderWidth = 1, dropDownBorderRadius = 8, children: childrenProp, disabled, ...rest }) => {
|
|
11
10
|
const [pickerVisible, setPickerVisible] = React.useState(false);
|
|
12
11
|
const [internalValue, setInternalValue] = React.useState(value);
|
|
13
12
|
const isMultiSelect = Array.isArray(value);
|
|
14
|
-
const pickerItemProps =
|
|
15
|
-
const children = flattenReactFragments(React.Children.toArray(childrenProp));
|
|
16
|
-
// Only the props of the first PickerItem are used, any others are ignored
|
|
17
|
-
const firstPickerItem = children.find((child) => child.type === PickerItem);
|
|
18
|
-
return (firstPickerItem === null || firstPickerItem === void 0 ? void 0 : firstPickerItem.props) || {};
|
|
19
|
-
}, [childrenProp]);
|
|
13
|
+
const pickerItemProps = usePickerItemProps(childrenProp);
|
|
20
14
|
const { viewStyles: pickerItemViewStyles, textStyles: pickerItemTextStyles } = extractStyles(pickerItemProps.style);
|
|
21
15
|
const options = useDeepCompareMemo(() => normalizeToPickerOptions(optionsProp).map((option) => ({
|
|
22
16
|
label: option.label.toString(),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropDownPicker.js","sourceRoot":"","sources":["DropDownPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,
|
|
1
|
+
{"version":3,"file":"DropDownPicker.js","sourceRoot":"","sources":["DropDownPicker.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,20 +1,16 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { Keyboard } from "react-native";
|
|
3
|
-
import {
|
|
4
|
-
extractStyles,
|
|
5
|
-
flattenReactFragments,
|
|
6
|
-
useDeepCompareMemo,
|
|
7
|
-
} from "../../../utilities";
|
|
3
|
+
import { extractStyles, useDeepCompareMemo } from "../../../utilities";
|
|
8
4
|
import {
|
|
9
5
|
CommonDropDownPickerProps,
|
|
10
6
|
MultiSelectPickerProps,
|
|
11
7
|
SinglePickerProps,
|
|
12
8
|
normalizeToPickerOptions,
|
|
9
|
+
usePickerItemProps,
|
|
13
10
|
} from "../PickerCommon";
|
|
14
11
|
import PickerInputContainer from "../PickerInputContainer";
|
|
15
12
|
import DropDownPickerComponent from "react-native-dropdown-picker";
|
|
16
13
|
import { withTheme } from "../../../theming";
|
|
17
|
-
import PickerItem, { PickerItemProps } from "./PickerItem";
|
|
18
14
|
import { useOnUpdate } from "../../../hooks";
|
|
19
15
|
|
|
20
16
|
const DropDownPicker: React.FC<
|
|
@@ -48,16 +44,7 @@ const DropDownPicker: React.FC<
|
|
|
48
44
|
|
|
49
45
|
const isMultiSelect = Array.isArray(value);
|
|
50
46
|
|
|
51
|
-
const pickerItemProps
|
|
52
|
-
const children = flattenReactFragments(
|
|
53
|
-
React.Children.toArray(childrenProp) as React.ReactElement[]
|
|
54
|
-
);
|
|
55
|
-
|
|
56
|
-
// Only the props of the first PickerItem are used, any others are ignored
|
|
57
|
-
const firstPickerItem = children.find((child) => child.type === PickerItem);
|
|
58
|
-
|
|
59
|
-
return firstPickerItem?.props || {};
|
|
60
|
-
}, [childrenProp]);
|
|
47
|
+
const pickerItemProps = usePickerItemProps(childrenProp);
|
|
61
48
|
|
|
62
49
|
const { viewStyles: pickerItemViewStyles, textStyles: pickerItemTextStyles } =
|
|
63
50
|
extractStyles(pickerItemProps.style);
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import NativePicker from "./NativePicker";
|
|
3
3
|
import DropDownPicker from "./dropdown/DropDownPicker";
|
|
4
|
+
import DropDownModalPicker from "./dropdown/DropDownModalPicker";
|
|
4
5
|
import { withTheme } from "../../theming";
|
|
5
6
|
const SinglePicker = ({ mode = "native", ...rest }) => {
|
|
6
7
|
switch (mode) {
|
|
@@ -10,6 +11,9 @@ const SinglePicker = ({ mode = "native", ...rest }) => {
|
|
|
10
11
|
case "dropdown":
|
|
11
12
|
//@ts-ignore
|
|
12
13
|
return React.createElement(DropDownPicker, { ...rest });
|
|
14
|
+
case "dropdown-modal":
|
|
15
|
+
//@ts-ignore
|
|
16
|
+
return React.createElement(DropDownModalPicker, { ...rest });
|
|
13
17
|
}
|
|
14
18
|
};
|
|
15
19
|
export const Picker = withTheme(SinglePicker);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAC1C,OAAO,cAAc,MAAM,2BAA2B,CAAC;AACvD,OAAO,mBAAmB,MAAM,gCAAgC,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAS1C,MAAM,YAAY,GAAmD,CAAC,EACpE,IAAI,GAAG,QAAQ,EACf,GAAG,IAAI,EACR,EAAE,EAAE;IACH,QAAQ,IAAI,EAAE;QACZ,KAAK,QAAQ;YACX,qCAAqC;YACrC,OAAO,oBAAC,YAAY,OAAK,IAAI,GAAI,CAAC;QACpC,KAAK,UAAU;YACb,YAAY;YACZ,OAAO,oBAAC,cAAc,OAAK,IAAI,GAAI,CAAC;QACtC,KAAK,gBAAgB;YACnB,YAAY;YACZ,OAAO,oBAAC,mBAAmB,OAAK,IAAI,GAAI,CAAC;KAC5C;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,SAAS,CAAC,YAAY,CAAC,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,uBAAuB,CAAC"}
|
|
@@ -1,11 +1,19 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import {
|
|
2
|
+
import {
|
|
3
|
+
CommonDropDownPickerProps,
|
|
4
|
+
DropDownModalPickerProps,
|
|
5
|
+
SinglePickerProps,
|
|
6
|
+
} from "./PickerCommon";
|
|
3
7
|
import NativePicker from "./NativePicker";
|
|
4
8
|
import DropDownPicker from "./dropdown/DropDownPicker";
|
|
9
|
+
import DropDownModalPicker from "./dropdown/DropDownModalPicker";
|
|
5
10
|
import { withTheme } from "../../theming";
|
|
6
11
|
|
|
7
|
-
interface PickerProps
|
|
8
|
-
|
|
12
|
+
interface PickerProps
|
|
13
|
+
extends CommonDropDownPickerProps,
|
|
14
|
+
SinglePickerProps,
|
|
15
|
+
DropDownModalPickerProps {
|
|
16
|
+
mode?: "native" | "dropdown" | "dropdown-modal";
|
|
9
17
|
}
|
|
10
18
|
|
|
11
19
|
const SinglePicker: React.FC<React.PropsWithChildren<PickerProps>> = ({
|
|
@@ -19,6 +27,9 @@ const SinglePicker: React.FC<React.PropsWithChildren<PickerProps>> = ({
|
|
|
19
27
|
case "dropdown":
|
|
20
28
|
//@ts-ignore
|
|
21
29
|
return <DropDownPicker {...rest} />;
|
|
30
|
+
case "dropdown-modal":
|
|
31
|
+
//@ts-ignore
|
|
32
|
+
return <DropDownModalPicker {...rest} />;
|
|
22
33
|
}
|
|
23
34
|
};
|
|
24
35
|
|