@arco-design/mobile-react 2.19.2-ee92494.5 → 2.20.0

package/umd/dropdown-menu/type.d.ts

@@ -1,5 +1,5 @@
 import { CSSProperties, ReactNode } from 'react';
-import { OptionsItem, DropdownCommonProps } from '../dropdown';
+import { OptionsItem, DropdownCommonProps, OptionValueType } from '../dropdown';
 export type { OptionsItem, DropdownCommonProps };
 export interface CascadeOptions extends OptionsItem {
     /**
@@ -29,11 +29,6 @@ export interface DropdownMenuBasicProps {
      * @en The selected number of selector (controlled)
      */
     selectIndex?: number;
-    /**
-     * 自定义选择器
-     * @en Custom selector
-     */
-    renderSelectLabel?: (op: OptionsItem, index: number) => ReactNode;
     /**
      * 选择器禁用状态
      * @en Selector disabled state
@@ -112,47 +107,53 @@ export interface SingleOptionProps {
      * 初始选择项
      * @en initial selection item
      *  */
-    defaultValues?: number[];
+    defaultValues?: OptionValueType[];
     /**
      * (受控) 每个选择器选中的项
      * @en (Controlled) The item selected by each selector
      *  */
-    values?: number[];
+    values?: OptionValueType[];
+    /**
+     * 自定义选择器
+     * @en Custom selector
+     */
+    renderSelectLabel?: (op: OptionsItem, index: number) => ReactNode;
     /**
      * 点击选项时触发的回调函数
      * @en Callback when clicking option
      *  */
-    onOptionClick?: (value: number, item: OptionsItem, selectIndex?: number) => void;
+    onOptionClick?: (value: OptionValueType, item: OptionsItem, selectIndex?: number) => void;
     /**
      * 选项改变时触发的回调函数
      * @en Callback when options change
      *  */
-    onOptionChange?: (value: number, item: OptionsItem, selectIndex?: number) => void;
+    onOptionChange?: (value: OptionValueType, item: OptionsItem, selectIndex?: number) => void;
     /**
      * 所有选择器选项总值改变时的回调函数
      * @en Callback when the total value of all selector options changes
      *  */
-    onValuesChange?: (values: number[]) => void;
+    onValuesChange?: (values: OptionValueType[]) => void;
     /**
      * 格式化传入的options
      * @en Format the input options
      *  */
-    getFormattedOptions?: (options: SingleOptionProps['options'], values?: number[]) => {
+    getFormattedOptions?: (options: SingleOptionProps['options'], values?: OptionValueType[]) => {
         formattedOptions: OptionsItem[][];
-        formattedValue: number[];
+        formattedValue: OptionValueType[];
     };
 }
 export interface MultipleOptionProps {
     multiple: true;
     options: string[] | OptionsItem[][];
-    defaultValues?: number[][];
-    values?: number[][];
-    onOptionClick?: (selected: boolean, val: number, item: OptionsItem, selectIndex?: number) => void;
-    onOptionChange?: (vals: number[], item: OptionsItem, selectIndex?: number) => void;
-    onValuesChange?: (values: number[][]) => void;
-    getFormattedOptions?: (options: SingleOptionProps['options'], values?: number[][]) => {
+    defaultValues?: OptionValueType[][];
+    values?: OptionValueType[][];
+    renderSelectLabel?: (op: OptionsItem[], index: number) => ReactNode;
+    onOptionClick?: (selected: boolean, val: OptionValueType, item: OptionsItem, selectIndex?: number) => void;
+    onOptionChange?: (vals: OptionValueType[], item: OptionsItem, selectIndex?: number) => void;
+    onValuesChange?: (values: OptionValueType[][]) => void;
+    getFormattedOptions?: (options: SingleOptionProps['options'], values?: OptionValueType[][]) => {
         formattedOptions: OptionsItem[][];
-        formattedValue: number[][];
+        formattedValue: OptionValueType[][];
     };
 }
 export declare type OptionProps = SingleOptionProps | MultipleOptionProps;

package/umd/image/index.js

@@ -57,6 +57,7 @@
     var wrapRef = (0, _react.useRef)(null);
     var retryCountRef = (0, _react.useRef)(0);
     var loadingImageRef = (0, _react.useRef)(null);
+    var hasLoadedRef = (0, _react.useRef)(false);
     var style = props.style,
         className = props.className,
         status = props.status,
@@ -180,6 +181,7 @@
       image.onload = function (evt) {
         loadingImageRef.current = null;
         imageDomRef.current = image;
+        hasLoadedRef.current = true;
         changeStatus('loaded');
         var _image$width = image.width,
             imageWidth = _image$width === void 0 ? 0 : _image$width,
@@ -294,7 +296,8 @@
       })) : null, /*#__PURE__*/_react.default.createElement("div", {
         className: (0, _mobileUtils.cls)('image-container', validStatus, {
           animate: Boolean(animateDuration),
-          'static-label': staticLabel
+          'static-label': staticLabel,
+          'has-loaded': hasLoadedRef.current
         }),
         style: (0, _helpers.getStyleWithVendor)({
           transitionDuration: animateDuration + "ms"

package/umd/image/style/css/index.css

@@ -66,7 +66,8 @@
 }
 .arco-image .image-container.static-label,
 .arco-image .image-container.loaded,
-.arco-image .image-container.error {
+.arco-image .image-container.error,
+.arco-image .image-container.has-loaded {
   opacity: 1;
 }
 .arco-image .image-container.animate {

package/umd/image/style/index.less

@@ -66,7 +66,8 @@
 
         &.static-label,
         &.loaded,
-        &.error {
+        &.error,
+        &.has-loaded {
             opacity: 1;
         }
 

package/umd/image-picker/index.d.ts

@@ -14,9 +14,10 @@ export interface ImagePickItem {
     /**
      * 图片状态
      * @en Image Status
-     * @default 'loaded'
+     * @default 以图片自身加载状态而定
+     * @default_en According to inner status of the image
      */
-    status: 'loaded' | 'loading' | 'error';
+    status?: 'loaded' | 'loading' | 'error';
 }
 export interface AdapterFile {
     url?: string;
@@ -117,7 +118,7 @@ export interface ImagePickerProps {
      * 透传给图片的属性
      * @en Attributes passed through to the image
      */
-    imageProps?: ImageProps;
+    imageProps?: Partial<ImageProps>;
     /**
      * 自定义上传失败展示
      * @en Defined upload failed display
@@ -133,12 +134,11 @@ export interface ImagePickerProps {
      * @en upload function
      */
     upload?: (file: ImagePickItem) => Promise<ImagePickItem | null>;
-    onSelect?: (...args: any[]) => void;
     /**
      * 已选图片列表发生变化
      * @en The list of selected images changes
      */
-    onChange?: (fileList: ImagePickItem[]) => Promise<void>;
+    onChange?: (fileList: ImagePickItem[]) => void;
     /**
      * 图片超过限制大小
      * @en Image exceeds size limit
@@ -163,7 +163,7 @@ export interface ImagePickerProps {
      * 图片选择适配器
      * @en Select Adaptor
      */
-    selectAdapter: () => Promise<SelectCallback>;
+    selectAdapter?: () => Promise<SelectCallback>;
 }
 export interface ImagePickerRef {
     /**

package/umd/image-picker/index.js

@@ -139,7 +139,7 @@
         var res = parseFiles.map(function (url, index) {
           return {
             url: url,
-            status: upload ? 'loading' : 'loaded',
+            status: typeof upload === 'function' ? 'loading' : 'loaded',
             file: files[index]
           };
         });
@@ -150,11 +150,12 @@
           var propsImageLength = images.length;
           files.forEach(function (_file, index) {
             upload(cacheRes[propsImageLength + index]).then(function (data) {
-              cacheRes[propsImageLength + index] = (0, _extends2.default)({}, cacheRes[propsImageLength + index], data);
+              cacheRes[propsImageLength + index] = (0, _extends2.default)({}, cacheRes[propsImageLength + index], data, {
+                status: undefined
+              });
             }).catch(function () {
               cacheRes[propsImageLength + index].status = 'error';
             }).finally(function () {
-              cacheRes[propsImageLength + index].status = 'loaded';
               onChange([].concat(cacheRes));
             });
           });

package/umd/nav-bar/index.js

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "@babel/runtime/helpers/extends", "react", "@arco-design/mobile-utils", "../context-provider", "./back-icon"], factory);
+    define(["exports", "@babel/runtime/helpers/extends", "react", "@arco-design/mobile-utils", "../context-provider", "./back-icon", "../_helpers"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("@babel/runtime/helpers/extends"), require("react"), require("@arco-design/mobile-utils"), require("../context-provider"), require("./back-icon"));
+    factory(exports, require("@babel/runtime/helpers/extends"), require("react"), require("@arco-design/mobile-utils"), require("../context-provider"), require("./back-icon"), require("../_helpers"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global._extends, global.react, global.mobileUtils, global.contextProvider, global.backIcon);
+    factory(mod.exports, global._extends, global.react, global.mobileUtils, global.contextProvider, global.backIcon, global._helpers);
     global.index = mod.exports;
   }
-})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _extends2, _react, _mobileUtils, _contextProvider, _backIcon) {
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _extends2, _react, _mobileUtils, _contextProvider, _backIcon, _helpers) {
   "use strict";
 
   var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -72,8 +72,10 @@
         customStyle = _useState2[0],
         setCustomStyle = _useState2[1];
 
+    var system = (0, _helpers.useSystem)();
+
     var onElementScroll = function onElementScroll(curOffset) {
-      setScrollToggleHide(curOffset <= showOffset);
+      setScrollToggleHide(curOffset < showOffset);
 
       if (getComputedStyleByScroll) {
         var cstyle = getComputedStyleByScroll(curOffset);
@@ -99,6 +101,7 @@
     (0, _react.useEffect)(function () {
       var needBind = showOffset || getComputedStyleByScroll;
       var container = (0, _mobileUtils.getValidScrollContainer)(getScrollContainer);
+      handleEleScroll();
 
       if (needBind && container) {
         container.addEventListener('scroll', handleEleScroll, false);
@@ -146,7 +149,7 @@
           background: relBackground
         } : {})
       }, /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _mobileUtils.cls)(className, prefixCls + "-nav-bar-wrapper", (_cls2 = {}, _cls2[prefixCls + "-nav-bar-wrapper-fixed"] = fixed, _cls2[prefixCls + "-nav-bar-wrapper-border"] = hasBottomLine, _cls2)),
+        className: (0, _mobileUtils.cls)(className, system, prefixCls + "-nav-bar-wrapper", (_cls2 = {}, _cls2[prefixCls + "-nav-bar-wrapper-fixed"] = fixed, _cls2[prefixCls + "-nav-bar-wrapper-border"] = hasBottomLine, _cls2)),
         style: (0, _extends2.default)({
           paddingTop: statusBarHeight ? statusBarHeight + "px" : ''
         }, customStyle)

package/umd/show-monitor/index.js

@@ -130,6 +130,34 @@
             offset: offset,
             threshold: threshold
           }, true);
+        },
+
+        /**
+         * 重置元素初始可见态为false，并重新对元素可见度发起检测，优先级低于disabled（通常用在对ShowMonitor内部元素变化时发起的重新监听）
+         * @en Reset the initial visible state of the element to false, and re-detect the visibility of the element, the priority is lower than 'disabled'(Usually used to re-listen when elements inside ShowMonitor change)
+         */
+        flushVisibleStatus: function flushVisibleStatus() {
+          isVisible.current = false;
+
+          if (isSupportNativeApi && io.current && domRef.current) {
+            disabled ? io.current.unobserve(domRef.current) : io.current.observe(domRef.current);
+          } else if (listener.current) {
+            var _key = wrapperKey.current;
+
+            if (once && onOnceEmittedListeners != null && onOnceEmittedListeners[_key]) {
+              onOnceEmittedListeners[_key] = onOnceEmittedListeners[_key].filter(function (emitListener) {
+                return emitListener !== listener.current;
+              });
+            }
+
+            if (!disabled && !listeners[_key].find(function (_listener) {
+              return _listener === listener.current;
+            })) {
+              listeners[_key].push(listener.current);
+            }
+
+            !disabled && _checkVisible(listener.current);
+          }
         }
       };
     });
@@ -397,8 +425,8 @@
             }
           }
 
-          var _key = wrapperKey.current;
-          var curListeners = listeners[_key];
+          var _key2 = wrapperKey.current;
+          var curListeners = listeners[_key2];
 
           if (curListeners) {
             // 不在监听队列中，移除
@@ -408,7 +436,7 @@
             // @en When the listening queue is empty, unbind scroll and resize events
 
             if (curListeners.length === 0) {
-              delete listeners[_key];
+              delete listeners[_key2];
 
               if (scrollPort.current) {
                 scrollPort.current.removeEventListener('scroll', throttlingVisibleChange);