@draftbit/core 46.7.3 → 46.7.4

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 (287) hide show
  1. package/lib/commonjs/components/Accordion/AccordionItem.js +4 -23
  2. package/lib/commonjs/components/AnimatedCircularProgress.js +1 -12
  3. package/lib/commonjs/components/AvatarEdit.js +4 -15
  4. package/lib/commonjs/components/Button.js +10 -33
  5. package/lib/commonjs/components/Checkbox/Checkbox.js +4 -22
  6. package/lib/commonjs/components/Container.js +4 -15
  7. package/lib/commonjs/components/DeprecatedButton.js +3 -20
  8. package/lib/commonjs/components/DeprecatedCardWrapper.js +1 -15
  9. package/lib/commonjs/components/Divider.js +1 -14
  10. package/lib/commonjs/components/Image.js +2 -17
  11. package/lib/commonjs/components/Justification.js +1 -5
  12. package/lib/commonjs/components/Picker/Picker.js +4 -9
  13. package/lib/commonjs/components/Portal/PortalHost.js +15 -44
  14. package/lib/commonjs/components/Portal/PortalManager.js +8 -34
  15. package/lib/commonjs/components/ProgressBar.js +7 -37
  16. package/lib/commonjs/components/ResizeMode.js +1 -5
  17. package/lib/commonjs/components/Slider.js +4 -21
  18. package/lib/commonjs/components/Surface.js +2 -14
  19. package/lib/commonjs/components/TextField.js +28 -76
  20. package/lib/commonjs/components/Touchable.js +2 -15
  21. package/lib/commonjs/hooks.js +2 -1
  22. package/lib/commonjs/index.js +0 -56
  23. package/lib/commonjs/mappings/StarRating.js +2 -6
  24. package/lib/commonjs/utilities.js +2 -1
  25. package/lib/module/components/Button.js +10 -33
  26. package/lib/module/components/Checkbox/CheckboxGroupRow.js +5 -24
  27. package/lib/module/components/Checkbox/context.js +1 -1
  28. package/lib/module/components/CircleImage.js +1 -16
  29. package/lib/module/components/DeprecatedCardWrapper.js +1 -18
  30. package/lib/module/components/Divider.js +1 -18
  31. package/lib/module/components/Elevation.js +2 -14
  32. package/lib/module/components/FieldSearchBarFull.js +2 -1
  33. package/lib/module/components/FormRow.js +2 -17
  34. package/lib/module/components/Image.js +2 -18
  35. package/lib/module/components/Justification.js +0 -1
  36. package/lib/module/components/Layout.js +21 -42
  37. package/lib/module/components/NumberInput.js +3 -12
  38. package/lib/module/components/Picker/PickerComponent.ios.js +11 -36
  39. package/lib/module/components/Portal/PortalConsumer.js +7 -22
  40. package/lib/module/components/RadioButton/RadioButton.js +1 -13
  41. package/lib/module/components/RadioButton/RadioButtonGroup.js +2 -16
  42. package/lib/module/components/RadioButton/RadioButtonRow.js +5 -24
  43. package/lib/module/components/ResizeMode.js +0 -1
  44. package/lib/module/components/Slider.js +4 -21
  45. package/lib/module/components/StepIndicator.js +18 -58
  46. package/lib/module/components/TextField.js +28 -78
  47. package/lib/module/components/ToggleButton.js +2 -16
  48. package/lib/module/components/Touchable.js +2 -15
  49. package/lib/module/constants.js +2 -1
  50. package/lib/module/index.js +0 -8
  51. package/lib/module/mappings/FieldSearchBarFull.js +1 -4
  52. package/lib/module/styles/overlay.js +3 -1
  53. package/lib/module/utilities.js +2 -1
  54. package/lib/typescript/src/index.d.ts +0 -8
  55. package/lib/typescript/src/index.d.ts.map +1 -1
  56. package/package.json +3 -3
  57. package/src/index.tsx +0 -8
  58. package/lib/commonjs/components/CardBlock.js +0 -115
  59. package/lib/commonjs/components/CardContainer.js +0 -138
  60. package/lib/commonjs/components/CardContainerRating.js +0 -133
  61. package/lib/commonjs/components/CardContainerShortImage.js +0 -84
  62. package/lib/commonjs/components/CardInline.js +0 -91
  63. package/lib/commonjs/components/Carousel.js +0 -130
  64. package/lib/commonjs/components/Header.js +0 -82
  65. package/lib/commonjs/components/HeaderLarge.js +0 -38
  66. package/lib/commonjs/components/HeaderMedium.js +0 -38
  67. package/lib/commonjs/components/HeaderOverline.js +0 -39
  68. package/lib/module/components/CardBlock.js +0 -108
  69. package/lib/module/components/CardContainer.js +0 -121
  70. package/lib/module/components/CardContainerRating.js +0 -135
  71. package/lib/module/components/CardContainerShortImage.js +0 -90
  72. package/lib/module/components/CardInline.js +0 -82
  73. package/lib/module/components/Carousel.js +0 -120
  74. package/lib/module/components/Header.js +0 -72
  75. package/lib/module/components/HeaderLarge.js +0 -28
  76. package/lib/module/components/HeaderMedium.js +0 -28
  77. package/lib/module/components/HeaderOverline.js +0 -29
  78. package/lib/typescript/src/components/CardBlock.d.ts +0 -21
  79. package/lib/typescript/src/components/CardBlock.d.ts.map +0 -1
  80. package/lib/typescript/src/components/CardContainer.d.ts +0 -23
  81. package/lib/typescript/src/components/CardContainer.d.ts.map +0 -1
  82. package/lib/typescript/src/components/CardContainerRating.d.ts +0 -24
  83. package/lib/typescript/src/components/CardContainerRating.d.ts.map +0 -1
  84. package/lib/typescript/src/components/CardContainerShortImage.d.ts +0 -19
  85. package/lib/typescript/src/components/CardContainerShortImage.d.ts.map +0 -1
  86. package/lib/typescript/src/components/CardInline.d.ts +0 -20
  87. package/lib/typescript/src/components/CardInline.d.ts.map +0 -1
  88. package/lib/typescript/src/components/Carousel.d.ts +0 -15
  89. package/lib/typescript/src/components/Carousel.d.ts.map +0 -1
  90. package/lib/typescript/src/components/Header.d.ts +0 -20
  91. package/lib/typescript/src/components/Header.d.ts.map +0 -1
  92. package/lib/typescript/src/components/HeaderLarge.d.ts +0 -17
  93. package/lib/typescript/src/components/HeaderLarge.d.ts.map +0 -1
  94. package/lib/typescript/src/components/HeaderMedium.d.ts +0 -17
  95. package/lib/typescript/src/components/HeaderMedium.d.ts.map +0 -1
  96. package/lib/typescript/src/components/HeaderOverline.d.ts +0 -17
  97. package/lib/typescript/src/components/HeaderOverline.d.ts.map +0 -1
  98. package/src/Provider.js +0 -9
  99. package/src/components/Accordion/AccordionGroup.js +0 -44
  100. package/src/components/Accordion/AccordionItem.js +0 -32
  101. package/src/components/Accordion/index.js +0 -2
  102. package/src/components/ActionSheet/ActionSheet.js +0 -45
  103. package/src/components/ActionSheet/ActionSheetCancel.js +0 -6
  104. package/src/components/ActionSheet/ActionSheetItem.js +0 -30
  105. package/src/components/ActionSheet/index.js +0 -3
  106. package/src/components/AnimatedCircularProgress.js +0 -43
  107. package/src/components/AspectRatio.js +0 -18
  108. package/src/components/AvatarEdit.js +0 -30
  109. package/src/components/Banner.js +0 -109
  110. package/src/components/Button.js +0 -114
  111. package/src/components/Card.js +0 -57
  112. package/src/components/CardBlock.js +0 -54
  113. package/src/components/CardBlock.tsx +0 -127
  114. package/src/components/CardContainer.js +0 -69
  115. package/src/components/CardContainer.tsx +0 -165
  116. package/src/components/CardContainerRating.js +0 -79
  117. package/src/components/CardContainerRating.tsx +0 -175
  118. package/src/components/CardContainerShortImage.js +0 -33
  119. package/src/components/CardContainerShortImage.tsx +0 -101
  120. package/src/components/CardInline.js +0 -36
  121. package/src/components/CardInline.tsx +0 -93
  122. package/src/components/Carousel.js +0 -68
  123. package/src/components/Carousel.tsx +0 -134
  124. package/src/components/Checkbox/Checkbox.js +0 -62
  125. package/src/components/Checkbox/CheckboxGroup.js +0 -21
  126. package/src/components/Checkbox/CheckboxGroupRow.js +0 -76
  127. package/src/components/Checkbox/CheckboxRow.js +0 -77
  128. package/src/components/Checkbox/context.js +0 -14
  129. package/src/components/Checkbox/index.js +0 -3
  130. package/src/components/CircleImage.js +0 -8
  131. package/src/components/CircularProgress.js +0 -81
  132. package/src/components/Config.js +0 -64
  133. package/src/components/Container.js +0 -43
  134. package/src/components/DatePicker/DatePicker.js +0 -377
  135. package/src/components/DatePicker/DatePickerComponent.js +0 -13
  136. package/src/components/DatePicker/DatePickerComponent.web.js +0 -30
  137. package/src/components/DatePicker/DatePickerComponentType.js +0 -1
  138. package/src/components/DeprecatedButton.js +0 -83
  139. package/src/components/DeprecatedCardWrapper.js +0 -18
  140. package/src/components/DeprecatedFAB.js +0 -114
  141. package/src/components/Divider.js +0 -13
  142. package/src/components/Elevation.js +0 -20
  143. package/src/components/FAB.js +0 -46
  144. package/src/components/FieldSearchBarFull.js +0 -53
  145. package/src/components/FormRow.js +0 -19
  146. package/src/components/Header.js +0 -44
  147. package/src/components/Header.tsx +0 -105
  148. package/src/components/HeaderLarge.js +0 -7
  149. package/src/components/HeaderLarge.tsx +0 -40
  150. package/src/components/HeaderMedium.js +0 -7
  151. package/src/components/HeaderMedium.tsx +0 -41
  152. package/src/components/HeaderOverline.js +0 -7
  153. package/src/components/HeaderOverline.tsx +0 -42
  154. package/src/components/IconButton.js +0 -35
  155. package/src/components/Image.js +0 -47
  156. package/src/components/Justification.js +0 -1
  157. package/src/components/Layout.js +0 -50
  158. package/src/components/NumberInput.js +0 -49
  159. package/src/components/Picker/Picker.js +0 -267
  160. package/src/components/Picker/PickerComponent.android.js +0 -69
  161. package/src/components/Picker/PickerComponent.ios.js +0 -79
  162. package/src/components/Picker/PickerComponent.web.js +0 -70
  163. package/src/components/Picker/PickerTypes.js +0 -1
  164. package/src/components/Portal/Portal.js +0 -35
  165. package/src/components/Portal/PortalConsumer.js +0 -27
  166. package/src/components/Portal/PortalHost.js +0 -107
  167. package/src/components/Portal/PortalManager.js +0 -32
  168. package/src/components/Pressable.js +0 -12
  169. package/src/components/ProgressBar.js +0 -118
  170. package/src/components/ProgressCircle.js +0 -13
  171. package/src/components/ProgressIndicator.js +0 -27
  172. package/src/components/RadioButton/RadioButton.js +0 -17
  173. package/src/components/RadioButton/RadioButtonFieldGroup.js +0 -17
  174. package/src/components/RadioButton/RadioButtonGroup.js +0 -43
  175. package/src/components/RadioButton/RadioButtonRow.js +0 -76
  176. package/src/components/RadioButton/context.js +0 -14
  177. package/src/components/RadioButton/index.js +0 -4
  178. package/src/components/ResizeMode.js +0 -1
  179. package/src/components/Row.js +0 -48
  180. package/src/components/RowBodyIcon.js +0 -8
  181. package/src/components/RowHeadlineImageCaption.js +0 -12
  182. package/src/components/RowHeadlineImageIcon.js +0 -14
  183. package/src/components/SVG.js +0 -13
  184. package/src/components/ScreenContainer.js +0 -34
  185. package/src/components/Slider.js +0 -63
  186. package/src/components/StarRating.js +0 -50
  187. package/src/components/StepIndicator.js +0 -346
  188. package/src/components/Stepper.js +0 -41
  189. package/src/components/Surface.js +0 -32
  190. package/src/components/Swiper/Swiper.js +0 -29
  191. package/src/components/Swiper/SwiperItem.js +0 -9
  192. package/src/components/Swiper/index.js +0 -2
  193. package/src/components/Switch.js +0 -56
  194. package/src/components/Text.js +0 -33
  195. package/src/components/TextField.js +0 -428
  196. package/src/components/ToggleButton.js +0 -39
  197. package/src/components/Touchable.js +0 -12
  198. package/src/components/Touchable.web.js +0 -2
  199. package/src/components/Typography.js +0 -36
  200. package/src/components/useAuthState.js +0 -31
  201. package/src/constants.js +0 -10
  202. package/src/hooks.js +0 -12
  203. package/src/index.js +0 -53
  204. package/src/interfaces/Icon.js +0 -8
  205. package/src/mappings/Accordion.js +0 -41
  206. package/src/mappings/AccordionItem.js +0 -16
  207. package/src/mappings/ActionSheet.js +0 -13
  208. package/src/mappings/ActionSheetCancel.js +0 -19
  209. package/src/mappings/ActionSheetItem.js +0 -23
  210. package/src/mappings/ActivityIndicator.js +0 -58
  211. package/src/mappings/AudioPlayer.js +0 -57
  212. package/src/mappings/AvatarEdit.js +0 -38
  213. package/src/mappings/Banner.js +0 -32
  214. package/src/mappings/BlurView.js +0 -42
  215. package/src/mappings/Button.js +0 -116
  216. package/src/mappings/Card.js +0 -52
  217. package/src/mappings/CardBlock.js +0 -123
  218. package/src/mappings/CardContainer.js +0 -104
  219. package/src/mappings/CardContainerRating.js +0 -126
  220. package/src/mappings/CardContainerShortImage.js +0 -120
  221. package/src/mappings/CardInline.js +0 -52
  222. package/src/mappings/Carousel.js +0 -19
  223. package/src/mappings/Checkbox.js +0 -46
  224. package/src/mappings/CheckboxGroup.js +0 -26
  225. package/src/mappings/CheckboxRow.js +0 -61
  226. package/src/mappings/CircleImage.js +0 -25
  227. package/src/mappings/Container.js +0 -30
  228. package/src/mappings/CustomCode.js +0 -8
  229. package/src/mappings/DatePicker.js +0 -176
  230. package/src/mappings/Divider.js +0 -27
  231. package/src/mappings/FAB.js +0 -37
  232. package/src/mappings/Fetch.js +0 -13
  233. package/src/mappings/FieldSearchBarFull.js +0 -50
  234. package/src/mappings/FlashList.js +0 -85
  235. package/src/mappings/FlatList.js +0 -37
  236. package/src/mappings/HeaderLarge.js +0 -29
  237. package/src/mappings/HeaderMedium.js +0 -55
  238. package/src/mappings/HeaderOverline.js +0 -55
  239. package/src/mappings/Icon.js +0 -32
  240. package/src/mappings/IconButton.js +0 -35
  241. package/src/mappings/Image.js +0 -35
  242. package/src/mappings/ImageBackground.js +0 -29
  243. package/src/mappings/KeyboardAvoidingView.js +0 -41
  244. package/src/mappings/KeyboardAwareScrollView.js +0 -50
  245. package/src/mappings/Layout.js +0 -200
  246. package/src/mappings/LinearGradient.js +0 -77
  247. package/src/mappings/MapCallout.js +0 -21
  248. package/src/mappings/MapMarker.js +0 -47
  249. package/src/mappings/MapView.js +0 -139
  250. package/src/mappings/Modal.js +0 -42
  251. package/src/mappings/NumberInput.js +0 -254
  252. package/src/mappings/Picker.js +0 -148
  253. package/src/mappings/ProgressBar.js +0 -101
  254. package/src/mappings/ProgressCircle.js +0 -109
  255. package/src/mappings/ProgressIndicator.js +0 -181
  256. package/src/mappings/RadioButton.js +0 -51
  257. package/src/mappings/RadioButtonGroup.js +0 -17
  258. package/src/mappings/RadioButtonRow.js +0 -42
  259. package/src/mappings/RowBodyIcon.js +0 -75
  260. package/src/mappings/RowHeadlineImageCaption.js +0 -167
  261. package/src/mappings/RowHeadlineImageIcon.js +0 -99
  262. package/src/mappings/SVG.js +0 -20
  263. package/src/mappings/SafeAreaView.js +0 -33
  264. package/src/mappings/ScrollView.js +0 -31
  265. package/src/mappings/Slider.js +0 -60
  266. package/src/mappings/StarRating.js +0 -43
  267. package/src/mappings/Stepper.js +0 -32
  268. package/src/mappings/Surface.js +0 -14
  269. package/src/mappings/Swiper.js +0 -62
  270. package/src/mappings/SwiperItem.js +0 -8
  271. package/src/mappings/Switch.js +0 -81
  272. package/src/mappings/Text.js +0 -251
  273. package/src/mappings/TextArea.js +0 -274
  274. package/src/mappings/TextField.js +0 -391
  275. package/src/mappings/TextInput.js +0 -402
  276. package/src/mappings/ToggleButton.js +0 -50
  277. package/src/mappings/Touchable.js +0 -60
  278. package/src/mappings/Video.js +0 -81
  279. package/src/mappings/View.js +0 -207
  280. package/src/mappings/WebView.js +0 -88
  281. package/src/styles/DarkTheme.js +0 -26
  282. package/src/styles/DefaultTheme.js +0 -111
  283. package/src/styles/fonts.js +0 -62
  284. package/src/styles/overlay.js +0 -60
  285. package/src/styles/shadow.js +0 -51
  286. package/src/theming.js +0 -3
  287. package/src/utilities.js +0 -102
