@arco-design/mobile-react 2.19.0

package/esm/input/style/index.less

@@ -0,0 +1,107 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-input-container {
+    width: 100%;
+    .use-var(color, font-color);
+    position: relative;
+    .@{prefix}-input-label {
+        .use-var(min-width, input-label-min-width);
+    }
+}
+
+.@{prefix}-input-label {
+
+    &.required::before {
+        content: "* ";
+        .use-var(color, danger-color);
+    }
+    padding-top: 1PX;
+
+    .disabled & {
+        .use-var(color, input-disabled-color);
+    }
+}
+
+.@{prefix}-input-wrap {
+    position: relative;
+    .use-var(height, input-height);
+    .use-var(padding, input-horizontal-padding, 0);
+    display: flex;
+    align-items: center;
+
+    textarea,
+    input {
+        flex: 1;
+        background: transparent;
+
+        &:disabled {
+            .use-var(color, input-disabled-color);
+            // reset for ios
+            .use-var(-webkit-text-fill-color, input-disabled-color);
+            opacity: 1;
+        }
+    }
+
+    &.textarea {
+        height: auto;
+        align-items: flex-start;
+        .use-var(padding, textarea-padding);
+
+        &.has-stat {
+            .use-var(padding, textarea-has-stat-padding);
+        }
+    }
+
+    &.border {
+
+        &-all {
+            .hairline-var(line-color);
+        }
+
+        &-half {
+            .hairline-var(line-color, top);
+            .hairline-var(line-color, bottom);
+        }
+
+        &-bottom {
+            .hairline-var(line-color, bottom);
+        }
+    }
+}
+
+.@{prefix}-input-prefix, .@{prefix}-input-suffix, .@{prefix}-input-clear {
+    .use-var(font-size, input-text-font-size);
+    .use-var(line-height, input-text-line-height);
+    align-items: center;
+    justify-content: center;
+    display: flex;
+}
+.@{prefix}-input-prefix {
+    .use-var(padding-right, input-label-gutter);
+}
+.@{prefix}-input-clear,
+.@{prefix}-input-suffix {
+    .use-var(padding-left, input-horizontal-padding);
+}
+.@{prefix}-input-clear {
+    .use-var(color, input-clear-icon-color);
+}
+
+.@{prefix}-input {
+    display: inline-block;
+    width: 100%;
+    height: 100%;
+    .use-var(font-size, input-text-font-size);
+    .use-var(line-height, input-text-line-height);
+    .use-var(caret-color, input-caret-color);
+    .use-var(padding, input-vertical-padding, "", 0);
+    .use-var(color, font-color);
+
+    &::placeholder {
+        .use-var(color, input-placeholder-color);
+    }
+
+    &::-webkit-search-cancel-button {
+        display: none;
+    }
+}

package/esm/load-more/demo/style/css/mobile.css

@@ -0,0 +1,7 @@
+#demo-load-more {
+  color:  #1d2129 ;
+  padding-bottom: 0;
+}
+#demo-load-more .arcodesign-mobile-demo-content {
+  padding: 0;
+}

package/esm/load-more/demo/style/mobile.less

@@ -0,0 +1,9 @@
+@import '../../../../style/mixin.less';
+
+#demo-load-more {
+    .use-var(color, font-color);
+    padding-bottom: 0;
+    .arcodesign-mobile-demo-content {
+        padding: 0;
+    }
+}

package/esm/load-more/index.d.ts

