choerodon-ui/lib/avatar/index.js

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

"use strict";

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

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

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 _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

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

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 _enum = require("../_util/enum");

var _ConfigContext = _interopRequireDefault(require("../config-provider/ConfigContext"));

function _createSuper(Derived) {
  function isNativeReflectConstruct() {
    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
    if (Reflect.construct.sham) return false;
    if (typeof Proxy === "function") return true;

    try {
      Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
      return true;
    } catch (e) {
      return false;
    }
  }

  return function () {
    var Super = (0, _getPrototypeOf2["default"])(Derived),
        result;

    if (isNativeReflectConstruct()) {
      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);
  };
}

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

  var _super = _createSuper(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.getBoundingClientRect().width; // 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,
          size = _this$props.size,
          src = _this$props.src,
          icon = _this$props.icon,
          className = _this$props.className,
          alt = _this$props.alt,
          others = (0, _objectWithoutProperties2["default"])(_this$props, ["prefixCls", "shape", "size", "src", "icon", "className", "alt"]);
      var getPrefixCls = this.context.getPrefixCls;
      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 = _react["default"].createElement("img", {
          src: src,
          onError: this.handleImgLoadError,
          alt: alt
        });
      } else if (icon) {
        children = _react["default"].createElement(_icon["default"], {
          type: 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 = _react["default"].createElement("span", {
            className: "".concat(prefixCls, "-string"),
            ref: function ref(span) {
              return _this2.avatarChildren = span;
            },
            style: (0, _objectSpread2["default"])({}, sizeChildrenStyle, {}, childrenStyle)
          }, children);
        } else {
          children = _react["default"].createElement("span", {
            className: "".concat(prefixCls, "-string"),
            ref: function ref(span) {
              return _this2.avatarChildren = span;
            }
          }, children);
        }
      }

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

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