@draftbit/core 48.4.9-3aa6b7.2 → 48.4.9-4c18cb.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.
Files changed (64) hide show
  1. package/lib/commonjs/components/Picker/Picker.js +1 -1
  2. package/lib/commonjs/components/Picker/PickerComponent.android.js +1 -0
  3. package/lib/commonjs/components/Picker/PickerComponent.ios.js +1 -0
  4. package/lib/commonjs/components/Picker/PickerComponent.web.js +1 -0
  5. package/lib/commonjs/components/TextField.js +1 -1
  6. package/lib/commonjs/utilities.js +1 -1
  7. package/lib/typescript/src/components/Picker/Picker.d.ts +35 -3
  8. package/lib/typescript/src/components/Picker/Picker.js +244 -69
  9. package/lib/typescript/src/components/Picker/Picker.js.map +1 -1
  10. package/lib/typescript/src/components/Picker/PickerComponent.android.d.ts +6 -0
  11. package/lib/typescript/src/components/Picker/PickerComponent.android.js +70 -0
  12. package/lib/typescript/src/components/Picker/PickerComponent.android.js.map +1 -0
  13. package/lib/typescript/src/components/Picker/PickerComponent.ios.d.ts +7 -0
  14. package/lib/typescript/src/components/Picker/PickerComponent.ios.js +80 -0
  15. package/lib/typescript/src/components/Picker/PickerComponent.ios.js.map +1 -0
  16. package/lib/typescript/src/components/Picker/PickerComponent.web.d.ts +6 -0
  17. package/lib/typescript/src/components/Picker/PickerComponent.web.js +71 -0
  18. package/lib/typescript/src/components/Picker/PickerComponent.web.js.map +1 -0
  19. package/lib/typescript/src/components/Picker/PickerTypes.d.ts +18 -0
  20. package/lib/typescript/src/components/Picker/PickerTypes.js +2 -0
  21. package/lib/typescript/src/components/Picker/PickerTypes.js.map +1 -0
  22. package/lib/typescript/src/components/TextField.d.ts +3 -3
  23. package/lib/typescript/src/components/TextField.js +6 -9
  24. package/lib/typescript/src/components/TextField.js.map +1 -1
  25. package/lib/typescript/src/utilities.d.ts +0 -4
  26. package/lib/typescript/src/utilities.js +1 -15
  27. package/lib/typescript/src/utilities.js.map +1 -1
  28. package/lib/typescript/tsconfig.tsbuildinfo +1 -1
  29. package/package.json +3 -5
  30. package/src/components/Picker/Picker.js +244 -69
  31. package/src/components/Picker/Picker.js.map +1 -1
  32. package/src/components/Picker/Picker.tsx +441 -111
  33. package/src/components/Picker/PickerComponent.android.js +70 -0
  34. package/src/components/Picker/PickerComponent.android.js.map +1 -0
  35. package/src/components/Picker/PickerComponent.android.tsx +116 -0
  36. package/src/components/Picker/PickerComponent.ios.js +80 -0
  37. package/src/components/Picker/PickerComponent.ios.js.map +1 -0
  38. package/src/components/Picker/PickerComponent.ios.tsx +142 -0
  39. package/src/components/Picker/PickerComponent.web.js +71 -0
  40. package/src/components/Picker/PickerComponent.web.js.map +1 -0
  41. package/src/components/Picker/PickerComponent.web.tsx +117 -0
  42. package/src/components/Picker/PickerTypes.js +2 -0
  43. package/src/components/Picker/PickerTypes.js.map +1 -0
  44. package/src/components/Picker/PickerTypes.ts +18 -0
  45. package/src/components/TextField.js +6 -9
  46. package/src/components/TextField.js.map +1 -1
  47. package/src/components/TextField.tsx +8 -14
  48. package/src/utilities.js +1 -15
  49. package/src/utilities.js.map +1 -1
  50. package/src/utilities.ts +1 -22
  51. package/lib/commonjs/components/Picker/PickerInputContainer.js +0 -1
  52. package/lib/typescript/src/components/Picker/PickerCommon.d.ts +0 -27
  53. package/lib/typescript/src/components/Picker/PickerCommon.js +0 -2
  54. package/lib/typescript/src/components/Picker/PickerCommon.js.map +0 -1
  55. package/lib/typescript/src/components/Picker/PickerInputContainer.d.ts +0 -9
  56. package/lib/typescript/src/components/Picker/PickerInputContainer.js +0 -26
  57. package/lib/typescript/src/components/Picker/PickerInputContainer.js.map +0 -1
  58. package/src/components/Picker/PickerCommon.js +0 -2
  59. package/src/components/Picker/PickerCommon.js.map +0 -1
  60. package/src/components/Picker/PickerCommon.ts +0 -30
  61. package/src/components/Picker/PickerInputContainer.js +0 -26
  62. package/src/components/Picker/PickerInputContainer.js.map +0 -1
  63. package/src/components/Picker/PickerInputContainer.tsx +0 -74
  64. /package/lib/commonjs/components/Picker/{PickerCommon.js → PickerTypes.js} +0 -0
