@arco-design/mobile-react 2.19.1-941e02b.7 → 2.20.0

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
@@ -158,15 +158,18 @@ export interface ImagePickerProps {
      * 图片长按事件
      * @en long press event
      */
-    onLongPress?: (e: React.MouseEvent<HTMLElement, MouseEvent>, image: ImagePickItem, index: number) => void;
+    onLongPress?: (e: React.TouchEvent<HTMLElement>, image: ImagePickItem, index: number) => void;
     /**
      * 图片选择适配器
      * @en Select Adaptor
      */
-    selectAdapter: () => Promise<SelectCallback>;
+    selectAdapter?: () => Promise<SelectCallback>;
 }
 export interface ImagePickerRef {
-    /** 最外层元素 DOM */
+    /**
+     * 最外层 DOM 元素
+     * @en The outer DOM element of the component
+     */
     dom: HTMLDivElement | null;
 }
 /**

package/umd/image-picker/index.js

@@ -111,7 +111,7 @@
       });
     };
 
-    var handleChange = function handleChange(event) {
+    var handleChange = function handleChange(event, fromAdapter) {
       var files = [].concat(event.target.files || []).filter(function (file) {
         // 过滤maxSize
         if (maxSize && file.size > maxSize * 1024) {
@@ -121,7 +121,11 @@
 
         return true;
       }) || [];
-      event.target.value = ''; // 截断limit
+
+      if (!fromAdapter) {
+        event.target.value = '';
+      } // 截断limit
+
 
       if (limit !== 0 && files.length + images.length > limit) {
         onLimitExceed && onLimitExceed(files);
@@ -135,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]
           };
         });
@@ -146,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));
             });
           });
@@ -171,15 +176,15 @@
       e.preventDefault();
       timeOutEvent = setTimeout(function () {
         timeOutEvent = 0;
-        typeof onLongPress === 'function' && onLongPress(e, image, index);
+        onLongPress == null ? void 0 : onLongPress(e, image, index);
       }, 750);
     };
 
-    var handleTouchEnd = function handleTouchEnd(e, image, index) {
+    var handleClick = function handleClick(e, image, index) {
       clearTimeout(timeOutEvent);
 
       if (timeOutEvent !== 0) {
-        typeof onClick === 'function' && onClick(e, image, index);
+        onClick == null ? void 0 : onClick(e, image, index);
       }
     };
 
@@ -192,7 +197,7 @@
           target: {
             files: files
           }
-        });
+        }, true);
       }) : (_fileRef$current = fileRef.current) == null ? void 0 : _fileRef$current.click();
     };
 
@@ -226,8 +231,8 @@
             onTouchStart: function onTouchStart(e) {
               return handleTouchStart(e, image, index);
             },
-            onTouchEnd: function onTouchEnd(e) {
-              return handleTouchEnd(e, image, index);
+            onClick: function onClick(e) {
+              return handleClick(e, image, index);
             },
             className: prefixCls + "-image-picker-image-container"
           }, /*#__PURE__*/_react.default.createElement(_image.default, (0, _extends2.default)({
@@ -270,7 +275,9 @@
             accept: accept,
             multiple: multiple,
             type: "file",
-            onChange: handleChange,
+            onChange: function onChange(e) {
+              return handleChange(e);
+            },
             ref: fileRef
           }) : null)),
           title: ''

package/umd/image-picker/style/index.less

@@ -25,7 +25,7 @@
         &-container {
             .container()
         }
-        .arco-image{
+        .@{prefix}-image {
             height: 100%;
             width: 100%;
         }

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/notify/index.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { NotifyProps, NotifyRef } from './type';
 import { NotifyBaseProps } from './methods';
+export * from './type';
 export declare function methodsGenerator<P extends NotifyBaseProps>(Comp: React.FC<P>): {
     /**
      * 展示常规通知

package/umd/notify/index.js

@@ -1,26 +1,35 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "@babel/runtime/helpers/extends", "react", "react-dom", "@arco-design/mobile-utils", "../context-provider", "../_helpers", "./methods"], factory);
+    define(["exports", "@babel/runtime/helpers/extends", "react", "react-dom", "@arco-design/mobile-utils", "../context-provider", "../_helpers", "./methods", "./type"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("@babel/runtime/helpers/extends"), require("react"), require("react-dom"), require("@arco-design/mobile-utils"), require("../context-provider"), require("../_helpers"), require("./methods"));
+    factory(exports, require("@babel/runtime/helpers/extends"), require("react"), require("react-dom"), require("@arco-design/mobile-utils"), require("../context-provider"), require("../_helpers"), require("./methods"), require("./type"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global._extends, global.react, global.reactDom, global.mobileUtils, global.contextProvider, global._helpers, global.methods);
+    factory(mod.exports, global._extends, global.react, global.reactDom, global.mobileUtils, global.contextProvider, global._helpers, global.methods, global.type);
     global.index = mod.exports;
   }
-})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _extends2, _react, _reactDom, _mobileUtils, _contextProvider, _helpers, _methods) {
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _extends2, _react, _reactDom, _mobileUtils, _contextProvider, _helpers, _methods, _type) {
   "use strict";
 
   var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
   _exports.__esModule = true;
+  var _exportNames = {
+    methodsGenerator: true
+  };
   _exports.default = void 0;
   _exports.methodsGenerator = methodsGenerator;
   _extends2 = _interopRequireDefault(_extends2);
   _react = _interopRequireWildcard(_react);
   _reactDom = _interopRequireDefault(_reactDom);
+  Object.keys(_type).forEach(function (key) {
+    if (key === "default" || key === "__esModule") return;
+    if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+    if (key in _exports && _exports[key] === _type[key]) return;
+    _exports[key] = _type[key];
+  });
 
   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); }
 

package/umd/notify/type.d.ts

@@ -19,6 +19,7 @@ export interface NotifyProps {
     /**
      * 通知类型
      * @en Notification type
+     * @default "info"
      */
     type?: NotifyType;
     /**

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);

package/umd/transition/index.js

@@ -32,10 +32,12 @@
    * @name_en Transition
    */
   function Transition(props) {
-    var children = props.children,
+    var _props$children = props.children,
+        children = _props$children === void 0 ? /*#__PURE__*/_react.default.createElement("div", null) : _props$children,
         type = props.type,
         transIn = props.in,
-        timeout = props.timeout,
+        _props$timeout = props.timeout,
+        timeout = _props$timeout === void 0 ? 300 : _props$timeout,
         _props$mountOnEnter = props.mountOnEnter,
         mountOnEnter = _props$mountOnEnter === void 0 ? true : _props$mountOnEnter,
         _props$unmountOnExit = props.unmountOnExit,