@massds/mayflower-react/dist/GoogleTranslateElement/index.js

React versions of Mayflower design system UI components

"use strict";

exports.__esModule = true;
exports.useGoogleTranslateElement = exports["default"] = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _IconGlobe = _interopRequireDefault(require("../Icon/IconGlobe.js"));
var _useScript = _interopRequireDefault(require("../hooks/use-script.js"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
// eslint-disable-next-line import/no-unresolved

var GoogleTranslateElement = function GoogleTranslateElement(_ref) {
  var _ref$id = _ref.id,
    id = _ref$id === void 0 ? 'google_translate_element' : _ref$id;
  var status = useGoogleTranslateElement(id);
  var classes = (0, _classnames["default"])({
    'has-rendered': status === 'ready'
  });
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
    id: id,
    className: classes
  }), /*#__PURE__*/_react["default"].createElement("div", {
    className: "ma__utility-nav__translate-icon"
  }, /*#__PURE__*/_react["default"].createElement(_IconGlobe["default"], {
    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["default"].string
} : {};
var useGoogleTranslateElement = exports.useGoogleTranslateElement = function useGoogleTranslateElement(id) {
  if (id === void 0) {
    id = 'google_translate_element';
  }
  _react["default"].useEffect(function () {
    if (window) {
      if (!window.googleTranslateElementInit) {
        window.googleTranslateElementInit = function () {
          var _window = window,
            google = _window.google;
          var InlineLayout = google.translate.TranslateElement.InlineLayout;
          google.translate.TranslateElement({
            pageLanguage: 'en',
            includedLanguages: '',
            layout: InlineLayout.SIMPLE
          }, id);
        };
      }
    }
    return function () {
      var googGtTT = document.getElementById('goog-gt-tt');
      var googleTranslateIFrame = document.getElementsByClassName('goog-te-menu-frame');
      var googleTranslateSpinner = document.getElementsByClassName('goog-te-spinner-pos');
      if (googleTranslateSpinner && Array.isArray(googleTranslateSpinner)) {
        googleTranslateSpinner.forEach(function (element) {
          return element.remove();
        });
      }
      if (googleTranslateIFrame && Array.isArray(googleTranslateIFrame)) {
        googleTranslateIFrame.forEach(function (iframe) {
          return iframe.remove();
        });
      }
      if (googGtTT) {
        googGtTT.remove();
      }
      if (window && window.googleTranslateElementInit) {
        delete window.googleTranslateElementInit;
      }
    };
  }, [id]);
  return (0, _useScript["default"])('https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit');
};
var _default = exports["default"] = GoogleTranslateElement;