@draftbit/core 46.7.3 → 46.7.5

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.
Files changed (174) hide show
  1. package/lib/commonjs/components/Accordion/AccordionItem.js +4 -23
  2. package/lib/commonjs/components/AnimatedCircularProgress.js +1 -12
  3. package/lib/commonjs/components/AvatarEdit.js +4 -15
  4. package/lib/commonjs/components/Button.js +12 -35
  5. package/lib/commonjs/components/Checkbox/Checkbox.js +4 -22
  6. package/lib/commonjs/components/Container.js +4 -15
  7. package/lib/commonjs/components/DeprecatedButton.js +3 -20
  8. package/lib/commonjs/components/DeprecatedCardWrapper.js +1 -15
  9. package/lib/commonjs/components/Elevation.js +14 -2
  10. package/lib/commonjs/components/IconButton.js +4 -2
  11. package/lib/commonjs/components/Image.js +2 -17
  12. package/lib/commonjs/components/NumberInput.js +1 -1
  13. package/lib/commonjs/components/Picker/Picker.js +4 -9
  14. package/lib/commonjs/components/Portal/PortalHost.js +15 -44
  15. package/lib/commonjs/components/Portal/PortalManager.js +8 -34
  16. package/lib/commonjs/components/Pressable.js +2 -2
  17. package/lib/commonjs/components/ProgressBar.js +7 -37
  18. package/lib/commonjs/components/Slider.js +4 -21
  19. package/lib/commonjs/components/Surface.js +2 -14
  20. package/lib/commonjs/components/TextField.js +28 -76
  21. package/lib/commonjs/components/Touchable.js +4 -17
  22. package/lib/commonjs/constants.js +1 -1
  23. package/lib/commonjs/hooks.js +2 -1
  24. package/lib/commonjs/index.js +0 -56
  25. package/lib/commonjs/mappings/Button.js +2 -2
  26. package/lib/commonjs/mappings/FlashList.js +28 -0
  27. package/lib/commonjs/mappings/FlatList.js +14 -0
  28. package/lib/commonjs/mappings/IconButton.js +4 -6
  29. package/lib/commonjs/mappings/MapView.js +3 -1
  30. package/lib/commonjs/mappings/ScrollView.js +7 -1
  31. package/lib/commonjs/mappings/Touchable.js +9 -2
  32. package/lib/commonjs/styles/overlay.js +1 -3
  33. package/lib/commonjs/utilities.js +2 -1
  34. package/lib/module/components/Button.js +12 -35
  35. package/lib/module/components/Checkbox/CheckboxGroupRow.js +5 -24
  36. package/lib/module/components/Checkbox/context.js +1 -1
  37. package/lib/module/components/CircleImage.js +1 -16
  38. package/lib/module/components/DeprecatedCardWrapper.js +1 -18
  39. package/lib/module/components/Divider.js +1 -18
  40. package/lib/module/components/Elevation.js +2 -14
  41. package/lib/module/components/FieldSearchBarFull.js +2 -1
  42. package/lib/module/components/FormRow.js +2 -17
  43. package/lib/module/components/IconButton.js +4 -2
  44. package/lib/module/components/Image.js +2 -18
  45. package/lib/module/components/Layout.js +21 -42
  46. package/lib/module/components/NumberInput.js +4 -13
  47. package/lib/module/components/Picker/PickerComponent.ios.js +11 -36
  48. package/lib/module/components/Portal/PortalConsumer.js +7 -22
  49. package/lib/module/components/Pressable.js +2 -2
  50. package/lib/module/components/RadioButton/RadioButton.js +1 -13
  51. package/lib/module/components/RadioButton/RadioButtonGroup.js +2 -16
  52. package/lib/module/components/RadioButton/RadioButtonRow.js +5 -24
  53. package/lib/module/components/Slider.js +4 -21
  54. package/lib/module/components/StepIndicator.js +18 -58
  55. package/lib/module/components/TextField.js +28 -78
  56. package/lib/module/components/ToggleButton.js +2 -16
  57. package/lib/module/components/Touchable.js +4 -17
  58. package/lib/module/constants.js +2 -1
  59. package/lib/module/index.js +0 -8
  60. package/lib/module/mappings/Button.js +2 -2
  61. package/lib/module/mappings/FieldSearchBarFull.js +1 -4
  62. package/lib/module/mappings/FlashList.js +29 -1
  63. package/lib/module/mappings/FlatList.js +15 -1
  64. package/lib/module/mappings/IconButton.js +5 -7
  65. package/lib/module/mappings/MapView.js +3 -1
  66. package/lib/module/mappings/ScrollView.js +8 -2
  67. package/lib/module/mappings/Touchable.js +10 -3
  68. package/lib/module/styles/overlay.js +3 -1
  69. package/lib/module/utilities.js +2 -1
  70. package/lib/typescript/src/components/IconButton.d.ts +2 -0
  71. package/lib/typescript/src/components/IconButton.d.ts.map +1 -1
  72. package/lib/typescript/src/components/Pressable.d.ts.map +1 -1
  73. package/lib/typescript/src/components/Touchable.d.ts.map +1 -1
  74. package/lib/typescript/src/index.d.ts +0 -8
  75. package/lib/typescript/src/index.d.ts.map +1 -1
  76. package/lib/typescript/src/mappings/FlashList.d.ts +60 -0
  77. package/lib/typescript/src/mappings/FlashList.d.ts.map +1 -1
  78. package/lib/typescript/src/mappings/FlatList.d.ts +30 -0
  79. package/lib/typescript/src/mappings/FlatList.d.ts.map +1 -1
  80. package/lib/typescript/src/mappings/IconButton.d.ts +20 -10
  81. package/lib/typescript/src/mappings/IconButton.d.ts.map +1 -1
  82. package/lib/typescript/src/mappings/MapView.d.ts +2 -0
  83. package/lib/typescript/src/mappings/MapView.d.ts.map +1 -1
  84. package/lib/typescript/src/mappings/ScrollView.d.ts +21 -0
  85. package/lib/typescript/src/mappings/ScrollView.d.ts.map +1 -1
  86. package/lib/typescript/src/mappings/Touchable.d.ts +20 -0
  87. package/lib/typescript/src/mappings/Touchable.d.ts.map +1 -1
  88. package/package.json +3 -3
  89. package/src/components/Button.js +1 -1
  90. package/src/components/Button.tsx +2 -2
  91. package/src/components/IconButton.js +2 -2
  92. package/src/components/IconButton.tsx +6 -2
  93. package/src/components/NumberInput.js +1 -1
  94. package/src/components/NumberInput.tsx +1 -1
  95. package/src/components/Pressable.js +1 -1
  96. package/src/components/Pressable.tsx +2 -2
  97. package/src/components/Touchable.js +1 -1
  98. package/src/components/Touchable.tsx +2 -2
  99. package/src/index.js +0 -8
  100. package/src/index.tsx +0 -8
  101. package/src/mappings/Button.js +2 -2
  102. package/src/mappings/Button.ts +2 -2
  103. package/src/mappings/FlashList.js +29 -1
  104. package/src/mappings/FlashList.ts +33 -0
  105. package/src/mappings/FlatList.js +15 -1
  106. package/src/mappings/FlatList.ts +17 -0
  107. package/src/mappings/IconButton.js +5 -7
  108. package/src/mappings/IconButton.ts +5 -7
  109. package/src/mappings/MapView.js +2 -0
  110. package/src/mappings/MapView.ts +2 -0
  111. package/src/mappings/ScrollView.js +8 -2
  112. package/src/mappings/ScrollView.ts +10 -1
  113. package/src/mappings/Touchable.js +10 -3
  114. package/src/mappings/Touchable.ts +12 -2
  115. package/lib/commonjs/components/CardBlock.js +0 -115
  116. package/lib/commonjs/components/CardContainer.js +0 -138
  117. package/lib/commonjs/components/CardContainerRating.js +0 -133
  118. package/lib/commonjs/components/CardContainerShortImage.js +0 -84
  119. package/lib/commonjs/components/CardInline.js +0 -91
  120. package/lib/commonjs/components/Carousel.js +0 -130
  121. package/lib/commonjs/components/Header.js +0 -82
  122. package/lib/commonjs/components/HeaderLarge.js +0 -38
  123. package/lib/commonjs/components/HeaderMedium.js +0 -38
  124. package/lib/commonjs/components/HeaderOverline.js +0 -39
  125. package/lib/module/components/CardBlock.js +0 -108
  126. package/lib/module/components/CardContainer.js +0 -121
  127. package/lib/module/components/CardContainerRating.js +0 -135
  128. package/lib/module/components/CardContainerShortImage.js +0 -90
  129. package/lib/module/components/CardInline.js +0 -82
  130. package/lib/module/components/Carousel.js +0 -120
  131. package/lib/module/components/Header.js +0 -72
  132. package/lib/module/components/HeaderLarge.js +0 -28
  133. package/lib/module/components/HeaderMedium.js +0 -28
  134. package/lib/module/components/HeaderOverline.js +0 -29
  135. package/lib/typescript/src/components/CardBlock.d.ts +0 -21
  136. package/lib/typescript/src/components/CardBlock.d.ts.map +0 -1
  137. package/lib/typescript/src/components/CardContainer.d.ts +0 -23
  138. package/lib/typescript/src/components/CardContainer.d.ts.map +0 -1
  139. package/lib/typescript/src/components/CardContainerRating.d.ts +0 -24
  140. package/lib/typescript/src/components/CardContainerRating.d.ts.map +0 -1
  141. package/lib/typescript/src/components/CardContainerShortImage.d.ts +0 -19
  142. package/lib/typescript/src/components/CardContainerShortImage.d.ts.map +0 -1
  143. package/lib/typescript/src/components/CardInline.d.ts +0 -20
  144. package/lib/typescript/src/components/CardInline.d.ts.map +0 -1
  145. package/lib/typescript/src/components/Carousel.d.ts +0 -15
  146. package/lib/typescript/src/components/Carousel.d.ts.map +0 -1
  147. package/lib/typescript/src/components/Header.d.ts +0 -20
  148. package/lib/typescript/src/components/Header.d.ts.map +0 -1
  149. package/lib/typescript/src/components/HeaderLarge.d.ts +0 -17
  150. package/lib/typescript/src/components/HeaderLarge.d.ts.map +0 -1
  151. package/lib/typescript/src/components/HeaderMedium.d.ts +0 -17
  152. package/lib/typescript/src/components/HeaderMedium.d.ts.map +0 -1
  153. package/lib/typescript/src/components/HeaderOverline.d.ts +0 -17
  154. package/lib/typescript/src/components/HeaderOverline.d.ts.map +0 -1
  155. package/src/components/CardBlock.js +0 -54
  156. package/src/components/CardBlock.tsx +0 -127
  157. package/src/components/CardContainer.js +0 -69
  158. package/src/components/CardContainer.tsx +0 -165
  159. package/src/components/CardContainerRating.js +0 -79
  160. package/src/components/CardContainerRating.tsx +0 -175
  161. package/src/components/CardContainerShortImage.js +0 -33
  162. package/src/components/CardContainerShortImage.tsx +0 -101
  163. package/src/components/CardInline.js +0 -36
  164. package/src/components/CardInline.tsx +0 -93
  165. package/src/components/Carousel.js +0 -68
  166. package/src/components/Carousel.tsx +0 -134
  167. package/src/components/Header.js +0 -44
  168. package/src/components/Header.tsx +0 -105
  169. package/src/components/HeaderLarge.js +0 -7
  170. package/src/components/HeaderLarge.tsx +0 -40
  171. package/src/components/HeaderMedium.js +0 -7
  172. package/src/components/HeaderMedium.tsx +0 -41
  173. package/src/components/HeaderOverline.js +0 -7
  174. package/src/components/HeaderOverline.tsx +0 -42
