@arco-design/mobile-react 2.19.0

package/esm/avatar/index.js

@@ -0,0 +1,154 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { forwardRef, useImperativeHandle, useRef, useContext, useState, useEffect } from 'react';
+import { cls, componentWrapper } from '@arco-design/mobile-utils';
+import { BaseImage } from '../image';
+import IconUserFill from '../icon/IconUserFill';
+import { GlobalContext } from '../context-provider';
+import Group, { AvatarGroupContext } from './group';
+export * from './type';
+export function componentGenerator(Comp) {
+  return /*#__PURE__*/forwardRef(function (props, ref) {
+    var _cls;
+
+    var _useContext = useContext(GlobalContext),
+        prefixCls = _useContext.prefixCls;
+
+    var _useContext2 = useContext(AvatarGroupContext),
+        groupShape = _useContext2.shape,
+        groupSize = _useContext2.size,
+        isGroup = _useContext2.isGroup;
+
+    var _props$shape = props.shape,
+        shape = _props$shape === void 0 ? props.shape || (isGroup ? groupShape : 'circle') : _props$shape,
+        _props$size = props.size,
+        size = _props$size === void 0 ? props.size || (isGroup ? groupSize : 'small') : _props$size,
+        src = props.src,
+        _props$decoration = props.decoration,
+        decoration = _props$decoration === void 0 ? null : _props$decoration,
+        _props$textAvatar = props.textAvatar,
+        textAvatar = _props$textAvatar === void 0 ? '' : _props$textAvatar,
+        _props$avatarStyle = props.avatarStyle,
+        avatarStyle = _props$avatarStyle === void 0 ? {} : _props$avatarStyle,
+        _props$autoFixFontSiz = props.autoFixFontSize,
+        autoFixFontSize = _props$autoFixFontSiz === void 0 ? true : _props$autoFixFontSiz,
+        _props$autoFixFontOff = props.autoFixFontOffset,
+        autoFixFontOffset = _props$autoFixFontOff === void 0 ? 2 : _props$autoFixFontOff,
+        _props$avatarName = props.avatarName,
+        avatarName = _props$avatarName === void 0 ? '' : _props$avatarName,
+        _props$avatarDesc = props.avatarDesc,
+        avatarDesc = _props$avatarDesc === void 0 ? '' : _props$avatarDesc,
+        _props$children = props.children,
+        children = _props$children === void 0 ? null : _props$children,
+        _props$renderInfo = props.renderInfo,
+        renderInfo = _props$renderInfo === void 0 ? null : _props$renderInfo,
+        _props$className = props.className,
+        className = _props$className === void 0 ? '' : _props$className,
+        _props$style = props.style,
+        style = _props$style === void 0 ? {} : _props$style,
+        _props$imageProps = props.imageProps,
+        imageProps = _props$imageProps === void 0 ? {} : _props$imageProps,
+        _props$defaultOverLap = props.defaultOverLap,
+        defaultOverLap = _props$defaultOverLap === void 0 ? /*#__PURE__*/React.createElement(IconUserFill, {
+      className: prefixCls + "-avatar-default"
+    }) : _props$defaultOverLap,
+        onClickDecoration = props.onClickDecoration,
+        onClick = props.onClick;
+    var domRef = useRef(null);
+    var avatarRef = useRef(null);
+    var avatarTextRef = useRef(null);
+
+    var _useState = useState(1),
+        textScale = _useState[0],
+        setTextScale = _useState[1];
+
+    useImperativeHandle(ref, function () {
+      return {
+        dom: domRef.current
+      };
+    }); // 图片头像
+    // @en Picture avatar
+
+    var isImageAvatar = !children && src !== void 0; // 文字头像
+    // @en Text avatar
+
+    var isTextAvatar = !children && !isImageAvatar && textAvatar; // 使用默认头像
+    // @en Whether to use default avatar
+
+    var useDefaultAvatar = !children && !isImageAvatar && !isTextAvatar;
+    useEffect(function () {
+      getComputedTextScale();
+    }, [textAvatar]);
+    /**
+     * 根据字体元素宽度和头像大小动态调整缩放比例
+     * @en Dynamically adjust scaling based on font element width and avatar size
+     */
+
+    function getComputedTextScale() {
+      var _avatarRef$current, _avatarTextRef$curren;
+
+      if (!isTextAvatar || !autoFixFontSize || !avatarRef || !avatarTextRef) return;
+
+      var _ref = ((_avatarRef$current = avatarRef.current) == null ? void 0 : _avatarRef$current.getBoundingClientRect()) || {},
+          _ref$width = _ref.width,
+          avatarWidth = _ref$width === void 0 ? 0 : _ref$width;
+
+      var _ref2 = ((_avatarTextRef$curren = avatarTextRef.current) == null ? void 0 : _avatarTextRef$curren.getBoundingClientRect()) || {},
+          _ref2$width = _ref2.width,
+          textWidth = _ref2$width === void 0 ? 0 : _ref2$width;
+
+      if (avatarWidth === 0 || textWidth === 0) return; // 文本节点宽度大于头像元素时进行动态缩放
+      // @en Dynamic scaling when the width of the text node is larger than the avatar element
+
+      var maxWidth = avatarWidth - 2 * autoFixFontOffset;
+
+      if (textWidth > maxWidth) {
+        var scale = maxWidth / textWidth;
+        setTextScale(textScale * scale);
+      }
+    }
+
+    return /*#__PURE__*/React.createElement("div", {
+      ref: domRef,
+      style: style,
+      className: cls(prefixCls + "-avatar-wrapper", className, size, shape, {
+        'with-info': Boolean(avatarName)
+      }),
+      onClick: onClick
+    }, /*#__PURE__*/React.createElement("div", {
+      className: cls(prefixCls + "-avatar", size, shape, (_cls = {}, _cls[prefixCls + "-text-avatar"] = isTextAvatar, _cls[prefixCls + "-image-avatar"] = isImageAvatar, _cls['default-overlap'] = useDefaultAvatar, _cls)),
+      style: avatarStyle,
+      ref: avatarRef
+    }, children, useDefaultAvatar && defaultOverLap, isImageAvatar && src && /*#__PURE__*/React.createElement(Comp, _extends({
+      className: prefixCls + "-avatar-img",
+      src: src
+    }, imageProps)), isTextAvatar && /*#__PURE__*/React.createElement("span", {
+      className: prefixCls + "-avatar-text",
+      ref: avatarTextRef,
+      style: {
+        transform: "scale(" + textScale + ")"
+      }
+    }, textAvatar), decoration && /*#__PURE__*/React.createElement("div", {
+      className: prefixCls + "-avatar-decoration",
+      onClick: onClickDecoration
+    }, decoration)), renderInfo, !renderInfo && avatarName && /*#__PURE__*/React.createElement("div", {
+      className: cls(prefixCls + "-avatar-info")
+    }, /*#__PURE__*/React.createElement("div", {
+      className: cls(prefixCls + "-avatar-name")
+    }, avatarName), avatarDesc && /*#__PURE__*/React.createElement("div", {
+      className: cls(prefixCls + "-avatar-desc")
+    }, avatarDesc)));
+  });
+}
+var Avatar = componentGenerator(BaseImage);
+/**
+ * 头像展示组件，支持圆形和方形两种形状，支持图片文字头像，支持五种尺寸。
+ * @en Avatar component supports two shapes of circle and square, supports pictures or text avatars, with five sizes.
+ * @type 数据展示
+ * @type_en Data Display
+ * @name 头像
+ * @name_en Avatar
+ */
+
+export default componentWrapper(Avatar, {
+  Group: Group
+});

