@arco-design/mobile-react 2.31.6 → 2.32.0

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

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

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

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

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

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

package/esnext/avatar/style/index.js

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

package/esnext/avatar/style/index.less

@@ -0,0 +1,201 @@
+@import "../../../style/mixin.less";
+
+@size-map: @avatar-size-map;
+
+.@{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);
+
+    &-mode-image {
+        background-color: transparent !important;
+    }
+
+    &-default-overlap {
+        .use-var(background-color, avatar-default-overlap-background);
+    }
+
+    &-shape-circle {
+        .set-avatar-radius(50%);
+    }
+
+    &-shape-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;
+    }
+
+    &-wrapper {
+        display: inline-block;
+
+        &-with-info {
+            display: flex;
+            align-items: center;
+        }
+    }
+
+    &-info {
+        display: flex;
+        justify-content: center;
+        flex-direction: column;
+        .rem-with-rtl(margin-left, 16);
+    }
+
+    &-name {
+        .use-var(color, avatar-name-color);
+    }
+
+    &-desc {
+        .use-var(color, avatar-desc-color);
+    }
+}
+
+.@{prefix}-avatar-group {
+    .@{prefix}-avatar-wrapper-shape-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-avatar-group-size(@index) when (@index > 0) {
+
+    @size: extract(@size-map, @index);
+
+    &-size-@{size} {
+        .@{prefix}-avatar-wrapper {
+            .use-var-with-rtl(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);
+
+    &-size-@{size} {
+        .use-var(width, "avatar-@{size}-size");
+        .use-var(height, "avatar-@{size}-size");
+    }
+    &-default-icon-size-@{size} {
+        .use-var(font-size, "avatar-default-overlap-@{size}-size");
+    }
+    &-text-size-@{size} {
+        .use-var(font-size, "avatar-@{size}-text-font-size");
+    }
+
+    // 有辅助信息的样式
+    &-wrapper-with-info-size-@{size} {
+        .use-var(height, "avatar-info-box-@{size}-size");
+    }
+
+    // 用户名样式
+    &-name-size-@{size} {
+        .use-var(font-size, "avatar-name-@{size}-font-size");
+        .use-var(line-height, "avatar-name-@{size}-line-height");
+    }
+
+    // 用户描述样式
+    &-desc-size-@{size} {
+        .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-avatar-size(@index - 1);
+}
+
+
+/***************************************************
+ *                                                 *
+ *               Arco Theme Style                  *
+ *                                                 *
+ ***************************************************/
+& when (@use-dark-mode = 1) {
+    
+  .process-bg-color-with-config,
+  .process-custom-icon-bg-color-with-config {
+    @{arco-dark-mode-selector} & {
+      .use-var(color, dark-steps-process-with-config-item-icon-color);
+      .use-var(color, dark-steps-process-with-config-item-icon-color);
+    }
+  }
+  .wait-custom-icon-bg-color-with-config {
+    @{arco-dark-mode-selector} & {
+      .use-var(background, dark-steps-wait-icon-num-background);
+      .use-var(color, dark-sub-info-font-color);
+      .use-var(background, dark-steps-wait-icon-num-background);
+      .use-var(color, dark-sub-info-font-color);
+    }
+  }
+  .@{prefix}-avatar {
+    @{arco-dark-mode-selector} & {
+      .use-var(color, dark-avatar-text-font-color);
+      .use-var(background-color, dark-avatar-background);
+    }
+    &-default-overlap {
+      @{arco-dark-mode-selector} & {
+        .use-var(background-color, dark-avatar-default-overlap-background);
+      }
+    }
+    &-name {
+      @{arco-dark-mode-selector} & {
+        .use-var(color, dark-avatar-name-color);
+      }
+    }
+    &-desc {
+      @{arco-dark-mode-selector} & {
+        .use-var(color, dark-avatar-desc-color);
+      }
+    }
+  }
+  .@{prefix}-avatar-group {
+    .@{prefix}-avatar {
+      @{arco-dark-mode-selector} & {
+        .use-var(border-color, dark-avatar-group-border-color);
+      }
+    }
+  }
+}
+/********************* End *************************/

package/esnext/avatar/type.d.ts

@@ -0,0 +1,126 @@
+import React from 'react';
+import { ImageProps } from '../image';
+import { BaseProps, BaseRef } from '../_helpers';
+export interface AvatarProps<T extends ImageProps = ImageProps> extends BaseProps {
+    /**
+     * 形状
+     * @en Shapre
+     * @default "circle"
+     */
+    shape?: 'circle' | 'square';
+    /**
+     * 尺寸
+     * @en Size
+     * @default "small"
+     */
+    size?: 'medium' | 'large' | 'small' | 'smaller' | 'ultra-small';
+    /**
+     * 图片头像的资源地址
+     * @en resource of avatar picture
+     */
+    src?: string;
+    /**
+     * 图片头像组件参数，透传给Image组件
+     * @en Image avatar component props, transparently passed to the Image component
+     */
+    imageProps?: Partial<T>;
+    /**
+     * 图片头像上的装饰
+     * @en the decoration for image avatar
+     * @default null
+     */
+    decoration?: React.ReactNode;
+    /**
+     * 文字头像，中文建议取两个字，英文建议在三个字以下
+     * @en Text Avatar, two characters in Chinese, and three characters or less in English are recommended.
+     * @default ""
+     */
+    textAvatar?: string;
+    /**
+     * 头像元素的自定义样式
+     * @en Custom style for avatar element
+     * @default {}
+     */
+    avatarStyle?: React.CSSProperties;
+    /**
+     * 是否自动根据头像尺寸调整字体大小
+     * @en Whether to automatically adjust the font size according to the avatar size
+     * @default true
+     */
+    autoFixFontSize?: boolean;
+    /**
+     * 自动调整文字头像大小时，文字距离头像容器左右的安全距离
+     * @en When automatically adjusting the size of the text head image, the safe distance between the text and the left and right of the avatar container
+     * @default 2
+     */
+    autoFixFontOffset?: number;
+    /**
+     * 头像旁的用户名信息
+     * @en Username information next to the avatar
+     * @default ""
+     */
+    avatarName?: string;
+    /**
+     * 头像旁的辅助信息，需要和用户名一起出现
+     * @en Auxiliary information next to the avatar, which needs to appear together with the username
+     * @default ""
+     */
+    avatarDesc?: string;
+    /**
+     * 自定义头像描述信息
+     * @en Custom avatar description information
+     * @default null
+     */
+    renderInfo?: React.ReactNode;
+    /**
+     * 头像组件为空时默认的状态
+     * @en The default state when the avatar component is empty
+     * @default 用户图标
+     * @default_en User Icon
+     */
+    defaultOverLap?: React.ReactNode;
+    /**
+     * 点击头像的回调事件
+     * @en callback event when clicking the avatar
+     * @default () => {}
+     */
+    onClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    /**
+     * 点击头像上的装饰
+     * @en callback when clicking on the decoration on the avatar
+     * @default () => {}
+     */
+    onClickDecoration?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+}
+export interface AvatarRef extends BaseRef {
+}
+export interface AvatarGroupContextParams {
+    /**
+     * 是否为头像组
+     * @en Whether it is an avatar group
+     * @default false
+     */
+    isGroup: boolean;
+    /**
+     * 形状，优先级低于Avatar组件本身
+     * @en Shape, which has lower priority than the avatar component
+     * @default "circle"
+     */
+    shape?: 'circle' | 'square';
+    /**
+     * 尺寸，优先级低于Avatar组件本身
+     * @en Size,  which has lower priority than the avatar component
+     * @default "medium"
+     */
+    size?: 'medium' | 'large' | 'small' | 'smaller' | 'ultra-small';
+    /**
+     * 头像组叠层层级顺序，z-index值大小，desc - 降序，asc - 升序
+     * @en Avatar group stacking level order, that is, z-index value, desc - descending order, asc - ascending order
+     * @default "desc"
+     */
+    zIndexOrder?: 'desc' | 'asc';
+}
+export interface AvatarGroupProps extends AvatarGroupContextParams, BaseProps {
+}
+export interface AvatarGroupRef extends BaseRef {
+}

package/esnext/avatar/type.js

@@ -0,0 +1 @@
+export {};

package/esnext/badge/index.d.ts

@@ -0,0 +1,80 @@
+import React, { ReactNode } from 'react';
+export interface BadgeProps {
+    /**
+     * 自定义类名
+     * @en Custom classname
+     */
+    className?: string;
+    /**
+     * 自定义样式
+     * @en Custom stylesheet
+     */
+    style?: React.CSSProperties;
+    /**
+     * 是否展示徽标，visible切换时有动画过渡
+     * @en Whether to display the badge, there is an animation transition when the visible status switch
+     * @default true
+     */
+    visible?: boolean;
+    /**
+     * 徽标文案
+     * @en badge text
+     */
+    text?: string | number;
+    /**
+     * 显示为一个小红点
+     * @en show as a red dot
+     * @default false
+     */
+    dot?: boolean;
+    /**
+     * 最大完整展示数字，超出后将展示 +
+     * @en Maximum full impression number, it will be displayed "+" beyond the number
+     * @default 99
+     */
+    maxCount?: number;
+    /**
+     * 内容
+     * @en Badge content
+     */
+    children?: ReactNode;
+    /**
+     * 是否置于右上角
+     * @en Whether the badge is placed in the upper right corner
+     * @default false
+     */
+    absolute?: boolean;
+    /**
+     * 是否有白色边框
+     * @en Whether the badge has a white border
+     * @default false
+     */
+    bordered?: boolean;
+    /**
+     * 动画持续时间(ms)
+     * @en Animation duration(ms)
+     * @default 300
+     */
+    timeout?: number | {
+        appear?: number;
+        enter?: number;
+        exit?: number;
+    };
+}
+export interface BadgeRef {
+    /**
+     * 最外层元素 DOM
+     * @en The outermost element DOM
+     */
+    dom: HTMLDivElement | null;
+}
+/**
+ * 在右上角展示徽标数字或小红点
+ * @en Display the badge number or small red dot in the upper right corner
+ * @type 信息展示
+ * @type_en Data Display
+ * @name 徽标
+ * @name_en Badge
+ */
+declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<BadgeRef>>;
+export default Badge;

package/esnext/badge/index.js

@@ -0,0 +1,29 @@
+import React, { useRef, forwardRef, useImperativeHandle } from 'react';
+import { cls } from '@arco-design/mobile-utils';
+import Transition from '../transition';
+import { ContextLayout } from '../context-provider';
+/**
+ * 在右上角展示徽标数字或小红点
+ * @en Display the badge number or small red dot in the upper right corner
+ * @type 信息展示
+ * @type_en Data Display
+ * @name 徽标
+ * @name_en Badge
+ */
+const Badge = forwardRef((props, ref) => {
+    const { className = '', style = {}, visible = true, text, dot = false, maxCount = 99, children = null, absolute = false, bordered = false, timeout = 300, } = props;
+    const domRef = useRef(null);
+    useImperativeHandle(ref, () => ({
+        dom: domRef.current,
+    }));
+    function renderInnerBadge(prefix) {
+        return dot ? null : (React.createElement("span", { className: `${prefix}-text badge-text` }, Number(text) && Number(text) > maxCount ? `${maxCount}+` : text));
+    }
+    return (React.createElement(ContextLayout, null, ({ prefixCls }) => (React.createElement(Transition, { in: visible, timeout: timeout, type: "scale", nodeRef: domRef },
+        React.createElement("div", { className: cls(`${prefixCls}-badge`, className, {
+                [`${prefixCls}-badge-dot dot`]: dot,
+                [`${prefixCls}-badge-bordered bordered`]: bordered,
+                [`${prefixCls}-badge-absolute absolute`]: absolute,
+            }), style: style, ref: domRef }, children || renderInnerBadge(`${prefixCls}-badge`))))));
+});
+export default Badge;