[ { "path": ".babelrc", "content": "{\n \"ignore\": [\"node-modules\"],\n \"presets\": [\"env\", \"react\"],\n \"plugins\": [ [\"transform-object-rest-spread\", { \"useBuiltIns\": true }], \"transform-object-assign\"],\n \"env\": {\n \"test\": {\n \"presets\": [\n [\"env\"], \"react\"\n ],\n \"plugins\": [\"istanbul\"]\n }\n }\n}\n" }, { "path": ".coveralls.yml", "content": "service_name: travis-ci\nrepo_token: S5CSBnH2886RuV3s0ecSjaam2N4JOjsC7\n# coverageReporter: {\n# dir: path.join(__dirname, 'coverage'),\n# reporters: [\n# {type: 'html'},\n# {type: 'lcov', subdir: 'lcov'} // lcov\n# ]\n# },\n\n" }, { "path": ".editorconfig", "content": "\n# This file is for unifying the coding style for different editors and IDEs\n# editorconfig.org\nroot = true\n [*]\nend_of_line = lf\ncharset = utf-8\ntrim_trailing_whitespace = true\ninsert_final_newline = true\nindent_style = space\nindent_size = 2\n [*.md]\ntrim_trailing_whitespace = false\n" }, { "path": ".eslintignore", "content": "lib/*\ndist/*\ncoverage/*\nnode_modules/*\n" }, { "path": ".eslintrc.js", "content": "// https://eslint.org/docs/user-guide/configuring\n\nmodule.exports = {\n root: true,\n parser: 'babel-eslint',\n parserOptions: {\n ecmaFeatures: {\n jsx: true,\n },\n },\n parserOptions: {\n sourceType: 'module'\n },\n env: {\n node: true,\n browser: true,\n commonjs: true,\n es6: true,\n jest: true,\n },\n extends: [\n 'eslint:recommended',\n 'plugin:react/recommended',\n ],\n // required to lint *.vue files\n plugins: [\n 'react',\n ],\n // check if imports actually resolve\n settings: {\n react: {\n createClass: 'createReactClass',\n pragma: 'React',\n version: '16.4.1'\n },\n },\n rules: {\n 'no-unused-vars': 0,\n // allow debugger during development\n 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,\n 'no-console': process.env.NODE_ENV === 'production' ? 2 : 0,\n \"no-unused-vars\": [2, { \"vars\": \"all\", \"args\": \"after-used\" }],\n 'global-require': 0,\n }\n}\n" }, { "path": ".github/CONTRIBUTING.md", "content": "# Contributing\n\nThanks for your interest in react-images-viewer. All forms fo contribution ares welcome, from issue reports to PRs and documentation / write-ups.\n\nBefore you open a PR:\n\n* If you're planning to add or change a major feature in a PR, please ensure the change is aligned with the project roadmap by opening an issue first, especially if you're going to spend a lot of time on it.\n\n* In development, run `yarn start` to build(+watch) the project source, and run the [development server](http://localhost:8000).\n\n* Please ensure all the examples work correctly after your change. If you're adding a major new use-case, add a new example demonstrating its use.\n* Please **DO NOT** commit the build files. Make sure **ONLY** your changes to `/src/` and `/examples/src` are included in your PR.\n\n* \bBe careful to follow the code style of the project. Run `yarn ru lint` after your changes and ensure you do not introduce any new errors or warnings.\n\n* All new features and changes need documentation.\n\n* Make sure yarn.lock is updated when you add or upgrade dependencies.\n" }, { "path": ".github/HISTORY.md", "content": "# React-Images-Viewer\n\n### v1.6.8 / 2022-01-03\n\n- Update: fix issues: #28, #38\n\n### v1.3.0 / 2018-07-24\n\n- Update: Make README.md and README_ZN.md desciption more specific\n- Fix: correct `package.json - main` field value\n\n---\n\n### v1.0.5 / 2018-07-24\n\n- Basic, thumbnailed, themed usage all work well\n- Feature: you can use `up, right, bottom, left, space, esc` to navigate quickly\n- Component API is very brief and precise\n" }, { "path": ".github/ISSUE_TEMPLATE.md", "content": "**Steps to reproduce the behavior:**\n\n**Expected behavior:**\n\n**Actual behavior:**\n" }, { "path": ".github/PULL_REQUEST_TEMPLATE.md", "content": "\n\n**Description of changes:**\n\n**Related issues (if any):**\n\n**Checks:**\n\n- [ ] Please confirm `yarn run lint` ran successfully\n- [ ] Please confirm that only `/src` and `/examples/src` are committed\n- [ ] [if new feature] Please confim that docuemtation was added to the README.md\n" }, { "path": ".gitignore", "content": "# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n\n# Build\nlib\ndist\nexamples/dist\n\n# Webstorm\n.idea/\n\n# VSCode\n.vscode/\n\n# Runtime data\npids\n*.pid\n*.seed\n*.pid.lock\n\n# Directory for instrumented libs generated by jscoverage/JSCover\nlib-cov\n\n# Coverage directory used by tools like istanbul\ncoverage\n\n# nyc test coverage\n.nyc_output\n\n# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)\n.grunt\n\n# node-waf configuration\n.lock-wscript\n\n# Bower dependency directory (https://bower.io/)\nbower_components\n\n# node-waf configuration\n.lock-wscript\n\n# Compiled binary addons (https://nodejs.org/api/addons.html)\nbuild/Release\n\n# Site build\n.publish\n\n# Dependency directories\n# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git\nnode_modules/\njspm_packages/\n\n# temp files\n.swp\n\n# TypeScript v1 declaration files\ntypings/\n\n# Optional npm cache directory\n.npm\n\n# Optional eslint cache\n.eslintcache\n\n# Optional REPL history\n.node_repl_history\n\n# Output of 'npm pack'\n*.tgz\n\n# Yarn Integrity file\n.yarn-integrity\n\n# dotenv environment variables file\n.env\n\n# next.js build output\n.next\n\n__test__/__snapshots__/\n\n.js.snap\n\n# MacOS generated file\n.DS_Store\n" }, { "path": ".npmignore", "content": "examples\n" }, { "path": ".travis.yml", "content": "language: node_js\nsudo: false\nnode_js:\n - stable\ncache:\n directories:\n - node_modules\ninstall:\n|\n npm install -g yarn\n npm --version\n yarn\n\nscript:\n - yarn lint\n - yarn test\n - yarn coverage\n" }, { "path": "LICENSE", "content": "MIT License\n\nCopyright (c) 2018 yiminanci\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n" }, { "path": "README.md", "content": "# react-images-viewer\n\n[![Build Status](https://travis-ci.org/guonanci/react-images-viewer.svg?branch=master)](https://travis-ci.org/guonanci/react-images-viewer)\n\n\n\n[![jest](https://jestjs.io/img/jest-badge.svg)](https://github.com/facebook/jest)\n\nA react library that view photos list easily, and a simple, responsive viewer component for displaying an array of images.\n\n[中文文档](./README_CN.md)\n\n## Quick start\n\n```bash\n# recommended\nyarn add react-images-viewer\n```\n\nor\n\n```bash\nnpm install react-images-viewer --save\n```\n\n```jsx\nimport React from \"react\";\nimport ImgsViewer from \"react-images-viewer\";\n\nexport default class Demo extends React.Component {\n render() {\n return (\n \n );\n }\n}\n```\n\n## Demo & Example\n\nLive Demo: [guonanci.github.io/react-images-viewer](https://guonanci.github.io/react-images-viewer)\n\n```bash\nyarn install\nyarn\nyarn start\n```\n\nThen open [`localhost:8000`](http://localhost:8000) in a browser.\n\n### Using srcSet\n\nExample using srcSet:\n\n```jsx\n\n```\n\n```js\nconst IMG_SET = [\n {\n src: \"http://example.com/img1.svg\",\n caption: \"A forest\",\n // As an array\n srcSet: [\n \"http://example.com/img1_1024.jpg 1024w\",\n \"http://example.com/img1_800.jpg 800w\",\n \"http://example.com/img1_500.jpg 500w\",\n \"http://example.com/img1_320.jpg 320w\",\n ],\n },\n {\n src: \"http://example.com/img2.svg\",\n // As a string\n srcSet:\n \"http://example.com/img2_1024.jpg 1024w, http://example.com/img2_800.jpg 800w, http://example.com/img2_500.jpg 500w, http://example.com/img2_320.jpg 320w\",\n },\n];\n```\n\n## Options\n\n| Property | Type | Default | Description |\n| :------------------ | :--------- | :--------------- | :------------------------------------------------------------------------------------------------------------------------------ |\n| backdropCloseable | `boolean` | `false` | Allow users to exit the viewer by clicking the backdrop |\n| closeBtnTitle | `str` | `undefined` | Customize close esc title |\n| enableKeyboardInput | `boolean` | `true` | Supports keyboard input - space, esc, arrow left, arrow up, and arrow right, arrow down |\n| currImg | `number` | `0` | Required if you want to navigate the imgsViewer, The index of the image to display initially |\n| customControls | arr | `undefined` | An array of elements to display as custom controls on the top of viewer |\n| imgs | arr | `undefined` | Required. Array of image objects, See img opts table below |\n| imgCountSeparator | `str` | `' / '` | Customize separator in the image count |\n| isOpen | `boolean` | `false` | Required if you want to navigate the imgsViewer, Whether or not the viewer is displayed |\n| leftArrowTitle | `str` | `undefined` | Customize of left arrow title |\n| onClickPrev | `function` | `undefined` | Required if you want to navigate the imgsViewer, and fired on request of the previous image |\n| onClickNext | `function` | `undefined` | Required if you want to navigate the imgsViewer, and fired on request of the next image |\n| onClose | `function` | `undefined` | Required if you want to close the imgsViewer, and handle closing of the viewer |\n| onClickImg | `function` | `undefined` | Handle click on current image |\n| onClickThumbnail | `function` | `undefined` | Handle click on thumbnail |\n| preloadNextImg | `boolean` | `true` | Whether to preload the next available image |\n| rightArrowTitle | `str` | `undefined` | Customize right arrow title |\n| showCloseBtn | `boolean` | `true` | Optionally display a close 'X' button in top right corner |\n| showImgCount | `boolean` | `true` | Optionally display image index, e.g., \"2 of 20\" |\n| width | `number` | `1024` | Maximum width of the carousel; defaults to 1024px |\n| spinnerDisabled | `boolean` | `false` | Disable Spinner |\n| spinner | `function` | `DefaultSpinner` | Spinner component class |\n| spinnerColor | `str` | `'#fff'` | Color of spinner |\n| spinnerSize | `number` | `50` | Size of spinner |\n| preventAutoScroll | `boolean` | `true` | Determines whether auto-scrolling is prevented |\n\n## Images Object\n\n| Property | Type | Default | Description |\n| :------- | :-------- | :---------- | :---------- |\n| src | `str` | `undefined` | Required |\n| srcSet | `string[]` | `undefined` | Optional |\n| caption | `str` | `undefined` | Optional |\n| alt | `str` | `undefined` | Optional |\n" }, { "path": "README_CN.md", "content": "# react-images-viewer\n\n[![Build Status](https://travis-ci.org/guonanci/react-images-viewer.svg?branch=master)](https://travis-ci.org/guonanci/react-images-viewer)\n\n\n\n[![jest](https://jestjs.io/img/jest-badge.svg)](https://github.com/facebook/jest)\n\n一个简单易用，响应式，放大并查看一组图片的 React 库。\n\n[English document](./README.md)\n\n## 快速入门\n\n```bash\n# 推荐\nyarn add react-images-viewer\n```\n\nor\n\n```bash\nnpm install react-images-viewer --save\n```\n\n```jsx\nimport React from \"react\";\nimport ImgsViewer from \"react-images-viewer\";\n\nexport default class Demo extends React.Component {\n render() {\n return (\n \n );\n }\n}\n```\n\n## 例子\n\n线上案例: [guonanci.github.io/react-images-viewer](https://guonanci.github.io/react-images-viewer)\n\n```bash\nyarn install\nyarn\nyarn start\n```\n\n然后就可以在浏览器打开 [`localhost:8000`](http://localhost:8000) 窗口了。\n\n### srcSet 使用\n\n例子:\n\n```jsx\n\n```\n\n```js\nconst IMG_SET = [\n {\n src: \"http://example.com/img1.svg\",\n caption: \"A forest\",\n // As an array\n srcSet: [\n \"http://example.com/img1_1024.jpg 1024w\",\n \"http://example.com/img1_800.jpg 800w\",\n \"http://example.com/img1_500.jpg 500w\",\n \"http://example.com/img1_320.jpg 320w\",\n ],\n },\n {\n src: \"http://example.com/img2.svg\",\n // As a string\n srcSet:\n \"http://example.com/img2_1024.jpg 1024w, http://example.com/img2_800.jpg 800w, http://example.com/img2_500.jpg 500w, http://example.com/img2_320.jpg 320w\",\n },\n];\n```\n\n## 选项\n\n| Property | Type | Default | Description |\n| :------------------ | :--------- | :--------------- | :-------------------------------------------------------------------------------------------------- |\n| backdropCloseable | `布尔值` | `false` | 是否通过点击半透明幕布来退出浏览 |\n| closeBtnTitle | `字符串` | `undefined` | 关闭按钮的 title |\n| enableKeyboardInput | `布尔值` | `true` | 支持键盘输入 - 空格键，esc, 左箭头，上箭头，和右箭头，下箭头 |\n| currImg | `数值类型` | `0` | 必须项（如果需要导航的话），初始化图像的索引 |\n| customCtrls | `数组` | `undefined` | 图片查看器顶部的控件元素数组 |\n| imgs | `数组` | `undefined` | 必须项. 图片元素数组，图像选项见下表。 |\n| imgsSeparator | `字符串` | `' / '` | 图片计数分隔符 |\n| isOpen | `布尔值` | `false` | 必须项（如果需要导航的话），图片是否显示 |\n| leftArrowTitle | `字符串` | `undefined` | 左箭头的 title |\n| onClickPrev | `函数` | `undefined` | 必须项（如果需要导航的话），请求上一张时触发 |\n| onClickNext | `函数` | `undefined` | 必须项（如果需要导航的话），请求下一张时触发 |\n| onClose | `函数` | `undefined` | 关闭查看器的回调 |\n| onClickImg | `函数` | `undefined` | 点起当前图片的回调 |\n| onClickThumbnail | `函数` | `undefined` | 缩略点击的回调 |\n| preloadNextImg | `布尔值` | `true` | 是否预加载下一张图片 |\n| rightArrowTitle | `字符串` | `undefined` | 右箭头的 title |\n| showCloseBtn | `布尔值` | `true` | 右上角是否显示 X 按钮 |\n| showImgCount | `布尔值` | `true` | 是否显示图片索引 |\n| width | `数值类型` | `1024` | 轮播器的最大的宽度，默认值 1024px |\n| spinnerDisabled | `布尔值` | `false` | 禁用加载器 |\n| spinner | `函数` | `DefaultSpinner` | 加载器组件 |\n| spinnerColor | `字符串` | `'#fff'` | 加载器颜色 |\n| spinnerSize | `数值类型` | `50` | 加载器尺寸 |\n| preventAutoScroll | `布尔值` | `true` | 是否阻止自动滚动 |\n\n## Images Object\n\n| Property | Type | Default | Description |\n| :------- | :--------------------- | :---------- | :---------- |\n| src | `字符串` | `undefined` | 必须项 |\n| srcSet | `字符串`数组或者字符串 | `undefined` | 可选项 |\n| caption | `字符串` | `undefined` | 可选项 |\n| alt | `字符串` | `undefined` | 可选项 |\n" }, { "path": "__mocks__/ImgsViewer.js", "content": "" }, { "path": "__test__/Gallery.test.js", "content": "import React from 'react'\nimport ImgsViewer from '../src/ImgsViewer'\nimport { mount } from 'enzyme'\n\nconst props1 = {\n onClose: () => {},\n imgs: [\n {\n src: 'https://images.unsplash.com/photo-1526382551041-3c817fc3d478?dpr=2&auto=format&w=1024&h=1024'\n },\n {\n src: 'https://images.unsplash.com/photo-1522985225914-17a10a58c8ec?dpr=2&auto=format&w=1024&h=1024',\n caption: 'Photo by Blake Cheek',\n }\n ]\n}\nconst props2 = {\n onClose: () => {},\n imgs: [\n {\n src: 'https://images.unsplash.com/photo-1522931698295-e7b4d3e4188f?dpr=2&auto=format&w=1024&h=1024',\n thumnail: 'https://images.unsplash.com/photo-1522931698295-e7b4d3e4188f?dpr=2&auto=format&crop=faces&fit=crop&w=300&h=300',\n },\n {\n src: 'https://images.unsplash.com/photo-1482398650355-d4c6462afa0e?dpr=2&auto=format&w=1024&h=1024',\n thumnail: 'https://images.unsplash.com/photo-1482398650355-d4c6462afa0e?dpr=2&auto=format&crop=faces&fit=crop&w=240&h=159',\n }\n ]\n}\nit('sum', () => {\n expect(1 + 1).toBe(2)\n})\n// it('renders correctly', () => {\n// const component = mount(\n// \n// )\n// component.setState({ isOpen: true })\n// expect(component).toMatchSnapshot()\n// })\n// it('renders with thumbnail correctly', () => {\n// const component = mount(\n// \n// )\n// component.setState({ isOpen: true })\n// expect(component).toMatchSnapshot()\n// })\n// it('renders correctly after click', () => {\n// const component = mount(\n// \n// )\n// component.setState({ isOpen: true })\n// setTimeout(() => {\n// component.find('figure').first() && component.find('figure').first().simulate('click')\n// expect(component).toMatchSnapshot()\n// }, 10000)\n// })\n// it('unmount', () => {\n// const component = mount(\n// \n// )\n// component.setState({ isOpen: true })\n// component.unmount()\n// })\n" }, { "path": "__test__/jestsetup.js", "content": "import { configure } from 'enzyme'\nimport Adapter from 'enzyme-adapter-react-16'\n\nconfigure({ adapter: new Adapter() })\n" }, { "path": "__test__/rafShim.js", "content": "global.requestAnimationFrame = callback => setTimeout(callback, 0)\n" }, { "path": "__test__/utils.test.js", "content": "import { deepMerge, canUseDom, bindFunctions } from '../src/utils/util'\n\ndescribe('the deepMerge function', () => {\n test('merge numb, stri in one level', () => expect(\n deepMerge({ a: 1, b: 2 }, { a: '3', b: 4 })).toEqual({ a: '3', b: 4 })\n )\n test('replace str with arr', () => expect(\n deepMerge({ a: 1 }, { a: ['3', 4] })).toEqual({ a: { 0: '3', 1: 4} })\n )\n test('replace arr with obj', () => expect(\n deepMerge({ a: [1, 2] }, { a: { b: 1, c: '2' } })).toEqual({ a: { 0: 1, 1: 2, b: 1, c: '2' } })\n )\n test('replace arr with obj', () => expect(\n deepMerge({ a: [1, 2] }, { a: { b: 1, c: '2' } })).toEqual({ a: { 0: 1, 1: 2, b: 1, c: '2' } })\n )\n test('replace obj with obj', () => expect(\n deepMerge({ a: { b: 1 } }, { a: { b: '2' } })).toEqual({ a: { b: '2' } })\n )\n test('replace arr with arr', () => expect(\n deepMerge({ a: [1] }, { a: { b: [2, 3] } })).toEqual({ a: { 0: 1, b: [2, 3] } })\n )\n test('replace obj with num', () => expect(\n deepMerge({ a: 1 }, 2)).toEqual({ a: 1 })\n )\n test('replace num with num', () => expect(\n deepMerge(1, 2)).toEqual({ })\n )\n\n})\n" }, { "path": "ci.sh", "content": "#!/bin/bash -e\n# daily push, but add all unStaged changes.\ncommit_msg=\"$1\"\ngit add .\ngit commit -m \"$commit_msg\"\ngit pull\ngit push\n" }, { "path": "examples/src/.gitignore", "content": "## This file is here to ensure it is included in the gh-pages branch,\n## when 'gulp deploy' is used to push updates to the demo site.\n\n# Dependency directory\nnode_modules\n" }, { "path": "examples/src/.npmignore", "content": "" }, { "path": "examples/src/app.js", "content": "import React from \"react\";\nimport { render } from \"react-dom\";\nimport Gallery from \"./components/Gallery\";\nimport CustomSpinner from \"./components/Spinner\";\nimport \"./example.less\";\n\nfunction makeUnsplashSrc(id) {\n return `https://images.unsplash.com/photo-${id}?dpr=2&auto=format&w=1024&h=1024`;\n}\nfunction makeUnsplashSrcSet(id, size) {\n return `https://images.unsplash.com/photo-${id}?dpr=2&auto=format&w=${size} ${size}w`;\n}\nfunction makeUnsplashThumbnail(id, orientation = \"landscape\") {\n const dimensions = orientation === \"square\" ? \"w=300&h=300\" : \"w=240&h=159\";\n\n return `https://images.unsplash.com/photo-${id}?dpr=2&auto=format&crop=faces&fit=crop&${dimensions}`;\n}\n\n// Unsplash images from the \"Adventure\" collection\n// https://unsplash.com/collections/369/adventure\n\nconst DEFAULT_IMAGES = [\n {\n id: \"1526382551041-3c817fc3d478\",\n caption: \"Photo by Simon Alexander\",\n orientation: \"square\",\n useForDemo: true,\n },\n {\n id: \"1522985225914-17a10a58c8ec\",\n caption: \"Photo by Blake Cheek\",\n orientation: \"square\",\n useForDemo: true,\n },\n {\n id: \"1522931698295-e7b4d3e4188f\",\n caption: \"Photo by Oliver Sjöström\",\n orientation: \"square\",\n useForDemo: true,\n },\n {\n id: \"1516175663209-ac2459a5652f\",\n caption: \"Photo by Jeremy Bishop\",\n orientation: \"square\",\n useForDemo: true,\n },\n {\n id: \"1515911601378-97de98db6dda\",\n caption: \"Photo by Emily Reider\",\n orientation: \"square\",\n useForDemo: true,\n },\n];\nconst THEMED_IMAGES = [\n {\n id: \"1506773090264-ac0b07293a64\",\n caption: \"Photo by Dan Grinwis\",\n orientation: \"square\",\n useForDemo: true,\n },\n {\n id: \"1482398650355-d4c6462afa0e\",\n caption: \"Photo by Andrew Neel\",\n orientation: \"landscape\",\n useForDemo: true,\n },\n {\n id: \"1514949823529-bdcc933a9339\",\n caption: \"Photo by Kristopher Roller\",\n orientation: \"landscape\",\n useForDemo: true,\n },\n {\n id: \"1503293962593-47247718a17a\",\n caption: \"Photo by Jeremy Bishop\",\n orientation: \"landscape\",\n useForDemo: true,\n },\n {\n id: \"1509914398892-963f53e6e2f1\",\n caption: \"Photo by Linus Nylund\",\n orientation: \"landscape\",\n useForDemo: true,\n },\n];\nconst THUMBNAIL_IMAGES = [\n {\n id: \"1501963422762-3d89bd989568\",\n caption: \"Photo by Jeremy Bishop\",\n orientation: \"landscape\",\n useForDemo: true,\n },\n {\n id: \"1418846531910-2b7bb1043512\",\n caption: \"Photo by Vincentiu Solomon\",\n orientation: \"landscape\",\n useForDemo: true,\n },\n {\n id: \"1509529711801-deac231925ac\",\n caption: \"Photo by Joshua Earle\",\n orientation: \"landscape\",\n useForDemo: true,\n },\n {\n id: \"1499062229216-7c6349e898fb\",\n caption: \"Photo by Leio McLaren\",\n orientation: \"square\",\n useForDemo: true,\n },\n {\n id: \"1495619744764-2cc11fcbe5f0\",\n caption: \"Photo by Philipp Kämmerer\",\n orientation: \"square\",\n useForDemo: true,\n },\n {\n id: \"1488584433697-7ccc1148d30c\",\n caption: \"Photo by Flecher Clay\",\n orientation: \"square\",\n },\n {\n id: \"1478562853135-c3c9e3ef7905\",\n caption: \"Photo by Austin Neil\",\n orientation: \"landscape\",\n },\n {\n id: \"1476111021705-ac3b3304fe20\",\n caption: \"Photo by Dino Reichmuth\",\n orientation: \"square\",\n },\n {\n id: \"1478001517127-fccc92f54906\",\n caption: \"Photo by Joshua Earle\",\n orientation: \"landscape\",\n },\n {\n id: \"1455383333344-451b6147021b\",\n caption: \"Photo by Joshua Earle\",\n orientation: \"landscape\",\n },\n];\n\nconst theme = {\n // container\n container: {\n background: \"rgba(255, 255, 255, .9)\",\n },\n\n // arrows\n arrow: {\n backgroundColor: \"rgba(255, 255, 255, .8)\",\n fill: \"#222\",\n opacity: 0.6,\n transition: \"opacity 200ms\",\n\n \":hover\": {\n opacity: 1,\n },\n },\n arrow__size__medium: {\n borderRadius: 40,\n height: 40,\n marginTop: -20,\n\n \"@media (min-width: 768px)\": {\n height: 70,\n padding: 15,\n },\n },\n arrow__direction__left: { marginLeft: 10 },\n arrow__direction__right: { marginRight: 10 },\n close: {\n fill: \"#d40000\",\n opacity: 0.6,\n transition: \"all 200ms\",\n \":hover\": {\n opacity: 1,\n },\n },\n\n // footer\n footer: {\n color: \"#000\",\n },\n footerCount: {\n color: \"rgba(0, 0, 0, .6)\",\n },\n\n // thumbnails\n thumbnail: {},\n thumbnail__active: {\n boxShadow: \"0 0 0 2px #00d8ff\",\n },\n};\n// const theme = {\n// container: {\n// background: \"rgba(255, 255, 255, .9)\",\n// },\n// arrow: {\n// backgroundColor: \"#222\",\n// fill: \"#222\",\n// opacity: 0.6,\n// transition: \"opacity 200ms\",\n// marginLeft: 300,\n// },\n// arrow__size__medium: {\n// borderRadius: 40,\n// height: 40,\n// marginTop: -20,\n// marginLeft: 300,\n// },\n// arrow__direction__left: { marginLeft: 300, background: \"blue\" },\n// arrow__direction__right: { marginRight: 10, background: \"blue\" },\n// close: {\n// fill: \"#d40000\",\n// opacity: 0.6,\n// transition: \"all 200ms\",\n// },\n// footer: {\n// color: \"#000\",\n// },\n// footerCount: {\n// color: \"rgba(0, 0, 0, .6)\",\n// },\n// thumbnail: {\n// activeBorderColor: \"#fff\",\n// size: 50,\n// gutter: 2,\n// },\n// thumbnail__active: {\n// boxShadow: \"0 0 0 2px #00d8ff\",\n// },\n// };\n\nrender(\n
\n
\n

\n Photos courtesy of{\" \"}\n \n Unsplash\n \n . Use your keyboard to navigate left, up{\" \"}\n right, down space, esc — Also, try resizing\n your browser window.\n

\n
\n

Default Options

\n ({\n src: makeUnsplashSrc(id),\n thumbnail: makeUnsplashThumbnail(id, orientation),\n srcSet: [\n makeUnsplashSrcSet(id, 1024),\n makeUnsplashSrcSet(id, 800),\n makeUnsplashSrcSet(id, 500),\n makeUnsplashSrcSet(id, 320),\n ],\n caption,\n orientation,\n useForDemo,\n }))}\n />\n\n

With Thumbnails

\n ({\n src: makeUnsplashSrc(id),\n thumbnail: makeUnsplashThumbnail(id, orientation),\n srcSet: [\n makeUnsplashSrcSet(id, 1024),\n makeUnsplashSrcSet(id, 800),\n makeUnsplashSrcSet(id, 500),\n makeUnsplashSrcSet(id, 320),\n ],\n caption,\n orientation,\n useForDemo,\n })\n )}\n showThumbnails\n />\n\n

