@draftbit/core 46.6.0 → 46.6.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/commonjs/components/AvatarEdit.js +15 -4
- package/lib/commonjs/components/CardContainer.js +4 -13
- package/lib/commonjs/components/CardContainerShortImage.js +4 -15
- package/lib/commonjs/components/Carousel.js +30 -8
- package/lib/commonjs/components/Checkbox/Checkbox.js +4 -22
- package/lib/commonjs/components/Checkbox/CheckboxGroup.js +2 -17
- package/lib/commonjs/components/Checkbox/CheckboxGroupRow.js +23 -5
- package/lib/commonjs/components/DatePicker/DatePicker.js +26 -13
- package/lib/commonjs/components/Divider.js +14 -1
- package/lib/commonjs/components/Elevation.js +2 -14
- package/lib/commonjs/components/FieldSearchBarFull.js +2 -1
- package/lib/commonjs/components/IconButton.js +19 -4
- package/lib/commonjs/components/Image.js +2 -17
- package/lib/commonjs/components/Layout.js +19 -40
- package/lib/commonjs/components/Picker/Picker.js +4 -9
- package/lib/commonjs/components/Picker/PickerComponent.web.js +3 -20
- package/lib/commonjs/components/Portal/Portal.js +27 -3
- package/lib/commonjs/components/Portal/PortalConsumer.js +22 -7
- package/lib/commonjs/components/Pressable.js +2 -15
- package/lib/commonjs/components/ProgressBar.js +7 -37
- package/lib/commonjs/components/RadioButton/context.js +1 -1
- package/lib/commonjs/components/StarRating.js +23 -4
- package/lib/commonjs/components/StepIndicator.js +18 -57
- package/lib/commonjs/components/Switch.js +10 -19
- package/lib/commonjs/components/Touchable.js +2 -15
- package/lib/commonjs/constants.js +1 -1
- package/lib/commonjs/hooks.js +1 -2
- package/lib/commonjs/mappings/StarRating.js +6 -2
- package/lib/commonjs/styles/overlay.js +1 -3
- package/lib/commonjs/utilities.js +1 -2
- package/lib/module/components/AnimatedCircularProgress.js +13 -1
- package/lib/module/components/AspectRatio.js +18 -1
- package/lib/module/components/Banner.js +25 -4
- package/lib/module/components/CardBlock.js +14 -4
- package/lib/module/components/CardContainerRating.js +14 -4
- package/lib/module/components/CardContainerShortImage.js +18 -4
- package/lib/module/components/Carousel.js +8 -32
- package/lib/module/components/Checkbox/Checkbox.js +4 -25
- package/lib/module/components/Checkbox/CheckboxGroupRow.js +5 -24
- package/lib/module/components/CircularProgress.js +8 -28
- package/lib/module/components/Container.js +17 -4
- package/lib/module/components/DatePicker/DatePicker.js +13 -27
- package/lib/module/components/DeprecatedButton.js +3 -21
- package/lib/module/components/DeprecatedFAB.js +23 -3
- package/lib/module/components/FieldSearchBarFull.js +2 -1
- package/lib/module/components/FormRow.js +17 -2
- package/lib/module/components/Image.js +2 -18
- package/lib/module/components/Picker/Picker.js +4 -10
- package/lib/module/components/Picker/PickerComponent.ios.js +11 -36
- package/lib/module/components/Picker/PickerComponent.web.js +3 -21
- package/lib/module/components/Portal/Portal.js +28 -3
- package/lib/module/components/Portal/PortalHost.js +45 -15
- package/lib/module/components/Portal/PortalManager.js +33 -7
- package/lib/module/components/ProgressBar.js +39 -7
- package/lib/module/components/RadioButton/RadioButton.js +13 -1
- package/lib/module/components/RadioButton/RadioButtonGroup.js +16 -2
- package/lib/module/components/RadioButton/context.js +1 -1
- package/lib/module/components/ScreenContainer.js +4 -21
- package/lib/module/components/Slider.js +21 -4
- package/lib/module/components/StepIndicator.js +58 -18
- package/lib/module/components/Surface.js +15 -1
- package/lib/module/components/Text.js +4 -50
- package/lib/module/mappings/StarRating.js +2 -7
- package/package.json +3 -3
- package/src/Provider.js +0 -9
- package/src/components/Accordion/AccordionGroup.js +0 -44
- package/src/components/Accordion/AccordionItem.js +0 -32
- package/src/components/Accordion/index.js +0 -2
- package/src/components/ActionSheet/ActionSheet.js +0 -45
- package/src/components/ActionSheet/ActionSheetCancel.js +0 -6
- package/src/components/ActionSheet/ActionSheetItem.js +0 -30
- package/src/components/ActionSheet/index.js +0 -3
- package/src/components/AnimatedCircularProgress.js +0 -43
- package/src/components/AspectRatio.js +0 -18
- package/src/components/AvatarEdit.js +0 -30
- package/src/components/Banner.js +0 -109
- package/src/components/Button.js +0 -114
- package/src/components/Card.js +0 -57
- package/src/components/CardBlock.js +0 -54
- package/src/components/CardContainer.js +0 -69
- package/src/components/CardContainerRating.js +0 -79
- package/src/components/CardContainerShortImage.js +0 -33
- package/src/components/CardInline.js +0 -36
- package/src/components/Carousel.js +0 -68
- package/src/components/Checkbox/Checkbox.js +0 -62
- package/src/components/Checkbox/CheckboxGroup.js +0 -21
- package/src/components/Checkbox/CheckboxGroupRow.js +0 -76
- package/src/components/Checkbox/CheckboxRow.js +0 -77
- package/src/components/Checkbox/context.js +0 -14
- package/src/components/Checkbox/index.js +0 -3
- package/src/components/CircleImage.js +0 -8
- package/src/components/CircularProgress.js +0 -81
- package/src/components/Config.js +0 -64
- package/src/components/Container.js +0 -43
- package/src/components/DatePicker/DatePicker.js +0 -377
- package/src/components/DatePicker/DatePickerComponent.js +0 -13
- package/src/components/DatePicker/DatePickerComponent.web.js +0 -30
- package/src/components/DatePicker/DatePickerComponentType.js +0 -1
- package/src/components/DeprecatedButton.js +0 -83
- package/src/components/DeprecatedCardWrapper.js +0 -18
- package/src/components/DeprecatedFAB.js +0 -114
- package/src/components/Divider.js +0 -13
- package/src/components/Elevation.js +0 -20
- package/src/components/FAB.js +0 -46
- package/src/components/FieldSearchBarFull.js +0 -53
- package/src/components/FormRow.js +0 -19
- package/src/components/Header.js +0 -44
- package/src/components/HeaderLarge.js +0 -7
- package/src/components/HeaderMedium.js +0 -7
- package/src/components/HeaderOverline.js +0 -7
- package/src/components/IconButton.js +0 -35
- package/src/components/Image.js +0 -47
- package/src/components/Justification.js +0 -1
- package/src/components/Layout.js +0 -50
- package/src/components/NumberInput.js +0 -49
- package/src/components/Picker/Picker.js +0 -267
- package/src/components/Picker/PickerComponent.android.js +0 -69
- package/src/components/Picker/PickerComponent.ios.js +0 -79
- package/src/components/Picker/PickerComponent.web.js +0 -70
- package/src/components/Picker/PickerTypes.js +0 -1
- package/src/components/Portal/Portal.js +0 -35
- package/src/components/Portal/PortalConsumer.js +0 -27
- package/src/components/Portal/PortalHost.js +0 -107
- package/src/components/Portal/PortalManager.js +0 -32
- package/src/components/Pressable.js +0 -12
- package/src/components/ProgressBar.js +0 -118
- package/src/components/ProgressCircle.js +0 -13
- package/src/components/ProgressIndicator.js +0 -27
- package/src/components/RadioButton/RadioButton.js +0 -17
- package/src/components/RadioButton/RadioButtonFieldGroup.js +0 -17
- package/src/components/RadioButton/RadioButtonGroup.js +0 -43
- package/src/components/RadioButton/RadioButtonRow.js +0 -76
- package/src/components/RadioButton/context.js +0 -14
- package/src/components/RadioButton/index.js +0 -4
- package/src/components/ResizeMode.js +0 -1
- package/src/components/Row.js +0 -48
- package/src/components/RowBodyIcon.js +0 -8
- package/src/components/RowHeadlineImageCaption.js +0 -12
- package/src/components/RowHeadlineImageIcon.js +0 -14
- package/src/components/SVG.js +0 -13
- package/src/components/ScreenContainer.js +0 -34
- package/src/components/Slider.js +0 -63
- package/src/components/StarRating.js +0 -50
- package/src/components/StepIndicator.js +0 -346
- package/src/components/Stepper.js +0 -41
- package/src/components/Surface.js +0 -32
- package/src/components/Swiper/Swiper.js +0 -29
- package/src/components/Swiper/SwiperItem.js +0 -9
- package/src/components/Swiper/index.js +0 -2
- package/src/components/Switch.js +0 -56
- package/src/components/Text.js +0 -33
- package/src/components/TextField.js +0 -428
- package/src/components/ToggleButton.js +0 -39
- package/src/components/Touchable.js +0 -12
- package/src/components/Touchable.web.js +0 -2
- package/src/components/Typography.js +0 -36
- package/src/components/useAuthState.js +0 -31
- package/src/constants.js +0 -10
- package/src/hooks.js +0 -12
- package/src/index.js +0 -53
- package/src/interfaces/Icon.js +0 -8
- package/src/mappings/Accordion.js +0 -41
- package/src/mappings/AccordionItem.js +0 -16
- package/src/mappings/ActionSheet.js +0 -13
- package/src/mappings/ActionSheetCancel.js +0 -19
- package/src/mappings/ActionSheetItem.js +0 -23
- package/src/mappings/ActivityIndicator.js +0 -58
- package/src/mappings/AudioPlayer.js +0 -57
- package/src/mappings/AvatarEdit.js +0 -38
- package/src/mappings/Banner.js +0 -32
- package/src/mappings/BlurView.js +0 -42
- package/src/mappings/Button.js +0 -116
- package/src/mappings/Card.js +0 -52
- package/src/mappings/CardBlock.js +0 -123
- package/src/mappings/CardContainer.js +0 -104
- package/src/mappings/CardContainerRating.js +0 -126
- package/src/mappings/CardContainerShortImage.js +0 -120
- package/src/mappings/CardInline.js +0 -52
- package/src/mappings/Carousel.js +0 -19
- package/src/mappings/Checkbox.js +0 -46
- package/src/mappings/CheckboxGroup.js +0 -26
- package/src/mappings/CheckboxRow.js +0 -61
- package/src/mappings/CircleImage.js +0 -25
- package/src/mappings/Container.js +0 -30
- package/src/mappings/CustomCode.js +0 -8
- package/src/mappings/DatePicker.js +0 -176
- package/src/mappings/Divider.js +0 -27
- package/src/mappings/FAB.js +0 -37
- package/src/mappings/Fetch.js +0 -13
- package/src/mappings/FieldSearchBarFull.js +0 -50
- package/src/mappings/FlashList.js +0 -79
- package/src/mappings/FlatList.js +0 -36
- package/src/mappings/HeaderLarge.js +0 -29
- package/src/mappings/HeaderMedium.js +0 -55
- package/src/mappings/HeaderOverline.js +0 -55
- package/src/mappings/Icon.js +0 -32
- package/src/mappings/IconButton.js +0 -35
- package/src/mappings/Image.js +0 -35
- package/src/mappings/ImageBackground.js +0 -29
- package/src/mappings/KeyboardAvoidingView.js +0 -41
- package/src/mappings/KeyboardAwareScrollView.js +0 -50
- package/src/mappings/Layout.js +0 -200
- package/src/mappings/LinearGradient.js +0 -77
- package/src/mappings/MapCallout.js +0 -21
- package/src/mappings/MapMarker.js +0 -47
- package/src/mappings/MapView.js +0 -139
- package/src/mappings/Modal.js +0 -42
- package/src/mappings/NumberInput.js +0 -254
- package/src/mappings/Picker.js +0 -148
- package/src/mappings/ProgressBar.js +0 -101
- package/src/mappings/ProgressCircle.js +0 -109
- package/src/mappings/ProgressIndicator.js +0 -181
- package/src/mappings/RadioButton.js +0 -51
- package/src/mappings/RadioButtonGroup.js +0 -17
- package/src/mappings/RadioButtonRow.js +0 -42
- package/src/mappings/RowBodyIcon.js +0 -75
- package/src/mappings/RowHeadlineImageCaption.js +0 -167
- package/src/mappings/RowHeadlineImageIcon.js +0 -99
- package/src/mappings/SVG.js +0 -20
- package/src/mappings/SafeAreaView.js +0 -33
- package/src/mappings/ScrollView.js +0 -31
- package/src/mappings/Slider.js +0 -60
- package/src/mappings/StarRating.js +0 -43
- package/src/mappings/Stepper.js +0 -32
- package/src/mappings/Surface.js +0 -14
- package/src/mappings/Swiper.js +0 -62
- package/src/mappings/SwiperItem.js +0 -8
- package/src/mappings/Switch.js +0 -81
- package/src/mappings/Text.js +0 -251
- package/src/mappings/TextArea.js +0 -274
- package/src/mappings/TextField.js +0 -391
- package/src/mappings/TextInput.js +0 -402
- package/src/mappings/ToggleButton.js +0 -50
- package/src/mappings/Touchable.js +0 -60
- package/src/mappings/Video.js +0 -81
- package/src/mappings/View.js +0 -207
- package/src/mappings/WebView.js +0 -88
- package/src/styles/DarkTheme.js +0 -26
- package/src/styles/DefaultTheme.js +0 -111
- package/src/styles/fonts.js +0 -62
- package/src/styles/overlay.js +0 -60
- package/src/styles/shadow.js +0 -51
- package/src/theming.js +0 -3
- package/src/utilities.js +0 -102
|
@@ -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
|
-
}
|
|
@@ -1,107 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { View, StyleSheet } from "react-native";
|
|
3
|
-
import PortalManager from "./PortalManager";
|
|
4
|
-
export const PortalContext = React.createContext(null);
|
|
5
|
-
/**
|
|
6
|
-
* Portal host renders all of its children `Portal` elements.
|
|
7
|
-
* For example, you can wrap a screen in `Portal.Host` to render items above the screen.
|
|
8
|
-
* If you're using the `Provider` component, it already includes `Portal.Host`.
|
|
9
|
-
*
|
|
10
|
-
* ## Usage
|
|
11
|
-
* ```js
|
|
12
|
-
* import * as React from 'react';
|
|
13
|
-
* import { Text } from 'react-native';
|
|
14
|
-
* import { Portal } from 'react-native-paper';
|
|
15
|
-
*
|
|
16
|
-
* export default class MyComponent extends React.Component {
|
|
17
|
-
* render() {
|
|
18
|
-
* return (
|
|
19
|
-
* <Portal.Host>
|
|
20
|
-
* <Text>Content of the app</Text>
|
|
21
|
-
* </Portal.Host>
|
|
22
|
-
* );
|
|
23
|
-
* }
|
|
24
|
-
* }
|
|
25
|
-
* ```
|
|
26
|
-
*
|
|
27
|
-
* Here any `Portal` elements under `<App />` are rendered alongside `<App />` and will appear above `<App />` like a `Modal`.
|
|
28
|
-
*/
|
|
29
|
-
export default class PortalHost extends React.Component {
|
|
30
|
-
constructor() {
|
|
31
|
-
super(...arguments);
|
|
32
|
-
this.setManager = (manager) => {
|
|
33
|
-
this.manager = manager;
|
|
34
|
-
};
|
|
35
|
-
this.mount = (children) => {
|
|
36
|
-
const key = this.nextKey++;
|
|
37
|
-
if (this.manager) {
|
|
38
|
-
this.manager.mount(key, children);
|
|
39
|
-
}
|
|
40
|
-
else {
|
|
41
|
-
this.queue.push({ type: "mount", key, children });
|
|
42
|
-
}
|
|
43
|
-
return key;
|
|
44
|
-
};
|
|
45
|
-
this.update = (key, children) => {
|
|
46
|
-
if (this.manager) {
|
|
47
|
-
this.manager.update(key, children);
|
|
48
|
-
}
|
|
49
|
-
else {
|
|
50
|
-
const op = { type: "mount", key, children };
|
|
51
|
-
const index = this.queue.findIndex((o) => o.type === "mount" || (o.type === "update" && o.key === key));
|
|
52
|
-
if (index > -1) {
|
|
53
|
-
// @ts-ignore
|
|
54
|
-
this.queue[index] = op;
|
|
55
|
-
}
|
|
56
|
-
else {
|
|
57
|
-
this.queue.push(op);
|
|
58
|
-
}
|
|
59
|
-
}
|
|
60
|
-
};
|
|
61
|
-
this.unmount = (key) => {
|
|
62
|
-
if (this.manager) {
|
|
63
|
-
this.manager.unmount(key);
|
|
64
|
-
}
|
|
65
|
-
else {
|
|
66
|
-
this.queue.push({ type: "unmount", key });
|
|
67
|
-
}
|
|
68
|
-
};
|
|
69
|
-
this.nextKey = 0;
|
|
70
|
-
this.queue = [];
|
|
71
|
-
}
|
|
72
|
-
componentDidMount() {
|
|
73
|
-
const manager = this.manager;
|
|
74
|
-
const queue = this.queue;
|
|
75
|
-
while (queue.length && manager) {
|
|
76
|
-
const action = queue.pop();
|
|
77
|
-
if (action) {
|
|
78
|
-
switch (action.type) {
|
|
79
|
-
case "mount":
|
|
80
|
-
manager.mount(action.key, action.children);
|
|
81
|
-
break;
|
|
82
|
-
case "update":
|
|
83
|
-
manager.update(action.key, action.children);
|
|
84
|
-
break;
|
|
85
|
-
case "unmount":
|
|
86
|
-
manager.unmount(action.key);
|
|
87
|
-
break;
|
|
88
|
-
}
|
|
89
|
-
}
|
|
90
|
-
}
|
|
91
|
-
}
|
|
92
|
-
render() {
|
|
93
|
-
return (React.createElement(PortalContext.Provider, { value: {
|
|
94
|
-
mount: this.mount,
|
|
95
|
-
update: this.update,
|
|
96
|
-
unmount: this.unmount,
|
|
97
|
-
} },
|
|
98
|
-
React.createElement(View, { style: styles.container, collapsable: false, pointerEvents: "box-none" }, this.props.children),
|
|
99
|
-
React.createElement(PortalManager, { ref: this.setManager })));
|
|
100
|
-
}
|
|
101
|
-
}
|
|
102
|
-
PortalHost.displayName = "Portal.Host";
|
|
103
|
-
const styles = StyleSheet.create({
|
|
104
|
-
container: {
|
|
105
|
-
flex: 1,
|
|
106
|
-
},
|
|
107
|
-
});
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { View, StyleSheet } from "react-native";
|
|
3
|
-
/**
|
|
4
|
-
* Portal host is the component which actually renders all Portals.
|
|
5
|
-
*/
|
|
6
|
-
export default class PortalManager extends React.PureComponent {
|
|
7
|
-
constructor() {
|
|
8
|
-
super(...arguments);
|
|
9
|
-
this.state = {
|
|
10
|
-
portals: [],
|
|
11
|
-
};
|
|
12
|
-
this.mount = (key, children) => {
|
|
13
|
-
this.setState((state) => ({
|
|
14
|
-
portals: [...state.portals, { key, children }],
|
|
15
|
-
}));
|
|
16
|
-
};
|
|
17
|
-
this.update = (key, children) => this.setState((state) => ({
|
|
18
|
-
portals: state.portals.map((item) => {
|
|
19
|
-
if (item.key === key) {
|
|
20
|
-
return { ...item, children };
|
|
21
|
-
}
|
|
22
|
-
return item;
|
|
23
|
-
}),
|
|
24
|
-
}));
|
|
25
|
-
this.unmount = (key) => this.setState((state) => ({
|
|
26
|
-
portals: state.portals.filter((item) => item.key !== key),
|
|
27
|
-
}));
|
|
28
|
-
}
|
|
29
|
-
render() {
|
|
30
|
-
return this.state.portals.map(({ key, children }) => (React.createElement(View, { key: key, collapsable: false /* Need collapsable=false here to clip the elevations, otherwise they appear above sibling components */, pointerEvents: "box-none", style: StyleSheet.absoluteFill }, children)));
|
|
31
|
-
}
|
|
32
|
-
}
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { Pressable as NativePressable, } from "react-native";
|
|
3
|
-
export default function Pressable({ children, disabled, onPress, activeOpacity, disabledOpacity, delayLongPress, hitSlop, style, ...props }) {
|
|
4
|
-
return (React.createElement(NativePressable, { onPress: onPress, disabled: disabled, delayLongPress: delayLongPress ? delayLongPress : 500, hitSlop: hitSlop ? hitSlop : 8, style: ({ pressed }) => {
|
|
5
|
-
return [
|
|
6
|
-
{
|
|
7
|
-
opacity: pressed ? activeOpacity : disabled ? disabledOpacity : 1,
|
|
8
|
-
},
|
|
9
|
-
style,
|
|
10
|
-
];
|
|
11
|
-
}, ...props }, children));
|
|
12
|
-
}
|
|
@@ -1,118 +0,0 @@
|
|
|
1
|
-
import React, { Component } from "react";
|
|
2
|
-
import { Animated, Easing, View, I18nManager, } from "react-native";
|
|
3
|
-
const INDETERMINATE_WIDTH_FACTOR = 0.3;
|
|
4
|
-
const BAR_WIDTH_ZERO_POSITION = INDETERMINATE_WIDTH_FACTOR / (1 + INDETERMINATE_WIDTH_FACTOR);
|
|
5
|
-
export default class ProgressBar extends Component {
|
|
6
|
-
constructor(props) {
|
|
7
|
-
super(props);
|
|
8
|
-
this.handleLayout = (event) => {
|
|
9
|
-
const { width = 150, onLayout } = this.props;
|
|
10
|
-
if (!width) {
|
|
11
|
-
this.setState({ width: event.nativeEvent.layout.width });
|
|
12
|
-
}
|
|
13
|
-
if (onLayout) {
|
|
14
|
-
onLayout(event);
|
|
15
|
-
}
|
|
16
|
-
};
|
|
17
|
-
const { progress: progressP = 0, indeterminate = false } = props;
|
|
18
|
-
const progress = Math.min(Math.max(progressP, 0), 1);
|
|
19
|
-
this.state = {
|
|
20
|
-
width: 0,
|
|
21
|
-
progress: new Animated.Value(indeterminate ? INDETERMINATE_WIDTH_FACTOR : progress),
|
|
22
|
-
animationValue: new Animated.Value(BAR_WIDTH_ZERO_POSITION),
|
|
23
|
-
};
|
|
24
|
-
}
|
|
25
|
-
componentDidMount() {
|
|
26
|
-
const { indeterminate = false } = this.props;
|
|
27
|
-
if (indeterminate) {
|
|
28
|
-
this.animate();
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
componentDidUpdate(prevProps) {
|
|
32
|
-
const { indeterminate = false, useNativeDriver = false, progress: progressP = 0, animationType = "spring", animationConfig = { bounciness: 0 }, animated = true, } = this.props;
|
|
33
|
-
if (prevProps.indeterminate !== indeterminate) {
|
|
34
|
-
if (indeterminate) {
|
|
35
|
-
this.animate();
|
|
36
|
-
}
|
|
37
|
-
else {
|
|
38
|
-
Animated.spring(this.state.animationValue, {
|
|
39
|
-
toValue: BAR_WIDTH_ZERO_POSITION,
|
|
40
|
-
useNativeDriver,
|
|
41
|
-
}).start();
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
if (prevProps.indeterminate !== indeterminate ||
|
|
45
|
-
prevProps.progress !== progressP) {
|
|
46
|
-
const progress = this.props.indeterminate
|
|
47
|
-
? INDETERMINATE_WIDTH_FACTOR
|
|
48
|
-
: Math.min(Math.max(progressP, 0), 1);
|
|
49
|
-
if (animated) {
|
|
50
|
-
Animated[animationType](this.state.progress, {
|
|
51
|
-
...animationConfig,
|
|
52
|
-
toValue: progress,
|
|
53
|
-
velocity: 0,
|
|
54
|
-
useNativeDriver,
|
|
55
|
-
}).start();
|
|
56
|
-
}
|
|
57
|
-
else {
|
|
58
|
-
this.state.progress.setValue(progress);
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
|
-
animate() {
|
|
63
|
-
const { useNativeDriver = false, indeterminateAnimationDuration = 1000 } = this.props;
|
|
64
|
-
this.state.animationValue.setValue(0);
|
|
65
|
-
Animated.timing(this.state.animationValue, {
|
|
66
|
-
toValue: 1,
|
|
67
|
-
duration: indeterminateAnimationDuration,
|
|
68
|
-
easing: Easing.linear,
|
|
69
|
-
isInteraction: false,
|
|
70
|
-
useNativeDriver,
|
|
71
|
-
}).start((endState) => {
|
|
72
|
-
if (endState.finished) {
|
|
73
|
-
this.animate();
|
|
74
|
-
}
|
|
75
|
-
});
|
|
76
|
-
}
|
|
77
|
-
render() {
|
|
78
|
-
const { borderColor, borderRadius = 4, borderWidth = 1, children, color = "rgba(0, 122, 255, 1)", style, unfilledColor, width = 150, ...restProps } = this.props;
|
|
79
|
-
const innerWidth = Math.max(0, width || this.state.width) - borderWidth * 2;
|
|
80
|
-
const containerStyle = {
|
|
81
|
-
width,
|
|
82
|
-
borderWidth,
|
|
83
|
-
borderColor: borderColor || color,
|
|
84
|
-
borderRadius,
|
|
85
|
-
overflow: "hidden",
|
|
86
|
-
backgroundColor: unfilledColor,
|
|
87
|
-
};
|
|
88
|
-
const progressStyle = {
|
|
89
|
-
backgroundColor: color,
|
|
90
|
-
// Always take up full height of container.
|
|
91
|
-
height: "100%",
|
|
92
|
-
transform: [
|
|
93
|
-
{
|
|
94
|
-
translateX: this.state.animationValue.interpolate({
|
|
95
|
-
inputRange: [0, 1],
|
|
96
|
-
outputRange: [innerWidth * -INDETERMINATE_WIDTH_FACTOR, innerWidth],
|
|
97
|
-
}),
|
|
98
|
-
},
|
|
99
|
-
{
|
|
100
|
-
translateX: this.state.progress.interpolate({
|
|
101
|
-
inputRange: [0, 1],
|
|
102
|
-
outputRange: [innerWidth / (I18nManager.isRTL ? 2 : -2), 0],
|
|
103
|
-
}),
|
|
104
|
-
},
|
|
105
|
-
{
|
|
106
|
-
// Interpolation a temp workaround for https://github.com/facebook/react-native/issues/6278
|
|
107
|
-
scaleX: this.state.progress.interpolate({
|
|
108
|
-
inputRange: [0, 1],
|
|
109
|
-
outputRange: [0.0001, 1],
|
|
110
|
-
}),
|
|
111
|
-
},
|
|
112
|
-
],
|
|
113
|
-
};
|
|
114
|
-
return (React.createElement(View, { style: [containerStyle, style], onLayout: this.handleLayout, ...restProps },
|
|
115
|
-
React.createElement(Animated.View, { style: progressStyle }),
|
|
116
|
-
children));
|
|
117
|
-
}
|
|
118
|
-
}
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { Text } from "react-native";
|
|
3
|
-
import AnimatedCircularProgress from "./AnimatedCircularProgress";
|
|
4
|
-
import { withTheme } from "../theming";
|
|
5
|
-
const ProgressCircle = ({ progress = 0.5, style, color = "primary", size = 100, showsText = true, unfilledColor, strokeCap = "butt", textStyle, thickness = 1, theme, }) => {
|
|
6
|
-
const progressNum = Math.round(progress * 100);
|
|
7
|
-
const tintColor = color || theme.colors.primary;
|
|
8
|
-
const backgroundColor = unfilledColor || theme.colors.secondary;
|
|
9
|
-
return (React.createElement(AnimatedCircularProgress, { size: size, width: thickness, backgroundWidth: thickness, fill: progressNum, tintColor: tintColor, backgroundColor: backgroundColor, rotation: 0, lineCap: strokeCap, style: style }, (fill) => showsText ? (React.createElement(Text, { style: [{ fontSize: size * 0.275, color: tintColor }, textStyle] },
|
|
10
|
-
Math.round(fill),
|
|
11
|
-
"%")) : null));
|
|
12
|
-
};
|
|
13
|
-
export default withTheme(ProgressCircle);
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import StepIndicator from "./StepIndicator";
|
|
3
|
-
import { withTheme } from "../theming";
|
|
4
|
-
const ProgressIndicator = ({ numberOfSteps, currentStep, currentStepStrokeWidth = 3, stepStrokeCurrentColor = "primary", stepIndicatorSize, currentStepIndicatorSize, stepIndicatorCurrentColor, stepIndicatorLabelCurrentColor, stepIndicatorLabelFontSize = 12, stepNumberFinishedColor = "strongInverse", stepNumberUnfinishedColor = "primary", unfinishedColor = "light", finishedColor = "primary", theme, }) => {
|
|
5
|
-
const currentPosition = currentStep - 1;
|
|
6
|
-
return (React.createElement(StepIndicator, { stepCount: numberOfSteps, currentPosition: currentPosition, customStyles: {
|
|
7
|
-
stepIndicatorSize,
|
|
8
|
-
currentStepIndicatorSize: currentStepIndicatorSize
|
|
9
|
-
? currentStepIndicatorSize
|
|
10
|
-
: stepIndicatorSize,
|
|
11
|
-
stepStrokeFinishedColor: finishedColor,
|
|
12
|
-
stepStrokeUnFinishedColor: unfinishedColor,
|
|
13
|
-
separatorFinishedColor: finishedColor,
|
|
14
|
-
separatorUnFinishedColor: unfinishedColor,
|
|
15
|
-
stepIndicatorFinishedColor: finishedColor,
|
|
16
|
-
stepIndicatorUnFinishedColor: unfinishedColor,
|
|
17
|
-
currentStepStrokeWidth,
|
|
18
|
-
stepStrokeCurrentColor: stepStrokeCurrentColor || stepIndicatorCurrentColor,
|
|
19
|
-
stepIndicatorLabelUnFinishedColor: stepNumberUnfinishedColor,
|
|
20
|
-
stepIndicatorLabelFinishedColor: stepNumberFinishedColor,
|
|
21
|
-
stepIndicatorCurrentColor: stepIndicatorCurrentColor || unfinishedColor,
|
|
22
|
-
stepIndicatorLabelCurrentColor: stepIndicatorLabelCurrentColor || stepNumberUnfinishedColor,
|
|
23
|
-
stepIndicatorLabelFontSize,
|
|
24
|
-
labelFontFamily: theme.typography.body1.fontFamily,
|
|
25
|
-
} }));
|
|
26
|
-
};
|
|
27
|
-
export default withTheme(ProgressIndicator);
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import Config from "../Config";
|
|
3
|
-
import IconButton from "../IconButton";
|
|
4
|
-
import { getValueForRadioButton } from "../../utilities";
|
|
5
|
-
import { useRadioButtonGroupContext } from "./context";
|
|
6
|
-
const RadioButton = ({ Icon, disabled = false, color, value = "", selected, unselectedColor, onPress, size = Config.radioButtonSize, selectedIcon = "MaterialIcons/radio-button-checked", unselectedIcon = "MaterialIcons/radio-button-unchecked", style, ...rest }) => {
|
|
7
|
-
const { value: contextValue, onValueChange } = useRadioButtonGroupContext();
|
|
8
|
-
const realValue = getValueForRadioButton(value);
|
|
9
|
-
const realContextValue = getValueForRadioButton(contextValue);
|
|
10
|
-
const isSelected = selected !== null && selected !== void 0 ? selected : realContextValue === realValue;
|
|
11
|
-
const handlePress = () => {
|
|
12
|
-
onPress === null || onPress === void 0 ? void 0 : onPress(realValue);
|
|
13
|
-
onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(realValue);
|
|
14
|
-
};
|
|
15
|
-
return (React.createElement(IconButton, { Icon: Icon, icon: isSelected ? selectedIcon : unselectedIcon, color: isSelected ? color : unselectedColor, disabled: disabled, onPress: handlePress, size: size, style: style, ...rest }));
|
|
16
|
-
};
|
|
17
|
-
export default RadioButton;
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { View } from "react-native";
|
|
3
|
-
import Text from "../Text";
|
|
4
|
-
import { withTheme } from "../../theming";
|
|
5
|
-
import RadioButtonGroup from "./RadioButtonGroup";
|
|
6
|
-
const RadioButtonFieldGroup = ({ label, children, theme, labelStyle, style, ...rest }) => {
|
|
7
|
-
return (React.createElement(View, { style: style },
|
|
8
|
-
React.createElement(Text, { style: [
|
|
9
|
-
{
|
|
10
|
-
fontSize: theme.typography.headline4.fontSize,
|
|
11
|
-
color: theme.typography.headline4.color,
|
|
12
|
-
},
|
|
13
|
-
labelStyle,
|
|
14
|
-
] }, label),
|
|
15
|
-
React.createElement(RadioButtonGroup, { theme: theme, ...rest }, children)));
|
|
16
|
-
};
|
|
17
|
-
export default withTheme(RadioButtonFieldGroup);
|