@draftbit/core 43.6.0-alpha.4 → 43.6.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 (186) 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/mappings/RadioButtonGroup.js.map +1 -1
  8. package/lib/commonjs/mappings/RadioButtonRow.js.map +1 -1
  9. package/lib/module/components/Justification.js +1 -1
  10. package/lib/module/components/ResizeMode.js +1 -1
  11. package/package.json +3 -3
  12. package/src/Provider.js +9 -0
  13. package/src/components/Accordion/AccordionGroup.js +44 -0
  14. package/src/components/Accordion/AccordionItem.js +32 -0
  15. package/src/components/Accordion/index.js +2 -0
  16. package/src/components/ActionSheet/ActionSheet.js +45 -0
  17. package/src/components/ActionSheet/ActionSheetCancel.js +6 -0
  18. package/src/components/ActionSheet/ActionSheetItem.js +30 -0
  19. package/src/components/ActionSheet/index.js +3 -0
  20. package/src/components/AnimatedCircularProgress.js +43 -0
  21. package/src/components/AspectRatio.js +18 -0
  22. package/src/components/AvatarEdit.js +30 -0
  23. package/src/components/Banner.js +109 -0
  24. package/src/components/Button.js +112 -0
  25. package/src/components/Card.js +57 -0
  26. package/src/components/CardBlock.js +54 -0
  27. package/src/components/CardContainer.js +69 -0
  28. package/src/components/CardContainerRating.js +79 -0
  29. package/src/components/CardContainerShortImage.js +33 -0
  30. package/src/components/CardInline.js +36 -0
  31. package/src/components/Carousel.js +66 -0
  32. package/src/components/Checkbox/Checkbox.js +63 -0
  33. package/src/components/Checkbox/CheckboxGroup.js +21 -0
  34. package/src/components/Checkbox/CheckboxGroupRow.js +77 -0
  35. package/src/components/Checkbox/CheckboxRow.js +78 -0
  36. package/src/components/Checkbox/context.js +14 -0
  37. package/src/components/Checkbox/index.js +3 -0
  38. package/src/components/CircleImage.js +8 -0
  39. package/src/components/CircularProgress.js +78 -0
  40. package/src/components/Config.js +63 -0
  41. package/src/components/Container.js +44 -0
  42. package/src/components/DatePicker/DatePicker.js +368 -0
  43. package/src/components/DatePicker/DatePickerComponent.js +13 -0
  44. package/src/components/DatePicker/DatePickerComponent.web.js +30 -0
  45. package/src/components/DatePicker/DatePickerComponentType.js +1 -0
  46. package/src/components/DeprecatedButton.js +95 -0
  47. package/src/components/DeprecatedCardWrapper.js +18 -0
  48. package/src/components/DeprecatedFAB.js +115 -0
  49. package/src/components/Divider.js +13 -0
  50. package/src/components/Elevation.js +20 -0
  51. package/src/components/FAB.js +46 -0
  52. package/src/components/FieldSearchBarFull.js +53 -0
  53. package/src/components/FormRow.js +19 -0
  54. package/src/components/Header.js +44 -0
  55. package/src/components/HeaderLarge.js +7 -0
  56. package/src/components/HeaderMedium.js +7 -0
  57. package/src/components/HeaderOverline.js +7 -0
  58. package/src/components/IconButton.js +35 -0
  59. package/src/components/Image.js +47 -0
  60. package/src/components/Justification.js +1 -0
  61. package/src/components/Layout.js +50 -0
  62. package/src/components/NumberInput.js +49 -0
  63. package/src/components/Picker/Picker.js +56 -0
  64. package/src/components/Picker/PickerComponent.android.js +68 -0
  65. package/src/components/Picker/PickerComponent.ios.js +78 -0
  66. package/src/components/Picker/PickerComponent.web.js +69 -0
  67. package/src/components/Picker/PickerTypes.js +1 -0
  68. package/src/components/Portal/Portal.js +35 -0
  69. package/src/components/Portal/PortalConsumer.js +28 -0
  70. package/src/components/Portal/PortalHost.js +105 -0
  71. package/src/components/Portal/PortalManager.js +29 -0
  72. package/src/components/ProgressBar.js +118 -0
  73. package/src/components/ProgressCircle.js +13 -0
  74. package/src/components/ProgressIndicator.js +27 -0
  75. package/src/components/RadioButton/RadioButton.js +17 -0
  76. package/src/components/RadioButton/RadioButtonFieldGroup.js +17 -0
  77. package/src/components/RadioButton/RadioButtonGroup.js +43 -0
  78. package/src/components/RadioButton/RadioButtonRow.js +76 -0
  79. package/src/components/RadioButton/context.js +14 -0
  80. package/src/components/RadioButton/index.js +4 -0
  81. package/src/components/ResizeMode.js +1 -0
  82. package/src/components/Row.js +48 -0
  83. package/src/components/RowBodyIcon.js +8 -0
  84. package/src/components/RowHeadlineImageCaption.js +12 -0
  85. package/src/components/RowHeadlineImageIcon.js +14 -0
  86. package/src/components/ScreenContainer.js +34 -0
  87. package/src/components/Slider.js +63 -0
  88. package/src/components/StarRating.js +50 -0
  89. package/src/components/StepIndicator.js +346 -0
  90. package/src/components/Stepper.js +39 -0
  91. package/src/components/Surface.js +32 -0
  92. package/src/components/Swiper/Swiper.js +18 -0
  93. package/src/components/Swiper/SwiperItem.js +9 -0
  94. package/src/components/Swiper/index.js +2 -0
  95. package/src/components/Switch.js +56 -0
  96. package/src/components/Text.js +28 -0
  97. package/src/components/TextField.js +420 -0
  98. package/src/components/ToggleButton.js +39 -0
  99. package/src/components/Touchable.js +12 -0
  100. package/src/components/Touchable.web.js +2 -0
  101. package/src/components/Typography.js +36 -0
  102. package/src/components/useAuthState.js +31 -0
  103. package/src/constants.js +10 -0
  104. package/src/hooks.js +12 -0
  105. package/src/index.js +51 -0
  106. package/src/interfaces/Icon.js +8 -0
  107. package/src/mappings/Accordion.js +41 -0
  108. package/src/mappings/AccordionItem.js +16 -0
  109. package/src/mappings/ActionSheet.js +13 -0
  110. package/src/mappings/ActionSheetCancel.js +19 -0
  111. package/src/mappings/ActionSheetItem.js +22 -0
  112. package/src/mappings/ActivityIndicator.js +53 -0
  113. package/src/mappings/AudioPlayer.js +20 -0
  114. package/src/mappings/AvatarEdit.js +37 -0
  115. package/src/mappings/Banner.js +32 -0
  116. package/src/mappings/BlurView.js +41 -0
  117. package/src/mappings/Button.js +56 -0
  118. package/src/mappings/Card.js +52 -0
  119. package/src/mappings/CardBlock.js +122 -0
  120. package/src/mappings/CardContainer.js +102 -0
  121. package/src/mappings/CardContainerRating.js +124 -0
  122. package/src/mappings/CardContainerShortImage.js +118 -0
  123. package/src/mappings/CardInline.js +51 -0
  124. package/src/mappings/Carousel.js +18 -0
  125. package/src/mappings/Checkbox.js +45 -0
  126. package/src/mappings/CheckboxGroup.js +25 -0
  127. package/src/mappings/CheckboxRow.js +56 -0
  128. package/src/mappings/CircleImage.js +24 -0
  129. package/src/mappings/Container.js +29 -0
  130. package/src/mappings/CustomCode.js +8 -0
  131. package/src/mappings/DatePicker.js +146 -0
  132. package/src/mappings/Divider.js +26 -0
  133. package/src/mappings/FAB.js +36 -0
  134. package/src/mappings/Fetch.js +12 -0
  135. package/src/mappings/FieldSearchBarFull.js +49 -0
  136. package/src/mappings/FlatList.js +19 -0
  137. package/src/mappings/HeaderLarge.js +28 -0
  138. package/src/mappings/HeaderMedium.js +54 -0
  139. package/src/mappings/HeaderOverline.js +54 -0
  140. package/src/mappings/Icon.js +25 -0
  141. package/src/mappings/IconButton.js +30 -0
  142. package/src/mappings/Image.js +15 -0
  143. package/src/mappings/ImageBackground.js +28 -0
  144. package/src/mappings/KeyboardAvoidingView.js +40 -0
  145. package/src/mappings/KeyboardAwareScrollView.js +43 -0
  146. package/src/mappings/Layout.js +195 -0
  147. package/src/mappings/LinearGradient.js +77 -0
  148. package/src/mappings/MapCallout.js +20 -0
  149. package/src/mappings/MapMarker.js +47 -0
  150. package/src/mappings/MapView.js +125 -0
  151. package/src/mappings/Modal.js +41 -0
  152. package/src/mappings/Picker.js +137 -0
  153. package/src/mappings/ProgressBar.js +100 -0
  154. package/src/mappings/ProgressCircle.js +108 -0
  155. package/src/mappings/ProgressIndicator.js +180 -0
  156. package/src/mappings/RadioButton.js +50 -0
  157. package/src/mappings/RadioButtonGroup.js +16 -0
  158. package/src/mappings/RadioButtonRow.js +37 -0
  159. package/src/mappings/RowBodyIcon.js +75 -0
  160. package/src/mappings/RowHeadlineImageCaption.js +167 -0
  161. package/src/mappings/RowHeadlineImageIcon.js +99 -0
  162. package/src/mappings/SafeAreaView.js +33 -0
  163. package/src/mappings/ScrollView.js +30 -0
  164. package/src/mappings/Slider.js +59 -0
  165. package/src/mappings/StarRating.js +42 -0
  166. package/src/mappings/Stepper.js +28 -0
  167. package/src/mappings/Surface.js +13 -0
  168. package/src/mappings/Swiper.js +60 -0
  169. package/src/mappings/SwiperItem.js +8 -0
  170. package/src/mappings/Switch.js +75 -0
  171. package/src/mappings/Text.js +227 -0
  172. package/src/mappings/TextArea.js +52 -0
  173. package/src/mappings/TextField.js +158 -0
  174. package/src/mappings/TextInput.js +208 -0
  175. package/src/mappings/ToggleButton.js +45 -0
  176. package/src/mappings/Touchable.js +12 -0
  177. package/src/mappings/Video.js +74 -0
  178. package/src/mappings/View.js +206 -0
  179. package/src/mappings/WebView.js +18 -0
  180. package/src/styles/DarkTheme.js +26 -0
  181. package/src/styles/DefaultTheme.js +111 -0
  182. package/src/styles/fonts.js +62 -0
  183. package/src/styles/overlay.js +60 -0
  184. package/src/styles/shadow.js +51 -0
  185. package/src/theming.js +3 -0
  186. package/src/utilities.js +54 -0
