profile-pics
Version:
87 lines • 4.17 kB
JavaScript
import React, { useContext } from 'react';
import style from './ProfilePicturesClickthrough.module.css';
import { linkedComponent } from '../package.js';
import { Person } from '../shapes/Person.js';
import { cl } from 'lincd/utils/ClassNames';
import { DescreteProgressBar } from './DescreteProgressBar.js';
import { asset } from 'lincd/utils/LinkedFileStorage';
export const CurrentPhotoContext = React.createContext(null);
const query = Person.query((person) => {
return {
profilePicture: person.profilePicture.cropped.contentUrl,
profilePicture2: person.profilePicture2.cropped.contentUrl,
profilePicture3: person.profilePicture3.cropped.contentUrl,
profilePicture4: person.profilePicture4.cropped.contentUrl,
profilePicture5: person.profilePicture5.cropped.contentUrl,
profilePicture6: person.profilePicture6.cropped.contentUrl,
};
});
export const ProfilePicturesClickthrough = linkedComponent(query, ({ source, profilePicture, profilePicture2, profilePicture3, profilePicture4, profilePicture5, profilePicture6, className, clickThroughPhotos = true, onClick, }) => {
let tapLeft = React.useRef(null);
let tapRight = React.useRef(null);
//this component can either receive current photo from context if its used
//(this allows a parent component to know about the current photo shown, required for example for drag & drop previews)
let context = useContext(CurrentPhotoContext);
//otherwise it falls back to managing its own state
let [currentPhotoState, setCurrentPhotoState] = React.useState((context === null || context === void 0 ? void 0 : context.currentPhoto) || 1);
//here we combine both into 2 variables
let currentPhoto = (context === null || context === void 0 ? void 0 : context.currentPhoto) || currentPhotoState;
let setCurrentPhoto = (context === null || context === void 0 ? void 0 : context.setCurrentPhoto) || setCurrentPhotoState;
let person = source;
let numPictures = profilePicture6
? 6
: profilePicture5
? 5
: profilePicture4
? 4
: profilePicture3
? 3
: profilePicture2
? 2
: 1;
const clickAnywhere = (e) => {
//check if the user clicked on tap left or tap right
//if not then call onClick()
if (onClick &&
!tapLeft.current.contains(e.target) &&
!tapRight.current.contains(e.target)) {
onClick(e);
}
};
const prevPhoto = (e) => {
if (currentPhoto > 1) {
setCurrentPhoto(currentPhoto - 1);
}
else {
setCurrentPhoto(numPictures);
}
e.preventDefault();
};
const nextPhoto = (e) => {
if (currentPhoto < numPictures) {
setCurrentPhoto(currentPhoto + 1);
}
else {
setCurrentPhoto(1);
}
e.preventDefault();
};
let currentProfilePicture;
if (currentPhoto === 1) {
currentProfilePicture = profilePicture;
}
else {
currentProfilePicture = eval('profilePicture' + currentPhoto);
}
return (React.createElement("div", { className: cl(style.ProfilePicturesClickthrough, className) },
React.createElement("img", { src: currentProfilePicture || asset('/images/no-profile-picture.png'), alt: person.givenName, onError: (e) => {
e.currentTarget.src = asset('/images/profile-not-found.png');
}, onClick: clickAnywhere }),
clickThroughPhotos && numPictures > 1 && (React.createElement(React.Fragment, null,
React.createElement("div", { id: "tapLeft", className: style.tapLeft, onClick: prevPhoto, ref: tapLeft }),
React.createElement("div", { id: "tapRight", className: style.tapRight, onClick: nextPhoto, ref: tapRight }),
React.createElement(DescreteProgressBar, { currentValue: currentPhoto, maxValue: numPictures })))));
});
//register all components in this file
// registerPackageModule(module);
//# sourceMappingURL=ProfilePicturesClickthrough.js.map