@arco-design/mobile-react 2.23.0 → 2.24.0

package/cjs/toast/methods.js

@@ -12,7 +12,7 @@ var _mobileUtils = require("@arco-design/mobile-utils");
 var _render = require("../_helpers/render");
 
 function toast(Component, type) {
-  return function (originConfig) {
+  return function (originConfig, context) {
     var config = typeof originConfig === 'string' ? {
       content: originConfig,
       type: 'info'
@@ -26,7 +26,7 @@ function toast(Component, type) {
     var div = document.createElement('div');
     document.body.appendChild(div);
 
-    var _ReactDOMRender = new _render.ReactDOMRender(Component, div),
+    var _ReactDOMRender = new _render.ReactDOMRender(Component, div, context),
         render = _ReactDOMRender.render,
         unmount = _ReactDOMRender.unmount;
 

package/dist/index.js

@@ -898,6 +898,10 @@
       SearchBar: {
         placeholder: '请输入要查询的内容',
         cancelBtn: '取消'
+      },
+      Stepper: {
+        minusButtonName: '减少',
+        addButtonName: '增加'
       }
     };
 
@@ -1147,6 +1151,16 @@
       }, children);
     }
     var ContextLayout = GlobalContext.Consumer;
+    function CompWithGlobalContext(Component) {
+      return function (props) {
+        var propsContext = props.context,
+            others = __rest(props, ["context"]);
+
+        return /*#__PURE__*/React__default["default"].createElement(ContextLayout, null, function (context) {
+          return /*#__PURE__*/React__default["default"].createElement(ContextProvider, __assign({}, __assign(__assign({}, context), propsContext)), /*#__PURE__*/React__default["default"].createElement(Component, __assign({}, others)));
+        });
+      };
+    }
 
     /**
      * React.createPortal的简单封装。
@@ -2576,16 +2590,20 @@
     var ReactDOMRender =
     /** @class */
     function () {
-      function ReactDOMRender(app, container) {
+      function ReactDOMRender(app, container, context) {
         var _this = this;
 
         this.render = function (props) {
           var CustomApp = _this.app;
 
+          var propsWithContext = __assign(__assign({}, props), {
+            context: _this.context
+          });
+
           if (_this.root) {
-            _this.root.render( /*#__PURE__*/React__default["default"].createElement(CustomApp, __assign({}, props)));
+            _this.root.render( /*#__PURE__*/React__default["default"].createElement(CustomApp, __assign({}, propsWithContext)));
           } else {
-            _this.root = render( /*#__PURE__*/React__default["default"].createElement(CustomApp, __assign({}, props)), _this.container);
+            _this.root = render( /*#__PURE__*/React__default["default"].createElement(CustomApp, __assign({}, propsWithContext)), _this.container);
           }
         };
 
@@ -2598,6 +2616,7 @@
 
         this.app = app;
         this.container = container;
+        this.context = context;
       }
 
       return ReactDOMRender;
@@ -2610,7 +2629,7 @@
         };
       }
 
-      return function (config) {
+      return function (config, context) {
         var baseProps = __assign(__assign({
           unmountOnExit: true
         }, normalize(config)), {
@@ -2624,7 +2643,7 @@
         var id = "_" + (containerId || 'ARCO_MASKING') + "_DIV_" + (config.key || '') + "_";
         var div = appendElementById(id, baseProps.getContainer).child;
         var leaving = false;
-        var render = new ReactDOMRender(Component, div).render;
+        var render = new ReactDOMRender(Component, div, context).render;
 
         function update(newConfig) {
           dynamicProps = __assign(__assign({}, dynamicProps), normalize(newConfig));
@@ -2847,6 +2866,7 @@
         open: open$5(Comp)
       };
     }
+    var MaskingWithGlobalContext = CompWithGlobalContext(Masking);
     /**
      * 通用模态弹窗，内部内容自定义。默认做了防滚动穿透处理，如果弹层内容中需要滚动，则需将滚动容器传入`getScrollContainer`属性以在未滚动到顶部或底部时释放滚动。
      * @en Generic modal popup with custom internal content. By default, anti-scroll penetration processing is performed. If scrolling is required in the content of the bullet layer, need to pass the scroll container to the `getScrollContainer` to release scrolling when it is not scrolled to the top or bottom.
@@ -2856,7 +2876,7 @@
      * @name_en Masking
      */
 
-    var Masking$1 = componentWrapper(Masking, methodsGenerator$7(Masking));
+    var Masking$1 = componentWrapper(Masking, methodsGenerator$7(MaskingWithGlobalContext));
 
     function open$4(Component) {
       return open$5(Component, 'ARCO_POPUP');
@@ -2924,6 +2944,7 @@
         open: open$4(Comp)
       };
     }
+    var PopupWithGlobalContext = CompWithGlobalContext(Popup);
     /**
      * 基于模态弹窗的的全屏菜单，支持各个方向。默认做了防滚动穿透处理，如果弹层内容中需要滚动，则需将滚动容器传入`getScrollContainer`属性以在未滚动到顶部或底部时释放滚动。
      * @en A full-screen menu based on a modal popup, supporting all directions. By default, anti-scroll penetration processing is performed. If scrolling is required in the content of the popup layer, you need to pass the scroll container to the `getScrollContainer` property to release scrolling when it is not scrolled to the top or bottom.
@@ -2933,7 +2954,7 @@
      * @name_en Popup
      */
 
-    var Popup$1 = componentWrapper(Popup, methodsGenerator$6(Popup));
+    var Popup$1 = componentWrapper(Popup, methodsGenerator$6(PopupWithGlobalContext));
 
     function open$3(Component) {
       return open$5(Component, 'ARCO_ACTION_SHEET');
@@ -3020,16 +3041,17 @@
         open: open$3(Comp)
       };
     }
+    var ActionSheetWithGlobalContext = CompWithGlobalContext(ActionSheet);
     /**
      * 动作面板组件
-     * @en ActionSheet Commponent
+     * @en ActionSheet Component
      * @type 反馈
      * @type_en FeedBack
      * @name 动作面板
      * @name_en ActionSheet
      */
 
-    var index$e = componentWrapper(ActionSheet, methodsGenerator$5(ActionSheet));
+    var index$e = componentWrapper(ActionSheet, methodsGenerator$5(ActionSheetWithGlobalContext));
 
     var GroupContext = /*#__PURE__*/React__default["default"].createContext({
       isFromGroup: false
@@ -5272,7 +5294,7 @@
     }
 
     function toast(Component, type) {
-      return function (originConfig) {
+      return function (originConfig, context) {
         var config = typeof originConfig === 'string' ? {
           content: originConfig,
           type: 'info'
@@ -5286,7 +5308,7 @@
         var div = document.createElement('div');
         document.body.appendChild(div);
 
-        var _a = new ReactDOMRender(Component, div),
+        var _a = new ReactDOMRender(Component, div, context),
             render = _a.render,
             unmount = _a.unmount;
 
@@ -5517,6 +5539,7 @@
         warn: toast(Comp, 'warn')
       };
     }
+    var ToastWithGlobalContext = CompWithGlobalContext(Toast);
     /**
      * 轻提示组件，支持各个场景下调用方法。
      * @en The toast component, supports calling methods in various scenarios.
@@ -5526,7 +5549,7 @@
      * @name_en Toast
      */
 
-    var index$b = componentWrapper(Toast, methodsGenerator$4(Toast));
+    var index$b = componentWrapper(Toast, methodsGenerator$4(ToastWithGlobalContext));
 
     /**
      * 开关组件，支持点击和滑动触发开关动作。
@@ -5630,6 +5653,10 @@
       return /*#__PURE__*/React__default["default"].createElement(ContextLayout, null, function (_a) {
         var prefixCls = _a.prefixCls;
         return /*#__PURE__*/React__default["default"].createElement("div", {
+          role: "switch",
+          "aria-checked": switchChecked,
+          "aria-disabled": disabled,
+          tabIndex: 0,
           ref: domRef,
           className: cls(prefixCls + "-switch all-border-box", className, "type-" + platform, "system-" + system, shape, {
             checked: switchChecked,
@@ -6066,6 +6093,10 @@
       return /*#__PURE__*/React__default["default"].createElement(ContextLayout, null, function (_a) {
         var prefixCls = _a.prefixCls;
         return /*#__PURE__*/React__default["default"].createElement("div", {
+          role: "checkbox",
+          "aria-checked": checked,
+          "aria-disabled": disabled,
+          tabIndex: 0,
           ref: domRef,
           style: style,
           className: cls(className, prefixCls + "-" + componentName, "shape-" + shape, {
@@ -6240,6 +6271,10 @@
       function renderCircleProgress(_a) {
         var prefixCls = _a.prefixCls;
         return /*#__PURE__*/React__default["default"].createElement("div", {
+          role: "progressbar",
+          "aria-valuemin": 0,
+          "aria-valuemax": 100,
+          "aria-valuenow": percentage,
           className: cls(prefixCls + "-circle-progress", disabled ? prefixCls + "-circle-progress-disabled" : '', "" + className),
           style: __assign({
             width: circleSize,
@@ -8589,6 +8624,7 @@
         open: open$2(Comp)
       };
     }
+    var DialogWithGlobalContext = CompWithGlobalContext(Dialog);
     /**
      * 模态对话框，在浮层中显示，引导用户进行相关操作。默认做了防滚动穿透处理，如果弹层内容中需要滚动，则需将滚动容器传入`getScrollContainer`属性以在未滚动到顶部或底部时释放滚动。
      * @en A modal dialog, displayed in a floating layer, guides the user to perform related operations. By default, anti-scroll penetration processing is performed. If scrolling is required in the content of the bullet layer, you need to pass the scroll container to `getScrollContainer` to release scrolling when it is not scrolled to the top or bottom.
@@ -8598,7 +8634,7 @@
      * @name_en Dialog
      */
 
-    var index$9 = componentWrapper(Dialog, methodsGenerator$3(Dialog));
+    var index$9 = componentWrapper(Dialog, methodsGenerator$3(DialogWithGlobalContext));
 
     // 定义秒，分，小时，天的转化常量
     // @en Define conversion constants for seconds, minutes, hours, days
@@ -9389,12 +9425,14 @@
         ref: wrapRef,
         onTouchStart: _handleItemTouchStart,
         onTouchEnd: _handleColumnTouchEnd,
-        onTouchCancel: _handleColumnTouchEnd
+        onTouchCancel: _handleColumnTouchEnd,
+        "aria-disabled": disabled
       }, data.map(function (item, index) {
         var _a;
 
         var dis = Math.abs(index - currentIndex);
         return /*#__PURE__*/React__default["default"].createElement("div", {
+          "aria-label": index === currentIndex ? "" + item.value : '',
           key: index + "_" + item.value,
           className: cls(prefixCls + "-column-item", (_a = {
             selected: index === currentIndex
@@ -16871,7 +16909,7 @@
     }();
 
     function open$1(Component) {
-      return function (config) {
+      return function (config, context) {
         var baseProps = __assign(__assign({
           unmountOnExit: true
         }, config || {}), {
@@ -16885,7 +16923,7 @@
         var id = "_ARCO_IMAGE_PREVIEW_DIV_" + (baseProps.key || '') + "_";
         var div = appendElementById(id, baseProps.getContainer).child;
         var leaving = false;
-        var render = new ReactDOMRender(Component, div).render;
+        var render = new ReactDOMRender(Component, div, context).render;
 
         function update(newConfig) {
           dynamicProps = __assign(__assign({}, dynamicProps), newConfig || {});
@@ -17890,6 +17928,7 @@
         open: open$1(Comp)
       };
     }
+    var ImagePreviewWithGlobalContext = CompWithGlobalContext(ImagePreview);
     /**
      * 图片预览组件，支持循环轮播、双指/双击缩放、缩略图放大效果。
      * @en The image preview, supports circular rotation, two-finger/double-tap zoom, and thumbnail zoom effects.
@@ -17899,7 +17938,7 @@
      * @name_en ImagePreview
      */
 
-    var index$7 = componentWrapper(ImagePreview, methodsGenerator$2(ImagePreview));
+    var index$7 = componentWrapper(ImagePreview, methodsGenerator$2(ImagePreviewWithGlobalContext));
 
     function useInputLogic(props, inputRef) {
       var value = props.value,
@@ -18099,6 +18138,7 @@
 
       function renderWrapper(prefixCls, type, children) {
         return /*#__PURE__*/React__default["default"].createElement("div", {
+          role: "search",
           className: prefixCls + "-container all-border-box " + (className || ''),
           style: style,
           ref: wrapRef
@@ -18161,19 +18201,21 @@
           inputClass = props.inputClass,
           inputStyle = props.inputStyle,
           _b = props.nativeProps,
-          nativeProps = _b === void 0 ? {} : _b;
+          nativeProps = _b === void 0 ? {} : _b,
+          _c = props.ariaLabel,
+          ariaLabel = _c === void 0 ? '' : _c;
       var inputRef = React.useRef(null);
 
-      var _c = useInputLogic(props, inputRef),
-          inputValue = _c.inputValue,
-          handleChange = _c.handleChange,
-          handleInput = _c.handleInput,
-          handleKeyDown = _c.handleKeyDown,
-          handleFocus = _c.handleFocus,
-          handleBlur = _c.handleBlur,
-          handleClick = _c.handleClick,
-          renderWrapper = _c.renderWrapper,
-          wrapRef = _c.wrapRef;
+      var _d = useInputLogic(props, inputRef),
+          inputValue = _d.inputValue,
+          handleChange = _d.handleChange,
+          handleInput = _d.handleInput,
+          handleKeyDown = _d.handleKeyDown,
+          handleFocus = _d.handleFocus,
+          handleBlur = _d.handleBlur,
+          handleClick = _d.handleClick,
+          renderWrapper = _d.renderWrapper,
+          wrapRef = _d.wrapRef;
 
       React.useImperativeHandle(ref, function () {
         return {
@@ -18205,7 +18247,9 @@
           onChange: handleChange,
           onInput: handleInput,
           onKeyDown: handleKeyDown,
-          onClick: handleClick
+          onClick: handleClick,
+          "aria-disabled": disabled,
+          "aria-label": ariaLabel
         })));
       }
 
@@ -18439,18 +18483,22 @@
           getScrollContainer = props.getScrollContainer,
           _h = props.showOffset,
           showOffset = _h === void 0 ? 0 : _h,
-          getComputedStyleByScroll = props.getComputedStyleByScroll;
+          getComputedStyleByScroll = props.getComputedStyleByScroll,
+          _j = props.ariaLabel,
+          ariaLabel = _j === void 0 ? '' : _j,
+          _k = props.ariaRole,
+          ariaRole = _k === void 0 ? 'banner' : _k;
       var navBarRef = React.useRef(null);
 
-      var _j = React.useState(showOffset > 0),
-          scrollToggleHide = _j[0],
-          setScrollToggleHide = _j[1];
+      var _l = React.useState(showOffset > 0),
+          scrollToggleHide = _l[0],
+          setScrollToggleHide = _l[1];
 
       var relBackground = scrollToggleHide ? 'transparent' : '';
 
-      var _k = React.useState({}),
-          customStyle = _k[0],
-          setCustomStyle = _k[1];
+      var _m = React.useState({}),
+          customStyle = _m[0],
+          setCustomStyle = _m[1];
 
       var system = useSystem();
 
@@ -18527,7 +18575,9 @@
             paddingTop: fixed && statusBarHeight ? statusBarHeight + "px" : ''
           }, style || {}), relBackground ? {
             background: relBackground
-          } : {})
+          } : {}),
+          "aria-label": ariaLabel,
+          role: ariaRole
         }, /*#__PURE__*/React__default["default"].createElement("div", {
           className: cls(className, system, prefixCls + "-nav-bar-wrapper", (_c = {}, _c[prefixCls + "-nav-bar-wrapper-fixed"] = fixed, _c[prefixCls + "-nav-bar-wrapper-border"] = hasBottomLine, _c)),
           style: __assign({
@@ -18731,7 +18781,7 @@
     });
 
     function notify(Component, type) {
-      return function (originConfig) {
+      return function (originConfig, context) {
         var config = typeof originConfig === 'string' ? {
           content: originConfig,
           type: 'info'
@@ -18750,7 +18800,7 @@
           document.body.appendChild(div);
         }
 
-        var _a = new ReactDOMRender(Component, div),
+        var _a = new ReactDOMRender(Component, div, context),
             render = _a.render,
             unmount = _a.unmount;
 
@@ -18936,6 +18986,7 @@
         warn: notify(Comp, 'warn')
       };
     }
+    var NotifyWithGlobalContext = CompWithGlobalContext(Notify);
     /**
      * 主动操作后显示的反馈信息横条，可采用方法调用或者组件调用的方式
      * @en The feedback information bar displayed after active operation can be called by method or by component.
@@ -18945,7 +18996,7 @@
      * @name_en Notify
      */
 
-    var index$6 = componentWrapper(Notify, methodsGenerator$1(Notify));
+    var index$6 = componentWrapper(Notify, methodsGenerator$1(NotifyWithGlobalContext));
 
     function Arrow() {
       return /*#__PURE__*/React__default["default"].createElement("svg", {
@@ -20605,6 +20656,7 @@
         open: open(Comp)
       };
     }
+    var PopupSwiperWithGlobalContext = CompWithGlobalContext(PopupSwiper);
     /**
      * 基于弹出层(Popup)封装的具有手势关闭功能的弹出层组件，拥有 Popup 组件的其他能力。
      * @en The popup with gesture closing function based on the popup encapsulation, has other capabilities of the Popup component.
@@ -20614,7 +20666,7 @@
      * @name_en PopupSwiper
      */
 
-    var index$4 = componentWrapper(PopupSwiper, methodsGenerator(PopupSwiper));
+    var index$4 = componentWrapper(PopupSwiper, methodsGenerator(PopupSwiperWithGlobalContext));
 
     /**
      * 进度条组件，可根据外界传递进来的百分比进行进度展示
@@ -20699,6 +20751,10 @@
       function renderBarProgress(_a) {
         var prefixCls = _a.prefixCls;
         return /*#__PURE__*/React__default["default"].createElement("div", {
+          role: "progressbar",
+          "aria-valuenow": percentage,
+          "aria-valuemax": 100,
+          "aria-valuemin": 0,
           className: cls(prefixCls + "-progress", {
             'progress-fixed': mode === 'nav'
           }, {
@@ -21602,6 +21658,11 @@
       return /*#__PURE__*/React__default["default"].createElement(ContextLayout, null, function (_a) {
         var prefixCls = _a.prefixCls;
         return /*#__PURE__*/React__default["default"].createElement("div", {
+          role: "slider",
+          "aria-valuemin": 0,
+          "aria-valuemax": count,
+          "aria-valuenow": innerValue,
+          "aria-disabled": disabled,
           className: cls(prefixCls + "-rate", className, {
             disabled: disabled
           }),
@@ -22343,7 +22404,12 @@
           'show-marks': showMarks
         }),
         style: style,
-        ref: domRef
+        ref: domRef,
+        role: "slider",
+        "aria-valuemin": min,
+        "aria-valuemax": max,
+        "aria-valuenow": Array.isArray(valueGroup) ? valueGroup[0] : valueGroup,
+        "aria-disabled": disabled
       }, isHorizontal ? renderPrefixLabel : renderSuffixLabel, /*#__PURE__*/React__default["default"].createElement("div", {
         className: prefixCls + "-slider-wrapper"
       }, /*#__PURE__*/React__default["default"].createElement(Marks, {
@@ -23043,6 +23109,7 @@
           ref: domRef,
           onClick: onClick
         }, /*#__PURE__*/React__default["default"].createElement("div", {
+          "aria-label": "decrease",
           onClick: handleMinusButtonClick
         }, minusButton || /*#__PURE__*/React__default["default"].createElement("div", {
           className: cls(prefixCls + "-stepper-minus-button")
@@ -23060,8 +23127,13 @@
           value: showValue,
           readOnly: inputReadonly,
           ref: inputRef,
-          type: "number"
+          type: "number",
+          role: "spinbutton",
+          "aria-valuenow": Number(showValue),
+          "aria-valuemax": max,
+          "aria-valuemin": min
         }), /*#__PURE__*/React__default["default"].createElement("div", {
+          "aria-label": "increase",
           onClick: handleAddButtonClick
         }, addButton || /*#__PURE__*/React__default["default"].createElement("div", {
           className: cls(prefixCls + "-stepper-add-button")