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

package/esm/image-picker/style/css/index.css

@@ -0,0 +1,147 @@
+.arco-image-picker {
+  font-size:  0.28rem ;
+}
+.arco-image-picker-container {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-flex-wrap: wrap;
+          flex-wrap: wrap;
+}
+.arco-image-picker-image {
+  position: relative;
+  width: 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;
+  padding-top: 100%;
+  border-radius:  0.04rem ;
+  overflow: hidden;
+}
+.arco-image-picker-image-container {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  left: 0;
+}
+.arco-image-picker-image .arco-image {
+  height: 100%;
+  width: 100%;
+}
+.arco-image-picker-image-mask {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+}
+.arco-image-picker-add {
+  background-color:  #f7f8fa ;
+  border-radius:  0.04rem ;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  padding-top: 100%;
+}
+.arco-image-picker-add-container {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+          justify-content: center;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+  text-align: center;
+  font-size:  0.24rem ;
+  color:  #86909c ;
+}
+.arco-image-picker-add-icon {
+  font-size:  0.6rem ;
+  color:  #d8d8d8 ;
+}
+.arco-image-picker-add-icon svg {
+  display: block;
+}
+.arco-image-picker-add-disabled {
+  pointer-events: none;
+}
+.arco-image-picker-add-disabled .arco-image-picker-add-icon {
+  opacity:  0.7 ;
+}
+.arco-image-picker-add input {
+  position: absolute;
+  opacity: 0;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: none;
+}
+.arco-image-picker-close {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 2;
+}
+.arco-image-picker-close-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;
+  font-size:  0.24rem ;
+  width:  0.36rem ;
+  height:  0.36rem ;
+  color:  #ffffff ;
+  background:  rgba(0, 0, 0, 0.3) ;
+  border-radius:  0 0.04rem ;
+}
+.arco-image-picker-error {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+          justify-content: center;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+  background:  rgba(0, 0, 0, 0.5) ;
+  color:  #ffffff ;
+  font-size:  0.28rem ;
+}
+.arco-image-picker-disabled {
+  pointer-events: none;
+}

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

@@ -0,0 +1,2 @@
+import '../../../../style/css/public.css';
+import './index.css';

package/esm/image-picker/style/css/index.js

@@ -0,0 +1,2 @@
+import '../../../../style/css/public.css';
+import './index.css';

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

@@ -0,0 +1,2 @@
+import '../../../style/public.less';
+import './index.less';

package/esm/image-picker/style/index.js

@@ -0,0 +1,2 @@
+import '../../../style/public.less';
+import './index.less';

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

@@ -0,0 +1,116 @@
+@import '../../../style/mixin.less';
+
+.@{prefix}-image-picker {
+    .use-var(font-size, image-picker-font-size);
+    &-container {
+        display: flex;
+        flex-wrap: wrap;
+    }
+    .container() {
+        position: absolute;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        left: 0;
+    }
+    &-image {
+        position: relative;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding-top: 100%;
+        .use-var(border-radius, image-picker-border-radius);
+        overflow: hidden;
+        &-container {
+            .container()
+        }
+        .arco-image{
+            height: 100%;
+            width: 100%;
+        }
+        &-mask {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 2;
+        }
+    }
+    &-add {
+        .use-var(background-color, image-picker-add-background);
+        .use-var(border-radius, image-picker-border-radius);
+        position: relative;
+        width: 100%;
+        height: 100%;
+        padding-top: 100%;
+        &-container {
+            .container();
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            text-align: center;
+            .use-var(font-size, image-picker-add-text-font-size);
+            .use-var(color, image-picker-add-text-color);
+        }
+        &-icon {
+            .use-var(font-size, image-picker-add-icon-font-size);
+            .use-var(color, image-picker-add-icon-color);
+            svg {
+                display: block;
+            }
+        }
+        &-disabled {
+            pointer-events: none;
+        }
+        &-disabled &-icon {
+            .use-var(opacity, image-picker-disabled-opacity);
+        }
+        input {
+            position: absolute;
+            opacity: 0;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            display: none;
+        }
+    }
+    &-close {
+        position: absolute;
+        top: 0;
+        right: 0;
+        z-index: 2;
+        &-icon {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            .use-var(font-size, image-picker-close-font-size);
+            .use-var(width, image-picker-close-width);
+            .use-var(height, image-picker-close-height);
+            .use-var(color, image-picker-close-color);
+            .use-var(background, image-picker-close-background);
+            .use-var(border-radius, image-picker-close-border-radius);
+        }
+    }
+    &-error {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        .use-var(background, image-picker-error-background);
+        .use-var(color, image-picker-error-color);
+        .use-var(font-size, image-picker-font-size);
+    }
+}
+
+.@{prefix}-image-picker-disabled {
+    pointer-events: none;
+}

package/esm/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" | "openIndex" | "images" | "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" | "images" | "openIndex" | "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" | "openIndex" | "images" | "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" | "images" | "openIndex" | "displayDuration" | "replaceFallbackWhenLoaded" | "noselect" | "scrollBezier" | "swipeToClose" | "getMinScale" | "getMaxScale" | "getDoubleClickScale" | "getThumbBounds" | "onImageClick" | "onImageDoubleClick" | "onImageLongTap">) => void; /**
          * 是否可循环滑动
          * @en Whether it can be swiped circularly
          * @default false

