@draftbit/core 44.0.1 → 44.0.3

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 (200) hide show
  1. package/lib/commonjs/components/DeprecatedButton.js +19 -4
  2. package/lib/commonjs/components/DeprecatedButton.js.map +1 -1
  3. package/lib/commonjs/components/DeprecatedCardWrapper.js +14 -2
  4. package/lib/commonjs/components/DeprecatedCardWrapper.js.map +1 -1
  5. package/lib/commonjs/components/Justification.js +3 -0
  6. package/lib/commonjs/components/ResizeMode.js +3 -0
  7. package/lib/commonjs/components/Row.js.map +1 -1
  8. package/lib/commonjs/mappings/Banner.js.map +1 -1
  9. package/lib/commonjs/mappings/Checkbox.js.map +1 -1
  10. package/lib/commonjs/mappings/FlatList.js.map +1 -1
  11. package/lib/commonjs/mappings/Image.js.map +1 -1
  12. package/lib/commonjs/mappings/MapView.js +12 -0
  13. package/lib/commonjs/mappings/MapView.js.map +1 -1
  14. package/lib/commonjs/mappings/ProgressIndicator.js.map +1 -1
  15. package/lib/commonjs/mappings/RadioButtonRow.js.map +1 -1
  16. package/lib/commonjs/mappings/RowHeadlineImageIcon.js.map +1 -1
  17. package/lib/commonjs/styles/fonts.js.map +1 -1
  18. package/lib/commonjs/styles/overlay.js.map +1 -1
  19. package/lib/module/components/Justification.js +1 -1
  20. package/lib/module/components/ResizeMode.js +1 -1
  21. package/lib/module/mappings/MapView.js +12 -0
  22. package/lib/module/mappings/MapView.js.map +1 -1
  23. package/lib/typescript/src/mappings/MapView.d.ts +20 -0
  24. package/package.json +3 -3
  25. package/src/Provider.js +9 -0
  26. package/src/components/Accordion/AccordionGroup.js +44 -0
  27. package/src/components/Accordion/AccordionItem.js +32 -0
  28. package/src/components/Accordion/index.js +2 -0
  29. package/src/components/ActionSheet/ActionSheet.js +45 -0
  30. package/src/components/ActionSheet/ActionSheetCancel.js +6 -0
  31. package/src/components/ActionSheet/ActionSheetItem.js +30 -0
  32. package/src/components/ActionSheet/index.js +3 -0
  33. package/src/components/AnimatedCircularProgress.js +43 -0
  34. package/src/components/AspectRatio.js +18 -0
  35. package/src/components/AvatarEdit.js +30 -0
  36. package/src/components/Banner.js +109 -0
  37. package/src/components/Button.js +112 -0
  38. package/src/components/Card.js +57 -0
  39. package/src/components/CardBlock.js +54 -0
  40. package/src/components/CardContainer.js +69 -0
  41. package/src/components/CardContainerRating.js +79 -0
  42. package/src/components/CardContainerShortImage.js +33 -0
  43. package/src/components/CardInline.js +36 -0
  44. package/src/components/Carousel.js +66 -0
  45. package/src/components/Checkbox/Checkbox.js +63 -0
  46. package/src/components/Checkbox/CheckboxGroup.js +21 -0
  47. package/src/components/Checkbox/CheckboxGroupRow.js +77 -0
  48. package/src/components/Checkbox/CheckboxRow.js +78 -0
  49. package/src/components/Checkbox/context.js +14 -0
  50. package/src/components/Checkbox/index.js +3 -0
  51. package/src/components/CircleImage.js +8 -0
  52. package/src/components/CircularProgress.js +78 -0
  53. package/src/components/Config.js +63 -0
  54. package/src/components/Container.js +44 -0
  55. package/src/components/DatePicker/DatePicker.js +368 -0
  56. package/src/components/DatePicker/DatePickerComponent.js +13 -0
  57. package/src/components/DatePicker/DatePickerComponent.web.js +30 -0
  58. package/src/components/DatePicker/DatePickerComponentType.js +1 -0
  59. package/src/components/DeprecatedButton.js +95 -0
  60. package/src/components/DeprecatedCardWrapper.js +18 -0
  61. package/src/components/DeprecatedFAB.js +115 -0
  62. package/src/components/Divider.js +13 -0
  63. package/src/components/Elevation.js +20 -0
  64. package/src/components/FAB.js +46 -0
  65. package/src/components/FieldSearchBarFull.js +53 -0
  66. package/src/components/FormRow.js +19 -0
  67. package/src/components/Header.js +44 -0
  68. package/src/components/HeaderLarge.js +7 -0
  69. package/src/components/HeaderMedium.js +7 -0
  70. package/src/components/HeaderOverline.js +7 -0
  71. package/src/components/IconButton.js +35 -0
  72. package/src/components/Image.js +47 -0
  73. package/src/components/Justification.js +1 -0
  74. package/src/components/Layout.js +50 -0
  75. package/src/components/NumberInput.js +49 -0
  76. package/src/components/Picker/Picker.js +56 -0
  77. package/src/components/Picker/PickerComponent.android.js +68 -0
  78. package/src/components/Picker/PickerComponent.ios.js +78 -0
  79. package/src/components/Picker/PickerComponent.web.js +69 -0
  80. package/src/components/Picker/PickerTypes.js +1 -0
  81. package/src/components/Portal/Portal.js +35 -0
  82. package/src/components/Portal/PortalConsumer.js +28 -0
  83. package/src/components/Portal/PortalHost.js +105 -0
  84. package/src/components/Portal/PortalManager.js +29 -0
  85. package/src/components/ProgressBar.js +118 -0
  86. package/src/components/ProgressCircle.js +13 -0
  87. package/src/components/ProgressIndicator.js +27 -0
  88. package/src/components/RadioButton/RadioButton.js +17 -0
  89. package/src/components/RadioButton/RadioButtonFieldGroup.js +17 -0
  90. package/src/components/RadioButton/RadioButtonGroup.js +43 -0
  91. package/src/components/RadioButton/RadioButtonRow.js +76 -0
  92. package/src/components/RadioButton/context.js +14 -0
  93. package/src/components/RadioButton/index.js +4 -0
  94. package/src/components/ResizeMode.js +1 -0
  95. package/src/components/Row.js +48 -0
  96. package/src/components/RowBodyIcon.js +8 -0
  97. package/src/components/RowHeadlineImageCaption.js +12 -0
  98. package/src/components/RowHeadlineImageIcon.js +14 -0
  99. package/src/components/ScreenContainer.js +34 -0
  100. package/src/components/Slider.js +63 -0
  101. package/src/components/StarRating.js +50 -0
  102. package/src/components/StepIndicator.js +346 -0
  103. package/src/components/Stepper.js +39 -0
  104. package/src/components/Surface.js +32 -0
  105. package/src/components/Swiper/Swiper.js +18 -0
  106. package/src/components/Swiper/SwiperItem.js +9 -0
  107. package/src/components/Swiper/index.js +2 -0
  108. package/src/components/Switch.js +56 -0
  109. package/src/components/Text.js +28 -0
  110. package/src/components/TextField.js +420 -0
  111. package/src/components/ToggleButton.js +39 -0
  112. package/src/components/Touchable.js +12 -0
  113. package/src/components/Touchable.web.js +2 -0
  114. package/src/components/Typography.js +36 -0
  115. package/src/components/useAuthState.js +31 -0
  116. package/src/constants.js +10 -0
  117. package/src/hooks.js +12 -0
  118. package/src/index.js +52 -0
  119. package/src/interfaces/Icon.js +8 -0
  120. package/src/mappings/Accordion.js +41 -0
  121. package/src/mappings/AccordionItem.js +16 -0
  122. package/src/mappings/ActionSheet.js +13 -0
  123. package/src/mappings/ActionSheetCancel.js +19 -0
  124. package/src/mappings/ActionSheetItem.js +23 -0
  125. package/src/mappings/ActivityIndicator.js +53 -0
  126. package/src/mappings/AudioPlayer.js +20 -0
  127. package/src/mappings/AvatarEdit.js +37 -0
  128. package/src/mappings/Banner.js +32 -0
  129. package/src/mappings/BlurView.js +41 -0
  130. package/src/mappings/Button.js +56 -0
  131. package/src/mappings/Card.js +52 -0
  132. package/src/mappings/CardBlock.js +122 -0
  133. package/src/mappings/CardContainer.js +102 -0
  134. package/src/mappings/CardContainerRating.js +124 -0
  135. package/src/mappings/CardContainerShortImage.js +118 -0
  136. package/src/mappings/CardInline.js +51 -0
  137. package/src/mappings/Carousel.js +18 -0
  138. package/src/mappings/Checkbox.js +45 -0
  139. package/src/mappings/CheckboxGroup.js +25 -0
  140. package/src/mappings/CheckboxRow.js +56 -0
  141. package/src/mappings/CircleImage.js +24 -0
  142. package/src/mappings/Container.js +29 -0
  143. package/src/mappings/CustomCode.js +8 -0
  144. package/src/mappings/DatePicker.js +146 -0
  145. package/src/mappings/Divider.js +26 -0
  146. package/src/mappings/FAB.js +36 -0
  147. package/src/mappings/Fetch.js +12 -0
  148. package/src/mappings/FieldSearchBarFull.js +49 -0
  149. package/src/mappings/FlatList.js +19 -0
  150. package/src/mappings/HeaderLarge.js +28 -0
  151. package/src/mappings/HeaderMedium.js +54 -0
  152. package/src/mappings/HeaderOverline.js +54 -0
  153. package/src/mappings/Icon.js +25 -0
  154. package/src/mappings/IconButton.js +30 -0
  155. package/src/mappings/Image.js +15 -0
  156. package/src/mappings/ImageBackground.js +28 -0
  157. package/src/mappings/KeyboardAvoidingView.js +40 -0
  158. package/src/mappings/KeyboardAwareScrollView.js +43 -0
  159. package/src/mappings/Layout.js +195 -0
  160. package/src/mappings/LinearGradient.js +77 -0
  161. package/src/mappings/MapCallout.js +20 -0
  162. package/src/mappings/MapMarker.js +47 -0
  163. package/src/mappings/MapView.js +129 -0
  164. package/src/mappings/MapView.ts +13 -0
  165. package/src/mappings/Modal.js +41 -0
  166. package/src/mappings/Picker.js +137 -0
  167. package/src/mappings/ProgressBar.js +100 -0
  168. package/src/mappings/ProgressCircle.js +108 -0
  169. package/src/mappings/ProgressIndicator.js +180 -0
  170. package/src/mappings/RadioButton.js +50 -0
  171. package/src/mappings/RadioButtonGroup.js +16 -0
  172. package/src/mappings/RadioButtonRow.js +37 -0
  173. package/src/mappings/RowBodyIcon.js +75 -0
  174. package/src/mappings/RowHeadlineImageCaption.js +167 -0
  175. package/src/mappings/RowHeadlineImageIcon.js +99 -0
  176. package/src/mappings/SafeAreaView.js +33 -0
  177. package/src/mappings/ScrollView.js +30 -0
  178. package/src/mappings/Slider.js +59 -0
  179. package/src/mappings/StarRating.js +42 -0
  180. package/src/mappings/Stepper.js +28 -0
  181. package/src/mappings/Surface.js +13 -0
  182. package/src/mappings/Swiper.js +60 -0
  183. package/src/mappings/SwiperItem.js +8 -0
  184. package/src/mappings/Switch.js +75 -0
  185. package/src/mappings/Text.js +232 -0
  186. package/src/mappings/TextArea.js +52 -0
  187. package/src/mappings/TextField.js +158 -0
  188. package/src/mappings/TextInput.js +208 -0
  189. package/src/mappings/ToggleButton.js +45 -0
  190. package/src/mappings/Touchable.js +12 -0
  191. package/src/mappings/Video.js +74 -0
  192. package/src/mappings/View.js +206 -0
  193. package/src/mappings/WebView.js +18 -0
  194. package/src/styles/DarkTheme.js +26 -0
  195. package/src/styles/DefaultTheme.js +111 -0
  196. package/src/styles/fonts.js +62 -0
  197. package/src/styles/overlay.js +60 -0
  198. package/src/styles/shadow.js +51 -0
  199. package/src/theming.js +3 -0
  200. package/src/utilities.js +54 -0
