0ct0pu5/ente
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added the photoswipe react component locally

Browse source
This commit is contained in:
Abhinav-grd 2021-01-15 16:39:52 +05:30
parent 5d3f7af0fe
commit ab9a0bc21b
4 changed files with 196 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

175
src/components/PhotoSwipe/PhotoSwipe.js Normal file
View file

@ -0,0 +1,175 @@
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import Photoswipe from 'photoswipe';
import PhotoswipeUIDefault from 'photoswipe/dist/photoswipe-ui-default';
import classnames from 'classnames';
import events from './events';
import FavButton from 'components/FavButton';
import { addToFavorites } from 'services/collectionService';
class PhotoSwipe extends React.Component {
static propTypes = {
isOpen: PropTypes.bool.isRequired,
items: PropTypes.array.isRequired,
options: PropTypes.object,
onClose: PropTypes.func,
id: PropTypes.string,
className: PropTypes.string
};
static defaultProps = {
options: {},
onClose: () => {
},
id: '',
className: ''
};
state = {
isOpen: this.props.isOpen,
isClick: false,
};
componentDidMount = () => {
const { isOpen } = this.state;
if (isOpen) {
this.openPhotoSwipe(this.props);
}
};
componentWillReceiveProps = (nextProps) => {
const { isOpen } = this.state;
if (nextProps.isOpen) {
if (!isOpen) {
this.openPhotoSwipe(nextProps);
} else {
this.updateItems(nextProps.items);
}
} else if (isOpen) {
this.closePhotoSwipe();
}
};
componentWillUnmount = () => {
this.closePhotoSwipe();
};
openPhotoSwipe = (props) => {
const { items, options } = props;
const pswpElement = this.pswpElement;
this.photoSwipe = new Photoswipe(pswpElement, PhotoswipeUIDefault, items, options);
events.forEach((event) => {
const callback = props[event];
if (callback || event === 'destroy') {
const self = this;
this.photoSwipe.listen(event, function (...args) {
if (callback) {
args.unshift(this);
callback(...args);
}
if (event === 'destroy') {
self.handleClose();
}
});
}
});
this.setState({
isOpen: true,
}, () => {
this.photoSwipe.init();
});
};
updateItems = (items = []) => {
this.photoSwipe.items.length = 0;
items.forEach((item) => {
this.photoSwipe.items.push(item);
});
this.photoSwipe.invalidateCurrItems();
this.photoSwipe.updateSize(true);
};
closePhotoSwipe = () => {
if (!this.photoSwipe) {
return;
}
this.photoSwipe.close();
};
handleClose = () => {
const { onClose } = this.props;
this.setState({
isOpen: false
}, () => {
if (onClose) {
onClose();
}
});
};
render() {
const { id } = this.props;
let { className } = this.props;
className = classnames(['pswp', className]).trim();
return (
<div
id={id}
className={className}
tabIndex="-1"
role="dialog"
aria-hidden="true"
ref={(node) => {
this.pswpElement = node;
}}
>
<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
className="pswp__button pswp__button--share"
title="Share"
/>
<button
className="pswp__button pswp__button--fs"
title="Toggle fullscreen"
/>
<button className="pswp__button pswp__button--zoom" title="Zoom in/out" />
<FavButton className="pswp__button" isClick={this.state.isClick} onClick={() => { this.setState({ isClick: !this.state.isClick }); addToFavorites(this.photoSwipe.currItem) }} />
<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
className="pswp__button pswp__button--arrow--left"
title="Previous (arrow left)"
/>
<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>
);
}
}
export default PhotoSwipe;

19
src/components/PhotoSwipe/events.js Normal file
View file

@ -0,0 +1,19 @@
export default [
'beforeChange',
'afterChange',
'imageLoadComplete',
'resize',
'gettingData',
'mouseUsed',
'initialZoomIn',
'initialZoomInEnd',
'initialZoomOut',
'initialZoomOutEnd',
'parseVerticalMargin',
'close',
'unbindEvents',
'destroy',
'updateScrollOffset',
'preventDragEvent',
'shareLinkClick'
];

2
src/pages/gallery/index.tsx
View file

@ -12,7 +12,7 @@ import { getData, LS_KEYS } from 'utils/storage/localStorage';
import PreviewCard from './components/PreviewCard';
import { getActualKey } from 'utils/common/key';
import styled from 'styled-components';
import { PhotoSwipe } from 'react-photoswipe';
import PhotoSwipe from 'components/PhotoSwipe/PhotoSwipe';
import { Options } from 'photoswipe';
import AutoSizer from 'react-virtualized-auto-sizer';
import { VariableSizeList as List } from 'react-window';

2
tsconfig.json
View file

@ -25,7 +25,7 @@
"next-env.d.ts",
"**/*.ts",
"**/*.tsx", "src/pages/index.tsx"
],
, "src/components/PhotoSwipe/PhotoSwipe.js", "src/components/PhotoSwipe/events.js" ],
"exclude": [
"node_modules"
]