├── .eslintignore
├── .npmignore
├── __mocks__
    └── fileMock.js
├── .travis.yml
├── src
    ├── index.js
    ├── constant.js
    ├── util.js
    ├── style.css
    ├── __tests__
    │   ├── react-image-lightbox.spec.js
    │   └── __snapshots__
    │   │   └── react-image-lightbox.spec.js.snap
    └── lightbox-react.js
├── test-config
    ├── shim.js
    └── test-setup.js
├── examples
    └── cats
    │   ├── images
    │       ├── 1.jpg
    │       ├── 2.jpg
    │       ├── 3.jpg
    │       ├── 4.jpg
    │       ├── 1_thumb.jpg
    │       ├── 2_thumb.jpg
    │       ├── 3_thumb.jpg
    │       └── 4_thumb.jpg
    │   ├── index.html
    │   ├── components
    │       └── video.js
    │   ├── stylesheets
    │       ├── app.css
    │       └── vendor
    │       │   ├── github-light.css
    │       │   └── stylesheet.css
    │   └── index.js
├── .eslintrc.json
├── svg
    ├── left_arrow.svg
    ├── right_arrow.svg
    ├── x.svg
    ├── zoom_out.svg
    └── zoom_in.svg
├── .gitignore
├── .babelrc
├── LICENSE
├── index.d.ts
├── package.json
├── webpack.config.js
└── README.md


/.eslintignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | build
3 | dist
4 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | bower.json
2 | src/examples
3 | svg
4 | 


--------------------------------------------------------------------------------
/__mocks__/fileMock.js:
--------------------------------------------------------------------------------
1 | module.exports = 'test-file-stub';
2 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 |   - 'node'
4 | script:
5 |   - npm test
6 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import Lightbox from './lightbox-react';
2 | 
3 | export default Lightbox;
4 | 


--------------------------------------------------------------------------------
/test-config/shim.js:
--------------------------------------------------------------------------------
1 | global.requestAnimationFrame = callback => {
2 |   setTimeout(callback, 0);
3 | };
4 | 


--------------------------------------------------------------------------------
/examples/cats/images/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/treyhuffine/lightbox-react/HEAD/examples/cats/images/1.jpg


--------------------------------------------------------------------------------
/examples/cats/images/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/treyhuffine/lightbox-react/HEAD/examples/cats/images/2.jpg


--------------------------------------------------------------------------------
/examples/cats/images/3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/treyhuffine/lightbox-react/HEAD/examples/cats/images/3.jpg


--------------------------------------------------------------------------------
/examples/cats/images/4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/treyhuffine/lightbox-react/HEAD/examples/cats/images/4.jpg


--------------------------------------------------------------------------------
/examples/cats/images/1_thumb.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/treyhuffine/lightbox-react/HEAD/examples/cats/images/1_thumb.jpg


--------------------------------------------------------------------------------
/examples/cats/images/2_thumb.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/treyhuffine/lightbox-react/HEAD/examples/cats/images/2_thumb.jpg


--------------------------------------------------------------------------------
/examples/cats/images/3_thumb.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/treyhuffine/lightbox-react/HEAD/examples/cats/images/3_thumb.jpg


--------------------------------------------------------------------------------
/examples/cats/images/4_thumb.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/treyhuffine/lightbox-react/HEAD/examples/cats/images/4_thumb.jpg


--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": ["airbnb", "prettier", "prettier/react"],
 3 |   "env": {
 4 |     "jest": true
 5 |   },
 6 |   "rules": {
 7 |     "react/jsx-filename-extension": 0
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------
/svg/left_arrow.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <svg xmlns="http://www.w3.org/2000/svg" width="20" height="34"><path d="m 19,3 -2,-2 -16,16 16,16 1,-1 -15,-15 15,-15 z" fill="#FFF"/></svg>
3 | 


--------------------------------------------------------------------------------
/svg/right_arrow.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <svg xmlns="http://www.w3.org/2000/svg" width="20" height="34"><path d="m 1,3 2,-2 16,16 -16,16 -1,-1 15,-15 -15,-15 z" fill="#FFF"/></svg>
3 | 


--------------------------------------------------------------------------------
/test-config/test-setup.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable import/no-extraneous-dependencies */
2 | import { configure } from 'enzyme';
3 | import Adapter from 'enzyme-adapter-react-16';
4 | 
5 | configure({ adapter: new Adapter() });
6 | 


--------------------------------------------------------------------------------
/svg/x.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path d="m 1,3 1.25,-1.25 7.5,7.5 7.5,-7.5 1.25,1.25 -7.5,7.5 7.5,7.5 -1.25,1.25 -7.5,-7.5 -7.5,7.5 -1.25,-1.25 7.5,-7.5 -7.5,-7.5 z" fill="#FFF"/></svg>
3 | 


--------------------------------------------------------------------------------
/svg/zoom_out.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20">
2 |   <g stroke="#fff" stroke-width="2" stroke-linecap="round">
3 |     <path d="M1 19l6-6"/>
4 |     <path d="M9 8h6"/>
5 |   </g>
6 |   <circle cx="12" cy="8" r="7" fill="none" stroke="#fff" stroke-width="2"/>
7 | </svg>
8 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | node_modules
 2 | coverage
 3 | npm-debug.log
 4 | 
 5 | # Editor and other tmp files
 6 | *.swp
 7 | *.un~
 8 | *.iml
 9 | *.ipr
10 | *.iws
11 | *.sublime-*
12 | .idea/
13 | *.DS_Store
14 | 
15 | # Build directories (Will be preserved by npm)
16 | dist
17 | build
18 | /style.css
19 | /style.css.map
20 | 


--------------------------------------------------------------------------------
/examples/cats/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en-us">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>React Image Lightbox by treyhuffine</title>
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 7 | </head>
 8 | <body>
 9 |     <div id="app"></div>
10 | </body>
11 | </html>
12 | 


--------------------------------------------------------------------------------
/svg/zoom_in.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20">
2 |   <g stroke="#fff" stroke-width="2" stroke-linecap="round">
3 |     <path d="M1 19l6-6"/>
4 |     <path d="M9 8h6"/>
5 |     <path d="M12 5v6"/>
6 |   </g>
7 |   <circle cx="12" cy="8" r="7" fill="none" stroke="#fff" stroke-width="2"/>
8 | </svg>
9 | 


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     [
 4 |       "env",
 5 |       {
 6 |         "targets": {
 7 |           "browsers": ["last 2 versions", "ie >= 9"]
 8 |         }
 9 |       }
10 |     ],
11 |     "react"
12 |   ],
13 |   "plugins": [
14 |     "transform-object-rest-spread",
15 |     "babel-plugin-transform-exponentiation-operator",
16 |     "react-hot-loader/babel"
17 |   ]
18 | }
19 | 


--------------------------------------------------------------------------------
/examples/cats/components/video.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | const Video = () => (
 4 |   <iframe
 5 |     title="cats"
 6 |     width="560"
 7 |     height="315"
 8 |     src="https://www.youtube.com/embed/5dsGWM5XGdg"
 9 |     style={{
10 |       maxWidth: '97%',
11 |       position: 'absolute',
12 |       left: 0,
13 |       right: 0,
14 |       margin: 'auto',
15 |       top: '50%',
16 |       transform: 'translateY(-50%)',
17 |     }}
18 |   />
19 | );
20 | 
21 | export default Video;
22 | 


--------------------------------------------------------------------------------
/examples/cats/stylesheets/app.css:
--------------------------------------------------------------------------------
 1 | .page-header {
 2 |   padding: 1rem 6rem;
 3 | }
 4 | 
 5 | .main-content {
 6 |   box-sizing: border-box;
 7 | }
 8 | 
 9 | .creditLink {
10 |   color: #1e6bb8;
11 |   text-decoration: none;
12 | }
13 | .creditLink:hover {
14 |   text-decoration: underline;
15 | }
16 | 
17 | .demoButton {
18 |   border-radius: 5px;
19 |   font-size: 1.2rem;
20 |   cursor: pointer;
21 |   background-color: #303030;
22 |   border: none;
23 |   color: #fff;
24 |   outline: none;
25 |   padding: 8px 15px;
26 | }
27 | .demoButton:hover {
28 |   background-color: #000;
29 |   text-shadow: 0 0 6px #fff;
30 | }
31 | .demoButton:active {
32 |   text-shadow: 0 0 6px #fff, 0 0 6px #fff, 0 0 6px #fff;
33 | }
34 | .demoButton:focus {
35 |   box-shadow: 0 0 3px 2px #999;
36 | }
37 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2017 Trey Huffine
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/constant.js:
--------------------------------------------------------------------------------
 1 | // Min image zoom level
 2 | export const MIN_ZOOM_LEVEL = 0;
 3 | 
 4 | // Max image zoom level
 5 | export const MAX_ZOOM_LEVEL = 300;
 6 | 
 7 | // Size ratio between previous and next zoom levels
 8 | export const ZOOM_RATIO = 1.007;
 9 | 
10 | // How much to increase/decrease the zoom level when the zoom buttons are clicked
11 | export const ZOOM_BUTTON_INCREMENT_SIZE = 100;
12 | 
13 | // Used to judge the amount of horizontal scroll needed to initiate a image move
14 | export const WHEEL_MOVE_X_THRESHOLD = 200;
15 | 
16 | // Used to judge the amount of vertical scroll needed to initiate a zoom action
17 | export const WHEEL_MOVE_Y_THRESHOLD = 1;
18 | 
19 | export const KEYS = {
20 |   ESC: 27,
21 |   LEFT_ARROW: 37,
22 |   RIGHT_ARROW: 39,
23 | };
24 | 
25 | // Actions
26 | export const ACTION_NONE = 0;
27 | export const ACTION_MOVE = 1;
28 | export const ACTION_SWIPE = 2;
29 | export const ACTION_PINCH = 3;
30 | export const ACTION_ROTATE = 4;
31 | 
32 | // Events source
33 | export const SOURCE_ANY = 0;
34 | export const SOURCE_MOUSE = 1;
35 | export const SOURCE_TOUCH = 2;
36 | export const SOURCE_POINTER = 3;
37 | 
38 | // Minimal swipe distance
39 | export const MIN_SWIPE_DISTANCE = 200;
40 | 


--------------------------------------------------------------------------------
/index.d.ts:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | 
 3 | export interface ILightBoxProps {
 4 |     mainSrc: string;
 5 |     nextSrc?: string;
 6 |     prevSrc?: string;
 7 |     mainSrcThumbnail?: string;
 8 |     prevSrcThumbnail?: string;
 9 |     nextSrcThumbnail?: string;
10 |     onCloseRequest(): void;
11 |     onMovePrevRequest?(): void;
12 |     onMoveNextRequest?(): void;
13 |     onImageLoad?(): void;
14 |     onImageLoadError?(): void;
15 |     imageLoadErrorMessage?: React.ReactNode;
16 |     onAfterOpen?(): void;
17 |     discourageDownloads?: boolean;
18 |     animationDisabled?: boolean;
19 |     animationOnKeyInput?: boolean;
20 |     animationDuration?: number;
21 |     keyRepeatLimit?: number;
22 |     keyRepeatKeyupBonus?: number;
23 |     imageTitle?: string;
24 |     imageCaption?: string;
25 |     imageCrossOrigin?: string;
26 |     toolbarButtons?: React.ReactNode[];
27 |     reactModalStyle?: any;
28 |     reactModalProps?: any;
29 |     imagePadding?: number;
30 |     clickOutsideToClose?: boolean;
31 |     enableZoom?: boolean;
32 |     wrapperClassName?: string;
33 |     nextLabel?: string;
34 |     prevLabel?: string;
35 |     zoomInLabel?: string;
36 |     zoomOutLabel?: string;
37 |     closeLabel?: string;
38 | }
39 | 
40 | export default class Lightbox extends React.Component<ILightBoxProps, never> { }
41 | 


--------------------------------------------------------------------------------
/src/util.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Placeholder for future translate functionality
 3 |  */
 4 | export function translate(str, replaceStrings = null) {
 5 |   if (!str) {
 6 |     return '';
 7 |   }
 8 | 
 9 |   let translated = str;
10 |   if (replaceStrings) {
11 |     Object.keys(replaceStrings).forEach(placeholder => {
12 |       translated = translated.replace(placeholder, replaceStrings[placeholder]);
13 |     });
14 |   }
15 | 
16 |   return translated;
17 | }
18 | 
19 | export function getWindowWidth() {
20 |   return typeof global.window !== 'undefined' ? global.window.innerWidth : 0;
21 | }
22 | 
23 | export function getWindowHeight() {
24 |   return typeof global.window !== 'undefined' ? global.window.innerHeight : 0;
25 | }
26 | 
27 | // Get the highest window context that isn't cross-origin
28 | // (When in an iframe)
29 | export function getHighestSafeWindowContext(self = global.window.self) {
30 |   // If we reached the top level, return self
31 |   if (self === global.window.top) {
32 |     return self;
33 |   }
34 | 
35 |   const getOrigin = href => href.match(/(.*\/\/.*?)(\/|$)/)[1];
36 | 
37 |   // If parent is the same origin, we can move up one context
38 |   // Reference: https://stackoverflow.com/a/21965342/1601953
39 |   if (getOrigin(self.location.href) === getOrigin(self.document.referrer)) {
40 |     return getHighestSafeWindowContext(self.parent);
41 |   }
42 | 
43 |   // If a different origin, we consider the current level
44 |   // as the top reachable one
45 |   return self;
46 | }
47 | 


