choerodon-ui/lib/avatar/index.js

An enterprise-class UI design language and React-based implementation

"use strict";

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

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];

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

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

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

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

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

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

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

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

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

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

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

var _reactDom = require("react-dom");

var _classnames = _interopRequireDefault(require("classnames"));

var _isNumber = _interopRequireDefault(require("lodash/isNumber"));

var _icon = _interopRequireDefault(require("../icon"));

var _Group = _interopRequireDefault(require("./Group"));

var _AvatarContext = _interopRequireDefault(require("./AvatarContext"));

var _enum = require("../_util/enum");

var _excluded = ["prefixCls", "shape", "size", "src", "icon", "className", "alt", "renderIcon"];

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

  var _super = (0, _createSuper2["default"])(Avatar);

  function Avatar(props, context) {
    var _this;

    (0, _classCallCheck2["default"])(this, Avatar);
    _this = _super.call(this, props, context);

    _this.setScale = function () {
      var childrenNode = _this.avatarChildren;

      if (childrenNode) {
        var childrenWidth = childrenNode.offsetWidth;
        var avatarNode = (0, _reactDom.findDOMNode)((0, _assertThisInitialized2["default"])(_this));
        var avatarWidth = avatarNode.offsetWidth; // add 4px gap for each side to get better performance

        if (avatarWidth - 8 < childrenWidth) {
          _this.setState({
            scale: (avatarWidth - 8) / childrenWidth
          });
        } else {
          _this.setState({
            scale: 1
          });
        }
      }
    };

    _this.handleImgLoadError = function () {
      var onError = _this.props.onError;
      var errorFlag = onError ? onError() : undefined;

      if (errorFlag !== false) {
        _this.setState({
          isImgExist: false
        });
      }
    };

    _this.state = {
      scale: 1,
      isImgExist: true
    };
    return _this;
  }

  (0, _createClass2["default"])(Avatar, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this.setScale();
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps, prevState) {
      var children = this.props.children;
      var _this$state = this.state,
          scale = _this$state.scale,
          isImgExist = _this$state.isImgExist;

      if (prevProps.children !== children || prevState.scale !== scale && scale === 1 || prevState.isImgExist !== isImgExist) {
        this.setScale();
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _classNames,
          _classNames2,
          _this2 = this;

      var _this$props = this.props,
          customizePrefixCls = _this$props.prefixCls,
          shape = _this$props.shape,
          customSize = _this$props.size,
          src = _this$props.src,
          icon = _this$props.icon,
          className = _this$props.className,
          alt = _this$props.alt,
          _this$props$renderIco = _this$props.renderIcon,
          renderIcon = _this$props$renderIco === void 0 ? function (type) {
        return /*#__PURE__*/_react["default"].createElement(_icon["default"], {
          type: type
        });
      } : _this$props$renderIco,
          others = (0, _objectWithoutProperties2["default"])(_this$props, _excluded);
      var _this$context = this.context,
          getPrefixCls = _this$context.getPrefixCls,
          groupSize = _this$context.size;
      var size = customSize === _enum.Size["default"] ? groupSize : customSize;
      var prefixCls = getPrefixCls('avatar', customizePrefixCls);
      var _this$state2 = this.state,
          isImgExist = _this$state2.isImgExist,
          scale = _this$state2.scale;
      var sizeCls = (0, _classnames["default"])((_classNames = {}, (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-lg"), size === _enum.Size.large), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-sm"), size === _enum.Size.small), _classNames));
      var classString = (0, _classnames["default"])(prefixCls, className, sizeCls, (_classNames2 = {}, (0, _defineProperty2["default"])(_classNames2, "".concat(prefixCls, "-").concat(shape), shape), (0, _defineProperty2["default"])(_classNames2, "".concat(prefixCls, "-image"), src && isImgExist), (0, _defineProperty2["default"])(_classNames2, "".concat(prefixCls, "-icon"), icon), _classNames2));
      var sizeStyle = (0, _isNumber["default"])(size) ? {
        width: size,
        height: size,
        lineHeight: "".concat(size, "px"),
        fontSize: icon ? size / 2 : 18
      } : {};
      var children = this.props.children;

      if (src && isImgExist) {
        children = /*#__PURE__*/_react["default"].createElement("img", {
          src: src,
          onError: this.handleImgLoadError,
          alt: alt
        });
      } else if (icon) {
        children = renderIcon(icon);
      } else {
        var childrenNode = this.avatarChildren;

        if (childrenNode || scale !== 1) {
          var transformString = "scale(".concat(scale, ") translateX(-50%)");
          var childrenStyle = {
            msTransform: transformString,
            WebkitTransform: transformString,
            transform: transformString
          };
          var sizeChildrenStyle = (0, _isNumber["default"])(size) ? {
            lineHeight: "".concat(size, "px")
          } : {};
          children = /*#__PURE__*/_react["default"].createElement("span", {
            className: "".concat(prefixCls, "-string"),
            ref: function ref(span) {
              return _this2.avatarChildren = span;
            },
            style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, sizeChildrenStyle), childrenStyle)
          }, children);
        } else {
          children = /*#__PURE__*/_react["default"].createElement("span", {
            className: "".concat(prefixCls, "-string"),
            ref: function ref(span) {
              return _this2.avatarChildren = span;
            }
          }, children);
        }
      }

      return /*#__PURE__*/_react["default"].createElement("span", (0, _extends2["default"])({}, others, {
        style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, sizeStyle), others.style),
        className: classString
      }), children);
    }
  }], [{
    key: "contextType",
    get: function get() {
      return _AvatarContext["default"];
    }
  }]);
  return Avatar;
}(_react.Component);

exports["default"] = Avatar;
Avatar.displayName = 'Avatar';
Avatar.defaultProps = {
  shape: 'circle',
  size: _enum.Size["default"]
};
Avatar.Group = _Group["default"];
//# sourceMappingURL=index.js.map