package/esm/avatar/style/css/index.css

@@ -0,0 +1,256 @@
+.arco-avatar-wrapper {
+  display: inline-block;
+}
+.arco-avatar-wrapper.with-info.ultra-small {
+  height:  1.12rem ;
+}
+.arco-avatar-wrapper.ultra-small .arco-avatar-name {
+  font-size:  0.26rem ;
+  line-height:  0.36rem ;
+}
+.arco-avatar-wrapper.ultra-small .arco-avatar-desc {
+  margin-top:  0.04rem ;
+  font-size:  0.2rem ;
+  line-height:  0.28rem ;
+}
+.arco-avatar-wrapper.with-info.smaller {
+  height:  1.28rem ;
+}
+.arco-avatar-wrapper.smaller .arco-avatar-name {
+  font-size:  0.28rem ;
+  line-height:  0.4rem ;
+}
+.arco-avatar-wrapper.smaller .arco-avatar-desc {
+  margin-top:  0 ;
+  font-size:  0.24rem ;
+  line-height:  0.32rem ;
+}
+.arco-avatar-wrapper.with-info.small {
+  height:  1.6rem ;
+}
+.arco-avatar-wrapper.small .arco-avatar-name {
+  font-size:  0.32rem ;
+  line-height:  0.48rem ;
+}
+.arco-avatar-wrapper.small .arco-avatar-desc {
+  margin-top:  0 ;
+  font-size:  0.24rem ;
+  line-height:  0.32rem ;
+}
+.arco-avatar-wrapper.with-info.medium {
+  height:  1.6rem ;
+}
+.arco-avatar-wrapper.medium .arco-avatar-name {
+  font-size:  0.36rem ;
+  line-height:  0.52rem ;
+}
+.arco-avatar-wrapper.medium .arco-avatar-desc {
+  margin-top:  0.04rem ;
+  font-size:  0.28rem ;
+  line-height:  0.4rem ;
+}
+.arco-avatar-wrapper.with-info.large {
+  height:  1.76rem ;
+}
+.arco-avatar-wrapper.large .arco-avatar-name {
+  font-size:  0.36rem ;
+  line-height:  0.52rem ;
+}
+.arco-avatar-wrapper.large .arco-avatar-desc {
+  margin-top:  0.04rem ;
+  font-size:  0.28rem ;
+  line-height:  0.4rem ;
+}
+.arco-avatar-wrapper.with-info {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+}
+.arco-avatar {
+  position: relative;
+  font-size: 0;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+          justify-content: center;
+  color:  #fff ;
+  background-color:  #4080FF ;
+}
+.arco-avatar.arco-image-avatar {
+  background-color: transparent;
+}
+.arco-avatar.default-overlap {
+  background-color:  #c9cdd4 ;
+}
+.arco-avatar.circle {
+  border-radius: 50%;
+}
+.arco-avatar.circle .arco-avatar-img .image-content {
+  border-radius: 50%;
+}
+.arco-avatar.square {
+  border-radius: 0.08rem;
+}
+.arco-avatar.square .arco-avatar-img .image-content {
+  border-radius: 0.08rem;
+}
+.arco-avatar.group-ultra-small .arco-avatar-wrapper {
+  margin-left:  -0.16rem ;
+}
+.arco-avatar.group-ultra-small .arco-avatar {
+  border-width:  0.02rem ;
+}
+.arco-avatar.ultra-small {
+  width:  0.48rem ;
+  height:  0.48rem ;
+}
+.arco-avatar.ultra-small .arco-avatar-default {
+  font-size:  0.24rem ;
+}
+.arco-avatar.ultra-small .arco-avatar-text {
+  font-size:  0.2rem ;
+}
+.arco-avatar.group-smaller .arco-avatar-wrapper {
+  margin-left:  -0.16rem ;
+}
+.arco-avatar.group-smaller .arco-avatar {
+  border-width:  0.02rem ;
+}
+.arco-avatar.smaller {
+  width:  0.64rem ;
+  height:  0.64rem ;
+}
+.arco-avatar.smaller .arco-avatar-default {
+  font-size:  0.32rem ;
+}
+.arco-avatar.smaller .arco-avatar-text {
+  font-size:  0.24rem ;
+}
+.arco-avatar.group-small .arco-avatar-wrapper {
+  margin-left:  -0.24rem ;
+}
+.arco-avatar.group-small .arco-avatar {
+  border-width:  0.03rem ;
+}
+.arco-avatar.small {
+  width:  0.8rem ;
+  height:  0.8rem ;
+}
+.arco-avatar.small .arco-avatar-default {
+  font-size:  0.4rem ;
+}
+.arco-avatar.small .arco-avatar-text {
+  font-size:  0.28rem ;
+}
+.arco-avatar.group-medium .arco-avatar-wrapper {
+  margin-left:  -0.24rem ;
+}
+.arco-avatar.group-medium .arco-avatar {
+  border-width:  0.03rem ;
+}
+.arco-avatar.medium {
+  width:  0.96rem ;
+  height:  0.96rem ;
+}
+.arco-avatar.medium .arco-avatar-default {
+  font-size:  0.48rem ;
+}
+.arco-avatar.medium .arco-avatar-text {
+  font-size:  0.32rem ;
+}
+.arco-avatar.group-large .arco-avatar-wrapper {
+  margin-left:  -0.24rem ;
+}
+.arco-avatar.group-large .arco-avatar {
+  border-width:  0.03rem ;
+}
+.arco-avatar.large {
+  width:  1.12rem ;
+  height:  1.12rem ;
+}
+.arco-avatar.large .arco-avatar-default {
+  font-size:  0.56rem ;
+}
+.arco-avatar.large .arco-avatar-text {
+  font-size:  0.32rem ;
+}
+.arco-avatar-img {
+  width: 100%;
+  height: 100%;
+}
+.arco-avatar-decoration {
+  position: absolute;
+}
+.arco-avatar-text {
+  -webkit-box-flex: 0;
+  -webkit-flex: 0 0 auto;
+          flex: 0 0 auto;
+  font-weight: bold;
+}
+.arco-avatar-info {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+          justify-content: center;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+          flex-direction: column;
+  margin-left: 0.32rem;
+}
+.arco-avatar-name {
+  color:  #1d2129 ;
+}
+.arco-avatar-desc {
+  color:  #86909c ;
+}
+.arco-avatar-group .arco-avatar-wrapper.circle {
+  position: relative;
+}
+.arco-avatar-group .arco-avatar-wrapper.circle:first-child {
+  margin-left: 0;
+}
+.arco-avatar-group .arco-avatar {
+  border-style: solid;
+  border-color:  #ffffff ;
+}
+.arco-avatar-group.group-ultra-small .arco-avatar-wrapper {
+  margin-left:  -0.16rem ;
+}
+.arco-avatar-group.group-ultra-small .arco-avatar {
+  border-width:  0.02rem ;
+}
+.arco-avatar-group.group-smaller .arco-avatar-wrapper {
+  margin-left:  -0.16rem ;
+}
+.arco-avatar-group.group-smaller .arco-avatar {
+  border-width:  0.02rem ;
+}
+.arco-avatar-group.group-small .arco-avatar-wrapper {
+  margin-left:  -0.24rem ;
+}
+.arco-avatar-group.group-small .arco-avatar {
+  border-width:  0.03rem ;
+}
+.arco-avatar-group.group-medium .arco-avatar-wrapper {
+  margin-left:  -0.24rem ;
+}
+.arco-avatar-group.group-medium .arco-avatar {
+  border-width:  0.03rem ;
+}
+.arco-avatar-group.group-large .arco-avatar-wrapper {
+  margin-left:  -0.24rem ;
+}
+.arco-avatar-group.group-large .arco-avatar {
+  border-width:  0.03rem ;
+}

