@ovotech/element-native 5.5.0 → 5.7.0

package/dist/components/Card/Card.d.ts

@@ -8,13 +8,16 @@ export type CardProps = ViewProps & {
         height?: number | string;
     };
     onPress?: () => void;
+    onSelect?: () => void;
     children?: ReactNode;
 };
 export type CardFlags = {
-    hasBgImage: boolean;
-    tappable: boolean;
+    hasBackground: boolean;
+    hasBgImage?: boolean;
+    pressable: boolean;
+    selectable: boolean;
     isDefault: boolean;
     isOutline: boolean;
 };
-export declare const getCardFlags: (props: Pick<CardProps, "background" | "onPress" | "displayStyle">) => CardFlags;
-export declare const Card: ({ children, displayStyle, background, onPress, ...rest }: CardProps) => import("react/jsx-runtime").JSX.Element;
+export declare const getCardFlags: (props: Pick<CardProps, "background" | "onPress" | "onSelect" | "displayStyle">) => CardFlags;
+export declare const Card: ({ children, displayStyle, background, onPress, onSelect, ...rest }: CardProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Card/Card.js

@@ -19,12 +19,21 @@ const hooks_1 = require("../../hooks");
 const styled_native_1 = require("../../styled.native");
 const Card_styles_1 = require("./Card.styles");
 const getCardFlags = (props) => {
-    const { background, onPress, displayStyle } = props;
-    const hasBgImage = !!background && typeof background !== 'string';
-    const tappable = Boolean(onPress);
+    const { background, onPress, onSelect, displayStyle } = props;
+    const hasBackground = !!background;
+    const hasBgImage = hasBackground && typeof background !== 'string';
+    const selectable = Boolean(onSelect) && !onPress;
+    const pressable = Boolean(onPress) && !onSelect;
     const isDefault = displayStyle === 'default';
     const isOutline = displayStyle === 'outline';
-    return { hasBgImage, tappable, isDefault, isOutline };
+    return {
+        hasBackground,
+        hasBgImage,
+        pressable,
+        selectable,
+        isDefault,
+        isOutline,
+    };
 };
 exports.getCardFlags = getCardFlags;
 function useAnimatedBorder(baseColor, selectedColor, isSelected, duration) {
@@ -35,46 +44,59 @@ function useAnimatedBorder(baseColor, selectedColor, isSelected, duration) {
             duration,
             useNativeDriver: false,
         }).start();
-    }, [isSelected, duration]);
+    }, [isSelected, duration, borderAnim]);
     return borderAnim.interpolate({
         inputRange: [0, 1],
         outputRange: [baseColor, selectedColor],
     });
 }
 const Card = (_a) => {
-    var { children, displayStyle = 'default', background, onPress } = _a, rest = __rest(_a, ["children", "displayStyle", "background", "onPress"]);
+    var { children, displayStyle = 'default', background, onPress, onSelect } = _a, rest = __rest(_a, ["children", "displayStyle", "background", "onPress", "onSelect"]);
     const theme = (0, styled_native_1.useTheme)();
     const [isFocused, setFocused] = (0, react_1.useState)(false);
     const [isSelected, setSelected] = (0, react_1.useState)(false);
     const { largeAndUp } = (0, hooks_1.useBreakpoint)();
-    const { hasBgImage, tappable, isDefault, isOutline } = (0, exports.getCardFlags)({
+    const { hasBackground, hasBgImage, pressable, selectable, isDefault, isOutline, } = (0, exports.getCardFlags)({
         background,
         onPress,
         displayStyle,
+        onSelect,
     });
     let baseBorderColor = theme.color.surface.bright;
-    if (isOutline) {
-        baseBorderColor = theme.color.surface.bright;
-    }
-    else if (isDefault) {
-        if (hasBgImage)
+    if (isDefault) {
+        if (hasBgImage) {
             baseBorderColor = 'transparent';
-        else if (typeof background === 'string')
+        }
+        else if (typeof background === 'string') {
             baseBorderColor = background;
-        else
-            baseBorderColor = theme.color.surface.bright;
+        }
     }
     const selectedBorderColor = theme.color.surface.onSurface;
-    const animatedBorderColor = useAnimatedBorder(baseBorderColor, selectedBorderColor, isSelected, theme.transition.duration.fast);
+    const shouldHideBorder = hasBackground && !isOutline && !pressable && !selectable;
+    const animatedBorderColor = useAnimatedBorder(baseBorderColor, selectedBorderColor, selectable && isSelected, theme.transition.duration.fast);
     const handlePress = () => {
-        setSelected(prev => !prev);
         onPress === null || onPress === void 0 ? void 0 : onPress();
     };
-    const CardContent = ((0, jsx_runtime_1.jsxs)(Card_styles_1.AnimatedStyledCard, Object.assign({ displayStyle: displayStyle, background: background, largeAndUp: largeAndUp }, rest, { style: [rest === null || rest === void 0 ? void 0 : rest.style, { borderColor: animatedBorderColor }], children: [hasBgImage && ((0, jsx_runtime_1.jsx)(Card_styles_1.BackgroundImage, { source: background, resizeMode: "cover", largeAndUp: largeAndUp })), children] })));
-    if (!tappable)
-        return CardContent;
-    return ((0, jsx_runtime_1.jsx)(Card_styles_1.TappableWrapper, { onPress: handlePress, onFocus: () => setFocused(true), onBlur: () => setFocused(false), accessibilityRole: "button", focused: isFocused, largeAndUp: largeAndUp, style: ({ pressed }) => ({
+    const handleSelect = () => {
+        setSelected(prev => !prev);
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect();
+    };
+    const CardContent = ((0, jsx_runtime_1.jsxs)(Card_styles_1.AnimatedStyledCard, Object.assign({ displayStyle: displayStyle, background: background, largeAndUp: largeAndUp, onPress: onPress, onSelect: onSelect }, rest, { style: [
+            {
+                borderWidth: shouldHideBorder ? 0 : theme.border.width.md,
+                borderColor: animatedBorderColor,
+            },
+            rest === null || rest === void 0 ? void 0 : rest.style,
+        ], children: [hasBgImage && ((0, jsx_runtime_1.jsx)(Card_styles_1.BackgroundImage, { source: background, resizeMode: "cover", largeAndUp: largeAndUp })), children] })));
+    const isInteractive = pressable || selectable;
+    return ((0, jsx_runtime_1.jsx)(Card_styles_1.TappableWrapper, Object.assign({ as: isInteractive ? react_native_1.Pressable : react_native_1.View, largeAndUp: largeAndUp, tappable: isInteractive, focused: isInteractive ? isFocused : false }, (isInteractive && {
+        onPress: pressable ? handlePress : handleSelect,
+        onFocus: () => setFocused(true),
+        onBlur: () => setFocused(false),
+        accessibilityRole: 'button',
+        style: ({ pressed }) => ({
             opacity: pressed ? 0.9 : 1,
-        }), children: CardContent }));
+        }),
+    }), { children: CardContent })));
 };
 exports.Card = Card;