@draftbit/core 47.0.1-ed6e56.2 → 47.1.0

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 (277) hide show
  1. package/lib/commonjs/components/Button.js +3 -3
  2. package/lib/commonjs/components/Checkbox/Checkbox.js +1 -3
  3. package/lib/commonjs/components/Checkbox/CheckboxGroupRow.js +1 -2
  4. package/lib/commonjs/components/Checkbox/CheckboxRow.js +1 -2
  5. package/lib/commonjs/components/DatePicker/DatePicker.js +0 -1
  6. package/lib/commonjs/components/DatePicker/DatePickerComponent.js +9 -3
  7. package/lib/commonjs/components/DatePicker/DatePickerComponent.web.js +1 -0
  8. package/lib/commonjs/components/DeprecatedButton.js +3 -27
  9. package/lib/commonjs/components/DeprecatedFAB.js +1 -2
  10. package/lib/commonjs/components/Justification.js +1 -5
  11. package/lib/commonjs/components/Pressable.js +37 -0
  12. package/lib/commonjs/components/ResizeMode.js +1 -5
  13. package/lib/commonjs/components/Swiper/Swiper.js +2 -0
  14. package/lib/commonjs/components/Touchable.js +8 -3
  15. package/lib/commonjs/index.js +7 -0
  16. package/lib/commonjs/mappings/Button.js +39 -10
  17. package/lib/commonjs/mappings/FlashList.js +45 -2
  18. package/lib/commonjs/mappings/FlatList.js +12 -0
  19. package/lib/commonjs/mappings/Swiper.js +2 -0
  20. package/lib/commonjs/mappings/Touchable.js +47 -7
  21. package/lib/module/components/Button.js +3 -3
  22. package/lib/module/components/Checkbox/Checkbox.js +2 -3
  23. package/lib/module/components/Checkbox/CheckboxGroupRow.js +2 -3
  24. package/lib/module/components/Checkbox/CheckboxRow.js +2 -3
  25. package/lib/module/components/DatePicker/DatePicker.js +0 -1
  26. package/lib/module/components/DatePicker/DatePickerComponent.js +9 -3
  27. package/lib/module/components/DatePicker/DatePickerComponent.web.js +1 -0
  28. package/lib/module/components/DeprecatedButton.js +4 -28
  29. package/lib/module/components/DeprecatedFAB.js +2 -3
  30. package/lib/module/components/Justification.js +0 -1
  31. package/lib/module/components/Pressable.js +30 -0
  32. package/lib/module/components/ResizeMode.js +0 -1
  33. package/lib/module/components/Swiper/Swiper.js +2 -0
  34. package/lib/module/components/Touchable.js +8 -3
  35. package/lib/module/index.js +1 -0
  36. package/lib/module/mappings/Button.js +40 -11
  37. package/lib/module/mappings/FlashList.js +46 -3
  38. package/lib/module/mappings/FlatList.js +13 -1
  39. package/lib/module/mappings/Swiper.js +3 -1
  40. package/lib/module/mappings/Touchable.js +49 -9
  41. package/lib/typescript/src/components/Button.d.ts.map +1 -1
  42. package/lib/typescript/src/components/Checkbox/Checkbox.d.ts +2 -2
  43. package/lib/typescript/src/components/Checkbox/Checkbox.d.ts.map +1 -1
  44. package/lib/typescript/src/components/Checkbox/CheckboxGroupRow.d.ts.map +1 -1
  45. package/lib/typescript/src/components/Checkbox/CheckboxRow.d.ts.map +1 -1
  46. package/lib/typescript/src/components/DatePicker/DatePicker.d.ts.map +1 -1
  47. package/lib/typescript/src/components/DatePicker/DatePickerComponent.d.ts.map +1 -1
  48. package/lib/typescript/src/components/DatePicker/DatePickerComponent.web.d.ts.map +1 -1
  49. package/lib/typescript/src/components/DatePicker/DatePickerComponentType.d.ts +0 -2
  50. package/lib/typescript/src/components/DatePicker/DatePickerComponentType.d.ts.map +1 -1
  51. package/lib/typescript/src/components/DeprecatedButton.d.ts +2 -2
  52. package/lib/typescript/src/components/DeprecatedButton.d.ts.map +1 -1
  53. package/lib/typescript/src/components/DeprecatedFAB.d.ts +2 -2
  54. package/lib/typescript/src/components/DeprecatedFAB.d.ts.map +1 -1
  55. package/lib/typescript/src/components/Pressable.d.ts +10 -0
  56. package/lib/typescript/src/components/Pressable.d.ts.map +1 -0
  57. package/lib/typescript/src/components/Swiper/Swiper.d.ts +2 -1
  58. package/lib/typescript/src/components/Swiper/Swiper.d.ts.map +1 -1
  59. package/lib/typescript/src/components/Touchable.d.ts +5 -6
  60. package/lib/typescript/src/components/Touchable.d.ts.map +1 -1
  61. package/lib/typescript/src/index.d.ts +1 -0
  62. package/lib/typescript/src/index.d.ts.map +1 -1
  63. package/lib/typescript/src/mappings/Button.d.ts +113 -4
  64. package/lib/typescript/src/mappings/Button.d.ts.map +1 -1
  65. package/lib/typescript/src/mappings/FlashList.d.ts +112 -2
  66. package/lib/typescript/src/mappings/FlashList.d.ts.map +1 -1
  67. package/lib/typescript/src/mappings/FlatList.d.ts +42 -0
  68. package/lib/typescript/src/mappings/FlatList.d.ts.map +1 -1
  69. package/lib/typescript/src/mappings/Swiper.d.ts +11 -0
  70. package/lib/typescript/src/mappings/Swiper.d.ts.map +1 -1
  71. package/lib/typescript/src/mappings/Touchable.d.ts +59 -5
  72. package/lib/typescript/src/mappings/Touchable.d.ts.map +1 -1
  73. package/package.json +6 -6
  74. package/src/components/Button.tsx +14 -4
  75. package/src/components/Checkbox/Checkbox.tsx +5 -7
  76. package/src/components/Checkbox/CheckboxGroupRow.tsx +3 -3
  77. package/src/components/Checkbox/CheckboxRow.tsx +3 -3
  78. package/src/components/DatePicker/DatePicker.tsx +0 -1
  79. package/src/components/DatePicker/DatePickerComponent.tsx +11 -3
  80. package/src/components/DatePicker/DatePickerComponent.web.tsx +1 -0
  81. package/src/components/DatePicker/DatePickerComponentType.ts +0 -9
  82. package/src/components/DeprecatedButton.tsx +7 -31
  83. package/src/components/DeprecatedFAB.tsx +5 -5
  84. package/src/components/Pressable.tsx +44 -0
  85. package/src/components/Swiper/Swiper.tsx +3 -0
  86. package/src/components/Touchable.tsx +11 -7
  87. package/src/index.tsx +1 -0
  88. package/src/mappings/Button.ts +41 -10
  89. package/src/mappings/FlashList.ts +82 -30
  90. package/src/mappings/FlatList.ts +16 -0
  91. package/src/mappings/Swiper.ts +4 -0
  92. package/src/mappings/Touchable.ts +53 -6
  93. package/lib/commonjs/components/DatePicker/DatePickerInput.js +0 -133
  94. package/lib/module/components/DatePicker/DatePickerInput.js +0 -123
  95. package/lib/typescript/src/components/DatePicker/DatePickerInput.d.ts +0 -18
  96. package/lib/typescript/src/components/DatePicker/DatePickerInput.d.ts.map +0 -1
  97. package/src/Provider.js +0 -9
  98. package/src/components/Accordion/AccordionGroup.js +0 -44
  99. package/src/components/Accordion/AccordionItem.js +0 -32
  100. package/src/components/Accordion/index.js +0 -2
  101. package/src/components/ActionSheet/ActionSheet.js +0 -45
  102. package/src/components/ActionSheet/ActionSheetCancel.js +0 -6
  103. package/src/components/ActionSheet/ActionSheetItem.js +0 -30
  104. package/src/components/ActionSheet/index.js +0 -3
  105. package/src/components/AnimatedCircularProgress.js +0 -43
  106. package/src/components/AspectRatio.js +0 -18
  107. package/src/components/AvatarEdit.js +0 -30
  108. package/src/components/Banner.js +0 -109
  109. package/src/components/Button.js +0 -114
  110. package/src/components/Card.js +0 -57
  111. package/src/components/CardBlock.js +0 -54
  112. package/src/components/CardContainer.js +0 -69
  113. package/src/components/CardContainerRating.js +0 -79
  114. package/src/components/CardContainerShortImage.js +0 -33
  115. package/src/components/CardInline.js +0 -36
  116. package/src/components/Carousel.js +0 -68
  117. package/src/components/Checkbox/Checkbox.js +0 -63
  118. package/src/components/Checkbox/CheckboxGroup.js +0 -21
  119. package/src/components/Checkbox/CheckboxGroupRow.js +0 -77
  120. package/src/components/Checkbox/CheckboxRow.js +0 -78
  121. package/src/components/Checkbox/context.js +0 -14
  122. package/src/components/Checkbox/index.js +0 -3
  123. package/src/components/CircleImage.js +0 -8
  124. package/src/components/CircularProgress.js +0 -81
  125. package/src/components/Config.js +0 -64
  126. package/src/components/Container.js +0 -43
  127. package/src/components/DatePicker/DatePicker.js +0 -377
  128. package/src/components/DatePicker/DatePickerComponent.js +0 -11
  129. package/src/components/DatePicker/DatePickerComponent.web.js +0 -30
  130. package/src/components/DatePicker/DatePickerComponentType.js +0 -1
  131. package/src/components/DatePicker/DatePickerInput.js +0 -97
  132. package/src/components/DatePicker/DatePickerInput.tsx +0 -195
  133. package/src/components/DeprecatedButton.js +0 -95
  134. package/src/components/DeprecatedCardWrapper.js +0 -18
  135. package/src/components/DeprecatedFAB.js +0 -115
  136. package/src/components/Divider.js +0 -13
  137. package/src/components/Elevation.js +0 -20
  138. package/src/components/FAB.js +0 -46
  139. package/src/components/FieldSearchBarFull.js +0 -53
  140. package/src/components/FormRow.js +0 -19
  141. package/src/components/Header.js +0 -44
  142. package/src/components/HeaderLarge.js +0 -7
  143. package/src/components/HeaderMedium.js +0 -7
  144. package/src/components/HeaderOverline.js +0 -7
  145. package/src/components/IconButton.js +0 -35
  146. package/src/components/Image.js +0 -47
  147. package/src/components/Justification.js +0 -1
  148. package/src/components/Layout.js +0 -50
  149. package/src/components/NumberInput.js +0 -49
  150. package/src/components/Picker/Picker.js +0 -267
  151. package/src/components/Picker/PickerComponent.android.js +0 -69
  152. package/src/components/Picker/PickerComponent.ios.js +0 -79
  153. package/src/components/Picker/PickerComponent.web.js +0 -70
  154. package/src/components/Picker/PickerTypes.js +0 -1
  155. package/src/components/Portal/Portal.js +0 -35
  156. package/src/components/Portal/PortalConsumer.js +0 -27
  157. package/src/components/Portal/PortalHost.js +0 -107
  158. package/src/components/Portal/PortalManager.js +0 -32
  159. package/src/components/ProgressBar.js +0 -118
  160. package/src/components/ProgressCircle.js +0 -13
  161. package/src/components/ProgressIndicator.js +0 -27
  162. package/src/components/RadioButton/RadioButton.js +0 -17
  163. package/src/components/RadioButton/RadioButtonFieldGroup.js +0 -17
  164. package/src/components/RadioButton/RadioButtonGroup.js +0 -43
  165. package/src/components/RadioButton/RadioButtonRow.js +0 -76
  166. package/src/components/RadioButton/context.js +0 -14
  167. package/src/components/RadioButton/index.js +0 -4
  168. package/src/components/ResizeMode.js +0 -1
  169. package/src/components/Row.js +0 -48
  170. package/src/components/RowBodyIcon.js +0 -8
  171. package/src/components/RowHeadlineImageCaption.js +0 -12
  172. package/src/components/RowHeadlineImageIcon.js +0 -14
  173. package/src/components/SVG.js +0 -13
  174. package/src/components/ScreenContainer.js +0 -34
  175. package/src/components/Slider.js +0 -63
  176. package/src/components/StarRating.js +0 -50
  177. package/src/components/StepIndicator.js +0 -346
  178. package/src/components/Stepper.js +0 -41
  179. package/src/components/Surface.js +0 -32
  180. package/src/components/Swiper/Swiper.js +0 -29
  181. package/src/components/Swiper/SwiperItem.js +0 -9
  182. package/src/components/Swiper/index.js +0 -2
  183. package/src/components/Switch.js +0 -56
  184. package/src/components/Text.js +0 -33
  185. package/src/components/TextField.js +0 -428
  186. package/src/components/ToggleButton.js +0 -39
  187. package/src/components/Touchable.js +0 -12
  188. package/src/components/Touchable.web.js +0 -2
  189. package/src/components/Typography.js +0 -36
  190. package/src/components/useAuthState.js +0 -31
  191. package/src/constants.js +0 -10
  192. package/src/hooks.js +0 -12
  193. package/src/index.js +0 -52
  194. package/src/interfaces/Icon.js +0 -8
  195. package/src/mappings/Accordion.js +0 -41
  196. package/src/mappings/AccordionItem.js +0 -16
  197. package/src/mappings/ActionSheet.js +0 -13
  198. package/src/mappings/ActionSheetCancel.js +0 -19
  199. package/src/mappings/ActionSheetItem.js +0 -23
  200. package/src/mappings/ActivityIndicator.js +0 -58
  201. package/src/mappings/AudioPlayer.js +0 -57
  202. package/src/mappings/AvatarEdit.js +0 -38
  203. package/src/mappings/Banner.js +0 -32
  204. package/src/mappings/BlurView.js +0 -42
  205. package/src/mappings/Button.js +0 -87
  206. package/src/mappings/Card.js +0 -52
  207. package/src/mappings/CardBlock.js +0 -123
  208. package/src/mappings/CardContainer.js +0 -104
  209. package/src/mappings/CardContainerRating.js +0 -126
  210. package/src/mappings/CardContainerShortImage.js +0 -120
  211. package/src/mappings/CardInline.js +0 -52
  212. package/src/mappings/Carousel.js +0 -19
  213. package/src/mappings/Checkbox.js +0 -46
  214. package/src/mappings/CheckboxGroup.js +0 -26
  215. package/src/mappings/CheckboxRow.js +0 -61
  216. package/src/mappings/CircleImage.js +0 -25
  217. package/src/mappings/Container.js +0 -30
  218. package/src/mappings/CustomCode.js +0 -8
  219. package/src/mappings/DatePicker.js +0 -176
  220. package/src/mappings/Divider.js +0 -27
  221. package/src/mappings/FAB.js +0 -37
  222. package/src/mappings/Fetch.js +0 -13
  223. package/src/mappings/FieldSearchBarFull.js +0 -50
  224. package/src/mappings/FlashList.js +0 -33
  225. package/src/mappings/FlatList.js +0 -24
  226. package/src/mappings/HeaderLarge.js +0 -29
  227. package/src/mappings/HeaderMedium.js +0 -55
  228. package/src/mappings/HeaderOverline.js +0 -55
  229. package/src/mappings/Icon.js +0 -32
  230. package/src/mappings/IconButton.js +0 -35
  231. package/src/mappings/Image.js +0 -35
  232. package/src/mappings/ImageBackground.js +0 -29
  233. package/src/mappings/KeyboardAvoidingView.js +0 -41
  234. package/src/mappings/KeyboardAwareScrollView.js +0 -50
  235. package/src/mappings/Layout.js +0 -200
  236. package/src/mappings/LinearGradient.js +0 -77
  237. package/src/mappings/MapCallout.js +0 -21
  238. package/src/mappings/MapMarker.js +0 -47
  239. package/src/mappings/MapView.js +0 -139
  240. package/src/mappings/Modal.js +0 -42
  241. package/src/mappings/NumberInput.js +0 -254
  242. package/src/mappings/Picker.js +0 -148
  243. package/src/mappings/ProgressBar.js +0 -101
  244. package/src/mappings/ProgressCircle.js +0 -109
  245. package/src/mappings/ProgressIndicator.js +0 -181
  246. package/src/mappings/RadioButton.js +0 -51
  247. package/src/mappings/RadioButtonGroup.js +0 -17
  248. package/src/mappings/RadioButtonRow.js +0 -42
  249. package/src/mappings/RowBodyIcon.js +0 -75
  250. package/src/mappings/RowHeadlineImageCaption.js +0 -167
  251. package/src/mappings/RowHeadlineImageIcon.js +0 -99
  252. package/src/mappings/SVG.js +0 -20
  253. package/src/mappings/SafeAreaView.js +0 -33
  254. package/src/mappings/ScrollView.js +0 -31
  255. package/src/mappings/Slider.js +0 -60
  256. package/src/mappings/StarRating.js +0 -43
  257. package/src/mappings/Stepper.js +0 -32
  258. package/src/mappings/Surface.js +0 -14
  259. package/src/mappings/Swiper.js +0 -60
  260. package/src/mappings/SwiperItem.js +0 -8
  261. package/src/mappings/Switch.js +0 -81
  262. package/src/mappings/Text.js +0 -251
  263. package/src/mappings/TextArea.js +0 -274
  264. package/src/mappings/TextField.js +0 -391
  265. package/src/mappings/TextInput.js +0 -402
  266. package/src/mappings/ToggleButton.js +0 -50
  267. package/src/mappings/Touchable.js +0 -17
  268. package/src/mappings/Video.js +0 -81
  269. package/src/mappings/View.js +0 -207
  270. package/src/mappings/WebView.js +0 -88
  271. package/src/styles/DarkTheme.js +0 -26
  272. package/src/styles/DefaultTheme.js +0 -111
  273. package/src/styles/fonts.js +0 -62
  274. package/src/styles/overlay.js +0 -60
  275. package/src/styles/shadow.js +0 -51
  276. package/src/theming.js +0 -3
  277. package/src/utilities.js +0 -102
