@arco-design/mobile-react 2.19.0

package/cjs/action-sheet/index.d.ts

@@ -0,0 +1,106 @@
+import React, { ReactNode, CSSProperties } from 'react';
+import { PopupProps } from '../popup';
+import { OpenBaseProps } from '../masking';
+export interface ActionSheetItemOptions {
+    /**
+     * 选项文字内容
+     * @en Option text
+     */
+    content: ReactNode;
+    /**
+     * 状态，disabled 状态下不可点，danger 状态字体飘红
+     * @en Status, it isn't clickable in disabled status, its font is red in danger status
+     * */
+    status?: 'normal' | 'disabled' | 'danger';
+    /**
+     * 选项文字自定义类名
+     * @en Custom classname for option content
+     */
+    className?: string;
+    /**
+     * 选项文字自定义样式
+     * @en Custom stylesheet for option content
+     */
+    style?: CSSProperties;
+    /**
+     * 点击选项事件，返回值为 true 时可以阻止动作面板关闭
+     * @en Click option event, actionSheet will be prevent from closing when returning true
+     */
+    onClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => (void | boolean) | Promise<void | boolean>;
+}
+export interface ActionSheetProps extends Omit<PopupProps, 'children' | 'getScrollContainer' | 'orientationDirection' | 'direction'> {
+    /**
+     * 选项配置，详情见 ActionSheetItemOptions
+     * @en Option setting, see ActionSheetItemOptions for details
+     */
+    items: ActionSheetItemOptions[];
+    /**
+     * 取消按钮内容，传值则会展示，点击后关闭动作面板
+     * @en Cancel button content, the value will be shown, actionSheet will be closed when clicked
+     */
+    cancelText?: ReactNode;
+    /**
+     * 面板标题内容
+     * @en Title content
+     */
+    title?: ReactNode;
+    /**
+     * 面板副标题内容
+     * @en Sub title content
+     */
+    subTitle?: ReactNode;
+    /**
+     * 从底部滑出的菜单内容是否适配ipx底部
+     * @en Whether the content of the menu that slides out from the bottom fits the bottom of the iphoneX
+     * @default true
+     */
+    needBottomOffset?: boolean;
+}
+export interface ActionSheetRef {
+    /**
+     * 最外层元素 DOM
+     * @en The outermost element DOM
+     */
+    dom: HTMLDivElement | null;
+}
+export declare function methodsGenerator<P extends OpenBaseProps>(Comp: React.FunctionComponent<P>): {
+    /**
+     * 打开动作面板
+     * @desc {en} Open actionsheet
+     * @param {ActionSheetProps} config setting
+     * @returns {{ close: () => void; update: (newConfig: ActionSheetProps) => void; }}
+     */
+    open: (config: Pick<P, Exclude<keyof P, "visible" | "close">> & {
+        key?: string | undefined;
+    }) => {
+        close: () => void;
+        update: (newConfig: Pick<P, Exclude<keyof P, "visible" | "close">> & {
+            key?: string | undefined;
+        }) => void;
+    };
+};
+declare const _default: React.ForwardRefExoticComponent<ActionSheetProps & React.RefAttributes<ActionSheetRef>> & {
+    /**
+     * 打开动作面板
+     * @desc {en} Open actionsheet
+     * @param {ActionSheetProps} config setting
+     * @returns {{ close: () => void; update: (newConfig: ActionSheetProps) => void; }}
+     */
+    open: (config: Pick<ActionSheetProps & React.RefAttributes<ActionSheetRef>, "title" | "ref" | "key" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "className" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onTouchMove" | "onPreventTouchMove" | "needBottomOffset" | "translateZ" | "items" | "cancelText" | "subTitle"> & {
+        key?: string | undefined;
+    }) => {
+        close: () => void;
+        update: (newConfig: Pick<ActionSheetProps & React.RefAttributes<ActionSheetRef>, "title" | "ref" | "key" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "className" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onTouchMove" | "onPreventTouchMove" | "needBottomOffset" | "translateZ" | "items" | "cancelText" | "subTitle"> & {
+            key?: string | undefined;
+        }) => void;
+    };
+};
+/**
+ * 动作面板组件
+ * @en ActionSheet Commponent
+ * @type 反馈
+ * @type_en FeedBack
+ * @name 动作面板
+ * @name_en ActionSheet
+ */
+export default _default;

package/cjs/action-sheet/index.js

