react-image-gallery 1.2.12 → 1.3.0

package/src/components/ImageGallery.test.jsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+
+import ImageGallery from "./ImageGallery";
+
+describe("<ImageGallery />", () => {
+  const defaultProps = {
+    items: [
+      {
+        original: "test.png",
+        thumbnail: "test_thumb.png",
+      },
+    ],
+  };
+
+  it("renders slides", () => {
+    render(<ImageGallery {...defaultProps} />);
+    const elements = screen.getAllByLabelText("Go to Slide 1");
+    // expect a thumbnail and slide label
+    expect(elements.length).toBe(2);
+  });
+});

package/src/{Item.js → components/Item.jsx}

@@ -1,17 +1,17 @@
-import React from 'react';
-import { bool, func, string } from 'prop-types';
+import React from "react";
+import { bool, func, string } from "prop-types";
 
 const defaultProps = {
-  description: '',
-  fullscreen: '',
+  description: "",
+  fullscreen: "",
   isFullscreen: false,
-  originalAlt: '',
-  originalHeight: '',
-  originalWidth: '',
-  originalTitle: '',
-  sizes: '',
-  srcSet: '',
-  loading: 'eager',
+  originalAlt: "",
+  originalHeight: "",
+  originalWidth: "",
+  originalTitle: "",
+  sizes: "",
+  srcSet: "",
+  loading: "eager",
 };
 
 const Item = React.memo((props) => {
@@ -29,8 +29,8 @@ const Item = React.memo((props) => {
     sizes,
     srcSet,
     loading,
-  } = {...defaultProps, ...props};
-  const itemSrc = isFullscreen ? (fullscreen || original) : original;
+  } = { ...defaultProps, ...props };
+  const itemSrc = isFullscreen ? fullscreen || original : original;
 
   return (
     <React.Fragment>
@@ -43,22 +43,18 @@ const Item = React.memo((props) => {
         width={originalWidth}
         sizes={sizes}
         title={originalTitle}
-        onLoad={event => handleImageLoaded(event, original)}
+        onLoad={(event) => handleImageLoaded(event, original)}
         onError={onImageError}
         loading={loading}
       />
-      {
-        description && (
-          <span className="image-gallery-description">
-            {description}
-          </span>
-        )
-      }
+      {description && (
+        <span className="image-gallery-description">{description}</span>
+      )}
     </React.Fragment>
   );
 });
 
-Item.displayName = 'Item';
+Item.displayName = "Item";
 
 Item.propTypes = {
   description: string,

package/src/{SVG.js → components/SVG.jsx}

@@ -1,10 +1,14 @@
-import React from 'react';
-import { number, oneOf, string } from 'prop-types';
+import React from "react";
+import { number, oneOf, string } from "prop-types";
 
 const left = <polyline points="15 18 9 12 15 6" />;
 const right = <polyline points="9 18 15 12 9 6" />;
-const maximize = <path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3" />;
-const minimize = <path d="M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3" />;
+const maximize = (
+  <path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3" />
+);
+const minimize = (
+  <path d="M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3" />
+);
 const play = <polygon points="5 3 19 12 5 21 5 3" />;
 const pause = (
   <React.Fragment>
@@ -24,15 +28,11 @@ const iconMapper = {
 
 const defaultProps = {
   strokeWidth: 1,
-  viewBox: '0 0 24 24',
+  viewBox: "0 0 24 24",
 };
 
 const SVG = (props) => {
-  const {
-    strokeWidth,
-    viewBox,
-    icon,
-  } = {...defaultProps, ...props};
+  const { strokeWidth, viewBox, icon } = { ...defaultProps, ...props };
   return (
     <svg
       className="image-gallery-svg"
@@ -52,14 +52,8 @@ const SVG = (props) => {
 SVG.propTypes = {
   strokeWidth: number,
   viewBox: string,
-  icon: oneOf([
-    'left',
-    'right',
-    'maximize',
-    'minimize',
-    'play',
-    'pause',
-  ]).isRequired,
+  icon: oneOf(["left", "right", "maximize", "minimize", "play", "pause"])
+    .isRequired,
 };
 
 export default SVG;

package/src/{SwipeWrapper.js → components/SwipeWrapper.jsx}

@@ -1,27 +1,19 @@
-import React from 'react';
-import {
-  string,
-  node,
-  number,
-  func,
-} from 'prop-types';
-import { useSwipeable } from 'react-swipeable';
+import React from "react";
+import { string, node, number, func } from "prop-types";
+import { useSwipeable } from "react-swipeable";
 
 const defaultProps = {
-  className: '',
+  className: "",
   delta: 0,
   onSwiping: () => {},
   onSwiped: () => {},
 };
 
 const SwipeWrapper = (props) => {
-  const {
-    children,
-    className,
-    delta,
-    onSwiping,
-    onSwiped,
-  } = {...defaultProps, ...props};
+  const { children, className, delta, onSwiping, onSwiped } = {
+    ...defaultProps,
+    ...props,
+  };
   const swipeHandlers = useSwipeable({
     delta,
     onSwiping,

package/src/{controls/Fullscreen.js → components/controls/Fullscreen.jsx}

@@ -1,11 +1,8 @@
-import React from 'react';
-import { bool, func } from 'prop-types';
-import SVG from 'src/SVG';
+import React from "react";
+import { bool, func } from "prop-types";
+import SVG from "src/components/SVG";
 
-const Fullscreen = React.memo(({
-  isFullscreen,
-  onClick,
-}) => {
+const Fullscreen = React.memo(({ isFullscreen, onClick }) => {
   return (
     <button
       type="button"
@@ -13,17 +10,16 @@ const Fullscreen = React.memo(({
       onClick={onClick}
       aria-label="Open Fullscreen"
     >
-      <SVG strokeWidth={2} icon={isFullscreen ? 'minimize' : 'maximize'} />
+      <SVG strokeWidth={2} icon={isFullscreen ? "minimize" : "maximize"} />
     </button>
   );
 });
 
-Fullscreen.displayName = 'Fullscreen';
+Fullscreen.displayName = "Fullscreen";
 
 Fullscreen.propTypes = {
   isFullscreen: bool.isRequired,
   onClick: func.isRequired,
 };
 
-
 export default Fullscreen;

package/src/{controls/LeftNav.js → components/controls/LeftNav.jsx}

@@ -1,11 +1,8 @@
-import React from 'react';
-import { bool, func } from 'prop-types';
-import SVG from 'src/SVG';
+import React from "react";
+import { bool, func } from "prop-types";
+import SVG from "src/components/SVG";
 
-const LeftNav = React.memo(({
-  disabled,
-  onClick,
-}) => {
+const LeftNav = React.memo(({ disabled, onClick }) => {
   return (
     <button
       type="button"
@@ -19,12 +16,11 @@ const LeftNav = React.memo(({
   );
 });
 
-LeftNav.displayName = 'LeftNav';
+LeftNav.displayName = "LeftNav";
 
 LeftNav.propTypes = {
   disabled: bool.isRequired,
   onClick: func.isRequired,
 };
 
-
 export default LeftNav;

package/src/{controls/PlayPause.js → components/controls/PlayPause.jsx}

@@ -1,11 +1,8 @@
-import React from 'react';
-import { bool, func } from 'prop-types';
-import SVG from 'src/SVG';
+import React from "react";
+import { bool, func } from "prop-types";
+import SVG from "src/components/SVG";
 
-const PlayPause = React.memo(({
-  isPlaying,
-  onClick,
-}) => {
+const PlayPause = React.memo(({ isPlaying, onClick }) => {
   return (
     <button
       type="button"
@@ -13,17 +10,16 @@ const PlayPause = React.memo(({
       onClick={onClick}
       aria-label="Play or Pause Slideshow"
     >
-      <SVG strokeWidth={2} icon={isPlaying ? 'pause' : 'play'} />
+      <SVG strokeWidth={2} icon={isPlaying ? "pause" : "play"} />
     </button>
   );
 });
 
-PlayPause.displayName = 'PlayPause';
+PlayPause.displayName = "PlayPause";
 
 PlayPause.propTypes = {
   isPlaying: bool.isRequired,
   onClick: func.isRequired,
 };
 
-
 export default PlayPause;

package/src/{controls/RightNav.js → components/controls/RightNav.jsx}

@@ -1,11 +1,8 @@
-import React from 'react';
-import { bool, func } from 'prop-types';
-import SVG from 'src/SVG';
+import React from "react";
+import { bool, func } from "prop-types";
+import SVG from "src/components/SVG";
 
-const RightNav = React.memo(({
-  disabled,
-  onClick,
-}) => {
+const RightNav = React.memo(({ disabled, onClick }) => {
   return (
     <button
       type="button"
@@ -19,12 +16,11 @@ const RightNav = React.memo(({
   );
 });
 
-RightNav.displayName = 'RightNav';
+RightNav.displayName = "RightNav";
 
 RightNav.propTypes = {
   disabled: bool.isRequired,
   onClick: func.isRequired,
 };
 
-
 export default RightNav;

package/webpack.build.js

@@ -1,57 +1,56 @@
-
-const path = require('path');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const RemovePlugin = require('remove-files-webpack-plugin');
+const path = require("path");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const RemovePlugin = require("remove-files-webpack-plugin");
 
 const config = {
-  mode: 'production',
+  mode: "production",
 };
 
 const jsOutput = Object.assign({}, config, {
-  entry: [ './src/ImageGallery.js', ],
+  entry: ["./src/components/ImageGallery.jsx"],
   output: {
-    path: path.resolve(__dirname, 'build'),
-    filename: 'image-gallery.js',
-    library: 'ImageGallery',
-    globalObject: 'this',
-    libraryTarget: 'umd',
+    path: path.resolve(__dirname, "build"),
+    filename: "image-gallery.js",
+    library: "ImageGallery",
+    globalObject: "this",
+    libraryTarget: "umd",
   },
   resolve: {
     alias: {
-      src: path.resolve(__dirname, 'src/'),
+      src: path.resolve(__dirname, "src/"),
     },
-    extensions: ['.js']
+    extensions: [".js", ".jsx"],
   },
   module: {
     rules: [
       {
-        test: /\.js$/,
+        test: /\.(js|jsx)$/,
         exclude: /node_modules/,
-        loader: 'babel-loader',
-      }
-    ]
+        loader: "babel-loader",
+      },
+    ],
   },
   externals: {
     // Don't bundle react or react-dom
     react: {
-      commonjs: 'react',
-      commonjs2: 'react',
-      amd: 'react',
-      root: 'React',
+      commonjs: "react",
+      commonjs2: "react",
+      amd: "react",
+      root: "React",
     },
-    'react-dom': {
-      commonjs: 'react-dom',
-      commonjs2: 'react-dom',
-      amd: 'react-dom',
-      root: 'ReactDOM',
+    "react-dom": {
+      commonjs: "react-dom",
+      commonjs2: "react-dom",
+      amd: "react-dom",
+      root: "ReactDOM",
     },
   },
 });
 
 const cssOutput = Object.assign({}, config, {
-  entry: './styles/scss/image-gallery.scss',
+  entry: "./styles/scss/image-gallery.scss",
   output: {
-    path: path.resolve(__dirname, 'styles/css'),
+    path: path.resolve(__dirname, "styles/css"),
   },
   module: {
     rules: [
@@ -60,16 +59,16 @@ const cssOutput = Object.assign({}, config, {
         use: [
           MiniCssExtractPlugin.loader,
           // Translates CSS into CommonJS
-          'css-loader',
+          "css-loader",
           // Compiles Sass to CSS
-          'sass-loader',
+          "sass-loader",
         ],
-      }
-    ]
+      },
+    ],
   },
   plugins: [
     new MiniCssExtractPlugin({
-      filename: 'image-gallery.css',
+      filename: "image-gallery.css",
     }),
     new RemovePlugin({
       /**
@@ -78,36 +77,36 @@ const cssOutput = Object.assign({}, config, {
       after: {
         test: [
           {
-            folder: 'styles/css',
+            folder: "styles/css",
             method: (absoluteItemPath) => {
-              return new RegExp(/\.js$/, 'm').test(absoluteItemPath);
+              return new RegExp(/\.js$/, "m").test(absoluteItemPath);
             },
-          }
-        ]
-      }
+          },
+        ],
+      },
     }),
   ],
 });
 
 const jsDemoOutput = Object.assign({}, config, {
-  entry: [ './example/app.js', ],
+  entry: ["./example/App.jsx"],
   output: {
-    path: path.resolve(__dirname, 'demo'),
-    filename: 'demo.mini.js',
+    path: path.resolve(__dirname, "demo"),
+    filename: "demo.mini.js",
   },
   resolve: {
     alias: {
-      src: path.resolve(__dirname, 'src/'),
+      src: path.resolve(__dirname, "src/"),
     },
-    extensions: ['.js']
+    extensions: [".js", ".jsx"],
   },
   module: {
     rules: [
       {
-        test: /\.js$/,
-        loader: 'babel-loader',
-      }
-    ]
+        test: /\.(js|jsx)$/,
+        loader: "babel-loader",
+      },
+    ],
   },
   plugins: [
     new RemovePlugin({
@@ -117,21 +116,21 @@ const jsDemoOutput = Object.assign({}, config, {
       after: {
         test: [
           {
-            folder: 'demo',
+            folder: "demo",
             method: (absoluteItemPath) => {
               return new RegExp(/\.txt$/).test(absoluteItemPath);
             },
-          }
-        ]
-      }
+          },
+        ],
+      },
     }),
   ],
 });
 
 const cssDemoOutput = Object.assign({}, config, {
-  entry: ['./styles/scss/image-gallery.scss', './example/app.css'],
+  entry: ["./styles/scss/image-gallery.scss", "./example/App.css"],
   output: {
-    path: path.resolve(__dirname, 'demo'),
+    path: path.resolve(__dirname, "demo"),
   },
   module: {
     rules: [
@@ -140,16 +139,16 @@ const cssDemoOutput = Object.assign({}, config, {
         use: [
           MiniCssExtractPlugin.loader,
           // Translates CSS into CommonJS
-          'css-loader',
+          "css-loader",
           // Compiles Sass to CSS
-          'sass-loader',
+          "sass-loader",
         ],
-      }
-    ]
+      },
+    ],
   },
   plugins: [
     new MiniCssExtractPlugin({
-      filename: 'demo.mini.css',
+      filename: "demo.mini.css",
     }),
     new RemovePlugin({
       /**
@@ -158,13 +157,13 @@ const cssDemoOutput = Object.assign({}, config, {
       after: {
         test: [
           {
-            folder: 'demo',
+            folder: "demo",
             method: (absoluteItemPath) => {
               return new RegExp(/\.js$/).test(absoluteItemPath);
             },
-          }
-        ]
-      }
+          },
+        ],
+      },
     }),
   ],
 });

package/webpack.config.js

@@ -1,25 +1,28 @@
-
-const path = require('path');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const path = require("path");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
 module.exports = {
-  entry: ['./example/app.js', './example/app.css', './styles/scss/image-gallery.scss'],
+  entry: [
+    "./example/App.jsx",
+    "./example/App.css",
+    "./styles/scss/image-gallery.scss",
+  ],
   output: {
-    path: path.resolve(__dirname, 'example'),
-    filename: 'example.js',
-    publicPath: '/dist/'
+    path: path.resolve(__dirname, "example"),
+    filename: "example.js",
+    publicPath: "/dist/",
   },
   resolve: {
-    extensions: ['.js'],
+    extensions: [".js", ".jsx"],
     alias: {
-      src: path.resolve(__dirname, 'src/'),
+      src: path.resolve(__dirname, "src/"),
     },
   },
   module: {
     rules: [
       {
         test: /\.(js|jsx)$/,
-        loader: 'babel-loader',
+        loader: "babel-loader",
       },
       {
         test: /\.(css|scss)$/i,
@@ -31,19 +34,19 @@ module.exports = {
           // Compiles Sass to CSS
           "sass-loader",
         ],
-      }
-    ]
+      },
+    ],
   },
   plugins: [
     new MiniCssExtractPlugin({
-      filename: 'image-gallery.css',
+      filename: "image-gallery.css",
     }),
   ],
   devServer: {
-    host: '0.0.0.0',
+    host: "0.0.0.0",
     port: 8001,
     historyApiFallback: {
-      rewrites: [{ from: /\//, to: '/example/index.html' }],
+      rewrites: [{ from: /\//, to: "/example/index.html" }],
     },
   },
 };

package/.babelrc

@@ -1 +0,0 @@
-{ "presets": ["@babel/preset-env", "@babel/preset-react"] }

package/.notes

@@ -1,2 +0,0 @@
-Great carousel lib
-https://splidejs.com/integration/react-splide/

package/tests/ImageGallery.test.js

@@ -1,15 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-
-import ImageGallery from '../src/ImageGallery';
-
-describe('<ImageGallery />', () => {
-  const defaultProps = {
-    items: [],
-  };
-
-  it('matches snapshot', () => {
-    const component = shallow(<ImageGallery {...defaultProps} />);
-    expect(component).toMatchSnapshot();
-  });
-});

package/tests/__snapshots__/ImageGallery.test.js.snap

@@ -1,3 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<ImageGallery /> matches snapshot 1`] = `ShallowWrapper {}`;

package/tests/setupTestFramework.js

@@ -1,4 +0,0 @@
-import Adapter from 'enzyme-adapter-react-16';
-import { configure } from 'enzyme';
-
-configure({ adapter: new Adapter() });