decathlon-ui 0.2.2 → 0.2.4

package/dist/components/event-card/event-card.styles.js

@@ -0,0 +1,62 @@
+import { useMemo } from "react";
+import { StyleSheet } from "react-native";
+import { useTheme } from "../../themes";
+export const useEventCardStyles = () => {
+    const { colors, spacing, fonts, radius } = useTheme();
+    return useMemo(() => StyleSheet.create({
+        container: {
+            width: "auto",
+            alignSelf: "center",
+        },
+        card: {
+            width: "auto",
+            flexDirection: "row",
+            gap: spacing.md,
+            padding: spacing.md,
+            backgroundColor: colors.backgroundPage,
+            borderWidth: 1,
+            borderColor: colors.borderSecondary,
+            alignItems: "flex-start",
+        },
+        textContainer: {
+            flex: 1,
+            gap: spacing.md,
+        },
+        badge: {
+            backgroundColor: colors.blue3 || colors.backgroundAction1,
+            paddingVertical: spacing.xxxs,
+            paddingHorizontal: spacing.xs,
+            borderRadius: radius.xs,
+            alignSelf: "flex-start",
+        },
+        badgeText: {
+            fontSize: fonts.sizes.xxxs,
+            fontWeight: "600",
+            lineHeight: 18,
+            color: colors.white,
+        },
+        dateText: {
+            fontSize: fonts.sizes.xxs,
+            fontWeight: "500",
+            lineHeight: 18,
+            color: colors.textSecondary,
+        },
+        titleText: {
+            fontSize: fonts.sizes.xs,
+            fontWeight: "500",
+            lineHeight: 16.8,
+            color: colors.textPrimary,
+        },
+        placeText: {
+            fontSize: fonts.sizes.xxxs,
+            fontWeight: "400",
+            lineHeight: 18,
+            color: colors.textSecondary,
+        },
+        image: {
+            width: 120,
+            height: 120,
+            backgroundColor: colors.backgroundTertiary,
+        },
+    }), [colors, spacing, fonts, radius]);
+};

package/dist/components/event-card/event-card.types.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode } from "react";
+import { ImageSourcePropType, StyleProp, TextStyle, ViewStyle } from "react-native";
+export interface EventCardProps {
+    /** Cidade ou local exibido no badge azul */
+    location: string;
+    /** Data e horário do evento (ex: "Sáb, 10 maio - 9h às 10h") */
+    dateTime: string;
+    /** Título do evento */
+    title: string;
+    /** Local do evento (ex: "Museu de Arte de São Paulo") */
+    place: string;
+    /** URL da imagem ou objeto `require()` */
+    imageSource?: ImageSourcePropType;
+    /** Componente React a ser renderizado no lugar da imagem (tem precedência sobre imageSource) */
+    renderImage?: ReactNode;
+    /** Callback ao pressionar o card */
+    onPress?: () => void;
+    /** Estilo customizado para o container externo */
+    style?: StyleProp<ViewStyle>;
+    /** Estilo customizado para textos */
+    textStyle?: StyleProp<TextStyle>;
+    /** Para testes automatizados */
+    testID?: string;
+}
+//# sourceMappingURL=event-card.types.d.ts.map

