@draftbit/core 46.4.4-cbd3a5.2 → 46.4.4-d5b88a.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/commonjs/Provider.js +9 -0
- package/lib/commonjs/components/Accordion/AccordionGroup.js +14 -0
- package/lib/commonjs/components/Accordion/AccordionItem.js +13 -0
- package/lib/commonjs/components/Accordion/index.js +3 -0
- package/lib/commonjs/components/ActionSheet/ActionSheet.js +9 -0
- package/lib/commonjs/components/ActionSheet/ActionSheetCancel.js +5 -0
- package/lib/commonjs/components/ActionSheet/ActionSheetItem.js +7 -0
- package/lib/commonjs/components/ActionSheet/index.js +4 -0
- package/lib/commonjs/components/AnimatedCircularProgress.js +15 -0
- package/lib/commonjs/components/AspectRatio.js +10 -0
- package/lib/commonjs/components/AvatarEdit.js +12 -0
- package/lib/commonjs/components/Banner.js +23 -9
- package/lib/commonjs/components/Button.js +19 -2
- package/lib/commonjs/components/Card.js +14 -0
- package/lib/commonjs/components/CardBlock.js +19 -13
- package/lib/commonjs/components/CardContainer.js +18 -0
- package/lib/commonjs/components/CardContainerRating.js +20 -2
- package/lib/commonjs/components/CardContainerShortImage.js +12 -0
- package/lib/commonjs/components/CardInline.js +14 -1
- package/lib/commonjs/components/Carousel.js +21 -3
- package/lib/commonjs/components/Checkbox/Checkbox.js +18 -3
- package/lib/commonjs/components/Checkbox/CheckboxGroup.js +11 -0
- package/lib/commonjs/components/Checkbox/CheckboxGroupRow.js +20 -0
- package/lib/commonjs/components/Checkbox/CheckboxRow.js +24 -3
- package/lib/commonjs/components/Checkbox/context.js +5 -0
- package/lib/commonjs/components/Checkbox/index.js +4 -0
- package/lib/commonjs/components/CircleImage.js +9 -0
- package/lib/commonjs/components/CircularProgress.js +13 -3
- package/lib/commonjs/components/Config.js +13 -5
- package/lib/commonjs/components/Container.js +11 -0
- package/lib/commonjs/components/DatePicker/DatePicker.js +48 -16
- package/lib/commonjs/components/DatePicker/DatePickerComponent.js +7 -0
- package/lib/commonjs/components/DatePicker/DatePickerComponent.web.js +10 -0
- package/lib/commonjs/components/DeprecatedButton.js +23 -0
- package/lib/commonjs/components/DeprecatedCardWrapper.js +11 -0
- package/lib/commonjs/components/DeprecatedFAB.js +29 -21
- package/lib/commonjs/components/Divider.js +9 -0
- package/lib/commonjs/components/Elevation.js +11 -0
- package/lib/commonjs/components/FAB.js +10 -0
- package/lib/commonjs/components/FieldSearchBarFull.js +18 -0
- package/lib/commonjs/components/FormRow.js +10 -0
- package/lib/commonjs/components/Header.js +13 -0
- package/lib/commonjs/components/HeaderLarge.js +9 -0
- package/lib/commonjs/components/HeaderMedium.js +9 -0
- package/lib/commonjs/components/HeaderOverline.js +9 -0
- package/lib/commonjs/components/IconButton.js +10 -0
- package/lib/commonjs/components/Image.js +17 -0
- package/lib/commonjs/components/Layout.js +12 -2
- package/lib/commonjs/components/NumberInput.js +21 -8
- package/lib/commonjs/components/Picker/Picker.js +42 -9
- package/lib/commonjs/components/Picker/PickerComponent.android.js +23 -6
- package/lib/commonjs/components/Picker/PickerComponent.ios.js +27 -8
- package/lib/commonjs/components/Picker/PickerComponent.web.js +23 -6
- package/lib/commonjs/components/Portal/Portal.js +14 -4
- package/lib/commonjs/components/Portal/PortalConsumer.js +15 -5
- package/lib/commonjs/components/Portal/PortalHost.js +31 -4
- package/lib/commonjs/components/Portal/PortalManager.js +19 -7
- package/lib/commonjs/components/ProgressBar.js +25 -5
- package/lib/commonjs/components/ProgressCircle.js +10 -0
- package/lib/commonjs/components/ProgressIndicator.js +9 -0
- package/lib/commonjs/components/RadioButton/RadioButton.js +14 -1
- package/lib/commonjs/components/RadioButton/RadioButtonFieldGroup.js +10 -0
- package/lib/commonjs/components/RadioButton/RadioButtonGroup.js +14 -0
- package/lib/commonjs/components/RadioButton/RadioButtonRow.js +21 -1
- package/lib/commonjs/components/RadioButton/context.js +5 -0
- package/lib/commonjs/components/RadioButton/index.js +5 -0
- package/lib/commonjs/components/Row.js +11 -0
- package/lib/commonjs/components/RowBodyIcon.js +10 -0
- package/lib/commonjs/components/RowHeadlineImageCaption.js +11 -2
- package/lib/commonjs/components/RowHeadlineImageIcon.js +10 -0
- package/lib/commonjs/components/SVG.js +9 -0
- package/lib/commonjs/components/ScreenContainer.js +14 -0
- package/lib/commonjs/components/Slider.js +21 -0
- package/lib/commonjs/components/StarRating.js +10 -0
- package/lib/commonjs/components/StepIndicator.js +39 -5
- package/lib/commonjs/components/Stepper.js +26 -7
- package/lib/commonjs/components/Surface.js +14 -0
- package/lib/commonjs/components/Swiper/Swiper.js +8 -0
- package/lib/commonjs/components/Swiper/SwiperItem.js +6 -0
- package/lib/commonjs/components/Swiper/index.js +3 -0
- package/lib/commonjs/components/Switch.js +18 -5
- package/lib/commonjs/components/Text.js +18 -3
- package/lib/commonjs/components/TextField.js +62 -12
- package/lib/commonjs/components/ToggleButton.js +14 -0
- package/lib/commonjs/components/Touchable.js +5 -0
- package/lib/commonjs/components/Touchable.web.js +2 -0
- package/lib/commonjs/components/Typography.js +5 -0
- package/lib/commonjs/components/useAuthState.js +9 -0
- package/lib/commonjs/constants.js +5 -1
- package/lib/commonjs/hooks.js +7 -4
- package/lib/commonjs/index.js +52 -0
- package/lib/commonjs/interfaces/Icon.js +5 -3
- package/lib/commonjs/mappings/Accordion.js +2 -0
- package/lib/commonjs/mappings/AccordionItem.js +2 -0
- package/lib/commonjs/mappings/ActionSheet.js +2 -0
- package/lib/commonjs/mappings/ActionSheetCancel.js +2 -0
- package/lib/commonjs/mappings/ActionSheetItem.js +2 -0
- package/lib/commonjs/mappings/ActivityIndicator.js +2 -0
- package/lib/commonjs/mappings/AudioPlayer.js +2 -0
- package/lib/commonjs/mappings/AvatarEdit.js +2 -0
- package/lib/commonjs/mappings/Banner.js +2 -0
- package/lib/commonjs/mappings/BlurView.js +2 -0
- package/lib/commonjs/mappings/Button.js +5 -6
- package/lib/commonjs/mappings/Card.js +4 -3
- package/lib/commonjs/mappings/CardBlock.js +5 -6
- package/lib/commonjs/mappings/CardContainer.js +7 -5
- package/lib/commonjs/mappings/CardContainerRating.js +4 -4
- package/lib/commonjs/mappings/CardContainerShortImage.js +2 -0
- package/lib/commonjs/mappings/CardInline.js +2 -0
- package/lib/commonjs/mappings/Carousel.js +2 -0
- package/lib/commonjs/mappings/Checkbox.js +2 -0
- package/lib/commonjs/mappings/CheckboxGroup.js +2 -0
- package/lib/commonjs/mappings/CheckboxRow.js +2 -0
- package/lib/commonjs/mappings/CircleImage.js +2 -0
- package/lib/commonjs/mappings/Container.js +2 -0
- package/lib/commonjs/mappings/CustomCode.js +2 -0
- package/lib/commonjs/mappings/DatePicker.js +4 -4
- package/lib/commonjs/mappings/Divider.js +2 -0
- package/lib/commonjs/mappings/FAB.js +2 -0
- package/lib/commonjs/mappings/Fetch.js +2 -0
- package/lib/commonjs/mappings/FieldSearchBarFull.js +3 -2
- package/lib/commonjs/mappings/FlashList.js +2 -0
- package/lib/commonjs/mappings/FlatList.js +2 -0
- package/lib/commonjs/mappings/HeaderLarge.js +2 -0
- package/lib/commonjs/mappings/HeaderMedium.js +2 -0
- package/lib/commonjs/mappings/HeaderOverline.js +2 -0
- package/lib/commonjs/mappings/HtmlElements.js +125 -0
- package/lib/commonjs/mappings/Icon.js +3 -2
- package/lib/commonjs/mappings/IconButton.js +2 -0
- package/lib/commonjs/mappings/Image.js +2 -0
- package/lib/commonjs/mappings/ImageBackground.js +2 -0
- package/lib/commonjs/mappings/KeyboardAvoidingView.js +2 -0
- package/lib/commonjs/mappings/KeyboardAwareScrollView.js +2 -0
- package/lib/commonjs/mappings/Layout.js +2 -0
- package/lib/commonjs/mappings/LinearGradient.js +2 -0
- package/lib/commonjs/mappings/MapCallout.js +2 -0
- package/lib/commonjs/mappings/MapMarker.js +2 -0
- package/lib/commonjs/mappings/MapView.js +2 -0
- package/lib/commonjs/mappings/Modal.js +2 -0
- package/lib/commonjs/mappings/NumberInput.js +4 -4
- package/lib/commonjs/mappings/Picker.js +4 -4
- package/lib/commonjs/mappings/ProgressBar.js +2 -0
- package/lib/commonjs/mappings/ProgressCircle.js +2 -0
- package/lib/commonjs/mappings/ProgressIndicator.js +2 -0
- package/lib/commonjs/mappings/RadioButton.js +2 -0
- package/lib/commonjs/mappings/RadioButtonGroup.js +2 -0
- package/lib/commonjs/mappings/RadioButtonRow.js +2 -0
- package/lib/commonjs/mappings/RowBodyIcon.js +2 -0
- package/lib/commonjs/mappings/RowHeadlineImageCaption.js +2 -0
- package/lib/commonjs/mappings/RowHeadlineImageIcon.js +8 -12
- package/lib/commonjs/mappings/SVG.js +2 -0
- package/lib/commonjs/mappings/SafeAreaView.js +2 -0
- package/lib/commonjs/mappings/ScrollView.js +2 -0
- package/lib/commonjs/mappings/Slider.js +2 -0
- package/lib/commonjs/mappings/StarRating.js +3 -1
- package/lib/commonjs/mappings/Stepper.js +3 -1
- package/lib/commonjs/mappings/Surface.js +2 -0
- package/lib/commonjs/mappings/Swiper.js +2 -0
- package/lib/commonjs/mappings/SwiperItem.js +2 -0
- package/lib/commonjs/mappings/Switch.js +2 -0
- package/lib/commonjs/mappings/Text.js +5 -5
- package/lib/commonjs/mappings/TextArea.js +3 -2
- package/lib/commonjs/mappings/TextField.js +8 -7
- package/lib/commonjs/mappings/TextInput.js +3 -2
- package/lib/commonjs/mappings/ToggleButton.js +2 -0
- package/lib/commonjs/mappings/Touchable.js +2 -0
- package/lib/commonjs/mappings/Video.js +2 -0
- package/lib/commonjs/mappings/View.js +2 -0
- package/lib/commonjs/mappings/WebView.js +2 -0
- package/lib/commonjs/styles/DarkTheme.js +6 -5
- package/lib/commonjs/styles/DefaultTheme.js +17 -26
- package/lib/commonjs/styles/fonts.js +5 -3
- package/lib/commonjs/styles/overlay.js +14 -5
- package/lib/commonjs/styles/shadow.js +9 -0
- package/lib/commonjs/theming.js +4 -0
- package/lib/commonjs/utilities.js +14 -2
- package/lib/module/Provider.js +1 -0
- package/lib/module/components/Accordion/AccordionGroup.js +4 -0
- package/lib/module/components/Accordion/AccordionItem.js +3 -0
- package/lib/module/components/ActionSheet/ActionSheet.js +2 -0
- package/lib/module/components/ActionSheet/ActionSheetCancel.js +2 -0
- package/lib/module/components/ActionSheet/ActionSheetItem.js +2 -0
- package/lib/module/components/AnimatedCircularProgress.js +6 -0
- package/lib/module/components/AspectRatio.js +6 -0
- package/lib/module/components/AvatarEdit.js +3 -0
- package/lib/module/components/Banner.js +10 -9
- package/lib/module/components/Button.js +10 -2
- package/lib/module/components/Card.js +2 -0
- package/lib/module/components/CardBlock.js +6 -0
- package/lib/module/components/CardContainer.js +7 -0
- package/lib/module/components/CardContainerRating.js +8 -2
- package/lib/module/components/CardContainerShortImage.js +3 -0
- package/lib/module/components/CardInline.js +2 -0
- package/lib/module/components/Carousel.js +9 -3
- package/lib/module/components/Checkbox/Checkbox.js +9 -3
- package/lib/module/components/Checkbox/CheckboxGroup.js +5 -0
- package/lib/module/components/Checkbox/CheckboxGroupRow.js +8 -0
- package/lib/module/components/Checkbox/CheckboxRow.js +11 -3
- package/lib/module/components/Checkbox/context.js +2 -0
- package/lib/module/components/CircleImage.js +3 -0
- package/lib/module/components/CircularProgress.js +9 -3
- package/lib/module/components/Config.js +11 -5
- package/lib/module/components/Container.js +3 -0
- package/lib/module/components/DatePicker/DatePicker.js +33 -16
- package/lib/module/components/DatePicker/DatePickerComponent.js +2 -0
- package/lib/module/components/DatePicker/DatePickerComponent.web.js +2 -0
- package/lib/module/components/DeprecatedButton.js +9 -0
- package/lib/module/components/DeprecatedCardWrapper.js +6 -0
- package/lib/module/components/DeprecatedFAB.js +13 -0
- package/lib/module/components/Divider.js +3 -0
- package/lib/module/components/Elevation.js +3 -0
- package/lib/module/components/FAB.js +3 -0
- package/lib/module/components/FieldSearchBarFull.js +9 -0
- package/lib/module/components/FormRow.js +1 -0
- package/lib/module/components/Header.js +2 -0
- package/lib/module/components/HeaderLarge.js +2 -0
- package/lib/module/components/HeaderMedium.js +2 -0
- package/lib/module/components/HeaderOverline.js +2 -0
- package/lib/module/components/IconButton.js +3 -0
- package/lib/module/components/Image.js +10 -0
- package/lib/module/components/Layout.js +3 -4
- package/lib/module/components/NumberInput.js +16 -8
- package/lib/module/components/Picker/Picker.js +25 -8
- package/lib/module/components/Picker/PickerComponent.android.js +10 -6
- package/lib/module/components/Picker/PickerComponent.ios.js +11 -8
- package/lib/module/components/Picker/PickerComponent.web.js +10 -6
- package/lib/module/components/Portal/Portal.js +6 -4
- package/lib/module/components/Portal/PortalConsumer.js +10 -5
- package/lib/module/components/Portal/PortalHost.js +22 -4
- package/lib/module/components/Portal/PortalManager.js +14 -7
- package/lib/module/components/ProgressBar.js +17 -5
- package/lib/module/components/ProgressCircle.js +2 -0
- package/lib/module/components/ProgressIndicator.js +2 -0
- package/lib/module/components/RadioButton/RadioButton.js +6 -1
- package/lib/module/components/RadioButton/RadioButtonFieldGroup.js +3 -0
- package/lib/module/components/RadioButton/RadioButtonGroup.js +7 -0
- package/lib/module/components/RadioButton/RadioButtonRow.js +9 -1
- package/lib/module/components/RadioButton/context.js +2 -0
- package/lib/module/components/Row.js +2 -0
- package/lib/module/components/RowBodyIcon.js +2 -0
- package/lib/module/components/RowHeadlineImageCaption.js +3 -2
- package/lib/module/components/RowHeadlineImageIcon.js +2 -0
- package/lib/module/components/SVG.js +2 -0
- package/lib/module/components/ScreenContainer.js +6 -0
- package/lib/module/components/Slider.js +10 -0
- package/lib/module/components/StarRating.js +3 -0
- package/lib/module/components/StepIndicator.js +29 -5
- package/lib/module/components/Stepper.js +16 -9
- package/lib/module/components/Surface.js +5 -0
- package/lib/module/components/Swiper/Swiper.js +4 -0
- package/lib/module/components/Swiper/SwiperItem.js +2 -0
- package/lib/module/components/Switch.js +7 -5
- package/lib/module/components/Text.js +10 -3
- package/lib/module/components/TextField.js +50 -12
- package/lib/module/components/ToggleButton.js +5 -0
- package/lib/module/components/Touchable.js +1 -0
- package/lib/module/components/useAuthState.js +4 -0
- package/lib/module/constants.js +1 -2
- package/lib/module/hooks.js +2 -4
- package/lib/module/index.js +2 -4
- package/lib/module/interfaces/Icon.js +1 -2
- package/lib/module/mappings/Button.js +3 -6
- package/lib/module/mappings/Card.js +2 -3
- package/lib/module/mappings/CardBlock.js +3 -6
- package/lib/module/mappings/CardContainer.js +5 -5
- package/lib/module/mappings/CardContainerRating.js +2 -4
- package/lib/module/mappings/DatePicker.js +2 -4
- package/lib/module/mappings/Fetch.js +1 -0
- package/lib/module/mappings/FieldSearchBarFull.js +1 -2
- package/lib/module/mappings/HtmlElements.js +116 -0
- package/lib/module/mappings/Icon.js +1 -2
- package/lib/module/mappings/NumberInput.js +2 -4
- package/lib/module/mappings/Picker.js +2 -4
- package/lib/module/mappings/RowHeadlineImageIcon.js +6 -12
- package/lib/module/mappings/StarRating.js +1 -1
- package/lib/module/mappings/Stepper.js +2 -2
- package/lib/module/mappings/Text.js +3 -5
- package/lib/module/mappings/TextArea.js +1 -2
- package/lib/module/mappings/TextField.js +6 -7
- package/lib/module/mappings/TextInput.js +1 -2
- package/lib/module/styles/DarkTheme.js +2 -4
- package/lib/module/styles/DefaultTheme.js +13 -26
- package/lib/module/styles/fonts.js +1 -2
- package/lib/module/styles/overlay.js +10 -4
- package/lib/module/styles/shadow.js +6 -0
- package/lib/module/utilities.js +5 -2
- package/lib/typescript/src/components/Stepper.d.ts +1 -2
- package/lib/typescript/src/mappings/HtmlElements.d.ts +49 -0
- package/package.json +4 -3
- package/src/components/Picker/Picker.js +1 -1
- package/src/components/Picker/Picker.tsx +2 -2
- package/src/components/Stepper.js +5 -3
- package/src/components/Stepper.tsx +5 -5
- package/src/mappings/HtmlElements.js +141 -0
- package/src/mappings/HtmlElements.ts +151 -0
- package/src/mappings/Stepper.js +5 -2
- package/src/mappings/Stepper.ts +5 -1
|
@@ -4,9 +4,13 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
+
|
|
7
8
|
var _reactNativeTypography = require("react-native-typography");
|
|
9
|
+
|
|
8
10
|
var _fonts = _interopRequireDefault(require("./fonts"));
|
|
11
|
+
|
|
9
12
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
|
+
|
|
10
14
|
const DefaultTheme = {
|
|
11
15
|
disabledOpacity: 0.5,
|
|
12
16
|
roundness: 8,
|
|
@@ -35,80 +39,67 @@ const DefaultTheme = {
|
|
|
35
39
|
},
|
|
36
40
|
fonts: (0, _fonts.default)(),
|
|
37
41
|
typography: {
|
|
38
|
-
headline1: {
|
|
39
|
-
..._reactNativeTypography.systemWeights.regular,
|
|
42
|
+
headline1: { ..._reactNativeTypography.systemWeights.regular,
|
|
40
43
|
fontSize: 60,
|
|
41
44
|
letterSpacing: 0,
|
|
42
45
|
lineHeight: 71
|
|
43
46
|
},
|
|
44
|
-
headline2: {
|
|
45
|
-
..._reactNativeTypography.systemWeights.regular,
|
|
47
|
+
headline2: { ..._reactNativeTypography.systemWeights.regular,
|
|
46
48
|
fontSize: 48,
|
|
47
49
|
letterSpacing: 0,
|
|
48
50
|
lineHeight: 58
|
|
49
51
|
},
|
|
50
|
-
headline3: {
|
|
51
|
-
..._reactNativeTypography.systemWeights.regular,
|
|
52
|
+
headline3: { ..._reactNativeTypography.systemWeights.regular,
|
|
52
53
|
fontSize: 34,
|
|
53
54
|
letterSpacing: 0,
|
|
54
55
|
lineHeight: 40
|
|
55
56
|
},
|
|
56
|
-
headline4: {
|
|
57
|
-
..._reactNativeTypography.systemWeights.regular,
|
|
57
|
+
headline4: { ..._reactNativeTypography.systemWeights.regular,
|
|
58
58
|
fontSize: 24,
|
|
59
59
|
letterSpacing: 0,
|
|
60
60
|
lineHeight: 34
|
|
61
61
|
},
|
|
62
|
-
headline5: {
|
|
63
|
-
..._reactNativeTypography.systemWeights.regular,
|
|
62
|
+
headline5: { ..._reactNativeTypography.systemWeights.regular,
|
|
64
63
|
fontSize: 20,
|
|
65
64
|
letterSpacing: 0,
|
|
66
65
|
lineHeight: 26
|
|
67
66
|
},
|
|
68
|
-
subtitle1: {
|
|
69
|
-
..._reactNativeTypography.systemWeights.regular,
|
|
67
|
+
subtitle1: { ..._reactNativeTypography.systemWeights.regular,
|
|
70
68
|
fontSize: 16,
|
|
71
69
|
letterSpacing: 0,
|
|
72
70
|
lineHeight: 26
|
|
73
71
|
},
|
|
74
|
-
subtitle2: {
|
|
75
|
-
..._reactNativeTypography.systemWeights.regular,
|
|
72
|
+
subtitle2: { ..._reactNativeTypography.systemWeights.regular,
|
|
76
73
|
fontSize: 14,
|
|
77
74
|
letterSpacing: 0,
|
|
78
75
|
lineHeight: 22
|
|
79
76
|
},
|
|
80
|
-
body1: {
|
|
81
|
-
..._reactNativeTypography.systemWeights.regular,
|
|
77
|
+
body1: { ..._reactNativeTypography.systemWeights.regular,
|
|
82
78
|
fontSize: 16,
|
|
83
79
|
letterSpacing: 0,
|
|
84
80
|
lineHeight: 26
|
|
85
81
|
},
|
|
86
|
-
body2: {
|
|
87
|
-
..._reactNativeTypography.systemWeights.regular,
|
|
82
|
+
body2: { ..._reactNativeTypography.systemWeights.regular,
|
|
88
83
|
fontSize: 14,
|
|
89
84
|
letterSpacing: 0,
|
|
90
85
|
lineHeight: 22
|
|
91
86
|
},
|
|
92
|
-
button: {
|
|
93
|
-
..._reactNativeTypography.systemWeights.regular,
|
|
87
|
+
button: { ..._reactNativeTypography.systemWeights.regular,
|
|
94
88
|
fontSize: 14,
|
|
95
89
|
letterSpacing: 0,
|
|
96
90
|
lineHeight: 16
|
|
97
91
|
},
|
|
98
|
-
caption: {
|
|
99
|
-
..._reactNativeTypography.systemWeights.regular,
|
|
92
|
+
caption: { ..._reactNativeTypography.systemWeights.regular,
|
|
100
93
|
fontSize: 12,
|
|
101
94
|
letterSpacing: 0,
|
|
102
95
|
lineHeight: 16
|
|
103
96
|
},
|
|
104
|
-
overline: {
|
|
105
|
-
..._reactNativeTypography.systemWeights.regular,
|
|
97
|
+
overline: { ..._reactNativeTypography.systemWeights.regular,
|
|
106
98
|
fontSize: 12,
|
|
107
99
|
letterSpacing: 2,
|
|
108
100
|
lineHeight: 16
|
|
109
101
|
},
|
|
110
|
-
headline6: {
|
|
111
|
-
..._reactNativeTypography.systemWeights.regular,
|
|
102
|
+
headline6: { ..._reactNativeTypography.systemWeights.regular,
|
|
112
103
|
fontSize: 16,
|
|
113
104
|
letterSpacing: 0,
|
|
114
105
|
lineHeight: 24
|
|
@@ -4,9 +4,10 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = configureFonts;
|
|
7
|
+
|
|
7
8
|
var _reactNative = require("react-native");
|
|
8
|
-
/* https://github.com/callstack/react-native-paper/blob/main/src/styles/fonts.tsx */
|
|
9
9
|
|
|
10
|
+
/* https://github.com/callstack/react-native-paper/blob/main/src/styles/fonts.tsx */
|
|
10
11
|
const fontConfig = {
|
|
11
12
|
web: {
|
|
12
13
|
regular: {
|
|
@@ -63,10 +64,11 @@ const fontConfig = {
|
|
|
63
64
|
}
|
|
64
65
|
}
|
|
65
66
|
};
|
|
67
|
+
|
|
66
68
|
function configureFonts(config) {
|
|
67
|
-
const fonts = _reactNative.Platform.select({
|
|
68
|
-
...fontConfig,
|
|
69
|
+
const fonts = _reactNative.Platform.select({ ...fontConfig,
|
|
69
70
|
...config
|
|
70
71
|
});
|
|
72
|
+
|
|
71
73
|
return fonts;
|
|
72
74
|
}
|
|
@@ -4,33 +4,40 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = overlay;
|
|
7
|
+
|
|
7
8
|
var _color = _interopRequireDefault(require("color"));
|
|
9
|
+
|
|
8
10
|
var _reactNative = require("react-native");
|
|
11
|
+
|
|
9
12
|
var _DarkTheme = _interopRequireDefault(require("./DarkTheme"));
|
|
13
|
+
|
|
10
14
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
11
|
-
/* Copied from https://github.com/callstack/react-native-paper/blob/main/src/styles/overlay.tsx */
|
|
12
15
|
|
|
16
|
+
/* Copied from https://github.com/callstack/react-native-paper/blob/main/src/styles/overlay.tsx */
|
|
13
17
|
const isAnimatedValue = it => it instanceof _reactNative.Animated.Value;
|
|
18
|
+
|
|
14
19
|
function overlay(elevation) {
|
|
15
20
|
let surfaceColor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _DarkTheme.default.colors.surface;
|
|
21
|
+
|
|
16
22
|
if (isAnimatedValue(elevation)) {
|
|
17
|
-
const inputRange = [0, 1, 2, 3, 8, 24];
|
|
23
|
+
const inputRange = [0, 1, 2, 3, 8, 24]; // @ts-expect-error: TS doesn't seem to refine the type correctly
|
|
18
24
|
|
|
19
|
-
// @ts-expect-error: TS doesn't seem to refine the type correctly
|
|
20
25
|
return elevation.interpolate({
|
|
21
26
|
inputRange,
|
|
22
27
|
outputRange: inputRange.map(e => {
|
|
23
28
|
return calculateColor(surfaceColor, e);
|
|
24
29
|
})
|
|
25
30
|
});
|
|
26
|
-
}
|
|
31
|
+
} // @ts-expect-error: TS doesn't seem to refine the type correctly
|
|
32
|
+
|
|
27
33
|
|
|
28
|
-
// @ts-expect-error: TS doesn't seem to refine the type correctly
|
|
29
34
|
return calculateColor(surfaceColor, elevation);
|
|
30
35
|
}
|
|
36
|
+
|
|
31
37
|
function calculateColor(surfaceColor) {
|
|
32
38
|
let elevation = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
|
|
33
39
|
let overlayTransparency;
|
|
40
|
+
|
|
34
41
|
if (elevation >= 1 && elevation <= 24) {
|
|
35
42
|
overlayTransparency = elevationOverlayTransparency[elevation];
|
|
36
43
|
} else if (elevation > 24) {
|
|
@@ -38,8 +45,10 @@ function calculateColor(surfaceColor) {
|
|
|
38
45
|
} else {
|
|
39
46
|
overlayTransparency = elevationOverlayTransparency[1];
|
|
40
47
|
}
|
|
48
|
+
|
|
41
49
|
return (0, _color.default)(surfaceColor).mix((0, _color.default)("white"), overlayTransparency * 0.01).hex();
|
|
42
50
|
}
|
|
51
|
+
|
|
43
52
|
const elevationOverlayTransparency = {
|
|
44
53
|
1: 5,
|
|
45
54
|
2: 7,
|
|
@@ -4,11 +4,15 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = shadow;
|
|
7
|
+
|
|
7
8
|
var _reactNative = require("react-native");
|
|
9
|
+
|
|
8
10
|
const SHADOW_COLOR = "#000";
|
|
9
11
|
const SHADOW_OPACITY = 0.24;
|
|
12
|
+
|
|
10
13
|
function shadow() {
|
|
11
14
|
let elevation = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
|
|
15
|
+
|
|
12
16
|
if (elevation instanceof _reactNative.Animated.Value) {
|
|
13
17
|
const inputRange = [0, 1, 2, 3, 8, 24];
|
|
14
18
|
return {
|
|
@@ -30,20 +34,25 @@ function shadow() {
|
|
|
30
34
|
if (elevation === 0) {
|
|
31
35
|
return {};
|
|
32
36
|
}
|
|
37
|
+
|
|
33
38
|
let height, radius;
|
|
39
|
+
|
|
34
40
|
switch (elevation) {
|
|
35
41
|
case 1:
|
|
36
42
|
height = 0.5;
|
|
37
43
|
radius = 0.75;
|
|
38
44
|
break;
|
|
45
|
+
|
|
39
46
|
case 2:
|
|
40
47
|
height = 0.75;
|
|
41
48
|
radius = 1.5;
|
|
42
49
|
break;
|
|
50
|
+
|
|
43
51
|
default:
|
|
44
52
|
height = elevation - 1;
|
|
45
53
|
radius = elevation;
|
|
46
54
|
}
|
|
55
|
+
|
|
47
56
|
return {
|
|
48
57
|
shadowColor: SHADOW_COLOR,
|
|
49
58
|
shadowOffset: {
|
package/lib/commonjs/theming.js
CHANGED
|
@@ -4,9 +4,13 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.withTheme = exports.useTheme = exports.ThemeProvider = void 0;
|
|
7
|
+
|
|
7
8
|
var _reactThemeProvider = require("@draftbit/react-theme-provider");
|
|
9
|
+
|
|
8
10
|
var _DefaultTheme = _interopRequireDefault(require("./styles/DefaultTheme"));
|
|
11
|
+
|
|
9
12
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
|
+
|
|
10
14
|
const {
|
|
11
15
|
ThemeProvider,
|
|
12
16
|
withTheme,
|
|
@@ -9,8 +9,11 @@ exports.extractBorderAndMarginStyles = extractBorderAndMarginStyles;
|
|
|
9
9
|
exports.extractStyles = extractStyles;
|
|
10
10
|
exports.getValueForRadioButton = getValueForRadioButton;
|
|
11
11
|
exports.marginStyleNames = void 0;
|
|
12
|
+
|
|
12
13
|
var _reactNative = require("react-native");
|
|
14
|
+
|
|
13
15
|
var _lodash = require("lodash");
|
|
16
|
+
|
|
14
17
|
function extractStyles(style) {
|
|
15
18
|
const {
|
|
16
19
|
color,
|
|
@@ -26,6 +29,7 @@ function extractStyles(style) {
|
|
|
26
29
|
textDecorationStyle,
|
|
27
30
|
...viewStyles
|
|
28
31
|
} = _reactNative.StyleSheet.flatten(style || {});
|
|
32
|
+
|
|
29
33
|
const textStyles = {
|
|
30
34
|
color,
|
|
31
35
|
fontFamily,
|
|
@@ -44,12 +48,15 @@ function extractStyles(style) {
|
|
|
44
48
|
textStyles
|
|
45
49
|
};
|
|
46
50
|
}
|
|
51
|
+
|
|
47
52
|
const borderStyleNames = ["borderRadius", "borderBottomColor", "borderBottomEndRadius", "borderBottomLeftRadius", "borderBottomRightRadius", "borderBottomStartRadius", "borderBottomWidth", "borderColor", "borderEndColor", "borderLeftColor", "borderLeftWidth", "borderRadius", "borderRightColor", "borderRightWidth", "borderStartColor", "borderStyle", "borderTopColor", "borderTopEndRadius", "borderTopLeftRadius", "borderTopRightRadius", "borderTopStartRadius", "borderTopWidth", "borderWidth"];
|
|
48
53
|
exports.borderStyleNames = borderStyleNames;
|
|
49
54
|
const marginStyleNames = ["margin", "marginBottom", "marginEnd", "marginHorizontal", "marginLeft", "marginRight", "marginStart", "marginTop", "marginVertical"];
|
|
50
55
|
exports.marginStyleNames = marginStyleNames;
|
|
56
|
+
|
|
51
57
|
function extractBorderAndMarginStyles(style, additionalBorderStyles, additionalMarginStyles) {
|
|
52
58
|
const flatStyle = _reactNative.StyleSheet.flatten(style || {});
|
|
59
|
+
|
|
53
60
|
const borderStyles = (0, _lodash.pickBy)((0, _lodash.pick)(flatStyle, [...borderStyleNames, ...(additionalBorderStyles ? additionalBorderStyles : [])]), _lodash.identity);
|
|
54
61
|
const marginStyles = (0, _lodash.pickBy)((0, _lodash.pick)(flatStyle, [...marginStyleNames, ...(additionalMarginStyles ? additionalMarginStyles : [])]), _lodash.identity);
|
|
55
62
|
return {
|
|
@@ -57,7 +64,6 @@ function extractBorderAndMarginStyles(style, additionalBorderStyles, additionalM
|
|
|
57
64
|
marginStyles
|
|
58
65
|
};
|
|
59
66
|
}
|
|
60
|
-
|
|
61
67
|
/**
|
|
62
68
|
* Merges a style object on top of another style object. In React Native,
|
|
63
69
|
* keys with undefined values in a style object will still override styles
|
|
@@ -70,24 +76,30 @@ function extractBorderAndMarginStyles(style, additionalBorderStyles, additionalM
|
|
|
70
76
|
* `const mergedStyles = StyleSheet.compose({ color: "red" }, { color: undefined })`
|
|
71
77
|
* `const mergedStyles = StyleSheet.flatten([{ color: "red" }, { color: undefined }])`
|
|
72
78
|
*/
|
|
79
|
+
|
|
80
|
+
|
|
73
81
|
function applyStyles(baseStyles, stylesToApply) {
|
|
74
82
|
if (!stylesToApply) {
|
|
75
83
|
return;
|
|
76
84
|
}
|
|
85
|
+
|
|
77
86
|
const flattenedStyles = _reactNative.StyleSheet.flatten(baseStyles);
|
|
87
|
+
|
|
78
88
|
for (const [key, value] of Object.entries(stylesToApply)) {
|
|
79
89
|
if (value != null) {
|
|
80
90
|
flattenedStyles[key] = value;
|
|
81
91
|
}
|
|
82
92
|
}
|
|
93
|
+
|
|
83
94
|
return flattenedStyles;
|
|
84
95
|
}
|
|
96
|
+
|
|
85
97
|
function getValueForRadioButton(value) {
|
|
86
98
|
if ((0, _lodash.isString)(value)) {
|
|
87
99
|
return value;
|
|
88
100
|
} else if ((0, _lodash.isNumber)(value)) {
|
|
89
101
|
return String(value);
|
|
90
102
|
} else {
|
|
91
|
-
throw new Error(
|
|
103
|
+
throw new Error("Invalid value: ".concat(value));
|
|
92
104
|
}
|
|
93
105
|
}
|
package/lib/module/Provider.js
CHANGED
|
@@ -3,6 +3,7 @@ import { View, StyleSheet, Pressable } from "react-native";
|
|
|
3
3
|
import Text from "../Text";
|
|
4
4
|
import { withTheme } from "../../theming";
|
|
5
5
|
import { extractStyles } from "../../utilities";
|
|
6
|
+
|
|
6
7
|
const AccordionGroup = _ref => {
|
|
7
8
|
let {
|
|
8
9
|
label,
|
|
@@ -27,9 +28,11 @@ const AccordionGroup = _ref => {
|
|
|
27
28
|
const collapsedColor = closedColor || theme.colors.primary;
|
|
28
29
|
const labelColor = expanded ? expandedColor : collapsedColor;
|
|
29
30
|
const caretColor = caretColorProp || labelColor;
|
|
31
|
+
|
|
30
32
|
const handlePressAction = () => {
|
|
31
33
|
setExpanded(!expanded);
|
|
32
34
|
};
|
|
35
|
+
|
|
33
36
|
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Pressable, {
|
|
34
37
|
style: [styles.row, viewStyles],
|
|
35
38
|
onPress: handlePressAction,
|
|
@@ -52,6 +55,7 @@ const AccordionGroup = _ref => {
|
|
|
52
55
|
size: caretSize
|
|
53
56
|
})), expanded ? children : null);
|
|
54
57
|
};
|
|
58
|
+
|
|
55
59
|
const styles = StyleSheet.create({
|
|
56
60
|
row: {
|
|
57
61
|
flexDirection: "row",
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
+
|
|
2
3
|
import * as React from "react";
|
|
3
4
|
import { Pressable, StyleSheet, View } from "react-native";
|
|
4
5
|
import Text from "../Text";
|
|
5
6
|
import { extractStyles } from "../../utilities";
|
|
6
7
|
import { withTheme } from "../../theming";
|
|
8
|
+
|
|
7
9
|
const AccordionItem = _ref => {
|
|
8
10
|
let {
|
|
9
11
|
Icon,
|
|
@@ -33,6 +35,7 @@ const AccordionItem = _ref => {
|
|
|
33
35
|
style: textStyles
|
|
34
36
|
}, label))));
|
|
35
37
|
};
|
|
38
|
+
|
|
36
39
|
const styles = StyleSheet.create({
|
|
37
40
|
container: {
|
|
38
41
|
padding: 8
|
|
@@ -3,6 +3,7 @@ import { View, StyleSheet } from "react-native";
|
|
|
3
3
|
import Portal from "../Portal/Portal";
|
|
4
4
|
import Touchable from "../Touchable";
|
|
5
5
|
import ActionSheetCancel from "./ActionSheetCancel";
|
|
6
|
+
|
|
6
7
|
const ActionSheet = _ref => {
|
|
7
8
|
let {
|
|
8
9
|
visible = false,
|
|
@@ -22,6 +23,7 @@ const ActionSheet = _ref => {
|
|
|
22
23
|
style: styles.group
|
|
23
24
|
}, React.Children.toArray(children).filter(child => child.type === ActionSheetCancel))))) : /*#__PURE__*/React.createElement(React.Fragment, null);
|
|
24
25
|
};
|
|
26
|
+
|
|
25
27
|
const styles = StyleSheet.create({
|
|
26
28
|
wrapper: {
|
|
27
29
|
flex: 1,
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import ActionSheetItem from "./ActionSheetItem";
|
|
3
|
+
|
|
3
4
|
const ActionSheetCancel = _ref => {
|
|
4
5
|
let {
|
|
5
6
|
label = "Cancel",
|
|
@@ -14,4 +15,5 @@ const ActionSheetCancel = _ref => {
|
|
|
14
15
|
onPress: onPress
|
|
15
16
|
});
|
|
16
17
|
};
|
|
18
|
+
|
|
17
19
|
export default ActionSheetCancel;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { Text, StyleSheet, TouchableOpacity } from "react-native";
|
|
3
3
|
import { extractStyles } from "../../utilities";
|
|
4
|
+
|
|
4
5
|
const ActionSheetItem = _ref => {
|
|
5
6
|
let {
|
|
6
7
|
label,
|
|
@@ -22,6 +23,7 @@ const ActionSheetItem = _ref => {
|
|
|
22
23
|
}]
|
|
23
24
|
}, label));
|
|
24
25
|
};
|
|
26
|
+
|
|
25
27
|
const styles = StyleSheet.create({
|
|
26
28
|
wrapper: {
|
|
27
29
|
borderBottomWidth: StyleSheet.hairlineWidth,
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
+
|
|
2
3
|
import * as React from "react";
|
|
3
4
|
import { Animated, Easing } from "react-native";
|
|
4
5
|
import CircularProgress from "./CircularProgress";
|
|
5
6
|
const AnimatedProgress = Animated.createAnimatedComponent(CircularProgress);
|
|
7
|
+
|
|
6
8
|
const AnimatedCircularProgress = _ref => {
|
|
7
9
|
let {
|
|
8
10
|
duration = 500,
|
|
@@ -33,16 +35,19 @@ const AnimatedCircularProgress = _ref => {
|
|
|
33
35
|
anim.start(onAnimationComplete);
|
|
34
36
|
return anim;
|
|
35
37
|
}, [duration, easing, fill, useNativeDriver, fillAnimation, onAnimationComplete]);
|
|
38
|
+
|
|
36
39
|
const animateColor = () => {
|
|
37
40
|
if (!tintColorSecondary) {
|
|
38
41
|
return tintColor;
|
|
39
42
|
}
|
|
43
|
+
|
|
40
44
|
const tintAnimation = fillAnimation.interpolate({
|
|
41
45
|
inputRange: [0, 100],
|
|
42
46
|
outputRange: [tintColor, tintColorSecondary]
|
|
43
47
|
});
|
|
44
48
|
return tintAnimation;
|
|
45
49
|
};
|
|
50
|
+
|
|
46
51
|
React.useEffect(() => {
|
|
47
52
|
animate();
|
|
48
53
|
}, [fill, animate]);
|
|
@@ -53,4 +58,5 @@ const AnimatedCircularProgress = _ref => {
|
|
|
53
58
|
tintColor: animateColor()
|
|
54
59
|
}));
|
|
55
60
|
};
|
|
61
|
+
|
|
56
62
|
export default AnimatedCircularProgress;
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
+
|
|
2
3
|
import React from "react";
|
|
3
4
|
import { View, StyleSheet } from "react-native";
|
|
5
|
+
|
|
4
6
|
const AspectRatio = props => {
|
|
5
7
|
const [layout, setLayout] = React.useState(null);
|
|
6
8
|
const {
|
|
@@ -10,11 +12,13 @@ const AspectRatio = props => {
|
|
|
10
12
|
const style = [inputStyle, {
|
|
11
13
|
aspectRatio
|
|
12
14
|
}];
|
|
15
|
+
|
|
13
16
|
if (layout) {
|
|
14
17
|
const {
|
|
15
18
|
width = 0,
|
|
16
19
|
height = 0
|
|
17
20
|
} = layout;
|
|
21
|
+
|
|
18
22
|
if (width === 0) {
|
|
19
23
|
style.push({
|
|
20
24
|
width: height * (1 / aspectRatio),
|
|
@@ -27,6 +31,7 @@ const AspectRatio = props => {
|
|
|
27
31
|
});
|
|
28
32
|
}
|
|
29
33
|
}
|
|
34
|
+
|
|
30
35
|
return /*#__PURE__*/React.createElement(View, _extends({}, props, {
|
|
31
36
|
style: style,
|
|
32
37
|
onLayout: _ref => {
|
|
@@ -39,4 +44,5 @@ const AspectRatio = props => {
|
|
|
39
44
|
}
|
|
40
45
|
}), props.children);
|
|
41
46
|
};
|
|
47
|
+
|
|
42
48
|
export default AspectRatio;
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
+
|
|
2
3
|
import * as React from "react";
|
|
3
4
|
import { View } from "react-native";
|
|
4
5
|
import Touchable from "./Touchable";
|
|
5
6
|
import CircleImage from "./CircleImage";
|
|
6
7
|
import { withTheme } from "../theming";
|
|
8
|
+
|
|
7
9
|
const AvatarEdit = _ref => {
|
|
8
10
|
let {
|
|
9
11
|
Icon,
|
|
@@ -46,4 +48,5 @@ const AvatarEdit = _ref => {
|
|
|
46
48
|
size: size * (3 / 16)
|
|
47
49
|
}))));
|
|
48
50
|
};
|
|
51
|
+
|
|
49
52
|
export default withTheme(AvatarEdit);
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
+
|
|
2
3
|
import * as React from "react";
|
|
3
4
|
import { Button, Text, View, StyleSheet, Animated } from "react-native";
|
|
4
5
|
import Surface from "./Surface";
|
|
@@ -6,6 +7,7 @@ import shadow from "../styles/shadow";
|
|
|
6
7
|
import { withTheme } from "../theming";
|
|
7
8
|
const ELEVATION = 1;
|
|
8
9
|
const DEFAULT_MAX_WIDTH = 960;
|
|
10
|
+
|
|
9
11
|
const Banner = _ref => {
|
|
10
12
|
let {
|
|
11
13
|
initiallyVisible = true,
|
|
@@ -49,6 +51,7 @@ const Banner = _ref => {
|
|
|
49
51
|
}).start();
|
|
50
52
|
}
|
|
51
53
|
}, [visible, position]);
|
|
54
|
+
|
|
52
55
|
const handleLayout = _ref2 => {
|
|
53
56
|
let {
|
|
54
57
|
nativeEvent
|
|
@@ -60,15 +63,15 @@ const Banner = _ref => {
|
|
|
60
63
|
height,
|
|
61
64
|
measured: true
|
|
62
65
|
});
|
|
63
|
-
};
|
|
64
|
-
|
|
65
|
-
// The banner animation has 2 parts:
|
|
66
|
+
}; // The banner animation has 2 parts:
|
|
66
67
|
// 1. Blank spacer element which animates its height to move the content
|
|
67
68
|
// 2. Actual banner which animates its translateY
|
|
68
69
|
// In initial render, we position everything normally and measure the height of the banner
|
|
69
70
|
// Once we have the height, we apply the height to the spacer and switch the banner to position: absolute
|
|
70
71
|
// We need this because we need to move the content below as if banner's height was being animated
|
|
71
72
|
// However we can't animated banner's height directly as it'll also resize the content inside
|
|
73
|
+
|
|
74
|
+
|
|
72
75
|
const height = Animated.multiply(position, layout.height);
|
|
73
76
|
const translateY = Animated.multiply(Animated.add(position, -1), layout.height);
|
|
74
77
|
return /*#__PURE__*/React.createElement(Surface, _extends({}, rest, {
|
|
@@ -81,17 +84,14 @@ const Banner = _ref => {
|
|
|
81
84
|
}
|
|
82
85
|
}), /*#__PURE__*/React.createElement(Animated.View, {
|
|
83
86
|
onLayout: handleLayout,
|
|
84
|
-
style: [layout.measured || !visible ?
|
|
85
|
-
// If we have measured banner's height or it's invisible,
|
|
87
|
+
style: [layout.measured || !visible ? // If we have measured banner's height or it's invisible,
|
|
86
88
|
// Position it absolutely, the layout will be taken care of the spacer
|
|
87
89
|
[styles.absolute, {
|
|
88
90
|
transform: [{
|
|
89
91
|
translateY
|
|
90
92
|
}]
|
|
91
|
-
}] :
|
|
92
|
-
//
|
|
93
|
-
null, !layout.measured && !visible ?
|
|
94
|
-
// If we haven't measured banner's height yet and it's invisible,
|
|
93
|
+
}] : // Otherwise position it normally
|
|
94
|
+
null, !layout.measured && !visible ? // If we haven't measured banner's height yet and it's invisible,
|
|
95
95
|
// hide it with opacity: 0 so user doesn't see it
|
|
96
96
|
{
|
|
97
97
|
opacity: 0
|
|
@@ -119,6 +119,7 @@ const Banner = _ref => {
|
|
|
119
119
|
onPress: () => setVisible(false)
|
|
120
120
|
})) : null)));
|
|
121
121
|
};
|
|
122
|
+
|
|
122
123
|
const styles = StyleSheet.create({
|
|
123
124
|
container: {
|
|
124
125
|
elevation: ELEVATION
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
+
|
|
2
3
|
import * as React from "react";
|
|
3
4
|
import { Text, Pressable, Platform, StyleSheet, ActivityIndicator } from "react-native";
|
|
4
5
|
import { withTheme } from "../theming";
|
|
@@ -8,6 +9,7 @@ const CONSTANTS = {
|
|
|
8
9
|
padding: 8,
|
|
9
10
|
icon: 24
|
|
10
11
|
};
|
|
12
|
+
|
|
11
13
|
function Base(_ref) {
|
|
12
14
|
let {
|
|
13
15
|
Icon,
|
|
@@ -46,12 +48,15 @@ function Base(_ref) {
|
|
|
46
48
|
textDecorationColor,
|
|
47
49
|
textDecorationStyle
|
|
48
50
|
};
|
|
51
|
+
|
|
49
52
|
if (textAlign === "left") {
|
|
50
53
|
buttonStyles.justifyContent = "flex-start";
|
|
51
54
|
}
|
|
55
|
+
|
|
52
56
|
if (textAlign === "right") {
|
|
53
57
|
buttonStyles.justifyContent = "flex-end";
|
|
54
58
|
}
|
|
59
|
+
|
|
55
60
|
return /*#__PURE__*/React.createElement(Pressable, _extends({
|
|
56
61
|
onPress: onPress,
|
|
57
62
|
disabled: disabled || loading,
|
|
@@ -76,6 +81,7 @@ function Base(_ref) {
|
|
|
76
81
|
style: titleStyles
|
|
77
82
|
}, title));
|
|
78
83
|
}
|
|
84
|
+
|
|
79
85
|
const Solid = _ref3 => {
|
|
80
86
|
let {
|
|
81
87
|
style,
|
|
@@ -90,10 +96,12 @@ const Solid = _ref3 => {
|
|
|
90
96
|
}, style]
|
|
91
97
|
}, props));
|
|
92
98
|
};
|
|
99
|
+
|
|
93
100
|
const ButtonSolid = withTheme(Solid);
|
|
94
101
|
export { ButtonSolid };
|
|
95
102
|
const Button = withTheme(Solid);
|
|
96
103
|
export { Button };
|
|
104
|
+
|
|
97
105
|
const Outline = _ref4 => {
|
|
98
106
|
let {
|
|
99
107
|
style,
|
|
@@ -108,6 +116,7 @@ const Outline = _ref4 => {
|
|
|
108
116
|
}, style]
|
|
109
117
|
}, props));
|
|
110
118
|
};
|
|
119
|
+
|
|
111
120
|
const ButtonOutline = withTheme(Outline);
|
|
112
121
|
export { ButtonOutline };
|
|
113
122
|
const styles = StyleSheet.create({
|
|
@@ -139,8 +148,7 @@ const styles = StyleSheet.create({
|
|
|
139
148
|
loading: {
|
|
140
149
|
marginRight: 6
|
|
141
150
|
},
|
|
142
|
-
icon: {
|
|
143
|
-
...Platform.select({
|
|
151
|
+
icon: { ...Platform.select({
|
|
144
152
|
web: {
|
|
145
153
|
marginTop: 1,
|
|
146
154
|
marginRight: 4,
|
|
@@ -47,6 +47,7 @@ export const TopRightCircleIcon = withTheme(_ref => {
|
|
|
47
47
|
color: theme.colors.surface
|
|
48
48
|
})));
|
|
49
49
|
});
|
|
50
|
+
|
|
50
51
|
const Card = _ref3 => {
|
|
51
52
|
let {
|
|
52
53
|
Icon,
|
|
@@ -125,4 +126,5 @@ const Card = _ref3 => {
|
|
|
125
126
|
onPress: onPressIcon
|
|
126
127
|
}) : null));
|
|
127
128
|
};
|
|
129
|
+
|
|
128
130
|
export default withTheme(Card);
|