chayns-components
Version:
A set of beautiful React components for developing chayns® applications.
121 lines (118 loc) • 3.56 kB
JavaScript
/**
* @component
*/
import classNames from 'clsx';
import PropTypes from 'prop-types';
import React, { useEffect, useState } from 'react';
import ContextMenu from '../../react-chayns-contextmenu/component/ContextMenu';
import Icon from '../../react-chayns-icon/component/Icon';
import share from './sharingActions';
import "./sharingBar.css";
import { getAvailableShareProviders, getDefaultShareLink } from './sharingHelper';
import TextString from '../../react-chayns-textstring/component/TextString';
/**
* A context menu for sharing a link and some text on various platforms.
*/
const SharingBar = _ref => {
let {
link: linkProp,
linkText = '',
className,
stopPropagation = false,
style,
children
} = _ref;
const [sharingProvider, setSharingProvider] = useState([]);
const [textStringsLoaded, setTextStringsLoaded] = useState(false);
useEffect(() => {
getAvailableShareProviders().then(provider => {
setSharingProvider(provider.filter(item => item.available));
});
if (!children) {
TextString.loadLibrary('ChaynsComponents').then(() => {
setTextStringsLoaded(true);
});
}
}, [children]);
const mobileShare = sharingProvider.find(app => app.id === 10 || app.id === 11);
let link = linkProp;
if (!link) {
link = getDefaultShareLink();
}
if (!children && !textStringsLoaded) {
return null;
}
const indicator = children || [/*#__PURE__*/React.createElement(Icon, {
key: "icon",
icon: "fal fa-share-alt",
className: "sharing-bar__icon"
}), /*#__PURE__*/React.createElement(TextString, {
key: "textstring",
stringName: "txt_chayns_components_sharingbar_share"
}, /*#__PURE__*/React.createElement("span", {
className: "sharing-bar__text"
}))];
if (mobileShare) {
const onClick = e => {
share(mobileShare, link, linkText);
if (stopPropagation) e.stopPropagation();
};
return /*#__PURE__*/React.createElement("div", {
className: classNames('sharing-bar', className),
style: style,
onClick: onClick
}, indicator);
}
const sharingItems = [];
sharingProvider.filter(item => item.available).forEach(x => {
sharingItems.push({
className: null,
onClick: e => {
if (stopPropagation && e && e.stopPropagation) e.stopPropagation();
share(x, link, linkText);
},
stringName: x.name,
icon: x.icon
});
});
return /*#__PURE__*/React.createElement("div", {
className: classNames('sharing-bar', className),
style: style
}, /*#__PURE__*/React.createElement(ContextMenu, {
items: sharingItems,
childrenStyle: {
display: 'inline'
},
disableDialog: chayns.env.isDialog
}, indicator));
};
SharingBar.propTypes = {
/**
* The link that should be shared.
*/
link: PropTypes.string,
/**
* A text that will be added in front of the shared link.
*/
linkText: PropTypes.string,
/**
* A classname string that will be applied to the container element.
*/
className: PropTypes.string,
/**
* Wether click events should be prevented from propagating to parent
* elements.
*/
stopPropagation: PropTypes.bool,
/**
* A React style object that will be applied to the container element.
*/
style: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
/**
* The children nodes of the `SharingBar`.
*/
children: PropTypes.node
};
SharingBar.displayName = 'SharingBar';
export default SharingBar;
//# sourceMappingURL=SharingBar.js.map