@draftbit/core 46.6.8-80070f.2 → 46.6.8

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 (188) hide show
  1. package/lib/commonjs/components/Justification.js +1 -5
  2. package/lib/commonjs/components/ResizeMode.js +1 -5
  3. package/lib/commonjs/components/Stepper.js +0 -1
  4. package/lib/module/components/Justification.js +0 -1
  5. package/lib/module/components/Layout.js +21 -42
  6. package/lib/module/components/ResizeMode.js +0 -1
  7. package/lib/module/components/Stepper.js +0 -3
  8. package/package.json +3 -3
  9. package/src/Provider.js +0 -9
  10. package/src/components/Accordion/AccordionGroup.js +0 -44
  11. package/src/components/Accordion/AccordionItem.js +0 -32
  12. package/src/components/Accordion/index.js +0 -2
  13. package/src/components/ActionSheet/ActionSheet.js +0 -45
  14. package/src/components/ActionSheet/ActionSheetCancel.js +0 -6
  15. package/src/components/ActionSheet/ActionSheetItem.js +0 -30
  16. package/src/components/ActionSheet/index.js +0 -3
  17. package/src/components/AnimatedCircularProgress.js +0 -43
  18. package/src/components/AspectRatio.js +0 -18
  19. package/src/components/AvatarEdit.js +0 -30
  20. package/src/components/Banner.js +0 -109
  21. package/src/components/Button.js +0 -114
  22. package/src/components/Card.js +0 -57
  23. package/src/components/CardBlock.js +0 -54
  24. package/src/components/CardContainer.js +0 -69
  25. package/src/components/CardContainerRating.js +0 -79
  26. package/src/components/CardContainerShortImage.js +0 -33
  27. package/src/components/CardInline.js +0 -36
  28. package/src/components/Carousel.js +0 -68
  29. package/src/components/Checkbox/Checkbox.js +0 -62
  30. package/src/components/Checkbox/CheckboxGroup.js +0 -21
  31. package/src/components/Checkbox/CheckboxGroupRow.js +0 -76
  32. package/src/components/Checkbox/CheckboxRow.js +0 -77
  33. package/src/components/Checkbox/context.js +0 -14
  34. package/src/components/Checkbox/index.js +0 -3
  35. package/src/components/CircleImage.js +0 -8
  36. package/src/components/CircularProgress.js +0 -81
  37. package/src/components/Config.js +0 -64
  38. package/src/components/Container.js +0 -43
  39. package/src/components/DatePicker/DatePicker.js +0 -377
  40. package/src/components/DatePicker/DatePickerComponent.js +0 -13
  41. package/src/components/DatePicker/DatePickerComponent.web.js +0 -30
  42. package/src/components/DatePicker/DatePickerComponentType.js +0 -1
  43. package/src/components/DeprecatedButton.js +0 -83
  44. package/src/components/DeprecatedCardWrapper.js +0 -18
  45. package/src/components/DeprecatedFAB.js +0 -114
  46. package/src/components/Divider.js +0 -13
  47. package/src/components/Elevation.js +0 -20
  48. package/src/components/FAB.js +0 -46
  49. package/src/components/FieldSearchBarFull.js +0 -53
  50. package/src/components/FormRow.js +0 -19
  51. package/src/components/Header.js +0 -44
  52. package/src/components/HeaderLarge.js +0 -7
  53. package/src/components/HeaderMedium.js +0 -7
  54. package/src/components/HeaderOverline.js +0 -7
  55. package/src/components/IconButton.js +0 -35
  56. package/src/components/Image.js +0 -47
  57. package/src/components/Justification.js +0 -1
  58. package/src/components/Layout.js +0 -50
  59. package/src/components/NumberInput.js +0 -49
  60. package/src/components/Picker/Picker.js +0 -267
  61. package/src/components/Picker/PickerComponent.android.js +0 -69
  62. package/src/components/Picker/PickerComponent.ios.js +0 -79
  63. package/src/components/Picker/PickerComponent.web.js +0 -70
  64. package/src/components/Picker/PickerTypes.js +0 -1
  65. package/src/components/Portal/Portal.js +0 -35
  66. package/src/components/Portal/PortalConsumer.js +0 -27
  67. package/src/components/Portal/PortalHost.js +0 -107
  68. package/src/components/Portal/PortalManager.js +0 -32
  69. package/src/components/Pressable.js +0 -12
  70. package/src/components/ProgressBar.js +0 -118
  71. package/src/components/ProgressCircle.js +0 -13
  72. package/src/components/ProgressIndicator.js +0 -27
  73. package/src/components/RadioButton/RadioButton.js +0 -17
  74. package/src/components/RadioButton/RadioButtonFieldGroup.js +0 -17
  75. package/src/components/RadioButton/RadioButtonGroup.js +0 -43
  76. package/src/components/RadioButton/RadioButtonRow.js +0 -76
  77. package/src/components/RadioButton/context.js +0 -14
  78. package/src/components/RadioButton/index.js +0 -4
  79. package/src/components/ResizeMode.js +0 -1
  80. package/src/components/Row.js +0 -48
  81. package/src/components/RowBodyIcon.js +0 -8
  82. package/src/components/RowHeadlineImageCaption.js +0 -12
  83. package/src/components/RowHeadlineImageIcon.js +0 -14
  84. package/src/components/SVG.js +0 -13
  85. package/src/components/ScreenContainer.js +0 -34
  86. package/src/components/Slider.js +0 -63
  87. package/src/components/StarRating.js +0 -50
  88. package/src/components/StepIndicator.js +0 -346
  89. package/src/components/Stepper.js +0 -41
  90. package/src/components/Surface.js +0 -32
  91. package/src/components/Swiper/Swiper.js +0 -29
  92. package/src/components/Swiper/SwiperItem.js +0 -9
  93. package/src/components/Swiper/index.js +0 -2
  94. package/src/components/Switch.js +0 -56
  95. package/src/components/Text.js +0 -33
  96. package/src/components/TextField.js +0 -428
  97. package/src/components/ToggleButton.js +0 -39
  98. package/src/components/Touchable.js +0 -12
  99. package/src/components/Touchable.web.js +0 -2
  100. package/src/components/Typography.js +0 -36
  101. package/src/components/useAuthState.js +0 -31
  102. package/src/constants.js +0 -10
  103. package/src/hooks.js +0 -12
  104. package/src/index.js +0 -53
  105. package/src/interfaces/Icon.js +0 -8
  106. package/src/mappings/Accordion.js +0 -41
  107. package/src/mappings/AccordionItem.js +0 -16
  108. package/src/mappings/ActionSheet.js +0 -13
  109. package/src/mappings/ActionSheetCancel.js +0 -19
  110. package/src/mappings/ActionSheetItem.js +0 -23
  111. package/src/mappings/ActivityIndicator.js +0 -58
  112. package/src/mappings/AudioPlayer.js +0 -57
  113. package/src/mappings/AvatarEdit.js +0 -38
  114. package/src/mappings/Banner.js +0 -32
  115. package/src/mappings/BlurView.js +0 -42
  116. package/src/mappings/Button.js +0 -116
  117. package/src/mappings/Card.js +0 -52
  118. package/src/mappings/CardBlock.js +0 -123
  119. package/src/mappings/CardContainer.js +0 -104
  120. package/src/mappings/CardContainerRating.js +0 -126
  121. package/src/mappings/CardContainerShortImage.js +0 -120
  122. package/src/mappings/CardInline.js +0 -52
  123. package/src/mappings/Carousel.js +0 -19
  124. package/src/mappings/Checkbox.js +0 -46
  125. package/src/mappings/CheckboxGroup.js +0 -26
  126. package/src/mappings/CheckboxRow.js +0 -61
  127. package/src/mappings/CircleImage.js +0 -25
  128. package/src/mappings/Container.js +0 -30
  129. package/src/mappings/CustomCode.js +0 -8
  130. package/src/mappings/DatePicker.js +0 -176
  131. package/src/mappings/Divider.js +0 -27
  132. package/src/mappings/FAB.js +0 -37
  133. package/src/mappings/Fetch.js +0 -13
  134. package/src/mappings/FieldSearchBarFull.js +0 -50
  135. package/src/mappings/FlashList.js +0 -79
  136. package/src/mappings/FlatList.js +0 -36
  137. package/src/mappings/HeaderLarge.js +0 -29
  138. package/src/mappings/HeaderMedium.js +0 -55
  139. package/src/mappings/HeaderOverline.js +0 -55
  140. package/src/mappings/Icon.js +0 -32
  141. package/src/mappings/IconButton.js +0 -35
  142. package/src/mappings/Image.js +0 -35
  143. package/src/mappings/ImageBackground.js +0 -29
  144. package/src/mappings/KeyboardAvoidingView.js +0 -41
  145. package/src/mappings/KeyboardAwareScrollView.js +0 -50
  146. package/src/mappings/Layout.js +0 -200
  147. package/src/mappings/LinearGradient.js +0 -77
  148. package/src/mappings/MapCallout.js +0 -21
  149. package/src/mappings/MapMarker.js +0 -47
  150. package/src/mappings/MapView.js +0 -139
  151. package/src/mappings/Modal.js +0 -42
  152. package/src/mappings/NumberInput.js +0 -254
  153. package/src/mappings/Picker.js +0 -148
  154. package/src/mappings/ProgressBar.js +0 -101
  155. package/src/mappings/ProgressCircle.js +0 -109
  156. package/src/mappings/ProgressIndicator.js +0 -181
  157. package/src/mappings/RadioButton.js +0 -51
  158. package/src/mappings/RadioButtonGroup.js +0 -17
  159. package/src/mappings/RadioButtonRow.js +0 -42
  160. package/src/mappings/RowBodyIcon.js +0 -75
  161. package/src/mappings/RowHeadlineImageCaption.js +0 -167
  162. package/src/mappings/RowHeadlineImageIcon.js +0 -99
  163. package/src/mappings/SVG.js +0 -20
  164. package/src/mappings/SafeAreaView.js +0 -33
  165. package/src/mappings/ScrollView.js +0 -31
  166. package/src/mappings/Slider.js +0 -60
  167. package/src/mappings/StarRating.js +0 -43
  168. package/src/mappings/Stepper.js +0 -32
  169. package/src/mappings/Surface.js +0 -14
  170. package/src/mappings/Swiper.js +0 -62
  171. package/src/mappings/SwiperItem.js +0 -8
  172. package/src/mappings/Switch.js +0 -81
  173. package/src/mappings/Text.js +0 -251
  174. package/src/mappings/TextArea.js +0 -274
  175. package/src/mappings/TextField.js +0 -391
  176. package/src/mappings/TextInput.js +0 -402
  177. package/src/mappings/ToggleButton.js +0 -50
  178. package/src/mappings/Touchable.js +0 -60
  179. package/src/mappings/Video.js +0 -81
  180. package/src/mappings/View.js +0 -207
  181. package/src/mappings/WebView.js +0 -88
  182. package/src/styles/DarkTheme.js +0 -26
  183. package/src/styles/DefaultTheme.js +0 -111
  184. package/src/styles/fonts.js +0 -62
  185. package/src/styles/overlay.js +0 -60
  186. package/src/styles/shadow.js +0 -51
  187. package/src/theming.js +0 -3
  188. package/src/utilities.js +0 -102
