@ubertheme/slider/src/talons/Slider/useItem.js

UB Slider Module for Magento PWA Studio

import {useMemo, useState} from 'react';
import {UNCONSTRAINED_SIZE_KEY} from "@magento/peregrine/lib/talons/Image/useImage";

/**
 * Returns props necessary to render a UB Slide Item component.
 *
 * @param {object} props
 * @param {object} props.item - Item Object
 * @param {number} props.width - width of slide image
 * @param {number} props.widths - mapping of width by breakpoints object
 * @return {{ isMobile: boolean, handleClick: function, openedId: number, imageSizes: string }}
 */
export const useItem = props => {
    const {
        item,
        width,
        widths
    } = props;

    const isMobile = typeof window.matchMedia === 'function'
        && window.matchMedia('(max-width: 767px)').matches;

    const [openedId, setOpenedId] = useState(0);

    /**
     * Handle for the click/touch event on a slide item
     * @param e
     */
    const handleClick = (e) => {
        if (item.content_type == 'youtube_video'
            || item.content_type == 'vimeo_video' ) {
            setOpenedId(item.id);
            e.preventDefault();
        }
        //do more here...
    };

    /**
     * Calculates image sizes from image widths configuration
     * sizes string format examples: 800px | (max-width: 640px) 320px, 800px
     */
    const imageSizes = useMemo(() => {
        if (!widths) {
            return width ? `${width}px` : '';
        }
        const result = [];
        for (const [breakpoint, width] of widths) {
            if (breakpoint !== UNCONSTRAINED_SIZE_KEY) {
                result.push(`(max-width: ${breakpoint}px) ${width}px`);
            }
        }
        // Add the unconstrained size at the end.
        result.push(`${widths.get(UNCONSTRAINED_SIZE_KEY)}px`);

        return result.join(', ');
    }, [width, widths]);

    return {
        isMobile,
        handleClick,
        openedId,
        imageSizes
    };
};