@arco-design/mobile-react 2.19.2-ee92494.5 → 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
@@ -163,7 +163,7 @@ export interface ImagePickerProps {
      * 图片选择适配器
      * @en Select Adaptor
      */
-    selectAdapter: () => Promise<SelectCallback>;
+    selectAdapter?: () => Promise<SelectCallback>;
 }
 export interface ImagePickerRef {
     /**

package/cjs/image-picker/index.js

@@ -137,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]
         };
       });
@@ -148,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));
           });
         });

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