package/esm/index.d.ts

@@ -21,6 +21,7 @@ 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/esm/index.js

@@ -21,6 +21,7 @@ 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/esm/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/esm/nav-bar/back-icon.js

@@ -1,6 +1,6 @@
 import React from '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.createElement("div", {
@@ -13,6 +13,6 @@ 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
   })));
-};
+}
 
 export default BackArrow;

package/esm/progress/index.js

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

package/esm/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/esm/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/esm/slider/marks.js

@@ -1,10 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useContext, useCallback } from 'react';
+import { cls } from '@arco-design/mobile-utils';
 import { GlobalContext } from '../context-provider';
 import { SliderContext } from './hooks';
-import { cls } from '@arco-design/mobile-utils';
 
-var Marks = function Marks(_ref) {
+function Marks(_ref) {
   var runTimeConfig = _ref.runTimeConfig,
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? '' : _ref$className,
@@ -43,6 +43,6 @@ var Marks = function Marks(_ref) {
       className: prefixCls + "-slider-marks-item-label"
     }, label));
   }));
-};
+}
 
 export default Marks;

package/esm/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/esm/slider/popover.js

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 import Transition from '../transition';
 import { GlobalContext } from '../context-provider';
-export var Popover = function Popover(_ref) {
+export function Popover(_ref) {
   var visible = _ref.visible,
       content = _ref.content,
       children = _ref.children;
@@ -24,4 +24,4 @@ export var Popover = function Popover(_ref) {
   }, content), /*#__PURE__*/React.createElement("div", {
     className: prefixCls + "-slider-popover-arrow"
   }))), children);
-};
+}

package/esm/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: 12PX;
+  font-size: 11PX;
 }

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

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

package/esm/steps/step.js

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

package/esm/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%;
-  top: 0.18rem;
-  left: 0.15rem;
+  width:  18PX ;
+  top:  0.18rem ;
   padding:  0.28rem 0 ;
 }
 .vertical .arco-steps-item-tail:after {
@@ -64,25 +73,22 @@
 .finish .arco-steps-item-tail:after {
   background:  #165dff ;
 }
-.arco-steps-item-custom-icon {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: flex;
+.arco-steps-item-custom-icon,
+.arco-steps-item-icon {
+  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;
-  width:  20PX ;
-  height:  20PX ;
+  width:  18PX ;
+  height:  18PX ;
 }
 .arco-steps-item-icon {
-  display: inline-block;
   border-radius: 50%;
-  width:  18PX ;
-  height:  18PX ;
-  text-align: center;
 }
 .number.finish .arco-steps-item-icon {
   background:  #E8F3FF ;
@@ -97,11 +103,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 +130,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/esm/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%;
-                .rem(top, 9);
-                .rem(left, 7.5);
+                .use-var(width, steps-icon-width);
+                .use-var(top, steps-tail-vertical-top);
                 .use-var(padding, steps-tail-vertical-padding);
 
                 &:after {
@@ -62,20 +65,17 @@
             }
         }
 
-        &-custom-icon {
-            display: flex;
+        &-custom-icon,
+        &-icon {
+            display: inline-flex;
             align-items: center;
             justify-content: center;
-            .use-var(width, steps-custom-icon-width);
-            .use-var(height, steps-custom-icon-height);
+            .use-var(width, steps-icon-width);
+            .use-var(height, steps-icon-height);
         }
 
         &-icon {
-            display: inline-block;
             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 +94,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 +119,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/esm/style.d.ts

@@ -22,6 +22,7 @@ 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/esm/style.js

@@ -22,6 +22,7 @@ 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/esm/swipe-load/index.js

@@ -1,6 +1,6 @@
 import React, { useRef, forwardRef, useImperativeHandle, useEffect, useState, useContext } from 'react';
-import { ContextLayout, GlobalContext } from '../context-provider';
 import { cls, fingerDisToLabelDis, defaultLocale } from '@arco-design/mobile-utils';
+import { ContextLayout, GlobalContext } from '../context-provider';
 import { useAddListener } from '../_helpers/hooks';
 export * from './type';
 /**

package/esm/switch/index.js

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

package/esm/tab-bar/item.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { forwardRef, useContext, useImperativeHandle, useRef } from 'react';
-import { ContextLayout } from '../context-provider';
 import { cls } from '@arco-design/mobile-utils';
+import { ContextLayout } from '../context-provider';
 import { TabBarContext } from './tab-bar';
 export var Item = /*#__PURE__*/forwardRef(function (props, ref) {
   var _useContext = useContext(TabBarContext),

package/esm/tab-bar/tab-bar.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { Children, createContext, forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
-import { ContextLayout } from '../context-provider';
 import { cls } from '@arco-design/mobile-utils';
+import { ContextLayout } from '../context-provider';
 import { useRefState } from '../_helpers';
 export var TabBarContext = /*#__PURE__*/createContext({
   changeIndex: function changeIndex() {},