@@ -25,8 +25,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
25
25
 
26
26
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
27
27
 
28
- function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
29
-
30
28
  const Button = _ref => {
31
29
  let {
32
30
  Icon,
@@ -128,7 +126,7 @@ const Button = _ref => {
128
126
  alignSelf: "stretch",
129
127
  ...margins
130
128
  }
131
- }, /*#__PURE__*/React.createElement(_Touchable.default, _extends({}, rest, {
129
+ }, /*#__PURE__*/React.createElement(_Touchable.default, { ...rest,
132
130
  onPress: onPress,
133
131
  accessibilityState: {
134
132
  disabled
@@ -136,7 +134,7 @@ const Button = _ref => {
136
134
  accessibilityRole: "button",
137
135
  disabled: disabled || loading,
138
136
  style: [styles.button, buttonStyle, innerStyles]
139
- }), /*#__PURE__*/React.createElement(_reactNative.View, {
137
+ }, /*#__PURE__*/React.createElement(_reactNative.View, {
140
138
  style: styles.content
141
139
  }, icon && loading !== true ? /*#__PURE__*/React.createElement(_reactNative.View, {
142
140
  style: iconStyle
@@ -171,5 +169,22 @@ const styles = _reactNative.StyleSheet.create({
171
169
 
172
170
  var _default = (0, _theming.withTheme)(Button);
173
171
 
172
+ exports.default = _default;
173
+ //# sourceMappingURL=DeprecatedButton.js.map
174
+ minWidth: 64,
175
+ borderStyle: "solid"
176
+ },
177
+ content: {
178
+ flexDirection: "row",
179
+ alignItems: "center",
180
+ justifyContent: "center"
181
+ },
182
+ icon: {
183
+ width: _Config.default.buttonIconSize
184
+ }
185
+ });
186
+
187
+ var _default = (0, _theming.withTheme)(Button);
188
+
174
189
  exports.default = _default;
175
190
  //# sourceMappingURL=DeprecatedButton.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["DeprecatedButton.tsx"],"names":["Button","Icon","icon","disabled","type","loading","labelColor","color","colorOverride","children","onPress","elevation","style","theme","colors","disabledOpacity","roundness","typography","rest","backgroundColor","borderColor","textColor","borderWidth","buttonColor","primary","surface","alpha","rgb","string","StyleSheet","hairlineWidth","buttonStyle","borderRadius","textStyle","textAlign","marginVertical","marginHorizontal","iconStyle","styles","marginLeft","marginRight","width","Config","buttonIconSize","margin","marginEnd","marginTop","marginBottom","innerStyles","flatten","margins","alignSelf","button","content","create","minWidth","borderStyle","flexDirection","alignItems","justifyContent"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport {\n ActivityIndicator,\n View,\n Text,\n StyleSheet,\n TouchableHighlightProps,\n StyleProp,\n ViewStyle,\n TextStyle,\n} from \"react-native\";\nimport color from \"color\";\nimport Config from \"./Config\";\nimport Touchable from \"./Touchable\";\nimport Elevation from \"./Elevation\";\nimport { withTheme } from \"../theming\";\n\nimport type { Theme } from \"../styles/DefaultTheme\";\nimport type { IconSlot } from \"../interfaces/Icon\";\n\n/**\n * A button is component that the user can press to trigger an action.\n *\n * <div class=\"screenshots\">\n * <figure>\n * <img src=\"screenshots/button-1.png\" />\n * <figcaption>Text button</figcaption>\n * </figure>\n * <figure>\n * <img src=\"screenshots/button-2.png\" />\n * <figcaption>Outlined button</figcaption>\n * </figure>\n * <figure>\n * <img src=\"screenshots/button-3.png\" />\n * <figcaption>Contained button</figcaption>\n * </figure>\n * </div>\n *\n * ## Usage\n * ```js\n * import * as React from 'react';\n * import { Button } from '@draftbit/ui';\n *\n * const MyComponent = () => (\n * <Button icon=\"add-a-photo\" type=\"solid\" onPress={() => console.log('Pressed')}>\n * Press me\n * </Button>\n * );\n *\n * export default MyComponent;\n * ```\n */\n\ntype Props = {\n disabled?: boolean;\n type?: \"solid\" | \"outline\" | \"text\";\n loading?: boolean;\n icon?: string;\n labelColor?: string;\n color?: string;\n children?: React.ReactNode;\n onPress: () => void;\n elevation?: number;\n style?: StyleProp<ViewStyle>;\n theme: Theme;\n} & TouchableHighlightProps &\n IconSlot;\n\nconst Button: React.FC<Props> = ({\n Icon,\n icon,\n disabled = false,\n type = \"solid\",\n loading = false,\n labelColor,\n color: colorOverride,\n children,\n onPress,\n elevation = 0,\n style,\n theme: { colors, disabledOpacity, roundness, typography },\n ...rest\n}) => {\n let backgroundColor, borderColor, textColor, borderWidth;\n const buttonColor = colorOverride || colors.primary;\n\n if (type === \"solid\") {\n backgroundColor = buttonColor;\n\n if (disabled) {\n textColor = color(colors.surface).alpha(disabledOpacity).rgb().string();\n } else {\n textColor = labelColor || colors.surface;\n }\n } else {\n backgroundColor = \"transparent\";\n\n if (disabled) {\n textColor = color(buttonColor).alpha(disabledOpacity).rgb().string();\n } else {\n textColor = labelColor || buttonColor;\n }\n }\n\n if (type === \"outline\") {\n if (disabled) {\n borderColor = color(buttonColor).alpha(disabledOpacity).rgb().string();\n } else {\n borderColor = buttonColor;\n }\n borderWidth = StyleSheet.hairlineWidth;\n } else {\n borderColor = \"transparent\";\n borderWidth = 0;\n }\n\n const buttonStyle = {\n backgroundColor,\n borderColor,\n borderWidth,\n borderRadius: roundness,\n };\n\n const textStyle: StyleProp<TextStyle> = {\n textAlign: \"center\",\n color: textColor,\n marginVertical: 16,\n marginHorizontal: 16,\n };\n\n const iconStyle = [\n styles.icon,\n {\n marginLeft: 16,\n marginRight: -8,\n width: Config.buttonIconSize,\n },\n ];\n\n const {\n margin,\n marginEnd,\n marginTop,\n marginLeft,\n marginRight,\n marginBottom,\n marginHorizontal,\n marginVertical,\n ...innerStyles\n } = StyleSheet.flatten(style || {});\n\n const margins = {\n margin,\n marginEnd,\n marginTop,\n marginLeft,\n marginRight,\n marginBottom,\n marginHorizontal,\n marginVertical,\n };\n\n return (\n <Elevation style={{ elevation, alignSelf: \"stretch\", ...margins }}>\n <Touchable\n {...rest}\n onPress={onPress}\n accessibilityState={{ disabled }}\n accessibilityRole=\"button\"\n disabled={disabled || loading}\n style={[styles.button, buttonStyle, innerStyles]}\n >\n <View style={styles.content}>\n {icon && loading !== true ? (\n <View style={iconStyle}>\n <Icon\n name={icon}\n size={Config.buttonIconSize}\n color={textColor}\n />\n </View>\n ) : null}\n {loading ? (\n <ActivityIndicator\n size=\"small\"\n color={textColor}\n style={iconStyle}\n />\n ) : null}\n <Text numberOfLines={1} style={[textStyle, typography.button]}>\n {children}\n </Text>\n </View>\n </Touchable>\n </Elevation>\n );\n};\n\nconst styles = StyleSheet.create({\n button: {\n minWidth: 64,\n borderStyle: \"solid\",\n },\n content: {\n flexDirection: \"row\",\n alignItems: \"center\",\n justifyContent: \"center\",\n },\n icon: {\n width: Config.buttonIconSize,\n },\n});\n\nexport default withTheme(Button);\n"]}
1
+ {"version":3,"sources":["DeprecatedButton.js"],"names":["Button","Icon","icon","disabled","type","loading","labelColor","color","colorOverride","children","onPress","elevation","style","theme","colors","disabledOpacity","roundness","typography","rest","backgroundColor","borderColor","textColor","borderWidth","buttonColor","primary","surface","alpha","rgb","string","StyleSheet","hairlineWidth","buttonStyle","borderRadius","textStyle","textAlign","marginVertical","marginHorizontal","iconStyle","styles","marginLeft","marginRight","width","Config","buttonIconSize","margin","marginEnd","marginTop","marginBottom","innerStyles","flatten","margins","React","createElement","Elevation","alignSelf","Touchable","accessibilityState","accessibilityRole","button","View","content","name","size","ActivityIndicator","Text","numberOfLines","create","minWidth","borderStyle","flexDirection","alignItems","justifyContent"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { ActivityIndicator, View, Text, StyleSheet, } from \"react-native\";\nimport color from \"color\";\nimport Config from \"./Config\";\nimport Touchable from \"./Touchable\";\nimport Elevation from \"./Elevation\";\nimport { withTheme } from \"../theming\";\nconst Button = ({ Icon, icon, disabled = false, type = \"solid\", loading = false, labelColor, color: colorOverride, children, onPress, elevation = 0, style, theme: { colors, disabledOpacity, roundness, typography }, ...rest }) => {\n let backgroundColor, borderColor, textColor, borderWidth;\n const buttonColor = colorOverride || colors.primary;\n if (type === \"solid\") {\n backgroundColor = buttonColor;\n if (disabled) {\n textColor = color(colors.surface).alpha(disabledOpacity).rgb().string();\n }\n else {\n textColor = labelColor || colors.surface;\n }\n }\n else {\n backgroundColor = \"transparent\";\n if (disabled) {\n textColor = color(buttonColor).alpha(disabledOpacity).rgb().string();\n }\n else {\n textColor = labelColor || buttonColor;\n }\n }\n if (type === \"outline\") {\n if (disabled) {\n borderColor = color(buttonColor).alpha(disabledOpacity).rgb().string();\n }\n else {\n borderColor = buttonColor;\n }\n borderWidth = StyleSheet.hairlineWidth;\n }\n else {\n borderColor = \"transparent\";\n borderWidth = 0;\n }\n const buttonStyle = {\n backgroundColor,\n borderColor,\n borderWidth,\n borderRadius: roundness,\n };\n const textStyle = {\n textAlign: \"center\",\n color: textColor,\n marginVertical: 16,\n marginHorizontal: 16,\n };\n const iconStyle = [\n styles.icon,\n {\n marginLeft: 16,\n marginRight: -8,\n width: Config.buttonIconSize,\n },\n ];\n const { margin, marginEnd, marginTop, marginLeft, marginRight, marginBottom, marginHorizontal, marginVertical, ...innerStyles } = StyleSheet.flatten(style || {});\n const margins = {\n margin,\n marginEnd,\n marginTop,\n marginLeft,\n marginRight,\n marginBottom,\n marginHorizontal,\n marginVertical,\n };\n return (React.createElement(Elevation, { style: { elevation, alignSelf: \"stretch\", ...margins } },\n React.createElement(Touchable, { ...rest, onPress: onPress, accessibilityState: { disabled }, accessibilityRole: \"button\", disabled: disabled || loading, style: [styles.button, buttonStyle, innerStyles] },\n React.createElement(View, { style: styles.content },\n icon && loading !== true ? (React.createElement(View, { style: iconStyle },\n React.createElement(Icon, { name: icon, size: Config.buttonIconSize, color: textColor }))) : null,\n loading ? (React.createElement(ActivityIndicator, { size: \"small\", color: textColor, style: iconStyle })) : null,\n React.createElement(Text, { numberOfLines: 1, style: [textStyle, typography.button] }, children)))));\n};\nconst styles = StyleSheet.create({\n button: {\n minWidth: 64,\n borderStyle: \"solid\",\n },\n content: {\n flexDirection: \"row\",\n alignItems: \"center\",\n justifyContent: \"center\",\n },\n icon: {\n width: Config.buttonIconSize,\n },\n});\nexport default withTheme(Button);\n"]}
@@ -13,8 +13,6 @@ var _Touchable = _interopRequireDefault(require("./Touchable"));
13
13
 
14
14
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
15
15
 
16
- function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
17
-
18
16
  const getWidth = numColumns => {
19
17
  switch (numColumns) {
20
18
  case 1:
@@ -37,6 +35,20 @@ const Card = _ref => {
37
35
  ...rest
38
36
  } = _ref;
39
37
  const width = getWidth(numColumns);
38
+ return /*#__PURE__*/_react.default.createElement(_Touchable.default, {
39
+ disabled: !onPress,
40
+ onPress: onPress,
41
+ style: [style, {
42
+ width
43
+ }],
44
+ ...rest
45
+ }, children);
46
+ };
47
+
48
+ var _default = (0, _theming.withTheme)(Card);
49
+
50
+ exports.default = _default;
51
+ //# sourceMappingURL=DeprecatedCardWrapper.js.map);
40
52
  return /*#__PURE__*/_react.default.createElement(_Touchable.default, _extends({
41
53
  disabled: !onPress,
42
54
  onPress: onPress,
@@ -1 +1 @@
1
- {"version":3,"sources":["DeprecatedCardWrapper.tsx"],"names":["getWidth","numColumns","Card","children","onPress","style","rest","width"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;;;AAYA,MAAMA,QAAQ,GAAIC,UAAD,IAAwB;AACvC,UAAQA,UAAR;AACE,SAAK,CAAL;AACE,aAAO,KAAP;;AACF,SAAK,CAAL;AACE,aAAO,KAAP;;AACF;AACE,aAAO,MAAP;AANJ;AAQD,CATD;;AAWA,MAAMC,IAAqB,GAAG,QAMxB;AAAA,MANyB;AAC7BD,IAAAA,UAAU,GAAG,CADgB;AAE7BE,IAAAA,QAF6B;AAG7BC,IAAAA,OAH6B;AAI7BC,IAAAA,KAJ6B;AAK7B,OAAGC;AAL0B,GAMzB;AACJ,QAAMC,KAAK,GAAGP,QAAQ,CAACC,UAAD,CAAtB;AACA,sBACE,6BAAC,kBAAD;AACE,IAAA,QAAQ,EAAE,CAACG,OADb;AAEE,IAAA,OAAO,EAAEA,OAFX;AAGE,IAAA,KAAK,EAAE,CAACC,KAAD,EAAQ;AAAEE,MAAAA;AAAF,KAAR;AAHT,KAIMD,IAJN,GAMGH,QANH,CADF;AAUD,CAlBD;;eAoBe,wBAAUD,IAAV,C","sourcesContent":["import React from \"react\";\nimport { withTheme } from \"../theming\";\nimport Touchable from \"./Touchable\";\nimport { StyleProp, ViewStyle } from \"react-native\";\nimport theme from \"../styles/DefaultTheme\";\n\ntype Props = {\n numColumns?: number;\n children?: React.ReactNode;\n onPress?: () => void;\n style?: StyleProp<ViewStyle>;\n theme: typeof theme;\n};\n\nconst getWidth = (numColumns: number) => {\n switch (numColumns) {\n case 1:\n return \"33%\";\n case 2:\n return \"50%\";\n default:\n return \"100%\";\n }\n};\n\nconst Card: React.FC<Props> = ({\n numColumns = 3,\n children,\n onPress,\n style,\n ...rest\n}) => {\n const width = getWidth(numColumns);\n return (\n <Touchable\n disabled={!onPress}\n onPress={onPress}\n style={[style, { width }]}\n {...rest}\n >\n {children}\n </Touchable>\n );\n};\n\nexport default withTheme(Card);\n"]}
1
+ {"version":3,"sources":["DeprecatedCardWrapper.js"],"names":["getWidth","numColumns","Card","children","onPress","style","rest","width","React","createElement","Touchable","disabled"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;AACA,MAAMA,QAAQ,GAAIC,UAAD,IAAgB;AAC7B,UAAQA,UAAR;AACI,SAAK,CAAL;AACI,aAAO,KAAP;;AACJ,SAAK,CAAL;AACI,aAAO,KAAP;;AACJ;AACI,aAAO,MAAP;AANR;AAQH,CATD;;AAUA,MAAMC,IAAI,GAAG,QAA2D;AAAA,MAA1D;AAAED,IAAAA,UAAU,GAAG,CAAf;AAAkBE,IAAAA,QAAlB;AAA4BC,IAAAA,OAA5B;AAAqCC,IAAAA,KAArC;AAA4C,OAAGC;AAA/C,GAA0D;AACpE,QAAMC,KAAK,GAAGP,QAAQ,CAACC,UAAD,CAAtB;AACA,sBAAQO,eAAMC,aAAN,CAAoBC,kBAApB,EAA+B;AAAEC,IAAAA,QAAQ,EAAE,CAACP,OAAb;AAAsBA,IAAAA,OAAO,EAAEA,OAA/B;AAAwCC,IAAAA,KAAK,EAAE,CAACA,KAAD,EAAQ;AAAEE,MAAAA;AAAF,KAAR,CAA/C;AAAmE,OAAGD;AAAtE,GAA/B,EAA6GH,QAA7G,CAAR;AACH,CAHD;;eAIe,wBAAUD,IAAV,C","sourcesContent":["import React from \"react\";\nimport { withTheme } from \"../theming\";\nimport Touchable from \"./Touchable\";\nconst getWidth = (numColumns) => {\n switch (numColumns) {\n case 1:\n return \"33%\";\n case 2:\n return \"50%\";\n default:\n return \"100%\";\n }\n};\nconst Card = ({ numColumns = 3, children, onPress, style, ...rest }) => {\n const width = getWidth(numColumns);\n return (React.createElement(Touchable, { disabled: !onPress, onPress: onPress, style: [style, { width }], ...rest }, children));\n};\nexport default withTheme(Card);\n"]}
@@ -1,2 +1,5 @@
1
1
  "use strict";
2
+ //# sourceMappingURL=Justification.js.maple", {
3
+ value: true
4
+ });
2
5
  //# sourceMappingURL=Justification.js.map
@@ -1,2 +1,5 @@
1
1
  "use strict";
2
+ //# sourceMappingURL=ResizeMode.js.mapodule", {
3
+ value: true
4
+ });
2
5
  //# sourceMappingURL=ResizeMode.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["RadioButtonGroup.ts"],"names":["SEED_DATA","name","tag","category","COMPONENT_TYPES","input","layout","triggers","Triggers","OnValueChange","props","direction","fieldName","handlerPropName","valuePropName","defaultValue"],"mappings":";;;;;;;AAAA;;AAOO,MAAMA,SAAS,GAAG;AACvBC,EAAAA,IAAI,EAAE,oBADiB;AAEvBC,EAAAA,GAAG,EAAE,kBAFkB;AAGvBC,EAAAA,QAAQ,EAAEC,uBAAgBC,KAHH;AAIvBC,EAAAA,MAAM,EAAE,EAJe;AAKvBC,EAAAA,QAAQ,EAAE,CAACC,gBAASC,aAAV,CALa;AAMvBC,EAAAA,KAAK,EAAE;AACLC,IAAAA,SAAS,EAAE,iCADN;AAELC,IAAAA,SAAS,EAAE,gCAAoB;AAC7BC,MAAAA,eAAe,EAAE,eADY;AAE7BC,MAAAA,aAAa,EAAE,OAFc;AAG7BC,MAAAA,YAAY,EAAE;AAHe,KAApB;AAFN;AANgB,CAAlB","sourcesContent":["import {\n COMPONENT_TYPES,\n createFieldNameProp,\n createDirectionProp,\n Triggers,\n} from \"@draftbit/types\";\n\nexport const SEED_DATA = {\n name: \"Radio Button Group\",\n tag: \"RadioButtonGroup\",\n category: COMPONENT_TYPES.input,\n layout: {},\n triggers: [Triggers.OnValueChange],\n props: {\n direction: createDirectionProp(),\n fieldName: createFieldNameProp({\n handlerPropName: \"onValueChange\",\n valuePropName: \"value\",\n defaultValue: \"radioButtonGroupValue\",\n }),\n },\n};\n"]}
1
+ {"version":3,"sources":["RadioButtonGroup.js"],"names":["SEED_DATA","name","tag","category","COMPONENT_TYPES","input","layout","triggers","Triggers","OnValueChange","props","direction","fieldName","handlerPropName","valuePropName","defaultValue"],"mappings":";;;;;;;AAAA;;AACO,MAAMA,SAAS,GAAG;AACrBC,EAAAA,IAAI,EAAE,oBADe;AAErBC,EAAAA,GAAG,EAAE,kBAFgB;AAGrBC,EAAAA,QAAQ,EAAEC,uBAAgBC,KAHL;AAIrBC,EAAAA,MAAM,EAAE,EAJa;AAKrBC,EAAAA,QAAQ,EAAE,CAACC,gBAASC,aAAV,CALW;AAMrBC,EAAAA,KAAK,EAAE;AACHC,IAAAA,SAAS,EAAE,iCADR;AAEHC,IAAAA,SAAS,EAAE,gCAAoB;AAC3BC,MAAAA,eAAe,EAAE,eADU;AAE3BC,MAAAA,aAAa,EAAE,OAFY;AAG3BC,MAAAA,YAAY,EAAE;AAHa,KAApB;AAFR;AANc,CAAlB","sourcesContent":["import { COMPONENT_TYPES, createFieldNameProp, createDirectionProp, Triggers, } from \"@draftbit/types\";\nexport const SEED_DATA = {\n name: \"Radio Button Group\",\n tag: \"RadioButtonGroup\",\n category: COMPONENT_TYPES.input,\n layout: {},\n triggers: [Triggers.OnValueChange],\n props: {\n direction: createDirectionProp(),\n fieldName: createFieldNameProp({\n handlerPropName: \"onValueChange\",\n valuePropName: \"value\",\n defaultValue: \"radioButtonGroupValue\",\n }),\n },\n};\n"]}
@@ -1 +1 @@
1
- {"version":3,"sources":["RadioButtonRow.ts"],"names":["SEED_DATA","name","tag","category","COMPONENT_TYPES","input","layout","props","label","description","required","defaultValue","direction","options","value","color","group","GROUPS","basic","unselectedColor"],"mappings":";;;;;;;AAAA;;AAQO,MAAMA,SAAS,GAAG;AACvBC,EAAAA,IAAI,EAAE,kBADiB;AAEvBC,EAAAA,GAAG,EAAE,gBAFkB;AAGvBC,EAAAA,QAAQ,EAAEC,uBAAgBC,KAHH;AAIvBC,EAAAA,MAAM,EAAE,EAJe;AAKvBC,EAAAA,KAAK,EAAE;AACLC,IAAAA,KAAK,EAAE,2BAAe;AACpBA,MAAAA,KAAK,EAAE,OADa;AAEpBC,MAAAA,WAAW,EAAE,qCAFO;AAGpBC,MAAAA,QAAQ,EAAE,IAHU;AAIpBC,MAAAA,YAAY,EAAE;AAJM,KAAf,CADF;AAOLC,IAAAA,SAAS,EAAE,+BAAmB;AAC5BJ,MAAAA,KAAK,EAAE,WADqB;AAE5BC,MAAAA,WAAW,EACT,8DAH0B;AAI5BI,MAAAA,OAAO,EAAE,CAAC,KAAD,EAAQ,aAAR;AAJmB,KAAnB,CAPN;AAaLC,IAAAA,KAAK,EAAE,2BAAe;AACpBN,MAAAA,KAAK,EAAE,OADa;AAEpBC,MAAAA,WAAW,EAAE,2BAFO;AAGpBE,MAAAA,YAAY,EAAE,IAHM;AAIpBD,MAAAA,QAAQ,EAAE;AAJU,KAAf,CAbF;AAmBLK,IAAAA,KAAK,EAAE,4BAAgB;AACrBC,MAAAA,KAAK,EAAEC,cAAOC,KADO;AAErBT,MAAAA,WAAW,EAAE,sBAFQ;AAGrBE,MAAAA,YAAY,EAAE;AAHO,KAAhB,CAnBF;AAwBLQ,IAAAA,eAAe,EAAE,4BAAgB;AAC/BH,MAAAA,KAAK,EAAEC,cAAOC,KADiB;AAE/BV,MAAAA,KAAK,EAAE,kBAFwB;AAG/BC,MAAAA,WAAW,EAAE,iCAHkB;AAI/BE,MAAAA,YAAY,EAAE;AAJiB,KAAhB;AAxBZ;AALgB,CAAlB","sourcesContent":["import {\n createTextProp,\n createTextEnumProp,\n COMPONENT_TYPES,\n createColorProp,\n GROUPS,\n} from \"@draftbit/types\";\n\nexport const SEED_DATA = {\n name: \"Radio Button Row\",\n tag: \"RadioButtonRow\",\n category: COMPONENT_TYPES.input,\n layout: {},\n props: {\n label: createTextProp({\n label: \"Label\",\n description: \"Label to show with the radio button\",\n required: true,\n defaultValue: \"First Option\",\n }),\n direction: createTextEnumProp({\n label: \"Direction\",\n description:\n \"Whether the checkbox will appear on the left or on the right\",\n options: [\"row\", \"row-reverse\"],\n }),\n value: createTextProp({\n label: \"Value\",\n description: \"Value of the radio button\",\n defaultValue: null,\n required: true,\n }),\n color: createColorProp({\n group: GROUPS.basic,\n description: \"Color for the button\",\n defaultValue: \"primary\",\n }),\n unselectedColor: createColorProp({\n group: GROUPS.basic,\n label: \"Unselected Color\",\n description: \"Unselected Color for the button\",\n defaultValue: \"primary\",\n }),\n },\n};\n"]}
1
+ {"version":3,"sources":["RadioButtonRow.js"],"names":["SEED_DATA","name","tag","category","COMPONENT_TYPES","input","layout","props","label","description","required","defaultValue","direction","options","value","color","group","GROUPS","basic","unselectedColor"],"mappings":";;;;;;;AAAA;;AACO,MAAMA,SAAS,GAAG;AACrBC,EAAAA,IAAI,EAAE,kBADe;AAErBC,EAAAA,GAAG,EAAE,gBAFgB;AAGrBC,EAAAA,QAAQ,EAAEC,uBAAgBC,KAHL;AAIrBC,EAAAA,MAAM,EAAE,EAJa;AAKrBC,EAAAA,KAAK,EAAE;AACHC,IAAAA,KAAK,EAAE,2BAAe;AAClBA,MAAAA,KAAK,EAAE,OADW;AAElBC,MAAAA,WAAW,EAAE,qCAFK;AAGlBC,MAAAA,QAAQ,EAAE,IAHQ;AAIlBC,MAAAA,YAAY,EAAE;AAJI,KAAf,CADJ;AAOHC,IAAAA,SAAS,EAAE,+BAAmB;AAC1BJ,MAAAA,KAAK,EAAE,WADmB;AAE1BC,MAAAA,WAAW,EAAE,8DAFa;AAG1BI,MAAAA,OAAO,EAAE,CAAC,KAAD,EAAQ,aAAR;AAHiB,KAAnB,CAPR;AAYHC,IAAAA,KAAK,EAAE,2BAAe;AAClBN,MAAAA,KAAK,EAAE,OADW;AAElBC,MAAAA,WAAW,EAAE,2BAFK;AAGlBE,MAAAA,YAAY,EAAE,IAHI;AAIlBD,MAAAA,QAAQ,EAAE;AAJQ,KAAf,CAZJ;AAkBHK,IAAAA,KAAK,EAAE,4BAAgB;AACnBC,MAAAA,KAAK,EAAEC,cAAOC,KADK;AAEnBT,MAAAA,WAAW,EAAE,sBAFM;AAGnBE,MAAAA,YAAY,EAAE;AAHK,KAAhB,CAlBJ;AAuBHQ,IAAAA,eAAe,EAAE,4BAAgB;AAC7BH,MAAAA,KAAK,EAAEC,cAAOC,KADe;AAE7BV,MAAAA,KAAK,EAAE,kBAFsB;AAG7BC,MAAAA,WAAW,EAAE,iCAHgB;AAI7BE,MAAAA,YAAY,EAAE;AAJe,KAAhB;AAvBd;AALc,CAAlB","sourcesContent":["import { createTextProp, createTextEnumProp, COMPONENT_TYPES, createColorProp, GROUPS, } from \"@draftbit/types\";\nexport const SEED_DATA = {\n name: \"Radio Button Row\",\n tag: \"RadioButtonRow\",\n category: COMPONENT_TYPES.input,\n layout: {},\n props: {\n label: createTextProp({\n label: \"Label\",\n description: \"Label to show with the radio button\",\n required: true,\n defaultValue: \"First Option\",\n }),\n direction: createTextEnumProp({\n label: \"Direction\",\n description: \"Whether the checkbox will appear on the left or on the right\",\n options: [\"row\", \"row-reverse\"],\n }),\n value: createTextProp({\n label: \"Value\",\n description: \"Value of the radio button\",\n defaultValue: null,\n required: true,\n }),\n color: createColorProp({\n group: GROUPS.basic,\n description: \"Color for the button\",\n defaultValue: \"primary\",\n }),\n unselectedColor: createColorProp({\n group: GROUPS.basic,\n label: \"Unselected Color\",\n description: \"Unselected Color for the button\",\n defaultValue: \"primary\",\n }),\n },\n};\n"]}
@@ -1,2 +1,2 @@
1
1
 
2
- //# sourceMappingURL=Justification.js.map
2
+ //# sourceMappingURL=Justification.js.mapion.js.map
@@ -1,2 +1,2 @@
1
1
 
2
- //# sourceMappingURL=ResizeMode.js.map
2
+ //# sourceMappingURL=ResizeMode.js.mapode.js.map
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@draftbit/core",
3
- "version": "43.6.0-alpha.4",
3
+ "version": "43.6.0",
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": "^43.6.0-alpha.4",
44
+ "@draftbit/types": "^43.6.0",
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": "2231d6e6a17112eef021c3e290474a970a909668"
83
+ "gitHead": "1d9b1785eca92ae88d85fc44df2a604201416ffe"
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);