@arco-design/mobile-react 2.19.0 → 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/README.en-US.md

@@ -59,8 +59,8 @@ React & ReactDOM: **<a href="https://reactjs.org/docs/cdn-links.html" target="_b
 React Transition Group: **<a href="https://reactcommunity.org/react-transition-group/" target="_blank">Click here</a>**
 
 ```
-<link ref="stylesheet" href="https://unpkg.com/browse/@arco-design/mobile-react@2.18.6/dist/style.min.css">
-<script src="https://unpkg.com/browse/@arco-design/mobile-react@2.18.6/dist/index.min.js"></script>
+<link ref="stylesheet" href="https://unpkg.com/browse/@arco-design/mobile-react@2.19.0/dist/style.min.css">
+<script src="https://unpkg.com/browse/@arco-design/mobile-react@2.19.0/dist/index.min.js"></script>
 ```
 
 ## Full import

package/README.md

@@ -54,13 +54,13 @@ lessOptions: {
 
 可通过 `<script>` 标签引入 CDN 形式资源，注意需先引入 peerDependencies 的 CDN 资源。
 
-React & ReactDOM：**<a href="https://reactjs.org/docs/cdn-links.html" target="_blank">戳这里获取</a>**
+React & ReactDOM： **<a href="https://reactjs.org/docs/cdn-links.html" target="_blank">戳这里获取</a>**
 
-React Transition Group：**<a href="https://reactcommunity.org/react-transition-group/" target="_blank">戳这里获取</a>**
+React Transition Group： **<a href="https://reactcommunity.org/react-transition-group/" target="_blank">戳这里获取</a>**
 
 ```
-<link ref="stylesheet" href="https://unpkg.com/browse/@arco-design/mobile-react@2.18.6/dist/style.min.css">
-<script src="https://unpkg.com/browse/@arco-design/mobile-react@2.18.6/dist/index.min.js"></script>
+<link ref="stylesheet" href="https://unpkg.com/browse/@arco-design/mobile-react@2.19.0/dist/style.min.css">
+<script src="https://unpkg.com/browse/@arco-design/mobile-react@2.19.0/dist/index.min.js"></script>
 ```
 
 ## 引入全部

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/circle-progress/index.js

@@ -89,11 +89,13 @@ var CircleProgress = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     if (isRenderNormal) {
       if (progressColorStart) {
         return progressColorStart;
-      } else if (progressColorEnd) {
+      }
+
+      if (progressColorEnd) {
         return progressColorEnd;
-      } else {
-        return progressColor;
       }
+
+      return progressColor;
     }
   }, [progressColorStart, progressColorEnd, progressColor]);
 

package/cjs/collapse/collapse.js

@@ -7,10 +7,10 @@ exports.Collapse = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _contextProvider = require("../context-provider");
-
 var _mobileUtils = require("@arco-design/mobile-utils");
 
+var _contextProvider = require("../context-provider");
+
 var _helpers = require("../_helpers");
 
 var _IconArrowDown = _interopRequireDefault(require("../icon/IconArrowDown"));

package/cjs/nav-bar/back-icon.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-declare const BackArrow: ({ color }: {
+declare function BackArrow({ color }: {
     color?: string | undefined;
-}) => JSX.Element;
+}): JSX.Element;
 export default BackArrow;

package/cjs/nav-bar/back-icon.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var BackArrow = function BackArrow(_ref) {
+function BackArrow(_ref) {
   var _ref$color = _ref.color,
       color = _ref$color === void 0 ? 'currentColor' : _ref$color;
   return /*#__PURE__*/_react.default.createElement("div", {
@@ -20,7 +20,7 @@ var BackArrow = function BackArrow(_ref) {
     d: "M2.1,8l5.4,5.4c0.1,0.1,0.1,0.3,0,0.5L7,14.4c-0.1,0.1-0.3,0.1-0.5,0L0.7,8.5c-0.3-0.3-0.3-0.7,0-0.9 l5.9-5.9c0.1-0.1,0.3-0.1,0.5,0l0.5,0.5c0.1,0.1,0.1,0.3,0,0.5L2.1,8z",
     fill: color
   })));
-};
+}
 
 var _default = BackArrow;
 exports.default = _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/progress/index.js

