@one-am/react-native-simple-image-slider 0.16.0 → 1.0.0-beta.3

package/src/PinchToZoom.tsx

@@ -1,345 +0,0 @@
-import React, { type PropsWithChildren, useCallback, useMemo } from 'react';
-import {
-    type LayoutChangeEvent,
-    type StyleProp,
-    useWindowDimensions,
-    type ViewStyle,
-} from 'react-native';
-import Animated, {
-    cancelAnimation,
-    runOnJS,
-    useAnimatedReaction,
-    useAnimatedStyle,
-    useSharedValue,
-    withTiming,
-} from 'react-native-reanimated';
-import { Gesture, GestureDetector } from 'react-native-gesture-handler';
-import { clamp } from './utils/clamp';
-import * as Haptics from 'expo-haptics';
-import type { PinchToZoomStatus } from './@types/pinch-to-zoom';
-
-export type PinchToZoomProps = PropsWithChildren<{
-    /**
-     * @description The minimum zoom scale of the image.
-     * @default 1
-     */
-    minimumZoomScale?: number;
-    /**
-     * @description The maximum zoom scale of the image.
-     * @default 8
-     */
-    maximumZoomScale?: number;
-    /**
-     * @description Additional styles or styles to override default style of the container View.
-     */
-    style?: StyleProp<ViewStyle>;
-    /**
-     * @description Whether all gestures should be disabled or not.
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * @description Callback that is called when the layout of the container changes.
-     * @param {LayoutChangeEvent} e The layout change event.
-     */
-    onLayout?: (e: LayoutChangeEvent) => void;
-    /**
-     * @description Callback that is called when the scale of the image changes to a value different from `minimumZoomScale`.
-     */
-    onScaleChange?: () => void;
-    /**
-     * @description Callback that is called when the scale of the image changes to `minimumZoomScale`.
-     */
-    onScaleReset?: () => void;
-    /**
-     * @description Callback that is called when either the translation or the scale of the image change.
-     * @param {PinchToZoomStatus} status The current status.
-     */
-    onStatusChange?: (status: PinchToZoomStatus) => void;
-    /**
-     * @description Callback that is called when gestures should lead to the item being dismissed.
-     */
-    onDismiss?: () => void;
-}>;
-
-export default function PinchToZoom({
-    minimumZoomScale = 1,
-    maximumZoomScale = 8,
-    style: propStyle,
-    disabled,
-    onLayout,
-    onStatusChange,
-    onScaleChange,
-    onScaleReset,
-    children,
-    onDismiss,
-}: PinchToZoomProps) {
-    const { height: windowHeight } = useWindowDimensions();
-
-    const translationX = useSharedValue(0);
-    const translationY = useSharedValue(0);
-    const originX = useSharedValue(0);
-    const originY = useSharedValue(0);
-    const scale = useSharedValue(1);
-    const isPinching = useSharedValue(false);
-    const viewHeight = useSharedValue(0);
-    const viewWidth = useSharedValue(0);
-
-    const prevScale = useSharedValue(0);
-    const offsetScale = useSharedValue(0);
-    const prevTranslationX = useSharedValue(0);
-    const prevTranslationY = useSharedValue(0);
-
-    const pinchGesture = useMemo(
-        () =>
-            Gesture.Pinch()
-                .enabled(!disabled)
-                .onStart(() => {
-                    cancelAnimation(translationX);
-                    cancelAnimation(translationY);
-                    cancelAnimation(scale);
-                    prevScale.value = scale.value;
-                    offsetScale.value = scale.value;
-                    if (onScaleChange) runOnJS(onScaleChange)();
-                })
-                .onUpdate((e) => {
-                    if (e.numberOfPointers === 2) {
-                        scale.value = Math.min(prevScale.value * e.scale, maximumZoomScale);
-
-                        // reset the origin
-                        if (!isPinching.value) {
-                            isPinching.value = true;
-                            originX.value = e.focalX;
-                            originY.value = e.focalY;
-                            prevTranslationX.value = translationX.value;
-                            prevTranslationY.value = translationY.value;
-                            offsetScale.value = scale.value;
-                        }
-
-                        if (isPinching.value) {
-                            // translate the image to the focal point as we're zooming
-                            translationX.value = clamp(
-                                prevTranslationX.value +
-                                    -1 *
-                                        ((scale.value - offsetScale.value) *
-                                            (originX.value - viewWidth.value / 2)),
-                                (-viewWidth.value * (scale.value - minimumZoomScale)) / 2,
-                                (viewWidth.value * (scale.value - minimumZoomScale)) / 2
-                            );
-
-                            translationY.value = clamp(
-                                prevTranslationY.value +
-                                    -1 *
-                                        ((scale.value - offsetScale.value) *
-                                            (originY.value - viewHeight.value / 2)),
-                                (-viewHeight.value * (scale.value - minimumZoomScale)) / 2,
-                                (viewHeight.value * (scale.value - minimumZoomScale)) / 2
-                            );
-                        }
-                    }
-                })
-                .onEnd(() => {
-                    isPinching.value = false;
-
-                    if (scale.value < minimumZoomScale / 2 && prevScale.value <= minimumZoomScale) {
-                        if (onDismiss) {
-                            runOnJS(onDismiss)();
-                        }
-                    } else if (scale.value < minimumZoomScale) {
-                        runOnJS(Haptics.impactAsync)(Haptics.ImpactFeedbackStyle.Light);
-                        translationX.value = withTiming(0);
-                        translationY.value = withTiming(0);
-                        scale.value = withTiming(minimumZoomScale);
-                        if (onScaleReset) {
-                            runOnJS(onScaleReset)();
-                        }
-                    }
-
-                    prevScale.value = 0;
-                    prevTranslationX.value = translationX.value;
-                    prevTranslationY.value = translationY.value;
-                }),
-
-        [
-            disabled,
-            translationX,
-            translationY,
-            scale,
-            prevScale,
-            offsetScale,
-            onScaleChange,
-            maximumZoomScale,
-            isPinching,
-            originX,
-            originY,
-            prevTranslationX,
-            prevTranslationY,
-            viewWidth,
-            viewHeight,
-            minimumZoomScale,
-            onDismiss,
-            onScaleReset,
-        ]
-    );
-
-    const panGesture = useMemo(
-        () =>
-            Gesture.Pan()
-                .enabled(!disabled)
-                .onStart(() => {
-                    cancelAnimation(translationX);
-                    cancelAnimation(translationY);
-
-                    prevTranslationX.value = translationX.value;
-                    prevTranslationY.value = translationY.value;
-                })
-                .onUpdate((e) => {
-                    if (prevScale.value <= minimumZoomScale) {
-                        translationX.value = prevTranslationX.value + e.translationX;
-                        translationY.value = prevTranslationY.value + e.translationY;
-                    } else {
-                        translationX.value = clamp(
-                            prevTranslationX.value + e.translationX,
-                            (-viewWidth.value * (scale.value - minimumZoomScale)) / 2,
-                            (viewWidth.value * (scale.value - minimumZoomScale)) / 2
-                        );
-                        translationY.value = clamp(
-                            prevTranslationY.value + e.translationY,
-                            (-viewHeight.value * (scale.value - minimumZoomScale)) / 2,
-                            (viewHeight.value * (scale.value - minimumZoomScale)) / 2
-                        );
-                    }
-                })
-                .onEnd(() => {
-                    if (scale.value <= minimumZoomScale && prevScale.value <= minimumZoomScale) {
-                        if (
-                            Math.abs(translationX.value) > viewWidth.value / 2 ||
-                            Math.abs(translationY.value) > viewHeight.value / 2
-                        ) {
-                            if (onDismiss) {
-                                runOnJS(onDismiss)();
-                            }
-                        } else {
-                            runOnJS(Haptics.impactAsync)(Haptics.ImpactFeedbackStyle.Light);
-                            translationX.value = withTiming(0);
-                            translationY.value = withTiming(0);
-                        }
-                    } else if (
-                        viewHeight.value * (scale.value - minimumZoomScale) <=
-                        windowHeight
-                    ) {
-                        translationX.value = withTiming(
-                            clamp(
-                                translationX.value,
-                                (-viewWidth.value * (scale.value - minimumZoomScale)) / 2,
-                                (viewWidth.value * (scale.value - minimumZoomScale)) / 2
-                            )
-                        );
-                        translationY.value = withTiming(
-                            clamp(
-                                translationY.value,
-                                (-viewHeight.value * (scale.value - minimumZoomScale)) / 2,
-                                (viewHeight.value * (scale.value - minimumZoomScale)) / 2
-                            )
-                        );
-                    }
-                }),
-        [
-            disabled,
-            minimumZoomScale,
-            onDismiss,
-            prevScale,
-            prevTranslationX,
-            prevTranslationY,
-            scale,
-            windowHeight,
-            translationX,
-            translationY,
-            viewHeight,
-            viewWidth,
-        ]
-    );
-
-    const tapGesture = useMemo(
-        () =>
-            Gesture.Tap()
-                .enabled(!disabled)
-                .numberOfTaps(2)
-                .onStart(() => {
-                    if (scale.value > minimumZoomScale) {
-                        translationX.value = withTiming(0);
-                        translationY.value = withTiming(0);
-                        scale.value = withTiming(minimumZoomScale);
-                        if (onScaleReset) {
-                            runOnJS(onScaleReset)();
-                        }
-                    } else {
-                        scale.value = withTiming(maximumZoomScale / 2);
-                        if (onScaleChange) {
-                            runOnJS(onScaleChange)();
-                        }
-                    }
-                }),
-        [
-            disabled,
-            maximumZoomScale,
-            minimumZoomScale,
-            onScaleChange,
-            onScaleReset,
-            scale,
-            translationX,
-            translationY,
-        ]
-    );
-
-    const compositeGesture = useMemo(() => {
-        return Gesture.Exclusive(Gesture.Simultaneous(pinchGesture, panGesture), tapGesture);
-    }, [panGesture, pinchGesture, tapGesture]);
-
-    useAnimatedReaction(
-        () => {
-            return {
-                scale: scale.value,
-                translation: {
-                    x: translationX.value,
-                    y: translationY.value,
-                },
-            };
-        },
-        (prepared) => {
-            if (onStatusChange) {
-                runOnJS(onStatusChange)(prepared);
-            }
-        },
-        [onStatusChange]
-    );
-
-    const style = useAnimatedStyle(() => {
-        return {
-            transform: [
-                { translateX: translationX.value },
-                { translateY: translationY.value },
-                { scale: scale.value },
-            ],
-        };
-    }, []);
-
-    const internalOnLayout = useCallback(
-        (e: LayoutChangeEvent) => {
-            viewHeight.value = e.nativeEvent.layout.height;
-            viewWidth.value = e.nativeEvent.layout.width;
-            onLayout?.(e);
-        },
-        [viewHeight, viewWidth, onLayout]
-    );
-
-    const finalStyle = useMemo(() => [style, propStyle], [style, propStyle]);
-
-    return (
-        <GestureDetector gesture={compositeGesture}>
-            <Animated.View onLayout={internalOnLayout} style={finalStyle}>
-                {children}
-            </Animated.View>
-        </GestureDetector>
-    );
-}

