@draftbit/core 48.4.8-618b68.2 → 48.4.8-a0f5d6.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/Picker/Picker.js +1 -1
- package/lib/commonjs/components/Picker/PickerInputContainer.js +1 -0
- package/lib/commonjs/utilities.js +1 -1
- package/lib/typescript/src/components/Picker/Picker.d.ts +1 -27
- package/lib/typescript/src/components/Picker/Picker.js +12 -28
- package/lib/typescript/src/components/Picker/Picker.js.map +1 -1
- package/lib/typescript/src/components/Picker/PickerCommon.d.ts +27 -0
- package/lib/typescript/src/components/Picker/PickerCommon.js +2 -0
- package/lib/typescript/src/components/Picker/PickerCommon.js.map +1 -0
- package/lib/typescript/src/components/Picker/PickerInputContainer.d.ts +9 -0
- package/lib/typescript/src/components/Picker/PickerInputContainer.js +26 -0
- package/lib/typescript/src/components/Picker/PickerInputContainer.js.map +1 -0
- package/lib/typescript/src/utilities.d.ts +4 -0
- package/lib/typescript/src/utilities.js +15 -1
- package/lib/typescript/src/utilities.js.map +1 -1
- package/lib/typescript/tsconfig.tsbuildinfo +1 -1
- package/package.json +4 -3
- package/src/components/Picker/Picker.js +12 -28
- package/src/components/Picker/Picker.js.map +1 -1
- package/src/components/Picker/Picker.tsx +22 -85
- package/src/components/Picker/PickerCommon.js +2 -0
- package/src/components/Picker/PickerCommon.js.map +1 -0
- package/src/components/Picker/PickerCommon.ts +30 -0
- package/src/components/Picker/PickerInputContainer.js +26 -0
- package/src/components/Picker/PickerInputContainer.js.map +1 -0
- package/src/components/Picker/PickerInputContainer.tsx +74 -0
- package/src/utilities.js +15 -1
- package/src/utilities.js.map +1 -1
- package/src/utilities.ts +22 -1
- package/lib/typescript/src/components/Picker/PickerTypes.d.ts +0 -18
- package/lib/typescript/src/components/Picker/PickerTypes.js +0 -2
- package/lib/typescript/src/components/Picker/PickerTypes.js.map +0 -1
- package/src/components/Picker/PickerTypes.js +0 -2
- package/src/components/Picker/PickerTypes.js.map +0 -1
- package/src/components/Picker/PickerTypes.ts +0 -18
- /package/lib/commonjs/components/Picker/{PickerTypes.js → PickerCommon.js} +0 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@draftbit/core",
|
|
3
|
-
"version": "48.4.8-
|
|
3
|
+
"version": "48.4.8-a0f5d6.2+a0f5d62",
|
|
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": "^48.4.8-
|
|
44
|
+
"@draftbit/types": "^48.4.8-a0f5d6.2+a0f5d62",
|
|
45
45
|
"@expo/vector-icons": "^13.0.0",
|
|
46
46
|
"@material-ui/core": "^4.11.0",
|
|
47
47
|
"@material-ui/pickers": "^3.2.10",
|
|
@@ -52,6 +52,7 @@
|
|
|
52
52
|
"date-fns": "^2.16.1",
|
|
53
53
|
"dateformat": "^3.0.3",
|
|
54
54
|
"expo-av": "~13.2.1",
|
|
55
|
+
"lodash.isequal": "^4.5.0",
|
|
55
56
|
"lodash.isnumber": "^3.0.3",
|
|
56
57
|
"lodash.omit": "^4.5.0",
|
|
57
58
|
"lodash.tonumber": "^4.0.3",
|
|
@@ -100,5 +101,5 @@
|
|
|
100
101
|
],
|
|
101
102
|
"testEnvironment": "node"
|
|
102
103
|
},
|
|
103
|
-
"gitHead": "
|
|
104
|
+
"gitHead": "a0f5d629e93b48e62d85c027f6638905a5518304"
|
|
104
105
|
}
|
|
@@ -1,21 +1,18 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import { View, StyleSheet, Platform, Keyboard
|
|
2
|
+
import { View, StyleSheet, Platform, Keyboard } from "react-native";
|
|
3
3
|
import { isObject } from "lodash";
|
|
4
4
|
import { SafeAreaView } from "react-native-safe-area-context";
|
|
5
5
|
import { Picker as NativePicker } from "@react-native-picker/picker";
|
|
6
6
|
import Portal from "../Portal/Portal";
|
|
7
7
|
import { Button } from "../Button";
|
|
8
|
-
import
|
|
9
|
-
import
|
|
10
|
-
import TextField from "../TextField";
|
|
11
|
-
import omit from "lodash.omit";
|
|
8
|
+
import { useDeepCompareMemo } from "../../utilities";
|
|
9
|
+
import PickerInputContainer from "./PickerInputContainer";
|
|
12
10
|
const isIos = Platform.OS === "ios";
|
|
13
11
|
const isWeb = Platform.OS === "web";
|
|
14
|
-
const Picker = ({ options: optionsProp = [], onValueChange, Icon,
|
|
15
|
-
var _a;
|
|
12
|
+
const Picker = ({ options: optionsProp = [], onValueChange, Icon, placeholder, value, autoDismissKeyboard = true, ...rest }) => {
|
|
16
13
|
const pickerRef = React.useRef(null);
|
|
17
14
|
const [pickerVisible, setPickerVisible] = React.useState(false);
|
|
18
|
-
const options =
|
|
15
|
+
const options = useDeepCompareMemo(() => {
|
|
19
16
|
const normalizedOptions = normalizeToPickerOptions(optionsProp);
|
|
20
17
|
// Underlying Picker component defaults selection to first element when value is not provided (or undefined)
|
|
21
18
|
// Placholder must be the 1st option in order to allow selection of the 'actual' 1st option
|
|
@@ -30,16 +27,6 @@ const Picker = ({ options: optionsProp = [], onValueChange, Icon, style, placeho
|
|
|
30
27
|
if (!placeholder && options.length && !value && value !== options[0].value) {
|
|
31
28
|
onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(options[0].value);
|
|
32
29
|
}
|
|
33
|
-
const selectedLabel = ((_a = options.find((option) => option.value === String(value))) === null || _a === void 0 ? void 0 : _a.label) ||
|
|
34
|
-
value ||
|
|
35
|
-
placeholder;
|
|
36
|
-
const containerStyle = StyleSheet.flatten([
|
|
37
|
-
extractSizeStyles(style),
|
|
38
|
-
extractPositionStyles(style),
|
|
39
|
-
extractFlexItemStyles(style),
|
|
40
|
-
extractBorderAndMarginStyles(style).marginStyles,
|
|
41
|
-
]);
|
|
42
|
-
const textFieldStyle = omit(style, Object.keys(containerStyle));
|
|
43
30
|
const renderNativePicker = () => (React.createElement(NativePicker, { ref: pickerRef, selectedValue: value, onValueChange: (newValue) => {
|
|
44
31
|
if (newValue !== placeholder) {
|
|
45
32
|
onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(newValue);
|
|
@@ -50,7 +37,7 @@ const Picker = ({ options: optionsProp = [], onValueChange, Icon, style, placeho
|
|
|
50
37
|
}, style: [
|
|
51
38
|
styles.nativePicker,
|
|
52
39
|
isIos ? styles.iosNativePicker : styles.nonIosPicker,
|
|
53
|
-
], onBlur: () => setPickerVisible(false) }, options.map((option) => (React.createElement(NativePicker.Item, { label: option.label, value: option.value, key: option.value })))));
|
|
40
|
+
], onBlur: () => setPickerVisible(false) }, options.map((option) => (React.createElement(NativePicker.Item, { label: option.label.toString(), value: option.value, key: option.value })))));
|
|
54
41
|
const renderPicker = () => {
|
|
55
42
|
if (isIos) {
|
|
56
43
|
return (React.createElement(Portal, null,
|
|
@@ -74,10 +61,7 @@ const Picker = ({ options: optionsProp = [], onValueChange, Icon, style, placeho
|
|
|
74
61
|
Keyboard.dismiss();
|
|
75
62
|
}
|
|
76
63
|
}, [pickerVisible, autoDismissKeyboard]);
|
|
77
|
-
return (React.createElement(
|
|
78
|
-
React.createElement(Touchable, { disabled: disabled, onPress: () => setPickerVisible(!pickerVisible) },
|
|
79
|
-
React.createElement(TextField, { Icon: Icon, numberOfLines: 1, onChangeText: () => { }, value: String(selectedLabel !== null && selectedLabel !== void 0 ? selectedLabel : placeholder), editable: false, disabled: disabled, style: textFieldStyle, ...rest })),
|
|
80
|
-
(pickerVisible || isWeb) && renderPicker()));
|
|
64
|
+
return (React.createElement(PickerInputContainer, { Icon: Icon, placeholder: placeholder, selectedValue: value, options: options, onPress: () => setPickerVisible(!pickerVisible), ...rest }, (pickerVisible || isWeb) && renderPicker()));
|
|
81
65
|
};
|
|
82
66
|
const styles = StyleSheet.create({
|
|
83
67
|
nativePicker: {
|
|
@@ -111,19 +95,19 @@ function normalizeToPickerOptions(options) {
|
|
|
111
95
|
const firstOption = options[0];
|
|
112
96
|
if (typeof firstOption === ("string" || "number")) {
|
|
113
97
|
return options.map((option) => ({
|
|
114
|
-
label:
|
|
115
|
-
value:
|
|
98
|
+
label: option,
|
|
99
|
+
value: option,
|
|
116
100
|
}));
|
|
117
101
|
}
|
|
118
102
|
if (isObject(firstOption) && firstOption.value && firstOption.label) {
|
|
119
103
|
return options.map((option) => {
|
|
120
104
|
return {
|
|
121
|
-
label:
|
|
122
|
-
value:
|
|
105
|
+
label: option.label,
|
|
106
|
+
value: option.value,
|
|
123
107
|
};
|
|
124
108
|
});
|
|
125
109
|
}
|
|
126
|
-
throw new Error('Picker options must be either an array of strings or array of { "label": string; "value": string; } objects.');
|
|
110
|
+
throw new Error('Picker options must be either an array of strings, numbers, or an array of { "label": string | number; "value": string | number; } objects.');
|
|
127
111
|
}
|
|
128
112
|
export default Picker;
|
|
129
113
|
//# sourceMappingURL=Picker.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Picker.js","sourceRoot":"","sources":["Picker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,
|
|
1
|
+
{"version":3,"file":"Picker.js","sourceRoot":"","sources":["Picker.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,52 +1,13 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import {
|
|
3
|
-
View,
|
|
4
|
-
StyleSheet,
|
|
5
|
-
Platform,
|
|
6
|
-
ViewStyle,
|
|
7
|
-
StyleProp,
|
|
8
|
-
Keyboard,
|
|
9
|
-
} from "react-native";
|
|
2
|
+
import { View, StyleSheet, Platform, Keyboard } from "react-native";
|
|
10
3
|
import { isObject } from "lodash";
|
|
11
4
|
import { SafeAreaView } from "react-native-safe-area-context";
|
|
12
5
|
import { Picker as NativePicker } from "@react-native-picker/picker";
|
|
13
6
|
import Portal from "../Portal/Portal";
|
|
14
7
|
import { Button } from "../Button";
|
|
15
|
-
import
|
|
16
|
-
import
|
|
17
|
-
import
|
|
18
|
-
extractBorderAndMarginStyles,
|
|
19
|
-
extractSizeStyles,
|
|
20
|
-
extractFlexItemStyles,
|
|
21
|
-
extractPositionStyles,
|
|
22
|
-
} from "../../utilities";
|
|
23
|
-
import TextField from "../TextField";
|
|
24
|
-
import omit from "lodash.omit";
|
|
25
|
-
|
|
26
|
-
export interface PickerOption {
|
|
27
|
-
value: string;
|
|
28
|
-
label: string;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
export type PickerProps = {
|
|
32
|
-
error?: any;
|
|
33
|
-
placeholder?: string;
|
|
34
|
-
disabled?: boolean;
|
|
35
|
-
style?: StyleProp<ViewStyle> & { height?: number };
|
|
36
|
-
value?: string;
|
|
37
|
-
options: PickerOption[] | string[];
|
|
38
|
-
onValueChange: (value: string) => void;
|
|
39
|
-
assistiveText?: string;
|
|
40
|
-
label?: string;
|
|
41
|
-
iconColor?: string;
|
|
42
|
-
iconSize?: number;
|
|
43
|
-
leftIconMode?: "inset" | "outset";
|
|
44
|
-
leftIconName?: string;
|
|
45
|
-
placeholderTextColor?: string;
|
|
46
|
-
rightIconName?: string;
|
|
47
|
-
type?: "solid" | "underline";
|
|
48
|
-
autoDismissKeyboard?: boolean;
|
|
49
|
-
} & IconSlot;
|
|
8
|
+
import { useDeepCompareMemo } from "../../utilities";
|
|
9
|
+
import { PickerOption, PickerProps } from "./PickerCommon";
|
|
10
|
+
import PickerInputContainer from "./PickerInputContainer";
|
|
50
11
|
|
|
51
12
|
const isIos = Platform.OS === "ios";
|
|
52
13
|
const isWeb = Platform.OS === "web";
|
|
@@ -55,18 +16,16 @@ const Picker: React.FC<PickerProps> = ({
|
|
|
55
16
|
options: optionsProp = [],
|
|
56
17
|
onValueChange,
|
|
57
18
|
Icon,
|
|
58
|
-
style,
|
|
59
19
|
placeholder,
|
|
60
20
|
value,
|
|
61
|
-
disabled = false,
|
|
62
21
|
autoDismissKeyboard = true,
|
|
63
22
|
...rest
|
|
64
23
|
}) => {
|
|
65
|
-
const pickerRef = React.useRef<NativePicker<string>>(null);
|
|
24
|
+
const pickerRef = React.useRef<NativePicker<string | number>>(null);
|
|
66
25
|
|
|
67
26
|
const [pickerVisible, setPickerVisible] = React.useState(false);
|
|
68
27
|
|
|
69
|
-
const options =
|
|
28
|
+
const options = useDeepCompareMemo(() => {
|
|
70
29
|
const normalizedOptions = normalizeToPickerOptions(optionsProp);
|
|
71
30
|
|
|
72
31
|
// Underlying Picker component defaults selection to first element when value is not provided (or undefined)
|
|
@@ -83,19 +42,6 @@ const Picker: React.FC<PickerProps> = ({
|
|
|
83
42
|
onValueChange?.(options[0].value);
|
|
84
43
|
}
|
|
85
44
|
|
|
86
|
-
const selectedLabel =
|
|
87
|
-
options.find((option) => option.value === String(value))?.label ||
|
|
88
|
-
value ||
|
|
89
|
-
placeholder;
|
|
90
|
-
|
|
91
|
-
const containerStyle = StyleSheet.flatten([
|
|
92
|
-
extractSizeStyles(style),
|
|
93
|
-
extractPositionStyles(style),
|
|
94
|
-
extractFlexItemStyles(style),
|
|
95
|
-
extractBorderAndMarginStyles(style).marginStyles,
|
|
96
|
-
]);
|
|
97
|
-
const textFieldStyle = omit(style, Object.keys(containerStyle));
|
|
98
|
-
|
|
99
45
|
const renderNativePicker = () => (
|
|
100
46
|
<NativePicker
|
|
101
47
|
ref={pickerRef}
|
|
@@ -113,9 +59,9 @@ const Picker: React.FC<PickerProps> = ({
|
|
|
113
59
|
]}
|
|
114
60
|
onBlur={() => setPickerVisible(false)}
|
|
115
61
|
>
|
|
116
|
-
{
|
|
62
|
+
{options.map((option) => (
|
|
117
63
|
<NativePicker.Item
|
|
118
|
-
label={option.label}
|
|
64
|
+
label={option.label.toString()}
|
|
119
65
|
value={option.value}
|
|
120
66
|
key={option.value}
|
|
121
67
|
/>
|
|
@@ -160,26 +106,17 @@ const Picker: React.FC<PickerProps> = ({
|
|
|
160
106
|
}, [pickerVisible, autoDismissKeyboard]);
|
|
161
107
|
|
|
162
108
|
return (
|
|
163
|
-
<
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
onChangeText={() => {}}
|
|
172
|
-
value={String(selectedLabel ?? placeholder)}
|
|
173
|
-
editable={false}
|
|
174
|
-
disabled={disabled}
|
|
175
|
-
style={textFieldStyle}
|
|
176
|
-
{...rest}
|
|
177
|
-
/>
|
|
178
|
-
</Touchable>
|
|
179
|
-
|
|
109
|
+
<PickerInputContainer
|
|
110
|
+
Icon={Icon}
|
|
111
|
+
placeholder={placeholder}
|
|
112
|
+
selectedValue={value}
|
|
113
|
+
options={options}
|
|
114
|
+
onPress={() => setPickerVisible(!pickerVisible)}
|
|
115
|
+
{...rest}
|
|
116
|
+
>
|
|
180
117
|
{/* Web version is collapsed by default, always show to allow direct expand */}
|
|
181
118
|
{(pickerVisible || isWeb) && renderPicker()}
|
|
182
|
-
</
|
|
119
|
+
</PickerInputContainer>
|
|
183
120
|
);
|
|
184
121
|
};
|
|
185
122
|
|
|
@@ -220,22 +157,22 @@ function normalizeToPickerOptions(
|
|
|
220
157
|
|
|
221
158
|
if (typeof firstOption === ("string" || "number")) {
|
|
222
159
|
return options.map((option) => ({
|
|
223
|
-
label:
|
|
224
|
-
value:
|
|
160
|
+
label: option as string | number,
|
|
161
|
+
value: option as string | number,
|
|
225
162
|
}));
|
|
226
163
|
}
|
|
227
164
|
|
|
228
165
|
if (isObject(firstOption) && firstOption.value && firstOption.label) {
|
|
229
166
|
return (options as PickerOption[]).map((option) => {
|
|
230
167
|
return {
|
|
231
|
-
label:
|
|
232
|
-
value:
|
|
168
|
+
label: option.label,
|
|
169
|
+
value: option.value,
|
|
233
170
|
};
|
|
234
171
|
});
|
|
235
172
|
}
|
|
236
173
|
|
|
237
174
|
throw new Error(
|
|
238
|
-
'Picker options must be either an array of strings or array of { "label": string; "value": string; } objects.'
|
|
175
|
+
'Picker options must be either an array of strings, numbers, or an array of { "label": string | number; "value": string | number; } objects.'
|
|
239
176
|
);
|
|
240
177
|
}
|
|
241
178
|
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PickerCommon.js","sourceRoot":"","sources":["PickerCommon.ts"],"names":[],"mappings":""}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { StyleProp, ViewStyle } from "react-native";
|
|
2
|
+
import { IconSlot } from "../../interfaces/Icon";
|
|
3
|
+
|
|
4
|
+
export interface PickerOption {
|
|
5
|
+
value: string | number;
|
|
6
|
+
label: string | number;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
export interface PickerInputContainerProps extends IconSlot {
|
|
10
|
+
error?: any;
|
|
11
|
+
placeholder?: string;
|
|
12
|
+
disabled?: boolean;
|
|
13
|
+
style?: StyleProp<ViewStyle>;
|
|
14
|
+
label?: string;
|
|
15
|
+
assistiveText?: string;
|
|
16
|
+
iconColor?: string;
|
|
17
|
+
iconSize?: number;
|
|
18
|
+
leftIconMode?: "inset" | "outset";
|
|
19
|
+
leftIconName?: string;
|
|
20
|
+
placeholderTextColor?: string;
|
|
21
|
+
rightIconName?: string;
|
|
22
|
+
type?: "solid" | "underline";
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
export interface PickerProps extends PickerInputContainerProps {
|
|
26
|
+
value?: string | number;
|
|
27
|
+
options: PickerOption[] | string[] | number[];
|
|
28
|
+
onValueChange: (value: string | number) => void;
|
|
29
|
+
autoDismissKeyboard?: boolean;
|
|
30
|
+
}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { View, StyleSheet } from "react-native";
|
|
3
|
+
import omit from "lodash.omit";
|
|
4
|
+
import { extractSizeStyles, extractPositionStyles, extractFlexItemStyles, extractBorderAndMarginStyles, } from "../../utilities";
|
|
5
|
+
import TextField from "../TextField";
|
|
6
|
+
import Touchable from "../Touchable";
|
|
7
|
+
const PickerInputContainer = ({ options = [], onPress, Icon, style, placeholder, selectedValue, disabled = false, children, ...rest }) => {
|
|
8
|
+
var _a;
|
|
9
|
+
const containerStyle = StyleSheet.flatten([
|
|
10
|
+
extractSizeStyles(style),
|
|
11
|
+
extractPositionStyles(style),
|
|
12
|
+
extractFlexItemStyles(style),
|
|
13
|
+
extractBorderAndMarginStyles(style).marginStyles,
|
|
14
|
+
]);
|
|
15
|
+
const textFieldStyle = omit(StyleSheet.flatten(style), Object.keys(containerStyle));
|
|
16
|
+
const selectedLabel = ((_a = options
|
|
17
|
+
.find((option) => option.value === selectedValue)) === null || _a === void 0 ? void 0 : _a.label.toString()) ||
|
|
18
|
+
selectedValue ||
|
|
19
|
+
placeholder;
|
|
20
|
+
return (React.createElement(View, { style: containerStyle },
|
|
21
|
+
React.createElement(Touchable, { disabled: disabled, onPress: onPress },
|
|
22
|
+
React.createElement(TextField, { Icon: Icon, numberOfLines: 1, onChangeText: () => { }, value: selectedLabel === null || selectedLabel === void 0 ? void 0 : selectedLabel.toString(), editable: false, disabled: disabled, style: textFieldStyle, ...rest })),
|
|
23
|
+
children));
|
|
24
|
+
};
|
|
25
|
+
export default PickerInputContainer;
|
|
26
|
+
//# sourceMappingURL=PickerInputContainer.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PickerInputContainer.js","sourceRoot":"","sources":["PickerInputContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAChD,OAAO,IAAI,MAAM,aAAa,CAAC;AAC/B,OAAO,EACL,iBAAiB,EACjB,qBAAqB,EACrB,qBAAqB,EACrB,4BAA4B,GAC7B,MAAM,iBAAiB,CAAC;AACzB,OAAO,SAAS,MAAM,cAAc,CAAC;AACrC,OAAO,SAAS,MAAM,cAAc,CAAC;AAYrC,MAAM,oBAAoB,GAEtB,CAAC,EACH,OAAO,GAAG,EAAE,EACZ,OAAO,EACP,IAAI,EACJ,KAAK,EACL,WAAW,EACX,aAAa,EACb,QAAQ,GAAG,KAAK,EAChB,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,EAAE;;IACH,MAAM,cAAc,GAAG,UAAU,CAAC,OAAO,CAAC;QACxC,iBAAiB,CAAC,KAAK,CAAC;QACxB,qBAAqB,CAAC,KAAK,CAAC;QAC5B,qBAAqB,CAAC,KAAK,CAAC;QAC5B,4BAA4B,CAAC,KAAK,CAAC,CAAC,YAAY;KACjD,CAAC,CAAC;IAEH,MAAM,cAAc,GAAG,IAAI,CACzB,UAAU,CAAC,OAAO,CAAC,KAAK,CAAC,EACzB,MAAM,CAAC,IAAI,CAAC,cAAc,CAAC,CAC5B,CAAC;IAEF,MAAM,aAAa,GACjB,CAAA,MAAA,OAAO;SACJ,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,KAAK,aAAa,CAAC,0CAC/C,KAAK,CAAC,QAAQ,EAAE;QACpB,aAAa;QACb,WAAW,CAAC;IAEd,OAAO,CACL,oBAAC,IAAI,IAAC,KAAK,EAAE,cAAc;QACzB,oBAAC,SAAS,IAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO;YAC7C,oBAAC,SAAS,IACR,IAAI,EAAE,IAAI,EACV,aAAa,EAAE,CAAC,EAChB,YAAY,EAAE,GAAG,EAAE,GAAE,CAAC,EACtB,KAAK,EAAE,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,QAAQ,EAAE,EAChC,QAAQ,EAAE,KAAK,EACf,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,cAAc,KACjB,IAAI,GACR,CACQ;QACX,QAAQ,CACJ,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,oBAAoB,CAAC"}
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { View, StyleSheet } from "react-native";
|
|
3
|
+
import omit from "lodash.omit";
|
|
4
|
+
import {
|
|
5
|
+
extractSizeStyles,
|
|
6
|
+
extractPositionStyles,
|
|
7
|
+
extractFlexItemStyles,
|
|
8
|
+
extractBorderAndMarginStyles,
|
|
9
|
+
} from "../../utilities";
|
|
10
|
+
import TextField from "../TextField";
|
|
11
|
+
import Touchable from "../Touchable";
|
|
12
|
+
import {
|
|
13
|
+
PickerInputContainerProps as ExposedPickerInputContainerProps,
|
|
14
|
+
PickerOption,
|
|
15
|
+
} from "./PickerCommon";
|
|
16
|
+
|
|
17
|
+
interface PickerInputContainerProps extends ExposedPickerInputContainerProps {
|
|
18
|
+
selectedValue?: string | number;
|
|
19
|
+
options: PickerOption[];
|
|
20
|
+
onPress?: () => void;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
const PickerInputContainer: React.FC<
|
|
24
|
+
React.PropsWithChildren<PickerInputContainerProps>
|
|
25
|
+
> = ({
|
|
26
|
+
options = [],
|
|
27
|
+
onPress,
|
|
28
|
+
Icon,
|
|
29
|
+
style,
|
|
30
|
+
placeholder,
|
|
31
|
+
selectedValue,
|
|
32
|
+
disabled = false,
|
|
33
|
+
children,
|
|
34
|
+
...rest
|
|
35
|
+
}) => {
|
|
36
|
+
const containerStyle = StyleSheet.flatten([
|
|
37
|
+
extractSizeStyles(style),
|
|
38
|
+
extractPositionStyles(style),
|
|
39
|
+
extractFlexItemStyles(style),
|
|
40
|
+
extractBorderAndMarginStyles(style).marginStyles,
|
|
41
|
+
]);
|
|
42
|
+
|
|
43
|
+
const textFieldStyle = omit(
|
|
44
|
+
StyleSheet.flatten(style),
|
|
45
|
+
Object.keys(containerStyle)
|
|
46
|
+
);
|
|
47
|
+
|
|
48
|
+
const selectedLabel =
|
|
49
|
+
options
|
|
50
|
+
.find((option) => option.value === selectedValue)
|
|
51
|
+
?.label.toString() ||
|
|
52
|
+
selectedValue ||
|
|
53
|
+
placeholder;
|
|
54
|
+
|
|
55
|
+
return (
|
|
56
|
+
<View style={containerStyle}>
|
|
57
|
+
<Touchable disabled={disabled} onPress={onPress}>
|
|
58
|
+
<TextField
|
|
59
|
+
Icon={Icon}
|
|
60
|
+
numberOfLines={1}
|
|
61
|
+
onChangeText={() => {}}
|
|
62
|
+
value={selectedLabel?.toString()}
|
|
63
|
+
editable={false}
|
|
64
|
+
disabled={disabled}
|
|
65
|
+
style={textFieldStyle}
|
|
66
|
+
{...rest}
|
|
67
|
+
/>
|
|
68
|
+
</Touchable>
|
|
69
|
+
{children}
|
|
70
|
+
</View>
|
|
71
|
+
);
|
|
72
|
+
};
|
|
73
|
+
|
|
74
|
+
export default PickerInputContainer;
|
package/src/utilities.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { StyleSheet } from "react-native";
|
|
3
|
-
import { isString, isNumber, pick, pickBy, identity } from "lodash";
|
|
3
|
+
import { isString, isNumber, pick, pickBy, identity, isEqual } from "lodash";
|
|
4
4
|
export function extractStyles(style) {
|
|
5
5
|
const { color, fontFamily, fontWeight, fontSize, lineHeight, letterSpacing, textTransform, textAlign, textDecorationLine, textDecorationColor, textDecorationStyle, ...viewStyles } = StyleSheet.flatten(style || {});
|
|
6
6
|
const textStyles = {
|
|
@@ -177,4 +177,18 @@ export function flattenReactFragments(components) {
|
|
|
177
177
|
}
|
|
178
178
|
return flattened;
|
|
179
179
|
}
|
|
180
|
+
function useDeepCompareMemoize(value) {
|
|
181
|
+
const ref = React.useRef();
|
|
182
|
+
if (!isEqual(value, ref.current)) {
|
|
183
|
+
ref.current = value;
|
|
184
|
+
}
|
|
185
|
+
return ref.current;
|
|
186
|
+
}
|
|
187
|
+
/**
|
|
188
|
+
* useMemo counterpart that does a deep compare on the dependency list
|
|
189
|
+
*/
|
|
190
|
+
export function useDeepCompareMemo(factory, deps) {
|
|
191
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
192
|
+
return React.useMemo(factory, deps === null || deps === void 0 ? void 0 : deps.map(useDeepCompareMemoize));
|
|
193
|
+
}
|
|
180
194
|
//# sourceMappingURL=utilities.js.map
|
package/src/utilities.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utilities.js","sourceRoot":"","sources":["utilities.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAwB,MAAM,cAAc,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;
|
|
1
|
+
{"version":3,"file":"utilities.js","sourceRoot":"","sources":["utilities.ts"],"names":[],"mappings":"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"}
|
package/src/utilities.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { StyleSheet, StyleProp, TextStyle } from "react-native";
|
|
3
|
-
import { isString, isNumber, pick, pickBy, identity } from "lodash";
|
|
3
|
+
import { isString, isNumber, pick, pickBy, identity, isEqual } from "lodash";
|
|
4
4
|
|
|
5
5
|
export function extractStyles(style: StyleProp<any>) {
|
|
6
6
|
const {
|
|
@@ -261,3 +261,24 @@ export function flattenReactFragments(
|
|
|
261
261
|
|
|
262
262
|
return flattened;
|
|
263
263
|
}
|
|
264
|
+
|
|
265
|
+
function useDeepCompareMemoize(value: any) {
|
|
266
|
+
const ref = React.useRef();
|
|
267
|
+
|
|
268
|
+
if (!isEqual(value, ref.current)) {
|
|
269
|
+
ref.current = value;
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
return ref.current;
|
|
273
|
+
}
|
|
274
|
+
|
|
275
|
+
/**
|
|
276
|
+
* useMemo counterpart that does a deep compare on the dependency list
|
|
277
|
+
*/
|
|
278
|
+
export function useDeepCompareMemo<T>(
|
|
279
|
+
factory: () => T,
|
|
280
|
+
deps: React.DependencyList | undefined
|
|
281
|
+
): T {
|
|
282
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
283
|
+
return React.useMemo(factory, deps?.map(useDeepCompareMemoize));
|
|
284
|
+
}
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import { ViewStyle } from "react-native";
|
|
2
|
-
import { StyleProp } from "react-native";
|
|
3
|
-
import { Props as TextFieldProps } from "../TextField";
|
|
4
|
-
export interface PickerOption {
|
|
5
|
-
value: string;
|
|
6
|
-
label: string;
|
|
7
|
-
}
|
|
8
|
-
export interface PickerComponentProps extends TextFieldProps {
|
|
9
|
-
style?: StyleProp<ViewStyle> & {
|
|
10
|
-
height?: number;
|
|
11
|
-
};
|
|
12
|
-
options: PickerOption[];
|
|
13
|
-
placeholder?: string;
|
|
14
|
-
selectedValue: string;
|
|
15
|
-
disabled?: boolean;
|
|
16
|
-
onValueChange?: (value: string, index: number) => void;
|
|
17
|
-
defaultValue?: string;
|
|
18
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"PickerTypes.js","sourceRoot":"","sources":["../../../../../src/components/Picker/PickerTypes.ts"],"names":[],"mappings":""}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"PickerTypes.js","sourceRoot":"","sources":["PickerTypes.ts"],"names":[],"mappings":""}
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import { ViewStyle } from "react-native";
|
|
2
|
-
import { StyleProp } from "react-native";
|
|
3
|
-
import { Props as TextFieldProps } from "../TextField";
|
|
4
|
-
|
|
5
|
-
export interface PickerOption {
|
|
6
|
-
value: string;
|
|
7
|
-
label: string;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
export interface PickerComponentProps extends TextFieldProps {
|
|
11
|
-
style?: StyleProp<ViewStyle> & { height?: number };
|
|
12
|
-
options: PickerOption[];
|
|
13
|
-
placeholder?: string;
|
|
14
|
-
selectedValue: string;
|
|
15
|
-
disabled?: boolean;
|
|
16
|
-
onValueChange?: (value: string, index: number) => void;
|
|
17
|
-
defaultValue?: string;
|
|
18
|
-
}
|
|
File without changes
|