@draftbit/core 47.0.0-eae99e.2 → 47.0.1-0e56b5.2

package/lib/module/components/AvatarEdit.js

@@ -0,0 +1,49 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
+import * as React from "react";
+import { View } from "react-native";
+import Touchable from "./Touchable";
+import CircleImage from "./CircleImage";
+import { withTheme } from "../theming";
+const AvatarEdit = _ref => {
+  let {
+    Icon,
+    image,
+    size = 80,
+    onPress = () => {},
+    style,
+    theme,
+    ...rest
+  } = _ref;
+  const colorStyles = {
+    editBackgroundColor: theme.colors.primary,
+    editIconColor: theme.colors.surface,
+    editBorderColor: theme.colors.surface
+  };
+  const dimensions = {
+    width: size,
+    height: size
+  };
+  return /*#__PURE__*/React.createElement(View, _extends({
+    style: [style, dimensions]
+  }, rest), /*#__PURE__*/React.createElement(Touchable, {
+    onPress: onPress
+  }, /*#__PURE__*/React.createElement(CircleImage, {
+    source: image,
+    size: size
+  }), /*#__PURE__*/React.createElement(View, {
+    style: {
+      position: "absolute",
+      top: -3,
+      right: -3,
+      borderColor: colorStyles.editBorderColor,
+      backgroundColor: colorStyles.editBackgroundColor,
+      borderRadius: size * (3 / 16),
+      padding: size * (3 / 32)
+    }
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "MaterialIcons/edit",
+    color: colorStyles.editIconColor,
+    size: size * (3 / 16)
+  }))));
+};
+export default withTheme(AvatarEdit);

package/lib/module/components/Banner.js

@@ -154,5 +154,4 @@ const styles = StyleSheet.create({
     margin: 8
   }
 });
-export default withTheme(Banner);
-//# sourceMappingURL=Banner.js.map
+export default withTheme(Banner);

package/lib/module/components/Button.js

