@arco-design/mobile-react 2.33.0 → 2.35.0

package/esm/date-picker/index.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 var _excluded = ["currentTs", "className", "visible", "onOk", "onChange", "onValueChange", "mode", "typeArr", "minTs", "maxTs", "formatter", "valueFilter", "columnsProcessor", "touchToStop", "useUTC", "renderLinkedContainer"];
 import React, { useEffect, useRef, useState, useMemo, forwardRef, useImperativeHandle } from 'react';
-import { cls, componentWrapper, formatDateNumber } from '@arco-design/mobile-utils';
+import { cls, componentWrapper, formatDateNumber, isEmptyValue } from '@arco-design/mobile-utils';
 import Picker from '../picker';
 import { ContextLayout } from '../context-provider';
 import { convertTsToDateObj, oneOf, judgeObj, convertObjToTs } from './helper';
@@ -317,7 +317,7 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, ref) {
       onOk: _handlePickerConfirm,
       touchToStop: touchToStop,
       renderLinkedContainer: renderLinkedContainer ? function () {
-        return renderLinkedContainer(currentTs, keyOptions);
+        return renderLinkedContainer(isEmptyValue(props.currentTs) ? undefined : currentTs, keyOptions);
       } : undefined
     }));
   });

package/esm/date-picker/type.d.ts

@@ -110,5 +110,5 @@ export interface DatePickerProps extends Omit<PickerProps, 'data' | 'cascade' |
      * 将选择器的展现隐藏状态及选中值的展示与某个容器关联，传入后将同时渲染该容器和选择器组件，此时选择器组件的 visible 和 onHide 属性可不传，点击该容器会唤起选择器
      * @en Associate the hidden state of the picker and the display of the selected value with a container. After passing it in, the container and the picker component will be rendered at the same time. At this time, the visible and onHide attributes of the picker component are optional values. Clicking the container will evoke the picker
      */
-    renderLinkedContainer?: (currentTs: number, itemTypes: ItemType[]) => ReactNode;
+    renderLinkedContainer?: (currentTs: number | undefined, itemTypes: ItemType[]) => ReactNode;
 }

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState, useMemo, forwardRef, useImperativeHandle, } from 'react';
-import { cls, componentWrapper, formatDateNumber } from '@arco-design/mobile-utils';
+import { cls, componentWrapper, formatDateNumber, isEmptyValue } from '@arco-design/mobile-utils';
 import Picker from '../picker';
 import { ContextLayout } from '../context-provider';
 import { convertTsToDateObj, oneOf, judgeObj, convertObjToTs } from './helper';
@@ -202,7 +202,7 @@ const DatePicker = forwardRef((props, ref) => {
         }
     }, [visible]);
     return (React.createElement(ContextLayout, null, ({ prefixCls }) => (React.createElement(Picker, Object.assign({}, otherProps, { ref: pickerRef, visible: visible, className: cls(className, `${prefixCls}-date-picker`), cascade: false, data: data, value: value, onPickerChange: _handlePickerChange, onOk: _handlePickerConfirm, touchToStop: touchToStop, renderLinkedContainer: renderLinkedContainer
-            ? () => renderLinkedContainer(currentTs, keyOptions)
+            ? () => renderLinkedContainer(isEmptyValue(props.currentTs) ? undefined : currentTs, keyOptions)
             : undefined })))));
 });
 /**

package/esnext/date-picker/type.d.ts

@@ -110,5 +110,5 @@ export interface DatePickerProps extends Omit<PickerProps, 'data' | 'cascade' |
      * 将选择器的展现隐藏状态及选中值的展示与某个容器关联，传入后将同时渲染该容器和选择器组件，此时选择器组件的 visible 和 onHide 属性可不传，点击该容器会唤起选择器
      * @en Associate the hidden state of the picker and the display of the selected value with a container. After passing it in, the container and the picker component will be rendered at the same time. At this time, the visible and onHide attributes of the picker component are optional values. Clicking the container will evoke the picker
      */
-    renderLinkedContainer?: (currentTs: number, itemTypes: ItemType[]) => ReactNode;
+    renderLinkedContainer?: (currentTs: number | undefined, itemTypes: ItemType[]) => ReactNode;
 }

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.35.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.2",
         "@arco-design/transformable": "^1.0.0",
         "@babel/runtime": "^7",
         "lodash.throttle": "^4.1.1",
