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

package/cjs/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/cjs/image/index.js

@@ -53,6 +53,7 @@ var BaseImage = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   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,
@@ -176,6 +177,7 @@ var BaseImage = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     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,
@@ -290,7 +292,8 @@ var BaseImage = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     })) : 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/cjs/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/cjs/image/style/index.less

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

package/cjs/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/cjs/image-picker/index.js

@@ -109,7 +109,7 @@ var ImagePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     });
   };
 
-  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) {
@@ -119,7 +119,11 @@ var ImagePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
       return true;
     }) || [];
-    event.target.value = ''; // 截断limit
+
+    if (!fromAdapter) {
+      event.target.value = '';
+    } // 截断limit
+
 
     if (limit !== 0 && files.length + images.length > limit) {
       onLimitExceed && onLimitExceed(files);
@@ -133,7 +137,7 @@ var ImagePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       var res = parseFiles.map(function (url, index) {
         return {
           url: url,
-          status: upload ? 'loading' : 'loaded',
+          status: typeof upload === 'function' ? 'loading' : 'loaded',
           file: files[index]
         };
       });
@@ -144,11 +148,12 @@ var ImagePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
         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));
           });
         });
@@ -169,15 +174,15 @@ var ImagePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     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);
     }
   };
 
@@ -190,7 +195,7 @@ var ImagePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
         target: {
           files: files
         }
-      });
+      }, true);
     }) : (_fileRef$current = fileRef.current) == null ? void 0 : _fileRef$current.click();
   };
 
@@ -224,8 +229,8 @@ var ImagePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
           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)({
@@ -268,7 +273,9 @@ var ImagePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
           accept: accept,
           multiple: multiple,
           type: "file",
-          onChange: handleChange,
+          onChange: function onChange(e) {
+            return handleChange(e);
+          },
           ref: fileRef
         }) : null)),
         title: ''

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

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

package/cjs/nav-bar/index.js

@@ -15,6 +15,8 @@ var _contextProvider = require("../context-provider");
 
 var _backIcon = _interopRequireDefault(require("./back-icon"));
 
+var _helpers = require("../_helpers");
+
 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; }
@@ -66,8 +68,10 @@ var NavBar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       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);
@@ -93,6 +97,7 @@ var NavBar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   (0, _react.useEffect)(function () {
     var needBind = showOffset || getComputedStyleByScroll;
     var container = (0, _mobileUtils.getValidScrollContainer)(getScrollContainer);
+    handleEleScroll();
 
     if (needBind && container) {
       container.addEventListener('scroll', handleEleScroll, false);
@@ -140,7 +145,7 @@ var NavBar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
         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/cjs/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/cjs/notify/index.js

@@ -3,6 +3,9 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
+var _exportNames = {
+  methodsGenerator: true
+};
 exports.default = void 0;
 exports.methodsGenerator = methodsGenerator;
 
@@ -20,6 +23,15 @@ var _helpers = require("../_helpers");
 
 var _methods = require("./methods");
 
+var _type = require("./type");
+
+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); }
 
 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; }

package/cjs/notify/type.d.ts

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

package/cjs/show-monitor/index.js

@@ -123,6 +123,34 @@ var ShowMonitor = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
           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);
+        }
       }
     };
   });
@@ -390,8 +418,8 @@ var ShowMonitor = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
           }
         }
 
-        var _key = wrapperKey.current;
-        var curListeners = listeners[_key];
+        var _key2 = wrapperKey.current;
+        var curListeners = listeners[_key2];
 
         if (curListeners) {
           // 不在监听队列中，移除
@@ -401,7 +429,7 @@ var ShowMonitor = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
           // @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/cjs/transition/index.js

@@ -26,10 +26,12 @@ var _excluded = ["children", "type", "in", "timeout", "mountOnEnter", "unmountOn
  * @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,