@codementor/ui-kit/AvatarImage.js

'use strict';

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

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _style = require('styled-jsx/style');

var _style2 = _interopRequireDefault(_style);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactLazyload = require('react-lazyload');

var _reactLazyload2 = _interopRequireDefault(_reactLazyload);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _isRetina = require('./utils/isRetina');

var _isRetina2 = _interopRequireDefault(_isRetina);

var _filestackHelpers = require('./utils/filestackHelpers');

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

var LAZY_LOAD_OFFSET = exports.LAZY_LOAD_OFFSET = 100;
var DEFAULT_AVATAR_FILENAME = exports.DEFAULT_AVATAR_FILENAME = 'default';

var getAvatarPlaceholderUrl = function getAvatarPlaceholderUrl(filename) {
  return 'https://assets.codementor.io/avatar/' + filename + '.png';
};

var DEFAULT_AVATAR_SRC = getAvatarPlaceholderUrl(DEFAULT_AVATAR_FILENAME);

var AvatarPlaceholder = exports.AvatarPlaceholder = function AvatarPlaceholder(_ref) {
  var alt = _ref.alt,
      src = _ref.src,
      size = _ref.size;
  return _react2.default.createElement(
    'div',
    {
      className: _style2.default.dynamic([['855196116', [size, size]]]) + ' ' + 'cui-avatar-image'
    },
    _react2.default.createElement('img', { alt: alt, src: src, className: _style2.default.dynamic([['855196116', [size, size]]])
    }),
    _react2.default.createElement(_style2.default, {
      styleId: '855196116',
      css: '.cui-avatar-image.__jsx-style-dynamic-selector{width:' + size + ';height:' + size + ';background:#eee;text-align:center;border-radius:50%;overflow:hidden;}.cui-avatar-image.__jsx-style-dynamic-selector img.__jsx-style-dynamic-selector{object-fit:cover;width:100%;height:100%;}',
      dynamic: [size, size]
    })
  );
};

var extractSizeNumber = function extractSizeNumber(size) {
  var value = size.split('px')[0] || 40;
  return parseInt(value);
};

var imageSizeMultiplier = function imageSizeMultiplier() {
  return (0, _isRetina2.default)() ? 2 : 1.2;
};

var getOptionString = function getOptionString(_ref2) {
  var size = _ref2.size;

  var width = extractSizeNumber(size) * imageSizeMultiplier();
  return 'resize=width:' + width.toFixed(0);
};

var AvatarImage = function (_PureComponent) {
  (0, _inherits3.default)(AvatarImage, _PureComponent);

  function AvatarImage() {
    (0, _classCallCheck3.default)(this, AvatarImage);
    return (0, _possibleConstructorReturn3.default)(this, (AvatarImage.__proto__ || (0, _getPrototypeOf2.default)(AvatarImage)).apply(this, arguments));
  }

  (0, _createClass3.default)(AvatarImage, [{
    key: 'render',
    value: function render() {
      var _props = this.props,
          alt = _props.alt,
          size = _props.size,
          href = _props.href,
          lazyload = _props.lazyload,
          containerOverflow = _props.containerOverflow;


      var AvatarComp = this._renderAvatar();

      if (!lazyload) {
        return AvatarComp;
      }

      return _react2.default.createElement(
        _reactLazyload2.default,
        {
          once: true,
          overflow: containerOverflow,
          placeholder: _react2.default.createElement(AvatarPlaceholder, {
            alt: alt,
            src: DEFAULT_AVATAR_SRC,
            size: size }),
          offset: LAZY_LOAD_OFFSET },
        href ? _react2.default.createElement(
          'a',
          { href: href, target: '_blank' },
          AvatarComp
        ) : AvatarComp
      );
    }
  }, {
    key: '_renderAvatar',
    value: function _renderAvatar() {
      var _props2 = this.props,
          src = _props2.src,
          alt = _props2.alt,
          size = _props2.size;


      var optimizedUrl = (0, _filestackHelpers.transform)({
        url: src || DEFAULT_AVATAR_SRC,
        optionString: getOptionString({ size: size })
      });

      var firstLetter = alt ? alt[0].toUpperCase() : '';

      var filename = firstLetter || 'empty';
      var dummyUrl = getAvatarPlaceholderUrl(filename);

      var avatarUrl = optimizedUrl.replace('d=mm', 'd=' + encodeURIComponent(dummyUrl));

      return _react2.default.createElement(AvatarPlaceholder, {
        alt: alt,
        src: avatarUrl,
        size: size });
    }
  }]);
  return AvatarImage;
}(_react.PureComponent);

AvatarImage.propTypes = {
  alt: _propTypes2.default.string,
  src: _propTypes2.default.string,
  href: _propTypes2.default.string,
  size: _propTypes2.default.string,
  lazyload: _propTypes2.default.bool,
  containerOverflow: _propTypes2.default.bool
};

AvatarImage.defaultProps = {
  src: DEFAULT_AVATAR_SRC,
  lazyload: true,
  size: '40px'
};

exports.default = AvatarImage;