package/esm/avatar/style/css/index.d.ts

@@ -0,0 +1,3 @@
+import '../../../../style/css/public.css';
+import '../../../image/style/css';
+import './index.css';

package/esm/avatar/style/css/index.js

@@ -0,0 +1,3 @@
+import '../../../../style/css/public.css';
+import '../../../image/style/css';
+import './index.css';

package/esm/avatar/style/index.d.ts

@@ -0,0 +1,3 @@
+import '../../../style/public.less';
+import '../../image/style';
+import './index.less';

package/esm/avatar/style/index.js

@@ -0,0 +1,3 @@
+import '../../../style/public.less';
+import '../../image/style';
+import './index.less';

package/esm/avatar/style/index.less

@@ -0,0 +1,166 @@
+@import "../../../style/mixin.less";
+
+@size-map: @avatar-size-map;
+
+.@{prefix}-avatar-wrapper {
+    display: inline-block;
+    .set-with-info-avatar-size(length(@size-map));
+
+    &.with-info {
+        display: flex;
+        align-items: center;
+    }
+}
+
+.@{prefix}-avatar {
+    position: relative;
+    font-size: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .use-var(color, avatar-text-font-color);
+    .use-var(background-color, avatar-background);
+    &.@{prefix}-image-avatar {
+        background-color: transparent;
+    }
+
+    &.default-overlap {
+        .use-var(background-color, avatar-default-overlap-background);
+    }
+
+    &.circle {
+        .set-avatar-radius(50%);
+    }
+
+    &.square {
+        .set-avatar-radius(.08rem);
+    }
+    .set-avatar-size(length(@size-map));
+
+    &-img {
+        width: 100%;
+        height: 100%;
+    }
+
+    &-decoration {
+        position: absolute;
+    }
+
+    &-text {
+        flex: 0 0 auto;
+        font-weight: bold;
+    }
+}
+
+.@{prefix}-avatar-info {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    .rem(margin-left, 16);
+}
+
+.@{prefix}-avatar-name {
+    .use-var(color, avatar-name-color);
+}
+
+.@{prefix}-avatar-desc {
+    .use-var(color, avatar-desc-color);
+}
+
+
+.@{prefix}-avatar-group {
+    .@{prefix}-avatar-wrapper.circle {
+        position: relative; // 为了让z-index属性生效
+
+        &:first-child {
+            margin-left: 0;
+        }
+    }
+
+    .@{prefix}-avatar {
+        border-style: solid;
+        .use-var(border-color, avatar-group-border-color);
+    }
+
+    .set-avatar-group-size(length(@size-map));
+}
+
+.set-avatar-radius(@radius) {
+    border-radius: @radius;
+    .@{prefix}-avatar-img .image-content {
+        border-radius: @radius;
+    }
+}
+
+// 循环设置各头像大小的属性
+
+.set-with-info-avatar-size(@index) when (@index > 0) {
+
+    @size: extract(@size-map, @index);
+
+    // 有辅助信息的样式
+    &.with-info.@{size} {
+        .use-var(height, "avatar-info-box-@{size}-size");
+    }
+
+    // 用户名样式
+    &.@{size} .@{prefix}-avatar-name {
+        .use-var(font-size, "avatar-name-@{size}-font-size");
+        .use-var(line-height, "avatar-name-@{size}-line-height");
+    }
+
+    // 用户描述样式
+    &.@{size} .@{prefix}-avatar-desc {
+        .use-var(margin-top, "avatar-desc-@{size}-margin-top");
+        .use-var(font-size, "avatar-desc-@{size}-font-size");
+        .use-var(line-height, "avatar-desc-@{size}-line-height");
+    }
+
+    .set-with-info-avatar-size(@index - 1);
+}
+
+// 循环设置头像叠层的样式
+.set-avatar-group-size(@index) when (@index > 0) {
+
+    @size: extract(@size-map, @index);
+
+    &.group-@{size} {
+        .@{prefix}-avatar-wrapper {
+            .use-var(margin-left, "avatar-group-@{size}-size-offset");
+        }
+        .@{prefix}-avatar {
+            .use-var(border-width, "avatar-group-@{size}-size-border");
+        }
+    }
+
+    .set-avatar-group-size(@index - 1);
+}
+
+// 循环设置头像的样式
+.set-avatar-size(@index) when (@index > 0) {
+
+    @size: extract(@size-map, @index);
+
+    &.group-@{size} {
+        .@{prefix}-avatar-wrapper {
+            .use-var(margin-left, "avatar-group-@{size}-size-offset");
+        }
+        .@{prefix}-avatar {
+            .use-var(border-width, "avatar-group-@{size}-size-border");
+        }
+    }
+
+    &.@{size} {
+        .use-var(width, "avatar-@{size}-size");
+        .use-var(height, "avatar-@{size}-size");
+        .@{prefix}-avatar-default {
+            .use-var(font-size, "avatar-default-overlap-@{size}-size");
+        }
+        .@{prefix}-avatar-text {
+            .use-var(font-size, "avatar-@{size}-text-font-size");
+        }
+    }
+
+    .set-avatar-size(@index - 1);
+}
+