@draftbit/core 43.4.9 → 43.4.10

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 (184) hide show
  1. package/lib/commonjs/components/FAB.js +5 -19
  2. package/lib/commonjs/components/FAB.js.map +1 -1
  3. package/lib/commonjs/components/FieldSearchBarFull.js.map +1 -1
  4. package/lib/commonjs/components/Justification.js +0 -3
  5. package/lib/commonjs/components/ResizeMode.js +0 -3
  6. package/lib/commonjs/mappings/RowHeadlineImageCaption.js.map +1 -1
  7. package/lib/commonjs/mappings/RowHeadlineImageIcon.js.map +1 -1
  8. package/lib/module/components/Justification.js +1 -1
  9. package/lib/module/components/RadioButton/index.js.map +1 -1
  10. package/lib/module/components/ResizeMode.js +1 -1
  11. package/lib/module/components/Switch.js +10 -21
  12. package/lib/module/components/Switch.js.map +1 -1
  13. package/lib/module/mappings/HeaderMedium.js.map +1 -1
  14. package/package.json +3 -3
  15. package/src/Provider.js +0 -9
  16. package/src/components/Accordion/AccordionGroup.js +0 -44
  17. package/src/components/Accordion/AccordionItem.js +0 -32
  18. package/src/components/Accordion/index.js +0 -2
  19. package/src/components/ActionSheet/ActionSheet.js +0 -45
  20. package/src/components/ActionSheet/ActionSheetCancel.js +0 -6
  21. package/src/components/ActionSheet/ActionSheetItem.js +0 -30
  22. package/src/components/ActionSheet/index.js +0 -3
  23. package/src/components/AnimatedCircularProgress.js +0 -43
  24. package/src/components/AspectRatio.js +0 -18
  25. package/src/components/AvatarEdit.js +0 -30
  26. package/src/components/Button.js +0 -112
  27. package/src/components/Card.js +0 -57
  28. package/src/components/CardBlock.js +0 -54
  29. package/src/components/CardContainer.js +0 -69
  30. package/src/components/CardContainerRating.js +0 -79
  31. package/src/components/CardContainerShortImage.js +0 -33
  32. package/src/components/CardInline.js +0 -36
  33. package/src/components/Carousel.js +0 -66
  34. package/src/components/Checkbox/Checkbox.js +0 -63
  35. package/src/components/Checkbox/CheckboxGroup.js +0 -21
  36. package/src/components/Checkbox/CheckboxRow.js +0 -77
  37. package/src/components/Checkbox/context.js +0 -14
  38. package/src/components/Checkbox/index.js +0 -3
  39. package/src/components/CircleImage.js +0 -8
  40. package/src/components/CircularProgress.js +0 -78
  41. package/src/components/Config.js +0 -63
  42. package/src/components/Container.js +0 -44
  43. package/src/components/DatePicker/DatePicker.js +0 -370
  44. package/src/components/DatePicker/DatePickerComponent.js +0 -13
  45. package/src/components/DatePicker/DatePickerComponent.web.js +0 -30
  46. package/src/components/DatePicker/DatePickerComponentType.js +0 -1
  47. package/src/components/DeprecatedButton.js +0 -95
  48. package/src/components/DeprecatedCardWrapper.js +0 -18
  49. package/src/components/DeprecatedFAB.js +0 -115
  50. package/src/components/Divider.js +0 -13
  51. package/src/components/Elevation.js +0 -20
  52. package/src/components/FAB.js +0 -46
  53. package/src/components/FieldSearchBarFull.js +0 -53
  54. package/src/components/FormRow.js +0 -19
  55. package/src/components/Header.js +0 -44
  56. package/src/components/HeaderLarge.js +0 -7
  57. package/src/components/HeaderMedium.js +0 -7
  58. package/src/components/HeaderOverline.js +0 -7
  59. package/src/components/IconButton.js +0 -35
  60. package/src/components/Image.js +0 -47
  61. package/src/components/Justification.js +0 -1
  62. package/src/components/Layout.js +0 -50
  63. package/src/components/NumberInput.js +0 -50
  64. package/src/components/Picker/Picker.js +0 -56
  65. package/src/components/Picker/PickerComponent.android.js +0 -68
  66. package/src/components/Picker/PickerComponent.ios.js +0 -78
  67. package/src/components/Picker/PickerComponent.web.js +0 -69
  68. package/src/components/Picker/PickerTypes.js +0 -1
  69. package/src/components/Portal/Portal.js +0 -35
  70. package/src/components/Portal/PortalConsumer.js +0 -28
  71. package/src/components/Portal/PortalHost.js +0 -105
  72. package/src/components/Portal/PortalManager.js +0 -29
  73. package/src/components/ProgressBar.js +0 -118
  74. package/src/components/ProgressCircle.js +0 -13
  75. package/src/components/ProgressIndicator.js +0 -27
  76. package/src/components/RadioButton/RadioButton.js +0 -17
  77. package/src/components/RadioButton/RadioButtonFieldGroup.js +0 -17
  78. package/src/components/RadioButton/RadioButtonGroup.js +0 -39
  79. package/src/components/RadioButton/RadioButtonRow.js +0 -76
  80. package/src/components/RadioButton/context.js +0 -14
  81. package/src/components/RadioButton/index.js +0 -4
  82. package/src/components/ResizeMode.js +0 -1
  83. package/src/components/Row.js +0 -48
  84. package/src/components/RowBodyIcon.js +0 -8
  85. package/src/components/RowHeadlineImageCaption.js +0 -12
  86. package/src/components/RowHeadlineImageIcon.js +0 -14
  87. package/src/components/ScreenContainer.js +0 -35
  88. package/src/components/Slider.js +0 -63
  89. package/src/components/StarRating.js +0 -50
  90. package/src/components/StepIndicator.js +0 -346
  91. package/src/components/Stepper.js +0 -53
  92. package/src/components/Surface.js +0 -23
  93. package/src/components/Swiper/Swiper.js +0 -18
  94. package/src/components/Swiper/SwiperItem.js +0 -9
  95. package/src/components/Swiper/index.js +0 -2
  96. package/src/components/Switch.js +0 -56
  97. package/src/components/Text.js +0 -28
  98. package/src/components/TextField.js +0 -419
  99. package/src/components/ToggleButton.js +0 -39
  100. package/src/components/Touchable.js +0 -12
  101. package/src/components/Touchable.web.js +0 -2
  102. package/src/components/Typography.js +0 -36
  103. package/src/components/useAuthState.js +0 -31
  104. package/src/constants.js +0 -10
  105. package/src/hooks.js +0 -12
  106. package/src/index.js +0 -50
  107. package/src/interfaces/Icon.js +0 -8
  108. package/src/mappings/Accordion.js +0 -37
  109. package/src/mappings/AccordionItem.js +0 -16
  110. package/src/mappings/ActionSheet.js +0 -13
  111. package/src/mappings/ActionSheetCancel.js +0 -19
  112. package/src/mappings/ActionSheetItem.js +0 -22
  113. package/src/mappings/ActivityIndicator.js +0 -53
  114. package/src/mappings/AudioPlayer.js +0 -20
  115. package/src/mappings/AvatarEdit.js +0 -37
  116. package/src/mappings/BlurView.js +0 -41
  117. package/src/mappings/Button.js +0 -56
  118. package/src/mappings/Card.js +0 -52
  119. package/src/mappings/CardBlock.js +0 -122
  120. package/src/mappings/CardContainer.js +0 -102
  121. package/src/mappings/CardContainerRating.js +0 -124
  122. package/src/mappings/CardContainerShortImage.js +0 -118
  123. package/src/mappings/CardInline.js +0 -51
  124. package/src/mappings/Carousel.js +0 -18
  125. package/src/mappings/Checkbox.js +0 -45
  126. package/src/mappings/CheckboxGroup.js +0 -25
  127. package/src/mappings/CheckboxRow.js +0 -37
  128. package/src/mappings/CircleImage.js +0 -24
  129. package/src/mappings/Container.js +0 -29
  130. package/src/mappings/CustomCode.js +0 -8
  131. package/src/mappings/DatePicker.js +0 -146
  132. package/src/mappings/Divider.js +0 -26
  133. package/src/mappings/FAB.js +0 -36
  134. package/src/mappings/Fetch.js +0 -12
  135. package/src/mappings/FieldSearchBarFull.js +0 -49
  136. package/src/mappings/FlatList.js +0 -19
  137. package/src/mappings/HeaderLarge.js +0 -28
  138. package/src/mappings/HeaderMedium.js +0 -54
  139. package/src/mappings/HeaderOverline.js +0 -54
  140. package/src/mappings/Icon.js +0 -22
  141. package/src/mappings/IconButton.js +0 -30
  142. package/src/mappings/Image.js +0 -15
  143. package/src/mappings/ImageBackground.js +0 -28
  144. package/src/mappings/KeyboardAvoidingView.js +0 -40
  145. package/src/mappings/Layout.js +0 -195
  146. package/src/mappings/LinearGradient.js +0 -77
  147. package/src/mappings/MapCallout.js +0 -19
  148. package/src/mappings/MapMarker.js +0 -46
  149. package/src/mappings/Modal.js +0 -41
  150. package/src/mappings/Picker.js +0 -137
  151. package/src/mappings/ProgressBar.js +0 -100
  152. package/src/mappings/ProgressCircle.js +0 -108
  153. package/src/mappings/ProgressIndicator.js +0 -180
  154. package/src/mappings/RadioButton.js +0 -50
  155. package/src/mappings/RadioButtonGroup.js +0 -16
  156. package/src/mappings/RadioButtonRow.js +0 -37
  157. package/src/mappings/RowBodyIcon.js +0 -75
  158. package/src/mappings/RowHeadlineImageCaption.js +0 -167
  159. package/src/mappings/RowHeadlineImageIcon.js +0 -99
  160. package/src/mappings/SafeAreaView.js +0 -33
  161. package/src/mappings/ScrollView.js +0 -30
  162. package/src/mappings/Slider.js +0 -59
  163. package/src/mappings/StarRating.js +0 -46
  164. package/src/mappings/Stepper.js +0 -28
  165. package/src/mappings/Surface.js +0 -13
  166. package/src/mappings/Swiper.js +0 -60
  167. package/src/mappings/SwiperItem.js +0 -8
  168. package/src/mappings/Switch.js +0 -75
  169. package/src/mappings/Text.js +0 -227
  170. package/src/mappings/TextArea.js +0 -52
  171. package/src/mappings/TextField.js +0 -158
  172. package/src/mappings/TextInput.js +0 -208
  173. package/src/mappings/ToggleButton.js +0 -50
  174. package/src/mappings/Touchable.js +0 -12
  175. package/src/mappings/Video.js +0 -74
  176. package/src/mappings/View.js +0 -206
  177. package/src/mappings/WebView.js +0 -13
  178. package/src/styles/DarkTheme.js +0 -26
  179. package/src/styles/DefaultTheme.js +0 -111
  180. package/src/styles/fonts.js +0 -62
  181. package/src/styles/overlay.js +0 -60
  182. package/src/styles/shadow.js +0 -51
  183. package/src/theming.js +0 -3
  184. package/src/utilities.js +0 -54