package/dist/components/event-card/event-card.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"event-card.types.d.ts","sourceRoot":"","sources":["../../../src/components/event-card/event-card.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EACL,mBAAmB,EACnB,SAAS,EACT,SAAS,EACT,SAAS,EACV,MAAM,cAAc,CAAC;AAEtB,MAAM,WAAW,cAAc;IAC7B,4CAA4C;IAC5C,QAAQ,EAAE,MAAM,CAAC;IAEjB,gEAAgE;IAChE,QAAQ,EAAE,MAAM,CAAC;IAEjB,uBAAuB;IACvB,KAAK,EAAE,MAAM,CAAC;IAEd,yDAAyD;IACzD,KAAK,EAAE,MAAM,CAAC;IAEd,0CAA0C;IAC1C,WAAW,CAAC,EAAE,mBAAmB,CAAC;IAElC,gGAAgG;IAChG,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB,oCAAoC;IACpC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB,kDAAkD;IAClD,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,qCAAqC;IACrC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAEjC,gCAAgC;IAChC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}

package/dist/components/event-card/event-card.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/event-card/index.d.ts

@@ -0,0 +1,3 @@
+export { EventCard } from "./event-card.component";
+export type { EventCardProps } from "./event-card.types";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/event-card/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/event-card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,YAAY,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/components/event-card/index.js

@@ -0,0 +1 @@
+export { EventCard } from "./event-card.component";

package/dist/components/filter-chip/filter-chip.component.d.ts

@@ -1,7 +1,4 @@
 import React from "react";
 import { FilterChipProps } from "./filter-chip.types";
-/**
- * Componente FilterChip usado para filtros com estados selecionado/não selecionado
- */
-export declare const FilterChip: React.FC<FilterChipProps>;
+export declare const FilterChip: React.NamedExoticComponent<FilterChipProps>;
 //# sourceMappingURL=filter-chip.component.d.ts.map

package/dist/components/filter-chip/filter-chip.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"filter-chip.component.d.ts","sourceRoot":"","sources":["../../../src/components/filter-chip/filter-chip.component.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA4DhD,CAAC"}
+{"version":3,"file":"filter-chip.component.d.ts","sourceRoot":"","sources":["../../../src/components/filter-chip/filter-chip.component.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAmEtD,eAAO,MAAM,UAAU,6CAAkC,CAAC"}

package/dist/components/filter-chip/filter-chip.component.js

@@ -1,12 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Pressable, Text, View } from "react-native";
 import { PlusIcon, SlidersIcon, XIcon } from "../../icons";
+import React from "react";
 import { useTheme } from "../../themes";
 import { useFilterChipStyles } from "./filter-chip.styles";
 /**
  * Componente FilterChip usado para filtros com estados selecionado/não selecionado
  */
-export const FilterChip = ({ label, selected = false, count, onPress, style, textStyle, }) => {
+const FilterChipComponent = ({ label, selected = false, count, onPress, style, textStyle, }) => {
     const theme = useTheme();
     const styles = useFilterChipStyles(selected ? "selected" : "default");
     const renderContent = () => {
@@ -23,3 +24,5 @@ export const FilterChip = ({ label, selected = false, count, onPress, style, tex
     };
     return (_jsx(Pressable, { style: [styles.container, style], onPress: onPress, children: renderContent() }));
 };
+export const FilterChip = React.memo(FilterChipComponent);
+FilterChip.displayName = "FilterChip";

package/dist/components/image-gallery/image-gallery.component.d.ts

@@ -0,0 +1,3 @@
+import { ImageGalleryProps } from './image-gallery.types';
+export declare const ImageGallery: ({ images, flags }: ImageGalleryProps) => import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=image-gallery.component.d.ts.map

package/dist/components/image-gallery/image-gallery.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-gallery.component.d.ts","sourceRoot":"","sources":["../../../src/components/image-gallery/image-gallery.component.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAG1D,eAAO,MAAM,YAAY,GAAI,mBAA6B,iBAAiB,mDA8H1E,CAAC"}

package/dist/components/image-gallery/image-gallery.component.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useMemo, useState } from 'react';
+import { Image, Modal, ScrollView, Text, TouchableOpacity, useWindowDimensions, View, } from 'react-native';
+import { PlusIcon, XIcon } from '../../icons';
+import { Badge } from '../badge';
+import EnhancedImageViewing from '../image-viewing/image-viewing.component';
+import { useGalleryStyles } from './image-gallery.styles';
+export const ImageGallery = ({ images = [], flags = [] }) => {
+    var _a, _b, _c;
+    if (!images || images.length === 0)
+        return null;
+    const [isGalleryOpen, setGalleryOpen] = useState(false);
+    const [isViewerOpen, setViewerOpen] = useState(false);
+    const [currentIndex, setCurrentIndex] = useState(0);
+    const openGallery = useCallback(() => setGalleryOpen(true), []);
+    const closeGallery = useCallback(() => setGalleryOpen(false), []);
+    const openImage = useCallback((index) => {
+        setCurrentIndex(index);
+        setViewerOpen(true);
+    }, []);
+    const closeImage = useCallback(() => setViewerOpen(false), []);
+    const { width } = useWindowDimensions();
+    const styles = useGalleryStyles();
+    const formattedImages = useMemo(() => images.map(({ imageUrl }) => ({ uri: imageUrl })), [images]);
+    // const renderFooter = () => (
+    //   <View
+    //     style={{
+    //       bottom: bottom + 10,
+    //       flexDirection: 'row',
+    //       justifyContent: 'center',
+    //     }}
+    //   >
+    //     <Text style={{ color: 'white', fontSize: 16, fontWeight: '600' }}>
+    //       {currentIndex + 1}/{images.length}
+    //     </Text>
+    //   </View>
+    // );
+    return (_jsxs(_Fragment, { children: [_jsxs(Modal, { presentationStyle: "pageSheet", animationType: "slide", style: styles.modalContainer, visible: isGalleryOpen, onRequestClose: closeGallery, children: [_jsx(EnhancedImageViewing, { images: formattedImages, imageIndex: currentIndex, 
+                        // FooterComponent={renderFooter}
+                        presentationStyle: "fullScreen", visible: isViewerOpen, onRequestClose: closeImage }), _jsx(View, { style: styles.closeModalButton, children: _jsx(TouchableOpacity, { onPress: closeGallery, children: _jsx(XIcon, {}) }) }), _jsx(ScrollView, { contentContainerStyle: {
+                            flexDirection: 'row',
+                            gap: 8,
+                            padding: 8,
+                            flexWrap: 'wrap',
+                            justifyContent: 'space-between',
+                        }, children: images.map((item, index) => (_jsx(TouchableOpacity, { onPress: () => openImage(index), style: {
+                                width: index % 3 === 0 ? '100%' : width / 2.13,
+                                height: index % 3 === 0 ? 378 : 178,
+                            }, children: _jsx(Image, { source: { uri: item.imageUrl }, style: { flex: 1 }, resizeMode: "cover" }) }, item.imageUrl))) })] }), _jsxs(TouchableOpacity, { onPress: openGallery, style: styles.container, children: [_jsx(View, { style: styles.tagContainer, children: flags.map(({ value }, index) => (_jsx(Badge, { variant: "discount", size: "medium", text: value }, `${value}-${index}`))) }), _jsx(Image, { source: { uri: (_a = images[0]) === null || _a === void 0 ? void 0 : _a.imageUrl }, style: styles.largeImage, resizeMode: "cover" }), _jsxs(View, { style: styles.smallImagesContainer, children: [_jsxs(View, { style: styles.tagTotalPhotos, children: [_jsx(PlusIcon, {}), _jsxs(Text, { style: styles.tagTotalPhotosText, children: [images.length, " Fotos"] })] }), _jsx(Image, { source: { uri: (_b = images[1]) === null || _b === void 0 ? void 0 : _b.imageUrl }, style: styles.smallImage, resizeMode: "cover" }), _jsx(Image, { source: { uri: (_c = images[2]) === null || _c === void 0 ? void 0 : _c.imageUrl }, style: styles.smallImage, resizeMode: "cover" })] })] })] }));
+};

package/dist/components/image-gallery/image-gallery.styles.d.ts

@@ -0,0 +1,58 @@
+export declare const useGalleryStyles: () => {
+    container: {
+        width: "100%";
+    };
+    largeImage: {
+        width: "100%";
+        height: number;
+    };
+    smallImagesContainer: {
+        flexDirection: "row";
+        justifyContent: "space-between";
+    };
+    smallImage: {
+        width: "50%";
+        height: number;
+    };
+    tagContainer: {
+        position: "absolute";
+        flexDirection: "row";
+        gap: 8;
+        top: 8;
+        left: 8;
+        zIndex: number;
+    };
+    closeModalButton: {
+        width: "100%";
+        alignItems: "flex-end";
+        justifyContent: "center";
+        padding: 8;
+    };
+    tagTotalPhotos: {
+        backgroundColor: "#FFFFFF";
+        zIndex: number;
+        top: number;
+        right: number;
+        paddingHorizontal: 16;
+        paddingVertical: 6;
+        borderRadius: number;
+        position: "absolute";
+        alignSelf: "center";
+        flexDirection: "row";
+        gap: 8;
+    };
+    tagTotalPhotosText: {
+        fontFamily: string;
+        fontSize: number;
+        color: "#101010";
+    };
+    modalContainer: {
+        height: "50%";
+        padding: number;
+    };
+    smallImagesRow: {
+        flexDirection: "row";
+        justifyContent: "space-between";
+    };
+};
+//# sourceMappingURL=image-gallery.styles.d.ts.map

package/dist/components/image-gallery/image-gallery.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-gallery.styles.d.ts","sourceRoot":"","sources":["../../../src/components/image-gallery/image-gallery.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4D5B,CAAC"}

package/dist/components/image-gallery/image-gallery.styles.js

@@ -0,0 +1,62 @@
+import { StyleSheet } from "react-native";
+import { useTheme } from "../../themes";
+export const useGalleryStyles = () => {
+    const { colors, spacing } = useTheme();
+    return StyleSheet.create({
+        container: {
+            width: "100%",
+        },
+        largeImage: {
+            width: "100%",
+            height: 375, // ajuste conforme necessário
+        },
+        smallImagesContainer: {
+            flexDirection: "row",
+            justifyContent: "space-between",
+        },
+        smallImage: {
+            width: "50%", // um pouco menos que a metade para margem
+            height: 187, // ajuste conforme necessário
+        },
+        tagContainer: {
+            position: "absolute",
+            flexDirection: "row",
+            gap: spacing.xs,
+            top: spacing.xs,
+            left: spacing.xs,
+            zIndex: 1,
+        },
+        closeModalButton: {
+            width: "100%",
+            alignItems: "flex-end",
+            justifyContent: "center",
+            padding: spacing.xs,
+        },
+        tagTotalPhotos: {
+            backgroundColor: colors.white,
+            zIndex: 1,
+            top: -40,
+            right: 13,
+            paddingHorizontal: spacing.md,
+            paddingVertical: spacing.xxs2,
+            borderRadius: 100,
+            position: "absolute",
+            alignSelf: "center",
+            flexDirection: "row",
+            gap: spacing.xs,
+        },
+        tagTotalPhotosText: {
+            fontFamily: "Inter-Regular", // fonts.inter.regular
+            fontSize: 12, // fonts.sizes.xs
+            color: colors.textPrimary,
+        },
+        modalContainer: {
+            height: "50%",
+            padding: 10,
+        },
+        smallImagesRow: {
+            flexDirection: "row",
+            justifyContent: "space-between",
+        },
+    });
+};

package/dist/components/image-gallery/image-gallery.types.d.ts

@@ -0,0 +1,11 @@
+export interface ImageGalleryImage {
+    imageUrl: string;
+}
+export interface ImageGalleryFlag {
+    value: string;
+}
+export interface ImageGalleryProps {
+    images: ImageGalleryImage[];
+    flags: ImageGalleryFlag[];
+}
+//# sourceMappingURL=image-gallery.types.d.ts.map

package/dist/components/image-gallery/image-gallery.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-gallery.types.d.ts","sourceRoot":"","sources":["../../../src/components/image-gallery/image-gallery.types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,iBAAiB,EAAE,CAAC;IAC5B,KAAK,EAAE,gBAAgB,EAAE,CAAC;CAC3B"}

package/dist/components/image-gallery/image-gallery.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/image-gallery/index.d.ts

@@ -0,0 +1,2 @@
+export { ImageGallery } from "./image-gallery.component";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/image-gallery/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/image-gallery/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC"}

package/dist/components/image-gallery/index.js

@@ -0,0 +1 @@
+export { ImageGallery } from "./image-gallery.component";

package/dist/components/image-viewing/components/image-default-header.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) JOB TODAY S.A. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+type Props = {
+    onRequestClose: () => void;
+};
+declare const ImageDefaultHeader: ({ onRequestClose }: Props) => import("react/jsx-runtime").JSX.Element;
+export default ImageDefaultHeader;
+//# sourceMappingURL=image-default-header.d.ts.map

package/dist/components/image-viewing/components/image-default-header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-default-header.d.ts","sourceRoot":"","sources":["../../../../src/components/image-viewing/components/image-default-header.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAKH,KAAK,KAAK,GAAG;IACX,cAAc,EAAE,MAAM,IAAI,CAAC;CAC5B,CAAC;AAIF,QAAA,MAAM,kBAAkB,GAAI,oBAAoB,KAAK,4CAUpD,CAAC;AAyBF,eAAe,kBAAkB,CAAC"}

package/dist/components/image-viewing/components/image-default-header.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SafeAreaView, Text, TouchableOpacity, StyleSheet } from "react-native";
+const HIT_SLOP = { top: 16, left: 16, bottom: 16, right: 16 };
+const ImageDefaultHeader = ({ onRequestClose }) => (_jsx(SafeAreaView, { style: styles.root, children: _jsx(TouchableOpacity, { style: styles.closeButton, onPress: onRequestClose, hitSlop: HIT_SLOP, children: _jsx(Text, { style: styles.closeText, children: "\u2715" }) }) }));
+const styles = StyleSheet.create({
+    root: {
+        alignItems: "flex-end",
+    },
+    closeButton: {
+        marginRight: 8,
+        marginTop: 8,
+        width: 44,
+        height: 44,
+        alignItems: "center",
+        justifyContent: "center",
+        borderRadius: 22,
+        backgroundColor: "#00000077",
+    },
+    closeText: {
+        lineHeight: 22,
+        fontSize: 19,
+        textAlign: "center",
+        color: "#FFF",
+        includeFontPadding: false,
+    },
+});
+export default ImageDefaultHeader;

package/dist/components/image-viewing/components/image-item/image-item.component.android.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { ImageSource } from "../../image-viewing.types";
+type Props = {
+    imageSrc: ImageSource;
+    onRequestClose: () => void;
+    onZoom: (isZoomed: boolean) => void;
+    onLongPress: (image: ImageSource) => void;
+    delayLongPress: number;
+    swipeToCloseEnabled?: boolean;
+    doubleTapToZoomEnabled?: boolean;
+};
+declare const _default: React.MemoExoticComponent<({ imageSrc, onZoom, onRequestClose, onLongPress, delayLongPress, swipeToCloseEnabled, doubleTapToZoomEnabled, }: Props) => import("react/jsx-runtime").JSX.Element>;
+export default _default;
+//# sourceMappingURL=image-item.component.android.d.ts.map

package/dist/components/image-viewing/components/image-item/image-item.component.android.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-item.component.android.d.ts","sourceRoot":"","sources":["../../../../../src/components/image-viewing/components/image-item/image-item.component.android.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAa7D,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAUxD,KAAK,KAAK,GAAG;IACT,QAAQ,EAAE,WAAW,CAAC;IACtB,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,MAAM,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACpC,WAAW,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IAC1C,cAAc,EAAE,MAAM,CAAC;IACvB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,sBAAsB,CAAC,EAAE,OAAO,CAAC;CACpC,CAAC;oKAUC,KAAK;AAwGR,wBAAqC"}

package/dist/components/image-viewing/components/image-item/image-item.component.android.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useRef, useState } from "react";
+import { Animated, ScrollView, StyleSheet, } from "react-native";
+import useImageDimensions from "../../hooks/useImageDimensions";
+import usePanResponder from "../../hooks/usePanResponder";
+import { getImageStyles, getImageTransform } from "../../util";
+import { SWIPE_CLOSE_OFFSET, WINDOW_DIMENSIONS } from "./image-item.constants";
+import { ImageLoading } from "./image-loading.component";
+const SWIPE_CLOSE_VELOCITY = 1.75;
+const SCREEN = WINDOW_DIMENSIONS;
+const SCREEN_WIDTH = SCREEN.width;
+const SCREEN_HEIGHT = SCREEN.height;
+const ImageItem = ({ imageSrc, onZoom, onRequestClose, onLongPress, delayLongPress, swipeToCloseEnabled = true, doubleTapToZoomEnabled = true, }) => {
+    const imageContainer = useRef(null);
+    const imageDimensions = useImageDimensions(imageSrc);
+    const [translate, scale] = getImageTransform(imageDimensions, SCREEN);
+    const scrollValueY = useRef(new Animated.Value(0)).current;
+    const [isLoaded, setLoadEnd] = useState(false);
+    const onLoaded = useCallback(() => setLoadEnd(true), []);
+    const onZoomPerformed = useCallback((isZoomed) => {
+        onZoom(isZoomed);
+        if (imageContainer === null || imageContainer === void 0 ? void 0 : imageContainer.current) {
+            imageContainer.current.setNativeProps({
+                scrollEnabled: !isZoomed,
+            });
+        }
+    }, [imageContainer, onZoom]);
+    const onLongPressHandler = useCallback(() => {
+        onLongPress(imageSrc);
+    }, [imageSrc, onLongPress]);
+    const [panHandlers, scaleValue, translateValue] = usePanResponder({
+        initialScale: scale || 1,
+        initialTranslate: translate || { x: 0, y: 0 },
+        onZoom: onZoomPerformed,
+        doubleTapToZoomEnabled,
+        onLongPress: onLongPressHandler,
+        delayLongPress,
+    });
+    const imagesStyles = getImageStyles(imageDimensions, translateValue, scaleValue);
+    const imageOpacity = scrollValueY.interpolate({
+        inputRange: [-SWIPE_CLOSE_OFFSET, 0, SWIPE_CLOSE_OFFSET],
+        outputRange: [0.7, 1, 0.7],
+    });
+    const imageStylesWithOpacity = { ...imagesStyles, opacity: imageOpacity };
+    const onScrollEndDrag = ({ nativeEvent, }) => {
+        var _a, _b, _c, _d;
+        const velocityY = (_b = (_a = nativeEvent === null || nativeEvent === void 0 ? void 0 : nativeEvent.velocity) === null || _a === void 0 ? void 0 : _a.y) !== null && _b !== void 0 ? _b : 0;
+        const offsetY = (_d = (_c = nativeEvent === null || nativeEvent === void 0 ? void 0 : nativeEvent.contentOffset) === null || _c === void 0 ? void 0 : _c.y) !== null && _d !== void 0 ? _d : 0;
+        if ((Math.abs(velocityY) > SWIPE_CLOSE_VELOCITY &&
+            offsetY > SWIPE_CLOSE_OFFSET) ||
+            offsetY > SCREEN_HEIGHT / 2) {
+            onRequestClose();
+        }
+    };
+    const onScroll = ({ nativeEvent, }) => {
+        var _a, _b;
+        const offsetY = (_b = (_a = nativeEvent === null || nativeEvent === void 0 ? void 0 : nativeEvent.contentOffset) === null || _a === void 0 ? void 0 : _a.y) !== null && _b !== void 0 ? _b : 0;
+        scrollValueY.setValue(offsetY);
+    };
+    return (_jsxs(ScrollView, { ref: imageContainer, style: styles.listItem, pagingEnabled: true, nestedScrollEnabled: true, showsHorizontalScrollIndicator: false, showsVerticalScrollIndicator: false, contentContainerStyle: styles.imageScrollContainer, scrollEnabled: swipeToCloseEnabled, ...(swipeToCloseEnabled && {
+            onScroll,
+            onScrollEndDrag,
+        }), children: [_jsx(Animated.Image, { ...panHandlers, source: imageSrc, style: imageStylesWithOpacity, onLoad: onLoaded }), (!isLoaded || !imageDimensions) && _jsx(ImageLoading, {})] }));
+};
+const styles = StyleSheet.create({
+    listItem: {
+        width: SCREEN_WIDTH,
+        height: SCREEN_HEIGHT,
+    },
+    imageScrollContainer: {
+        height: SCREEN_HEIGHT * 2,
+    },
+});
+export default React.memo(ImageItem);

