@arco-design/mobile-react 2.19.0

package/esm/popup-swiper/style/index.less

@@ -0,0 +1,10 @@
+@import '../../../style/mixin.less';
+
+.@{prefix}-popup-swiper {
+    &.has-trans .@{prefix}-popup {
+        &-mask,
+        &-content {
+            .use-var(transition, popup-exit-transition);
+        }
+    }
+}

package/esm/portal/demo/style/css/mobile.css

@@ -0,0 +1,13 @@
+#demo-portal,
+#demo-portal .arcodesign-mobile-demo-content {
+  padding: 0;
+}
+.demo-protal-text {
+  font-size: 0.32rem;
+  background:  #ffffff ;
+  color:  #1d2129 ;
+  margin: 0 0.32rem;
+  padding: 0.24rem 0.32rem;
+  border-radius: 0.16rem;
+  overflow: hidden;
+}

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

@@ -0,0 +1,17 @@
+@import '../../../../style/mixin.less';
+
+#demo-portal {
+    &, & .arcodesign-mobile-demo-content {
+        padding: 0;
+    }
+}
+
+.demo-protal-text {
+    .rem(font-size, 16);
+    .use-var(background, background-color);
+    .use-var(color, font-color);
+    .rem(margin, 0, 16);
+    .rem(padding, 12, 16);
+    .rem(border-radius, 8);
+    overflow: hidden;
+}

package/esm/portal/index.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+export interface PortalProps {
+    /**
+     * 被挂载的内容
+     * @en Content to be mounted
+     */
+    children?: React.ReactNode;
+    /**
+     * 容器获取函数
+     * @en Container getter function
+     * @default () => document.body
+     */
+    getContainer?: () => HTMLElement;
+}
+/**
+ * React.createPortal的简单封装。
+ * @en Simple wrapper for React.createPortal
+ * @type 其他
+ * @type_en Others
+ * @name 自定义挂载
+ * @name_en Portal
+ */
+export default function Portal(props: PortalProps): React.ReactPortal | null;

package/esm/portal/index.js

@@ -0,0 +1,23 @@
+import { useEffect, useState } from 'react';
+import ReactDOM from 'react-dom';
+
+/**
+ * React.createPortal的简单封装。
+ * @en Simple wrapper for React.createPortal
+ * @type 其他
+ * @type_en Others
+ * @name 自定义挂载
+ * @name_en Portal
+ */
+export default function Portal(props) {
+  var _useState = useState(),
+      container = _useState[0],
+      setContainer = _useState[1];
+
+  var children = props.children,
+      getContainer = props.getContainer;
+  useEffect(function () {
+    setContainer(getContainer ? getContainer() : document.body);
+  }, [getContainer]);
+  return container ? /*#__PURE__*/ReactDOM.createPortal(children, container) : null;
+}

package/esm/portal/style/css/index.d.ts

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

package/esm/portal/style/css/index.js

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

package/esm/portal/style/index.d.ts

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

package/esm/portal/style/index.js

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

package/esm/portal/style/index.less

@@ -0,0 +1 @@
+// 这里啥也没有，但是为了兼容 babel-plugin-import的统一引用，还是需要创建下文件

package/esm/progress/demo/style/css/mobile.css

@@ -0,0 +1,10 @@
+.progress-demo-custom-size {
+  padding-top: 0.32rem;
+  padding-bottom: 0.32rem;
+}
+.progress-demo-custom-size:first-child {
+  padding-top: 0;
+}
+.progress-demo-custom-size:last-child {
+  padding-bottom: 0;
+}

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

@@ -0,0 +1,14 @@
+@import "../../../../style/mixin.less";
+
+.progress-demo-custom-size {
+    .rem(padding-top, 16);
+    .rem(padding-bottom, 16);
+
+    &:first-child {
+        padding-top: 0;
+    }
+
+    &:last-child {
+        padding-bottom: 0;
+    }
+}

package/esm/progress/index.d.ts