@@ -1,8 +0,0 @@
1
- import * as React from "react";
2
- import { Image, } from "react-native";
3
- import Config from "./Config";
4
- const CircleImage = ({ source = Config.placeholderImageURL, size = 60, style, ...props }) => {
5
- const borderRadius = size / 2;
6
- return (React.createElement(Image, { style: [{ width: size, height: size, borderRadius }, style], source: typeof source === "string" ? { uri: source } : source, resizeMode: "cover", ...props }));
7
- };
8
- export default CircleImage;
@@ -1,81 +0,0 @@
1
- import React from "react";
2
- import { View } from "react-native";
3
- import { Svg, Path, G } from "react-native-svg";
4
- class CircularProgress extends React.Component {
5
- constructor() {
6
- super(...arguments);
7
- this.polarToCartesian = (centerX, centerY, radius, angleInDegrees) => {
8
- var angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180.0;
9
- return {
10
- x: centerX + radius * Math.cos(angleInRadians),
11
- y: centerY + radius * Math.sin(angleInRadians),
12
- };
13
- };
14
- this.circlePath = (x, y, radius, startAngle, endAngle) => {
15
- var start = this.polarToCartesian(x, y, radius, endAngle * 0.9999);
16
- var end = this.polarToCartesian(x, y, radius, startAngle);
17
- var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";
18
- var d = [
19
- "M",
20
- start.x,
21
- start.y,
22
- "A",
23
- radius,
24
- radius,
25
- 0,
26
- largeArcFlag,
27
- 0,
28
- end.x,
29
- end.y,
30
- ];
31
- return d.join(" ");
32
- };
33
- this.clampFill = (fill) => Math.min(100, Math.max(0, fill));
34
- }
35
- render() {
36
- const { size, width, backgroundWidth, tintColor = "black", tintTransparency = true, backgroundColor, style, rotation = 90, lineCap = "butt", arcSweepAngle = 360, fill, children, childrenContainerStyle, padding = 0, renderCap, dashedBackground = { width: 0, gap: 0 }, dashedTint = { width: 0, gap: 0 }, } = this.props;
37
- const maxWidthCircle = backgroundWidth
38
- ? Math.max(width, backgroundWidth)
39
- : width;
40
- const sizeWithPadding = size / 2 + padding / 2;
41
- const radius = size / 2 - maxWidthCircle / 2 - padding / 2;
42
- const currentFillAngle = (arcSweepAngle * this.clampFill(fill)) / 100;
43
- const backgroundPath = this.circlePath(sizeWithPadding, sizeWithPadding, radius, tintTransparency ? 0 : currentFillAngle, arcSweepAngle);
44
- const circlePathItem = this.circlePath(sizeWithPadding, sizeWithPadding, radius, 0, currentFillAngle);
45
- const coordinate = this.polarToCartesian(sizeWithPadding, sizeWithPadding, radius, currentFillAngle);
46
- const cap = renderCap ? renderCap({ center: coordinate }) : null;
47
- const offset = size - maxWidthCircle * 2;
48
- const localChildrenContainerStyle = [
49
- {
50
- position: "absolute",
51
- left: maxWidthCircle + padding / 2,
52
- top: maxWidthCircle + padding / 2,
53
- width: offset,
54
- height: offset,
55
- borderRadius: offset / 2,
56
- alignItems: "center",
57
- justifyContent: "center",
58
- overflow: "hidden",
59
- },
60
- childrenContainerStyle,
61
- ];
62
- const strokeDasharrayTint = dashedTint.gap > 0
63
- ? Object.values(dashedTint)
64
- .map((value) => value.toString())
65
- .join(" ")
66
- : "";
67
- const strokeDasharrayBackground = dashedBackground.gap > 0
68
- ? Object.values(dashedBackground)
69
- .map((value) => value.toString())
70
- .join(" ")
71
- : "";
72
- return (React.createElement(View, { style: style },
73
- React.createElement(Svg, { width: size + padding, height: size + padding },
74
- React.createElement(G, { rotation: rotation, originX: (size + padding) / 2, originY: (size + padding) / 2 },
75
- backgroundColor && (React.createElement(Path, { d: backgroundPath, stroke: backgroundColor, strokeWidth: backgroundWidth || width, strokeLinecap: lineCap, strokeDasharray: strokeDasharrayBackground, fill: "transparent" })),
76
- fill > 0 && (React.createElement(Path, { d: circlePathItem, stroke: tintColor, strokeWidth: width, strokeLinecap: lineCap, strokeDasharray: strokeDasharrayTint, fill: "transparent" })),
77
- cap)),
78
- children && (React.createElement(View, { style: localChildrenContainerStyle }, children(fill)))));
79
- }
80
- }
81
- export default CircularProgress;
@@ -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,377 +0,0 @@
1
- import * as React from "react";
2
- import { View, Animated, Text, StyleSheet, I18nManager, TextInput as NativeTextInput, } 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, ...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
- const _handleFocus = () => {
117
- if (disabled) {
118
- return;
119
- }
120
- setFocused(true);
121
- };
122
- const _handleBlur = () => {
123
- if (disabled) {
124
- return;
125
- }
126
- setFocused(false);
127
- };
128
- const MINIMIZED_LABEL_Y_OFFSET = -(typography.caption.lineHeight + 4);
129
- const OUTLINE_MINIMIZED_LABEL_Y_OFFSET = -(16 * 0.5 + 4);
130
- const MAXIMIZED_LABEL_FONT_SIZE = textStyles.fontSize || typography.subtitle1.fontSize;
131
- const MINIMIZED_LABEL_FONT_SIZE = labelSize
132
- ? labelSize
133
- : typography.caption.fontSize;
134
- const hasActiveOutline = focused;
135
- let inputTextColor, activeColor, underlineColor, borderColor, placeholderColor, containerStyle, backgroundColor, inputStyle;
136
- inputTextColor = colors.strong;
137
- if (disabled) {
138
- activeColor = colors.light;
139
- placeholderColor = colors.light;
140
- borderColor = "transparent";
141
- underlineColor = "transparent";
142
- backgroundColor = colors.divider;
143
- }
144
- else {
145
- activeColor = inputBorderColorActive || colors.primary;
146
- placeholderColor = inputBorderColor || colors.light;
147
- underlineColor = inputBorderColor || colors.light;
148
- backgroundColor = colors.background;
149
- }
150
- const { lineHeight, ...subtitle1 } = typography.subtitle1;
151
- inputStyle = {
152
- paddingVertical: 0,
153
- color: inputTextColor,
154
- paddingLeft: leftIconName && leftIconMode === "inset"
155
- ? ICON_SIZE + (type === "solid" ? 16 : 12)
156
- : 0,
157
- paddingRight: rightIconName ? ICON_SIZE + 16 + 4 : 12,
158
- ...subtitle1,
159
- height: lineHeight,
160
- };
161
- if (type === "underline") {
162
- containerStyle = {
163
- borderTopLeftRadius: roundness,
164
- borderTopRightRadius: roundness,
165
- paddingBottom: 12,
166
- marginTop: 16,
167
- };
168
- }
169
- else {
170
- containerStyle = {
171
- borderRadius: roundness,
172
- borderColor: hasActiveOutline ? activeColor : borderColor,
173
- borderWidth: 1,
174
- paddingTop: labeled ? 16 * 1.5 : 16,
175
- paddingBottom: labeled ? 16 * 0.5 : 16,
176
- opacity: disabled ? disabledOpacity : 1,
177
- backgroundColor,
178
- };
179
- inputStyle.paddingHorizontal = 12;
180
- }
181
- if (leftIconName && leftIconMode === "outset") {
182
- containerStyle.marginLeft = ICON_SIZE + 8;
183
- }
184
- let leftIconColor;
185
- if (focused) {
186
- leftIconColor = colors.primary;
187
- }
188
- else {
189
- leftIconColor = colors.light;
190
- }
191
- const leftIconProps = {
192
- size: 24,
193
- color: leftIconColor,
194
- name: leftIconName || "",
195
- };
196
- const leftIconStyle = {
197
- position: "absolute",
198
- marginTop: type === "solid"
199
- ? leftIconMode === "inset"
200
- ? MINIMIZED_LABEL_FONT_SIZE + 4
201
- : 16
202
- : leftIconMode === "outset"
203
- ? 16
204
- : 0,
205
- };
206
- const labelStyle = {
207
- ...typography.subtitle1,
208
- top: type === "solid" ? 16 : 0,
209
- fontFamily: textStyles === null || textStyles === void 0 ? void 0 : textStyles.fontFamily,
210
- left: leftIconName && leftIconMode === "inset"
211
- ? ICON_SIZE + (type === "solid" ? 16 : 12)
212
- : 0,
213
- transform: [
214
- {
215
- // Move label to top
216
- translateY: labeled.interpolate({
217
- inputRange: [0, 1],
218
- outputRange: [
219
- type === "solid"
220
- ? OUTLINE_MINIMIZED_LABEL_Y_OFFSET
221
- : MINIMIZED_LABEL_Y_OFFSET,
222
- 0,
223
- ],
224
- }),
225
- },
226
- {
227
- // Make label smaller
228
- scale: labeled.interpolate({
229
- inputRange: [0, 1],
230
- outputRange: [
231
- MINIMIZED_LABEL_FONT_SIZE / MAXIMIZED_LABEL_FONT_SIZE,
232
- 1,
233
- ],
234
- }),
235
- },
236
- {
237
- // Offset label scale since RN doesn't support transform origin
238
- translateX: labeled.interpolate({
239
- inputRange: [0, 1],
240
- outputRange: [
241
- -(1 - MINIMIZED_LABEL_FONT_SIZE / MAXIMIZED_LABEL_FONT_SIZE) *
242
- (labelLayout.width / 2),
243
- 0,
244
- ],
245
- }),
246
- },
247
- ],
248
- };
249
- const inputStyles = [
250
- styles.input,
251
- inputStyle,
252
- type === "solid" ? { marginHorizontal: 12 } : {},
253
- ];
254
- // const render = (props) => <NativeTextInput {...props} />;
255
- return (React.createElement(View, { style: [styles.container, style] },
256
- React.createElement(Touchable, { disabled: disabled, onPress: toggleVisibility },
257
- React.createElement(View, { pointerEvents: "none" },
258
- React.createElement(View, { style: [styles.container, style] },
259
- leftIconName && leftIconMode === "outset" ? (React.createElement(Icon, { ...leftIconProps, style: leftIconStyle })) : null,
260
- React.createElement(View, { style: [
261
- containerStyle,
262
- style ? { height: style.height } : {},
263
- viewStyles,
264
- ] },
265
- type === "underline" ? (
266
- // When type === 'flat', render an underline
267
- React.createElement(Animated.View, { style: [
268
- styles.underline,
269
- {
270
- backgroundColor: focused ? activeColor : underlineColor,
271
- // Underlines is thinner when input is not focused
272
- transform: [{ scaleY: focused ? 1 : 0.5 }],
273
- },
274
- ] })) : null,
275
- label ? (
276
- // Position colored placeholder and gray placeholder on top of each other and crossfade them
277
- // This gives the effect of animating the color, but allows us to use native driver
278
- React.createElement(View, { pointerEvents: "none", style: [
279
- StyleSheet.absoluteFill,
280
- {
281
- opacity:
282
- // Hide the label in minimized state until we measure its width
283
- date || focused ? (labelLayout.measured ? 1 : 0) : 1,
284
- },
285
- ] },
286
- React.createElement(AnimatedText, { onLayout: (e) => setLabelLayout({
287
- width: e.nativeEvent.layout.width,
288
- measured: true,
289
- }), style: [
290
- styles.placeholder,
291
- type === "solid" ? { paddingHorizontal: 12 } : {},
292
- labelStyle,
293
- {
294
- color: labelColor || colors.light,
295
- opacity: labeled.interpolate({
296
- inputRange: [0, 1],
297
- outputRange: [hasActiveOutline ? 1 : 0, 0],
298
- }),
299
- },
300
- ], numberOfLines: 1 }, label),
301
- React.createElement(AnimatedText, { style: [
302
- styles.placeholder,
303
- type === "solid" ? { paddingHorizontal: 12 } : {},
304
- labelStyle,
305
- {
306
- color: labelColor || placeholderColor,
307
- opacity: hasActiveOutline ? labeled : 1,
308
- },
309
- ], numberOfLines: 1 }, label))) : null,
310
- leftIconName && leftIconMode === "inset" ? (React.createElement(Icon, { ...leftIconProps, style: {
311
- ...leftIconStyle,
312
- marginLeft: type === "solid" ? 16 : 0,
313
- } })) : null,
314
- 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 })),
315
- rightIconName ? (React.createElement(Icon, { name: rightIconName, size: ICON_SIZE, color: colors.light, style: {
316
- position: "absolute",
317
- right: 16,
318
- marginTop: type === "solid" ? MINIMIZED_LABEL_FONT_SIZE + 4 : 16,
319
- } })) : null))),
320
- pickerVisible && (React.createElement(Portal, null,
321
- React.createElement(View, { style: [
322
- styles.picker,
323
- {
324
- backgroundColor: colors.divider,
325
- },
326
- ] },
327
- React.createElement(View, { style: [
328
- styles.pickerContainer,
329
- {
330
- paddingTop: insets.top,
331
- paddingBottom: insets.bottom,
332
- paddingLeft: insets.left,
333
- paddingRight: insets.right,
334
- },
335
- ] },
336
- React.createElement(DateTimePicker, { value: getValidDate(), mode: mode, isVisible: pickerVisible, toggleVisibility: toggleVisibility, onChange: (_event, data) => {
337
- toggleVisibility();
338
- setValue(data);
339
- onDateChange(data);
340
- } })))))));
341
- };
342
- const styles = StyleSheet.create({
343
- container: {
344
- alignSelf: "stretch",
345
- },
346
- picker: {
347
- position: "absolute",
348
- bottom: 0,
349
- left: 0,
350
- right: 0,
351
- flexDirection: "row",
352
- justifyContent: "center",
353
- },
354
- underline: {
355
- position: "absolute",
356
- left: 0,
357
- right: 0,
358
- bottom: 0,
359
- height: 2,
360
- },
361
- input: {
362
- flexGrow: 1,
363
- justifyContent: "center",
364
- textAlignVertical: "center",
365
- margin: 0,
366
- textAlign: I18nManager.isRTL ? "right" : "left",
367
- },
368
- placeholder: {
369
- position: "absolute",
370
- left: 0,
371
- },
372
- pickerContainer: { flexDirection: "column", width: "100%", zIndex: 100 },
373
- closeButton: {
374
- alignSelf: "flex-end",
375
- },
376
- });
377
- 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 {};