@arco-design/mobile-react 2.25.1 → 2.25.3

package/esm/form/form-item.js

@@ -11,9 +11,12 @@ import { FormInternalComponentType } from './type';
 import { getErrorAndWarnings, isFieldRequired } from './utils';
 var FormItemInner = /*#__PURE__*/function (_PureComponent) {
   _inheritsLoose(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;
@@ -127,8 +130,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();
   };
@@ -156,8 +158,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/esm/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/esm/image-preview/index.js

@@ -736,7 +736,7 @@ var ImagePreview = /*#__PURE__*/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,
@@ -746,6 +746,9 @@ var ImagePreview = /*#__PURE__*/forwardRef(function (props, ref) {
     var trans = hasOverflow ? {} : getStyleWithVendor({
       transform: 'translateY(-50%)'
     });
+    var fitObj = fitCss ? {
+      objectFit: fitCss
+    } : {};
     return system === 'ios' && showPlaceholders[index] && originWidth && originHeight ? /*#__PURE__*/React.createElement("img", {
       src: src,
       style: _extends({
@@ -754,7 +757,7 @@ var ImagePreview = /*#__PURE__*/forwardRef(function (props, ref) {
         height: originHeight,
         left: originLeft,
         top: originTop
-      }, trans)
+      }, fitObj, trans)
     }) : null;
   }
   function renderLoadingArea(index) {
@@ -820,7 +823,7 @@ var ImagePreview = /*#__PURE__*/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/esm/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/esm/nav-bar/index.js

@@ -38,6 +38,7 @@ var NavBar = /*#__PURE__*/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,
@@ -54,6 +55,7 @@ var NavBar = /*#__PURE__*/forwardRef(function (props, ref) {
   var system = useSystem();
   var onElementScroll = function onElementScroll(curOffset) {
     setScrollToggleHide(curOffset < showOffset);
+    onScrollChange == null ? void 0 : onScrollChange(curOffset);
     if (getComputedStyleByScroll) {
       var cstyle = getComputedStyleByScroll(curOffset);
       setCustomStyle(cstyle);
@@ -73,7 +75,7 @@ var NavBar = /*#__PURE__*/forwardRef(function (props, ref) {
     onElementScroll(top);
   };
   useEffect(function () {
-    var needBind = showOffset || getComputedStyleByScroll;
+    var needBind = showOffset || getComputedStyleByScroll || onScrollChange;
     var container = getValidScrollContainer(getScrollContainer);
     handleEleScroll();
     if (needBind && container) {
@@ -84,7 +86,7 @@ var NavBar = /*#__PURE__*/forwardRef(function (props, ref) {
         container.removeEventListener('scroll', handleEleScroll, false);
       }
     };
-  }, [showOffset, getComputedStyleByScroll, getScrollContainer]);
+  }, [showOffset, getComputedStyleByScroll, onScrollChange, getScrollContainer]);
   function handleClickLeft(e) {
     if (onClickLeft) {
       onClickLeft(e);

package/esm/textarea/index.js

@@ -45,7 +45,7 @@ var Textarea = /*#__PURE__*/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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@arco-design/mobile-react",
-    "version": "2.25.1",
+    "version": "2.25.3",
     "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.13.1",
+        "@arco-design/mobile-utils": "2.13.3",
         "@arco-design/transformable": "^1.0.0",
         "lodash.throttle": "^4.1.1",
         "resize-observer-polyfill": "^1.5.1"
@@ -35,5 +35,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "11368cb310e081d8094f17fcff5307bb28fb00f3"
+    "gitHead": "1d91bb305bdd20aae3448ba7c928b34935bff71c"
 }

package/umd/form/form-item.js

@@ -25,9 +25,12 @@
   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;
@@ -141,8 +144,7 @@
     };
     _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();
     };
@@ -170,8 +172,7 @@
         _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/umd/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/umd/image-preview/index.js

@@ -761,7 +761,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 _ref2 = imagesStatus[index] || {},
         originWidth = _ref2.originWidth,
         originHeight = _ref2.originHeight,
@@ -771,6 +771,9 @@
       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)({
@@ -779,7 +782,7 @@
           height: originHeight,
           left: originLeft,
           top: originTop
-        }, trans)
+        }, fitObj, trans)
       }) : null;
     }
     function renderLoadingArea(index) {
@@ -845,7 +848,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, {

package/umd/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/umd/nav-bar/index.js

@@ -55,6 +55,7 @@
       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,
@@ -71,6 +72,7 @@
     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);
@@ -90,7 +92,7 @@
       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) {
@@ -101,7 +103,7 @@
           container.removeEventListener('scroll', handleEleScroll, false);
         }
       };
-    }, [showOffset, getComputedStyleByScroll, getScrollContainer]);
+    }, [showOffset, getComputedStyleByScroll, onScrollChange, getScrollContainer]);
     function handleClickLeft(e) {
       if (onClickLeft) {
         onClickLeft(e);

package/umd/textarea/index.js

@@ -62,7 +62,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;