react-slip-and-slide/src/Item.js

##### A react and react-native carousel

import { AnimatedBox, Context, elementDimensionStyles, useInterpolation, useSpringValue, } from '@react-slip-and-slide/utils';
import React from 'react';
function ItemBaseComponent({ index, item, renderItem, onPress }, ref) {
    const { state: { itemDimensions, engineMode, loadingType, itemDimensionMode, isReady, }, } = Context.useDataContext();
    const isLazy = loadingType === 'lazy';
    const Opacity = useSpringValue(isLazy ? 0 : 1, {
        config: {
            tension: 220,
            friction: 32,
            mass: 1,
        },
    });
    React.useEffect(() => {
        if (isLazy) {
            Opacity.start({
                to: 1,
            });
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [isLazy]);
    const itemStyles = React.useRef({
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
    });
    if (engineMode === 'multi') {
        itemStyles.current = Object.assign(Object.assign(Object.assign({}, itemStyles.current), { position: isReady ? 'absolute' : 'static', flexShrink: 0 }), elementDimensionStyles(itemDimensions));
    }
    if (itemDimensionMode === 'static') {
        itemStyles.current = Object.assign(Object.assign({}, itemStyles.current), elementDimensionStyles(itemDimensions));
    }
    const { translateX, scale, opacity } = useInterpolation({ index });
    const memoRenderItem = React.useMemo(() => {
        return renderItem({ item, index });
    }, [index, item, renderItem]);
    return (React.createElement(AnimatedBox, { willMeasure: true, ref: ref, onPress: onPress, web: {
            onDragStart: (e) => e.preventDefault(),
        }, style: {
            transform: [
                {
                    translateX: engineMode === 'multi' ? translateX : 0,
                },
                {
                    scale,
                },
            ],
            opacity,
        }, styles: itemStyles.current },
        React.createElement(LazyLayout, { isLazy: isLazy, itemDimensions: itemDimensions }, memoRenderItem)));
}
export const LazyLayout = ({ isLazy, itemDimensions, children, }) => {
    const Opacity = useSpringValue(isLazy ? 0 : 1, {
        config: {
            tension: 220,
            friction: 32,
            mass: 1,
        },
    });
    React.useEffect(() => {
        if (isLazy) {
            Opacity.start({
                to: 1,
            });
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [isLazy]);
    if (isLazy) {
        return (React.createElement(AnimatedBox, { styles: Object.assign(Object.assign({ display: 'flex', alignItems: 'center' }, elementDimensionStyles(itemDimensions)), { width: '100%' }), style: {
                opacity: Opacity,
            } }, children));
    }
    return React.createElement(React.Fragment, null, children);
};
export const ItemBase = React.forwardRef(ItemBaseComponent);