@@ -1,46 +0,0 @@
1
- import * as React from "react";
2
- import { View, StyleSheet, Pressable, ActivityIndicator, Platform, } from "react-native";
3
- import { withTheme } from "../theming";
4
- const FAB = ({ onPress, disabled, loading, iconName = "MaterialIcons/add", style, theme, iconColor, bgColor, size = 50, Icon, ...props }) => {
5
- const backgroundColor = bgColor || theme.colors.primary;
6
- const color = iconColor || "#FFF";
7
- return (React.createElement(View, { style: [
8
- {
9
- width: size,
10
- height: size,
11
- borderRadius: size / 2,
12
- overflow: "hidden",
13
- },
14
- style,
15
- ] },
16
- React.createElement(Pressable, { onPress: onPress, disabled: loading || disabled, android_ripple: {
17
- color: "#333",
18
- radius: size / 4,
19
- }, style: ({ pressed }) => {
20
- return [
21
- styles.button,
22
- {
23
- opacity: pressed || disabled ? 0.75 : 1,
24
- width: size,
25
- height: size,
26
- borderRadius: size / 2,
27
- backgroundColor,
28
- },
29
- ];
30
- }, ...props },
31
- React.createElement(View, null, loading ? (React.createElement(ActivityIndicator, { style: size > 50 ? { marginTop: 2, marginLeft: 2 } : undefined, size: size <= 50 ? "small" : "large", color: color })) : (React.createElement(Icon, { name: iconName, size: size, color: color }))))));
32
- };
33
- const styles = StyleSheet.create({
34
- button: {
35
- backgroundColor: "#5a45ff",
36
- justifyContent: "center",
37
- alignItems: "center",
38
- ...Platform.select({
39
- web: {
40
- cursor: "pointer",
41
- userSelect: "none",
42
- },
43
- }),
44
- },
45
- });
46
- export default withTheme(FAB);
@@ -1,53 +0,0 @@
1
- import * as React from "react";
2
- import { View, TextInput, StyleSheet, } from "react-native";
3
- import { withTheme } from "../theming";
4
- import Config from "./Config";
5
- const FieldSearchBarFull = ({ showIcon, Icon, icon = "search", placeholder = "", style, theme: { colors, typography }, onChange: changeOverride, onSubmit: submitOverride, value, defaultValue, }) => {
6
- const [focused, setIsFocused] = React.useState(false);
7
- const onBlur = () => {
8
- setIsFocused(false);
9
- };
10
- const [internalValue, setInternalValue] = React.useState(value || defaultValue);
11
- React.useEffect(() => {
12
- if (value != null) {
13
- setInternalValue(value);
14
- }
15
- }, [value]);
16
- React.useEffect(() => {
17
- if (defaultValue != null) {
18
- setInternalValue(defaultValue);
19
- }
20
- }, [defaultValue]);
21
- const onChange = React.useCallback((text) => {
22
- changeOverride && changeOverride(text);
23
- }, [changeOverride]);
24
- const onFocus = () => {
25
- setIsFocused(true);
26
- };
27
- const onSubmit = (e) => {
28
- submitOverride && submitOverride(e);
29
- };
30
- const { lineHeight, ...typeStyles } = typography.body2; // eslint-disable-line @typescript-eslint/no-unused-vars
31
- const handleChangeText = (newValue) => {
32
- setInternalValue(newValue);
33
- if (onChange) {
34
- onChange(newValue);
35
- }
36
- };
37
- return (React.createElement(View, { style: [styles.container, style] },
38
- showIcon && (React.createElement(Icon, { name: icon, size: Config.fieldSearchBarFullIconSize, color: focused ? colors.primary : colors.light })),
39
- React.createElement(View, { style: { marginLeft: showIcon ? 12 : 0, flex: 1 } },
40
- React.createElement(TextInput, { clearButtonMode: "while-editing", placeholder: placeholder, value: internalValue, onBlur: onBlur, onFocus: onFocus, onChangeText: handleChangeText, onSubmitEditing: onSubmit, placeholderTextColor: colors.light, style: [
41
- {
42
- color: colors.medium,
43
- },
44
- typeStyles,
45
- ] }))));
46
- };
47
- const styles = StyleSheet.create({
48
- container: {
49
- flexDirection: "row",
50
- alignItems: "center",
51
- },
52
- });
53
- export default withTheme(FieldSearchBarFull);
@@ -1,19 +0,0 @@
1
- import * as React from "react";
2
- import { Text, StyleSheet } from "react-native";
3
- import { extractStyles } from "../utilities";
4
- import Touchable from "./Touchable";
5
- export default function FormRow({ disabled, direction, children, label, style, onPress, ...rest }) {
6
- const { textStyles, viewStyles } = extractStyles(style);
7
- return (React.createElement(Touchable, { disabled: disabled, onPress: onPress, style: [styles.row, { flexDirection: direction }, viewStyles], ...rest },
8
- React.createElement(Text, { style: textStyles }, label),
9
- children));
10
- }
11
- const styles = StyleSheet.create({
12
- row: {
13
- marginLeft: 8,
14
- marginRight: 8,
15
- flexDirection: "row",
16
- justifyContent: "space-between",
17
- alignItems: "center",
18
- },
19
- });
@@ -1,44 +0,0 @@
1
- import * as React from "react";
2
- import { View, Text, StyleSheet, } from "react-native";
3
- import { withTheme } from "../theming";
4
- import Divider from "./Divider";
5
- import Touchable from "./Touchable";
6
- import Config from "./Config";
7
- const Header = ({ Icon, titleTypeStyle, titleColor, title, buttonText, dividerTopMargin, icon, onPress, style, theme: { colors, typography }, }) => {
8
- return (React.createElement(View, { style: [styles.container, style] },
9
- React.createElement(View, { style: styles.topContainer },
10
- React.createElement(Text, { style: [
11
- titleTypeStyle,
12
- {
13
- color: titleColor,
14
- flex: 1,
15
- },
16
- ], numberOfLines: 1 }, title),
17
- onPress && (React.createElement(Touchable, { style: { alignSelf: "center", marginLeft: 12 }, onPress: onPress },
18
- React.createElement(View, { style: styles.buttonContainer },
19
- React.createElement(Text, { style: [
20
- typography.subtitle2,
21
- {
22
- color: colors.light,
23
- marginRight: 8,
24
- },
25
- ], numberOfLines: 1 }, buttonText),
26
- React.createElement(Icon, { name: icon, size: Config.headerIconSize, color: colors.light }))))),
27
- React.createElement(Divider, { style: { marginTop: dividerTopMargin || 16 } })));
28
- };
29
- const styles = StyleSheet.create({
30
- container: {
31
- alignSelf: "stretch",
32
- },
33
- topContainer: {
34
- flexDirection: "row",
35
- justifyContent: "space-between",
36
- alignItems: "center",
37
- },
38
- buttonContainer: {
39
- flexDirection: "row",
40
- justifyContent: "center",
41
- alignItems: "center",
42
- },
43
- });
44
- export default withTheme(Header);
@@ -1,7 +0,0 @@
1
- import * as React from "react";
2
- import { withTheme } from "../theming";
3
- import Header from "./Header";
4
- const HeaderLarge = ({ Icon, title, buttonText, icon, onPress = () => { }, style, theme: { colors, typography }, }) => {
5
- return (React.createElement(Header, { Icon: Icon, titleTypeStyle: typography.headline4, titleColor: colors.strong, title: title, buttonText: buttonText, icon: icon, onPress: onPress, style: style }));
6
- };
7
- export default withTheme(HeaderLarge);
@@ -1,7 +0,0 @@
1
- import * as React from "react";
2
- import { withTheme } from "../theming";
3
- import Header from "./Header";
4
- const HeaderMedium = ({ Icon, title, buttonText, icon, onPress = () => { }, style, theme: { colors, typography }, }) => {
5
- return (React.createElement(Header, { Icon: Icon, titleTypeStyle: typography.headline6, titleColor: colors.strong, title: title, buttonText: buttonText, icon: icon, onPress: onPress, style: style }));
6
- };
7
- export default withTheme(HeaderMedium);
@@ -1,7 +0,0 @@
1
- import * as React from "react";
2
- import { withTheme } from "../theming";
3
- import Header from "./Header";
4
- const HeaderOverline = ({ Icon, title, buttonText, icon, onPress = () => { }, style, theme: { colors, typography }, }) => {
5
- return (React.createElement(Header, { Icon: Icon, titleTypeStyle: typography.overline, titleColor: colors.light, title: title && title.toUpperCase(), buttonText: buttonText, icon: icon, dividerTopMargin: 12, onPress: onPress, style: style }));
6
- };
7
- export default withTheme(HeaderOverline);
@@ -1,35 +0,0 @@
1
- import * as React from "react";
2
- import { View, StyleSheet, ActivityIndicator, Pressable, Platform, } from "react-native";
3
- import { withTheme } from "../theming";
4
- const IconButton = ({ Icon, icon, color: customColor, size = 32, disabled = false, loading = false, onPress, theme, style, ...props }) => {
5
- const iconColor = customColor || theme.colors.primary;
6
- return (React.createElement(Pressable, { onPress: onPress, disabled: disabled || loading, style: ({ pressed }) => {
7
- return [
8
- styles.container,
9
- {
10
- opacity: pressed || disabled ? 0.75 : 1,
11
- width: size,
12
- height: size,
13
- alignItems: "center",
14
- justifyContent: "center",
15
- },
16
- style,
17
- ];
18
- }, ...props },
19
- React.createElement(View, null,
20
- icon && !loading ? (React.createElement(Icon, { name: icon, size: size - 2, color: iconColor })) : null,
21
- loading ? React.createElement(ActivityIndicator, { size: "small", color: iconColor }) : null)));
22
- };
23
- const styles = StyleSheet.create({
24
- container: {
25
- alignItems: "center",
26
- justifyContent: "center",
27
- ...Platform.select({
28
- web: {
29
- cursor: "pointer",
30
- userSelect: "none",
31
- },
32
- }),
33
- },
34
- });
35
- export default withTheme(IconButton);
@@ -1,47 +0,0 @@
1
- /* README: Internal Image component used for stuff like Card. DO NOT EXPORT! */
2
- import React from "react";
3
- import { Image as NativeImage, StyleSheet, } from "react-native";
4
- import Config from "./Config";
5
- import AspectRatio from "./AspectRatio";
6
- const generateDimensions = ({ aspectRatio, width, height }) => {
7
- if (aspectRatio && !width && !height) {
8
- return {
9
- aspectRatio,
10
- width: "100%",
11
- };
12
- }
13
- if (aspectRatio && height) {
14
- return {
15
- aspectRatio,
16
- height,
17
- width: aspectRatio * height,
18
- };
19
- }
20
- if (aspectRatio && width) {
21
- return {
22
- aspectRatio,
23
- width,
24
- height: width / aspectRatio,
25
- };
26
- }
27
- return { width, height };
28
- };
29
- const Image = ({ source, resizeMode = "cover", style, ...props }) => {
30
- let imageSource = source === null || source === undefined
31
- ? Config.placeholderImageURL
32
- : source;
33
- const styles = StyleSheet.flatten(style || {});
34
- const { aspectRatio, width, height } = generateDimensions(styles);
35
- if (aspectRatio) {
36
- return (React.createElement(AspectRatio, { style: [style, { width, height, aspectRatio }] },
37
- React.createElement(NativeImage, { ...props, source: imageSource, resizeMode: resizeMode, style: [
38
- style,
39
- {
40
- height: "100%",
41
- width: "100%",
42
- },
43
- ] })));
44
- }
45
- return (React.createElement(NativeImage, { ...props, source: source, resizeMode: resizeMode, style: style }));
46
- };
47
- export default Image;
@@ -1 +0,0 @@
1
- export {};
@@ -1,50 +0,0 @@
1
- import * as React from "react";
2
- import { View } from "react-native";
3
- export function Center({ width = 240, height = 200, children, bgColor, style, ...rest }) {
4
- return (React.createElement(View, { style: [
5
- {
6
- justifyContent: "center",
7
- alignItems: "center",
8
- width,
9
- height,
10
- backgroundColor: bgColor,
11
- },
12
- style,
13
- ], ...rest }, children));
14
- }
15
- export function Circle({ size = 50, bgColor, children, style, ...rest }) {
16
- const borderRadius = 1000;
17
- return (React.createElement(Center, { width: size, height: size, bgColor: bgColor, style: [
18
- style,
19
- { backgroundColor: bgColor, borderRadius, overflow: "hidden" },
20
- ], ...rest }, children));
21
- }
22
- export function Square({ size = 50, bgColor, children, style, ...rest }) {
23
- return (React.createElement(Center, { style: style, width: size, height: size, bgColor: bgColor, ...rest }, children));
24
- }
25
- export function Row({ justifyContent, alignItems, children, style, ...rest }) {
26
- return (React.createElement(View, { style: [
27
- style,
28
- {
29
- alignItems,
30
- flexDirection: "row",
31
- justifyContent: justifyContent,
32
- },
33
- ], ...rest }, children));
34
- }
35
- export function Spacer({ top = 8, right = 8, bottom = 8, left = 8, children, style, ...rest }) {
36
- return (React.createElement(View, { style: [
37
- style,
38
- {
39
- paddingRight: right,
40
- paddingTop: top,
41
- paddingLeft: left,
42
- paddingBottom: bottom,
43
- },
44
- ], ...rest }, children));
45
- }
46
- export function Stack({ children, justifyContent = "flex-start", alignItems = "flex-start", style, ...rest }) {
47
- return (
48
- // style must go first since we don't want justifyContent, alignItems overridden
49
- React.createElement(View, { style: [style, { justifyContent, alignItems }], ...rest }, children));
50
- }
@@ -1,50 +0,0 @@
1
- import React, { useEffect, useState } from "react";
2
- import { TextInput } from "react-native";
3
- import { isString, isNumber, isNaN } from "lodash";
4
- const NumberInput = ({ onChangeText, value, defaultValue, ...props }) => {
5
- const formatValueToStringNumber = (valueToFormat, currentStringNumberValue) => {
6
- if (valueToFormat != null) {
7
- if (isString(valueToFormat) && valueToFormat !== "") {
8
- if (/^0[1-9]$/.test(valueToFormat)) {
9
- return valueToFormat.slice(1);
10
- }
11
- else if (/^[+-]?([0-9]+\.?[0-9]*|\.[0-9]+)$/.test(valueToFormat)) {
12
- return valueToFormat;
13
- }
14
- else if (currentStringNumberValue) {
15
- return currentStringNumberValue;
16
- }
17
- }
18
- else if (isNumber(valueToFormat) && !isNaN(valueToFormat)) {
19
- return valueToFormat.toString();
20
- }
21
- }
22
- return "0";
23
- };
24
- const [currentStringNumberValue, setCurrentStringNumberValue] = useState(formatValueToStringNumber("0"));
25
- const handleChangeText = (newValue) => {
26
- const newStringNumberValue = formatValueToStringNumber(newValue, currentStringNumberValue);
27
- const number = parseFloat(newStringNumberValue);
28
- setCurrentStringNumberValue(newStringNumberValue);
29
- onChangeText?.(number);
30
- };
31
- /* set currentStringNumberValue directly to defaultValue if it exists on load
32
- ( no need to use TextInput's defaultValue because its value is always controlled & set ) */
33
- useEffect(() => {
34
- const defaultStringNumberValue = formatValueToStringNumber(defaultValue, currentStringNumberValue);
35
- if (currentStringNumberValue !== defaultStringNumberValue) {
36
- setCurrentStringNumberValue(defaultStringNumberValue);
37
- }
38
- // eslint-disable-next-line react-hooks/exhaustive-deps
39
- }, []);
40
- // set new (or original) value if different from current (or initialized "0") value
41
- useEffect(() => {
42
- const nextStringNumberValue = formatValueToStringNumber(value, currentStringNumberValue);
43
- if (currentStringNumberValue !== nextStringNumberValue) {
44
- handleChangeText(nextStringNumberValue);
45
- }
46
- // eslint-disable-next-line react-hooks/exhaustive-deps
47
- }, [value]);
48
- return (React.createElement(TextInput, { keyboardType: "numeric", value: currentStringNumberValue, onChangeText: handleChangeText, ...props }));
49
- };
50
- export default NumberInput;
@@ -1,56 +0,0 @@
1
- import * as React from "react";
2
- import { withTheme } from "../../theming";
3
- //@ts-ignore
4
- import PickerComponent from "./PickerComponent"; //unable to find file due to using .android/.web/.ios
5
- function normalizeOptions(options) {
6
- if (options.length === 0) {
7
- return [];
8
- }
9
- if (typeof options[0] === "string") {
10
- return options.map((option) => ({
11
- label: option,
12
- value: String(option),
13
- }));
14
- }
15
- if (options[0].label && options[0].value) {
16
- return options.map((option) => {
17
- return {
18
- label: option.label,
19
- value: String(option.value),
20
- };
21
- });
22
- }
23
- throw new Error('Picker options must be either an array of strings or array of { "label": string; "value": string; } objects.');
24
- }
25
- const Picker = ({ options = [], placeholder, onValueChange: onValueChangeOverride, value, defaultValue, ...props }) => {
26
- const [internalValue, setInternalValue] = React.useState(value || defaultValue);
27
- React.useEffect(() => {
28
- if (value != null) {
29
- setInternalValue(value);
30
- }
31
- }, [value]);
32
- React.useEffect(() => {
33
- if (defaultValue != null) {
34
- setInternalValue(defaultValue);
35
- }
36
- }, [defaultValue]);
37
- const onValueChange = React.useCallback((itemValue, itemIndex) => {
38
- if (placeholder && itemIndex === 0) {
39
- return;
40
- }
41
- onValueChangeOverride &&
42
- onValueChangeOverride(String(itemValue), itemIndex);
43
- }, [placeholder, onValueChangeOverride]);
44
- const normalizedOptions = normalizeOptions(options);
45
- const pickerOptions = placeholder
46
- ? [{ value: placeholder, label: placeholder }, ...normalizedOptions]
47
- : normalizedOptions;
48
- const handleValueChange = (newValue, itemIndex) => {
49
- setInternalValue(newValue);
50
- if (onValueChange) {
51
- onValueChange(newValue, itemIndex);
52
- }
53
- };
54
- return (React.createElement(PickerComponent, { ...props, selectedValue: String(internalValue), placeholder: placeholder, options: pickerOptions, onValueChange: handleValueChange }));
55
- };
56
- export default withTheme(Picker);
@@ -1,68 +0,0 @@
1
- import * as React from "react";
2
- import { View, StyleSheet } from "react-native";
3
- import omit from "lodash.omit";
4
- import { withTheme } from "../../theming";
5
- import { Picker as NativePicker } from "@react-native-picker/picker";
6
- import { extractStyles } from "../../utilities";
7
- import TextField from "../TextField";
8
- import Touchable from "../Touchable";
9
- const Picker = ({ style, options, placeholder, selectedValue, disabled = false, onValueChange: onValueChangeOverride = () => { }, ...props }) => {
10
- const { viewStyles: { borderRadius, // eslint-disable-line @typescript-eslint/no-unused-vars
11
- borderWidth, // eslint-disable-line @typescript-eslint/no-unused-vars
12
- borderTopWidth, // eslint-disable-line @typescript-eslint/no-unused-vars
13
- borderRightWidth, // eslint-disable-line @typescript-eslint/no-unused-vars
14
- borderBottomWidth, // eslint-disable-line @typescript-eslint/no-unused-vars
15
- borderLeftWidth, // eslint-disable-line @typescript-eslint/no-unused-vars
16
- borderColor, // eslint-disable-line @typescript-eslint/no-unused-vars
17
- backgroundColor, // eslint-disable-line @typescript-eslint/no-unused-vars
18
- padding, // eslint-disable-line @typescript-eslint/no-unused-vars
19
- paddingTop, // eslint-disable-line @typescript-eslint/no-unused-vars
20
- paddingRight, // eslint-disable-line @typescript-eslint/no-unused-vars
21
- paddingBottom, // eslint-disable-line @typescript-eslint/no-unused-vars
22
- paddingLeft, // eslint-disable-line @typescript-eslint/no-unused-vars
23
- ...viewStyles }, } = extractStyles(style);
24
- const textField = React.useRef(undefined);
25
- const onValueChange = (itemValue, itemIndex) => {
26
- toggleFocus();
27
- onValueChangeOverride(itemValue, itemIndex);
28
- };
29
- const toggleFocus = () => {
30
- if (!disabled) {
31
- // @ts-ignore
32
- textField.current.toggleFocus(); // cannot determine if method exists due to component being wrapped in a withTheme()
33
- }
34
- };
35
- const stylesWithoutMargin = style &&
36
- omit(StyleSheet.flatten(style), [
37
- "margin",
38
- "marginTop",
39
- "marginRight",
40
- "marginBottom",
41
- "marginLeft",
42
- ]);
43
- const selectedLabel = selectedValue &&
44
- (options.find((o) => o.value === selectedValue)?.label ?? selectedValue);
45
- return (React.createElement(Touchable, { disabled: disabled, onPress: toggleFocus, style: [styles.container, viewStyles] },
46
- React.createElement(View, null,
47
- React.createElement(NativePicker, { enabled: !disabled, selectedValue: selectedValue, onValueChange: onValueChange, style: {
48
- opacity: 0,
49
- position: "absolute",
50
- top: 0,
51
- left: 0,
52
- right: 0,
53
- bottom: 0,
54
- width: "100%",
55
- } }, options.map((o) => (React.createElement(NativePicker.Item, { label: o.label, value: o.value, key: o.value })))),
56
- React.createElement(View, { pointerEvents: "none" },
57
- React.createElement(TextField, { ...props, value: selectedLabel, placeholder: placeholder,
58
- // @ts-ignore
59
- ref: textField, disabled: disabled,
60
- // @ts-expect-error
61
- style: stylesWithoutMargin })))));
62
- };
63
- const styles = StyleSheet.create({
64
- container: {
65
- alignSelf: "stretch",
66
- },
67
- });
68
- export default withTheme(Picker);
@@ -1,78 +0,0 @@
1
- import * as React from "react";
2
- import { View, StyleSheet } from "react-native";
3
- import { SafeAreaView } from "react-native-safe-area-context";
4
- import omit from "lodash.omit";
5
- import { Picker as NativePicker } from "@react-native-picker/picker";
6
- import { withTheme } from "../../theming";
7
- import Portal from "../Portal/Portal";
8
- import Button from "../DeprecatedButton";
9
- import TextField from "../TextField";
10
- import Touchable from "../Touchable";
11
- import { extractStyles } from "../../utilities";
12
- const Picker = ({ Icon, style, options, placeholder, selectedValue, disabled = false, onValueChange = () => { }, theme: { colors }, ...props }) => {
13
- const { viewStyles: { borderRadius, // eslint-disable-line @typescript-eslint/no-unused-vars
14
- borderWidth, // eslint-disable-line @typescript-eslint/no-unused-vars
15
- borderTopWidth, // eslint-disable-line @typescript-eslint/no-unused-vars
16
- borderRightWidth, // eslint-disable-line @typescript-eslint/no-unused-vars
17
- borderBottomWidth, // eslint-disable-line @typescript-eslint/no-unused-vars
18
- borderLeftWidth, // eslint-disable-line @typescript-eslint/no-unused-vars
19
- borderColor, // eslint-disable-line @typescript-eslint/no-unused-vars
20
- backgroundColor, // eslint-disable-line @typescript-eslint/no-unused-vars
21
- padding, // eslint-disable-line @typescript-eslint/no-unused-vars
22
- paddingTop, // eslint-disable-line @typescript-eslint/no-unused-vars
23
- paddingRight, // eslint-disable-line @typescript-eslint/no-unused-vars
24
- paddingBottom, // eslint-disable-line @typescript-eslint/no-unused-vars
25
- paddingLeft, // eslint-disable-line @typescript-eslint/no-unused-vars
26
- ...viewStyles }, } = extractStyles(style);
27
- const textField = React.useRef(undefined);
28
- const [pickerVisible, setIsPickerVisible] = React.useState(false);
29
- const toggleVisibility = () => {
30
- setIsPickerVisible(!pickerVisible);
31
- // @ts-ignore
32
- textField.current.toggleFocus(); // cannot determine if method exists due to component being wrapped in a withTheme()
33
- };
34
- const stylesWithoutMargin = style &&
35
- omit(StyleSheet.flatten(style), [
36
- "margin",
37
- "marginTop",
38
- "marginRight",
39
- "marginBottom",
40
- "marginLeft",
41
- ]);
42
- const selectedLabel = selectedValue &&
43
- (options.find((o) => o.value === selectedValue)?.label ?? selectedValue);
44
- return (React.createElement(View, { style: [styles.container, viewStyles] },
45
- React.createElement(Touchable, { disabled: disabled, onPress: toggleVisibility },
46
- React.createElement(TextField, { ...props, value: String(selectedLabel), placeholder: placeholder,
47
- // @ts-ignore
48
- ref: textField, disabled: disabled, pointerEvents: "none",
49
- // @ts-expect-error
50
- style: stylesWithoutMargin, Icon: Icon })),
51
- pickerVisible && (React.createElement(Portal, null,
52
- React.createElement(View, { style: [styles.picker, { backgroundColor: colors.divider }] },
53
- React.createElement(SafeAreaView, { style: styles.pickerContainer },
54
- React.createElement(Button, { Icon: Icon, type: "text", onPress: toggleVisibility, style: styles.closeButton }, "Close"),
55
- React.createElement(NativePicker, { style: { backgroundColor: "white" }, selectedValue: selectedValue, onValueChange: onValueChange }, options.map((o) => (React.createElement(NativePicker.Item, { label: o.label, value: o.value, key: o.value }))))))))));
56
- };
57
- const styles = StyleSheet.create({
58
- container: {
59
- alignSelf: "stretch",
60
- },
61
- picker: {
62
- position: "absolute",
63
- bottom: 0,
64
- left: 0,
65
- right: 0,
66
- flexDirection: "row",
67
- justifyContent: "center",
68
- },
69
- pickerContainer: {
70
- backgroundColor: "white",
71
- flexDirection: "column",
72
- width: "100%",
73
- },
74
- closeButton: {
75
- alignSelf: "flex-end",
76
- },
77
- });
78
- export default withTheme(Picker);
@@ -1,69 +0,0 @@
1
- import * as React from "react";
2
- import { View, StyleSheet } from "react-native";
3
- import { Picker as NativePicker } from "@react-native-picker/picker";
4
- import omit from "lodash.omit";
5
- import { withTheme } from "../../theming";
6
- import { extractStyles } from "../../utilities";
7
- import TextField from "../TextField";
8
- import Touchable from "../Touchable";
9
- const Picker = ({ style, options, placeholder, selectedValue, disabled = false, onValueChange: onValueChangeOverride = () => { }, ...props }) => {
10
- const { viewStyles: { borderRadius, // eslint-disable-line @typescript-eslint/no-unused-vars
11
- borderWidth, // eslint-disable-line @typescript-eslint/no-unused-vars
12
- borderTopWidth, // eslint-disable-line @typescript-eslint/no-unused-vars
13
- borderRightWidth, // eslint-disable-line @typescript-eslint/no-unused-vars
14
- borderBottomWidth, // eslint-disable-line @typescript-eslint/no-unused-vars
15
- borderLeftWidth, // eslint-disable-line @typescript-eslint/no-unused-vars
16
- borderColor, // eslint-disable-line @typescript-eslint/no-unused-vars
17
- backgroundColor, // eslint-disable-line @typescript-eslint/no-unused-vars
18
- padding, // eslint-disable-line @typescript-eslint/no-unused-vars
19
- paddingTop, // eslint-disable-line @typescript-eslint/no-unused-vars
20
- paddingRight, // eslint-disable-line @typescript-eslint/no-unused-vars
21
- paddingBottom, // eslint-disable-line @typescript-eslint/no-unused-vars
22
- paddingLeft, // eslint-disable-line @typescript-eslint/no-unused-vars
23
- ...viewStyles }, } = extractStyles(style);
24
- const textField = React.useRef(undefined);
25
- const onValueChange = (itemValue, itemIndex) => {
26
- toggleFocus();
27
- onValueChangeOverride(itemValue, itemIndex);
28
- };
29
- const toggleFocus = () => {
30
- if (!disabled) {
31
- // @ts-ignore
32
- textField.current.toggleFocus(); // cannot determine if method exists due to component being wrapped in a withTheme()
33
- }
34
- };
35
- const stylesWithoutMargin = style &&
36
- omit(StyleSheet.flatten(style), [
37
- "margin",
38
- "marginTop",
39
- "marginRight",
40
- "marginBottom",
41
- "marginLeft",
42
- ]);
43
- const selectedLabel = selectedValue &&
44
- (options.find((o) => o.value === selectedValue)?.label ?? selectedValue);
45
- return (React.createElement(Touchable, { disabled: disabled, onPress: toggleFocus, style: [styles.container, viewStyles] },
46
- React.createElement(View, null,
47
- React.createElement(NativePicker, { enabled: !disabled, selectedValue: selectedValue, onValueChange: onValueChange, style: {
48
- flex: 1,
49
- opacity: 0,
50
- position: "absolute",
51
- top: 0,
52
- left: 0,
53
- right: 0,
54
- bottom: 0,
55
- width: "100%",
56
- } }, options.map((o) => (React.createElement(NativePicker.Item, { label: o.label, value: o.value, key: o.value })))),
57
- React.createElement(View, { pointerEvents: "none" },
58
- React.createElement(TextField, { ...props, value: selectedLabel, placeholder: placeholder,
59
- // @ts-ignore
60
- ref: textField, disabled: disabled,
61
- // @ts-expect-error
62
- style: stylesWithoutMargin })))));
63
- };
64
- const styles = StyleSheet.create({
65
- container: {
66
- alignSelf: "stretch",
67
- },
68
- });
69
- export default withTheme(Picker);
@@ -1 +0,0 @@
1
- export {};