@@ -82,7 +82,9 @@ var Progress = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
           background: progressColor
         }
       }, currentPercentage, "%");
-    } else if (position === percentPosition) {
+    }
+
+    if (position === percentPosition) {
       return /*#__PURE__*/_react.default.createElement("div", {
         style: {
           color: progressColor

package/cjs/slider/hooks/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SliderProps } from '../';
+import { SliderProps } from '..';
 export declare const baseRenderThumb: (prefixCls: string) => () => JSX.Element;
 export declare type LinePosition = {
     length: number;

package/cjs/slider/marks.d.ts

@@ -1,11 +1,11 @@
-import React, { CSSProperties, ReactNode } from 'react';
-declare const Marks: ({ runTimeConfig, className, style, }: {
+import { CSSProperties, ReactNode } from 'react';
+declare function Marks({ runTimeConfig, className, style, }: {
     runTimeConfig: Array<{
         value: number;
         activated: boolean;
         label: ReactNode;
     }>;
-    className?: string | undefined;
-    style?: React.CSSProperties | undefined;
-}) => JSX.Element;
+    className?: string;
+    style?: CSSProperties;
+}): JSX.Element;
 export default Marks;

package/cjs/slider/marks.js

@@ -9,17 +9,17 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _mobileUtils = require("@arco-design/mobile-utils");
+
 var _contextProvider = require("../context-provider");
 
 var _hooks = require("./hooks");
 
-var _mobileUtils = require("@arco-design/mobile-utils");
-
 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; }
 
-var Marks = function Marks(_ref) {
+function Marks(_ref) {
   var runTimeConfig = _ref.runTimeConfig,
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? '' : _ref$className,
@@ -58,7 +58,7 @@ var Marks = function Marks(_ref) {
       className: prefixCls + "-slider-marks-item-label"
     }, label));
   }));
-};
+}
 
 var _default = Marks;
 exports.default = _default;

package/cjs/slider/popover.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
-export declare const Popover: ({ visible, content, children, }: {
+export declare function Popover({ visible, content, children, }: {
     visible: boolean;
     content: ReactNode;
     children: ReactNode;
-}) => JSX.Element;
+}): JSX.Element;

package/cjs/slider/popover.js

@@ -3,7 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports.Popover = void 0;
+exports.Popover = Popover;
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -15,7 +15,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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; }
 
-var Popover = function Popover(_ref) {
+function Popover(_ref) {
   var visible = _ref.visible,
       content = _ref.content,
       children = _ref.children;
@@ -38,6 +38,4 @@ var Popover = function Popover(_ref) {
   }, content), /*#__PURE__*/_react.default.createElement("div", {
     className: prefixCls + "-slider-popover-arrow"
   }))), children);
-};
-
-exports.Popover = Popover;
+}

package/cjs/steps/step.js

@@ -43,7 +43,9 @@ var Step = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
     if (current < index) {
       return 'wait';
-    } else if (current === index) {
+    }
+
+    if (current === index) {
       return 'process';
     }
 

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

