@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,79 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { View, Text, } from "react-native";
|
|
3
|
-
import color from "color";
|
|
4
|
-
import Image from "./Image";
|
|
5
|
-
import Card from "./DeprecatedCardWrapper";
|
|
6
|
-
import Elevation from "./Elevation";
|
|
7
|
-
import StarRating from "./StarRating";
|
|
8
|
-
import { withTheme } from "../theming";
|
|
9
|
-
import Config from "./Config";
|
|
10
|
-
const ICON_CONTAINER_SIZE = Config.cardIconSize * 2;
|
|
11
|
-
const ICON_CONTAINER_PADDING = Config.cardIconSize / 2 - 1;
|
|
12
|
-
const CardContainerRating = ({ Icon, icon, image = Config.cardImageUrl, title, leftDescription, rightDescription, rating, aspectRatio = 1.5, elevation = 2, numColumns = 3, theme: { colors, roundness, typography }, style, onPress, ...rest }) => {
|
|
13
|
-
let titleStyle, rightDescriptionStyle;
|
|
14
|
-
switch (numColumns) {
|
|
15
|
-
case 2:
|
|
16
|
-
titleStyle = typography.headline6;
|
|
17
|
-
rightDescriptionStyle = typography.body2;
|
|
18
|
-
break;
|
|
19
|
-
case 3:
|
|
20
|
-
titleStyle = typography.headline5;
|
|
21
|
-
rightDescriptionStyle = typography.caption;
|
|
22
|
-
break;
|
|
23
|
-
}
|
|
24
|
-
return (React.createElement(Card, { style: style, onPress: onPress, numColumns: numColumns, ...rest },
|
|
25
|
-
React.createElement(Elevation, { style: { elevation, borderRadius: roundness } },
|
|
26
|
-
React.createElement(View, { style: {
|
|
27
|
-
borderRadius: roundness,
|
|
28
|
-
overflow: "hidden",
|
|
29
|
-
backgroundColor: colors.background,
|
|
30
|
-
//background color is needed for bug on android 9 - https://github.com/facebook/react-native/issues/25093
|
|
31
|
-
} },
|
|
32
|
-
React.createElement(Image, { style: { aspectRatio }, source: typeof image === "string" ? { uri: image } : image, resizeMode: "cover" }),
|
|
33
|
-
React.createElement(View, { style: {
|
|
34
|
-
padding: numColumns === 1 ? 8 : 16,
|
|
35
|
-
} },
|
|
36
|
-
title ? (React.createElement(View, { style: {
|
|
37
|
-
flexDirection: "row",
|
|
38
|
-
alignItems: "center",
|
|
39
|
-
justifyContent: "space-between",
|
|
40
|
-
} },
|
|
41
|
-
React.createElement(Text, { numberOfLines: 1, style: [titleStyle, { color: colors.strong }] }, title))) : null,
|
|
42
|
-
leftDescription ? (React.createElement(Text, { numberOfLines: 1, style: [
|
|
43
|
-
typography.body2,
|
|
44
|
-
{
|
|
45
|
-
color: colors.medium,
|
|
46
|
-
marginTop: numColumns === 3 ? 4 : 4 / 2,
|
|
47
|
-
},
|
|
48
|
-
] }, leftDescription)) : null,
|
|
49
|
-
React.createElement(View, { style: {
|
|
50
|
-
flexDirection: "row",
|
|
51
|
-
justifyContent: "space-between",
|
|
52
|
-
alignItems: "center",
|
|
53
|
-
marginTop: numColumns === 3 ? 16 : 12,
|
|
54
|
-
} },
|
|
55
|
-
React.createElement(StarRating, { Icon: Icon, starSize: numColumns === 1 ? 10 : 16, rating: rating }),
|
|
56
|
-
React.createElement(Text, { style: [
|
|
57
|
-
rightDescriptionStyle,
|
|
58
|
-
{
|
|
59
|
-
color: colors.medium,
|
|
60
|
-
marginLeft: 8,
|
|
61
|
-
},
|
|
62
|
-
], numberOfLines: 1 }, rightDescription))),
|
|
63
|
-
icon ? (React.createElement(Elevation, { style: {
|
|
64
|
-
elevation: Config.cardIconElevation,
|
|
65
|
-
position: "absolute",
|
|
66
|
-
top: 12,
|
|
67
|
-
right: 12,
|
|
68
|
-
width: ICON_CONTAINER_SIZE,
|
|
69
|
-
height: ICON_CONTAINER_SIZE,
|
|
70
|
-
padding: ICON_CONTAINER_PADDING,
|
|
71
|
-
borderRadius: ICON_CONTAINER_SIZE,
|
|
72
|
-
backgroundColor: color(colors.strong)
|
|
73
|
-
.alpha(Config.cardIconBackgroundOpacity)
|
|
74
|
-
.rgb()
|
|
75
|
-
.string(),
|
|
76
|
-
} },
|
|
77
|
-
React.createElement(Icon, { name: icon, size: Config.cardIconSize, color: colors.surface }))) : null))));
|
|
78
|
-
};
|
|
79
|
-
export default withTheme(CardContainerRating);
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { View, Text, } from "react-native";
|
|
3
|
-
import Image from "./Image";
|
|
4
|
-
import Card from "./DeprecatedCardWrapper";
|
|
5
|
-
import Elevation from "./Elevation";
|
|
6
|
-
import { withTheme } from "../theming";
|
|
7
|
-
import Config from "./Config";
|
|
8
|
-
const CardContainerShortImage = ({ image = Config.squareImageUrl, title, subtitle, mode = "left", aspectRatio = 1, elevation = 2, theme: { colors, roundness, typography }, style, onPress, ...rest }) => {
|
|
9
|
-
return (React.createElement(Card, { style: style, onPress: onPress, ...rest },
|
|
10
|
-
React.createElement(Elevation, { style: {
|
|
11
|
-
elevation,
|
|
12
|
-
borderRadius: roundness,
|
|
13
|
-
} },
|
|
14
|
-
React.createElement(View, { style: {
|
|
15
|
-
overflow: "hidden",
|
|
16
|
-
flexDirection: "row",
|
|
17
|
-
justifyContent: mode === "right" ? "space-between" : "flex-start",
|
|
18
|
-
borderRadius: roundness,
|
|
19
|
-
} },
|
|
20
|
-
mode === "left" && (React.createElement(Image, { style: { aspectRatio }, source: typeof image === "string" ? { uri: image } : image, resizeMode: "cover" })),
|
|
21
|
-
React.createElement(View, { style: {
|
|
22
|
-
padding: 16,
|
|
23
|
-
backgroundColor: colors.surface,
|
|
24
|
-
flex: 1,
|
|
25
|
-
} },
|
|
26
|
-
React.createElement(Text, { numberOfLines: 1, style: [typography.headline5, { color: colors.strong }] }, title),
|
|
27
|
-
subtitle ? (React.createElement(Text, { numberOfLines: 1, style: [
|
|
28
|
-
typography.body2,
|
|
29
|
-
{ color: colors.medium, marginTop: 4 },
|
|
30
|
-
] }, subtitle)) : null),
|
|
31
|
-
mode === "right" && (React.createElement(Image, { style: { aspectRatio }, source: typeof image === "string" ? { uri: image } : image, resizeMode: "cover" }))))));
|
|
32
|
-
};
|
|
33
|
-
export default withTheme(CardContainerShortImage);
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
// @ts-nocheck
|
|
2
|
-
import React from "react";
|
|
3
|
-
import { Pressable, View, StyleSheet, } from "react-native";
|
|
4
|
-
import { Title, Subtitle } from "./Typography";
|
|
5
|
-
import Image from "./Image";
|
|
6
|
-
import Surface from "./Surface";
|
|
7
|
-
import Config from "./Config";
|
|
8
|
-
import { withTheme } from "../theming";
|
|
9
|
-
const CardInline = ({ image = Config.cardImageUrl, title, subtitle, aspectRatio = 1.5, elevation = 2, style, titleStyle, subtitleStyle, onPress, }) => {
|
|
10
|
-
const { alignItems, justifyContent, width, height } = StyleSheet.flatten(style || {});
|
|
11
|
-
const imageStyles = width && height ? { width, height } : { aspectRatio };
|
|
12
|
-
return (React.createElement(Surface, { style: [{ elevation }, style] },
|
|
13
|
-
React.createElement(Pressable, { disabled: !onPress, onPress: onPress, style: ({ pressed }) => {
|
|
14
|
-
return [
|
|
15
|
-
{
|
|
16
|
-
opacity: pressed ? 0.8 : 1,
|
|
17
|
-
},
|
|
18
|
-
];
|
|
19
|
-
} },
|
|
20
|
-
React.createElement(Image, { style: imageStyles, source: typeof image === "string" ? { uri: image } : image, resizeMode: "cover" }),
|
|
21
|
-
React.createElement(View, { style: [styles.overlay, { justifyContent, alignItems }] },
|
|
22
|
-
title ? (React.createElement(Title, { style: [{ color: "white" }, titleStyle], text: title })) : null,
|
|
23
|
-
subtitle ? (React.createElement(Subtitle, { style: [{ color: "rgba(255, 255, 255, 0.7)" }, subtitleStyle], text: subtitle })) : null))));
|
|
24
|
-
};
|
|
25
|
-
const styles = StyleSheet.create({
|
|
26
|
-
overlay: {
|
|
27
|
-
position: "absolute",
|
|
28
|
-
top: 0,
|
|
29
|
-
bottom: 0,
|
|
30
|
-
left: 0,
|
|
31
|
-
right: 0,
|
|
32
|
-
padding: 16,
|
|
33
|
-
backgroundColor: "rgba(0, 0, 0, 0.2)",
|
|
34
|
-
},
|
|
35
|
-
});
|
|
36
|
-
export default withTheme(CardInline);
|
|
@@ -1,68 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { withTheme } from "../theming";
|
|
3
|
-
import { ScrollView, View, StyleSheet, Dimensions, } from "react-native";
|
|
4
|
-
import Image from "./Image";
|
|
5
|
-
const screenWidth = Dimensions.get("window").width;
|
|
6
|
-
function Pager({ color, index, length, }) {
|
|
7
|
-
return (React.createElement(View, { style: styles.pager }, Array.from({ length }).map((_, i) => {
|
|
8
|
-
const current = index === i;
|
|
9
|
-
const opacity = current ? 1 : 0.5;
|
|
10
|
-
const size = current ? 10 : 8;
|
|
11
|
-
return (React.createElement(View, { key: i, style: [
|
|
12
|
-
styles.bullet,
|
|
13
|
-
{ backgroundColor: color, opacity, width: size, height: size },
|
|
14
|
-
] }));
|
|
15
|
-
})));
|
|
16
|
-
}
|
|
17
|
-
function Carousel({ data, children, dotColor = "strong", style, ...rest }) {
|
|
18
|
-
var _a;
|
|
19
|
-
const [index, setIndex] = React.useState(0);
|
|
20
|
-
const length = React.Children.count(children);
|
|
21
|
-
const itemsLength = ((_a = data === null || data === void 0 ? void 0 : data.length) !== null && _a !== void 0 ? _a : 0) + length;
|
|
22
|
-
const slides = Array.isArray(data) ? data : [];
|
|
23
|
-
const { width, height } = StyleSheet.flatten(style || {});
|
|
24
|
-
const slideWidth = width || screenWidth;
|
|
25
|
-
const slideHeight = height || 250;
|
|
26
|
-
return (React.createElement(View, { style: [styles.container, style], ...rest },
|
|
27
|
-
React.createElement(ScrollView, { pagingEnabled: true, horizontal: true, decelerationRate: "fast", scrollEventThrottle: 200, showsHorizontalScrollIndicator: false, onScroll: ({ nativeEvent }) => {
|
|
28
|
-
const layoutWidth = nativeEvent.layoutMeasurement.width;
|
|
29
|
-
const offset = nativeEvent.contentOffset.x;
|
|
30
|
-
const currentIndex = Math.ceil(offset / layoutWidth);
|
|
31
|
-
setIndex(currentIndex);
|
|
32
|
-
} },
|
|
33
|
-
slides.length > 0
|
|
34
|
-
? slides.map((item, i) => {
|
|
35
|
-
return (React.createElement(Image, { key: i, resizeMode: "cover", source: typeof item === "string" ? { uri: item } : item, style: [{ width: slideWidth, height: slideHeight }] }));
|
|
36
|
-
})
|
|
37
|
-
: null,
|
|
38
|
-
React.Children.map(children, (child) => {
|
|
39
|
-
var _a;
|
|
40
|
-
const s = ((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.style) || {};
|
|
41
|
-
return (React.createElement(View, { style: { width: slideWidth } }, React.cloneElement(child, {
|
|
42
|
-
style: { ...s, width: slideWidth },
|
|
43
|
-
})));
|
|
44
|
-
})),
|
|
45
|
-
React.createElement(Pager, { color: dotColor, index: index, length: itemsLength })));
|
|
46
|
-
}
|
|
47
|
-
const styles = StyleSheet.create({
|
|
48
|
-
container: {
|
|
49
|
-
backgroundColor: "#eee",
|
|
50
|
-
},
|
|
51
|
-
pager: {
|
|
52
|
-
position: "absolute",
|
|
53
|
-
bottom: 12,
|
|
54
|
-
left: 0,
|
|
55
|
-
right: 0,
|
|
56
|
-
flexDirection: "row",
|
|
57
|
-
justifyContent: "center",
|
|
58
|
-
alignItems: "center",
|
|
59
|
-
},
|
|
60
|
-
bullet: {
|
|
61
|
-
marginHorizontal: 2,
|
|
62
|
-
width: 10,
|
|
63
|
-
height: 10,
|
|
64
|
-
borderRadius: 20,
|
|
65
|
-
backgroundColor: "#000",
|
|
66
|
-
},
|
|
67
|
-
});
|
|
68
|
-
export default withTheme(Carousel);
|
|
@@ -1,63 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { View, StyleSheet, } from "react-native";
|
|
3
|
-
import { useTheme } from "../../theming";
|
|
4
|
-
import Touchable from "../Touchable";
|
|
5
|
-
import { usePrevious } from "../../hooks";
|
|
6
|
-
const Checkbox = ({ Icon, status, disabled = false, onPress, onCheck, onUncheck, color, uncheckedColor, defaultValue, checkedIcon = "MaterialCommunityIcons/checkbox-marked", uncheckedIcon = "MaterialCommunityIcons/checkbox-blank-outline", size = 24, style, ...rest }) => {
|
|
7
|
-
const [internalValue, setInternalValue] = React.useState(status || defaultValue || false);
|
|
8
|
-
React.useEffect(() => {
|
|
9
|
-
if (status != null) {
|
|
10
|
-
setInternalValue(status);
|
|
11
|
-
}
|
|
12
|
-
}, [status]);
|
|
13
|
-
// This special logic is to handle weird APIs like Airtable that return
|
|
14
|
-
// true or undefined for a boolean
|
|
15
|
-
const previousDefaultValue = usePrevious(defaultValue);
|
|
16
|
-
React.useEffect(() => {
|
|
17
|
-
if (defaultValue !== previousDefaultValue) {
|
|
18
|
-
setInternalValue(Boolean(defaultValue));
|
|
19
|
-
}
|
|
20
|
-
}, [defaultValue, previousDefaultValue]);
|
|
21
|
-
const { colors } = useTheme();
|
|
22
|
-
const checkboxColor = internalValue
|
|
23
|
-
? color || colors.primary
|
|
24
|
-
: uncheckedColor || colors.primary;
|
|
25
|
-
const handlePress = () => {
|
|
26
|
-
const newValue = !internalValue;
|
|
27
|
-
setInternalValue(newValue);
|
|
28
|
-
onPress === null || onPress === void 0 ? void 0 : onPress(newValue);
|
|
29
|
-
if (newValue) {
|
|
30
|
-
onCheck === null || onCheck === void 0 ? void 0 : onCheck();
|
|
31
|
-
}
|
|
32
|
-
if (!newValue) {
|
|
33
|
-
onUncheck === null || onUncheck === void 0 ? void 0 : onUncheck();
|
|
34
|
-
}
|
|
35
|
-
};
|
|
36
|
-
return (React.createElement(Touchable, { ...rest, onPress: handlePress, disabled: disabled, accessibilityState: { disabled }, accessibilityRole: "button", accessibilityLiveRegion: "polite", style: [styles.container, style, { width: size, height: size }] },
|
|
37
|
-
React.createElement(Icon, { style: styles.icon, name: internalValue ? checkedIcon : uncheckedIcon, size: size, color: checkboxColor }),
|
|
38
|
-
React.createElement(View, { style: [StyleSheet.absoluteFill, styles.fillContainer] },
|
|
39
|
-
React.createElement(View, { style: [
|
|
40
|
-
styles.fill,
|
|
41
|
-
{ opacity: disabled ? 0.5 : 1 },
|
|
42
|
-
{ borderColor: checkboxColor },
|
|
43
|
-
] }))));
|
|
44
|
-
};
|
|
45
|
-
const styles = StyleSheet.create({
|
|
46
|
-
container: {
|
|
47
|
-
borderRadius: 18,
|
|
48
|
-
},
|
|
49
|
-
fillContainer: {
|
|
50
|
-
alignItems: "center",
|
|
51
|
-
justifyContent: "center",
|
|
52
|
-
},
|
|
53
|
-
icon: {
|
|
54
|
-
alignSelf: "center",
|
|
55
|
-
},
|
|
56
|
-
fill: {
|
|
57
|
-
borderRadius: 5,
|
|
58
|
-
width: 30,
|
|
59
|
-
height: 30,
|
|
60
|
-
alignSelf: "center",
|
|
61
|
-
},
|
|
62
|
-
});
|
|
63
|
-
export default Checkbox;
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { View } from "react-native";
|
|
3
|
-
import { checkboxGroupContext, Direction } from "./context";
|
|
4
|
-
const { Provider } = checkboxGroupContext;
|
|
5
|
-
const CheckboxGroup = ({ direction = Direction.Vertical, values, onValueChange = () => { }, style, children, ...rest }) => {
|
|
6
|
-
const _containerStyle = [
|
|
7
|
-
{
|
|
8
|
-
flexDirection: direction === Direction.Horizontal ? "row" : "column",
|
|
9
|
-
overflow: "hidden",
|
|
10
|
-
},
|
|
11
|
-
];
|
|
12
|
-
if (direction !== Direction.Vertical) {
|
|
13
|
-
_containerStyle.push({
|
|
14
|
-
alignItems: "center",
|
|
15
|
-
});
|
|
16
|
-
}
|
|
17
|
-
return (React.createElement(View, { style: [{ minHeight: 40 }, style], ...rest },
|
|
18
|
-
React.createElement(Provider, { value: { values, onValueChange, direction } },
|
|
19
|
-
React.createElement(View, { style: _containerStyle }, children))));
|
|
20
|
-
};
|
|
21
|
-
export default CheckboxGroup;
|
|
@@ -1,77 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { StyleSheet, View, Platform, } from "react-native";
|
|
3
|
-
import Checkbox from "./Checkbox";
|
|
4
|
-
import Text from "../Text";
|
|
5
|
-
import { useCheckboxGroupContext } from "./context";
|
|
6
|
-
import { Direction as GroupDirection } from "./context";
|
|
7
|
-
import Touchable from "../Touchable";
|
|
8
|
-
import { extractStyles } from "../../utilities";
|
|
9
|
-
export var Direction;
|
|
10
|
-
(function (Direction) {
|
|
11
|
-
Direction["Row"] = "row";
|
|
12
|
-
Direction["RowReverse"] = "row-reverse";
|
|
13
|
-
})(Direction || (Direction = {}));
|
|
14
|
-
const getCheckboxAlignment = (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 CheckboxGroupRow = ({ Icon, label = "Label", status, value, onPress, labelContainerStyle, labelStyle, checkboxStyle, direction = Direction.Row, disabled, style, color, uncheckedColor, ...rest }) => {
|
|
34
|
-
const { values: selectedValues, onValueChange, direction: parentDirection, } = useCheckboxGroupContext();
|
|
35
|
-
const values = Array.isArray(selectedValues) ? selectedValues : [];
|
|
36
|
-
const isChecked = status || values.includes(value);
|
|
37
|
-
const handlePress = () => {
|
|
38
|
-
if (!disabled) {
|
|
39
|
-
onPress === null || onPress === void 0 ? void 0 : onPress(!isChecked);
|
|
40
|
-
onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(value, !isChecked);
|
|
41
|
-
}
|
|
42
|
-
};
|
|
43
|
-
const { textStyles, viewStyles } = extractStyles(style);
|
|
44
|
-
return (React.createElement(Touchable, { onPress: handlePress, style: [styles.mainParent, { flexDirection: direction }, viewStyles], disabled: disabled, ...rest },
|
|
45
|
-
React.createElement(View, { style: [
|
|
46
|
-
styles.label,
|
|
47
|
-
{
|
|
48
|
-
alignItems: direction === Direction.Row ? "flex-start" : "flex-end",
|
|
49
|
-
},
|
|
50
|
-
labelContainerStyle,
|
|
51
|
-
] }, renderLabel(label, labelStyle, textStyles)),
|
|
52
|
-
React.createElement(View, { style: {
|
|
53
|
-
flex: 1,
|
|
54
|
-
alignItems: getCheckboxAlignment(parentDirection, direction),
|
|
55
|
-
} },
|
|
56
|
-
React.createElement(Checkbox, { Icon: Icon, status: isChecked, onPress: handlePress, style: checkboxStyle, disabled: disabled, color: color, uncheckedColor: uncheckedColor }))));
|
|
57
|
-
};
|
|
58
|
-
const styles = StyleSheet.create({
|
|
59
|
-
mainParent: {
|
|
60
|
-
alignItems: "center",
|
|
61
|
-
justifyContent: "space-around",
|
|
62
|
-
paddingStart: 20,
|
|
63
|
-
minHeight: 50,
|
|
64
|
-
paddingEnd: 20,
|
|
65
|
-
display: "flex",
|
|
66
|
-
...Platform.select({
|
|
67
|
-
web: {
|
|
68
|
-
cursor: "pointer",
|
|
69
|
-
userSelect: "none",
|
|
70
|
-
},
|
|
71
|
-
}),
|
|
72
|
-
},
|
|
73
|
-
label: {
|
|
74
|
-
flex: 3,
|
|
75
|
-
},
|
|
76
|
-
});
|
|
77
|
-
export default CheckboxGroupRow;
|
|
@@ -1,78 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { StyleSheet, View, Platform, } from "react-native";
|
|
3
|
-
import { isString } from "lodash";
|
|
4
|
-
import { extractStyles } from "../../utilities";
|
|
5
|
-
import { usePrevious } from "../../hooks";
|
|
6
|
-
import Text from "../Text";
|
|
7
|
-
import Touchable from "../Touchable";
|
|
8
|
-
import Checkbox from "./Checkbox";
|
|
9
|
-
export var Direction;
|
|
10
|
-
(function (Direction) {
|
|
11
|
-
Direction["Row"] = "row";
|
|
12
|
-
Direction["RowReverse"] = "row-reverse";
|
|
13
|
-
})(Direction || (Direction = {}));
|
|
14
|
-
const renderLabel = (value, labelStyle, textStyle) => {
|
|
15
|
-
if (isString(value)) {
|
|
16
|
-
return React.createElement(Text, { style: [textStyle, labelStyle] }, value);
|
|
17
|
-
}
|
|
18
|
-
else {
|
|
19
|
-
return React.createElement(React.Fragment, null, value);
|
|
20
|
-
}
|
|
21
|
-
};
|
|
22
|
-
const CheckboxRow = ({ label = "Label", labelStyle, labelContainerStyle, checkboxStyle, direction = Direction.Row, Icon, status, disabled = false, onPress, onCheck, onUncheck, color, uncheckedColor, defaultValue, checkedIcon, uncheckedIcon, size, style, ...rest }) => {
|
|
23
|
-
const [internalValue, setInternalValue] = React.useState(status || defaultValue || false);
|
|
24
|
-
React.useEffect(() => {
|
|
25
|
-
if (status != null) {
|
|
26
|
-
setInternalValue(status);
|
|
27
|
-
}
|
|
28
|
-
}, [status]);
|
|
29
|
-
// This special logic is to handle weird APIs like Airtable that return
|
|
30
|
-
// true or undefined for a boolean
|
|
31
|
-
const previousDefaultValue = usePrevious(defaultValue);
|
|
32
|
-
React.useEffect(() => {
|
|
33
|
-
if (defaultValue !== previousDefaultValue) {
|
|
34
|
-
setInternalValue(Boolean(defaultValue));
|
|
35
|
-
}
|
|
36
|
-
}, [defaultValue, previousDefaultValue]);
|
|
37
|
-
const handlePress = () => {
|
|
38
|
-
const newValue = !internalValue;
|
|
39
|
-
setInternalValue(newValue);
|
|
40
|
-
onPress === null || onPress === void 0 ? void 0 : onPress(newValue);
|
|
41
|
-
if (newValue) {
|
|
42
|
-
onCheck === null || onCheck === void 0 ? void 0 : onCheck();
|
|
43
|
-
}
|
|
44
|
-
if (!newValue) {
|
|
45
|
-
onUncheck === null || onUncheck === void 0 ? void 0 : onUncheck();
|
|
46
|
-
}
|
|
47
|
-
};
|
|
48
|
-
const { textStyles, viewStyles } = extractStyles(style);
|
|
49
|
-
return (React.createElement(Touchable, { onPress: handlePress, style: [viewStyles, styles.mainParent, { flexDirection: direction }], disabled: disabled, ...rest },
|
|
50
|
-
React.createElement(View, { style: [
|
|
51
|
-
styles.label,
|
|
52
|
-
{
|
|
53
|
-
alignItems: direction === Direction.Row ? "flex-start" : "flex-end",
|
|
54
|
-
},
|
|
55
|
-
labelContainerStyle,
|
|
56
|
-
] }, renderLabel(label, textStyles, labelStyle)),
|
|
57
|
-
React.createElement(Checkbox, { Icon: Icon, status: internalValue, style: checkboxStyle, disabled: disabled, onPress: handlePress, color: color, uncheckedColor: uncheckedColor, checkedIcon: checkedIcon, uncheckedIcon: uncheckedIcon, size: size })));
|
|
58
|
-
};
|
|
59
|
-
const styles = StyleSheet.create({
|
|
60
|
-
mainParent: {
|
|
61
|
-
alignItems: "center",
|
|
62
|
-
justifyContent: "space-around",
|
|
63
|
-
paddingStart: 20,
|
|
64
|
-
minHeight: 50,
|
|
65
|
-
paddingEnd: 20,
|
|
66
|
-
display: "flex",
|
|
67
|
-
...Platform.select({
|
|
68
|
-
web: {
|
|
69
|
-
cursor: "pointer",
|
|
70
|
-
userSelect: "none",
|
|
71
|
-
},
|
|
72
|
-
}),
|
|
73
|
-
},
|
|
74
|
-
label: {
|
|
75
|
-
flex: 3,
|
|
76
|
-
},
|
|
77
|
-
});
|
|
78
|
-
export default CheckboxRow;
|
|
@@ -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 checkboxGroupContext = createContext({
|
|
8
|
-
onValueChange: () => { },
|
|
9
|
-
values: [],
|
|
10
|
-
direction: undefined,
|
|
11
|
-
});
|
|
12
|
-
export function useCheckboxGroupContext() {
|
|
13
|
-
return useContext(checkboxGroupContext);
|
|
14
|
-
}
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { Image, } from "react-native";
|
|
3
|
-
import Config from "./Config";
|
|
4
|
-
const CircleImage = ({ source = Config.placeholderImageURL, size = 60, style, ...props }) => {
|
|
5
|
-
const borderRadius = size / 2;
|
|
6
|
-
return (React.createElement(Image, { style: [{ width: size, height: size, borderRadius }, style], source: typeof source === "string" ? { uri: source } : source, resizeMode: "cover", ...props }));
|
|
7
|
-
};
|
|
8
|
-
export default CircleImage;
|
|
@@ -1,81 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { View } from "react-native";
|
|
3
|
-
import { Svg, Path, G } from "react-native-svg";
|
|
4
|
-
class CircularProgress extends React.Component {
|
|
5
|
-
constructor() {
|
|
6
|
-
super(...arguments);
|
|
7
|
-
this.polarToCartesian = (centerX, centerY, radius, angleInDegrees) => {
|
|
8
|
-
var angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180.0;
|
|
9
|
-
return {
|
|
10
|
-
x: centerX + radius * Math.cos(angleInRadians),
|
|
11
|
-
y: centerY + radius * Math.sin(angleInRadians),
|
|
12
|
-
};
|
|
13
|
-
};
|
|
14
|
-
this.circlePath = (x, y, radius, startAngle, endAngle) => {
|
|
15
|
-
var start = this.polarToCartesian(x, y, radius, endAngle * 0.9999);
|
|
16
|
-
var end = this.polarToCartesian(x, y, radius, startAngle);
|
|
17
|
-
var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";
|
|
18
|
-
var d = [
|
|
19
|
-
"M",
|
|
20
|
-
start.x,
|
|
21
|
-
start.y,
|
|
22
|
-
"A",
|
|
23
|
-
radius,
|
|
24
|
-
radius,
|
|
25
|
-
0,
|
|
26
|
-
largeArcFlag,
|
|
27
|
-
0,
|
|
28
|
-
end.x,
|
|
29
|
-
end.y,
|
|
30
|
-
];
|
|
31
|
-
return d.join(" ");
|
|
32
|
-
};
|
|
33
|
-
this.clampFill = (fill) => Math.min(100, Math.max(0, fill));
|
|
34
|
-
}
|
|
35
|
-
render() {
|
|
36
|
-
const { size, width, backgroundWidth, tintColor = "black", tintTransparency = true, backgroundColor, style, rotation = 90, lineCap = "butt", arcSweepAngle = 360, fill, children, childrenContainerStyle, padding = 0, renderCap, dashedBackground = { width: 0, gap: 0 }, dashedTint = { width: 0, gap: 0 }, } = this.props;
|
|
37
|
-
const maxWidthCircle = backgroundWidth
|
|
38
|
-
? Math.max(width, backgroundWidth)
|
|
39
|
-
: width;
|
|
40
|
-
const sizeWithPadding = size / 2 + padding / 2;
|
|
41
|
-
const radius = size / 2 - maxWidthCircle / 2 - padding / 2;
|
|
42
|
-
const currentFillAngle = (arcSweepAngle * this.clampFill(fill)) / 100;
|
|
43
|
-
const backgroundPath = this.circlePath(sizeWithPadding, sizeWithPadding, radius, tintTransparency ? 0 : currentFillAngle, arcSweepAngle);
|
|
44
|
-
const circlePathItem = this.circlePath(sizeWithPadding, sizeWithPadding, radius, 0, currentFillAngle);
|
|
45
|
-
const coordinate = this.polarToCartesian(sizeWithPadding, sizeWithPadding, radius, currentFillAngle);
|
|
46
|
-
const cap = renderCap ? renderCap({ center: coordinate }) : null;
|
|
47
|
-
const offset = size - maxWidthCircle * 2;
|
|
48
|
-
const localChildrenContainerStyle = [
|
|
49
|
-
{
|
|
50
|
-
position: "absolute",
|
|
51
|
-
left: maxWidthCircle + padding / 2,
|
|
52
|
-
top: maxWidthCircle + padding / 2,
|
|
53
|
-
width: offset,
|
|
54
|
-
height: offset,
|
|
55
|
-
borderRadius: offset / 2,
|
|
56
|
-
alignItems: "center",
|
|
57
|
-
justifyContent: "center",
|
|
58
|
-
overflow: "hidden",
|
|
59
|
-
},
|
|
60
|
-
childrenContainerStyle,
|
|
61
|
-
];
|
|
62
|
-
const strokeDasharrayTint = dashedTint.gap > 0
|
|
63
|
-
? Object.values(dashedTint)
|
|
64
|
-
.map((value) => value.toString())
|
|
65
|
-
.join(" ")
|
|
66
|
-
: "";
|
|
67
|
-
const strokeDasharrayBackground = dashedBackground.gap > 0
|
|
68
|
-
? Object.values(dashedBackground)
|
|
69
|
-
.map((value) => value.toString())
|
|
70
|
-
.join(" ")
|
|
71
|
-
: "";
|
|
72
|
-
return (React.createElement(View, { style: style },
|
|
73
|
-
React.createElement(Svg, { width: size + padding, height: size + padding },
|
|
74
|
-
React.createElement(G, { rotation: rotation, originX: (size + padding) / 2, originY: (size + padding) / 2 },
|
|
75
|
-
backgroundColor && (React.createElement(Path, { d: backgroundPath, stroke: backgroundColor, strokeWidth: backgroundWidth || width, strokeLinecap: lineCap, strokeDasharray: strokeDasharrayBackground, fill: "transparent" })),
|
|
76
|
-
fill > 0 && (React.createElement(Path, { d: circlePathItem, stroke: tintColor, strokeWidth: width, strokeLinecap: lineCap, strokeDasharray: strokeDasharrayTint, fill: "transparent" })),
|
|
77
|
-
cap)),
|
|
78
|
-
children && (React.createElement(View, { style: localChildrenContainerStyle }, children(fill)))));
|
|
79
|
-
}
|
|
80
|
-
}
|
|
81
|
-
export default CircularProgress;
|
package/src/components/Config.js
DELETED
|
@@ -1,64 +0,0 @@
|
|
|
1
|
-
import { Dimensions, Platform } from "react-native";
|
|
2
|
-
const getWindowDimensions = () => {
|
|
3
|
-
const { width, height } = Dimensions.get("window");
|
|
4
|
-
return {
|
|
5
|
-
windowWidth: width,
|
|
6
|
-
windowHeight: height,
|
|
7
|
-
};
|
|
8
|
-
};
|
|
9
|
-
const { windowWidth, windowHeight } = getWindowDimensions();
|
|
10
|
-
const getFilters = (options) => {
|
|
11
|
-
const { width, height } = options;
|
|
12
|
-
const filters = ["c_scale", "q_auto", "dpr_auto"];
|
|
13
|
-
if (width)
|
|
14
|
-
filters.push(`w_${width}`);
|
|
15
|
-
if (height)
|
|
16
|
-
filters.push(`h_${height}`);
|
|
17
|
-
return filters.join(",");
|
|
18
|
-
};
|
|
19
|
-
const buildImageUrl = (options, name) => {
|
|
20
|
-
const filters = getFilters(options);
|
|
21
|
-
return [
|
|
22
|
-
"https://res.cloudinary.com/altos/image/upload",
|
|
23
|
-
filters,
|
|
24
|
-
`${name}.png`,
|
|
25
|
-
].join("/");
|
|
26
|
-
};
|
|
27
|
-
const getExtension = () => {
|
|
28
|
-
return Platform.OS === "web" ? ".svg" : ".png";
|
|
29
|
-
};
|
|
30
|
-
export default {
|
|
31
|
-
windowWidth,
|
|
32
|
-
windowHeight,
|
|
33
|
-
avatarImageUrl: buildImageUrl({
|
|
34
|
-
width: 60,
|
|
35
|
-
height: 60,
|
|
36
|
-
}, "Avatar"),
|
|
37
|
-
avatarImageSize: 60,
|
|
38
|
-
cardImageSize: 200,
|
|
39
|
-
cardImageUrl: "https://static.draftbit.com/images/placeholder-image" + getExtension(),
|
|
40
|
-
cardIconSize: 16,
|
|
41
|
-
cardIconBackgroundOpacity: 0.24,
|
|
42
|
-
cardIconElevation: 1,
|
|
43
|
-
placeholderImageURL: "https://static.draftbit.com/images/placeholder-image" + getExtension(),
|
|
44
|
-
getPlaceholderImageUrl: (size) => buildImageUrl({ width: size.width, height: size.height }, "image-placeholder_1"),
|
|
45
|
-
placeholderSvgURL: "https://static.draftbit.com/images/placeholder-image.svg",
|
|
46
|
-
squareImageUrl: buildImageUrl({ width: 100, height: 100 }, "Avatar"),
|
|
47
|
-
FABSize: 40,
|
|
48
|
-
FABBorderRadius: 20,
|
|
49
|
-
FABFixedHeight: 64,
|
|
50
|
-
cardContainerShortImageAspectRatio: 1,
|
|
51
|
-
rowSingleLineImageSize: 24,
|
|
52
|
-
rowMultiLineImageSize: 48,
|
|
53
|
-
rowSingleLineIconSize: 24,
|
|
54
|
-
rowMultiLineIconSize: 16,
|
|
55
|
-
headerIconSize: 24,
|
|
56
|
-
buttonIconSize: 24,
|
|
57
|
-
swiperInactiveDotSize: 6,
|
|
58
|
-
swiperActiveDotSize: 10,
|
|
59
|
-
fieldSearchBarFullIconSize: 24,
|
|
60
|
-
stepperButtonSize: 40,
|
|
61
|
-
radioButtonSize: 24,
|
|
62
|
-
topSafeAreaViewHeight: 0,
|
|
63
|
-
// topSafeAreaViewHeight: Platform.OS === "android" ? Constants.statusBarHeight : 0
|
|
64
|
-
};
|