@@ -1,17 +0,0 @@
1
- import * as React from "react";
2
- import type { Theme } from "../styles/DefaultTheme";
3
- import type { IconSlot } from "../interfaces/Icon";
4
- import { StyleProp, ViewStyle } from "react-native";
5
- declare type Props = {
6
- title: string;
7
- buttonText: string;
8
- icon: string;
9
- onPress?: () => void;
10
- style?: StyleProp<ViewStyle>;
11
- theme: Theme;
12
- } & IconSlot;
13
- declare const _default: React.ComponentType<import("@draftbit/react-theme-provider").$Without<React.PropsWithChildren<Props>, "theme"> & {
14
- theme?: import("@draftbit/react-theme-provider").$DeepPartial<any> | undefined;
15
- }> & import("@draftbit/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<React.ComponentType<React.PropsWithChildren<Props>> & React.FC<React.PropsWithChildren<Props>>, {}>;
16
- export default _default;
17
- //# sourceMappingURL=HeaderMedium.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"HeaderMedium.d.ts","sourceRoot":"","sources":["../../../../src/components/HeaderMedium.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAGnD,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpD,aAAK,KAAK,GAAG;IACX,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,EAAE,KAAK,CAAC;CACd,GAAG,QAAQ,CAAC;;;;AAyBb,wBAAuC"}
@@ -1,17 +0,0 @@
1
- import * as React from "react";
2
- import type { Theme } from "../styles/DefaultTheme";
3
- import type { IconSlot } from "../interfaces/Icon";
4
- import { StyleProp, ViewStyle } from "react-native";
5
- declare type Props = {
6
- title: string;
7
- buttonText: string;
8
- icon: string;
9
- onPress?: () => void;
10
- style?: StyleProp<ViewStyle>;
11
- theme: Theme;
12
- } & IconSlot;
13
- declare const _default: React.ComponentType<import("@draftbit/react-theme-provider").$Without<React.PropsWithChildren<Props>, "theme"> & {
14
- theme?: import("@draftbit/react-theme-provider").$DeepPartial<any> | undefined;
15
- }> & import("@draftbit/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<React.ComponentType<React.PropsWithChildren<Props>> & React.FC<React.PropsWithChildren<Props>>, {}>;
16
- export default _default;
17
- //# sourceMappingURL=HeaderOverline.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"HeaderOverline.d.ts","sourceRoot":"","sources":["../../../../src/components/HeaderOverline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAGnD,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpD,aAAK,KAAK,GAAG;IACX,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,EAAE,KAAK,CAAC;CACd,GAAG,QAAQ,CAAC;;;;AA0Bb,wBAAyC"}
@@ -1,54 +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 CardBlock = ({ image = Config.cardImageUrl, title, leftDescription, rightDescription, titleCentered, aspectRatio = 1.5, elevation = 2, numColumns = 3, theme: { colors, roundness, typography }, style, onPress, ...rest }) => {
9
- let titleJustification;
10
- let titleStyle;
11
- if (titleCentered && !leftDescription && !rightDescription) {
12
- titleJustification = "center";
13
- }
14
- else {
15
- titleJustification = "space-between";
16
- }
17
- if (numColumns === 1) {
18
- titleStyle = typography.button;
19
- }
20
- else if (numColumns === 2) {
21
- titleStyle = typography.headline6;
22
- }
23
- else {
24
- titleStyle = typography.headline5;
25
- }
26
- const rightDescriptionStyles = [
27
- typography.subtitle2,
28
- { color: colors.light },
29
- ];
30
- return (React.createElement(Card, { style: style, onPress: onPress, numColumns: numColumns, ...rest },
31
- React.createElement(View, { style: { backgroundColor: colors.background } },
32
- React.createElement(Elevation, { style: { elevation, borderRadius: roundness } },
33
- React.createElement(Image, { style: {
34
- borderRadius: roundness,
35
- aspectRatio,
36
- }, source: typeof image === "string" ? { uri: image } : image, resizeMode: "cover" })),
37
- title ? (React.createElement(View, { style: {
38
- flexDirection: "row",
39
- alignItems: "center",
40
- justifyContent: titleJustification,
41
- marginTop: numColumns === 3 ? 16 : 12,
42
- } },
43
- React.createElement(Text, { numberOfLines: 1, style: [titleStyle, { color: colors.strong }] }, title),
44
- !leftDescription && rightDescription ? (React.createElement(Text, { style: rightDescriptionStyles }, rightDescription)) : null)) : null,
45
- leftDescription ? (React.createElement(View, { style: {
46
- flexDirection: "row",
47
- justifyContent: "space-between",
48
- alignItems: "center",
49
- marginTop: numColumns === 3 ? 4 : 4 / 2,
50
- } },
51
- React.createElement(Text, { numberOfLines: 1, style: [typography.body2, { color: colors.medium }] }, leftDescription),
52
- rightDescription ? (React.createElement(Text, { numberOfLines: 1, style: rightDescriptionStyles }, rightDescription)) : null)) : null)));
53
- };
54
- export default withTheme(CardBlock);
@@ -1,127 +0,0 @@
1
- import React from "react";
2
- import {
3
- ImageSourcePropType,
4
- View,
5
- Text,
6
- StyleProp,
7
- ViewStyle,
8
- } from "react-native";
9
- import Image from "./Image";
10
- import Card from "./DeprecatedCardWrapper";
11
- import Elevation from "./Elevation";
12
- import { withTheme } from "../theming";
13
- import Config from "./Config";
14
- import theme from "../styles/DefaultTheme";
15
- import { justificationType } from "./Justification";
16
-
17
- type Props = {
18
- image?: string | ImageSourcePropType;
19
- title?: string;
20
- leftDescription?: string;
21
- rightDescription?: string;
22
- titleCentered: boolean;
23
- aspectRatio?: number;
24
- elevation?: number;
25
- numColumns?: number;
26
- theme: typeof theme;
27
- style?: StyleProp<ViewStyle>;
28
- onPress: () => void;
29
- };
30
-
31
- const CardBlock: React.FC<React.PropsWithChildren<Props>> = ({
32
- image = Config.cardImageUrl,
33
- title,
34
- leftDescription,
35
- rightDescription,
36
- titleCentered,
37
- aspectRatio = 1.5,
38
- elevation = 2,
39
- numColumns = 3,
40
- theme: { colors, roundness, typography },
41
- style,
42
- onPress,
43
- ...rest
44
- }) => {
45
- let titleJustification: justificationType;
46
-
47
- let titleStyle;
48
- if (titleCentered && !leftDescription && !rightDescription) {
49
- titleJustification = "center";
50
- } else {
51
- titleJustification = "space-between";
52
- }
53
-
54
- if (numColumns === 1) {
55
- titleStyle = typography.button;
56
- } else if (numColumns === 2) {
57
- titleStyle = typography.headline6;
58
- } else {
59
- titleStyle = typography.headline5;
60
- }
61
-
62
- const rightDescriptionStyles = [
63
- typography.subtitle2,
64
- { color: colors.light },
65
- ];
66
-
67
- return (
68
- <Card style={style} onPress={onPress} numColumns={numColumns} {...rest}>
69
- <View style={{ backgroundColor: colors.background }}>
70
- <Elevation style={{ elevation, borderRadius: roundness }}>
71
- <Image
72
- style={{
73
- borderRadius: roundness,
74
- aspectRatio,
75
- }}
76
- source={typeof image === "string" ? { uri: image } : image}
77
- resizeMode="cover"
78
- />
79
- </Elevation>
80
- {title ? (
81
- <View
82
- style={{
83
- flexDirection: "row",
84
- alignItems: "center",
85
- justifyContent: titleJustification,
86
- marginTop: numColumns === 3 ? 16 : 12,
87
- }}
88
- >
89
- <Text
90
- numberOfLines={1}
91
- style={[titleStyle, { color: colors.strong }]}
92
- >
93
- {title}
94
- </Text>
95
- {!leftDescription && rightDescription ? (
96
- <Text style={rightDescriptionStyles}>{rightDescription}</Text>
97
- ) : null}
98
- </View>
99
- ) : null}
100
- {leftDescription ? (
101
- <View
102
- style={{
103
- flexDirection: "row",
104
- justifyContent: "space-between",
105
- alignItems: "center",
106
- marginTop: numColumns === 3 ? 4 : 4 / 2,
107
- }}
108
- >
109
- <Text
110
- numberOfLines={1}
111
- style={[typography.body2, { color: colors.medium }]}
112
- >
113
- {leftDescription}
114
- </Text>
115
- {rightDescription ? (
116
- <Text numberOfLines={1} style={rightDescriptionStyles}>
117
- {rightDescription}
118
- </Text>
119
- ) : null}
120
- </View>
121
- ) : null}
122
- </View>
123
- </Card>
124
- );
125
- };
126
-
127
- export default withTheme(CardBlock);
@@ -1,69 +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 { withTheme } from "../theming";
8
- import Config from "./Config";
9
- const ICON_CONTAINER_SIZE = Config.cardIconSize * 2;
10
- const ICON_CONTAINER_PADDING = Config.cardIconSize / 2 - 1;
11
- const CardContainer = ({ Icon, icon, image = Config.cardImageUrl, title, leftDescription, rightDescription, textCentered, aspectRatio = 1.5, elevation = 2, numColumns = 3, theme: { colors, roundness, typography }, style, onPress, ...rest }) => {
12
- let textJustification;
13
- let titleStyle;
14
- if (textCentered && !rightDescription) {
15
- textJustification = "center";
16
- }
17
- else {
18
- textJustification = "space-between";
19
- }
20
- switch (numColumns) {
21
- case 2:
22
- titleStyle = typography.headline6;
23
- break;
24
- case 3:
25
- titleStyle = typography.headline5;
26
- break;
27
- }
28
- return (React.createElement(Card, { style: style, onPress: onPress, numColumns: numColumns, ...rest },
29
- React.createElement(Elevation, { style: { elevation, borderRadius: roundness } },
30
- React.createElement(View, { style: {
31
- borderRadius: roundness,
32
- overflow: "hidden",
33
- backgroundColor: colors.surface,
34
- } },
35
- React.createElement(Image, { style: { aspectRatio }, source: typeof image === "string" ? { uri: image } : image, resizeMode: "cover" }),
36
- React.createElement(View, { style: {
37
- padding: numColumns === 1 ? 8 : 16,
38
- } },
39
- title ? (React.createElement(View, { style: {
40
- flexDirection: "row",
41
- alignItems: "center",
42
- justifyContent: textJustification,
43
- } },
44
- React.createElement(Text, { numberOfLines: 1, style: [titleStyle, { color: colors.strong }] }, title))) : null,
45
- leftDescription ? (React.createElement(View, { style: {
46
- flexDirection: "row",
47
- justifyContent: textJustification,
48
- alignItems: "center",
49
- marginTop: numColumns === 3 ? 4 : 4 / 2,
50
- } },
51
- React.createElement(Text, { numberOfLines: 1, style: [typography.body2, { color: colors.medium }] }, leftDescription),
52
- rightDescription ? (React.createElement(Text, { numberOfLines: 1, style: [typography.subtitle2, { color: colors.light }] }, rightDescription)) : null)) : null),
53
- icon ? (React.createElement(Elevation, { style: {
54
- elevation: Config.cardIconElevation,
55
- position: "absolute",
56
- top: 12,
57
- right: 12,
58
- width: ICON_CONTAINER_SIZE,
59
- height: ICON_CONTAINER_SIZE,
60
- padding: ICON_CONTAINER_PADDING,
61
- borderRadius: ICON_CONTAINER_SIZE,
62
- backgroundColor: color(colors.strong)
63
- .alpha(Config.cardIconBackgroundOpacity)
64
- .rgb()
65
- .string(),
66
- } },
67
- React.createElement(Icon, { name: icon, size: Config.cardIconSize, color: colors.surface }))) : null))));
68
- };
69
- export default withTheme(CardContainer);
@@ -1,165 +0,0 @@
1
- import React from "react";
2
- import {
3
- View,
4
- ImageSourcePropType,
5
- Text,
6
- StyleProp,
7
- ViewStyle,
8
- } from "react-native";
9
- import color from "color";
10
- import Image from "./Image";
11
- import Card from "./DeprecatedCardWrapper";
12
- import Elevation from "./Elevation";
13
- import { withTheme } from "../theming";
14
- import type { Theme } from "../styles/DefaultTheme";
15
- import type { IconSlot } from "../interfaces/Icon";
16
-
17
- import Config from "./Config";
18
- import { justificationType } from "./Justification";
19
-
20
- const ICON_CONTAINER_SIZE = Config.cardIconSize * 2;
21
- const ICON_CONTAINER_PADDING = Config.cardIconSize / 2 - 1;
22
-
23
- type Props = {
24
- image?: string | ImageSourcePropType;
25
- title?: string;
26
- leftDescription?: string;
27
- rightDescription?: string;
28
- textCentered: boolean;
29
- icon?: string;
30
- aspectRatio?: number;
31
- elevation?: number;
32
- numColumns?: number;
33
- theme: Theme;
34
- style?: StyleProp<ViewStyle>;
35
- onPress: () => void;
36
- } & IconSlot;
37
-
38
- const CardContainer: React.FC<React.PropsWithChildren<Props>> = ({
39
- Icon,
40
- icon,
41
- image = Config.cardImageUrl,
42
- title,
43
- leftDescription,
44
- rightDescription,
45
- textCentered,
46
- aspectRatio = 1.5,
47
- elevation = 2,
48
- numColumns = 3,
49
- theme: { colors, roundness, typography },
50
- style,
51
- onPress,
52
- ...rest
53
- }) => {
54
- let textJustification: justificationType;
55
-
56
- let titleStyle;
57
-
58
- if (textCentered && !rightDescription) {
59
- textJustification = "center";
60
- } else {
61
- textJustification = "space-between";
62
- }
63
-
64
- switch (numColumns) {
65
- case 2:
66
- titleStyle = typography.headline6;
67
- break;
68
- case 3:
69
- titleStyle = typography.headline5;
70
- break;
71
- }
72
-
73
- return (
74
- <Card style={style} onPress={onPress} numColumns={numColumns} {...rest}>
75
- <Elevation style={{ elevation, borderRadius: roundness }}>
76
- <View
77
- style={{
78
- borderRadius: roundness,
79
- overflow: "hidden",
80
- backgroundColor: colors.surface,
81
- }}
82
- >
83
- <Image
84
- style={{ aspectRatio }}
85
- source={typeof image === "string" ? { uri: image } : image}
86
- resizeMode="cover"
87
- />
88
- <View
89
- style={{
90
- padding: numColumns === 1 ? 8 : 16,
91
- }}
92
- >
93
- {title ? (
94
- <View
95
- style={{
96
- flexDirection: "row",
97
- alignItems: "center",
98
- justifyContent: textJustification,
99
- }}
100
- >
101
- <Text
102
- numberOfLines={1}
103
- style={[titleStyle, { color: colors.strong }]}
104
- >
105
- {title}
106
- </Text>
107
- </View>
108
- ) : null}
109
- {leftDescription ? (
110
- <View
111
- style={{
112
- flexDirection: "row",
113
- justifyContent: textJustification,
114
- alignItems: "center",
115
- marginTop: numColumns === 3 ? 4 : 4 / 2,
116
- }}
117
- >
118
- <Text
119
- numberOfLines={1}
120
- style={[typography.body2, { color: colors.medium }]}
121
- >
122
- {leftDescription}
123
- </Text>
124
- {rightDescription ? (
125
- <Text
126
- numberOfLines={1}
127
- style={[typography.subtitle2, { color: colors.light }]}
128
- >
129
- {rightDescription}
130
- </Text>
131
- ) : null}
132
- </View>
133
- ) : null}
134
- </View>
135
- {icon ? (
136
- <Elevation
137
- style={{
138
- elevation: Config.cardIconElevation,
139
- position: "absolute",
140
- top: 12,
141
- right: 12,
142
- width: ICON_CONTAINER_SIZE,
143
- height: ICON_CONTAINER_SIZE,
144
- padding: ICON_CONTAINER_PADDING,
145
- borderRadius: ICON_CONTAINER_SIZE,
146
- backgroundColor: color(colors.strong)
147
- .alpha(Config.cardIconBackgroundOpacity)
148
- .rgb()
149
- .string(),
150
- }}
151
- >
152
- <Icon
153
- name={icon}
154
- size={Config.cardIconSize}
155
- color={colors.surface}
156
- />
157
- </Elevation>
158
- ) : null}
159
- </View>
160
- </Elevation>
161
- </Card>
162
- );
163
- };
164
-
165
- export default withTheme(CardContainer);
@@ -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);