@@ -0,0 +1,137 @@
+import React, { ReactNode } from 'react';
+export declare type LoadMoreStatus = 'before-ready' | 'prepare' | 'loading' | 'nomore' | 'retry';
+export interface LoadMoreProps {
+    /**
+     * 自定义样式
+     * @en Custom stylesheet
+     */
+    style?: React.CSSProperties;
+    /**
+     * 自定义类名
+     * @en Custom classname
+     */
+    className?: string;
+    /**
+     * 组件加载但尚未启用状态下的内容
+     * @en Content when the component is loaded but not yet enabled
+     * @default null
+     */
+    beforeReadyArea?: ReactNode;
+    /**
+     * 加载中状态下的内容
+     * @en Content in loading state
+     * @default "正在努力加载中..."
+     * @default_en "Trying to load..."
+     */
+    loadingArea?: ReactNode;
+    /**
+     * 无更多数据状态下的内容
+     * @en Content with no more data
+     * @default "没有更多数据了"
+     * @default_en "No more data"
+     */
+    noMoreArea?: ReactNode;
+    /**
+     * 准备加载状态下的内容
+     * @en Content in ready-to-load state
+     * @default "上拉/点击加载更多"
+     * @default_en "Pull up to load more" or "Click to load more"
+     */
+    prepareArea?: ReactNode;
+    /**
+     * 加载重试状态下的内容
+     * @en Load content in retry state
+     * @default "加载失败，点击重试"
+     * @default_en "failed to load, click to retry"
+     */
+    retryArea?: ReactNode;
+    /**
+     * 组件加载初始状态，传入 "before-ready" 则先加载组件但不请求数据
+     * @en The component is loaded in the initial state. Inputing in "before-ready" will load the component first without requesting data
+     * @default "prepare"
+     */
+    defaultStatus?: 'before-ready' | 'prepare';
+    /**
+     * 当前状态，传入则受控
+     * @en Current state, the component is controlledc  when it is input
+     */
+    status?: LoadMoreStatus;
+    /**
+     * 待计算滚动容器
+     * @en Scrolling container to be calculated
+     * @default () => window
+     */
+    getScrollContainer?: () => HTMLElement | Window | null;
+    /**
+     * 触发loading的时机，当为click时，点击后将触发getData
+     * @en The timing of triggering loading, when it is click, getData will be triggered after clicking
+     * @default "scroll"
+     */
+    trigger?: 'scroll' | 'click';
+    /**
+     * 滚动到离列表底部多远的位置触发getData，触发状态时机为'scroll'时有效
+     * @en Scroll to how far from the bottom of the list to trigger getData, valid when the trigger state timing is 'scroll'
+     * @default 200
+     */
+    threshold?: number;
+    /**
+     * 请求数据方法，可在异步任务结束后根据任务结果调用callback修改loadmore内部状态
+     * @en The request data method, after the asynchronous task ends, the callback can be called according to the task result to modify the internal state of loadmore
+     */
+    getData?: (callback: (status: LoadMoreStatus) => void) => void;
+    /**
+     * 节流粒度
+     * @en Throttle granularity
+     * @default 0
+     */
+    throttle?: number;
+    /**
+     * 是否在loading状态下不触发getData
+     * @en Whether to not trigger getData in the loading state
+     * @default true
+     */
+    blockWhenLoading?: boolean;
+    /**
+     * 刚加载好组件时是否自动先请求一次，trigger=scroll时有效
+     * @en Whether to automatically request once when the component is just loaded, valid when trigger=scroll
+     * @default true
+     */
+    getDataAtFirst?: boolean;
+    /**
+     * 状态改变时回调
+     * @en Callback when state changes
+     */
+    onStatusChange?: (status: LoadMoreStatus, scene?: string) => void;
+    /**
+     * 组件被点击时回调
+     * @en Callback when the component is clicked
+     */
+    onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    /**
+     * 滚动到(底部 - threshold)距离时触发
+     * @en Callback when scrolling to (bottom - threshold) distance
+     */
+    onEndReached?: () => void;
+}
+export interface LoadMoreRef {
+    /**
+     * 最外层元素 DOM
+     * @en The outermost element DOM
+     */
+    dom: HTMLDivElement | null;
+    /**
+     * 手动更改组件状态
+     * @en Change component state manually
+     */
+    changeStatus: (status: LoadMoreStatus, scene?: string) => void;
+}
+/**
+ * 上拉加载组件，支持`scroll`和`click`两种触发加载方式，支持滚动监听。支持受控与不受控两种形式。<br>如果引入组件后发现仅触发了初始的`getData`，请确认是否在`getData`方法内没有调用`callback`移除 loading 状态，且未设置`blockWhenLoading`属性为 false。
+ * @en Pull-up loading component, supports `scroll` and `click` two trigger loading methods, supports scroll monitoring. Both controlled and uncontrolled forms are supported. <br>If only the initial `getData` is triggered after the component is introduced, please make sure that the `callback` is not called in the `getData` method to remove the loading state, and the `blockWhenLoading` property is not set to false.
+ * @type 反馈
+ * @type_en Feedback
+ * @name 加载更多
+ * @name_en LoadMore
+ */
+declare const LoadMore: React.ForwardRefExoticComponent<LoadMoreProps & React.RefAttributes<LoadMoreRef>>;
+export default LoadMore;