Themed ImgsViewer

\n ({\n src: makeUnsplashSrc(id),\n thumbnail: makeUnsplashThumbnail(id, orientation),\n srcSet: [\n makeUnsplashSrcSet(id, 1024),\n makeUnsplashSrcSet(id, 800),\n makeUnsplashSrcSet(id, 500),\n makeUnsplashSrcSet(id, 320),\n ],\n caption,\n orientation,\n useForDemo,\n }))}\n theme={theme}\n spinner={CustomSpinner}\n spinnerColor={\"#d40000\"}\n spinnerSize={150}\n showThumbnails\n />\n
,\n document.getElementById(\"example\")\n);\n" }, { "path": "examples/src/app_CN.js", "content": "import React from 'react'\nimport { render } from 'react-dom'\nimport Gallery from './components/Gallery'\nimport CustomSpinner from './components/Spinner'\nimport './example.less'\n\nfunction makeUnsplashSrc (id) {\n return `https://images.unsplash.com/photo-${id}?dpr=2&auto=format&w=1024&h=1024`\n}\nfunction makeUnsplashSrcSet(id, size) {\n return `https://images.unsplash.com/photo-${id}?dpr=2&auto=format&w=${size} ${size}w`\n}\nfunction makeUnsplashThumbnail (id, orientation = 'landscape') {\n const dimensions = orientation === 'square' ?\n 'w=300&h=300' :\n 'w=240&h=159'\n\n return `https://images.unsplash.com/photo-${id}?dpr=2&auto=format&crop=faces&fit=crop&${dimensions}`\n}\n\n// Unsplash images from the \"Adventure\" collection\n// https://unsplash.com/collections/369/adventure\n\nconst DEFAULT_IMAGES = [\n { id: '1526382551041-3c817fc3d478', caption: '照片来自Simon Alexander', orientation: 'square', useForDemo: true },\n { id: '1522985225914-17a10a58c8ec', caption: '照片来自Blake Cheek', orientation: 'square', useForDemo: true },\n { id: '1522931698295-e7b4d3e4188f', caption: '照片来自Oliver Sjöström', orientation: 'square', useForDemo: true },\n { id: '1516175663209-ac2459a5652f', caption: '照片来自Jeremy Bishop', orientation: 'square', useForDemo: true },\n { id: '1515911601378-97de98db6dda', caption: '照片来自Emily Reider', orientation: 'square', useForDemo: true },\n]\nconst THEMED_IMAGES = [\n { id: '1506773090264-ac0b07293a64', caption: '照片来自Dan Grinwis', orientation: 'square', useForDemo: true },\n { id: '1482398650355-d4c6462afa0e', caption: '照片来自Andrew Neel', orientation: 'landscape', useForDemo: true },\n { id: '1514949823529-bdcc933a9339', caption: '照片来自Kristopher Roller', orientation: 'landscape', useForDemo: true },\n { id: '1503293962593-47247718a17a', caption: '照片来自Jeremy Bishop', orientation: 'landscape', useForDemo: true },\n { id: '1509914398892-963f53e6e2f1', caption: '照片来自Linus Nylund', orientation: 'landscape', useForDemo: true },\n]\nconst THUMBNAIL_IMAGES = [\n { id: '1501963422762-3d89bd989568', caption: '照片来自Jeremy Bishop', orientation: 'landscape', useForDemo: true },\n { id: '1418846531910-2b7bb1043512', caption: '照片来自Vincentiu Solomon', orientation: 'landscape', useForDemo: true },\n { id: '1509529711801-deac231925ac', caption: '照片来自Joshua Earle', orientation: 'landscape', useForDemo: true },\n { id: '1499062229216-7c6349e898fb', caption: '照片来自Leio McLaren', orientation: 'square', useForDemo: true },\n { id: '1495619744764-2cc11fcbe5f0', caption: '照片来自Philipp Kämmerer', orientation: 'square', useForDemo: true },\n { id: '1488584433697-7ccc1148d30c', caption: '照片来自Flecher Clay', orientation: 'square' },\n { id: '1478562853135-c3c9e3ef7905', caption: '照片来自Austin Neil', orientation: 'landscape' },\n { id: '1476111021705-ac3b3304fe20', caption: '照片来自Dino Reichmuth', orientation: 'square' },\n { id: '1478001517127-fccc92f54906', caption: '照片来自Joshua Earle', orientation: 'landscape' },\n { id: '1455383333344-451b6147021b', caption: '照片来自Joshua Earle', orientation: 'landscape' },\n]\n\nconst theme = {\n // container\n container: {\n background: 'rgba(255, 255, 255, .9)'\n },\n\n // arrows\n arrow: {\n backgroundColor: 'rgba(255, 255, 255, .8)',\n fill: '#222',\n opacity: .6,\n transition: 'opacity 200ms',\n\n ':hover': {\n opacity: 1,\n }\n },\n arrow__size__medium: {\n borderRadius: 40,\n height: 40,\n marginTop: -20,\n\n '@media (min-width: 768px)': {\n height: 70,\n padding: 15,\n }\n },\n arrow__direction__left: { marginLeft: 10 },\n arrow__direction__right: { marginRight: 10 },\n close: {\n fill: '#d40000',\n opacity: .6,\n transition: 'all 200ms',\n ':hover': {\n opacity: 1\n }\n },\n\n // footer\n footer: {\n color: '#000'\n },\n footerCount: {\n color: 'rgba(0, 0, 0, .6)'\n },\n\n // thumbnails\n thumbnail:{\n\n },\n thumbnail__active: {\n boxShadow: '0 0 0 2px #00d8ff'\n }\n};\n\nrender(\n
\n
\n

照片均来自\n Unsplash.\n 采用以下键盘按钮来导航：\n 向上，向左（上一张） 向下，向右（下一张） 空格，Esc（关闭） —\n 你也可以尝试改变一下浏览器窗口大小~\n

\n
\n

默认选项

\n ({\n src: makeUnsplashSrc(id),\n thumbnail: makeUnsplashThumbnail(id, orientation),\n srcSet: [\n makeUnsplashSrcSet(id, 1024),\n makeUnsplashSrcSet(id, 800),\n makeUnsplashSrcSet(id, 500),\n makeUnsplashSrcSet(id, 320)\n ],\n caption,\n orientation,\n useForDemo,\n }))}\n />\n\n