package/dist/components/image-viewing/components/image-item/image-item.component.d.ts

@@ -0,0 +1,11 @@
+declare const ImageItem: import("react").MemoExoticComponent<({ imageSrc, onZoom, onRequestClose, onLongPress, delayLongPress, swipeToCloseEnabled, doubleTapToZoomEnabled, }: {
+    imageSrc: import("../../image-viewing.types").ImageSource;
+    onRequestClose: () => void;
+    onZoom: (isZoomed: boolean) => void;
+    onLongPress: (image: import("../../image-viewing.types").ImageSource) => void;
+    delayLongPress: number;
+    swipeToCloseEnabled?: boolean;
+    doubleTapToZoomEnabled?: boolean;
+}) => import("react/jsx-runtime").JSX.Element>;
+export default ImageItem;
+//# sourceMappingURL=image-item.component.d.ts.map

package/dist/components/image-viewing/components/image-item/image-item.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-item.component.d.ts","sourceRoot":"","sources":["../../../../../src/components/image-viewing/components/image-item/image-item.component.tsx"],"names":[],"mappings":"AAKA,QAAA,MAAM,SAAS;;;;;;;;8CAAwC,CAAC;AAExD,eAAe,SAAS,CAAC"}

package/dist/components/image-viewing/components/image-item/image-item.component.ios.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { ImageSource } from "../../image-viewing.types";
+type Props = {
+    imageSrc: ImageSource;
+    onRequestClose: () => void;
+    onZoom: (scaled: boolean) => void;
+    onLongPress: (image: ImageSource) => void;
+    delayLongPress: number;
+    swipeToCloseEnabled?: boolean;
+    doubleTapToZoomEnabled?: boolean;
+};
+declare const _default: React.MemoExoticComponent<({ imageSrc, onZoom, onRequestClose, onLongPress, delayLongPress, swipeToCloseEnabled, doubleTapToZoomEnabled, }: Props) => import("react/jsx-runtime").JSX.Element>;
+export default _default;
+//# sourceMappingURL=image-item.component.ios.d.ts.map

