@draftbit/core 46.4.4-caab07.0 → 46.4.4-cc754a.2

package/src/components/Card.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { StyleSheet, View, Pressable } from "react-native";
+import { StyleSheet, View, Pressable, } from "react-native";
 import Image from "./Image";
 import Surface from "./Surface";
 import { Title, Subtitle, Caption } from "./Typography";
@@ -9,130 +9,49 @@ 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(
-  ({ Icon, icon, theme, onPress }) => {
-    return 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)",
-        },
-      },
-      React.createElement(
-        Pressable,
-        {
-          disabled: !onPress,
-          onPress: onPress,
-          style: ({ pressed }) => {
-            return [
-              {
-                opacity: pressed ? 0.8 : 1,
-              },
-            ];
-          },
-        },
-        React.createElement(Icon, {
-          name: icon,
-          size: ICON_SIZE,
-          color: theme.colors.surface,
-        })
-      )
-    );
-  }
-);
-const Card = ({
-  Icon,
-  image = Config.cardImageUrl,
-  title,
-  subtitle,
-  description,
-  textCentered,
-  icon,
-  aspectRatio = 1.5,
-  elevation = 2,
-  style,
-  onPress,
-  onPressIcon,
-  titleStyle,
-  subtitleStyle,
-  descriptionStyle,
-  theme,
-  children,
-}) => {
-  const {
-    backgroundColor: bgColor,
-    padding,
-    ...styles
-  } = StyleSheet.flatten(style || {});
-  const backgroundColor = bgColor ? bgColor : theme.colors.surface;
-  const innerPadding = padding ? padding : 12;
-  return React.createElement(
-    Surface,
-    { style: [{ elevation, backgroundColor }, styles] },
-    React.createElement(
-      Pressable,
-      {
-        disabled: !onPress,
-        onPress: onPress,
-        style: ({ pressed }) => {
-          return [
-            {
-              opacity: pressed ? 0.8 : 1,
-            },
-          ];
-        },
-      },
-      React.createElement(Image, {
-        style: { aspectRatio },
-        source: typeof image === "string" ? { uri: image } : image,
-        resizeMode: "cover",
-      }),
-      React.createElement(
-        View,
-        { style: { padding: innerPadding } },
-        React.createElement(
-          View,
-          { style: { alignItems: textCentered ? "center" : "flex-start" } },
-          title || (title && title !== "")
-            ? React.createElement(Title, { text: title, style: titleStyle })
-            : null,
-          subtitle || (subtitle && subtitle !== "")
-            ? React.createElement(Subtitle, {
-                text: subtitle,
-                style: subtitleStyle,
-              })
-            : null,
-          description || (description && description !== "")
-            ? React.createElement(
-                View,
-                { style: { marginTop: 4 } },
-                React.createElement(Caption, {
-                  text: description,
-                  style: descriptionStyle,
-                })
-              )
-            : null,
-          children
-        )
-      ),
-      icon
-        ? React.createElement(TopRightCircleIcon, {
-            Icon: Icon,
-            icon: icon,
-            onPress: onPressIcon,
-          })
-        : null
-    )
-  );
+export const TopRightCircleIcon = withTheme(({ Icon, icon, theme, onPress, }) => {
+    return (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)",
+        } },
+        React.createElement(Pressable, { disabled: !onPress, onPress: onPress, style: ({ pressed }) => {
+                return [
+                    {
+                        opacity: pressed ? 0.8 : 1,
+                    },
+                ];
+            } },
+            React.createElement(Icon, { name: icon, size: ICON_SIZE, color: theme.colors.surface }))));
+});
+const Card = ({ Icon, image = Config.cardImageUrl, title, subtitle, description, textCentered, icon, aspectRatio = 1.5, elevation = 2, style, onPress, onPressIcon, titleStyle, subtitleStyle, descriptionStyle, theme, children, }) => {
+    const { backgroundColor: bgColor, padding, ...styles } = StyleSheet.flatten(style || {});
+    const backgroundColor = bgColor ? bgColor : theme.colors.surface;
+    const innerPadding = padding ? padding : 12;
+    return (React.createElement(Surface, { style: [{ elevation, backgroundColor }, styles] },
+        React.createElement(Pressable, { disabled: !onPress, onPress: onPress, style: ({ pressed }) => {
+                return [
+                    {
+                        opacity: pressed ? 0.8 : 1,
+                    },
+                ];
+            } },
+            React.createElement(Image, { style: { aspectRatio }, source: typeof image === "string" ? { uri: image } : image, resizeMode: "cover" }),
+            React.createElement(View, { style: { padding: innerPadding } },
+                React.createElement(View, { style: { alignItems: textCentered ? "center" : "flex-start" } },
+                    title || (title && title !== "") ? (React.createElement(Title, { text: title, style: titleStyle })) : null,
+                    subtitle || (subtitle && subtitle !== "") ? (React.createElement(Subtitle, { text: subtitle, style: subtitleStyle })) : null,
+                    description || (description && description !== "") ? (React.createElement(View, { style: { marginTop: 4 } },
+                        React.createElement(Caption, { text: description, style: descriptionStyle }))) : null,
+                    children)),
+            icon ? (React.createElement(TopRightCircleIcon, { Icon: Icon, icon: icon, onPress: onPressIcon })) : null)));
 };
 export default withTheme(Card);

