@draftbit/core 46.8.2-feb14e.2 → 46.8.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.
Files changed (186) hide show
  1. package/lib/commonjs/components/Justification.js +1 -5
  2. package/lib/commonjs/components/ResizeMode.js +1 -5
  3. package/lib/module/components/Justification.js +0 -1
  4. package/lib/module/components/ResizeMode.js +0 -1
  5. package/package.json +4 -5
  6. package/lib/commonjs/mappings/HtmlElements.js +0 -175
  7. package/lib/module/mappings/HtmlElements.js +0 -168
  8. package/lib/typescript/src/mappings/HtmlElements.d.ts +0 -73
  9. package/lib/typescript/src/mappings/HtmlElements.d.ts.map +0 -1
  10. package/src/Provider.js +0 -9
  11. package/src/components/Accordion/AccordionGroup.js +0 -44
  12. package/src/components/Accordion/AccordionItem.js +0 -32
  13. package/src/components/Accordion/index.js +0 -2
  14. package/src/components/ActionSheet/ActionSheet.js +0 -45
  15. package/src/components/ActionSheet/ActionSheetCancel.js +0 -6
  16. package/src/components/ActionSheet/ActionSheetItem.js +0 -30
  17. package/src/components/ActionSheet/index.js +0 -3
  18. package/src/components/AnimatedCircularProgress.js +0 -43
  19. package/src/components/AspectRatio.js +0 -18
  20. package/src/components/AvatarEdit.js +0 -30
  21. package/src/components/Banner.js +0 -109
  22. package/src/components/Button.js +0 -114
  23. package/src/components/Card.js +0 -57
  24. package/src/components/Checkbox/Checkbox.js +0 -62
  25. package/src/components/Checkbox/CheckboxGroup.js +0 -21
  26. package/src/components/Checkbox/CheckboxGroupRow.js +0 -76
  27. package/src/components/Checkbox/CheckboxRow.js +0 -77
  28. package/src/components/Checkbox/context.js +0 -14
  29. package/src/components/Checkbox/index.js +0 -3
  30. package/src/components/CircleImage.js +0 -8
  31. package/src/components/CircularProgress.js +0 -81
  32. package/src/components/Config.js +0 -64
  33. package/src/components/Container.js +0 -43
  34. package/src/components/DatePicker/DatePicker.js +0 -382
  35. package/src/components/DatePicker/DatePickerComponent.js +0 -13
  36. package/src/components/DatePicker/DatePickerComponent.web.js +0 -30
  37. package/src/components/DatePicker/DatePickerComponentType.js +0 -1
  38. package/src/components/DeckSwiper/DeckSwiper.js +0 -65
  39. package/src/components/DeckSwiper/DeckSwiperCard.js +0 -21
  40. package/src/components/DeckSwiper/index.js +0 -2
  41. package/src/components/DeprecatedButton.js +0 -83
  42. package/src/components/DeprecatedCardWrapper.js +0 -18
  43. package/src/components/DeprecatedFAB.js +0 -114
  44. package/src/components/Divider.js +0 -13
  45. package/src/components/Elevation.js +0 -20
  46. package/src/components/FAB.js +0 -46
  47. package/src/components/FieldSearchBarFull.js +0 -53
  48. package/src/components/FormRow.js +0 -19
  49. package/src/components/IconButton.js +0 -35
  50. package/src/components/Image.js +0 -47
  51. package/src/components/Justification.js +0 -1
  52. package/src/components/Layout.js +0 -50
  53. package/src/components/NumberInput.js +0 -49
  54. package/src/components/Picker/Picker.js +0 -266
  55. package/src/components/Picker/PickerComponent.android.js +0 -69
  56. package/src/components/Picker/PickerComponent.ios.js +0 -79
  57. package/src/components/Picker/PickerComponent.web.js +0 -70
  58. package/src/components/Picker/PickerTypes.js +0 -1
  59. package/src/components/Portal/Portal.js +0 -35
  60. package/src/components/Portal/PortalConsumer.js +0 -27
  61. package/src/components/Portal/PortalHost.js +0 -107
  62. package/src/components/Portal/PortalManager.js +0 -32
  63. package/src/components/Pressable.js +0 -12
  64. package/src/components/ProgressBar.js +0 -118
  65. package/src/components/ProgressCircle.js +0 -13
  66. package/src/components/ProgressIndicator.js +0 -27
  67. package/src/components/RadioButton/RadioButton.js +0 -17
  68. package/src/components/RadioButton/RadioButtonFieldGroup.js +0 -17
  69. package/src/components/RadioButton/RadioButtonGroup.js +0 -43
  70. package/src/components/RadioButton/RadioButtonRow.js +0 -76
  71. package/src/components/RadioButton/context.js +0 -14
  72. package/src/components/RadioButton/index.js +0 -4
  73. package/src/components/ResizeMode.js +0 -1
  74. package/src/components/Row.js +0 -48
  75. package/src/components/RowBodyIcon.js +0 -8
  76. package/src/components/RowHeadlineImageCaption.js +0 -12
  77. package/src/components/RowHeadlineImageIcon.js +0 -14
  78. package/src/components/SVG.js +0 -13
  79. package/src/components/ScreenContainer.js +0 -35
  80. package/src/components/Slider.js +0 -63
  81. package/src/components/StarRating.js +0 -50
  82. package/src/components/StepIndicator.js +0 -346
  83. package/src/components/Stepper.js +0 -41
  84. package/src/components/Surface.js +0 -32
  85. package/src/components/Swiper/Swiper.js +0 -29
  86. package/src/components/Swiper/SwiperItem.js +0 -9
  87. package/src/components/Swiper/index.js +0 -2
  88. package/src/components/Switch.js +0 -56
  89. package/src/components/Text.js +0 -33
  90. package/src/components/TextField.js +0 -428
  91. package/src/components/ToggleButton.js +0 -39
  92. package/src/components/Touchable.js +0 -12
  93. package/src/components/Touchable.web.js +0 -2
  94. package/src/components/Typography.js +0 -36
  95. package/src/components/useAuthState.js +0 -31
  96. package/src/constants.js +0 -10
  97. package/src/hooks.js +0 -12
  98. package/src/index.js +0 -46
  99. package/src/interfaces/Icon.js +0 -8
  100. package/src/mappings/Accordion.js +0 -50
  101. package/src/mappings/AccordionItem.js +0 -17
  102. package/src/mappings/ActionSheet.js +0 -14
  103. package/src/mappings/ActionSheetCancel.js +0 -20
  104. package/src/mappings/ActionSheetItem.js +0 -24
  105. package/src/mappings/ActivityIndicator.js +0 -58
  106. package/src/mappings/AudioPlayer.js +0 -57
  107. package/src/mappings/AvatarEdit.js +0 -38
  108. package/src/mappings/Banner.js +0 -32
  109. package/src/mappings/BlurView.js +0 -42
  110. package/src/mappings/Button.js +0 -116
  111. package/src/mappings/Card.js +0 -52
  112. package/src/mappings/CardBlock.js +0 -123
  113. package/src/mappings/CardContainer.js +0 -104
  114. package/src/mappings/CardContainerRating.js +0 -126
  115. package/src/mappings/CardContainerShortImage.js +0 -120
  116. package/src/mappings/CardInline.js +0 -52
  117. package/src/mappings/Carousel.js +0 -19
  118. package/src/mappings/Checkbox.js +0 -46
  119. package/src/mappings/CheckboxGroup.js +0 -26
  120. package/src/mappings/CheckboxRow.js +0 -61
  121. package/src/mappings/CircleImage.js +0 -25
  122. package/src/mappings/Container.js +0 -30
  123. package/src/mappings/CustomCode.js +0 -8
  124. package/src/mappings/DatePicker.js +0 -182
  125. package/src/mappings/DeckSwiper.js +0 -48
  126. package/src/mappings/DeckSwiperCard.js +0 -16
  127. package/src/mappings/Divider.js +0 -27
  128. package/src/mappings/FAB.js +0 -37
  129. package/src/mappings/Fetch.js +0 -13
  130. package/src/mappings/FieldSearchBarFull.js +0 -50
  131. package/src/mappings/FlashList.js +0 -113
  132. package/src/mappings/FlatList.js +0 -51
  133. package/src/mappings/HeaderLarge.js +0 -29
  134. package/src/mappings/HeaderMedium.js +0 -55
  135. package/src/mappings/HeaderOverline.js +0 -55
  136. package/src/mappings/HtmlElements.js +0 -191
  137. package/src/mappings/HtmlElements.ts +0 -204
  138. package/src/mappings/Icon.js +0 -32
  139. package/src/mappings/IconButton.js +0 -33
  140. package/src/mappings/Image.js +0 -35
  141. package/src/mappings/ImageBackground.js +0 -29
  142. package/src/mappings/KeyboardAvoidingView.js +0 -41
  143. package/src/mappings/KeyboardAwareScrollView.js +0 -50
  144. package/src/mappings/Layout.js +0 -200
  145. package/src/mappings/LinearGradient.js +0 -82
  146. package/src/mappings/MapCallout.js +0 -22
  147. package/src/mappings/MapMarker.js +0 -48
  148. package/src/mappings/MapView.js +0 -142
  149. package/src/mappings/Modal.js +0 -42
  150. package/src/mappings/NumberInput.js +0 -254
  151. package/src/mappings/Picker.js +0 -153
  152. package/src/mappings/ProgressBar.js +0 -101
  153. package/src/mappings/ProgressCircle.js +0 -109
  154. package/src/mappings/ProgressIndicator.js +0 -181
  155. package/src/mappings/RadioButton.js +0 -51
  156. package/src/mappings/RadioButtonGroup.js +0 -17
  157. package/src/mappings/RadioButtonRow.js +0 -42
  158. package/src/mappings/RowBodyIcon.js +0 -75
  159. package/src/mappings/RowHeadlineImageCaption.js +0 -167
  160. package/src/mappings/RowHeadlineImageIcon.js +0 -99
  161. package/src/mappings/SVG.js +0 -20
  162. package/src/mappings/SafeAreaView.js +0 -33
  163. package/src/mappings/ScrollView.js +0 -37
  164. package/src/mappings/Slider.js +0 -60
  165. package/src/mappings/StarRating.js +0 -43
  166. package/src/mappings/Stepper.js +0 -32
  167. package/src/mappings/Surface.js +0 -14
  168. package/src/mappings/Swiper.js +0 -71
  169. package/src/mappings/SwiperItem.js +0 -9
  170. package/src/mappings/Switch.js +0 -81
  171. package/src/mappings/Text.js +0 -251
  172. package/src/mappings/TextArea.js +0 -283
  173. package/src/mappings/TextField.js +0 -400
  174. package/src/mappings/TextInput.js +0 -402
  175. package/src/mappings/ToggleButton.js +0 -50
  176. package/src/mappings/Touchable.js +0 -67
  177. package/src/mappings/Video.js +0 -81
  178. package/src/mappings/View.js +0 -207
  179. package/src/mappings/WebView.js +0 -88
  180. package/src/styles/DarkTheme.js +0 -26
  181. package/src/styles/DefaultTheme.js +0 -111
  182. package/src/styles/fonts.js +0 -62
  183. package/src/styles/overlay.js +0 -60
  184. package/src/styles/shadow.js +0 -51
  185. package/src/theming.js +0 -3
  186. package/src/utilities.js +0 -102
