@draftbit/core 46.5.1-c6140a.2 → 46.5.1

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 (203) hide show
  1. package/lib/commonjs/components/Accordion/AccordionItem.js +4 -23
  2. package/lib/commonjs/components/Button.js +10 -33
  3. package/lib/commonjs/components/Checkbox/CheckboxRow.js +6 -23
  4. package/lib/commonjs/components/CircleImage.js +1 -15
  5. package/lib/commonjs/components/CircularProgress.js +8 -26
  6. package/lib/commonjs/components/Container.js +4 -15
  7. package/lib/commonjs/components/Elevation.js +2 -14
  8. package/lib/commonjs/components/Justification.js +1 -5
  9. package/lib/commonjs/components/Picker/Picker.js +4 -4
  10. package/lib/commonjs/components/Picker/PickerComponent.android.js +3 -20
  11. package/lib/commonjs/components/Picker/PickerComponent.web.js +3 -20
  12. package/lib/commonjs/components/Portal/PortalManager.js +8 -34
  13. package/lib/commonjs/components/ResizeMode.js +1 -5
  14. package/lib/commonjs/hooks.js +2 -1
  15. package/lib/module/components/CardBlock.js +4 -14
  16. package/lib/module/components/CardContainer.js +4 -14
  17. package/lib/module/components/Carousel.js +8 -32
  18. package/lib/module/components/FieldSearchBarFull.js +2 -1
  19. package/lib/module/components/FormRow.js +2 -17
  20. package/lib/module/components/IconButton.js +4 -21
  21. package/lib/module/components/Image.js +2 -18
  22. package/lib/module/components/Justification.js +0 -1
  23. package/lib/module/components/ResizeMode.js +0 -1
  24. package/package.json +3 -3
  25. package/src/Provider.js +0 -9
  26. package/src/components/Accordion/AccordionGroup.js +0 -44
  27. package/src/components/Accordion/AccordionItem.js +0 -32
  28. package/src/components/Accordion/index.js +0 -2
  29. package/src/components/ActionSheet/ActionSheet.js +0 -45
  30. package/src/components/ActionSheet/ActionSheetCancel.js +0 -6
  31. package/src/components/ActionSheet/ActionSheetItem.js +0 -30
  32. package/src/components/ActionSheet/index.js +0 -3
  33. package/src/components/AnimatedCircularProgress.js +0 -43
  34. package/src/components/AspectRatio.js +0 -18
  35. package/src/components/AvatarEdit.js +0 -30
  36. package/src/components/Banner.js +0 -109
  37. package/src/components/Button.js +0 -114
  38. package/src/components/Card.js +0 -57
  39. package/src/components/CardBlock.js +0 -54
  40. package/src/components/CardContainer.js +0 -69
  41. package/src/components/CardContainerRating.js +0 -79
  42. package/src/components/CardContainerShortImage.js +0 -33
  43. package/src/components/CardInline.js +0 -36
  44. package/src/components/Carousel.js +0 -68
  45. package/src/components/Checkbox/Checkbox.js +0 -63
  46. package/src/components/Checkbox/CheckboxGroup.js +0 -21
  47. package/src/components/Checkbox/CheckboxGroupRow.js +0 -77
  48. package/src/components/Checkbox/CheckboxRow.js +0 -78
  49. package/src/components/Checkbox/context.js +0 -14
  50. package/src/components/Checkbox/index.js +0 -3
  51. package/src/components/CircleImage.js +0 -8
  52. package/src/components/CircularProgress.js +0 -81
  53. package/src/components/Config.js +0 -64
  54. package/src/components/Container.js +0 -43
  55. package/src/components/DatePicker/DatePicker.js +0 -377
  56. package/src/components/DatePicker/DatePickerComponent.js +0 -13
  57. package/src/components/DatePicker/DatePickerComponent.web.js +0 -30
  58. package/src/components/DatePicker/DatePickerComponentType.js +0 -1
  59. package/src/components/DeprecatedButton.js +0 -95
  60. package/src/components/DeprecatedCardWrapper.js +0 -18
  61. package/src/components/DeprecatedFAB.js +0 -115
  62. package/src/components/Divider.js +0 -13
  63. package/src/components/Elevation.js +0 -20
  64. package/src/components/FAB.js +0 -46
  65. package/src/components/FieldSearchBarFull.js +0 -53
  66. package/src/components/FormRow.js +0 -19
  67. package/src/components/Header.js +0 -44
  68. package/src/components/HeaderLarge.js +0 -7
  69. package/src/components/HeaderMedium.js +0 -7
  70. package/src/components/HeaderOverline.js +0 -7
  71. package/src/components/IconButton.js +0 -35
  72. package/src/components/Image.js +0 -47
  73. package/src/components/Justification.js +0 -1
  74. package/src/components/Layout.js +0 -50
  75. package/src/components/NumberInput.js +0 -49
  76. package/src/components/Picker/Picker.js +0 -267
  77. package/src/components/Picker/PickerComponent.android.js +0 -69
  78. package/src/components/Picker/PickerComponent.ios.js +0 -79
  79. package/src/components/Picker/PickerComponent.web.js +0 -70
  80. package/src/components/Picker/PickerTypes.js +0 -1
  81. package/src/components/Portal/Portal.js +0 -35
  82. package/src/components/Portal/PortalConsumer.js +0 -27
  83. package/src/components/Portal/PortalHost.js +0 -107
  84. package/src/components/Portal/PortalManager.js +0 -32
  85. package/src/components/ProgressBar.js +0 -118
  86. package/src/components/ProgressCircle.js +0 -13
  87. package/src/components/ProgressIndicator.js +0 -27
  88. package/src/components/RadioButton/RadioButton.js +0 -17
  89. package/src/components/RadioButton/RadioButtonFieldGroup.js +0 -17
  90. package/src/components/RadioButton/RadioButtonGroup.js +0 -43
  91. package/src/components/RadioButton/RadioButtonRow.js +0 -76
  92. package/src/components/RadioButton/context.js +0 -14
  93. package/src/components/RadioButton/index.js +0 -4
  94. package/src/components/ResizeMode.js +0 -1
  95. package/src/components/Row.js +0 -48
  96. package/src/components/RowBodyIcon.js +0 -8
  97. package/src/components/RowHeadlineImageCaption.js +0 -12
  98. package/src/components/RowHeadlineImageIcon.js +0 -14
  99. package/src/components/SVG.js +0 -13
  100. package/src/components/ScreenContainer.js +0 -34
  101. package/src/components/Slider.js +0 -63
  102. package/src/components/StarRating.js +0 -50
  103. package/src/components/StepIndicator.js +0 -346
  104. package/src/components/Stepper.js +0 -41
  105. package/src/components/Surface.js +0 -32
  106. package/src/components/Swiper/Swiper.js +0 -29
  107. package/src/components/Swiper/SwiperItem.js +0 -9
  108. package/src/components/Swiper/index.js +0 -2
  109. package/src/components/Switch.js +0 -56
  110. package/src/components/Text.js +0 -33
  111. package/src/components/TextField.js +0 -428
  112. package/src/components/ToggleButton.js +0 -39
  113. package/src/components/Touchable.js +0 -12
  114. package/src/components/Touchable.web.js +0 -2
  115. package/src/components/Typography.js +0 -36
  116. package/src/components/useAuthState.js +0 -31
  117. package/src/constants.js +0 -10
  118. package/src/hooks.js +0 -12
  119. package/src/index.js +0 -52
  120. package/src/interfaces/Icon.js +0 -8
  121. package/src/mappings/Accordion.js +0 -41
  122. package/src/mappings/AccordionItem.js +0 -16
  123. package/src/mappings/ActionSheet.js +0 -13
  124. package/src/mappings/ActionSheetCancel.js +0 -19
  125. package/src/mappings/ActionSheetItem.js +0 -23
  126. package/src/mappings/ActivityIndicator.js +0 -58
  127. package/src/mappings/AudioPlayer.js +0 -57
  128. package/src/mappings/AvatarEdit.js +0 -38
  129. package/src/mappings/Banner.js +0 -32
  130. package/src/mappings/BlurView.js +0 -42
  131. package/src/mappings/Button.js +0 -87
  132. package/src/mappings/Card.js +0 -52
  133. package/src/mappings/CardBlock.js +0 -123
  134. package/src/mappings/CardContainer.js +0 -104
  135. package/src/mappings/CardContainerRating.js +0 -126
  136. package/src/mappings/CardContainerShortImage.js +0 -120
  137. package/src/mappings/CardInline.js +0 -52
  138. package/src/mappings/Carousel.js +0 -19
  139. package/src/mappings/Checkbox.js +0 -46
  140. package/src/mappings/CheckboxGroup.js +0 -26
  141. package/src/mappings/CheckboxRow.js +0 -61
  142. package/src/mappings/CircleImage.js +0 -25
  143. package/src/mappings/Container.js +0 -30
  144. package/src/mappings/CustomCode.js +0 -8
  145. package/src/mappings/DatePicker.js +0 -176
  146. package/src/mappings/Divider.js +0 -27
  147. package/src/mappings/FAB.js +0 -37
  148. package/src/mappings/Fetch.js +0 -13
  149. package/src/mappings/FieldSearchBarFull.js +0 -50
  150. package/src/mappings/FlashList.js +0 -33
  151. package/src/mappings/FlatList.js +0 -24
  152. package/src/mappings/HeaderLarge.js +0 -29
  153. package/src/mappings/HeaderMedium.js +0 -55
  154. package/src/mappings/HeaderOverline.js +0 -55
  155. package/src/mappings/Icon.js +0 -32
  156. package/src/mappings/IconButton.js +0 -35
  157. package/src/mappings/Image.js +0 -35
  158. package/src/mappings/ImageBackground.js +0 -29
  159. package/src/mappings/KeyboardAvoidingView.js +0 -41
  160. package/src/mappings/KeyboardAwareScrollView.js +0 -50
  161. package/src/mappings/Layout.js +0 -200
  162. package/src/mappings/LinearGradient.js +0 -77
  163. package/src/mappings/MapCallout.js +0 -21
  164. package/src/mappings/MapMarker.js +0 -47
  165. package/src/mappings/MapView.js +0 -139
  166. package/src/mappings/Modal.js +0 -42
  167. package/src/mappings/NumberInput.js +0 -254
  168. package/src/mappings/Picker.js +0 -148
  169. package/src/mappings/ProgressBar.js +0 -101
  170. package/src/mappings/ProgressCircle.js +0 -109
  171. package/src/mappings/ProgressIndicator.js +0 -181
  172. package/src/mappings/RadioButton.js +0 -51
  173. package/src/mappings/RadioButtonGroup.js +0 -17
  174. package/src/mappings/RadioButtonRow.js +0 -42
  175. package/src/mappings/RowBodyIcon.js +0 -75
  176. package/src/mappings/RowHeadlineImageCaption.js +0 -167
  177. package/src/mappings/RowHeadlineImageIcon.js +0 -99
  178. package/src/mappings/SVG.js +0 -20
  179. package/src/mappings/SafeAreaView.js +0 -33
  180. package/src/mappings/ScrollView.js +0 -31
  181. package/src/mappings/Slider.js +0 -60
  182. package/src/mappings/StarRating.js +0 -43
  183. package/src/mappings/Stepper.js +0 -32
  184. package/src/mappings/Surface.js +0 -14
  185. package/src/mappings/Swiper.js +0 -60
  186. package/src/mappings/SwiperItem.js +0 -8
  187. package/src/mappings/Switch.js +0 -81
  188. package/src/mappings/Text.js +0 -251
  189. package/src/mappings/TextArea.js +0 -274
  190. package/src/mappings/TextField.js +0 -391
  191. package/src/mappings/TextInput.js +0 -402
  192. package/src/mappings/ToggleButton.js +0 -50
  193. package/src/mappings/Touchable.js +0 -17
  194. package/src/mappings/Video.js +0 -81
  195. package/src/mappings/View.js +0 -207
  196. package/src/mappings/WebView.js +0 -88
  197. package/src/styles/DarkTheme.js +0 -26
  198. package/src/styles/DefaultTheme.js +0 -111
  199. package/src/styles/fonts.js +0 -62
  200. package/src/styles/overlay.js +0 -60
  201. package/src/styles/shadow.js +0 -51
  202. package/src/theming.js +0 -3
  203. package/src/utilities.js +0 -102
