@lyra/base/lib/components/LyraIntlProvider.js

Lyra plugin containing the base components and roles for a Lyra configuration

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _intl = require('part:@lyra/base/locale/intl');

var _formatters = require('part:@lyra/base/locale/formatters');

var _languageResolver = require('part:@lyra/base/language-resolver');

var _localeMessageFetcher = require('part:@lyra/base/locale-message-fetcher');

var _localeMessageFetcher2 = _interopRequireDefault(_localeMessageFetcher);

var _spinner = require('part:@lyra/components/loading/spinner');

var _spinner2 = _interopRequireDefault(_spinner);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

class LyraIntlProvider extends _react2.default.Component {
  constructor(props) {
    super(props);

    this.catchError = this.catchError.bind(this);
    this.state = {
      messages: null,
      language: null,
      error: null
    };
  }

  catchError(err) {
    console.error(err); // eslint-disable-line no-console
    this.setState({ error: err });
  }

  componentDidMount() {
    const supportedLanguages = this.props.supportedLanguages;

    (0, _languageResolver.resolveLanguage)(supportedLanguages).then(language => {
      _localeMessageFetcher2.default.fetchLocalizedMessages(language).then(localizedMessages => {
        const languagePrefix = language.split('-')[0];
        const localeData = require(`react-intl/locale-data/${languagePrefix}`);
        (0, _intl.addLocaleData)(localeData);

        // In order to get a proper stacktrace on rendering errors,
        // we need to move this out of the current call stack
        this.mountTimer = setTimeout(() => {
          this.setState({
            messages: localizedMessages,
            language: language
          });
        }, 0);
      }).catch(this.catchError);
    }).catch(this.catchError);
  }

  componentWillUnmount() {
    clearTimeout(this.mountTimer);
  }

  render() {
    var _state = this.state;
    const messages = _state.messages,
          language = _state.language,
          error = _state.error;

    if (error) {
      return _react2.default.createElement(
        'div',
        null,
        _react2.default.createElement(
          'h2',
          null,
          'Error fetching locale data'
        ),
        _react2.default.createElement(
          'code',
          null,
          _react2.default.createElement(
            'pre',
            null,
            error.stack
          )
        )
      );
    }

    if (!messages) {
      return _react2.default.createElement(_spinner2.default, { fullscreen: true, message: 'Loading locale messages...' });
    }

    return _react2.default.createElement(
      _intl.IntlProvider,
      { locale: language, messages: messages },
      _react2.default.createElement(
        _formatters.IntlWrapper,
        null,
        this.props.children
      )
    );
  }
}

LyraIntlProvider.propTypes = {
  children: _propTypes2.default.node,
  supportedLanguages: _propTypes2.default.arrayOf(_propTypes2.default.string)
};

exports.default = LyraIntlProvider;