@arco-design/mobile-react 2.28.2 → 2.29.1

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

@@ -6629,6 +6629,196 @@
             "en": "Size of the rounded corners of the square SearchBar"
         }
     },
+    "skeletonAvatarSize": {
+        "cssKey": "skeleton-avatar-size",
+        "desc": "骨架屏头像大小",
+        "override": "",
+        "value": "~`pxtorem(32)`",
+        "jsValue": "@getRem@32",
+        "staticValue": "0.64rem",
+        "localeDesc": {
+            "ch": "骨架屏头像大小",
+            "en": "Skeleton avatar size"
+        }
+    },
+    "skeletonBackgroundColor": {
+        "cssKey": "skeleton-background-color",
+        "desc": "骨架屏元素背景色",
+        "override": "",
+        "value": "#F2F3F5",
+        "jsValue": "#F2F3F5",
+        "staticValue": "#F2F3F5",
+        "localeDesc": {
+            "ch": "骨架屏元素背景色",
+            "en": "Skeleton element background color"
+        }
+    },
+    "skeletonBorderRadius": {
+        "cssKey": "skeleton-border-radius",
+        "desc": "骨架屏元素圆角",
+        "override": "",
+        "value": "~`pxtorem(0)`",
+        "jsValue": "@getRem@0",
+        "staticValue": "0",
+        "localeDesc": {
+            "ch": "骨架屏元素圆角",
+            "en": "Skeleton element border radius"
+        }
+    },
+    "skeletonBreathAnimationDuration": {
+        "cssKey": "skeleton-breath-animation-duration",
+        "desc": "骨架屏呼吸动效时间",
+        "override": "",
+        "value": "1.5s",
+        "jsValue": "1.5s",
+        "staticValue": "1.5s",
+        "localeDesc": {
+            "ch": "骨架屏呼吸动效时间",
+            "en": "Skeleton element breath animation duration"
+        }
+    },
+    "skeletonBreathOpacity": {
+        "cssKey": "skeleton-breath-opacity",
+        "desc": "骨架屏呼吸动效透明度",
+        "override": "",
+        "value": "0.4",
+        "jsValue": "0.4",
+        "staticValue": "0.4",
+        "localeDesc": {
+            "ch": "骨架屏呼吸动效透明度",
+            "en": "Skeleton element breath animation opacity"
+        }
+    },
+    "skeletonGradientAnimationColor": {
+        "cssKey": "skeleton-gradient-animation-color",
+        "desc": "骨架屏扫光动效高亮色",
+        "override": "",
+        "value": "rgba(255, 255, 255, 0.6)",
+        "jsValue": "rgba(255, 255, 255, 0.6)",
+        "staticValue": "rgba(255, 255, 255, 0.6)",
+        "localeDesc": {
+            "ch": "骨架屏扫光动效高亮色",
+            "en": "Skeleton element gradient animation highlight color"
+        }
+    },
+    "skeletonGradientAnimationDuration": {
+        "cssKey": "skeleton-gradient-animation-duration",
+        "desc": "骨架屏扫光动效时间",
+        "override": "",
+        "value": "1.5s",
+        "jsValue": "1.5s",
+        "staticValue": "1.5s",
+        "localeDesc": {
+            "ch": "骨架屏扫光动效时间",
+            "en": "Skeleton element gradient animation duration"
+        }
+    },
+    "skeletonGradientAnimationTimingFunction": {
+        "cssKey": "skeleton-gradient-animation-timing-function",
+        "desc": "骨架屏扫光动效曲线",
+        "override": "",
+        "value": "cubic-bezier(0.42, 0, 0.58, 1)",
+        "jsValue": "cubic-bezier(0.42, 0, 0.58, 1)",
+        "staticValue": "cubic-bezier(0.42, 0, 0.58, 1)",
+        "localeDesc": {
+            "ch": "骨架屏扫光动效曲线",
+            "en": "Skeleton element gradient animation timing function"
+        }
+    },
+    "skeletonGridIconSize": {
+        "cssKey": "skeleton-grid-icon-size",
+        "desc": "骨架屏金刚位图标区宽度",
+        "override": "",
+        "value": "~`pxtorem(32)`",
+        "jsValue": "@getRem@32",
+        "staticValue": "0.64rem",
+        "localeDesc": {
+            "ch": "骨架屏金刚位图标区宽度",
+            "en": "Skeleton grid item icon width"
+        }
+    },
+    "skeletonGridTextHeight": {
+        "cssKey": "skeleton-grid-text-height",
+        "desc": "骨架屏金刚位文字区高度",
+        "override": "",
+        "value": "~`pxtorem(16)`",
+        "jsValue": "@getRem@16",
+        "staticValue": "0.32rem",
+        "localeDesc": {
+            "ch": "骨架屏金刚位文字区高度",
+            "en": "Skeleton grid item text height"
+        }
+    },
+    "skeletonGridTextWidth": {
+        "cssKey": "skeleton-grid-text-width",
+        "desc": "骨架屏金刚位文字区宽度",
+        "override": "",
+        "value": "~`pxtorem(64)`",
+        "jsValue": "@getRem@64",
+        "staticValue": "1.28rem",
+        "localeDesc": {
+            "ch": "骨架屏金刚位文字区宽度",
+            "en": "Skeleton grid item text width"
+        }
+    },
+    "skeletonLargeGutter": {
+        "cssKey": "skeleton-large-gutter",
+        "desc": "骨架屏元素外边距，大尺寸",
+        "override": "",
+        "value": "~`pxtorem(20)`",
+        "jsValue": "@getRem@20",
+        "staticValue": "0.4rem",
+        "localeDesc": {
+            "ch": "骨架屏元素外边距，大尺寸"
+        }
+    },
+    "skeletonMediumGutter": {
+        "cssKey": "skeleton-medium-gutter",
+        "desc": "骨架屏元素外边距，中尺寸",
+        "override": "",
+        "value": "~`pxtorem(8)`",
+        "jsValue": "@getRem@8",
+        "staticValue": "0.16rem",
+        "localeDesc": {
+            "ch": "骨架屏元素外边距，中尺寸"
+        }
+    },
+    "skeletonParagraphHeight": {
+        "cssKey": "skeleton-paragraph-height",
+        "desc": "骨架屏段落行高度",
+        "override": "",
+        "value": "~`pxtorem(16)`",
+        "jsValue": "@getRem@16",
+        "staticValue": "0.32rem",
+        "localeDesc": {
+            "ch": "骨架屏段落行高度",
+            "en": "Skeleton paragraph line height"
+        }
+    },
+    "skeletonParagraphMarginTop": {
+        "cssKey": "skeleton-paragraph-margin-top",
+        "desc": "骨架屏各段落行间距",
+        "override": "",
+        "value": "~`pxtorem(12)`",
+        "jsValue": "@getRem@12",
+        "staticValue": "0.24rem",
+        "localeDesc": {
+            "ch": "骨架屏各段落行间距",
+            "en": "Margin top between skeleton paragraph lines"
+        }
+    },
+    "skeletonTitleHeight": {
+        "cssKey": "skeleton-title-height",
+        "desc": "骨架屏标题高度",
+        "override": "",
+        "value": "~`pxtorem(16)`",
+        "jsValue": "@getRem@16",
+        "staticValue": "0.32rem",
+        "localeDesc": {
+            "ch": "骨架屏标题高度",
+            "en": "Skeleton title height"
+        }
+    },
     "sliderHasMarkPaddingBottom": {
         "cssKey": "slider-has-mark-padding-bottom",
         "desc": "slider 有标记时的底部内边距",

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

@@ -792,4 +792,20 @@
 @divider-right-width: ~`pxtorem(28)`;
 @divider-content-padding: ~`pxtorem(12)`;
 @divider-padding: ~`pxtorem(16)`;
+@skeleton-border-radius: ~`pxtorem(0)`;
+@skeleton-background-color: #F2F3F5;
+@skeleton-gradient-animation-color: rgba(255, 255, 255, 0.6);
+@skeleton-breath-opacity: 0.4;
+@skeleton-gradient-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
+@skeleton-gradient-animation-duration: 1.5s;
+@skeleton-breath-animation-duration: 1.5s;
+@skeleton-title-height: ~`pxtorem(16)`;
+@skeleton-paragraph-height: ~`pxtorem(16)`;
+@skeleton-paragraph-margin-top: ~`pxtorem(12)`;
+@skeleton-avatar-size: ~`pxtorem(32)`;
+@skeleton-grid-icon-size: ~`pxtorem(32)`;
+@skeleton-grid-text-width: ~`pxtorem(64)`;
+@skeleton-grid-text-height: ~`pxtorem(16)`;
+@skeleton-medium-gutter: ~`pxtorem(8)`;
+@skeleton-large-gutter: ~`pxtorem(20)`;
 

package/umd/grid/style/css/index.css

@@ -113,3 +113,7 @@
   display: none;
   /* Chrome Safari */
 }