package/esm/load-more/index.js

@@ -0,0 +1,182 @@
+import React, { useRef, forwardRef, useImperativeHandle, useEffect, useCallback, useState } from 'react';
+import lodashThrottle from 'lodash.throttle';
+import { getScrollContainerAttribute, getValidScrollContainer, defaultLocale } from '@arco-design/mobile-utils';
+import { ContextLayout } from '../context-provider';
+import { useUpdateEffect } from '../_helpers';
+
+/**
+ * 上拉加载组件，支持`scroll`和`click`两种触发加载方式，支持滚动监听。支持受控与不受控两种形式。<br>如果引入组件后发现仅触发了初始的`getData`，请确认是否在`getData`方法内没有调用`callback`移除 loading 状态，且未设置`blockWhenLoading`属性为 false。
+ * @en Pull-up loading component, supports `scroll` and `click` two trigger loading methods, supports scroll monitoring. Both controlled and uncontrolled forms are supported. <br>If only the initial `getData` is triggered after the component is introduced, please make sure that the `callback` is not called in the `getData` method to remove the loading state, and the `blockWhenLoading` property is not set to false.
+ * @type 反馈
+ * @type_en Feedback
+ * @name 加载更多
+ * @name_en LoadMore
+ */
+var LoadMore = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _props$className = props.className,
+      className = _props$className === void 0 ? '' : _props$className,
+      style = props.style,
+      beforeReadyArea = props.beforeReadyArea,
+      loadingArea = props.loadingArea,
+      noMoreArea = props.noMoreArea,
+      prepareArea = props.prepareArea,
+      retryArea = props.retryArea,
+      _props$defaultStatus = props.defaultStatus,
+      defaultStatus = _props$defaultStatus === void 0 ? 'prepare' : _props$defaultStatus,
+      status = props.status,
+      getScrollContainer = props.getScrollContainer,
+      _props$trigger = props.trigger,
+      trigger = _props$trigger === void 0 ? 'scroll' : _props$trigger,
+      _props$threshold = props.threshold,
+      threshold = _props$threshold === void 0 ? 200 : _props$threshold,
+      _props$throttle = props.throttle,
+      throttle = _props$throttle === void 0 ? 0 : _props$throttle,
+      _props$getDataAtFirst = props.getDataAtFirst,
+      getDataAtFirst = _props$getDataAtFirst === void 0 ? true : _props$getDataAtFirst,
+      getData = props.getData,
+      _props$blockWhenLoadi = props.blockWhenLoading,
+      blockWhenLoading = _props$blockWhenLoadi === void 0 ? true : _props$blockWhenLoadi,
+      onStatusChange = props.onStatusChange,
+      onClick = props.onClick,
+      onEndReached = props.onEndReached;
+  var domRef = useRef(null);
+  var requestAtFirst = trigger === 'scroll' ? getDataAtFirst : false;
+
+  var _useState = useState(defaultStatus),
+      innerStatus = _useState[0],
+      setInnerStatus = _useState[1];
+
+  var lastScrollEndRef = useRef(false);
+  var nowStatus = status || innerStatus;
+  var statusRef = useRef(nowStatus);
+  var changeStatus = useCallback(function (st, scene) {
+    setInnerStatus(st);
+    onStatusChange && onStatusChange(st, scene);
+  }, [onStatusChange]);
+  var triggerGetData = useCallback(function (scene) {
+    if (blockWhenLoading && statusRef.current === 'loading') {
+      return;
+    }
+
+    changeStatus('loading', scene);
+    getData == null ? void 0 : getData(function (st) {
+      lastScrollEndRef.current = false;
+      changeStatus(st, 'manual');
+    });
+  }, [blockWhenLoading, changeStatus, getData]);
+  useEffect(function () {
+    statusRef.current = nowStatus;
+  }, [nowStatus]);
+  useUpdateEffect(function () {
+    // 当状态被设置为 prepare ，且页面总长度不足一屏时，再触发一次 getData
+    // @en When the state is set to prepare and the total page length is less than one screen, trigger getData again
+    if (trigger === 'scroll' && nowStatus === 'prepare' && checkNeedTrigger(0, threshold)) {
+      triggerGetData('pageEnd');
+    }
+  }, [nowStatus]);
+  useEffect(function () {
+    if (requestAtFirst) {
+      if (statusRef.current === 'prepare') {
+        triggerGetData('requestAtFirst');
+      }
+    }
+  }, [trigger]);
+  var handleContainerScroll = useCallback(function () {
+    var scrollTop = getScrollContainerAttribute('scrollTop', getScrollContainer);
+
+    if (checkNeedTrigger(scrollTop, threshold + 1)) {
+      if (!lastScrollEndRef.current) {
+        lastScrollEndRef.current = true;
+        onEndReached && onEndReached();
+
+        if (!['nomore', 'retry', 'before-ready'].includes(statusRef.current)) {
+          triggerGetData('scrollEnd');
+        }
+      }
+    } else {
+      lastScrollEndRef.current = false;
+    }
+  }, [getScrollContainer, threshold, triggerGetData, onEndReached]);
+  useEffect(function () {
+    var binded = null;
+    var scrollFunc = throttle ? lodashThrottle(handleContainerScroll, throttle) : handleContainerScroll;
+
+    if (trigger === 'scroll') {
+      var container = getValidScrollContainer(getScrollContainer);
+
+      if (container) {
+        container.addEventListener('scroll', scrollFunc);
+        binded = container;
+      }
+    }
+
+    return function () {
+      if (binded) {
+        binded.removeEventListener('scroll', scrollFunc);
+      }
+    };
+  }, [trigger, getScrollContainer, handleContainerScroll, throttle]);
+  useImperativeHandle(ref, function () {
+    return {
+      dom: domRef.current,
+      changeStatus: changeStatus
+    };
+  }, [changeStatus]);
+
+  function checkNeedTrigger(top, ths) {
+    var scrollHeight = getScrollContainerAttribute('scrollHeight', getScrollContainer);
+    var clientHeight = getScrollContainerAttribute('clientHeight', getScrollContainer);
+    return scrollHeight - top - clientHeight <= ths;
+  }
+
+  function handleClick(e) {
+    if (trigger === 'click' && statusRef.current === 'prepare' || statusRef.current === 'retry') {
+      triggerGetData('click');
+    }
+
+    onClick && onClick(e);
+  }
+
+  function renderArea(locale) {
+    switch (nowStatus) {
+      case 'before-ready':
+        return beforeReadyArea;
+
+      case 'prepare':
+        return prepareArea === void 0 ? /*#__PURE__*/React.createElement("div", {
+          className: "load-more-text prepare"
+        }, trigger === 'scroll' ? locale.LoadMore.prepareScrollText : locale.LoadMore.prepareClickText, locale.LoadMore.loadMoreText) : prepareArea;
+
+      case 'loading':
+        return loadingArea === void 0 ? /*#__PURE__*/React.createElement("div", {
+          className: "load-more-text loading"
+        }, locale.LoadMore.loadingText) : loadingArea;
+
+      case 'nomore':
+        return noMoreArea === void 0 ? /*#__PURE__*/React.createElement("div", {
+          className: "load-more-text nomore"
+        }, locale.LoadMore.noDataText) : noMoreArea;
+
+      case 'retry':
+        return retryArea === void 0 ? /*#__PURE__*/React.createElement("div", {
+          className: "load-more-text retry"
+        }, locale.LoadMore.failLoadText) : retryArea;
+
+      default:
+        return null;
+    }
+  }
+
+  return /*#__PURE__*/React.createElement(ContextLayout, null, function (_ref) {
+    var prefixCls = _ref.prefixCls,
+        _ref$locale = _ref.locale,
+        locale = _ref$locale === void 0 ? defaultLocale : _ref$locale;
+    return /*#__PURE__*/React.createElement("div", {
+      className: prefixCls + "-load-more status-" + nowStatus + " " + className,
+      ref: domRef,
+      style: style,
+      onClick: handleClick
+    }, renderArea(locale));
+  });
+});
+export default LoadMore;