package/src/SimpleImageSlider.tsx

@@ -1,110 +0,0 @@
-import React, { forwardRef, useCallback, useRef, useState } from 'react';
-import { FlashList } from '@shopify/flash-list';
-import mergeRefs from 'merge-refs';
-import FullScreenImageSlider, { type FullScreenImageSliderProps } from './FullScreenImageSlider';
-import BaseListImageSlider, { type BaseSimpleImageSliderProps } from './BaseSimpleImageSlider';
-import type { SimpleImageSliderItem } from './@types/slider';
-
-export type SimpleImageSliderProps = BaseSimpleImageSliderProps & {
-    /**
-     * @description Whether the full screen mode is enabled or not. **Caution:** when this is enabled, the `onItemPress` prop will be ignored.
-     * @default false
-     */
-    fullScreenEnabled?: boolean;
-    /**
-     * @description Passed to the {@link FullScreenImageSlider} component.
-     */
-    renderFullScreenDescription?: FullScreenImageSliderProps['renderDescription'];
-    /**
-     * @description Passed to the {@link FullScreenImageSlider} component.
-     */
-    FullScreenCloseButtonIcon?: FullScreenImageSliderProps['CloseButtonIcon'];
-    /**
-     * @description The aspect ratio of the images when full screen.
-     *
-     * @default {@link FullScreenImageSliderProps.imageAspectRatio}
-     */
-    fullScreenImageAspectRatio?: number;
-};
-
-/**
- * @description A simple image slider that displays images in a list and can show a {@link FullScreenImageSlider} on press.
- */
-const SimpleImageSlider = forwardRef<FlashList<SimpleImageSliderItem>, SimpleImageSliderProps>(
-    function ListImageSlider(
-        {
-            data,
-            fullScreenEnabled = false,
-            onItemPress,
-            onViewableItemChange,
-            FullScreenCloseButtonIcon,
-            renderFullScreenDescription,
-            imageAspectRatio,
-            fullScreenImageAspectRatio,
-            ...props
-        },
-        ref
-    ) {
-        const listRef = useRef<FlashList<SimpleImageSliderItem>>(null);
-        const fullScreenListRef = useRef<FlashList<SimpleImageSliderItem>>(null);
-
-        const [fullScreen, setFullScreen] = useState(false);
-        const [currentIndex, setCurrentIndex] = useState(0);
-
-        const internalOnViewableItemChange = useCallback(
-            (index: number) => {
-                setCurrentIndex(index);
-                onViewableItemChange?.(index);
-            },
-            [onViewableItemChange]
-        );
-
-        const onFullScreenViewableItemChange = useCallback((index: number) => {
-            setCurrentIndex(index);
-        }, []);
-
-        const openFullScreen = useCallback(() => {
-            setFullScreen(true);
-        }, []);
-
-        const onRequestClose = useCallback(() => {
-            listRef.current?.scrollToIndex({ index: currentIndex });
-            setFullScreen(false);
-        }, [currentIndex]);
-
-        const onFadeOut = useCallback(() => {
-            listRef.current?.scrollToIndex({ index: currentIndex });
-        }, [currentIndex]);
-
-        return (
-            <>
-                <BaseListImageSlider
-                    {...props}
-                    imageAspectRatio={imageAspectRatio}
-                    data={data}
-                    ref={mergeRefs(ref, listRef)}
-                    onItemPress={fullScreenEnabled ? openFullScreen : onItemPress}
-                    onViewableItemChange={internalOnViewableItemChange}
-                />
-                {fullScreenEnabled ? (
-                    <FullScreenImageSlider
-                        {...props}
-                        imageAspectRatio={fullScreenImageAspectRatio ?? imageAspectRatio}
-                        ref={fullScreenListRef}
-                        open={fullScreen}
-                        onRequestClose={onRequestClose}
-                        data={data}
-                        showPageCounter={false}
-                        indexOverride={currentIndex}
-                        onViewableItemChange={onFullScreenViewableItemChange}
-                        renderDescription={renderFullScreenDescription}
-                        CloseButtonIcon={FullScreenCloseButtonIcon}
-                        onFadeOut={onFadeOut}
-                    />
-                ) : null}
-            </>
-        );
-    }
-);
-
-export default SimpleImageSlider;