+.arco-grid .arco-image-picker {
+  width: 100%;
+  /* 兼容grid和image-picker组合使用 */
+}

package/umd/grid/style/index.less

@@ -101,3 +101,9 @@
 .@{prefix}-grid.sliding::-webkit-scrollbar {
     display: none; /* Chrome Safari */
 }
+
+.@{prefix}-grid {
+    .@{prefix}-image-picker {
+        width: 100%; /* 兼容grid和image-picker组合使用 */
+    }
+}

package/umd/index.d.ts

@@ -43,6 +43,7 @@ export { default as PullRefresh } from './pull-refresh';
 export { default as Radio } from './radio';
 export { default as Rate } from './rate';
 export { default as SearchBar } from './search-bar';
+export { default as Skeleton } from './skeleton';
 export { default as ShowMonitor } from './show-monitor';
 export { default as Slider } from './slider';
 export { default as Stepper } from './stepper';

package/umd/index.js

@@ -1,22 +1,22 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "./tabs", "./sticky", "./load-more", "./cell", "./action-sheet", "./avatar", "./badge", "./button", "./carousel", "./checkbox", "./circle-progress", "./collapse", "./context-provider", "./count-down", "./date-picker", "./dialog", "./divider", "./dropdown", "./dropdown-menu", "./ellipsis", "./form", "./grid", "./image", "./image-picker", "./image-preview", "./index-bar", "./input", "./keyboard", "./loading", "./masking", "./nav-bar", "./notice-bar", "./notify", "./pagination", "./picker", "./picker-view", "./popover", "./popup", "./popup-swiper", "./portal", "./progress", "./pull-refresh", "./radio", "./rate", "./search-bar", "./show-monitor", "./slider", "./stepper", "./steps", "./swipe-action", "./swipe-load", "./switch", "./tab-bar", "./tag", "./textarea", "./toast", "./transition"], factory);
+    define(["exports", "./tabs", "./sticky", "./load-more", "./cell", "./action-sheet", "./avatar", "./badge", "./button", "./carousel", "./checkbox", "./circle-progress", "./collapse", "./context-provider", "./count-down", "./date-picker", "./dialog", "./divider", "./dropdown", "./dropdown-menu", "./ellipsis", "./form", "./grid", "./image", "./image-picker", "./image-preview", "./index-bar", "./input", "./keyboard", "./loading", "./masking", "./nav-bar", "./notice-bar", "./notify", "./pagination", "./picker", "./picker-view", "./popover", "./popup", "./popup-swiper", "./portal", "./progress", "./pull-refresh", "./radio", "./rate", "./search-bar", "./skeleton", "./show-monitor", "./slider", "./stepper", "./steps", "./swipe-action", "./swipe-load", "./switch", "./tab-bar", "./tag", "./textarea", "./toast", "./transition"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("./tabs"), require("./sticky"), require("./load-more"), require("./cell"), require("./action-sheet"), require("./avatar"), require("./badge"), require("./button"), require("./carousel"), require("./checkbox"), require("./circle-progress"), require("./collapse"), require("./context-provider"), require("./count-down"), require("./date-picker"), require("./dialog"), require("./divider"), require("./dropdown"), require("./dropdown-menu"), require("./ellipsis"), require("./form"), require("./grid"), require("./image"), require("./image-picker"), require("./image-preview"), require("./index-bar"), require("./input"), require("./keyboard"), require("./loading"), require("./masking"), require("./nav-bar"), require("./notice-bar"), require("./notify"), require("./pagination"), require("./picker"), require("./picker-view"), require("./popover"), require("./popup"), require("./popup-swiper"), require("./portal"), require("./progress"), require("./pull-refresh"), require("./radio"), require("./rate"), require("./search-bar"), require("./show-monitor"), require("./slider"), require("./stepper"), require("./steps"), require("./swipe-action"), require("./swipe-load"), require("./switch"), require("./tab-bar"), require("./tag"), require("./textarea"), require("./toast"), require("./transition"));
+    factory(exports, require("./tabs"), require("./sticky"), require("./load-more"), require("./cell"), require("./action-sheet"), require("./avatar"), require("./badge"), require("./button"), require("./carousel"), require("./checkbox"), require("./circle-progress"), require("./collapse"), require("./context-provider"), require("./count-down"), require("./date-picker"), require("./dialog"), require("./divider"), require("./dropdown"), require("./dropdown-menu"), require("./ellipsis"), require("./form"), require("./grid"), require("./image"), require("./image-picker"), require("./image-preview"), require("./index-bar"), require("./input"), require("./keyboard"), require("./loading"), require("./masking"), require("./nav-bar"), require("./notice-bar"), require("./notify"), require("./pagination"), require("./picker"), require("./picker-view"), require("./popover"), require("./popup"), require("./popup-swiper"), require("./portal"), require("./progress"), require("./pull-refresh"), require("./radio"), require("./rate"), require("./search-bar"), require("./skeleton"), require("./show-monitor"), require("./slider"), require("./stepper"), require("./steps"), require("./swipe-action"), require("./swipe-load"), require("./switch"), require("./tab-bar"), require("./tag"), require("./textarea"), require("./toast"), require("./transition"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.tabs, global.sticky, global.loadMore, global.cell, global.actionSheet, global.avatar, global.badge, global.button, global.carousel, global.checkbox, global.circleProgress, global.collapse, global.contextProvider, global.countDown, global.datePicker, global.dialog, global.divider, global.dropdown, global.dropdownMenu, global.ellipsis, global.form, global.grid, global.image, global.imagePicker, global.imagePreview, global.indexBar, global.input, global.keyboard, global.loading, global.masking, global.navBar, global.noticeBar, global.notify, global.pagination, global.picker, global.pickerView, global.popover, global.popup, global.popupSwiper, global.portal, global.progress, global.pullRefresh, global.radio, global.rate, global.searchBar, global.showMonitor, global.slider, global.stepper, global.steps, global.swipeAction, global.swipeLoad, global._switch, global.tabBar, global.tag, global.textarea, global.toast, global.transition);
+    factory(mod.exports, global.tabs, global.sticky, global.loadMore, global.cell, global.actionSheet, global.avatar, global.badge, global.button, global.carousel, global.checkbox, global.circleProgress, global.collapse, global.contextProvider, global.countDown, global.datePicker, global.dialog, global.divider, global.dropdown, global.dropdownMenu, global.ellipsis, global.form, global.grid, global.image, global.imagePicker, global.imagePreview, global.indexBar, global.input, global.keyboard, global.loading, global.masking, global.navBar, global.noticeBar, global.notify, global.pagination, global.picker, global.pickerView, global.popover, global.popup, global.popupSwiper, global.portal, global.progress, global.pullRefresh, global.radio, global.rate, global.searchBar, global.skeleton, global.showMonitor, global.slider, global.stepper, global.steps, global.swipeAction, global.swipeLoad, global._switch, global.tabBar, global.tag, global.textarea, global.toast, global.transition);
     global.index = mod.exports;
   }
-})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _tabs, _sticky, _loadMore, _cell, _actionSheet, _avatar, _badge, _button, _carousel, _checkbox, _circleProgress, _collapse, _contextProvider, _countDown, _datePicker, _dialog, _divider, _dropdown, _dropdownMenu, _ellipsis, _form, _grid, _image, _imagePicker, _imagePreview, _indexBar, _input, _keyboard, _loading, _masking, _navBar, _noticeBar, _notify, _pagination, _picker, _pickerView, _popover, _popup, _popupSwiper, _portal, _progress, _pullRefresh, _radio, _rate, _searchBar, _showMonitor, _slider, _stepper, _steps, _swipeAction, _swipeLoad, _switch, _tabBar, _tag, _textarea, _toast, _transition) {
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _tabs, _sticky, _loadMore, _cell, _actionSheet, _avatar, _badge, _button, _carousel, _checkbox, _circleProgress, _collapse, _contextProvider, _countDown, _datePicker, _dialog, _divider, _dropdown, _dropdownMenu, _ellipsis, _form, _grid, _image, _imagePicker, _imagePreview, _indexBar, _input, _keyboard, _loading, _masking, _navBar, _noticeBar, _notify, _pagination, _picker, _pickerView, _popover, _popup, _popupSwiper, _portal, _progress, _pullRefresh, _radio, _rate, _searchBar, _skeleton, _showMonitor, _slider, _stepper, _steps, _swipeAction, _swipeLoad, _switch, _tabBar, _tag, _textarea, _toast, _transition) {
   "use strict";
 
   var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
   _exports.__esModule = true;
-  _exports.Transition = _exports.Toast = _exports.Textarea = _exports.Tag = _exports.Tabs = _exports.TabBar = _exports.Switch = _exports.SwipeLoad = _exports.SwipeAction = _exports.Sticky = _exports.Steps = _exports.Stepper = _exports.Slider = _exports.ShowMonitor = _exports.SearchBar = _exports.Rate = _exports.Radio = _exports.PullRefresh = _exports.Progress = _exports.Portal = _exports.PopupSwiper = _exports.Popup = _exports.Popover = _exports.PickerView = _exports.Picker = _exports.Pagination = _exports.Notify = _exports.NoticeBar = _exports.NavBar = _exports.Masking = _exports.Loading = _exports.LoadMore = _exports.Keyboard = _exports.Input = _exports.IndexBar = _exports.ImagePreview = _exports.ImagePicker = _exports.Image = _exports.Grid = _exports.Form = _exports.Ellipsis = _exports.DropdownMenu = _exports.Dropdown = _exports.Divider = _exports.Dialog = _exports.DatePicker = _exports.CountDown = _exports.ContextProvider = _exports.Collapse = _exports.CircleProgress = _exports.Checkbox = _exports.Cell = _exports.Carousel = _exports.Button = _exports.Badge = _exports.Avatar = _exports.ActionSheet = void 0;
+  _exports.Transition = _exports.Toast = _exports.Textarea = _exports.Tag = _exports.Tabs = _exports.TabBar = _exports.Switch = _exports.SwipeLoad = _exports.SwipeAction = _exports.Sticky = _exports.Steps = _exports.Stepper = _exports.Slider = _exports.Skeleton = _exports.ShowMonitor = _exports.SearchBar = _exports.Rate = _exports.Radio = _exports.PullRefresh = _exports.Progress = _exports.Portal = _exports.PopupSwiper = _exports.Popup = _exports.Popover = _exports.PickerView = _exports.Picker = _exports.Pagination = _exports.Notify = _exports.NoticeBar = _exports.NavBar = _exports.Masking = _exports.Loading = _exports.LoadMore = _exports.Keyboard = _exports.Input = _exports.IndexBar = _exports.ImagePreview = _exports.ImagePicker = _exports.Image = _exports.Grid = _exports.Form = _exports.Ellipsis = _exports.DropdownMenu = _exports.Dropdown = _exports.Divider = _exports.Dialog = _exports.DatePicker = _exports.CountDown = _exports.ContextProvider = _exports.Collapse = _exports.CircleProgress = _exports.Checkbox = _exports.Cell = _exports.Carousel = _exports.Button = _exports.Badge = _exports.Avatar = _exports.ActionSheet = void 0;
   _tabs = _interopRequireDefault(_tabs);
   _exports.Tabs = _tabs.default;
   _sticky = _interopRequireDefault(_sticky);
@@ -107,6 +107,8 @@
   _exports.Rate = _rate.default;
   _searchBar = _interopRequireDefault(_searchBar);
   _exports.SearchBar = _searchBar.default;
+  _skeleton = _interopRequireDefault(_skeleton);
+  _exports.Skeleton = _skeleton.default;
   _showMonitor = _interopRequireDefault(_showMonitor);
   _exports.ShowMonitor = _showMonitor.default;
   _slider = _interopRequireDefault(_slider);

package/umd/input/hooks.js

@@ -1,22 +1,23 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "react", "@arco-design/mobile-utils", "../icon/IconClear", "../_helpers"], factory);
+    define(["exports", "@babel/runtime/helpers/extends", "react", "@arco-design/mobile-utils", "../icon/IconClear", "../_helpers"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("react"), require("@arco-design/mobile-utils"), require("../icon/IconClear"), require("../_helpers"));
+    factory(exports, require("@babel/runtime/helpers/extends"), require("react"), require("@arco-design/mobile-utils"), require("../icon/IconClear"), require("../_helpers"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.react, global.mobileUtils, global.IconClear, global._helpers);
+    factory(mod.exports, global._extends, global.react, global.mobileUtils, global.IconClear, global._helpers);
     global.hooks = mod.exports;
   }
-})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _react, _mobileUtils, _IconClear, _helpers) {
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _extends2, _react, _mobileUtils, _IconClear, _helpers) {
   "use strict";
 
   var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
   _exports.__esModule = true;
   _exports.useInputLogic = useInputLogic;
+  _extends2 = _interopRequireDefault(_extends2);
   _react = _interopRequireWildcard(_react);
   _IconClear = _interopRequireDefault(_IconClear);
 
@@ -69,23 +70,6 @@
         toggleClear = _useState2[1];
 
     var compositingRef = (0, _react.useRef)(false);
-    /**
-     * clear相关问题背景
-     * 如果点击clear按钮之前已经是focusing状态了，那么在点完clear按钮之后会手动聚焦一下
-     * 该行为将导致onClear事件触发时，也会触发一次onBlur和onFocus事件，可能影响一些组件外的代码逻辑
-     *
-     * e.g. 假设input按钮右侧有一个按钮仅在聚焦时展示
-     * 实现代码大致是：onBlur设置其visible为false，onFocus设置其visible为true
-     * 那么这个按钮就会因为clear的点击造成一瞬的闪烁
-     *
-     * 解决思路
-     * 先来看一下，在输入框已激活的状态时，点击清除按钮后，组件的一些事件的触发顺序
-     * handleBlur -> handleClear -> handleFocus -> onBlur(外部回调) -> onFocus(外部回调)
-     * 可以看到外部的onBlur和onFocus回调都是在handleClear函数之后被调用
-     * 因此可以在handleClear中设置一个shouldPreventEvent的boolean标志
-     * 如果这个标志为true，则跳过调用外部的onBlur和onFocus，并在最后再将标志置回false
-     *
-     */
 
     var _useState3 = (0, _react.useState)(false),
         isFocusing = _useState3[0],
@@ -185,28 +169,24 @@
     }
 
     function handleFocus(e) {
-      (0, _mobileUtils.nextTick)(function () {
-        if (preventEventWhenClearing && shouldPreventEvent.current) {
-          shouldPreventEvent.current = false;
-          return;
-        }
+      if (preventEventWhenClearing && shouldPreventEvent.current) {
+        shouldPreventEvent.current = false;
+        return;
+      }
 
-        setIsFocusing(true);
-        clearShowType === 'focus' && toggleClear(true);
-        onFocus && onFocus(e);
-      });
+      setIsFocusing(true);
+      clearShowType === 'focus' && toggleClear(true);
+      onFocus && onFocus(e);
     }
 
     function handleBlur(e) {
-      (0, _mobileUtils.nextTick)(function () {
-        if (preventEventWhenClearing && shouldPreventEvent.current) {
-          return;
-        }
+      if (preventEventWhenClearing && shouldPreventEvent.current) {
+        return;
+      }
 
-        setIsFocusing(false);
-        clearShowType === 'focus' && toggleClear(false);
-        onBlur && onBlur(e);
-      });
+      setIsFocusing(false);
+      clearShowType === 'focus' && toggleClear(false);
+      onBlur && onBlur(e);
     }
 
     function handleClick(e) {
@@ -237,10 +217,17 @@
 
         if (isFocusing) {
           if (preventEventWhenClearing) {
-            shouldPreventEvent.current = true;
+            shouldPreventEvent.current = true; // 一段时间未执行blur或focus则重置，避免对下次事件循环造成影响
+            // @en If blur or focus is not executed for a period of time, it will be reset to avoid affecting the next event loop
+
+            setTimeout(function () {
+              shouldPreventEvent.current = false;
+            }, 200);
           }
 
-          inputRef.current && inputRef.current.focus();
+          (0, _mobileUtils.nextTick)(function () {
+            inputRef.current && inputRef.current.focus();
+          });
         }
       });
     }