@@ -1,114 +0,0 @@
1
- import * as React from "react";
2
- import { Text, Pressable, Platform, StyleSheet, ActivityIndicator, } from "react-native";
3
- import { withTheme } from "../theming";
4
- const CONSTANTS = {
5
- baseHeight: 42,
6
- borderRadius: 4,
7
- padding: 8,
8
- icon: 24,
9
- };
10
- function Base({ Icon, icon, title, onPress, loading, disabled, style, ...props }) {
11
- const { color, fontFamily, fontWeight, fontSize, lineHeight, letterSpacing, textTransform, textAlign, textDecorationLine, textDecorationColor, textDecorationStyle, ...buttonStyles } = StyleSheet.flatten(style || {});
12
- const titleStyles = {
13
- color,
14
- fontFamily,
15
- fontWeight,
16
- fontSize,
17
- lineHeight,
18
- letterSpacing,
19
- textTransform,
20
- textAlign,
21
- textDecorationLine,
22
- textDecorationColor,
23
- textDecorationStyle,
24
- };
25
- if (textAlign === "left") {
26
- buttonStyles.justifyContent = "flex-start";
27
- }
28
- if (textAlign === "right") {
29
- buttonStyles.justifyContent = "flex-end";
30
- }
31
- return (React.createElement(Pressable, { onPress: onPress, disabled: disabled || loading, style: ({ pressed }) => {
32
- return [
33
- styles.base,
34
- {
35
- opacity: pressed || disabled ? 0.75 : 1,
36
- },
37
- buttonStyles,
38
- ];
39
- }, ...props },
40
- loading ? (React.createElement(ActivityIndicator, { size: "small", color: color, style: styles.loading })) : null,
41
- icon && !loading ? (React.createElement(Icon, { name: icon, color: color, style: styles.icon, size: CONSTANTS.icon })) : null,
42
- React.createElement(Text, { style: titleStyles }, title)));
43
- }
44
- const Solid = ({ style, theme, ...props }) => {
45
- return (React.createElement(Base, { style: [
46
- {
47
- color: "#FFF",
48
- borderRadius: theme.roundness,
49
- backgroundColor: theme.colors.primary,
50
- },
51
- style,
52
- ], ...props }));
53
- };
54
- const ButtonSolid = withTheme(Solid);
55
- export { ButtonSolid };
56
- const Button = withTheme(Solid);
57
- export { Button };
58
- const Outline = ({ style, theme, ...props }) => {
59
- return (React.createElement(Base, { style: [
60
- styles.outline,
61
- {
62
- borderRadius: theme.roundness,
63
- borderColor: theme.colors.primary,
64
- color: theme.colors.primary,
65
- },
66
- style,
67
- ], ...props }));
68
- };
69
- const ButtonOutline = withTheme(Outline);
70
- export { ButtonOutline };
71
- const styles = StyleSheet.create({
72
- base: {
73
- position: "relative",
74
- flexDirection: "row",
75
- alignItems: "center",
76
- justifyContent: "center",
77
- minHeight: CONSTANTS.baseHeight,
78
- paddingHorizontal: 12,
79
- fontFamily: "System",
80
- fontWeight: "700",
81
- ...Platform.select({
82
- web: {
83
- cursor: "pointer",
84
- userSelect: "none",
85
- },
86
- }),
87
- },
88
- outline: {
89
- backgroundColor: "transparent",
90
- borderWidth: 1,
91
- },
92
- bare: {
93
- backgroundColor: "transparent",
94
- padding: 0,
95
- minHeight: undefined,
96
- },
97
- loading: {
98
- marginRight: 6,
99
- },
100
- icon: {
101
- ...Platform.select({
102
- web: {
103
- marginTop: 1,
104
- marginRight: 4,
105
- alignSelf: "center",
106
- },
107
- default: {
108
- marginBottom: 2,
109
- marginRight: 4,
110
- alignSelf: "center",
111
- },
112
- }),
113
- },
114
- });
@@ -1,57 +0,0 @@
1
- import React from "react";
2
- import { StyleSheet, View, Pressable, } from "react-native";
3
- import Image from "./Image";
4
- import Surface from "./Surface";
5
- import { Title, Subtitle, Caption } from "./Typography";
6
- import { withTheme } from "../theming";
7
- import Config from "./Config";
8
- const ICON_SIZE = Config.cardIconSize;
9
- const ICON_CONTAINER_SIZE = Config.cardIconSize * 2;
10
- const ICON_CONTAINER_PADDING = Config.cardIconSize / 2 - 1;
11
- const ICON_ELEVATION = Config.cardIconElevation;
12
- export const TopRightCircleIcon = withTheme(({ Icon, icon, theme, onPress, }) => {
13
- return (React.createElement(Surface, { style: {
14
- justifyContent: "center",
15
- alignItems: "center",
16
- elevation: ICON_ELEVATION,
17
- position: "absolute",
18
- top: 12,
19
- right: 12,
20
- width: ICON_CONTAINER_SIZE,
21
- height: ICON_CONTAINER_SIZE,
22
- padding: ICON_CONTAINER_PADDING,
23
- borderRadius: ICON_CONTAINER_SIZE,
24
- backgroundColor: "rgba(0, 0, 0, 0.1)",
25
- } },
26
- React.createElement(Pressable, { disabled: !onPress, onPress: onPress, style: ({ pressed }) => {
27
- return [
28
- {
29
- opacity: pressed ? 0.8 : 1,
30
- },
31
- ];
32
- } },
33
- React.createElement(Icon, { name: icon, size: ICON_SIZE, color: theme.colors.surface }))));
34
- });
35
- const Card = ({ Icon, image = Config.cardImageUrl, title, subtitle, description, textCentered, icon, aspectRatio = 1.5, elevation = 2, style, onPress, onPressIcon, titleStyle, subtitleStyle, descriptionStyle, theme, children, }) => {
36
- const { backgroundColor: bgColor, padding, ...styles } = StyleSheet.flatten(style || {});
37
- const backgroundColor = bgColor ? bgColor : theme.colors.surface;
38
- const innerPadding = padding ? padding : 12;
39
- return (React.createElement(Surface, { style: [{ elevation, backgroundColor }, styles] },
40
- React.createElement(Pressable, { disabled: !onPress, onPress: onPress, style: ({ pressed }) => {
41
- return [
42
- {
43
- opacity: pressed ? 0.8 : 1,
44
- },
45
- ];
46
- } },
47
- React.createElement(Image, { style: { aspectRatio }, source: typeof image === "string" ? { uri: image } : image, resizeMode: "cover" }),
48
- React.createElement(View, { style: { padding: innerPadding } },
49
- React.createElement(View, { style: { alignItems: textCentered ? "center" : "flex-start" } },
50
- title || (title && title !== "") ? (React.createElement(Title, { text: title, style: titleStyle })) : null,
51
- subtitle || (subtitle && subtitle !== "") ? (React.createElement(Subtitle, { text: subtitle, style: subtitleStyle })) : null,
52
- description || (description && description !== "") ? (React.createElement(View, { style: { marginTop: 4 } },
53
- React.createElement(Caption, { text: description, style: descriptionStyle }))) : null,
54
- children)),
55
- icon ? (React.createElement(TopRightCircleIcon, { Icon: Icon, icon: icon, onPress: onPressIcon })) : null)));
56
- };
57
- export default withTheme(Card);
@@ -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,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,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;