@draftbit/core 46.9.1-fe76aa.2 → 46.9.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (211) 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/ResizeMode.js +1 -5
  5. package/lib/commonjs/mappings/ActionSheet.js +1 -1
  6. package/lib/commonjs/mappings/ActionSheetCancel.js +1 -1
  7. package/lib/commonjs/mappings/ActionSheetItem.js +1 -1
  8. package/lib/commonjs/mappings/MapCallout.js +1 -1
  9. package/lib/commonjs/mappings/MapMarker.js +1 -1
  10. package/lib/module/components/Justification.js +0 -1
  11. package/lib/module/components/ResizeMode.js +0 -1
  12. package/lib/module/mappings/ActionSheet.js +1 -1
  13. package/lib/module/mappings/ActionSheetCancel.js +1 -1
  14. package/lib/module/mappings/ActionSheetItem.js +1 -1
  15. package/lib/module/mappings/MapCallout.js +2 -2
  16. package/lib/module/mappings/MapMarker.js +2 -2
  17. package/lib/typescript/src/mappings/ActionSheet.d.ts.map +1 -1
  18. package/lib/typescript/src/mappings/ActionSheetCancel.d.ts.map +1 -1
  19. package/lib/typescript/src/mappings/ActionSheetItem.d.ts.map +1 -1
  20. package/lib/typescript/src/mappings/MapCallout.d.ts.map +1 -1
  21. package/lib/typescript/src/mappings/MapMarker.d.ts.map +1 -1
  22. package/package.json +3 -3
  23. package/src/mappings/ActionSheet.ts +1 -4
  24. package/src/mappings/ActionSheetCancel.ts +1 -4
  25. package/src/mappings/ActionSheetItem.ts +1 -4
  26. package/src/mappings/MapCallout.ts +2 -6
  27. package/src/mappings/MapMarker.ts +2 -6
  28. package/src/Provider.js +0 -9
  29. package/src/components/Accordion/AccordionGroup.js +0 -44
  30. package/src/components/Accordion/AccordionItem.js +0 -32
  31. package/src/components/Accordion/index.js +0 -2
  32. package/src/components/ActionSheet/ActionSheet.js +0 -45
  33. package/src/components/ActionSheet/ActionSheetCancel.js +0 -6
  34. package/src/components/ActionSheet/ActionSheetItem.js +0 -30
  35. package/src/components/ActionSheet/index.js +0 -3
  36. package/src/components/AnimatedCircularProgress.js +0 -43
  37. package/src/components/AspectRatio.js +0 -18
  38. package/src/components/AvatarEdit.js +0 -30
  39. package/src/components/Banner.js +0 -109
  40. package/src/components/Button.js +0 -114
  41. package/src/components/Card.js +0 -57
  42. package/src/components/Checkbox/Checkbox.js +0 -62
  43. package/src/components/Checkbox/CheckboxGroup.js +0 -21
  44. package/src/components/Checkbox/CheckboxGroupRow.js +0 -76
  45. package/src/components/Checkbox/CheckboxRow.js +0 -77
  46. package/src/components/Checkbox/context.js +0 -14
  47. package/src/components/Checkbox/index.js +0 -3
  48. package/src/components/CircleImage.js +0 -8
  49. package/src/components/CircularProgress.js +0 -81
  50. package/src/components/Config.js +0 -64
  51. package/src/components/Container.js +0 -43
  52. package/src/components/DatePicker/DatePicker.js +0 -382
  53. package/src/components/DatePicker/DatePickerComponent.js +0 -13
  54. package/src/components/DatePicker/DatePickerComponent.web.js +0 -30
  55. package/src/components/DatePicker/DatePickerComponentType.js +0 -1
  56. package/src/components/DeckSwiper/DeckSwiper.js +0 -65
  57. package/src/components/DeckSwiper/DeckSwiperCard.js +0 -21
  58. package/src/components/DeckSwiper/index.js +0 -2
  59. package/src/components/DeprecatedButton.js +0 -83
  60. package/src/components/DeprecatedCardWrapper.js +0 -18
  61. package/src/components/DeprecatedFAB.js +0 -114
  62. package/src/components/Divider.js +0 -13
  63. package/src/components/Elevation.js +0 -20
  64. package/src/components/FAB.js +0 -46
  65. package/src/components/FieldSearchBarFull.js +0 -53
  66. package/src/components/FormRow.js +0 -19
  67. package/src/components/IconButton.js +0 -35
  68. package/src/components/Image.js +0 -47
  69. package/src/components/Justification.js +0 -1
  70. package/src/components/Layout.js +0 -50
  71. package/src/components/Markdown.js +0 -10
  72. package/src/components/NumberInput.js +0 -49
  73. package/src/components/Picker/Picker.js +0 -266
  74. package/src/components/Picker/PickerComponent.android.js +0 -69
  75. package/src/components/Picker/PickerComponent.ios.js +0 -79
  76. package/src/components/Picker/PickerComponent.web.js +0 -70
  77. package/src/components/Picker/PickerTypes.js +0 -1
  78. package/src/components/Portal/Portal.js +0 -35
  79. package/src/components/Portal/PortalConsumer.js +0 -27
  80. package/src/components/Portal/PortalHost.js +0 -107
  81. package/src/components/Portal/PortalManager.js +0 -32
  82. package/src/components/Pressable.js +0 -12
  83. package/src/components/ProgressBar.js +0 -118
  84. package/src/components/ProgressCircle.js +0 -13
  85. package/src/components/ProgressIndicator.js +0 -27
  86. package/src/components/RadioButton/RadioButton.js +0 -17
  87. package/src/components/RadioButton/RadioButtonFieldGroup.js +0 -17
  88. package/src/components/RadioButton/RadioButtonGroup.js +0 -43
  89. package/src/components/RadioButton/RadioButtonRow.js +0 -76
  90. package/src/components/RadioButton/context.js +0 -14
  91. package/src/components/RadioButton/index.js +0 -4
  92. package/src/components/ResizeMode.js +0 -1
  93. package/src/components/Row.js +0 -48
  94. package/src/components/RowBodyIcon.js +0 -8
  95. package/src/components/RowHeadlineImageCaption.js +0 -12
  96. package/src/components/RowHeadlineImageIcon.js +0 -14
  97. package/src/components/SVG.js +0 -13
  98. package/src/components/ScreenContainer.js +0 -35
  99. package/src/components/Shadow.js +0 -16
  100. package/src/components/Slider.js +0 -63
  101. package/src/components/StarRating.js +0 -50
  102. package/src/components/StepIndicator.js +0 -346
  103. package/src/components/Stepper.js +0 -41
  104. package/src/components/Surface.js +0 -32
  105. package/src/components/Swiper/Swiper.js +0 -29
  106. package/src/components/Swiper/SwiperItem.js +0 -9
  107. package/src/components/Swiper/index.js +0 -2
  108. package/src/components/Switch.js +0 -56
  109. package/src/components/TabView/TabView.js +0 -54
  110. package/src/components/TabView/TabViewItem.js +0 -11
  111. package/src/components/TabView/index.js +0 -2
  112. package/src/components/Text.js +0 -33
  113. package/src/components/TextField.js +0 -428
  114. package/src/components/ToggleButton.js +0 -39
  115. package/src/components/Touchable.js +0 -12
  116. package/src/components/Touchable.web.js +0 -2
  117. package/src/components/Typography.js +0 -36
  118. package/src/components/useAuthState.js +0 -31
  119. package/src/constants.js +0 -10
  120. package/src/hooks.js +0 -12
  121. package/src/index.js +0 -49
  122. package/src/interfaces/Icon.js +0 -8
  123. package/src/mappings/Accordion.js +0 -50
  124. package/src/mappings/AccordionItem.js +0 -17
  125. package/src/mappings/ActionSheet.js +0 -17
  126. package/src/mappings/ActionSheetCancel.js +0 -23
  127. package/src/mappings/ActionSheetItem.js +0 -27
  128. package/src/mappings/ActivityIndicator.js +0 -58
  129. package/src/mappings/AudioPlayer.js +0 -57
  130. package/src/mappings/AvatarEdit.js +0 -38
  131. package/src/mappings/Banner.js +0 -32
  132. package/src/mappings/BlurView.js +0 -42
  133. package/src/mappings/Button.js +0 -116
  134. package/src/mappings/Card.js +0 -52
  135. package/src/mappings/CardBlock.js +0 -123
  136. package/src/mappings/CardContainer.js +0 -104
  137. package/src/mappings/CardContainerRating.js +0 -126
  138. package/src/mappings/CardContainerShortImage.js +0 -120
  139. package/src/mappings/CardInline.js +0 -52
  140. package/src/mappings/Carousel.js +0 -19
  141. package/src/mappings/Checkbox.js +0 -46
  142. package/src/mappings/CheckboxGroup.js +0 -26
  143. package/src/mappings/CheckboxRow.js +0 -61
  144. package/src/mappings/CircleImage.js +0 -25
  145. package/src/mappings/Container.js +0 -30
  146. package/src/mappings/CustomCode.js +0 -8
  147. package/src/mappings/DatePicker.js +0 -182
  148. package/src/mappings/DeckSwiper.js +0 -48
  149. package/src/mappings/DeckSwiperCard.js +0 -16
  150. package/src/mappings/Divider.js +0 -27
  151. package/src/mappings/FAB.js +0 -37
  152. package/src/mappings/Fetch.js +0 -13
  153. package/src/mappings/FieldSearchBarFull.js +0 -50
  154. package/src/mappings/FlashList.js +0 -113
  155. package/src/mappings/FlatList.js +0 -51
  156. package/src/mappings/HeaderLarge.js +0 -29
  157. package/src/mappings/HeaderMedium.js +0 -55
  158. package/src/mappings/HeaderOverline.js +0 -55
  159. package/src/mappings/Icon.js +0 -32
  160. package/src/mappings/IconButton.js +0 -33
  161. package/src/mappings/Image.js +0 -35
  162. package/src/mappings/ImageBackground.js +0 -29
  163. package/src/mappings/KeyboardAvoidingView.js +0 -41
  164. package/src/mappings/KeyboardAwareScrollView.js +0 -50
  165. package/src/mappings/Layout.js +0 -200
  166. package/src/mappings/LinearGradient.js +0 -82
  167. package/src/mappings/MapCallout.js +0 -26
  168. package/src/mappings/MapMarker.js +0 -52
  169. package/src/mappings/MapView.js +0 -142
  170. package/src/mappings/Markdown.js +0 -25
  171. package/src/mappings/Modal.js +0 -42
  172. package/src/mappings/NumberInput.js +0 -254
  173. package/src/mappings/Picker.js +0 -153
  174. package/src/mappings/ProgressBar.js +0 -101
  175. package/src/mappings/ProgressCircle.js +0 -109
  176. package/src/mappings/ProgressIndicator.js +0 -181
  177. package/src/mappings/RadioButton.js +0 -51
  178. package/src/mappings/RadioButtonGroup.js +0 -17
  179. package/src/mappings/RadioButtonRow.js +0 -42
  180. package/src/mappings/RowBodyIcon.js +0 -75
  181. package/src/mappings/RowHeadlineImageCaption.js +0 -167
  182. package/src/mappings/RowHeadlineImageIcon.js +0 -99
  183. package/src/mappings/SVG.js +0 -20
  184. package/src/mappings/SafeAreaView.js +0 -33
  185. package/src/mappings/ScrollView.js +0 -37
  186. package/src/mappings/Shadow.js +0 -95
  187. package/src/mappings/Slider.js +0 -60
  188. package/src/mappings/StarRating.js +0 -43
  189. package/src/mappings/Stepper.js +0 -32
  190. package/src/mappings/Surface.js +0 -14
  191. package/src/mappings/Swiper.js +0 -71
  192. package/src/mappings/SwiperItem.js +0 -9
  193. package/src/mappings/Switch.js +0 -81
  194. package/src/mappings/TabView.js +0 -75
  195. package/src/mappings/TabViewItem.js +0 -30
  196. package/src/mappings/Text.js +0 -251
  197. package/src/mappings/TextArea.js +0 -283
  198. package/src/mappings/TextField.js +0 -400
  199. package/src/mappings/TextInput.js +0 -402
  200. package/src/mappings/ToggleButton.js +0 -50
  201. package/src/mappings/Touchable.js +0 -67
  202. package/src/mappings/Video.js +0 -81
  203. package/src/mappings/View.js +0 -207
  204. package/src/mappings/WebView.js +0 -88
  205. package/src/styles/DarkTheme.js +0 -26
  206. package/src/styles/DefaultTheme.js +0 -111
  207. package/src/styles/fonts.js +0 -62
  208. package/src/styles/overlay.js +0 -60
  209. package/src/styles/shadow.js +0 -51
  210. package/src/theming.js +0 -3
  211. package/src/utilities.js +0 -102
