updated photoswipe gallery to functional component
This commit is contained in:
Abhinav-grd
parent
49410a0eca
commit
6ea5c4ec2e
1 changed files with 128 additions and 139 deletions
|
|
@ -1,5 +1,4 @@
|
|||
import React, { useState } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import Photoswipe from 'photoswipe';
|
||||
import PhotoswipeUIDefault from 'photoswipe/dist/photoswipe-ui-default';
|
||||
import classnames from 'classnames';
|
||||
|
|
@ -16,191 +15,181 @@ interface Iprops {
|
|||
gettingData?: (instance: any, index: number, item: file) => void;
|
||||
id?: string;
|
||||
className?: string;
|
||||
favItemIds: Set<number>
|
||||
setFavItemIds: React.Dispatch<React.SetStateAction<Set<number>>>
|
||||
favItemIds: Set<number>;
|
||||
setFavItemIds: (favItemIds: Set<number>) => void;
|
||||
refetchData: () => void;
|
||||
};
|
||||
interface Istates {
|
||||
isOpen: boolean;
|
||||
favItemIds: Set<number>
|
||||
}
|
||||
class PhotoSwipe extends React.Component<Iprops, Istates> {
|
||||
private pswpElement: any = null;
|
||||
private photoSwipe: any = null;
|
||||
state = {
|
||||
isOpen: this.props.isOpen,
|
||||
favItemIds: this.props.favItemIds,
|
||||
};
|
||||
|
||||
componentDidMount = () => {
|
||||
const { isOpen } = this.state;
|
||||
function PhotoSwipe(props: Iprops) {
|
||||
|
||||
let pswpElement;
|
||||
const [photoSwipe, setPhotoSwipe] = useState<Photoswipe<any>>();
|
||||
|
||||
const { isOpen } = props;
|
||||
const [isFav, setIsFav] = useState(false)
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
if (!pswpElement)
|
||||
return;
|
||||
if (isOpen)
|
||||
openPhotoSwipe();
|
||||
|
||||
}, [pswpElement]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!pswpElement)
|
||||
return;
|
||||
if (isOpen) {
|
||||
this.openPhotoSwipe(this.props);
|
||||
openPhotoSwipe();
|
||||
}
|
||||
};
|
||||
|
||||
componentWillReceiveProps = (nextProps) => {
|
||||
const { isOpen } = this.state;
|
||||
if (nextProps.isOpen) {
|
||||
if (!isOpen) {
|
||||
this.openPhotoSwipe(nextProps);
|
||||
} else {
|
||||
this.updateItems(nextProps.items);
|
||||
}
|
||||
} else if (isOpen) {
|
||||
this.closePhotoSwipe();
|
||||
if (!isOpen) {
|
||||
closePhotoSwipe();
|
||||
}
|
||||
};
|
||||
return () => {
|
||||
closePhotoSwipe();
|
||||
}
|
||||
}, [isOpen]);
|
||||
|
||||
componentWillUnmount = () => {
|
||||
this.closePhotoSwipe();
|
||||
};
|
||||
function updateFavButton() {
|
||||
console.log(this.currItem.id, props.favItemIds)
|
||||
setIsFav(isInFav(this?.currItem));
|
||||
}
|
||||
|
||||
openPhotoSwipe = (props) => {
|
||||
|
||||
const openPhotoSwipe = () => {
|
||||
const { items, options } = props;
|
||||
const pswpElement = this.pswpElement;
|
||||
this.photoSwipe = new Photoswipe(pswpElement, PhotoswipeUIDefault, items, options);
|
||||
let 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) {
|
||||
photoSwipe.listen(event, function (...args) {
|
||||
if (callback) {
|
||||
args.unshift(this);
|
||||
callback(...args);
|
||||
}
|
||||
if (event === 'destroy') {
|
||||
self.handleClose();
|
||||
handleClose();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
this.setState({
|
||||
isOpen: true,
|
||||
}, () => {
|
||||
this.photoSwipe.init();
|
||||
});
|
||||
photoSwipe.listen('beforeChange', updateFavButton);
|
||||
photoSwipe.init();
|
||||
setPhotoSwipe(photoSwipe);
|
||||
|
||||
};
|
||||
|
||||
updateItems = (items = []) => {
|
||||
this.photoSwipe.items.length = 0;
|
||||
const updateItems = (items = []) => {
|
||||
photoSwipe.items = [];
|
||||
items.forEach((item) => {
|
||||
this.photoSwipe.items.push(item);
|
||||
photoSwipe.items.push(item);
|
||||
});
|
||||
this.photoSwipe.invalidateCurrItems();
|
||||
this.photoSwipe.updateSize(true);
|
||||
photoSwipe.invalidateCurrItems();
|
||||
photoSwipe.updateSize(true);
|
||||
};
|
||||
|
||||
closePhotoSwipe = () => {
|
||||
if (!this.photoSwipe) {
|
||||
return;
|
||||
const closePhotoSwipe = () => {
|
||||
if (photoSwipe)
|
||||
photoSwipe.close();
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
const { onClose } = props;
|
||||
if (onClose) {
|
||||
onClose();
|
||||
}
|
||||
this.photoSwipe.close();
|
||||
};
|
||||
|
||||
handleClose = () => {
|
||||
const { onClose } = this.props;
|
||||
this.setState({
|
||||
isOpen: false
|
||||
}, () => {
|
||||
if (onClose) {
|
||||
onClose();
|
||||
}
|
||||
});
|
||||
};
|
||||
isInFav = (file) => {
|
||||
const { favItemIds } = this.state;
|
||||
const isInFav = (file) => {
|
||||
const { favItemIds } = props;
|
||||
if (favItemIds && file) {
|
||||
return favItemIds.has(file.id);
|
||||
}
|
||||
else
|
||||
return false;
|
||||
}
|
||||
onFavClick = (file) => {
|
||||
const { setFavItemIds } = this.props;
|
||||
const { favItemIds } = this.state;
|
||||
|
||||
if (!favItemIds || !file)
|
||||
return;
|
||||
if (!this.isInFav(file)) {
|
||||
const onFavClick = (file) => {
|
||||
const { favItemIds, refetchData, setFavItemIds } = props;
|
||||
if (!isInFav(file)) {
|
||||
favItemIds.add(file.id);
|
||||
setFavItemIds(favItemIds);
|
||||
console.log("added to Favorites");
|
||||
this.setState(() => ({ favItemIds }));
|
||||
|
||||
setIsFav(true);
|
||||
setFavItemIds(favItemIds);
|
||||
}
|
||||
else {
|
||||
favItemIds.delete(file.id);
|
||||
setFavItemIds(favItemIds);
|
||||
this.setState(() => ({ favItemIds }));
|
||||
console.log("removed from Favorites");
|
||||
setIsFav(false);
|
||||
setFavItemIds(favItemIds);
|
||||
|
||||
}
|
||||
}
|
||||
const { id } = props;
|
||||
let { className } = props;
|
||||
className = classnames(['pswp', className]).trim();
|
||||
return (
|
||||
<div
|
||||
id={id}
|
||||
className={className}
|
||||
tabIndex={Number("-1")}
|
||||
role="dialog"
|
||||
aria-hidden="true"
|
||||
ref={(node) => {
|
||||
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" />
|
||||
|
||||
render() {
|
||||
const { id } = this.props;
|
||||
let { className } = this.props;
|
||||
className = classnames(['pswp', className]).trim();
|
||||
return (
|
||||
<div
|
||||
id={id}
|
||||
className={className}
|
||||
tabIndex={Number("-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--close"
|
||||
title="Share"
|
||||
/>
|
||||
<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 isClick={this.isInFav(this.photoSwipe?.currItem)} onClick={() => { console.log("dd"); this.onFavClick(this.photoSwipe?.currItem) }} />
|
||||
<div className="pswp__preloader">
|
||||
<div className="pswp__preloader__icn">
|
||||
<div className="pswp__preloader__cut">
|
||||
<div className="pswp__preloader__donut" />
|
||||
</div>
|
||||
<button
|
||||
className="pswp__button pswp__button--close"
|
||||
title="Share"
|
||||
/>
|
||||
<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 isClick={isFav} onClick={() => { onFavClick(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 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 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;
|
||||
Loading…
Add table
Reference in a new issue