Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | 4x 4x 4x 2x 2x 2x 2x 2x 4x | import React, { FC, useRef } from 'react';
import { ProductCard } from '../ProductCard';
import { Loading } from 'ag-ems-ui-library';
const styles = require('./Products.module.css');
const mapStyles = require('../Map/Map.module.css');
export const Products: FC<{
products: any[],
preloader?: boolean,
startDate?: string;
endDate?: string;
}> = ({
products,
preloader,
startDate,
endDate
}) => {
const length = products.length;
const hoveredSku = useRef<string>('');
const mouseOver = sku => {
if (sku !== hoveredSku.current) {
hoveredSku.current = sku;
const marker = document.querySelector<HTMLImageElement>(`img[data-sku="${sku}"]`);
if (marker) {
marker.classList.add(mapStyles.hovered);
marker.style.transform = `${marker.style.transform} scale(1.2)`;
}
}
};
const mouseLeave = () => {
if (hoveredSku.current) {
const marker = document.querySelector<HTMLImageElement>(`img[data-sku="${hoveredSku.current}"]`);
if (marker) {
marker.classList.remove(mapStyles.hovered);
marker.style.transform = marker.style.transform.replace(/ scale\(1.2\)/i, '');
}
}
hoveredSku.current = '';
};
return (
<section className={styles.Products}>
{preloader
? <Loading color="#007c00" />
: products.map((product, index) => {
return <React.Fragment key={product.sku}>
<ProductCard
product={product}
onMouseOver={mouseOver}
onMouseLeave={mouseLeave}
startDate={startDate}
endDate={endDate}
/>
{(index < length - 1) ? <hr className="hr only-sm" /> : null}
</React.Fragment>;
})}
</section>
);
};
|