zarm-web/es/avatar/Avatar.js

基于 React 的桌面端UI库

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

import React, { Component } from 'react';
import classnames from 'classnames';

class Avatar extends Component {
  constructor(...args) {
    super(...args);
    this.avatarChildrenNode = void 0;
    this.avatarWrapperNode = void 0;
    this.state = {
      childrenScale: 1
    };

    this.setChildrenScale = () => {
      if (!this.avatarChildrenNode || !this.avatarWrapperNode) {
        return;
      }

      const avatarChildrenWidth = this.avatarChildrenNode.offsetWidth;
      const avatarWrapperWidth = this.avatarWrapperNode.offsetWidth;

      if (!avatarChildrenWidth || !avatarWrapperWidth) {
        return;
      }

      const childrenScale = (avatarWrapperWidth - 8) / avatarChildrenWidth;
      this.setState({
        childrenScale: childrenScale < 1 ? childrenScale : 1
      });
    };
  }

  componentDidMount() {
    this.setChildrenScale();
  }

  componentDidUpdate(prevProps) {
    if (this.props !== prevProps) {
      this.setChildrenScale();
    }
  }

  render() {
    const _this$props = this.props,
          {
      prefixCls,
      style,
      size,
      shape,
      src,
      alt,
      children,
      className
    } = _this$props,
          others = _objectWithoutProperties(_this$props, ["prefixCls", "style", "size", "shape", "src", "alt", "children", "className"]);

    const {
      childrenScale
    } = this.state;
    const hasFontSizeStyle = style && style.fontSize;
    const hasImage = src && src.trim() !== '';
    const hasString = typeof children === 'string';
    const cls = classnames(prefixCls, className, `${prefixCls}--${shape}`, {
      [`${prefixCls}--${size}`]: !!size
    });
    const clsImage = classnames({
      [`${prefixCls}--image`]: hasImage
    });
    const clsString = classnames({
      [`${prefixCls}--string`]: hasString || hasImage
    });
    const childrenTransformStr = `scale(${childrenScale}) translateX(-50%)`;
    const spanStyle = hasFontSizeStyle ? {} : {
      transform: childrenTransformStr,
      WebkitTransform: childrenTransformStr,
      msTransform: childrenTransformStr
    };
    return React.createElement("span", _extends({
      style: style,
      className: cls
    }, others, {
      ref: node => {
        this.avatarWrapperNode = node;
      }
    }), hasImage && React.createElement("img", {
      src: src,
      alt: alt,
      className: clsImage
    }), !hasImage && hasString && React.createElement("span", {
      className: clsString,
      style: spanStyle,
      ref: node => {
        this.avatarChildrenNode = node;
      }
    }, children));
  }

}

Avatar.defaultProps = {
  prefixCls: 'zw-avatar',
  shape: 'circle',
  size: 'md'
};
export default Avatar;