@arco-design/mobile-react 2.31.5 → 2.32.0

package/esnext/action-sheet/style/css/index.d.ts

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

package/esnext/action-sheet/style/css/index.js

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

package/esnext/action-sheet/style/index.d.ts

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

package/esnext/action-sheet/style/index.js

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

package/esnext/action-sheet/style/index.less

@@ -0,0 +1,119 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-action-sheet {
+    .use-var(color, font-color);
+
+    &-header {
+        .use-var(padding, action-sheet-header-padding);
+        text-align: center;
+        .onepx-border-var(bottom, line-color);
+    }
+
+    &-title {
+        .use-var(font-size, action-sheet-title-font-size);
+        .text-medium();
+    }
+
+    &-sub-title {
+        .use-var(color, sub-info-font-color);
+        .use-var(font-size, action-sheet-sub-title-font-size);
+    }
+
+    &-title + &-sub-title {
+        .rem(margin-top, 4);
+    }
+
+    &-content {
+        .use-var(border-top-left-radius, action-sheet-border-radius);
+        .use-var(border-top-right-radius, action-sheet-border-radius);
+    }
+
+    &-item {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .use-var(height, action-sheet-item-height);
+        .use-var(font-size, action-sheet-item-font-size);
+        .noselect();
+
+        &:not(:last-child) {
+            .onepx-border-var(bottom, line-color);
+        }
+
+        &.disabled {
+            .use-var(color, disabled-color);
+        }
+
+        &.danger {
+            .use-var(color, danger-color);
+        }
+
+        &.cancel-item {
+            border-top-style: solid;
+            .use-var(border-top-color, action-sheet-cancel-border-color);
+            .use-var(border-top-width, action-sheet-cancel-border-width);
+        }
+    }
+}
+
+/***************************************************
+ *                                                 *
+ *               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}-action-sheet {
+    @{arco-dark-mode-selector} & {
+      .use-var(color, dark-font-color);
+    }
+    &-header {
+      @{arco-dark-mode-selector} & {
+        .onepx-border-var(bottom, dark-line-color);
+      }
+    }
+    &-sub-title {
+      @{arco-dark-mode-selector} & {
+        .use-var(color, dark-sub-info-font-color);
+      }
+    }
+    &-item {
+      &:not(:last-child) {
+        @{arco-dark-mode-selector} & {
+          .onepx-border-var(bottom, dark-line-color);
+        }
+      }
+      &.disabled {
+        @{arco-dark-mode-selector} & {
+          .use-var(color, dark-disabled-color);
+        }
+      }
+      &.danger {
+        @{arco-dark-mode-selector} & {
+          .use-var(color, dark-danger-color);
+        }
+      }
+      &.cancel-item {
+        @{arco-dark-mode-selector} & {
+          .use-var(border-top-color, dark-action-sheet-cancel-border-color);
+        }
+      }
+    }
+  }
+}
+/********************* End *************************/

package/esnext/avatar/group.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { AvatarGroupContextParams, AvatarGroupProps, AvatarGroupRef } from './type';
+export declare const AvatarGroupContext: React.Context<AvatarGroupContextParams>;
+/**
+ * 头像叠层
+ * @en Avatar group
+ */
+export declare const Group: React.ForwardRefExoticComponent<AvatarGroupProps & React.RefAttributes<AvatarGroupRef>>;
+export default Group;

package/esnext/avatar/group.js

@@ -0,0 +1,35 @@
+import React, { forwardRef, useImperativeHandle, useRef, useContext, } from 'react';
+import { cls } from '@arco-design/mobile-utils';
+import { GlobalContext } from '../context-provider';
+export const AvatarGroupContext = React.createContext({
+    isGroup: false,
+    shape: 'circle',
+    size: 'small',
+});
+/**
+ * 头像叠层
+ * @en Avatar group
+ */
+export const Group = forwardRef((props, ref) => {
+    const { style = {}, className = '', shape = 'circle', size = 'medium', zIndexOrder = 'desc', children, } = props;
+    const { prefixCls } = useContext(GlobalContext);
+    const childrenArr = React.Children.toArray(children);
+    const { length } = childrenArr;
+    const domRef = useRef(null);
+    useImperativeHandle(ref, () => ({
+        dom: domRef.current,
+    }));
+    return (React.createElement("div", { ref: domRef, style: style, className: cls(className, `${prefixCls}-avatar-group`, `${prefixCls}-avatar-group-size-${size}`, `group-${size}`) },
+        React.createElement(AvatarGroupContext.Provider, { value: { isGroup: true, shape, size } }, childrenArr.map((child, i) => {
+            const childProps = (child || {}).props;
+            const avatarStyle = {
+                zIndex: zIndexOrder === 'asc' ? i + 1 : length - i,
+                ...childProps.style,
+            };
+            return React.cloneElement(child, {
+                ...childProps,
+                style: avatarStyle,
+            });
+        }))));
+});
+export default Group;

