initial implementation

.babelrc

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

.editorconfig

@@ -0,0 +1,8 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = false

.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"
+  }
+}

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+dist

.lintstagedrc

@@ -0,0 +1,3 @@
+{
+  "*.js": ["prettier --write", "eslint --fix", "git add"]
+}

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "trailingComma": "all",
+  "tabWidth": 2,
+  "semi": false,
+  "singleQuote": true
+}

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.

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 <[email protected]>",
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  }
+}

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,
+  },
+]
+
+<Gallery layout={PhotoswipeLayoutDefault}>
+  {items.map(({ large, thumb, w, h }, i) => (
+    <Item width={w} height={h} full={large} thumb={thumb} key={large} title={`Kitten ${i}`}>
+      {({ open, thumbRef }) => (
+        <img onClick={open} src={src} ref={thumbRef} />
+      )}
+    </Item>
+  ))}
+</Gallery>
+```

src/PhotoswipeLayout.js

@@ -0,0 +1,69 @@
+import React from 'react'
+
+export default React.forwardRef((props, ref) => (
+  <div
+    className="pswp"
+    tabIndex="-1"
+    role="dialog"
+    aria-hidden="true"
+    {...props}
+    ref={ref}
+  >
+    <div className="pswp__bg" />
+    <div className="pswp__scroll-wrap">
+      <div className="pswp__container">
+        <div className="pswp__item" />
+        <div className="pswp__item" />
+        <div className="pswp__item" />
+      </div>
+      <div className="pswp__ui pswp__ui--hidden">
+        <div className="pswp__top-bar">
+          <div className="pswp__counter" />
+          <button
+            type="button"
+            className="pswp__button pswp__button--close"
+            title="Close (Esc)"
+          />
+          <button
+            type="button"
+            className="pswp__button pswp__button--share"
+            title="Share"
+          />
+          <button
+            type="button"
+            className="pswp__button pswp__button--fs"
+            title="Toggle fullscreen"
+          />
+          <button
+            type="button"
+            className="pswp__button pswp__button--zoom"
+            title="Zoom in/out"
+          />
+          <div className="pswp__preloader">
+            <div className="pswp__preloader__icn">
+              <div className="pswp__preloader__cut">
+                <div className="pswp__preloader__donut" />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
+          <div className="pswp__share-tooltip" />
+        </div>
+        <button
+          type="button"
+          className="pswp__button pswp__button--arrow--left"
+          title="Previous (arrow left)"
+        />
+        <button
+          type="button"
+          className="pswp__button pswp__button--arrow--right"
+          title="Next (arrow right)"
+        />
+        <div className="pswp__caption">
+          <div className="pswp__caption__center" />
+        </div>
+      </div>
+    </div>
+  </div>
+))

src/index.js

@@ -0,0 +1,114 @@
+import PhotoSwipe from 'photoswipe'
+import PhotoswipeUIDefault from 'photoswipe/dist/photoswipe-ui-default'
+import React, { useRef, useCallback, useContext, useLayoutEffect } from 'react'
+import PropTypes from 'prop-types'
+
+export { default as PhotoswipeLayoutDefault } from './PhotoswipeLayout'
+
+const GalleryContext = React.createContext()
+
+const getElBounds = el => {
+  const pageXScroll = window.pageXOffset || document.documentElement.scrollLeft
+  const pageYScroll = window.pageYOffset || document.documentElement.scrollTop
+  const rect = el.getBoundingClientRect()
+  return {
+    x: rect.left + pageXScroll,
+    y: rect.top + pageYScroll,
+    w: rect.width,
+  }
+}
+
+export const Gallery = ({ children, layout: Layout, ui, options }) => {
+  const tplRef = useRef()
+  const items = useRef(new Map())
+
+  const handleClick = useCallback(ref => {
+    const normalized = []
+    let index = 0
+    let i = 0
+    // eslint-disable-next-line no-restricted-syntax
+    for (const [
+      r,
+      { thumbRef, width, height, title, full, thumb },
+    ] of items.current) {
+      if (r === ref) {
+        index = i
+      }
+      normalized.push({
+        ...(title ? { title } : {}),
+        w: width,
+        h: height,
+        src: full,
+        msrc: thumb,
+        thumbRef: thumbRef.current,
+      })
+      i++
+    }
+    new PhotoSwipe(tplRef.current, ui, normalized, {
+      ...(options || {}),
+      index,
+      getThumbBoundsFn: thumbIndex =>
+        normalized[thumbIndex].thumbRef &&
+        getElBounds(normalized[thumbIndex].thumbRef),
+    }).init()
+  }, [])
+
+  const remove = useCallback(ref => {
+    items.current.delete(ref)
+  }, [])
+
+  const update = useCallback((ref, data) => {
+    items.current.set(ref, data)
+  }, [])
+
+  return (
+    <GalleryContext.Provider value={{ remove, update, handleClick }}>
+      {children}
+      <Layout ref={tplRef} />
+      {/* TODO: shared layout */}
+    </GalleryContext.Provider>
+  )
+}
+
+export const Item = ({ children, ...restProps }) => {
+  const ref = useRef()
+  const thumbRef = useRef()
+  const { remove, update, handleClick } = useContext(GalleryContext)
+  const open = useCallback(() => handleClick(ref), [handleClick])
+
+  useLayoutEffect(() => {
+    remove(ref)
+    update(ref, { thumbRef, ...restProps })
+    return () => remove(ref)
+  })
+
+  return children({ open, thumbRef })
+}
+
+Gallery.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node,
+  ]).isRequired,
+  layout: PropTypes.any.isRequired,
+  ui: PropTypes.func,
+  options: PropTypes.object,
+}
+
+Gallery.defaultProps = {
+  ui: PhotoswipeUIDefault,
+  options: null,
+}
+
+Item.propTypes = {
+  full: PropTypes.string.isRequired,
+  thumb: PropTypes.string,
+  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  title: PropTypes.string,
+}
+
+Item.defaultProps = {
+  thumb: null,
+  title: null,
+}