@@ -32,11 +32,20 @@
 }
 .arco-steps-item-tail {
   position: absolute;
+  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;
 }
 .horizontal .arco-steps-item-tail {
   width: 100%;
-  top: 0.18rem;
   left: 50%;
+  height:  18PX ;
   padding:  0 0.36rem ;
 }
 .horizontal .arco-steps-item-tail:after {
@@ -49,8 +58,8 @@
 }
 .vertical .arco-steps-item-tail {
   height: 100%;
+  width:  18PX ;
   top: 0.18rem;
-  left: 0.15rem;
   padding:  0.28rem 0 ;
 }
 .vertical .arco-steps-item-tail:after {
@@ -78,11 +87,18 @@
   height:  20PX ;
 }
 .arco-steps-item-icon {
-  display: inline-block;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: inline-flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+          justify-content: center;
   border-radius: 50%;
   width:  18PX ;
   height:  18PX ;
-  text-align: center;
 }
 .number.finish .arco-steps-item-icon {
   background:  #E8F3FF ;
@@ -97,11 +113,7 @@
   background:  #F53F3F ;
 }
 .arco-steps-item-icon svg {
-  position: relative;
   font-size:  10PX ;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-          transform: translateY(-50%);
 }
 .finish .arco-steps-item-icon svg {
   color:  #165dff ;
@@ -128,9 +140,6 @@
 }
 .arco-steps-item-icon-dot {
   position: relative;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-          transform: translateY(-50%);
   display: inline-block;
   width:  8PX ;
   height:  8PX ;

package/cjs/steps/style/index.less

@@ -24,11 +24,14 @@
 
         &-tail {
             position: absolute;
+            display: flex;
+            align-items: center;
+            justify-content: center;
 
             .horizontal & {
                 width: 100%;
-                .rem(top, 9);
                 left: 50%;
+                .use-var(height, steps-icon-height);
                 .use-var(padding, steps-tail-horizontal-padding);
 
                 &:after {
@@ -43,8 +46,8 @@
 
             .vertical & {
                 height: 100%;
+                .use-var(width, steps-icon-width);
                 .rem(top, 9);
-                .rem(left, 7.5);
                 .use-var(padding, steps-tail-vertical-padding);
 
                 &:after {
@@ -71,11 +74,12 @@
         }
 
         &-icon {
-            display: inline-block;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
             border-radius: 50%;
             .use-var(width, steps-icon-width);
             .use-var(height, steps-icon-height);
-            text-align: center;
 
             .number.finish & {
                 .use-var(background, steps-finish-icon-num-background);
@@ -94,10 +98,7 @@
             }
 
             svg {
-                position: relative;
                 .use-var(font-size, steps-icon-svg-standard-font-size);
-                top: 50%;
-                transform: translateY(-50%);
 
                 .finish & {
                     .use-var(color, steps-finish-icon-svg-color);
@@ -122,8 +123,6 @@
 
             &-dot {
                 position: relative;
-                top: 50%;
-                transform: translateY(-50%);
                 display: inline-block;
                 .use-var(width, steps-dot-width);
                 .use-var(height, steps-dot-height);

package/cjs/swipe-load/index.js

@@ -6,10 +6,10 @@ exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _contextProvider = require("../context-provider");
-
 var _mobileUtils = require("@arco-design/mobile-utils");
 
+var _contextProvider = require("../context-provider");
+
 var _hooks = require("../_helpers/hooks");
 
 var _type = require("./type");

package/cjs/switch/index.js

@@ -129,7 +129,7 @@ var Switch = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       className: prefixCls + "-switch-text"
     }, switchChecked ? text.off || '' : text.on || '') : null, /*#__PURE__*/_react.default.createElement("div", {
       className: prefixCls + "-switch-inner"
-    }, innerArea ? innerArea : null));
+    }, innerArea || null));
   });
 });
 var _default = Switch;

package/cjs/tab-bar/item.js

@@ -9,10 +9,10 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _contextProvider = require("../context-provider");
-
 var _mobileUtils = require("@arco-design/mobile-utils");
 
+var _contextProvider = require("../context-provider");
+
 var _tabBar = require("./tab-bar");
 
 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/cjs/tab-bar/tab-bar.js

@@ -10,10 +10,10 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _contextProvider = require("../context-provider");
-
 var _mobileUtils = require("@arco-design/mobile-utils");
 
+var _contextProvider = require("../context-provider");
+
 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); }

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,