@arco-design/mobile-react 2.20.0 → 2.21.0

package/esm/swipe-action/type.d.ts

@@ -0,0 +1,123 @@
+import { CSSProperties, ReactNode } from 'react';
+export interface SwipeActionProps {
+    /**
+     * 自定义类名
+     * @en Custom classname
+     */
+    className?: string;
+    /**
+     * 自定义样式
+     * @en Custom style
+     */
+    style?: React.CSSProperties;
+    /**
+     * 子元素
+     * @en Inner Content
+     */
+    children: ReactNode;
+    /**
+     * 右侧菜单
+     * @en right Menu
+     */
+    rightActions?: Action[];
+    /**
+     * 左侧菜单
+     * @en left Menu
+     */
+    leftActions?: Action[];
+    /**
+     * 点击外部是否自动归位
+     * @en Click outside for auto return
+     * @default false
+     */
+    closeOnTouchOutside?: boolean;
+    /**
+     * 菜单滑出多少距离后自动滑出/关闭的系数 范围 0-1
+     * @en How far the menu slides off/off automatically ranges from 0 to 1
+     * @default 0.15
+     */
+    threshold?: number;
+    /**
+     * 是否禁用
+     * @en Whether to disable
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * 动画的执行时间 (单位ms)
+     * @en Animation execution time in ms
+     * @default 300
+     */
+    transitionDuration?: number;
+    /**
+     * 阻尼系数
+     * @en Damping coefficient
+     * @default 15
+     */
+    dampRate?: number;
+    /**
+     * 菜单滑入时的样式类型，layer - 分层堆叠进入，push - 直接依次推入
+     * @en The style type when the menu slides in. layer - the menu is stacked in layers; push - the menu is pushed directly in sequence
+     * @default "layer"
+     */
+    openStyleType?: 'layer' | 'push';
+    /**
+     * 滑出动画结束后触发
+     * @en Triggered when the slide out animation ends
+     */
+    onOpen?: (direction: 'left' | 'right') => void;
+    /**
+     * 滑入动画结束后触发
+     * @en Triggered when the slide in animation ends
+     */
+    onClose?: (direction: 'left' | 'right') => void;
+}
+export interface SwipeActionRef {
+    /**
+     * 最外层元素 DOM
+     * @en The outermost element DOM
+     */
+    dom: HTMLDivElement | null;
+    /**
+     * 使滑动条归位
+     * @en Bring the slider back into position
+     */
+    close: () => void;
+    /**
+     * 打开滑动条，默认打开右边
+     * @en Open the slider, the right by default
+     */
+    open: (direction: 'left' | 'right') => void;
+}
+export interface Action {
+    /**
+     * 自定义内容
+     * @en Custom Content
+     */
+    text?: ReactNode;
+    /**
+     * 自定义图标
+     * @en Custom Icon
+     */
+    icon?: ReactNode;
+    /**
+     * 自定义样式
+     * @en Custom Style
+     */
+    style?: CSSProperties;
+    /**
+     * 自定义类名
+     * @en Custom Style
+     */
+    className?: string;
+    /**
+     * 点击事件 返回true可以阻止菜单的关闭
+     * @en Clicking the event to return true prevents the menu from closing
+     */
+    onClick?: () => (void | boolean) | Promise<void | boolean>;
+    /**
+     * 子元素没有text或者icon的传递children
+     * @en Child elements do not pass children with text or icon
+     */
+    children?: ReactNode;
+}

package/esm/swipe-action/type.js

@@ -0,0 +1 @@
+export {};

package/esm/switch/index.d.ts

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

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.20.0",
+    "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.11.0",
+        "@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": "ab07cde0e974fa874dc63f9520da4e91b510c28f"
+    "gitHead": "da7492bd1d018d6b69919a01b2fe2d0f2d7fae0d"
 }

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

@@ -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,6 +657,30 @@
     --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)`;

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

@@ -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,30 @@ 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;

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

@@ -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",
@@ -658,6 +668,30 @@ var tokens = {
   "action-sheet-header-padding": "0.32rem",
   "action-sheet-title-font-size": "0.32rem",
   "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",