package/dist/components/image-viewing/components/image-item/image-item.component.ios.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-item.component.ios.d.ts","sourceRoot":"","sources":["../../../../../src/components/image-viewing/components/image-item/image-item.component.ios.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAc7D,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAUxD,KAAK,KAAK,GAAG;IACT,QAAQ,EAAE,WAAW,CAAC;IACtB,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,MAAM,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAClC,WAAW,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IAC1C,cAAc,EAAE,MAAM,CAAC;IACvB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,sBAAsB,CAAC,EAAE,OAAO,CAAC;CACpC,CAAC;oKAUC,KAAK;AAyGR,wBAAqC"}

package/dist/components/image-viewing/components/image-item/image-item.component.ios.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useRef, useState } from "react";
+import { Animated, ScrollView, StyleSheet, TouchableWithoutFeedback, View, } from "react-native";
+import useDoubleTapToZoom from "../../hooks/useDoubleTapToZoom";
+import useImageDimensions from "../../hooks/useImageDimensions";
+import { getImageStyles, getImageTransform } from "../../util";
+import { SCREEN_DIMENSIONS, SWIPE_CLOSE_OFFSET } from "./image-item.constants";
+import { ImageLoading } from "./image-loading.component";
+const SWIPE_CLOSE_VELOCITY = 1.55;
+const SCREEN = SCREEN_DIMENSIONS;
+const SCREEN_WIDTH = SCREEN.width;
+const SCREEN_HEIGHT = SCREEN.height;
+const ImageItem = ({ imageSrc, onZoom, onRequestClose, onLongPress, delayLongPress, swipeToCloseEnabled = true, doubleTapToZoomEnabled = true, }) => {
+    const scrollViewRef = useRef(null);
+    const [loaded, setLoaded] = useState(false);
+    const [scaled, setScaled] = useState(false);
+    const imageDimensions = useImageDimensions(imageSrc);
+    const handleDoubleTap = useDoubleTapToZoom(scrollViewRef, scaled, SCREEN);
+    const [translate, scale] = getImageTransform(imageDimensions, SCREEN);
+    const scrollValueY = useRef(new Animated.Value(0)).current;
+    const scaleValue = useRef(new Animated.Value(scale || 1)).current;
+    const translateValue = useRef(new Animated.ValueXY(translate)).current;
+    const maxScale = scale && scale > 0 ? Math.max(1 / scale, 1) : 1;
+    const imageOpacity = scrollValueY.interpolate({
+        inputRange: [-SWIPE_CLOSE_OFFSET, 0, SWIPE_CLOSE_OFFSET],
+        outputRange: [0.5, 1, 0.5],
+    });
+    const imagesStyles = getImageStyles(imageDimensions, translateValue, scaleValue);
+    const imageStylesWithOpacity = { ...imagesStyles, opacity: imageOpacity };
+    const onScrollEndDrag = useCallback(({ nativeEvent }) => {
+        var _a, _b;
+        const velocityY = (_b = (_a = nativeEvent === null || nativeEvent === void 0 ? void 0 : nativeEvent.velocity) === null || _a === void 0 ? void 0 : _a.y) !== null && _b !== void 0 ? _b : 0;
+        const isScaledNow = (nativeEvent === null || nativeEvent === void 0 ? void 0 : nativeEvent.zoomScale) > 1;
+        onZoom(isScaledNow);
+        setScaled(isScaledNow);
+        if (!isScaledNow &&
+            swipeToCloseEnabled &&
+            Math.abs(velocityY) > SWIPE_CLOSE_VELOCITY) {
+            onRequestClose();
+        }
+    }, [swipeToCloseEnabled, onRequestClose, onZoom]);
+    const onScroll = ({ nativeEvent, }) => {
+        var _a, _b;
+        const offsetY = (_b = (_a = nativeEvent === null || nativeEvent === void 0 ? void 0 : nativeEvent.contentOffset) === null || _a === void 0 ? void 0 : _a.y) !== null && _b !== void 0 ? _b : 0;
+        if ((nativeEvent === null || nativeEvent === void 0 ? void 0 : nativeEvent.zoomScale) > 1) {
+            return;
+        }
+        scrollValueY.setValue(offsetY);
+    };
+    const onLongPressHandler = useCallback(() => {
+        onLongPress(imageSrc);
+    }, [imageSrc, onLongPress]);
+    return (_jsx(View, { children: _jsxs(ScrollView, { ref: scrollViewRef, style: styles.listItem, pinchGestureEnabled: true, showsHorizontalScrollIndicator: false, showsVerticalScrollIndicator: false, maximumZoomScale: maxScale, contentContainerStyle: styles.imageScrollContainer, scrollEnabled: swipeToCloseEnabled, onScrollEndDrag: onScrollEndDrag, scrollEventThrottle: 1, ...(swipeToCloseEnabled && {
+                onScroll,
+            }), children: [(!loaded || !imageDimensions) && _jsx(ImageLoading, {}), _jsx(TouchableWithoutFeedback, { onPress: doubleTapToZoomEnabled ? handleDoubleTap : undefined, onLongPress: onLongPressHandler, delayLongPress: delayLongPress, children: _jsx(Animated.Image, { source: imageSrc, style: imageStylesWithOpacity, onLoad: () => setLoaded(true) }) })] }) }));
+};
+const styles = StyleSheet.create({
+    listItem: {
+        width: SCREEN_WIDTH,
+        height: SCREEN_HEIGHT,
+    },
+    imageScrollContainer: {
+        height: SCREEN_HEIGHT,
+    },
+});
+export default React.memo(ImageItem);

