@draftbit/core 46.9.1-fe76aa.2 → 46.9.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 (215) hide show
  1. package/lib/commonjs/components/Accordion/AccordionItem.js +4 -23
  2. package/lib/commonjs/components/DeprecatedFAB.js +3 -21
  3. package/lib/commonjs/components/Justification.js +1 -5
  4. package/lib/commonjs/components/Picker/Picker.js +13 -3
  5. package/lib/commonjs/components/ResizeMode.js +1 -5
  6. package/lib/commonjs/mappings/ActionSheet.js +1 -1
  7. package/lib/commonjs/mappings/ActionSheetCancel.js +1 -1
  8. package/lib/commonjs/mappings/ActionSheetItem.js +1 -1
  9. package/lib/commonjs/mappings/MapCallout.js +1 -1
  10. package/lib/commonjs/mappings/MapMarker.js +1 -1
  11. package/lib/module/components/Justification.js +0 -1
  12. package/lib/module/components/Picker/Picker.js +13 -3
  13. package/lib/module/components/ResizeMode.js +0 -1
  14. package/lib/module/mappings/ActionSheet.js +1 -1
  15. package/lib/module/mappings/ActionSheetCancel.js +1 -1
  16. package/lib/module/mappings/ActionSheetItem.js +1 -1
  17. package/lib/module/mappings/MapCallout.js +2 -2
  18. package/lib/module/mappings/MapMarker.js +2 -2
  19. package/lib/typescript/src/components/Picker/Picker.d.ts.map +1 -1
  20. package/lib/typescript/src/mappings/ActionSheet.d.ts.map +1 -1
  21. package/lib/typescript/src/mappings/ActionSheetCancel.d.ts.map +1 -1
  22. package/lib/typescript/src/mappings/ActionSheetItem.d.ts.map +1 -1
  23. package/lib/typescript/src/mappings/MapCallout.d.ts.map +1 -1
  24. package/lib/typescript/src/mappings/MapMarker.d.ts.map +1 -1
  25. package/package.json +3 -3
  26. package/src/components/Picker/Picker.tsx +12 -3
  27. package/src/mappings/ActionSheet.ts +1 -4
  28. package/src/mappings/ActionSheetCancel.ts +1 -4
  29. package/src/mappings/ActionSheetItem.ts +1 -4
  30. package/src/mappings/MapCallout.ts +2 -6
  31. package/src/mappings/MapMarker.ts +2 -6
  32. package/src/Provider.js +0 -9
  33. package/src/components/Accordion/AccordionGroup.js +0 -44
  34. package/src/components/Accordion/AccordionItem.js +0 -32
  35. package/src/components/Accordion/index.js +0 -2
  36. package/src/components/ActionSheet/ActionSheet.js +0 -45
  37. package/src/components/ActionSheet/ActionSheetCancel.js +0 -6
  38. package/src/components/ActionSheet/ActionSheetItem.js +0 -30
  39. package/src/components/ActionSheet/index.js +0 -3
  40. package/src/components/AnimatedCircularProgress.js +0 -43
  41. package/src/components/AspectRatio.js +0 -18
  42. package/src/components/AvatarEdit.js +0 -30
  43. package/src/components/Banner.js +0 -109
  44. package/src/components/Button.js +0 -114
  45. package/src/components/Card.js +0 -57
  46. package/src/components/Checkbox/Checkbox.js +0 -62
  47. package/src/components/Checkbox/CheckboxGroup.js +0 -21
  48. package/src/components/Checkbox/CheckboxGroupRow.js +0 -76
  49. package/src/components/Checkbox/CheckboxRow.js +0 -77
  50. package/src/components/Checkbox/context.js +0 -14
  51. package/src/components/Checkbox/index.js +0 -3
  52. package/src/components/CircleImage.js +0 -8
  53. package/src/components/CircularProgress.js +0 -81
  54. package/src/components/Config.js +0 -64
  55. package/src/components/Container.js +0 -43
  56. package/src/components/DatePicker/DatePicker.js +0 -382
  57. package/src/components/DatePicker/DatePickerComponent.js +0 -13
  58. package/src/components/DatePicker/DatePickerComponent.web.js +0 -30
  59. package/src/components/DatePicker/DatePickerComponentType.js +0 -1
  60. package/src/components/DeckSwiper/DeckSwiper.js +0 -65
  61. package/src/components/DeckSwiper/DeckSwiperCard.js +0 -21
  62. package/src/components/DeckSwiper/index.js +0 -2
  63. package/src/components/DeprecatedButton.js +0 -83
  64. package/src/components/DeprecatedCardWrapper.js +0 -18
  65. package/src/components/DeprecatedFAB.js +0 -114
  66. package/src/components/Divider.js +0 -13
  67. package/src/components/Elevation.js +0 -20
  68. package/src/components/FAB.js +0 -46
  69. package/src/components/FieldSearchBarFull.js +0 -53
  70. package/src/components/FormRow.js +0 -19
  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/Markdown.js +0 -10
  76. package/src/components/NumberInput.js +0 -49
  77. package/src/components/Picker/Picker.js +0 -266
  78. package/src/components/Picker/PickerComponent.android.js +0 -69
  79. package/src/components/Picker/PickerComponent.ios.js +0 -79
  80. package/src/components/Picker/PickerComponent.web.js +0 -70
  81. package/src/components/Picker/PickerTypes.js +0 -1
  82. package/src/components/Portal/Portal.js +0 -35
  83. package/src/components/Portal/PortalConsumer.js +0 -27
  84. package/src/components/Portal/PortalHost.js +0 -107
  85. package/src/components/Portal/PortalManager.js +0 -32
  86. package/src/components/Pressable.js +0 -12
  87. package/src/components/ProgressBar.js +0 -118
  88. package/src/components/ProgressCircle.js +0 -13
  89. package/src/components/ProgressIndicator.js +0 -27
  90. package/src/components/RadioButton/RadioButton.js +0 -17
  91. package/src/components/RadioButton/RadioButtonFieldGroup.js +0 -17
  92. package/src/components/RadioButton/RadioButtonGroup.js +0 -43
  93. package/src/components/RadioButton/RadioButtonRow.js +0 -76
  94. package/src/components/RadioButton/context.js +0 -14
  95. package/src/components/RadioButton/index.js +0 -4
  96. package/src/components/ResizeMode.js +0 -1
  97. package/src/components/Row.js +0 -48
  98. package/src/components/RowBodyIcon.js +0 -8
  99. package/src/components/RowHeadlineImageCaption.js +0 -12
  100. package/src/components/RowHeadlineImageIcon.js +0 -14
  101. package/src/components/SVG.js +0 -13
  102. package/src/components/ScreenContainer.js +0 -35
  103. package/src/components/Shadow.js +0 -16
  104. package/src/components/Slider.js +0 -63
  105. package/src/components/StarRating.js +0 -50
  106. package/src/components/StepIndicator.js +0 -346
  107. package/src/components/Stepper.js +0 -41
  108. package/src/components/Surface.js +0 -32
  109. package/src/components/Swiper/Swiper.js +0 -29
  110. package/src/components/Swiper/SwiperItem.js +0 -9
  111. package/src/components/Swiper/index.js +0 -2
  112. package/src/components/Switch.js +0 -56
  113. package/src/components/TabView/TabView.js +0 -54
  114. package/src/components/TabView/TabViewItem.js +0 -11
  115. package/src/components/TabView/index.js +0 -2
  116. package/src/components/Text.js +0 -33
  117. package/src/components/TextField.js +0 -428
  118. package/src/components/ToggleButton.js +0 -39
  119. package/src/components/Touchable.js +0 -12
  120. package/src/components/Touchable.web.js +0 -2
  121. package/src/components/Typography.js +0 -36
  122. package/src/components/useAuthState.js +0 -31
  123. package/src/constants.js +0 -10
  124. package/src/hooks.js +0 -12
  125. package/src/index.js +0 -49
  126. package/src/interfaces/Icon.js +0 -8
  127. package/src/mappings/Accordion.js +0 -50
  128. package/src/mappings/AccordionItem.js +0 -17
  129. package/src/mappings/ActionSheet.js +0 -17
  130. package/src/mappings/ActionSheetCancel.js +0 -23
  131. package/src/mappings/ActionSheetItem.js +0 -27
  132. package/src/mappings/ActivityIndicator.js +0 -58
  133. package/src/mappings/AudioPlayer.js +0 -57
  134. package/src/mappings/AvatarEdit.js +0 -38
  135. package/src/mappings/Banner.js +0 -32
  136. package/src/mappings/BlurView.js +0 -42
  137. package/src/mappings/Button.js +0 -116
  138. package/src/mappings/Card.js +0 -52
  139. package/src/mappings/CardBlock.js +0 -123
  140. package/src/mappings/CardContainer.js +0 -104
  141. package/src/mappings/CardContainerRating.js +0 -126
  142. package/src/mappings/CardContainerShortImage.js +0 -120
  143. package/src/mappings/CardInline.js +0 -52
  144. package/src/mappings/Carousel.js +0 -19
  145. package/src/mappings/Checkbox.js +0 -46
  146. package/src/mappings/CheckboxGroup.js +0 -26
  147. package/src/mappings/CheckboxRow.js +0 -61
  148. package/src/mappings/CircleImage.js +0 -25
  149. package/src/mappings/Container.js +0 -30
  150. package/src/mappings/CustomCode.js +0 -8
  151. package/src/mappings/DatePicker.js +0 -182
  152. package/src/mappings/DeckSwiper.js +0 -48
  153. package/src/mappings/DeckSwiperCard.js +0 -16
  154. package/src/mappings/Divider.js +0 -27
  155. package/src/mappings/FAB.js +0 -37
  156. package/src/mappings/Fetch.js +0 -13
  157. package/src/mappings/FieldSearchBarFull.js +0 -50
  158. package/src/mappings/FlashList.js +0 -113
  159. package/src/mappings/FlatList.js +0 -51
  160. package/src/mappings/HeaderLarge.js +0 -29
  161. package/src/mappings/HeaderMedium.js +0 -55
  162. package/src/mappings/HeaderOverline.js +0 -55
  163. package/src/mappings/Icon.js +0 -32
  164. package/src/mappings/IconButton.js +0 -33
  165. package/src/mappings/Image.js +0 -35
  166. package/src/mappings/ImageBackground.js +0 -29
  167. package/src/mappings/KeyboardAvoidingView.js +0 -41
  168. package/src/mappings/KeyboardAwareScrollView.js +0 -50
  169. package/src/mappings/Layout.js +0 -200
  170. package/src/mappings/LinearGradient.js +0 -82
  171. package/src/mappings/MapCallout.js +0 -26
  172. package/src/mappings/MapMarker.js +0 -52
  173. package/src/mappings/MapView.js +0 -142
  174. package/src/mappings/Markdown.js +0 -25
  175. package/src/mappings/Modal.js +0 -42
  176. package/src/mappings/NumberInput.js +0 -254
  177. package/src/mappings/Picker.js +0 -153
  178. package/src/mappings/ProgressBar.js +0 -101
  179. package/src/mappings/ProgressCircle.js +0 -109
  180. package/src/mappings/ProgressIndicator.js +0 -181
  181. package/src/mappings/RadioButton.js +0 -51
  182. package/src/mappings/RadioButtonGroup.js +0 -17
  183. package/src/mappings/RadioButtonRow.js +0 -42
  184. package/src/mappings/RowBodyIcon.js +0 -75
  185. package/src/mappings/RowHeadlineImageCaption.js +0 -167
  186. package/src/mappings/RowHeadlineImageIcon.js +0 -99
  187. package/src/mappings/SVG.js +0 -20
  188. package/src/mappings/SafeAreaView.js +0 -33
  189. package/src/mappings/ScrollView.js +0 -37
  190. package/src/mappings/Shadow.js +0 -95
  191. package/src/mappings/Slider.js +0 -60
  192. package/src/mappings/StarRating.js +0 -43
  193. package/src/mappings/Stepper.js +0 -32
  194. package/src/mappings/Surface.js +0 -14
  195. package/src/mappings/Swiper.js +0 -71
  196. package/src/mappings/SwiperItem.js +0 -9
  197. package/src/mappings/Switch.js +0 -81
  198. package/src/mappings/TabView.js +0 -75
  199. package/src/mappings/TabViewItem.js +0 -30
  200. package/src/mappings/Text.js +0 -251
  201. package/src/mappings/TextArea.js +0 -283
  202. package/src/mappings/TextField.js +0 -400
  203. package/src/mappings/TextInput.js +0 -402
  204. package/src/mappings/ToggleButton.js +0 -50
  205. package/src/mappings/Touchable.js +0 -67
  206. package/src/mappings/Video.js +0 -81
  207. package/src/mappings/View.js +0 -207
  208. package/src/mappings/WebView.js +0 -88
  209. package/src/styles/DarkTheme.js +0 -26
  210. package/src/styles/DefaultTheme.js +0 -111
  211. package/src/styles/fonts.js +0 -62
  212. package/src/styles/overlay.js +0 -60
  213. package/src/styles/shadow.js +0 -51
  214. package/src/theming.js +0 -3
  215. package/src/utilities.js +0 -102
