profile-pics
Version:
88 lines • 4.79 kB
JavaScript
import React, { useContext } from 'react';
import style from './ProfilePicturesClickthrough.module.scss';
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) => {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
return {
profilePicture: (_b = (_a = person.profilePicture) === null || _a === void 0 ? void 0 : _a.cropped) === null || _b === void 0 ? void 0 : _b.contentUrl,
profilePicture2: (_d = (_c = person.profilePicture2) === null || _c === void 0 ? void 0 : _c.cropped) === null || _d === void 0 ? void 0 : _d.contentUrl,
profilePicture3: (_f = (_e = person.profilePicture3) === null || _e === void 0 ? void 0 : _e.cropped) === null || _f === void 0 ? void 0 : _f.contentUrl,
profilePicture4: (_h = (_g = person.profilePicture4) === null || _g === void 0 ? void 0 : _g.cropped) === null || _h === void 0 ? void 0 : _h.contentUrl,
profilePicture5: (_k = (_j = person.profilePicture5) === null || _j === void 0 ? void 0 : _j.cropped) === null || _k === void 0 ? void 0 : _k.contentUrl,
profilePicture6: (_m = (_l = person.profilePicture6) === null || _l === void 0 ? void 0 : _l.cropped) === null || _m === void 0 ? void 0 : _m.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