@draftbit/core 47.0.0-3bcd8b.2 → 47.0.0-alpha.1

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 (137) hide show
  1. package/lib/commonjs/components/Picker/Picker.js +2 -2
  2. package/lib/commonjs/components/Picker/Picker.js.map +1 -1
  3. package/lib/commonjs/components/Stepper.js +0 -1
  4. package/lib/commonjs/index.js +7 -0
  5. package/lib/commonjs/index.js.map +1 -1
  6. package/lib/commonjs/mappings/View.js.map +1 -1
  7. package/lib/commonjs/mappings/WebView.js.map +1 -1
  8. package/lib/module/components/Picker/Picker.js +1 -1
  9. package/lib/module/components/Picker/Picker.js.map +1 -1
  10. package/lib/module/components/Stepper.js +0 -1
  11. package/lib/module/index.js +1 -0
  12. package/lib/module/index.js.map +1 -1
  13. package/lib/typescript/src/components/Picker/Picker.d.ts.map +1 -1
  14. package/lib/typescript/src/index.d.ts +1 -0
  15. package/lib/typescript/src/index.d.ts.map +1 -1
  16. package/package.json +3 -3
  17. package/src/components/Picker/Picker.tsx +2 -2
  18. package/src/index.tsx +1 -0
  19. package/src/Provider.js +0 -9
  20. package/src/components/Accordion/AccordionGroup.js +0 -44
  21. package/src/components/Accordion/AccordionItem.js +0 -32
  22. package/src/components/Accordion/index.js +0 -2
  23. package/src/components/ActionSheet/ActionSheet.js +0 -45
  24. package/src/components/ActionSheet/ActionSheetCancel.js +0 -6
  25. package/src/components/ActionSheet/ActionSheetItem.js +0 -30
  26. package/src/components/ActionSheet/index.js +0 -3
  27. package/src/components/Banner.js +0 -109
  28. package/src/components/Button.js +0 -114
  29. package/src/components/Checkbox/Checkbox.js +0 -63
  30. package/src/components/Checkbox/CheckboxGroup.js +0 -21
  31. package/src/components/Checkbox/CheckboxGroupRow.js +0 -77
  32. package/src/components/Checkbox/CheckboxRow.js +0 -78
  33. package/src/components/Checkbox/context.js +0 -14
  34. package/src/components/Checkbox/index.js +0 -3
  35. package/src/components/Config.js +0 -64
  36. package/src/components/DatePicker/DatePicker.js +0 -368
  37. package/src/components/DatePicker/DatePickerComponent.js +0 -13
  38. package/src/components/DatePicker/DatePickerComponent.web.js +0 -30
  39. package/src/components/DatePicker/DatePickerComponentType.js +0 -1
  40. package/src/components/DeprecatedButton.js +0 -95
  41. package/src/components/Elevation.js +0 -20
  42. package/src/components/FormRow.js +0 -19
  43. package/src/components/IconButton.js +0 -35
  44. package/src/components/Layout.js +0 -50
  45. package/src/components/NumberInput.js +0 -49
  46. package/src/components/Picker/Picker.js +0 -267
  47. package/src/components/Picker/PickerComponent.android.js +0 -69
  48. package/src/components/Picker/PickerComponent.ios.js +0 -79
  49. package/src/components/Picker/PickerComponent.web.js +0 -70
  50. package/src/components/Picker/PickerTypes.js +0 -1
  51. package/src/components/Portal/Portal.js +0 -35
  52. package/src/components/Portal/PortalConsumer.js +0 -27
  53. package/src/components/Portal/PortalHost.js +0 -107
  54. package/src/components/Portal/PortalManager.js +0 -32
  55. package/src/components/RadioButton/RadioButton.js +0 -17
  56. package/src/components/RadioButton/RadioButtonFieldGroup.js +0 -17
  57. package/src/components/RadioButton/RadioButtonGroup.js +0 -43
  58. package/src/components/RadioButton/RadioButtonRow.js +0 -76
  59. package/src/components/RadioButton/context.js +0 -14
  60. package/src/components/RadioButton/index.js +0 -4
  61. package/src/components/SVG.js +0 -13
  62. package/src/components/ScreenContainer.js +0 -34
  63. package/src/components/Slider.js +0 -63
  64. package/src/components/StarRating.js +0 -50
  65. package/src/components/Stepper.js +0 -39
  66. package/src/components/Surface.js +0 -32
  67. package/src/components/Swiper/Swiper.js +0 -29
  68. package/src/components/Swiper/SwiperItem.js +0 -9
  69. package/src/components/Swiper/index.js +0 -2
  70. package/src/components/Switch.js +0 -56
  71. package/src/components/Text.js +0 -33
  72. package/src/components/TextField.js +0 -428
  73. package/src/components/Touchable.js +0 -12
  74. package/src/components/Touchable.web.js +0 -2
  75. package/src/constants.js +0 -10
  76. package/src/hooks.js +0 -12
  77. package/src/index.js +0 -34
  78. package/src/interfaces/Icon.js +0 -8
  79. package/src/mappings/Accordion.js +0 -41
  80. package/src/mappings/AccordionItem.js +0 -16
  81. package/src/mappings/ActionSheet.js +0 -13
  82. package/src/mappings/ActionSheetCancel.js +0 -19
  83. package/src/mappings/ActionSheetItem.js +0 -23
  84. package/src/mappings/ActivityIndicator.js +0 -58
  85. package/src/mappings/AudioPlayer.js +0 -20
  86. package/src/mappings/BlurView.js +0 -42
  87. package/src/mappings/Button.js +0 -87
  88. package/src/mappings/Checkbox.js +0 -46
  89. package/src/mappings/CheckboxGroup.js +0 -26
  90. package/src/mappings/CheckboxRow.js +0 -61
  91. package/src/mappings/CustomCode.js +0 -8
  92. package/src/mappings/DatePicker.js +0 -157
  93. package/src/mappings/Fetch.js +0 -13
  94. package/src/mappings/FlashList.js +0 -33
  95. package/src/mappings/FlatList.js +0 -24
  96. package/src/mappings/Icon.js +0 -32
  97. package/src/mappings/IconButton.js +0 -35
  98. package/src/mappings/Image.js +0 -35
  99. package/src/mappings/ImageBackground.js +0 -29
  100. package/src/mappings/KeyboardAvoidingView.js +0 -41
  101. package/src/mappings/KeyboardAwareScrollView.js +0 -50
  102. package/src/mappings/Layout.js +0 -200
  103. package/src/mappings/LinearGradient.js +0 -77
  104. package/src/mappings/MapCallout.js +0 -21
  105. package/src/mappings/MapMarker.js +0 -47
  106. package/src/mappings/MapView.js +0 -139
  107. package/src/mappings/Modal.js +0 -42
  108. package/src/mappings/NumberInput.js +0 -254
  109. package/src/mappings/Picker.js +0 -148
  110. package/src/mappings/RadioButton.js +0 -51
  111. package/src/mappings/RadioButtonGroup.js +0 -17
  112. package/src/mappings/RadioButtonRow.js +0 -42
  113. package/src/mappings/SVG.js +0 -20
  114. package/src/mappings/SafeAreaView.js +0 -33
  115. package/src/mappings/ScrollView.js +0 -31
  116. package/src/mappings/Slider.js +0 -60
  117. package/src/mappings/StarRating.js +0 -43
  118. package/src/mappings/Stepper.js +0 -29
  119. package/src/mappings/Surface.js +0 -14
  120. package/src/mappings/Swiper.js +0 -60
  121. package/src/mappings/SwiperItem.js +0 -8
  122. package/src/mappings/Switch.js +0 -81
  123. package/src/mappings/Text.js +0 -251
  124. package/src/mappings/TextArea.js +0 -263
  125. package/src/mappings/TextField.js +0 -381
  126. package/src/mappings/TextInput.js +0 -391
  127. package/src/mappings/Touchable.js +0 -17
  128. package/src/mappings/Video.js +0 -81
  129. package/src/mappings/View.js +0 -207
  130. package/src/mappings/WebView.js +0 -88
  131. package/src/styles/DarkTheme.js +0 -26
  132. package/src/styles/DefaultTheme.js +0 -111
  133. package/src/styles/fonts.js +0 -62
  134. package/src/styles/overlay.js +0 -60
  135. package/src/styles/shadow.js +0 -51
  136. package/src/theming.js +0 -3
  137. package/src/utilities.js +0 -102