缩略图同步

\n ({\n src: makeUnsplashSrc(id),\n thumbnail: makeUnsplashThumbnail(id, orientation),\n srcSet: [\n makeUnsplashSrcSet(id, 1024),\n makeUnsplashSrcSet(id, 800),\n makeUnsplashSrcSet(id, 500),\n makeUnsplashSrcSet(id, 320)\n ],\n caption,\n orientation,\n useForDemo,\n }))}\n showThumbnails\n />\n\n

主题可定制

\n ({\n src: makeUnsplashSrc(id),\n thumbnail: makeUnsplashThumbnail(id, orientation),\n srcSet: [\n makeUnsplashSrcSet(id, 1024),\n makeUnsplashSrcSet(id, 800),\n makeUnsplashSrcSet(id, 500),\n makeUnsplashSrcSet(id, 320)\n ],\n caption,\n orientation,\n useForDemo,\n }))}\n theme={theme}\n spinner={CustomSpinner}\n spinnerColor={'#d40000'}\n spinnerSize={150}\n showThumbnails\n />\n
,\n document.getElementById('example-CN')\n)\n" }, { "path": "examples/src/components/DownloadButton/icon.js", "content": "module.exports = (\n ''\n + ''\n + ''\n + ''\n + ''\n + ''\n);\n" }, { "path": "examples/src/components/DownloadButton/index.js", "content": "import PropTypes from 'prop-types'\nimport React, { Component } from 'react'\nimport DownloadIcon from './icon'\n\nclass DownloadButton extends Component {\n constructor () {\n super()\n }\n render () {\n return (\n \n \n \n )\n }\n}\n\nexport default DownloadButton\n" }, { "path": "examples/src/components/Gallery.js", "content": "import React, { Component } from 'react'\nimport ImgsViewer from 'react-images-viewer'\nimport PropTypes from 'prop-types'\nimport { css, StyleSheet } from 'aphrodite/no-important'\n\nclass Gallery extends Component {\n constructor () {\n super()\n\n this.state = {\n isOpen: false,\n currImg: 0,\n }\n\n this.gotoNext = this.gotoNext.bind(this)\n this.gotoPrev = this.gotoPrev.bind(this)\n this.gotoImg = this.gotoImg.bind(this)\n this.handleClickImg = this.handleClickImg.bind(this)\n this.closeImgsViewer = this.closeImgsViewer.bind(this)\n this.openImgsViewer = this.openImgsViewer.bind(this)\n }\n openImgsViewer (index, event) {\n event.preventDefault()\n this.setState({\n currImg: index,\n isOpen: true,\n })\n }\n closeImgsViewer () {\n this.setState({\n currImg: 0,\n isOpen: false,\n })\n }\n gotoPrev () {\n this.setState({\n currImg: this.state.currImg - 1\n })\n }\n gotoNext () {\n this.setState({\n currImg: this.state.currImg + 1\n })\n }\n gotoImg (index) {\n this.setState({\n currImg: index\n })\n }\n handleClickImg () {\n if (this.state.currImg === this.props.imgs.length - 1) return\n this.gotoNext()\n }\n renderGallery () {\n const { imgs } = this.props\n\n if (!imgs) return\n\n const gallery = imgs.filter(i => i.useForDemo).map((obj, i) => {\n return (\n this.openImgsViewer(i, e)}\n >\n \n \n )\n })\n\n return (\n
\n {gallery}\n
\n )\n }\n render () {\n return (\n
\n {this.props.heading &&

{this.props.heading}

}\n {this.props.subheading &&

{this.props.subheading}

}\n {this.renderGallery()}\n \n
\n )\n }\n}\n\nGallery.displayName = 'Gallery'\nGallery.propTypes = {\n preventScroll: PropTypes.bool,\n spinner: PropTypes.func,\n spinnerColor: PropTypes.string,\n spinnerSize: PropTypes.number,\n theme: PropTypes.object,\n heading: PropTypes.string,\n imgs: PropTypes.array,\n showThumbnails: PropTypes.bool,\n subheading: PropTypes.string,\n}\n\nconst gutter = {\n small: 2,\n large: 4,\n}\nconst classes = StyleSheet.create({\n gallery: {\n marginRight: -gutter.small,\n overflow: 'hidden',\n '@media (min-width: 500px)': {\n marginRight: -gutter.large,\n }\n },\n\n // anchor\n thumbnail: {\n boxSizing: 'border-box',\n display: 'block',\n float: 'left',\n lineHeight: 0,\n paddingRight: gutter.small,\n paddingBottom: gutter.small,\n overflow: 'hidden',\n\n '@media (min-width: 500px)': {\n paddingRight: gutter.large,\n paddingBottom: gutter.large,\n }\n },\n\n // orientation\n landscape: {\n width: '30%',\n },\n square: {\n paddingBottom: gutter.large,\n width: '40%',\n\n '@media (min-width: 500px)': {\n paddingBottom: gutter.large,\n }\n },\n\n // actual \n source: {\n border: 0,\n display: 'block',\n height: 'auto',\n maxWidth: '100%',\n width: 'auto'\n },\n})\n\nexport default Gallery\n" }, { "path": "examples/src/components/Spinner.js", "content": "import PropTypes from 'prop-types'\nimport React from 'react'\nimport { css, StyleSheet } from 'aphrodite/no-important'\n\nconst Spinner = (props) => {\n const classes = StyleSheet.create(styles(props))\n\n return (\n
\n
\n
\n )\n}\n\nSpinner.propTypes = {\n color: PropTypes.string,\n size: PropTypes.number,\n}\n\nconst squareKeyframes = {\n '0%': {\n top: 0,\n left: '25%',\n opacity: 1,\n },\n '25%': {\n top: '50%',\n left: '50%',\n opacity: .75,\n },\n '75%': {\n top: '50%',\n left: 0,\n opacity: .5,\n },\n '100%': {\n top: 0,\n left: '25%',\n opacity: 1,\n }\n}\n\nconst styles = ({ color, size }) => ({\n spinner: {\n display: 'inline-block',\n position: 'relative',\n width: size,\n height: size,\n },\n square: {\n position: 'absolute',\n width: size / 10,\n height: size / 10,\n border: `4px solid ${color}`,\n borderRadius: '50%',\n background: color,\n animationName: squareKeyframes,\n animationDuration: '2s',\n animationTimingFunction: 'linear',\n animationIterationCount: 'infinite',\n }\n})\n\nexport default Spinner\n" }, { "path": "examples/src/example.less", "content": "// Cmomon Example Styles\n\n\n\n// Constans\n// example site\n@gutter:\t\t\t\t\t\t\t20px;\n@table-cell-gutter: \t10px;\n@left-col-width: 180px;\n@heading-color: #000;\n\n@kbd-bg-color:\t\t\t#fafafa;\n@kbd-border-color:\t#ccc;\n\n@link-color: #00d7ff;\n@text-color: #333;\n\n@nav-gutter:\t\t\t\t\t30px;\n@nav-item-padding: 5px;\n@nav-padding: @nav-gutter - @nav-item-padding;\n\n\n// Base\nbody {\n\tbackground-color: '#fff';\n color: @text-color;\n font-family: 'Misrosoft Yahei', Helvetica Neue, Helvetica, Arial, sans-serif;\n font-size: 14px;\n line-height: 1.4;\n margin: 0;\n padding: 0;\n}\n\na {\n color: @link-color;\n text-decoration: none;\n &:hover {\n text-decoration: underline;\n }\n}\nhr {\n\tborder: none;\n\tborder-top: 1px solid rgba(0, 0, 0, .1);\n\tmargin-top: 2em;\n\tmargin-bottom: 2em;\n}\n\n.container {\n margin-right: auto;\n margin-left: auto;\n max-width: 940px;\n padding: 0 @gutter;\n}\n\n// Columns\n.left-col {\n\tdisplay: none;\n\tfloat: left;\n\tposition: fixed;\n\twidth: @left-col-width;\n\tz-index: 1;\n}\n\n// Navigation\n.page-nav {\n\tlist-style: none;\n\tmargin: 0;\n\tpadding: 0 @nav-padding 0 0;\n\ttext-align: right;\n}\n.page-nav__item {\n\n}\n.page-nav__link {\n\tdisplay: block;\n\tpadding: @nav-item-padding;\n}\n\n// Headings\nh1, h2, h3, h4, h5, h6,\n.h1, .h2, .h3, .h4, .h5, .h6 {\n color: @heading-color;\n font-weight: 500;\n line-height: 1;\n margin-bottom: 0.66em;\n margin-top: 0;\n}\n\nh1, .h1 {\n font-size: 3em;\n}\nh2, .h2 {\n font-size: 2em;\n\tfont-weight: 300;\n\tpadding-top: @nav-gutter;\n}\nh3, .h3 {\n\tcolor: #999;\n\tfont-size: 1em;\n\tfont-weight: bold;\n\tmargin-top: 2em;\n\ttext-transform: uppercase;\n}\nh4, .h4 {\n font-size: 1em;\n}\nh5, .h5 {\n font-size: .85em;\n}\nh6, .h6 {\n font-size: .75em;\n}\n\n// Layout\n// ------------------------------\n\n// header\n\n.page-header {\n\tpadding: @gutter 0;\n\n\tp {\n\t\tmargin: 0;\n\t}\n\ta {\n\t\tborder-bottom: 1px solid fade(white, 30%);\n\t\ttext-decoration: none;\n\n\t\t&:hover,\n\t\t&:focus {\n\t\t\tborder-bottom-color: white;\n\t\t\toutline: none;\n\t\t\ttext-decoration: none;\n\t\t}\n\t}\n}\n.page-header__title {\n\tfont-style: 3em;\n}\n.page-header__subtitle {\n\tcolor: #777777;\n\tfont-size: 1.125em;\n\tfont-weight: 300;\n}\n\n// subheader\n\n.page-subheader {\n\tbackground-color: mix(@link-color, white, 8%);\n\tborder-radius: 4px;\n\tpadding: @gutter;\n}\n.page-subheader__button {\n\tfloat: right;\n}\n.page-subheader__link {\n\tborder-bottom: 1px solid fade(@link-color, 30%);\n\toutline: none;\n\ttext-decoration: none;\n\n\t&:hover,\n\t&:focus {\n\t\tborder-bottom-color: @link-color;\n\t\toutline: none;\n\t\ttext-decoration: none;\n\t}\n}\n\n// content\n\n.page-content {\n\tpadding-bottom: @nav-gutter;\n}\n\n// footer\n\n.page-footer {\n\tbackground-color: #fafafa;\n\tcolor: #999;\n\tpadding: @nav-gutter 0;\n\ttext-align: center;\n}\n\n// options table\n\n.options-table {\n\tborder-collapse: collapse;\n\tborder-spacing: 0;\n\tmargin-left: -@table-cell-gutter;\n\tmargin-right: -@table-cell-gutter;\n\tmin-width: 100%;\n\twidth: 100%;\n\ttd, th {\n\t\tpadding: @table-cell-gutter;\n\t}\n\tth {\n\t\tborder-bottom: 1px solid rgba(0, 0, 0, .05);\n\t\tcolor: #999999;\n\t\tfont-weight: normal;\n\t}\n\ttd {\n\t\tborder-top: 1px solid rgba(0, 0, 0, .05);\n\t}\n}\n\n// Miscellaneous\n// --------------------\n\n.section {\n\tmargin-bottom: 40px;\n}\n\n.hint {\n\tfont-size: .85em;\n\tmargin: 15px 0;\n\tcolor: #666;\n}\n\nkbd {\n\tbackground-color: @kbd-bg-color;\n\tborder-radius: 3px;\n\tborder: 1px solid @kbd-border-color;\n\tborder-bottom-color: darken(@kbd-border-color, 4%);\n\tborder-top-color: lighten(@kbd-border-color, 4%);\n\tbox-shadow: 0 1px 1px rgba(0, 0, 0, .12), 0 2px 0 0 rgba(255, 255, 255, .7) inset;\n\tcolor: #666666;\n\tdisplay: inline-block;\n\tfont-family: 'Microsoft Yahei';\n\tfont-size: .85em;\n\tfont-weight: 500;\n\tline-height: inherit;\n\tpadding: 1px 4px;\n\twhite-space: nowrap;\n\n\t// little hack to tweak 'visual-middle' alignment\n\tposition: relative;\n\ttop: -1px;\n}\n\npre {\n\tbackground-color: #eeeeee;\n\tborder-radius: 4px;\n\tmargin-bottom: @nav-gutter;\n}\n\n\n// Responsive\n// --------------------\n\n// largee phones and up\n\n@media (min-width: 481px) {\n\t.page-header,\n\t.page-nav {\n\t\tpadding-bottom: @nav-gutter;\n\t\tpadding-top: @nav-gutter;\n\t}\n\t.page-header__title\t{\n\t\tfont-size: 4em;\n\t}\n\t.page-subheader {\n\t\tfont-size: 1.125em;\n\t\tline-height: 28px;\n\t}\n}\n\n// large phones and down\n\n@media (max-width: 768px) {\n\t.options-table-container {\n\t\toverflow-x: scroll;\n\t\toverflow-y: hidden;\n\t\twidth: 100%;\n\t\t-ms-overflow-style: -ms-autohiding-scrollbar;\n\t\t-webkit-overflow-scrolling: touch;\n\t}\n\t.options-table {\n\t\ttable-layout: auto;\n\n\t\ttd {\n\t\t\twhite-space: nowrap;\n\t\t}\n\t}\n}\n\n// tablets and up\n\n@media (min-width: 769px) {\n\t.left-col {\n\t\tdisplay: block;\n\t}\n\t.right-col {\n\t\tpadding-left: @left-col-width;\n\t}\n\t.page-content {\n\t\tpadding-left: @nav-gutter;\n\t\tposition: relative;\n\n\t\t&::before {\n\t\t\tbackground: linear-gradient(90deg, fade(#e9e9e9, 0%) 94%, #e9e9e9), linear-gradient(90deg, fade(#f6f6f6, 0%) 50%, #f6f6f6);\n\t\t\tborder-right: 1px solid #e6e6e6;\n\t\t\tcontent: \" \";\n\t\t\tmargin-left: -(@left-col-width + @nav-gutter);\n\t\t\theight: 100%;\n\t\t\tposition: fixed;\n\t\t\twidth: @left-col-width;\n\t\t}\n\t}\n\t.page-header__subtitle {\n\t\tfont-size: 2em;\n\t}\n\t.page-footer {\n\t\tborder: none;\n\t\tbottom: 0;\n\t\tfloat: left;\n\t\tmargin-left: -@nav-gutter;\n\t\tposition: fixed;\n\t\ttext-align: right;\n\t\twidth: @left-col-width;\n\t\tz-index: 1;\n\t}\n\t.page-footer__copyright--small {\n\t\tdisplay: none;\n\t}\n}\n" }, { "path": "examples/src/index.html", "content": "\n\n \n React-Images-Viewer\n \n \n \n \n \n \n \n \n \n \n \n\n\n
\n
\n \n
\n
\n
\n

