@arco-design/mobile-react 2.33.0 → 2.34.0

package/esm/divider/style/css/index.css

@@ -542,10 +542,12 @@
 .arco-divider::before {
   content: '';
 }
-.arco-divider--hairline::before,
-.arco-divider--hairline::after {
-  -webkit-transform: scaleY(0.5);
-          transform: scaleY(0.5);
+@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
+  .arco-divider--hairline::before,
+  .arco-divider--hairline::after {
+    -webkit-transform: scaleY(0.5);
+            transform: scaleY(0.5);
+  }
 }
 @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
   .arco-divider--hairline::before,

package/esm/divider/style/index.less

@@ -27,7 +27,9 @@
     &--hairline {
         &::before,
         &::after {
-            transform: scaleY(0.5);
+            @media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
+                transform: scaleY(0.5);
+            }
 
             @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
                 transform: scaleY(0.33333333);

package/esm/notice-bar/index.js

@@ -1,4 +1,4 @@
-import { cls, removeElement, fadeColor, nextTick } from '@arco-design/mobile-utils';
+import { cls, fadeColor, nextTick } from '@arco-design/mobile-utils';
 import React, { useRef, forwardRef, useImperativeHandle, useState, useEffect, useMemo, useContext } from 'react';
 import { ContextLayout, GlobalContext } from '../context-provider';
 import IconClose from '../icon/IconClose';
@@ -43,9 +43,13 @@ var NoticeBar = /*#__PURE__*/forwardRef(function (props, ref) {
   var contentRef = useRef(null);
   var timerRef = useRef(null);
 
-  var _useState = useState(false),
-      needMarquee = _useState[0],
-      setNeedMarquee = _useState[1];
+  var _useState = useState(true),
+      visible = _useState[0],
+      setVisible = _useState[1];
+
+  var _useState2 = useState(false),
+      needMarquee = _useState2[0],
+      setNeedMarquee = _useState2[1];
 
   var extraClass = useMemo(function () {
     var classList = []; // 字幕可滚动时，或不可滚动且不可以换行时，添加不换行效果
@@ -86,9 +90,8 @@ var NoticeBar = /*#__PURE__*/forwardRef(function (props, ref) {
   }, [useRtl]);
 
   function close() {
-    if (domRef.current) {
-      removeElement(domRef.current);
-    }
+    setVisible(false);
+    clear();
   }
 
   function handleClose(e) {
@@ -153,7 +156,7 @@ var NoticeBar = /*#__PURE__*/forwardRef(function (props, ref) {
   }
 
   function renderNoticeBar(prefix) {
-    return /*#__PURE__*/React.createElement("div", {
+    return visible ? /*#__PURE__*/React.createElement("div", {
       className: cls(prefix, className, extraClass),
       style: style,
       ref: domRef,
@@ -179,7 +182,7 @@ var NoticeBar = /*#__PURE__*/forwardRef(function (props, ref) {
     }, rightContent) : null, closeable ? /*#__PURE__*/React.createElement("div", {
       className: prefix + "-close",
       onClick: handleClose
-    }, closeIcon) : null);
+    }, closeIcon) : null) : null;
   }
 
   return /*#__PURE__*/React.createElement(ContextLayout, null, function (_ref) {

package/esm/popover/popover-inner.js

@@ -47,7 +47,15 @@ export var PopoverInner = /*#__PURE__*/forwardRef(function (props, ref) {
     if (left || width || top || height || bottom) {
       if (!show) {
         setTimeout(function () {
-          setShow(true);
+          setShow(function () {
+            var _domRef$current;
+
+            // bugfix:
+            // 外层CSSTransition使用dom API而非通过react className属性修改class
+            // 如果内部通过react className属性动态修改class会覆盖CSSTransition的设置，导致CSSTransition enter相关的class无法应用到组件
+            (_domRef$current = domRef.current) == null ? void 0 : _domRef$current.classList.add('show');
+            return true;
+          });
         }, 0);
       }
     }
@@ -99,7 +107,6 @@ export var PopoverInner = /*#__PURE__*/forwardRef(function (props, ref) {
   return /*#__PURE__*/React.createElement("div", {
     ref: domRef,
     className: cls(prefixCls + "-popover-inner", 'popover-inner', 'all-border-box', mode + "-mode", className, {
-      show: show,
       'with-shadow': needShadow,
       'with-suffix': showCloseIcon || textSuffix,
       'custom-content': typeof content !== 'string'

package/esnext/_helpers/hooks.js

@@ -60,8 +60,12 @@ export function useMountedState(initialState) {
         }
         setState(value);
     }, []);
-    useEffect(() => () => {
-        leavingRef.current = true;
+    useEffect(() => {
+        // see: https://github.com/arco-design/arco-design-mobile/pull/292
+        leavingRef.current = false;
+        return () => {
+            leavingRef.current = true;
+        };
     }, []);
     const result = [state, setValidState];
     return result;

package/esnext/divider/style/css/index.css

@@ -542,10 +542,12 @@
 .arco-divider::before {
   content: '';
 }
-.arco-divider--hairline::before,
-.arco-divider--hairline::after {
-  -webkit-transform: scaleY(0.5);
-          transform: scaleY(0.5);
+@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
+  .arco-divider--hairline::before,
+  .arco-divider--hairline::after {
+    -webkit-transform: scaleY(0.5);
+            transform: scaleY(0.5);
+  }
 }
 @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
   .arco-divider--hairline::before,

package/esnext/divider/style/index.less

@@ -27,7 +27,9 @@
     &--hairline {
         &::before,
         &::after {
-            transform: scaleY(0.5);
+            @media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
+                transform: scaleY(0.5);
+            }
 
             @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
                 transform: scaleY(0.33333333);

package/esnext/notice-bar/index.js

@@ -1,4 +1,4 @@
-import { cls, removeElement, fadeColor, nextTick } from '@arco-design/mobile-utils';
+import { cls, fadeColor, nextTick } from '@arco-design/mobile-utils';
 import React, { useRef, forwardRef, useImperativeHandle, useState, useEffect, useMemo, useContext, } from 'react';
 import { ContextLayout, GlobalContext } from '../context-provider';
 import IconClose from '../icon/IconClose';
@@ -17,6 +17,7 @@ const NoticeBar = forwardRef((props, ref) => {
     const wrapRef = useRef(null);
     const contentRef = useRef(null);
     const timerRef = useRef(null);
+    const [visible, setVisible] = useState(true);
     const [needMarquee, setNeedMarquee] = useState(false);
     const extraClass = useMemo(() => {
         const classList = [];
@@ -53,9 +54,8 @@ const NoticeBar = forwardRef((props, ref) => {
         updateData();
     }, [useRtl]);
     function close() {
-        if (domRef.current) {
-            removeElement(domRef.current);
-        }
+        setVisible(false);
+        clear();
     }
     function handleClose(e) {
         e.stopPropagation();
@@ -112,14 +112,14 @@ const NoticeBar = forwardRef((props, ref) => {
         }
     }
     function renderNoticeBar(prefix) {
-        return (React.createElement("div", { className: cls(prefix, className, extraClass), style: style, ref: domRef, onClick: onClick },
+        return visible ? (React.createElement("div", { className: cls(prefix, className, extraClass), style: style, ref: domRef, onClick: onClick },
             leftContent ? React.createElement("div", { className: `${prefix}-left-part` }, leftContent) : null,
             React.createElement("div", { className: `${prefix}-content`, ref: wrapRef },
                 needMarquee ? (React.createElement("i", { className: `${prefix}-gradient left`, style: gradientStyle })) : null,
                 React.createElement("div", { className: cls(`${prefix}-content-inner`, { animate: needMarquee }), ref: contentRef }, children),
                 needMarquee ? (React.createElement("i", { className: `${prefix}-gradient right`, style: gradientStyle })) : null),
             rightContent ? React.createElement("div", { className: `${prefix}-right-part` }, rightContent) : null,
-            closeable ? (React.createElement("div", { className: `${prefix}-close`, onClick: handleClose }, closeIcon)) : null));
+            closeable ? (React.createElement("div", { className: `${prefix}-close`, onClick: handleClose }, closeIcon)) : null)) : null;
     }
     return (React.createElement(ContextLayout, null, ({ prefixCls }) => renderNoticeBar(`${prefixCls}-notice-bar`)));
 });

package/esnext/popover/popover-inner.js

@@ -18,7 +18,13 @@ export const PopoverInner = forwardRef((props, ref) => {
         if (left || width || top || height || bottom) {
             if (!show) {
                 setTimeout(() => {
-                    setShow(true);
+                    setShow(() => {
+                        // bugfix:
+                        // 外层CSSTransition使用dom API而非通过react className属性修改class
+                        // 如果内部通过react className属性动态修改class会覆盖CSSTransition的设置，导致CSSTransition enter相关的class无法应用到组件
+                        domRef.current?.classList.add('show');
+                        return true;
+                    });
                 }, 0);
             }
         }
@@ -60,7 +66,6 @@ export const PopoverInner = forwardRef((props, ref) => {
         };
     };
     return (React.createElement("div", { ref: domRef, className: cls(`${prefixCls}-popover-inner`, 'popover-inner', 'all-border-box', `${mode}-mode`, className, {
-            show,
             'with-shadow': needShadow,
             'with-suffix': showCloseIcon || textSuffix,
             'custom-content': typeof content !== 'string',

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@arco-design/mobile-react",
-    "version": "2.33.0",
+    "version": "2.34.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.20.0",
+        "@arco-design/mobile-utils": "2.20.1",
         "@arco-design/transformable": "^1.0.0",
         "@babel/runtime": "^7",
         "lodash.throttle": "^4.1.1",
@@ -47,5 +47,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "7b0a8e3446dd2429a7a14a4a4d86688aa726887f"
+    "gitHead": "42445e5c9d62da918bdbcf48afc01c77916f8519"
 }

package/umd/_helpers/hooks.js

@@ -108,6 +108,8 @@
       setState(value);
     }, []);
     (0, _react.useEffect)(function () {
+      // see: https://github.com/arco-design/arco-design-mobile/pull/292
+      leavingRef.current = false;
       return function () {
         leavingRef.current = true;
       };

package/umd/divider/style/css/index.css

@@ -542,10 +542,12 @@
 .arco-divider::before {
   content: '';
 }
-.arco-divider--hairline::before,
-.arco-divider--hairline::after {
-  -webkit-transform: scaleY(0.5);
-          transform: scaleY(0.5);
+@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
+  .arco-divider--hairline::before,
+  .arco-divider--hairline::after {
+    -webkit-transform: scaleY(0.5);
+            transform: scaleY(0.5);
+  }
 }
 @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
   .arco-divider--hairline::before,

package/umd/divider/style/index.less

@@ -27,7 +27,9 @@
     &--hairline {
         &::before,
         &::after {
-            transform: scaleY(0.5);
+            @media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
+                transform: scaleY(0.5);
+            }
 
             @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
                 transform: scaleY(0.33333333);

package/umd/notice-bar/index.js

@@ -64,9 +64,13 @@
     var contentRef = (0, _react.useRef)(null);
     var timerRef = (0, _react.useRef)(null);
 
-    var _useState = (0, _react.useState)(false),
-        needMarquee = _useState[0],
-        setNeedMarquee = _useState[1];
+    var _useState = (0, _react.useState)(true),
+        visible = _useState[0],
+        setVisible = _useState[1];
+
+    var _useState2 = (0, _react.useState)(false),
+        needMarquee = _useState2[0],
+        setNeedMarquee = _useState2[1];
 
     var extraClass = (0, _react.useMemo)(function () {
       var classList = []; // 字幕可滚动时，或不可滚动且不可以换行时，添加不换行效果
@@ -107,9 +111,8 @@
     }, [useRtl]);
 
     function close() {
-      if (domRef.current) {
-        (0, _mobileUtils.removeElement)(domRef.current);
-      }
+      setVisible(false);
+      clear();
     }
 
     function handleClose(e) {
@@ -174,7 +177,7 @@
     }
 
     function renderNoticeBar(prefix) {
-      return /*#__PURE__*/_react.default.createElement("div", {
+      return visible ? /*#__PURE__*/_react.default.createElement("div", {
         className: (0, _mobileUtils.cls)(prefix, className, extraClass),
         style: style,
         ref: domRef,
@@ -200,7 +203,7 @@
       }, rightContent) : null, closeable ? /*#__PURE__*/_react.default.createElement("div", {
         className: prefix + "-close",
         onClick: handleClose
-      }, closeIcon) : null);
+      }, closeIcon) : null) : null;
     }
 
     return /*#__PURE__*/_react.default.createElement(_contextProvider.ContextLayout, null, function (_ref) {

package/umd/popover/popover-inner.js

@@ -68,7 +68,15 @@
       if (left || width || top || height || bottom) {
         if (!show) {
           setTimeout(function () {
-            setShow(true);
+            setShow(function () {
+              var _domRef$current;
+
+              // bugfix:
+              // 外层CSSTransition使用dom API而非通过react className属性修改class
+              // 如果内部通过react className属性动态修改class会覆盖CSSTransition的设置，导致CSSTransition enter相关的class无法应用到组件
+              (_domRef$current = domRef.current) == null ? void 0 : _domRef$current.classList.add('show');
+              return true;
+            });
           }, 0);
         }
       }
@@ -120,7 +128,6 @@
     return /*#__PURE__*/_react.default.createElement("div", {
       ref: domRef,
       className: (0, _mobileUtils.cls)(prefixCls + "-popover-inner", 'popover-inner', 'all-border-box', mode + "-mode", className, {
-        show: show,
         'with-shadow': needShadow,
         'with-suffix': showCloseIcon || textSuffix,
         'custom-content': typeof content !== 'string'