@@ -0,0 +1,126 @@
+import React from 'react';
+declare type PercentPosition = 'left' | 'innerLeft' | 'right' | 'follow';
+export declare type BezierType = [number, number, number, number];
+export interface ProgressProps {
+    /**
+     * 自定义类名
+     * @en Custom classname
+     */
+    className?: string;
+    /**
+     * 自定义样式
+     * @en Custom stylesheet
+     */
+    style?: React.CSSProperties;
+    /**
+     * 文字显示位置
+     * @en Text display position
+     * @default "center"
+     */
+    percentPosition?: PercentPosition;
+    /**
+     * 是否显示进度条内部文字
+     * @en Whether to display the text inside the progress bar
+     * @default true
+     */
+    showPercent?: boolean;
+    /**
+     * 进度环百分比
+     * @en Progress percentage
+     */
+    percentage: number;
+    /**
+     * 进度条内部文字显示（一个函数，返回ReactNode类型，回调参数为当前进度百分比）
+     * @en The text display inside the progress bar (a function that returns the ReactNode type, and the callback parameter is the current progress percentage)
+     */
+    renderPercent?: (percentage: number) => React.ReactNode;
+    /**
+     * 轨道颜色
+     * @en Track color
+     */
+    trackColor?: string;
+    /**
+     * 进度条颜色
+     * @en Progress bar color
+     */
+    progressColor?: string;
+    /**
+     * 是否置灰
+     * @en Whether to be disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * 轨道粗细
+     * @en Track thickness
+     * @default 一般默认为4，percentPosition=innerLeft 时为18，mode=nav时为2
+     * @default_en Generally the default is 4, when percentPosition=innerLeft is 18, when mode=nav is 2
+     */
+    trackStroke?: number;
+    /**
+     * 进度条粗细
+     * @en progress bar thickness
+     * @default 继承 trackStroke 值
+     * @default_en Inherit trackStroke value
+     */
+    progressStroke?: number;
+    /**
+     * 每增加step步长所需的毫秒数
+     * @en The number of milliseconds required to increase the step size
+     * @default 300
+     */
+    duration?: number;
+    /**
+     * 步长（增加步长，以step增长）
+     * @en Step size (increase the step size, grow by step)
+     * @default 1
+     */
+    step?: number;
+    /**
+     * 进度条是否两端圆角
+     * @en Whether the progress bar has rounded corners at both ends
+     * @default true
+     */
+    filleted?: boolean;
+    /**
+     * 初始化percentage时是否以动画形式过渡到目的值
+     * @en Whether to animate the transition to the destination value when initializing percentage
+     * @default true
+     */
+    mountedTransition?: boolean;
+    /**
+     * 初始化时动画的贝塞尔曲线
+     * @en Animated bezier curves at initialization
+     * @default [0.34, 0.69, 0.1, 1]
+     */
+    mountedBezier?: BezierType;
+    /**
+     * 模式可选为nav或者base模式
+     * @en The mode can be selected as nav or base mode
+     * @default "base"
+     */
+    mode?: 'nav' | 'base';
+    /**
+     * 距离屏幕顶部的距离（只有当mode为"nav"才有效）
+     * @en The distance from the top of the screen (only valid when mode is "nav")
+     * @default 0
+     */
+    top?: number;
+}
+export interface ProgressRef {
+    /**
+     * 最外层元素 DOM
+     * @en The outermost element DOM
+     */
+    dom: HTMLDivElement | null;
+}
+/**
+ * 进度条组件，可根据外界传递进来的百分比进行进度展示
+ * @en Progress bar, which can display progress according to the percentage passed in from the outside
+ * @type 反馈
+ * @type_en Feedback
+ * @name 进度条
+ * @name_en Progress
+ */
+declare const Progress: React.ForwardRefExoticComponent<ProgressProps & React.RefAttributes<ProgressRef>>;
+export default Progress;

package/esm/progress/index.js

