@arco-design/mobile-react 2.19.1 → 2.21.0

package/esm/switch/index.js

@@ -6,7 +6,7 @@ import { useSystem } from '../_helpers';
 /**
  * 开关组件，支持点击和滑动触发开关动作。
  * @en A switch component that supports click and slide trigger switch actions.
- * @type 数据输入
+ * @type 数据录入
  * @type_en Data Entry
  * @name 开关
  * @name_en Switch

package/esm/tabs/tab-pane.js

@@ -160,10 +160,14 @@ var TabPane = /*#__PURE__*/forwardRef(function (props, ref) {
     var topDis = curPaneTop - containerTop - scrollOffset;
     var scrollAttr = scrollVertical ? 'scrollTop' : 'scrollLeft';
     var scrollTop = isGlobal ? Math.max(document.documentElement[scrollAttr], document.body[scrollAttr]) : scrollEle[scrollAttr];
+    var scrollSizeAttr = scrollVertical ? 'scrollHeight' : 'scrollWidth';
+    var sizeAttr = scrollVertical ? 'offsetHeight' : 'offsetWidth';
+    var maxTopDis = isGlobal ? Math.max(document.documentElement[scrollSizeAttr], document.body[scrollSizeAttr]) - scrollTop - (scrollVertical ? window.innerHeight : window.innerWidth) : scrollEle[scrollSizeAttr] - scrollTop - scrollEle[sizeAttr];
+    var normalizedTopDis = Math.min(maxTopDis, topDis);
     clearTimeout(timerRef.current);
     autoScrollingRef.current = true;
     var duration = rightNow ? 0 : transitionDuration || 0;
-    scrollWithAnimation(scrollTop, scrollTop + topDis, function (top) {
+    scrollWithAnimation(scrollTop, scrollTop + normalizedTopDis, function (top) {
       if (isGlobal) {
         document.documentElement[scrollAttr] = top;
         document.body[scrollAttr] = top;

package/esm/tag/index.d.ts

@@ -6,7 +6,7 @@ declare const _default: import("react").ForwardRefExoticComponent<import("./type
 /**
  * 标签组件，支持标签和标签组。
  * @en Tag component, supports tags and tag groups.
- * @type 数据展示
+ * @type 信息展示
  * @type_en Data Display
  * @name 标签
  * @name_en Tag

package/esm/tag/index.js

@@ -11,7 +11,7 @@ var List = componentGenerator(Tag);
 /**
  * 标签组件，支持标签和标签组。
  * @en Tag component, supports tags and tag groups.
- * @type 数据展示
+ * @type 信息展示
  * @type_en Data Display
  * @name 标签
  * @name_en Tag

package/esm/textarea/index.d.ts

@@ -84,7 +84,7 @@ export interface TextareaRef {
 /**
  * 多行文本输入框组件，支持自适应内容高度。
  * @en A multi-line textarea, supports adaptive content height.
- * @type 数据输入
+ * @type 数据录入
  * @type_en Data Entry
  * @name 多行文本框
  * @name_en Textarea

package/esm/textarea/index.js

@@ -7,7 +7,7 @@ import { useInputLogic } from '../input/hooks';
 /**
  * 多行文本输入框组件，支持自适应内容高度。
  * @en A multi-line textarea, supports adaptive content height.
- * @type 数据输入
+ * @type 数据录入
  * @type_en Data Entry
  * @name 多行文本框
  * @name_en Textarea

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@arco-design/mobile-react",
-    "version": "2.19.1",
+    "version": "2.21.0",
     "description": "",
     "main": "cjs/index.js",
     "module": "esm/index.js",
@@ -15,7 +15,7 @@
     "author": "taoyiyue@bytedance.com",
     "license": "ISC",
     "dependencies": {
-        "@arco-design/mobile-utils": "^2.10.1",
+        "@arco-design/mobile-utils": "^2.12.0",
         "@arco-design/transformable": "^1.0.0",
         "es6-promise": "^4.2.8",
         "lodash.throttle": "^4.1.1",
@@ -36,5 +36,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "87bdcdc779e527c26b07dd8a950d8e7cec0982dd"
+    "gitHead": "da7492bd1d018d6b69919a01b2fe2d0f2d7fae0d"
 }

package/tokens/app/arcodesign/default/css-variables.less

@@ -159,8 +159,9 @@
     --avatar-desc-ultra-small-margin-top: ~`pxtorem(2)`;
     --avatar-name-color: var(--font-color);
     --avatar-desc-color: var(--sub-info-font-color);
-    --button-border-color: var(--primary-color);
+    --button-line-height: 1.2;
     --button-radius: 2PX;
+    --button-icon-text-gutter: ~`pxtorem(4)`;
     --button-primary-background: var(--primary-color);
     --button-primary-clicked-background: #0E42D2;
     --button-primary-disabled-background: var(--primary-disabled-color);
@@ -518,6 +519,7 @@
     --steps-padding: ~`pxtorem(16)` 0;
     --steps-tail-horizontal-padding: 0 ~`pxtorem(18)`;
     --steps-tail-vertical-padding: ~`pxtorem(14)` 0;
+    --steps-tail-vertical-top: ~`pxtorem(9)`;
     --steps-tail-standard-size: 1PX;
     --steps-tail-standard-background: var(--line-color);
     --steps-tail-finish-background: var(--primary-color);
@@ -544,8 +546,6 @@
     --steps-wait-description-color: var(--sub-info-font-color);
     --steps-icon-width: 18PX;
     --steps-icon-height: 18PX;
-    --steps-custom-icon-width: 20PX;
-    --steps-custom-icon-height: 20PX;
     --steps-dot-width: 8PX;
     --steps-dot-height: 8PX;
     --steps-dot-border-width: 1.5PX;
@@ -560,6 +560,16 @@
     --steps-vertical-padding-bottom: 0;
     --steps-vertical-padding-left: ~`pxtorem(20)`;
     --steps-process-with-config-item-icon-color: #FFFFFF;
+    --swipe-action-open-transition: cubic-bezier(0.2, 0.8, 0.32, 1.28);
+    --swipe-action-close-transition: cubic-bezier(0.34, 0.69, 0.1, 1);
+    --swipe-action-info-padding: ~`pxtorem(16)`;
+    --swipe-action-info-bounce-buffer: ~`pxtorem(30)`;
+    --swipe-action-text-font-size: ~`pxtorem(16)`;
+    --swipe-action-text-line-height: ~`pxtorem(22)`;
+    --swipe-action-text-color: #ffffff;
+    --swipe-action-icon-width: ~`pxtorem(20)`;
+    --swipe-action-icon-height: ~`pxtorem(20)`;
+    --swipe-action-icon-margin-right: ~`pxtorem(4)`;
     --badge-background-color: #F53F3F;
     --badge-text-color: #FFFFFF;
     --badge-font-size: 12PX;
@@ -647,4 +657,44 @@
     --action-sheet-header-padding: ~`pxtorem(16)`;
     --action-sheet-title-font-size: ~`pxtorem(16)`;
     --action-sheet-sub-title-font-size: ~`pxtorem(14)`;
+    --search-bar-padding: ~`pxtorem(16)`;
+    --search-bar-background-color: #FFFFFF;
+    --search-bar-square-shape-border-radius: ~`pxtorem(2)`;
+    --search-bar-round-shape-border-radius: ~`pxtorem(9999)`;
+    --search-bar-input-wrapper-height: ~`pxtorem(36)`;
+    --search-bar-input-wrapper-padding: ~`pxtorem(8)` ~`pxtorem(14)`;
+    --search-bar-input-wrapper-background-color: #F2F3F5;
+    --search-bar-input-wrapper-font-size: ~`pxtorem(14)`;
+    --search-bar-input-height: ~`pxtorem(20)`;
+    --search-bar-input-caret-color: var(--primary-color);
+    --search-bar-input-placeholder-color: var(--disabled-color);
+    --search-bar-prefix-margin-right: ~`pxtorem(9)`;
+    --search-bar-clear-icon-color: #C9CDD4;
+    --search-bar-search-icon-color: #86909C;
+    --search-bar-search-icon-font-size: ~`pxtorem(16)`;
+    --search-bar-cancel-btn-color: var(--primary-color);
+    --search-bar-cancel-btn-font-size: ~`pxtorem(15)`;
+    --search-bar-cancel-btn-margin-left: ~`pxtorem(16)`;
+    --search-bar-association-background-color: #FFFFFF;
+    --search-bar-association-item-height: ~`pxtorem(52)`;
+    --search-bar-association-item-padding: ~`pxtorem(16)`;
+    --search-bar-association-item-font-size: ~`pxtorem(15)`;
+    --search-bar-association-item-color: var(--font-color);
+    --search-bar-association-item-highlight-color: var(--primary-color);
+    --image-picker-font-size: ~`pxtorem(14)`;
+    --image-picker-disabled-opacity: 0.7;
+    --image-picker-border-radius: ~`pxtorem(2)`;
+    --image-picker-add-background: #f7f8fa;
+    --image-picker-add-icon-font-size: ~`pxtorem(30)`;
+    --image-picker-add-icon-color: #d8d8d8;
+    --image-picker-add-text-font-size: ~`pxtorem(12)`;
+    --image-picker-add-text-color: var(--sub-info-font-color);
+    --image-picker-error-color: #ffffff;
+    --image-picker-error-background: rgba(0, 0, 0, 0.5);
+    --image-picker-close-color: #ffffff;
+    --image-picker-close-font-size: ~`pxtorem(12)`;
+    --image-picker-close-width: ~`pxtorem(18)`;
+    --image-picker-close-height: ~`pxtorem(18)`;
+    --image-picker-close-background: rgba(0, 0, 0, 0.3);
+    --image-picker-close-border-radius: 0 ~`pxtorem(2)`;
 }

package/tokens/app/arcodesign/default/index.d.ts

@@ -158,8 +158,9 @@ export interface ArcodesignToken extends Record<string, string> {
     'avatar-desc-ultra-small-margin-top': string;
     'avatar-name-color': string;
     'avatar-desc-color': string;
-    'button-border-color': string;
+    'button-line-height': string;
     'button-radius': string;
+    'button-icon-text-gutter': string;
     'button-primary-background': string;
     'button-primary-clicked-background': string;
     'button-primary-disabled-background': string;
@@ -517,6 +518,7 @@ export interface ArcodesignToken extends Record<string, string> {
     'steps-padding': string;
     'steps-tail-horizontal-padding': string;
     'steps-tail-vertical-padding': string;
+    'steps-tail-vertical-top': string;
     'steps-tail-standard-size': string;
     'steps-tail-standard-background': string;
     'steps-tail-finish-background': string;
@@ -543,8 +545,6 @@ export interface ArcodesignToken extends Record<string, string> {
     'steps-wait-description-color': string;
     'steps-icon-width': string;
     'steps-icon-height': string;
-    'steps-custom-icon-width': string;
-    'steps-custom-icon-height': string;
     'steps-dot-width': string;
     'steps-dot-height': string;
     'steps-dot-border-width': string;
@@ -559,6 +559,16 @@ export interface ArcodesignToken extends Record<string, string> {
     'steps-vertical-padding-bottom': string;
     'steps-vertical-padding-left': string;
     'steps-process-with-config-item-icon-color': string;
+    'swipe-action-open-transition': string;
+    'swipe-action-close-transition': string;
+    'swipe-action-info-padding': string;
+    'swipe-action-info-bounce-buffer': string;
+    'swipe-action-text-font-size': string;
+    'swipe-action-text-line-height': string;
+    'swipe-action-text-color': string;
+    'swipe-action-icon-width': string;
+    'swipe-action-icon-height': string;
+    'swipe-action-icon-margin-right': string;
     'badge-background-color': string;
     'badge-text-color': string;
     'badge-font-size': string;
@@ -646,6 +656,46 @@ export interface ArcodesignToken extends Record<string, string> {
     'action-sheet-header-padding': string;
     'action-sheet-title-font-size': string;
     'action-sheet-sub-title-font-size': string;
+    'search-bar-padding': string;
+    'search-bar-background-color': string;
+    'search-bar-square-shape-border-radius': string;
+    'search-bar-round-shape-border-radius': string;
+    'search-bar-input-wrapper-height': string;
+    'search-bar-input-wrapper-padding': string;
+    'search-bar-input-wrapper-background-color': string;
+    'search-bar-input-wrapper-font-size': string;
+    'search-bar-input-height': string;
+    'search-bar-input-caret-color': string;
+    'search-bar-input-placeholder-color': string;
+    'search-bar-prefix-margin-right': string;
+    'search-bar-clear-icon-color': string;
+    'search-bar-search-icon-color': string;
+    'search-bar-search-icon-font-size': string;
+    'search-bar-cancel-btn-color': string;
+    'search-bar-cancel-btn-font-size': string;
+    'search-bar-cancel-btn-margin-left': string;
+    'search-bar-association-background-color': string;
+    'search-bar-association-item-height': string;
+    'search-bar-association-item-padding': string;
+    'search-bar-association-item-font-size': string;
+    'search-bar-association-item-color': string;
+    'search-bar-association-item-highlight-color': string;
+    'image-picker-font-size': string;
+    'image-picker-disabled-opacity': string;
+    'image-picker-border-radius': string;
+    'image-picker-add-background': string;
+    'image-picker-add-icon-font-size': string;
+    'image-picker-add-icon-color': string;
+    'image-picker-add-text-font-size': string;
+    'image-picker-add-text-color': string;
+    'image-picker-error-color': string;
+    'image-picker-error-background': string;
+    'image-picker-close-color': string;
+    'image-picker-close-font-size': string;
+    'image-picker-close-width': string;
+    'image-picker-close-height': string;
+    'image-picker-close-background': string;
+    'image-picker-close-border-radius': string;
 }
 declare const tokens: ArcodesignToken;
 export default tokens;

package/tokens/app/arcodesign/default/index.js

@@ -170,8 +170,9 @@ var tokens = {
   "avatar-desc-ultra-small-margin-top": "0.04rem",
   "avatar-name-color": "#1d2129",
   "avatar-desc-color": "#86909c",
-  "button-border-color": "#165dff",
+  "button-line-height": "1.2",
   "button-radius": "2PX",
+  "button-icon-text-gutter": "0.08rem",
   "button-primary-background": "#165dff",
   "button-primary-clicked-background": "#0E42D2",
   "button-primary-disabled-background": "#94bfff",
@@ -529,6 +530,7 @@ var tokens = {
   "steps-padding": "0.32rem 0",
   "steps-tail-horizontal-padding": "0 0.36rem",
   "steps-tail-vertical-padding": "0.28rem 0",
+  "steps-tail-vertical-top": "0.18rem",
   "steps-tail-standard-size": "1PX",
   "steps-tail-standard-background": "#e5e6eb",
   "steps-tail-finish-background": "#165dff",
@@ -555,8 +557,6 @@ var tokens = {
   "steps-wait-description-color": "#86909c",
   "steps-icon-width": "18PX",
   "steps-icon-height": "18PX",
-  "steps-custom-icon-width": "20PX",
-  "steps-custom-icon-height": "20PX",
   "steps-dot-width": "8PX",
   "steps-dot-height": "8PX",
   "steps-dot-border-width": "1.5PX",
@@ -571,6 +571,16 @@ var tokens = {
   "steps-vertical-padding-bottom": "0",
   "steps-vertical-padding-left": "0.4rem",
   "steps-process-with-config-item-icon-color": "#FFFFFF",
+  "swipe-action-open-transition": "cubic-bezier(0.2, 0.8, 0.32, 1.28)",
+  "swipe-action-close-transition": "cubic-bezier(0.34, 0.69, 0.1, 1)",
+  "swipe-action-info-padding": "0.32rem",
+  "swipe-action-info-bounce-buffer": "0.6rem",
+  "swipe-action-text-font-size": "0.32rem",
+  "swipe-action-text-line-height": "0.44rem",
+  "swipe-action-text-color": "#ffffff",
+  "swipe-action-icon-width": "0.4rem",
+  "swipe-action-icon-height": "0.4rem",
+  "swipe-action-icon-margin-right": "0.08rem",
   "badge-background-color": "#F53F3F",
   "badge-text-color": "#FFFFFF",
   "badge-font-size": "12PX",
@@ -657,7 +667,47 @@ var tokens = {
   "action-sheet-cancel-border-width": "0.16rem",
   "action-sheet-header-padding": "0.32rem",
   "action-sheet-title-font-size": "0.32rem",
-  "action-sheet-sub-title-font-size": "0.28rem"
+  "action-sheet-sub-title-font-size": "0.28rem",
+  "search-bar-padding": "0.32rem",
+  "search-bar-background-color": "#FFFFFF",
+  "search-bar-square-shape-border-radius": "0.04rem",
+  "search-bar-round-shape-border-radius": "199.98rem",
+  "search-bar-input-wrapper-height": "0.72rem",
+  "search-bar-input-wrapper-padding": "0.16rem 0.28rem",
+  "search-bar-input-wrapper-background-color": "#F2F3F5",
+  "search-bar-input-wrapper-font-size": "0.28rem",
+  "search-bar-input-height": "0.4rem",
+  "search-bar-input-caret-color": "#165dff",
+  "search-bar-input-placeholder-color": "#c9cdd4",
+  "search-bar-prefix-margin-right": "0.18rem",
+  "search-bar-clear-icon-color": "#C9CDD4",
+  "search-bar-search-icon-color": "#86909C",
+  "search-bar-search-icon-font-size": "0.32rem",
+  "search-bar-cancel-btn-color": "#165dff",
+  "search-bar-cancel-btn-font-size": "0.3rem",
+  "search-bar-cancel-btn-margin-left": "0.32rem",
+  "search-bar-association-background-color": "#FFFFFF",
+  "search-bar-association-item-height": "1.04rem",
+  "search-bar-association-item-padding": "0.32rem",
+  "search-bar-association-item-font-size": "0.3rem",
+  "search-bar-association-item-color": "#1d2129",
+  "search-bar-association-item-highlight-color": "#165dff",
+  "image-picker-font-size": "0.28rem",
+  "image-picker-disabled-opacity": "0.7",
+  "image-picker-border-radius": "0.04rem",
+  "image-picker-add-background": "#f7f8fa",
+  "image-picker-add-icon-font-size": "0.6rem",
+  "image-picker-add-icon-color": "#d8d8d8",
+  "image-picker-add-text-font-size": "0.24rem",
+  "image-picker-add-text-color": "#86909c",
+  "image-picker-error-color": "#ffffff",
+  "image-picker-error-background": "rgba(0, 0, 0, 0.5)",
+  "image-picker-close-color": "#ffffff",
+  "image-picker-close-font-size": "0.24rem",
+  "image-picker-close-width": "0.36rem",
+  "image-picker-close-height": "0.36rem",
+  "image-picker-close-background": "rgba(0, 0, 0, 0.3)",
+  "image-picker-close-border-radius": "0 0.04rem"
 };
 var _default = tokens;
 exports["default"] = _default;