package/src/SimpleImageSliderThemeProvider.tsx

@@ -1,49 +0,0 @@
-import React, { createContext, type PropsWithChildren, useContext, useMemo } from 'react';
-
-export type SimpleImageSliderTheme = {
-    colors: {
-        pageCounterBackground: string;
-        pageCounterBorder: string;
-        fullScreenCloseButton: string;
-        descriptionContainerBorder: string;
-    };
-};
-
-const defaultTheme: SimpleImageSliderTheme = {
-    colors: {
-        pageCounterBackground: '#D3D3D3',
-        pageCounterBorder: '#000000',
-        fullScreenCloseButton: '#FFFFFF',
-        descriptionContainerBorder: '#FFFFFF',
-    },
-};
-
-const ThemeContext = createContext<SimpleImageSliderTheme>(defaultTheme);
-
-export type SimpleImageSliderThemeProviderProps = PropsWithChildren<{
-    overrides?: {
-        colors: Partial<SimpleImageSliderTheme['colors']>;
-    };
-}>;
-
-export function useSimpleImageSliderTheme() {
-    return useContext(ThemeContext);
-}
-
-export default function SimpleImageSliderThemeProvider({
-    overrides,
-    children,
-}: SimpleImageSliderThemeProviderProps) {
-    const theme: SimpleImageSliderTheme = useMemo(
-        () => ({
-            ...defaultTheme,
-            colors: {
-                ...defaultTheme.colors,
-                ...overrides?.colors,
-            },
-        }),
-        [overrides?.colors]
-    );
-
-    return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;
-}

