@draftbit/core 46.1.1 → 46.1.4-e6469c.0
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/ActionSheet/index.js.map +1 -1
- package/lib/commonjs/components/DatePicker/DatePickerComponent.web.js +2 -4
- package/lib/commonjs/components/DatePicker/DatePickerComponent.web.js.map +1 -1
- package/lib/commonjs/components/Picker/Picker.js +5 -7
- package/lib/commonjs/components/Picker/Picker.js.map +1 -1
- package/lib/commonjs/mappings/CheckboxGroup.js.map +1 -1
- package/lib/commonjs/mappings/RadioButtonGroup.js.map +1 -1
- package/lib/commonjs/mappings/RowHeadlineImageCaption.js.map +1 -1
- package/lib/commonjs/mappings/Swiper.js.map +1 -1
- package/lib/module/components/DatePicker/DatePickerComponent.web.js +2 -4
- package/lib/module/components/DatePicker/DatePickerComponent.web.js.map +1 -1
- package/lib/module/components/Picker/Picker.js +5 -4
- package/lib/module/components/Picker/Picker.js.map +1 -1
- package/lib/module/components/Touchable.js +16 -2
- package/lib/module/components/Touchable.js.map +1 -1
- package/package.json +2 -2
- package/src/components/DatePicker/DatePickerComponent.web.js +2 -2
- package/src/components/DatePicker/DatePickerComponent.web.tsx +2 -2
- package/src/components/Picker/Picker.js +5 -4
- package/src/components/Picker/Picker.tsx +6 -8
- package/lib/commonjs/components/Picker/PickerComponent.android.js +0 -135
- package/lib/commonjs/components/Picker/PickerComponent.android.js.map +0 -1
- package/lib/commonjs/components/Picker/PickerComponent.ios.js +0 -161
- package/lib/commonjs/components/Picker/PickerComponent.ios.js.map +0 -1
- package/lib/commonjs/components/Picker/PickerComponent.web.js +0 -136
- package/lib/commonjs/components/Picker/PickerComponent.web.js.map +0 -1
- package/lib/commonjs/components/Picker/PickerTypes.js +0 -6
- package/lib/commonjs/components/Picker/PickerTypes.js.map +0 -1
- package/lib/module/components/Picker/PickerComponent.android.js +0 -112
- package/lib/module/components/Picker/PickerComponent.android.js.map +0 -1
- package/lib/module/components/Picker/PickerComponent.ios.js +0 -135
- package/lib/module/components/Picker/PickerComponent.ios.js.map +0 -1
- package/lib/module/components/Picker/PickerComponent.web.js +0 -113
- package/lib/module/components/Picker/PickerComponent.web.js.map +0 -1
- package/lib/module/components/Picker/PickerTypes.js +0 -2
- package/lib/module/components/Picker/PickerTypes.js.map +0 -1
- package/lib/typescript/src/components/Picker/PickerComponent.android.d.ts +0 -6
- package/lib/typescript/src/components/Picker/PickerComponent.ios.d.ts +0 -7
- package/lib/typescript/src/components/Picker/PickerComponent.web.d.ts +0 -6
- package/lib/typescript/src/components/Picker/PickerTypes.d.ts +0 -18
- package/src/components/Picker/PickerComponent.android.js +0 -68
- package/src/components/Picker/PickerComponent.android.tsx +0 -116
- package/src/components/Picker/PickerComponent.ios.js +0 -78
- package/src/components/Picker/PickerComponent.ios.tsx +0 -142
- package/src/components/Picker/PickerComponent.web.js +0 -69
- package/src/components/Picker/PickerComponent.web.tsx +0 -117
- package/src/components/Picker/PickerTypes.js +0 -1
- package/src/components/Picker/PickerTypes.ts +0 -18
|
@@ -1,112 +0,0 @@
|
|
|
1
|
-
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
-
|
|
3
|
-
import * as React from "react";
|
|
4
|
-
import { View, StyleSheet } from "react-native";
|
|
5
|
-
import omit from "lodash.omit";
|
|
6
|
-
import { withTheme } from "../../theming";
|
|
7
|
-
import { Picker as NativePicker } from "@react-native-picker/picker";
|
|
8
|
-
import { extractStyles } from "../../utilities";
|
|
9
|
-
import TextField from "../TextField";
|
|
10
|
-
import Touchable from "../Touchable";
|
|
11
|
-
|
|
12
|
-
const Picker = _ref => {
|
|
13
|
-
var _options$find;
|
|
14
|
-
|
|
15
|
-
let {
|
|
16
|
-
style,
|
|
17
|
-
options,
|
|
18
|
-
placeholder,
|
|
19
|
-
selectedValue,
|
|
20
|
-
disabled = false,
|
|
21
|
-
onValueChange: onValueChangeOverride = () => {},
|
|
22
|
-
...props
|
|
23
|
-
} = _ref;
|
|
24
|
-
const {
|
|
25
|
-
viewStyles: {
|
|
26
|
-
borderRadius,
|
|
27
|
-
// eslint-disable-line @typescript-eslint/no-unused-vars
|
|
28
|
-
borderWidth,
|
|
29
|
-
// eslint-disable-line @typescript-eslint/no-unused-vars
|
|
30
|
-
borderTopWidth,
|
|
31
|
-
// eslint-disable-line @typescript-eslint/no-unused-vars
|
|
32
|
-
borderRightWidth,
|
|
33
|
-
// eslint-disable-line @typescript-eslint/no-unused-vars
|
|
34
|
-
borderBottomWidth,
|
|
35
|
-
// eslint-disable-line @typescript-eslint/no-unused-vars
|
|
36
|
-
borderLeftWidth,
|
|
37
|
-
// eslint-disable-line @typescript-eslint/no-unused-vars
|
|
38
|
-
borderColor,
|
|
39
|
-
// eslint-disable-line @typescript-eslint/no-unused-vars
|
|
40
|
-
backgroundColor,
|
|
41
|
-
// eslint-disable-line @typescript-eslint/no-unused-vars
|
|
42
|
-
padding,
|
|
43
|
-
// eslint-disable-line @typescript-eslint/no-unused-vars
|
|
44
|
-
paddingTop,
|
|
45
|
-
// eslint-disable-line @typescript-eslint/no-unused-vars
|
|
46
|
-
paddingRight,
|
|
47
|
-
// eslint-disable-line @typescript-eslint/no-unused-vars
|
|
48
|
-
paddingBottom,
|
|
49
|
-
// eslint-disable-line @typescript-eslint/no-unused-vars
|
|
50
|
-
paddingLeft,
|
|
51
|
-
// eslint-disable-line @typescript-eslint/no-unused-vars
|
|
52
|
-
...viewStyles
|
|
53
|
-
}
|
|
54
|
-
} = extractStyles(style);
|
|
55
|
-
const textField = React.useRef(undefined);
|
|
56
|
-
|
|
57
|
-
const onValueChange = (itemValue, itemIndex) => {
|
|
58
|
-
toggleFocus();
|
|
59
|
-
onValueChangeOverride(itemValue, itemIndex);
|
|
60
|
-
};
|
|
61
|
-
|
|
62
|
-
const toggleFocus = () => {
|
|
63
|
-
if (!disabled) {
|
|
64
|
-
// @ts-ignore
|
|
65
|
-
textField.current.toggleFocus(); // cannot determine if method exists due to component being wrapped in a withTheme()
|
|
66
|
-
}
|
|
67
|
-
};
|
|
68
|
-
|
|
69
|
-
const stylesWithoutMargin = style && omit(StyleSheet.flatten(style), ["margin", "marginTop", "marginRight", "marginBottom", "marginLeft"]);
|
|
70
|
-
const selectedLabel = selectedValue && (((_options$find = options.find(o => o.value === selectedValue)) === null || _options$find === void 0 ? void 0 : _options$find.label) ?? selectedValue);
|
|
71
|
-
return /*#__PURE__*/React.createElement(Touchable, {
|
|
72
|
-
disabled: disabled,
|
|
73
|
-
onPress: toggleFocus,
|
|
74
|
-
style: [styles.container, viewStyles]
|
|
75
|
-
}, /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(NativePicker, {
|
|
76
|
-
enabled: !disabled,
|
|
77
|
-
selectedValue: selectedValue,
|
|
78
|
-
onValueChange: onValueChange,
|
|
79
|
-
style: {
|
|
80
|
-
opacity: 0,
|
|
81
|
-
position: "absolute",
|
|
82
|
-
top: 0,
|
|
83
|
-
left: 0,
|
|
84
|
-
right: 0,
|
|
85
|
-
bottom: 0,
|
|
86
|
-
width: "100%"
|
|
87
|
-
}
|
|
88
|
-
}, options.map(o => /*#__PURE__*/React.createElement(NativePicker.Item, {
|
|
89
|
-
label: o.label,
|
|
90
|
-
value: o.value,
|
|
91
|
-
key: o.value
|
|
92
|
-
}))), /*#__PURE__*/React.createElement(View, {
|
|
93
|
-
pointerEvents: "none"
|
|
94
|
-
}, /*#__PURE__*/React.createElement(TextField, _extends({}, props, {
|
|
95
|
-
value: selectedLabel,
|
|
96
|
-
placeholder: placeholder // @ts-ignore
|
|
97
|
-
,
|
|
98
|
-
ref: textField // cannot determine if ref is of correct type due to component being wrapped in a withTheme()
|
|
99
|
-
,
|
|
100
|
-
disabled: disabled // @ts-expect-error
|
|
101
|
-
,
|
|
102
|
-
style: stylesWithoutMargin
|
|
103
|
-
})))));
|
|
104
|
-
};
|
|
105
|
-
|
|
106
|
-
const styles = StyleSheet.create({
|
|
107
|
-
container: {
|
|
108
|
-
alignSelf: "stretch"
|
|
109
|
-
}
|
|
110
|
-
});
|
|
111
|
-
export default withTheme(Picker);
|
|
112
|
-
//# sourceMappingURL=PickerComponent.android.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["React","View","StyleSheet","omit","withTheme","Picker","NativePicker","extractStyles","TextField","Touchable","style","options","placeholder","selectedValue","disabled","onValueChange","onValueChangeOverride","props","viewStyles","borderRadius","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","borderColor","backgroundColor","padding","paddingTop","paddingRight","paddingBottom","paddingLeft","textField","useRef","undefined","itemValue","itemIndex","toggleFocus","current","stylesWithoutMargin","flatten","selectedLabel","find","o","value","label","styles","container","opacity","position","top","left","right","bottom","width","map","create","alignSelf"],"sources":["PickerComponent.android.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { View, StyleSheet } from \"react-native\";\nimport omit from \"lodash.omit\";\nimport { withTheme } from \"../../theming\";\nimport { Picker as NativePicker } from \"@react-native-picker/picker\";\nimport { extractStyles } from \"../../utilities\";\n\nimport TextField from \"../TextField\";\nimport Touchable from \"../Touchable\";\nimport { PickerComponentProps } from \"./PickerTypes\";\n\nconst Picker: React.FC<PickerComponentProps> = ({\n style,\n options,\n placeholder,\n selectedValue,\n disabled = false,\n onValueChange: onValueChangeOverride = () => {},\n ...props\n}) => {\n const {\n viewStyles: {\n borderRadius, // eslint-disable-line @typescript-eslint/no-unused-vars\n borderWidth, // eslint-disable-line @typescript-eslint/no-unused-vars\n borderTopWidth, // eslint-disable-line @typescript-eslint/no-unused-vars\n borderRightWidth, // eslint-disable-line @typescript-eslint/no-unused-vars\n borderBottomWidth, // eslint-disable-line @typescript-eslint/no-unused-vars\n borderLeftWidth, // eslint-disable-line @typescript-eslint/no-unused-vars\n borderColor, // eslint-disable-line @typescript-eslint/no-unused-vars\n backgroundColor, // eslint-disable-line @typescript-eslint/no-unused-vars\n padding, // eslint-disable-line @typescript-eslint/no-unused-vars\n paddingTop, // eslint-disable-line @typescript-eslint/no-unused-vars\n paddingRight, // eslint-disable-line @typescript-eslint/no-unused-vars\n paddingBottom, // eslint-disable-line @typescript-eslint/no-unused-vars\n paddingLeft, // eslint-disable-line @typescript-eslint/no-unused-vars\n ...viewStyles\n },\n } = extractStyles(style);\n\n const textField = React.useRef<typeof TextField | undefined>(undefined);\n\n const onValueChange = (itemValue: string, itemIndex: number) => {\n toggleFocus();\n onValueChangeOverride(itemValue, itemIndex);\n };\n\n const toggleFocus = () => {\n if (!disabled) {\n // @ts-ignore\n textField.current.toggleFocus(); // cannot determine if method exists due to component being wrapped in a withTheme()\n }\n };\n\n const stylesWithoutMargin =\n style &&\n omit(StyleSheet.flatten(style), [\n \"margin\",\n \"marginTop\",\n \"marginRight\",\n \"marginBottom\",\n \"marginLeft\",\n ]);\n\n const selectedLabel =\n selectedValue &&\n (options.find((o) => o.value === selectedValue)?.label ?? selectedValue);\n\n return (\n <Touchable\n disabled={disabled}\n onPress={toggleFocus}\n style={[styles.container, viewStyles]}\n >\n <View>\n <NativePicker\n enabled={!disabled}\n selectedValue={selectedValue}\n onValueChange={onValueChange}\n style={{\n opacity: 0,\n position: \"absolute\",\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n width: \"100%\",\n }}\n >\n {options.map((o) => (\n <NativePicker.Item label={o.label} value={o.value} key={o.value} />\n ))}\n </NativePicker>\n <View pointerEvents=\"none\">\n <TextField\n {...props}\n value={selectedLabel}\n placeholder={placeholder}\n // @ts-ignore\n ref={textField} // cannot determine if ref is of correct type due to component being wrapped in a withTheme()\n disabled={disabled}\n // @ts-expect-error\n style={stylesWithoutMargin}\n />\n </View>\n </View>\n </Touchable>\n );\n};\n\nconst styles = StyleSheet.create({\n container: {\n alignSelf: \"stretch\",\n },\n});\n\nexport default withTheme(Picker);\n"],"mappings":"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"}
|
|
@@ -1,135 +0,0 @@
|
|
|
1
|
-
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
-
|
|
3
|
-
import * as React from "react";
|
|
4
|
-
import { View, StyleSheet } from "react-native";
|
|
5
|
-
import { SafeAreaView } from "react-native-safe-area-context";
|
|
6
|
-
import omit from "lodash.omit";
|
|
7
|
-
import { Picker as NativePicker } from "@react-native-picker/picker";
|
|
8
|
-
import { withTheme } from "../../theming";
|
|
9
|
-
import Portal from "../Portal/Portal";
|
|
10
|
-
import Button from "../DeprecatedButton";
|
|
11
|
-
import TextField from "../TextField";
|
|
12
|
-
import Touchable from "../Touchable";
|
|
13
|
-
import { extractStyles } from "../../utilities";
|
|
14
|
-
|
|
15
|
-
const Picker = _ref => {
|
|
16
|
-
var _options$find;
|
|
17
|
-
|
|
18
|
-
let {
|
|
19
|
-
Icon,
|
|
20
|
-
style,
|
|
21
|
-
options,
|
|
22
|
-
placeholder,
|
|
23
|
-
selectedValue,
|
|
24
|
-
disabled = false,
|
|
25
|
-
onValueChange = () => {},
|
|
26
|
-
theme: {
|
|
27
|
-
colors
|
|
28
|
-
},
|
|
29
|
-
...props
|
|
30
|
-
} = _ref;
|
|
31
|
-
const {
|
|
32
|
-
viewStyles: {
|
|
33
|
-
borderRadius,
|
|
34
|
-
// eslint-disable-line @typescript-eslint/no-unused-vars
|
|
35
|
-
borderWidth,
|
|
36
|
-
// eslint-disable-line @typescript-eslint/no-unused-vars
|
|
37
|
-
borderTopWidth,
|
|
38
|
-
// eslint-disable-line @typescript-eslint/no-unused-vars
|
|
39
|
-
borderRightWidth,
|
|
40
|
-
// eslint-disable-line @typescript-eslint/no-unused-vars
|
|
41
|
-
borderBottomWidth,
|
|
42
|
-
// eslint-disable-line @typescript-eslint/no-unused-vars
|
|
43
|
-
borderLeftWidth,
|
|
44
|
-
// eslint-disable-line @typescript-eslint/no-unused-vars
|
|
45
|
-
borderColor,
|
|
46
|
-
// eslint-disable-line @typescript-eslint/no-unused-vars
|
|
47
|
-
backgroundColor,
|
|
48
|
-
// eslint-disable-line @typescript-eslint/no-unused-vars
|
|
49
|
-
padding,
|
|
50
|
-
// eslint-disable-line @typescript-eslint/no-unused-vars
|
|
51
|
-
paddingTop,
|
|
52
|
-
// eslint-disable-line @typescript-eslint/no-unused-vars
|
|
53
|
-
paddingRight,
|
|
54
|
-
// eslint-disable-line @typescript-eslint/no-unused-vars
|
|
55
|
-
paddingBottom,
|
|
56
|
-
// eslint-disable-line @typescript-eslint/no-unused-vars
|
|
57
|
-
paddingLeft,
|
|
58
|
-
// eslint-disable-line @typescript-eslint/no-unused-vars
|
|
59
|
-
...viewStyles
|
|
60
|
-
}
|
|
61
|
-
} = extractStyles(style);
|
|
62
|
-
const textField = React.useRef(undefined);
|
|
63
|
-
const [pickerVisible, setIsPickerVisible] = React.useState(false);
|
|
64
|
-
|
|
65
|
-
const toggleVisibility = () => {
|
|
66
|
-
setIsPickerVisible(!pickerVisible); // @ts-ignore
|
|
67
|
-
|
|
68
|
-
textField.current.toggleFocus(); // cannot determine if method exists due to component being wrapped in a withTheme()
|
|
69
|
-
};
|
|
70
|
-
|
|
71
|
-
const stylesWithoutMargin = style && omit(StyleSheet.flatten(style), ["margin", "marginTop", "marginRight", "marginBottom", "marginLeft"]);
|
|
72
|
-
const selectedLabel = selectedValue && (((_options$find = options.find(o => o.value === selectedValue)) === null || _options$find === void 0 ? void 0 : _options$find.label) ?? selectedValue);
|
|
73
|
-
return /*#__PURE__*/React.createElement(View, {
|
|
74
|
-
style: [styles.container, viewStyles]
|
|
75
|
-
}, /*#__PURE__*/React.createElement(Touchable, {
|
|
76
|
-
disabled: disabled,
|
|
77
|
-
onPress: toggleVisibility
|
|
78
|
-
}, /*#__PURE__*/React.createElement(TextField, _extends({}, props, {
|
|
79
|
-
value: String(selectedLabel),
|
|
80
|
-
placeholder: placeholder // @ts-ignore
|
|
81
|
-
,
|
|
82
|
-
ref: textField // cannot determine if ref is of correct type due to component being wrapped in a withTheme()
|
|
83
|
-
,
|
|
84
|
-
disabled: disabled,
|
|
85
|
-
pointerEvents: "none" // @ts-expect-error
|
|
86
|
-
,
|
|
87
|
-
style: stylesWithoutMargin,
|
|
88
|
-
Icon: Icon
|
|
89
|
-
}))), pickerVisible && /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(View, {
|
|
90
|
-
style: [styles.picker, {
|
|
91
|
-
backgroundColor: colors.divider
|
|
92
|
-
}]
|
|
93
|
-
}, /*#__PURE__*/React.createElement(SafeAreaView, {
|
|
94
|
-
style: styles.pickerContainer
|
|
95
|
-
}, /*#__PURE__*/React.createElement(Button, {
|
|
96
|
-
Icon: Icon,
|
|
97
|
-
type: "text",
|
|
98
|
-
onPress: toggleVisibility,
|
|
99
|
-
style: styles.closeButton
|
|
100
|
-
}, "Close"), /*#__PURE__*/React.createElement(NativePicker, {
|
|
101
|
-
style: {
|
|
102
|
-
backgroundColor: "white"
|
|
103
|
-
},
|
|
104
|
-
selectedValue: selectedValue,
|
|
105
|
-
onValueChange: onValueChange
|
|
106
|
-
}, options.map(o => /*#__PURE__*/React.createElement(NativePicker.Item, {
|
|
107
|
-
label: o.label,
|
|
108
|
-
value: o.value,
|
|
109
|
-
key: o.value
|
|
110
|
-
})))))));
|
|
111
|
-
};
|
|
112
|
-
|
|
113
|
-
const styles = StyleSheet.create({
|
|
114
|
-
container: {
|
|
115
|
-
alignSelf: "stretch"
|
|
116
|
-
},
|
|
117
|
-
picker: {
|
|
118
|
-
position: "absolute",
|
|
119
|
-
bottom: 0,
|
|
120
|
-
left: 0,
|
|
121
|
-
right: 0,
|
|
122
|
-
flexDirection: "row",
|
|
123
|
-
justifyContent: "center"
|
|
124
|
-
},
|
|
125
|
-
pickerContainer: {
|
|
126
|
-
backgroundColor: "white",
|
|
127
|
-
flexDirection: "column",
|
|
128
|
-
width: "100%"
|
|
129
|
-
},
|
|
130
|
-
closeButton: {
|
|
131
|
-
alignSelf: "flex-end"
|
|
132
|
-
}
|
|
133
|
-
});
|
|
134
|
-
export default withTheme(Picker);
|
|
135
|
-
//# sourceMappingURL=PickerComponent.ios.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["React","View","StyleSheet","SafeAreaView","omit","Picker","NativePicker","withTheme","Portal","Button","TextField","Touchable","extractStyles","Icon","style","options","placeholder","selectedValue","disabled","onValueChange","theme","colors","props","viewStyles","borderRadius","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","borderColor","backgroundColor","padding","paddingTop","paddingRight","paddingBottom","paddingLeft","textField","useRef","undefined","pickerVisible","setIsPickerVisible","useState","toggleVisibility","current","toggleFocus","stylesWithoutMargin","flatten","selectedLabel","find","o","value","label","styles","container","String","picker","divider","pickerContainer","closeButton","map","create","alignSelf","position","bottom","left","right","flexDirection","justifyContent","width"],"sources":["PickerComponent.ios.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { View, StyleSheet } from \"react-native\";\nimport { SafeAreaView } from \"react-native-safe-area-context\";\nimport omit from \"lodash.omit\";\n\nimport { Picker as NativePicker } from \"@react-native-picker/picker\";\n\nimport { withTheme } from \"../../theming\";\n\nimport Portal from \"../Portal/Portal\";\nimport Button from \"../DeprecatedButton\";\nimport TextField from \"../TextField\";\nimport Touchable from \"../Touchable\";\nimport { PickerComponentProps } from \"./PickerTypes\";\nimport { extractStyles } from \"../../utilities\";\nimport type { IconSlot } from \"../../interfaces/Icon\";\n\nconst Picker: React.FC<PickerComponentProps & IconSlot> = ({\n Icon,\n style,\n options,\n placeholder,\n selectedValue,\n disabled = false,\n onValueChange = () => {},\n theme: { colors },\n ...props\n}) => {\n const {\n viewStyles: {\n borderRadius, // eslint-disable-line @typescript-eslint/no-unused-vars\n borderWidth, // eslint-disable-line @typescript-eslint/no-unused-vars\n borderTopWidth, // eslint-disable-line @typescript-eslint/no-unused-vars\n borderRightWidth, // eslint-disable-line @typescript-eslint/no-unused-vars\n borderBottomWidth, // eslint-disable-line @typescript-eslint/no-unused-vars\n borderLeftWidth, // eslint-disable-line @typescript-eslint/no-unused-vars\n borderColor, // eslint-disable-line @typescript-eslint/no-unused-vars\n backgroundColor, // eslint-disable-line @typescript-eslint/no-unused-vars\n padding, // eslint-disable-line @typescript-eslint/no-unused-vars\n paddingTop, // eslint-disable-line @typescript-eslint/no-unused-vars\n paddingRight, // eslint-disable-line @typescript-eslint/no-unused-vars\n paddingBottom, // eslint-disable-line @typescript-eslint/no-unused-vars\n paddingLeft, // eslint-disable-line @typescript-eslint/no-unused-vars\n ...viewStyles\n },\n } = extractStyles(style);\n\n const textField = React.useRef<typeof TextField | undefined>(undefined);\n const [pickerVisible, setIsPickerVisible] = React.useState(false);\n\n const toggleVisibility = () => {\n setIsPickerVisible(!pickerVisible);\n // @ts-ignore\n textField.current.toggleFocus(); // cannot determine if method exists due to component being wrapped in a withTheme()\n };\n\n const stylesWithoutMargin =\n style &&\n omit(StyleSheet.flatten(style), [\n \"margin\",\n \"marginTop\",\n \"marginRight\",\n \"marginBottom\",\n \"marginLeft\",\n ]);\n\n const selectedLabel =\n selectedValue &&\n (options.find((o) => o.value === selectedValue)?.label ?? selectedValue);\n\n return (\n <View style={[styles.container, viewStyles]}>\n <Touchable disabled={disabled} onPress={toggleVisibility}>\n <TextField\n {...props}\n value={String(selectedLabel)}\n placeholder={placeholder}\n // @ts-ignore\n ref={textField} // cannot determine if ref is of correct type due to component being wrapped in a withTheme()\n disabled={disabled}\n pointerEvents=\"none\"\n // @ts-expect-error\n style={stylesWithoutMargin}\n Icon={Icon}\n />\n </Touchable>\n {pickerVisible && (\n <Portal>\n <View style={[styles.picker, { backgroundColor: colors.divider }]}>\n <SafeAreaView style={styles.pickerContainer}>\n <Button\n Icon={Icon}\n type=\"text\"\n onPress={toggleVisibility}\n style={styles.closeButton}\n >\n Close\n </Button>\n <NativePicker\n style={{ backgroundColor: \"white\" }}\n selectedValue={selectedValue}\n onValueChange={onValueChange}\n >\n {options.map((o: any) => (\n <NativePicker.Item\n label={o.label}\n value={o.value}\n key={o.value}\n />\n ))}\n </NativePicker>\n </SafeAreaView>\n </View>\n </Portal>\n )}\n </View>\n );\n};\n\nconst styles = StyleSheet.create({\n container: {\n alignSelf: \"stretch\",\n },\n picker: {\n position: \"absolute\",\n bottom: 0,\n left: 0,\n right: 0,\n flexDirection: \"row\",\n justifyContent: \"center\",\n },\n pickerContainer: {\n backgroundColor: \"white\",\n flexDirection: \"column\",\n width: \"100%\",\n },\n closeButton: {\n alignSelf: \"flex-end\",\n },\n});\n\nexport default withTheme(Picker);\n"],"mappings":"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"}
|
|
@@ -1,113 +0,0 @@
|
|
|
1
|
-
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
-
|
|
3
|
-
import * as React from "react";
|
|
4
|
-
import { View, StyleSheet } from "react-native";
|
|
5
|
-
import { Picker as NativePicker } from "@react-native-picker/picker";
|
|
6
|
-
import omit from "lodash.omit";
|
|
7
|
-
import { withTheme } from "../../theming";
|
|
8
|
-
import { extractStyles } from "../../utilities";
|
|
9
|
-
import TextField from "../TextField";
|
|
10
|
-
import Touchable from "../Touchable";
|
|
11
|
-
|
|
12
|
-
const Picker = _ref => {
|
|
13
|
-
var _options$find;
|
|
14
|
-
|
|
15
|
-
let {
|
|
16
|
-
style,
|
|
17
|
-
options,
|
|
18
|
-
placeholder,
|
|
19
|
-
selectedValue,
|
|
20
|
-
disabled = false,
|
|
21
|
-
onValueChange: onValueChangeOverride = () => {},
|
|
22
|
-
...props
|
|
23
|
-
} = _ref;
|
|
24
|
-
const {
|
|
25
|
-
viewStyles: {
|
|
26
|
-
borderRadius,
|
|
27
|
-
// eslint-disable-line @typescript-eslint/no-unused-vars
|
|
28
|
-
borderWidth,
|
|
29
|
-
// eslint-disable-line @typescript-eslint/no-unused-vars
|
|
30
|
-
borderTopWidth,
|
|
31
|
-
// eslint-disable-line @typescript-eslint/no-unused-vars
|
|
32
|
-
borderRightWidth,
|
|
33
|
-
// eslint-disable-line @typescript-eslint/no-unused-vars
|
|
34
|
-
borderBottomWidth,
|
|
35
|
-
// eslint-disable-line @typescript-eslint/no-unused-vars
|
|
36
|
-
borderLeftWidth,
|
|
37
|
-
// eslint-disable-line @typescript-eslint/no-unused-vars
|
|
38
|
-
borderColor,
|
|
39
|
-
// eslint-disable-line @typescript-eslint/no-unused-vars
|
|
40
|
-
backgroundColor,
|
|
41
|
-
// eslint-disable-line @typescript-eslint/no-unused-vars
|
|
42
|
-
padding,
|
|
43
|
-
// eslint-disable-line @typescript-eslint/no-unused-vars
|
|
44
|
-
paddingTop,
|
|
45
|
-
// eslint-disable-line @typescript-eslint/no-unused-vars
|
|
46
|
-
paddingRight,
|
|
47
|
-
// eslint-disable-line @typescript-eslint/no-unused-vars
|
|
48
|
-
paddingBottom,
|
|
49
|
-
// eslint-disable-line @typescript-eslint/no-unused-vars
|
|
50
|
-
paddingLeft,
|
|
51
|
-
// eslint-disable-line @typescript-eslint/no-unused-vars
|
|
52
|
-
...viewStyles
|
|
53
|
-
}
|
|
54
|
-
} = extractStyles(style);
|
|
55
|
-
const textField = React.useRef(undefined);
|
|
56
|
-
|
|
57
|
-
const onValueChange = (itemValue, itemIndex) => {
|
|
58
|
-
toggleFocus();
|
|
59
|
-
onValueChangeOverride(itemValue, itemIndex);
|
|
60
|
-
};
|
|
61
|
-
|
|
62
|
-
const toggleFocus = () => {
|
|
63
|
-
if (!disabled) {
|
|
64
|
-
// @ts-ignore
|
|
65
|
-
textField.current.toggleFocus(); // cannot determine if method exists due to component being wrapped in a withTheme()
|
|
66
|
-
}
|
|
67
|
-
};
|
|
68
|
-
|
|
69
|
-
const stylesWithoutMargin = style && omit(StyleSheet.flatten(style), ["margin", "marginTop", "marginRight", "marginBottom", "marginLeft"]);
|
|
70
|
-
const selectedLabel = selectedValue && (((_options$find = options.find(o => o.value === selectedValue)) === null || _options$find === void 0 ? void 0 : _options$find.label) ?? selectedValue);
|
|
71
|
-
return /*#__PURE__*/React.createElement(Touchable, {
|
|
72
|
-
disabled: disabled,
|
|
73
|
-
onPress: toggleFocus,
|
|
74
|
-
style: [styles.container, viewStyles]
|
|
75
|
-
}, /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(NativePicker, {
|
|
76
|
-
enabled: !disabled,
|
|
77
|
-
selectedValue: selectedValue,
|
|
78
|
-
onValueChange: onValueChange,
|
|
79
|
-
style: {
|
|
80
|
-
flex: 1,
|
|
81
|
-
opacity: 0,
|
|
82
|
-
position: "absolute",
|
|
83
|
-
top: 0,
|
|
84
|
-
left: 0,
|
|
85
|
-
right: 0,
|
|
86
|
-
bottom: 0,
|
|
87
|
-
width: "100%"
|
|
88
|
-
}
|
|
89
|
-
}, options.map(o => /*#__PURE__*/React.createElement(NativePicker.Item, {
|
|
90
|
-
label: o.label,
|
|
91
|
-
value: o.value,
|
|
92
|
-
key: o.value
|
|
93
|
-
}))), /*#__PURE__*/React.createElement(View, {
|
|
94
|
-
pointerEvents: "none"
|
|
95
|
-
}, /*#__PURE__*/React.createElement(TextField, _extends({}, props, {
|
|
96
|
-
value: selectedLabel,
|
|
97
|
-
placeholder: placeholder // @ts-ignore
|
|
98
|
-
,
|
|
99
|
-
ref: textField // cannot determine if ref is of correct type due to component being wrapped in a withTheme()
|
|
100
|
-
,
|
|
101
|
-
disabled: disabled // @ts-expect-error
|
|
102
|
-
,
|
|
103
|
-
style: stylesWithoutMargin
|
|
104
|
-
})))));
|
|
105
|
-
};
|
|
106
|
-
|
|
107
|
-
const styles = StyleSheet.create({
|
|
108
|
-
container: {
|
|
109
|
-
alignSelf: "stretch"
|
|
110
|
-
}
|
|
111
|
-
});
|
|
112
|
-
export default withTheme(Picker);
|
|
113
|
-
//# sourceMappingURL=PickerComponent.web.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["React","View","StyleSheet","Picker","NativePicker","omit","withTheme","extractStyles","TextField","Touchable","style","options","placeholder","selectedValue","disabled","onValueChange","onValueChangeOverride","props","viewStyles","borderRadius","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","borderColor","backgroundColor","padding","paddingTop","paddingRight","paddingBottom","paddingLeft","textField","useRef","undefined","itemValue","itemIndex","toggleFocus","current","stylesWithoutMargin","flatten","selectedLabel","find","o","value","label","styles","container","flex","opacity","position","top","left","right","bottom","width","map","create","alignSelf"],"sources":["PickerComponent.web.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { View, StyleSheet } from \"react-native\";\nimport { Picker as NativePicker } from \"@react-native-picker/picker\";\nimport omit from \"lodash.omit\";\nimport { withTheme } from \"../../theming\";\nimport { extractStyles } from \"../../utilities\";\n\nimport TextField from \"../TextField\";\nimport Touchable from \"../Touchable\";\nimport { PickerComponentProps } from \"./PickerTypes\";\n\nconst Picker: React.FC<PickerComponentProps> = ({\n style,\n options,\n placeholder,\n selectedValue,\n disabled = false,\n onValueChange: onValueChangeOverride = () => {},\n ...props\n}) => {\n const {\n viewStyles: {\n borderRadius, // eslint-disable-line @typescript-eslint/no-unused-vars\n borderWidth, // eslint-disable-line @typescript-eslint/no-unused-vars\n borderTopWidth, // eslint-disable-line @typescript-eslint/no-unused-vars\n borderRightWidth, // eslint-disable-line @typescript-eslint/no-unused-vars\n borderBottomWidth, // eslint-disable-line @typescript-eslint/no-unused-vars\n borderLeftWidth, // eslint-disable-line @typescript-eslint/no-unused-vars\n borderColor, // eslint-disable-line @typescript-eslint/no-unused-vars\n backgroundColor, // eslint-disable-line @typescript-eslint/no-unused-vars\n padding, // eslint-disable-line @typescript-eslint/no-unused-vars\n paddingTop, // eslint-disable-line @typescript-eslint/no-unused-vars\n paddingRight, // eslint-disable-line @typescript-eslint/no-unused-vars\n paddingBottom, // eslint-disable-line @typescript-eslint/no-unused-vars\n paddingLeft, // eslint-disable-line @typescript-eslint/no-unused-vars\n ...viewStyles\n },\n } = extractStyles(style);\n\n const textField = React.useRef<typeof TextField | undefined>(undefined);\n\n const onValueChange = (itemValue: string, itemIndex: number) => {\n toggleFocus();\n onValueChangeOverride(itemValue, itemIndex);\n };\n\n const toggleFocus = () => {\n if (!disabled) {\n // @ts-ignore\n textField.current.toggleFocus(); // cannot determine if method exists due to component being wrapped in a withTheme()\n }\n };\n\n const stylesWithoutMargin =\n style &&\n omit(StyleSheet.flatten(style), [\n \"margin\",\n \"marginTop\",\n \"marginRight\",\n \"marginBottom\",\n \"marginLeft\",\n ]);\n\n const selectedLabel =\n selectedValue &&\n (options.find((o) => o.value === selectedValue)?.label ?? selectedValue);\n\n return (\n <Touchable\n disabled={disabled}\n onPress={toggleFocus}\n style={[styles.container, viewStyles]}\n >\n <View>\n <NativePicker\n enabled={!disabled}\n selectedValue={selectedValue}\n onValueChange={onValueChange}\n style={{\n flex: 1,\n opacity: 0,\n position: \"absolute\",\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n width: \"100%\",\n }}\n >\n {options.map((o) => (\n <NativePicker.Item label={o.label} value={o.value} key={o.value} />\n ))}\n </NativePicker>\n <View pointerEvents=\"none\">\n <TextField\n {...props}\n value={selectedLabel}\n placeholder={placeholder}\n // @ts-ignore\n ref={textField} // cannot determine if ref is of correct type due to component being wrapped in a withTheme()\n disabled={disabled}\n // @ts-expect-error\n style={stylesWithoutMargin}\n />\n </View>\n </View>\n </Touchable>\n );\n};\n\nconst styles = StyleSheet.create({\n container: {\n alignSelf: \"stretch\",\n },\n});\n\nexport default withTheme(Picker);\n"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["PickerTypes.ts"],"sourcesContent":["import { ViewStyle } from \"react-native\";\nimport { StyleProp } from \"react-native\";\nimport { Props as TextFieldProps } from \"../TextField\";\n\nexport interface PickerOption {\n value: string;\n label: string;\n}\n\nexport interface PickerComponentProps extends TextFieldProps {\n style?: StyleProp<ViewStyle> & { height?: number };\n options: PickerOption[];\n placeholder?: string;\n selectedValue: string;\n disabled?: boolean;\n onValueChange?: (value: string, index: number) => void;\n defaultValue?: string;\n}\n"],"mappings":""}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { PickerComponentProps } from "./PickerTypes";
|
|
3
|
-
declare const _default: React.ComponentType<import("@draftbit/react-theme-provider").$Without<PickerComponentProps, "theme"> & {
|
|
4
|
-
theme?: import("@draftbit/react-theme-provider").$DeepPartial<any> | undefined;
|
|
5
|
-
}> & import("@draftbit/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<React.ComponentType<PickerComponentProps> & React.FC<PickerComponentProps>, {}>;
|
|
6
|
-
export default _default;
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { PickerComponentProps } from "./PickerTypes";
|
|
3
|
-
import type { IconSlot } from "../../interfaces/Icon";
|
|
4
|
-
declare const _default: React.ComponentType<import("@draftbit/react-theme-provider").$Without<PickerComponentProps & IconSlot, "theme"> & {
|
|
5
|
-
theme?: import("@draftbit/react-theme-provider").$DeepPartial<any> | undefined;
|
|
6
|
-
}> & import("@draftbit/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<React.ComponentType<PickerComponentProps & IconSlot> & React.FC<PickerComponentProps & IconSlot>, {}>;
|
|
7
|
-
export default _default;
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { PickerComponentProps } from "./PickerTypes";
|
|
3
|
-
declare const _default: React.ComponentType<import("@draftbit/react-theme-provider").$Without<PickerComponentProps, "theme"> & {
|
|
4
|
-
theme?: import("@draftbit/react-theme-provider").$DeepPartial<any> | undefined;
|
|
5
|
-
}> & import("@draftbit/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<React.ComponentType<PickerComponentProps> & React.FC<PickerComponentProps>, {}>;
|
|
6
|
-
export default _default;
|
|
@@ -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,68 +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
|
-
const { viewStyles: { borderRadius, // eslint-disable-line @typescript-eslint/no-unused-vars
|
|
11
|
-
borderWidth, // eslint-disable-line @typescript-eslint/no-unused-vars
|
|
12
|
-
borderTopWidth, // eslint-disable-line @typescript-eslint/no-unused-vars
|
|
13
|
-
borderRightWidth, // eslint-disable-line @typescript-eslint/no-unused-vars
|
|
14
|
-
borderBottomWidth, // eslint-disable-line @typescript-eslint/no-unused-vars
|
|
15
|
-
borderLeftWidth, // eslint-disable-line @typescript-eslint/no-unused-vars
|
|
16
|
-
borderColor, // eslint-disable-line @typescript-eslint/no-unused-vars
|
|
17
|
-
backgroundColor, // eslint-disable-line @typescript-eslint/no-unused-vars
|
|
18
|
-
padding, // eslint-disable-line @typescript-eslint/no-unused-vars
|
|
19
|
-
paddingTop, // eslint-disable-line @typescript-eslint/no-unused-vars
|
|
20
|
-
paddingRight, // eslint-disable-line @typescript-eslint/no-unused-vars
|
|
21
|
-
paddingBottom, // eslint-disable-line @typescript-eslint/no-unused-vars
|
|
22
|
-
paddingLeft, // eslint-disable-line @typescript-eslint/no-unused-vars
|
|
23
|
-
...viewStyles }, } = extractStyles(style);
|
|
24
|
-
const textField = React.useRef(undefined);
|
|
25
|
-
const onValueChange = (itemValue, itemIndex) => {
|
|
26
|
-
toggleFocus();
|
|
27
|
-
onValueChangeOverride(itemValue, itemIndex);
|
|
28
|
-
};
|
|
29
|
-
const toggleFocus = () => {
|
|
30
|
-
if (!disabled) {
|
|
31
|
-
// @ts-ignore
|
|
32
|
-
textField.current.toggleFocus(); // cannot determine if method exists due to component being wrapped in a withTheme()
|
|
33
|
-
}
|
|
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
|
-
(options.find((o) => o.value === selectedValue)?.label ?? selectedValue);
|
|
45
|
-
return (React.createElement(Touchable, { disabled: disabled, onPress: toggleFocus, style: [styles.container, viewStyles] },
|
|
46
|
-
React.createElement(View, null,
|
|
47
|
-
React.createElement(NativePicker, { enabled: !disabled, selectedValue: selectedValue, onValueChange: onValueChange, style: {
|
|
48
|
-
opacity: 0,
|
|
49
|
-
position: "absolute",
|
|
50
|
-
top: 0,
|
|
51
|
-
left: 0,
|
|
52
|
-
right: 0,
|
|
53
|
-
bottom: 0,
|
|
54
|
-
width: "100%",
|
|
55
|
-
} }, options.map((o) => (React.createElement(NativePicker.Item, { label: o.label, value: o.value, key: o.value })))),
|
|
56
|
-
React.createElement(View, { pointerEvents: "none" },
|
|
57
|
-
React.createElement(TextField, { ...props, value: selectedLabel, placeholder: placeholder,
|
|
58
|
-
// @ts-ignore
|
|
59
|
-
ref: textField, disabled: disabled,
|
|
60
|
-
// @ts-expect-error
|
|
61
|
-
style: stylesWithoutMargin })))));
|
|
62
|
-
};
|
|
63
|
-
const styles = StyleSheet.create({
|
|
64
|
-
container: {
|
|
65
|
-
alignSelf: "stretch",
|
|
66
|
-
},
|
|
67
|
-
});
|
|
68
|
-
export default withTheme(Picker);
|
|
@@ -1,116 +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
|
-
|
|
8
|
-
import TextField from "../TextField";
|
|
9
|
-
import Touchable from "../Touchable";
|
|
10
|
-
import { PickerComponentProps } from "./PickerTypes";
|
|
11
|
-
|
|
12
|
-
const Picker: React.FC<PickerComponentProps> = ({
|
|
13
|
-
style,
|
|
14
|
-
options,
|
|
15
|
-
placeholder,
|
|
16
|
-
selectedValue,
|
|
17
|
-
disabled = false,
|
|
18
|
-
onValueChange: onValueChangeOverride = () => {},
|
|
19
|
-
...props
|
|
20
|
-
}) => {
|
|
21
|
-
const {
|
|
22
|
-
viewStyles: {
|
|
23
|
-
borderRadius, // eslint-disable-line @typescript-eslint/no-unused-vars
|
|
24
|
-
borderWidth, // eslint-disable-line @typescript-eslint/no-unused-vars
|
|
25
|
-
borderTopWidth, // eslint-disable-line @typescript-eslint/no-unused-vars
|
|
26
|
-
borderRightWidth, // eslint-disable-line @typescript-eslint/no-unused-vars
|
|
27
|
-
borderBottomWidth, // eslint-disable-line @typescript-eslint/no-unused-vars
|
|
28
|
-
borderLeftWidth, // eslint-disable-line @typescript-eslint/no-unused-vars
|
|
29
|
-
borderColor, // eslint-disable-line @typescript-eslint/no-unused-vars
|
|
30
|
-
backgroundColor, // eslint-disable-line @typescript-eslint/no-unused-vars
|
|
31
|
-
padding, // eslint-disable-line @typescript-eslint/no-unused-vars
|
|
32
|
-
paddingTop, // eslint-disable-line @typescript-eslint/no-unused-vars
|
|
33
|
-
paddingRight, // eslint-disable-line @typescript-eslint/no-unused-vars
|
|
34
|
-
paddingBottom, // eslint-disable-line @typescript-eslint/no-unused-vars
|
|
35
|
-
paddingLeft, // eslint-disable-line @typescript-eslint/no-unused-vars
|
|
36
|
-
...viewStyles
|
|
37
|
-
},
|
|
38
|
-
} = extractStyles(style);
|
|
39
|
-
|
|
40
|
-
const textField = React.useRef<typeof TextField | undefined>(undefined);
|
|
41
|
-
|
|
42
|
-
const onValueChange = (itemValue: string, itemIndex: number) => {
|
|
43
|
-
toggleFocus();
|
|
44
|
-
onValueChangeOverride(itemValue, itemIndex);
|
|
45
|
-
};
|
|
46
|
-
|
|
47
|
-
const toggleFocus = () => {
|
|
48
|
-
if (!disabled) {
|
|
49
|
-
// @ts-ignore
|
|
50
|
-
textField.current.toggleFocus(); // cannot determine if method exists due to component being wrapped in a withTheme()
|
|
51
|
-
}
|
|
52
|
-
};
|
|
53
|
-
|
|
54
|
-
const stylesWithoutMargin =
|
|
55
|
-
style &&
|
|
56
|
-
omit(StyleSheet.flatten(style), [
|
|
57
|
-
"margin",
|
|
58
|
-
"marginTop",
|
|
59
|
-
"marginRight",
|
|
60
|
-
"marginBottom",
|
|
61
|
-
"marginLeft",
|
|
62
|
-
]);
|
|
63
|
-
|
|
64
|
-
const selectedLabel =
|
|
65
|
-
selectedValue &&
|
|
66
|
-
(options.find((o) => o.value === selectedValue)?.label ?? selectedValue);
|
|
67
|
-
|
|
68
|
-
return (
|
|
69
|
-
<Touchable
|
|
70
|
-
disabled={disabled}
|
|
71
|
-
onPress={toggleFocus}
|
|
72
|
-
style={[styles.container, viewStyles]}
|
|
73
|
-
>
|
|
74
|
-
<View>
|
|
75
|
-
<NativePicker
|
|
76
|
-
enabled={!disabled}
|
|
77
|
-
selectedValue={selectedValue}
|
|
78
|
-
onValueChange={onValueChange}
|
|
79
|
-
style={{
|
|
80
|
-
opacity: 0,
|
|
81
|
-
position: "absolute",
|
|
82
|
-
top: 0,
|
|
83
|
-
left: 0,
|
|
84
|
-
right: 0,
|
|
85
|
-
bottom: 0,
|
|
86
|
-
width: "100%",
|
|
87
|
-
}}
|
|
88
|
-
>
|
|
89
|
-
{options.map((o) => (
|
|
90
|
-
<NativePicker.Item label={o.label} value={o.value} key={o.value} />
|
|
91
|
-
))}
|
|
92
|
-
</NativePicker>
|
|
93
|
-
<View pointerEvents="none">
|
|
94
|
-
<TextField
|
|
95
|
-
{...props}
|
|
96
|
-
value={selectedLabel}
|
|
97
|
-
placeholder={placeholder}
|
|
98
|
-
// @ts-ignore
|
|
99
|
-
ref={textField} // cannot determine if ref is of correct type due to component being wrapped in a withTheme()
|
|
100
|
-
disabled={disabled}
|
|
101
|
-
// @ts-expect-error
|
|
102
|
-
style={stylesWithoutMargin}
|
|
103
|
-
/>
|
|
104
|
-
</View>
|
|
105
|
-
</View>
|
|
106
|
-
</Touchable>
|
|
107
|
-
);
|
|
108
|
-
};
|
|
109
|
-
|
|
110
|
-
const styles = StyleSheet.create({
|
|
111
|
-
container: {
|
|
112
|
-
alignSelf: "stretch",
|
|
113
|
-
},
|
|
114
|
-
});
|
|
115
|
-
|
|
116
|
-
export default withTheme(Picker);
|