package/dist/components/image-viewing/components/image-item/image-item.component.js

@@ -0,0 +1,5 @@
+import { Platform } from "react-native";
+import Android from "./image-item.component.android";
+import IOS from "./image-item.component.ios";
+const ImageItem = Platform.OS === "ios" ? IOS : Android;
+export default ImageItem;

package/dist/components/image-viewing/components/image-item/image-item.constants.d.ts

@@ -0,0 +1,4 @@
+export declare const SWIPE_CLOSE_OFFSET = 75;
+export declare const WINDOW_DIMENSIONS: import("react-native").ScaledSize;
+export declare const SCREEN_DIMENSIONS: import("react-native").ScaledSize;
+//# sourceMappingURL=image-item.constants.d.ts.map

package/dist/components/image-viewing/components/image-item/image-item.constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-item.constants.d.ts","sourceRoot":"","sources":["../../../../../src/components/image-viewing/components/image-item/image-item.constants.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB,KAAK,CAAC;AAGrC,eAAO,MAAM,iBAAiB,mCAA2B,CAAC;AAC1D,eAAO,MAAM,iBAAiB,mCAA2B,CAAC"}

package/dist/components/image-viewing/components/image-item/image-item.constants.js

@@ -0,0 +1,5 @@
+import { Dimensions } from "react-native";
+export const SWIPE_CLOSE_OFFSET = 75;
+// Mantemos Window para Android e Screen para iOS no código
+export const WINDOW_DIMENSIONS = Dimensions.get("window");
+export const SCREEN_DIMENSIONS = Dimensions.get("screen");

package/dist/components/image-viewing/components/image-item/image-loading.component.d.ts

@@ -0,0 +1,2 @@
+export declare const ImageLoading: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=image-loading.component.d.ts.map

package/dist/components/image-viewing/components/image-item/image-loading.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-loading.component.d.ts","sourceRoot":"","sources":["../../../../../src/components/image-viewing/components/image-item/image-loading.component.tsx"],"names":[],"mappings":"AAMA,eAAO,MAAM,YAAY,+CAIxB,CAAC"}