@@ -1,127 +1,476 @@
1
1
  import * as React from "react";
2
- import { View, StyleSheet, Platform, Keyboard } from "react-native";
3
- import { isObject } from "lodash";
2
+ import {
3
+ View,
4
+ StyleSheet,
5
+ Text,
6
+ Platform,
7
+ ViewStyle,
8
+ StyleProp,
9
+ Dimensions,
10
+ Keyboard,
11
+ } from "react-native";
12
+ import { omit, pickBy, identity, isObject } from "lodash";
4
13
  import { SafeAreaView } from "react-native-safe-area-context";
5
14
  import { Picker as NativePicker } from "@react-native-picker/picker";
15
+
16
+ import { withTheme } from "../../theming";
6
17
  import Portal from "../Portal/Portal";
7
- import { Button } from "../Button";
8
- import { useDeepCompareMemo } from "../../utilities";
9
- import { PickerOption, PickerProps } from "./PickerCommon";
10
- import PickerInputContainer from "./PickerInputContainer";
18
+ import Button from "../../deprecated-components/DeprecatedButton";
19
+ import Touchable from "../Touchable";
20
+ import type { Theme } from "../../styles/DefaultTheme";
21
+ import type { IconSlot } from "../../interfaces/Icon";
22
+ import {
23
+ extractStyles,
24
+ extractBorderAndMarginStyles,
25
+ borderStyleNames,
26
+ marginStyleNames,
27
+ } from "../../utilities";
28
+
29
+ export interface PickerOption {
30
+ value: string;
31
+ label: string;
32
+ }
33
+
34
+ export type PickerProps = {
35
+ error?: any;
36
+ placeholder?: string;
37
+ disabled?: boolean;
38
+ style?: StyleProp<ViewStyle> & { height?: number };
39
+ value?: string;
40
+ options: PickerOption[] | string[];
41
+ onValueChange: (value: string, index: number) => void;
42
+ defaultValue?: string;
43
+ assistiveText?: string;
44
+ label?: string;
45
+ iconColor?: string;
46
+ iconSize?: number;
47
+ leftIconMode?: "inset" | "outset";
48
+ leftIconName?: string;
49
+ placeholderTextColor?: string;
50
+ rightIconName?: string;
51
+ type?: "solid" | "underline";
52
+ autoDismissKeyboard?: boolean;
53
+ theme: Theme;
54
+ Icon: IconSlot["Icon"];
55
+ };
56
+
57
+ function normalizeOptions(options: PickerProps["options"]): PickerOption[] {
58
+ if (options.length === 0) {
59
+ return [];
60
+ }
11
61
 
62
+ if (typeof options[0] === ("string" || "number")) {
63
+ return (options as string[]).map((option) => ({
64
+ label: String(option),
65
+ value: String(option),
66
+ }));
67
+ }
68
+
69
+ if (
70
+ isObject(options[0]) &&
71
+ options[0].value !== null &&
72
+ options[0].label !== null
73
+ ) {
74
+ return (options as PickerOption[]).map((option) => {
75
+ return {
76
+ label: String(option.label),
77
+ value: String(option.value),
78
+ };
79
+ });
80
+ }
81
+
82
+ throw new Error(
83
+ 'Picker options must be either an array of strings or array of { "label": string; "value": string; } objects.'
84
+ );
85
+ }
86
+
87
+ const { width: deviceWidth, height: deviceHeight } = Dimensions.get("screen");
12
88
  const isIos = Platform.OS === "ios";
13
89
  const isWeb = Platform.OS === "web";
14
90
 