@@ -1,49 +0,0 @@
1
- import React, { useEffect, useState } from "react";
2
- import { TextInput } from "react-native";
3
- import { isString, isNumber, isNaN } from "lodash";
4
- const NumberInput = ({ onChangeText, value, defaultValue, ...props }) => {
5
- const [currentStringNumberValue, setCurrentStringNumberValue] = useState("0");
6
- const formatValueToStringNumber = (valueToFormat) => {
7
- if (valueToFormat != null) {
8
- if (isString(valueToFormat) && valueToFormat !== "") {
9
- if (/^0[1-9]$/.test(valueToFormat)) {
10
- return valueToFormat.slice(1);
11
- }
12
- else if (/^[+-]?([0-9]+\.?[0-9]*|\.[0-9]+)$/.test(valueToFormat)) {
13
- return valueToFormat;
14
- }
15
- else {
16
- return currentStringNumberValue;
17
- }
18
- }
19
- else if (isNumber(valueToFormat) && !isNaN(valueToFormat)) {
20
- return valueToFormat.toString();
21
- }
22
- }
23
- return "0";
24
- };
25
- // set currentStringNumberValue as defaultValue prop if there is a differnce on first render only
26
- useEffect(() => {
27
- const defaultStringNumberValue = formatValueToStringNumber(defaultValue);
28
- if (currentStringNumberValue !== defaultStringNumberValue) {
29
- setCurrentStringNumberValue(defaultStringNumberValue);
30
- }
31
- // eslint-disable-next-line react-hooks/exhaustive-deps
32
- }, []);
33
- const handleChangeText = (newValue) => {
34
- const newStringNumberValue = formatValueToStringNumber(newValue);
35
- const number = parseFloat(newStringNumberValue);
36
- setCurrentStringNumberValue(newStringNumberValue);
37
- onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(number);
38
- };
39
- // run handleChangeText with value prop only when value prop changes (and first render to reset currentStringNumberValue)
40
- useEffect(() => {
41
- const nextStringNumberValue = formatValueToStringNumber(value);
42
- if (currentStringNumberValue !== nextStringNumberValue) {
43
- handleChangeText(nextStringNumberValue);
44
- }
45
- // eslint-disable-next-line react-hooks/exhaustive-deps
46
- }, [value]);
47
- return (React.createElement(TextInput, { keyboardType: "numeric", value: currentStringNumberValue, onChangeText: handleChangeText, ...props }));
48
- };
49
- export default NumberInput;
@@ -1,267 +0,0 @@
1
- import * as React from "react";
2
- import { View, StyleSheet, Text, Platform, Dimensions, } from "react-native";
3
- import { omit, pickBy, identity, isObject } from "lodash";
4
- import { SafeAreaView } from "react-native-safe-area-context";
5
- import { Picker as NativePicker } from "@react-native-picker/picker";
6
- import { withTheme } from "../../theming";
7
- import Portal from "../Portal/Portal";
8
- import Button from "../DeprecatedButton";
9
- import Touchable from "../Touchable";
10
- import { extractStyles, extractBorderAndMarginStyles, borderStyleNames, marginStyleNames, } from "../../utilities";
11
- function normalizeOptions(options) {
12
- if (options.length === 0) {
13
- return [];
14
- }
15
- if (typeof options[0] === ("string" || "number")) {
16
- return options.map((option) => ({
17
- label: String(option),
18
- value: String(option),
19
- }));
20
- }
21
- if (isObject(options[0]) &&
22
- options[0].value !== null &&
23
- options[0].label !== null) {
24
- return options.map((option) => {
25
- return {
26
- label: String(option.label),
27
- value: String(option.value),
28
- };
29
- });
30
- }
31
- throw new Error('Picker options must be either an array of strings or array of { "label": string; "value": string; } objects.');
32
- }
33
- const { width: deviceWidth, height: deviceHeight } = Dimensions.get("screen");
34
- const isIos = Platform.OS === "ios";
35
- const unstyledColor = "rgba(165, 173, 183, 1)";
36
- const disabledColor = "rgb(240, 240, 240)";
37
- const errorColor = "rgba(255, 69, 100, 1)";
38
- const Picker = ({ error, options = [], onValueChange, defaultValue, Icon, style, placeholder, value, disabled = false, theme, assistiveText, label, iconColor = unstyledColor, iconSize = 24, leftIconMode = "inset", leftIconName, placeholderTextColor = unstyledColor, rightIconName, type = "solid", }) => {
39
- var _a, _b;
40
- const androidPickerRef = React.useRef(undefined);
41
- const [internalValue, setInternalValue] = React.useState(value || defaultValue);
42
- const [pickerVisible, setPickerVisible] = React.useState(false);
43
- const togglePickerVisible = () => {
44
- setPickerVisible(!pickerVisible);
45
- };
46
- React.useEffect(() => {
47
- if (value != null) {
48
- setInternalValue(value);
49
- }
50
- }, [value]);
51
- React.useEffect(() => {
52
- if (defaultValue != null) {
53
- setInternalValue(defaultValue);
54
- }
55
- }, [defaultValue]);
56
- React.useEffect(() => {
57
- var _a;
58
- if (pickerVisible && androidPickerRef.current) {
59
- (_a = androidPickerRef === null || androidPickerRef === void 0 ? void 0 : androidPickerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
60
- }
61
- }, [pickerVisible, androidPickerRef]);
62
- const normalizedOptions = normalizeOptions(options);
63
- const pickerOptions = placeholder
64
- ? [{ value: placeholder, label: placeholder }, ...normalizedOptions]
65
- : normalizedOptions;
66
- const { colors } = theme;
67
- const { viewStyles, textStyles } = extractStyles(style);
68
- const additionalBorderStyles = ["backgroundColor"];
69
- const additionalMarginStyles = [
70
- "bottom",
71
- "height",
72
- "left",
73
- "maxHeight",
74
- "maxWidth",
75
- "minHeight",
76
- "minWidth",
77
- "overflow",
78
- "position",
79
- "right",
80
- "top",
81
- "width",
82
- "zIndex",
83
- ];
84
- const { borderStyles: extractedBorderStyles, marginStyles: extractedMarginStyles, } = extractBorderAndMarginStyles(viewStyles, additionalBorderStyles, additionalMarginStyles);
85
- const borderStyles = {
86
- ...{
87
- ...(type === "solid"
88
- ? {
89
- borderTopLeftRadius: 5,
90
- borderTopRightRadius: 5,
91
- borderBottomRightRadius: 5,
92
- borderBottomLeftRadius: 5,
93
- borderTopWidth: 1,
94
- borderRightWidth: 1,
95
- borderLeftWidth: 1,
96
- }
97
- : {}),
98
- borderBottomWidth: 1,
99
- borderColor: unstyledColor,
100
- borderStyle: "solid",
101
- },
102
- ...extractedBorderStyles,
103
- ...(error ? { borderColor: errorColor } : {}),
104
- ...(disabled
105
- ? { borderColor: "transparent", backgroundColor: disabledColor }
106
- : {}),
107
- };
108
- const marginStyles = {
109
- height: 60,
110
- ...extractedMarginStyles,
111
- };
112
- const stylesWithoutBordersAndMargins = omit(viewStyles, [
113
- ...borderStyleNames,
114
- ...marginStyleNames,
115
- ...additionalBorderStyles,
116
- ...additionalMarginStyles,
117
- ]);
118
- const selectedLabel = internalValue &&
119
- ((_b = (_a = pickerOptions.find((option) => option.value === internalValue)) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : internalValue);
120
- const labelText = label ? (React.createElement(Text, { style: {
121
- textAlign: textStyles.textAlign,
122
- color: unstyledColor,
123
- fontSize: 12,
124
- paddingBottom: 4,
125
- } }, label)) : null;
126
- const leftIconOutset = leftIconMode === "outset";
127
- const leftIcon = leftIconName ? (React.createElement(Icon, { name: leftIconName, color: disabled ? unstyledColor : iconColor, size: iconSize, style: {
128
- marginRight: 4,
129
- marginLeft: 4,
130
- } })) : null;
131
- const rightIcon = rightIconName ? (React.createElement(Icon, { name: rightIconName, color: disabled ? unstyledColor : iconColor, size: iconSize, style: {
132
- marginRight: -10,
133
- marginLeft: 8,
134
- } })) : null;
135
- const textAlign = textStyles === null || textStyles === void 0 ? void 0 : textStyles.textAlign;
136
- const calculateLeftPadding = () => {
137
- if (leftIconOutset) {
138
- if (textAlign === "center") {
139
- return iconSize - Math.abs(8 - iconSize);
140
- }
141
- return iconSize + 8;
142
- }
143
- return 0;
144
- };
145
- const assistiveTextLabel = assistiveText ? (React.createElement(Text, { style: {
146
- textAlign,
147
- width: "100%",
148
- paddingLeft: calculateLeftPadding(),
149
- color: unstyledColor,
150
- fontSize: 12,
151
- paddingTop: 4,
152
- } }, assistiveText)) : null;
153
- const primaryTextStyle = {
154
- color: unstyledColor,
155
- fontSize: 14,
156
- ...pickBy(textStyles, identity),
157
- ...(placeholder === internalValue ? { color: placeholderTextColor } : {}),
158
- ...(disabled ? { color: unstyledColor } : {}),
159
- };
160
- const handleValueChange = (newValue, itemIndex) => {
161
- if (!placeholder || itemIndex > 0) {
162
- onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(newValue, itemIndex);
163
- }
164
- setInternalValue(newValue);
165
- };
166
- return (
167
- /* marginsContainer */
168
- React.createElement(View, { style: [styles.marginsContainer, marginStyles] },
169
- React.createElement(Touchable, { disabled: disabled, onPress: togglePickerVisible, style: styles.touchableContainer },
170
- React.createElement(View, { pointerEvents: "none", style: [
171
- styles.outsetContainer,
172
- stylesWithoutBordersAndMargins,
173
- !leftIconOutset ? borderStyles : {},
174
- ] },
175
- leftIcon,
176
- React.createElement(View, { style: [
177
- styles.insetContainer,
178
- leftIconOutset ? borderStyles : {},
179
- ] },
180
- React.createElement(View, { style: styles.primaryTextContainer },
181
- labelText,
182
- React.createElement(Text, { style: primaryTextStyle }, String(selectedLabel !== null && selectedLabel !== void 0 ? selectedLabel : placeholder))),
183
- rightIcon)),
184
- assistiveTextLabel),
185
- isIos && pickerVisible ? (React.createElement(Portal, null,
186
- React.createElement(View, { style: [
187
- styles.iosPicker,
188
- {
189
- backgroundColor: colors.divider,
190
- },
191
- ] },
192
- React.createElement(SafeAreaView, { style: styles.iosSafeArea },
193
- React.createElement(Button, { Icon: Icon, type: "text", onPress: togglePickerVisible, style: styles.iosButton }, "Close"),
194
- React.createElement(NativePicker, { style: styles.iosNativePicker, selectedValue: internalValue, onValueChange: handleValueChange }, pickerOptions.map((option) => (React.createElement(NativePicker.Item, { label: option.label, value: option.value, key: option.value })))))))) : null,
195
- !isIos && pickerVisible ? (React.createElement(NativePicker, { enabled: pickerVisible, selectedValue: internalValue, onValueChange: handleValueChange, style: styles.nonIosPicker, ref: androidPickerRef, onBlur: () => setPickerVisible(false) }, pickerOptions.map((option) => (React.createElement(NativePicker.Item, { label: option.label, value: option.value, key: option.value }))))) : null));
196
- };
197
- export default withTheme(Picker);
198
- const styles = StyleSheet.create({
199
- marginsContainer: {
200
- alignSelf: "stretch",
201
- alignItems: "center",
202
- width: "100%",
203
- maxWidth: deviceWidth,
204
- },
205
- touchableContainer: {
206
- flex: 1,
207
- height: "100%",
208
- width: "100%",
209
- alignSelf: "stretch",
210
- alignItems: "center",
211
- },
212
- outsetContainer: {
213
- flex: 1,
214
- height: "100%",
215
- width: "100%",
216
- flexDirection: "row",
217
- alignItems: "center",
218
- justifyContent: "space-between",
219
- },
220
- insetContainer: {
221
- flex: 1,
222
- height: "100%",
223
- width: "100%",
224
- flexDirection: "row",
225
- alignItems: "center",
226
- justifyContent: "space-between",
227
- paddingLeft: 12,
228
- paddingRight: 12,
229
- },
230
- primaryTextContainer: {
231
- flex: 1,
232
- },
233
- iosPicker: {
234
- position: "absolute",
235
- bottom: 0,
236
- left: 0,
237
- right: 0,
238
- flexDirection: "row",
239
- justifyContent: "center",
240
- width: "100%",
241
- maxWidth: deviceWidth,
242
- maxHeight: deviceHeight,
243
- },
244
- iosSafeArea: {
245
- backgroundColor: "white",
246
- flexDirection: "column",
247
- width: "100%",
248
- maxWidth: deviceWidth,
249
- },
250
- iosButton: {
251
- alignSelf: "flex-end",
252
- },
253
- iosNativePicker: {
254
- backgroundColor: "white",
255
- },
256
- nonIosPicker: {
257
- opacity: 0,
258
- position: "absolute",
259
- top: 0,
260
- left: 0,
261
- right: 0,
262
- bottom: 0,
263
- width: "100%",
264
- maxWidth: deviceWidth,
265
- maxHeight: deviceHeight,
266
- },
267
- });
@@ -1,69 +0,0 @@
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);
@@ -1,79 +0,0 @@
1
- import * as React from "react";
2
- import { View, StyleSheet } from "react-native";
3
- import { SafeAreaView } from "react-native-safe-area-context";
4
- import omit from "lodash.omit";
5
- import { Picker as NativePicker } from "@react-native-picker/picker";
6
- import { withTheme } from "../../theming";
7
- import Portal from "../Portal/Portal";
8
- import Button from "../DeprecatedButton";
9
- import TextField from "../TextField";
10
- import Touchable from "../Touchable";
11
- import { extractStyles } from "../../utilities";
12
- const Picker = ({ Icon, style, options, placeholder, selectedValue, disabled = false, onValueChange = () => { }, theme: { colors }, ...props }) => {
13
- var _a, _b;
14
- const { viewStyles: { borderRadius, // eslint-disable-line @typescript-eslint/no-unused-vars
15
- borderWidth, // eslint-disable-line @typescript-eslint/no-unused-vars
16
- borderTopWidth, // eslint-disable-line @typescript-eslint/no-unused-vars
17
- borderRightWidth, // eslint-disable-line @typescript-eslint/no-unused-vars
18
- borderBottomWidth, // eslint-disable-line @typescript-eslint/no-unused-vars
19
- borderLeftWidth, // eslint-disable-line @typescript-eslint/no-unused-vars
20
- borderColor, // eslint-disable-line @typescript-eslint/no-unused-vars
21
- backgroundColor, // eslint-disable-line @typescript-eslint/no-unused-vars
22
- padding, // eslint-disable-line @typescript-eslint/no-unused-vars
23
- paddingTop, // eslint-disable-line @typescript-eslint/no-unused-vars
24
- paddingRight, // eslint-disable-line @typescript-eslint/no-unused-vars
25
- paddingBottom, // eslint-disable-line @typescript-eslint/no-unused-vars
26
- paddingLeft, // eslint-disable-line @typescript-eslint/no-unused-vars
27
- ...viewStyles }, } = extractStyles(style);
28
- const textField = React.useRef(undefined);
29
- const [pickerVisible, setIsPickerVisible] = React.useState(false);
30
- const toggleVisibility = () => {
31
- setIsPickerVisible(!pickerVisible);
32
- // @ts-ignore
33
- textField.current.toggleFocus(); // cannot determine if method exists due to component being wrapped in a withTheme()
34
- };
35
- const stylesWithoutMargin = style &&
36
- omit(StyleSheet.flatten(style), [
37
- "margin",
38
- "marginTop",
39
- "marginRight",
40
- "marginBottom",
41
- "marginLeft",
42
- ]);
43
- const selectedLabel = selectedValue &&
44
- ((_b = (_a = options.find((o) => o.value === selectedValue)) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : selectedValue);
45
- return (React.createElement(View, { style: [styles.container, viewStyles] },
46
- React.createElement(Touchable, { disabled: disabled, onPress: toggleVisibility },
47
- React.createElement(TextField, { ...props, value: String(selectedLabel), placeholder: placeholder,
48
- // @ts-ignore
49
- ref: textField, disabled: disabled, pointerEvents: "none",
50
- // @ts-expect-error
51
- style: stylesWithoutMargin, Icon: Icon })),
52
- pickerVisible && (React.createElement(Portal, null,
53
- React.createElement(View, { style: [styles.picker, { backgroundColor: colors.divider }] },
54
- React.createElement(SafeAreaView, { style: styles.pickerContainer },
55
- React.createElement(Button, { Icon: Icon, type: "text", onPress: toggleVisibility, style: styles.closeButton }, "Close"),
56
- React.createElement(NativePicker, { style: { backgroundColor: "white" }, selectedValue: selectedValue, onValueChange: onValueChange }, options.map((o) => (React.createElement(NativePicker.Item, { label: o.label, value: o.value, key: o.value }))))))))));
57
- };
58
- const styles = StyleSheet.create({
59
- container: {
60
- alignSelf: "stretch",
61
- },
62
- picker: {
63
- position: "absolute",
64
- bottom: 0,
65
- left: 0,
66
- right: 0,
67
- flexDirection: "row",
68
- justifyContent: "center",
69
- },
70
- pickerContainer: {
71
- backgroundColor: "white",
72
- flexDirection: "column",
73
- width: "100%",
74
- },
75
- closeButton: {
76
- alignSelf: "flex-end",
77
- },
78
- });
79
- export default withTheme(Picker);
@@ -1,70 +0,0 @@
1
- import * as React from "react";
2
- import { View, StyleSheet } from "react-native";
3
- import { Picker as NativePicker } from "@react-native-picker/picker";
4
- import omit from "lodash.omit";
5
- import { withTheme } from "../../theming";
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
- flex: 1,
50
- opacity: 0,
51
- position: "absolute",
52
- top: 0,
53
- left: 0,
54
- right: 0,
55
- bottom: 0,
56
- width: "100%",
57
- } }, options.map((o) => (React.createElement(NativePicker.Item, { label: o.label, value: o.value, key: o.value })))),
58
- React.createElement(View, { pointerEvents: "none" },
59
- React.createElement(TextField, { ...props, value: selectedLabel, placeholder: placeholder,
60
- // @ts-ignore
61
- ref: textField, disabled: disabled,
62
- // @ts-expect-error
63
- style: stylesWithoutMargin })))));
64
- };
65
- const styles = StyleSheet.create({
66
- container: {
67
- alignSelf: "stretch",
68
- },
69
- });
70
- export default withTheme(Picker);
@@ -1 +0,0 @@
1
- export {};
@@ -1,35 +0,0 @@
1
- import * as React from "react";
2
- import PortalConsumer from "./PortalConsumer";
3
- import PortalHost, { PortalContext } from "./PortalHost";
4
- import { ThemeProvider, withTheme } from "../../theming";
5
- /**
6
- * Portal allows to render a component at a different place in the parent tree.
7
- * You can use it to render content which should appear above other elements, similar to `Modal`.
8
- * It requires a [`Portal.Host`](portal-host.html) component to be rendered somewhere in the parent tree.
9
- *
10
- * ## Usage
11
- * ```js
12
- * import * as React from 'react';
13
- * import { Portal, Text } from 'react-native-paper';
14
- *
15
- * export default class MyComponent extends React.Component {
16
- * render() {
17
- * return (
18
- * <Portal>
19
- * <Text>This is rendered at a different place</Text>
20
- * </Portal>
21
- * );
22
- * }
23
- * }
24
- * ```
25
- */
26
- class Portal extends React.Component {
27
- render() {
28
- const { children, theme } = this.props;
29
- return (React.createElement(PortalContext.Consumer, null, (manager) => (React.createElement(PortalConsumer, { manager: manager },
30
- React.createElement(ThemeProvider, { theme: theme }, children)))));
31
- }
32
- }
33
- // @component ./PortalHost.tsx
34
- Portal.Host = PortalHost;
35
- export default withTheme(Portal);
@@ -1,27 +0,0 @@
1
- import * as React from "react";
2
- export default class PortalConsumer extends React.Component {
3
- async componentDidMount() {
4
- this.checkManager();
5
- // Delay updating to prevent React from going to infinite loop
6
- await Promise.resolve();
7
- this.key = this.props.manager.mount(this.props.children);
8
- }
9
- componentDidUpdate() {
10
- this.checkManager();
11
- this.props.manager.update(this.key, this.props.children);
12
- }
13
- componentWillUnmount() {
14
- this.checkManager();
15
- this.props.manager.unmount(this.key);
16
- }
17
- checkManager() {
18
- if (!this.props.manager) {
19
- throw new Error("Looks like you forgot to wrap your root component with `Provider` component from `react-native-paper`.\n\n" +
20
- "Please read our getting-started guide and make sure you've followed all the required steps.\n\n" +
21
- "https://callstack.github.io/react-native-paper/getting-started.html");
22
- }
23
- }
24
- render() {
25
- return null;
26
- }
27
- }