@@ -1,5 +1,5 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
-import * as React from "react";
+import React, { useCallback } from "react";
 import { Text, Pressable, Platform, StyleSheet, ActivityIndicator } from "react-native";
 import { withTheme } from "../theming";
 const CONSTANTS = {
@@ -14,6 +14,9 @@ function Base(_ref) {
     icon,
     title,
     onPress,
+    onLongPress,
+    activeOpacity,
+    disabledOpacity,
     loading,
     disabled,
     style,
@@ -52,17 +55,26 @@ function Base(_ref) {
   if (textAlign === "right") {
     buttonStyles.justifyContent = "flex-end";
   }
+  const getOpacity = useCallback(pressed => {
+    if (disabled) {
+      return disabledOpacity;
+    } else {
+      if (pressed) return activeOpacity;else return 1;
+    }
+  }, [activeOpacity, disabled, disabledOpacity]);
+  const _style = useCallback(_ref2 => {
+    let {
+      pressed
+    } = _ref2;
+    return [buttonStyles, {
+      opacity: getOpacity(pressed)
+    }];
+  }, [getOpacity, buttonStyles]);
   return /*#__PURE__*/React.createElement(Pressable, _extends({
     onPress: onPress,
+    onLongPress: onLongPress,
     disabled: disabled || loading,
-    style: _ref2 => {
-      let {
-        pressed
-      } = _ref2;
-      return [styles.base, {
-        opacity: pressed || disabled ? 0.75 : 1
-      }, buttonStyles];
-    }
+    style: (styles.base, _style)
   }, props), loading ? /*#__PURE__*/React.createElement(ActivityIndicator, {
     size: "small",
     color: color,
@@ -116,8 +128,10 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "center",
-    minHeight: CONSTANTS.baseHeight,
-    paddingHorizontal: 12,
+    paddingTop: CONSTANTS.padding,
+    paddingLeft: CONSTANTS.padding,
+    paddingRight: CONSTANTS.padding,
+    paddingBottom: CONSTANTS.padding,
     fontFamily: "System",
     fontWeight: "700",
     ...Platform.select({
@@ -131,11 +145,6 @@ const styles = StyleSheet.create({
     backgroundColor: "transparent",
     borderWidth: 1
   },
-  bare: {
-    backgroundColor: "transparent",
-    padding: 0,
-    minHeight: undefined
-  },
   loading: {
     marginRight: 6
   },
@@ -153,5 +162,4 @@ const styles = StyleSheet.create({
       }
     })
   }
-});
-//# sourceMappingURL=Button.js.map
+});

package/lib/module/components/Card.js

@@ -0,0 +1,128 @@
+import React from "react";
+import { StyleSheet, View, Pressable } from "react-native";
+import Image from "./Image";
+import Surface from "./Surface";
+import { Title, Subtitle, Caption } from "./Typography";
+import { withTheme } from "../theming";
+import Config from "./Config";
+const ICON_SIZE = Config.cardIconSize;
+const ICON_CONTAINER_SIZE = Config.cardIconSize * 2;
+const ICON_CONTAINER_PADDING = Config.cardIconSize / 2 - 1;
+const ICON_ELEVATION = Config.cardIconElevation;
+export const TopRightCircleIcon = withTheme(_ref => {
+  let {
+    Icon,
+    icon,
+    theme,
+    onPress
+  } = _ref;
+  return /*#__PURE__*/React.createElement(Surface, {
+    style: {
+      justifyContent: "center",
+      alignItems: "center",
+      elevation: ICON_ELEVATION,
+      position: "absolute",
+      top: 12,
+      right: 12,
+      width: ICON_CONTAINER_SIZE,
+      height: ICON_CONTAINER_SIZE,
+      padding: ICON_CONTAINER_PADDING,
+      borderRadius: ICON_CONTAINER_SIZE,
+      backgroundColor: "rgba(0, 0, 0, 0.1)"
+    }
+  }, /*#__PURE__*/React.createElement(Pressable, {
+    disabled: !onPress,
+    onPress: onPress,
+    style: _ref2 => {
+      let {
+        pressed
+      } = _ref2;
+      return [{
+        opacity: pressed ? 0.8 : 1
+      }];
+    }
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: icon,
+    size: ICON_SIZE,
+    color: theme.colors.surface
+  })));
+});
+const Card = _ref3 => {
+  let {
+    Icon,
+    image = Config.cardImageUrl,
+    title,
+    subtitle,
+    description,
+    textCentered,
+    icon,
+    aspectRatio = 1.5,
+    elevation = 2,
+    style,
+    onPress,
+    onPressIcon,
+    titleStyle,
+    subtitleStyle,
+    descriptionStyle,
+    theme,
+    children
+  } = _ref3;
+  const {
+    backgroundColor: bgColor,
+    padding,
+    ...styles
+  } = StyleSheet.flatten(style || {});
+  const backgroundColor = bgColor ? bgColor : theme.colors.surface;
+  const innerPadding = padding ? padding : 12;
+  return /*#__PURE__*/React.createElement(Surface, {
+    style: [{
+      elevation,
+      backgroundColor
+    }, styles]
+  }, /*#__PURE__*/React.createElement(Pressable, {
+    disabled: !onPress,
+    onPress: onPress,
+    style: _ref4 => {
+      let {
+        pressed
+      } = _ref4;
+      return [{
+        opacity: pressed ? 0.8 : 1
+      }];
+    }
+  }, /*#__PURE__*/React.createElement(Image, {
+    style: {
+      aspectRatio
+    },
+    source: typeof image === "string" ? {
+      uri: image
+    } : image,
+    resizeMode: "cover"
+  }), /*#__PURE__*/React.createElement(View, {
+    style: {
+      padding: innerPadding
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    style: {
+      alignItems: textCentered ? "center" : "flex-start"
+    }
+  }, title || title && title !== "" ? /*#__PURE__*/React.createElement(Title, {
+    text: title,
+    style: titleStyle
+  }) : null, subtitle || subtitle && subtitle !== "" ? /*#__PURE__*/React.createElement(Subtitle, {
+    text: subtitle,
+    style: subtitleStyle
+  }) : null, description || description && description !== "" ? /*#__PURE__*/React.createElement(View, {
+    style: {
+      marginTop: 4
+    }
+  }, /*#__PURE__*/React.createElement(Caption, {
+    text: description,
+    style: descriptionStyle
+  })) : null, children)), icon ? /*#__PURE__*/React.createElement(TopRightCircleIcon, {
+    Icon: Icon,
+    icon: icon,
+    onPress: onPressIcon
+  }) : null));
+};
+export default withTheme(Card);

package/lib/module/components/CardBlock.js

@@ -0,0 +1,98 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
+import React from "react";
+import { View, Text } from "react-native";
+import Image from "./Image";
+import Card from "./DeprecatedCardWrapper";
+import Elevation from "./Elevation";
+import { withTheme } from "../theming";
+import Config from "./Config";
+const CardBlock = _ref => {
+  let {
+    image = Config.cardImageUrl,
+    title,
+    leftDescription,
+    rightDescription,
+    titleCentered,
+    aspectRatio = 1.5,
+    elevation = 2,
+    numColumns = 3,
+    theme: {
+      colors,
+      roundness,
+      typography
+    },
+    style,
+    onPress,
+    ...rest
+  } = _ref;
+  let titleJustification;
+  let titleStyle;
+  if (titleCentered && !leftDescription && !rightDescription) {
+    titleJustification = "center";
+  } else {
+    titleJustification = "space-between";
+  }
+  if (numColumns === 1) {
+    titleStyle = typography.button;
+  } else if (numColumns === 2) {
+    titleStyle = typography.headline6;
+  } else {
+    titleStyle = typography.headline5;
+  }
+  const rightDescriptionStyles = [typography.subtitle2, {
+    color: colors.light
+  }];
+  return /*#__PURE__*/React.createElement(Card, _extends({
+    style: style,
+    onPress: onPress,
+    numColumns: numColumns
+  }, rest), /*#__PURE__*/React.createElement(View, {
+    style: {
+      backgroundColor: colors.background
+    }
+  }, /*#__PURE__*/React.createElement(Elevation, {
+    style: {
+      elevation,
+      borderRadius: roundness
+    }
+  }, /*#__PURE__*/React.createElement(Image, {
+    style: {
+      borderRadius: roundness,
+      aspectRatio
+    },
+    source: typeof image === "string" ? {
+      uri: image
+    } : image,
+    resizeMode: "cover"
+  })), title ? /*#__PURE__*/React.createElement(View, {
+    style: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: titleJustification,
+      marginTop: numColumns === 3 ? 16 : 12
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    numberOfLines: 1,
+    style: [titleStyle, {
+      color: colors.strong
+    }]
+  }, title), !leftDescription && rightDescription ? /*#__PURE__*/React.createElement(Text, {
+    style: rightDescriptionStyles
+  }, rightDescription) : null) : null, leftDescription ? /*#__PURE__*/React.createElement(View, {
+    style: {
+      flexDirection: "row",
+      justifyContent: "space-between",
+      alignItems: "center",
+      marginTop: numColumns === 3 ? 4 : 4 / 2
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    numberOfLines: 1,
+    style: [typography.body2, {
+      color: colors.medium
+    }]
+  }, leftDescription), rightDescription ? /*#__PURE__*/React.createElement(Text, {
+    numberOfLines: 1,
+    style: rightDescriptionStyles
+  }, rightDescription) : null) : null));
+};
+export default withTheme(CardBlock);

package/lib/module/components/CardContainer.js

@@ -0,0 +1,121 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
+import React from "react";
+import { View, Text } from "react-native";
+import color from "color";
+import Image from "./Image";
+import Card from "./DeprecatedCardWrapper";
+import Elevation from "./Elevation";
+import { withTheme } from "../theming";
+import Config from "./Config";
+const ICON_CONTAINER_SIZE = Config.cardIconSize * 2;
+const ICON_CONTAINER_PADDING = Config.cardIconSize / 2 - 1;
+const CardContainer = _ref => {
+  let {
+    Icon,
+    icon,
+    image = Config.cardImageUrl,
+    title,
+    leftDescription,
+    rightDescription,
+    textCentered,
+    aspectRatio = 1.5,
+    elevation = 2,
+    numColumns = 3,
+    theme: {
+      colors,
+      roundness,
+      typography
+    },
+    style,
+    onPress,
+    ...rest
+  } = _ref;
+  let textJustification;
+  let titleStyle;
+  if (textCentered && !rightDescription) {
+    textJustification = "center";
+  } else {
+    textJustification = "space-between";
+  }
+  switch (numColumns) {
+    case 2:
+      titleStyle = typography.headline6;
+      break;
+    case 3:
+      titleStyle = typography.headline5;
+      break;
+  }
+  return /*#__PURE__*/React.createElement(Card, _extends({
+    style: style,
+    onPress: onPress,
+    numColumns: numColumns
+  }, rest), /*#__PURE__*/React.createElement(Elevation, {
+    style: {
+      elevation,
+      borderRadius: roundness
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    style: {
+      borderRadius: roundness,
+      overflow: "hidden",
+      backgroundColor: colors.surface
+    }
+  }, /*#__PURE__*/React.createElement(Image, {
+    style: {
+      aspectRatio
+    },
+    source: typeof image === "string" ? {
+      uri: image
+    } : image,
+    resizeMode: "cover"
+  }), /*#__PURE__*/React.createElement(View, {
+    style: {
+      padding: numColumns === 1 ? 8 : 16
+    }
+  }, title ? /*#__PURE__*/React.createElement(View, {
+    style: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: textJustification
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    numberOfLines: 1,
+    style: [titleStyle, {
+      color: colors.strong
+    }]
+  }, title)) : null, leftDescription ? /*#__PURE__*/React.createElement(View, {
+    style: {
+      flexDirection: "row",
+      justifyContent: textJustification,
+      alignItems: "center",
+      marginTop: numColumns === 3 ? 4 : 4 / 2
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    numberOfLines: 1,
+    style: [typography.body2, {
+      color: colors.medium
+    }]
+  }, leftDescription), rightDescription ? /*#__PURE__*/React.createElement(Text, {
+    numberOfLines: 1,
+    style: [typography.subtitle2, {
+      color: colors.light
+    }]
+  }, rightDescription) : null) : null), icon ? /*#__PURE__*/React.createElement(Elevation, {
+    style: {
+      elevation: Config.cardIconElevation,
+      position: "absolute",
+      top: 12,
+      right: 12,
+      width: ICON_CONTAINER_SIZE,
+      height: ICON_CONTAINER_SIZE,
+      padding: ICON_CONTAINER_PADDING,
+      borderRadius: ICON_CONTAINER_SIZE,
+      backgroundColor: color(colors.strong).alpha(Config.cardIconBackgroundOpacity).rgb().string()
+    }
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: icon,
+    size: Config.cardIconSize,
+    color: colors.surface
+  })) : null)));
+};
+export default withTheme(CardContainer);

