@draftbit/core 47.0.1-e04fa3.2 → 47.1.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/Button.js +3 -3
- package/lib/commonjs/components/Checkbox/Checkbox.js +1 -3
- package/lib/commonjs/components/Checkbox/CheckboxGroupRow.js +1 -2
- package/lib/commonjs/components/Checkbox/CheckboxRow.js +1 -2
- package/lib/commonjs/components/DeprecatedButton.js +3 -27
- package/lib/commonjs/components/DeprecatedFAB.js +1 -2
- package/lib/commonjs/components/Justification.js +1 -5
- package/lib/commonjs/components/Pressable.js +37 -0
- package/lib/commonjs/components/ResizeMode.js +1 -5
- package/lib/commonjs/components/Swiper/Swiper.js +2 -0
- package/lib/commonjs/components/Touchable.js +8 -3
- package/lib/commonjs/index.js +89 -25
- package/lib/commonjs/mappings/Button.js +39 -10
- package/lib/commonjs/mappings/FlashList.js +45 -2
- package/lib/commonjs/mappings/FlatList.js +12 -0
- package/lib/commonjs/mappings/Swiper.js +2 -0
- package/lib/commonjs/mappings/Touchable.js +47 -7
- package/lib/module/components/Button.js +3 -3
- package/lib/module/components/Checkbox/Checkbox.js +2 -3
- package/lib/module/components/Checkbox/CheckboxGroupRow.js +2 -3
- package/lib/module/components/Checkbox/CheckboxRow.js +2 -3
- package/lib/module/components/DeprecatedButton.js +4 -28
- package/lib/module/components/DeprecatedFAB.js +2 -3
- package/lib/module/components/Justification.js +0 -1
- package/lib/module/components/Pressable.js +30 -0
- package/lib/module/components/ResizeMode.js +0 -1
- package/lib/module/components/Swiper/Swiper.js +2 -0
- package/lib/module/components/Touchable.js +8 -3
- package/lib/module/index.js +32 -121
- package/lib/module/mappings/Button.js +40 -11
- package/lib/module/mappings/FlashList.js +46 -3
- package/lib/module/mappings/FlatList.js +13 -1
- package/lib/module/mappings/Swiper.js +3 -1
- package/lib/module/mappings/Touchable.js +49 -9
- package/lib/typescript/src/components/Button.d.ts.map +1 -1
- package/lib/typescript/src/components/Checkbox/Checkbox.d.ts +2 -2
- package/lib/typescript/src/components/Checkbox/Checkbox.d.ts.map +1 -1
- package/lib/typescript/src/components/Checkbox/CheckboxGroupRow.d.ts.map +1 -1
- package/lib/typescript/src/components/Checkbox/CheckboxRow.d.ts.map +1 -1
- package/lib/typescript/src/components/DeprecatedButton.d.ts +2 -2
- package/lib/typescript/src/components/DeprecatedButton.d.ts.map +1 -1
- package/lib/typescript/src/components/DeprecatedFAB.d.ts +2 -2
- package/lib/typescript/src/components/DeprecatedFAB.d.ts.map +1 -1
- package/lib/typescript/src/components/Pressable.d.ts +10 -0
- package/lib/typescript/src/components/Pressable.d.ts.map +1 -0
- package/lib/typescript/src/components/Swiper/Swiper.d.ts +2 -1
- package/lib/typescript/src/components/Swiper/Swiper.d.ts.map +1 -1
- package/lib/typescript/src/components/Touchable.d.ts +5 -6
- package/lib/typescript/src/components/Touchable.d.ts.map +1 -1
- package/lib/typescript/src/index.d.ts +30 -102
- package/lib/typescript/src/index.d.ts.map +1 -1
- package/lib/typescript/src/mappings/Button.d.ts +113 -4
- package/lib/typescript/src/mappings/Button.d.ts.map +1 -1
- package/lib/typescript/src/mappings/FlashList.d.ts +112 -2
- package/lib/typescript/src/mappings/FlashList.d.ts.map +1 -1
- package/lib/typescript/src/mappings/FlatList.d.ts +42 -0
- package/lib/typescript/src/mappings/FlatList.d.ts.map +1 -1
- package/lib/typescript/src/mappings/Swiper.d.ts +11 -0
- package/lib/typescript/src/mappings/Swiper.d.ts.map +1 -1
- package/lib/typescript/src/mappings/Touchable.d.ts +59 -5
- package/lib/typescript/src/mappings/Touchable.d.ts.map +1 -1
- package/package.json +3 -3
- package/src/components/Button.tsx +14 -4
- package/src/components/Checkbox/Checkbox.tsx +5 -7
- package/src/components/Checkbox/CheckboxGroupRow.tsx +3 -3
- package/src/components/Checkbox/CheckboxRow.tsx +3 -3
- package/src/components/DeprecatedButton.tsx +7 -31
- package/src/components/DeprecatedFAB.tsx +5 -5
- package/src/components/Pressable.tsx +44 -0
- package/src/components/Swiper/Swiper.tsx +3 -0
- package/src/components/Touchable.tsx +11 -7
- package/src/index.tsx +44 -123
- package/src/mappings/Button.ts +41 -10
- package/src/mappings/FlashList.ts +82 -30
- package/src/mappings/FlatList.ts +16 -0
- package/src/mappings/Swiper.ts +4 -0
- package/src/mappings/Touchable.ts +53 -6
- package/lib/commonjs/mappings/NativeBase/AlertDialog.js +0 -102
- package/lib/commonjs/mappings/NativeBase/Button.js +0 -84
- package/lib/commonjs/mappings/NativeBase/DataDisplay.js +0 -61
- package/lib/commonjs/mappings/NativeBase/Feedback.js +0 -74
- package/lib/commonjs/mappings/NativeBase/Layout.js +0 -114
- package/lib/commonjs/mappings/NativeBase/Media.js +0 -49
- package/lib/commonjs/mappings/NativeBase/Menu.js +0 -111
- package/lib/commonjs/mappings/NativeBase/Modal.js +0 -93
- package/lib/commonjs/mappings/NativeBase/Other.js +0 -94
- package/lib/commonjs/mappings/NativeBase/Popover.js +0 -99
- package/lib/commonjs/mappings/NativeBase/Select.js +0 -65
- package/lib/commonjs/mappings/NativeBase/Slider.js +0 -81
- package/lib/module/mappings/NativeBase/AlertDialog.js +0 -95
- package/lib/module/mappings/NativeBase/Button.js +0 -86
- package/lib/module/mappings/NativeBase/DataDisplay.js +0 -54
- package/lib/module/mappings/NativeBase/Feedback.js +0 -67
- package/lib/module/mappings/NativeBase/Layout.js +0 -107
- package/lib/module/mappings/NativeBase/Media.js +0 -42
- package/lib/module/mappings/NativeBase/Menu.js +0 -104
- package/lib/module/mappings/NativeBase/Modal.js +0 -86
- package/lib/module/mappings/NativeBase/Other.js +0 -87
- package/lib/module/mappings/NativeBase/Popover.js +0 -92
- package/lib/module/mappings/NativeBase/Select.js +0 -58
- package/lib/module/mappings/NativeBase/Slider.js +0 -74
- package/lib/typescript/src/mappings/NativeBase/AlertDialog.d.ts +0 -146
- package/lib/typescript/src/mappings/NativeBase/AlertDialog.d.ts.map +0 -1
- package/lib/typescript/src/mappings/NativeBase/Button.d.ts +0 -1
- package/lib/typescript/src/mappings/NativeBase/Button.d.ts.map +0 -1
- package/lib/typescript/src/mappings/NativeBase/DataDisplay.d.ts +0 -96
- package/lib/typescript/src/mappings/NativeBase/DataDisplay.d.ts.map +0 -1
- package/lib/typescript/src/mappings/NativeBase/Feedback.d.ts +0 -2
- package/lib/typescript/src/mappings/NativeBase/Feedback.d.ts.map +0 -1
- package/lib/typescript/src/mappings/NativeBase/Layout.d.ts +0 -146
- package/lib/typescript/src/mappings/NativeBase/Layout.d.ts.map +0 -1
- package/lib/typescript/src/mappings/NativeBase/Media.d.ts +0 -48
- package/lib/typescript/src/mappings/NativeBase/Media.d.ts.map +0 -1
- package/lib/typescript/src/mappings/NativeBase/Menu.d.ts +0 -227
- package/lib/typescript/src/mappings/NativeBase/Menu.d.ts.map +0 -1
- package/lib/typescript/src/mappings/NativeBase/Modal.d.ts +0 -133
- package/lib/typescript/src/mappings/NativeBase/Modal.d.ts.map +0 -1
- package/lib/typescript/src/mappings/NativeBase/Other.d.ts +0 -179
- package/lib/typescript/src/mappings/NativeBase/Other.d.ts.map +0 -1
- package/lib/typescript/src/mappings/NativeBase/Popover.d.ts +0 -136
- package/lib/typescript/src/mappings/NativeBase/Popover.d.ts.map +0 -1
- package/lib/typescript/src/mappings/NativeBase/Select.d.ts +0 -156
- package/lib/typescript/src/mappings/NativeBase/Select.d.ts.map +0 -1
- package/lib/typescript/src/mappings/NativeBase/Slider.d.ts +0 -200
- package/lib/typescript/src/mappings/NativeBase/Slider.d.ts.map +0 -1
- 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 -63
- package/src/components/Checkbox/CheckboxGroup.js +0 -21
- package/src/components/Checkbox/CheckboxGroupRow.js +0 -77
- package/src/components/Checkbox/CheckboxRow.js +0 -78
- 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 -95
- package/src/components/DeprecatedCardWrapper.js +0 -18
- package/src/components/DeprecatedFAB.js +0 -115
- 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/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 -133
- 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 -87
- 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 -33
- package/src/mappings/FlatList.js +0 -24
- 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/NativeBase/AlertDialog.js +0 -112
- package/src/mappings/NativeBase/AlertDialog.ts +0 -128
- package/src/mappings/NativeBase/Button.js +0 -84
- package/src/mappings/NativeBase/Button.ts +0 -83
- package/src/mappings/NativeBase/DataDisplay.js +0 -67
- package/src/mappings/NativeBase/DataDisplay.ts +0 -79
- package/src/mappings/NativeBase/Feedback.js +0 -89
- package/src/mappings/NativeBase/Feedback.ts +0 -100
- package/src/mappings/NativeBase/Layout.js +0 -140
- package/src/mappings/NativeBase/Layout.ts +0 -152
- package/src/mappings/NativeBase/Media.js +0 -56
- package/src/mappings/NativeBase/Media.ts +0 -65
- package/src/mappings/NativeBase/Menu.js +0 -134
- package/src/mappings/NativeBase/Menu.ts +0 -150
- package/src/mappings/NativeBase/Modal.js +0 -103
- package/src/mappings/NativeBase/Modal.ts +0 -118
- package/src/mappings/NativeBase/Other.js +0 -123
- package/src/mappings/NativeBase/Other.ts +0 -139
- package/src/mappings/NativeBase/Popover.js +0 -123
- package/src/mappings/NativeBase/Popover.ts +0 -136
- package/src/mappings/NativeBase/Select.js +0 -71
- package/src/mappings/NativeBase/Select.ts +0 -85
- package/src/mappings/NativeBase/Slider.js +0 -89
- package/src/mappings/NativeBase/Slider.ts +0 -105
- 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 -60
- 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 -17
- 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,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,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);
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { View } from "react-native";
|
|
3
|
-
import { getValueForRadioButton } from "../../utilities";
|
|
4
|
-
import { radioButtonGroupContext, Direction } from "./context";
|
|
5
|
-
const { Provider } = radioButtonGroupContext;
|
|
6
|
-
const RadioButtonGroup = ({ direction = Direction.Vertical, value = "", onValueChange, defaultValue, style, children, ...rest }) => {
|
|
7
|
-
const [internalValue, setInternalValue] = React.useState("");
|
|
8
|
-
React.useEffect(() => {
|
|
9
|
-
if (value != null) {
|
|
10
|
-
const realValue = getValueForRadioButton(value);
|
|
11
|
-
setInternalValue(realValue);
|
|
12
|
-
}
|
|
13
|
-
}, [value]);
|
|
14
|
-
React.useEffect(() => {
|
|
15
|
-
if (defaultValue != null) {
|
|
16
|
-
const realDefaultValue = getValueForRadioButton(defaultValue);
|
|
17
|
-
setInternalValue(realDefaultValue);
|
|
18
|
-
}
|
|
19
|
-
}, [defaultValue]);
|
|
20
|
-
const handleValueChange = (newValue) => {
|
|
21
|
-
const realNewValue = getValueForRadioButton(newValue);
|
|
22
|
-
setInternalValue(realNewValue);
|
|
23
|
-
onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(realNewValue);
|
|
24
|
-
};
|
|
25
|
-
const _containerStyle = [
|
|
26
|
-
{
|
|
27
|
-
flexDirection: direction === Direction.Horizontal ? "row" : "column",
|
|
28
|
-
},
|
|
29
|
-
];
|
|
30
|
-
if (direction !== Direction.Vertical) {
|
|
31
|
-
_containerStyle.push({
|
|
32
|
-
alignItems: "center",
|
|
33
|
-
});
|
|
34
|
-
}
|
|
35
|
-
return (React.createElement(View, { style: [{ minHeight: 40 }, style], ...rest },
|
|
36
|
-
React.createElement(Provider, { value: {
|
|
37
|
-
value: internalValue,
|
|
38
|
-
onValueChange: handleValueChange,
|
|
39
|
-
direction,
|
|
40
|
-
} },
|
|
41
|
-
React.createElement(View, { style: _containerStyle }, children))));
|
|
42
|
-
};
|
|
43
|
-
export default RadioButtonGroup;
|
|
@@ -1,76 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { StyleSheet, View, Platform, } from "react-native";
|
|
3
|
-
import RadioButton from "./RadioButton";
|
|
4
|
-
import Text from "../Text";
|
|
5
|
-
import { useRadioButtonGroupContext } from "./context";
|
|
6
|
-
import { Direction as GroupDirection } from "./context";
|
|
7
|
-
import Touchable from "../Touchable";
|
|
8
|
-
import { extractStyles, getValueForRadioButton } from "../../utilities";
|
|
9
|
-
export var Direction;
|
|
10
|
-
(function (Direction) {
|
|
11
|
-
Direction["Row"] = "row";
|
|
12
|
-
Direction["RowReverse"] = "row-reverse";
|
|
13
|
-
})(Direction || (Direction = {}));
|
|
14
|
-
const getRadioButtonAlignment = (parentDirection, direction) => {
|
|
15
|
-
if (parentDirection === GroupDirection.Horizontal) {
|
|
16
|
-
return direction === Direction.Row ? "flex-start" : "flex-end";
|
|
17
|
-
}
|
|
18
|
-
else if (direction === Direction.RowReverse) {
|
|
19
|
-
return "flex-start";
|
|
20
|
-
}
|
|
21
|
-
else {
|
|
22
|
-
return "flex-end";
|
|
23
|
-
}
|
|
24
|
-
};
|
|
25
|
-
const renderLabel = (value, labelStyle, textStyle) => {
|
|
26
|
-
if (typeof value === "string") {
|
|
27
|
-
return React.createElement(Text, { style: [labelStyle, textStyle] }, value);
|
|
28
|
-
}
|
|
29
|
-
else {
|
|
30
|
-
return React.createElement(React.Fragment, null, value);
|
|
31
|
-
}
|
|
32
|
-
};
|
|
33
|
-
const RadioButtonRow = ({ Icon, label, value = "", color, unselectedColor, onPress, labelContainerStyle, labelStyle, radioButtonStyle, direction = Direction.Row, selected, disabled, style, ...rest }) => {
|
|
34
|
-
const { value: contextValue, onValueChange, direction: parentDirection, } = useRadioButtonGroupContext();
|
|
35
|
-
const realValue = getValueForRadioButton(value);
|
|
36
|
-
const realContextValue = getValueForRadioButton(contextValue);
|
|
37
|
-
const isSelected = selected !== null && selected !== void 0 ? selected : realContextValue === realValue;
|
|
38
|
-
const handlePress = () => {
|
|
39
|
-
onPress === null || onPress === void 0 ? void 0 : onPress(realValue);
|
|
40
|
-
onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(realValue);
|
|
41
|
-
};
|
|
42
|
-
const { textStyles, viewStyles } = extractStyles(style);
|
|
43
|
-
return (React.createElement(Touchable, { onPress: handlePress, style: [styles.mainParent, { flexDirection: direction }, viewStyles], disabled: disabled, ...rest },
|
|
44
|
-
React.createElement(View, { style: [
|
|
45
|
-
styles.label,
|
|
46
|
-
{
|
|
47
|
-
alignItems: direction === Direction.Row ? "flex-start" : "flex-end",
|
|
48
|
-
},
|
|
49
|
-
labelContainerStyle,
|
|
50
|
-
] }, renderLabel(label, labelStyle, textStyles)),
|
|
51
|
-
React.createElement(View, { style: {
|
|
52
|
-
flex: 1,
|
|
53
|
-
alignItems: getRadioButtonAlignment(parentDirection, direction),
|
|
54
|
-
} },
|
|
55
|
-
React.createElement(RadioButton, { Icon: Icon, selected: isSelected, value: realValue, color: color, unselectedColor: unselectedColor, style: radioButtonStyle }))));
|
|
56
|
-
};
|
|
57
|
-
const styles = StyleSheet.create({
|
|
58
|
-
mainParent: {
|
|
59
|
-
alignItems: "center",
|
|
60
|
-
justifyContent: "space-around",
|
|
61
|
-
paddingStart: 20,
|
|
62
|
-
minHeight: 50,
|
|
63
|
-
paddingEnd: 20,
|
|
64
|
-
display: "flex",
|
|
65
|
-
...Platform.select({
|
|
66
|
-
web: {
|
|
67
|
-
cursor: "pointer",
|
|
68
|
-
userSelect: "none",
|
|
69
|
-
},
|
|
70
|
-
}),
|
|
71
|
-
},
|
|
72
|
-
label: {
|
|
73
|
-
flex: 3,
|
|
74
|
-
},
|
|
75
|
-
});
|
|
76
|
-
export default RadioButtonRow;
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { createContext, useContext } from "react";
|
|
2
|
-
export var Direction;
|
|
3
|
-
(function (Direction) {
|
|
4
|
-
Direction["Horizontal"] = "horizontal";
|
|
5
|
-
Direction["Vertical"] = "vertical";
|
|
6
|
-
})(Direction || (Direction = {}));
|
|
7
|
-
export const radioButtonGroupContext = createContext({
|
|
8
|
-
onValueChange: () => { },
|
|
9
|
-
value: "",
|
|
10
|
-
direction: undefined,
|
|
11
|
-
});
|
|
12
|
-
export function useRadioButtonGroupContext() {
|
|
13
|
-
return useContext(radioButtonGroupContext);
|
|
14
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
package/src/components/Row.js
DELETED
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { View, Text, Image, StyleSheet, } from "react-native";
|
|
3
|
-
import { withTheme } from "../theming";
|
|
4
|
-
import Config from "./Config";
|
|
5
|
-
const Row = ({ titleTypeStyle, titleColor, subtitleTypeStyle, subtitleColor, title, subtitle, multilineSubtitle, image, right, style, }) => {
|
|
6
|
-
return (React.createElement(View, { style: [styles.container, { padding: 16 }, style] },
|
|
7
|
-
React.createElement(View, { style: styles.leftContainer },
|
|
8
|
-
image && (React.createElement(Image, { source: typeof image === "string" ? { uri: image } : image, style: {
|
|
9
|
-
marginRight: 12,
|
|
10
|
-
width: subtitle
|
|
11
|
-
? Config.rowMultiLineImageSize
|
|
12
|
-
: Config.rowSingleLineImageSize,
|
|
13
|
-
height: subtitle
|
|
14
|
-
? Config.rowMultiLineImageSize
|
|
15
|
-
: Config.rowSingleLineImageSize,
|
|
16
|
-
} })),
|
|
17
|
-
React.createElement(View, { style: styles.textContainer },
|
|
18
|
-
React.createElement(Text, { style: [
|
|
19
|
-
titleTypeStyle,
|
|
20
|
-
{
|
|
21
|
-
color: titleColor,
|
|
22
|
-
},
|
|
23
|
-
], numberOfLines: 1 }, title),
|
|
24
|
-
subtitle ? (React.createElement(Text, { style: [
|
|
25
|
-
subtitleTypeStyle,
|
|
26
|
-
{
|
|
27
|
-
color: subtitleColor,
|
|
28
|
-
marginTop: 4,
|
|
29
|
-
},
|
|
30
|
-
], numberOfLines: multilineSubtitle ? undefined : 1 }, subtitle)) : null)),
|
|
31
|
-
right && right()));
|
|
32
|
-
};
|
|
33
|
-
const styles = StyleSheet.create({
|
|
34
|
-
leftContainer: {
|
|
35
|
-
flexDirection: "row",
|
|
36
|
-
flex: 1,
|
|
37
|
-
},
|
|
38
|
-
container: {
|
|
39
|
-
flexDirection: "row",
|
|
40
|
-
justifyContent: "space-between",
|
|
41
|
-
alignItems: "center",
|
|
42
|
-
},
|
|
43
|
-
textContainer: {
|
|
44
|
-
flex: 1,
|
|
45
|
-
justifyContent: "center",
|
|
46
|
-
},
|
|
47
|
-
});
|
|
48
|
-
export default withTheme(Row);
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { withTheme } from "../theming";
|
|
3
|
-
import Row from "./Row";
|
|
4
|
-
import Config from "./Config";
|
|
5
|
-
const RowBodyIcon = ({ Icon, title, subtitle, icon, style, theme: { colors, typography }, }) => {
|
|
6
|
-
return (React.createElement(Row, { titleTypeStyle: typography.body1, titleColor: colors.medium, subtitleTypeStyle: typography.subtitle2, subtitleColor: colors.light, title: title, subtitle: subtitle, right: () => (React.createElement(Icon, { name: icon, size: Config.rowSingleLineIconSize, color: colors.light, style: { marginLeft: 16 } })), style: style }));
|
|
7
|
-
};
|
|
8
|
-
export default withTheme(RowBodyIcon);
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { Text } from "react-native";
|
|
3
|
-
import { withTheme } from "../theming";
|
|
4
|
-
import Row from "./Row";
|
|
5
|
-
const RowHeadlineImageCaption = ({ title, subtitle, caption, image, style, theme: { colors, typography }, }) => {
|
|
6
|
-
return (React.createElement(Row, { titleTypeStyle: typography.headline6, titleColor: colors.strong, subtitleTypeStyle: typography.body2, subtitleColor: colors.medium, title: title, subtitle: subtitle, image: image, right: () => (React.createElement(Text, { style: {
|
|
7
|
-
...typography.caption,
|
|
8
|
-
color: colors.strong,
|
|
9
|
-
marginLeft: 16,
|
|
10
|
-
} }, caption)), style: style }));
|
|
11
|
-
};
|
|
12
|
-
export default withTheme(RowHeadlineImageCaption);
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { withTheme } from "../theming";
|
|
3
|
-
import Row from "./Row";
|
|
4
|
-
import Config from "./Config";
|
|
5
|
-
const RowHeadlineImageIcon = ({ Icon, icon, title, image, subtitle, multilineSubtitle = false, style, theme: { colors, typography }, }) => {
|
|
6
|
-
return (React.createElement(Row, { titleTypeStyle: typography.headline6, titleColor: colors.strong, subtitleTypeStyle: typography.body2, subtitleColor: colors.medium, title: title, subtitle: subtitle, multilineSubtitle: multilineSubtitle, image: image, right: () => (React.createElement(Icon, { name: icon, size: multilineSubtitle
|
|
7
|
-
? Config.rowMultiLineIconSize
|
|
8
|
-
: Config.rowSingleLineIconSize, color: colors.light, style: {
|
|
9
|
-
marginLeft: 16,
|
|
10
|
-
alignSelf: multilineSubtitle ? "flex-start" : "center",
|
|
11
|
-
marginTop: multilineSubtitle ? 4 : 0,
|
|
12
|
-
} })), style: style }));
|
|
13
|
-
};
|
|
14
|
-
export default withTheme(RowHeadlineImageIcon);
|
package/src/components/SVG.js
DELETED
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { View, Platform, Image } from "react-native";
|
|
3
|
-
import { SvgUri } from "react-native-svg";
|
|
4
|
-
import Config from "./Config";
|
|
5
|
-
const SVG = ({ source = Config.placeholderSvgURL, style, }) => {
|
|
6
|
-
return (React.createElement(React.Fragment, null,
|
|
7
|
-
Platform.OS === "ios" && (React.createElement(View, { style: style },
|
|
8
|
-
React.createElement(SvgUri, { width: "100%", height: "100%", uri: source }))),
|
|
9
|
-
Platform.OS === "android" && (React.createElement(View, { style: style },
|
|
10
|
-
React.createElement(SvgUri, { width: "100%", height: "100%", uri: source }))),
|
|
11
|
-
Platform.OS === "web" && (React.createElement(Image, { style: style, source: { uri: source } }))));
|
|
12
|
-
};
|
|
13
|
-
export default SVG;
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { StyleSheet, ScrollView, View, } from "react-native";
|
|
3
|
-
import { SafeAreaView } from "react-native-safe-area-context";
|
|
4
|
-
import { withTheme } from "../theming";
|
|
5
|
-
function ScreenContainer({ scrollable = false, hasSafeArea = false, hasBottomSafeArea = false, hasTopSafeArea = false, theme, style, children, ...rest }) {
|
|
6
|
-
const backgroundColor = theme.colors.background;
|
|
7
|
-
const edges = ["left", "right"];
|
|
8
|
-
if (hasSafeArea || hasTopSafeArea) {
|
|
9
|
-
edges.push("top");
|
|
10
|
-
}
|
|
11
|
-
if (hasSafeArea || hasBottomSafeArea) {
|
|
12
|
-
edges.push("bottom");
|
|
13
|
-
}
|
|
14
|
-
return (React.createElement(SafeAreaView, { edges: edges, style: [
|
|
15
|
-
styles.container,
|
|
16
|
-
{
|
|
17
|
-
backgroundColor,
|
|
18
|
-
},
|
|
19
|
-
], ...rest }, scrollable ? (React.createElement(ScrollView, { contentContainerStyle: [
|
|
20
|
-
styles.scrollViewContainer,
|
|
21
|
-
{ backgroundColor },
|
|
22
|
-
style,
|
|
23
|
-
] }, children)) : (React.createElement(View, { style: [styles.container, { backgroundColor }, style] }, children))));
|
|
24
|
-
}
|
|
25
|
-
const styles = StyleSheet.create({
|
|
26
|
-
container: {
|
|
27
|
-
flex: 1,
|
|
28
|
-
},
|
|
29
|
-
scrollViewContainer: {
|
|
30
|
-
flexGrow: 1,
|
|
31
|
-
flex: undefined,
|
|
32
|
-
},
|
|
33
|
-
});
|
|
34
|
-
export default withTheme(ScreenContainer);
|
package/src/components/Slider.js
DELETED
|
@@ -1,63 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { View, StyleSheet } from "react-native";
|
|
3
|
-
import NativeSlider from "@react-native-community/slider";
|
|
4
|
-
import isNumber from "lodash.isnumber";
|
|
5
|
-
import toNumber from "lodash.tonumber";
|
|
6
|
-
import { withTheme } from "../theming";
|
|
7
|
-
function maybeParseValue(value) {
|
|
8
|
-
if (value === undefined) {
|
|
9
|
-
return undefined;
|
|
10
|
-
}
|
|
11
|
-
if (isNumber(value)) {
|
|
12
|
-
return value;
|
|
13
|
-
}
|
|
14
|
-
try {
|
|
15
|
-
const maybe = toNumber(value);
|
|
16
|
-
if (isNumber(maybe)) {
|
|
17
|
-
return maybe;
|
|
18
|
-
}
|
|
19
|
-
}
|
|
20
|
-
catch {
|
|
21
|
-
return undefined;
|
|
22
|
-
}
|
|
23
|
-
return undefined;
|
|
24
|
-
}
|
|
25
|
-
function Slider({ Icon, leftIcon, rightIcon, leftIconColor, rightIconColor, value, defaultValue, minimumTrackTintColor, maximumTrackTintColor, thumbTintColor, minimumValue = 0, maximumValue = 100, tapToSeek, step = 1, onValueChange = () => { }, style, theme, ...rest }) {
|
|
26
|
-
const [internalValue, setInternalValue] = React.useState(value || defaultValue);
|
|
27
|
-
React.useEffect(() => {
|
|
28
|
-
if (value != null) {
|
|
29
|
-
setInternalValue(value);
|
|
30
|
-
}
|
|
31
|
-
}, [value]);
|
|
32
|
-
React.useEffect(() => {
|
|
33
|
-
if (defaultValue != null) {
|
|
34
|
-
setInternalValue(defaultValue);
|
|
35
|
-
}
|
|
36
|
-
}, [defaultValue]);
|
|
37
|
-
const minTrackColor = minimumTrackTintColor || theme.colors.primary;
|
|
38
|
-
const maxTrackColor = maximumTrackTintColor || theme.colors.light;
|
|
39
|
-
const thumbColor = thumbTintColor || theme.colors.primary;
|
|
40
|
-
const leftIconThemeColor = leftIconColor || theme.colors.light;
|
|
41
|
-
const rightIconThemeColor = rightIconColor || theme.colors.light;
|
|
42
|
-
const parsedValue = maybeParseValue(internalValue);
|
|
43
|
-
const handleSlidingComplete = (newValue) => {
|
|
44
|
-
setInternalValue(newValue);
|
|
45
|
-
onValueChange(newValue);
|
|
46
|
-
};
|
|
47
|
-
return (React.createElement(View, { style: [styles.container, style], ...rest },
|
|
48
|
-
leftIcon ? (React.createElement(Icon, { color: leftIconThemeColor, name: leftIcon, size: 24 })) : null,
|
|
49
|
-
React.createElement(NativeSlider, { value: parsedValue, step: step, minimumValue: minimumValue, maximumValue: maximumValue, tapToSeek: tapToSeek, minimumTrackTintColor: minTrackColor, maximumTrackTintColor: maxTrackColor, thumbTintColor: thumbColor, onSlidingComplete: handleSlidingComplete, style: styles.slider }),
|
|
50
|
-
rightIcon ? (React.createElement(Icon, { color: rightIconThemeColor, name: rightIcon, size: 24 })) : null));
|
|
51
|
-
}
|
|
52
|
-
const styles = StyleSheet.create({
|
|
53
|
-
container: {
|
|
54
|
-
height: 40,
|
|
55
|
-
flexDirection: "row",
|
|
56
|
-
alignItems: "center",
|
|
57
|
-
},
|
|
58
|
-
slider: {
|
|
59
|
-
flex: 1,
|
|
60
|
-
marginHorizontal: 12,
|
|
61
|
-
},
|
|
62
|
-
});
|
|
63
|
-
export default withTheme(Slider);
|
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { View, StyleSheet, Pressable, } from "react-native";
|
|
3
|
-
import { withTheme } from "../theming";
|
|
4
|
-
const StarRating = ({ Icon, starSize = 16, maxStars = 5, rating = 0, defaultValue, isEditable = false, activeColor, inactiveColor, style, onPress, ...rest }) => {
|
|
5
|
-
const [localRating, setLocalRating] = React.useState(rating || defaultValue || 0);
|
|
6
|
-
React.useEffect(() => {
|
|
7
|
-
if (rating != null) {
|
|
8
|
-
setLocalRating(rating);
|
|
9
|
-
}
|
|
10
|
-
}, [rating]);
|
|
11
|
-
React.useEffect(() => {
|
|
12
|
-
if (defaultValue != null) {
|
|
13
|
-
setLocalRating(defaultValue);
|
|
14
|
-
}
|
|
15
|
-
}, [defaultValue]);
|
|
16
|
-
const ratingHandler = React.useCallback((r) => {
|
|
17
|
-
setLocalRating(r);
|
|
18
|
-
!!onPress && onPress(r);
|
|
19
|
-
}, [onPress]);
|
|
20
|
-
const ratingRounded = Math.round(localRating * 2) / 2;
|
|
21
|
-
return (React.createElement(View, { style: [styles.container, style], ...rest }, [...Array(maxStars)].map((_, i) => (React.createElement(View, { key: i, style: { display: "flex" } },
|
|
22
|
-
React.createElement(Icon, { name: ratingRounded - i === 0.5
|
|
23
|
-
? "MaterialIcons/star-half"
|
|
24
|
-
: "MaterialIcons/star", size: starSize, color: ratingRounded > i ? activeColor : inactiveColor }),
|
|
25
|
-
isEditable && (React.createElement(View, { style: styles.touchContainer },
|
|
26
|
-
React.createElement(Pressable, { style: styles.pressable, onPress: () => ratingHandler(i + 0.5) }),
|
|
27
|
-
React.createElement(Pressable, { style: styles.pressable, onPress: () => ratingHandler(i + 1) }))))))));
|
|
28
|
-
};
|
|
29
|
-
const styles = StyleSheet.create({
|
|
30
|
-
container: {
|
|
31
|
-
flexDirection: "row",
|
|
32
|
-
alignItems: "center",
|
|
33
|
-
},
|
|
34
|
-
touchContainer: {
|
|
35
|
-
display: "flex",
|
|
36
|
-
flexDirection: "row",
|
|
37
|
-
position: "absolute",
|
|
38
|
-
top: 0,
|
|
39
|
-
right: 0,
|
|
40
|
-
left: 0,
|
|
41
|
-
bottom: 0,
|
|
42
|
-
zIndex: 1,
|
|
43
|
-
},
|
|
44
|
-
pressable: {
|
|
45
|
-
flex: 1,
|
|
46
|
-
height: "100%",
|
|
47
|
-
width: "50%",
|
|
48
|
-
},
|
|
49
|
-
});
|
|
50
|
-
export default withTheme(StarRating);
|