@@ -1,34 +0,0 @@
1
- import * as React from "react";
2
- import { StyleSheet, ScrollView, View, } from "react-native";
3
- import { SafeAreaView } from "react-native-safe-area-context";
4
- import { withTheme } from "../theming";
5
- function ScreenContainer({ scrollable = false, hasSafeArea = false, hasBottomSafeArea = false, hasTopSafeArea = false, theme, style, children, ...rest }) {
6
- const backgroundColor = theme.colors.background;
7
- const edges = ["left", "right"];
8
- if (hasSafeArea || hasTopSafeArea) {
9
- edges.push("top");
10
- }
11
- if (hasSafeArea || hasBottomSafeArea) {
12
- edges.push("bottom");
13
- }
14
- return (React.createElement(SafeAreaView, { edges: edges, style: [
15
- styles.container,
16
- {
17
- backgroundColor,
18
- },
19
- ], ...rest }, scrollable ? (React.createElement(ScrollView, { contentContainerStyle: [
20
- styles.scrollViewContainer,
21
- { backgroundColor },
22
- style,
23
- ] }, children)) : (React.createElement(View, { style: [styles.container, { backgroundColor }, style] }, children))));
24
- }
25
- const styles = StyleSheet.create({
26
- container: {
27
- flex: 1,
28
- },
29
- scrollViewContainer: {
30
- flexGrow: 1,
31
- flex: undefined,
32
- },
33
- });
34
- export default withTheme(ScreenContainer);
@@ -1,63 +0,0 @@
1
- import * as React from "react";
2
- import { View, StyleSheet } from "react-native";
3
- import NativeSlider from "@react-native-community/slider";
4
- import isNumber from "lodash.isnumber";
5
- import toNumber from "lodash.tonumber";
6
- import { withTheme } from "../theming";
7
- function maybeParseValue(value) {
8
- if (value === undefined) {
9
- return undefined;
10
- }
11
- if (isNumber(value)) {
12
- return value;
13
- }
14
- try {
15
- const maybe = toNumber(value);
16
- if (isNumber(maybe)) {
17
- return maybe;
18
- }
19
- }
20
- catch {
21
- return undefined;
22
- }
23
- return undefined;
24
- }
25
- function Slider({ Icon, leftIcon, rightIcon, leftIconColor, rightIconColor, value, defaultValue, minimumTrackTintColor, maximumTrackTintColor, thumbTintColor, minimumValue = 0, maximumValue = 100, tapToSeek, step = 1, onValueChange = () => { }, style, theme, ...rest }) {
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 minTrackColor = minimumTrackTintColor || theme.colors.primary;
38
- const maxTrackColor = maximumTrackTintColor || theme.colors.light;
39
- const thumbColor = thumbTintColor || theme.colors.primary;
40
- const leftIconThemeColor = leftIconColor || theme.colors.light;
41
- const rightIconThemeColor = rightIconColor || theme.colors.light;
42
- const parsedValue = maybeParseValue(internalValue);
43
- const handleSlidingComplete = (newValue) => {
44
- setInternalValue(newValue);
45
- onValueChange(newValue);
46
- };
47
- return (React.createElement(View, { style: [styles.container, style], ...rest },
48
- leftIcon ? (React.createElement(Icon, { color: leftIconThemeColor, name: leftIcon, size: 24 })) : null,
49
- React.createElement(NativeSlider, { value: parsedValue, step: step, minimumValue: minimumValue, maximumValue: maximumValue, tapToSeek: tapToSeek, minimumTrackTintColor: minTrackColor, maximumTrackTintColor: maxTrackColor, thumbTintColor: thumbColor, onSlidingComplete: handleSlidingComplete, style: styles.slider }),
50
- rightIcon ? (React.createElement(Icon, { color: rightIconThemeColor, name: rightIcon, size: 24 })) : null));
51
- }
52
- const styles = StyleSheet.create({
53
- container: {
54
- height: 40,
55
- flexDirection: "row",
56
- alignItems: "center",
57
- },
58
- slider: {
59
- flex: 1,
60
- marginHorizontal: 12,
61
- },
62
- });
63
- export default withTheme(Slider);
@@ -1,50 +0,0 @@
1
- import * as React from "react";
2
- import { View, StyleSheet, Pressable, } from "react-native";
3
- import { withTheme } from "../theming";
4
- const StarRating = ({ Icon, starSize = 16, maxStars = 5, rating = 0, defaultValue, isEditable = false, activeColor, inactiveColor, style, onPress, ...rest }) => {
5
- const [localRating, setLocalRating] = React.useState(rating || defaultValue || 0);
6
- React.useEffect(() => {
7
- if (rating != null) {
8
- setLocalRating(rating);
9
- }
10
- }, [rating]);
11
- React.useEffect(() => {
12
- if (defaultValue != null) {
13
- setLocalRating(defaultValue);
14
- }
15
- }, [defaultValue]);
16
- const ratingHandler = React.useCallback((r) => {
17
- setLocalRating(r);
18
- !!onPress && onPress(r);
19
- }, [onPress]);
20
- const ratingRounded = Math.round(localRating * 2) / 2;
21
- return (React.createElement(View, { style: [styles.container, style], ...rest }, [...Array(maxStars)].map((_, i) => (React.createElement(View, { key: i, style: { display: "flex" } },
22
- React.createElement(Icon, { name: ratingRounded - i === 0.5
23
- ? "MaterialIcons/star-half"
24
- : "MaterialIcons/star", size: starSize, color: ratingRounded > i ? activeColor : inactiveColor }),
25
- isEditable && (React.createElement(View, { style: styles.touchContainer },
26
- React.createElement(Pressable, { style: styles.pressable, onPress: () => ratingHandler(i + 0.5) }),
27
- React.createElement(Pressable, { style: styles.pressable, onPress: () => ratingHandler(i + 1) }))))))));
28
- };
29
- const styles = StyleSheet.create({
30
- container: {
31
- flexDirection: "row",
32
- alignItems: "center",
33
- },
34
- touchContainer: {
35
- display: "flex",
36
- flexDirection: "row",
37
- position: "absolute",
38
- top: 0,
39
- right: 0,
40
- left: 0,
41
- bottom: 0,
42
- zIndex: 1,
43
- },
44
- pressable: {
45
- flex: 1,
46
- height: "100%",
47
- width: "50%",
48
- },
49
- });
50
- export default withTheme(StarRating);
@@ -1,346 +0,0 @@
1
- // @ts-nocheck
2
- import React, { Component } from "react";
3
- import { View, Text, StyleSheet, Animated, TouchableWithoutFeedback, } from "react-native";
4
- const STEP_STATUS = {
5
- CURRENT: "current",
6
- FINISHED: "finished",
7
- UNFINISHED: "unfinished",
8
- };
9
- export default class StepIndicator extends Component {
10
- constructor(props) {
11
- super(props);
12
- this.renderProgressBarBackground = () => {
13
- const { stepCount, direction } = this.props;
14
- let progressBarBackgroundStyle;
15
- if (direction === "vertical") {
16
- progressBarBackgroundStyle = {
17
- backgroundColor: this.state.customStyles.separatorUnFinishedColor,
18
- position: "absolute",
19
- left: (this.state.width - this.state.customStyles.separatorStrokeWidth) / 2,
20
- top: this.state.height / (2 * stepCount),
21
- bottom: this.state.height / (2 * stepCount),
22
- width: this.state.customStyles.separatorStrokeUnfinishedWidth === 0
23
- ? this.state.customStyles.separatorStrokeWidth
24
- : this.state.customStyles.separatorStrokeUnfinishedWidth,
25
- };
26
- }
27
- else {
28
- progressBarBackgroundStyle = {
29
- backgroundColor: this.state.customStyles.separatorUnFinishedColor,
30
- position: "absolute",
31
- top: (this.state.height - this.state.customStyles.separatorStrokeWidth) /
32
- 2,
33
- left: this.state.width / (2 * stepCount),
34
- right: this.state.width / (2 * stepCount),
35
- height: this.state.customStyles.separatorStrokeUnfinishedWidth === 0
36
- ? this.state.customStyles.separatorStrokeWidth
37
- : this.state.customStyles.separatorStrokeUnfinishedWidth,
38
- };
39
- }
40
- return (React.createElement(View, { onLayout: (event) => {
41
- if (direction === "vertical") {
42
- this.setState({ progressBarSize: event.nativeEvent.layout.height }, () => {
43
- this.onCurrentPositionChanged(this.props.currentPosition);
44
- });
45
- }
46
- else {
47
- this.setState({ progressBarSize: event.nativeEvent.layout.width }, () => {
48
- this.onCurrentPositionChanged(this.props.currentPosition);
49
- });
50
- }
51
- }, style: progressBarBackgroundStyle }));
52
- };
53
- this.renderProgressBar = () => {
54
- const { stepCount, direction } = this.props;
55
- let progressBarStyle;
56
- if (direction === "vertical") {
57
- progressBarStyle = {
58
- backgroundColor: this.state.customStyles.separatorFinishedColor,
59
- position: "absolute",
60
- left: (this.state.width - this.state.customStyles.separatorStrokeWidth) / 2,
61
- top: this.state.height / (2 * stepCount),
62
- bottom: this.state.height / (2 * stepCount),
63
- width: this.state.customStyles.separatorStrokeFinishedWidth === 0
64
- ? this.state.customStyles.separatorStrokeWidth
65
- : this.state.customStyles.separatorStrokeFinishedWidth,
66
- height: this.progressAnim,
67
- };
68
- }
69
- else {
70
- progressBarStyle = {
71
- backgroundColor: this.state.customStyles.separatorFinishedColor,
72
- position: "absolute",
73
- top: (this.state.height - this.state.customStyles.separatorStrokeWidth) /
74
- 2,
75
- left: this.state.width / (2 * stepCount),
76
- right: this.state.width / (2 * stepCount),
77
- height: this.state.customStyles.separatorStrokeFinishedWidth === 0
78
- ? this.state.customStyles.separatorStrokeWidth
79
- : this.state.customStyles.separatorStrokeFinishedWidth,
80
- width: this.progressAnim,
81
- };
82
- }
83
- return React.createElement(Animated.View, { style: progressBarStyle });
84
- };
85
- this.renderStepIndicator = () => {
86
- let steps = [];
87
- const { stepCount, direction } = this.props;
88
- for (let position = 0; position < stepCount; position++) {
89
- steps.push(React.createElement(TouchableWithoutFeedback, { key: position, onPress: () => this.stepPressed(position) },
90
- React.createElement(View, { style: [
91
- styles.stepContainer,
92
- direction === "vertical"
93
- ? { flexDirection: "column" }
94
- : { flexDirection: "row" },
95
- ] }, this.renderStep(position))));
96
- }
97
- return (React.createElement(View, { onLayout: (event) => this.setState({
98
- width: event.nativeEvent.layout.width,
99
- height: event.nativeEvent.layout.height,
100
- }), style: [
101
- styles.stepIndicatorContainer,
102
- direction === "vertical"
103
- ? {
104
- flexDirection: "column",
105
- width: this.state.customStyles.currentStepIndicatorSize,
106
- }
107
- : {
108
- flexDirection: "row",
109
- height: this.state.customStyles.currentStepIndicatorSize,
110
- },
111
- ] }, steps));
112
- };
113
- this.renderStepLabels = () => {
114
- const { labels, direction, currentPosition, renderLabel } = this.props;
115
- var labelViews = labels.map((label, index) => {
116
- const selectedStepLabelStyle = index === currentPosition
117
- ? { color: this.state.customStyles.currentStepLabelColor }
118
- : { color: this.state.customStyles.labelColor };
119
- return (React.createElement(TouchableWithoutFeedback, { style: styles.stepLabelItem, key: index, onPress: () => this.stepPressed(index) },
120
- React.createElement(View, { style: styles.stepLabelItem }, renderLabel ? (renderLabel({
121
- position: index,
122
- stepStatus: this.getStepStatus(index),
123
- label,
124
- currentPosition,
125
- })) : (React.createElement(Text, { style: [
126
- styles.stepLabel,
127
- selectedStepLabelStyle,
128
- {
129
- fontSize: this.state.customStyles.labelSize,
130
- fontFamily: this.state.customStyles.labelFontFamily,
131
- },
132
- ] }, label)))));
133
- });
134
- return (React.createElement(View, { style: [
135
- styles.stepLabelsContainer,
136
- direction === "vertical"
137
- ? { flexDirection: "column", paddingHorizontal: 4 }
138
- : { flexDirection: "row", paddingVertical: 4 },
139
- { alignItems: this.state.customStyles.labelAlign },
140
- ] }, labelViews));
141
- };
142
- this.renderStep = (position) => {
143
- const { renderStepIndicator } = this.props;
144
- let stepStyle;
145
- let indicatorLabelStyle;
146
- switch (this.getStepStatus(position)) {
147
- case STEP_STATUS.CURRENT: {
148
- stepStyle = {
149
- backgroundColor: this.state.customStyles.stepIndicatorCurrentColor,
150
- borderWidth: this.state.customStyles.currentStepStrokeWidth,
151
- borderColor: this.state.customStyles.stepStrokeCurrentColor,
152
- height: this.sizeAnim,
153
- width: this.sizeAnim,
154
- borderRadius: this.borderRadiusAnim,
155
- };
156
- indicatorLabelStyle = {
157
- fontSize: this.state.customStyles.currentStepIndicatorLabelFontSize,
158
- color: this.state.customStyles.stepIndicatorLabelCurrentColor,
159
- };
160
- break;
161
- }
162
- case STEP_STATUS.FINISHED: {
163
- stepStyle = {
164
- backgroundColor: this.state.customStyles.stepIndicatorFinishedColor,
165
- borderWidth: this.state.customStyles.stepStrokeWidth,
166
- borderColor: this.state.customStyles.stepStrokeFinishedColor,
167
- height: this.state.customStyles.stepIndicatorSize,
168
- width: this.state.customStyles.stepIndicatorSize,
169
- borderRadius: this.state.customStyles.stepIndicatorSize / 2,
170
- };
171
- indicatorLabelStyle = {
172
- fontSize: this.state.customStyles.stepIndicatorLabelFontSize,
173
- color: this.state.customStyles.stepIndicatorLabelFinishedColor,
174
- };
175
- break;
176
- }
177
- case STEP_STATUS.UNFINISHED: {
178
- stepStyle = {
179
- backgroundColor: this.state.customStyles.stepIndicatorUnFinishedColor,
180
- borderWidth: this.state.customStyles.stepStrokeWidth,
181
- borderColor: this.state.customStyles.stepStrokeUnFinishedColor,
182
- height: this.state.customStyles.stepIndicatorSize,
183
- width: this.state.customStyles.stepIndicatorSize,
184
- borderRadius: this.state.customStyles.stepIndicatorSize / 2,
185
- };
186
- indicatorLabelStyle = {
187
- overflow: "hidden",
188
- fontSize: this.state.customStyles.stepIndicatorLabelFontSize,
189
- color: this.state.customStyles.stepIndicatorLabelUnFinishedColor,
190
- };
191
- break;
192
- }
193
- default:
194
- }
195
- return (React.createElement(Animated.View, { key: "step-indicator", style: [styles.step, stepStyle] }, renderStepIndicator ? (renderStepIndicator({
196
- position,
197
- stepStatus: this.getStepStatus(position),
198
- })) : (React.createElement(Text, { style: indicatorLabelStyle }, `${position + 1}`))));
199
- };
200
- this.getStepStatus = (stepPosition) => {
201
- const { currentPosition } = this.props;
202
- if (stepPosition === currentPosition) {
203
- return STEP_STATUS.CURRENT;
204
- }
205
- else if (stepPosition < currentPosition) {
206
- return STEP_STATUS.FINISHED;
207
- }
208
- else {
209
- return STEP_STATUS.UNFINISHED;
210
- }
211
- };
212
- this.onCurrentPositionChanged = (position) => {
213
- let { stepCount } = this.props;
214
- if (position > stepCount - 1) {
215
- position = stepCount - 1;
216
- }
217
- const animateToPosition = (this.state.progressBarSize / (stepCount - 1)) * position;
218
- this.sizeAnim.setValue(this.state.customStyles.stepIndicatorSize);
219
- this.borderRadiusAnim.setValue(this.state.customStyles.stepIndicatorSize / 2);
220
- Animated.sequence([
221
- Animated.timing(this.progressAnim, {
222
- toValue: animateToPosition,
223
- duration: 200,
224
- }),
225
- Animated.parallel([
226
- Animated.timing(this.sizeAnim, {
227
- toValue: this.state.customStyles.currentStepIndicatorSize,
228
- duration: 100,
229
- }),
230
- Animated.timing(this.borderRadiusAnim, {
231
- toValue: this.state.customStyles.currentStepIndicatorSize / 2,
232
- duration: 100,
233
- }),
234
- ]),
235
- ]).start();
236
- };
237
- const defaultStyles = {
238
- stepIndicatorSize: 30,
239
- currentStepIndicatorSize: 40,
240
- separatorStrokeWidth: 3,
241
- separatorStrokeUnfinishedWidth: 0,
242
- separatorStrokeFinishedWidth: 0,
243
- currentStepStrokeWidth: 5,
244
- stepStrokeWidth: 0,
245
- stepStrokeCurrentColor: "#4aae4f",
246
- stepStrokeFinishedColor: "#4aae4f",
247
- stepStrokeUnFinishedColor: "#4aae4f",
248
- separatorFinishedColor: "#4aae4f",
249
- separatorUnFinishedColor: "#a4d4a5",
250
- stepIndicatorFinishedColor: "#4aae4f",
251
- stepIndicatorUnFinishedColor: "#a4d4a5",
252
- stepIndicatorCurrentColor: "#ffffff",
253
- stepIndicatorLabelFontSize: 15,
254
- currentStepIndicatorLabelFontSize: 15,
255
- stepIndicatorLabelCurrentColor: "#000000",
256
- stepIndicatorLabelFinishedColor: "#ffffff",
257
- stepIndicatorLabelUnFinishedColor: "rgba(255,255,255,0.5)",
258
- labelColor: "#000000",
259
- labelSize: 13,
260
- labelAlign: "center",
261
- currentStepLabelColor: "#4aae4f",
262
- };
263
- const customStyles = Object.assign(defaultStyles, props.customStyles);
264
- this.state = {
265
- width: 0,
266
- height: 1,
267
- progressBarSize: -2,
268
- customStyles,
269
- };
270
- this.progressAnim = new Animated.Value(0);
271
- this.sizeAnim = new Animated.Value(this.state.customStyles.stepIndicatorSize);
272
- this.borderRadiusAnim = new Animated.Value(this.state.customStyles.stepIndicatorSize / 2);
273
- }
274
- stepPressed(position) {
275
- if (this.props.onPress) {
276
- this.props.onPress(position);
277
- }
278
- }
279
- render() {
280
- const { labels, direction } = this.props;
281
- return (React.createElement(View, { style: [
282
- styles.container,
283
- direction === "vertical"
284
- ? { flexDirection: "row", flex: 1 }
285
- : { flexDirection: "column" },
286
- ] },
287
- this.state.width !== 0 && this.renderProgressBarBackground(),
288
- this.state.width !== 0 && this.renderProgressBar(),
289
- this.renderStepIndicator(),
290
- labels && this.renderStepLabels()));
291
- }
292
- componentDidUpdate(prevProps) {
293
- // if (prevProps.customStyles !== this.props.customStyles) {
294
- // this.setState((state) => ({
295
- // customStyles: Object.assign(
296
- // state.customStyles,
297
- // this.props.customStyles
298
- // ),
299
- // }));
300
- // }
301
- if (prevProps.currentPosition !== this.props.currentPosition) {
302
- this.onCurrentPositionChanged(this.props.currentPosition);
303
- }
304
- }
305
- }
306
- const styles = StyleSheet.create({
307
- container: {
308
- backgroundColor: "transparent",
309
- },
310
- stepIndicatorContainer: {
311
- flexDirection: "row",
312
- alignItems: "center",
313
- justifyContent: "space-around",
314
- backgroundColor: "transparent",
315
- },
316
- stepLabelsContainer: {
317
- justifyContent: "space-around",
318
- },
319
- step: {
320
- alignItems: "center",
321
- justifyContent: "center",
322
- zIndex: 2,
323
- },
324
- stepContainer: {
325
- flex: 1,
326
- flexDirection: "row",
327
- alignItems: "center",
328
- justifyContent: "center",
329
- },
330
- stepLabel: {
331
- fontSize: 12,
332
- textAlign: "center",
333
- fontWeight: "500",
334
- },
335
- stepLabelItem: {
336
- flex: 1,
337
- alignItems: "center",
338
- justifyContent: "center",
339
- },
340
- });
341
- StepIndicator.defaultProps = {
342
- currentPosition: 0,
343
- stepCount: 5,
344
- customStyles: {},
345
- direction: "horizontal",
346
- };
@@ -1,41 +0,0 @@
1
- import React, { useEffect, useState } from "react";
2
- import { View, Text } from "react-native";
3
- import { isNumber } from "lodash";
4
- import { withTheme } from "../theming";
5
- import IconButton from "./IconButton";
6
- import { extractStyles } from "../utilities";
7
- const Stepper = ({ min = -Infinity, max = Infinity, value: valueProp, defaultValue, style, iconSize = 24, iconColor, onChange, theme: { colors, typography }, Icon, }) => {
8
- const { viewStyles, textStyles } = extractStyles(style);
9
- const [value, setValue] = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : 0);
10
- const isValidValue = (valueArg) => valueArg >= min && valueArg <= max;
11
- const handlePlusOrMinus = (type) => {
12
- const newValue = type === "plus" ? value + 1 : value - 1;
13
- if (isValidValue(newValue)) {
14
- setValue(newValue);
15
- onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
16
- }
17
- };
18
- useEffect(() => {
19
- if (valueProp != null &&
20
- isNumber(valueProp) &&
21
- valueProp !== value &&
22
- isValidValue(valueProp)) {
23
- setValue(valueProp);
24
- }
25
- // eslint-disable-next-line react-hooks/exhaustive-deps
26
- }, [valueProp]);
27
- return (React.createElement(View, { style: [{ flexDirection: "row" }, viewStyles] },
28
- React.createElement(IconButton, { Icon: Icon, icon: "MaterialIcons/remove", onPress: () => handlePlusOrMinus("minus"), size: iconSize, color: iconColor, disabled: value === min, style: { opacity: value === min ? 0.5 : 1 } }),
29
- React.createElement(Text, { style: [
30
- typography.body1,
31
- {
32
- textAlign: "center",
33
- alignSelf: "center",
34
- color: colors.medium,
35
- marginHorizontal: 8,
36
- },
37
- textStyles,
38
- ] }, value),
39
- React.createElement(IconButton, { Icon: Icon, icon: "MaterialIcons/add", onPress: () => handlePlusOrMinus("plus"), size: iconSize, color: iconColor, disabled: value === max, style: { opacity: value === max ? 0.5 : 1 } })));
40
- };
41
- export default withTheme(Stepper);
@@ -1,32 +0,0 @@
1
- /* Copied from https://github.com/callstack/react-native-paper/blob/main/src/components/Surface.tsx */
2
- import * as React from "react";
3
- import { Animated, StyleSheet, } from "react-native";
4
- import shadow from "../styles/shadow";
5
- import overlay from "../styles/overlay";
6
- import { withTheme } from "../theming";
7
- const Surface = ({ elevation: propElevation, style, theme, children, ...rest }) => {
8
- const { elevation: styleElevation = 3, backgroundColor, ...restStyle } = (StyleSheet.flatten(style) || {});
9
- const { dark: isDarkTheme, mode, colors } = theme;
10
- const elevation = propElevation || styleElevation;
11
- const evalationStyles = elevation ? shadow(elevation) : {};
12
- const getBackgroundColor = () => {
13
- if (backgroundColor) {
14
- return backgroundColor;
15
- }
16
- else if (isDarkTheme && mode === "adaptive") {
17
- return overlay(elevation, colors.surface);
18
- }
19
- else {
20
- return colors.surface;
21
- }
22
- };
23
- return (React.createElement(Animated.View, { ...rest, style: [
24
- {
25
- backgroundColor: getBackgroundColor(),
26
- elevation,
27
- ...evalationStyles,
28
- ...restStyle,
29
- },
30
- ] }, children));
31
- };
32
- export default withTheme(Surface);
@@ -1,29 +0,0 @@
1
- import React from "react";
2
- import { View } from "react-native";
3
- import SwiperComponent from "react-native-web-swiper";
4
- const Swiper = ({ vertical = false, loop = false, timeout = 0, from = 0, prevTitle = "", nextTitle = "", prevTitleColor, nextTitleColor, dotsTouchable = true, dotColor, dotActiveColor, data, keyExtractor, renderItem, children, style, }) => (React.createElement(View, { style: style },
5
- React.createElement(SwiperComponent, { from: from, loop: loop, timeout: timeout, vertical: vertical, controlsProps: {
6
- prevTitle,
7
- nextTitle,
8
- prevTitleStyle: { color: prevTitleColor },
9
- nextTitleStyle: { color: nextTitleColor },
10
- dotsTouchable,
11
- ...(dotColor
12
- ? { dotProps: { badgeStyle: { backgroundColor: dotColor } } }
13
- : {}),
14
- ...(dotActiveColor
15
- ? { dotActiveStyle: { backgroundColor: dotActiveColor } }
16
- : {}),
17
- } }, data && renderItem
18
- ? data.map((item, index) => {
19
- const component = renderItem({ item, index });
20
- if (!component) {
21
- return null;
22
- }
23
- const key = keyExtractor ? keyExtractor(item, index) : index;
24
- return React.cloneElement(component, {
25
- key,
26
- });
27
- })
28
- : children)));
29
- export default Swiper;
@@ -1,9 +0,0 @@
1
- import React from "react";
2
- import { View, StyleSheet } from "react-native";
3
- const styles = StyleSheet.create({
4
- wrapper: {
5
- flex: 1,
6
- },
7
- });
8
- const SwiperItem = ({ children, style }) => (React.createElement(View, { style: [styles.wrapper, style] }, children));
9
- export default SwiperItem;
@@ -1,2 +0,0 @@
1
- export { default as Swiper } from "./Swiper";
2
- export { default as SwiperItem } from "./SwiperItem";
@@ -1,56 +0,0 @@
1
- import * as React from "react";
2
- import { Switch as NativeSwitch, } from "react-native";
3
- import { withTheme } from "../theming";
4
- import FormRow from "./FormRow";
5
- import { RowDirection } from "@draftbit/types";
6
- import { usePrevious } from "../hooks";
7
- function Switch({ value, defaultValue, disabled, onValueChange, activeTrackColor, inactiveTrackColor, activeThumbColor, inactiveThumbColor, theme, style, ...rest }) {
8
- const activeTrackThemeColor = activeTrackColor || theme.colors.primary;
9
- const inactiveTrackThemeColor = inactiveTrackColor || "#EEE";
10
- const activeThumbThemeColor = activeThumbColor || "#FFF";
11
- const inactiveThumbThemeColor = inactiveThumbColor || "#FFF";
12
- const [checked, setChecked] = React.useState(value || defaultValue);
13
- React.useEffect(() => {
14
- if (value != null && value !== checked) {
15
- setChecked(value);
16
- }
17
- }, [value, checked]);
18
- // This special logic is to handle weird APIs like Airtable that return
19
- // true or undefined for a boolean
20
- const previousDefaultValue = usePrevious(defaultValue);
21
- React.useEffect(() => {
22
- if (defaultValue !== previousDefaultValue) {
23
- setChecked(Boolean(defaultValue));
24
- }
25
- }, [defaultValue, previousDefaultValue]);
26
- return (React.createElement(NativeSwitch, { value: checked, disabled: disabled, trackColor: {
27
- false: inactiveTrackThemeColor,
28
- true: activeTrackThemeColor,
29
- }, thumbColor: value ? activeThumbThemeColor : inactiveThumbThemeColor,
30
- // @ts-ignore react-native-web only
31
- activeThumbColor: activeThumbThemeColor, ios_backgroundColor: inactiveTrackThemeColor, style: style, onValueChange: (bool) => {
32
- setChecked(bool);
33
- onValueChange && onValueChange(bool);
34
- }, ...rest }));
35
- }
36
- function Row({ label = "Label", direction = RowDirection.Row, style, value, defaultValue, disabled, onValueChange, activeTrackColor, inactiveTrackColor, activeThumbColor, inactiveThumbColor, theme, ...rest }) {
37
- const [checked, setChecked] = React.useState(value != null ? value : defaultValue);
38
- React.useEffect(() => {
39
- if (value != null) {
40
- setChecked(value);
41
- }
42
- }, [value]);
43
- React.useEffect(() => {
44
- if (defaultValue != null) {
45
- setChecked(defaultValue);
46
- }
47
- }, [defaultValue]);
48
- return (React.createElement(FormRow, { disabled: disabled, onPress: () => {
49
- setChecked(!checked);
50
- onValueChange && onValueChange(!checked);
51
- }, label: label, direction: direction, style: style, ...rest },
52
- React.createElement(Switch, { theme: theme, value: checked, disabled: disabled, onValueChange: onValueChange, activeTrackColor: activeTrackColor, inactiveTrackColor: inactiveTrackColor, activeThumbColor: activeThumbColor, inactiveThumbColor: inactiveThumbColor })));
53
- }
54
- const SwitchRow = withTheme(Row);
55
- export { SwitchRow };
56
- export default withTheme(Switch);