--------------------------------------------------------------------------------
/examples/cats/stylesheets/vendor/github-light.css:
--------------------------------------------------------------------------------
  1 | /*
  2 |    Copyright 2014 GitHub Inc.
  3 | 
  4 |    Licensed under the Apache License, Version 2.0 (the "License");
  5 |    you may not use this file except in compliance with the License.
  6 |    You may obtain a copy of the License at
  7 | 
  8 |        http://www.apache.org/licenses/LICENSE-2.0
  9 | 
 10 |    Unless required by applicable law or agreed to in writing, software
 11 |    distributed under the License is distributed on an "AS IS" BASIS,
 12 |    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 13 |    See the License for the specific language governing permissions and
 14 |    limitations under the License.
 15 | 
 16 | */
 17 | 
 18 | .pl-c /* comment */ {
 19 |   color: #969896;
 20 | }
 21 | 
 22 | .pl-c1      /* constant, markup.raw, meta.diff.header, meta.module-reference, meta.property-name, support, support.constant, support.variable, variable.other.constant */,
 23 | .pl-s .pl-v /* string variable */ {
 24 |   color: #0086b3;
 25 | }
 26 | 
 27 | .pl-e  /* entity */,
 28 | .pl-en /* entity.name */ {
 29 |   color: #795da3;
 30 | }
 31 | 
 32 | .pl-s .pl-s1 /* string source */,
 33 | .pl-smi      /* storage.modifier.import, storage.modifier.package, storage.type.java, variable.other, variable.parameter.function */ {
 34 |   color: #333;
 35 | }
 36 | 
 37 | .pl-ent /* entity.name.tag */ {
 38 |   color: #63a35c;
 39 | }
 40 | 
 41 | .pl-k /* keyword, storage, storage.type */ {
 42 |   color: #a71d5d;
 43 | }
 44 | 
 45 | .pl-pds              /* punctuation.definition.string, string.regexp.character-class */,
 46 | .pl-s                /* string */,
 47 | .pl-s .pl-pse .pl-s1 /* string punctuation.section.embedded source */,
 48 | .pl-sr               /* string.regexp */,
 49 | .pl-sr .pl-cce       /* string.regexp constant.character.escape */,
 50 | .pl-sr .pl-sra       /* string.regexp string.regexp.arbitrary-repitition */,
 51 | .pl-sr .pl-sre       /* string.regexp source.ruby.embedded */ {
 52 |   color: #183691;
 53 | }
 54 | 
 55 | .pl-v /* variable */ {
 56 |   color: #ed6a43;
 57 | }
 58 | 
 59 | .pl-id /* invalid.deprecated */ {
 60 |   color: #b52a1d;
 61 | }
 62 | 
 63 | .pl-ii /* invalid.illegal */ {
 64 |   background-color: #b52a1d;
 65 |   color: #f8f8f8;
 66 | }
 67 | 
 68 | .pl-sr .pl-cce /* string.regexp constant.character.escape */ {
 69 |   color: #63a35c;
 70 |   font-weight: bold;
 71 | }
 72 | 
 73 | .pl-ml /* markup.list */ {
 74 |   color: #693a17;
 75 | }
 76 | 
 77 | .pl-mh        /* markup.heading */,
 78 | .pl-mh .pl-en /* markup.heading entity.name */,
 79 | .pl-ms        /* meta.separator */ {
 80 |   color: #1d3e81;
 81 |   font-weight: bold;
 82 | }
 83 | 
 84 | .pl-mq /* markup.quote */ {
 85 |   color: #008080;
 86 | }
 87 | 
 88 | .pl-mi /* markup.italic */ {
 89 |   color: #333;
 90 |   font-style: italic;
 91 | }
 92 | 
 93 | .pl-mb /* markup.bold */ {
 94 |   color: #333;
 95 |   font-weight: bold;
 96 | }
 97 | 
 98 | .pl-md /* markup.deleted, meta.diff.header.from-file */ {
 99 |   background-color: #ffecec;
100 |   color: #bd2c00;
101 | }
102 | 
103 | .pl-mi1 /* markup.inserted, meta.diff.header.to-file */ {
104 |   background-color: #eaffea;
105 |   color: #55a532;
106 | }
107 | 
108 | .pl-mdr /* meta.diff.range */ {
109 |   color: #795da3;
110 |   font-weight: bold;
111 | }
112 | 
113 | .pl-mo /* meta.output */ {
114 |   color: #1d3e81;
115 | }
116 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "lightbox-react",
  3 |   "version": "0.3.8",
  4 |   "description": "Lightbox for React components or images",
  5 |   "scripts": {
  6 |     "build": "npm run clean && cross-env NODE_ENV=production TARGET=umd webpack --bail",
  7 |     "build:demo": "npm run clean:demo && cross-env NODE_ENV=production TARGET=demo webpack --bail",
  8 |     "clean": "rimraf dist style.css style.css.map",
  9 |     "clean:demo": "rimraf build",
 10 |     "start": "cross-env NODE_ENV=development TARGET=development webpack-dev-server --inline --hot",
 11 |     "lint": "eslint .",
 12 |     "prettier": "prettier --single-quote --trailing-comma es5 --write \"./**/*.{md,js,css}\" \"!./{build,dist}/**\" \"!./style.css*\"",
 13 |     "prepublishOnly": "npm run lint && npm run test && npm run build",
 14 |     "test": "jest",
 15 |     "test:watch": "jest --watchAll",
 16 |     "deploy": "npm run build:demo && gh-pages -d build"
 17 |   },
 18 |   "main": "dist/main.js",
 19 |   "typings": "index.d.ts",
 20 |   "files": [
 21 |     "dist",
 22 |     "index.d.ts",
 23 |     "style.css",
 24 |     "style.css.map"
 25 |   ],
 26 |   "repository": {
 27 |     "type": "git",
 28 |     "url": "https://github.com/treyhuffine/lightbox-react.git"
 29 |   },
 30 |   "homepage": "http://treyhuffine.com/lightbox-react",
 31 |   "bugs": "https://github.com/treyhuffine/lightbox-react/issues",
 32 |   "authors": [
 33 |     "Trey Huffine",
 34 |     "Chris Fritz <forked>"
 35 |   ],
 36 |   "license": "MIT",
 37 |   "jest": {
 38 |     "testURL": "http://localhost",
 39 |     "setupTestFrameworkScriptFile": "./node_modules/jest-enzyme/lib/index.js",
 40 |     "setupFiles": [
 41 |       "./test-config/shim.js",
 42 |       "./test-config/test-setup.js"
 43 |     ],
 44 |     "moduleFileExtensions": [
 45 |       "js",
 46 |       "jsx",
 47 |       "json"
 48 |     ],
 49 |     "moduleDirectories": [
 50 |       "node_modules"
 51 |     ],
 52 |     "moduleNameMapper": {
 53 |       "\\.(css|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js"
 54 |     },
 55 |     "snapshotSerializers": [
 56 |       "enzyme-to-json/serializer"
 57 |     ]
 58 |   },
 59 |   "browserslist": [
 60 |     "IE >= 11",
 61 |     "last 2 versions",
 62 |     "> 1%"
 63 |   ],
 64 |   "dependencies": {
 65 |     "is-react": "^1.3.2",
 66 |     "prop-types": "^15.6.1",
 67 |     "react-modal": "^3.4.4"
 68 |   },
 69 |   "peerDependencies": {
 70 |     "react": "^15.5.0 || ^16.0.0",
 71 |     "react-dom": "^15.5.0 || ^16.0.0"
 72 |   },
 73 |   "devDependencies": {
 74 |     "autoprefixer": "^8.4.1",
 75 |     "babel-cli": "^6.10.1",
 76 |     "babel-core": "^6.26.3",
 77 |     "babel-loader": "^7.1.4",
 78 |     "babel-plugin-transform-exponentiation-operator": "^6.8.0",
 79 |     "babel-plugin-transform-object-rest-spread": "^6.8.0",
 80 |     "babel-preset-env": "^1.6.1",
 81 |     "babel-preset-react": "^6.11.1",
 82 |     "coveralls": "^3.0.1",
 83 |     "cross-env": "^5.1.4",
 84 |     "css-loader": "^0.28.11",
 85 |     "enzyme": "^3.3.0",
 86 |     "enzyme-adapter-react-16": "^1.1.1",
 87 |     "enzyme-to-json": "^3.3.3",
 88 |     "eslint": "^4.19.1",
 89 |     "eslint-config-airbnb": "^16.1.0",
 90 |     "eslint-config-prettier": "^2.9.0",
 91 |     "eslint-plugin-import": "^2.11.0",
 92 |     "eslint-plugin-jsx-a11y": "^6.0.3",
 93 |     "eslint-plugin-react": "^7.7.0",
 94 |     "extract-text-webpack-plugin": "^4.0.0-beta.0",
 95 |     "file-loader": "^1.1.11",
 96 |     "gh-pages": "^1.1.0",
 97 |     "html-webpack-plugin": "^3.2.0",
 98 |     "jest": "^22.4.3",
 99 |     "jest-enzyme": "^6.0.0",
100 |     "postcss-loader": "^2.1.5",
101 |     "prettier": "^1.12.1",
102 |     "react": "^16.3.2",
103 |     "react-dom": "^16.3.2",
104 |     "react-hot-loader": "^4.1.2",
105 |     "rimraf": "^2.5.3",
106 |     "style-loader": "^0.21.0",
107 |     "uglifyjs-webpack-plugin": "^1.2.5",
108 |     "webpack": "^4.44.1",
109 |     "webpack-cli": "^3.3.12",
110 |     "webpack-dev-server": "^3.11.0",
111 |     "webpack-node-externals": "^1.7.2"
112 |   },
113 |   "keywords": [
114 |     "react",
115 |     "react-component",
116 |     "video",
117 |     "image",
118 |     "component",
119 |     "lightbox"
120 |   ]
121 | }
122 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
  1 | const path = require('path');
  2 | const webpack = require('webpack');
  3 | const autoprefixer = require('autoprefixer');
  4 | const nodeExternals = require('webpack-node-externals');
  5 | const HtmlWebpackPlugin = require('html-webpack-plugin');
  6 | const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
  7 | const ExtractTextPlugin = require('extract-text-webpack-plugin');
  8 | 
  9 | const target = process.env.TARGET || 'umd';
 10 | 
 11 | const styleLoader = {
 12 |   loader: 'style-loader',
 13 |   options: { insertAt: 'top' },
 14 | };
 15 | 
 16 | const fileLoader = {
 17 |   loader: 'file-loader',
 18 |   options: { name: 'static/[name].[ext]' },
 19 | };
 20 | 
 21 | const postcssLoader = {
 22 |   loader: 'postcss-loader',
 23 |   options: {
 24 |     plugins: () => [autoprefixer()],
 25 |   },
 26 | };
 27 | 
 28 | const cssLoader = {
 29 |   loader: 'css-loader',
 30 |   options: {
 31 |     importLoaders: true,
 32 |   },
 33 | };
 34 | 
 35 | const defaultCssLoaders = [cssLoader, postcssLoader];
 36 | 
 37 | const cssLoaders =
 38 |   target !== 'development' && target !== 'demo'
 39 |     ? ExtractTextPlugin.extract({
 40 |         fallback: styleLoader,
 41 |         use: defaultCssLoaders,
 42 |       })
 43 |     : [styleLoader, ...defaultCssLoaders];
 44 | 
 45 | const config = {
 46 |   mode: 'production',
 47 |   entry: { 'dist/main': './src/index' },
 48 |   output: {
 49 |     path: __dirname,
 50 |     filename: '[name].js',
 51 |     // See https://github.com/webpack/webpack/issues/6522
 52 |     globalObject: "typeof self !== 'undefined' ? self : this",
 53 |     libraryTarget: 'umd',
 54 |     library: 'ReactImageLightbox',
 55 |   },
 56 |   devtool: 'source-map',
 57 |   plugins: [
 58 |     new webpack.EnvironmentPlugin({ NODE_ENV: 'production' }),
 59 |     new webpack.optimize.OccurrenceOrderPlugin(),
 60 |     new ExtractTextPlugin('style.css'),
 61 |   ],
 62 |   module: {
 63 |     rules: [
 64 |       {
 65 |         test: /\.jsx?$/,
 66 |         use: ['babel-loader'],
 67 |         exclude: path.join(__dirname, 'node_modules'),
 68 |       },
 69 |       {
 70 |         test: /\.css$/,
 71 |         use: cssLoaders,
 72 |         exclude: [path.join(__dirname, 'examples')],
 73 |       },
 74 |       {
 75 |         test: /\.css$/,
 76 |         use: [styleLoader, ...defaultCssLoaders],
 77 |         include: path.join(__dirname, 'examples'),
 78 |       },
 79 |     ],
 80 |   },
 81 | };
 82 | 
 83 | switch (target) {
 84 |   case 'umd':
 85 |     // Exclude library dependencies from the bundle
 86 |     config.externals = [
 87 |       nodeExternals({
 88 |         // load non-javascript files with extensions, presumably via loaders
 89 |         whitelist: [/\.(?!(?:jsx?|json)$).{1,5}$/i],
 90 |       }),
 91 |     ];
 92 | 
 93 |     // Keep the minimizer from mangling variable names
 94 |     // (we keep minimization enabled to remove dead code)
 95 |     config.optimization = {
 96 |       minimizer: [
 97 |         new UglifyJSPlugin({
 98 |           uglifyOptions: {
 99 |             mangle: false,
100 |             compress: {
101 |               warnings: false,
102 |             },
103 |             output: {
104 |               beautify: true,
105 |               comments: true,
106 |             },
107 |           },
108 |         }),
109 |       ],
110 |     };
111 |     break;
112 |   case 'development':
113 |     config.mode = 'development';
114 |     config.devtool = 'eval-source-map';
115 |     config.module.rules.push({
116 |       test: /\.(jpe?g|png|gif|ico|svg)$/,
117 |       use: [fileLoader],
118 |       exclude: path.join(__dirname, 'node_modules'),
119 |     });
120 |     config.entry = ['react-hot-loader/patch', './examples/cats/index'];
121 |     config.output = {
122 |       path: path.join(__dirname, 'build'),
123 |       filename: 'static/[name].js',
124 |     };
125 |     config.plugins = [
126 |       new HtmlWebpackPlugin({
127 |         inject: true,
128 |         template: './examples/cats/index.html',
129 |       }),
130 |       new webpack.EnvironmentPlugin({ NODE_ENV: 'development' }),
131 |       new webpack.NoEmitOnErrorsPlugin(),
132 |     ];
133 |     config.devServer = {
134 |       contentBase: path.join(__dirname, 'build'),
135 |       port: process.env.PORT || 3001,
136 |       host: '0.0.0.0',
137 |       disableHostCheck: true,
138 |       stats: 'minimal',
139 |     };
140 | 
141 |     break;
142 |   case 'demo':
143 |     config.module.rules.push({
144 |       test: /\.(jpe?g|png|gif|ico|svg)$/,
145 |       use: [fileLoader],
146 |       exclude: path.join(__dirname, 'node_modules'),
147 |     });
148 |     config.entry = './examples/cats/index';
149 |     config.output = {
150 |       path: path.join(__dirname, 'build'),
151 |       filename: 'static/[name].js',
152 |     };
153 |     config.plugins = [
154 |       new HtmlWebpackPlugin({
155 |         inject: true,
156 |         template: './examples/cats/index.html',
157 |       }),
158 |       new webpack.EnvironmentPlugin({ NODE_ENV: 'production' }),
159 |     ];
160 | 
161 |     break;
162 |   default:
163 | }
164 | 
165 | module.exports = config;
166 | 