@@ -47,5 +47,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "7b0a8e3446dd2429a7a14a4a4d86688aa726887f"
+    "gitHead": "efb0db8d0e3ecdd787266dce595b2990e80bbefa"
 }

package/tokens/app/arcodesign/default/css-variables.less

@@ -1,7 +1,8 @@
 @import '../../../mixin/index.less';
 
 :root when (@use-css-vars = 1) {
-    --prefix: arco;
+    --prefix: var(--prefix-mobile);
+    --prefix-mobile: arco;
     --base-font-size: 50;
     --arco-dark-mode-selector: .arco-theme-dark;
     --background-color: #FFFFFF;

package/tokens/app/arcodesign/default/index.d.ts

@@ -1,6 +1,7 @@
 export declare function getRem(px: number, baseFontSize: number): string;
 export interface ArcodesignToken extends Record<string, string> {
     'prefix': string;
+    'prefix-mobile': string;
     'base-font-size': string;
     'arco-dark-mode-selector': string;
     'background-color': string;

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

@@ -12,7 +12,8 @@ function getRem(px, baseFontSize) {
 }
 
 var tokens = {
-  "prefix": "arco",
+  "prefix": "var(--prefix-mobile)",
+  "prefix-mobile": "arco",
   "base-font-size": "50",
   "arco-dark-mode-selector": ".arco-theme-dark",
   "background-color": "#FFFFFF",

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

@@ -8049,14 +8049,27 @@
         "cssKey": "prefix",
         "desc": "类前缀，需配合 context-provider 中的 prefixCls 使用",
         "override": "",
-        "value": "arco",
-        "jsValue": "arco",
+        "value": "@prefix-mobile",
+        "jsValue": "@global@prefixMobile",
         "staticValue": "arco",
         "localeDesc": {
             "ch": "类前缀，需配合 context-provider 中的 prefixCls 使用",
+            "default": "'arco'",
             "en": "Classname prefix, it needs to be used with prefixCls in context-provider"
         }
     },
+    "prefixMobile": {
+        "cssKey": "prefix-mobile",
+        "desc": "功能同 prefix，与 PC 版同用时可使用该变量修改类前缀解决冲突",
+        "override": "",
+        "value": "arco",
+        "jsValue": "arco",
+        "staticValue": "arco",
+        "localeDesc": {
+            "ch": "功能同 prefix，与 PC 版同用时可使用该变量修改类前缀解决冲突",
+            "en": "Same as `prefix`, it can avoid conflicts when used with arco pc"
+        }
+    },
     "primaryColor": {
         "cssKey": "primary-color",
         "desc": "基础主题色",

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

@@ -1,6 +1,7 @@
 @import '../../../mixin/pxtorem.less';
 
-@prefix: arco;
+@prefix: @prefix-mobile;
+@prefix-mobile: arco;
 @base-font-size: 50;
 @arco-dark-mode-selector: .arco-theme-dark;
 @background-color: #FFFFFF;

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

@@ -345,7 +345,7 @@
         onOk: _handlePickerConfirm,
         touchToStop: touchToStop,
         renderLinkedContainer: renderLinkedContainer ? function () {
-          return renderLinkedContainer(currentTs, keyOptions);
+          return renderLinkedContainer((0, _mobileUtils.isEmptyValue)(props.currentTs) ? undefined : currentTs, keyOptions);
         } : undefined
       }));
     });

package/umd/date-picker/type.d.ts

@@ -110,5 +110,5 @@ export interface DatePickerProps extends Omit<PickerProps, 'data' | 'cascade' |
      * 将选择器的展现隐藏状态及选中值的展示与某个容器关联，传入后将同时渲染该容器和选择器组件，此时选择器组件的 visible 和 onHide 属性可不传，点击该容器会唤起选择器
      * @en Associate the hidden state of the picker and the display of the selected value with a container. After passing it in, the container and the picker component will be rendered at the same time. At this time, the visible and onHide attributes of the picker component are optional values. Clicking the container will evoke the picker
      */
-    renderLinkedContainer?: (currentTs: number, itemTypes: ItemType[]) => ReactNode;
+    renderLinkedContainer?: (currentTs: number | undefined, itemTypes: ItemType[]) => ReactNode;
 }

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'