@@ -0,0 +1,122 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+exports.methodsGenerator = methodsGenerator;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _mobileUtils = require("@arco-design/mobile-utils");
+
+var _contextProvider = require("../context-provider");
+
+var _popup = _interopRequireDefault(require("../popup"));
+
+var _methods = require("./methods");
+
+var _excluded = ["className", "items", "cancelText", "close", "title", "subTitle", "needBottomOffset"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var ActionSheet = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var _props$className = props.className,
+      className = _props$className === void 0 ? '' : _props$className,
+      items = props.items,
+      cancelText = props.cancelText,
+      close = props.close,
+      title = props.title,
+      subTitle = props.subTitle,
+      _props$needBottomOffs = props.needBottomOffset,
+      needBottomOffset = _props$needBottomOffs === void 0 ? true : _props$needBottomOffs,
+      otherProps = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  var popupRef = (0, _react.useRef)(null);
+  (0, _react.useImperativeHandle)(ref, function () {
+    return popupRef.current;
+  });
+
+  function handleItemClick(e, item) {
+    e.stopPropagation();
+
+    if (item.status === 'disabled') {
+      return;
+    }
+
+    var result = item.onClick ? item.onClick(e) : null;
+
+    if (!result || typeof result === 'boolean') {
+      !result && (close == null ? void 0 : close(e));
+    } else if (result && result.then) {
+      result.then(function (res) {
+        return !res && (close == null ? void 0 : close(e));
+      });
+    }
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_contextProvider.ContextLayout, null, function (_ref) {
+    var prefixCls = _ref.prefixCls;
+    return /*#__PURE__*/_react.default.createElement(_popup.default, (0, _extends2.default)({
+      ref: popupRef,
+      className: (0, _mobileUtils.cls)(prefixCls + "-action-sheet", className),
+      contentClass: prefixCls + "-action-sheet-content",
+      close: close,
+      direction: "bottom",
+      needBottomOffset: needBottomOffset
+    }, otherProps), title || subTitle ? /*#__PURE__*/_react.default.createElement("div", {
+      className: prefixCls + "-action-sheet-header"
+    }, title ? /*#__PURE__*/_react.default.createElement("div", {
+      className: prefixCls + "-action-sheet-title"
+    }, title) : null, subTitle ? /*#__PURE__*/_react.default.createElement("div", {
+      className: prefixCls + "-action-sheet-sub-title"
+    }, subTitle) : null) : null, /*#__PURE__*/_react.default.createElement("div", {
+      className: prefixCls + "-action-sheet-list"
+    }, (items || []).map(function (item, index) {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _mobileUtils.cls)(prefixCls + "-action-sheet-item", item.className, item.status || 'normal'),
+        key: index,
+        style: item.style,
+        onClick: function onClick(e) {
+          return handleItemClick(e, item);
+        }
+      }, item.content);
+    })), cancelText ? /*#__PURE__*/_react.default.createElement("div", {
+      className: prefixCls + "-action-sheet-item cancel-item",
+      onClick: function onClick(e) {
+        e.stopPropagation();
+        close == null ? void 0 : close(e);
+      }
+    }, cancelText) : null);
+  });
+});
+
+function methodsGenerator(Comp) {
+  return {
+    /**
+     * 打开动作面板
+     * @desc {en} Open actionsheet
+     * @param {ActionSheetProps} config setting
+     * @returns {{ close: () => void; update: (newConfig: ActionSheetProps) => void; }}
+     */
+    open: (0, _methods.open)(Comp)
+  };
+}
+/**
+ * 动作面板组件
+ * @en ActionSheet Commponent
+ * @type 反馈
+ * @type_en FeedBack
+ * @name 动作面板
+ * @name_en ActionSheet
+ */
+
+
+var _default = (0, _mobileUtils.componentWrapper)(ActionSheet, methodsGenerator(ActionSheet));
+
+exports.default = _default;

package/cjs/action-sheet/methods.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { OpenBaseProps } from '../masking/methods';
+export declare function open<P extends OpenBaseProps>(Component: React.FunctionComponent<P>): (config: Pick<P, Exclude<keyof P, "visible" | "close">> & {
+    key?: string | undefined;
+}) => {
+    close: () => void;
+    update: (newConfig: Pick<P, Exclude<keyof P, "visible" | "close">> & {
+        key?: string | undefined;
+    }) => void;
+};

package/cjs/action-sheet/methods.js

@@ -0,0 +1,10 @@
+"use strict";
+
+exports.__esModule = true;
+exports.open = open;
+
+var _methods = require("../masking/methods");
+
+function open(Component) {
+  return (0, _methods.open)(Component, 'ARCO_ACTION_SHEET');
+}

