@massds/mayflower-react
Version:
React versions of Mayflower design system UI components
67 lines • 2.54 kB
JavaScript
import React from "react";
import PropTypes from "prop-types";
import classNames from "classnames";
// eslint-disable-next-line import/no-unresolved
import IconGlobe from "../Icon/IconGlobe.mjs";
import useScript from "../hooks/use-script.mjs";
const GoogleTranslateElement = _ref => {
let _ref$id = _ref.id,
id = _ref$id === void 0 ? 'google_translate_element' : _ref$id;
const status = useGoogleTranslateElement(id);
const classes = classNames({
'has-rendered': status === 'ready'
});
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
id: id,
className: classes
}), /*#__PURE__*/React.createElement("div", {
className: "ma__utility-nav__translate-icon"
}, /*#__PURE__*/React.createElement(IconGlobe, {
height: 20,
width: 20
})));
};
GoogleTranslateElement.propTypes = process.env.NODE_ENV !== "production" ? {
/** The unique id for the div google translate will use to mount its element. */
id: PropTypes.string
} : {};
export const useGoogleTranslateElement = function (id) {
if (id === void 0) {
id = 'google_translate_element';
}
React.useEffect(() => {
if (window) {
if (!window.googleTranslateElementInit) {
window.googleTranslateElementInit = () => {
const _window = window,
google = _window.google;
const InlineLayout = google.translate.TranslateElement.InlineLayout;
google.translate.TranslateElement({
pageLanguage: 'en',
includedLanguages: '',
layout: InlineLayout.SIMPLE
}, id);
};
}
}
return () => {
const googGtTT = document.getElementById('goog-gt-tt');
const googleTranslateIFrame = document.getElementsByClassName('goog-te-menu-frame');
const googleTranslateSpinner = document.getElementsByClassName('goog-te-spinner-pos');
if (googleTranslateSpinner && Array.isArray(googleTranslateSpinner)) {
googleTranslateSpinner.forEach(element => element.remove());
}
if (googleTranslateIFrame && Array.isArray(googleTranslateIFrame)) {
googleTranslateIFrame.forEach(iframe => iframe.remove());
}
if (googGtTT) {
googGtTT.remove();
}
if (window && window.googleTranslateElementInit) {
delete window.googleTranslateElementInit;
}
};
}, [id]);
return useScript('https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit');
};
export default GoogleTranslateElement;