@@ -1,30 +0,0 @@
1
- import React from "react";
2
- import { Text, StyleSheet, TouchableOpacity, } from "react-native";
3
- import { extractStyles } from "../../utilities";
4
- const ActionSheetItem = ({ label, style, color, onPress, }) => {
5
- const { textStyles, viewStyles } = extractStyles(style);
6
- return (React.createElement(TouchableOpacity, { activeOpacity: 0.7, style: [styles.wrapper, viewStyles], onPress: onPress },
7
- React.createElement(Text, { style: [styles.label, textStyles, { color }] }, label)));
8
- };
9
- const styles = StyleSheet.create({
10
- wrapper: {
11
- borderBottomWidth: StyleSheet.hairlineWidth,
12
- borderBottomColor: "#CCCCCC",
13
- backgroundColor: "#F1F1F1",
14
- minHeight: 50,
15
- overflow: "hidden",
16
- display: "flex",
17
- justifyContent: "center",
18
- },
19
- label: {
20
- fontSize: 16,
21
- textAlign: "center",
22
- color: "#0A84FF",
23
- fontWeight: "500",
24
- overflow: "hidden",
25
- paddingHorizontal: 20,
26
- paddingVertical: 10,
27
- alignSelf: "center",
28
- },
29
- });
30
- export default ActionSheetItem;
@@ -1,3 +0,0 @@
1
- export { default as ActionSheet } from "./ActionSheet";
2
- export { default as ActionSheetItem } from "./ActionSheetItem";
3
- export { default as ActionSheetCancel } from "./ActionSheetCancel";
@@ -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";