package/esm/load-more/style/css/index.css

@@ -0,0 +1,5 @@
+.arco-load-more {
+  text-align: center;
+  font-size:  0.28rem ;
+  color:  #86909c ;
+}

package/esm/load-more/style/css/index.d.ts

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

package/esm/load-more/style/css/index.js

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

package/esm/load-more/style/index.d.ts

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

package/esm/load-more/style/index.js

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

package/esm/load-more/style/index.less

@@ -0,0 +1,7 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-load-more {
+    text-align: center;
+    .use-var(font-size, load-more-font-size);
+    .use-var(color, load-more-text-color);
+}

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

@@ -0,0 +1,19 @@
+#demo-loading {
+  padding-bottom: 0.54rem;
+}
+#demo-loading .arcodesign-mobile-demo-content {
+  padding: 0.4rem 0.32rem;
+}
+#demo-loading .loading-demo-basic .arco-loading {
+  margin-right: 0.4rem;
+  vertical-align: middle;
+}
+#demo-loading .loading-demo-line {
+  height: 0.48rem;
+  position: relative;
+}
+#demo-loading .loading-demo-line .arco-loading {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}

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

@@ -0,0 +1,23 @@
+@import '../../../../style/mixin.less';
+
+#demo-loading {
+    .rem(padding-bottom, 27);
+    .arcodesign-mobile-demo-content {
+        .rem(padding, 20, 16);
+    }
+    .loading-demo-basic {
+        .@{prefix}-loading {
+            .rem(margin-right, 20);
+            vertical-align: middle;
+        }
+    }
+    .loading-demo-line {
+        .rem(height, 24);
+        position: relative;
+        .@{prefix}-loading {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+        }
+    }
+}

