woocommerce/plugins/woocommerce-blocks/assets/js/blocks/featured-items/use-background-image.ts

68 lines
1.6 KiB
TypeScript

/**
* External dependencies
*/
import { WP_REST_API_Category } from 'wp-types';
import { ProductResponseItem } from '@woocommerce/types';
import {
getImageSrcFromProduct,
getImageIdFromProduct,
} from '@woocommerce/utils';
import { useEffect, useState } from 'react';
/**
* Internal dependencies
*/
import { BLOCK_NAMES } from './constants';
import {
getCategoryImageSrc,
getCategoryImageId,
} from './featured-category/utils';
interface BackgroundProps {
blockName: string;
item: ProductResponseItem | WP_REST_API_Category;
mediaId: number | undefined;
mediaSrc: string | undefined;
}
interface BackgroundImage {
backgroundImageId: number;
backgroundImageSrc: string;
}
export function useBackgroundImage( {
blockName,
item,
mediaId,
mediaSrc,
}: BackgroundProps ): BackgroundImage {
const [ backgroundImageId, setBackgroundImageId ] = useState( 0 );
const [ backgroundImageSrc, setBackgroundImageSrc ] = useState( '' );
useEffect( () => {
if ( mediaId ) {
setBackgroundImageId( mediaId );
} else {
setBackgroundImageId(
blockName === BLOCK_NAMES.featuredProduct
? getImageIdFromProduct( item as ProductResponseItem )
: getCategoryImageId( item as WP_REST_API_Category )
);
}
}, [ blockName, item, mediaId ] );
useEffect( () => {
if ( mediaSrc ) {
setBackgroundImageSrc( mediaSrc );
} else {
setBackgroundImageSrc(
blockName === BLOCK_NAMES.featuredProduct
? getImageSrcFromProduct( item as ProductResponseItem )
: getCategoryImageSrc( item as WP_REST_API_Category )
);
}
}, [ blockName, item, mediaSrc ] );
return { backgroundImageId, backgroundImageSrc };
}