@@ -250,6 +237,12 @@
     }
 
     function renderWrapper(prefixCls, type, children) {
+      var _clearEvent;
+
+      // handleClear必须早于handleBlur执行，pc端仅mousedown事件触发早于blur，移动端touch相关事件均早于blur
+      // @en handleClear must be executed earlier than handleBlur
+      // @en only the mousedown event on the PC side is triggered earlier than blur, and the touch-related events on the mobile side are all earlier than blur
+      var clearEvent = (_clearEvent = {}, _clearEvent[system === 'pc' ? 'onMouseDown' : 'onTouchEnd'] = handleClear, _clearEvent);
       return /*#__PURE__*/_react.default.createElement("div", {
         role: "search",
         className: prefixCls + "-container all-border-box " + (className || ''),
@@ -269,10 +262,9 @@
         className: (0, _mobileUtils.cls)(prefixCls + "-label", {
           required: required
         })
-      }, label) : prefix) : null, children, clearable && showClear ? /*#__PURE__*/_react.default.createElement("div", {
-        className: prefixCls + "-clear",
-        onClick: handleClear
-      }, clearIcon) : null, suffix ? /*#__PURE__*/_react.default.createElement("div", {
+      }, label) : prefix) : null, children, clearable && showClear ? /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+        className: prefixCls + "-clear"
+      }, clearEvent), clearIcon) : null, suffix ? /*#__PURE__*/_react.default.createElement("div", {
         className: prefixCls + "-suffix"
       }, suffix) : null), renderPendNode(append));
     }