package/cjs/action-sheet/style/css/index.css

@@ -0,0 +1,130 @@
+.arco-action-sheet {
+  color:  #1d2129 ;
+}
+.arco-action-sheet-header {
+  padding:  0.32rem ;
+  text-align: center;
+  position: relative;
+  border-width: 0;
+}
+.arco-action-sheet-header::after {
+  content: '';
+  width: 100%;
+  height: 1PX;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  z-index: 1;
+  border-bottom-style: solid;
+  border-bottom-width: 1PX;
+  border-bottom-color: #e5e6eb;
+  box-sizing: border-box;
+  transform-origin: left bottom;
+  -webkit-transform-origin: left bottom;
+  pointer-events: none;
+  border-radius: 0;
+}
+@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
+  .arco-action-sheet-header::after {
+    transform: scaleY(0.5);
+    -webkit-transform: scaleY(0.5);
+    border-radius: 0;
+  }
+}
+@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
+  .arco-action-sheet-header::after {
+    transform: scaleY(0.33333333);
+    -webkit-transform: scaleY(0.33333333);
+    border-radius: 0;
+  }
+}
+.arco-action-sheet-title {
+  font-size:  0.32rem ;
+  font-weight: bold;
+}
+.android .arco-action-sheet-title,
+.arco-action-sheet-title.android,
+.arco-action-sheet-title.system-android {
+  font-weight: 400;
+  -webkit-text-stroke: 0.3PX #1d2129;
+  text-stroke: 0.3PX #1d2129;
+}
+.arco-action-sheet-sub-title {
+  color:  #86909c ;
+  font-size:  0.28rem ;
+}
+.arco-action-sheet-title + .arco-action-sheet-sub-title {
+  margin-top: 0.08rem;
+}
+.arco-action-sheet-content {
+  border-top-left-radius:  0.16rem ;
+  border-top-right-radius:  0.16rem ;
+}
+.arco-action-sheet-item {
+  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;
+  height:  1.08rem ;
+  font-size:  0.32rem ;
+  -webkit-touch-callout: none;
+  /* iOS Safari */
+  -webkit-user-select: none;
+  /* Chrome/Safari/Opera */
+  /* Konqueror */
+  /* Firefox */
+  /* Internet Explorer/Edge */
+  user-select: none;
+  /* Non-prefixed version, currently*/
+}
+.arco-action-sheet-item:not(:last-child) {
+  position: relative;
+  border-width: 0;
+}
+.arco-action-sheet-item:not(:last-child)::after {
+  content: '';
+  width: 100%;
+  height: 1PX;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  z-index: 1;
+  border-bottom-style: solid;
+  border-bottom-width: 1PX;
+  border-bottom-color: #e5e6eb;
+  box-sizing: border-box;
+  transform-origin: left bottom;
+  -webkit-transform-origin: left bottom;
+  pointer-events: none;
+  border-radius: 0;
+}
+@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
+  .arco-action-sheet-item:not(:last-child)::after {
+    transform: scaleY(0.5);
+    -webkit-transform: scaleY(0.5);
+    border-radius: 0;
+  }
+}
+@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
+  .arco-action-sheet-item:not(:last-child)::after {
+    transform: scaleY(0.33333333);
+    -webkit-transform: scaleY(0.33333333);
+    border-radius: 0;
+  }
+}
+.arco-action-sheet-item.disabled {
+  color:  #c9cdd4 ;
+}
+.arco-action-sheet-item.danger {
+  color:  #ee4d38 ;
+}
+.arco-action-sheet-item.cancel-item {
+  border-top-style: solid;
+  border-top-color:  #F2F3F5 ;
+  border-top-width:  0.16rem ;
+}

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

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

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

@@ -0,0 +1,7 @@
+"use strict";
+
+require("../../../../style/css/public.css");
+
+require("../../../popup/style/css");
+
+require("./index.css");

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

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

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

@@ -0,0 +1,7 @@
+"use strict";
+
+require("../../../style/public.less");
+
+require("../../popup/style");
+
+require("./index.less");

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

@@ -0,0 +1,57 @@
+@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-var(font-color);
+    }
+
+    &-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);
+        }
+    }
+}

package/cjs/avatar/demo/style/css/mobile.css