package/src/components/CardBlock.js

@@ -1,117 +1,54 @@
 import React from "react";
-import { View, Text } from "react-native";
+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 = ({
-  image = Config.cardImageUrl,
-  title,
-  leftDescription,
-  rightDescription,
-  titleCentered,
-  aspectRatio = 1.5,
-  elevation = 2,
-  numColumns = 3,
-  theme: { colors, roundness, typography },
-  style,
-  onPress,
-  ...rest
-}) => {
-  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 React.createElement(
-    Card,
-    { style: style, onPress: onPress, numColumns: numColumns, ...rest },
-    React.createElement(
-      View,
-      { style: { backgroundColor: colors.background } },
-      React.createElement(
-        Elevation,
-        { style: { elevation, borderRadius: roundness } },
-        React.createElement(Image, {
-          style: {
-            borderRadius: roundness,
-            aspectRatio,
-          },
-          source: typeof image === "string" ? { uri: image } : image,
-          resizeMode: "cover",
-        })
-      ),
-      title
-        ? React.createElement(
-            View,
-            {
-              style: {
-                flexDirection: "row",
-                alignItems: "center",
-                justifyContent: titleJustification,
-                marginTop: numColumns === 3 ? 16 : 12,
-              },
-            },
-            React.createElement(
-              Text,
-              {
-                numberOfLines: 1,
-                style: [titleStyle, { color: colors.strong }],
-              },
-              title
-            ),
-            !leftDescription && rightDescription
-              ? React.createElement(
-                  Text,
-                  { style: rightDescriptionStyles },
-                  rightDescription
-                )
-              : null
-          )
-        : null,
-      leftDescription
-        ? React.createElement(
-            View,
-            {
-              style: {
-                flexDirection: "row",
-                justifyContent: "space-between",
-                alignItems: "center",
-                marginTop: numColumns === 3 ? 4 : 4 / 2,
-              },
-            },
-            React.createElement(
-              Text,
-              {
-                numberOfLines: 1,
-                style: [typography.body2, { color: colors.medium }],
-              },
-              leftDescription
-            ),
-            rightDescription
-              ? React.createElement(
-                  Text,
-                  { numberOfLines: 1, style: rightDescriptionStyles },
-                  rightDescription
-                )
-              : null
-          )
-        : null
-    )
-  );
+const CardBlock = ({ image = Config.cardImageUrl, title, leftDescription, rightDescription, titleCentered, aspectRatio = 1.5, elevation = 2, numColumns = 3, theme: { colors, roundness, typography }, style, onPress, ...rest }) => {
+    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 (React.createElement(Card, { style: style, onPress: onPress, numColumns: numColumns, ...rest },
+        React.createElement(View, { style: { backgroundColor: colors.background } },
+            React.createElement(Elevation, { style: { elevation, borderRadius: roundness } },
+                React.createElement(Image, { style: {
+                        borderRadius: roundness,
+                        aspectRatio,
+                    }, source: typeof image === "string" ? { uri: image } : image, resizeMode: "cover" })),
+            title ? (React.createElement(View, { style: {
+                    flexDirection: "row",
+                    alignItems: "center",
+                    justifyContent: titleJustification,
+                    marginTop: numColumns === 3 ? 16 : 12,
+                } },
+                React.createElement(Text, { numberOfLines: 1, style: [titleStyle, { color: colors.strong }] }, title),
+                !leftDescription && rightDescription ? (React.createElement(Text, { style: rightDescriptionStyles }, rightDescription)) : null)) : null,
+            leftDescription ? (React.createElement(View, { style: {
+                    flexDirection: "row",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                    marginTop: numColumns === 3 ? 4 : 4 / 2,
+                } },
+                React.createElement(Text, { numberOfLines: 1, style: [typography.body2, { color: colors.medium }] }, leftDescription),
+                rightDescription ? (React.createElement(Text, { numberOfLines: 1, style: rightDescriptionStyles }, rightDescription)) : null)) : null)));
 };
 export default withTheme(CardBlock);

package/src/components/CardContainer.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { View, Text } from "react-native";
+import { View, Text, } from "react-native";
 import color from "color";
 import Image from "./Image";
 import Card from "./DeprecatedCardWrapper";
@@ -8,144 +8,62 @@ 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 = ({
-  Icon,
-  icon,
-  image = Config.cardImageUrl,
-  title,
-  leftDescription,
-  rightDescription,
-  textCentered,
-  aspectRatio = 1.5,
-  elevation = 2,
-  numColumns = 3,
-  theme: { colors, roundness, typography },
-  style,
-  onPress,
-  ...rest
-}) => {
-  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 React.createElement(
-    Card,
-    { style: style, onPress: onPress, numColumns: numColumns, ...rest },
-    React.createElement(
-      Elevation,
-      { style: { elevation, borderRadius: roundness } },
-      React.createElement(
-        View,
-        {
-          style: {
-            borderRadius: roundness,
-            overflow: "hidden",
-            backgroundColor: colors.surface,
-          },
-        },
-        React.createElement(Image, {
-          style: { aspectRatio },
-          source: typeof image === "string" ? { uri: image } : image,
-          resizeMode: "cover",
-        }),
-        React.createElement(
-          View,
-          {
-            style: {
-              padding: numColumns === 1 ? 8 : 16,
-            },
-          },
-          title
-            ? React.createElement(
-                View,
-                {
-                  style: {
-                    flexDirection: "row",
-                    alignItems: "center",
-                    justifyContent: textJustification,
-                  },
-                },
-                React.createElement(
-                  Text,
-                  {
-                    numberOfLines: 1,
-                    style: [titleStyle, { color: colors.strong }],
-                  },
-                  title
-                )
-              )
-            : null,
-          leftDescription
-            ? React.createElement(
-                View,
-                {
-                  style: {
-                    flexDirection: "row",
-                    justifyContent: textJustification,
-                    alignItems: "center",
-                    marginTop: numColumns === 3 ? 4 : 4 / 2,
-                  },
-                },
-                React.createElement(
-                  Text,
-                  {
-                    numberOfLines: 1,
-                    style: [typography.body2, { color: colors.medium }],
-                  },
-                  leftDescription
-                ),
-                rightDescription
-                  ? React.createElement(
-                      Text,
-                      {
-                        numberOfLines: 1,
-                        style: [typography.subtitle2, { color: colors.light }],
-                      },
-                      rightDescription
-                    )
-                  : null
-              )
-            : null
-        ),
-        icon
-          ? 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(),
-                },
-              },
-              React.createElement(Icon, {
-                name: icon,
-                size: Config.cardIconSize,
-                color: colors.surface,
-              })
-            )
-          : null
-      )
-    )
-  );
+const CardContainer = ({ Icon, icon, image = Config.cardImageUrl, title, leftDescription, rightDescription, textCentered, aspectRatio = 1.5, elevation = 2, numColumns = 3, theme: { colors, roundness, typography }, style, onPress, ...rest }) => {
+    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 (React.createElement(Card, { style: style, onPress: onPress, numColumns: numColumns, ...rest },
+        React.createElement(Elevation, { style: { elevation, borderRadius: roundness } },
+            React.createElement(View, { style: {
+                    borderRadius: roundness,
+                    overflow: "hidden",
+                    backgroundColor: colors.surface,
+                } },
+                React.createElement(Image, { style: { aspectRatio }, source: typeof image === "string" ? { uri: image } : image, resizeMode: "cover" }),
+                React.createElement(View, { style: {
+                        padding: numColumns === 1 ? 8 : 16,
+                    } },
+                    title ? (React.createElement(View, { style: {
+                            flexDirection: "row",
+                            alignItems: "center",
+                            justifyContent: textJustification,
+                        } },
+                        React.createElement(Text, { numberOfLines: 1, style: [titleStyle, { color: colors.strong }] }, title))) : null,
+                    leftDescription ? (React.createElement(View, { style: {
+                            flexDirection: "row",
+                            justifyContent: textJustification,
+                            alignItems: "center",
+                            marginTop: numColumns === 3 ? 4 : 4 / 2,
+                        } },
+                        React.createElement(Text, { numberOfLines: 1, style: [typography.body2, { color: colors.medium }] }, leftDescription),
+                        rightDescription ? (React.createElement(Text, { numberOfLines: 1, style: [typography.subtitle2, { color: colors.light }] }, rightDescription)) : null)) : null),
+                icon ? (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(),
+                    } },
+                    React.createElement(Icon, { name: icon, size: Config.cardIconSize, color: colors.surface }))) : null))));
 };
 export default withTheme(CardContainer);