choerodon-ui/es/avatar/index.js

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

import _extends from "@babel/runtime/helpers/extends";
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/inherits";
import _createSuper from "@babel/runtime/helpers/createSuper";
var _excluded = ["prefixCls", "shape", "size", "src", "icon", "className", "alt", "renderIcon"];
import React, { Component } from 'react';
import { findDOMNode } from 'react-dom';
import classNames from 'classnames';
import isNumber from 'lodash/isNumber';
import Icon from '../icon';
import Group from './Group';
import AvatarContext from './AvatarContext';
import { Size } from '../_util/enum';

var Avatar = /*#__PURE__*/function (_Component) {
  _inherits(Avatar, _Component);

  var _super = _createSuper(Avatar);

  function Avatar(props, context) {
    var _this;

    _classCallCheck(this, Avatar);

    _this = _super.call(this, props, context);

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

      if (childrenNode) {
        var childrenWidth = childrenNode.offsetWidth;
        var avatarNode = findDOMNode(_assertThisInitialized(_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;
  }

  _createClass(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.createElement(Icon, {
          type: type
        });
      } : _this$props$renderIco,
          others = _objectWithoutProperties(_this$props, _excluded);

      var _this$context = this.context,
          getPrefixCls = _this$context.getPrefixCls,
          groupSize = _this$context.size;
      var size = customSize === Size["default"] ? groupSize : customSize;
      var prefixCls = getPrefixCls('avatar', customizePrefixCls);
      var _this$state2 = this.state,
          isImgExist = _this$state2.isImgExist,
          scale = _this$state2.scale;
      var sizeCls = classNames((_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-lg"), size === Size.large), _defineProperty(_classNames, "".concat(prefixCls, "-sm"), size === Size.small), _classNames));
      var classString = classNames(prefixCls, className, sizeCls, (_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefixCls, "-").concat(shape), shape), _defineProperty(_classNames2, "".concat(prefixCls, "-image"), src && isImgExist), _defineProperty(_classNames2, "".concat(prefixCls, "-icon"), icon), _classNames2));
      var sizeStyle = isNumber(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.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 = isNumber(size) ? {
            lineHeight: "".concat(size, "px")
          } : {};
          children = /*#__PURE__*/React.createElement("span", {
            className: "".concat(prefixCls, "-string"),
            ref: function ref(span) {
              return _this2.avatarChildren = span;
            },
            style: _objectSpread(_objectSpread({}, sizeChildrenStyle), childrenStyle)
          }, children);
        } else {
          children = /*#__PURE__*/React.createElement("span", {
            className: "".concat(prefixCls, "-string"),
            ref: function ref(span) {
              return _this2.avatarChildren = span;
            }
          }, children);
        }
      }

      return /*#__PURE__*/React.createElement("span", _extends({}, others, {
        style: _objectSpread(_objectSpread({}, sizeStyle), others.style),
        className: classString
      }), children);
    }
  }], [{
    key: "contextType",
    get: function get() {
      return AvatarContext;
    }
  }]);

  return Avatar;
}(Component);

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