@@ -1 +1 @@
1
- {"version":3,"sources":["MapView.ts"],"names":["COMPONENT_TYPES","createBoolProp","createColorProp","createNumberProp","createTextProp","GROUPS","FORM_TYPES","PROP_TYPES","SEED_DATA","name","tag","packageName","description","category","media","layout","flex","props","provider","formType","flatArray","propType","STRING","editable","group","basic","label","required","defaultValue","options","latitude","precision","min","max","longitude","zoom","step","mapType","zoomEnabled","showsCompass","rotateEnabled","scrollEnabled","loadingEnabled","loadingIndicatorColor","loadingBackgroundColor","apiKey","process","env","GOOGLE_MAPS_API_KEY"],"mappings":"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","sourcesContent":["import {\n COMPONENT_TYPES,\n createBoolProp,\n createColorProp,\n createNumberProp,\n createTextProp,\n GROUPS,\n FORM_TYPES,\n PROP_TYPES,\n} from \"@draftbit/types\";\n\nexport const SEED_DATA = {\n name: \"Map View\",\n tag: \"MapView\",\n packageName: \"@draftbit/maps\",\n description: \"A map view\",\n category: COMPONENT_TYPES.media,\n layout: {\n flex: 1,\n },\n props: {\n provider: {\n formType: FORM_TYPES.flatArray,\n propType: PROP_TYPES.STRING,\n editable: true,\n group: GROUPS.basic,\n label: \"Provider\",\n description: \"The maps provider\",\n required: false,\n defaultValue: null,\n options: [\"google\"],\n },\n latitude: createNumberProp({\n label: \"Initial Latitude\",\n description: \"The longitude for the map's initial region\",\n required: false,\n precision: 6,\n min: -90,\n max: 90,\n defaultValue: 37.40241,\n }),\n longitude: createNumberProp({\n label: \"Initial Longitude\",\n description: \"The longitude for the map's initial region\",\n required: false,\n precision: 6,\n min: -180,\n max: 180,\n defaultValue: -122.12125,\n }),\n zoom: createNumberProp({\n label: \"Initial Zoom\",\n description: \"The initial zoom of the map\",\n required: true,\n precision: 0,\n step: 1,\n defaultValue: 8,\n min: 0,\n max: 22,\n group: GROUPS.basic,\n }),\n mapType: {\n label: \"Map Type\",\n description: \"The type of map to show\",\n group: GROUPS.basic,\n formType: FORM_TYPES.flatArray,\n propType: PROP_TYPES.STRING,\n required: false,\n defaultValue: null,\n options: [\n \"standard\",\n \"satellite\",\n \"hybrid\",\n \"terrain\",\n \"none\",\n \"mutedStandard\",\n ],\n },\n zoomEnabled: createBoolProp({\n label: \"Zoom Enabled\",\n description: \"Whether zooming is enabled (native only)\",\n group: GROUPS.basic,\n required: false,\n defaultValue: true,\n }),\n showsCompass: createBoolProp({\n label: \"Shows Compass\",\n description: \"Whether compass is shown\",\n group: GROUPS.basic,\n required: false,\n defaultValue: false,\n }),\n rotateEnabled: createBoolProp({\n label: \"Rotate Enabled\",\n description: \"Whether rotating the map is enabled\",\n group: GROUPS.basic,\n required: false,\n defaultValue: true,\n }),\n scrollEnabled: createBoolProp({\n label: \"Pan Enabled\",\n description: \"Whether panning the map view is enabled\",\n group: GROUPS.basic,\n required: false,\n defaultValue: true,\n }),\n loadingEnabled: createBoolProp({\n label: \"Loading Enabled\",\n description:\n \"If true a loading indicator will show while the map is loading\",\n group: GROUPS.basic,\n required: false,\n defaultValue: true,\n }),\n loadingIndicatorColor: createColorProp({\n label: \"Loading Indicator Color\",\n description: \"Color of the loading indicator\",\n }),\n loadingBackgroundColor: createColorProp({\n label: \"Loading BG Color\",\n description: \"Color of the background to show while the map is loading\",\n }),\n apiKey: createTextProp({\n defaultValue: process.env.GOOGLE_MAPS_API_KEY,\n editable: false,\n }),\n },\n};\n"]}
1
+ {"version":3,"sources":["MapView.ts"],"names":["COMPONENT_TYPES","createBoolProp","createColorProp","createNumberProp","createTextProp","GROUPS","FORM_TYPES","PROP_TYPES","SEED_DATA","name","tag","packageName","description","category","media","layout","flex","props","provider","formType","flatArray","propType","STRING","editable","group","basic","label","required","defaultValue","options","latitude","precision","min","max","longitude","zoom","step","mapType","zoomEnabled","showsCompass","rotateEnabled","scrollEnabled","loadingEnabled","loadingIndicatorColor","loadingBackgroundColor","showUserLocation","moveMapToUser","apiKey","process","env","GOOGLE_MAPS_API_KEY"],"mappings":"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","sourcesContent":["import {\n COMPONENT_TYPES,\n createBoolProp,\n createColorProp,\n createNumberProp,\n createTextProp,\n GROUPS,\n FORM_TYPES,\n PROP_TYPES,\n} from \"@draftbit/types\";\n\nexport const SEED_DATA = {\n name: \"Map View\",\n tag: \"MapView\",\n packageName: \"@draftbit/maps\",\n description: \"A map view\",\n category: COMPONENT_TYPES.media,\n layout: {\n flex: 1,\n },\n props: {\n provider: {\n formType: FORM_TYPES.flatArray,\n propType: PROP_TYPES.STRING,\n editable: true,\n group: GROUPS.basic,\n label: \"Provider\",\n description: \"The maps provider\",\n required: false,\n defaultValue: null,\n options: [\"google\"],\n },\n latitude: createNumberProp({\n label: \"Initial Latitude\",\n description: \"The longitude for the map's initial region\",\n required: false,\n precision: 6,\n min: -90,\n max: 90,\n defaultValue: 37.40241,\n }),\n longitude: createNumberProp({\n label: \"Initial Longitude\",\n description: \"The longitude for the map's initial region\",\n required: false,\n precision: 6,\n min: -180,\n max: 180,\n defaultValue: -122.12125,\n }),\n zoom: createNumberProp({\n label: \"Initial Zoom\",\n description: \"The initial zoom of the map\",\n required: true,\n precision: 0,\n step: 1,\n defaultValue: 8,\n min: 0,\n max: 22,\n group: GROUPS.basic,\n }),\n mapType: {\n label: \"Map Type\",\n description: \"The type of map to show\",\n group: GROUPS.basic,\n formType: FORM_TYPES.flatArray,\n propType: PROP_TYPES.STRING,\n required: false,\n defaultValue: null,\n options: [\n \"standard\",\n \"satellite\",\n \"hybrid\",\n \"terrain\",\n \"none\",\n \"mutedStandard\",\n ],\n },\n zoomEnabled: createBoolProp({\n label: \"Zoom Enabled\",\n description: \"Whether zooming is enabled (native only)\",\n group: GROUPS.basic,\n required: false,\n defaultValue: true,\n }),\n showsCompass: createBoolProp({\n label: \"Shows Compass\",\n description: \"Whether compass is shown\",\n group: GROUPS.basic,\n required: false,\n defaultValue: false,\n }),\n rotateEnabled: createBoolProp({\n label: \"Rotate Enabled\",\n description: \"Whether rotating the map is enabled\",\n group: GROUPS.basic,\n required: false,\n defaultValue: true,\n }),\n scrollEnabled: createBoolProp({\n label: \"Pan Enabled\",\n description: \"Whether panning the map view is enabled\",\n group: GROUPS.basic,\n required: false,\n defaultValue: true,\n }),\n loadingEnabled: createBoolProp({\n label: \"Loading Enabled\",\n description:\n \"If true a loading indicator will show while the map is loading\",\n group: GROUPS.basic,\n required: false,\n defaultValue: true,\n }),\n loadingIndicatorColor: createColorProp({\n label: \"Loading Indicator Color\",\n description: \"Color of the loading indicator\",\n }),\n loadingBackgroundColor: createColorProp({\n label: \"Loading BG Color\",\n description: \"Color of the background to show while the map is loading\",\n }),\n showUserLocation: createBoolProp({\n label: \"Show User Location\",\n description: \"Whether to request and show the user's location on the map\",\n required: false,\n defaultValue: null,\n }),\n moveMapToUser: createBoolProp({\n label: \"Move Map to User\",\n description:\n \"Whether to set the map region to the user's location. Overrides latitude and longitude.\",\n required: false,\n defaultValue: null,\n }),\n apiKey: createTextProp({\n defaultValue: process.env.GOOGLE_MAPS_API_KEY,\n editable: false,\n }),\n },\n};\n"]}
@@ -132,6 +132,26 @@ export declare const SEED_DATA: {
132
132
  formType: string;
133
133
  propType: string;
134
134
  };