package/esm/loading/index.d.ts

@@ -0,0 +1,76 @@
+import React from 'react';
+export declare type LoadingType = 'spin' | 'circle' | 'arc' | 'dot';
+export interface LoadingProps {
+    /**
+     * 自定义样式
+     * @en Custom stylesheet
+     */
+    style?: React.CSSProperties;
+    /**
+     * 自定义类名
+     * @en Custom classname
+     */
+    className?: string;
+    /**
+     * 主颜色，如果想使用 css 控制主颜色，可使用公共 mixin `.set-loading-color(@color)`
+     * @en The main color, if you want to use css to control the main color, you can use the public mixin `.set-loading-color(@color)`
+     */
+    color?: string;
+    /**
+     * loading类型
+     * @en Loading type
+     * @default "dot"
+     */
+    type?: LoadingType;
+    /**
+     * 当类型为`dot`或`spin`时有效，定义内部各元素的透明度
+     * @en Valid when the type is `dot` or `spin`, defines the transparency of each element inside
+     */
+    list?: number[];
+    /**
+     * 一次loading周期的毫秒数
+     * @en A loading cycle in millisecond
+     * @default 1000
+     */
+    duration?: number;
+    /**
+     * 区分不同loading组件间的`<def>`内容
+     * @en Distinguish the `<def>` content of different svg
+     */
+    svgKey?: string;
+    /**
+     * 圆圈半径，类型为`circle`或`arc`时可用
+     * @en Circle radius, available when type is `circle` or `arc`
+     * @default 9
+     */
+    radius?: number;
+    /**
+     * 圆圈描边宽度，类型为`circle`或`arc`或`spin`时可用
+     * @en Circle stroke width, available when type is `circle` or `arc` or `spin`
+     * @default 2
+     */
+    stroke?: number;
+    /**
+     * 边缘是否为圆角
+     * @en Whether the edges are rounded
+     * @default true
+     */
+    filleted?: boolean;
+}
+export interface LoadingRef {
+    /**
+     * 最外层元素 DOM
+     * @en The outermost element DOM
+     */
+    dom: HTMLDivElement | null;
+}
+/**
+ * 加载中组件，分为四种类型，`circle`为环形，`arc`为弧线，`spin`为旋转，`dot`为圆点。所有类型均可定制颜色，环形和弧线类型可定制线圈半径及粗细，旋转和圆点类型可定制内部元素透明度。
+ * @en Loading component, divided into four types, `circle` is a ring, `arc` is an arc `spin` is a rotation, and `dot` is a dot. All types can be customized in color, ring and arc types can be customized with coil radius and thickness, and rotation and dot types can be customized with internal element transparency.
+ * @type 反馈
+ * @type_en Feedback
+ * @name 加载
+ * @name_en Loading
+ */
+declare const Loading: React.ForwardRefExoticComponent<LoadingProps & React.RefAttributes<LoadingRef>>;
+export default Loading;