91
+ const unstyledColor = "rgba(165, 173, 183, 1)";
92
+ const disabledColor = "rgb(240, 240, 240)";
93
+ const errorColor = "rgba(255, 69, 100, 1)";
94
+
95
+ //Empty string for 'value' is treated as a non-value
96
+ //reason: Draftbit uses empty string as initial value for string state*/
15
97
  const Picker: React.FC<PickerProps> = ({
16
- options: optionsProp = [],
98
+ error,
99
+ options = [],
17
100
  onValueChange,
101
+ defaultValue,
18
102
  Icon,
103
+ style,
19
104
  placeholder,
20
105
  value,
106
+ disabled = false,
107
+ assistiveText,
108
+ label,
109
+ iconColor = unstyledColor,
110
+ iconSize = 24,
111
+ leftIconMode = "inset",
112
+ leftIconName,
113
+ placeholderTextColor = unstyledColor,
114
+ rightIconName,
115
+ type = "solid",
21
116
  autoDismissKeyboard = true,
22
- ...rest
23
117
  }) => {
24
- const pickerRef = React.useRef<NativePicker<string | number>>(null);
118
+ const androidPickerRef = React.useRef<any | undefined>(undefined);
119
+
120
+ const [internalValue, setInternalValue] = React.useState<string | undefined>(
121
+ value || defaultValue
122
+ );
25
123
 
26
124
  const [pickerVisible, setPickerVisible] = React.useState(false);
27
125
 
28
- const options = useDeepCompareMemo(() => {
29
- const normalizedOptions = normalizeToPickerOptions(optionsProp);
126
+ const togglePickerVisible = () => {
127
+ setPickerVisible(!pickerVisible);
128
+ };
129
+
130
+ React.useEffect(() => {
131
+ if (value != null && value !== "") {
132
+ setInternalValue(value);
133
+ } else if (value === "") {
134
+ setInternalValue(undefined);
135
+ }
136
+ }, [value]);
30
137
 
31
- // Underlying Picker component defaults selection to first element when value is not provided (or undefined)
32
- // Placholder must be the 1st option in order to allow selection of the 'actual' 1st option
33
- if (placeholder) {
34
- return [{ label: placeholder, value: placeholder }, ...normalizedOptions];
35
- } else {
36
- return normalizedOptions;
138
+ React.useEffect(() => {
139
+ if (defaultValue != null && defaultValue !== "") {
140
+ setInternalValue(defaultValue);
141
+ }
142
+ }, [defaultValue]);
143
+
144
+ React.useEffect(() => {
145
+ if (pickerVisible && androidPickerRef.current) {
146
+ androidPickerRef?.current?.focus();
37
147
  }
38
- }, [placeholder, optionsProp]);
148
+ }, [pickerVisible, androidPickerRef]);
39
149
 
40
- // When no placeholder is provided then first item should be marked selected to reflect underlying Picker internal state
41
- if (!placeholder && options.length && !value && value !== options[0].value) {
42
- onValueChange?.(options[0].value);
150
+ React.useEffect(() => {
151
+ if (pickerVisible && autoDismissKeyboard) {
152
+ Keyboard.dismiss();
153
+ }
154
+ }, [pickerVisible, autoDismissKeyboard]);
155
+
156
+ const normalizedOptions = React.useMemo(
157
+ () => normalizeOptions(options),
158
+ [options]
159
+ );
160
+
161
+ //Underlying Picker component defaults selection to first element when value is not provided (or undefined)
162
+ //Placholder must be the 1st option in order to allow selection of the 'actual' 1st option
163
+ const pickerOptions = React.useMemo(
164
+ () =>
165
+ placeholder
166
+ ? [{ label: placeholder, value: placeholder }, ...normalizedOptions]
167
+ : normalizedOptions,
168
+ [placeholder, normalizedOptions]
169
+ );
170
+
171
+ //When no placeholder is provided then first item should be marked selected to reflect underlying Picker internal state
172
+ if (
173
+ !placeholder &&
174
+ pickerOptions.length &&
175
+ !internalValue &&
176
+ internalValue !== pickerOptions[0].value //Prevent infinite state changes incase first value is falsy
177
+ ) {
178
+ onValueChange?.(pickerOptions[0].value, 0);
179
+ setInternalValue(pickerOptions[0].value);
43
180
  }
44
181
 
45
- const renderNativePicker = () => (
46
- <NativePicker
47
- ref={pickerRef}
48
- selectedValue={value}
49
- onValueChange={(newValue) => {
50
- if (newValue !== placeholder) {
51
- onValueChange?.(newValue);
52
- } else if (newValue === placeholder) {
53
- onValueChange?.("");
54
- }
182
+ const { viewStyles, textStyles } = extractStyles(style);
183
+
184
+ const additionalBorderStyles = ["backgroundColor"];
185
+
186
+ const additionalMarginStyles = [
187
+ "bottom",
188
+ "height",
189
+ "left",
190
+ "maxHeight",
191
+ "maxWidth",
192
+ "minHeight",
193
+ "minWidth",
194
+ "overflow",
195
+ "position",
196
+ "right",
197
+ "top",
198
+ "width",
199
+ "zIndex",
200
+ ];
201
+
202
+ const {
203
+ borderStyles: extractedBorderStyles,
204
+ marginStyles: extractedMarginStyles,
205
+ } = extractBorderAndMarginStyles(
206
+ viewStyles,
207
+ additionalBorderStyles,
208
+ additionalMarginStyles
209
+ );
210
+
211
+ const borderStyles = {
212
+ ...{
213
+ ...(type === "solid"
214
+ ? {
215
+ borderTopLeftRadius: 5,
216
+ borderTopRightRadius: 5,
217
+ borderBottomRightRadius: 5,
218
+ borderBottomLeftRadius: 5,
219
+ borderTopWidth: 1,
220
+ borderRightWidth: 1,
221
+ borderLeftWidth: 1,
222
+ }
223
+ : {}),
224
+ borderBottomWidth: 1,
225
+ borderColor: unstyledColor,
226
+ borderStyle: "solid",
227
+ },
228
+ ...extractedBorderStyles,
229
+ ...(error ? { borderColor: errorColor } : {}),
230
+ ...(disabled
231
+ ? { borderColor: "transparent", backgroundColor: disabledColor }
232
+ : {}),
233
+ };
234
+
235
+ const marginStyles = {
236
+ height: 60,
237
+ ...extractedMarginStyles,
238
+ };
239
+
240
+ const stylesWithoutBordersAndMargins = omit(viewStyles, [
241
+ ...borderStyleNames,
242
+ ...marginStyleNames,
243
+ ...additionalBorderStyles,
244
+ ...additionalMarginStyles,
245
+ ]);
246
+
247
+ const selectedLabel =
248
+ internalValue &&
249
+ ((pickerOptions as unknown as PickerOption[]).find(
250
+ (option) => option.value === internalValue
251
+ )?.label ??
252
+ internalValue);
253
+
254
+ const labelText = label ? (
255
+ <Text
256
+ style={{
257
+ textAlign: textStyles.textAlign,
258
+ color: unstyledColor,
259
+ fontSize: 12,
260
+ paddingBottom: 4,
55
261
  }}
56
- style={[
57
- styles.nativePicker,
58
- isIos ? styles.iosNativePicker : styles.nonIosPicker,
59
- ]}
60
- onBlur={() => setPickerVisible(false)}
61
262
  >
62
- {options.map((option) => (
63
- <NativePicker.Item
64
- label={option.label.toString()}
65
- value={option.value}
66
- key={option.value}
67
- />
68
- ))}
69
- </NativePicker>
70
- );
263
+ {label}
264
+ </Text>
265
+ ) : null;
266
+
267
+ const leftIconOutset = leftIconMode === "outset";
268
+
269
+ const leftIcon = leftIconName ? (
270
+ <Icon
271
+ name={leftIconName}
272
+ color={disabled ? unstyledColor : iconColor}
273
+ size={iconSize}
274
+ style={{
275
+ marginRight: 4,
276
+ marginLeft: 4,
277
+ }}
278
+ />
279
+ ) : null;
280
+
281
+ const rightIcon = rightIconName ? (
282
+ <Icon
283
+ name={rightIconName}
284
+ color={disabled ? unstyledColor : iconColor}
285
+ size={iconSize}
286
+ style={{
287
+ marginRight: -10,
288
+ marginLeft: 8,
289
+ }}
290
+ />
291
+ ) : null;
292
+
293
+ const textAlign = textStyles?.textAlign;
71
294
 
72
- const renderPicker = () => {
73
- if (isIos) {
74
- return (
295
+ const calculateLeftPadding = () => {
296
+ if (leftIconOutset) {
297
+ if (textAlign === "center") {
298
+ return iconSize - Math.abs(8 - iconSize);
299
+ }
300
+
301
+ return iconSize + 8;
302
+ }
303
+
304
+ return 0;
305
+ };
306
+
307
+ const assistiveTextLabel = assistiveText ? (
308
+ <Text
309
+ style={{
310
+ textAlign,
311
+ width: "100%",
312
+ paddingLeft: calculateLeftPadding(),
313
+ color: unstyledColor,
314
+ fontSize: 12,
315
+ paddingTop: 4,
316
+ }}
317
+ >
318
+ {assistiveText}
319
+ </Text>
320
+ ) : null;
321
+
322
+ const primaryTextStyle = {
323
+ color: unstyledColor,
324
+ fontSize: 14,
325
+ ...pickBy(textStyles, identity),
326
+ ...(placeholder === internalValue ? { color: placeholderTextColor } : {}),
327
+ ...(disabled ? { color: unstyledColor } : {}),
328
+ };
329
+
330
+ const handleValueChange = (newValue: string, itemIndex: number) => {
331
+ if (newValue !== "" && newValue !== placeholder) {
332
+ onValueChange?.(newValue, itemIndex);
333
+ setInternalValue(newValue);
334
+ } else if (newValue === placeholder) {
335
+ onValueChange?.("", 0);
336
+ setInternalValue(undefined);
337
+ }
338
+ };
339
+
340
+ return (
341
+ /* marginsContainer */
342
+ <View style={[styles.marginsContainer, marginStyles]}>
343
+ {/* touchableContainer */}
344
+ <Touchable
345
+ disabled={disabled}
346
+ onPress={togglePickerVisible}
347
+ style={styles.touchableContainer}
348
+ >
349
+ {/* outsetContainer */}
350
+ <View
351
+ pointerEvents="none"
352
+ style={[
353
+ styles.outsetContainer,
354
+ stylesWithoutBordersAndMargins,
355
+ !leftIconOutset ? (borderStyles as PickerProps["style"]) : {},
356
+ ]}
357
+ >
358
+ {leftIcon}
359
+
360
+ {/* insetContainer */}
361
+ <View
362
+ style={[
363
+ styles.insetContainer,
364
+ leftIconOutset ? (borderStyles as PickerProps["style"]) : {},
365
+ ]}
366
+ >
367
+ {/* primaryTextContainer */}
368
+ <View style={styles.primaryTextContainer}>
369
+ {labelText}
370
+
371
+ <Text style={primaryTextStyle}>
372
+ {String(selectedLabel ?? placeholder)}
373
+ </Text>
374
+ </View>
375
+
376
+ {rightIcon}
377
+ </View>
378
+ </View>
379
+ {assistiveTextLabel}
380
+ </Touchable>
381
+
382
+ {/* iosPicker */}
383
+ {isIos && pickerVisible ? (
75
384
  <Portal>
76
- <SafeAreaView style={styles.nativePicker}>
385
+ <SafeAreaView style={styles.iosPicker}>
77
386
  <View style={styles.iosPickerContent}>
78
387
  <Button
79
388
  Icon={Icon}
80
389
  type="text"
81
- onPress={() => setPickerVisible(!pickerVisible)}
390
+ onPress={togglePickerVisible}
82
391
  style={styles.iosButton}
83
392
  >
84
393
  {"Close"}
85
394
  </Button>
86
- {renderNativePicker()}
395
+
396
+ <NativePicker
397
+ style={styles.iosNativePicker}
398
+ selectedValue={internalValue}
399
+ onValueChange={handleValueChange}
400
+ >
401
+ {(pickerOptions as unknown as PickerOption[]).map((option) => (
402
+ <NativePicker.Item
403
+ label={option.label}
404
+ value={option.value}
405
+ key={option.value}
406
+ />
407
+ ))}
408
+ </NativePicker>
87
409
  </View>
88
410
  </SafeAreaView>
89
411
  </Portal>
90
- );
91
- } else {
92
- return renderNativePicker();
93
- }
94
- };
95
-
96
- React.useEffect(() => {
97
- if (pickerVisible && pickerRef.current) {
98
- pickerRef?.current?.focus();
99
- }
100
- }, [pickerVisible, pickerRef]);
101
-
102
- React.useEffect(() => {
103
- if (pickerVisible && autoDismissKeyboard) {
104
- Keyboard.dismiss();
105
- }
106
- }, [pickerVisible, autoDismissKeyboard]);
412
+ ) : null}
107
413
 
108
- return (
109
- <PickerInputContainer
110
- Icon={Icon}
111
- placeholder={placeholder}
112
- selectedValue={value}
113
- options={options}
114
- onPress={() => setPickerVisible(!pickerVisible)}
115
- {...rest}
116
- >
414
+ {/* nonIosPicker */}
117
415
  {/* Web version is collapsed by default, always show to allow direct expand */}
118
- {(pickerVisible || isWeb) && renderPicker()}
119
- </PickerInputContainer>
416
+ {!isIos && (pickerVisible || isWeb) ? (
417
+ <NativePicker
418
+ enabled={!disabled}
419
+ selectedValue={internalValue}
420
+ onValueChange={handleValueChange}
421
+ style={styles.nonIosPicker}
422
+ ref={androidPickerRef}
423
+ onBlur={() => setPickerVisible(false)}
424
+ >
425
+ {(pickerOptions as unknown as PickerOption[]).map((option) => (
426
+ <NativePicker.Item
427
+ label={option.label}
428
+ value={option.value}
429
+ key={option.value}
430
+ />
431
+ ))}
432
+ </NativePicker>
433
+ ) : null}
434
+ </View>
120
435
  );
121
436
  };
122
437
 
123
438
  const styles = StyleSheet.create({
124
- nativePicker: {
439
+ marginsContainer: {
440
+ alignSelf: "stretch",
441
+ alignItems: "center",
442
+ width: "100%",
443
+ maxWidth: deviceWidth,
444
+ },
445
+ touchableContainer: {
446
+ flex: 1,
447
+ height: "100%",
448
+ width: "100%",
449
+ alignSelf: "stretch",
450
+ alignItems: "center",
451
+ },
452
+ outsetContainer: {
453
+ flex: 1,
454
+ height: "100%",
455
+ width: "100%",
456
+ flexDirection: "row",
457
+ alignItems: "center",
458
+ justifyContent: "space-between",
459
+ },
460
+ insetContainer: {
461
+ flex: 1,
462
+ height: "100%",
463
+ width: "100%",
464
+ flexDirection: "row",
465
+ alignItems: "center",
466
+ justifyContent: "space-between",
467
+ paddingLeft: 12,
468
+ paddingRight: 12,
469
+ },
470
+ primaryTextContainer: {
471
+ flex: 1,
472
+ },
473
+ iosPicker: {
125
474
  position: "absolute",
126
475
  bottom: 0,
127
476
  left: 0,
@@ -129,11 +478,14 @@ const styles = StyleSheet.create({
129
478
  flexDirection: "row",
130
479
  justifyContent: "center",
131
480
  width: "100%",
481
+ maxWidth: deviceWidth,
482
+ maxHeight: deviceHeight,
132
483
  backgroundColor: "white",
133
484
  },
134
485
  iosPickerContent: {
135
486
  flexDirection: "column",
136
487
  width: "100%",
488
+ maxWidth: deviceWidth,
137
489
  },
138
490
  iosButton: {
139
491
  alignSelf: "flex-end",
@@ -143,37 +495,15 @@ const styles = StyleSheet.create({
143
495
  },
144
496
  nonIosPicker: {
145
497
  opacity: 0,
498
+ position: "absolute",
499
+ top: 0,
500
+ left: 0,
501
+ right: 0,
502
+ bottom: 0,
503
+ width: "100%",
504
+ maxWidth: deviceWidth,
505
+ maxHeight: deviceHeight,
146
506
  },
147
507
  });
148
508
 
149
- function normalizeToPickerOptions(
150
- options: PickerOption[] | string[] | number[]
151
- ): PickerOption[] {
152
- if (options.length === 0) {
153
- return [];
154
- }
155
-
156
- const firstOption = options[0];
157
-
158
- if (typeof firstOption === ("string" || "number")) {
159
- return options.map((option) => ({
160
- label: option as string | number,
161
- value: option as string | number,
162
- }));
163
- }
164
-
165
- if (isObject(firstOption) && firstOption.value && firstOption.label) {
166
- return (options as PickerOption[]).map((option) => {
167
- return {
168
- label: option.label,
169
- value: option.value,
170
- };
171
- });
172
- }
173
-
174
- throw new Error(
175
- 'Picker options must be either an array of strings, numbers, or an array of { "label": string | number; "value": string | number; } objects.'
176
- );
177
- }
178
-
179
- export default Picker;
509
+ export default withTheme(Picker);
@@ -0,0 +1,70 @@
1
+ import * as React from "react";
2
+ import { View, StyleSheet } from "react-native";
3
+ import omit from "lodash.omit";
4
+ import { withTheme } from "../../theming";
5
+ import { Picker as NativePicker } from "@react-native-picker/picker";
6
+ import { extractStyles } from "../../utilities";
7
+ import TextField from "../TextField";
8
+ import Touchable from "../Touchable";
9
+ const Picker = ({ style, options, placeholder, selectedValue, disabled = false, onValueChange: onValueChangeOverride = () => { }, ...props }) => {
10
+ var _a, _b;
11
+ const { viewStyles: { borderRadius, // eslint-disable-line @typescript-eslint/no-unused-vars
12
+ borderWidth, // eslint-disable-line @typescript-eslint/no-unused-vars
13
+ borderTopWidth, // eslint-disable-line @typescript-eslint/no-unused-vars
14
+ borderRightWidth, // eslint-disable-line @typescript-eslint/no-unused-vars
15
+ borderBottomWidth, // eslint-disable-line @typescript-eslint/no-unused-vars
16
+ borderLeftWidth, // eslint-disable-line @typescript-eslint/no-unused-vars
17
+ borderColor, // eslint-disable-line @typescript-eslint/no-unused-vars
18
+ backgroundColor, // eslint-disable-line @typescript-eslint/no-unused-vars
19
+ padding, // eslint-disable-line @typescript-eslint/no-unused-vars
20
+ paddingTop, // eslint-disable-line @typescript-eslint/no-unused-vars
21
+ paddingRight, // eslint-disable-line @typescript-eslint/no-unused-vars
22
+ paddingBottom, // eslint-disable-line @typescript-eslint/no-unused-vars
23
+ paddingLeft, // eslint-disable-line @typescript-eslint/no-unused-vars
24
+ ...viewStyles }, } = extractStyles(style);
25
+ const textField = React.useRef(undefined);
26
+ const onValueChange = (itemValue, itemIndex) => {
27
+ toggleFocus();
28
+ onValueChangeOverride(itemValue, itemIndex);
29
+ };
30
+ const toggleFocus = () => {
31
+ if (!disabled) {
32
+ // @ts-ignore
33
+ textField.current.toggleFocus(); // cannot determine if method exists due to component being wrapped in a withTheme()
34
+ }
35
+ };
36
+ const stylesWithoutMargin = style &&
37
+ omit(StyleSheet.flatten(style), [
38
+ "margin",
39
+ "marginTop",
40
+ "marginRight",
41
+ "marginBottom",
42
+ "marginLeft",
43
+ ]);
44
+ const selectedLabel = selectedValue &&
45
+ ((_b = (_a = options.find((o) => o.value === selectedValue)) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : selectedValue);
46
+ return (React.createElement(Touchable, { disabled: disabled, onPress: toggleFocus, style: [styles.container, viewStyles] },
47
+ React.createElement(View, null,
48
+ React.createElement(NativePicker, { enabled: !disabled, selectedValue: selectedValue, onValueChange: onValueChange, style: {
49
+ opacity: 0,
50
+ position: "absolute",
51
+ top: 0,
52
+ left: 0,
53
+ right: 0,
54
+ bottom: 0,
55
+ width: "100%",
56
+ } }, options.map((o) => (React.createElement(NativePicker.Item, { label: o.label, value: o.value, key: o.value })))),
57
+ React.createElement(View, { pointerEvents: "none" },
58
+ React.createElement(TextField, { ...props, value: selectedLabel, placeholder: placeholder,
59
+ // @ts-ignore
60
+ ref: textField, disabled: disabled,
61
+ // @ts-expect-error
62
+ style: stylesWithoutMargin })))));
63
+ };
64
+ const styles = StyleSheet.create({
65
+ container: {
66
+ alignSelf: "stretch",
67
+ },
68
+ });
69
+ export default withTheme(Picker);
70
+ //# sourceMappingURL=PickerComponent.android.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"PickerComponent.android.js","sourceRoot":"","sources":["PickerComponent.android.tsx"],"names":[],"mappings":"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"}