135
+ showUserLocation: {
136
+ label: string;
137
+ description: string;
138
+ formType: string;
139
+ propType: string;
140
+ defaultValue: boolean;
141
+ editable: boolean;
142
+ required: boolean;
143
+ group: string;
144
+ };
145
+ moveMapToUser: {
146
+ label: string;
147
+ description: string;
148
+ formType: string;
149
+ propType: string;
150
+ defaultValue: boolean;
151
+ editable: boolean;
152
+ required: boolean;
153
+ group: string;
154
+ };
135
155
  apiKey: any;
136
156
  };
137
157
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@draftbit/core",
3
- "version": "44.0.1",
3
+ "version": "44.0.3",
4
4
  "description": "Core (non-native) Components",
5
5
  "main": "lib/commonjs/index.js",
6
6
  "module": "lib/module/index.js",
@@ -41,7 +41,7 @@
41
41
  "dependencies": {
42
42
  "@date-io/date-fns": "^1.3.13",
43
43
  "@draftbit/react-theme-provider": "^2.1.1",
44
- "@draftbit/types": "^44.0.1",
44
+ "@draftbit/types": "^44.0.3",
45
45
  "@material-ui/core": "^4.11.0",
46
46
  "@material-ui/pickers": "^3.2.10",
47
47
  "@react-native-community/slider": "4.1.7",
@@ -80,5 +80,5 @@
80
80
  ]
