diff --git a/.babelrc b/.babelrc new file mode 100644 index 000000000..18151f1f8 --- /dev/null +++ b/.babelrc @@ -0,0 +1,3 @@ +{ + "presets": ["@babel/preset-env", "@babel/preset-react"] +} \ No newline at end of file diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 000000000..91a196c94 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,8 @@ +root = true + +[*] +indent_style = space +indent_size = 2 +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = false \ No newline at end of file diff --git a/.eslintrc b/.eslintrc new file mode 100644 index 000000000..0a36149f5 --- /dev/null +++ b/.eslintrc @@ -0,0 +1,22 @@ +{ + "extends": [ + "airbnb", + "prettier", + "plugin:prettier/recommended" + ], + "plugins": [ + "prettier" + ], + "env": { + "browser": true, + "jest": true + }, + "rules": { + "prettier/prettier": ["error"], + "semi": ["error", "never"], + "no-plusplus": "off", + "import/no-unresolved": "off", + "react/jsx-filename-extension": "off", + "react/forbid-prop-types": "off" + } +} \ No newline at end of file diff --git a/.gitignore b/.gitignore new file mode 100644 index 000000000..76add878f --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +node_modules +dist \ No newline at end of file diff --git a/.lintstagedrc b/.lintstagedrc new file mode 100644 index 000000000..32001a74c --- /dev/null +++ b/.lintstagedrc @@ -0,0 +1,3 @@ +{ + "*.js": ["prettier --write", "eslint --fix", "git add"] +} \ No newline at end of file diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 000000000..9027e0cdb --- /dev/null +++ b/.prettierrc @@ -0,0 +1,6 @@ +{ + "trailingComma": "all", + "tabWidth": 2, + "semi": false, + "singleQuote": true +} \ No newline at end of file diff --git a/LICENSE b/LICENSE new file mode 100644 index 000000000..012a6fa45 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2019 dromru + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/package.json b/package.json new file mode 100644 index 000000000..61e581d03 --- /dev/null +++ b/package.json @@ -0,0 +1,50 @@ +{ + "name": "react-photoswipe-gallery", + "version": "0.0.5", + "description": "WIP PhotoSwipe wrapper for React", + "main": "dist/index.js", + "files": [ + "dist/**/*" + ], + "keywords": [ + "photoswipe", + "react", + "gallery" + ], + "repository": "https://github.com/irudoy/react-photoswipe-gallery.git", + "license": "MIT", + "scripts": { + "start": "rimraf dist && babel -s -w -d dist src", + "prepublish": "rimraf dist && babel -s -d dist src", + "lint": "eslint", + "prettify": "prettier" + }, + "devDependencies": { + "@babel/cli": "^7.4.3", + "@babel/core": "^7.4.3", + "@babel/preset-env": "^7.4.3", + "@babel/preset-react": "^7.0.0", + "eslint": "5.3.0", + "eslint-config-airbnb": "17.1.0", + "eslint-config-prettier": "^4.1.0", + "eslint-plugin-import": "^2.14.0", + "eslint-plugin-jsx-a11y": "^6.1.1", + "eslint-plugin-prettier": "^3.0.1", + "eslint-plugin-react": "^7.11.0", + "husky": "^1.3.1", + "lint-staged": "^8.1.5", + "prettier": "^1.17.0", + "rimraf": "^2.6.3" + }, + "peerDependencies": { + "photoswipe": ">= 4.1.0", + "prop-types": ">= 15.7.0", + "react": ">= 16.8.0" + }, + "author": "Ivan Rudoy ", + "husky": { + "hooks": { + "pre-commit": "lint-staged" + } + } +} diff --git a/readme.md b/readme.md new file mode 100644 index 000000000..a523ab773 --- /dev/null +++ b/readme.md @@ -0,0 +1,38 @@ +# react-photoswipe-gallery + +```javascript +import { Gallery, Item, PhotoswipeLayoutDefault } from 'react-photoswipe-gallery' +import 'photoswipe/dist/photoswipe.css' +import 'photoswipe/dist/default-skin/default-skin.css' + +const items = [ + { + large: 'https://placekitten.com/1024/768?image=1', + thumb: 'https://placekitten.com/80/60?image=1', + w: 1024, + h: 768, + }, + { + large: 'https://placekitten.com/1024/768?image=2', + thumb: 'https://placekitten.com/80/60?image=2', + w: 1024, + h: 768, + }, + { + large: 'https://placekitten.com/1024/768?image=3', + thumb: 'https://placekitten.com/80/60?image=3', + w: 1024, + h: 768, + }, +] + + + {items.map(({ large, thumb, w, h }, i) => ( + + {({ open, thumbRef }) => ( + + )} + + ))} + +``` \ No newline at end of file diff --git a/src/PhotoswipeLayout.js b/src/PhotoswipeLayout.js new file mode 100644 index 000000000..daaf5c621 --- /dev/null +++ b/src/PhotoswipeLayout.js @@ -0,0 +1,69 @@ +import React from 'react' + +export default React.forwardRef((props, ref) => ( +