@@ -0,0 +1,61 @@
+#demo-avatar .avatar-demo-box {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+          justify-content: flex-start;
+}
+#demo-avatar .avatar-left-margin {
+  margin-left: 24px;
+}
+#demo-avatar .avatar-size-demo-box {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+          justify-content: flex-end;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+  height: 77px;
+}
+#demo-avatar .avatar-size-demo-box .size-text {
+  font-size: 12px;
+  line-height: 17px;
+  color: #939AA3;
+}
+#demo-avatar .custom-icon .arco-avatar-decoration {
+  right: -4px;
+  bottom: -4px;
+  width: 20px;
+  height: 20px;
+}
+#demo-avatar .custom-icon .bottom-edit-icon {
+  width: 100%;
+  height: 100%;
+}
+#demo-avatar .custom-avatar-icon {
+  font-size: 15px;
+}
+#demo-avatar .avatar-group-demo {
+  padding-top: 16px;
+}
+#demo-avatar .avatar-group-demo .demo-sub-title {
+  font-size: 12px;
+  line-height: 20px;
+  margin-bottom: 8px;
+}
+#demo-avatar .avatar-divider {
+  height: 8px;
+  background-color: #f2f2f2;
+  margin: 0 -16px;
+}

package/cjs/avatar/demo/style/mobile.less

@@ -0,0 +1,56 @@
+@import '../../../../style/mixin.less';
+
+#demo-avatar {
+    .avatar-demo-box {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+    }
+    .avatar-left-margin {
+        margin-left: 24px;
+    }
+    .avatar-size-demo-box {
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-end;
+        align-items: center;
+        height: 77px;
+        .size-text {
+            font-size: 12px;
+            line-height: 17px;
+            color: #939AA3;
+        }
+    }
+
+    .custom-icon {
+        .@{prefix}-avatar-decoration {
+            right: -4px;
+            bottom: -4px;
+            width: 20px;
+            height: 20px;
+        }
+        .bottom-edit-icon {
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    .custom-avatar-icon {
+        font-size: 15px;
+    }
+
+    .avatar-group-demo {
+        padding-top: 16px;
+        .demo-sub-title {
+            font-size: 12px;
+            line-height: 20px;
+            margin-bottom: 8px;
+        }
+    }
+
+    .avatar-divider {
+        height: 8px;
+        background-color: #f2f2f2;
+        margin: 0 -16px;
+    }
+}

package/cjs/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/cjs/avatar/group.js

@@ -0,0 +1,79 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = exports.Group = exports.AvatarGroupContext = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _mobileUtils = require("@arco-design/mobile-utils");
+
+var _contextProvider = require("../context-provider");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var AvatarGroupContext = /*#__PURE__*/_react.default.createContext({
+  isGroup: false,
+  shape: 'circle',
+  size: 'small'
+});
+/**
+ * 头像叠层
+ * @en Avatar group
+ */
+
+
+exports.AvatarGroupContext = AvatarGroupContext;
+var Group = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var _props$style = props.style,
+      style = _props$style === void 0 ? {} : _props$style,
+      _props$className = props.className,
+      className = _props$className === void 0 ? '' : _props$className,
+      _props$shape = props.shape,
+      shape = _props$shape === void 0 ? 'circle' : _props$shape,
+      _props$size = props.size,
+      size = _props$size === void 0 ? 'medium' : _props$size,
+      _props$zIndexOrder = props.zIndexOrder,
+      zIndexOrder = _props$zIndexOrder === void 0 ? 'desc' : _props$zIndexOrder,
+      children = props.children;
+
+  var _useContext = (0, _react.useContext)(_contextProvider.GlobalContext),
+      prefixCls = _useContext.prefixCls;
+
+  var childrenArr = _react.default.Children.toArray(children);
+
+  var length = childrenArr.length;
+  var domRef = (0, _react.useRef)(null);
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      dom: domRef.current
+    };
+  });
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: domRef,
+    style: style,
+    className: (0, _mobileUtils.cls)(className, prefixCls + "-avatar-group", "group-" + size)
+  }, /*#__PURE__*/_react.default.createElement(AvatarGroupContext.Provider, {
+    value: {
+      isGroup: true,
+      shape: shape,
+      size: size
+    }
+  }, childrenArr.map(function (child, i) {
+    var childProps = (child || {}).props;
+    var avatarStyle = (0, _extends2.default)({
+      zIndex: zIndexOrder === 'asc' ? i + 1 : length - i
+    }, childProps.style);
+    return /*#__PURE__*/_react.default.cloneElement(child, (0, _extends2.default)({}, childProps, {
+      style: avatarStyle
+    }));
+  })));
+});
+exports.Group = Group;
+var _default = Group;
+exports.default = _default;