chayns-components
Version:
A set of beautiful React components for developing chayns® applications.
118 lines (117 loc) • 4.95 kB
JavaScript
/* eslint-disable no-nested-ternary,react/forbid-prop-types */
import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import { useTransitionState } from 'react-transition-state';
import { mapStatusToClass } from '../../../utils/mapStatusToClass';
import Receiver from './Receiver';
const ReceiverSearchPopup = _ref => {
let {
updateReceiverSearchString,
updateChosenReceivers,
chosenReceivers,
foundReceivers,
showIdInPopup,
onlyPersons,
isLocation,
onlySites,
position,
width,
show
} = _ref;
const locationResultState = foundReceivers.locations.state;
const groupResultState = foundReceivers.groups.state;
const userResultState = foundReceivers.users.state;
const tooManyResultsError = /*#__PURE__*/React.createElement("div", {
className: "popup-item error-message"
}, "Zu viele Ergebnisse gefunden");
const noMatchError = /*#__PURE__*/React.createElement("div", {
className: "popup-item error-message"
}, "Keine passenden Ergebnisse gefunden");
const locations = foundReceivers.locations.values.map(l => /*#__PURE__*/React.createElement(Receiver, {
imgUrl: `https://sub60.tobit.com/l/${l.locationID}?size=30`,
name: l.appstoreName || l.showName,
updateReceiverSearchString: updateReceiverSearchString,
updateChosenReceivers: updateChosenReceivers,
key: `locationId_${l.locationID}`,
chosenReceivers: chosenReceivers,
showIdInPopup: showIdInPopup,
locationId: l.locationID,
siteId: l.siteID
}));
const users = foundReceivers.users.values.map(u => /*#__PURE__*/React.createElement(Receiver, {
imgUrl: `https://sub60.tobit.com/u/${u.userId}?size=30`,
updateReceiverSearchString: updateReceiverSearchString,
updateChosenReceivers: updateChosenReceivers,
chosenReceivers: chosenReceivers,
showIdInPopup: showIdInPopup,
key: `userId_${u.userId}`,
personId: u.personId,
userId: u.userId,
name: u.name
}));
const groups = isLocation && foundReceivers.groups.values.map(g => /*#__PURE__*/React.createElement(Receiver, {
updateReceiverSearchString: updateReceiverSearchString,
updateChosenReceivers: updateChosenReceivers,
chosenReceivers: chosenReceivers,
key: `groupId_${g.groupId}`,
includedUsers: g.userIds,
groupId: g.groupId,
name: g.showName
}));
const receiverPopupStyles = {
top: position === null || position === void 0 ? void 0 : position.top,
left: position === null || position === void 0 ? void 0 : position.left,
width
};
const showPopup = show && (locationResultState !== 3 || userResultState !== 3 || groupResultState !== 3 && isLocation);
const [{
status,
isMounted
}, toggle] = useTransitionState({
timeout: 300,
mountOnEnter: true,
unmountOnExit: true,
preEnter: true
});
useEffect(() => {
toggle(showPopup);
}, [showPopup, toggle]);
if (!isMounted) return null;
return /*#__PURE__*/React.createElement("div", {
className: `receiver-popup ${mapStatusToClass(status, 'swipe-up')}`,
style: receiverPopupStyles
}, !onlyPersons && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
className: "group-headline popup-item"
}, "Sites"), locations, locationResultState > 0 && (locationResultState === 2 ? tooManyResultsError : noMatchError), locationResultState === 0 && /*#__PURE__*/React.createElement("div", {
className: "popup-item"
})), !onlySites && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
className: "group-headline popup-item"
}, "Personen"), users, userResultState > 0 && (userResultState === 2 ? tooManyResultsError : noMatchError), userResultState === 0 && /*#__PURE__*/React.createElement("div", {
className: "popup-item"
})), isLocation && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
className: "group-headline popup-item"
}, "Gruppen"), groups, groupResultState > 0 && (groupResultState === 2 ? tooManyResultsError : noMatchError), groupResultState === 0 && /*#__PURE__*/React.createElement("div", {
className: "popup-item"
})));
};
ReceiverSearchPopup.propTypes = {
updateReceiverSearchString: PropTypes.func.isRequired,
updateChosenReceivers: PropTypes.func.isRequired,
chosenReceivers: PropTypes.array.isRequired,
foundReceivers: PropTypes.object.isRequired,
isLocation: PropTypes.bool.isRequired,
position: PropTypes.object.isRequired,
width: PropTypes.number.isRequired,
show: PropTypes.bool.isRequired,
showIdInPopup: PropTypes.bool,
onlyPersons: PropTypes.bool,
onlySites: PropTypes.bool
};
ReceiverSearchPopup.defaultProps = {
showIdInPopup: false,
onlyPersons: false,
onlySites: false
};
ReceiverSearchPopup.displayName = 'ReceiverSearchPopup';
export default ReceiverSearchPopup;
//# sourceMappingURL=ReceiverSearchPopup.js.map