React Images Viewer

\n

A simple, responsive imgsViewer component for ReactJS to display an array of images.

\n
\n
\n Code and Docs on GitHub\n \n Star\n \n
\n
\n
\n

Examples

\n
\n
\n
\n

Getting Started

\n

1. Install using yarn:

\n 
yarn add react-images-viewer
\n

… or npm:

\n 
npm install react-images-viewer --save
\n

2. Example usage with JSX:

\n 
\n                \n  <ImgsViewer\n    imgs={[\n      { src: '../images/photo-1.jpg' },\n      { src: '../images/photo-2.jpg' }\n    ]}\n    isOpen={this.state.isOpen}\n    onClickPrev={this.gotoPrevImg}\n    onClickNext={this.gotoNextImg}\n    onClose={this.closeImgsViewer}\n  />\n                \n
\n
\n
\n

Options

\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
PropertyTypeDefaultDescription
backdropCloseableboolfalseAllow users to exit the imgsViewer by clicking the backdrop
currImgnumber0The index of the image to display initially
customControlsarrayundefinedAn array of elements to display as custom controls on the top of imgsViewer
enableKeyboardInputbooltrueSupports keyboard input -\n space, esc,\n arrow left, arrow up, and\n arrow right, arrow down\n
\n imgs\n arrayundefinedRequired. An array of objects containing valid src and srcset values of img element
imgCountSeparatorstring' / 'Custom separator for the image count
isOpenboolfalseWhether or not the imgsViewer is displayed
onClickPrevfuncundefinedFired on request of the previous image
onClickNextfuncundefinedFired on request of the next image
onClickImgfuncundefinedHandle click event on the current image
onClickThumbnailfuncundefinedHandle click on thumbnail
onClosefuncundefinedRequired. Handle closing of the imgsViewer
preloadNextImgbooltrueWhether to preload the next available image.
preventAutoScrollbooltrueDetermines whether auto-scrolling is prevented
showCloseBtnbooltrueOptionally display a close \"X\" button in top right corner
showImgCountbooltrueOptionally display image index, e.g., \"3 of 20\"
showThumbnailsboolfalseOptionally display thumbnails beneath the imgsViewer
themeobjectundefinedPass through styles to theme each component;\n arrow,\n container, etc.
widthnumber1024Maximum width of the carousel; defaults to 1024px
\n
\n

