@chayns-components/core
Version:
A set of beautiful React components for developing your own applications with chayns.
110 lines • 3.76 kB
JavaScript
import { getSite } from 'chayns-api';
import React, { useCallback, useRef } from 'react';
import { SHAREPROVIDER } from '../../constants/sharingBar';
import { getIsTouch } from '../../utils/environment';
import { copyToClipboard, shareWithApp, shareWithUrl } from '../../utils/sharingBar';
import ContextMenu from '../context-menu/ContextMenu';
import Icon from '../icon/Icon';
import { StyledSharingBar, StyledSharingBarIconWrapper, StyledSharingBarText } from './SharingBar.styles';
const SharingBar = _ref => {
let {
label,
link,
popupAlignment,
container
} = _ref;
const contextMenuRef = useRef(null);
const handleImageDownload = () => {
shareWithUrl(
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
SHAREPROVIDER[5].url.replace('{url}', encodeURIComponent(link)).replace('{linkText}', 'Teilen').replace('{color}', getSite().color.replace('#', '')));
};
const handleShare = key => {
contextMenuRef.current?.hide();
const isTouch = getIsTouch();
switch (key) {
case 'whatsapp':
shareWithUrl(
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
SHAREPROVIDER[0].url.replace('{url}', encodeURIComponent(`${link}`.trim())));
break;
case 'facebook':
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
shareWithUrl(SHAREPROVIDER[3].url.replace('{url}', encodeURIComponent(link)));
break;
case 'twitter':
shareWithUrl(
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
SHAREPROVIDER[4].url.replace('{url}', encodeURIComponent(link)).replace('{linkText}', ''));
break;
case 'mail':
if (isTouch) {
shareWithApp(`${link}`.trim());
} else {
shareWithUrl(
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
SHAREPROVIDER[2].url.replace('{url}', encodeURIComponent(`${link}`.trim())));
}
break;
case 'copy':
copyToClipboard(link);
break;
default:
break;
}
};
const contextMenuItems = [{
icons: ['fa fa-copy'],
key: 'copy',
onClick: () => handleShare('copy'),
text: 'Zwischenablage'
}, {
icons: ['fa-solid fa-brands fa-whatsapp'],
key: 'whatsapp',
onClick: () => handleShare('whatsapp'),
text: 'Whatsapp'
}, {
icons: ['fa-solid fa-brands fa-facebook-f'],
key: 'facebook',
onClick: () => handleShare('facebook'),
text: 'Facebook'
}, {
icons: ['fa-solid fa-brands fa-x-twitter'],
key: 'twitter',
onClick: () => handleShare('twitter'),
text: 'X'
}, {
icons: ['fa fa-envelope'],
key: 'mail',
onClick: () => handleShare('mail'),
text: 'Mail'
}, {
icons: ['fa fa-qrcode'],
key: 'callingCode',
onClick: handleImageDownload,
text: 'Calling Code herunterladen'
}];
const handleSharingBarClick = useCallback(event => {
event.preventDefault();
event.stopPropagation();
contextMenuRef.current?.show();
}, []);
return /*#__PURE__*/React.createElement(StyledSharingBar, {
onClick: handleSharingBarClick
}, /*#__PURE__*/React.createElement(StyledSharingBarIconWrapper, null, /*#__PURE__*/React.createElement(Icon, {
icons: ['fa-solid fa-share-nodes']
})), /*#__PURE__*/React.createElement(ContextMenu, {
items: contextMenuItems,
ref: contextMenuRef,
alignment: popupAlignment,
container: container
}, null), /*#__PURE__*/React.createElement(StyledSharingBarText, null, label));
};
SharingBar.displayName = 'SharingBar';
export default SharingBar;
//# sourceMappingURL=SharingBar.js.map