@arco-design/mobile-react 2.25.2 → 2.25.4

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.25.4](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.25.3...@arco-design/mobile-react@2.25.4) (2023-02-27)
+
+
+### Bug Fixes
+
+* `Ellipsis` optimize click event type ([#94](https://github.com/arco-design/arco-design-mobile/issues/94)) ([e0e0369](https://github.com/arco-design/arco-design-mobile/commit/e0e03691d48f5a0f78e3be339a3f28b6f70c9798))
+* `SearchBar` disable default appearance of search input ([#97](https://github.com/arco-design/arco-design-mobile/issues/97)) ([648ccb3](https://github.com/arco-design/arco-design-mobile/commit/648ccb3024c092dd48c4c79c0c36b3b9ef61fb08))
+
+
+
+
+
+## [2.25.3](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.25.2...@arco-design/mobile-react@2.25.3) (2023-02-10)
+
+
+### Bug Fixes
+
+* `ImagePreview` fix display problems when passing fit layout ([#91](https://github.com/arco-design/arco-design-mobile/issues/91)) ([244107f](https://github.com/arco-design/arco-design-mobile/commit/244107fa4764141e8e57e871cad60f19f0592706))
+* `NavBar` support the prop 'onScrollChange' ([46f2a5c](https://github.com/arco-design/arco-design-mobile/commit/46f2a5cf6afa5abec235d9d6311f40c19f8c1bc0))
+
+
+
+
+
 ## [2.25.2](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.25.1...@arco-design/mobile-react@2.25.2) (2023-02-08)
 
 

package/README.en-US.md

@@ -59,8 +59,8 @@ React & ReactDOM: **<a href="https://reactjs.org/docs/cdn-links.html" target="_b
 React Transition Group: **<a href="https://reactcommunity.org/react-transition-group/" target="_blank">Click here</a>**
 
 ```
-<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.25.1/dist/style.min.css">
-<script src="https://unpkg.com/@arco-design/mobile-react@2.25.1/dist/index.min.js"></script>
+<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.25.3/dist/style.min.css">
+<script src="https://unpkg.com/@arco-design/mobile-react@2.25.3/dist/index.min.js"></script>
 ```
 
 ## Full import

package/README.md

@@ -59,8 +59,8 @@ React & ReactDOM： **<a href="https://reactjs.org/docs/cdn-links.html" target="
 React Transition Group： **<a href="https://reactcommunity.org/react-transition-group/" target="_blank">戳这里获取</a>**
 
 ```
-<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.25.1/dist/style.min.css">
-<script src="https://unpkg.com/@arco-design/mobile-react@2.25.1/dist/index.min.js"></script>
+<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.25.3/dist/style.min.css">
+<script src="https://unpkg.com/@arco-design/mobile-react@2.25.3/dist/index.min.js"></script>
 ```
 
 ## 引入全部

package/cjs/ellipsis/type.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 export interface EllipsisBaseProps {
     /**
      * 需要缩略的文本内容
@@ -38,12 +38,12 @@ export interface EllipsisBaseProps {
      * 缩略节点点击事件
      * @en Ellipsis node click event
      */
-    onEllipsisNodeClick?: () => void;
+    onEllipsisNodeClick?: (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void;
     /**
      * 收起节点点击事件
      * @en Collapse node click event
      */
-    onCollapseNodeClick?: () => void;
+    onCollapseNodeClick?: (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void;
 }
 export interface EllipsisRef {
     /**

package/cjs/image-preview/index.js

@@ -752,7 +752,7 @@ var ImagePreview = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   // @en In iOS when resetting the style, the image will disappear and cause flickering, so put a image at the bottom
   // 优先过渡图，其次用原图
   // @en Prioritize the transition image, followed by the original image
-  function renderImagePlaceholder(src, index) {
+  function renderImagePlaceholder(src, index, fitCss) {
     var _ref2 = imagesStatus[index] || {},
       originWidth = _ref2.originWidth,
       originHeight = _ref2.originHeight,
@@ -762,6 +762,9 @@ var ImagePreview = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     var trans = hasOverflow ? {} : (0, _helpers.getStyleWithVendor)({
       transform: 'translateY(-50%)'
     });
+    var fitObj = fitCss ? {
+      objectFit: fitCss
+    } : {};
     return system === 'ios' && showPlaceholders[index] && originWidth && originHeight ? /*#__PURE__*/_react.default.createElement("img", {
       src: src,
       style: (0, _extends5.default)({
@@ -770,7 +773,7 @@ var ImagePreview = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
         height: originHeight,
         left: originLeft,
         top: originTop
-      }, trans)
+      }, fitObj, trans)
     }) : null;
   }
   function renderLoadingArea(index) {
@@ -836,7 +839,7 @@ var ImagePreview = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
         animateDuration: transImageInfo ? 0 : void 0,
         style: getImageStyle(),
         className: getImageClass(index),
-        bottomOverlap: renderImagePlaceholder(image.fallbackSrc || image.src, index),
+        bottomOverlap: renderImagePlaceholder(image.fallbackSrc || image.src, index, image.fit || fit),
         onLoad: function onLoad(_, imageEle) {
           imageDomsRef.current[index] = imageEle;
           setImagesStatusByIndex(index, {

package/cjs/nav-bar/index.d.ts

@@ -105,6 +105,11 @@ export interface NavBarProps {
      * @en Set a custom style according to the scroll offset value. After setting this property, the scroll event of the scroll container will be monitored.
      */
     getComputedStyleByScroll?: (offset: number) => CSSProperties;
+    /**
+     * 滚动时回调，设置该属性后将监听滚动容器的滚动事件
+     * @en Callback when scrolling. After setting this property, the scroll event of the scroll container will be monitored.
+     */
+    onScrollChange?: (offset: number) => void;
     /**
      * 无障碍aria-label属性
      * @en Accessibility attribute aria-label

package/cjs/nav-bar/index.js

@@ -45,6 +45,7 @@ var NavBar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     getScrollContainer = props.getScrollContainer,
     _props$showOffset = props.showOffset,
     showOffset = _props$showOffset === void 0 ? 0 : _props$showOffset,
+    onScrollChange = props.onScrollChange,
     getComputedStyleByScroll = props.getComputedStyleByScroll,
     _props$ariaLabel = props.ariaLabel,
     ariaLabel = _props$ariaLabel === void 0 ? '' : _props$ariaLabel,
@@ -61,6 +62,7 @@ var NavBar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var system = (0, _helpers.useSystem)();
   var onElementScroll = function onElementScroll(curOffset) {
     setScrollToggleHide(curOffset < showOffset);
+    onScrollChange == null ? void 0 : onScrollChange(curOffset);
     if (getComputedStyleByScroll) {
       var cstyle = getComputedStyleByScroll(curOffset);
       setCustomStyle(cstyle);
@@ -80,7 +82,7 @@ var NavBar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     onElementScroll(top);
   };
   (0, _react.useEffect)(function () {
-    var needBind = showOffset || getComputedStyleByScroll;
+    var needBind = showOffset || getComputedStyleByScroll || onScrollChange;
     var container = (0, _mobileUtils.getValidScrollContainer)(getScrollContainer);
     handleEleScroll();
     if (needBind && container) {
@@ -91,7 +93,7 @@ var NavBar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
         container.removeEventListener('scroll', handleEleScroll, false);
       }
     };
-  }, [showOffset, getComputedStyleByScroll, getScrollContainer]);
+  }, [showOffset, getComputedStyleByScroll, onScrollChange, getScrollContainer]);
   function handleClickLeft(e) {
     if (onClickLeft) {
       onClickLeft(e);

package/cjs/search-bar/style/css/index.css

@@ -53,6 +53,7 @@
 .arco-search-bar-input::placeholder {
   color:  #c9cdd4 ;
 }
+.arco-search-bar-input::-webkit-search-decoration,
 .arco-search-bar-input::-webkit-search-cancel-button {
   display: none;
 }

package/cjs/search-bar/style/index.less

@@ -46,6 +46,7 @@
       .use-var(color, search-bar-input-placeholder-color);
     }
 
+    &::-webkit-search-decoration,
     &::-webkit-search-cancel-button {
       display: none;
     }

package/dist/index.js

@@ -20308,7 +20308,7 @@
       // @en In iOS when resetting the style, the image will disappear and cause flickering, so put a image at the bottom
       // 优先过渡图，其次用原图
       // @en Prioritize the transition image, followed by the original image
-      function renderImagePlaceholder(src, index) {
+      function renderImagePlaceholder(src, index, fitCss) {
         var _a = imagesStatus[index] || {},
           originWidth = _a.originWidth,
           originHeight = _a.originHeight,
@@ -20318,15 +20318,18 @@
         var trans = hasOverflow ? {} : getStyleWithVendor({
           transform: 'translateY(-50%)'
         });
+        var fitObj = fitCss ? {
+          objectFit: fitCss
+        } : {};
         return system === 'ios' && showPlaceholders[index] && originWidth && originHeight ? /*#__PURE__*/React__default["default"].createElement("img", {
           src: src,
-          style: __assign$2({
+          style: __assign$2(__assign$2({
             position: 'absolute',
             width: originWidth,
             height: originHeight,
             left: originLeft,
             top: originTop
-          }, trans)
+          }, fitObj), trans)
         }) : null;
       }
       function renderLoadingArea(index) {
@@ -20392,7 +20395,7 @@
             animateDuration: transImageInfo ? 0 : void 0,
             style: getImageStyle(),
             className: getImageClass(index),
-            bottomOverlap: renderImagePlaceholder(image.fallbackSrc || image.src, index),
+            bottomOverlap: renderImagePlaceholder(image.fallbackSrc || image.src, index, image.fit || fit),
             onLoad: function onLoad(_, imageEle) {
               imageDomsRef.current[index] = imageEle;
               setImagesStatusByIndex(index, {
@@ -20676,6 +20679,7 @@
         getScrollContainer = props.getScrollContainer,
         _h = props.showOffset,
         showOffset = _h === void 0 ? 0 : _h,
+        onScrollChange = props.onScrollChange,
         getComputedStyleByScroll = props.getComputedStyleByScroll,
         _j = props.ariaLabel,
         ariaLabel = _j === void 0 ? '' : _j,
@@ -20692,6 +20696,7 @@
       var system = useSystem();
       var onElementScroll = function onElementScroll(curOffset) {
         setScrollToggleHide(curOffset < showOffset);
+        onScrollChange === null || onScrollChange === void 0 ? void 0 : onScrollChange(curOffset);
         if (getComputedStyleByScroll) {
           var cstyle = getComputedStyleByScroll(curOffset);
           setCustomStyle(cstyle);
@@ -20711,7 +20716,7 @@
         onElementScroll(top);
       };
       React.useEffect(function () {
-        var needBind = showOffset || getComputedStyleByScroll;
+        var needBind = showOffset || getComputedStyleByScroll || onScrollChange;
         var container = getValidScrollContainer(getScrollContainer);
         handleEleScroll();
         if (needBind && container) {
@@ -20722,7 +20727,7 @@
             container.removeEventListener('scroll', handleEleScroll, false);
           }
         };
-      }, [showOffset, getComputedStyleByScroll, getScrollContainer]);
+      }, [showOffset, getComputedStyleByScroll, onScrollChange, getScrollContainer]);
       function handleClickLeft(e) {
         if (onClickLeft) {
           onClickLeft(e);