@@ -0,0 +1,126 @@
+import _extends from "@babel/runtime/helpers/extends";
+import { cls } from '@arco-design/mobile-utils';
+import React, { useRef, forwardRef, useImperativeHandle } from 'react';
+import { ContextLayout } from '../context-provider';
+import { getStyleWithVendor, useProgress } from '../_helpers';
+
+/**
+ * 进度条组件，可根据外界传递进来的百分比进行进度展示
+ * @en Progress bar, which can display progress according to the percentage passed in from the outside
+ * @type 反馈
+ * @type_en Feedback
+ * @name 进度条
+ * @name_en Progress
+ */
+var Progress = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _props$mode = props.mode,
+      mode = _props$mode === void 0 ? 'base' : _props$mode;
+  var percentage = Math.min(100, Math.max(props.percentage, 0));
+  var top = props.top,
+      _props$percentPositio = props.percentPosition,
+      percentPosition = _props$percentPositio === void 0 ? 'right' : _props$percentPositio,
+      _props$className = props.className,
+      className = _props$className === void 0 ? '' : _props$className,
+      style = props.style,
+      _props$showPercent = props.showPercent,
+      showPercent = _props$showPercent === void 0 ? mode === 'base' : _props$showPercent,
+      renderPercent = props.renderPercent,
+      trackColor = props.trackColor,
+      progressColor = props.progressColor,
+      _props$disabled = props.disabled,
+      disabled = _props$disabled === void 0 ? false : _props$disabled,
+      trackStroke = props.trackStroke,
+      progressStroke = props.progressStroke,
+      _props$duration = props.duration,
+      duration = _props$duration === void 0 ? 300 : _props$duration,
+      _props$step = props.step,
+      step = _props$step === void 0 ? 1 : _props$step,
+      _props$filleted = props.filleted,
+      filleted = _props$filleted === void 0 ? true : _props$filleted,
+      _props$mountedTransit = props.mountedTransition,
+      mountedTransition = _props$mountedTransit === void 0 ? true : _props$mountedTransit,
+      _props$mountedBezier = props.mountedBezier,
+      mountedBezier = _props$mountedBezier === void 0 ? [0.34, 0.69, 0.1, 1] : _props$mountedBezier;
+  var domRef = useRef(null);
+
+  var _useProgress = useProgress(mountedTransition, percentage, duration, mountedBezier, step),
+      currentPercentage = _useProgress[0],
+      transitionControl = _useProgress[1];
+
+  useImperativeHandle(ref, function () {
+    return {
+      dom: domRef.current
+    };
+  });
+
+  function renderText(position) {
+    if (!showPercent) {
+      return null;
+    }
+
+    if (position === 'follow') {
+      return renderPercent !== void 0 ? renderPercent(currentPercentage) : /*#__PURE__*/React.createElement("div", {
+        className: cls('text-follow', {
+          'inner-disabled inner-block-disabled': disabled
+        }),
+        style: {
+          background: progressColor
+        }
+      }, currentPercentage, "%");
+    } else if (position === percentPosition) {
+      return /*#__PURE__*/React.createElement("div", {
+        style: {
+          color: progressColor
+        },
+        className: cls('text', "text-" + percentPosition, {
+          'text-disabled': disabled && (percentPosition === 'left' || percentPosition === 'right')
+        })
+      }, renderPercent !== void 0 ? renderPercent(currentPercentage) : currentPercentage + "%");
+    }
+
+    return null;
+  }
+
+  function renderBarProgress(_ref) {
+    var prefixCls = _ref.prefixCls;
+    return /*#__PURE__*/React.createElement("div", {
+      className: cls(prefixCls + "-progress", {
+        'progress-fixed': mode === 'nav'
+      }, {
+        'progress-disabled': disabled
+      }, className),
+      style: _extends({
+        top: top
+      }, style),
+      ref: domRef
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "progress-wrapper"
+    }, renderText('left'), /*#__PURE__*/React.createElement("div", {
+      style: {
+        background: trackColor,
+        height: trackStroke
+      },
+      className: cls('progress-track', "position-" + percentPosition, {
+        filleted: filleted
+      }, {
+        'nav-mode': mode === 'nav'
+      })
+    }, /*#__PURE__*/React.createElement("div", {
+      style: getStyleWithVendor({
+        background: progressColor,
+        width: currentPercentage + "%",
+        height: progressStroke,
+        transition: transitionControl ? "width linear " + duration / 1000 + "s" : ''
+      }),
+      className: cls('progress-bar', {
+        'bar-disabled': disabled,
+        filleted: filleted
+      })
+    }, percentPosition === 'follow' ? /*#__PURE__*/React.createElement("div", {
+      className: "wrapper"
+    }, renderText('follow')) : null)), renderText('right'), renderText('innerLeft')));
+  }
+
+  return /*#__PURE__*/React.createElement(ContextLayout, null, renderBarProgress);
+});
+export default Progress;

package/esm/progress/style/css/index.css

