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

package/esm/_helpers/type.d.ts

@@ -25,6 +25,6 @@ export interface BaseRef {
     /**
      * 组件外层dom元素
      * @en The outer DOM element of the component
-     * */
+     */
     dom: HTMLDivElement | null;
 }

package/esm/button/demo/style/mobile.less

@@ -17,3 +17,7 @@
         }
     }
 }
+
+#demo-order-6 {
+
+}

package/esm/button/index.d.ts

@@ -115,6 +115,12 @@ export interface ButtonProps {
      * @default true
      */
     disableWhenLoading?: boolean;
+    /**
+     * 加载中是否覆盖Icon
+     * @en Whether to override Icon during loading
+     * @default false
+     */
+    coverIconWhenLoading?: boolean;
 }
 export interface ButtonRef {
     /**

package/esm/button/index.js

@@ -52,7 +52,9 @@ var Button = /*#__PURE__*/forwardRef(function (props, ref) {
       children = _props$children === void 0 ? null : _props$children,
       loadingIcon = props.loadingIcon,
       onClick = props.onClick,
-      onClickDisabled = props.onClickDisabled;
+      onClickDisabled = props.onClickDisabled,
+      _props$coverIconWhenL = props.coverIconWhenLoading,
+      coverIconWhenLoading = _props$coverIconWhenL === void 0 ? false : _props$coverIconWhenL;
   var domRef = useRef(null);
   useImperativeHandle(ref, function () {
     return {
@@ -80,6 +82,14 @@ var Button = /*#__PURE__*/forwardRef(function (props, ref) {
     setActive(false);
   };
 
+  var renderIcon = function renderIcon() {
+    if (coverIconWhenLoading) {
+      return loading ? null : icon;
+    }
+
+    return icon;
+  };
+
   return /*#__PURE__*/React.createElement(ContextLayout, null, function (_ref) {
     var prefixCls = _ref.prefixCls;
     return /*#__PURE__*/React.createElement("button", {
@@ -101,7 +111,7 @@ var Button = /*#__PURE__*/forwardRef(function (props, ref) {
       onClick: disabled || loading && disableWhenLoading ? onClickDisabled : onClick
     }, /*#__PURE__*/React.createElement("div", {
       className: "btn-icon"
-    }, icon, loading && (loadingIcon === void 0 ? /*#__PURE__*/React.createElement(Loading, {
+    }, renderIcon(), loading && (loadingIcon === void 0 ? /*#__PURE__*/React.createElement(Loading, {
       className: "loading-icon",
       radius: 6,
       type: "circle"

package/esm/count-down/demo/style/mobile.less

@@ -32,7 +32,7 @@
     .btn-wrap {
         display: flex;
 
-        .arco-button.type-primary {
+        .@{prefix}-button.type-primary {
             display: flex;
             flex-direction: row;
             align-items: center;

package/esm/grid/index.js

@@ -36,14 +36,21 @@ var Grid = /*#__PURE__*/forwardRef(function (props, ref) {
   });
 
   var getRows = function getRows(prefix, rowsData, rows, row) {
-    var fakeGrids = new Array(!isSliding && columns && rowsData.length % columns ? columns - rowsData.length % columns : 0).fill('');
-    var widthStyle = {
-      minWidth: 1 / columns * 100 + "%"
-    };
+    var placeholders = !isSliding && rowsData.length % columns;
+    var renderData = rowsData;
+
+    if (placeholders) {
+      var fakeGrids = new Array(columns - placeholders).fill({
+        img: null,
+        title: ''
+      });
+      renderData = rowsData.concat(fakeGrids);
+    }
+
     return /*#__PURE__*/React.createElement("div", {
       className: prefix + "-rows",
       key: row
-    }, rowsData.map(function (item, index) {
+    }, renderData.map(function (item, index) {
       var img = item.img,
           title = item.title,
           content = item.content,
@@ -57,7 +64,7 @@ var Grid = /*#__PURE__*/forwardRef(function (props, ref) {
       }
 
       var marginBottom = row + 1 === rows ? 0 : typeof gutter === 'number' ? gutter : (gutter == null ? void 0 : gutter.y) || 0;
-      var rowLen = rowsData.length;
+      var rowLen = renderData.length;
       var marginRight = index + 1 === rowLen ? 0 : typeof gutter === 'number' ? gutter : (gutter == null ? void 0 : gutter.x) || 0;
       return /*#__PURE__*/React.createElement("div", {
         key: index,
@@ -86,12 +93,6 @@ var Grid = /*#__PURE__*/forwardRef(function (props, ref) {
       }) : null, (row + 1) % rows !== 0 ? /*#__PURE__*/React.createElement("i", {
         className: "horizontal-border"
       }) : null);
-    }), fakeGrids.map(function (_, i) {
-      return /*#__PURE__*/React.createElement("div", {
-        className: cls(prefix + "-rows-item fake-col"),
-        key: i,
-        style: widthStyle
-      });
     }));
   };
 

package/esm/image/index.d.ts

@@ -14,7 +14,6 @@ export interface ImageProps {
     /**
      * 指定图片状态，staticLabel=false时有效
      * @en The specified image state, valid when staticLabel=false
-     * @default "init"
      */
     status?: ImageStatus;
     /**

package/esm/image/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { forwardRef, useImperativeHandle, useRef, useEffect, useMemo } from 'react';
-import { cls, handleUnit, nextTick } from '@arco-design/mobile-utils';
+import { cls, defaultLocale, handleUnit, nextTick } from '@arco-design/mobile-utils';
 import { ContextLayout } from '../context-provider';
 import Loading from '../loading';
 import { useSystem, useWindowSize, getStyleWithVendor, useMountedState } from '../_helpers';
@@ -39,8 +39,7 @@ export var BaseImage = /*#__PURE__*/forwardRef(function (props, ref) {
   var loadingImageRef = useRef(null);
   var style = props.style,
       className = props.className,
-      _props$status = props.status,
-      status = _props$status === void 0 ? 'init' : _props$status,
+      status = props.status,
       src = props.src,
       width = props.width,
       height = props.height,
@@ -80,6 +79,7 @@ export var BaseImage = /*#__PURE__*/forwardRef(function (props, ref) {
   var isPreview = Boolean(fit.indexOf('preview') >= 0);
   var actualBoxWidth = boxWidth || windowWidth;
   var actualBoxHeight = boxHeight || windowHeight;
+  var validStatus = status === undefined ? imageStatus : status;
   var attrs = useMemo(function () {
     var imageStyle = {};
 
@@ -255,7 +255,9 @@ export var BaseImage = /*#__PURE__*/forwardRef(function (props, ref) {
   }
 
   return /*#__PURE__*/React.createElement(ContextLayout, null, function (_ref) {
-    var prefixCls = _ref.prefixCls;
+    var prefixCls = _ref.prefixCls,
+        _ref$locale = _ref.locale,
+        locale = _ref$locale === void 0 ? defaultLocale : _ref$locale;
     return /*#__PURE__*/React.createElement("div", {
       className: cls(prefixCls + "-image all-border-box", {
         preview: isPreview
@@ -270,7 +272,7 @@ export var BaseImage = /*#__PURE__*/forwardRef(function (props, ref) {
     }, bottomOverlap || /*#__PURE__*/React.createElement("div", {
       className: "image-placeholder"
     })) : null, /*#__PURE__*/React.createElement("div", {
-      className: cls('image-container', imageStatus, {
+      className: cls('image-container', validStatus, {
         animate: Boolean(animateDuration),
         'static-label': staticLabel
       }),
@@ -285,7 +287,7 @@ export var BaseImage = /*#__PURE__*/forwardRef(function (props, ref) {
         return _onLoad && _onLoad(e.nativeEvent, imageDomRef.current);
       },
       onError: handleStaticImageError
-    })) : null), showLoading && (status === 'loading' || imageStatus === 'loading') ? /*#__PURE__*/React.createElement("div", {
+    })) : null), showLoading && validStatus === 'loading' ? /*#__PURE__*/React.createElement("div", {
       className: "image-content image-loading-container",
       style: {
         borderRadius: radius
@@ -297,7 +299,7 @@ export var BaseImage = /*#__PURE__*/forwardRef(function (props, ref) {
       className: "loading-icon",
       radius: 8.5,
       stroke: 3
-    }))) : null, showError && (status === 'error' || imageStatus === 'error') ? /*#__PURE__*/React.createElement("div", {
+    }))) : null, showError && validStatus === 'error' ? /*#__PURE__*/React.createElement("div", {
       className: "image-content image-error-container",
       onClick: function onClick(e) {
         e.stopPropagation();
@@ -308,7 +310,7 @@ export var BaseImage = /*#__PURE__*/forwardRef(function (props, ref) {
       }
     }, errorArea || /*#__PURE__*/React.createElement("div", {
       className: "image-retry-load"
-    }, "\u91CD\u8BD5")) : null, topOverlap ? /*#__PURE__*/React.createElement("div", {
+    }, locale.Image.loadError)) : null, topOverlap ? /*#__PURE__*/React.createElement("div", {
       className: "image-content image-top-overlap",
       style: {
         borderRadius: radius

package/esm/image-picker/add-icon.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function AddIcon(): JSX.Element;

package/esm/image-picker/add-icon.js

@@ -0,0 +1,14 @@
+import React from 'react';
+export default function AddIcon() {
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "30",
+    height: "30",
+    viewBox: "0 0 30 30",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M14.5 0C14.2239 0 14 0.223857 14 0.5V14H0.5C0.223858 14 0 14.2239 0 14.5V15.5C0 15.7761 0.223857 16 0.5 16H14V29.5C14 29.7761 14.2239 30 14.5 30H15.5C15.7761 30 16 29.7761 16 29.5V16H29.5C29.7761 16 30 15.7761 30 15.5V14.5C30 14.2239 29.7761 14 29.5 14H16V0.5C16 0.223858 15.7761 0 15.5 0H14.5Z",
+    fill: "#C9CDD4"
+  }));
+}

package/esm/image-picker/demo/style/css/mobile.css

@@ -0,0 +1,40 @@
+#demo-image-picker .demo-space {
+  font-size: 14px;
+  line-height: 1;
+  margin: 8px 0;
+}
+#demo-image-picker #demo-order-5 .custom-delete {
+  top: 4px;
+  right: 4px;
+  font-size: 18px;
+  position: absolute;
+  border-radius: 50%;
+  width: 18px;
+  height: 18px;
+  line-height: 16px;
+  text-align: center;
+}
+#demo-image-picker #demo-order-5 .custom-delete-bg {
+  background-color: #0000004d;
+}
+#demo-image-picker #demo-order-6 .loading,
+#demo-image-picker #demo-order-6 .loading1,
+#demo-image-picker #demo-order-6 .load-error,
+#demo-image-picker #demo-order-6 .load-error1 {
+  background: rgba(0, 0, 0, 0.5);
+  text-align: center;
+  line-height: 1.5;
+  font-size: 14px;
+  color: #fff;
+  width: 100%;
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+          justify-content: center;
+}

package/esm/image-picker/demo/style/mobile.less

@@ -0,0 +1,42 @@
+@import '../../../../style/mixin.less';
+
+#demo-image-picker {
+    .demo-space{
+        font-size: 14px;
+        line-height: 1;
+        margin: 8px 0;
+    }
+    #demo-order-5 {
+        .custom-delete {
+            top: 4px;
+            right: 4px;
+            font-size: 18px;
+            position: absolute;
+            border-radius: 50%;
+            width: 18px;
+            height: 18px;
+            line-height: 16px;
+            text-align: center;
+        }
+        .custom-delete-bg {
+            background-color: #0000004d;
+        }
+    }
+    #demo-order-6 {
+        .loading,
+        .loading1,
+        .load-error,
+        .load-error1 {
+            background: rgba(0, 0, 0, 0.5);
+            text-align: center;
+            line-height: 1.5;
+            font-size: 14px;
+            color: #fff;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+    }
+}

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

@@ -0,0 +1,184 @@
+import React, { InputHTMLAttributes } from 'react';
+import { ImageProps } from '../image';
+export interface ImagePickItem {
+    /**
+     * 图片地址
+     * @en Image Url
+     */
+    url: string;
+    /**
+     * 图片文件
+     * @en Image File
+     */
+    file?: File;
+    /**
+     * 图片状态
+     * @en Image Status
+     * @default 'loaded'
+     */
+    status: 'loaded' | 'loading' | 'error';
+}
+export interface AdapterFile {
+    url?: string;
+    size: number;
+    name: string;
+}
+export interface SelectCallback {
+    files: AdapterFile[];
+}
+export interface ImagePickerProps {
+    /**
+     * 自定义类名
+     * @en Custom className
+     */
+    className?: string;
+    /**
+     * 自定义样式
+     * @en Custom stylesheet
+     */
+    style?: React.CSSProperties;
+    /**
+     * 已选择图片列表
+     * @en selected images list
+     */
+    images: ImagePickItem[];
+    /**
+     * 可以选择的文件类型
+     * @en Available File Types
+     * @default 'image/*'
+     */
+    accept?: string;
+    /**
+     * 是否支持多选
+     * @en Whether To Support Multiple Selection
+     */
+    multiple?: boolean;
+    /**
+     * 图片选取模式 Image selection mode [capture MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture)
+     * @en Whether To Support Multiple Selection [capture MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture)
+     */
+    capture?: InputHTMLAttributes<unknown>['capture'];
+    /**
+     * 一行展示图片张数
+     * @en The Number Of Pictures Displayed In A Row
+     * @default 3
+     */
+    columns?: number;
+    /**
+     * 格子间的间距
+     * @en spacing between grids
+     * @default 8
+     */
+    gutter?: number;
+    /**
+     * 最多选择图片张数，超出数量自动隐藏上传按钮，0表示不做限制
+     * @en max Pictures Can Choose
+     */
+    limit?: number;
+    /**
+     * 文件大小限制，单位为K
+     * @en File size limit, in K
+     */
+    maxSize?: number;
+    /**
+     * 是否隐藏删除Icon
+     * @en Whether to hide delete Icon
+     * @default false
+     */
+    hideDelete?: boolean;
+    /**
+     * 是否隐藏选择Icon
+     * @en Whether to hide Select Icon
+     * @default false
+     */
+    hideSelect?: boolean;
+    /**
+     * 是否总是展示选择Icon，默认情况下当图片数量超出limit值时会自动隐藏选择Icon
+     * @en Whether to always show Select Icon
+     * @default false
+     */
+    alwaysShowSelect?: boolean;
+    /**
+     * 禁用选择和删除图片
+     * @en Disable Select & Delete Image
+     */
+    disabled?: boolean;
+    /**
+     * 自定义删除图标
+     * @en Defined Delete Icon
+     */
+    deleteIcon?: React.ReactNode;
+    /**
+     * 自定义选择图标
+     * @en Defined Select Icon
+     */
+    selectIcon?: React.ReactNode;
+    /**
+     * 透传给图片的属性
+     * @en Attributes passed through to the image
+     */
+    imageProps?: ImageProps;
+    /**
+     * 自定义上传失败展示
+     * @en Defined upload failed display
+     */
+    renderError?: (index?: number) => React.ReactNode | React.ReactNode;
+    /**
+     * 自定义上传中展示
+     * @en Defined uploading display
+     */
+    renderLoading?: (index?: number) => React.ReactNode | React.ReactNode;
+    /**
+     * 上传方法
+     * @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>;
+    /**
+     * 图片超过限制大小
+     * @en Image exceeds size limit
+     */
+    onMaxSizeExceed?: (file: File) => void;
+    /**
+     * 选择张数超过限制
+     * @en The number of pictures exceeds the limit
+     */
+    onLimitExceed?: (files: File[]) => void;
+    /**
+     * 图片点击
+     * @en click event
+     */
+    onClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>, image: ImagePickItem, index: number) => void;
+    /**
+     * 图片长按事件
+     * @en long press event
+     */
+    onLongPress?: (e: React.TouchEvent<HTMLElement>, image: ImagePickItem, index: number) => void;
+    /**
+     * 图片选择适配器
+     * @en Select Adaptor
+     */
+    selectAdapter: () => Promise<SelectCallback>;
+}
+export interface ImagePickerRef {
+    /**
+     * 最外层 DOM 元素
+     * @en The outer DOM element of the component
+     */
+    dom: HTMLDivElement | null;
+}
+/**
+ * 图片选择器组件
+ * @en ImagePicker Component
+ * @type 数据输入
+ * @type_en Data Entry
+ * @name 图片选择器
+ * @name_en ImagePicker
+ */
+declare const ImagePicker: React.ForwardRefExoticComponent<ImagePickerProps & React.RefAttributes<ImagePickerRef>>;
+export default ImagePicker;