@@ -1,64 +0,0 @@
1
- import { Dimensions, Platform } from "react-native";
2
- const getWindowDimensions = () => {
3
- const { width, height } = Dimensions.get("window");
4
- return {
5
- windowWidth: width,
6
- windowHeight: height,
7
- };
8
- };
9
- const { windowWidth, windowHeight } = getWindowDimensions();
10
- const getFilters = (options) => {
11
- const { width, height } = options;
12
- const filters = ["c_scale", "q_auto", "dpr_auto"];
13
- if (width)
14
- filters.push(`w_${width}`);
15
- if (height)
16
- filters.push(`h_${height}`);
17
- return filters.join(",");
18
- };
19
- const buildImageUrl = (options, name) => {
20
- const filters = getFilters(options);
21
- return [
22
- "https://res.cloudinary.com/altos/image/upload",
23
- filters,
24
- `${name}.png`,
25
- ].join("/");
26
- };
27
- const getExtension = () => {
28
- return Platform.OS === "web" ? ".svg" : ".png";
29
- };
30
- export default {
31
- windowWidth,
32
- windowHeight,
33
- avatarImageUrl: buildImageUrl({
34
- width: 60,
35
- height: 60,
36
- }, "Avatar"),
37
- avatarImageSize: 60,
38
- cardImageSize: 200,
39
- cardImageUrl: "https://static.draftbit.com/images/placeholder-image" + getExtension(),
40
- cardIconSize: 16,
41
- cardIconBackgroundOpacity: 0.24,
42
- cardIconElevation: 1,
43
- placeholderImageURL: "https://static.draftbit.com/images/placeholder-image" + getExtension(),
44
- getPlaceholderImageUrl: (size) => buildImageUrl({ width: size.width, height: size.height }, "image-placeholder_1"),
45
- placeholderSvgURL: "https://static.draftbit.com/images/placeholder-image.svg",
46
- squareImageUrl: buildImageUrl({ width: 100, height: 100 }, "Avatar"),
47
- FABSize: 40,
48
- FABBorderRadius: 20,
49
- FABFixedHeight: 64,
50
- cardContainerShortImageAspectRatio: 1,
51
- rowSingleLineImageSize: 24,
52
- rowMultiLineImageSize: 48,
53
- rowSingleLineIconSize: 24,
54
- rowMultiLineIconSize: 16,
55
- headerIconSize: 24,
56
- buttonIconSize: 24,
57
- swiperInactiveDotSize: 6,
58
- swiperActiveDotSize: 10,
59
- fieldSearchBarFullIconSize: 24,
60
- stepperButtonSize: 40,
61
- radioButtonSize: 24,
62
- topSafeAreaViewHeight: 0,
63
- // topSafeAreaViewHeight: Platform.OS === "android" ? Constants.statusBarHeight : 0
64
- };
@@ -1,43 +0,0 @@
1
- import * as React from "react";
2
- import { View, ImageBackground, StyleSheet, } from "react-native";
3
- import { withTheme } from "../theming";
4
- import Elevation from "./Elevation";
5
- const Container = ({ useThemeGutterPadding, borderColor, borderWidth, backgroundColor, backgroundImage, backgroundImageResizeMode, elevation, style, children, theme, // eslint-disable-line @typescript-eslint/no-unused-vars
6
- ...rest }) => {
7
- const { flex, flexGrow, flexWrap, flexBasis, flexShrink, flexDirection, alignContent, justifyContent, alignItems, padding, paddingTop, paddingBottom, paddingLeft, paddingRight, paddingVertical, paddingHorizontal, ...styleProp } = StyleSheet.flatten(style) || {};
8
- const containerStyle = {
9
- backgroundColor,
10
- borderColor,
11
- borderWidth,
12
- width: "100%",
13
- ...styleProp,
14
- };
15
- const innerStyle = {
16
- flex,
17
- flexGrow,
18
- flexWrap,
19
- flexBasis,
20
- flexShrink,
21
- flexDirection,
22
- alignContent,
23
- justifyContent,
24
- alignItems,
25
- padding,
26
- paddingTop,
27
- paddingBottom,
28
- paddingLeft,
29
- paddingRight,
30
- paddingVertical,
31
- paddingHorizontal: paddingHorizontal || useThemeGutterPadding ? 16 : 0,
32
- };
33
- const Wrap = elevation ? Elevation : View;
34
- if (elevation)
35
- containerStyle.elevation = elevation;
36
- return (React.createElement(Wrap, { style: [containerStyle, style], ...rest }, backgroundImage ? (React.createElement(ImageBackground, { source: typeof backgroundImage === "string"
37
- ? { uri: backgroundImage }
38
- : backgroundImage, resizeMode: backgroundImageResizeMode, style: {
39
- flex: 1,
40
- } },
41
- React.createElement(View, { style: innerStyle }, children))) : (React.createElement(View, { style: innerStyle }, children))));
42
- };
43
- export default withTheme(Container);
@@ -1,382 +0,0 @@
1
- import * as React from "react";
2
- import { View, Animated, Text, StyleSheet, I18nManager, TextInput as NativeTextInput, Keyboard, } from "react-native";
3
- import { useSafeAreaInsets } from "react-native-safe-area-context";
4
- import dateFormat from "dateformat";
5
- import { withTheme } from "../../theming";
6
- import Portal from "../Portal/Portal";
7
- import Touchable from "../Touchable";
8
- import DateTimePicker from "./DatePickerComponent";
9
- import { extractStyles } from "../../utilities";
10
- const AnimatedText = Animated.createAnimatedComponent(Text);
11
- const FOCUS_ANIMATION_DURATION = 150;
12
- const BLUR_ANIMATION_DURATION = 180;
13
- const ICON_SIZE = 24;
14
- const MONTHS = [
15
- "January",
16
- "February",
17
- "March",
18
- "April",
19
- "May",
20
- "June",
21
- "July",
22
- "August",
23
- "September",
24
- "October",
25
- "November",
26
- "December",
27
- ];
28
- const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disabledOpacity }, date, onDateChange = () => { }, defaultValue, disabled = false, mode = "date", format, type = "underline", leftIconName, rightIconName, leftIconMode = "inset", label, labelSize, labelColor, placeholder, borderColor: inputBorderColor, borderColorActive: inputBorderColorActive, autoDismissKeyboard = true, ...props }) => {
29
- const [value, setValue] = React.useState(date || defaultValue);
30
- React.useEffect(() => {
31
- if (defaultValue != null) {
32
- setValue(defaultValue);
33
- }
34
- }, [defaultValue]);
35
- const [pickerVisible, setPickerVisible] = React.useState(false);
36
- const [labeled] = React.useState(new Animated.Value(date ? 0 : 1));
37
- const [placeholder1, setPlaceholder1] = React.useState("");
38
- const [focused, setFocused] = React.useState(false);
39
- const [labelLayout, setLabelLayout] = React.useState({ measured: false, width: 0 });
40
- const { viewStyles, textStyles } = extractStyles(style);
41
- const getValidDate = () => {
42
- if (!value) {
43
- return new Date();
44
- }
45
- return typeof (value === null || value === void 0 ? void 0 : value.getMonth) === "function" ? value : new Date();
46
- };
47
- const formatDate = () => {
48
- if (!value)
49
- return "";
50
- let newDate = getValidDate();
51
- if (format)
52
- return dateFormat(newDate, format);
53
- if (mode === "time") {
54
- return `${newDate.toLocaleTimeString()}`;
55
- }
56
- if (mode === "datetime") {
57
- return `${newDate.toLocaleString()}`;
58
- }
59
- return `${MONTHS[newDate.getMonth()]} ${newDate.getDate()}, ${newDate.getFullYear()}`;
60
- };
61
- const toggleVisibility = async () => {
62
- setPickerVisible(!pickerVisible);
63
- focused ? _handleBlur() : _handleFocus();
64
- };
65
- const insets = useSafeAreaInsets();
66
- // const _restoreLabel = () =>
67
- // Animated.timing(labeled, {
68
- // toValue: 1,
69
- // duration: FOCUS_ANIMATION_DURATION,
70
- // useNativeDriver: true,
71
- // }).start();
72
- // const _minmizeLabel = () =>
73
- // Animated.timing(labeled, {
74
- // toValue: 0,
75
- // duration: BLUR_ANIMATION_DURATION,
76
- // useNativeDriver: true,
77
- // }).start();
78
- // const _showPlaceholder = () =>
79
- // setTimeout(() => setPlaceholder1(placeholder || ""), 50);
80
- const _hidePlaceholder = () => {
81
- setPlaceholder1("");
82
- };
83
- React.useEffect(() => {
84
- setValue(date);
85
- }, [date]);
86
- React.useEffect(() => {
87
- if (value || focused || placeholder1) {
88
- // _minmizeLabel();
89
- Animated.timing(labeled, {
90
- toValue: 0,
91
- duration: BLUR_ANIMATION_DURATION,
92
- useNativeDriver: true,
93
- }).start();
94
- }
95
- else {
96
- // _restoreLabel();
97
- Animated.timing(labeled, {
98
- toValue: 1,
99
- duration: FOCUS_ANIMATION_DURATION,
100
- useNativeDriver: true,
101
- }).start();
102
- }
103
- }, [value, focused, placeholder1, labeled]);
104
- React.useEffect(() => {
105
- const _showPlaceholder = () => setTimeout(() => setPlaceholder1(placeholder || ""), 50);
106
- if (focused || !label) {
107
- _showPlaceholder();
108
- }
109
- else {
110
- _hidePlaceholder();
111
- }
112
- return () => {
113
- clearTimeout(_showPlaceholder());
114
- };
115
- }, [focused, label, placeholder]);
116
- React.useEffect(() => {
117
- if (pickerVisible && autoDismissKeyboard) {
118
- Keyboard.dismiss();
119
- }
120
- }, [pickerVisible, autoDismissKeyboard]);
121
- const _handleFocus = () => {
122
- if (disabled) {
123
- return;
124
- }
125
- setFocused(true);
126
- };
127
- const _handleBlur = () => {
128
- if (disabled) {
129
- return;
130
- }
131
- setFocused(false);
132
- };
133
- const MINIMIZED_LABEL_Y_OFFSET = -(typography.caption.lineHeight + 4);
134
- const OUTLINE_MINIMIZED_LABEL_Y_OFFSET = -(16 * 0.5 + 4);
135
- const MAXIMIZED_LABEL_FONT_SIZE = textStyles.fontSize || typography.subtitle1.fontSize;
136
- const MINIMIZED_LABEL_FONT_SIZE = labelSize
137
- ? labelSize
138
- : typography.caption.fontSize;
139
- const hasActiveOutline = focused;
140
- let inputTextColor, activeColor, underlineColor, borderColor = inputBorderColor, placeholderColor, containerStyle, backgroundColor, inputStyle;
141
- inputTextColor = colors.strong;
142
- if (disabled) {
143
- activeColor = colors.light;
144
- placeholderColor = colors.light;
145
- borderColor = "transparent";
146
- underlineColor = "transparent";
147
- backgroundColor = colors.divider;
148
- }
149
- else {
150
- activeColor = inputBorderColorActive || colors.primary;
151
- placeholderColor = inputBorderColor || colors.light;
152
- underlineColor = inputBorderColor || colors.light;
153
- backgroundColor = colors.background;
154
- }
155
- const { lineHeight, ...subtitle1 } = typography.subtitle1;
156
- inputStyle = {
157
- paddingVertical: 0,
158
- color: inputTextColor,
159
- paddingLeft: leftIconName && leftIconMode === "inset"
160
- ? ICON_SIZE + (type === "solid" ? 16 : 12)
161
- : 0,
162
- paddingRight: rightIconName ? ICON_SIZE + 16 + 4 : 12,
163
- ...subtitle1,
164
- height: lineHeight,
165
- };
166
- if (type === "underline") {
167
- containerStyle = {
168
- borderTopLeftRadius: roundness,
169
- borderTopRightRadius: roundness,
170
- paddingBottom: 12,
171
- marginTop: 16,
172
- };
173
- }
174
- else {
175
- containerStyle = {
176
- borderRadius: roundness,
177
- borderColor: hasActiveOutline ? activeColor : borderColor,
178
- borderWidth: 1,
179
- paddingTop: labeled ? 16 * 1.5 : 16,
180
- paddingBottom: labeled ? 16 * 0.5 : 16,
181
- opacity: disabled ? disabledOpacity : 1,
182
- backgroundColor,
183
- };
184
- inputStyle.paddingHorizontal = 12;
185
- }
186
- if (leftIconName && leftIconMode === "outset") {
187
- containerStyle.marginLeft = ICON_SIZE + 8;
188
- }
189
- let leftIconColor;
190
- if (focused) {
191
- leftIconColor = colors.primary;
192
- }
193
- else {
194
- leftIconColor = colors.light;
195
- }
196
- const leftIconProps = {
197
- size: 24,
198
- color: leftIconColor,
199
- name: leftIconName || "",
200
- };
201
- const leftIconStyle = {
202
- position: "absolute",
203
- marginTop: type === "solid"
204
- ? leftIconMode === "inset"
205
- ? MINIMIZED_LABEL_FONT_SIZE + 4
206
- : 16
207
- : leftIconMode === "outset"
208
- ? 16
209
- : 0,
210
- };
211
- const labelStyle = {
212
- ...typography.subtitle1,
213
- top: type === "solid" ? 16 : 0,
214
- fontFamily: textStyles === null || textStyles === void 0 ? void 0 : textStyles.fontFamily,
215
- left: leftIconName && leftIconMode === "inset"
216
- ? ICON_SIZE + (type === "solid" ? 16 : 12)
217
- : 0,
218
- transform: [
219
- {
220
- // Move label to top
221
- translateY: labeled.interpolate({
222
- inputRange: [0, 1],
223
- outputRange: [
224
- type === "solid"
225
- ? OUTLINE_MINIMIZED_LABEL_Y_OFFSET
226
- : MINIMIZED_LABEL_Y_OFFSET,
227
- 0,
228
- ],
229
- }),
230
- },
231
- {
232
- // Make label smaller
233
- scale: labeled.interpolate({
234
- inputRange: [0, 1],
235
- outputRange: [
236
- MINIMIZED_LABEL_FONT_SIZE / MAXIMIZED_LABEL_FONT_SIZE,
237
- 1,
238
- ],
239
- }),
240
- },
241
- {
242
- // Offset label scale since RN doesn't support transform origin
243
- translateX: labeled.interpolate({
244
- inputRange: [0, 1],
245
- outputRange: [
246
- -(1 - MINIMIZED_LABEL_FONT_SIZE / MAXIMIZED_LABEL_FONT_SIZE) *
247
- (labelLayout.width / 2),
248
- 0,
249
- ],
250
- }),
251
- },
252
- ],
253
- };
254
- const inputStyles = [
255
- styles.input,
256
- inputStyle,
257
- type === "solid" ? { marginHorizontal: 12 } : {},
258
- ];
259
- // const render = (props) => <NativeTextInput {...props} />;
260
- return (React.createElement(View, { style: [styles.container, style] },
261
- React.createElement(Touchable, { disabled: disabled, onPress: toggleVisibility },
262
- React.createElement(View, { pointerEvents: "none" },
263
- React.createElement(View, { style: [styles.container, style] },
264
- leftIconName && leftIconMode === "outset" ? (React.createElement(Icon, { ...leftIconProps, style: leftIconStyle })) : null,
265
- React.createElement(View, { style: [
266
- containerStyle,
267
- style ? { height: style.height } : {},
268
- viewStyles,
269
- ] },
270
- type === "underline" ? (
271
- // When type === 'flat', render an underline
272
- React.createElement(Animated.View, { style: [
273
- styles.underline,
274
- {
275
- backgroundColor: focused ? activeColor : underlineColor,
276
- // Underlines is thinner when input is not focused
277
- transform: [{ scaleY: focused ? 1 : 0.5 }],
278
- },
279
- ] })) : null,
280
- label ? (
281
- // Position colored placeholder and gray placeholder on top of each other and crossfade them
282
- // This gives the effect of animating the color, but allows us to use native driver
283
- React.createElement(View, { pointerEvents: "none", style: [
284
- StyleSheet.absoluteFill,
285
- {
286
- opacity:
287
- // Hide the label in minimized state until we measure its width
288
- date || focused ? (labelLayout.measured ? 1 : 0) : 1,
289
- },
290
- ] },
291
- React.createElement(AnimatedText, { onLayout: (e) => setLabelLayout({
292
- width: e.nativeEvent.layout.width,
293
- measured: true,
294
- }), style: [
295
- styles.placeholder,
296
- type === "solid" ? { paddingHorizontal: 12 } : {},
297
- labelStyle,
298
- {
299
- color: labelColor || colors.light,
300
- opacity: labeled.interpolate({
301
- inputRange: [0, 1],
302
- outputRange: [hasActiveOutline ? 1 : 0, 0],
303
- }),
304
- },
305
- ], numberOfLines: 1 }, label),
306
- React.createElement(AnimatedText, { style: [
307
- styles.placeholder,
308
- type === "solid" ? { paddingHorizontal: 12 } : {},
309
- labelStyle,
310
- {
311
- color: labelColor || placeholderColor,
312
- opacity: hasActiveOutline ? labeled : 1,
313
- },
314
- ], numberOfLines: 1 }, label))) : null,
315
- leftIconName && leftIconMode === "inset" ? (React.createElement(Icon, { ...leftIconProps, style: {
316
- ...leftIconStyle,
317
- marginLeft: type === "solid" ? 16 : 0,
318
- } })) : null,
319
- React.createElement(NativeTextInput, { value: formatDate(), placeholder: label ? placeholder1 : placeholder, editable: !disabled, placeholderTextColor: placeholderColor, selectionColor: activeColor, onFocus: _handleFocus, onBlur: _handleBlur, underlineColorAndroid: "transparent", style: [inputStyles, textStyles], ...props })),
320
- rightIconName ? (React.createElement(Icon, { name: rightIconName, size: ICON_SIZE, color: colors.light, style: {
321
- position: "absolute",
322
- right: 16,
323
- marginTop: type === "solid" ? MINIMIZED_LABEL_FONT_SIZE + 4 : 16,
324
- } })) : null))),
325
- pickerVisible && (React.createElement(Portal, null,
326
- React.createElement(View, { style: [
327
- styles.picker,
328
- {
329
- backgroundColor: colors.divider,
330
- },
331
- ] },
332
- React.createElement(View, { style: [
333
- styles.pickerContainer,
334
- {
335
- paddingTop: insets.top,
336
- paddingBottom: insets.bottom,
337
- paddingLeft: insets.left,
338
- paddingRight: insets.right,
339
- },
340
- ] },
341
- React.createElement(DateTimePicker, { value: getValidDate(), mode: mode, isVisible: pickerVisible, toggleVisibility: toggleVisibility, onChange: (_event, data) => {
342
- toggleVisibility();
343
- setValue(data);
344
- onDateChange(data);
345
- } })))))));
346
- };
347
- const styles = StyleSheet.create({
348
- container: {
349
- alignSelf: "stretch",
350
- },
351
- picker: {
352
- position: "absolute",
353
- bottom: 0,
354
- left: 0,
355
- right: 0,
356
- flexDirection: "row",
357
- justifyContent: "center",
358
- },
359
- underline: {
360
- position: "absolute",
361
- left: 0,
362
- right: 0,
363
- bottom: 0,
364
- height: 2,
365
- },
366
- input: {
367
- flexGrow: 1,
368
- justifyContent: "center",
369
- textAlignVertical: "center",
370
- margin: 0,
371
- textAlign: I18nManager.isRTL ? "right" : "left",
372
- },
373
- placeholder: {
374
- position: "absolute",
375
- left: 0,
376
- },
377
- pickerContainer: { flexDirection: "column", width: "100%", zIndex: 100 },
378
- closeButton: {
379
- alignSelf: "flex-end",
380
- },
381
- });
382
- export default withTheme(DatePicker);
@@ -1,13 +0,0 @@
1
- import React from "react";
2
- import { Platform } from "react-native";
3
- import DateTimePicker from "@react-native-community/datetimepicker";
4
- import DateTimePickerModal from "react-native-modal-datetime-picker";
5
- const DatePickerComponent = ({ value, onChange, mode, toggleVisibility, }) => {
6
- return Platform.OS === "ios" || Platform.OS === "android" ? (React.createElement(DateTimePickerModal, { date: value, mode: mode, isVisible: true, display: Platform.OS === "ios" ? "spinner" : "default", onCancel: () => {
7
- console.log("Picker cancelled before selecting anything.");
8
- toggleVisibility();
9
- }, onConfirm: (data) => {
10
- onChange(null, data);
11
- } })) : (React.createElement(DateTimePicker, { value: value, mode: mode, onChange: onChange, display: "default" }));
12
- };
13
- export default DatePickerComponent;
@@ -1,30 +0,0 @@
1
- import React from "react";
2
- import DateFnsUtils from "@date-io/date-fns";
3
- import { MuiPickersUtilsProvider, DatePicker, TimePicker, DateTimePicker, } from "@material-ui/pickers";
4
- import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";
5
- import { withTheme } from "../../theming";
6
- import Theme from "../../styles/DefaultTheme";
7
- const DatePickerComponent = ({ value, onChange, mode, toggleVisibility, isVisible, theme, }) => {
8
- const internalTheme = createMuiTheme({
9
- palette: {
10
- primary: {
11
- main: theme.colors.primary || Theme.colors.primary,
12
- },
13
- secondary: {
14
- main: theme.colors.secondary || Theme.colors.secondary,
15
- },
16
- },
17
- });
18
- const Picker = mode === "date"
19
- ? DatePicker
20
- : mode === "time"
21
- ? TimePicker
22
- : DateTimePicker;
23
- return (React.createElement(MuiPickersUtilsProvider, { utils: DateFnsUtils },
24
- React.createElement(ThemeProvider, { theme: internalTheme },
25
- React.createElement(Picker, { value: value, open: isVisible, onChange: (d) => {
26
- toggleVisibility();
27
- onChange(null, d);
28
- }, onClose: () => toggleVisibility(), variant: "dialog", TextFieldComponent: () => null }))));
29
- };
30
- export default withTheme(DatePickerComponent);
@@ -1 +0,0 @@
1
- export {};
@@ -1,65 +0,0 @@
1
- import React from "react";
2
- import { StyleSheet, View } from "react-native";
3
- import DeckSwiperComponent from "react-native-deck-swiper";
4
- const DeckSwiper = ({ onIndexChanged, onEndReached, startCardIndex = 0, infiniteSwiping = false, verticalEnabled = true, horizontalEnabled = true, visibleCardCount = 1, data, keyExtractor, renderItem, style, children, }) => {
5
- //Both 'renderItem' and 'data' are optional to allow direct children. But if one is included, both need to be included
6
- if ((data && !renderItem) || (renderItem && !data)) {
7
- throw new Error("'renderItem' and 'data' need to both be provided to lazily render. Either remove them entirley or include both");
8
- }
9
- if (data && renderItem && children) {
10
- console.warn("'children' of DeckSwiper ignored due to usage of 'data' and 'renderItem'");
11
- }
12
- const childrenArray = React.useMemo(() => React.Children.toArray(children), [children]);
13
- // an array of indices based on children count
14
- const cardsFillerData = React.useMemo(() => Array.from(Array(childrenArray.length).keys()), [childrenArray]);
15
- const cardsData = data || cardsFillerData;
16
- const renderCard = (card, index) => {
17
- if (renderItem) {
18
- return renderItem({ item: card, index });
19
- }
20
- else {
21
- return React.createElement(React.Fragment, null, childrenArray[index]);
22
- }
23
- };
24
- const renderFirstCard = () => {
25
- if (cardsData.length) {
26
- return renderCard(cardsData[0], 0);
27
- }
28
- return undefined;
29
- };
30
- const cardKeyExtractor = (card) => {
31
- if (keyExtractor) {
32
- return keyExtractor(card);
33
- }
34
- else {
35
- return card === null || card === void 0 ? void 0 : card.toString();
36
- }
37
- };
38
- /**
39
- * By default react-native-deck-swiper positions everything with absolute position.
40
- * To overcome this, it is wrapped in a View to be able to add the component in any layout structure.
41
- *
42
- *
43
- * Since all children of that View are absolutley positioned, the View does not have a height and still looks and behaves weird.
44
- * To fix/mitage this without setting a static height, the first card is rendered in invisible state to take up space.
45
- * This effectivley makes the default height of the container be the height of the first card.
46
- */
47
- return (React.createElement(View, null,
48
- React.createElement(View, { style: styles.containerHeightFiller }, renderFirstCard()),
49
- React.createElement(DeckSwiperComponent, { cards: cardsData, renderCard: renderCard, keyExtractor: cardKeyExtractor, containerStyle: StyleSheet.flatten([styles.cardsContainer, style]), cardStyle: styles.card, onSwiped: onIndexChanged, onSwipedAll: onEndReached, cardIndex: startCardIndex, infinite: infiniteSwiping, verticalSwipe: verticalEnabled, horizontalSwipe: horizontalEnabled, showSecondCard: visibleCardCount > 1, stackSize: visibleCardCount, backgroundColor: "transparent", cardVerticalMargin: 0, cardHorizontalMargin: 0 })));
50
- };
51
- const styles = StyleSheet.create({
52
- cardsContainer: {
53
- width: "100%",
54
- },
55
- card: {
56
- left: 0,
57
- right: 0,
58
- width: "auto",
59
- height: "auto",
60
- },
61
- containerHeightFiller: {
62
- opacity: 0.0,
63
- },
64
- });
65
- export default DeckSwiper;
@@ -1,21 +0,0 @@
1
- import React from "react";
2
- import { View, StyleSheet } from "react-native";
3
- import { withTheme } from "../../theming";
4
- const DeckSwiperCard = ({ style, children, theme }) => (React.createElement(View, { style: [
5
- styles.card,
6
- {
7
- backgroundColor: theme.colors.background,
8
- borderColor: theme.colors.divider,
9
- },
10
- style,
11
- ] }, children));
12
- const styles = StyleSheet.create({
13
- card: {
14
- flex: 1,
15
- alignItems: "center",
16
- justifyContent: "center",
17
- padding: 20,
18
- borderWidth: 2,
19
- },
20
- });
21
- export default withTheme(DeckSwiperCard);
@@ -1,2 +0,0 @@
1
- export { default as DeckSwiper } from "./DeckSwiper";
2
- export { default as DeckSwiperCard } from "./DeckSwiperCard";