81
81
  ]
82
82
  },
83
- "gitHead": "06e5908edcce2ae4b2c90fcf2d1b0274be9bb054"
83
+ "gitHead": "5354205cd3c930f91b8ec150e3cf9d287951d691"
84
84
  }
@@ -0,0 +1,9 @@
1
+ import * as React from "react";
2
+ import { ThemeProvider } from "./theming";
3
+ import PortalHost from "./components/Portal/PortalHost";
4
+ export default class Provider extends React.Component {
5
+ render() {
6
+ return (React.createElement(PortalHost, null,
7
+ React.createElement(ThemeProvider, { theme: this.props.theme }, this.props.children)));
8
+ }
9
+ }
@@ -0,0 +1,44 @@
1
+ import * as React from "react";
2
+ import { View, StyleSheet, Pressable, } from "react-native";
3
+ import Text from "../Text";
4
+ import { withTheme } from "../../theming";
5
+ import { extractStyles } from "../../utilities";
6
+ const AccordionGroup = ({ label, expanded: expandedProp = false, openColor, closedColor, caretColor: caretColorProp, caretSize = 24, icon, iconSize = 24, style, children, theme, Icon, }) => {
7
+ const [expanded, setExpanded] = React.useState(expandedProp);
8
+ const { textStyles, viewStyles } = extractStyles(style);
9
+ const expandedColor = openColor || theme.colors.primary;
10
+ const collapsedColor = closedColor || theme.colors.primary;
11
+ const labelColor = expanded ? expandedColor : collapsedColor;
12
+ const caretColor = caretColorProp || labelColor;
13
+ const handlePressAction = () => {
14
+ setExpanded(!expanded);
15
+ };
16
+ return (React.createElement(React.Fragment, null,
17
+ React.createElement(Pressable, { style: [styles.row, viewStyles], onPress: handlePressAction, accessibilityRole: "button" },
18
+ icon ? (React.createElement(Icon, { name: icon, size: iconSize, color: labelColor, style: styles.icon })) : null,
19
+ React.createElement(View, { style: styles.content },
20
+ React.createElement(Text, { selectable: false, style: [
21
+ textStyles,
22
+ {
23
+ color: labelColor,
24
+ },
25
+ ] }, label)),
26
+ React.createElement(Icon, { name: expanded
27
+ ? "MaterialIcons/keyboard-arrow-up"
28
+ : "MaterialIcons/keyboard-arrow-down", color: caretColor, size: caretSize })),
29
+ expanded ? children : null));
30
+ };
31
+ const styles = StyleSheet.create({
32
+ row: {
33
+ flexDirection: "row",
34
+ alignItems: "center",
35
+ },
36
+ content: {
37
+ flex: 1,
38
+ justifyContent: "center",
39
+ },
40
+ icon: {
41
+ marginRight: 8,
42
+ },
43
+ });
44
+ export default withTheme(AccordionGroup);
@@ -0,0 +1,32 @@
1
+ import * as React from "react";
2
+ import { Pressable, StyleSheet, View, } from "react-native";
3
+ import Text from "../Text";
4
+ import { extractStyles } from "../../utilities";
5
+ import { withTheme } from "../../theming";
6
+ const AccordionItem = ({ Icon, icon, label, style, iconColor, theme, ...rest }) => {
7
+ const { textStyles, viewStyles } = extractStyles(style);
8
+ return (React.createElement(Pressable, { style: [styles.container, viewStyles], ...rest },
9
+ React.createElement(View, { style: styles.row },
10
+ icon ? (React.createElement(Icon, { name: icon, size: 24, color: iconColor || theme.colors.primary })) : null,
11
+ React.createElement(View, { style: [styles.item, styles.content] },
12
+ React.createElement(Text, { selectable: false, style: textStyles }, label)))));
13
+ };
14
+ const styles = StyleSheet.create({
15
+ container: {
16
+ padding: 8,
17
+ },
18
+ row: {
19
+ flexDirection: "row",
20
+ alignItems: "center",
21
+ paddingLeft: 8,
22
+ },
23
+ item: {
24
+ marginVertical: 6,
25
+ paddingLeft: 8,
26
+ },
27
+ content: {
28
+ flex: 1,
29
+ justifyContent: "center",
30
+ },
31
+ });
32
+ export default withTheme(AccordionItem);
@@ -0,0 +1,2 @@
1
+ export { default as AccordionGroup } from "./AccordionGroup";
2
+ export { default as AccordionItem } from "./AccordionItem";
@@ -0,0 +1,45 @@
1
+ import React from "react";
2
+ import { View, StyleSheet } from "react-native";
3
+ import Portal from "../Portal/Portal";
4
+ import Touchable from "../Touchable";
5
+ import ActionSheetCancel from "./ActionSheetCancel";
6
+ const ActionSheet = ({ visible = false, onClose, children }) => {
7
+ return visible ? (React.createElement(Portal, null,
8
+ React.createElement(Touchable, { style: styles.wrapper, onPress: onClose },
9
+ React.createElement(View, { style: styles.overlay }),
10
+ React.createElement(View, { style: styles.groupWrapper },
11
+ React.createElement(View, { style: styles.group }, React.Children.toArray(children).filter((child) => child?.type !== ActionSheetCancel)),
12
+ React.createElement(View, { style: styles.group }, React.Children.toArray(children).filter((child) => child.type === ActionSheetCancel)))))) : (React.createElement(React.Fragment, null));
13
+ };
14
+ const styles = StyleSheet.create({
15
+ wrapper: {
16
+ flex: 1,
17
+ display: "flex",
18
+ flexDirection: "column",
19
+ },
20
+ overlay: {
21
+ position: "absolute",
22
+ top: 0,
23
+ left: 0,
24
+ right: 0,
25
+ bottom: 0,
26
+ backgroundColor: "#000000",
27
+ opacity: 0.3,
28
+ },
29
+ groupWrapper: {
30
+ flex: 1,
31
+ flexDirection: "column",
32
+ justifyContent: "flex-end",
33
+ display: "flex",
34
+ marginBottom: 25,
35
+ },
36
+ group: {
37
+ display: "flex",
38
+ flexDirection: "column",
39
+ borderRadius: 10,
40
+ marginHorizontal: 7,
41
+ marginVertical: 2.5,
42
+ overflow: "hidden",
43
+ },
44
+ });
45
+ export default ActionSheet;
@@ -0,0 +1,6 @@
1
+ import React from "react";
2
+ import ActionSheetItem from "./ActionSheetItem";
3
+ const ActionSheetCancel = ({ label = "Cancel", color, style, onPress, }) => {
4
+ return (React.createElement(ActionSheetItem, { label: label, color: color || "#FF453A", style: [style], onPress: onPress }));
5
+ };
6
+ export default ActionSheetCancel;
@@ -0,0 +1,30 @@
1
+ import React from "react";
2
+ import { Text, StyleSheet, TouchableOpacity, } from "react-native";
3
+ import { extractStyles } from "../../utilities";
4
+ const ActionSheetItem = ({ label, style, color, onPress }) => {
5
+ const { textStyles, viewStyles } = extractStyles(style);
6
+ return (React.createElement(TouchableOpacity, { activeOpacity: 0.7, style: [styles.wrapper, viewStyles], onPress: onPress },
7
+ React.createElement(Text, { style: [styles.label, textStyles, { color }] }, label)));
8
+ };
9
+ const styles = StyleSheet.create({
10
+ wrapper: {
11
+ borderBottomWidth: StyleSheet.hairlineWidth,
12
+ borderBottomColor: "#CCCCCC",
13
+ backgroundColor: "#F1F1F1",
14
+ minHeight: 50,
15
+ overflow: "hidden",
16
+ display: "flex",
17
+ justifyContent: "center",
18
+ },
19
+ label: {
20
+ fontSize: 16,
21
+ textAlign: "center",
22
+ color: "#0A84FF",
23
+ fontWeight: "500",
24
+ overflow: "hidden",
25
+ paddingHorizontal: 20,
26
+ paddingVertical: 10,
27
+ alignSelf: "center",
28
+ },
29
+ });
30
+ export default ActionSheetItem;
@@ -0,0 +1,3 @@
1
+ export { default as ActionSheet } from "./ActionSheet";
2
+ export { default as ActionSheetItem } from "./ActionSheetItem";
3
+ export { default as ActionSheetCancel } from "./ActionSheetCancel";
@@ -0,0 +1,43 @@
1
+ import * as React from "react";
2
+ import { Animated, Easing, } from "react-native";
3
+ import CircularProgress from "./CircularProgress";
4
+ const AnimatedProgress = Animated.createAnimatedComponent(CircularProgress);
5
+ const AnimatedCircularProgress = ({ duration = 500, easing = Easing.out(Easing.ease), fill, prefill = 0, useNativeDriver = false, tintColorSecondary, onAnimationComplete, tintColor = "black", ...other }) => {
6
+ const [fillAnimation] = React.useState(new Animated.Value(prefill));
7
+ const animate = React.useCallback((toVal = -1, dur, ease) => {
8
+ const toValue = toVal >= 0 ? toVal : fill;
9
+ const dura = dur || duration;
10
+ const eas = ease || easing;
11
+ const useNative = useNativeDriver;
12
+ const anim = Animated.timing(fillAnimation, {
13
+ useNativeDriver: useNative,
14
+ toValue,
15
+ easing: eas,
16
+ duration: dura,
17
+ });
18
+ anim.start(onAnimationComplete);
19
+ return anim;
20
+ }, [
21
+ duration,
22
+ easing,
23
+ fill,
24
+ useNativeDriver,
25
+ fillAnimation,
26
+ onAnimationComplete,
27
+ ]);
28
+ const animateColor = () => {
29
+ if (!tintColorSecondary) {
30
+ return tintColor;
31
+ }
32
+ const tintAnimation = fillAnimation.interpolate({
33
+ inputRange: [0, 100],
34
+ outputRange: [tintColor, tintColorSecondary],
35
+ });
36
+ return tintAnimation;
37
+ };
38
+ React.useEffect(() => {
39
+ animate();
40
+ }, [fill, animate]);
41
+ return (React.createElement(AnimatedProgress, { ...other, style: other.style, childrenContainerStyle: other.childrenContainerStyle, fill: fillAnimation, tintColor: animateColor() }));
42
+ };
43
+ export default AnimatedCircularProgress;
@@ -0,0 +1,18 @@
1
+ import React from "react";
2
+ import { View, StyleSheet, } from "react-native";
3
+ const AspectRatio = (props) => {
4
+ const [layout, setLayout] = React.useState(null);
5
+ const { aspectRatio = 1, ...inputStyle } = StyleSheet.flatten(props.style) || {};
6
+ const style = [inputStyle, { aspectRatio }];
7
+ if (layout) {
8
+ const { width = 0, height = 0 } = layout;
9
+ if (width === 0) {
10
+ style.push({ width: height * (1 / aspectRatio), height });
11
+ }
12
+ else {
13
+ style.push({ width, height: width * (1 / aspectRatio) });
14
+ }
15
+ }
16
+ return (React.createElement(View, { ...props, style: style, onLayout: ({ nativeEvent: { layout: l } }) => setLayout(l) }, props.children));
17
+ };
18
+ export default AspectRatio;
@@ -0,0 +1,30 @@
1
+ import * as React from "react";
2
+ import { View } from "react-native";
3
+ import Touchable from "./Touchable";
4
+ import CircleImage from "./CircleImage";
5
+ import { withTheme } from "../theming";
6
+ const AvatarEdit = ({ Icon, image, size = 80, onPress = () => { }, style, theme, ...rest }) => {
7
+ const colorStyles = {
8
+ editBackgroundColor: theme.colors.primary,
9
+ editIconColor: theme.colors.surface,
10
+ editBorderColor: theme.colors.surface,
11
+ };
12
+ const dimensions = {
13
+ width: size,
14
+ height: size,
15
+ };
16
+ return (React.createElement(View, { style: [style, dimensions], ...rest },
17
+ React.createElement(Touchable, { onPress: onPress },
18
+ React.createElement(CircleImage, { source: image, size: size }),
19
+ React.createElement(View, { style: {
20
+ position: "absolute",
21
+ top: -3,
22
+ right: -3,
23
+ borderColor: colorStyles.editBorderColor,
24
+ backgroundColor: colorStyles.editBackgroundColor,
25
+ borderRadius: size * (3 / 16),
26
+ padding: size * (3 / 32),
27
+ } },
28
+ React.createElement(Icon, { name: "MaterialIcons/edit", color: colorStyles.editIconColor, size: size * (3 / 16) })))));
29
+ };
30
+ export default withTheme(AvatarEdit);
@@ -0,0 +1,109 @@
1
+ import * as React from "react";
2
+ import { Button, Text, View, StyleSheet, Animated, } from "react-native";
3
+ import Surface from "./Surface";
4
+ import shadow from "../styles/shadow";
5
+ import { withTheme } from "../theming";
6
+ const ELEVATION = 1;
7
+ const DEFAULT_MAX_WIDTH = 960;
8
+ const Banner = ({ initiallyVisible = true, dismissable = true, icon, buttonColor, content, contentStyle, style, theme, Icon, ...rest }) => {
9
+ const [visible, setVisible] = React.useState(initiallyVisible);
10
+ React.useEffect(() => {
11
+ if (initiallyVisible) {
12
+ setVisible(true);
13
+ }
14
+ }, [initiallyVisible]);
15
+ const { current: position } = React.useRef(new Animated.Value(visible ? 1 : 0));
16
+ const [layout, setLayout] = React.useState({
17
+ height: 0,
18
+ measured: false,
19
+ });
20
+ React.useEffect(() => {
21
+ if (visible) {
22
+ // show
23
+ Animated.timing(position, {
24
+ duration: 250,
25
+ toValue: 1,
26
+ useNativeDriver: false,
27
+ }).start();
28
+ }
29
+ else {
30
+ // hide
31
+ Animated.timing(position, {
32
+ duration: 200,
33
+ toValue: 0,
34
+ useNativeDriver: false,
35
+ }).start();
36
+ }
37
+ }, [visible, position]);
38
+ const handleLayout = ({ nativeEvent }) => {
39
+ const { height } = nativeEvent.layout;
40
+ setLayout({ height, measured: true });
41
+ };
42
+ // The banner animation has 2 parts:
43
+ // 1. Blank spacer element which animates its height to move the content
44
+ // 2. Actual banner which animates its translateY
45
+ // In initial render, we position everything normally and measure the height of the banner
46
+ // Once we have the height, we apply the height to the spacer and switch the banner to position: absolute
47
+ // We need this because we need to move the content below as if banner's height was being animated
48
+ // However we can't animated banner's height directly as it'll also resize the content inside
49
+ const height = Animated.multiply(position, layout.height);
50
+ const translateY = Animated.multiply(Animated.add(position, -1), layout.height);
51
+ return (React.createElement(Surface, { ...rest, style: [styles.container, shadow(ELEVATION), style] },
52
+ React.createElement(View, { style: [styles.wrapper, contentStyle] },
53
+ React.createElement(Animated.View, { style: { height } }),
54
+ React.createElement(Animated.View, { onLayout: handleLayout, style: [
55
+ layout.measured || !visible
56
+ ? // If we have measured banner's height or it's invisible,
57
+ // Position it absolutely, the layout will be taken care of the spacer
58
+ [styles.absolute, { transform: [{ translateY }] }]
59
+ : // Otherwise position it normally
60
+ null,
61
+ !layout.measured && !visible
62
+ ? // If we haven't measured banner's height yet and it's invisible,
63
+ // hide it with opacity: 0 so user doesn't see it
64
+ { opacity: 0 }
65
+ : null,
66
+ ] },
67
+ React.createElement(View, { style: [styles.content, { marginBottom: dismissable ? 0 : 16 }] },
68
+ icon ? (React.createElement(View, { style: styles.icon },
69
+ React.createElement(Icon, { name: icon, size: 40 }))) : null,
70
+ React.createElement(Text, { style: [styles.message, { color: theme.colors.text }], accessibilityLiveRegion: visible ? "polite" : "none", accessibilityRole: "alert" }, content)),
71
+ dismissable ? (React.createElement(View, { style: styles.actions },
72
+ React.createElement(Button, { color: buttonColor || theme.colors.primary, title: "Close", onPress: () => setVisible(false) }))) : null))));
73
+ };
74
+ const styles = StyleSheet.create({
75
+ container: {
76
+ elevation: ELEVATION,
77
+ },
78
+ wrapper: {
79
+ overflow: "hidden",
80
+ alignSelf: "center",
81
+ width: "100%",
82
+ maxWidth: DEFAULT_MAX_WIDTH,
83
+ },
84
+ absolute: {
85
+ position: "absolute",
86
+ top: 0,
87
+ width: "100%",
88
+ },
89
+ content: {
90
+ flexDirection: "row",
91
+ justifyContent: "flex-start",
92
+ marginHorizontal: 8,
93
+ marginTop: 16,
94
+ marginBottom: 0,
95
+ },
96
+ icon: {
97
+ margin: 8,
98
+ },
99
+ message: {
100
+ flex: 1,
101
+ margin: 8,
102
+ },
103
+ actions: {
104
+ flexDirection: "row",
105
+ justifyContent: "flex-end",
106
+ margin: 8,
107
+ },
108
+ });
109
+ export default withTheme(Banner);
@@ -0,0 +1,112 @@
1
+ import * as React from "react";
2
+ import { Text, Pressable, Platform, StyleSheet, ActivityIndicator, } from "react-native";
3
+ import { withTheme } from "../theming";
4
+ const CONSTANTS = {
5
+ baseHeight: 42,
6
+ borderRadius: 4,
7
+ padding: 8,
8
+ icon: 24,
9
+ };
10
+ function Base({ Icon, icon, title, onPress, loading, disabled, style, ...props }) {
11
+ const { color, fontFamily, fontWeight, fontSize, lineHeight, letterSpacing, textTransform, textAlign, textDecorationLine, textDecorationColor, textDecorationStyle, ...buttonStyles } = StyleSheet.flatten(style || {});
12
+ const titleStyles = {
13
+ color,
14
+ fontFamily,
15
+ fontWeight,
16
+ fontSize,
17
+ lineHeight,
18
+ letterSpacing,
19
+ textTransform,
20
+ textAlign,
21
+ textDecorationLine,
22
+ textDecorationColor,
23
+ textDecorationStyle,
24
+ };
25
+ if (textAlign === "left") {
26
+ buttonStyles.justifyContent = "flex-start";
27
+ }
28
+ if (textAlign === "right") {
29
+ buttonStyles.justifyContent = "flex-end";
30
+ }
31
+ return (React.createElement(Pressable, { onPress: onPress, disabled: disabled || loading, style: ({ pressed }) => {
32
+ return [
33
+ styles.base,
34
+ {
35
+ opacity: pressed || disabled ? 0.75 : 1,
36
+ },
37
+ buttonStyles,
38
+ ];
39
+ }, ...props },
40
+ loading ? (React.createElement(ActivityIndicator, { size: "small", color: color, style: styles.loading })) : null,
41
+ icon && !loading ? (React.createElement(Icon, { name: icon, color: color, style: styles.icon, size: CONSTANTS.icon })) : null,
42
+ React.createElement(Text, { style: titleStyles }, title)));
43
+ }
44
+ const Solid = ({ style, theme, ...props }) => {
45
+ return (React.createElement(Base, { style: [
46
+ {
47
+ color: "#FFF",
48
+ borderRadius: theme.roundness,
49
+ backgroundColor: theme.colors.primary,
50
+ },
51
+ style,
52
+ ], ...props }));
53
+ };
54
+ const ButtonSolid = withTheme(Solid);
55
+ export { ButtonSolid };
56
+ const Outline = ({ style, theme, ...props }) => {
57
+ return (React.createElement(Base, { style: [
58
+ styles.outline,
59
+ {
60
+ borderRadius: theme.roundness,
61
+ borderColor: theme.colors.primary,
62
+ color: theme.colors.primary,
63
+ },
64
+ style,
65
+ ], ...props }));
66
+ };
67
+ const ButtonOutline = withTheme(Outline);
68
+ export { ButtonOutline };
69
+ const styles = StyleSheet.create({
70
+ base: {
71
+ position: "relative",
72
+ flexDirection: "row",
73
+ alignItems: "center",
74
+ justifyContent: "center",
75
+ minHeight: CONSTANTS.baseHeight,
76
+ paddingHorizontal: 12,
77
+ fontFamily: "System",
78
+ fontWeight: "700",
79
+ ...Platform.select({
80
+ web: {
81
+ cursor: "pointer",
82
+ userSelect: "none",
83
+ },
84
+ }),
85
+ },
86
+ outline: {
87
+ backgroundColor: "transparent",
88
+ borderWidth: 1,
89
+ },
90
+ bare: {
91
+ backgroundColor: "transparent",
92
+ padding: 0,
93
+ minHeight: undefined,
94
+ },
95
+ loading: {
96
+ marginRight: 6,
97
+ },
98
+ icon: {
99
+ ...Platform.select({
100
+ web: {
101
+ marginTop: 1,
102
+ marginRight: 4,
103
+ alignSelf: "center",
104
+ },
105
+ default: {
106
+ marginBottom: 2,
107
+ marginRight: 4,
108
+ alignSelf: "center",
109
+ },
110
+ }),
111
+ },
112
+ });
@@ -0,0 +1,57 @@
1
+ import React from "react";
2
+ import { StyleSheet, View, Pressable, } from "react-native";
3
+ import Image from "./Image";
4
+ import Surface from "./Surface";
5
+ import { Title, Subtitle, Caption } from "./Typography";
6
+ import { withTheme } from "../theming";
7
+ import Config from "./Config";
8
+ const ICON_SIZE = Config.cardIconSize;
9
+ const ICON_CONTAINER_SIZE = Config.cardIconSize * 2;
10
+ const ICON_CONTAINER_PADDING = Config.cardIconSize / 2 - 1;
11
+ const ICON_ELEVATION = Config.cardIconElevation;
12
+ export const TopRightCircleIcon = withTheme(({ Icon, icon, theme, onPress, }) => {
13
+ return (React.createElement(Surface, { style: {
14
+ justifyContent: "center",
15
+ alignItems: "center",
16
+ elevation: ICON_ELEVATION,
17
+ position: "absolute",
18
+ top: 12,
19
+ right: 12,
20
+ width: ICON_CONTAINER_SIZE,
21
+ height: ICON_CONTAINER_SIZE,
22
+ padding: ICON_CONTAINER_PADDING,
23
+ borderRadius: ICON_CONTAINER_SIZE,
24
+ backgroundColor: "rgba(0, 0, 0, 0.1)",
25
+ } },
26
+ React.createElement(Pressable, { disabled: !onPress, onPress: onPress, style: ({ pressed }) => {
27
+ return [
28
+ {
29
+ opacity: pressed ? 0.8 : 1,
30
+ },
31
+ ];
32
+ } },
33
+ React.createElement(Icon, { name: icon, size: ICON_SIZE, color: theme.colors.surface }))));
34
+ });
35
+ const Card = ({ Icon, image = Config.cardImageUrl, title, subtitle, description, textCentered, icon, aspectRatio = 1.5, elevation = 2, style, onPress, onPressIcon, titleStyle, subtitleStyle, descriptionStyle, theme, children, }) => {
36
+ const { backgroundColor: bgColor, padding, ...styles } = StyleSheet.flatten(style || {});
37
+ const backgroundColor = bgColor ? bgColor : theme.colors.surface;
38
+ const innerPadding = padding ? padding : 12;
39
+ return (React.createElement(Surface, { style: [{ elevation, backgroundColor }, styles] },
40
+ React.createElement(Pressable, { disabled: !onPress, onPress: onPress, style: ({ pressed }) => {
41
+ return [
42
+ {
43
+ opacity: pressed ? 0.8 : 1,
44
+ },
45
+ ];
46
+ } },
47
+ React.createElement(Image, { style: { aspectRatio }, source: typeof image === "string" ? { uri: image } : image, resizeMode: "cover" }),
48
+ React.createElement(View, { style: { padding: innerPadding } },
49
+ React.createElement(View, { style: { alignItems: textCentered ? "center" : "flex-start" } },
50
+ title || (title && title !== "") ? (React.createElement(Title, { text: title, style: titleStyle })) : null,
51
+ subtitle || (subtitle && subtitle !== "") ? (React.createElement(Subtitle, { text: subtitle, style: subtitleStyle })) : null,
52
+ description || (description && description !== "") ? (React.createElement(View, { style: { marginTop: 4 } },
53
+ React.createElement(Caption, { text: description, style: descriptionStyle }))) : null,
54
+ children)),
55
+ icon ? (React.createElement(TopRightCircleIcon, { Icon: Icon, icon: icon, onPress: onPressIcon })) : null)));
56
+ };
57
+ export default withTheme(Card);