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

package/CHANGELOG.md

@@ -3,6 +3,19 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.19.1](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.19.0...@arco-design/mobile-react@2.19.1) (2022-07-22)
+
+
+### Bug Fixes
+
+* `Notify` export types ([0a096ba](https://github.com/arco-design/arco-design-mobile/commit/0a096bac78eeadf60dbfcf6be58f8f51e24f5343))
+* `Steps` style optimize ([e4a0343](https://github.com/arco-design/arco-design-mobile/commit/e4a0343c5258f69d0d0fee97047b78011f54d50d))
+* button add disableWhenLoading options ([#13](https://github.com/arco-design/arco-design-mobile/issues/13)) ([0c21f35](https://github.com/arco-design/arco-design-mobile/commit/0c21f350d5ad9af167cf1604acd19df5618daeda))
+
+
+
+
+
 # 2.19.0 (2022-07-07)
 
 

package/cjs/button/index.d.ts

@@ -109,6 +109,12 @@ export interface ButtonProps {
      * @en Callback function when disabling button
      */
     onClickDisabled?: (e: React.MouseEvent) => void;
+    /**
+     * 加载中是否禁用按钮操作
+     * @en Disable button when loading
+     * @default true
+     */
+    disableWhenLoading?: boolean;
 }
 export interface ButtonRef {
     /**

package/cjs/button/index.js

@@ -47,6 +47,8 @@ var Button = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       loading = _props$loading === void 0 ? false : _props$loading,
       _props$disabled = props.disabled,
       disabled = _props$disabled === void 0 ? false : _props$disabled,
+      _props$disableWhenLoa = props.disableWhenLoading,
+      disableWhenLoading = _props$disableWhenLoa === void 0 ? true : _props$disableWhenLoa,
       _props$shape = props.shape,
       shape = _props$shape === void 0 ? 'semi' : _props$shape,
       _props$halfBorder = props.halfBorder,
@@ -113,7 +115,7 @@ var Button = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       onTouchCancel: handleTouchEnd,
       onMouseDown: handleTouchStart,
       onMouseUp: handleTouchEnd,
-      onClick: disabled ? onClickDisabled : onClick
+      onClick: disabled || loading && disableWhenLoading ? onClickDisabled : onClick
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "btn-icon"
     }, icon, loading && (loadingIcon === void 0 ? /*#__PURE__*/_react.default.createElement(_loading.default, {

package/cjs/grid/index.js

@@ -50,21 +50,14 @@ var Grid = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   });
 
   var getRows = function getRows(prefix, rowsData, rows, row) {
-    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);
-    }
-
+    var fakeGrids = new Array(!isSliding && columns && rowsData.length % columns ? columns - rowsData.length % columns : 0).fill('');
+    var widthStyle = {
+      minWidth: 1 / columns * 100 + "%"
+    };
     return /*#__PURE__*/_react.default.createElement("div", {
       className: prefix + "-rows",
       key: row
-    }, renderData.map(function (item, index) {
+    }, rowsData.map(function (item, index) {
       var img = item.img,
           title = item.title,
           content = item.content,
@@ -78,7 +71,7 @@ var Grid = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       }
 
       var marginBottom = row + 1 === rows ? 0 : typeof gutter === 'number' ? gutter : (gutter == null ? void 0 : gutter.y) || 0;
-      var rowLen = renderData.length;
+      var rowLen = rowsData.length;
       var marginRight = index + 1 === rowLen ? 0 : typeof gutter === 'number' ? gutter : (gutter == null ? void 0 : gutter.x) || 0;
       return /*#__PURE__*/_react.default.createElement("div", {
         key: index,
@@ -107,6 +100,12 @@ var Grid = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       }) : null, (row + 1) % rows !== 0 ? /*#__PURE__*/_react.default.createElement("i", {
         className: "horizontal-border"
       }) : null);
+    }), fakeGrids.map(function (_, i) {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _mobileUtils.cls)(prefix + "-rows-item fake-col"),
+        key: i,
+        style: widthStyle
+      });
     }));
   };
 

package/cjs/image/index.d.ts

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

package/cjs/image/index.js

@@ -55,7 +55,8 @@ var BaseImage = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var loadingImageRef = (0, _react.useRef)(null);
   var style = props.style,
       className = props.className,
-      status = props.status,
+      _props$status = props.status,
+      status = _props$status === void 0 ? 'init' : _props$status,
       src = props.src,
       width = props.width,
       height = props.height,
@@ -95,7 +96,6 @@ var BaseImage = /*#__PURE__*/(0, _react.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 = (0, _react.useMemo)(function () {
     var imageStyle = {};
 
@@ -271,9 +271,7 @@ var BaseImage = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }
 
   return /*#__PURE__*/_react.default.createElement(_contextProvider.ContextLayout, null, function (_ref) {
-    var prefixCls = _ref.prefixCls,
-        _ref$locale = _ref.locale,
-        locale = _ref$locale === void 0 ? _mobileUtils.defaultLocale : _ref$locale;
+    var prefixCls = _ref.prefixCls;
     return /*#__PURE__*/_react.default.createElement("div", {
       className: (0, _mobileUtils.cls)(prefixCls + "-image all-border-box", {
         preview: isPreview
@@ -288,7 +286,7 @@ var BaseImage = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }, bottomOverlap || /*#__PURE__*/_react.default.createElement("div", {
       className: "image-placeholder"
     })) : null, /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _mobileUtils.cls)('image-container', validStatus, {
+      className: (0, _mobileUtils.cls)('image-container', imageStatus, {
         animate: Boolean(animateDuration),
         'static-label': staticLabel
       }),
@@ -303,7 +301,7 @@ var BaseImage = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
         return _onLoad && _onLoad(e.nativeEvent, imageDomRef.current);
       },
       onError: handleStaticImageError
-    })) : null), showLoading && validStatus === 'loading' ? /*#__PURE__*/_react.default.createElement("div", {
+    })) : null), showLoading && (status === 'loading' || imageStatus === 'loading') ? /*#__PURE__*/_react.default.createElement("div", {
       className: "image-content image-loading-container",
       style: {
         borderRadius: radius
@@ -315,7 +313,7 @@ var BaseImage = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       className: "loading-icon",
       radius: 8.5,
       stroke: 3
-    }))) : null, showError && validStatus === 'error' ? /*#__PURE__*/_react.default.createElement("div", {
+    }))) : null, showError && (status === 'error' || imageStatus === 'error') ? /*#__PURE__*/_react.default.createElement("div", {
       className: "image-content image-error-container",
       onClick: function onClick(e) {
         e.stopPropagation();
@@ -326,7 +324,7 @@ var BaseImage = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       }
     }, errorArea || /*#__PURE__*/_react.default.createElement("div", {
       className: "image-retry-load"
-    }, locale.Image.loadError)) : null, topOverlap ? /*#__PURE__*/_react.default.createElement("div", {
+    }, "\u91CD\u8BD5")) : null, topOverlap ? /*#__PURE__*/_react.default.createElement("div", {
       className: "image-content image-top-overlap",
       style: {
         borderRadius: radius

package/cjs/image-preview/index.d.ts

@@ -268,9 +268,9 @@ declare const _default: React.ForwardRefExoticComponent<ImagePreviewProps & Reac
      * @param {ImagePreviewProps} config configuration
      * @returns {{ close: () => void; update: (newConfig: ImagePreviewProps) => void; }}
      */
-    open: (config: Pick<ImagePreviewProps & React.RefAttributes<ImagePreviewRef>, "style" | "ref" | "key" | "getContainer" | "className" | "onClose" | "onTouchMove" | "fit" | "loadingArea" | "errorArea" | "showLoading" | "showError" | "retryTime" | "staticLabel" | "onChange" | "onTouchEnd" | "onTouchStart" | "animateDurationSlide" | "loop" | "swipeable" | "renderIndicator" | "indicatorPos" | "showIndicator" | "hideSingleIndicator" | "spaceBetween" | "percentToChange" | "distanceToChange" | "speedToChange" | "lazyloadCount" | "onAfterChange" | "images" | "openIndex" | "displayDuration" | "replaceFallbackWhenLoaded" | "noselect" | "scrollBezier" | "swipeToClose" | "getMinScale" | "getMaxScale" | "getDoubleClickScale" | "getThumbBounds" | "onImageClick" | "onImageDoubleClick" | "onImageLongTap">) => {
+    open: (config: Pick<ImagePreviewProps & React.RefAttributes<ImagePreviewRef>, "style" | "ref" | "key" | "getContainer" | "className" | "onClose" | "onTouchMove" | "fit" | "loadingArea" | "errorArea" | "showLoading" | "showError" | "retryTime" | "staticLabel" | "onChange" | "onTouchEnd" | "onTouchStart" | "animateDurationSlide" | "loop" | "swipeable" | "renderIndicator" | "indicatorPos" | "showIndicator" | "hideSingleIndicator" | "spaceBetween" | "percentToChange" | "distanceToChange" | "speedToChange" | "lazyloadCount" | "onAfterChange" | "openIndex" | "images" | "displayDuration" | "replaceFallbackWhenLoaded" | "noselect" | "scrollBezier" | "swipeToClose" | "getMinScale" | "getMaxScale" | "getDoubleClickScale" | "getThumbBounds" | "onImageClick" | "onImageDoubleClick" | "onImageLongTap">) => {
         close: () => void;
-        update: (newConfig: Pick<ImagePreviewProps & React.RefAttributes<ImagePreviewRef>, "style" | "ref" | "key" | "getContainer" | "className" | "onClose" | "onTouchMove" | "fit" | "loadingArea" | "errorArea" | "showLoading" | "showError" | "retryTime" | "staticLabel" | "onChange" | "onTouchEnd" | "onTouchStart" | "animateDurationSlide" | "loop" | "swipeable" | "renderIndicator" | "indicatorPos" | "showIndicator" | "hideSingleIndicator" | "spaceBetween" | "percentToChange" | "distanceToChange" | "speedToChange" | "lazyloadCount" | "onAfterChange" | "images" | "openIndex" | "displayDuration" | "replaceFallbackWhenLoaded" | "noselect" | "scrollBezier" | "swipeToClose" | "getMinScale" | "getMaxScale" | "getDoubleClickScale" | "getThumbBounds" | "onImageClick" | "onImageDoubleClick" | "onImageLongTap">) => void; /**
+        update: (newConfig: Pick<ImagePreviewProps & React.RefAttributes<ImagePreviewRef>, "style" | "ref" | "key" | "getContainer" | "className" | "onClose" | "onTouchMove" | "fit" | "loadingArea" | "errorArea" | "showLoading" | "showError" | "retryTime" | "staticLabel" | "onChange" | "onTouchEnd" | "onTouchStart" | "animateDurationSlide" | "loop" | "swipeable" | "renderIndicator" | "indicatorPos" | "showIndicator" | "hideSingleIndicator" | "spaceBetween" | "percentToChange" | "distanceToChange" | "speedToChange" | "lazyloadCount" | "onAfterChange" | "openIndex" | "images" | "displayDuration" | "replaceFallbackWhenLoaded" | "noselect" | "scrollBezier" | "swipeToClose" | "getMinScale" | "getMaxScale" | "getDoubleClickScale" | "getThumbBounds" | "onImageClick" | "onImageDoubleClick" | "onImageLongTap">) => void; /**
          * 是否可循环滑动
          * @en Whether it can be swiped circularly
          * @default false

package/cjs/index.d.ts

@@ -21,7 +21,6 @@ export { default as Ellipsis } from './ellipsis';
 export { default as Grid } from './grid';
 export { default as Image } from './image';
 export { default as ShowMonitor } from './show-monitor';
-export { default as ImagePicker } from './image-picker';
 export { default as ImagePreview } from './image-preview';
 export { default as Input } from './input';
 export { default as LoadMore } from './load-more';

package/cjs/index.js

@@ -3,7 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports.Transition = exports.Toast = exports.Textarea = exports.Tag = exports.Tabs = exports.TabBar = exports.Switch = exports.SwipeLoad = exports.Sticky = exports.Steps = exports.Slider = exports.ShowMonitor = exports.Rate = exports.Radio = exports.PullRefresh = exports.Progress = exports.Portal = exports.PopupSwiper = exports.Popup = exports.Popover = exports.PickerView = exports.Picker = exports.Pagination = exports.Notify = exports.NoticeBar = exports.NavBar = exports.Masking = exports.Loading = exports.LoadMore = exports.Input = exports.ImagePreview = exports.ImagePicker = exports.Image = exports.Grid = exports.Ellipsis = exports.DropdownMenu = exports.Dropdown = exports.Dialog = exports.DatePicker = exports.CountDown = exports.ContextProvider = exports.Collapse = exports.CircleProgress = exports.Checkbox = exports.Cell = exports.Carousel = exports.Button = exports.Badge = exports.Avatar = exports.ActionSheet = void 0;
+exports.Transition = exports.Toast = exports.Textarea = exports.Tag = exports.Tabs = exports.TabBar = exports.Switch = exports.SwipeLoad = exports.Sticky = exports.Steps = exports.Slider = exports.ShowMonitor = exports.Rate = exports.Radio = exports.PullRefresh = exports.Progress = exports.Portal = exports.PopupSwiper = exports.Popup = exports.Popover = exports.PickerView = exports.Picker = exports.Pagination = exports.Notify = exports.NoticeBar = exports.NavBar = exports.Masking = exports.Loading = exports.LoadMore = exports.Input = exports.ImagePreview = exports.Image = exports.Grid = exports.Ellipsis = exports.DropdownMenu = exports.Dropdown = exports.Dialog = exports.DatePicker = exports.CountDown = exports.ContextProvider = exports.Collapse = exports.CircleProgress = exports.Checkbox = exports.Cell = exports.Carousel = exports.Button = exports.Badge = exports.Avatar = exports.ActionSheet = void 0;
 
 var _actionSheet = _interopRequireDefault(require("./action-sheet"));
 
@@ -97,10 +97,6 @@ var _showMonitor = _interopRequireDefault(require("./show-monitor"));
 
 exports.ShowMonitor = _showMonitor.default;
 
-var _imagePicker = _interopRequireDefault(require("./image-picker"));
-
-exports.ImagePicker = _imagePicker.default;
-
 var _imagePreview = _interopRequireDefault(require("./image-preview"));
 
 exports.ImagePreview = _imagePreview.default;

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/steps/demo/style/css/mobile.css

@@ -61,5 +61,5 @@
   background: #165DFF;
 }
 #demo-steps #demo-order-8 .demo-svg .arco-steps-item-custom-icon {
-  font-size: 11PX;
+  font-size: 12PX;
 }

package/cjs/steps/demo/style/mobile.less

@@ -30,7 +30,7 @@
             }
             .set-steps-color(#165DFF);
             .@{prefix}-steps-item-custom-icon {
-                font-size: 11PX;
+                font-size: 12PX;
             }
         }
     }

package/cjs/steps/style/css/index.css

@@ -59,7 +59,7 @@
 .vertical .arco-steps-item-tail {
   height: 100%;
   width:  18PX ;
-  top:  0.18rem ;
+  top: 0.18rem;
   padding:  0.28rem 0 ;
 }
 .vertical .arco-steps-item-tail:after {
@@ -73,7 +73,19 @@
 .finish .arco-steps-item-tail:after {
   background:  #165dff ;
 }
-.arco-steps-item-custom-icon,
+.arco-steps-item-custom-icon {
+  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;
+  width:  20PX ;
+  height:  20PX ;
+}
 .arco-steps-item-icon {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -84,12 +96,10 @@
   -webkit-box-pack: center;
   -webkit-justify-content: center;
           justify-content: center;
+  border-radius: 50%;
   width:  18PX ;
   height:  18PX ;
 }
-.arco-steps-item-icon {
-  border-radius: 50%;
-}
 .number.finish .arco-steps-item-icon {
   background:  #E8F3FF ;
 }

package/cjs/steps/style/index.less

@@ -47,7 +47,7 @@
             .vertical & {
                 height: 100%;
                 .use-var(width, steps-icon-width);
-                .use-var(top, steps-tail-vertical-top);
+                .rem(top, 9);
                 .use-var(padding, steps-tail-vertical-padding);
 
                 &:after {
@@ -65,17 +65,21 @@
             }
         }
 
-        &-custom-icon,
-        &-icon {
-            display: inline-flex;
+        &-custom-icon {
+            display: flex;
             align-items: center;
             justify-content: center;
-            .use-var(width, steps-icon-width);
-            .use-var(height, steps-icon-height);
+            .use-var(width, steps-custom-icon-width);
+            .use-var(height, steps-custom-icon-height);
         }
 
         &-icon {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
             border-radius: 50%;
+            .use-var(width, steps-icon-width);
+            .use-var(height, steps-icon-height);
 
             .number.finish & {
                 .use-var(background, steps-finish-icon-num-background);

package/cjs/style.d.ts

@@ -22,7 +22,6 @@ import './ellipsis/style';
 import './grid/style';
 import './image/style';
 import './show-monitor/style';
-import './image-picker/style';
 import './image-preview/style';
 import './input/style';
 import './load-more/style';

package/cjs/style.js

@@ -48,8 +48,6 @@ require("./image/style");
 
 require("./show-monitor/style");
 
-require("./image-picker/style");
-
 require("./image-preview/style");
 
 require("./input/style");

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,