@@ -0,0 +1,108 @@
+.arco-progress.progress-fixed {
+  position: fixed;
+  width: 100%;
+  left: 0;
+  z-index: 1001;
+}
+.arco-progress .progress-wrapper {
+  position: relative;
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+}
+.arco-progress .progress-wrapper .progress-track {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+  background-color:  #F2F3F5 ;
+  height:  4PX ;
+}
+.arco-progress .progress-wrapper .progress-track.position-innerLeft {
+  height:  18PX ;
+}
+.arco-progress .progress-wrapper .progress-track.nav-mode {
+  background-color:  transparent ;
+  height:  2PX ;
+}
+.arco-progress .progress-wrapper .progress-bar {
+  height: 100%;
+  position: relative;
+  background-color:  #165dff ;
+}
+.arco-progress .progress-wrapper .progress-bar .wrapper {
+  position: absolute;
+  right: 0;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+}
+.arco-progress .progress-wrapper .filleted {
+  border-radius: 100PX;
+}
+.arco-progress .progress-wrapper .text {
+  font-size:  0.28rem ;
+  margin-left:  0.16rem ;
+  color:  #165dff ;
+}
+.arco-progress .progress-wrapper .text-left {
+  margin-left: 0;
+  margin-right:  0.16rem ;
+}
+.arco-progress .progress-wrapper .text-innerLeft {
+  position: absolute;
+  z-index: 1;
+  color:  #FFFFFF ;
+}
+.arco-progress .progress-wrapper .text-center {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  z-index: 1;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+  color:  #FFFFFF ;
+}
+.arco-progress .progress-wrapper .text-follow {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+          justify-content: center;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+  width:  0.72rem ;
+  height:  0.4rem ;
+  border-radius:  0.4rem ;
+  font-size:  0.26rem ;
+  color:  #FFFFFF ;
+  background-color:  #165dff ;
+}
+.arco-progress .progress-wrapper .track-color {
+  background-color:  #F2F3F5 ;
+}
+.arco-progress .progress-wrapper .color {
+  stroke:  #165dff ;
+  color:  #165dff ;
+}
+.arco-progress .progress-wrapper .bar-disabled {
+  background-color:  #c9cdd4 ;
+}
+.arco-progress .progress-wrapper .text-disabled {
+  color:  #86909C ;
+}
+.arco-progress .progress-wrapper .inner-disabled {
+  color:  #FFFFFF ;
+}
+.arco-progress .progress-wrapper .inner-disabled.inner-block-disabled {
+  background-color:  #c9cdd4 ;
+}

package/esm/progress/style/css/index.d.ts

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

package/esm/progress/style/css/index.js

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

package/esm/progress/style/index.d.ts

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

package/esm/progress/style/index.js

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

package/esm/progress/style/index.less

@@ -0,0 +1,114 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-progress {
+
+    &.progress-fixed {
+        position: fixed;
+        width: 100%;
+        left: 0;
+        z-index: @full-screen-z-index + 1;;
+    }
+
+    .progress-wrapper {
+        position: relative;
+        width: 100%;
+        display: flex;
+        align-items: center;
+
+        .progress-track {
+            width: 100%;
+            display: flex;
+            align-items: center;
+            .use-var(background-color, progress-track-color);
+            .use-var(height, progress-track-height);
+
+            &.position-innerLeft {
+                .use-var(height, progress-inner-track-height);
+            }
+
+            &.nav-mode {
+                .use-var(background-color, progress-nav-track-color);
+                .use-var(height, progress-nav-track-height);
+            }
+        }
+
+        .progress-bar {
+            height: 100%;
+            position: relative;
+            .use-var(background-color, progress-primary-color);
+
+            .wrapper {
+                position: absolute;
+                right: 0;
+                top: 50%;
+                transform: translateY(-50%);
+            }
+        }
+
+        .filleted {
+            border-radius: 100PX;
+        }
+
+        .text {
+            .use-var(font-size, progress-text-font-size);
+            .use-var(margin-left, progress-text-gutter);
+            .use-var(color, progress-primary-color);
+        }
+
+        .text-left {
+            margin-left: 0;
+            .use-var(margin-right, progress-text-gutter);
+        }
+
+        .text-innerLeft {
+            position: absolute;
+            z-index: 1;
+            .use-var(color, progress-text-inner-color);
+        }
+
+        .text-center {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            z-index: 1;
+            transform: translate(-50%, -50%);
+            .use-var(color, progress-text-inner-color);
+        }
+
+        .text-follow {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            .use-var(width, progress-text-follow-width);
+            .use-var(height, progress-text-follow-height);
+            .use-var(border-radius, progress-text-follow-border-radius);
+            .use-var(font-size, progress-text-follow-font-size);
+            .use-var(color, progress-text-inner-color);
+            .use-var(background-color, progress-primary-color);
+        }
+
+        .track-color {
+            .use-var(background-color, progress-track-color); }
+
+        .color {
+            .use-var(stroke, progress-primary-color);
+            .use-var(color, progress-primary-color);
+        }
+
+        .bar-disabled {
+            .use-var(background-color, progress-disabled-color);
+        }
+
+        .text-disabled {
+            .use-var(color, progress-disabled-text-color);
+        }
+
+        .inner-disabled {
+            .use-var(color, progress-text-inner-color);
+
+            &.inner-block-disabled {
+                .use-var(background-color, progress-disabled-color);
+            }
+        }
+    }
+}

package/esm/pull-refresh/android-pull-refresh.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { PullRefreshRef, PullRefreshBasicProps } from './model';
+export declare const PullRefresh: React.ForwardRefExoticComponent<PullRefreshBasicProps & React.RefAttributes<PullRefreshRef>>;