@draftbit/core 46.4.4-cbd3a5.2 → 46.4.4-d5b88a.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/commonjs/Provider.js +9 -0
- package/lib/commonjs/components/Accordion/AccordionGroup.js +14 -0
- package/lib/commonjs/components/Accordion/AccordionItem.js +13 -0
- package/lib/commonjs/components/Accordion/index.js +3 -0
- package/lib/commonjs/components/ActionSheet/ActionSheet.js +9 -0
- package/lib/commonjs/components/ActionSheet/ActionSheetCancel.js +5 -0
- package/lib/commonjs/components/ActionSheet/ActionSheetItem.js +7 -0
- package/lib/commonjs/components/ActionSheet/index.js +4 -0
- package/lib/commonjs/components/AnimatedCircularProgress.js +15 -0
- package/lib/commonjs/components/AspectRatio.js +10 -0
- package/lib/commonjs/components/AvatarEdit.js +12 -0
- package/lib/commonjs/components/Banner.js +23 -9
- package/lib/commonjs/components/Button.js +19 -2
- package/lib/commonjs/components/Card.js +14 -0
- package/lib/commonjs/components/CardBlock.js +19 -13
- package/lib/commonjs/components/CardContainer.js +18 -0
- package/lib/commonjs/components/CardContainerRating.js +20 -2
- package/lib/commonjs/components/CardContainerShortImage.js +12 -0
- package/lib/commonjs/components/CardInline.js +14 -1
- package/lib/commonjs/components/Carousel.js +21 -3
- package/lib/commonjs/components/Checkbox/Checkbox.js +18 -3
- package/lib/commonjs/components/Checkbox/CheckboxGroup.js +11 -0
- package/lib/commonjs/components/Checkbox/CheckboxGroupRow.js +20 -0
- package/lib/commonjs/components/Checkbox/CheckboxRow.js +24 -3
- package/lib/commonjs/components/Checkbox/context.js +5 -0
- package/lib/commonjs/components/Checkbox/index.js +4 -0
- package/lib/commonjs/components/CircleImage.js +9 -0
- package/lib/commonjs/components/CircularProgress.js +13 -3
- package/lib/commonjs/components/Config.js +13 -5
- package/lib/commonjs/components/Container.js +11 -0
- package/lib/commonjs/components/DatePicker/DatePicker.js +48 -16
- package/lib/commonjs/components/DatePicker/DatePickerComponent.js +7 -0
- package/lib/commonjs/components/DatePicker/DatePickerComponent.web.js +10 -0
- package/lib/commonjs/components/DeprecatedButton.js +23 -0
- package/lib/commonjs/components/DeprecatedCardWrapper.js +11 -0
- package/lib/commonjs/components/DeprecatedFAB.js +29 -21
- package/lib/commonjs/components/Divider.js +9 -0
- package/lib/commonjs/components/Elevation.js +11 -0
- package/lib/commonjs/components/FAB.js +10 -0
- package/lib/commonjs/components/FieldSearchBarFull.js +18 -0
- package/lib/commonjs/components/FormRow.js +10 -0
- package/lib/commonjs/components/Header.js +13 -0
- package/lib/commonjs/components/HeaderLarge.js +9 -0
- package/lib/commonjs/components/HeaderMedium.js +9 -0
- package/lib/commonjs/components/HeaderOverline.js +9 -0
- package/lib/commonjs/components/IconButton.js +10 -0
- package/lib/commonjs/components/Image.js +17 -0
- package/lib/commonjs/components/Layout.js +12 -2
- package/lib/commonjs/components/NumberInput.js +21 -8
- package/lib/commonjs/components/Picker/Picker.js +42 -9
- package/lib/commonjs/components/Picker/PickerComponent.android.js +23 -6
- package/lib/commonjs/components/Picker/PickerComponent.ios.js +27 -8
- package/lib/commonjs/components/Picker/PickerComponent.web.js +23 -6
- package/lib/commonjs/components/Portal/Portal.js +14 -4
- package/lib/commonjs/components/Portal/PortalConsumer.js +15 -5
- package/lib/commonjs/components/Portal/PortalHost.js +31 -4
- package/lib/commonjs/components/Portal/PortalManager.js +19 -7
- package/lib/commonjs/components/ProgressBar.js +25 -5
- package/lib/commonjs/components/ProgressCircle.js +10 -0
- package/lib/commonjs/components/ProgressIndicator.js +9 -0
- package/lib/commonjs/components/RadioButton/RadioButton.js +14 -1
- package/lib/commonjs/components/RadioButton/RadioButtonFieldGroup.js +10 -0
- package/lib/commonjs/components/RadioButton/RadioButtonGroup.js +14 -0
- package/lib/commonjs/components/RadioButton/RadioButtonRow.js +21 -1
- package/lib/commonjs/components/RadioButton/context.js +5 -0
- package/lib/commonjs/components/RadioButton/index.js +5 -0
- package/lib/commonjs/components/Row.js +11 -0
- package/lib/commonjs/components/RowBodyIcon.js +10 -0
- package/lib/commonjs/components/RowHeadlineImageCaption.js +11 -2
- package/lib/commonjs/components/RowHeadlineImageIcon.js +10 -0
- package/lib/commonjs/components/SVG.js +9 -0
- package/lib/commonjs/components/ScreenContainer.js +14 -0
- package/lib/commonjs/components/Slider.js +21 -0
- package/lib/commonjs/components/StarRating.js +10 -0
- package/lib/commonjs/components/StepIndicator.js +39 -5
- package/lib/commonjs/components/Stepper.js +26 -7
- package/lib/commonjs/components/Surface.js +14 -0
- package/lib/commonjs/components/Swiper/Swiper.js +8 -0
- package/lib/commonjs/components/Swiper/SwiperItem.js +6 -0
- package/lib/commonjs/components/Swiper/index.js +3 -0
- package/lib/commonjs/components/Switch.js +18 -5
- package/lib/commonjs/components/Text.js +18 -3
- package/lib/commonjs/components/TextField.js +62 -12
- package/lib/commonjs/components/ToggleButton.js +14 -0
- package/lib/commonjs/components/Touchable.js +5 -0
- package/lib/commonjs/components/Touchable.web.js +2 -0
- package/lib/commonjs/components/Typography.js +5 -0
- package/lib/commonjs/components/useAuthState.js +9 -0
- package/lib/commonjs/constants.js +5 -1
- package/lib/commonjs/hooks.js +7 -4
- package/lib/commonjs/index.js +52 -0
- package/lib/commonjs/interfaces/Icon.js +5 -3
- package/lib/commonjs/mappings/Accordion.js +2 -0
- package/lib/commonjs/mappings/AccordionItem.js +2 -0
- package/lib/commonjs/mappings/ActionSheet.js +2 -0
- package/lib/commonjs/mappings/ActionSheetCancel.js +2 -0
- package/lib/commonjs/mappings/ActionSheetItem.js +2 -0
- package/lib/commonjs/mappings/ActivityIndicator.js +2 -0
- package/lib/commonjs/mappings/AudioPlayer.js +2 -0
- package/lib/commonjs/mappings/AvatarEdit.js +2 -0
- package/lib/commonjs/mappings/Banner.js +2 -0
- package/lib/commonjs/mappings/BlurView.js +2 -0
- package/lib/commonjs/mappings/Button.js +5 -6
- package/lib/commonjs/mappings/Card.js +4 -3
- package/lib/commonjs/mappings/CardBlock.js +5 -6
- package/lib/commonjs/mappings/CardContainer.js +7 -5
- package/lib/commonjs/mappings/CardContainerRating.js +4 -4
- package/lib/commonjs/mappings/CardContainerShortImage.js +2 -0
- package/lib/commonjs/mappings/CardInline.js +2 -0
- package/lib/commonjs/mappings/Carousel.js +2 -0
- package/lib/commonjs/mappings/Checkbox.js +2 -0
- package/lib/commonjs/mappings/CheckboxGroup.js +2 -0
- package/lib/commonjs/mappings/CheckboxRow.js +2 -0
- package/lib/commonjs/mappings/CircleImage.js +2 -0
- package/lib/commonjs/mappings/Container.js +2 -0
- package/lib/commonjs/mappings/CustomCode.js +2 -0
- package/lib/commonjs/mappings/DatePicker.js +4 -4
- package/lib/commonjs/mappings/Divider.js +2 -0
- package/lib/commonjs/mappings/FAB.js +2 -0
- package/lib/commonjs/mappings/Fetch.js +2 -0
- package/lib/commonjs/mappings/FieldSearchBarFull.js +3 -2
- package/lib/commonjs/mappings/FlashList.js +2 -0
- package/lib/commonjs/mappings/FlatList.js +2 -0
- package/lib/commonjs/mappings/HeaderLarge.js +2 -0
- package/lib/commonjs/mappings/HeaderMedium.js +2 -0
- package/lib/commonjs/mappings/HeaderOverline.js +2 -0
- package/lib/commonjs/mappings/HtmlElements.js +125 -0
- package/lib/commonjs/mappings/Icon.js +3 -2
- package/lib/commonjs/mappings/IconButton.js +2 -0
- package/lib/commonjs/mappings/Image.js +2 -0
- package/lib/commonjs/mappings/ImageBackground.js +2 -0
- package/lib/commonjs/mappings/KeyboardAvoidingView.js +2 -0
- package/lib/commonjs/mappings/KeyboardAwareScrollView.js +2 -0
- package/lib/commonjs/mappings/Layout.js +2 -0
- package/lib/commonjs/mappings/LinearGradient.js +2 -0
- package/lib/commonjs/mappings/MapCallout.js +2 -0
- package/lib/commonjs/mappings/MapMarker.js +2 -0
- package/lib/commonjs/mappings/MapView.js +2 -0
- package/lib/commonjs/mappings/Modal.js +2 -0
- package/lib/commonjs/mappings/NumberInput.js +4 -4
- package/lib/commonjs/mappings/Picker.js +4 -4
- package/lib/commonjs/mappings/ProgressBar.js +2 -0
- package/lib/commonjs/mappings/ProgressCircle.js +2 -0
- package/lib/commonjs/mappings/ProgressIndicator.js +2 -0
- package/lib/commonjs/mappings/RadioButton.js +2 -0
- package/lib/commonjs/mappings/RadioButtonGroup.js +2 -0
- package/lib/commonjs/mappings/RadioButtonRow.js +2 -0
- package/lib/commonjs/mappings/RowBodyIcon.js +2 -0
- package/lib/commonjs/mappings/RowHeadlineImageCaption.js +2 -0
- package/lib/commonjs/mappings/RowHeadlineImageIcon.js +8 -12
- package/lib/commonjs/mappings/SVG.js +2 -0
- package/lib/commonjs/mappings/SafeAreaView.js +2 -0
- package/lib/commonjs/mappings/ScrollView.js +2 -0
- package/lib/commonjs/mappings/Slider.js +2 -0
- package/lib/commonjs/mappings/StarRating.js +3 -1
- package/lib/commonjs/mappings/Stepper.js +3 -1
- package/lib/commonjs/mappings/Surface.js +2 -0
- package/lib/commonjs/mappings/Swiper.js +2 -0
- package/lib/commonjs/mappings/SwiperItem.js +2 -0
- package/lib/commonjs/mappings/Switch.js +2 -0
- package/lib/commonjs/mappings/Text.js +5 -5
- package/lib/commonjs/mappings/TextArea.js +3 -2
- package/lib/commonjs/mappings/TextField.js +8 -7
- package/lib/commonjs/mappings/TextInput.js +3 -2
- package/lib/commonjs/mappings/ToggleButton.js +2 -0
- package/lib/commonjs/mappings/Touchable.js +2 -0
- package/lib/commonjs/mappings/Video.js +2 -0
- package/lib/commonjs/mappings/View.js +2 -0
- package/lib/commonjs/mappings/WebView.js +2 -0
- package/lib/commonjs/styles/DarkTheme.js +6 -5
- package/lib/commonjs/styles/DefaultTheme.js +17 -26
- package/lib/commonjs/styles/fonts.js +5 -3
- package/lib/commonjs/styles/overlay.js +14 -5
- package/lib/commonjs/styles/shadow.js +9 -0
- package/lib/commonjs/theming.js +4 -0
- package/lib/commonjs/utilities.js +14 -2
- package/lib/module/Provider.js +1 -0
- package/lib/module/components/Accordion/AccordionGroup.js +4 -0
- package/lib/module/components/Accordion/AccordionItem.js +3 -0
- package/lib/module/components/ActionSheet/ActionSheet.js +2 -0
- package/lib/module/components/ActionSheet/ActionSheetCancel.js +2 -0
- package/lib/module/components/ActionSheet/ActionSheetItem.js +2 -0
- package/lib/module/components/AnimatedCircularProgress.js +6 -0
- package/lib/module/components/AspectRatio.js +6 -0
- package/lib/module/components/AvatarEdit.js +3 -0
- package/lib/module/components/Banner.js +10 -9
- package/lib/module/components/Button.js +10 -2
- package/lib/module/components/Card.js +2 -0
- package/lib/module/components/CardBlock.js +6 -0
- package/lib/module/components/CardContainer.js +7 -0
- package/lib/module/components/CardContainerRating.js +8 -2
- package/lib/module/components/CardContainerShortImage.js +3 -0
- package/lib/module/components/CardInline.js +2 -0
- package/lib/module/components/Carousel.js +9 -3
- package/lib/module/components/Checkbox/Checkbox.js +9 -3
- package/lib/module/components/Checkbox/CheckboxGroup.js +5 -0
- package/lib/module/components/Checkbox/CheckboxGroupRow.js +8 -0
- package/lib/module/components/Checkbox/CheckboxRow.js +11 -3
- package/lib/module/components/Checkbox/context.js +2 -0
- package/lib/module/components/CircleImage.js +3 -0
- package/lib/module/components/CircularProgress.js +9 -3
- package/lib/module/components/Config.js +11 -5
- package/lib/module/components/Container.js +3 -0
- package/lib/module/components/DatePicker/DatePicker.js +33 -16
- package/lib/module/components/DatePicker/DatePickerComponent.js +2 -0
- package/lib/module/components/DatePicker/DatePickerComponent.web.js +2 -0
- package/lib/module/components/DeprecatedButton.js +9 -0
- package/lib/module/components/DeprecatedCardWrapper.js +6 -0
- package/lib/module/components/DeprecatedFAB.js +13 -0
- package/lib/module/components/Divider.js +3 -0
- package/lib/module/components/Elevation.js +3 -0
- package/lib/module/components/FAB.js +3 -0
- package/lib/module/components/FieldSearchBarFull.js +9 -0
- package/lib/module/components/FormRow.js +1 -0
- package/lib/module/components/Header.js +2 -0
- package/lib/module/components/HeaderLarge.js +2 -0
- package/lib/module/components/HeaderMedium.js +2 -0
- package/lib/module/components/HeaderOverline.js +2 -0
- package/lib/module/components/IconButton.js +3 -0
- package/lib/module/components/Image.js +10 -0
- package/lib/module/components/Layout.js +3 -4
- package/lib/module/components/NumberInput.js +16 -8
- package/lib/module/components/Picker/Picker.js +25 -8
- package/lib/module/components/Picker/PickerComponent.android.js +10 -6
- package/lib/module/components/Picker/PickerComponent.ios.js +11 -8
- package/lib/module/components/Picker/PickerComponent.web.js +10 -6
- package/lib/module/components/Portal/Portal.js +6 -4
- package/lib/module/components/Portal/PortalConsumer.js +10 -5
- package/lib/module/components/Portal/PortalHost.js +22 -4
- package/lib/module/components/Portal/PortalManager.js +14 -7
- package/lib/module/components/ProgressBar.js +17 -5
- package/lib/module/components/ProgressCircle.js +2 -0
- package/lib/module/components/ProgressIndicator.js +2 -0
- package/lib/module/components/RadioButton/RadioButton.js +6 -1
- package/lib/module/components/RadioButton/RadioButtonFieldGroup.js +3 -0
- package/lib/module/components/RadioButton/RadioButtonGroup.js +7 -0
- package/lib/module/components/RadioButton/RadioButtonRow.js +9 -1
- package/lib/module/components/RadioButton/context.js +2 -0
- package/lib/module/components/Row.js +2 -0
- package/lib/module/components/RowBodyIcon.js +2 -0
- package/lib/module/components/RowHeadlineImageCaption.js +3 -2
- package/lib/module/components/RowHeadlineImageIcon.js +2 -0
- package/lib/module/components/SVG.js +2 -0
- package/lib/module/components/ScreenContainer.js +6 -0
- package/lib/module/components/Slider.js +10 -0
- package/lib/module/components/StarRating.js +3 -0
- package/lib/module/components/StepIndicator.js +29 -5
- package/lib/module/components/Stepper.js +16 -9
- package/lib/module/components/Surface.js +5 -0
- package/lib/module/components/Swiper/Swiper.js +4 -0
- package/lib/module/components/Swiper/SwiperItem.js +2 -0
- package/lib/module/components/Switch.js +7 -5
- package/lib/module/components/Text.js +10 -3
- package/lib/module/components/TextField.js +50 -12
- package/lib/module/components/ToggleButton.js +5 -0
- package/lib/module/components/Touchable.js +1 -0
- package/lib/module/components/useAuthState.js +4 -0
- package/lib/module/constants.js +1 -2
- package/lib/module/hooks.js +2 -4
- package/lib/module/index.js +2 -4
- package/lib/module/interfaces/Icon.js +1 -2
- package/lib/module/mappings/Button.js +3 -6
- package/lib/module/mappings/Card.js +2 -3
- package/lib/module/mappings/CardBlock.js +3 -6
- package/lib/module/mappings/CardContainer.js +5 -5
- package/lib/module/mappings/CardContainerRating.js +2 -4
- package/lib/module/mappings/DatePicker.js +2 -4
- package/lib/module/mappings/Fetch.js +1 -0
- package/lib/module/mappings/FieldSearchBarFull.js +1 -2
- package/lib/module/mappings/HtmlElements.js +116 -0
- package/lib/module/mappings/Icon.js +1 -2
- package/lib/module/mappings/NumberInput.js +2 -4
- package/lib/module/mappings/Picker.js +2 -4
- package/lib/module/mappings/RowHeadlineImageIcon.js +6 -12
- package/lib/module/mappings/StarRating.js +1 -1
- package/lib/module/mappings/Stepper.js +2 -2
- package/lib/module/mappings/Text.js +3 -5
- package/lib/module/mappings/TextArea.js +1 -2
- package/lib/module/mappings/TextField.js +6 -7
- package/lib/module/mappings/TextInput.js +1 -2
- package/lib/module/styles/DarkTheme.js +2 -4
- package/lib/module/styles/DefaultTheme.js +13 -26
- package/lib/module/styles/fonts.js +1 -2
- package/lib/module/styles/overlay.js +10 -4
- package/lib/module/styles/shadow.js +6 -0
- package/lib/module/utilities.js +5 -2
- package/lib/typescript/src/components/Stepper.d.ts +1 -2
- package/lib/typescript/src/mappings/HtmlElements.d.ts +49 -0
- package/package.json +4 -3
- package/src/components/Picker/Picker.js +1 -1
- package/src/components/Picker/Picker.tsx +2 -2
- package/src/components/Stepper.js +5 -3
- package/src/components/Stepper.tsx +5 -5
- package/src/mappings/HtmlElements.js +141 -0
- package/src/mappings/HtmlElements.ts +151 -0
- package/src/mappings/Stepper.js +5 -2
- package/src/mappings/Stepper.ts +5 -1
|
@@ -1,7 +1,9 @@
|
|
|
1
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
|
+
|
|
2
3
|
import React, { useEffect, useState } from "react";
|
|
3
4
|
import { TextInput } from "react-native";
|
|
4
5
|
import { isString, isNumber, isNaN } from "lodash";
|
|
6
|
+
|
|
5
7
|
const NumberInput = _ref => {
|
|
6
8
|
let {
|
|
7
9
|
onChangeText,
|
|
@@ -10,6 +12,7 @@ const NumberInput = _ref => {
|
|
|
10
12
|
...props
|
|
11
13
|
} = _ref;
|
|
12
14
|
const [currentStringNumberValue, setCurrentStringNumberValue] = useState("0");
|
|
15
|
+
|
|
13
16
|
const formatValueToStringNumber = valueToFormat => {
|
|
14
17
|
if (valueToFormat != null) {
|
|
15
18
|
if (isString(valueToFormat) && valueToFormat !== "") {
|
|
@@ -24,31 +27,35 @@ const NumberInput = _ref => {
|
|
|
24
27
|
return valueToFormat.toString();
|
|
25
28
|
}
|
|
26
29
|
}
|
|
30
|
+
|
|
27
31
|
return "0";
|
|
28
|
-
};
|
|
32
|
+
}; // set currentStringNumberValue as defaultValue prop if there is a differnce on first render only
|
|
33
|
+
|
|
29
34
|
|
|
30
|
-
// set currentStringNumberValue as defaultValue prop if there is a differnce on first render only
|
|
31
35
|
useEffect(() => {
|
|
32
36
|
const defaultStringNumberValue = formatValueToStringNumber(defaultValue);
|
|
37
|
+
|
|
33
38
|
if (currentStringNumberValue !== defaultStringNumberValue) {
|
|
34
39
|
setCurrentStringNumberValue(defaultStringNumberValue);
|
|
35
|
-
}
|
|
36
|
-
|
|
40
|
+
} // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
41
|
+
|
|
37
42
|
}, []);
|
|
43
|
+
|
|
38
44
|
const handleChangeText = newValue => {
|
|
39
45
|
const newStringNumberValue = formatValueToStringNumber(newValue);
|
|
40
46
|
const number = parseFloat(newStringNumberValue);
|
|
41
47
|
setCurrentStringNumberValue(newStringNumberValue);
|
|
42
48
|
onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(number);
|
|
43
|
-
};
|
|
49
|
+
}; // run handleChangeText with value prop only when value prop changes (and first render to reset currentStringNumberValue)
|
|
50
|
+
|
|
44
51
|
|
|
45
|
-
// run handleChangeText with value prop only when value prop changes (and first render to reset currentStringNumberValue)
|
|
46
52
|
useEffect(() => {
|
|
47
53
|
const nextStringNumberValue = formatValueToStringNumber(value);
|
|
54
|
+
|
|
48
55
|
if (currentStringNumberValue !== nextStringNumberValue) {
|
|
49
56
|
handleChangeText(nextStringNumberValue);
|
|
50
|
-
}
|
|
51
|
-
|
|
57
|
+
} // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
58
|
+
|
|
52
59
|
}, [value]);
|
|
53
60
|
return /*#__PURE__*/React.createElement(TextInput, _extends({
|
|
54
61
|
keyboardType: "numeric",
|
|
@@ -56,4 +63,5 @@ const NumberInput = _ref => {
|
|
|
56
63
|
onChangeText: handleChangeText
|
|
57
64
|
}, props));
|
|
58
65
|
};
|
|
66
|
+
|
|
59
67
|
export default NumberInput;
|
|
@@ -8,16 +8,19 @@ import Portal from "../Portal/Portal";
|
|
|
8
8
|
import Button from "../DeprecatedButton";
|
|
9
9
|
import Touchable from "../Touchable";
|
|
10
10
|
import { extractStyles, extractBorderAndMarginStyles, borderStyleNames, marginStyleNames } from "../../utilities";
|
|
11
|
+
|
|
11
12
|
function normalizeOptions(options) {
|
|
12
13
|
if (options.length === 0) {
|
|
13
14
|
return [];
|
|
14
15
|
}
|
|
16
|
+
|
|
15
17
|
if (typeof options[0] === ("string" || "number")) {
|
|
16
18
|
return options.map(option => ({
|
|
17
19
|
label: String(option),
|
|
18
20
|
value: String(option)
|
|
19
21
|
}));
|
|
20
22
|
}
|
|
23
|
+
|
|
21
24
|
if (isObject(options[0]) && options[0].value !== null && options[0].label !== null) {
|
|
22
25
|
return options.map(option => {
|
|
23
26
|
return {
|
|
@@ -26,8 +29,10 @@ function normalizeOptions(options) {
|
|
|
26
29
|
};
|
|
27
30
|
});
|
|
28
31
|
}
|
|
32
|
+
|
|
29
33
|
throw new Error('Picker options must be either an array of strings or array of { "label": string; "value": string; } objects.');
|
|
30
34
|
}
|
|
35
|
+
|
|
31
36
|
const {
|
|
32
37
|
width: deviceWidth,
|
|
33
38
|
height: deviceHeight
|
|
@@ -36,8 +41,10 @@ const isIos = Platform.OS === "ios";
|
|
|
36
41
|
const unstyledColor = "rgba(165, 173, 183, 1)";
|
|
37
42
|
const disabledColor = "rgb(240, 240, 240)";
|
|
38
43
|
const errorColor = "rgba(255, 69, 100, 1)";
|
|
44
|
+
|
|
39
45
|
const Picker = _ref => {
|
|
40
|
-
var _find;
|
|
46
|
+
var _find$label, _find;
|
|
47
|
+
|
|
41
48
|
let {
|
|
42
49
|
error,
|
|
43
50
|
options = [],
|
|
@@ -62,9 +69,11 @@ const Picker = _ref => {
|
|
|
62
69
|
const androidPickerRef = React.useRef(undefined);
|
|
63
70
|
const [internalValue, setInternalValue] = React.useState(value || defaultValue);
|
|
64
71
|
const [pickerVisible, setPickerVisible] = React.useState(false);
|
|
72
|
+
|
|
65
73
|
const togglePickerVisible = () => {
|
|
66
74
|
setPickerVisible(!pickerVisible);
|
|
67
75
|
};
|
|
76
|
+
|
|
68
77
|
React.useEffect(() => {
|
|
69
78
|
if (value != null) {
|
|
70
79
|
setInternalValue(value);
|
|
@@ -78,6 +87,7 @@ const Picker = _ref => {
|
|
|
78
87
|
React.useEffect(() => {
|
|
79
88
|
if (pickerVisible && androidPickerRef.current) {
|
|
80
89
|
var _androidPickerRef$cur;
|
|
90
|
+
|
|
81
91
|
androidPickerRef === null || androidPickerRef === void 0 ? void 0 : (_androidPickerRef$cur = androidPickerRef.current) === null || _androidPickerRef$cur === void 0 ? void 0 : _androidPickerRef$cur.focus();
|
|
82
92
|
}
|
|
83
93
|
}, [pickerVisible, androidPickerRef]);
|
|
@@ -99,9 +109,7 @@ const Picker = _ref => {
|
|
|
99
109
|
borderStyles: extractedBorderStyles,
|
|
100
110
|
marginStyles: extractedMarginStyles
|
|
101
111
|
} = extractBorderAndMarginStyles(viewStyles, additionalBorderStyles, additionalMarginStyles);
|
|
102
|
-
const borderStyles = {
|
|
103
|
-
...{
|
|
104
|
-
...(type === "solid" ? {
|
|
112
|
+
const borderStyles = { ...{ ...(type === "solid" ? {
|
|
105
113
|
borderTopLeftRadius: 5,
|
|
106
114
|
borderTopRightRadius: 5,
|
|
107
115
|
borderBottomRightRadius: 5,
|
|
@@ -128,7 +136,7 @@ const Picker = _ref => {
|
|
|
128
136
|
...extractedMarginStyles
|
|
129
137
|
};
|
|
130
138
|
const stylesWithoutBordersAndMargins = omit(viewStyles, [...borderStyleNames, ...marginStyleNames, ...additionalBorderStyles, ...additionalMarginStyles]);
|
|
131
|
-
const selectedLabel = internalValue && (((_find = pickerOptions.find(option => option.value === internalValue)) === null || _find === void 0 ? void 0 : _find.label)
|
|
139
|
+
const selectedLabel = internalValue && ((_find$label = (_find = pickerOptions.find(option => option.value === internalValue)) === null || _find === void 0 ? void 0 : _find.label) !== null && _find$label !== void 0 ? _find$label : internalValue);
|
|
132
140
|
const labelText = label ? /*#__PURE__*/React.createElement(Text, {
|
|
133
141
|
style: {
|
|
134
142
|
textAlign: textStyles.textAlign,
|
|
@@ -157,15 +165,19 @@ const Picker = _ref => {
|
|
|
157
165
|
}
|
|
158
166
|
}) : null;
|
|
159
167
|
const textAlign = textStyles === null || textStyles === void 0 ? void 0 : textStyles.textAlign;
|
|
168
|
+
|
|
160
169
|
const calculateLeftPadding = () => {
|
|
161
170
|
if (leftIconOutset) {
|
|
162
171
|
if (textAlign === "center") {
|
|
163
172
|
return iconSize - Math.abs(8 - iconSize);
|
|
164
173
|
}
|
|
174
|
+
|
|
165
175
|
return iconSize + 8;
|
|
166
176
|
}
|
|
177
|
+
|
|
167
178
|
return 0;
|
|
168
179
|
};
|
|
180
|
+
|
|
169
181
|
const assistiveTextLabel = assistiveText ? /*#__PURE__*/React.createElement(Text, {
|
|
170
182
|
style: {
|
|
171
183
|
textAlign,
|
|
@@ -187,14 +199,18 @@ const Picker = _ref => {
|
|
|
187
199
|
color: unstyledColor
|
|
188
200
|
} : {})
|
|
189
201
|
};
|
|
202
|
+
|
|
190
203
|
const handleValueChange = (newValue, itemIndex) => {
|
|
191
204
|
if (!placeholder || itemIndex > 0) {
|
|
192
205
|
onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(newValue, itemIndex);
|
|
193
206
|
}
|
|
207
|
+
|
|
194
208
|
setInternalValue(newValue);
|
|
195
209
|
};
|
|
210
|
+
|
|
196
211
|
return (
|
|
197
212
|
/*#__PURE__*/
|
|
213
|
+
|
|
198
214
|
/* marginsContainer */
|
|
199
215
|
React.createElement(View, {
|
|
200
216
|
style: [styles.marginsContainer, marginStyles]
|
|
@@ -211,7 +227,7 @@ const Picker = _ref => {
|
|
|
211
227
|
style: styles.primaryTextContainer
|
|
212
228
|
}, labelText, /*#__PURE__*/React.createElement(Text, {
|
|
213
229
|
style: primaryTextStyle
|
|
214
|
-
}, String(selectedLabel
|
|
230
|
+
}, String(selectedLabel !== null && selectedLabel !== void 0 ? selectedLabel : placeholder))), rightIcon)), assistiveTextLabel), isIos && pickerVisible ? /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(View, {
|
|
215
231
|
style: [styles.iosPicker, {
|
|
216
232
|
backgroundColor: colors.divider
|
|
217
233
|
}]
|
|
@@ -244,7 +260,7 @@ const Picker = _ref => {
|
|
|
244
260
|
}))) : null)
|
|
245
261
|
);
|
|
246
262
|
};
|
|
247
|
-
|
|
263
|
+
|
|
248
264
|
const styles = StyleSheet.create({
|
|
249
265
|
marginsContainer: {
|
|
250
266
|
alignSelf: "stretch",
|
|
@@ -314,4 +330,5 @@ const styles = StyleSheet.create({
|
|
|
314
330
|
maxWidth: deviceWidth,
|
|
315
331
|
maxHeight: deviceHeight
|
|
316
332
|
}
|
|
317
|
-
});
|
|
333
|
+
});
|
|
334
|
+
export default withTheme(Picker);
|
|
@@ -1,4 +1,5 @@
|
|
|
1
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
|
+
|
|
2
3
|
import * as React from "react";
|
|
3
4
|
import { View, StyleSheet } from "react-native";
|
|
4
5
|
import omit from "lodash.omit";
|
|
@@ -7,8 +8,10 @@ import { Picker as NativePicker } from "@react-native-picker/picker";
|
|
|
7
8
|
import { extractStyles } from "../../utilities";
|
|
8
9
|
import TextField from "../TextField";
|
|
9
10
|
import Touchable from "../Touchable";
|
|
11
|
+
|
|
10
12
|
const Picker = _ref => {
|
|
11
|
-
var _options$find;
|
|
13
|
+
var _options$find$label, _options$find;
|
|
14
|
+
|
|
12
15
|
let {
|
|
13
16
|
style,
|
|
14
17
|
options,
|
|
@@ -50,10 +53,12 @@ const Picker = _ref => {
|
|
|
50
53
|
}
|
|
51
54
|
} = extractStyles(style);
|
|
52
55
|
const textField = React.useRef(undefined);
|
|
56
|
+
|
|
53
57
|
const onValueChange = (itemValue, itemIndex) => {
|
|
54
58
|
toggleFocus();
|
|
55
59
|
onValueChangeOverride(itemValue, itemIndex);
|
|
56
60
|
};
|
|
61
|
+
|
|
57
62
|
const toggleFocus = () => {
|
|
58
63
|
if (!disabled) {
|
|
59
64
|
// @ts-ignore
|
|
@@ -62,7 +67,7 @@ const Picker = _ref => {
|
|
|
62
67
|
};
|
|
63
68
|
|
|
64
69
|
const stylesWithoutMargin = style && omit(StyleSheet.flatten(style), ["margin", "marginTop", "marginRight", "marginBottom", "marginLeft"]);
|
|
65
|
-
const selectedLabel = selectedValue && (((_options$find = options.find(o => o.value === selectedValue)) === null || _options$find === void 0 ? void 0 : _options$find.label)
|
|
70
|
+
const selectedLabel = selectedValue && ((_options$find$label = (_options$find = options.find(o => o.value === selectedValue)) === null || _options$find === void 0 ? void 0 : _options$find.label) !== null && _options$find$label !== void 0 ? _options$find$label : selectedValue);
|
|
66
71
|
return /*#__PURE__*/React.createElement(Touchable, {
|
|
67
72
|
disabled: disabled,
|
|
68
73
|
onPress: toggleFocus,
|
|
@@ -88,17 +93,16 @@ const Picker = _ref => {
|
|
|
88
93
|
pointerEvents: "none"
|
|
89
94
|
}, /*#__PURE__*/React.createElement(TextField, _extends({}, props, {
|
|
90
95
|
value: selectedLabel,
|
|
91
|
-
placeholder: placeholder
|
|
92
|
-
// @ts-ignore
|
|
96
|
+
placeholder: placeholder // @ts-ignore
|
|
93
97
|
,
|
|
94
98
|
ref: textField // cannot determine if ref is of correct type due to component being wrapped in a withTheme()
|
|
95
99
|
,
|
|
96
|
-
disabled: disabled
|
|
97
|
-
// @ts-expect-error
|
|
100
|
+
disabled: disabled // @ts-expect-error
|
|
98
101
|
,
|
|
99
102
|
style: stylesWithoutMargin
|
|
100
103
|
})))));
|
|
101
104
|
};
|
|
105
|
+
|
|
102
106
|
const styles = StyleSheet.create({
|
|
103
107
|
container: {
|
|
104
108
|
alignSelf: "stretch"
|
|
@@ -1,4 +1,5 @@
|
|
|
1
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
|
+
|
|
2
3
|
import * as React from "react";
|
|
3
4
|
import { View, StyleSheet } from "react-native";
|
|
4
5
|
import { SafeAreaView } from "react-native-safe-area-context";
|
|
@@ -10,8 +11,10 @@ import Button from "../DeprecatedButton";
|
|
|
10
11
|
import TextField from "../TextField";
|
|
11
12
|
import Touchable from "../Touchable";
|
|
12
13
|
import { extractStyles } from "../../utilities";
|
|
14
|
+
|
|
13
15
|
const Picker = _ref => {
|
|
14
|
-
var _options$find;
|
|
16
|
+
var _options$find$label, _options$find;
|
|
17
|
+
|
|
15
18
|
let {
|
|
16
19
|
Icon,
|
|
17
20
|
style,
|
|
@@ -58,14 +61,15 @@ const Picker = _ref => {
|
|
|
58
61
|
} = extractStyles(style);
|
|
59
62
|
const textField = React.useRef(undefined);
|
|
60
63
|
const [pickerVisible, setIsPickerVisible] = React.useState(false);
|
|
64
|
+
|
|
61
65
|
const toggleVisibility = () => {
|
|
62
|
-
setIsPickerVisible(!pickerVisible);
|
|
63
|
-
|
|
66
|
+
setIsPickerVisible(!pickerVisible); // @ts-ignore
|
|
67
|
+
|
|
64
68
|
textField.current.toggleFocus(); // cannot determine if method exists due to component being wrapped in a withTheme()
|
|
65
69
|
};
|
|
66
70
|
|
|
67
71
|
const stylesWithoutMargin = style && omit(StyleSheet.flatten(style), ["margin", "marginTop", "marginRight", "marginBottom", "marginLeft"]);
|
|
68
|
-
const selectedLabel = selectedValue && (((_options$find = options.find(o => o.value === selectedValue)) === null || _options$find === void 0 ? void 0 : _options$find.label)
|
|
72
|
+
const selectedLabel = selectedValue && ((_options$find$label = (_options$find = options.find(o => o.value === selectedValue)) === null || _options$find === void 0 ? void 0 : _options$find.label) !== null && _options$find$label !== void 0 ? _options$find$label : selectedValue);
|
|
69
73
|
return /*#__PURE__*/React.createElement(View, {
|
|
70
74
|
style: [styles.container, viewStyles]
|
|
71
75
|
}, /*#__PURE__*/React.createElement(Touchable, {
|
|
@@ -73,14 +77,12 @@ const Picker = _ref => {
|
|
|
73
77
|
onPress: toggleVisibility
|
|
74
78
|
}, /*#__PURE__*/React.createElement(TextField, _extends({}, props, {
|
|
75
79
|
value: String(selectedLabel),
|
|
76
|
-
placeholder: placeholder
|
|
77
|
-
// @ts-ignore
|
|
80
|
+
placeholder: placeholder // @ts-ignore
|
|
78
81
|
,
|
|
79
82
|
ref: textField // cannot determine if ref is of correct type due to component being wrapped in a withTheme()
|
|
80
83
|
,
|
|
81
84
|
disabled: disabled,
|
|
82
|
-
pointerEvents: "none"
|
|
83
|
-
// @ts-expect-error
|
|
85
|
+
pointerEvents: "none" // @ts-expect-error
|
|
84
86
|
,
|
|
85
87
|
style: stylesWithoutMargin,
|
|
86
88
|
Icon: Icon
|
|
@@ -107,6 +109,7 @@ const Picker = _ref => {
|
|
|
107
109
|
key: o.value
|
|
108
110
|
})))))));
|
|
109
111
|
};
|
|
112
|
+
|
|
110
113
|
const styles = StyleSheet.create({
|
|
111
114
|
container: {
|
|
112
115
|
alignSelf: "stretch"
|
|
@@ -1,4 +1,5 @@
|
|
|
1
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
|
+
|
|
2
3
|
import * as React from "react";
|
|
3
4
|
import { View, StyleSheet } from "react-native";
|
|
4
5
|
import { Picker as NativePicker } from "@react-native-picker/picker";
|
|
@@ -7,8 +8,10 @@ import { withTheme } from "../../theming";
|
|
|
7
8
|
import { extractStyles } from "../../utilities";
|
|
8
9
|
import TextField from "../TextField";
|
|
9
10
|
import Touchable from "../Touchable";
|
|
11
|
+
|
|
10
12
|
const Picker = _ref => {
|
|
11
|
-
var _options$find;
|
|
13
|
+
var _options$find$label, _options$find;
|
|
14
|
+
|
|
12
15
|
let {
|
|
13
16
|
style,
|
|
14
17
|
options,
|
|
@@ -50,10 +53,12 @@ const Picker = _ref => {
|
|
|
50
53
|
}
|
|
51
54
|
} = extractStyles(style);
|
|
52
55
|
const textField = React.useRef(undefined);
|
|
56
|
+
|
|
53
57
|
const onValueChange = (itemValue, itemIndex) => {
|
|
54
58
|
toggleFocus();
|
|
55
59
|
onValueChangeOverride(itemValue, itemIndex);
|
|
56
60
|
};
|
|
61
|
+
|
|
57
62
|
const toggleFocus = () => {
|
|
58
63
|
if (!disabled) {
|
|
59
64
|
// @ts-ignore
|
|
@@ -62,7 +67,7 @@ const Picker = _ref => {
|
|
|
62
67
|
};
|
|
63
68
|
|
|
64
69
|
const stylesWithoutMargin = style && omit(StyleSheet.flatten(style), ["margin", "marginTop", "marginRight", "marginBottom", "marginLeft"]);
|
|
65
|
-
const selectedLabel = selectedValue && (((_options$find = options.find(o => o.value === selectedValue)) === null || _options$find === void 0 ? void 0 : _options$find.label)
|
|
70
|
+
const selectedLabel = selectedValue && ((_options$find$label = (_options$find = options.find(o => o.value === selectedValue)) === null || _options$find === void 0 ? void 0 : _options$find.label) !== null && _options$find$label !== void 0 ? _options$find$label : selectedValue);
|
|
66
71
|
return /*#__PURE__*/React.createElement(Touchable, {
|
|
67
72
|
disabled: disabled,
|
|
68
73
|
onPress: toggleFocus,
|
|
@@ -89,17 +94,16 @@ const Picker = _ref => {
|
|
|
89
94
|
pointerEvents: "none"
|
|
90
95
|
}, /*#__PURE__*/React.createElement(TextField, _extends({}, props, {
|
|
91
96
|
value: selectedLabel,
|
|
92
|
-
placeholder: placeholder
|
|
93
|
-
// @ts-ignore
|
|
97
|
+
placeholder: placeholder // @ts-ignore
|
|
94
98
|
,
|
|
95
99
|
ref: textField // cannot determine if ref is of correct type due to component being wrapped in a withTheme()
|
|
96
100
|
,
|
|
97
|
-
disabled: disabled
|
|
98
|
-
// @ts-expect-error
|
|
101
|
+
disabled: disabled // @ts-expect-error
|
|
99
102
|
,
|
|
100
103
|
style: stylesWithoutMargin
|
|
101
104
|
})))));
|
|
102
105
|
};
|
|
106
|
+
|
|
103
107
|
const styles = StyleSheet.create({
|
|
104
108
|
container: {
|
|
105
109
|
alignSelf: "stretch"
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
function _defineProperty(obj, key, value) {
|
|
2
|
-
|
|
3
|
-
function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
1
|
+
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
2
|
+
|
|
4
3
|
import * as React from "react";
|
|
5
4
|
import PortalConsumer from "./PortalConsumer";
|
|
6
5
|
import PortalHost, { PortalContext } from "./PortalHost";
|
|
7
6
|
import { ThemeProvider, withTheme } from "../../theming";
|
|
7
|
+
|
|
8
8
|
/**
|
|
9
9
|
* Portal allows to render a component at a different place in the parent tree.
|
|
10
10
|
* You can use it to render content which should appear above other elements, similar to `Modal`.
|
|
@@ -28,7 +28,6 @@ import { ThemeProvider, withTheme } from "../../theming";
|
|
|
28
28
|
*/
|
|
29
29
|
class Portal extends React.Component {
|
|
30
30
|
// @component ./PortalHost.tsx
|
|
31
|
-
|
|
32
31
|
render() {
|
|
33
32
|
const {
|
|
34
33
|
children,
|
|
@@ -40,6 +39,9 @@ class Portal extends React.Component {
|
|
|
40
39
|
theme: theme
|
|
41
40
|
}, children)));
|
|
42
41
|
}
|
|
42
|
+
|
|
43
43
|
}
|
|
44
|
+
|
|
44
45
|
_defineProperty(Portal, "Host", PortalHost);
|
|
46
|
+
|
|
45
47
|
export default withTheme(Portal);
|
|
@@ -1,33 +1,38 @@
|
|
|
1
|
-
function _defineProperty(obj, key, value) {
|
|
2
|
-
|
|
3
|
-
function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
1
|
+
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
2
|
+
|
|
4
3
|
import * as React from "react";
|
|
5
4
|
export default class PortalConsumer extends React.Component {
|
|
6
5
|
constructor() {
|
|
7
6
|
super(...arguments);
|
|
7
|
+
|
|
8
8
|
_defineProperty(this, "key", void 0);
|
|
9
9
|
}
|
|
10
|
+
|
|
10
11
|
async componentDidMount() {
|
|
11
|
-
this.checkManager();
|
|
12
|
+
this.checkManager(); // Delay updating to prevent React from going to infinite loop
|
|
12
13
|
|
|
13
|
-
// Delay updating to prevent React from going to infinite loop
|
|
14
14
|
await Promise.resolve();
|
|
15
15
|
this.key = this.props.manager.mount(this.props.children);
|
|
16
16
|
}
|
|
17
|
+
|
|
17
18
|
componentDidUpdate() {
|
|
18
19
|
this.checkManager();
|
|
19
20
|
this.props.manager.update(this.key, this.props.children);
|
|
20
21
|
}
|
|
22
|
+
|
|
21
23
|
componentWillUnmount() {
|
|
22
24
|
this.checkManager();
|
|
23
25
|
this.props.manager.unmount(this.key);
|
|
24
26
|
}
|
|
27
|
+
|
|
25
28
|
checkManager() {
|
|
26
29
|
if (!this.props.manager) {
|
|
27
30
|
throw new Error("Looks like you forgot to wrap your root component with `Provider` component from `react-native-paper`.\n\n" + "Please read our getting-started guide and make sure you've followed all the required steps.\n\n" + "https://callstack.github.io/react-native-paper/getting-started.html");
|
|
28
31
|
}
|
|
29
32
|
}
|
|
33
|
+
|
|
30
34
|
render() {
|
|
31
35
|
return null;
|
|
32
36
|
}
|
|
37
|
+
|
|
33
38
|
}
|
|
@@ -1,11 +1,9 @@
|
|
|
1
|
-
function _defineProperty(obj, key, value) {
|
|
2
|
-
|
|
3
|
-
function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
1
|
+
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
2
|
+
|
|
4
3
|
import * as React from "react";
|
|
5
4
|
import { View, StyleSheet } from "react-native";
|
|
6
5
|
import PortalManager from "./PortalManager";
|
|
7
6
|
export const PortalContext = /*#__PURE__*/React.createContext(null);
|
|
8
|
-
|
|
9
7
|
/**
|
|
10
8
|
* Portal host renders all of its children `Portal` elements.
|
|
11
9
|
* For example, you can wrap a screen in `Portal.Host` to render items above the screen.
|
|
@@ -30,14 +28,18 @@ export const PortalContext = /*#__PURE__*/React.createContext(null);
|
|
|
30
28
|
*
|
|
31
29
|
* Here any `Portal` elements under `<App />` are rendered alongside `<App />` and will appear above `<App />` like a `Modal`.
|
|
32
30
|
*/
|
|
31
|
+
|
|
33
32
|
export default class PortalHost extends React.Component {
|
|
34
33
|
constructor() {
|
|
35
34
|
super(...arguments);
|
|
35
|
+
|
|
36
36
|
_defineProperty(this, "setManager", manager => {
|
|
37
37
|
this.manager = manager;
|
|
38
38
|
});
|
|
39
|
+
|
|
39
40
|
_defineProperty(this, "mount", children => {
|
|
40
41
|
const key = this.nextKey++;
|
|
42
|
+
|
|
41
43
|
if (this.manager) {
|
|
42
44
|
this.manager.mount(key, children);
|
|
43
45
|
} else {
|
|
@@ -47,8 +49,10 @@ export default class PortalHost extends React.Component {
|
|
|
47
49
|
children
|
|
48
50
|
});
|
|
49
51
|
}
|
|
52
|
+
|
|
50
53
|
return key;
|
|
51
54
|
});
|
|
55
|
+
|
|
52
56
|
_defineProperty(this, "update", (key, children) => {
|
|
53
57
|
if (this.manager) {
|
|
54
58
|
this.manager.update(key, children);
|
|
@@ -59,6 +63,7 @@ export default class PortalHost extends React.Component {
|
|
|
59
63
|
children
|
|
60
64
|
};
|
|
61
65
|
const index = this.queue.findIndex(o => o.type === "mount" || o.type === "update" && o.key === key);
|
|
66
|
+
|
|
62
67
|
if (index > -1) {
|
|
63
68
|
// @ts-ignore
|
|
64
69
|
this.queue[index] = op;
|
|
@@ -67,6 +72,7 @@ export default class PortalHost extends React.Component {
|
|
|
67
72
|
}
|
|
68
73
|
}
|
|
69
74
|
});
|
|
75
|
+
|
|
70
76
|
_defineProperty(this, "unmount", key => {
|
|
71
77
|
if (this.manager) {
|
|
72
78
|
this.manager.unmount(key);
|
|
@@ -77,23 +83,31 @@ export default class PortalHost extends React.Component {
|
|
|
77
83
|
});
|
|
78
84
|
}
|
|
79
85
|
});
|
|
86
|
+
|
|
80
87
|
_defineProperty(this, "nextKey", 0);
|
|
88
|
+
|
|
81
89
|
_defineProperty(this, "queue", []);
|
|
90
|
+
|
|
82
91
|
_defineProperty(this, "manager", void 0);
|
|
83
92
|
}
|
|
93
|
+
|
|
84
94
|
componentDidMount() {
|
|
85
95
|
const manager = this.manager;
|
|
86
96
|
const queue = this.queue;
|
|
97
|
+
|
|
87
98
|
while (queue.length && manager) {
|
|
88
99
|
const action = queue.pop();
|
|
100
|
+
|
|
89
101
|
if (action) {
|
|
90
102
|
switch (action.type) {
|
|
91
103
|
case "mount":
|
|
92
104
|
manager.mount(action.key, action.children);
|
|
93
105
|
break;
|
|
106
|
+
|
|
94
107
|
case "update":
|
|
95
108
|
manager.update(action.key, action.children);
|
|
96
109
|
break;
|
|
110
|
+
|
|
97
111
|
case "unmount":
|
|
98
112
|
manager.unmount(action.key);
|
|
99
113
|
break;
|
|
@@ -101,6 +115,7 @@ export default class PortalHost extends React.Component {
|
|
|
101
115
|
}
|
|
102
116
|
}
|
|
103
117
|
}
|
|
118
|
+
|
|
104
119
|
render() {
|
|
105
120
|
return /*#__PURE__*/React.createElement(PortalContext.Provider, {
|
|
106
121
|
value: {
|
|
@@ -116,8 +131,11 @@ export default class PortalHost extends React.Component {
|
|
|
116
131
|
ref: this.setManager
|
|
117
132
|
}));
|
|
118
133
|
}
|
|
134
|
+
|
|
119
135
|
}
|
|
136
|
+
|
|
120
137
|
_defineProperty(PortalHost, "displayName", "Portal.Host");
|
|
138
|
+
|
|
121
139
|
const styles = StyleSheet.create({
|
|
122
140
|
container: {
|
|
123
141
|
flex: 1
|
|
@@ -1,17 +1,19 @@
|
|
|
1
|
-
function _defineProperty(obj, key, value) {
|
|
2
|
-
|
|
3
|
-
function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
1
|
+
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
2
|
+
|
|
4
3
|
import * as React from "react";
|
|
5
4
|
import { View, StyleSheet } from "react-native";
|
|
5
|
+
|
|
6
6
|
/**
|
|
7
7
|
* Portal host is the component which actually renders all Portals.
|
|
8
8
|
*/
|
|
9
9
|
export default class PortalManager extends React.PureComponent {
|
|
10
10
|
constructor() {
|
|
11
11
|
super(...arguments);
|
|
12
|
+
|
|
12
13
|
_defineProperty(this, "state", {
|
|
13
14
|
portals: []
|
|
14
15
|
});
|
|
16
|
+
|
|
15
17
|
_defineProperty(this, "mount", (key, children) => {
|
|
16
18
|
this.setState(state => ({
|
|
17
19
|
portals: [...state.portals, {
|
|
@@ -20,21 +22,24 @@ export default class PortalManager extends React.PureComponent {
|
|
|
20
22
|
}]
|
|
21
23
|
}));
|
|
22
24
|
});
|
|
25
|
+
|
|
23
26
|
_defineProperty(this, "update", (key, children) => this.setState(state => ({
|
|
24
27
|
portals: state.portals.map(item => {
|
|
25
28
|
if (item.key === key) {
|
|
26
|
-
return {
|
|
27
|
-
...item,
|
|
29
|
+
return { ...item,
|
|
28
30
|
children
|
|
29
31
|
};
|
|
30
32
|
}
|
|
33
|
+
|
|
31
34
|
return item;
|
|
32
35
|
})
|
|
33
36
|
})));
|
|
37
|
+
|
|
34
38
|
_defineProperty(this, "unmount", key => this.setState(state => ({
|
|
35
39
|
portals: state.portals.filter(item => item.key !== key)
|
|
36
40
|
})));
|
|
37
41
|
}
|
|
42
|
+
|
|
38
43
|
render() {
|
|
39
44
|
return this.state.portals.map(_ref => {
|
|
40
45
|
let {
|
|
@@ -43,11 +48,13 @@ export default class PortalManager extends React.PureComponent {
|
|
|
43
48
|
} = _ref;
|
|
44
49
|
return /*#__PURE__*/React.createElement(View, {
|
|
45
50
|
key: key,
|
|
46
|
-
collapsable: false
|
|
47
|
-
|
|
51
|
+
collapsable: false
|
|
52
|
+
/* Need collapsable=false here to clip the elevations, otherwise they appear above sibling components */
|
|
53
|
+
,
|
|
48
54
|
pointerEvents: "box-none",
|
|
49
55
|
style: StyleSheet.absoluteFill
|
|
50
56
|
}, children);
|
|
51
57
|
});
|
|
52
58
|
}
|
|
59
|
+
|
|
53
60
|
}
|