package/umd/input/props.d.ts

@@ -124,7 +124,7 @@ export interface BasicInputProps<T = HTMLInputElement> {
      * 按下清除按钮回调
      * @en Callback when clear button is pressed
      */
-    onClear?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    onClear?: (e: React.TouchEvent<HTMLElement>) => void;
     /**
      * 输入框前置内容，在输入框内部，也可自定义
      * @en The prefix of the input box, inside the input box, can also be customized

package/umd/skeleton/demo/style/css/mobile.css

@@ -0,0 +1,7 @@
+#demo-skeleton .arcodesign-mobile-demo-content .arco-cell-group {
+  margin-bottom: 0.32rem;
+}
+#demo-skeleton .arcodesign-mobile-demo-content .arco-cell {
+  margin-left: 0;
+  padding-right: 0;
+}

package/umd/skeleton/demo/style/mobile.less

@@ -0,0 +1,13 @@
+@import '../../../../style/mixin.less';
+
+#demo-skeleton {
+    .arcodesign-mobile-demo-content {
+        .arco-cell-group {
+            margin-bottom: 0.32rem;
+        }
+        .arco-cell {
+            margin-left: 0;
+            padding-right: 0;
+        }
+    }
+}

package/umd/skeleton/elements.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { SkeletonAvatarProps, SkeletonGridProps, SkeletonNodeProps, SkeletonParagraphProps, SkeletonRef, SkeletonTitleProps } from './type';
+export declare const SkeletonNode: React.ForwardRefExoticComponent<SkeletonNodeProps & React.RefAttributes<SkeletonRef>>;
+export declare const SkeletonTitle: React.ForwardRefExoticComponent<SkeletonTitleProps & React.RefAttributes<SkeletonRef>>;
+export declare const SkeletonParagraph: React.ForwardRefExoticComponent<SkeletonParagraphProps & React.RefAttributes<SkeletonRef>>;
+export declare const SkeletonAvatar: React.ForwardRefExoticComponent<SkeletonAvatarProps & React.RefAttributes<SkeletonRef>>;
+export declare const SkeletonGrid: React.ForwardRefExoticComponent<SkeletonGridProps & React.RefAttributes<SkeletonRef>>;