@@ -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,49 +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 [currentStringNumberValue, setCurrentStringNumberValue] = useState("0");
6
- const formatValueToStringNumber = (valueToFormat) => {
7
- if (valueToFormat != null) {
8
- if (isString(valueToFormat) && valueToFormat !== "") {
9
- if (/^0[1-9]$/.test(valueToFormat)) {
10
- return valueToFormat.slice(1);
11
- }
12
- else if (/^[+-]?([0-9]+\.?[0-9]*|\.[0-9]+)$/.test(valueToFormat)) {
13
- return valueToFormat;
14
- }
15
- else {
16
- return currentStringNumberValue;
17
- }
18
- }
19
- else if (isNumber(valueToFormat) && !isNaN(valueToFormat)) {
20
- return valueToFormat.toString();
21
- }
22
- }
23
- return "0";
24
- };
25
- // set currentStringNumberValue as defaultValue prop if there is a differnce on first render only
26
- useEffect(() => {
27
- const defaultStringNumberValue = formatValueToStringNumber(defaultValue);
28
- if (currentStringNumberValue !== defaultStringNumberValue) {
29
- setCurrentStringNumberValue(defaultStringNumberValue);
30
- }
31
- // eslint-disable-next-line react-hooks/exhaustive-deps
32
- }, []);
33
- const handleChangeText = (newValue) => {
34
- const newStringNumberValue = formatValueToStringNumber(newValue);
35
- const number = parseFloat(newStringNumberValue);
36
- setCurrentStringNumberValue(newStringNumberValue);
37
- onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(number);
38
- };
39
- // run handleChangeText with value prop only when value prop changes (and first render to reset currentStringNumberValue)
40
- useEffect(() => {
41
- const nextStringNumberValue = formatValueToStringNumber(value);
42
- if (currentStringNumberValue !== nextStringNumberValue) {
43
- handleChangeText(nextStringNumberValue);
44
- }
45
- // eslint-disable-next-line react-hooks/exhaustive-deps
46
- }, [value]);
47
- return (React.createElement(TextInput, { keyboardType: "numeric", value: currentStringNumberValue, onChangeText: handleChangeText, ...props }));
48
- };
49
- export default NumberInput;
@@ -1,267 +0,0 @@
1
- import * as React from "react";
2
- import { View, StyleSheet, Text, Platform, Dimensions, } from "react-native";
3
- import { omit, pickBy, identity, isObject } from "lodash";
4
- import { SafeAreaView } from "react-native-safe-area-context";
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 Touchable from "../Touchable";
10
- import { extractStyles, extractBorderAndMarginStyles, borderStyleNames, marginStyleNames, } from "../../utilities";
11
- function normalizeOptions(options) {
12
- if (options.length === 0) {
13
- return [];
14
- }
15
- if (typeof options[0] === ("string" || "number")) {
16
- return options.map((option) => ({
17
- label: String(option),
18
- value: String(option),
19
- }));
20
- }
21
- if (isObject(options[0]) &&
22
- options[0].value !== null &&
23
- options[0].label !== null) {
24
- return options.map((option) => {
25
- return {
26
- label: String(option.label),
27
- value: String(option.value),
28
- };
29
- });
30
- }
31
- throw new Error('Picker options must be either an array of strings or array of { "label": string; "value": string; } objects.');
32
- }
33
- const { width: deviceWidth, height: deviceHeight } = Dimensions.get("screen");
34
- const isIos = Platform.OS === "ios";
35
- const unstyledColor = "rgba(165, 173, 183, 1)";
36
- const disabledColor = "rgb(240, 240, 240)";
37
- const errorColor = "rgba(255, 69, 100, 1)";
38
- const Picker = ({ error, options = [], onValueChange, defaultValue, Icon, style, placeholder, value, disabled = false, theme, assistiveText, label, iconColor = unstyledColor, iconSize = 24, leftIconMode = "inset", leftIconName, placeholderTextColor = unstyledColor, rightIconName, type = "solid", }) => {
39
- var _a, _b;
40
- const androidPickerRef = React.useRef(undefined);
41
- const [internalValue, setInternalValue] = React.useState(value || defaultValue);
42
- const [pickerVisible, setPickerVisible] = React.useState(false);
43
- const togglePickerVisible = () => {
44
- setPickerVisible(!pickerVisible);
45
- };
46
- React.useEffect(() => {
47
- if (value != null) {
48
- setInternalValue(value);
49
- }
50
- }, [value]);
51
- React.useEffect(() => {
52
- if (defaultValue != null) {
53
- setInternalValue(defaultValue);
54
- }
55
- }, [defaultValue]);
56
- React.useEffect(() => {
57
- var _a;
58
- if (pickerVisible && androidPickerRef.current) {
59
- (_a = androidPickerRef === null || androidPickerRef === void 0 ? void 0 : androidPickerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
60
- }
61
- }, [pickerVisible, androidPickerRef]);
62
- const normalizedOptions = normalizeOptions(options);
63
- const pickerOptions = placeholder
64
- ? [{ value: placeholder, label: placeholder }, ...normalizedOptions]
65
- : normalizedOptions;
66
- const { colors } = theme;
67
- const { viewStyles, textStyles } = extractStyles(style);
68
- const additionalBorderStyles = ["backgroundColor"];
69
- const additionalMarginStyles = [
70
- "bottom",
71
- "height",
72
- "left",
73
- "maxHeight",
74
- "maxWidth",
75
- "minHeight",
76
- "minWidth",
77
- "overflow",
78
- "position",
79
- "right",
80
- "top",
81
- "width",
82
- "zIndex",
83
- ];
84
- const { borderStyles: extractedBorderStyles, marginStyles: extractedMarginStyles, } = extractBorderAndMarginStyles(viewStyles, additionalBorderStyles, additionalMarginStyles);
85
- const borderStyles = {
86
- ...{
87
- ...(type === "solid"
88
- ? {
89
- borderTopLeftRadius: 5,
90
- borderTopRightRadius: 5,
91
- borderBottomRightRadius: 5,
92
- borderBottomLeftRadius: 5,
93
- borderTopWidth: 1,
94
- borderRightWidth: 1,
95
- borderLeftWidth: 1,
96
- }
97
- : {}),
98
- borderBottomWidth: 1,
99
- borderColor: unstyledColor,
100
- borderStyle: "solid",
101
- },
102
- ...extractedBorderStyles,
103
- ...(error ? { borderColor: errorColor } : {}),
104
- ...(disabled
105
- ? { borderColor: "transparent", backgroundColor: disabledColor }
106
- : {}),
107
- };
108
- const marginStyles = {
109
- height: 60,
110
- ...extractedMarginStyles,
111
- };
112
- const stylesWithoutBordersAndMargins = omit(viewStyles, [
113
- ...borderStyleNames,
114
- ...marginStyleNames,
115
- ...additionalBorderStyles,
116
- ...additionalMarginStyles,
117
- ]);
118
- const selectedLabel = internalValue &&
119
- ((_b = (_a = pickerOptions.find((option) => option.value === internalValue)) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : internalValue);
120
- const labelText = label ? (React.createElement(Text, { style: {
121
- textAlign: textStyles.textAlign,
122
- color: unstyledColor,
123
- fontSize: 12,
124
- paddingBottom: 4,
125
- } }, label)) : null;
126
- const leftIconOutset = leftIconMode === "outset";
127
- const leftIcon = leftIconName ? (React.createElement(Icon, { name: leftIconName, color: disabled ? unstyledColor : iconColor, size: iconSize, style: {
128
- marginRight: 4,
129
- marginLeft: 4,
130
- } })) : null;
131
- const rightIcon = rightIconName ? (React.createElement(Icon, { name: rightIconName, color: disabled ? unstyledColor : iconColor, size: iconSize, style: {
132
- marginRight: -10,
133
- marginLeft: 8,
134
- } })) : null;
135
- const textAlign = textStyles === null || textStyles === void 0 ? void 0 : textStyles.textAlign;
136
- const calculateLeftPadding = () => {
137
- if (leftIconOutset) {
138
- if (textAlign === "center") {
139
- return iconSize - Math.abs(8 - iconSize);
140
- }
141
- return iconSize + 8;
142
- }
143
- return 0;
144
- };
145
- const assistiveTextLabel = assistiveText ? (React.createElement(Text, { style: {
146
- textAlign,
147
- width: "100%",
148
- paddingLeft: calculateLeftPadding(),
149
- color: unstyledColor,
150
- fontSize: 12,
151
- paddingTop: 4,
152
- } }, assistiveText)) : null;
153
- const primaryTextStyle = {
154
- color: unstyledColor,
155
- fontSize: 14,
156
- ...pickBy(textStyles, identity),
157
- ...(placeholder === internalValue ? { color: placeholderTextColor } : {}),
158
- ...(disabled ? { color: unstyledColor } : {}),
159
- };
160
- const handleValueChange = (newValue, itemIndex) => {
161
- if (!placeholder || itemIndex > 0) {
162
- onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(newValue, itemIndex);
163
- }
164
- setInternalValue(newValue);
165
- };
166
- return (
167
- /* marginsContainer */
168
- React.createElement(View, { style: [styles.marginsContainer, marginStyles] },
169
- React.createElement(Touchable, { disabled: disabled, onPress: togglePickerVisible, style: styles.touchableContainer },
170
- React.createElement(View, { pointerEvents: "none", style: [
171
- styles.outsetContainer,
172
- stylesWithoutBordersAndMargins,
173
- !leftIconOutset ? borderStyles : {},
174
- ] },
175
- leftIcon,
176
- React.createElement(View, { style: [
177
- styles.insetContainer,
178
- leftIconOutset ? borderStyles : {},
179
- ] },
180
- React.createElement(View, { style: styles.primaryTextContainer },
181
- labelText,
182
- React.createElement(Text, { style: primaryTextStyle }, String(selectedLabel !== null && selectedLabel !== void 0 ? selectedLabel : placeholder))),
183
- rightIcon)),
184
- assistiveTextLabel),
185
- isIos && pickerVisible ? (React.createElement(Portal, null,
186
- React.createElement(View, { style: [
187
- styles.iosPicker,
188
- {
189
- backgroundColor: colors.divider,
190
- },
191
- ] },
192
- React.createElement(SafeAreaView, { style: styles.iosSafeArea },
193
- React.createElement(Button, { Icon: Icon, type: "text", onPress: togglePickerVisible, style: styles.iosButton }, "Close"),
194
- React.createElement(NativePicker, { style: styles.iosNativePicker, selectedValue: internalValue, onValueChange: handleValueChange }, pickerOptions.map((option) => (React.createElement(NativePicker.Item, { label: option.label, value: option.value, key: option.value })))))))) : null,
195
- !isIos && pickerVisible ? (React.createElement(NativePicker, { enabled: pickerVisible, selectedValue: internalValue, onValueChange: handleValueChange, style: styles.nonIosPicker, ref: androidPickerRef, onBlur: () => setPickerVisible(false) }, pickerOptions.map((option) => (React.createElement(NativePicker.Item, { label: option.label, value: option.value, key: option.value }))))) : null));
196
- };
197
- const styles = StyleSheet.create({
198
- marginsContainer: {
199
- alignSelf: "stretch",
200
- alignItems: "center",
201
- width: "100%",
202
- maxWidth: deviceWidth,
203
- },
204
- touchableContainer: {
205
- flex: 1,
206
- height: "100%",
207
- width: "100%",
208
- alignSelf: "stretch",
209
- alignItems: "center",
210
- },
211
- outsetContainer: {
212
- flex: 1,
213
- height: "100%",
214
- width: "100%",
215
- flexDirection: "row",
216
- alignItems: "center",
217
- justifyContent: "space-between",
218
- },
219
- insetContainer: {
220
- flex: 1,
221
- height: "100%",
222
- width: "100%",
223
- flexDirection: "row",
224
- alignItems: "center",
225
- justifyContent: "space-between",
226
- paddingLeft: 12,
227
- paddingRight: 12,
228
- },
229
- primaryTextContainer: {
230
- flex: 1,
231
- },
232
- iosPicker: {
233
- position: "absolute",
234
- bottom: 0,
235
- left: 0,
236
- right: 0,
237
- flexDirection: "row",
238
- justifyContent: "center",
239
- width: "100%",
240
- maxWidth: deviceWidth,
241
- maxHeight: deviceHeight,
242
- },
243
- iosSafeArea: {
244
- backgroundColor: "white",
245
- flexDirection: "column",
246
- width: "100%",
247
- maxWidth: deviceWidth,
248
- },
249
- iosButton: {
250
- alignSelf: "flex-end",
251
- },
252
- iosNativePicker: {
253
- backgroundColor: "white",
254
- },
255
- nonIosPicker: {
256
- opacity: 0,
257
- position: "absolute",
258
- top: 0,
259
- left: 0,
260
- right: 0,
261
- bottom: 0,
262
- width: "100%",
263
- maxWidth: deviceWidth,
264
- maxHeight: deviceHeight,
265
- },
266
- });
267
- export default withTheme(Picker);