Images

\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
PropertyTypeDefaultDescription
srcstrundefinedRequired. The primary image path
srcsetarrundefinedList of alternative image sizes
captionstrundefinedDisplayed benath the current image. Great for description or attribution
thumbnailstrundefinedThumbnail to display if\n showThumbnails is set to\n true\n
\n
\n
\n\n
\n

License

\n

React Images Viewer is free to use for personal and commercial projects under\n the MIT license.

\n

Attribution is not required, but greatly appreciated. It does not have to be user-facing and can remain within the code.

\n
\n\n
\n

Help

\n\n

Have a question?

\n

Follow the\n quick start guide on GitHub to get up and running quickly. Please do not use Github Issues to report personal support\n requests.

\n\n

Found a bug?

\n

If you find a bug, please read the\n Contribution Guildelines before you\n report the issue.

\n
\n
\n
\n
\n \n
\n
\n \n \n \n \n\n" }, { "path": "examples/src/index_CN.html", "content": "\n\n \n React-Images-Viewer\n \n \n \n \n \n \n \n \n \n \n \n\n\n\n
\n
\n \n
\n
\n
\n

React Images Viewer

\n

一个简单易用，响应式，放大并查看一组图片的 React 库。

\n
\n
\n Github上的源码，文档\n \n \n \n
\n
\n
\n

例子

\n
\n
\n
\n

入门

\n

1. 依靠 yarn 来安装

\n 
yarn add react-images
\n

… 或者 npm:

\n 
npm install react-images --save
\n

2. JSX 使用案例:

\n 
\n                \n  <Viewer\n    imgs={[\n      { src: '../images/photo-1.jpg' },\n      { src: '../images/photo-2.jpg' }\n    ]}\n    isOpen={this.state.isOpen}\n    onClickPrev={this.gotoPrevImg}\n    onClickNext={this.gotoNextImg}\n    onClose={this.closeImgsViewer}\n  />\n                \n
\n
\n
\n

选项

\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
属性名类型默认值描述
backdropCloseable布尔值false是否可以通过点击幕布退出查看
currImg数值型0当前图片初始化索引
customControls数组undefined照片查看器顶部控件的元素数组
enableKeyboardInput布尔值true支持键盘输入 -\n 空格键，Esc,\n 左箭头，上箭头, and\n 右箭头，下箭头\n
\n imgs\n 数组undefined必须项。一个包含具备img 元素src，srcset 合法值的对象数组。
imgCountSeparatorstring' / '图片计数器分隔符
isOpen布尔值false图片查看器是否非法
onClickPrevfuncundefined请求上一张图片时触发
onClickNextfuncundefined请求下一张图片时触发
onClickImgfuncundefined当前图片的点击事件处理器
onClickThumbnailfuncundefined缩略图的点击事件处理器
onClosefuncundefined必须项，照片查看器的关闭事件处理器
preloadNextImg布尔值true是否预加载下一张图片
preventScroll布尔值true自动滚动是否阻止
showCloseBtn布尔值true是否在右上角显示 X 关闭按钮
showImgCount布尔值true是否显示图片索引，比如“3 / 20”
showThumbnails布尔值false是否在查看器下方显示缩略图
theme对象undefined传递给每个组件的主题化样式；\n arrow键,\n container键，等等。
width数值型1024轮播器的最大宽度，默认为1024px
\n
\n

Imgs

\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
属性名类型默认值描述
src字符串undefined必须项. 主图片路径
srcsetarrundefined可替代图片尺寸列表
caption字符串undefined当前图片下显示，对于描述或者归属很有用。
thumbnail字符串undefined\n showThumbnails被设置成\n true的话要显示的缩略图\n
\n
\n
\n\n
\n

许可证

\n

React Images Viewer在\n MIT证书下，对于个人或者商业用途都是免费的

。\n

它不是必须项，但是十分感谢。没有面向用户而且保留源代码。

\n
\n\n
\n

帮助

\n\n

需要帮助？

\n

遵循\n github 上的快速入门指南，并运行起来。 请不要出于个人目的滥用 github issues。\n

\n\n

发现 bug？

\n

如果你找到 bug 了，请在你\n 报告issue.

