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 _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";

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 = _getPrototypeOf(Derived),
        result;

    if (isNativeReflectConstruct()) {
      var NewTarget = _getPrototypeOf(this).constructor;

      result = Reflect.construct(Super, arguments, NewTarget);
    } else {
      result = Super.apply(this, arguments);
    }

    return _possibleConstructorReturn(this, result);
  };
}

import React, { Component } from 'react';
import { findDOMNode } from 'react-dom';
import classNames from 'classnames';
import isNumber from 'lodash/isNumber';
import Icon from '../icon';
import { Size } from '../_util/enum';
import { getPrefixCls } from '../configure';

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

  var _super = _createSuper(Avatar);

  function Avatar(props) {
    var _this;

    _classCallCheck(this, Avatar);

    _this = _super.call(this, props);

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

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

  _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,
          size = _this$props.size,
          src = _this$props.src,
          icon = _this$props.icon,
          className = _this$props.className,
          alt = _this$props.alt,
          others = _objectWithoutProperties(_this$props, ["prefixCls", "shape", "size", "src", "icon", "className", "alt"]);

      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 = React.createElement("img", {
          src: src,
          onError: this.handleImgLoadError,
          alt: alt
        });
      } else if (icon) {
        children = React.createElement(Icon, {
          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 = isNumber(size) ? {
            lineHeight: "".concat(size, "px")
          } : {};
          children = React.createElement("span", {
            className: "".concat(prefixCls, "-string"),
            ref: function ref(span) {
              return _this2.avatarChildren = span;
            },
            style: _objectSpread({}, sizeChildrenStyle, {}, childrenStyle)
          }, children);
        } else {
          children = React.createElement("span", {
            className: "".concat(prefixCls, "-string"),
            ref: function ref(span) {
              return _this2.avatarChildren = span;
            }
          }, children);
        }
      }

      return React.createElement("span", _extends({}, others, {
        style: _objectSpread({}, sizeStyle, {}, others.style),
        className: classString
      }), children);
    }
  }]);

  return Avatar;
}(Component);

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