Merge pull request #62 from yifaneye/dev

v0.2.7

Author: yifaneye

CHANGELOG.md

@@ -2,6 +2,17 @@
 
 [![NPM](https://img.shields.io/npm/v/react-gallery-carousel.svg)](https://www.npmjs.com/package/react-gallery-carousel)
 
+
+## v0.2.7 (2021-12-18)
+
+### Enhancements
+
+- Fix "invalid or unexpected token" issue in Next.js.
+  ([Issue #51](https://github.com/yifaneye/react-gallery-carousel/issues/51))
+
+- Remove request to "object Object"
+  ([Issue #52](https://github.com/yifaneye/react-gallery-carousel/issues/52))
+
 ## v0.2.6 (2021-12-06)
 
 ### Enhancements

README.md

@@ -43,7 +43,7 @@ I have **used and carefully analyzed a lot of carousel/slider components**. I su
 13. Some of them disable pinching to zoom, while some others glitch when pinching with 2 fingers. Besides, when the window is zoomed in, most of them still detect for touch swiping to move to the previous, or the next slide, while the intention of most users in this scenario is panning to see other parts of the current slide.
 14. Some of them will cause the slides to stuck its position on window resize or on mobile device orientation change, until another user interaction.
 15. Some of them can only have predetermined images (i.e. before the carousel component mounts).
-16. Most of them do not provide a solution for fallback image (for when an image is not available).
+16. Most of them do not provide a solution for fallback/placeholder image (for when an image is not available).
 17. Some of them get zoomed in when the user double taps on the control, while the intention of most users in this scenario is to quickly go to the next after the next slide.
 18. Some of them remove the left or right button to indicate that there are no more slides in that direction. However, user is likely to click that spot where the button used to be, which causes undesired behaviours e.g. clicking on a link or button which is also at that spot.
 19. Some of them use the method of cloning the first, and the last slide to achieve looping (or infinite mode). I think that method is not great semantically.

example/src/components/Footer.js

@@ -5,7 +5,7 @@ const Footer = () => {
   return (
     <footer className='section'>
       <div className='action-container'>
-        <strong>react-gallery-carousel (v0.2.6)</strong>
+        <strong>react-gallery-carousel (v0.2.7)</strong>
         <div className='star-button-container'>
           <GitHubButton
             href='https://github.com/yifaneye/react-gallery-carousel'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-gallery-carousel",
-  "version": "0.2.6",
+  "version": "0.2.7",
   "description": "Mobile-friendly Carousel with batteries included (supporting touch, mouse emulation, lazy loading, thumbnails, fullscreen, RTL, keyboard navigation and customisations).",
   "author": "yifaneye",
   "license": "MIT",

react-gallery-carousel-nextjs/components/Carousel4.js

@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from 'react';
 import Carousel from 'react-gallery-carousel';
-import 'react-gallery-carousel/dist/index.css';
 
 const Carousel4 = ({ images }) => {
   const [dynamicImages, setDynamicImages] = useState([]);

src/components/Image/Image.js

@@ -1,7 +1,6 @@
 import React, { Fragment, useRef, useState } from 'react';
 import styles from './Image.module.css';
-import placeholderImage from 'placeholder.jpg';
-import fallbackImage from 'fallback.png';
+import { PLACEHOLDER_IMAGE } from './constants';
 import { Caption } from '../Widgets';
 import useIntersectionObserver from '../../utils/useIntersectionObserver';
 import PropTypes from 'prop-types';
@@ -13,7 +12,7 @@ import {
 } from '../../utils/validators';
 
 const handleError = (event) => {
-  event.target.src = fallbackImage;
+  event.target.src = PLACEHOLDER_IMAGE;
 };
 
 const LazyLoadedImage = (props) => {
@@ -22,7 +21,7 @@ const LazyLoadedImage = (props) => {
     imageRef,
     props.slidesContainerRef,
     '0px 101% 0px 101%'
-    // preload 2 images on either side of the slides container (viewport)
+    // preload 2 images on either side of the slides' container (viewport)
   );
   const [shouldShowThumbnail, setShouldShowThumbnail] = useState(
     props.image.thumbnail
@@ -40,13 +39,9 @@ const LazyLoadedImage = (props) => {
 
   let { src, srcset, alt, thumbnail, ...otherImageProps } = props.image;
 
-  src = isInViewport ? (hasError ? fallbackImage : src) : placeholderImage;
-  srcset = isInViewport ? (hasError ? null : srcset) : null;
-  thumbnail = isInViewport
-    ? hasError
-      ? fallbackImage
-      : thumbnail
-    : placeholderImage;
+  src = isInViewport && !hasError ? src : PLACEHOLDER_IMAGE;
+  srcset = isInViewport && !hasError ? srcset : null;
+  thumbnail = isInViewport && !hasError ? thumbnail : PLACEHOLDER_IMAGE;
 
   return (
     <>

src/components/Image/ImageThumbnail.js

@@ -1,14 +1,13 @@
 import React, { useRef } from 'react';
 import styles from './Image.module.css';
-import placeholderImage from 'placeholder.jpg';
-import fallbackImage from 'fallback.png';
+import { PLACEHOLDER_IMAGE } from './constants';
 import useIntersectionObserver from '../../utils/useIntersectionObserver';
 import PropTypes from 'prop-types';
 import { elementRef, imageObject } from '../../utils/validators';
 
 const handleError = (event) => {
   // permanently replace the image with the fallback image
-  event.target.src = fallbackImage;
+  event.target.src = PLACEHOLDER_IMAGE;
 };
 
 const LazyLoadedImageThumbnail = (props) => {
@@ -17,12 +16,12 @@ const LazyLoadedImageThumbnail = (props) => {
     imageRef,
     props.thumbnailsContainerRef,
     '0px 20% 0px 20%'
-    // preload approximately 2 image thumbnails on either side of the thumbnails container (viewport)
+    // preload approximately 2 image thumbnails on either side of the thumbnails' container (viewport)
     // 'approximately' is due to the presence of margin between adjacent images
   );
 
   // temporarily replace the image with the placeholder image
-  const src = isInViewport ? props.src : placeholderImage;
+  const src = isInViewport ? props.src : PLACEHOLDER_IMAGE;
 
   return (
     <img

src/components/Image/constants.js

@@ -0,0 +1,2 @@
+export const PLACEHOLDER_IMAGE =
+  'data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAAAAAA6fptVAAAACklEQVR4nGNiAAAABgADNjd8qAAAAABJRU5ErkJggg==';