--------------------------------------------------------------------------------
/examples/cats/stylesheets/vendor/stylesheet.css:
--------------------------------------------------------------------------------
  1 | body {
  2 |   padding: 0;
  3 |   margin: 0;
  4 | }
  5 | 
  6 | .btn {
  7 |   display: inline-block;
  8 |   margin-bottom: 1rem;
  9 |   color: rgba(255, 255, 255, 0.7);
 10 |   background-color: rgba(255, 255, 255, 0.08);
 11 |   border-color: rgba(255, 255, 255, 0.2);
 12 |   border-style: solid;
 13 |   border-width: 1px;
 14 |   border-radius: 0.3rem;
 15 |   transition: color 0.2s, background-color 0.2s, border-color 0.2s;
 16 | }
 17 | .btn + .btn {
 18 |   margin-left: 1rem;
 19 | }
 20 | 
 21 | .btn:hover {
 22 |   color: rgba(255, 255, 255, 0.8);
 23 |   text-decoration: none;
 24 |   background-color: rgba(255, 255, 255, 0.2);
 25 |   border-color: rgba(255, 255, 255, 0.3);
 26 | }
 27 | 
 28 | @media screen and (min-width: 64em) {
 29 |   .btn {
 30 |     padding: 0.75rem 1rem;
 31 |   }
 32 | }
 33 | 
 34 | @media screen and (min-width: 42em) and (max-width: 64em) {
 35 |   .btn {
 36 |     padding: 0.6rem 0.9rem;
 37 |     font-size: 0.9rem;
 38 |   }
 39 | }
 40 | 
 41 | @media screen and (max-width: 42em) {
 42 |   .btn {
 43 |     display: block;
 44 |     width: 100%;
 45 |     padding: 0.75rem;
 46 |     font-size: 0.9rem;
 47 |   }
 48 |   .btn + .btn {
 49 |     margin-top: 1rem;
 50 |     margin-left: 0;
 51 |   }
 52 | }
 53 | 
 54 | .page-header {
 55 |   color: #fff;
 56 |   text-align: center;
 57 |   background-color: #159957;
 58 |   background-image: linear-gradient(120deg, #155799, #159957);
 59 | }
 60 | 
 61 | @media screen and (min-width: 64em) {
 62 |   .page-header {
 63 |     padding: 1rem 6rem;
 64 |   }
 65 | }
 66 | 
 67 | @media screen and (min-width: 42em) and (max-width: 64em) {
 68 |   .page-header {
 69 |     padding: 1rem 4rem;
 70 |   }
 71 | }
 72 | 
 73 | @media screen and (max-width: 42em) {
 74 |   .page-header {
 75 |     padding: 1rem 1rem;
 76 |   }
 77 | }
 78 | 
 79 | .project-name {
 80 |   margin-top: 0;
 81 |   margin-bottom: 0.1rem;
 82 | }
 83 | 
 84 | @media screen and (min-width: 64em) {
 85 |   .project-name {
 86 |     font-size: 3.25rem;
 87 |   }
 88 | }
 89 | 
 90 | @media screen and (min-width: 42em) and (max-width: 64em) {
 91 |   .project-name {
 92 |     font-size: 2.25rem;
 93 |   }
 94 | }
 95 | 
 96 | @media screen and (max-width: 42em) {
 97 |   .project-name {
 98 |     font-size: 1.75rem;
 99 |   }
100 | }
101 | 
102 | .project-tagline {
103 |   margin-bottom: 2rem;
104 |   font-weight: normal;
105 |   opacity: 0.7;
106 | }
107 | 
108 | @media screen and (min-width: 64em) {
109 |   .project-tagline {
110 |     font-size: 1.25rem;
111 |   }
112 | }
113 | 
114 | @media screen and (min-width: 42em) and (max-width: 64em) {
115 |   .project-tagline {
116 |     font-size: 1.15rem;
117 |   }
118 | }
119 | 
120 | @media screen and (max-width: 42em) {
121 |   .project-tagline {
122 |     font-size: 1rem;
123 |   }
124 | }
125 | 
126 | .main-content :first-child {
127 |   margin-top: 0;
128 | }
129 | .main-content img {
130 |   max-width: 100%;
131 | }
132 | .main-content h1,
133 | .main-content h2,
134 | .main-content h3,
135 | .main-content h4,
136 | .main-content h5,
137 | .main-content h6 {
138 |   margin-top: 2rem;
139 |   margin-bottom: 1rem;
140 |   font-weight: normal;
141 |   color: #159957;
142 | }
143 | .main-content p {
144 |   margin-bottom: 1em;
145 | }
146 | .main-content code {
147 |   padding: 2px 4px;
148 |   font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
149 |   font-size: 0.9rem;
150 |   color: #383e41;
151 |   background-color: #f3f6fa;
152 |   border-radius: 0.3rem;
153 | }
154 | .main-content pre {
155 |   padding: 0.8rem;
156 |   margin-top: 0;
157 |   margin-bottom: 1rem;
158 |   font: 1rem Consolas, 'Liberation Mono', Menlo, Courier, monospace;
159 |   color: #567482;
160 |   word-wrap: normal;
161 |   background-color: #f3f6fa;
162 |   border: solid 1px #dce6f0;
163 |   border-radius: 0.3rem;
164 | }
165 | .main-content pre > code {
166 |   padding: 0;
167 |   margin: 0;
168 |   font-size: 0.9rem;
169 |   color: #567482;
170 |   word-break: normal;
171 |   white-space: pre;
172 |   background: transparent;
173 |   border: 0;
174 | }
175 | .main-content .highlight {
176 |   margin-bottom: 1rem;
177 | }
178 | .main-content .highlight pre {
179 |   margin-bottom: 0;
180 |   word-break: normal;
181 | }
182 | .main-content .highlight pre,
183 | .main-content pre {
184 |   padding: 0.8rem;
185 |   overflow: auto;
186 |   font-size: 0.9rem;
187 |   line-height: 1.45;
188 |   border-radius: 0.3rem;
189 | }
190 | .main-content pre code,
191 | .main-content pre tt {
192 |   display: inline;
193 |   max-width: initial;
194 |   padding: 0;
195 |   margin: 0;
196 |   overflow: initial;
197 |   line-height: inherit;
198 |   word-wrap: normal;
199 |   background-color: transparent;
200 |   border: 0;
201 | }
202 | .main-content pre code:before,
203 | .main-content pre code:after,
204 | .main-content pre tt:before,
205 | .main-content pre tt:after {
206 |   content: normal;
207 | }
208 | .main-content ul,
209 | .main-content ol {
210 |   margin-top: 0;
211 | }
212 | .main-content blockquote {
213 |   padding: 0 1rem;
214 |   margin-left: 0;
215 |   color: #819198;
216 |   border-left: 0.3rem solid #dce6f0;
217 | }
218 | .main-content blockquote > :first-child {
219 |   margin-top: 0;
220 | }
221 | .main-content blockquote > :last-child {
222 |   margin-bottom: 0;
223 | }
224 | .main-content table {
225 |   display: block;
226 |   width: 100%;
227 |   overflow: auto;
228 |   word-break: normal;
229 |   word-break: keep-all;
230 | }
231 | .main-content table th {
232 |   font-weight: bold;
233 | }
234 | .main-content table th,
235 | .main-content table td {
236 |   padding: 0.5rem 1rem;
237 |   border: 1px solid #e9ebec;
238 | }
239 | .main-content dl {
240 |   padding: 0;
241 | }
242 | .main-content dl dt {
243 |   padding: 0;
244 |   margin-top: 1rem;
245 |   font-size: 1rem;
246 |   font-weight: bold;
247 | }
248 | .main-content dl dd {
249 |   padding: 0;
250 |   margin-bottom: 1rem;
251 | }
252 | .main-content hr {
253 |   height: 2px;
254 |   padding: 0;
255 |   margin: 1rem 0;
256 |   background-color: #eff0f1;
257 |   border: 0;
258 | }
259 | 
260 | @media screen and (min-width: 64em) {
261 |   .main-content {
262 |     max-width: 64rem;
263 |     padding: 2rem 6rem;
264 |     margin: 0 auto;
265 |     font-size: 1.1rem;
266 |   }
267 | }
268 | 
269 | @media screen and (min-width: 42em) and (max-width: 64em) {
270 |   .main-content {
271 |     padding: 2rem 4rem;
272 |     font-size: 1.1rem;
273 |   }
274 | }
275 | 
276 | @media screen and (max-width: 42em) {
277 |   .main-content {
278 |     padding: 2rem 1rem;
279 |     font-size: 1rem;
280 |   }
281 | }
282 | 
283 | .site-footer {
284 |   padding-top: 2rem;
285 |   margin-top: 2rem;
286 |   border-top: solid 1px #eff0f1;
287 | }
288 | 
289 | .site-footer-owner {
290 |   display: block;
291 |   font-weight: bold;
292 | }
293 | 
294 | .site-footer-credits {
295 |   color: #819198;
296 | }
297 | 
298 | @media screen and (min-width: 64em) {
299 |   .site-footer {
300 |     font-size: 1rem;
301 |   }
302 | }
303 | 
304 | @media screen and (min-width: 42em) and (max-width: 64em) {
305 |   .site-footer {
306 |     font-size: 1rem;
307 |   }
308 | }
309 | 
310 | @media screen and (max-width: 42em) {
311 |   .site-footer {
312 |     font-size: 0.9rem;
313 |   }
314 | }
315 | 


--------------------------------------------------------------------------------
/examples/cats/index.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react';
  2 | import ReactDOM from 'react-dom';
  3 | import Lightbox from '../../src/lightbox-react';
  4 | import './stylesheets/app.css';
  5 | import './stylesheets/vendor/stylesheet.css';
  6 | import './stylesheets/vendor/github-light.css';
  7 | 
  8 | import image1 from './images/1.jpg';
  9 | import image2 from './images/2.jpg';
 10 | import image3 from './images/3.jpg';
 11 | import image4 from './images/4.jpg';
 12 | import image1Thumb from './images/1_thumb.jpg';
 13 | import image2Thumb from './images/2_thumb.jpg';
 14 | import image3Thumb from './images/3_thumb.jpg';
 15 | import image4Thumb from './images/4_thumb.jpg';
 16 | import Video from './components/video';
 17 | 
 18 | const images = [Video, image1, image2, image3, image4];
 19 | const thumbs = [image1Thumb, image2Thumb, image3Thumb, image4Thumb];
 20 | 
 21 | const titles = [
 22 |   '',
 23 |   <span>
 24 |     by&nbsp;
 25 |     <a className="creditLink" href="http://flickr.com/photos/titrans/">
 26 |       quatre mains
 27 |     </a>
 28 |     &nbsp; (
 29 |     <a
 30 |       className="creditLink"
 31 |       href="http://creativecommons.org/licenses/by/2.0/"
 32 |       title="Attribution License"
 33 |     >
 34 |       Some rights reserved
 35 |     </a>
 36 |     )
 37 |   </span>,
 38 |   <span>
 39 |     by&nbsp;
 40 |     <a className="creditLink" href="http://flickr.com/photos/lachlanrogers/">
 41 |       latch.r
 42 |     </a>
 43 |     &nbsp; (
 44 |     <a
 45 |       className="creditLink"
 46 |       href="http://creativecommons.org/licenses/by-sa/2.0/"
 47 |       title="Attribution-ShareAlike License"
 48 |     >
 49 |       Some rights reserved
 50 |     </a>
 51 |     )
 52 |   </span>,
 53 |   <span>
 54 |     by&nbsp;
 55 |     <a className="creditLink" href="http://flickr.com/photos/fazen/">
 56 |       fazen
 57 |     </a>
 58 |     &nbsp; (
 59 |     <a
 60 |       className="creditLink"
 61 |       href="http://creativecommons.org/licenses/by/2.0/"
 62 |       title="Attribution License"
 63 |     >
 64 |       Some rights reserved
 65 |     </a>
 66 |     )
 67 |   </span>,
 68 | ];
 69 | 
 70 | const captions = [
 71 |   'Cat in the snow',
 72 |   '',
 73 |   <p>
 74 |     .. not in the&nbsp;
 75 |     <em>mood</em>
 76 |     &nbsp;for games right now
 77 |     <br />
 78 |     ...
 79 |     <br />
 80 |     ...
 81 |     <br />
 82 |     ...
 83 |     <br />
 84 |     ...
 85 |     <br />
 86 |     ...
 87 |     <br />
 88 |     ...
 89 |     <br />
 90 |     C&#39;mon. Seriously.
 91 |   </p>,
 92 |   '',
 93 | ];
 94 | 
 95 | class App extends Component {
 96 |   static onImageLoadError(imageSrc, _srcType, errorEvent) {
 97 |     console.error(`Could not load image at ${imageSrc}`, errorEvent); // eslint-disable-line no-console
 98 |   }
 99 | 
100 |   constructor() {
101 |     super();
102 | 
103 |     this.state = {
104 |       index: 0,
105 |       isOpen: false,
106 |     };
107 | 
108 |     this.openLightbox = this.openLightbox.bind(this);
109 |     this.closeLightbox = this.closeLightbox.bind(this);
110 |     this.moveNext = this.moveNext.bind(this);
111 |     this.movePrev = this.movePrev.bind(this);
112 |   }
113 | 
114 |   openLightbox() {
115 |     this.setState({ isOpen: true });
116 |   }
117 | 
118 |   closeLightbox() {
119 |     this.setState({ isOpen: false });
120 |   }
121 | 
122 |   moveNext() {
123 |     this.setState({ index: (this.state.index + 1) % images.length });
124 |   }
125 | 
126 |   movePrev() {
127 |     this.setState({
128 |       index: (this.state.index + images.length - 1) % images.length,
129 |     });
130 |   }
131 | 
132 |   render() {
133 |     let lightbox;
134 |     if (this.state.isOpen) {
135 |       lightbox = (
136 |         <Lightbox
137 |           mainSrc={images[this.state.index]}
138 |           nextSrc={images[(this.state.index + 1) % images.length]}
139 |           prevSrc={
140 |             images[(this.state.index + images.length - 1) % images.length]
141 |           }
142 |           mainSrcThumbnail={thumbs[this.state.index]}
143 |           nextSrcThumbnail={thumbs[(this.state.index + 1) % images.length]}
144 |           prevSrcThumbnail={
145 |             thumbs[(this.state.index + images.length - 1) % images.length]
146 |           }
147 |           onCloseRequest={this.closeLightbox}
148 |           onMovePrevRequest={this.movePrev}
149 |           onMoveNextRequest={this.moveNext}
150 |           onImageLoadError={App.onImageLoadError}
151 |           imageTitle={titles[this.state.index]}
152 |           imageCaption={captions[this.state.index]}
153 |         />
154 |       );
155 |     }
156 | 
157 |     return (
158 |       <div>
159 |         <section className="page-header">
160 |           <h1 className="project-name">React Image Lightbox</h1>
161 | 
162 |           <h2 className="project-tagline">
163 |             Flexible lightbox component for displaying images with React
164 |           </h2>
165 |         </section>
166 | 
167 |         <section className="main-content">
168 |           <h2>Demo</h2>
169 | 
170 |           <div>
171 |             <button
172 |               type="button"
173 |               id="open-lightbox"
174 |               className="demoButton"
175 |               onClick={this.openLightbox}
176 |             >
177 |               Open Lightbox
178 |             </button>
179 |             {lightbox}
180 |           </div>
181 | 
182 |           <h2>Features</h2>
183 |           <ul>
184 |             <li>Keyboard shortcuts (with rate limiting)</li>
185 |             <li>Image Zoom</li>
186 |             <li>Flexible rendering using src values assigned on the fly</li>
187 |             <li>Image preloading for smoother viewing</li>
188 |             <li>
189 |               Mobile friendly, with pinch to zoom and swipe (Thanks,{' '}
190 |               <a href="https://github.com/webcarrot">@webcarrot</a>
191 |               !)
192 |             </li>
193 |             <li>No external CSS</li>
194 |           </ul>
195 | 
196 |           <a href="https://github.com/treyhuffine/lightbox-react">
197 |             Examples and Documentation on Github
198 |           </a>
199 | 
200 |           <footer className="site-footer">
201 |             <span className="site-footer-owner">
202 |               <a href="https://github.com/treyhuffine/lightbox-react">
203 |                 Lightbox React
204 |               </a>{' '}
205 |               is maintained by{' '}
206 |               <a href="https://github.com/treyhuffine">treyhuffine</a>.
207 |             </span>
208 | 
209 |             <span className="site-footer-credits">
210 |               This page was generated by{' '}
211 |               <a href="https://pages.github.com">GitHub Pages</a> using the{' '}
212 |               <a href="https://github.com/jasonlong/cayman-theme">
213 |                 Cayman theme
214 |               </a>{' '}
215 |               by <a href="https://twitter.com/jasonlong">Jason Long</a>.
216 |             </span>
217 |           </footer>
218 |         </section>
219 | 
220 |         <a href="https://github.com/treyhuffine/lightbox-react">
221 |           <img
222 |             style={{ position: 'absolute', top: 0, right: 0, border: 0 }}
223 |             src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67"
224 |             alt="Fork me on GitHub"
225 |             data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"
226 |           />
227 |         </a>
228 |       </div>
229 |     );
230 |   }
231 | }
232 | 
233 | // eslint-disable-next-line
234 | ReactDOM.render(<App />, document.getElementById('app'));
235 | 


--------------------------------------------------------------------------------
/src/style.css:
--------------------------------------------------------------------------------
  1 | @keyframes closeWindow {
  2 |   0% {
  3 |     opacity: 1;
  4 |   }
  5 |   100% {
  6 |     opacity: 0;
  7 |   }
  8 | }
  9 | 
 10 | .ril__outer {
 11 |   background-color: rgba(0, 0, 0, 0.85);
 12 |   outline: none;
 13 |   top: 0;
 14 |   left: 0;
 15 |   right: 0;
 16 |   bottom: 0;
 17 |   z-index: 1000;
 18 |   width: 100%;
 19 |   height: 100%;
 20 |   -ms-content-zooming: none;
 21 |   -ms-user-select: none;
 22 |   -ms-touch-select: none;
 23 |   touch-action: none;
 24 | }
 25 | 
 26 | .ril__outerClosing {
 27 |   opacity: 0;
 28 | }
 29 | 
 30 | .ril__inner {
 31 |   position: absolute;
 32 |   top: 0;
 33 |   left: 0;
 34 |   right: 0;
 35 |   bottom: 0;
 36 | }
 37 | 
 38 | .ril__image,
 39 | .ril__imagePrev,
 40 | .ril__imageNext {
 41 |   position: absolute;
 42 |   top: 0;
 43 |   right: 0;
 44 |   bottom: 0;
 45 |   left: 0;
 46 |   margin: auto;
 47 |   max-width: none;
 48 |   -ms-content-zooming: none;
 49 |   -ms-user-select: none;
 50 |   -ms-touch-select: none;
 51 |   touch-action: none;
 52 | }
 53 | 
 54 | .ril__imageDiscourager {
 55 |   background-repeat: no-repeat;
 56 |   background-position: center;
 57 |   background-size: contain;
 58 | }
 59 | 
 60 | .ril__navButtons {
 61 |   border: none;
 62 |   position: absolute;
 63 |   top: 0;
 64 |   bottom: 0;
 65 |   width: 20px;
 66 |   height: 34px;
 67 |   padding: 40px 30px;
 68 |   margin: auto;
 69 |   cursor: pointer;
 70 |   opacity: 0.7;
 71 | }
 72 | .ril__navButtons:hover {
 73 |   opacity: 1;
 74 | }
 75 | .ril__navButtons:active {
 76 |   opacity: 0.7;
 77 | }
 78 | 
 79 | .ril__navButtonPrev {
 80 |   left: 0;
 81 |   background: rgba(0, 0, 0, 0.2)
 82 |     url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjM0Ij48cGF0aCBkPSJtIDE5LDMgLTIsLTIgLTE2LDE2IDE2LDE2IDEsLTEgLTE1LC0xNSAxNSwtMTUgeiIgZmlsbD0iI0ZGRiIvPjwvc3ZnPg==')
 83 |     no-repeat center;
 84 | }
 85 | 
 86 | .ril__navButtonNext {
 87 |   right: 0;
 88 |   background: rgba(0, 0, 0, 0.2)
 89 |     url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjM0Ij48cGF0aCBkPSJtIDEsMyAyLC0yIDE2LDE2IC0xNiwxNiAtMSwtMSAxNSwtMTUgLTE1LC0xNSB6IiBmaWxsPSIjRkZGIi8+PC9zdmc+')
 90 |     no-repeat center;
 91 | }
 92 | 
 93 | .ril__downloadBlocker {
 94 |   position: absolute;
 95 |   top: 0;
 96 |   left: 0;
 97 |   right: 0;
 98 |   bottom: 0;
 99 |   background-image: url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7');
100 |   background-size: cover;
101 | }
102 | 
103 | .ril__caption,
104 | .ril__toolbar {
105 |   background-color: rgba(0, 0, 0, 0.5);
106 |   position: absolute;
107 |   left: 0;
108 |   right: 0;
109 |   display: flex;
110 |   justify-content: space-between;
111 | }
112 | 
113 | .ril__caption {
114 |   bottom: 0;
115 |   max-height: 150px;
116 |   overflow: auto;
117 | }
118 | 
119 | .ril__captionContent {
120 |   padding: 10px 20px;
121 |   color: #fff;
122 | }
123 | 
124 | .ril__toolbar {
125 |   top: 0;
126 |   height: 50px;
127 | }
128 | 
129 | .ril__toolbarSide {
130 |   height: 50px;
131 |   margin: 0;
132 | }
133 | 
134 | .ril__toolbarLeftSide {
135 |   padding-left: 20px;
136 |   padding-right: 0;
137 |   flex: 0 1 auto;
138 |   overflow: hidden;
139 |   text-overflow: ellipsis;
140 | }
141 | 
142 | .ril__toolbarRightSide {
143 |   padding-left: 0;
144 |   padding-right: 20px;
145 |   flex: 0 0 auto;
146 | }
147 | 
148 | .ril__toolbarItem {
149 |   display: inline-block;
150 |   line-height: 50px;
151 |   padding: 0;
152 |   color: #fff;
153 |   font-size: 120%;
154 |   max-width: 100%;
155 |   overflow: hidden;
156 |   text-overflow: ellipsis;
157 |   white-space: nowrap;
158 | }
159 | 
160 | .ril__toolbarItemChild {
161 |   vertical-align: middle;
162 | }
163 | 
164 | .ril__builtinButton {
165 |   width: 40px;
166 |   height: 35px;
167 |   cursor: pointer;
168 |   border: none;
169 |   opacity: 0.7;
170 | }
171 | .ril__builtinButton:hover {
172 |   opacity: 1;
173 | }
174 | .ril__builtinButton:active {
175 |   outline: none;
176 | }
177 | 
178 | .ril__builtinButtonDisabled {
179 |   cursor: default;
180 |   opacity: 0.5;
181 | }
182 | .ril__builtinButtonDisabled:hover {
183 |   opacity: 0.5;
184 | }
185 | 
186 | .ril__closeButton {
187 |   background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIj48cGF0aCBkPSJtIDEsMyAxLjI1LC0xLjI1IDcuNSw3LjUgNy41LC03LjUgMS4yNSwxLjI1IC03LjUsNy41IDcuNSw3LjUgLTEuMjUsMS4yNSAtNy41LC03LjUgLTcuNSw3LjUgLTEuMjUsLTEuMjUgNy41LC03LjUgLTcuNSwtNy41IHoiIGZpbGw9IiNGRkYiLz48L3N2Zz4=')
188 |     no-repeat center;
189 | }
190 | 
191 | .ril__zoomInButton {
192 |   background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCI+PGcgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+PHBhdGggZD0iTTEgMTlsNi02Ii8+PHBhdGggZD0iTTkgOGg2Ii8+PHBhdGggZD0iTTEyIDV2NiIvPjwvZz48Y2lyY2xlIGN4PSIxMiIgY3k9IjgiIHI9IjciIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+')
193 |     no-repeat center;
194 | }
195 | 
196 | .ril__zoomOutButton {
197 |   background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCI+PGcgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+PHBhdGggZD0iTTEgMTlsNi02Ii8+PHBhdGggZD0iTTkgOGg2Ii8+PC9nPjxjaXJjbGUgY3g9IjEyIiBjeT0iOCIgcj0iNyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiLz48L3N2Zz4=')
198 |     no-repeat center;
199 | }
200 | 
201 | .ril__outerAnimating {
202 |   animation-name: closeWindow;
203 | }
204 | 
205 | @keyframes pointFade {
206 |   0%,
207 |   19.999%,
208 |   100% {
209 |     opacity: 0;
210 |   }
211 |   20% {
212 |     opacity: 1;
213 |   }
214 | }
215 | 
216 | .ril__loadingCircle {
217 |   width: 60px;
218 |   height: 60px;
219 |   position: relative;
220 | }
221 | 
222 | .ril__loadingCirclePoint {
223 |   width: 100%;
224 |   height: 100%;
225 |   position: absolute;
226 |   left: 0;
227 |   top: 0;
228 | }
229 | .ril__loadingCirclePoint::before {
230 |   content: '';
231 |   display: block;
232 |   margin: 0 auto;
233 |   width: 11%;
234 |   height: 30%;
235 |   background-color: #fff;
236 |   border-radius: 30%;
237 |   animation: pointFade 800ms infinite ease-in-out both;
238 | }
239 | .ril__loadingCirclePoint:nth-of-type(1) {
240 |   transform: rotate(0deg);
241 | }
242 | .ril__loadingCirclePoint:nth-of-type(7) {
243 |   transform: rotate(180deg);
244 | }
245 | .ril__loadingCirclePoint:nth-of-type(1)::before,
246 | .ril__loadingCirclePoint:nth-of-type(7)::before {
247 |   animation-delay: -800ms;
248 | }
249 | .ril__loadingCirclePoint:nth-of-type(2) {
250 |   transform: rotate(30deg);
251 | }
252 | .ril__loadingCirclePoint:nth-of-type(8) {
253 |   transform: rotate(210deg);
254 | }
255 | .ril__loadingCirclePoint:nth-of-type(2)::before,
256 | .ril__loadingCirclePoint:nth-of-type(8)::before {
257 |   animation-delay: -666ms;
258 | }
259 | .ril__loadingCirclePoint:nth-of-type(3) {
260 |   transform: rotate(60deg);
261 | }
262 | .ril__loadingCirclePoint:nth-of-type(9) {
263 |   transform: rotate(240deg);
264 | }
265 | .ril__loadingCirclePoint:nth-of-type(3)::before,
266 | .ril__loadingCirclePoint:nth-of-type(9)::before {
267 |   animation-delay: -533ms;
268 | }
269 | .ril__loadingCirclePoint:nth-of-type(4) {
270 |   transform: rotate(90deg);
271 | }
272 | .ril__loadingCirclePoint:nth-of-type(10) {
273 |   transform: rotate(270deg);
274 | }
275 | .ril__loadingCirclePoint:nth-of-type(4)::before,
276 | .ril__loadingCirclePoint:nth-of-type(10)::before {
277 |   animation-delay: -400ms;
278 | }
279 | .ril__loadingCirclePoint:nth-of-type(5) {
280 |   transform: rotate(120deg);
281 | }
282 | .ril__loadingCirclePoint:nth-of-type(11) {
283 |   transform: rotate(300deg);
284 | }
285 | .ril__loadingCirclePoint:nth-of-type(5)::before,
286 | .ril__loadingCirclePoint:nth-of-type(11)::before {
287 |   animation-delay: -266ms;
288 | }
289 | .ril__loadingCirclePoint:nth-of-type(6) {
290 |   transform: rotate(150deg);
291 | }
292 | .ril__loadingCirclePoint:nth-of-type(12) {
293 |   transform: rotate(330deg);
294 | }
295 | .ril__loadingCirclePoint:nth-of-type(6)::before,
296 | .ril__loadingCirclePoint:nth-of-type(12)::before {
297 |   animation-delay: -133ms;
298 | }
299 | .ril__loadingCirclePoint:nth-of-type(7) {
300 |   transform: rotate(180deg);
301 | }
302 | .ril__loadingCirclePoint:nth-of-type(13) {
303 |   transform: rotate(360deg);
304 | }
305 | .ril__loadingCirclePoint:nth-of-type(7)::before,
306 | .ril__loadingCirclePoint:nth-of-type(13)::before {
307 |   animation-delay: 0ms;
308 | }
309 | 
310 | .ril__loadingContainer {
311 |   position: absolute;
312 |   top: 0;
313 |   right: 0;
314 |   bottom: 0;
315 |   left: 0;
316 | }
317 | .ril__imagePrev .ril__loadingContainer,
318 | .ril__imageNext .ril__loadingContainer {
319 |   display: none;
320 | }
321 | 
322 | .ril__errorContainer {
323 |   position: absolute;
324 |   top: 0;
325 |   right: 0;
326 |   bottom: 0;
327 |   left: 0;
328 |   display: flex;
329 |   align-items: center;
330 |   justify-content: center;
331 |   color: #fff;
332 | }
333 | .ril__imagePrev .ril__errorContainer,
334 | .ril__imageNext .ril__errorContainer {
335 |   display: none;
336 | }
337 | 
338 | .ril__loadingContainer__icon {
339 |   color: #fff;
340 |   position: absolute;
341 |   top: 50%;
342 |   left: 50%;
343 |   transform: translateX(-50%) translateY(-50%);
344 | }
345 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # React Component & Image Lightbox
  2 | 
  3 | [![NPM](https://nodei.co/npm/lightbox-react.png)](https://npmjs.org/package/lightbox-react)
  4 | 
  5 | ### See it in action on [Skilled.dev - Coding Interview Course](https://skilled.dev?ref=lightbox-react) and [gitconnected - The Developer Community](https://gitconnected.com?ref=lightbox-react)
  6 | 
  7 | A lightbox for React components or images. String passed as arguments are
  8 | assumed to be the src for an image. Otherwise, it will check if the argument
  9 | is able to be rended as a child React component of the lightbox.
 10 | 
 11 | [DEMO](http://treyhuffine.com/lightbox-react/)
 12 | 
 13 | Originally forked from [fritz-c](https://github.com/fritz-c/react-image-lightbox)'s library
 14 | 
 15 | Features
 16 | 
 17 | - Keyboard shortcuts (with rate limiting)
 18 | - Image Zoom
 19 | - Flexible rendering using src values assigned on the fly
 20 | - Image preloading for smoother viewing
 21 | - Mobile friendly, with pinch to zoom and swipe (Thanks, [@webcarrot](https://github.com/webcarrot)!)
 22 | - No external CSS
 23 | 
 24 | ## Example
 25 | 
 26 | ```jsx
 27 | import React, { Component } from 'react';
 28 | import Lightbox from 'lightbox-react';
 29 | import 'lightbox-react/style.css'; // This only needs to be imported once in your app
 30 | 
 31 | import VideoIframe from 'components/video';
 32 | 
 33 | const images = [
 34 |   VideoIframe,
 35 |   '//placekitten.com/1500/500',
 36 |   '//placekitten.com/4000/3000',
 37 |   '//placekitten.com/800/1200',
 38 |   '//placekitten.com/1500/1500',
 39 | ];
 40 | 
 41 | export default class LightboxExample extends Component {
 42 |   constructor(props) {
 43 |     super(props);
 44 | 
 45 |     this.state = {
 46 |       photoIndex: 0,
 47 |       isOpen: false,
 48 |     };
 49 |   }
 50 | 
 51 |   render() {
 52 |     const { photoIndex, isOpen } = this.state;
 53 | 
 54 |     return (
 55 |       <div>
 56 |         <button type="button" onClick={() => this.setState({ isOpen: true })}>
 57 |           Open Lightbox
 58 |         </button>
 59 | 
 60 |         {isOpen && (
 61 |           <Lightbox
 62 |             mainSrc={images[photoIndex]}
 63 |             nextSrc={images[(photoIndex + 1) % images.length]}
 64 |             prevSrc={images[(photoIndex + images.length - 1) % images.length]}
 65 |             onCloseRequest={() => this.setState({ isOpen: false })}
 66 |             onMovePrevRequest={() =>
 67 |               this.setState({
 68 |                 photoIndex: (photoIndex + images.length - 1) % images.length,
 69 |               })
 70 |             }
 71 |             onMoveNextRequest={() =>
 72 |               this.setState({
 73 |                 photoIndex: (photoIndex + 1) % images.length,
 74 |               })
 75 |             }
 76 |           />
 77 |         )}
 78 |       </div>
 79 |     );
 80 |   }
 81 | }
 82 | ```
 83 | 
 84 | ## Deprecation Notice
 85 | 
 86 | All unprefixed classes (listed below) will be removed in v4.0.0\. Use their `ril-` prefixed alternatives instead. `close`, `closing`, `download-blocker`, `image-current`, `image-next`, `image-prev`, `inner`, `next-button`, `not-loaded`, `outer`, `prev-button`, `toolbar`, `toolbar-left`, `toolbar-right`, `zoom-in`, `zoom-out`
 87 | 
 88 | ## Options
 89 | 
 90 | | Property            | Type   | Default        | Required | Description                                                                                                                                                   |
 91 | | :------------------ | :----: | :------------: | :------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 92 | | mainSrc             | string |                | yes      | Main display image url or React component                                                                                                                     |
 93 | | prevSrc             | string |                |          | Previous display image url or component (displayed to the left). If left undefined, `onMovePrevRequest` will not be called, and the button not displayed      |
 94 | | nextSrc             | string |                |          | Next display image url or component (displayed to the right). If left undefined, `onMoveNextRequest` will not be called, and the button not displayed         |
 95 | | mainSrcThumbnail    | string |                |          | Thumbnail image url corresponding to `props.mainSrc`. Displayed as a placeholder while the full-sized image loads.                                            |
 96 | | prevSrcThumbnail    | string |                |          | Thumbnail image url corresponding to `props.prevSrc`. Displayed as a placeholder while the full-sized image loads.                                            |
 97 | | nextSrcThumbnail    | string |                |          | Thumbnail image url corresponding to `props.nextSrc`. Displayed as a placeholder while the full-sized image loads.                                            |
 98 | | onCloseRequest      | func   |                | yes      | Close window event. Should change the parent state such that the lightbox is not rendered                                                                     |
 99 | | onMovePrevRequest   | func   | empty function |          | Move to previous image event. Should change the parent state such that `props.prevSrc` becomes `props.mainSrc`, `props.mainSrc` becomes `props.nextSrc`, etc. |
100 | | onMoveNextRequest   | func   | empty function |          | Move to next image event. Should change the parent state such that `props.nextSrc` becomes `props.mainSrc`, `props.mainSrc` becomes `props.prevSrc`, etc.     |
101 | | onImageLoadError    | func   | empty function |          | Called when an image fails to load.<div>`<code>(imageSrc: string, srcType: string, errorEvent: object): void</code>`</div>                                    |
102 | | discourageDownloads | bool   | `false`        |          | Enable download discouragement (prevents [right-click -> Save Image As...])                                                                                   |
103 | | animationDisabled   | bool   | `false`        |          | Disable all animation                                                                                                                                         |
104 | | animationOnKeyInput | bool   | `false`        |          | Disable animation on actions performed with keyboard shortcuts                                                                                                |
105 | | animationDuration   | number | `300`          |          | Animation duration (ms)                                                                                                                                       |
106 | | keyRepeatLimit      | number | `180`          |          | Required interval of time (ms) between key actions (prevents excessively fast navigation of images)                                                           |
107 | | keyRepeatKeyupBonus | number | `40`           |          | Amount of time (ms) restored after each keyup (makes rapid key presses slightly faster than holding down the key to navigate images)                          |
108 | | imageTitle          | node   |                |          | Image title (Descriptive element above image)                                                                                                                 |
109 | | imageCaption        | node   |                |          | Image caption (Descriptive element below image)                                                                                                               |
110 | | toolbarButtons      | node[] |                |          | Array of custom toolbar buttons                                                                                                                               |
111 | | reactModalStyle     | Object | `{}`           |          | Set `z-index` style, etc., for the parent react-modal ([react-modal style format](https://github.com/reactjs/react-modal#styles))                             |
112 | | imagePadding        | number | `10`           |          | Padding (px) between the edge of the window and the lightbox                                                                                                  |
113 | | clickOutsideToClose | bool   | `true`         |          | When true, clicks outside of the image close the lightbox                                                                                                     |
114 | | enableZoom          | bool   | `true`         |          | Set to false to disable zoom functionality and hide zoom buttons                                                                                              |
115 | 
116 | ## Browser Compatibility
117 | 
118 | | Browser  | Works?                              |
119 | | :------- | :---------------------------------- |
120 | | Chrome   | Yes                                 |
121 | | Firefox  | Yes                                 |
122 | | Safari   | Yes                                 |
123 | | IE >= 10 | Yes                                 |
124 | | IE 9     | Everything works, but no animations |
125 | 
126 | ## Contributing
127 | 
128 | After cloning the repository and running `npm install` inside, you can use the following commands to develop and build the project.
129 | 
130 | ```sh
131 | # Starts a webpack dev server that hosts a demo page with the lightbox.
132 | # It uses react-hot-loader so changes are reflected on save.
133 | npm start
134 | 
135 | # Lints the code with eslint and my custom rules.
136 | npm run lint
137 | 
138 | # Lints and builds the code, placing the result in the dist directory.
139 | # This build is necessary to reflect changes if you're
140 | #  `npm link`-ed to this repository from another local project.
141 | npm run build
142 | ```
143 | 
144 | Pull requests are welcome!
145 | 
146 | ## License
147 | 
148 | MIT
149 | 


--------------------------------------------------------------------------------
/src/__tests__/react-image-lightbox.spec.js:
--------------------------------------------------------------------------------
  1 | import { mount } from 'enzyme';
  2 | import React from 'react';
  3 | import Modal from 'react-modal';
  4 | import Lightbox from '../index';
  5 | import {
  6 |   MAX_ZOOM_LEVEL,
  7 |   MIN_ZOOM_LEVEL,
  8 |   ZOOM_BUTTON_INCREMENT_SIZE,
  9 | } from '../constant';
 10 | 
 11 | // Mock the loadStyles static function to avoid
 12 | // issues with a lack of styles._insertCss
 13 | Lightbox.loadStyles = jest.fn();
 14 | 
 15 | const commonProps = {
 16 |   mainSrc: '/fake/image/src.jpg',
 17 |   onCloseRequest: () => {},
 18 | };
 19 | 
 20 | const extendedCommonProps = {
 21 |   ...commonProps,
 22 |   prevSrc: '/fake/image/src1.jpg',
 23 |   nextSrc: '/fake/image/src2.jpg',
 24 | };
 25 | 
 26 | describe('Lightbox structure', () => {
 27 |   const wrapper = mount(<Lightbox {...commonProps} />);
 28 | 
 29 |   it('contains react-modal', () => {
 30 |     expect(wrapper.find(Modal).length).toEqual(1);
 31 |   });
 32 | 
 33 |   it('does not contain prev button when no prevSrc supplied', () => {
 34 |     expect(wrapper.find('.ril-prev-button').length).toEqual(0);
 35 |   });
 36 | 
 37 |   it('contains prev button when prevSrc supplied', () => {
 38 |     wrapper.setProps({ prevSrc: '/my/prev/src' });
 39 |     expect(wrapper.find('.ril-prev-button').length).toEqual(1);
 40 |   });
 41 | 
 42 |   it('does not contain next button when no nextSrc supplied', () => {
 43 |     expect(wrapper.find('.ril-next-button').length).toEqual(0);
 44 |   });
 45 | 
 46 |   it('contains next button when nextSrc supplied', () => {
 47 |     wrapper.setProps({ nextSrc: '/my/next/src' });
 48 |     expect(wrapper.find('.ril-next-button').length).toEqual(1);
 49 |   });
 50 | 
 51 |   it('contains zoom buttons when enableZoom is true (default)', () => {
 52 |     expect(wrapper.find('.ril-zoom-out').length).toEqual(1);
 53 |     expect(wrapper.find('.ril-zoom-in').length).toEqual(1);
 54 |   });
 55 | 
 56 |   it('does not contain zoom buttons when enableZoom is false', () => {
 57 |     wrapper.setProps({ enableZoom: false });
 58 |     expect(wrapper.find('.ril-zoom-out').length).toEqual(0);
 59 |     expect(wrapper.find('.ril-zoom-in').length).toEqual(0);
 60 |   });
 61 | 
 62 |   it('does not contain a caption bar when no caption is supplied', () => {
 63 |     expect(wrapper.find('.ril-caption').length).toEqual(0);
 64 |   });
 65 | 
 66 |   it('contains a caption bar when a caption is supplied', () => {
 67 |     wrapper.setProps({ caption: 'My Caption' });
 68 |     expect(wrapper.find('.ril-caption').length).toEqual(0);
 69 |   });
 70 | 
 71 |   it('contains custom toolbar buttons when supplied', () => {
 72 |     wrapper.setProps({
 73 |       toolbarButtons: [<button className="my-test-button" />],
 74 |     });
 75 |     expect(wrapper.find('.ril-toolbar__item .my-test-button').length).toEqual(
 76 |       1
 77 |     );
 78 |   });
 79 | 
 80 |   it('contains image title when supplied', () => {
 81 |     wrapper.setProps({
 82 |       imageTitle: <div className="my-image-title" />,
 83 |     });
 84 | 
 85 |     expect(
 86 |       wrapper.find(
 87 |         '.ril-toolbar-left .ril-toolbar__item__child .my-image-title'
 88 |       ).length
 89 |     ).toEqual(1);
 90 |   });
 91 | });
 92 | 
 93 | describe('Events', () => {
 94 |   const LOAD_FAILURE_SRC = 'LOAD_FAILURE_SRC';
 95 |   const LOAD_SUCCESS_SRC = 'LOAD_SUCCESS_SRC';
 96 |   let originalImageSrcProto;
 97 |   beforeAll(() => {
 98 |     originalImageSrcProto = Object.getOwnPropertyDescriptor(
 99 |       global.Image.prototype,
100 |       'src'
101 |     );
102 | 
103 |     Object.defineProperty(global.Image.prototype, 'src', {
104 |       set(src) {
105 |         if (src === LOAD_FAILURE_SRC) {
106 |           setTimeout(() => this.onerror(new Error('mock error')));
107 |         } else if (src === LOAD_SUCCESS_SRC) {
108 |           setTimeout(this.onload);
109 |         }
110 |       },
111 |     });
112 |   });
113 | 
114 |   afterAll(() => {
115 |     Object.defineProperty(global.Image.prototype, 'src', originalImageSrcProto);
116 |   });
117 | 
118 |   const mockFns = {
119 |     onAfterOpen: jest.fn(),
120 |     onCloseRequest: jest.fn(),
121 |     onMovePrevRequest: jest.fn(),
122 |     onMoveNextRequest: jest.fn(),
123 |     onImageLoad: jest.fn(),
124 |     onImageLoadError: jest.fn(),
125 |   };
126 | 
127 |   const wrapper = mount(
128 |     <Lightbox {...extendedCommonProps} {...mockFns} animationDisabled />
129 |   );
130 | 
131 |   // Spy zoomBtn focus
132 |   const { zoomOutBtn, zoomInBtn } = wrapper.instance();
133 |   jest.spyOn(zoomOutBtn, 'focus');
134 |   jest.spyOn(zoomInBtn, 'focus');
135 | 
136 |   it('Calls onAfterOpen when mounted', () => {
137 |     expect(mockFns.onAfterOpen).toHaveBeenCalledTimes(1);
138 |     expect(mockFns.onAfterOpen).toHaveBeenCalledWith();
139 |   });
140 | 
141 |   it('Calls onMovePrevRequest when left button clicked', () => {
142 |     expect(mockFns.onMovePrevRequest).toHaveBeenCalledTimes(0);
143 |     wrapper.find('.ril-prev-button').simulate('click');
144 |     expect(mockFns.onMovePrevRequest).toHaveBeenCalledTimes(1);
145 |     expect(mockFns.onMovePrevRequest).not.toHaveBeenCalledWith();
146 |   });
147 | 
148 |   it('Calls onMoveNextRequest when right button clicked', () => {
149 |     expect(mockFns.onMoveNextRequest).toHaveBeenCalledTimes(0);
150 |     wrapper.find('.ril-next-button').simulate('click');
151 |     expect(mockFns.onMoveNextRequest).toHaveBeenCalledTimes(1);
152 |     expect(mockFns.onMoveNextRequest).not.toHaveBeenCalledWith();
153 |   });
154 | 
155 |   it('Calls onCloseRequest when close button clicked', () => {
156 |     expect(mockFns.onCloseRequest).toHaveBeenCalledTimes(0);
157 |     wrapper.find('.ril-close').simulate('click');
158 |     expect(mockFns.onCloseRequest).toHaveBeenCalledTimes(1);
159 |     expect(mockFns.onCloseRequest).not.toHaveBeenCalledWith();
160 |   });
161 | 
162 |   it('Calls onImageLoad when image loaded', done => {
163 |     mockFns.onImageLoad.mockImplementationOnce((imageSrc, srcType, image) => {
164 |       expect(imageSrc).toEqual(LOAD_SUCCESS_SRC);
165 |       expect(srcType).toEqual('mainSrc');
166 |       expect(image).toBeInstanceOf(global.Image);
167 |       done();
168 |     });
169 | 
170 |     expect(mockFns.onImageLoad).toHaveBeenCalledTimes(0);
171 |     wrapper.setProps({ mainSrc: LOAD_SUCCESS_SRC });
172 |   });
173 | 
174 |   it('Calls onImageLoadError when image loaded', done => {
175 |     mockFns.onImageLoadError.mockImplementationOnce(
176 |       (imageSrc, srcType, image) => {
177 |         expect(imageSrc).toEqual(LOAD_FAILURE_SRC);
178 |         expect(srcType).toEqual('mainSrc');
179 |         expect(image).toBeInstanceOf(Error);
180 |         done();
181 |       }
182 |     );
183 | 
184 |     expect(mockFns.onImageLoadError).toHaveBeenCalledTimes(0);
185 |     wrapper.setProps({ mainSrc: LOAD_FAILURE_SRC });
186 |   });
187 | 
188 |   it('Calls the the ZoomIn Focus when ZoomOut is disabled', () => {
189 |     wrapper.setState({
190 |       zoomLevel: MIN_ZOOM_LEVEL + ZOOM_BUTTON_INCREMENT_SIZE,
191 |     });
192 |     wrapper.instance().handleZoomOutButtonClick();
193 |     expect(zoomInBtn.focus).toHaveBeenCalledTimes(1);
194 |   });
195 | 
196 |   it('Calls the the ZoomOut Focus when ZoomIn is disabled', () => {
197 |     wrapper.setState({
198 |       zoomLevel: MAX_ZOOM_LEVEL - ZOOM_BUTTON_INCREMENT_SIZE,
199 |     });
200 |     wrapper.instance().handleZoomInButtonClick();
201 |     expect(zoomOutBtn.focus).toHaveBeenCalledTimes(1);
202 |   });
203 | });
204 | 
205 | describe('Key bindings', () => {
206 |   const mockCloseRequest = jest.fn();
207 |   const mockMovePrevRequest = jest.fn();
208 |   const mockMoveNextRequest = jest.fn();
209 | 
210 |   const wrapper = mount(
211 |     <Lightbox
212 |       {...commonProps}
213 |       onCloseRequest={mockCloseRequest}
214 |       onMovePrevRequest={mockMovePrevRequest}
215 |       onMoveNextRequest={mockMoveNextRequest}
216 |     />
217 |   );
218 | 
219 |   const simulateKey = keyCode => {
220 |     // Avoid interference by key throttling
221 |     wrapper.instance().lastKeyDownTime = new Date('1970-01-01').getTime();
222 | 
223 |     wrapper.find('.ril-outer').simulate('keyDown', { keyCode });
224 |   };
225 | 
226 |   it('Responds to close key binding', () => {
227 |     expect(mockCloseRequest).toHaveBeenCalledTimes(0);
228 |     // Simulate ESC key press
229 |     simulateKey(27);
230 |     expect(mockCloseRequest).toHaveBeenCalledTimes(1);
231 |   });
232 | 
233 |   it('Doesn\'t respond to "move to next" key binding when no next image available', () => {
234 |     // Simulate right arrow key press
235 |     simulateKey(39);
236 |     expect(mockMoveNextRequest).toHaveBeenCalledTimes(0);
237 |   });
238 | 
239 |   it('Responds to "move to next" key binding when next image available', () => {
240 |     wrapper.setProps({ nextSrc: '/my/next/src' });
241 | 
242 |     // Simulate right arrow key press
243 |     simulateKey(39);
244 |     expect(mockMoveNextRequest).toHaveBeenCalledTimes(1);
245 |   });
246 | 
247 |   it('Doesn\'t respond to "move to prev" key binding when no prev image available', () => {
248 |     // Simulate left arrow key press
249 |     simulateKey(37);
250 |     expect(mockMovePrevRequest).toHaveBeenCalledTimes(0);
251 |   });
252 | 
253 |   it('Responds to "move to prev" key binding', () => {
254 |     wrapper.setProps({ prevSrc: '/my/prev/src' });
255 | 
256 |     // Simulate left arrow key press
257 |     simulateKey(37);
258 |     expect(mockMovePrevRequest).toHaveBeenCalledTimes(1);
259 |   });
260 | });
261 | 
262 | describe('Snapshot Testing', () => {
263 |   it('Lightbox renders properly"', () => {
264 |     const wrapper = mount(
265 |       <Lightbox
266 |         {...commonProps}
267 |         reactModalProps={{ appElement: global.document.createElement('div') }}
268 |       />
269 |     );
270 |     expect(wrapper).toMatchSnapshot();
271 |   });
272 | });
273 | 
274 | describe('Error Testing', () => {
275 |   it('Should render the default error message', () => {
276 |     const wrapper = mount(<Lightbox {...commonProps} />);
277 |     wrapper.setState({
278 |       loadErrorStatus: { mainSrc: true },
279 |     });
280 |     wrapper.update();
281 |     expect(wrapper.find('div.ril__errorContainer')).toHaveText(
282 |       'This image failed to load'
283 |     );
284 |   });
285 |   it('Should render the specified error message', () => {
286 |     const wrapper = mount(<Lightbox {...commonProps} />);
287 |     const imageLoadErrorMessage = <p>Specified Error Message</p>;
288 |     wrapper.setState({
289 |       loadErrorStatus: { mainSrc: true },
290 |     });
291 |     wrapper.setProps({
292 |       imageLoadErrorMessage,
293 |     });
294 |     wrapper.update();
295 |     expect(wrapper.find('div.ril__errorContainer')).toContainReact(
296 |       imageLoadErrorMessage
297 |     );
298 |   });
299 | });
300 | 


--------------------------------------------------------------------------------
/src/__tests__/__snapshots__/react-image-lightbox.spec.js.snap:
--------------------------------------------------------------------------------
  1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
  2 | 
  3 | exports[`Snapshot Testing Lightbox renders properly" 1`] = `
  4 | <ReactImageLightbox
  5 |   animationDisabled={false}
  6 |   animationDuration={300}
  7 |   animationOnKeyInput={false}
  8 |   clickOutsideToClose={true}
  9 |   closeLabel="Close lightbox"
 10 |   discourageDownloads={false}
 11 |   enableZoom={true}
 12 |   imageCaption={null}
 13 |   imageCrossOrigin={null}
 14 |   imageLoadErrorMessage="This image failed to load"
 15 |   imagePadding={10}
 16 |   imageTitle={null}
 17 |   keyRepeatKeyupBonus={40}
 18 |   keyRepeatLimit={180}
 19 |   mainSrc="/fake/image/src.jpg"
 20 |   mainSrcThumbnail={null}
 21 |   nextLabel="Next image"
 22 |   nextSrc={null}
 23 |   nextSrcThumbnail={null}
 24 |   onAfterOpen={[Function]}
 25 |   onCloseRequest={[Function]}
 26 |   onImageLoad={[Function]}
 27 |   onImageLoadError={[Function]}
 28 |   onMoveNextRequest={[Function]}
 29 |   onMovePrevRequest={[Function]}
 30 |   prevLabel="Previous image"
 31 |   prevSrc={null}
 32 |   prevSrcThumbnail={null}
 33 |   reactModalProps={
 34 |     Object {
 35 |       "appElement": <div
 36 |         aria-hidden="true"
 37 |       />,
 38 |     }
 39 |   }
 40 |   reactModalStyle={Object {}}
 41 |   toolbarButtons={null}
 42 |   wrapperClassName=""
 43 |   zoomInLabel="Zoom in"
 44 |   zoomOutLabel="Zoom out"
 45 | >
 46 |   <Modal
 47 |     appElement={
 48 |       <div
 49 |         aria-hidden="true"
 50 |       />
 51 |     }
 52 |     ariaHideApp={true}
 53 |     bodyOpenClassName="ReactModal__Body--open"
 54 |     closeTimeoutMS={0}
 55 |     contentLabel="Lightbox"
 56 |     isOpen={true}
 57 |     onAfterOpen={[Function]}
 58 |     onRequestClose={[Function]}
 59 |     parentSelector={[Function]}
 60 |     portalClassName="ReactModalPortal"
 61 |     role="dialog"
 62 |     shouldCloseOnEsc={true}
 63 |     shouldCloseOnOverlayClick={true}
 64 |     shouldFocusAfterRender={true}
 65 |     shouldReturnFocusAfterClose={true}
 66 |     style={
 67 |       Object {
 68 |         "content": Object {
 69 |           "backgroundColor": "transparent",
 70 |           "border": "none",
 71 |           "borderRadius": 0,
 72 |           "bottom": 0,
 73 |           "left": 0,
 74 |           "overflow": "hidden",
 75 |           "padding": 0,
 76 |           "right": 0,
 77 |           "top": 0,
 78 |         },
 79 |         "overlay": Object {
 80 |           "backgroundColor": "transparent",
 81 |           "zIndex": 1000,
 82 |         },
 83 |       }
 84 |     }
 85 |   >
 86 |     <Portal
 87 |       containerInfo={
 88 |         <div
 89 |           class="ReactModalPortal"
 90 |         >
 91 |           <div
 92 |             class="ReactModal__Overlay ReactModal__Overlay--after-open"
 93 |             style="position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; background-color: transparent; z-index: 1000;"
 94 |           >
 95 |             <div
 96 |               aria-label="Lightbox"
 97 |               class="ReactModal__Content ReactModal__Content--after-open"
 98 |               role="dialog"
 99 |               style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; background: rgb(255, 255, 255); overflow: hidden; border-radius: 0; outline: none; padding: 0px; background-color: transparent;"
100 |               tabindex="-1"
101 |             >
102 |               <div
103 |                 class="ril-outer ril__outer ril__outerAnimating  "
104 |                 tabindex="-1"
105 |               >
106 |                 <div
107 |                   class="ril-inner ril__inner"
108 |                 >
109 |                   <div
110 |                     class="ril-image-current ril__image ril-not-loaded"
111 |                     style="transform: translate3d(0px,0px,0) scale3d(1,1,1);"
112 |                   >
113 |                     <div
114 |                       class="ril__loadingContainer"
115 |                     >
116 |                       <div
117 |                         class="ril-loading-circle ril__loadingCircle ril__loadingContainer__icon"
118 |                       >
119 |                         <div
120 |                           class="ril-loading-circle-point ril__loadingCirclePoint"
121 |                         />
122 |                         <div
123 |                           class="ril-loading-circle-point ril__loadingCirclePoint"
124 |                         />
125 |                         <div
126 |                           class="ril-loading-circle-point ril__loadingCirclePoint"
127 |                         />
128 |                         <div
129 |                           class="ril-loading-circle-point ril__loadingCirclePoint"
130 |                         />
131 |                         <div
132 |                           class="ril-loading-circle-point ril__loadingCirclePoint"
133 |                         />
134 |                         <div
135 |                           class="ril-loading-circle-point ril__loadingCirclePoint"
136 |                         />
137 |                         <div
138 |                           class="ril-loading-circle-point ril__loadingCirclePoint"
139 |                         />
140 |                         <div
141 |                           class="ril-loading-circle-point ril__loadingCirclePoint"
142 |                         />
143 |                         <div
144 |                           class="ril-loading-circle-point ril__loadingCirclePoint"
145 |                         />
146 |                         <div
147 |                           class="ril-loading-circle-point ril__loadingCirclePoint"
148 |                         />
149 |                         <div
150 |                           class="ril-loading-circle-point ril__loadingCirclePoint"
151 |                         />
152 |                         <div
153 |                           class="ril-loading-circle-point ril__loadingCirclePoint"
154 |                         />
155 |                       </div>
156 |                     </div>
157 |                   </div>
158 |                 </div>
159 |                 <div
160 |                   class="ril-toolbar ril__toolbar"
161 |                 >
162 |                   <ul
163 |                     class="ril-toolbar-left ril__toolbarSide ril__toolbarLeftSide"
164 |                   >
165 |                     <li
166 |                       class="ril-toolbar__item ril__toolbarItem"
167 |                     >
168 |                       <span
169 |                         class="ril-toolbar__item__child ril__toolbarItemChild"
170 |                       />
171 |                     </li>
172 |                   </ul>
173 |                   <ul
174 |                     class="ril-toolbar-right ril__toolbarSide ril__toolbarRightSide"
175 |                   >
176 |                     <li
177 |                       class="ril-toolbar__item ril__toolbarItem"
178 |                     >
179 |                       <button
180 |                         aria-label="Zoom in"
181 |                         class="ril-zoom-in ril__toolbarItemChild ril__builtinButton ril__zoomInButton"
182 |                         type="button"
183 |                       />
184 |                     </li>
185 |                     <li
186 |                       class="ril-toolbar__item ril__toolbarItem"
187 |                     >
188 |                       <button
189 |                         aria-label="Zoom out"
190 |                         class="ril-zoom-out ril__toolbarItemChild ril__builtinButton ril__zoomOutButton ril__builtinButtonDisabled"
191 |                         disabled=""
192 |                         type="button"
193 |                       />
194 |                     </li>
195 |                     <li
196 |                       class="ril-toolbar__item ril__toolbarItem"
197 |                     >
198 |                       <button
199 |                         aria-label="Close lightbox"
200 |                         class="ril-close ril-toolbar__item__child ril__toolbarItemChild ril__builtinButton ril__closeButton"
201 |                         type="button"
202 |                       />
203 |                     </li>
204 |                   </ul>
205 |                 </div>
206 |               </div>
207 |             </div>
208 |           </div>
209 |         </div>
210 |       }
211 |     >
212 |       <ModalPortal
213 |         appElement={
214 |           <div
215 |             aria-hidden="true"
216 |           />
217 |         }
218 |         ariaHideApp={true}
219 |         bodyOpenClassName="ReactModal__Body--open"
220 |         closeTimeoutMS={0}
221 |         contentLabel="Lightbox"
222 |         defaultStyles={
223 |           Object {
224 |             "content": Object {
225 |               "WebkitOverflowScrolling": "touch",
226 |               "background": "#fff",
227 |               "border": "1px solid #ccc",
228 |               "borderRadius": "4px",
229 |               "bottom": "40px",
230 |               "left": "40px",
231 |               "outline": "none",
232 |               "overflow": "auto",
233 |               "padding": "20px",
234 |               "position": "absolute",
235 |               "right": "40px",
236 |               "top": "40px",
237 |             },
238 |             "overlay": Object {
239 |               "backgroundColor": "rgba(255, 255, 255, 0.75)",
240 |               "bottom": 0,
241 |               "left": 0,
242 |               "position": "fixed",
243 |               "right": 0,
244 |               "top": 0,
245 |             },
246 |           }
247 |         }
248 |         isOpen={true}
249 |         onAfterOpen={[Function]}
250 |         onRequestClose={[Function]}
251 |         parentSelector={[Function]}
252 |         portalClassName="ReactModalPortal"
253 |         role="dialog"
254 |         shouldCloseOnEsc={true}
255 |         shouldCloseOnOverlayClick={true}
256 |         shouldFocusAfterRender={true}
257 |         shouldReturnFocusAfterClose={true}
258 |         style={
259 |           Object {
260 |             "content": Object {
261 |               "backgroundColor": "transparent",
262 |               "border": "none",
263 |               "borderRadius": 0,
264 |               "bottom": 0,
265 |               "left": 0,
266 |               "overflow": "hidden",
267 |               "padding": 0,
268 |               "right": 0,
269 |               "top": 0,
270 |             },
271 |             "overlay": Object {
272 |               "backgroundColor": "transparent",
273 |               "zIndex": 1000,
274 |             },
275 |           }
276 |         }
277 |       >
278 |         <div
279 |           className="ReactModal__Overlay ReactModal__Overlay--after-open"
280 |           onClick={[Function]}
281 |           onMouseDown={[Function]}
282 |           style={
283 |             Object {
284 |               "backgroundColor": "transparent",
285 |               "bottom": 0,
286 |               "left": 0,
287 |               "position": "fixed",
288 |               "right": 0,
289 |               "top": 0,
290 |               "zIndex": 1000,
291 |             }
292 |           }
293 |         >
294 |           <div
295 |             aria-label="Lightbox"
296 |             className="ReactModal__Content ReactModal__Content--after-open"
297 |             onClick={[Function]}
298 |             onKeyDown={[Function]}
299 |             onMouseDown={[Function]}
300 |             onMouseUp={[Function]}
301 |             role="dialog"
302 |             style={
303 |               Object {
304 |                 "WebkitOverflowScrolling": "touch",
305 |                 "background": "#fff",
306 |                 "backgroundColor": "transparent",
307 |                 "border": "none",
308 |                 "borderRadius": 0,
309 |                 "bottom": 0,
310 |                 "left": 0,
311 |                 "outline": "none",
312 |                 "overflow": "hidden",
313 |                 "padding": 0,
314 |                 "position": "absolute",
315 |                 "right": 0,
316 |                 "top": 0,
317 |               }
318 |             }
319 |             tabIndex="-1"
320 |           >
321 |             <div
322 |               className="ril-outer ril__outer ril__outerAnimating  "
323 |               onKeyDown={[Function]}
324 |               onKeyUp={[Function]}
325 |               onMouseDown={[Function]}
326 |               onMouseMove={[Function]}
327 |               onTouchMove={[Function]}
328 |               onTouchStart={[Function]}
329 |               onWheel={[Function]}
330 |               style={
331 |                 Object {
332 |                   "animationDirection": "reverse",
333 |                   "animationDuration": "300ms",
334 |                   "transition": "opacity 300ms",
335 |                 }
336 |               }
337 |               tabIndex="-1"
338 |             >
339 |               <div
340 |                 className="ril-inner ril__inner"
341 |                 onClick={[Function]}
342 |               >
343 |                 <div
344 |                   className="ril-image-current ril__image ril-not-loaded"
345 |                   key="/fake/image/src.jpgi0"
346 |                   style={
347 |                     Object {
348 |                       "transform": "translate3d(0px,0px,0) scale3d(1,1,1)",
349 |                     }
350 |                   }
351 |                 >
352 |                   <div
353 |                     className="ril__loadingContainer"
354 |                   >
355 |                     <div
356 |                       className="ril-loading-circle ril__loadingCircle ril__loadingContainer__icon"
357 |                     >
358 |                       <div
359 |                         className="ril-loading-circle-point ril__loadingCirclePoint"
360 |                         key="0"
361 |                       />
362 |                       <div
363 |                         className="ril-loading-circle-point ril__loadingCirclePoint"
364 |                         key="1"
365 |                       />
366 |                       <div
367 |                         className="ril-loading-circle-point ril__loadingCirclePoint"
368 |                         key="2"
369 |                       />
370 |                       <div
371 |                         className="ril-loading-circle-point ril__loadingCirclePoint"
372 |                         key="3"
373 |                       />
374 |                       <div
375 |                         className="ril-loading-circle-point ril__loadingCirclePoint"
376 |                         key="4"
377 |                       />
378 |                       <div
379 |                         className="ril-loading-circle-point ril__loadingCirclePoint"
380 |                         key="5"
381 |                       />
382 |                       <div
383 |                         className="ril-loading-circle-point ril__loadingCirclePoint"
384 |                         key="6"
385 |                       />
386 |                       <div
387 |                         className="ril-loading-circle-point ril__loadingCirclePoint"
388 |                         key="7"
389 |                       />
390 |                       <div
391 |                         className="ril-loading-circle-point ril__loadingCirclePoint"
392 |                         key="8"
393 |                       />
394 |                       <div
395 |                         className="ril-loading-circle-point ril__loadingCirclePoint"
396 |                         key="9"
397 |                       />
398 |                       <div
399 |                         className="ril-loading-circle-point ril__loadingCirclePoint"
400 |                         key="10"
401 |                       />
402 |                       <div
403 |                         className="ril-loading-circle-point ril__loadingCirclePoint"
404 |                         key="11"
405 |                       />
406 |                     </div>
407 |                   </div>
408 |                 </div>
409 |               </div>
410 |               <div
411 |                 className="ril-toolbar ril__toolbar"
412 |               >
413 |                 <ul
414 |                   className="ril-toolbar-left ril__toolbarSide ril__toolbarLeftSide"
415 |                 >
416 |                   <li
417 |                     className="ril-toolbar__item ril__toolbarItem"
418 |                   >
419 |                     <span
420 |                       className="ril-toolbar__item__child ril__toolbarItemChild"
421 |                     />
422 |                   </li>
423 |                 </ul>
424 |                 <ul
425 |                   className="ril-toolbar-right ril__toolbarSide ril__toolbarRightSide"
426 |                 >
427 |                   <li
428 |                     className="ril-toolbar__item ril__toolbarItem"
429 |                   >
430 |                     <button
431 |                       aria-label="Zoom in"
432 |                       className="ril-zoom-in ril__toolbarItemChild ril__builtinButton ril__zoomInButton"
433 |                       disabled={false}
434 |                       key="zoom-in"
435 |                       onClick={[Function]}
436 |                       type="button"
437 |                     />
438 |                   </li>
439 |                   <li
440 |                     className="ril-toolbar__item ril__toolbarItem"
441 |                   >
442 |                     <button
443 |                       aria-label="Zoom out"
444 |                       className="ril-zoom-out ril__toolbarItemChild ril__builtinButton ril__zoomOutButton ril__builtinButtonDisabled"
445 |                       disabled={true}
446 |                       key="zoom-out"
447 |                       type="button"
448 |                     />
449 |                   </li>
450 |                   <li
451 |                     className="ril-toolbar__item ril__toolbarItem"
452 |                   >
453 |                     <button
454 |                       aria-label="Close lightbox"
455 |                       className="ril-close ril-toolbar__item__child ril__toolbarItemChild ril__builtinButton ril__closeButton"
456 |                       key="close"
457 |                       onClick={[Function]}
458 |                       type="button"
459 |                     />
460 |                   </li>
461 |                 </ul>
462 |               </div>
463 |             </div>
464 |           </div>
465 |         </div>
466 |       </ModalPortal>
467 |     </Portal>
468 |   </Modal>
469 | </ReactImageLightbox>
470 | `;
471 | 


--------------------------------------------------------------------------------
/src/lightbox-react.js:
--------------------------------------------------------------------------------
   1 | import React, { Component } from 'react';
   2 | import PropTypes from 'prop-types';
   3 | import Modal from 'react-modal';
   4 | import isReact from 'is-react';
   5 | import { translate, getWindowWidth, getWindowHeight, getHighestSafeWindowContext } from './util';
   6 | import {
   7 |   KEYS,
   8 |   MIN_ZOOM_LEVEL,
   9 |   MAX_ZOOM_LEVEL,
  10 |   ZOOM_RATIO,
  11 |   WHEEL_MOVE_X_THRESHOLD,
  12 |   WHEEL_MOVE_Y_THRESHOLD,
  13 |   ZOOM_BUTTON_INCREMENT_SIZE,
  14 |   ACTION_NONE,
  15 |   ACTION_MOVE,
  16 |   ACTION_SWIPE,
  17 |   ACTION_PINCH,
  18 |   SOURCE_ANY,
  19 |   SOURCE_MOUSE,
  20 |   SOURCE_TOUCH,
  21 |   SOURCE_POINTER,
  22 |   MIN_SWIPE_DISTANCE,
  23 | } from './constant';
  24 | import './style.css';
  25 | 
  26 | class ReactImageLightbox extends Component {
  27 |   static isTargetMatchImage(target) {
  28 |     return target && /ril-image-current/.test(target.className);
  29 |   }
  30 | 
  31 |   static parseMouseEvent(mouseEvent) {
  32 |     return {
  33 |       id: 'mouse',
  34 |       source: SOURCE_MOUSE,
  35 |       x: parseInt(mouseEvent.clientX, 10),
  36 |       y: parseInt(mouseEvent.clientY, 10),
  37 |     };
  38 |   }
  39 | 
  40 |   static parseTouchPointer(touchPointer) {
  41 |     return {
  42 |       id: touchPointer.identifier,
  43 |       source: SOURCE_TOUCH,
  44 |       x: parseInt(touchPointer.clientX, 10),
  45 |       y: parseInt(touchPointer.clientY, 10),
  46 |     };
  47 |   }
  48 | 
  49 |   static parsePointerEvent(pointerEvent) {
  50 |     return {
  51 |       id: pointerEvent.pointerId,
  52 |       source: SOURCE_POINTER,
  53 |       x: parseInt(pointerEvent.clientX, 10),
  54 |       y: parseInt(pointerEvent.clientY, 10),
  55 |     };
  56 |   }
  57 | 
  58 |   // Request to transition to the previous image
  59 |   static getTransform({ x = 0, y = 0, zoom = 1, width, targetWidth }) {
  60 |     let nextX = x;
  61 |     const windowWidth = getWindowWidth();
  62 |     if (width > windowWidth) {
  63 |       nextX += (windowWidth - width) / 2;
  64 |     }
  65 |     let scaleFactor = zoom;
  66 |     if (width && targetWidth) {
  67 |       scaleFactor = zoom * (targetWidth / width);
  68 |     }
  69 | 
  70 |     return {
  71 |       transform: `translate3d(${nextX}px,${y}px,0) scale3d(${scaleFactor},${scaleFactor},1)`,
  72 |     };
  73 |   }
  74 | 
  75 |   constructor(props) {
  76 |     super(props);
  77 | 
  78 |     this.state = {
  79 |       //-----------------------------
  80 |       // Animation
  81 |       //-----------------------------
  82 | 
  83 |       // Lightbox is closing
  84 |       // When Lightbox is mounted, if animation is enabled it will open with the reverse of the closing animation
  85 |       isClosing: !props.animationDisabled,
  86 | 
  87 |       // Component parts should animate (e.g., when images are moving, or image is being zoomed)
  88 |       shouldAnimate: false,
  89 | 
  90 |       //-----------------------------
  91 |       // Zoom settings
  92 |       //-----------------------------
  93 |       // Zoom level of image
  94 |       zoomLevel: MIN_ZOOM_LEVEL,
  95 | 
  96 |       //-----------------------------
  97 |       // Image position settings
  98 |       //-----------------------------
  99 |       // Horizontal offset from center
 100 |       offsetX: 0,
 101 | 
 102 |       // Vertical offset from center
 103 |       offsetY: 0,
 104 | 
 105 |       // image load error for srcType
 106 |       loadErrorStatus: {},
 107 |     };
 108 | 
 109 |     this.closeIfClickInner = this.closeIfClickInner.bind(this);
 110 |     this.handleImageDoubleClick = this.handleImageDoubleClick.bind(this);
 111 |     this.handleImageMouseWheel = this.handleImageMouseWheel.bind(this);
 112 |     this.handleKeyInput = this.handleKeyInput.bind(this);
 113 |     this.handleMouseUp = this.handleMouseUp.bind(this);
 114 |     this.handleMouseDown = this.handleMouseDown.bind(this);
 115 |     this.handleMouseMove = this.handleMouseMove.bind(this);
 116 |     this.handleOuterMousewheel = this.handleOuterMousewheel.bind(this);
 117 |     this.handleTouchStart = this.handleTouchStart.bind(this);
 118 |     this.handleTouchMove = this.handleTouchMove.bind(this);
 119 |     this.handleTouchEnd = this.handleTouchEnd.bind(this);
 120 |     this.handlePointerEvent = this.handlePointerEvent.bind(this);
 121 |     this.handleCaptionMousewheel = this.handleCaptionMousewheel.bind(this);
 122 |     this.handleWindowResize = this.handleWindowResize.bind(this);
 123 |     this.handleZoomInButtonClick = this.handleZoomInButtonClick.bind(this);
 124 |     this.handleZoomOutButtonClick = this.handleZoomOutButtonClick.bind(this);
 125 |     this.requestClose = this.requestClose.bind(this);
 126 |     this.requestMoveNext = this.requestMoveNext.bind(this);
 127 |     this.requestMovePrev = this.requestMovePrev.bind(this);
 128 |   }
 129 | 
 130 |   componentWillMount() {
 131 |     // Timeouts - always clear it before umount
 132 |     this.timeouts = [];
 133 | 
 134 |     // Current action
 135 |     this.currentAction = ACTION_NONE;
 136 | 
 137 |     // Events source
 138 |     this.eventsSource = SOURCE_ANY;
 139 | 
 140 |     // Empty pointers list
 141 |     this.pointerList = [];
 142 | 
 143 |     // Prevent inner close
 144 |     this.preventInnerClose = false;
 145 |     this.preventInnerCloseTimeout = null;
 146 | 
 147 |     // Used to disable animation when changing props.mainSrc|nextSrc|prevSrc
 148 |     this.keyPressed = false;
 149 | 
 150 |     // Used to store load state / dimensions of images
 151 |     this.imageCache = {};
 152 | 
 153 |     // Time the last keydown event was called (used in keyboard action rate limiting)
 154 |     this.lastKeyDownTime = 0;
 155 | 
 156 |     // Used for debouncing window resize event
 157 |     this.resizeTimeout = null;
 158 | 
 159 |     // Used to determine when actions are triggered by the scroll wheel
 160 |     this.wheelActionTimeout = null;
 161 |     this.resetScrollTimeout = null;
 162 |     this.scrollX = 0;
 163 |     this.scrollY = 0;
 164 | 
 165 |     // Used in panning zoomed images
 166 |     this.moveStartX = 0;
 167 |     this.moveStartY = 0;
 168 |     this.moveStartOffsetX = 0;
 169 |     this.moveStartOffsetY = 0;
 170 | 
 171 |     // Used to swipe
 172 |     this.swipeStartX = 0;
 173 |     this.swipeStartY = 0;
 174 |     this.swipeEndX = 0;
 175 |     this.swipeEndY = 0;
 176 | 
 177 |     // Used to pinch
 178 |     this.pinchTouchList = null;
 179 |     this.pinchDistance = 0;
 180 | 
 181 |     // Used to differentiate between images with identical src
 182 |     this.keyCounter = 0;
 183 | 
 184 |     // Used to detect a move when all src's remain unchanged (four or more of the same image in a row)
 185 |     this.moveRequested = false;
 186 | 
 187 |     if (!this.props.animationDisabled) {
 188 |       // Make opening animation play
 189 |       this.setState({ isClosing: false });
 190 |     }
 191 |   }
 192 | 
 193 |   componentDidMount() {
 194 |     // Prevents cross-origin errors when using a cross-origin iframe
 195 |     this.windowContext = getHighestSafeWindowContext();
 196 | 
 197 |     this.listeners = {
 198 |       resize: this.handleWindowResize,
 199 |       mouseup: this.handleMouseUp,
 200 |       touchend: this.handleTouchEnd,
 201 |       touchcancel: this.handleTouchEnd,
 202 |       pointerdown: this.handlePointerEvent,
 203 |       pointermove: this.handlePointerEvent,
 204 |       pointerup: this.handlePointerEvent,
 205 |       pointercancel: this.handlePointerEvent,
 206 |     };
 207 |     Object.keys(this.listeners).forEach(type => {
 208 |       this.windowContext.addEventListener(type, this.listeners[type]);
 209 |     });
 210 | 
 211 |     this.loadAllImages();
 212 |   }
 213 | 
 214 |   componentWillReceiveProps(nextProps) {
 215 |     // Iterate through the source types for prevProps and nextProps to
 216 |     //  determine if any of the sources changed
 217 |     let sourcesChanged = false;
 218 |     const prevSrcDict = {};
 219 |     const nextSrcDict = {};
 220 |     this.getSrcTypes().forEach(srcType => {
 221 |       if (this.props[srcType.name] !== nextProps[srcType.name]) {
 222 |         sourcesChanged = true;
 223 | 
 224 |         prevSrcDict[this.props[srcType.name]] = true;
 225 |         nextSrcDict[nextProps[srcType.name]] = true;
 226 |       }
 227 |     });
 228 | 
 229 |     if (sourcesChanged || this.moveRequested) {
 230 |       // Reset the loaded state for images not rendered next
 231 |       Object.keys(prevSrcDict).forEach(prevSrc => {
 232 |         if (!(prevSrc in nextSrcDict) && prevSrc in this.imageCache) {
 233 |           this.imageCache[prevSrc].loaded = false;
 234 |         }
 235 |       });
 236 | 
 237 |       this.moveRequested = false;
 238 | 
 239 |       // Load any new images
 240 |       this.loadAllImages(nextProps);
 241 |     }
 242 |   }
 243 | 
 244 |   shouldComponentUpdate() {
 245 |     // Wait for move...
 246 |     return !this.moveRequested;
 247 |   }
 248 | 
 249 |   componentWillUnmount() {
 250 |     this.didUnmount = true;
 251 |     Object.keys(this.listeners).forEach(type => {
 252 |       this.windowContext.removeEventListener(type, this.listeners[type]);
 253 |     });
 254 |     this.timeouts.forEach(tid => clearTimeout(tid));
 255 |   }
 256 | 
 257 |   setTimeout(func, time) {
 258 |     const id = setTimeout(() => {
 259 |       this.timeouts = this.timeouts.filter(tid => tid !== id);
 260 |       func();
 261 |     }, time);
 262 |     this.timeouts.push(id);
 263 |     return id;
 264 |   }
 265 | 
 266 |   setPreventInnerClose() {
 267 |     if (this.preventInnerCloseTimeout) {
 268 |       this.clearTimeout(this.preventInnerCloseTimeout);
 269 |     }
 270 |     this.preventInnerClose = true;
 271 |     this.preventInnerCloseTimeout = this.setTimeout(() => {
 272 |       this.preventInnerClose = false;
 273 |       this.preventInnerCloseTimeout = null;
 274 |     }, 100);
 275 |   }
 276 | 
 277 |   // Get info for the best suited image to display with the given srcType
 278 |   getBestImageForType(srcType) {
 279 |     let imageSrc = this.props[srcType];
 280 |     let fitSizes = {};
 281 | 
 282 |     if (this.isImageLoaded(imageSrc)) {
 283 |       // Use full-size image if available
 284 |       fitSizes = this.getFitSizes(
 285 |         this.imageCache[imageSrc].width,
 286 |         this.imageCache[imageSrc].height,
 287 |       );
 288 |     } else if (this.isImageLoaded(this.props[`${srcType}Thumbnail`])) {
 289 |       // Fall back to using thumbnail if the image has not been loaded
 290 |       imageSrc = this.props[`${srcType}Thumbnail`];
 291 |       fitSizes = this.getFitSizes(
 292 |         this.imageCache[imageSrc].width,
 293 |         this.imageCache[imageSrc].height,
 294 |         true,
 295 |       );
 296 |     } else {
 297 |       return null;
 298 |     }
 299 | 
 300 |     return {
 301 |       src: imageSrc,
 302 |       height: this.imageCache[imageSrc].height,
 303 |       width: this.imageCache[imageSrc].width,
 304 |       targetHeight: fitSizes.height,
 305 |       targetWidth: fitSizes.width,
 306 |     };
 307 |   }
 308 | 
 309 |   // Get sizing for when an image is larger than the window
 310 |   getFitSizes(width, height, stretch) {
 311 |     const boxSize = this.getLightboxRect();
 312 |     let maxHeight = boxSize.height - this.props.imagePadding * 2;
 313 |     let maxWidth = boxSize.width - this.props.imagePadding * 2;
 314 | 
 315 |     if (!stretch) {
 316 |       maxHeight = Math.min(maxHeight, height);
 317 |       maxWidth = Math.min(maxWidth, width);
 318 |     }
 319 | 
 320 |     const maxRatio = maxWidth / maxHeight;
 321 |     const srcRatio = width / height;
 322 | 
 323 |     if (maxRatio > srcRatio) {
 324 |       // height is the constraining dimension of the photo
 325 |       return {
 326 |         width: (width * maxHeight) / height,
 327 |         height: maxHeight,
 328 |       };
 329 |     }
 330 | 
 331 |     return {
 332 |       width: maxWidth,
 333 |       height: (height * maxWidth) / width,
 334 |     };
 335 |   }
 336 | 
 337 |   getMaxOffsets(zoomLevel = this.state.zoomLevel) {
 338 |     const currentImageInfo = this.getBestImageForType('mainSrc');
 339 |     if (currentImageInfo === null) {
 340 |       return { maxX: 0, minX: 0, maxY: 0, minY: 0 };
 341 |     }
 342 | 
 343 |     const boxSize = this.getLightboxRect();
 344 |     const zoomMultiplier = this.getZoomMultiplier(zoomLevel);
 345 | 
 346 |     let maxX = 0;
 347 |     if (zoomMultiplier * currentImageInfo.width - boxSize.width < 0) {
 348 |       // if there is still blank space in the X dimension, don't limit except to the opposite edge
 349 |       maxX = (boxSize.width - zoomMultiplier * currentImageInfo.width) / 2;
 350 |     } else {
 351 |       maxX = (zoomMultiplier * currentImageInfo.width - boxSize.width) / 2;
 352 |     }
 353 | 
 354 |     let maxY = 0;
 355 |     if (zoomMultiplier * currentImageInfo.height - boxSize.height < 0) {
 356 |       // if there is still blank space in the Y dimension, don't limit except to the opposite edge
 357 |       maxY = (boxSize.height - zoomMultiplier * currentImageInfo.height) / 2;
 358 |     } else {
 359 |       maxY = (zoomMultiplier * currentImageInfo.height - boxSize.height) / 2;
 360 |     }
 361 | 
 362 |     return {
 363 |       maxX,
 364 |       maxY,
 365 |       minX: -1 * maxX,
 366 |       minY: -1 * maxY,
 367 |     };
 368 |   }
 369 | 
 370 |   // Get image src types
 371 |   getSrcTypes() {
 372 |     return [
 373 |       {
 374 |         name: 'mainSrc',
 375 |         keyEnding: `i${this.keyCounter}`,
 376 |       },
 377 |       {
 378 |         name: 'mainSrcThumbnail',
 379 |         keyEnding: `t${this.keyCounter}`,
 380 |       },
 381 |       {
 382 |         name: 'nextSrc',
 383 |         keyEnding: `i${this.keyCounter + 1}`,
 384 |       },
 385 |       {
 386 |         name: 'nextSrcThumbnail',
 387 |         keyEnding: `t${this.keyCounter + 1}`,
 388 |       },
 389 |       {
 390 |         name: 'prevSrc',
 391 |         keyEnding: `i${this.keyCounter - 1}`,
 392 |       },
 393 |       {
 394 |         name: 'prevSrcThumbnail',
 395 |         keyEnding: `t${this.keyCounter - 1}`,
 396 |       },
 397 |     ];
 398 |   }
 399 | 
 400 |   /**
 401 |    * Get sizing when the image is scaled
 402 |    */
 403 |   getZoomMultiplier(zoomLevel = this.state.zoomLevel) {
 404 |     return ZOOM_RATIO ** zoomLevel;
 405 |   }
 406 | 
 407 |   /**
 408 |    * Get the size of the lightbox in pixels
 409 |    */
 410 |   getLightboxRect() {
 411 |     if (this.outerEl) {
 412 |       return this.outerEl.getBoundingClientRect();
 413 |     }
 414 | 
 415 |     return {
 416 |       width: getWindowWidth(),
 417 |       height: getWindowHeight(),
 418 |       top: 0,
 419 |       right: 0,
 420 |       bottom: 0,
 421 |       left: 0,
 422 |     };
 423 |   }
 424 | 
 425 |   clearTimeout(id) {
 426 |     this.timeouts = this.timeouts.filter(tid => tid !== id);
 427 |     clearTimeout(id);
 428 |   }
 429 | 
 430 |   // Change zoom level
 431 |   changeZoom(zoomLevel, clientX, clientY) {
 432 |     // Ignore if zoom disabled
 433 |     if (!this.props.enableZoom) {
 434 |       return;
 435 |     }
 436 | 
 437 |     // Constrain zoom level to the set bounds
 438 |     const nextZoomLevel = Math.max(MIN_ZOOM_LEVEL, Math.min(MAX_ZOOM_LEVEL, zoomLevel));
 439 | 
 440 |     // Ignore requests that don't change the zoom level
 441 |     if (nextZoomLevel === this.state.zoomLevel) {
 442 |       return;
 443 |     } else if (nextZoomLevel === MIN_ZOOM_LEVEL) {
 444 |       // Snap back to center if zoomed all the way out
 445 |       this.setState({
 446 |         zoomLevel: nextZoomLevel,
 447 |         offsetX: 0,
 448 |         offsetY: 0,
 449 |       });
 450 | 
 451 |       return;
 452 |     }
 453 | 
 454 |     const imageBaseSize = this.getBestImageForType('mainSrc');
 455 |     if (imageBaseSize === null) {
 456 |       return;
 457 |     }
 458 | 
 459 |     const currentZoomMultiplier = this.getZoomMultiplier();
 460 |     const nextZoomMultiplier = this.getZoomMultiplier(nextZoomLevel);
 461 | 
 462 |     // Default to the center of the image to zoom when no mouse position specified
 463 |     const boxRect = this.getLightboxRect();
 464 |     const pointerX = typeof clientX !== 'undefined' ? clientX - boxRect.left : boxRect.width / 2;
 465 |     const pointerY = typeof clientY !== 'undefined' ? clientY - boxRect.top : boxRect.height / 2;
 466 | 
 467 |     const currentImageOffsetX = (boxRect.width - imageBaseSize.width * currentZoomMultiplier) / 2;
 468 |     const currentImageOffsetY = (boxRect.height - imageBaseSize.height * currentZoomMultiplier) / 2;
 469 | 
 470 |     const currentImageRealOffsetX = currentImageOffsetX - this.state.offsetX;
 471 |     const currentImageRealOffsetY = currentImageOffsetY - this.state.offsetY;
 472 | 
 473 |     const currentPointerXRelativeToImage =
 474 |       (pointerX - currentImageRealOffsetX) / currentZoomMultiplier;
 475 |     const currentPointerYRelativeToImage =
 476 |       (pointerY - currentImageRealOffsetY) / currentZoomMultiplier;
 477 | 
 478 |     const nextImageRealOffsetX = pointerX - currentPointerXRelativeToImage * nextZoomMultiplier;
 479 |     const nextImageRealOffsetY = pointerY - currentPointerYRelativeToImage * nextZoomMultiplier;
 480 | 
 481 |     const nextImageOffsetX = (boxRect.width - imageBaseSize.width * nextZoomMultiplier) / 2;
 482 |     const nextImageOffsetY = (boxRect.height - imageBaseSize.height * nextZoomMultiplier) / 2;
 483 | 
 484 |     let nextOffsetX = nextImageOffsetX - nextImageRealOffsetX;
 485 |     let nextOffsetY = nextImageOffsetY - nextImageRealOffsetY;
 486 | 
 487 |     // When zooming out, limit the offset so things don't get left askew
 488 |     if (this.currentAction !== ACTION_PINCH) {
 489 |       const maxOffsets = this.getMaxOffsets();
 490 |       if (this.state.zoomLevel > nextZoomLevel) {
 491 |         nextOffsetX = Math.max(maxOffsets.minX, Math.min(maxOffsets.maxX, nextOffsetX));
 492 |         nextOffsetY = Math.max(maxOffsets.minY, Math.min(maxOffsets.maxY, nextOffsetY));
 493 |       }
 494 |     }
 495 | 
 496 |     this.setState({
 497 |       zoomLevel: nextZoomLevel,
 498 |       offsetX: nextOffsetX,
 499 |       offsetY: nextOffsetY,
 500 |     });
 501 |   }
 502 | 
 503 |   closeIfClickInner(event) {
 504 |     if (!this.preventInnerClose && event.target.className.search(/\bril-inner\b/) > -1) {
 505 |       this.requestClose(event);
 506 |     }
 507 |   }
 508 | 
 509 |   /**
 510 |    * Handle user keyboard actions
 511 |    */
 512 |   handleKeyInput(event) {
 513 |     event.stopPropagation();
 514 | 
 515 |     // Ignore key input during animations
 516 |     if (this.isAnimating()) {
 517 |       return;
 518 |     }
 519 | 
 520 |     // Allow slightly faster navigation through the images when user presses keys repeatedly
 521 |     if (event.type === 'keyup') {
 522 |       this.lastKeyDownTime -= this.props.keyRepeatKeyupBonus;
 523 |       return;
 524 |     }
 525 | 
 526 |     const keyCode = event.which || event.keyCode;
 527 | 
 528 |     // Ignore key presses that happen too close to each other (when rapid fire key pressing or holding down the key)
 529 |     // But allow it if it's a lightbox closing action
 530 |     const currentTime = new Date();
 531 |     if (
 532 |       currentTime.getTime() - this.lastKeyDownTime < this.props.keyRepeatLimit &&
 533 |       keyCode !== KEYS.ESC
 534 |     ) {
 535 |       return;
 536 |     }
 537 |     this.lastKeyDownTime = currentTime.getTime();
 538 | 
 539 |     switch (keyCode) {
 540 |       // ESC key closes the lightbox
 541 |       case KEYS.ESC:
 542 |         event.preventDefault();
 543 |         this.requestClose(event);
 544 |         break;
 545 | 
 546 |       // Left arrow key moves to previous image
 547 |       case KEYS.LEFT_ARROW:
 548 |         if (!this.props.prevSrc) {
 549 |           return;
 550 |         }
 551 | 
 552 |         event.preventDefault();
 553 |         this.keyPressed = true;
 554 |         this.requestMovePrev(event);
 555 |         break;
 556 | 
 557 |       // Right arrow key moves to next image
 558 |       case KEYS.RIGHT_ARROW:
 559 |         if (!this.props.nextSrc) {
 560 |           return;
 561 |         }
 562 | 
 563 |         event.preventDefault();
 564 |         this.keyPressed = true;
 565 |         this.requestMoveNext(event);
 566 |         break;
 567 | 
 568 |       default:
 569 |     }
 570 |   }
 571 | 
 572 |   /**
 573 |    * Handle a mouse wheel event over the lightbox container
 574 |    */
 575 |   handleOuterMousewheel(event) {
 576 |     // Prevent scrolling of the background
 577 |     event.preventDefault();
 578 |     event.stopPropagation();
 579 | 
 580 |     const xThreshold = WHEEL_MOVE_X_THRESHOLD;
 581 |     let actionDelay = 0;
 582 |     const imageMoveDelay = 500;
 583 | 
 584 |     this.clearTimeout(this.resetScrollTimeout);
 585 |     this.resetScrollTimeout = this.setTimeout(() => {
 586 |       this.scrollX = 0;
 587 |       this.scrollY = 0;
 588 |     }, 300);
 589 | 
 590 |     // Prevent rapid-fire zoom behavior
 591 |     if (this.wheelActionTimeout !== null || this.isAnimating()) {
 592 |       return;
 593 |     }
 594 | 
 595 |     if (Math.abs(event.deltaY) < Math.abs(event.deltaX)) {
 596 |       // handle horizontal scrolls with image moves
 597 |       this.scrollY = 0;
 598 |       this.scrollX += event.deltaX;
 599 | 
 600 |       const bigLeapX = xThreshold / 2;
 601 |       // If the scroll amount has accumulated sufficiently, or a large leap was taken
 602 |       if (this.scrollX >= xThreshold || event.deltaX >= bigLeapX) {
 603 |         // Scroll right moves to next
 604 |         this.requestMoveNext(event);
 605 |         actionDelay = imageMoveDelay;
 606 |         this.scrollX = 0;
 607 |       } else if (this.scrollX <= -1 * xThreshold || event.deltaX <= -1 * bigLeapX) {
 608 |         // Scroll left moves to previous
 609 |         this.requestMovePrev(event);
 610 |         actionDelay = imageMoveDelay;
 611 |         this.scrollX = 0;
 612 |       }
 613 |     }
 614 | 
 615 |     // Allow successive actions after the set delay
 616 |     if (actionDelay !== 0) {
 617 |       this.wheelActionTimeout = this.setTimeout(() => {
 618 |         this.wheelActionTimeout = null;
 619 |       }, actionDelay);
 620 |     }
 621 |   }
 622 | 
 623 |   handleImageMouseWheel(event) {
 624 |     event.preventDefault();
 625 |     const yThreshold = WHEEL_MOVE_Y_THRESHOLD;
 626 | 
 627 |     if (Math.abs(event.deltaY) >= Math.abs(event.deltaX)) {
 628 |       event.stopPropagation();
 629 |       // If the vertical scroll amount was large enough, perform a zoom
 630 |       if (Math.abs(event.deltaY) < yThreshold) {
 631 |         return;
 632 |       }
 633 | 
 634 |       this.scrollX = 0;
 635 |       this.scrollY += event.deltaY;
 636 | 
 637 |       this.changeZoom(this.state.zoomLevel - event.deltaY, event.clientX, event.clientY);
 638 |     }
 639 |   }
 640 | 
 641 |   /**
 642 |    * Handle a double click on the current image
 643 |    */
 644 |   handleImageDoubleClick(event) {
 645 |     if (this.state.zoomLevel > MIN_ZOOM_LEVEL) {
 646 |       // A double click when zoomed in zooms all the way out
 647 |       this.changeZoom(MIN_ZOOM_LEVEL, event.clientX, event.clientY);
 648 |     } else {
 649 |       // A double click when zoomed all the way out zooms in
 650 |       this.changeZoom(
 651 |         this.state.zoomLevel + ZOOM_BUTTON_INCREMENT_SIZE,
 652 |         event.clientX,
 653 |         event.clientY,
 654 |       );
 655 |     }
 656 |   }
 657 | 
 658 |   shouldHandleEvent(source) {
 659 |     if (this.eventsSource === source) {
 660 |       return true;
 661 |     }
 662 |     if (this.eventsSource === SOURCE_ANY) {
 663 |       this.eventsSource = source;
 664 |       return true;
 665 |     }
 666 |     switch (source) {
 667 |       case SOURCE_MOUSE:
 668 |         return false;
 669 |       case SOURCE_TOUCH:
 670 |         this.eventsSource = SOURCE_TOUCH;
 671 |         this.filterPointersBySource();
 672 |         return true;
 673 |       case SOURCE_POINTER:
 674 |         if (this.eventsSource === SOURCE_MOUSE) {
 675 |           this.eventsSource = SOURCE_POINTER;
 676 |           this.filterPointersBySource();
 677 |           return true;
 678 |         }
 679 |         return false;
 680 |       default:
 681 |         return false;
 682 |     }
 683 |   }
 684 | 
 685 |   addPointer(pointer) {
 686 |     this.pointerList.push(pointer);
 687 |   }
 688 | 
 689 |   removePointer(pointer) {
 690 |     this.pointerList = this.pointerList.filter(({ id }) => id !== pointer.id);
 691 |   }
 692 | 
 693 |   filterPointersBySource() {
 694 |     this.pointerList = this.pointerList.filter(({ source }) => source === this.eventsSource);
 695 |   }
 696 | 
 697 |   handleMouseDown(event) {
 698 |     if (
 699 |       this.shouldHandleEvent(SOURCE_MOUSE) &&
 700 |       ReactImageLightbox.isTargetMatchImage(event.target)
 701 |     ) {
 702 |       this.addPointer(ReactImageLightbox.parseMouseEvent(event));
 703 |       this.multiPointerStart(event);
 704 |     }
 705 |   }
 706 | 
 707 |   handleMouseMove(event) {
 708 |     if (this.shouldHandleEvent(SOURCE_MOUSE)) {
 709 |       this.multiPointerMove(event, [ReactImageLightbox.parseMouseEvent(event)]);
 710 |     }
 711 |   }
 712 | 
 713 |   handleMouseUp(event) {
 714 |     if (this.shouldHandleEvent(SOURCE_MOUSE)) {
 715 |       this.removePointer(ReactImageLightbox.parseMouseEvent(event));
 716 |       this.multiPointerEnd(event);
 717 |     }
 718 |   }
 719 | 
 720 |   handlePointerEvent(event) {
 721 |     if (this.shouldHandleEvent(SOURCE_POINTER)) {
 722 |       switch (event.type) {
 723 |         case 'pointerdown':
 724 |           if (ReactImageLightbox.isTargetMatchImage(event.target)) {
 725 |             this.addPointer(ReactImageLightbox.parsePointerEvent(event));
 726 |             this.multiPointerStart(event);
 727 |           }
 728 |           break;
 729 |         case 'pointermove':
 730 |           this.multiPointerMove(event, [ReactImageLightbox.parsePointerEvent(event)]);
 731 |           break;
 732 |         case 'pointerup':
 733 |         case 'pointercancel':
 734 |           this.removePointer(ReactImageLightbox.parsePointerEvent(event));
 735 |           this.multiPointerEnd(event);
 736 |           break;
 737 |         default:
 738 |           break;
 739 |       }
 740 |     }
 741 |   }
 742 | 
 743 |   handleTouchStart(event) {
 744 |     if (
 745 |       this.shouldHandleEvent(SOURCE_TOUCH) &&
 746 |       ReactImageLightbox.isTargetMatchImage(event.target)
 747 |     ) {
 748 |       [].forEach.call(event.changedTouches, eventTouch =>
 749 |         this.addPointer(ReactImageLightbox.parseTouchPointer(eventTouch)),
 750 |       );
 751 |       this.multiPointerStart(event);
 752 |     }
 753 |   }
 754 | 
 755 |   handleTouchMove(event) {
 756 |     if (this.shouldHandleEvent(SOURCE_TOUCH)) {
 757 |       this.multiPointerMove(
 758 |         event,
 759 |         [].map.call(event.changedTouches, eventTouch =>
 760 |           ReactImageLightbox.parseTouchPointer(eventTouch),
 761 |         ),
 762 |       );
 763 |     }
 764 |   }
 765 | 
 766 |   handleTouchEnd(event) {
 767 |     if (this.shouldHandleEvent(SOURCE_TOUCH)) {
 768 |       [].map.call(event.changedTouches, touch =>
 769 |         this.removePointer(ReactImageLightbox.parseTouchPointer(touch)),
 770 |       );
 771 |       this.multiPointerEnd(event);
 772 |     }
 773 |   }
 774 | 
 775 |   decideMoveOrSwipe(pointer) {
 776 |     if (this.state.zoomLevel <= MIN_ZOOM_LEVEL) {
 777 |       this.handleSwipeStart(pointer);
 778 |     } else {
 779 |       this.handleMoveStart(pointer);
 780 |     }
 781 |   }
 782 | 
 783 |   multiPointerStart(event) {
 784 |     this.handleEnd(null);
 785 |     switch (this.pointerList.length) {
 786 |       case 1: {
 787 |         event.preventDefault();
 788 |         this.decideMoveOrSwipe(this.pointerList[0]);
 789 |         break;
 790 |       }
 791 |       case 2: {
 792 |         event.preventDefault();
 793 |         this.handlePinchStart(this.pointerList);
 794 |         break;
 795 |       }
 796 |       default:
 797 |         break;
 798 |     }
 799 |   }
 800 | 
 801 |   multiPointerMove(event, pointerList) {
 802 |     switch (this.currentAction) {
 803 |       case ACTION_MOVE: {
 804 |         event.preventDefault();
 805 |         this.handleMove(pointerList[0]);
 806 |         break;
 807 |       }
 808 |       case ACTION_SWIPE: {
 809 |         event.preventDefault();
 810 |         this.handleSwipe(pointerList[0]);
 811 |         break;
 812 |       }
 813 |       case ACTION_PINCH: {
 814 |         event.preventDefault();
 815 |         this.handlePinch(pointerList);
 816 |         break;
 817 |       }
 818 |       default:
 819 |         break;
 820 |     }
 821 |   }
 822 | 
 823 |   multiPointerEnd(event) {
 824 |     if (this.currentAction !== ACTION_NONE) {
 825 |       this.setPreventInnerClose();
 826 |       this.handleEnd(event);
 827 |     }
 828 |     switch (this.pointerList.length) {
 829 |       case 0: {
 830 |         this.eventsSource = SOURCE_ANY;
 831 |         break;
 832 |       }
 833 |       case 1: {
 834 |         event.preventDefault();
 835 |         this.decideMoveOrSwipe(this.pointerList[0]);
 836 |         break;
 837 |       }
 838 |       case 2: {
 839 |         event.preventDefault();
 840 |         this.handlePinchStart(this.pointerList);
 841 |         break;
 842 |       }
 843 |       default:
 844 |         break;
 845 |     }
 846 |   }
 847 | 
 848 |   handleEnd(event) {
 849 |     switch (this.currentAction) {
 850 |       case ACTION_MOVE:
 851 |         this.handleMoveEnd(event);
 852 |         break;
 853 |       case ACTION_SWIPE:
 854 |         this.handleSwipeEnd(event);
 855 |         break;
 856 |       case ACTION_PINCH:
 857 |         this.handlePinchEnd(event);
 858 |         break;
 859 |       default:
 860 |         break;
 861 |     }
 862 |   }
 863 | 
 864 |   // Handle move start over the lightbox container
 865 |   // This happens:
 866 |   // - On a mouseDown event
 867 |   // - On a touchstart event
 868 |   handleMoveStart({ x: clientX, y: clientY }) {
 869 |     if (!this.props.enableZoom) {
 870 |       return;
 871 |     }
 872 |     this.currentAction = ACTION_MOVE;
 873 |     this.moveStartX = clientX;
 874 |     this.moveStartY = clientY;
 875 |     this.moveStartOffsetX = this.state.offsetX;
 876 |     this.moveStartOffsetY = this.state.offsetY;
 877 |   }
 878 | 
 879 |   // Handle dragging over the lightbox container
 880 |   // This happens:
 881 |   // - After a mouseDown and before a mouseUp event
 882 |   // - After a touchstart and before a touchend event
 883 |   handleMove({ x: clientX, y: clientY }) {
 884 |     const newOffsetX = this.moveStartX - clientX + this.moveStartOffsetX;
 885 |     const newOffsetY = this.moveStartY - clientY + this.moveStartOffsetY;
 886 |     if (this.state.offsetX !== newOffsetX || this.state.offsetY !== newOffsetY) {
 887 |       this.setState({
 888 |         offsetX: newOffsetX,
 889 |         offsetY: newOffsetY,
 890 |       });
 891 |     }
 892 |   }
 893 | 
 894 |   handleMoveEnd() {
 895 |     this.currentAction = ACTION_NONE;
 896 |     this.moveStartX = 0;
 897 |     this.moveStartY = 0;
 898 |     this.moveStartOffsetX = 0;
 899 |     this.moveStartOffsetY = 0;
 900 |     // Snap image back into frame if outside max offset range
 901 |     const maxOffsets = this.getMaxOffsets();
 902 |     const nextOffsetX = Math.max(maxOffsets.minX, Math.min(maxOffsets.maxX, this.state.offsetX));
 903 |     const nextOffsetY = Math.max(maxOffsets.minY, Math.min(maxOffsets.maxY, this.state.offsetY));
 904 |     if (nextOffsetX !== this.state.offsetX || nextOffsetY !== this.state.offsetY) {
 905 |       this.setState({
 906 |         offsetX: nextOffsetX,
 907 |         offsetY: nextOffsetY,
 908 |         shouldAnimate: true,
 909 |       });
 910 |       this.setTimeout(() => {
 911 |         this.setState({ shouldAnimate: false });
 912 |       }, this.props.animationDuration);
 913 |     }
 914 |   }
 915 | 
 916 |   handleSwipeStart({ x: clientX, y: clientY }) {
 917 |     this.currentAction = ACTION_SWIPE;
 918 |     this.swipeStartX = clientX;
 919 |     this.swipeStartY = clientY;
 920 |     this.swipeEndX = clientX;
 921 |     this.swipeEndY = clientY;
 922 |   }
 923 | 
 924 |   handleSwipe({ x: clientX, y: clientY }) {
 925 |     this.swipeEndX = clientX;
 926 |     this.swipeEndY = clientY;
 927 |   }
 928 | 
 929 |   handleSwipeEnd(event) {
 930 |     const xDiff = this.swipeEndX - this.swipeStartX;
 931 |     const xDiffAbs = Math.abs(xDiff);
 932 |     const yDiffAbs = Math.abs(this.swipeEndY - this.swipeStartY);
 933 | 
 934 |     this.currentAction = ACTION_NONE;
 935 |     this.swipeStartX = 0;
 936 |     this.swipeStartY = 0;
 937 |     this.swipeEndX = 0;
 938 |     this.swipeEndY = 0;
 939 | 
 940 |     if (!event || this.isAnimating() || xDiffAbs < yDiffAbs * 1.5) {
 941 |       return;
 942 |     }
 943 | 
 944 |     if (xDiffAbs < MIN_SWIPE_DISTANCE) {
 945 |       const boxRect = this.getLightboxRect();
 946 |       if (xDiffAbs < boxRect.width / 4) {
 947 |         return;
 948 |       }
 949 |     }
 950 | 
 951 |     if (xDiff > 0 && this.props.prevSrc) {
 952 |       event.preventDefault();
 953 |       this.requestMovePrev();
 954 |     } else if (xDiff < 0 && this.props.nextSrc) {
 955 |       event.preventDefault();
 956 |       this.requestMoveNext();
 957 |     }
 958 |   }
 959 | 
 960 |   calculatePinchDistance([a, b] = this.pinchTouchList) {
 961 |     return Math.sqrt((a.x - b.x) ** 2 + (a.y - b.y) ** 2);
 962 |   }
 963 | 
 964 |   calculatePinchCenter([a, b] = this.pinchTouchList) {
 965 |     return {
 966 |       x: a.x - (a.x - b.x) / 2,
 967 |       y: a.y - (a.y - b.y) / 2,
 968 |     };
 969 |   }
 970 | 
 971 |   handlePinchStart(pointerList) {
 972 |     if (!this.props.enableZoom) {
 973 |       return;
 974 |     }
 975 |     this.currentAction = ACTION_PINCH;
 976 |     this.pinchTouchList = pointerList.map(({ id, x, y }) => ({ id, x, y }));
 977 |     this.pinchDistance = this.calculatePinchDistance();
 978 |   }
 979 | 
 980 |   handlePinch(pointerList) {
 981 |     this.pinchTouchList = this.pinchTouchList.map(oldPointer => {
 982 |       for (let i = 0; i < pointerList.length; i += 1) {
 983 |         if (pointerList[i].id === oldPointer.id) {
 984 |           return pointerList[i];
 985 |         }
 986 |       }
 987 | 
 988 |       return oldPointer;
 989 |     });
 990 | 
 991 |     const newDistance = this.calculatePinchDistance();
 992 | 
 993 |     const zoomLevel = this.state.zoomLevel + newDistance - this.pinchDistance;
 994 | 
 995 |     this.pinchDistance = newDistance;
 996 |     const { x: clientX, y: clientY } = this.calculatePinchCenter(this.pinchTouchList);
 997 |     this.changeZoom(zoomLevel, clientX, clientY);
 998 |   }
 999 | 
1000 |   handlePinchEnd() {
1001 |     this.currentAction = ACTION_NONE;
1002 |     this.pinchTouchList = null;
1003 |     this.pinchDistance = 0;
1004 |   }
1005 | 
1006 |   // Handle the window resize event
1007 |   handleWindowResize() {
1008 |     this.clearTimeout(this.resizeTimeout);
1009 |     this.resizeTimeout = this.setTimeout(this.forceUpdate.bind(this), 100);
1010 |   }
1011 | 
1012 |   handleZoomInButtonClick() {
1013 |     const nextZoomLevel = this.state.zoomLevel + ZOOM_BUTTON_INCREMENT_SIZE;
1014 |     this.changeZoom(nextZoomLevel);
1015 |     if (nextZoomLevel === MAX_ZOOM_LEVEL) {
1016 |       this.zoomOutBtn.focus();
1017 |     }
1018 |   }
1019 | 
1020 |   handleZoomOutButtonClick() {
1021 |     const nextZoomLevel = this.state.zoomLevel - ZOOM_BUTTON_INCREMENT_SIZE;
1022 |     this.changeZoom(nextZoomLevel);
1023 |     if (nextZoomLevel === MIN_ZOOM_LEVEL) {
1024 |       this.zoomInBtn.focus();
1025 |     }
1026 |   }
1027 | 
1028 |   handleCaptionMousewheel(event) {
1029 |     event.stopPropagation();
1030 | 
1031 |     if (!this.caption) {
1032 |       return;
1033 |     }
1034 | 
1035 |     const { height } = this.caption.getBoundingClientRect();
1036 |     const { scrollHeight, scrollTop } = this.caption;
1037 |     if (
1038 |       (event.deltaY > 0 && height + scrollTop >= scrollHeight) ||
1039 |       (event.deltaY < 0 && scrollTop <= 0)
1040 |     ) {
1041 |       event.preventDefault();
1042 |     }
1043 |   }
1044 | 
1045 |   // Detach key and mouse input events
1046 |   isAnimating() {
1047 |     return this.state.shouldAnimate || this.state.isClosing;
1048 |   }
1049 | 
1050 |   // Check if image is loaded
1051 |   isImageLoaded(imageSrc) {
1052 |     return imageSrc && imageSrc in this.imageCache && this.imageCache[imageSrc].loaded;
1053 |   }
1054 | 
1055 |   // Load image from src and call callback with image width and height on load
1056 |   loadImage(srcType, imageSrc, done) {
1057 |     // Return the image info if it is already cached
1058 |     if (this.isImageLoaded(imageSrc)) {
1059 |       this.setTimeout(() => {
1060 |         done();
1061 |       }, 1);
1062 |       return;
1063 |     }
1064 | 
1065 |     const inMemoryImage = new global.Image();
1066 | 
1067 |     if (this.props.imageCrossOrigin) {
1068 |       inMemoryImage.crossOrigin = this.props.imageCrossOrigin;
1069 |     }
1070 | 
1071 |     inMemoryImage.onerror = errorEvent => {
1072 |       this.props.onImageLoadError(imageSrc, srcType, errorEvent);
1073 | 
1074 |       // failed to load so set the state loadErrorStatus
1075 |       this.setState(prevState => ({
1076 |         loadErrorStatus: { ...prevState.loadErrorStatus, [srcType]: true },
1077 |       }));
1078 | 
1079 |       done(errorEvent);
1080 |     };
1081 | 
1082 |     inMemoryImage.onload = () => {
1083 |       this.props.onImageLoad(imageSrc, srcType, inMemoryImage);
1084 | 
1085 |       this.imageCache[imageSrc] = {
1086 |         loaded: true,
1087 |         width: inMemoryImage.width,
1088 |         height: inMemoryImage.height,
1089 |       };
1090 | 
1091 |       done();
1092 |     };
1093 | 
1094 |     inMemoryImage.src = imageSrc;
1095 |   }
1096 | 
1097 |   // Load all images and their thumbnails
1098 |   loadAllImages(props = this.props) {
1099 |     const generateLoadDoneCallback = (srcType, imageSrc) => err => {
1100 |       // Give up showing image on error
1101 |       if (err) {
1102 |         return;
1103 |       }
1104 | 
1105 |       // Don't rerender if the src is not the same as when the load started
1106 |       // or if the component has unmounted
1107 |       if (this.props[srcType] !== imageSrc || this.didUnmount) {
1108 |         return;
1109 |       }
1110 | 
1111 |       // Force rerender with the new image
1112 |       this.forceUpdate();
1113 |     };
1114 | 
1115 |     // Load the images
1116 |     this.getSrcTypes().forEach(srcType => {
1117 |       const type = srcType.name;
1118 | 
1119 |       // there is no error when we try to load it initially
1120 |       if (props[type] && this.state.loadErrorStatus[type]) {
1121 |         this.setState(prevState => ({
1122 |           loadErrorStatus: { ...prevState.loadErrorStatus, [type]: false },
1123 |         }));
1124 |       }
1125 | 
1126 |       // Load unloaded images
1127 |       if (props[type] && typeof props[type] === 'string' && !this.isImageLoaded(props[type])) {
1128 |         this.loadImage(type, props[type], generateLoadDoneCallback(type, props[type]));
1129 |       }
1130 |     });
1131 |   }
1132 | 
1133 |   // Request that the lightbox be closed
1134 |   requestClose(event) {
1135 |     // Call the parent close request
1136 |     const closeLightbox = () => this.props.onCloseRequest(event);
1137 | 
1138 |     if (
1139 |       this.props.animationDisabled ||
1140 |       (event.type === 'keydown' && !this.props.animationOnKeyInput)
1141 |     ) {
1142 |       // No animation
1143 |       closeLightbox();
1144 |       return;
1145 |     }
1146 | 
1147 |     // With animation
1148 |     // Start closing animation
1149 |     this.setState({ isClosing: true });
1150 | 
1151 |     // Perform the actual closing at the end of the animation
1152 |     this.setTimeout(closeLightbox, this.props.animationDuration);
1153 |   }
1154 | 
1155 |   requestMove(direction, event) {
1156 |     // Reset the zoom level on image move
1157 |     const nextState = {
1158 |       zoomLevel: MIN_ZOOM_LEVEL,
1159 |       offsetX: 0,
1160 |       offsetY: 0,
1161 |     };
1162 | 
1163 |     // Enable animated states
1164 |     if (!this.props.animationDisabled && (!this.keyPressed || this.props.animationOnKeyInput)) {
1165 |       nextState.shouldAnimate = true;
1166 |       this.setTimeout(() => this.setState({ shouldAnimate: false }), this.props.animationDuration);
1167 |     }
1168 |     this.keyPressed = false;
1169 | 
1170 |     this.moveRequested = true;
1171 | 
1172 |     if (direction === 'prev') {
1173 |       this.keyCounter -= 1;
1174 |       this.setState(nextState);
1175 |       this.props.onMovePrevRequest(event);
1176 |     } else {
1177 |       this.keyCounter += 1;
1178 |       this.setState(nextState);
1179 |       this.props.onMoveNextRequest(event);
1180 |     }
1181 |   }
1182 | 
1183 |   // Request to transition to the next image
1184 |   requestMoveNext(event) {
1185 |     this.requestMove('next', event);
1186 |   }
1187 | 
1188 |   // Request to transition to the previous image
1189 |   requestMovePrev(event) {
1190 |     this.requestMove('prev', event);
1191 |   }
1192 | 
1193 |   render() {
1194 |     const {
1195 |       animationDisabled,
1196 |       animationDuration,
1197 |       clickOutsideToClose,
1198 |       discourageDownloads,
1199 |       enableZoom,
1200 |       imageTitle,
1201 |       nextSrc,
1202 |       prevSrc,
1203 |       toolbarButtons,
1204 |       reactModalStyle,
1205 |       onAfterOpen,
1206 |       imageCrossOrigin,
1207 |       reactModalProps,
1208 |     } = this.props;
1209 |     const { zoomLevel, offsetX, offsetY, isClosing, loadErrorStatus } = this.state;
1210 | 
1211 |     const boxSize = this.getLightboxRect();
1212 |     let transitionStyle = {};
1213 | 
1214 |     // Transition settings for sliding animations
1215 |     if (!animationDisabled && this.isAnimating()) {
1216 |       transitionStyle = {
1217 |         ...transitionStyle,
1218 |         transition: `transform ${animationDuration}ms`,
1219 |       };
1220 |     }
1221 | 
1222 |     // Key endings to differentiate between images with the same src
1223 |     const keyEndings = {};
1224 |     this.getSrcTypes().forEach(({ name, keyEnding }) => {
1225 |       keyEndings[name] = keyEnding;
1226 |     });
1227 | 
1228 |     // Images to be displayed
1229 |     const displayItems = [];
1230 |     const addImage = (srcType, imageClass, transforms) => {
1231 |       // Ignore types that have no source defined for their full size image
1232 |       if (!this.props[srcType]) {
1233 |         return;
1234 |       }
1235 |       const bestImageInfo = this.getBestImageForType(srcType);
1236 | 
1237 |       const imageStyle = {
1238 |         ...transitionStyle,
1239 |         ...ReactImageLightbox.getTransform({
1240 |           ...transforms,
1241 |           ...bestImageInfo,
1242 |         }),
1243 |       };
1244 | 
1245 |       if (zoomLevel > MIN_ZOOM_LEVEL) {
1246 |         imageStyle.cursor = 'move';
1247 |       }
1248 | 
1249 |       // support IE 9 and 11
1250 |       const hasTrueValue = object => Object.keys(object).some(key => object[key]);
1251 | 
1252 |       // when error on one of the loads then push custom error stuff
1253 |       if (bestImageInfo === null && hasTrueValue(loadErrorStatus)) {
1254 |         displayItems.push(
1255 |           <div
1256 |             className={`${imageClass} ril__image ril-errored`}
1257 |             style={imageStyle}
1258 |             key={this.props[srcType] + keyEndings[srcType]}
1259 |           >
1260 |             <div className="ril__errorContainer">{this.props.imageLoadErrorMessage}</div>
1261 |           </div>,
1262 |         );
1263 | 
1264 |         return;
1265 |       } else if (bestImageInfo === null) {
1266 |         const loadingIcon = (
1267 |           <div className="ril-loading-circle ril__loadingCircle ril__loadingContainer__icon">
1268 |             {[...new Array(12)].map((_, index) => (
1269 |               <div
1270 |                 // eslint-disable-next-line react/no-array-index-key
1271 |                 key={index}
1272 |                 className="ril-loading-circle-point ril__loadingCirclePoint"
1273 |               />
1274 |             ))}
1275 |           </div>
1276 |         );
1277 | 
1278 |         // Fall back to loading icon if the thumbnail has not been loaded
1279 |         displayItems.push(
1280 |           <div
1281 |             className={`${imageClass} ril__image ril-not-loaded`}
1282 |             style={imageStyle}
1283 |             key={this.props[srcType] + keyEndings[srcType]}
1284 |           >
1285 |             <div className="ril__loadingContainer">{loadingIcon}</div>
1286 |           </div>,
1287 |         );
1288 | 
1289 |         return;
1290 |       }
1291 | 
1292 |       const imageSrc = bestImageInfo.src;
1293 |       if (discourageDownloads) {
1294 |         imageStyle.backgroundImage = `url('${imageSrc}')`;
1295 |         displayItems.push(
1296 |           <div
1297 |             className={`${imageClass} ril__image ril__imageDiscourager`}
1298 |             onDoubleClick={this.handleImageDoubleClick}
1299 |             onWheel={this.handleImageMouseWheel}
1300 |             style={imageStyle}
1301 |             key={imageSrc + keyEndings[srcType]}
1302 |           >
1303 |             <div className="ril-download-blocker ril__downloadBlocker" />
1304 |           </div>,
1305 |         );
1306 |       } else {
1307 |         displayItems.push(
1308 |           <img
1309 |             {...(imageCrossOrigin ? { crossOrigin: imageCrossOrigin } : {})}
1310 |             className={`${imageClass} ril__image`}
1311 |             onDoubleClick={this.handleImageDoubleClick}
1312 |             onWheel={this.handleImageMouseWheel}
1313 |             onDragStart={e => e.preventDefault()}
1314 |             style={imageStyle}
1315 |             src={imageSrc}
1316 |             key={imageSrc + keyEndings[srcType]}
1317 |             alt={typeof imageTitle === 'string' ? imageTitle : translate('Image')}
1318 |             draggable={false}
1319 |           />,
1320 |         );
1321 |       }
1322 |     };
1323 | 
1324 |     const addComponent = (srcType, imageClass, transforms = {}) => {
1325 |       const imageStyle = {
1326 |         ...transitionStyle,
1327 |         ...ReactImageLightbox.getTransform({
1328 |           ...transforms,
1329 |         }),
1330 |       };
1331 | 
1332 |       let DisplayItem = this.props[srcType];
1333 |       DisplayItem = isReact.component(DisplayItem) ? <DisplayItem /> : DisplayItem;
1334 |       displayItems.push(
1335 |         <div
1336 |           className={`${imageClass} ril__image`}
1337 |           onDoubleClick={this.handleImageDoubleClick}
1338 |           onWheel={this.handleImageMouseWheel}
1339 |           onDragStart={e => e.preventDefault()}
1340 |           style={imageStyle}
1341 |           key={keyEndings[srcType]}
1342 |           draggable={false}
1343 |         >
1344 |           {DisplayItem}
1345 |         </div>,
1346 |       );
1347 |     };
1348 |     const addItem = (srcType, imageClass, baseStyle = {}) => {
1349 |       const DisplayItem = this.props[srcType];
1350 |       if (!DisplayItem) {
1351 |         return;
1352 |       }
1353 |       if (typeof DisplayItem === 'string') {
1354 |         addImage(srcType, imageClass, baseStyle);
1355 |       }
1356 |       if (isReact.component(DisplayItem) || isReact.element(DisplayItem)) {
1357 |         addComponent(srcType, imageClass, baseStyle);
1358 |       }
1359 |     };
1360 | 
1361 |     const zoomMultiplier = this.getZoomMultiplier();
1362 |     // Next Image (displayed on the right)
1363 |     addItem('nextSrc', 'ril-image-next ril__imageNext', {
1364 |       x: boxSize.width,
1365 |     });
1366 |     // Main Image
1367 |     addItem('mainSrc', 'ril-image-current', {
1368 |       x: -1 * offsetX,
1369 |       y: -1 * offsetY,
1370 |       zoom: zoomMultiplier,
1371 |     });
1372 |     // Previous Image (displayed on the left)
1373 |     addItem('prevSrc', 'ril-image-prev ril__imagePrev', {
1374 |       x: -1 * boxSize.width,
1375 |     });
1376 | 
1377 |     const modalStyle = {
1378 |       overlay: {
1379 |         zIndex: 1000,
1380 |         backgroundColor: 'transparent',
1381 |         ...reactModalStyle.overlay, // Allow style overrides via props
1382 |       },
1383 |       content: {
1384 |         backgroundColor: 'transparent',
1385 |         overflow: 'hidden', // Needed, otherwise keyboard shortcuts scroll the page
1386 |         border: 'none',
1387 |         borderRadius: 0,
1388 |         padding: 0,
1389 |         top: 0,
1390 |         left: 0,
1391 |         right: 0,
1392 |         bottom: 0,
1393 |         ...reactModalStyle.content, // Allow style overrides via props
1394 |       },
1395 |     };
1396 | 
1397 |     return (
1398 |       <Modal
1399 |         isOpen
1400 |         onRequestClose={clickOutsideToClose ? this.requestClose : undefined}
1401 |         onAfterOpen={() => {
1402 |           // Focus on the div with key handlers
1403 |           if (this.outerEl) {
1404 |             this.outerEl.focus();
1405 |           }
1406 | 
1407 |           onAfterOpen();
1408 |         }}
1409 |         style={modalStyle}
1410 |         contentLabel={translate('Lightbox')}
1411 |         appElement={typeof global.window !== 'undefined' ? global.window.document.body : undefined}
1412 |         {...reactModalProps}
1413 |       >
1414 |         <div // eslint-disable-line jsx-a11y/no-static-element-interactions
1415 |           // Floating modal with closing animations
1416 |           className={`ril-outer ril__outer ril__outerAnimating ${this.props.wrapperClassName} ${
1417 |             isClosing ? 'ril-closing ril__outerClosing' : ''
1418 |           }`}
1419 |           style={{
1420 |             transition: `opacity ${animationDuration}ms`,
1421 |             animationDuration: `${animationDuration}ms`,
1422 |             animationDirection: isClosing ? 'normal' : 'reverse',
1423 |           }}
1424 |           ref={el => {
1425 |             this.outerEl = el;
1426 |           }}
1427 |           onWheel={this.handleOuterMousewheel}
1428 |           onMouseMove={this.handleMouseMove}
1429 |           onMouseDown={this.handleMouseDown}
1430 |           onTouchStart={this.handleTouchStart}
1431 |           onTouchMove={this.handleTouchMove}
1432 |           tabIndex="-1" // Enables key handlers on div
1433 |           onKeyDown={this.handleKeyInput}
1434 |           onKeyUp={this.handleKeyInput}
1435 |         >
1436 |           <div // eslint-disable-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
1437 |             // Image holder
1438 |             className="ril-inner ril__inner"
1439 |             onClick={clickOutsideToClose ? this.closeIfClickInner : undefined}
1440 |           >
1441 |             {displayItems}
1442 |           </div>
1443 | 
1444 |           {prevSrc && (
1445 |             <button // Move to previous image button
1446 |               type="button"
1447 |               className="ril-prev-button ril__navButtons ril__navButtonPrev"
1448 |               key="prev"
1449 |               aria-label={this.props.prevLabel}
1450 |               onClick={!this.isAnimating() ? this.requestMovePrev : undefined} // Ignore clicks during animation
1451 |             />
1452 |           )}
1453 | 
1454 |           {nextSrc && (
1455 |             <button // Move to next image button
1456 |               type="button"
1457 |               className="ril-next-button ril__navButtons ril__navButtonNext"
1458 |               key="next"
1459 |               aria-label={this.props.nextLabel}
1460 |               onClick={!this.isAnimating() ? this.requestMoveNext : undefined} // Ignore clicks during animation
1461 |             />
1462 |           )}
1463 | 
1464 |           <div // Lightbox toolbar
1465 |             className="ril-toolbar ril__toolbar"
1466 |           >
1467 |             <ul className="ril-toolbar-left ril__toolbarSide ril__toolbarLeftSide">
1468 |               <li className="ril-toolbar__item ril__toolbarItem">
1469 |                 <span className="ril-toolbar__item__child ril__toolbarItemChild">{imageTitle}</span>
1470 |               </li>
1471 |             </ul>
1472 | 
1473 |             <ul className="ril-toolbar-right ril__toolbarSide ril__toolbarRightSide">
1474 |               {toolbarButtons &&
1475 |                 toolbarButtons.map((button, i) => (
1476 |                   <li key={`button_${i + 1}`} className="ril-toolbar__item ril__toolbarItem">
1477 |                     {button}
1478 |                   </li>
1479 |                 ))}
1480 | 
1481 |               {enableZoom && (
1482 |                 <li className="ril-toolbar__item ril__toolbarItem">
1483 |                   <button // Lightbox zoom in button
1484 |                     type="button"
1485 |                     key="zoom-in"
1486 |                     aria-label={this.props.zoomInLabel}
1487 |                     className={[
1488 |                       'ril-zoom-in',
1489 |                       'ril__toolbarItemChild',
1490 |                       'ril__builtinButton',
1491 |                       'ril__zoomInButton',
1492 |                       ...(zoomLevel === MAX_ZOOM_LEVEL ? ['ril__builtinButtonDisabled'] : []),
1493 |                     ].join(' ')}
1494 |                     ref={el => {
1495 |                       this.zoomInBtn = el;
1496 |                     }}
1497 |                     disabled={this.isAnimating() || zoomLevel === MAX_ZOOM_LEVEL}
1498 |                     onClick={
1499 |                       !this.isAnimating() && zoomLevel !== MAX_ZOOM_LEVEL
1500 |                         ? this.handleZoomInButtonClick
1501 |                         : undefined
1502 |                     }
1503 |                   />
1504 |                 </li>
1505 |               )}
1506 | 
1507 |               {enableZoom && (
1508 |                 <li className="ril-toolbar__item ril__toolbarItem">
1509 |                   <button // Lightbox zoom out button
1510 |                     type="button"
1511 |                     key="zoom-out"
1512 |                     aria-label={this.props.zoomOutLabel}
1513 |                     className={[
1514 |                       'ril-zoom-out',
1515 |                       'ril__toolbarItemChild',
1516 |                       'ril__builtinButton',
1517 |                       'ril__zoomOutButton',
1518 |                       ...(zoomLevel === MIN_ZOOM_LEVEL ? ['ril__builtinButtonDisabled'] : []),
1519 |                     ].join(' ')}
1520 |                     ref={el => {
1521 |                       this.zoomOutBtn = el;
1522 |                     }}
1523 |                     disabled={this.isAnimating() || zoomLevel === MIN_ZOOM_LEVEL}
1524 |                     onClick={
1525 |                       !this.isAnimating() && zoomLevel !== MIN_ZOOM_LEVEL
1526 |                         ? this.handleZoomOutButtonClick
1527 |                         : undefined
1528 |                     }
1529 |                   />
1530 |                 </li>
1531 |               )}
1532 | 
1533 |               <li className="ril-toolbar__item ril__toolbarItem">
1534 |                 <button // Lightbox close button
1535 |                   type="button"
1536 |                   key="close"
1537 |                   aria-label={this.props.closeLabel}
1538 |                   className="ril-close ril-toolbar__item__child ril__toolbarItemChild ril__builtinButton ril__closeButton"
1539 |                   onClick={!this.isAnimating() ? this.requestClose : undefined} // Ignore clicks during animation
1540 |                 />
1541 |               </li>
1542 |             </ul>
1543 |           </div>
1544 | 
1545 |           {this.props.imageCaption && (
1546 |             // eslint-disable-next-line jsx-a11y/no-static-element-interactions
1547 |             <div // Image caption
1548 |               onWheel={this.handleCaptionMousewheel}
1549 |               onMouseDown={event => event.stopPropagation()}
1550 |               className="ril-caption ril__caption"
1551 |               ref={el => {
1552 |                 this.caption = el;
1553 |               }}
1554 |             >
1555 |               <div className="ril-caption-content ril__captionContent">
1556 |                 {this.props.imageCaption}
1557 |               </div>
1558 |             </div>
1559 |           )}
1560 |         </div>
1561 |       </Modal>
1562 |     );
1563 |   }
1564 | }
1565 | 
1566 | const srcTypes = PropTypes.oneOfType([
1567 |   PropTypes.string,
1568 |   PropTypes.func,
1569 |   PropTypes.element,
1570 |   PropTypes.node,
1571 | ]);
1572 | 
1573 | ReactImageLightbox.propTypes = {
1574 |   //-----------------------------
1575 |   // Image sources
1576 |   //-----------------------------
1577 | 
1578 |   // Main display image url
1579 |   mainSrc: srcTypes.isRequired, // eslint-disable-line react/no-unused-prop-types
1580 | 
1581 |   // Previous display image url (displayed to the left)
1582 |   // If left undefined, movePrev actions will not be performed, and the button not displayed
1583 |   prevSrc: srcTypes,
1584 | 
1585 |   // Next display image url (displayed to the right)
1586 |   // If left undefined, moveNext actions will not be performed, and the button not displayed
1587 |   nextSrc: srcTypes,
1588 | 
1589 |   //-----------------------------
1590 |   // Image thumbnail sources
1591 |   //-----------------------------
1592 | 
1593 |   // Thumbnail image url corresponding to props.mainSrc
1594 |   mainSrcThumbnail: PropTypes.string, // eslint-disable-line react/no-unused-prop-types
1595 | 
1596 |   // Thumbnail image url corresponding to props.prevSrc
1597 |   prevSrcThumbnail: PropTypes.string, // eslint-disable-line react/no-unused-prop-types
1598 | 
1599 |   // Thumbnail image url corresponding to props.nextSrc
1600 |   nextSrcThumbnail: PropTypes.string, // eslint-disable-line react/no-unused-prop-types
1601 | 
1602 |   //-----------------------------
1603 |   // Event Handlers
1604 |   //-----------------------------
1605 | 
1606 |   // Close window event
1607 |   // Should change the parent state such that the lightbox is not rendered
1608 |   onCloseRequest: PropTypes.func.isRequired,
1609 | 
1610 |   // Move to previous image event
1611 |   // Should change the parent state such that props.prevSrc becomes props.mainSrc,
1612 |   //  props.mainSrc becomes props.nextSrc, etc.
1613 |   onMovePrevRequest: PropTypes.func,
1614 | 
1615 |   // Move to next image event
1616 |   // Should change the parent state such that props.nextSrc becomes props.mainSrc,
1617 |   //  props.mainSrc becomes props.prevSrc, etc.
1618 |   onMoveNextRequest: PropTypes.func,
1619 | 
1620 |   // Called when an image fails to load
1621 |   // (imageSrc: string, srcType: string, errorEvent: object): void
1622 |   onImageLoadError: PropTypes.func,
1623 | 
1624 |   // Called when image successfully loads
1625 |   onImageLoad: PropTypes.func,
1626 | 
1627 |   // Open window event
1628 |   onAfterOpen: PropTypes.func,
1629 | 
1630 |   //-----------------------------
1631 |   // Download discouragement settings
1632 |   //-----------------------------
1633 | 
1634 |   // Enable download discouragement (prevents [right-click -> Save Image As...])
1635 |   discourageDownloads: PropTypes.bool,
1636 | 
1637 |   //-----------------------------
1638 |   // Animation settings
1639 |   //-----------------------------
1640 | 
1641 |   // Disable all animation
1642 |   animationDisabled: PropTypes.bool,
1643 | 
1644 |   // Disable animation on actions performed with keyboard shortcuts
1645 |   animationOnKeyInput: PropTypes.bool,
1646 | 
1647 |   // Animation duration (ms)
1648 |   animationDuration: PropTypes.number,
1649 | 
1650 |   //-----------------------------
1651 |   // Keyboard shortcut settings
1652 |   //-----------------------------
1653 | 
1654 |   // Required interval of time (ms) between key actions
1655 |   // (prevents excessively fast navigation of images)
1656 |   keyRepeatLimit: PropTypes.number,
1657 | 
1658 |   // Amount of time (ms) restored after each keyup
1659 |   // (makes rapid key presses slightly faster than holding down the key to navigate images)
1660 |   keyRepeatKeyupBonus: PropTypes.number,
1661 | 
1662 |   //-----------------------------
1663 |   // Image info
1664 |   //-----------------------------
1665 | 
1666 |   // Image title
1667 |   imageTitle: PropTypes.node,
1668 | 
1669 |   // Image caption
1670 |   imageCaption: PropTypes.node,
1671 | 
1672 |   // Optional crossOrigin attribute
1673 |   imageCrossOrigin: PropTypes.string,
1674 | 
1675 |   //-----------------------------
1676 |   // Lightbox style
1677 |   //-----------------------------
1678 | 
1679 |   // Set z-index style, etc., for the parent react-modal (format: https://github.com/reactjs/react-modal#styles )
1680 |   reactModalStyle: PropTypes.shape({}),
1681 | 
1682 |   // Padding (px) between the edge of the window and the lightbox
1683 |   imagePadding: PropTypes.number,
1684 | 
1685 |   wrapperClassName: PropTypes.string,
1686 | 
1687 |   //-----------------------------
1688 |   // Other
1689 |   //-----------------------------
1690 | 
1691 |   // Array of custom toolbar buttons
1692 |   toolbarButtons: PropTypes.arrayOf(PropTypes.node),
1693 | 
1694 |   // When true, clicks outside of the image close the lightbox
1695 |   clickOutsideToClose: PropTypes.bool,
1696 | 
1697 |   // Set to false to disable zoom functionality and hide zoom buttons
1698 |   enableZoom: PropTypes.bool,
1699 | 
1700 |   // Override props set on react-modal (https://github.com/reactjs/react-modal)
1701 |   reactModalProps: PropTypes.shape({}),
1702 | 
1703 |   // Aria-labels
1704 |   nextLabel: PropTypes.string,
1705 |   prevLabel: PropTypes.string,
1706 |   zoomInLabel: PropTypes.string,
1707 |   zoomOutLabel: PropTypes.string,
1708 |   closeLabel: PropTypes.string,
1709 | 
1710 |   imageLoadErrorMessage: PropTypes.node,
1711 | };
1712 | 
1713 | ReactImageLightbox.defaultProps = {
1714 |   imageTitle: null,
1715 |   imageCaption: null,
1716 |   toolbarButtons: null,
1717 |   reactModalProps: {},
1718 |   animationDisabled: false,
1719 |   animationDuration: 300,
1720 |   animationOnKeyInput: false,
1721 |   clickOutsideToClose: true,
1722 |   closeLabel: 'Close lightbox',
1723 |   discourageDownloads: false,
1724 |   enableZoom: true,
1725 |   imagePadding: 10,
1726 |   imageCrossOrigin: null,
1727 |   keyRepeatKeyupBonus: 40,
1728 |   keyRepeatLimit: 180,
1729 |   mainSrcThumbnail: null,
1730 |   nextLabel: 'Next image',
1731 |   nextSrc: null,
1732 |   nextSrcThumbnail: null,
1733 |   onAfterOpen: () => {},
1734 |   onImageLoadError: () => {},
1735 |   onImageLoad: () => {},
1736 |   onMoveNextRequest: () => {},
1737 |   onMovePrevRequest: () => {},
1738 |   prevLabel: 'Previous image',
1739 |   prevSrc: null,
1740 |   prevSrcThumbnail: null,
1741 |   reactModalStyle: {},
1742 |   wrapperClassName: '',
1743 |   zoomInLabel: 'Zoom in',
1744 |   zoomOutLabel: 'Zoom out',
1745 |   imageLoadErrorMessage: 'This image failed to load',
1746 | };
1747 | 
1748 | export default ReactImageLightbox;
1749 | 


--------------------------------------------------------------------------------