package/src/icons/IconX.tsx

@@ -1,24 +0,0 @@
-import React from 'react';
-import Svg, { Path } from 'react-native-svg';
-import type { IconsProps } from '../@types/icons';
-
-function IconX({ size = 24, color = '#1f2937', stroke = 2, ...props }: IconsProps) {
-    return (
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        <Svg
-            width={size}
-            height={size}
-            viewBox="0 0 24 24"
-            strokeWidth={stroke}
-            stroke={color}
-            fill="none"
-            {...props}
-        >
-            <Path stroke="none" d="M0 0h24v24H0z" fill="none" />
-            <Path d="M18 6l-12 12" />
-            <Path d="M6 6l12 12" />
-        </Svg>
-    );
-}
-export default IconX;

package/src/index.tsx

@@ -1,29 +0,0 @@
-import SimpleImageSliderThemeProvider, {
-    useSimpleImageSliderTheme,
-    type SimpleImageSliderTheme,
-    type SimpleImageSliderThemeProviderProps,
-} from './SimpleImageSliderThemeProvider';
-import BaseListImageSlider, { type BaseSimpleImageSliderProps } from './BaseSimpleImageSlider';
-import SimpleImageSlider, { type SimpleImageSliderProps } from './SimpleImageSlider';
-import FullScreenImageSlider, { type FullScreenImageSliderProps } from './FullScreenImageSlider';
-import PinchToZoom, { type PinchToZoomProps } from './PinchToZoom';
-import type { SimpleImageSliderItem } from './@types/slider';
-import PageCounter, { type PageCounterProps } from './PageCounter';
-
-export {
-    SimpleImageSliderThemeProvider,
-    useSimpleImageSliderTheme,
-    type SimpleImageSliderTheme,
-    type SimpleImageSliderThemeProviderProps,
-    BaseListImageSlider,
-    type BaseSimpleImageSliderProps,
-    SimpleImageSlider,
-    type SimpleImageSliderProps,
-    FullScreenImageSlider,
-    type FullScreenImageSliderProps,
-    PinchToZoom,
-    type PinchToZoomProps,
-    type SimpleImageSliderItem,
-    PageCounter,
-    type PageCounterProps,
-};

package/src/utils/clamp.ts

@@ -1,4 +0,0 @@
-export const clamp = (value: number, min: number, max: number) => {
-    'worklet';
-    return Math.min(Math.max(value, min), max);
-};

package/src/utils/renderProp.tsx

@@ -1,22 +0,0 @@
-import React, { isValidElement } from 'react';
-
-export type RenderProp =
-    | React.ComponentType<unknown>
-    | React.ReactElement
-    | string
-    | undefined
-    | null;
-
-export default function renderProp(Component: RenderProp) {
-    return Component ? (
-        typeof Component === 'string' ? (
-            Component
-        ) : isValidElement(Component) ? (
-            Component
-        ) : (
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-ignore
-            <Component />
-        )
-    ) : null;
-}