package/esnext/avatar/index.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { ImageProps, ImageRef } from '../image';
+import { AvatarProps, AvatarRef } from './type';
+export * from './type';
+export declare function componentGenerator<P extends ImageProps = ImageProps, R extends ImageRef = ImageRef>(Comp: React.ForwardRefExoticComponent<P & React.RefAttributes<R>>): React.ForwardRefExoticComponent<AvatarProps<P> & React.RefAttributes<AvatarRef>>;
+declare const _default: React.ForwardRefExoticComponent<AvatarProps<ImageProps & React.RefAttributes<ImageRef>> & React.RefAttributes<AvatarRef>> & {
+    Group: React.ForwardRefExoticComponent<import("./type").AvatarGroupProps & React.RefAttributes<import("./type").AvatarGroupRef>>;
+};
+/**
+ * 头像展示组件，支持圆形和方形两种形状，支持图片文字头像，支持五种尺寸。
+ * @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 _default;

package/esnext/avatar/index.js

@@ -0,0 +1,87 @@
+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 forwardRef((props, ref) => {
+        const { prefixCls } = useContext(GlobalContext);
+        const { shape: groupShape, size: groupSize, isGroup } = useContext(AvatarGroupContext);
+        const { shape = props.shape || (isGroup ? groupShape : 'circle'), size = props.size || (isGroup ? groupSize : 'small'), src, decoration = null, textAvatar = '', avatarStyle = {}, autoFixFontSize = true, autoFixFontOffset = 2, avatarName = '', avatarDesc = '', children = null, renderInfo = null, className = '', style = {}, imageProps = {}, defaultOverLap, onClickDecoration, onClick, } = props;
+        const domRef = useRef(null);
+        const avatarRef = useRef(null);
+        const avatarTextRef = useRef(null);
+        const [textScale, setTextScale] = useState(1);
+        useImperativeHandle(ref, () => ({
+            dom: domRef.current,
+        }));
+        // 图片头像
+        // @en Picture avatar
+        const isImageAvatar = !children && src !== void 0;
+        // 文字头像
+        // @en Text avatar
+        const isTextAvatar = !children && !isImageAvatar && textAvatar;
+        // 使用默认头像
+        // @en Whether to use default avatar
+        const useDefaultAvatar = !children && !isImageAvatar && !isTextAvatar;
+        useEffect(() => {
+            getComputedTextScale();
+        }, [textAvatar]);
+        /**
+         * 根据字体元素宽度和头像大小动态调整缩放比例
+         * @en Dynamically adjust scaling based on font element width and avatar size
+         */
+        function getComputedTextScale() {
+            if (!isTextAvatar || !autoFixFontSize || !avatarRef || !avatarTextRef)
+                return;
+            const { width: avatarWidth = 0 } = avatarRef.current?.getBoundingClientRect() || {};
+            const { width: textWidth = 0 } = avatarTextRef.current?.getBoundingClientRect() || {};
+            if (avatarWidth === 0 || textWidth === 0)
+                return;
+            // 文本节点宽度大于头像元素时进行动态缩放
+            // @en Dynamic scaling when the width of the text node is larger than the avatar element
+            const maxWidth = avatarWidth - 2 * autoFixFontOffset;
+            if (textWidth > maxWidth) {
+                const scale = maxWidth / textWidth;
+                setTextScale(textScale * scale);
+            }
+        }
+        return (React.createElement("div", { ref: domRef, style: style, className: cls(`${prefixCls}-avatar-wrapper`, className, size, shape, `${prefixCls}-avatar-wrapper-shape-${shape}`, {
+                [`${prefixCls}-avatar-wrapper-with-info ${prefixCls}-avatar-wrapper-with-info-size-${size} with-info`]: Boolean(avatarName),
+            }), onClick: onClick },
+            React.createElement("div", { className: cls(`${prefixCls}-avatar`, `${prefixCls}-avatar-size-${size}`, size, `${prefixCls}-avatar-shape-${shape}`, shape, {
+                    [`${prefixCls}-text-avatar ${prefixCls}-avatar-mode-text`]: isTextAvatar,
+                    [`${prefixCls}-image-avatar ${prefixCls}-avatar-mode-image`]: isImageAvatar,
+                    [`${prefixCls}-avatar-default-overlap default-overlap`]: useDefaultAvatar,
+                }), style: avatarStyle, ref: avatarRef },
+                children,
+                useDefaultAvatar &&
+                    (defaultOverLap === void 0 ? (React.createElement(IconUserFill, { className: `${prefixCls}-avatar-default ${prefixCls}-avatar-default-icon-size-${size}` })) : (defaultOverLap)),
+                isImageAvatar && src && (React.createElement(Comp, Object.assign({}, {
+                    className: `${prefixCls}-avatar-img`,
+                    src,
+                }, imageProps))),
+                isTextAvatar && (React.createElement("span", { className: `${prefixCls}-avatar-text ${prefixCls}-avatar-text-size-${size}`, ref: avatarTextRef, style: {
+                        transform: `scale(${textScale})`,
+                    } }, textAvatar)),
+                decoration && (React.createElement("div", { className: `${prefixCls}-avatar-decoration`, onClick: onClickDecoration }, decoration))),
+            renderInfo,
+            !renderInfo && avatarName && (React.createElement("div", { className: cls(`${prefixCls}-avatar-info`) },
+                React.createElement("div", { className: `${prefixCls}-avatar-name ${prefixCls}-avatar-name-size-${size}` }, avatarName),
+                avatarDesc && (React.createElement("div", { className: `${prefixCls}-avatar-desc ${prefixCls}-avatar-desc-size-${size}` }, avatarDesc))))));
+    });
+}
+const 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,
+});