package/lib/module/components/CardContainerRating.js

@@ -0,0 +1,125 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
+import React from "react";
+import { View, Text } from "react-native";
+import color from "color";
+import Image from "./Image";
+import Card from "./DeprecatedCardWrapper";
+import Elevation from "./Elevation";
+import StarRating from "./StarRating";
+import { withTheme } from "../theming";
+import Config from "./Config";
+const ICON_CONTAINER_SIZE = Config.cardIconSize * 2;
+const ICON_CONTAINER_PADDING = Config.cardIconSize / 2 - 1;
+const CardContainerRating = _ref => {
+  let {
+    Icon,
+    icon,
+    image = Config.cardImageUrl,
+    title,
+    leftDescription,
+    rightDescription,
+    rating,
+    aspectRatio = 1.5,
+    elevation = 2,
+    numColumns = 3,
+    theme: {
+      colors,
+      roundness,
+      typography
+    },
+    style,
+    onPress,
+    ...rest
+  } = _ref;
+  let titleStyle, rightDescriptionStyle;
+  switch (numColumns) {
+    case 2:
+      titleStyle = typography.headline6;
+      rightDescriptionStyle = typography.body2;
+      break;
+    case 3:
+      titleStyle = typography.headline5;
+      rightDescriptionStyle = typography.caption;
+      break;
+  }
+  return /*#__PURE__*/React.createElement(Card, _extends({
+    style: style,
+    onPress: onPress,
+    numColumns: numColumns
+  }, rest), /*#__PURE__*/React.createElement(Elevation, {
+    style: {
+      elevation,
+      borderRadius: roundness
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    style: {
+      borderRadius: roundness,
+      overflow: "hidden",
+      backgroundColor: colors.background
+      //background color is needed for bug on android 9 - https://github.com/facebook/react-native/issues/25093
+    }
+  }, /*#__PURE__*/React.createElement(Image, {
+    style: {
+      aspectRatio
+    },
+    source: typeof image === "string" ? {
+      uri: image
+    } : image,
+    resizeMode: "cover"
+  }), /*#__PURE__*/React.createElement(View, {
+    style: {
+      padding: numColumns === 1 ? 8 : 16
+    }
+  }, title ? /*#__PURE__*/React.createElement(View, {
+    style: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between"
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    numberOfLines: 1,
+    style: [titleStyle, {
+      color: colors.strong
+    }]
+  }, title)) : null, leftDescription ? /*#__PURE__*/React.createElement(Text, {
+    numberOfLines: 1,
+    style: [typography.body2, {
+      color: colors.medium,
+      marginTop: numColumns === 3 ? 4 : 4 / 2
+    }]
+  }, leftDescription) : null, /*#__PURE__*/React.createElement(View, {
+    style: {
+      flexDirection: "row",
+      justifyContent: "space-between",
+      alignItems: "center",
+      marginTop: numColumns === 3 ? 16 : 12
+    }
+  }, /*#__PURE__*/React.createElement(StarRating, {
+    Icon: Icon,
+    starSize: numColumns === 1 ? 10 : 16,
+    rating: rating
+  }), /*#__PURE__*/React.createElement(Text, {
+    style: [rightDescriptionStyle, {
+      color: colors.medium,
+      marginLeft: 8
+    }],
+    numberOfLines: 1
+  }, rightDescription))), icon ? /*#__PURE__*/React.createElement(Elevation, {
+    style: {
+      elevation: Config.cardIconElevation,
+      position: "absolute",
+      top: 12,
+      right: 12,
+      width: ICON_CONTAINER_SIZE,
+      height: ICON_CONTAINER_SIZE,
+      padding: ICON_CONTAINER_PADDING,
+      borderRadius: ICON_CONTAINER_SIZE,
+      backgroundColor: color(colors.strong).alpha(Config.cardIconBackgroundOpacity).rgb().string()
+    }
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: icon,
+    size: Config.cardIconSize,
+    color: colors.surface
+  })) : null)));
+};
+export default withTheme(CardContainerRating);

