@draftbit/core 47.0.0-eae99e.2 → 47.0.1-17098e.2

package/src/components/Button.tsx

@@ -1,11 +1,14 @@
-import * as React from "react";
+import React, { useCallback } from "react";
 import {
   Text,
   Pressable,
+  PressableProps,
+  PressableStateCallbackType,
   Platform,
   StyleSheet,
+  StyleProp,
   TextStyle,
-  PressableProps,
+  ViewStyle,
   ActivityIndicator,
 } from "react-native";
 
@@ -27,6 +30,12 @@ type BaseProps = {
   loading: boolean;
   style?: TextStyle;
   onPress: () => void;
+  onLongPress?: () => void;
+  activeOpacity?: number;
+  disabledOpacity?: number;
+  delayLongPress?: number;
+  hitSlop?: number;
+  pressRetentionOffset?: number;
   icon?: string;
 } & PressableProps &
   IconSlot;
@@ -37,16 +46,29 @@ type Props = {
   loading: boolean;
   style?: TextStyle;
   onPress: () => void;
+  onLongPress?: () => void;
+  activeOpacity?: number;
+  disabledOpacity?: number;
+  delayLongPress?: number;
+  hitSlop?: number;
+  pressRetentionOffset?: number;
   icon?: string;
   theme: Theme;
 } & PressableProps &
   IconSlot;
 
+export type StyleType = (
+  state: PressableStateCallbackType
+) => StyleProp<ViewStyle>;
+
 function Base({
   Icon,
   icon,
   title,
   onPress,
+  onLongPress,
+  activeOpacity,
+  disabledOpacity,
   loading,
   disabled,
   style,
@@ -89,19 +111,31 @@ function Base({
     buttonStyles.justifyContent = "flex-end";
   }
 
+  const getOpacity = useCallback(
+    (pressed: boolean) => {
+      if (disabled) {
+        return disabledOpacity;
+      } else {
+        if (pressed) return activeOpacity;
+        else return 1;
+      }
+    },
+    [activeOpacity, disabled, disabledOpacity]
+  );
+  const _style = useCallback<StyleType>(
+    ({ pressed }) => [
+      buttonStyles as ViewStyle,
+      { opacity: getOpacity(pressed) },
+    ],
+    [getOpacity, buttonStyles]
+  );
+
   return (
     <Pressable
       onPress={onPress}
+      onLongPress={onLongPress}
       disabled={disabled || loading}
-      style={({ pressed }) => {
-        return [
-          styles.base,
-          {
-            opacity: pressed || disabled ? 0.75 : 1,
-          },
-          buttonStyles,
-        ];
-      }}
+      style={(styles.base, _style)}
       {...props}
     >
       {loading ? (

package/src/components/Card.js

@@ -0,0 +1,57 @@
+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(({ 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/Card.tsx

@@ -0,0 +1,161 @@
+import React from "react";
+import {
+  StyleSheet,
+  View,
+  ImageSourcePropType,
+  StyleProp,
+  ViewStyle,
+  TextStyle,
+  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";
+
+import type { Theme } from "../styles/DefaultTheme";
+import type { IconSlot } from "../interfaces/Icon";
+
+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,
+  }: {
+    icon: string;
+    theme: Theme;
+    onPress?: () => void;
+  } & IconSlot) => {
+    return (
+      <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)",
+        }}
+      >
+        <Pressable
+          disabled={!onPress}
+          onPress={onPress}
+          style={({ pressed }) => {
+            return [
+              {
+                opacity: pressed ? 0.8 : 1,
+              },
+            ];
+          }}
+        >
+          <Icon name={icon} size={ICON_SIZE} color={theme.colors.surface} />
+        </Pressable>
+      </Surface>
+    );
+  }
+);
+
+type Props = {
+  image?: string | ImageSourcePropType;
+  title?: string;
+  subtitle?: string;
+  description?: string;
+  textCentered: boolean;
+  icon?: string;
+  aspectRatio?: number;
+  elevation?: number;
+  numColumns?: number;
+  theme: Theme;
+  titleStyle?: StyleProp<TextStyle>;
+  subtitleStyle?: StyleProp<TextStyle>;
+  descriptionStyle?: StyleProp<TextStyle>;
+  style?: StyleProp<ViewStyle>;
+  onPress?: () => void;
+  onPressIcon?: () => void;
+  children?: React.ReactNode;
+} & IconSlot;
+
+const Card: React.FC<React.PropsWithChildren<Props>> = ({
+  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 (
+    <Surface style={[{ elevation, backgroundColor }, styles]}>
+      <Pressable
+        disabled={!onPress}
+        onPress={onPress}
+        style={({ pressed }) => {
+          return [
+            {
+              opacity: pressed ? 0.8 : 1,
+            },
+          ];
+        }}
+      >
+        <Image
+          style={{ aspectRatio }}
+          source={typeof image === "string" ? { uri: image } : image}
+          resizeMode="cover"
+        />
+        <View style={{ padding: innerPadding }}>
+          <View style={{ alignItems: textCentered ? "center" : "flex-start" }}>
+            {title || (title && title !== "") ? (
+              <Title text={title} style={titleStyle} />
+            ) : null}
+            {subtitle || (subtitle && subtitle !== "") ? (
+              <Subtitle text={subtitle} style={subtitleStyle} />
+            ) : null}
+            {description || (description && description !== "") ? (
+              <View style={{ marginTop: 4 }}>
+                <Caption text={description} style={descriptionStyle} />
+              </View>
+            ) : null}
+            {children}
+          </View>
+        </View>
+        {icon ? (
+          <TopRightCircleIcon Icon={Icon} icon={icon} onPress={onPressIcon} />
+        ) : null}
+      </Pressable>
+    </Surface>
+  );
+};
+
+export default withTheme(Card);

package/src/components/CardBlock.js

@@ -0,0 +1,54 @@
+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 = ({ 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/CardBlock.tsx

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

package/src/components/CardContainer.js

@@ -0,0 +1,69 @@
+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 = ({ 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);