react-misc-toolbox/dist/LanguagePicker.js

- [ ] diagramexample | optimize creating from blank slate

'use strict';

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

var _regenerator = require('babel-runtime/regenerator');

var _regenerator2 = _interopRequireDefault(_regenerator);

var _asyncToGenerator2 = require('babel-runtime/helpers/asyncToGenerator');

var _asyncToGenerator3 = _interopRequireDefault(_asyncToGenerator2);

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _recompose = require('recompose');

var _helperFunctions = require('./helperFunctions');

var _defaultStyles = require('./defaultStyles');

var _settings = require('./utilities/settings');

var _CTCPopover = require('./CTCPopover');

var _CTCPopover2 = _interopRequireDefault(_CTCPopover);

var _Button = require('./Button');

var _Button2 = _interopRequireDefault(_Button);

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

// noinvert button style

var LanguagePicker = exports.LanguagePicker = function LanguagePicker(_ref) {
  var languages = _ref.languages,
      setActiveLanguage = _ref.setActiveLanguage,
      activeLanguage = _ref.activeLanguage,
      style = _ref.style,
      _ref$styleTemplate = _ref.styleTemplate,
      styleTemplate = _ref$styleTemplate === undefined ? 'default' : _ref$styleTemplate,
      callback = _ref.callback;

  var styles = styleTemplate ? _defaultStyles.languagePickerTemplates[styleTemplate] : _defaultStyles.languagePickerTemplates['none'];
  return _react2.default.createElement(
    _CTCPopover2.default,
    {
      className: 'languagepicker__container',
      style: style,
      renderTrigger: function renderTrigger(_ref2) {
        var getTriggerProps = _ref2.getTriggerProps;
        return _react2.default.createElement(_Button2.default, getTriggerProps({
          className: 'languagepicker__trigger',
          style: (0, _extends3.default)({}, styles.trigger, {
            backgroundImage: 'url(\'' + _settings.flags[activeLanguage] + '\')'
          })
        }));
      }
    },
    function (_ref3) {
      var toggleIsOn = _ref3.toggleIsOn,
          getChildrenProps = _ref3.getChildrenProps;
      return _react2.default.createElement(
        'div',
        (0, _extends3.default)({}, getChildrenProps({
          className: 'languagepicker__children',
          style: (0, _extends3.default)({}, styles.children)
        })),
        languages.map(function (language) {
          return _react2.default.createElement(_Button2.default, {
            colors: _defaultStyles.buttonStyles.verdant,
            isOn: activeLanguage === language.code,
            key: language.code,
            style: (0, _extends3.default)({}, styles.item, {
              backgroundImage: 'url(\'' + _settings.flags[language.code] + '\')'
            }),
            className: '' + (0, _helperFunctions.flippyClass)(activeLanguage === language.code, 'languagepicker__item', 'active', 'inactive'),
            onClick: function () {
              var _ref4 = (0, _asyncToGenerator3.default)( /*#__PURE__*/_regenerator2.default.mark(function _callee() {
                return _regenerator2.default.wrap(function _callee$(_context) {
                  while (1) {
                    switch (_context.prev = _context.next) {
                      case 0:
                        _context.next = 2;
                        return setActiveLanguage(language.code);

                      case 2:
                        if (!callback) {
                          _context.next = 5;
                          break;
                        }

                        _context.next = 5;
                        return callback(language.code);

                      case 5:
                        toggleIsOn();

                      case 6:
                      case 'end':
                        return _context.stop();
                    }
                  }
                }, _callee, undefined);
              }));

              function onClick() {
                return _ref4.apply(this, arguments);
              }

              return onClick;
            }()
          });
        })
      );
    }
  );
};

LanguagePicker.propTypes = {
  languages: _propTypes2.default.array.isRequired,
  activeLanguage: _propTypes2.default.string.isRequired,
  setActiveLanguage: _propTypes2.default.func.isRequired
};

var enhance = (0, _recompose.compose)((0, _recompose.onlyUpdateForKeys)(['activeLanguage']));
//

exports.default = enhance(LanguagePicker);