@material-ui/icons#ArrowForwardIosRounded JavaScript Examples

ProductImages = ({ images }) => {
  const [isOpen, setIsOpen] = useState(false);
  const [imagesSet, setImagesSet] = useState([]);
  const [currImg, setCurrImg] = useState(0);

  const [primaryImage, setPrimaryImage] = useState(0);
  const [secondaryImages, setSecondaryImages] = useState([]);

  const [loading, setLoading] = useState(false);

  const { t } = useTranslation();
  const { palette } = useTheme();

  const isLightTheme = palette.type === 'light';

  const initImages = useMemo(
    () => [images.primary.small, ...images.additional.map(({ small }) => small)],
    [images.primary.small, images.additional]
  );

  useEffect(() => {
    const initialPhotos = async () => {
      setLoading(true);
      const mapImages = await Promise.all(
        initImages.map(async (item) => {
          try {
            const result = await getImage(item);
            return { src: result };
          } catch (e) {
            return { src: isLightTheme ? productPlugLight : productPlugDark };
          }
        })
      );

      setImagesSet(mapImages);
      setLoading(false);
    };
    initialPhotos();
  }, [isLightTheme, initImages]);

  useEffect(() => {
    setSecondaryImages(imagesSet.slice(1, images.length));
  }, [imagesSet, images.length]);

  useEffect(() => {
    const updatedSecondaryImages = imagesSet.filter((_, i) => i !== primaryImage);
    setSecondaryImages(updatedSecondaryImages);
  }, [primaryImage, imagesSet]);

  const styles = useStyles();

  const openImage = (idx) => {
    setIsOpen(true);
    setCurrImg(idx);
  };

  const sideImages = secondaryImages
    .filter((_, i) => i < 3)
    .map((image, i) => {
      if (i === imagesSet.length || i === 2) {
        return (
          <div className={styles.lastImagesBox} key={i} onClick={() => openImage(i + 1)}>
            <div className={styles.lastImageText}>
              {t('product.allPhotos.viewAll')} {`(${images.additional.length})`}{' '}
              {t('product.allPhotos.photo')}
            </div>
            <img
              className={styles.lastImage}
              src={image.src}
              alt={t('product.imgAltInfo')}
              data-cy='image'
            />
          </div>
        );
      }
      return (
        <div key={i} className={styles.imageItem}>
          <img
            className={styles.sideImage}
            src={image.src}
            alt={t('product.imgAltInfo')}
            onClick={() => setPrimaryImage(imagesSet.indexOf(secondaryImages[i]))}
            data-cy='image'
          />
        </div>
      );
    });

  const nextImg = () => {
    setPrimaryImage((prev) => prev + 1);
  };

  const prevImg = () => {
    setPrimaryImage((prev) => prev - 1);
  };

  return (
    <div className={styles.imageBody}>
      <ImgsViewer
        imgs={imagesSet}
        currImg={currImg}
        showThumbnails
        isOpen={isOpen}
        onClickPrev={() => setCurrImg((prev) => prev - 1)}
        onClickNext={() => setCurrImg((prev) => prev + 1)}
        onClickThumbnail={(index) => setCurrImg(index)}
        onClose={() => setIsOpen(false)}
        closeBtnTitle={t('common.close')}
        leftArrowTitle={t('common.prev')}
        rightArrowTitle={t('common.next')}
      />
      <div className={styles.images}>
        <div className={styles.imagePreviewContainer}>
          <button className={styles.circle} onClick={prevImg} disabled={primaryImage === 0}>
            <ArrowBackIosRounded />
          </button>
          <div className={styles.imageContainer}>
            {loading ? (
              <Loader heightWrap='100px' />
            ) : (
              <img
                src={imagesSet[primaryImage]?.src}
                className={styles.primaryImage}
                alt={t('product.imgAltInfo')}
              />
            )}
          </div>
          <button
            className={styles.circle}
            onClick={nextImg}
            disabled={primaryImage === initImages.length - 1}
          >
            <ArrowForwardIosRounded />
          </button>
        </div>
        <div className={styles.additionalImagePreview}>{sideImages}</div>
      </div>
    </div>
  );
}