\n 之前阅读贡献指南一番。\n
\n
\n
\n
\n \n
\n
\n \n \n \n \n\n" }, { "path": "examples/src/standalone.html", "content": "\n\n \n React-Images-Viewer\n \n \n \n \n \n \n \n \n \n \n \n \n\n\n
\n
\n\n
\n
\n \n \n \n \n \n \n \n \n \n \n\n" }, { "path": "index.js", "content": "'use strict';\n\nmodule.exports = function(number, locale) {\n return number.toLocaleString(locale);\n};\n" }, { "path": "jest.config.js", "content": "module.exports = {\n verbose: true,\n collectCoverage: true,\n collectCoverageFrom: ['src/*.{js, jsx}'],\n setupFiles: ['./__test__/rafShim.js', './__test__/jestsetup.js'],\n testURL: 'http://localhost/',\n // moduleFileExtensions: [\n // 'js',\n // 'jsx',\n // ],\n // moduleNameMapper: {\n // '\\\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '/__mocks__/fileMock.js',\n // '\\\\.(css|less)$': '/__mocks__/styleMock.js',\n // },\n // transform: {\n // '^.+\\\\.js$': 'babel-jest',\n // }\n}\n" }, { "path": "new-branch.sh", "content": "git checkout -b $1\ngit push -u origin $1\ngit branch --all\n" }, { "path": "package-scripts.js", "content": "const npsUtils = require('nps-utils')\nconst path = require('path')\nconst { series, rimraf, concurrent } = npsUtils\n\nmodule.exports = {\n scripts: {\n build: {\n description: 'clean dist directory and run all builds',\n default: series(\n rimraf('dist'),\n rimraf('lib'),\n concurrent.nps('build.rollup', 'build.babel', 'build.less')\n ),\n rollup: 'rollup --config',\n babel: 'babel src -d lib',\n less: series(\n 'lessc examples/src/example.less examples/dist/example.css'\n ),\n },\n publish: {\n default: series(\n rimraf('examples/dist'),\n 'webpack --progress -p',\n // 'git pull',\n 'git subtree push --prefix examples/dist origin gh-pages'\n // 'git push origin `git subtree split --prefix examples/dist gh-pages`:gh-pages --force'\n )\n }\n }\n}\n" }, { "path": "package.json", "content": "{\n \"name\": \"react-images-viewer\",\n \"version\": \"1.7.1\",\n \"description\": \"Create an react-images-viewer component.\",\n \"main\": \"lib/ImgsViewer.js\",\n \"jsnext:main\": \"dist/react-images-viewer.es.js\",\n \"scripts\": {\n \"build\": \"nps build\",\n \"publish:examples\": \"NODE_ENV=production nps publish\",\n \"start\": \"webpack-dev-server --progress\",\n \"lint\": \"eslint src/** examples/src/app.js examples/src/components/Gallery.js\",\n \"test\": \"jest\",\n \"coverage\": \"jest --coverage && cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js\"\n },\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"git+https://github.com/guonanci/react-images-viewer.git\"\n },\n \"keywords\": [\n \"react\",\n \"react-component\",\n \"react images\",\n \"react-images\",\n \"react-images-viewer\",\n \"lightbox\",\n \"react lightbox\",\n \"react-lightbox\",\n \"carousel\",\n \"react-carousel\",\n \"react carousel\",\n \"gallery\",\n \"react-gallery\",\n \"react gallery\",\n \"react-photo\",\n \"react-photo-viewer\"\n ],\n \"author\": \"yiminanci (https://juejin.cn/user/3491704660305111)\",\n \"license\": \"MIT\",\n \"responsitory\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/guonanci/react-images-viewer.git\"\n },\n \"bugs\": {\n \"url\": \"https://github.com/guonanci/react-images-viewer/issues\"\n },\n \"homepage\": \"https://github.com/guonanci/react-images-viewer#readme\",\n \"devDependencies\": {\n \"babel\": \"^6.23.0\",\n \"babel-cli\": \"^6.26.0\",\n \"babel-core\": \"^6.26.3\",\n \"babel-eslint\": \"^8.2.5\",\n \"babel-jest\": \"^23.4.2\",\n \"babel-loader\": \"^7.1.5\",\n \"babel-plugin-external-helpers\": \"^6.22.0\",\n \"babel-plugin-transform-object-assign\": \"^6.22.0\",\n \"babel-plugin-transform-object-rest-spread\": \"^6.26.0\",\n \"babel-plugin-transform-react-remove-prop-types\": \"^0.4.13\",\n \"babel-preset-env\": \"^1.7.0\",\n \"babel-preset-react\": \"^6.24.1\",\n \"coveralls\": \"^3.0.2\",\n \"css-loader\": \"^1.0.0\",\n \"enzyme\": \"^3.3.0\",\n \"enzyme-adapter-react-16\": \"^1.15.6\",\n \"eslint\": \"^5.1.0\",\n \"eslint-plugin-react\": \"^7.10.0\",\n \"html-loader\": \"^0.5.5\",\n \"html-webpack-plugin\": \"^3.2.0\",\n \"jest\": \"^23.4.2\",\n \"jest-cli\": \"^23.4.2\",\n \"less\": \"^3.5.3\",\n \"less-loader\": \"^4.1.0\",\n \"mini-css-extract-plugin\": \"^0.4.1\",\n \"nps\": \"^5.9.2\",\n \"nps-utils\": \"^1.6.0\",\n \"react\": \"^17.0.2\",\n \"react-dom\": \"^17.0.2\",\n \"react-test-renderer\": \"^16.4.1\",\n \"regenerator-runtime\": \"^0.12.0\",\n \"rollup\": \"^0.62.0\",\n \"rollup-plugin-babel\": \"^3.0.7\",\n \"rollup-plugin-commonjs\": \"^9.1.3\",\n \"rollup-plugin-node-resolve\": \"^3.3.0\",\n \"rollup-plugin-uglify\": \"^4.0.0\",\n \"style-loader\": \"^0.21.0\",\n \"uglify-es\": \"^3.3.9\",\n \"webpack\": \"^4.16.2\",\n \"webpack-cli\": \"^3.1.0\",\n \"webpack-dev-server\": \"^3.1.5\"\n },\n \"peerDependencies\": {\n \"react\": \"^15.0 || ^16.0 || ^17.0\",\n \"react-dom\": \"^15.0 || ^16.0 || ^17.0\"\n },\n \"dependencies\": {\n \"aphrodite\": \"^2.2.2\",\n \"prop-types\": \"^15.6.2\",\n \"react-scrolllock\": \"^3.0.1\",\n \"react-transition-group\": \"^2.4.0\"\n }\n}\n" }, { "path": "rollup.config.js", "content": "import babel from 'rollup-plugin-babel'\nimport resolve from 'rollup-plugin-node-resolve'\nimport { uglify } from 'rollup-plugin-uglify'\nimport { minify } from 'uglify-es'\n\nconst name = 'ImgsViewer'\nconst path = 'dist/react-images-viewer'\nconst globals = {\n 'prop-types': 'PropTypes',\n 'react-dom': 'ReactDOM',\n react: 'React',\n aphrodite: 'aphrodite',\n 'aphrodite/no-important': 'aphrodite',\n 'react-scrolllock': 'ScrollLock',\n 'react-transition-group': 'ReactTransitionGroup',\n 'react-spinners': 'BounceLoader',\n}\n\nconst external = Object.keys(globals)\nconst babelOptions = (production) => {\n let result = {\n babelrc: false,\n presets: ['react', ['env', { modules: false }]],\n plugins: [['transform-object-rest-spread', { useBuiltIns: true }], 'transform-object-rest-spread', 'external-helpers']\n }\n if (production) {\n result.plugins.push('transform-react-remove-prop-types')\n }\n return result\n}\n\nexport default [\n {\n input: 'src/ImgsViewer.js',\n output: {\n file: path + '.es.js',\n format: 'es',\n },\n external: external,\n plugins: [babel(babelOptions(false))]\n },\n {\n input: 'src/ImgsViewer.js',\n output: {\n name: name,\n file: path + '.js',\n format: 'umd',\n globals: globals,\n },\n external: external,\n plugins: [babel(babelOptions(false)), resolve()]\n },\n {\n input: 'src/ImgsViewer.js',\n output: {\n name: name,\n file: path + '.min.js',\n format: 'umd',\n globals: globals,\n },\n external: external,\n plugins: [babel(babelOptions(true)), resolve(), uglify({}, minify)],\n }\n]\n" }, { "path": "src/ImgsViewer.js", "content": "import PropTypes from \"prop-types\";\nimport React, { Component, Fragment } from \"react\";\nimport { StyleSheet, css } from \"aphrodite\";\nimport ScrollLock from \"react-scrolllock\";\n\nimport defaultTheme from \"./theme\";\nimport Arrow from \"./components/Arrow\";\nimport Container from \"./components/Container\";\nimport Footer from \"./components/Footer\";\nimport Header from \"./components/Header\";\nimport PaginatedThumbnails from \"./components/PaginatedThumbnails\";\nimport Portal from \"./components/Portal\";\nimport DefaultSpinner from \"./components/Spinner\";\n\nimport { bindFunctions, canUseDom, deepMerge } from \"./utils/util\";\n\nfunction normalizeSourceSet(data) {\n const sourceSet = data.srcSet || data.srcset;\n\n if (Array.isArray(sourceSet)) {\n return sourceSet.join();\n }\n\n return sourceSet;\n}\n\nconst ThemeContext = React.createContext({\n theme: defaultTheme,\n toggleTheme: (newTheme) => {},\n});\n\nclass ImgsViewer extends Component {\n constructor(props) {\n super(props);\n\n this.theme = deepMerge(defaultTheme, this.props.theme);\n this.classes = StyleSheet.create(\n deepMerge(defaultStyles, this.props.theme)\n );\n this.toggleTheme = (theme) => {\n this.setState(() => ({ theme }));\n };\n this.state = {\n imgLoaded: false,\n theme: this.theme,\n toggleTheme: this.toggleTheme,\n };\n\n bindFunctions.call(this, [\n \"gotoNext\",\n \"gotoPrev\",\n \"closeBackdrop\",\n \"handleKeyboardInput\",\n \"handleImgLoaded\",\n ]);\n }\n componentDidMount() {\n if (this.props.isOpen) {\n if (this.props.enableKeyboardInput) {\n window.addEventListener(\"keydown\", this.handleKeyboardInput);\n }\n if (typeof this.props.currImg === \"number\") {\n this.preloadImg(this.props.currImg, this.handleImgLoaded);\n }\n }\n }\n // static getDerivedStateFromProps (nextProps, prevState) {\n UNSAFE_componentWillReceiveProps(nextProps) {\n if (!canUseDom) return;\n\n // const instance = this\n\n // always to preload imgs with both directions\n // then when user changs direction, img also show quickly\n if (nextProps.preloadNextImg) {\n const nextIdx = nextProps.currImg + 1;\n const prevIdx = nextProps.currImg - 1;\n // debugger\n // if (!this) return null\n this.preloadImg(prevIdx);\n this.preloadImg(nextIdx);\n }\n // preload currImg\n if (\n this.props.currImg !== nextProps.currImg ||\n (!this.props.isOpen && nextProps.isOpen)\n ) {\n const img = this.preloadImgData(\n nextProps.imgs[nextProps.currImg],\n this.handleImgLoaded\n );\n if (img)\n this.setState({\n imgLoaded: img.complete,\n });\n }\n\n // add/remove event listeners\n if (\n !this.props.isOpen &&\n nextProps.isOpen &&\n nextProps.enableKeyboardInput\n ) {\n window.addEventListener(\"keydown\", this.handleKeyboardInput);\n }\n if (!nextProps.isOpen && nextProps.enableKeyboardInput) {\n window.removeEventListener(\"keydown\", this.handleKeyboardInput);\n }\n\n return null;\n }\n componentWillUnmount() {\n if (this.props.enableKeyboardInput) {\n window.removeEventListener(\"keydown\", this.handleKeyboardInput);\n }\n }\n\n // ====================\n // Methods\n // ====================\n\n preloadImg(idx, onload) {\n return this.preloadImgData(this.props.imgs[idx], onload);\n }\n preloadImgData(data, onload) {\n if (!data) return;\n\n const img = new Image();\n const sourceSet = normalizeSourceSet(data);\n\n // Todo: add error handling for missing imgs\n img.onerror = onload;\n img.onload = onload;\n img.src = data.src;\n\n if (sourceSet) img.srcset = sourceSet;\n\n return img;\n }\n gotoNext(event) {\n const { currImg, imgs } = this.props;\n const { imgLoaded } = this.state;\n\n if (!imgLoaded || currImg === imgs.length - 1) return;\n\n if (event) {\n event.preventDefault();\n event.stopPropagation();\n }\n\n this.props.onClickNext();\n }\n gotoPrev(event) {\n const { currImg } = this.props;\n const { imgLoaded } = this.state;\n\n if (!imgLoaded || currImg === 0) return;\n\n if (event) {\n event.preventDefault();\n event.stopPropagation();\n }\n\n this.props.onClickPrev();\n }\n closeBackdrop(event) {\n if (\n event.target.id === \"viewerBackdrop\" ||\n event.target.tagName === \"FIGURE\"\n ) {\n this.props.onClose();\n }\n }\n handleKeyboardInput(event) {\n const { keyCode } = event;\n if (keyCode === 37 || keyCode === 33 || keyCode === 38) {\n // left, pageup, up\n this.gotoPrev(event);\n return true;\n } else if (keyCode === 39 || keyCode === 34 || keyCode === 40) {\n // right, pagedown, down\n this.gotoNext(event);\n return true;\n } else if (keyCode === 27 || keyCode === 32) {\n // esc, space\n this.props.onClose();\n return true;\n }\n return false;\n }\n handleImgLoaded() {\n this.setState({\n imgLoaded: true,\n });\n }\n\n // ====================\n // Renderers\n // ====================\n\n renderArrowPrev(theme) {\n if (this.props.currImg === 0) return null;\n\n return (\n \n );\n }\n renderArrowNext(theme) {\n if (this.props.currImg === this.props.imgs.length - 1) return null;\n\n return (\n \n );\n }\n renderDialog(newState) {\n const { backdropCloseable, isOpen, showThumbnails, width } = this.props;\n\n const { imgLoaded } = this.state;\n\n if (!isOpen) return ;\n\n const offsetThumbnails = showThumbnails\n ? this.theme.thumbnail.size + this.theme.container.gutter.vertical\n : 0;\n\n return (\n \n {({ theme, toggleTheme }) => {\n theme = newState.theme;\n return (\n \n \n \n {imgLoaded && this.renderHeader(theme)}{\" \"}\n {this.renderImgs(theme)}\n {this.renderSpinner()} {imgLoaded && this.renderFooter(theme)}\n
\n {imgLoaded && this.renderThumbnails(theme)}\n {imgLoaded && this.renderArrowPrev(theme)}\n {imgLoaded && this.renderArrowNext(theme)}\n {this.props.preventScroll && }\n \n \n );\n }}\n \n );\n }\n renderImgs(theme) {\n const { currImg, imgs, onClickImg, showThumbnails } = this.props;\n\n const { imgLoaded } = this.state;\n\n if (!imgs || !imgs.length) return null;\n\n const img = imgs[currImg];\n const sourceSet = normalizeSourceSet(img);\n const sizes = sourceSet ? \"100vw\" : null;\n\n const thumbnailsSize = showThumbnails ? theme.thumbnail.size : 0;\n const heightOffset = `${\n theme.header.height +\n theme.footer.height +\n thumbnailsSize +\n theme.container.gutter.vertical\n }px`;\n\n return (\n
\n \n
\n );\n }\n renderThumbnails(theme) {\n const {\n imgs,\n currImg,\n leftArrowTitle,\n rightArrowTitle,\n onClickThumbnail,\n showThumbnails,\n thumbnailOffset,\n } = this.props;\n\n if (!showThumbnails) return null;\n\n return (\n \n );\n }\n renderHeader(theme) {\n const { closeBtnTitle, customControls, onClose, showCloseBtn } = this.props;\n\n return (\n \n );\n }\n renderFooter(theme) {\n const { currImg, imgs, imgCountSeparator, showImgCount } = this.props;\n\n if (!imgs || !imgs.length) return null;\n\n return (\n \n );\n }\n renderSpinner() {\n const { spinner, spinnerDisabled, spinnerColor, spinnerSize } = this.props;\n\n const { imgLoaded } = this.state;\n const Spinner = spinner;\n if (spinnerDisabled) return null;\n return (\n \n \n \n );\n }\n\n render() {\n return (\n \n {this.renderDialog(this.state)} \n \n );\n }\n}\n\nImgsViewer.propTypes = {\n backdropCloseable: PropTypes.bool,\n closeBtnTitle: PropTypes.string,\n currImg: PropTypes.number,\n customControls: PropTypes.arrayOf(PropTypes.node),\n enableKeyboardInput: PropTypes.bool,\n imgCountSeparator: PropTypes.string,\n imgs: PropTypes.arrayOf(\n PropTypes.shape({\n src: PropTypes.string.isRequired,\n srcSet: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),\n caption: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n thumbnail: PropTypes.string,\n })\n ).isRequired,\n isOpen: PropTypes.bool,\n leftArrowTitle: PropTypes.string,\n onClickImg: PropTypes.func,\n onClickNext: PropTypes.func,\n onClickPrev: PropTypes.func,\n onClickThumbnail: PropTypes.func,\n onClose: PropTypes.func.isRequired,\n preloadNextImg: PropTypes.bool,\n preventScroll: PropTypes.bool,\n rightArrowTitle: PropTypes.string,\n showCloseBtn: PropTypes.bool,\n showImgCount: PropTypes.bool,\n showThumbnails: PropTypes.bool,\n spinnerDisabled: PropTypes.bool,\n spinner: PropTypes.func,\n spinnerColor: PropTypes.string,\n spinnerSize: PropTypes.number,\n theme: PropTypes.object,\n thumbnailOffset: PropTypes.number,\n width: PropTypes.number,\n};\nImgsViewer.defaultProps = {\n currImg: 0,\n enableKeyboardInput: true,\n imgCountSeparator: \" / \",\n onClickShowNextImg: true,\n preloadNextImg: true,\n preventScroll: true,\n showCloseBtn: true,\n showImgCount: true,\n spinnerDisabled: false,\n spinner: DefaultSpinner,\n spinnerColor: \"#fff\",\n spinnerSize: 50,\n theme: {},\n thumbnailOffset: 2,\n width: 1024,\n};\n\nconst defaultStyles = {\n content: {\n position: \"relative\",\n },\n figure: {\n margin: 0, // remove browser default\n },\n img: {\n display: \"block\", // removes browser default gutter\n height: \"auto\",\n margin: \"0 auto\", // main center on very short screens or very narrow img\n maxWidth: \"100%\",\n\n // disable user select\n WebkitTouchCallout: \"none\",\n userSelect: \"none\",\n\n // opacity animation on image load\n opacity: 0,\n transition: \"opacity .3s\",\n },\n imgLoaded: {\n opacity: 1,\n },\n spinner: {\n position: \"absolute\",\n top: \"50%\",\n left: \"50%\",\n transform: \"translate(-50%, -50%)\",\n\n // opacity animation to make spinner appear with delay\n opacity: 0,\n transition: \"opacity .3s\",\n pointerEvents: \"none\",\n },\n spinnerActive: {\n opacity: 1,\n },\n};\n\nexport default ImgsViewer;\n" }, { "path": "src/components/Arrow.js", "content": "import PropTypes from \"prop-types\";\nimport React from \"react\";\nimport { css, StyleSheet } from \"aphrodite/no-important\";\n\nimport defaults from \"../theme\";\nimport { deepMerge } from \"../utils/util\";\nimport Icon from \"./Icon\";\n\nfunction Arrow({ direction, icon, onClick, size, theme, ...props }) {\n const classes = StyleSheet.create(deepMerge(defaultStyles, theme));\n\n return (\n \n \n \n );\n}\n\nArrow.propTypes = {\n theme: PropTypes.object,\n direction: PropTypes.oneOf([\"left\", \"right\"]),\n icon: PropTypes.string,\n onClick: PropTypes.func.isRequired,\n size: PropTypes.oneOf([\"medium\", \"small\"]).isRequired,\n};\nArrow.defaultProps = {\n size: \"medium\",\n};\nconst defaultStyles = {\n arrow: {\n background: \"none\",\n border: \"none\",\n borderRadius: 4,\n cursor: \"pointer\",\n outline: \"none\",\n padding: 10, // increase hit area\n position: \"absolute\",\n top: \"50%\",\n\n // disable user select\n WebkitTouchCallout: \"none\",\n userSelect: \"none\",\n },\n\n // sizes\n arrow__size__medium: {\n height: defaults.arrow.height,\n marginTop: defaults.arrow.height / -2,\n width: 40,\n\n \"@media (min-width: 768px)\": {\n width: 70,\n },\n },\n arrow__size__small: {\n height: defaults.thumbnail.size,\n marginTop: defaults.thumbnail.size / -2,\n width: 30,\n\n \"@media (min-width: 500px)\": {\n width: 40,\n },\n },\n\n // direciton\n arrow__direction__right: {\n right: defaults.container.gutter.horizontal,\n },\n arrow__direction__left: {\n left: defaults.container.gutter.horizontal,\n },\n};\n\nexport default Arrow;\n" }, { "path": "src/components/Container.js", "content": "import PropTypes from 'prop-types'\nimport React from 'react'\nimport { css, StyleSheet } from 'aphrodite/no-important'\n\nimport defaults from '../theme'\nimport { deepMerge } from '../utils/util'\n\nfunction Container (props) {\n const classes = StyleSheet.create(deepMerge(defaultStyles, props.theme))\n\n return (\n \n )\n}\n\nContainer.propTypes = {\n theme: PropTypes.object\n}\n\nconst defaultStyles = {\n container: {\n alignItems: 'center',\n backdropColor: defaults.container.background,\n boxSizing: 'border-box',\n display: 'flex',\n height: '100%',\n justifyContent: 'center',\n left: 0,\n paddingTop: defaults.container.gutter.vertical,\n paddingRight: defaults.container.gutter.horizontal,\n paddingBottom: defaults.container.gutter.vertical,\n paddingLeft: defaults.container.gutter.horizontal,\n position: 'fixed',\n top: 0,\n width: '100%',\n zIndex: defaults.container.zIndex,\n }\n}\n\nexport default Container\n" }, { "path": "src/components/Footer.js", "content": "import PropTypes from 'prop-types'\nimport React from 'react'\nimport { css, StyleSheet } from 'aphrodite/no-important'\nimport defaults from '../theme'\nimport { deepMerge } from '../utils/util'\n\nfunction Footer ({ caption, countCurr, countSeparator, countTotal, showCount, theme, ...props }) {\n if (!caption && !showCount) return null\n\n const classes = StyleSheet.create(deepMerge(defaultStyles, theme))\n\n const imgCount = showCount ? (\n
\n {countCurr}\n {countSeparator}\n {countTotal}\n
\n ) : \n\n return (\n
\n {caption ? (\n
\n {caption}\n
\n ) : }\n {imgCount}\n
\n )\n}\n\nFooter.propTypes ={\n theme: PropTypes.object,\n caption: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n countCurr: PropTypes.number,\n countSeparator: PropTypes.string,\n countTotal: PropTypes.number,\n showCount: PropTypes.bool,\n}\n\nconst defaultStyles = {\n footer: {\n boxSizing: 'border-box',\n color: defaults.footer.color,\n cursor: 'auto',\n display: 'flex',\n justifyContent: 'space-between',\n left: 0,\n lineHeight: 1.3,\n paddingTop: defaults.footer.gutter.vertical,\n paddingRight: defaults.footer.gutter.horizontal,\n paddingBottom: defaults.footer.gutter.vertical,\n paddingLeft: defaults.footer.gutter.horizontal,\n },\n footerCount: {\n color: defaults.footer.count.color,\n fontSize: defaults.footer.count.fontSize,\n paddingLeft: '1em', // add a small gutter for the caption\n },\n footerCaption: {\n flex: '1 1 0',\n }\n}\n\nexport default Footer\n" }, { "path": "src/components/Header.js", "content": "import PropTypes from 'prop-types'\nimport React from 'react'\nimport { css, StyleSheet } from 'aphrodite/no-important'\n\nimport defaults from '../theme'\nimport { deepMerge } from '../utils/util'\nimport Icon from './Icon'\n\nfunction Header ({ customControls, onClose, showCloseBtn, closeBtnTitle, theme, ...props }) {\n const classes = StyleSheet.create(deepMerge(defaultStyles, theme))\n\n return (\n
\n {customControls ? customControls : }\n {!!showCloseBtn && (\n \n \n \n )}\n
\n )\n}\n\nHeader.propTypes = {\n theme: PropTypes.object,\n customControls: PropTypes.array,\n onClose: PropTypes.func.isRequired,\n showCloseBtn: PropTypes.bool,\n closeBtnTitle: PropTypes.string,\n}\n\nconst defaultStyles = {\n header: {\n display: 'flex',\n justifyContent: 'space-between',\n height: defaults.header.height,\n },\n close: {\n background: 'none',\n border: 'none',\n cursor: 'pointer',\n outline: 'none',\n position: 'relative',\n top: 0,\n verticalAlign: 'bottom',\n zIndex: 1,\n\n // increase hit area\n height: 40,\n marginRight: -10,\n padding: 10,\n width: 40,\n }\n}\n\nexport default Header\n" }, { "path": "src/components/Icon.js", "content": "import PropTypes from \"prop-types\";\nimport React from \"react\";\nimport arrowLeft from \"../icons/arrow_left\";\nimport arrowRight from \"../icons/arrow_right\";\nimport close from \"../icons/close\";\n\nconst icons = { arrowLeft, arrowRight, close };\n\nconst Icon = ({ fill, type, ...props }) => {\n const icon = icons[type];\n\n return ;\n};\n\nIcon.propTypes = {\n fill: PropTypes.string,\n type: PropTypes.oneOf(Object.keys(icons)),\n};\nIcon.defaultProps = {\n fill: \"#fff\",\n};\n\nexport default Icon;\n" }, { "path": "src/components/PaginatedThumbnails.js", "content": "import PropTypes from 'prop-types'\nimport React, { Component } from 'react'\nimport { css, StyleSheet } from 'aphrodite/no-important'\n\nimport Thumbnail from './Thumbnail'\nimport Arrow from './Arrow'\nimport theme from '../theme'\n\nconst classes = StyleSheet.create({\n paginatedThumbnails: {\n bottom: theme.container.gutter.vertical,\n height: theme.thumbnail.size,\n padding: '0 50px',\n position: 'absolute',\n textAlign: 'center',\n whiteSpace: 'nowrap',\n left: '50%',\n transform: 'translateX(-50%)',\n }\n})\n\nconst arrowStyles = {\n height: theme.thumbnail.size + (theme.thumbnail.gutter * 2),\n width: 40,\n}\n\nexport default class PaginatedThumbnails extends Component {\n constructor (props) {\n super(props)\n\n this.state = {\n hasCustomPage: false,\n }\n\n this.gotoPrev = this.gotoPrev.bind(this)\n this.gotoNext = this.gotoNext.bind(this)\n }\n UNSAFE_componentWillReceiveProps (nextProps) {\n if (nextProps.currImg !== this.props.currImg) {\n this.setState({\n hasCustomPage: false,\n })\n }\n }\n\n // ====================\n // Methods\n // ====================\n\n getFirst () {\n const { currImg, offset } = this.props\n if(this.state.hasCustomPage) {\n return this.clampFirst(this.state.first)\n }\n return this.clampFirst(currImg - offset)\n }\n setFirst (event, newFirst) {\n const { first } = this.state\n\n if (event) {\n event.preventDefault()\n event.stopPropagation()\n }\n\n if (first === newFirst) return\n\n this.setState({\n hasCustomPage: true,\n first: newFirst\n })\n }\n gotoPrev(event) {\n this.setFirst(event, this.getFirst() - this.props.offset)\n }\n gotoNext(event) {\n this.setFirst(event, this.getFirst() + this.props.offset)\n }\n clampFirst (value) {\n const { imgs, offset } = this.props\n\n const totalCount = 2 * offset + 1 // show $offset extra thumbnails on each side\n\n if (value < 0) {\n return 0\n } else if (value + totalCount > imgs.length) { // Too far\n return imgs.length - totalCount\n } else {\n return value\n }\n }\n\n // ====================\n // Renderers\n // ====================\n\n renderArrowPrev (theme) {\n const { leftTitle } = this.props\n if (this.getFirst() <= 0) return null\n\n return (\n \n )\n }\n renderArrowNext (theme) {\n const { offset, imgs, rightTitle } = this.props\n const totalCount = 2 * offset + 1\n if (this.getFirst() + totalCount >= imgs.length) return null\n\n return (\n \n )\n }\n render () {\n const { imgs, currImg, onClickThumbnail, offset, theme } = this.props\n\n const totalCount = 2 * offset + 1 // show $offset extra thumbnails on each side\n let thumbnails = []\n let baseOffset = 0\n if (imgs.length <= totalCount) {\n thumbnails = imgs\n } else { // Try to center current image in list\n baseOffset = this.getFirst()\n thumbnails = imgs.slice(baseOffset, baseOffset + totalCount)\n }\n\n return (\n
\n {this.renderArrowPrev(theme)}\n {thumbnails.map((img, idx) => (\n \n ))}\n {this.renderArrowNext(theme)}\n
\n )\n }\n}\n\nPaginatedThumbnails.propTypes = {\n theme: PropTypes.object,\n leftTitle: PropTypes.string,\n rightTitle: PropTypes.string,\n currImg: PropTypes.number,\n imgs: PropTypes.array,\n offset: PropTypes.number,\n onClickThumbnail: PropTypes.func.isRequired,\n}\n" }, { "path": "src/components/Portal.js", "content": "import React, { Component } from 'react'\nimport PropsTypes from 'prop-types'\nimport { CSSTransition, TransitionGroup } from 'react-transition-group'\nimport { render, unmountComponentAtNode } from 'react-dom'\n\n\nexport default class Portal extends Component {\n constructor() {\n super()\n this.portalElement = null\n }\n componentDidMount() {\n const div = document.createElement('div')\n document.body.appendChild(div)\n this.portalElement = div\n this.componentDidUpdate()\n }\n componentDidUpdate() {\n // Animate fade on mount/unmount\n const duration = 200\n const styles = `\n\t\t\t\t.fade-enter { opacity: 0.01; }\n\t\t\t\t.fade-enter.fade-enter-active { opacity: 1; transition: opacity ${duration}ms; }\n\t\t\t\t.fade-leave { opacity: 1; }\n\t\t\t\t.fade-leave.fade-leave-active { opacity: .01; transition: opacity ${duration}ms; }\n\t\t`\n\n render(\n
\n \n \n \n
{this.props.children}
\n \n \n
,\n this.portalElement\n )\n }\n componentWillUnmount() {\n unmountComponentAtNode(this.portalElement)\n document.body.removeChild(this.portalElement)\n }\n render() {\n return null\n }\n}\n\nPortal.propTypes = {\n children: PropsTypes.arrayOf(PropsTypes.any),\n}\n" }, { "path": "src/components/Spinner.js", "content": "import PropTypes from 'prop-types'\nimport React from 'react'\nimport { css, StyleSheet } from 'aphrodite/no-important'\n\nconst Spinner = props => {\n const classes = StyleSheet.create(styles(props))\n\n return (\n
\n
\n
\n
\n
\n )\n}\n\nSpinner.propTypes = {\n color: PropTypes.string,\n size: PropTypes.number,\n}\n\nconst bouncingKeyframes = (size) => ({\n '0%': {\n opacity: 1,\n transform: 'translateY(0)',\n },\n '100%': {\n opacity: .1,\n transform: `translateY(-${size}px)`,\n }\n})\n\nconst styles = ({ color, size }) => ({\n bouncingLoader: {\n display: 'flex',\n justifyContent: 'center',\n },\n child: {\n width: size,\n height: size,\n margin: `${3 * size}px ${ .2 * size}px`,\n background: color,\n borderRadius: '50%',\n animationName: bouncingKeyframes(size),\n animationDuration: '.6s',\n animationDirection: 'alternate',\n animationIterationCount: 'infinite',\n },\n child2: {\n animationDelay: '0.2s',\n },\n child3: {\n animationDelay: '0.4s',\n }\n})\n\nexport default Spinner\n" }, { "path": "src/components/Thumbnail.js", "content": "import PropTypes from 'prop-types'\nimport React from 'react'\nimport { css, StyleSheet } from 'aphrodite/no-important'\n\nimport defaults from '../theme'\nimport { deepMerge } from '../utils/util'\n\n\nfunction Thumbnail ({ index, src, thumbnail, active, onClick, theme }) {\n const url = thumbnail || src\n const classes = StyleSheet.create(deepMerge(defaultStyles, theme))\n\n return (\n {\n e.preventDefault()\n e.stopPropagation()\n onClick(index)\n }}\n style={{ backgroundImage: `url(\"${url}\")` }}\n />\n )\n}\n\nThumbnail.propTypes = {\n theme: PropTypes.object,\n active: PropTypes.bool,\n index: PropTypes.number,\n onClick: PropTypes.func.isRequired,\n src: PropTypes.string,\n thumbnail: PropTypes.string,\n}\n\nconst defaultStyles = {\n thumbnail: {\n backgroundPosition: 'center',\n backgroundSize: 'cover',\n borderRadius: 2,\n boxShadow: 'inset 0 0 0 1px hsla(0, 0%, 100%, .2)',\n cursor: 'pointer',\n display: 'inline-block',\n height: defaults.thumbnail.size,\n margin: defaults.thumbnail.gutter,\n overflow: 'hidden',\n width: defaults.thumbnail.size,\n },\n thumbnail__active: {\n boxShadow:`inset 0 0 0 2px ${defaults.thumbnail.activeBorderColor}`,\n }\n}\n\nexport default Thumbnail\n" }, { "path": "src/components/Thumbnails.js", "content": "import PropTypes from 'prop-types'\nimport React from 'react'\nimport { css, StyleSheet } from 'aphrodite/no-important'\nimport Thumbnail from './Thumbnail'\nimport defaults from '../theme'\n\nfunction Thumbnails ({ currImg, imgs, onClickThumbnail }) {\n return (\n
\n {imgs.map((img, idx) => {\n \n })}\n
\n )\n}\n\nThumbnails.propTypes = {\n currImg: PropTypes.number,\n imgs: PropTypes.array,\n onClickThumbnail: PropTypes.func.isRequired,\n}\n\nconst classes = StyleSheet.create({\n Thumbnails: {\n bottom: defaults.container.gutter.vertical,\n color: '#fff',\n height: defaults.thumbnail.height,\n left: defaults.container.gutter.horizontal,\n overflowX: 'scroll',\n overflowY: 'hidden',\n position: 'absolute',\n right: defaults.container.gutter.horizontal,\n textAlign: 'center',\n whiteSpace: 'nowrap',\n }\n})\n\nexport default Thumbnails\n" }, { "path": "src/icons/Close.js", "content": "export default (fill) => (\n\t`\n\t\t\n\t`\n);\n" }, { "path": "src/icons/arrow_left.js", "content": "export default (fill) => (\n `\n\t\t\n\t`\n)\n" }, { "path": "src/icons/arrow_right.js", "content": "export default (fill) => (\n `\n\t\t\n\t`\n);\n" }, { "path": "src/icons/close.js", "content": "export default (fill) => (\n\t`\n\t\t\n\t`\n);\n" }, { "path": "src/theme.js", "content": "// ===================\n// Theme\n// ===================\n\nconst theme = {}\n\n// container\ntheme.container = {\n background: 'rgba(0, 0, 0, .8)',\n gutter: {\n horizontal: 10,\n vertical: 10,\n },\n zIndex: 2001\n}\n\n// header\ntheme.header = {\n height: 40,\n}\ntheme.close = {\n fill: 'white'\n}\n\n// footer\ntheme.footer = {\n color: '#fff',\n count: {\n color: 'rgba(255, 255, 255, .75)',\n fontSize: '.85em'\n },\n height: 40,\n gutter: {\n horizontal: 0,\n vertical: 5,\n }\n}\n\n// thumbnails\ntheme.thumbnail = {\n activeBorderColor: '#fff',\n size: 50,\n gutter: 2,\n}\n\n// arrow\ntheme.arrow = {\n background: 'none',\n fill: '#fff',\n height: 120,\n}\n\n\nexport default theme\n" }, { "path": "src/utils/constant.js", "content": "// obj\nexport const OBJ_KEYS = Object.keys\n" }, { "path": "src/utils/util.js", "content": "export function deepMerge(source, target = {}) {\n const extended = Object.assign({}, target);\n\n Object.keys(source).forEach((key) => {\n if (typeof source[key] !== \"object\" || !source[key]) {\n extended[key] = source[key];\n } else {\n if (!target[key]) {\n extended[key] = source[key];\n } else {\n extended[key] = deepMerge(target[key], source[key]);\n }\n }\n });\n return extended;\n}\n// export function deepMerge(source, target = {}) {\n// // initialize with source styles\n// const styles = { ...source }\n\n// // massage in target styles\n// Object.keys(target).forEach(key => {\n// if (source[key]) {\n// styles[key] = (rsCss, props) => {\n// return target[key](source[key](rsCss, props), props)\n// }\n// } else {\n// styles[key] = target[key]\n// }\n// })\n\n// return styles\n// }\n\nexport const canUseDom = !!(\n typeof window !== \"undefined\" &&\n window.document &&\n window.document.createElement\n);\n\n/**\n * Bind multiple conponent methods:\n * @param {this} context\n * @param {Array} functions\n *\n * constructor() {\n * ...\n * bindFunctions.call(this, ['handleClick', 'handleOther'])\n * }\n */\nexport function bindFunctions(functions) {\n functions.forEach((f) => (this[f] = this[f].bind(this)));\n}\n" }, { "path": "webpack.config.js", "content": "const path = require(\"path\");\nconst HtmlWebpackPlugin = require(\"html-webpack-plugin\");\nconst MiniCssExtractPlugin = require(\"mini-css-extract-plugin\");\n\nmodule.exports = {\n mode: \"development\",\n context: path.resolve(__dirname, \"examples/src\"),\n entry: {\n app: \"./app.js\",\n app_CN: \"./app_CN.js\",\n common: [\"react-images-viewer\"],\n },\n output: {\n path: path.resolve(__dirname, \"examples/dist\"),\n filename: \"[name].js\",\n publicPath: \"/\",\n },\n devtool: \"inline-source-map\",\n devServer: {\n contentBase: path.resolve(__dirname, \"examples/src\"),\n host: \"0.0.0.0\",\n port: 8001,\n },\n module: {\n rules: [\n {\n test: /\\.js$/,\n exclude: [/node_modules/],\n use: [\n {\n loader: \"babel-loader\",\n options: { presets: [\"react\", \"env\"] },\n },\n ],\n },\n {\n test: /\\.less$/,\n use: [MiniCssExtractPlugin.loader, \"css-loader\", \"less-loader\"],\n },\n {\n test: /\\.html$/,\n use: [\n {\n loader: \"html-loader\",\n },\n ],\n },\n ],\n },\n resolve: {\n alias: {\n \"react-images-viewer\": path.resolve(__dirname, \"src/ImgsViewer\"),\n },\n },\n optimization: {\n splitChunks: {\n name: true,\n // filename: 'common.js',\n // minChunks: 2,\n cacheGroups: {\n common: {\n test: /[\\\\/]node_modules[\\\\/]/,\n name: \"common\",\n chunks: \"all\",\n },\n },\n },\n },\n plugins: [\n new HtmlWebpackPlugin({\n filename: \"index.html\",\n inject: false,\n template: path.resolve(__dirname, \"examples/src/index.html\"),\n }),\n new HtmlWebpackPlugin({\n filename: \"index_CN.html\",\n inject: false,\n template: path.resolve(__dirname, \"examples/src/index_CN.html\"),\n }),\n new MiniCssExtractPlugin({\n filename: \"example.css\",\n chunkFilename: \"example.css\",\n }),\n ],\n};\n" } ]