package/lib/module/components/CardContainerShortImage.js

@@ -0,0 +1,76 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
+import React from "react";
+import { View, Text } from "react-native";
+import Image from "./Image";
+import Card from "./DeprecatedCardWrapper";
+import Elevation from "./Elevation";
+import { withTheme } from "../theming";
+import Config from "./Config";
+const CardContainerShortImage = _ref => {
+  let {
+    image = Config.squareImageUrl,
+    title,
+    subtitle,
+    mode = "left",
+    aspectRatio = 1,
+    elevation = 2,
+    theme: {
+      colors,
+      roundness,
+      typography
+    },
+    style,
+    onPress,
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/React.createElement(Card, _extends({
+    style: style,
+    onPress: onPress
+  }, rest), /*#__PURE__*/React.createElement(Elevation, {
+    style: {
+      elevation,
+      borderRadius: roundness
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    style: {
+      overflow: "hidden",
+      flexDirection: "row",
+      justifyContent: mode === "right" ? "space-between" : "flex-start",
+      borderRadius: roundness
+    }
+  }, mode === "left" && /*#__PURE__*/React.createElement(Image, {
+    style: {
+      aspectRatio
+    },
+    source: typeof image === "string" ? {
+      uri: image
+    } : image,
+    resizeMode: "cover"
+  }), /*#__PURE__*/React.createElement(View, {
+    style: {
+      padding: 16,
+      backgroundColor: colors.surface,
+      flex: 1
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    numberOfLines: 1,
+    style: [typography.headline5, {
+      color: colors.strong
+    }]
+  }, title), subtitle ? /*#__PURE__*/React.createElement(Text, {
+    numberOfLines: 1,
+    style: [typography.body2, {
+      color: colors.medium,
+      marginTop: 4
+    }]
+  }, subtitle) : null), mode === "right" && /*#__PURE__*/React.createElement(Image, {
+    style: {
+      aspectRatio
+    },
+    source: typeof image === "string" ? {
+      uri: image
+    } : image,
+    resizeMode: "cover"
+  }))));
+};
+export default withTheme(CardContainerShortImage);