@@ -1,43 +0,0 @@
1
- import * as React from "react";
2
- import { Animated, Easing, } from "react-native";
3
- import CircularProgress from "./CircularProgress";
4
- const AnimatedProgress = Animated.createAnimatedComponent(CircularProgress);
5
- const AnimatedCircularProgress = ({ duration = 500, easing = Easing.out(Easing.ease), fill, prefill = 0, useNativeDriver = false, tintColorSecondary, onAnimationComplete, tintColor = "black", ...other }) => {
6
- const [fillAnimation] = React.useState(new Animated.Value(prefill));
7
- const animate = React.useCallback((toVal = -1, dur, ease) => {
8
- const toValue = toVal >= 0 ? toVal : fill;
9
- const dura = dur || duration;
10
- const eas = ease || easing;
11
- const useNative = useNativeDriver;
12
- const anim = Animated.timing(fillAnimation, {
13
- useNativeDriver: useNative,
14
- toValue,
15
- easing: eas,
16
- duration: dura,
17
- });
18
- anim.start(onAnimationComplete);
19
- return anim;
20
- }, [
21
- duration,
22
- easing,
23
- fill,
24
- useNativeDriver,
25
- fillAnimation,
26
- onAnimationComplete,
27
- ]);
28
- const animateColor = () => {
29
- if (!tintColorSecondary) {
30
- return tintColor;
31
- }
32
- const tintAnimation = fillAnimation.interpolate({
33
- inputRange: [0, 100],
34
- outputRange: [tintColor, tintColorSecondary],
35
- });
36
- return tintAnimation;
37
- };
38
- React.useEffect(() => {
39
- animate();
40
- }, [fill, animate]);
41
- return (React.createElement(AnimatedProgress, { ...other, style: other.style, childrenContainerStyle: other.childrenContainerStyle, fill: fillAnimation, tintColor: animateColor() }));
42
- };
43
- export default AnimatedCircularProgress;
@@ -1,18 +0,0 @@
1
- import React from "react";
2
- import { View, StyleSheet, } from "react-native";
3
- const AspectRatio = (props) => {
4
- const [layout, setLayout] = React.useState(null);
5
- const { aspectRatio = 1, ...inputStyle } = StyleSheet.flatten(props.style) || {};
6
- const style = [inputStyle, { aspectRatio }];
7
- if (layout) {
8
- const { width = 0, height = 0 } = layout;
9
- if (width === 0) {
10
- style.push({ width: height * (1 / aspectRatio), height });
11
- }
12
- else {
13
- style.push({ width, height: width * (1 / aspectRatio) });
14
- }
15
- }
16
- return (React.createElement(View, { ...props, style: style, onLayout: ({ nativeEvent: { layout: l } }) => setLayout(l) }, props.children));
17
- };
18
- export default AspectRatio;
@@ -1,30 +0,0 @@
1
- import * as React from "react";
2
- import { View } from "react-native";
3
- import Touchable from "./Touchable";
4
- import CircleImage from "./CircleImage";
5
- import { withTheme } from "../theming";
6
- const AvatarEdit = ({ Icon, image, size = 80, onPress = () => { }, style, theme, ...rest }) => {
7
- const colorStyles = {
8
- editBackgroundColor: theme.colors.primary,
9
- editIconColor: theme.colors.surface,
10
- editBorderColor: theme.colors.surface,
11
- };
12
- const dimensions = {
13
- width: size,
14
- height: size,
15
- };
16
- return (React.createElement(View, { style: [style, dimensions], ...rest },
17
- React.createElement(Touchable, { onPress: onPress },
18
- React.createElement(CircleImage, { source: image, size: size }),
19
- React.createElement(View, { style: {
20
- position: "absolute",
21
- top: -3,
22
- right: -3,
23
- borderColor: colorStyles.editBorderColor,
24
- backgroundColor: colorStyles.editBackgroundColor,
25
- borderRadius: size * (3 / 16),
26
- padding: size * (3 / 32),
27
- } },
28
- React.createElement(Icon, { name: "MaterialIcons/edit", color: colorStyles.editIconColor, size: size * (3 / 16) })))));
29
- };
30
- export default withTheme(AvatarEdit);
@@ -1,109 +0,0 @@
1
- import * as React from "react";
2
- import { Button, Text, View, StyleSheet, Animated, } from "react-native";
3
- import Surface from "./Surface";
4
- import shadow from "../styles/shadow";
5
- import { withTheme } from "../theming";
6
- const ELEVATION = 1;
7
- const DEFAULT_MAX_WIDTH = 960;
8
- const Banner = ({ initiallyVisible = true, dismissable = true, icon, buttonColor, content, contentStyle, style, theme, Icon, ...rest }) => {
9
- const [visible, setVisible] = React.useState(initiallyVisible);
10
- React.useEffect(() => {
11
- if (initiallyVisible) {
12
- setVisible(true);
13
- }
14
- }, [initiallyVisible]);
15
- const { current: position } = React.useRef(new Animated.Value(visible ? 1 : 0));
16
- const [layout, setLayout] = React.useState({
17
- height: 0,
18
- measured: false,
19
- });
20
- React.useEffect(() => {
21
- if (visible) {
22
- // show
23
- Animated.timing(position, {
24
- duration: 250,
25
- toValue: 1,
26
- useNativeDriver: false,
27
- }).start();
28
- }
29
- else {
30
- // hide
31
- Animated.timing(position, {
32
- duration: 200,
33
- toValue: 0,
34
- useNativeDriver: false,
35
- }).start();
36
- }
37
- }, [visible, position]);
38
- const handleLayout = ({ nativeEvent }) => {
39
- const { height } = nativeEvent.layout;
40
- setLayout({ height, measured: true });
41
- };
42
- // The banner animation has 2 parts:
43
- // 1. Blank spacer element which animates its height to move the content
44
- // 2. Actual banner which animates its translateY
45
- // In initial render, we position everything normally and measure the height of the banner
46
- // Once we have the height, we apply the height to the spacer and switch the banner to position: absolute
47
- // We need this because we need to move the content below as if banner's height was being animated
48
- // However we can't animated banner's height directly as it'll also resize the content inside
49
- const height = Animated.multiply(position, layout.height);
50
- const translateY = Animated.multiply(Animated.add(position, -1), layout.height);
51
- return (React.createElement(Surface, { ...rest, style: [styles.container, shadow(ELEVATION), style] },
52
- React.createElement(View, { style: [styles.wrapper, contentStyle] },
53
- React.createElement(Animated.View, { style: { height } }),
54
- React.createElement(Animated.View, { onLayout: handleLayout, style: [
55
- layout.measured || !visible
56
- ? // If we have measured banner's height or it's invisible,
57
- // Position it absolutely, the layout will be taken care of the spacer
58
- [styles.absolute, { transform: [{ translateY }] }]
59
- : // Otherwise position it normally
60
- null,
61
- !layout.measured && !visible
62
- ? // If we haven't measured banner's height yet and it's invisible,
63
- // hide it with opacity: 0 so user doesn't see it
64
- { opacity: 0 }
65
- : null,
66
- ] },
67
- React.createElement(View, { style: [styles.content, { marginBottom: dismissable ? 0 : 16 }] },
68
- icon ? (React.createElement(View, { style: styles.icon },
69
- React.createElement(Icon, { name: icon, size: 40 }))) : null,
70
- React.createElement(Text, { style: [styles.message, { color: theme.colors.text }], accessibilityLiveRegion: visible ? "polite" : "none", accessibilityRole: "alert" }, content)),
71
- dismissable ? (React.createElement(View, { style: styles.actions },
72
- React.createElement(Button, { color: buttonColor || theme.colors.primary, title: "Close", onPress: () => setVisible(false) }))) : null))));
73
- };
74
- const styles = StyleSheet.create({
75
- container: {
76
- elevation: ELEVATION,
77
- },
78
- wrapper: {
79
- overflow: "hidden",
80
- alignSelf: "center",
81
- width: "100%",
82
- maxWidth: DEFAULT_MAX_WIDTH,
83
- },
84
- absolute: {
85
- position: "absolute",
86
- top: 0,
87
- width: "100%",
88
- },
89
- content: {
90
- flexDirection: "row",
91
- justifyContent: "flex-start",
92
- marginHorizontal: 8,
93
- marginTop: 16,
94
- marginBottom: 0,
95
- },
96
- icon: {
97
- margin: 8,
98
- },
99
- message: {
100
- flex: 1,
101
- margin: 8,
102
- },
103
- actions: {
104
- flexDirection: "row",
105
- justifyContent: "flex-end",
106
- margin: 8,
107
- },
108
- });
109
- export default withTheme(Banner);
@@ -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, loading, disabled, style, activeOpacity = 0.8, disabledOpacity = 0.8, ...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, { disabled: disabled || loading, style: ({ pressed }) => {
32
- return [
33
- styles.base,
34
- {
35
- opacity: pressed ? activeOpacity : disabled ? disabledOpacity : 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,62 +0,0 @@
1
- import * as React from "react";
2
- import { View, StyleSheet, Pressable, } from "react-native";
3
- import { useTheme } from "../../theming";
4
- import { usePrevious } from "../../hooks";
5
- 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 }) => {
6
- const [internalValue, setInternalValue] = React.useState(status || defaultValue || false);
7
- React.useEffect(() => {
8
- if (status != null) {
9
- setInternalValue(status);
10
- }
11
- }, [status]);
12
- // This special logic is to handle weird APIs like Airtable that return
13
- // true or undefined for a boolean
14
- const previousDefaultValue = usePrevious(defaultValue);
15
- React.useEffect(() => {
16
- if (defaultValue !== previousDefaultValue) {
17
- setInternalValue(Boolean(defaultValue));
18
- }
19
- }, [defaultValue, previousDefaultValue]);
20
- const { colors } = useTheme();
21
- const checkboxColor = internalValue
22
- ? color || colors.primary
23
- : uncheckedColor || colors.primary;
24
- const handlePress = () => {
25
- const newValue = !internalValue;
26
- setInternalValue(newValue);
27
- onPress === null || onPress === void 0 ? void 0 : onPress(newValue);
28
- if (newValue) {
29
- onCheck === null || onCheck === void 0 ? void 0 : onCheck();
30
- }
31
- if (!newValue) {
32
- onUncheck === null || onUncheck === void 0 ? void 0 : onUncheck();
33
- }
34
- };
35
- return (React.createElement(Pressable, { ...rest, onPress: handlePress, disabled: disabled, accessibilityState: { disabled }, accessibilityRole: "button", accessibilityLiveRegion: "polite", style: [styles.container, style, { width: size, height: size }] },
36
- React.createElement(Icon, { style: styles.icon, name: internalValue ? checkedIcon : uncheckedIcon, size: size, color: checkboxColor }),
37
- React.createElement(View, { style: [StyleSheet.absoluteFill, styles.fillContainer] },
38
- React.createElement(View, { style: [
39
- styles.fill,
40
- { opacity: disabled ? 0.5 : 1 },
41
- { borderColor: checkboxColor },
42
- ] }))));
43
- };
44
- const styles = StyleSheet.create({
45
- container: {
46
- borderRadius: 18,
47
- },
48
- fillContainer: {
49
- alignItems: "center",
50
- justifyContent: "center",
51
- },
52
- icon: {
53
- alignSelf: "center",
54
- },
55
- fill: {
56
- borderRadius: 5,
57
- width: 30,
58
- height: 30,
59
- alignSelf: "center",
60
- },
61
- });
62
- export default Checkbox;
@@ -1,21 +0,0 @@
1
- import * as React from "react";
2
- import { View } from "react-native";
3
- import { checkboxGroupContext, Direction } from "./context";
4
- const { Provider } = checkboxGroupContext;
5
- const CheckboxGroup = ({ direction = Direction.Vertical, values, onValueChange = () => { }, style, children, ...rest }) => {
6
- const _containerStyle = [
7
- {
8
- flexDirection: direction === Direction.Horizontal ? "row" : "column",
9
- overflow: "hidden",
10
- },
11
- ];
12
- if (direction !== Direction.Vertical) {
13
- _containerStyle.push({
14
- alignItems: "center",
15
- });
16
- }
17
- return (React.createElement(View, { style: [{ minHeight: 40 }, style], ...rest },
18
- React.createElement(Provider, { value: { values, onValueChange, direction } },
19
- React.createElement(View, { style: _containerStyle }, children))));
20
- };
21
- export default CheckboxGroup;
@@ -1,76 +0,0 @@
1
- import * as React from "react";
2
- import { StyleSheet, View, Platform, Pressable, } from "react-native";
3
- import Checkbox from "./Checkbox";
4
- import Text from "../Text";
5
- import { useCheckboxGroupContext } from "./context";
6
- import { Direction as GroupDirection } from "./context";
7
- import { extractStyles } from "../../utilities";
8
- export var Direction;
9
- (function (Direction) {
10
- Direction["Row"] = "row";
11
- Direction["RowReverse"] = "row-reverse";
12
- })(Direction || (Direction = {}));
13
- const getCheckboxAlignment = (parentDirection, direction) => {
14
- if (parentDirection === GroupDirection.Horizontal) {
15
- return direction === Direction.Row ? "flex-start" : "flex-end";
16
- }
17
- else if (direction === Direction.RowReverse) {
18
- return "flex-start";
19
- }
20
- else {
21
- return "flex-end";
22
- }
23
- };
24
- const renderLabel = (value, labelStyle, textStyle) => {
25
- if (typeof value === "string") {
26
- return React.createElement(Text, { style: [labelStyle, textStyle] }, value);
27
- }
28
- else {
29
- return React.createElement(React.Fragment, null, value);
30
- }
31
- };
32
- const CheckboxGroupRow = ({ Icon, label = "Label", status, value, onPress, labelContainerStyle, labelStyle, checkboxStyle, direction = Direction.Row, disabled, style, color, uncheckedColor, ...rest }) => {
33
- const { values: selectedValues, onValueChange, direction: parentDirection, } = useCheckboxGroupContext();
34
- const values = Array.isArray(selectedValues) ? selectedValues : [];
35
- const isChecked = status || values.includes(value);
36
- const handlePress = () => {
37
- if (!disabled) {
38
- onPress === null || onPress === void 0 ? void 0 : onPress(!isChecked);
39
- onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(value, !isChecked);
40
- }
41
- };
42
- const { textStyles, viewStyles } = extractStyles(style);
43
- return (React.createElement(Pressable, { onPress: handlePress, style: [styles.mainParent, { flexDirection: direction }, viewStyles], disabled: disabled, ...rest },
44
- React.createElement(View, { style: [
45
- styles.label,
46
- {
47
- alignItems: direction === Direction.Row ? "flex-start" : "flex-end",
48
- },
49
- labelContainerStyle,
50
- ] }, renderLabel(label, labelStyle, textStyles)),
51
- React.createElement(View, { style: {
52
- flex: 1,
53
- alignItems: getCheckboxAlignment(parentDirection, direction),
54
- } },
55
- React.createElement(Checkbox, { Icon: Icon, status: isChecked, onPress: handlePress, style: checkboxStyle, disabled: disabled, color: color, uncheckedColor: uncheckedColor }))));
56
- };
57
- const styles = StyleSheet.create({
58
- mainParent: {
59
- alignItems: "center",
60
- justifyContent: "space-around",
61
- paddingStart: 20,
62
- minHeight: 50,
63
- paddingEnd: 20,
64
- display: "flex",
65
- ...Platform.select({
66
- web: {
67
- cursor: "pointer",
68
- userSelect: "none",
69
- },
70
- }),
71
- },
72
- label: {
73
- flex: 3,
74
- },
75
- });
76
- export default CheckboxGroupRow;
@@ -1,77 +0,0 @@
1
- import * as React from "react";
2
- import { StyleSheet, View, Platform, Pressable, } from "react-native";
3
- import { isString } from "lodash";
4
- import { extractStyles } from "../../utilities";
5
- import { usePrevious } from "../../hooks";
6
- import Text from "../Text";
7
- import Checkbox from "./Checkbox";
8
- export var Direction;
9
- (function (Direction) {
10
- Direction["Row"] = "row";
11
- Direction["RowReverse"] = "row-reverse";
12
- })(Direction || (Direction = {}));
13
- const renderLabel = (value, labelStyle, textStyle) => {
14
- if (isString(value)) {
15
- return React.createElement(Text, { style: [textStyle, labelStyle] }, value);
16
- }
17
- else {
18
- return React.createElement(React.Fragment, null, value);
19
- }
20
- };
21
- const CheckboxRow = ({ label = "Label", labelStyle, labelContainerStyle, checkboxStyle, direction = Direction.Row, Icon, status, disabled = false, onPress, onCheck, onUncheck, color, uncheckedColor, defaultValue, checkedIcon, uncheckedIcon, size, style, ...rest }) => {
22
- const [internalValue, setInternalValue] = React.useState(status || defaultValue || false);
23
- React.useEffect(() => {
24
- if (status != null) {
25
- setInternalValue(status);
26
- }
27
- }, [status]);
28
- // This special logic is to handle weird APIs like Airtable that return
29
- // true or undefined for a boolean
30
- const previousDefaultValue = usePrevious(defaultValue);
31
- React.useEffect(() => {
32
- if (defaultValue !== previousDefaultValue) {
33
- setInternalValue(Boolean(defaultValue));
34
- }
35
- }, [defaultValue, previousDefaultValue]);
36
- const handlePress = () => {
37
- const newValue = !internalValue;
38
- setInternalValue(newValue);
39
- onPress === null || onPress === void 0 ? void 0 : onPress(newValue);
40
- if (newValue) {
41
- onCheck === null || onCheck === void 0 ? void 0 : onCheck();
42
- }
43
- if (!newValue) {
44
- onUncheck === null || onUncheck === void 0 ? void 0 : onUncheck();
45
- }
46
- };
47
- const { textStyles, viewStyles } = extractStyles(style);
48
- return (React.createElement(Pressable, { onPress: handlePress, style: [viewStyles, styles.mainParent, { flexDirection: direction }], disabled: disabled, ...rest },
49
- React.createElement(View, { style: [
50
- styles.label,
51
- {
52
- alignItems: direction === Direction.Row ? "flex-start" : "flex-end",
53
- },
54
- labelContainerStyle,
55
- ] }, renderLabel(label, textStyles, labelStyle)),
56
- React.createElement(Checkbox, { Icon: Icon, status: internalValue, style: checkboxStyle, disabled: disabled, onPress: handlePress, color: color, uncheckedColor: uncheckedColor, checkedIcon: checkedIcon, uncheckedIcon: uncheckedIcon, size: size })));
57
- };
58
- const styles = StyleSheet.create({
59
- mainParent: {
60
- alignItems: "center",
61
- justifyContent: "space-around",
62
- paddingStart: 20,
63
- minHeight: 50,
64
- paddingEnd: 20,
65
- display: "flex",
66
- ...Platform.select({
67
- web: {
68
- cursor: "pointer",
69
- userSelect: "none",
70
- },
71
- }),
72
- },
73
- label: {
74
- flex: 3,
75
- },
76
- });
77
- export default CheckboxRow;
@@ -1,14 +0,0 @@
1
- import { createContext, useContext } from "react";
2
- export var Direction;
3
- (function (Direction) {
4
- Direction["Horizontal"] = "horizontal";
5
- Direction["Vertical"] = "vertical";
6
- })(Direction || (Direction = {}));
7
- export const checkboxGroupContext = createContext({
8
- onValueChange: () => { },
9
- values: [],
10
- direction: undefined,
11
- });
12
- export function useCheckboxGroupContext() {
13
- return useContext(checkboxGroupContext);
14
- }
@@ -1,3 +0,0 @@
1
- export { default as Checkbox } from "./Checkbox";
2
- export { default as CheckboxGroup } from "./CheckboxGroup";
3
- export { default as CheckboxRow } from "./CheckboxRow";
@@ -1,8 +0,0 @@
1
- import * as React from "react";
2
- import { Image, } from "react-native";
3
- import Config from "./Config";
4
- const CircleImage = ({ source = Config.placeholderImageURL, size = 60, style, ...props }) => {
5
- const borderRadius = size / 2;
6
- return (React.createElement(Image, { style: [{ width: size, height: size, borderRadius }, style], source: typeof source === "string" ? { uri: source } : source, resizeMode: "cover", ...props }));
7
- };
8
- export default CircleImage;