@arco-design/mobile-react 2.35.1 → 2.36.0

package/umd/date-picker/style/css/index.css

@@ -510,6 +510,41 @@
  * }
  * ```
  */
+.arco-date-picker-show {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  font-size:  0.32rem ;
+  padding:  0 0.32rem ;
+  color:  #c9cdd4 ;
+  min-height:  0.96rem ;
+  background-color:  #FBFCFC ;
+}
+.arco-date-picker-show > span {
+  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;
+}
+.arco-date-picker-show-separate {
+  -webkit-box-flex: 0;
+  -webkit-flex: 0 1 auto;
+          flex: 0 1 auto;
+  min-width:  0.96rem ;
+}
+.arco-date-picker-range-item {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1 0 auto;
+          flex: 1 0 auto;
+}
+.arco-date-picker-range-item-active {
+  color:  #1d2129 ;
+}
 /***************************************************
  *                                                 *
  *               Arco Theme Style                  *
@@ -523,4 +558,11 @@
   background:  #2e2e30 ;
   color:  #929293 ;
 }
+.arco-theme-dark .arco-date-picker-show {
+  color:  #5f5f60 ;
+  background-color:  #1E1E1E ;
+}
+.arco-theme-dark .arco-date-picker-range-item-active {
+  color:  #f6f6f6 ;
+}
 /********************* End *************************/

package/umd/date-picker/style/index.less

@@ -1,7 +1,29 @@
 @import '../../../style/mixin.less';
 
 .@{prefix}-date-picker {
-
+    &-show {
+        display: flex;
+        .use-var(font-size, date-picker-range-font-size);
+        .use-var(padding, date-picker-range-show-padding);
+        .use-var(color, date-picker-range-disabled-font-color);
+        .use-var(min-height, date-picker-range-show-min-height);
+        .use-var(background-color, date-picker-range-background-color);
+        & > span {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        &-separate {
+            flex: 0 1 auto;
+            .use-var(min-width, date-picker-range-separate-min-width);
+        }
+    }
+    &-range-item {
+        flex: 1 0 auto;
+        &-active {
+            .use-var(color, date-picker-range-font-color);
+        }
+    }
 }
 
 /***************************************************
@@ -26,5 +48,20 @@
       .use-var(color, dark-sub-info-font-color);
     }
   }
+  .@{prefix}-date-picker {
+    &-show {
+      @{arco-dark-mode-selector} & {
+        .use-var(color, dark-date-picker-range-disabled-font-color);
+        .use-var(background-color, dark-date-picker-range-background-color);
+      }
+    }
+    &-range-item {
+      &-active {
+        @{arco-dark-mode-selector} & {
+          .use-var(color, dark-date-picker-range-font-color);
+        }
+      }
+    }
+  }
 }
 /********************* End *************************/

package/umd/date-picker/type.d.ts

@@ -40,18 +40,18 @@ export interface DatePickerProps extends Omit<PickerProps, 'data' | 'cascade' |
      * 点击选中时执行的回调
      * @en Callback when clicking OK
      */
-    onOk?: (timestamp: number, obj: IDateObj) => void;
+    onOk?: (timestamp: number | [number, number], obj: IDateObj | [IDateObj, IDateObj]) => void;
     /**
      * 当前选中的时间，timestamp
      * @en The currently selected time, timestamp
      * @default Date.now()
      */
-    currentTs?: number;
+    currentTs?: number | [number, number];
     /**
      * 选中后的回调
      * @en Callback when value is changed
      */
-    onChange?: (timestamp: number, obj: IDateObj) => void;
+    onChange?: (timestamp: number | [number, number], obj: IDateObj | [IDateObj, IDateObj]) => void;
     /**
      * 每列数据选择变化后的回调函数
      * @en The callback function after each column data selection changes
@@ -75,20 +75,31 @@ export interface DatePickerProps extends Omit<PickerProps, 'data' | 'cascade' |
      * @default 当前时间的前十年
      * @default_en 10 years ago from the current time
      */
-    minTs?: number;
+    minTs?: number | {
+        startTs: number;
+        endTs: number;
+    };
     /**
      * 最大可选日期，timestamp
      * @en Maximum selectable date, timestamp
      * @default 当前时间的后十年
      * @default_en Next decade from current time
      */
-    maxTs?: number;
+    maxTs?: number | {
+        startTs: number;
+        endTs: number;
+    };
     /**
      * 是否使用 UTC 时间
      * @en Whether to use UTC
      * @default false
      */
     useUTC?: boolean;
+    /**
+     * 日期时间范围选择展示格式
+     * @en Time range picker display format
+     */
+    rangeItemFormat?: string;
     /**
      * 各可选项展示的格式化方法，参数type为ItemTypes，参数value为当前行的值，返回展示的文字
      * @en The formatting method of each optional item, the parameter type is ItemTypes, the parameter value is the value of the current row, and the displayed text is returned.
@@ -106,9 +117,14 @@ export interface DatePickerProps extends Omit<PickerProps, 'data' | 'cascade' |
      * @en Selector list item intervention to insert custom options.
      */
     columnsProcessor?: (columns: PickerData[][], currentDateObj: IDateObj) => PickerData[][];
+    /**
+     * 自定义分隔符
+     * @en Defined separator area
+     */
+    renderSeparator?: () => React.ReactNode;
     /**
      * 将选择器的展现隐藏状态及选中值的展示与某个容器关联，传入后将同时渲染该容器和选择器组件，此时选择器组件的 visible 和 onHide 属性可不传，点击该容器会唤起选择器
      * @en Associate the hidden state of the picker and the display of the selected value with a container. After passing it in, the container and the picker component will be rendered at the same time. At this time, the visible and onHide attributes of the picker component are optional values. Clicking the container will evoke the picker
      */
-    renderLinkedContainer?: (currentTs: number | undefined, itemTypes: ItemType[]) => ReactNode;
+    renderLinkedContainer?: (currentTs: number | [number, number] | undefined, itemTypes: ItemType[]) => ReactNode;
 }

package/umd/form/linked-container.d.ts

@@ -2,7 +2,7 @@
 export declare function DefaultPickerLinkedContainer({ value }: {
     value: (string | number)[];
 }): JSX.Element;
-export declare function DefaultDatePickerLinkedContainer({ ts, types }: {
-    ts: number;
+export declare function DefaultDatePickerLinkedContainer({ ts, types, }: {
+    ts: number | [number, number];
     types: string[];
 }): JSX.Element;

package/umd/form/linked-container.js

@@ -50,7 +50,11 @@
 
     var className = prefixCls + "-form-picker-link-container";
     var dateTimeStr = (0, _react.useMemo)(function () {
-      return formatDateTimeStr(ts, types);
+      if (typeof ts === 'number') {
+        return formatDateTimeStr(ts, types);
+      }
+
+      return formatDateTimeStr(ts[0], types) + " ~ " + formatDateTimeStr(ts[1], types);
     }, [ts, types]);
 
     function formatDateTimeStr(timestamp, itemTypes) {

package/umd/picker/index.js

@@ -36,7 +36,7 @@
     if (key in _exports && _exports[key] === _type[key]) return;
     _exports[key] = _type[key];
   });
-  var _excluded = ["className", "itemStyle", "cascade", "cols", "rows", "data", "okText", "dismissText", "disabled", "clickable", "hideEmptyCols", "title", "visible", "value", "needBottomOffset", "onDismiss", "onOk", "onChange", "maskClosable", "onHide", "onPickerChange", "touchToStop", "gestureOutOfControl", "renderLinkedContainer"];
+  var _excluded = ["className", "itemStyle", "cascade", "cols", "rows", "data", "okText", "dismissText", "disabled", "clickable", "hideEmptyCols", "title", "visible", "value", "needBottomOffset", "onDismiss", "onOk", "onChange", "maskClosable", "onHide", "onPickerChange", "touchToStop", "gestureOutOfControl", "renderLinkedContainer", "renderExtraHeader"];
 
   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); }
 
@@ -77,6 +77,7 @@
         _props$gestureOutOfCo = props.gestureOutOfControl,
         gestureOutOfControl = _props$gestureOutOfCo === void 0 ? true : _props$gestureOutOfCo,
         renderLinkedContainer = props.renderLinkedContainer,
+        renderExtraHeader = props.renderExtraHeader,
         otherProps = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
     var scrollValueRef = (0, _helpers.useLatestRef)(value);
     var domRef = (0, _react.useRef)(null);
@@ -223,7 +224,7 @@
       }, title), /*#__PURE__*/_react.default.createElement("div", {
         className: prefixCls + "-picker-header-btn right",
         onClick: handleConfirm
-      }, okText || (locale == null ? void 0 : locale.Picker.okText))), /*#__PURE__*/_react.default.createElement(_pickerView.default, {
+      }, okText || (locale == null ? void 0 : locale.Picker.okText))), renderExtraHeader && renderExtraHeader(), /*#__PURE__*/_react.default.createElement(_pickerView.default, {
         ref: pickerViewRef,
         data: data,
         cascade: cascade,

package/umd/picker/type.d.ts

@@ -128,4 +128,9 @@ export interface PickerProps extends Omit<PopupProps, 'visible' | 'close' | 'chi
      * @en Associate the hidden state of the picker and the display of the selected value with a container. After passing it in, the container and the picker component will be rendered at the same time. At this time, the visible and onHide attributes of the picker component are optional values. Clicking the container will evoke the picker
      */
     renderLinkedContainer?: (value: ValueType[], data: PickerData[]) => ReactNode;
+    /**
+     * 自定义头部扩展区域
+     * @en Define the area of extra header
+     */
+    renderExtraHeader?: () => ReactNode;
 }

package/umd/pull-refresh/android-pull-refresh.js

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "@babel/runtime/helpers/extends", "react", "@arco-design/mobile-utils", "../loading", "../context-provider", "./model", "./hooks", "../_helpers"], factory);
+    define(["exports", "@babel/runtime/helpers/extends", "react", "@arco-design/mobile-utils", "es6-promise", "../loading", "../context-provider", "./model", "./hooks", "../_helpers"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("@babel/runtime/helpers/extends"), require("react"), require("@arco-design/mobile-utils"), require("../loading"), require("../context-provider"), require("./model"), require("./hooks"), require("../_helpers"));
+    factory(exports, require("@babel/runtime/helpers/extends"), require("react"), require("@arco-design/mobile-utils"), require("es6-promise"), require("../loading"), require("../context-provider"), require("./model"), require("./hooks"), require("../_helpers"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global._extends, global.react, global.mobileUtils, global.loading, global.contextProvider, global.model, global.hooks, global._helpers);
+    factory(mod.exports, global._extends, global.react, global.mobileUtils, global.es6Promise, global.loading, global.contextProvider, global.model, global.hooks, global._helpers);
     global.androidPullRefresh = mod.exports;
   }
-})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _extends2, _react, _mobileUtils, _loading, _contextProvider, _model, _hooks, _helpers) {
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _extends2, _react, _mobileUtils, _es6Promise, _loading, _contextProvider, _model, _hooks, _helpers) {
   "use strict";
 
   var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -122,8 +122,8 @@
       }, ms ? {
         transition: "all " + ms / 1000 + "s"
       } : {}));
-      setTimeout(function () {
-        callback == null ? void 0 : callback();
+      callback && setTimeout(function () {
+        callback();
       }, ms);
     };
 
@@ -150,11 +150,6 @@
       if (disabled || touchRef.current || loadingRef.current || !domRef.current) return;
       if (!ifShouldHandle()) return;
       setTouching(true);
-
-      if (domRef.current.scrollTop === 0) {
-        domRef.current.scrollTop = 1;
-      }
-
       var _e$touches$ = e.touches[0],
           pageX = _e$touches$.pageX,
           pageY = _e$touches$.pageY;
@@ -173,7 +168,7 @@
     }, [disabled, ifShouldHandle]);
 
     var refresh = function refresh() {
-      return new Promise(function (resolve) {
+      return new _es6Promise.Promise(function (resolve) {
         setStatus(_model.PullRefreshStatus.Loading);
         (0, _mobileUtils.nextTick)(function () {
           scroll(tipsHeight, 300);

package/umd/pull-refresh/model.d.ts

@@ -1,4 +1,5 @@
 import type { CSSProperties, ReactNode } from 'react';
+import { Promise } from 'es6-promise';
 export interface PullRefreshRef {
     /**
      * 最外层元素 DOM

package/umd/search-bar/association.js

@@ -77,8 +77,8 @@
       return /*#__PURE__*/_react.default.createElement("div", {
         key: index,
         className: searchBarAssociationPrefixCls + "-item",
-        onClick: function onClick() {
-          return onAssociationItemClick == null ? void 0 : onAssociationItemClick(item, index);
+        onClick: function onClick(e) {
+          return onAssociationItemClick == null ? void 0 : onAssociationItemClick(item, index, e);
         }
       }, node);
     };

package/umd/search-bar/type.d.ts

@@ -57,7 +57,7 @@ export interface SearchBarAssociationProps<Data = Record<string, any>> {
      * 每行搜索结果的点击回调
      * @en Click callback for each row of search results
      */
-    onAssociationItemClick?: (item: SearchAssociationItem<Data>, index: number) => void;
+    onAssociationItemClick?: (item: SearchAssociationItem<Data>, index: number, event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
     /**
      * 搜索联想框整体被点击的回调
      * @en The callback for the overall click of the search association box

package/umd/stepper/hooks/useValue.js

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "react"], factory);
+    define(["exports", "react", "es6-promise"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("react"));
+    factory(exports, require("react"), require("es6-promise"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.react);
+    factory(mod.exports, global.react, global.es6Promise);
     global.useValue = mod.exports;
   }
-})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _react) {
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _react, _es6Promise) {
   "use strict";
 
   _exports.__esModule = true;
@@ -32,7 +32,7 @@
       var tempValue = typeof updater === 'function' ? updater(innerValue) : updater;
 
       if (formatter) {
-        new Promise(function (resolve) {
+        new _es6Promise.Promise(function (resolve) {
           resolve(formatter(Number(tempValue)));
         }).then(function (result) {
           var res = Math.max(min, Math.min(max, result));

package/umd/tabs/index.js

@@ -439,7 +439,7 @@
           width = _getOffset.width,
           height = _getOffset.height;
 
-      cellRef.current && cellRef.current.resetUnderlineStyle();
+      cellRef.current && cellRef.current.updateLayout();
       setWrapWidth(width || ((_domRef$current = domRef.current) == null ? void 0 : _domRef$current.offsetWidth) || 0);
       setWrapHeight(height || ((_domRef$current2 = domRef.current) == null ? void 0 : _domRef$current2.offsetHeight) || 0);
       paneRef.current && paneRef.current.setCurrentHeight();

package/umd/tabs/type.d.ts

@@ -561,8 +561,8 @@ export interface TabCellRef {
      */
     setCaterpillarAnimate: (ratio?: number) => void;
     /**
-     * 重新计算下划线样式
-     * @en Recalculate underline style
+     * 重新计算下划线样式（仅重算位置，如果 tab cell DOM 被人为改变，请调用 updateLayout）
+     * @en Recalculate underline style (only recalculate position, if the tab cell DOM is changed manually, please call updateLayout)
      */
     resetUnderlineStyle: () => void;
     /**