@arco-design/mobile-react 2.25.1 → 2.25.3

package/CHANGELOG.md

@@ -3,6 +3,29 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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)
+
+
+### Bug Fixes
+
+* wrap style division in parentheses ([ebe7a8f](https://github.com/arco-design/arco-design-mobile/commit/ebe7a8f8ba6f51ac75b45488b672e48ca9c2e0bb))
+
+
+
+
+
 ## [2.25.1](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.25.0...@arco-design/mobile-react@2.25.1) (2023-02-01)
 
 

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.0/dist/style.min.css">
-<script src="https://unpkg.com/@arco-design/mobile-react@2.25.0/dist/index.min.js"></script>
+<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.25.2/dist/style.min.css">
+<script src="https://unpkg.com/@arco-design/mobile-react@2.25.2/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.0/dist/style.min.css">
-<script src="https://unpkg.com/@arco-design/mobile-react@2.25.0/dist/index.min.js"></script>
+<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.25.2/dist/style.min.css">
+<script src="https://unpkg.com/@arco-design/mobile-react@2.25.2/dist/index.min.js"></script>
 ```
 
 ## 引入全部

package/cjs/form/form-item.js

@@ -17,9 +17,12 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var FormItemInner = /*#__PURE__*/function (_PureComponent) {
   (0, _inheritsLoose2.default)(FormItemInner, _PureComponent);
+  // eslint-disable-next-line react/static-property-placement
+
   function FormItemInner(props, context) {
     var _this;
     _this = _PureComponent.call(this, props) || this;
+    _this.context = void 0;
     _this.destroyField = void 0;
     _this._errors = [];
     _this._touched = false;
@@ -133,8 +136,7 @@ var FormItemInner = /*#__PURE__*/function (_PureComponent) {
   };
   _proto.setFieldData = function setFieldData(value) {
     var field = this.props.field;
-    var _ref = this.context.form,
-      setFieldValue = _ref.setFieldValue;
+    var setFieldValue = this.context.form.setFieldValue;
     setFieldValue(field, value);
     this.validateField();
   };
@@ -162,8 +164,7 @@ var FormItemInner = /*#__PURE__*/function (_PureComponent) {
       _this$props4$triggerP = _this$props4.triggerPropsField,
       triggerPropsField = _this$props4$triggerP === void 0 ? 'value' : _this$props4$triggerP,
       displayType = _this$props4.displayType;
-    var _ref2 = this.context.form,
-      getFieldValue = _ref2.getFieldValue;
+    var getFieldValue = this.context.form.getFieldValue;
     var props = (_props = {}, _props[triggerPropsField] = getFieldValue(field), _props.disabled = this.props.disabled, _props);
     var childrenType = displayType || ((_children$type = children.type) == null ? void 0 : _children$type.displayName);
     switch (childrenType) {

package/cjs/form/type.d.ts

@@ -155,6 +155,11 @@ export interface IFormInstance {
      * @en Reset fields
      */
     resetFields: () => void;
+    /**
+     * 设置单个表单项值
+     * @en Set field value
+     */
+    setFieldValue: (name: string, value: FieldValue) => boolean;
     /**
      * 设置多个表单项值
      * @en Set multiple field value

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/textarea/index.js

@@ -52,7 +52,7 @@ var Textarea = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }
     // 默认为过滤换行后的字符长度
     // @en The default is the character length after filtering newlines
-    var validValue = inputValue.replace(/\n/g, '');
+    var validValue = (inputValue || '').replace(/\n/g, '');
     return validValue ? String(validValue).length : 0;
   }, [inputValue, statisticsLengthCaculator]);
   var exceed = maxValueLength ? currentValueLength > maxValueLength : false;

package/dist/index.js

@@ -14214,7 +14214,7 @@
         }
         // 默认为过滤换行后的字符长度
         // @en The default is the character length after filtering newlines
-        var validValue = inputValue.replace(/\n/g, '');
+        var validValue = (inputValue || '').replace(/\n/g, '');
         return validValue ? String(validValue).length : 0;
       }, [inputValue, statisticsLengthCaculator]);
       var exceed = maxValueLength ? currentValueLength > maxValueLength : false;
@@ -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);