@lskjs/avatar/Avatar.js

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _typeof = require("@babel/runtime/helpers/typeof");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _react = _interopRequireWildcard(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _isNull = _interopRequireDefault(require("lodash/isNull"));

var _isString = _interopRequireDefault(require("lodash/isString"));

var _reactImageFallback = _interopRequireDefault(require("react-image-fallback"));

var _link = _interopRequireDefault(require("@lskjs/link"));

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

// import gifSpinner from './img/loading.gif';
var textSizeRatio = 3;
var textSizePercent = 30;

var hashCode = function hashCode(str) {
  if ((0, _isNull["default"])(str)) return null;
  if (!(0, _isString["default"])(str)) str += '';
  var hash = 0;
  var i;
  var chr;
  if (str.length === 0) return hash;

  for (i = 0; i < str.length; i++) {
    chr = str.charCodeAt(i);
    hash = (hash << 5) - hash + chr;
    hash |= 0; // Convert to 32bit integer
  }

  return Math.abs(hash);
};

var Avatar = /*#__PURE__*/function (_PureComponent) {
  (0, _inherits2["default"])(Avatar, _PureComponent);

  var _super = _createSuper(Avatar);

  function Avatar() {
    (0, _classCallCheck2["default"])(this, Avatar);
    return _super.apply(this, arguments);
  }

  (0, _createClass2["default"])(Avatar, [{
    key: "getColorByHash",
    value: function getColorByHash(num) {
      if ((0, _isNull["default"])(num)) {
        var index = Math.floor(Math.random() * Avatar.defaultColors.length);
        return Avatar.defaultColors[index];
      }

      num %= Avatar.defaultColors.length;
      return Avatar.defaultColors[num - 1] || Avatar.defaultColors[0];
    }
  }, {
    key: "getInnerStyle",
    value: function getInnerStyle() {
      var _this$props = this.props,
          size = _this$props.size,
          textScale = _this$props.textScale,
          shape = _this$props.shape,
          backgroundColor = _this$props.backgroundColor,
          innerStyle = _this$props.innerStyle,
          textColor = _this$props.textColor,
          title = _this$props.title,
          id = _this$props.id,
          src = _this$props.src;
      var str = id || title || null;
      var color = backgroundColor || this.getColorByHash(hashCode(str));
      var width = this.props.width || size;
      var height = this.props.height || size;
      var lineHeight = size;
      var fontSize = Math.min( // Math.floor(size / textSizeRatio * textScale),
      Math.floor(size * textSizePercent / 100), lineHeight);
      var borderRadius = 'none';

      if (shape === 'circle') {
        borderRadius = '50%';
      } else if (shape === 'rounded') {
        borderRadius = 6;
      }

      return _objectSpread({
        boxSizing: 'border-box',
        maxWidth: '100%',
        objectFit: 'cover',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        // overflow: 'hidden',
        width: width,
        height: height,
        textAlign: 'center',
        fontFamily: 'Helvetica, Arial, sans-serif',
        borderRadius: borderRadius,
        fontSize: "".concat(fontSize, "px"),
        lineHeight: "".concat(lineHeight, "px"),
        backgroundColor: src ? 'rgba(0, 0, 0, 0)' : color,
        color: textColor
      }, innerStyle);
    }
  }, {
    key: "renderAsImage",
    value: function renderAsImage() {
      var title = this.props.title || this.props.name;
      var src = this.props.src || this.props.avatar;
      return /*#__PURE__*/_react["default"].createElement(_reactImageFallback["default"], {
        src: src,
        fallbackImage: this.props.defaultAvatar || this.constructor.defaultAvatar,
        initialImage: this.props.defaultAvatar || this.constructor.defaultAvatar,
        style: this.getInnerStyle(),
        alt: title,
        title: title
      });
    }
  }, {
    key: "renderAsText",
    value: function renderAsText() {
      var _this$props2 = this.props,
          placeholder = _this$props2.placeholder,
          placeholderLimit = _this$props2.placeholderLimit;
      var title = this.props.title || this.props.name || placeholder || '';

      if (!placeholder) {
        placeholder = title.split(' ').map(function (s) {
          return s.charAt(0);
        }).join('').substr(0, placeholderLimit);
      }

      return /*#__PURE__*/_react["default"].createElement("div", {
        style: this.getInnerStyle()
      }, placeholder);
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props3 = this.props,
          size = _this$props3.size,
          style = _this$props3.style,
          className = _this$props3.className,
          children = _this$props3.children,
          componentClass = _this$props3.componentClass;
      var src = this.props.src || this.props.avatar;
      var width = this.props.width || size;
      var height = this.props.height || size;

      var wrapperStyle = _objectSpread({
        display: 'block',
        position: 'relative',
        width: width,
        height: height
      }, style);

      var link = this.props.link || this.props.href;
      var Component = componentClass || (link ? _link["default"] : 'div');
      return /*#__PURE__*/_react["default"].createElement(Component, {
        href: link,
        className: className,
        style: wrapperStyle
      }, src != null ? this.renderAsImage() : this.renderAsText(), children);
    }
  }]);
  return Avatar;
}(_react.PureComponent);

Avatar.Badge = function (props) {
  var Wrap = props.componentClass,
      left = props.left,
      top = props.top,
      right = props.right,
      bottom = props.bottom,
      props2 = (0, _objectWithoutProperties2["default"])(props, ["componentClass", "left", "top", "right", "bottom"]);
  var offset = '7%';
  var style = {
    position: 'absolute'
  };
  ['left', 'top', 'right', 'bottom'].forEach(function (dir) {
    if (!props[dir]) return;

    if (typeof props[dir] === 'string') {
      style[dir] = props[dir];
    } else if (typeof props[dir] === 'number') {
      style[dir] = "".concat(props[dir], "%");
    } else {
      style[dir] = offset;
    }
  });
  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
    style: style
  }, props2), props.children);
};

Avatar.defaultColors = ['#F8B195', '#F67280', '#C06C84', '#6C5B7B', '#355C7D'];
Avatar.defaultAvatar = '//cdn.mgbeta.ru/lsk/no-avatar.png';
Avatar.defaultProps = {
  title: '',
  name: '',
  src: null,
  size: 64,
  width: null,
  height: null,
  // backgroundColor: '#838383',
  textColor: '#d9d9d9',
  textScale: 1,
  placeholder: null,
  placeholderLimit: 3,
  shape: 'circle',
  style: {},
  innerStyle: {}
};
Avatar.propTypes = {
  title: _propTypes["default"].string,
  src: _propTypes["default"].string,
  size: _propTypes["default"].number,
  width: _propTypes["default"].any,
  // eslint-disable-line react/forbid-prop-types
  height: _propTypes["default"].any,
  // eslint-disable-line react/forbid-prop-types
  color: _propTypes["default"].string,
  textColor: _propTypes["default"].string,
  textScale: _propTypes["default"].number,
  shape: _propTypes["default"].string,
  placeholder: _propTypes["default"].string,
  placeholderLimit: _propTypes["default"].number,
  // shape: PropTypes.oneOfType(['circle', 'square', 'rounded']),
  style: _propTypes["default"].object,
  innerStyle: _propTypes["default"].object
};
var _default = Avatar;
exports["default"] = _default;
//# sourceMappingURL=Avatar.js.map