@arco-design/mobile-react 2.38.3 → 2.39.0

package/esm/nav-bar/index.js

@@ -4,7 +4,6 @@ import { cls, getScrollContainerAttribute, getValidScrollContainer } from '@arco
 import { ContextLayout } from '../context-provider';
 import BackArrow from './back-icon';
 import { useSystem } from '../_helpers';
-
 /**
  * 导航栏组件，支持吸顶和沉浸式，支持在指定滚动位置展示，支持根据滚动位置实时更新style。
  * @en Navigation bar, supports ceiling and immersion, supports display at specified scroll position, and supports real-time update of style according to scroll position.
@@ -15,60 +14,53 @@ import { useSystem } from '../_helpers';
  */
 var NavBar = /*#__PURE__*/forwardRef(function (props, ref) {
   var children = props.children,
-      _props$title = props.title,
-      title = _props$title === void 0 ? '' : _props$title,
-      onClickLeft = props.onClickLeft,
-      _props$leftContent = props.leftContent,
-      leftContent = _props$leftContent === void 0 ? /*#__PURE__*/React.createElement(BackArrow, null) : _props$leftContent,
-      onClickRight = props.onClickRight,
-      rightContent = props.rightContent,
-      onShowChange = props.onShowChange,
-      style = props.style,
-      _props$className = props.className,
-      className = _props$className === void 0 ? '' : _props$className,
-      wrapClass = props.wrapClass,
-      _props$placeholder = props.placeholder,
-      placeholder = _props$placeholder === void 0 ? true : _props$placeholder,
-      _props$fixed = props.fixed,
-      fixed = _props$fixed === void 0 ? true : _props$fixed,
-      _props$hasBottomLine = props.hasBottomLine,
-      hasBottomLine = _props$hasBottomLine === void 0 ? true : _props$hasBottomLine,
-      _props$statusBarHeigh = props.statusBarHeight,
-      statusBarHeight = _props$statusBarHeigh === void 0 ? 0 : _props$statusBarHeigh,
-      extra = props.extra,
-      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,
-      _props$ariaRole = props.ariaRole,
-      ariaRole = _props$ariaRole === void 0 ? 'banner' : _props$ariaRole;
+    _props$title = props.title,
+    title = _props$title === void 0 ? '' : _props$title,
+    onClickLeft = props.onClickLeft,
+    _props$leftContent = props.leftContent,
+    leftContent = _props$leftContent === void 0 ? /*#__PURE__*/React.createElement(BackArrow, null) : _props$leftContent,
+    onClickRight = props.onClickRight,
+    rightContent = props.rightContent,
+    onShowChange = props.onShowChange,
+    style = props.style,
+    _props$className = props.className,
+    className = _props$className === void 0 ? '' : _props$className,
+    wrapClass = props.wrapClass,
+    _props$placeholder = props.placeholder,
+    placeholder = _props$placeholder === void 0 ? true : _props$placeholder,
+    _props$fixed = props.fixed,
+    fixed = _props$fixed === void 0 ? true : _props$fixed,
+    _props$hasBottomLine = props.hasBottomLine,
+    hasBottomLine = _props$hasBottomLine === void 0 ? true : _props$hasBottomLine,
+    _props$statusBarHeigh = props.statusBarHeight,
+    statusBarHeight = _props$statusBarHeigh === void 0 ? 0 : _props$statusBarHeigh,
+    extra = props.extra,
+    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,
+    _props$ariaRole = props.ariaRole,
+    ariaRole = _props$ariaRole === void 0 ? 'banner' : _props$ariaRole;
   var navBarRef = useRef(null);
-
   var _useState = useState(showOffset > 0),
-      scrollToggleHide = _useState[0],
-      setScrollToggleHide = _useState[1];
-
+    scrollToggleHide = _useState[0],
+    setScrollToggleHide = _useState[1];
   var relBackground = scrollToggleHide ? 'transparent' : '';
-
   var _useState2 = useState({}),
-      customStyle = _useState2[0],
-      setCustomStyle = _useState2[1];
-
+    customStyle = _useState2[0],
+    setCustomStyle = _useState2[1];
   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);
     }
   };
-
   useImperativeHandle(ref, function () {
     return {
       navBar: navBarRef.current,
@@ -78,39 +70,35 @@ var NavBar = /*#__PURE__*/forwardRef(function (props, ref) {
   useEffect(function () {
     onShowChange == null ? void 0 : onShowChange(!scrollToggleHide);
   }, [scrollToggleHide]);
-
   var handleEleScroll = function handleEleScroll() {
     var top = getScrollContainerAttribute('scrollTop', getScrollContainer) || 0;
     onElementScroll(top);
   };
-
   useEffect(function () {
     var needBind = showOffset || getComputedStyleByScroll || onScrollChange;
     var container = getValidScrollContainer(getScrollContainer);
     handleEleScroll();
-
     if (needBind && container) {
       container.addEventListener('scroll', handleEleScroll, false);
     }
-
     return function () {
       if (needBind && container) {
         container.removeEventListener('scroll', handleEleScroll, false);
       }
     };
   }, [showOffset, getComputedStyleByScroll, onScrollChange, getScrollContainer]);
-
   function handleClickLeft(e) {
     if (onClickLeft) {
       onClickLeft(e);
     }
   }
-
   function handleClickRight(e) {
     if (onClickRight) {
       onClickRight(e);
     }
-  } // 最外层div是为了fixed时占位
+  }
+
+  // 最外层div是为了fixed时占位
   // @en The outermost div is a placeholder for fixed
   // 第二层div是为了沉浸式paddingTop
   // @en The second layer of div is for immersive paddingTop
@@ -120,11 +108,8 @@ var NavBar = /*#__PURE__*/forwardRef(function (props, ref) {
   // @en The background color is placed on the wrapper layer to be compatible with the background color of the pull-down rebound in iOS
   // fixed时用height+padding撑开nav-bar最外层高度；不fixed时内部wrapper元素撑开最外层高度
   // @en When fixed, use height+padding to stretch the outermost height of nav-bar; when not fixed, the inner wrapper element stretches the outermost height
-
-
   return /*#__PURE__*/React.createElement(ContextLayout, null, function (_ref) {
     var _cls, _cls2;
-
     var prefixCls = _ref.prefixCls;
     return /*#__PURE__*/React.createElement("div", {
       ref: navBarRef,

package/esm/notice-bar/index.js

@@ -2,7 +2,6 @@ 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';
-
 /**
  * 可自定义换行或滚动效果，支持循环滚动。
  * @en Line wrapping or scrolling effects can be customized, and circular scrolling is supported.
@@ -13,65 +12,57 @@ import IconClose from '../icon/IconClose';
  */
 var NoticeBar = /*#__PURE__*/forwardRef(function (props, ref) {
   var _props$className = props.className,
-      className = _props$className === void 0 ? '' : _props$className,
-      style = props.style,
-      children = props.children,
-      leftContent = props.leftContent,
-      rightContent = props.rightContent,
-      _props$marquee = props.marquee,
-      marquee = _props$marquee === void 0 ? 'overflow' : _props$marquee,
-      _props$closeable = props.closeable,
-      closeable = _props$closeable === void 0 ? true : _props$closeable,
-      _props$closeIcon = props.closeIcon,
-      closeIcon = _props$closeIcon === void 0 ? /*#__PURE__*/React.createElement(IconClose, null) : _props$closeIcon,
-      _props$wrapable = props.wrapable,
-      wrapable = _props$wrapable === void 0 ? true : _props$wrapable,
-      _props$speed = props.speed,
-      speed = _props$speed === void 0 ? 50 : _props$speed,
-      _props$delay = props.delay,
-      delay = _props$delay === void 0 ? 1000 : _props$delay,
-      _props$autoSetGradien = props.autoSetGradientStyle,
-      autoSetGradientStyle = _props$autoSetGradien === void 0 ? true : _props$autoSetGradien,
-      onClick = props.onClick,
-      onClose = props.onClose;
-
+    className = _props$className === void 0 ? '' : _props$className,
+    style = props.style,
+    children = props.children,
+    leftContent = props.leftContent,
+    rightContent = props.rightContent,
+    _props$marquee = props.marquee,
+    marquee = _props$marquee === void 0 ? 'overflow' : _props$marquee,
+    _props$closeable = props.closeable,
+    closeable = _props$closeable === void 0 ? true : _props$closeable,
+    _props$closeIcon = props.closeIcon,
+    closeIcon = _props$closeIcon === void 0 ? /*#__PURE__*/React.createElement(IconClose, null) : _props$closeIcon,
+    _props$wrapable = props.wrapable,
+    wrapable = _props$wrapable === void 0 ? true : _props$wrapable,
+    _props$speed = props.speed,
+    speed = _props$speed === void 0 ? 50 : _props$speed,
+    _props$delay = props.delay,
+    delay = _props$delay === void 0 ? 1000 : _props$delay,
+    _props$autoSetGradien = props.autoSetGradientStyle,
+    autoSetGradientStyle = _props$autoSetGradien === void 0 ? true : _props$autoSetGradien,
+    onClick = props.onClick,
+    onClose = props.onClose;
   var _useContext = useContext(GlobalContext),
-      useRtl = _useContext.useRtl;
-
+    useRtl = _useContext.useRtl;
   var domRef = useRef(null);
   var wrapRef = useRef(null);
   var contentRef = useRef(null);
   var timerRef = useRef(null);
-
   var _useState = useState(true),
-      visible = _useState[0],
-      setVisible = _useState[1];
-
+    visible = _useState[0],
+    setVisible = _useState[1];
   var _useState2 = useState(false),
-      needMarquee = _useState2[0],
-      setNeedMarquee = _useState2[1];
-
+    needMarquee = _useState2[0],
+    setNeedMarquee = _useState2[1];
   var extraClass = useMemo(function () {
-    var classList = []; // 字幕可滚动时，或不可滚动且不可以换行时，添加不换行效果
+    var classList = [];
+    // 字幕可滚动时，或不可滚动且不可以换行时，添加不换行效果
     // @en When the subtitle is scrollable, or when it is not scrollable and cannot wrap, add no wrapping effect
-
     if (marquee !== 'none' || !wrapable) {
       classList.push('no-wrap');
-    } // 字幕不可滚动时，根据是否可换行决定换行或省略效果
+    }
+    // 字幕不可滚动时，根据是否可换行决定换行或省略效果
     // @en When the subtitle is not scrollable, decide whether to wrap or omit the effect according to whether it can wrap
-
-
     if (marquee === 'none') {
       classList.push(wrapable ? 'wrapable' : 'ellipsis');
     }
-
     return classList;
   }, [marquee, wrapable]);
   var gradientStyle = useMemo(function () {
     if (!autoSetGradientStyle) {
       return {};
     }
-
     var curBg = (style == null ? void 0 : style.backgroundColor) || (style == null ? void 0 : style.background);
     var fadeBg = fadeColor(String(curBg) || '');
     return fadeBg ? {
@@ -88,18 +79,15 @@ var NoticeBar = /*#__PURE__*/forwardRef(function (props, ref) {
   useEffect(function () {
     updateData();
   }, [useRtl]);
-
   function close() {
     setVisible(false);
     clear();
   }
-
   function handleClose(e) {
     e.stopPropagation();
     onClose == null ? void 0 : onClose(e);
     close();
   }
-
   function updateData() {
     nextTick(function () {
       setTimeout(function () {
@@ -107,32 +95,28 @@ var NoticeBar = /*#__PURE__*/forwardRef(function (props, ref) {
       }, needMarquee ? 0 : delay);
     });
   }
-
   function updateLayoutData() {
     if (!wrapRef.current || !contentRef.current) {
       return;
     }
-
     var contentDom = contentRef.current;
     var needMarq = marquee === 'always';
     var wrapWidth = wrapRef.current.offsetWidth;
-    var contentWidth = contentRef.current.offsetWidth; // 如果为overflow类型，则当文字溢出时再开始滚动
+    var contentWidth = contentRef.current.offsetWidth;
+    // 如果为overflow类型，则当文字溢出时再开始滚动
     // @en If it is overflow type, start scrolling when the text overflows
-
     if (marquee === 'overflow') {
       if (wrapWidth < contentWidth) {
         needMarq = true;
       }
     }
-
     setNeedMarquee(needMarq);
     clear();
-
     if (needMarq) {
       var duration = contentWidth / speed;
-      contentDom.style.animationDuration = duration + "s"; // 第一次没有padding，第二次及以后为了从容器右边缘无缝滑入需要加上padding
+      contentDom.style.animationDuration = duration + "s";
+      // 第一次没有padding，第二次及以后为了从容器右边缘无缝滑入需要加上padding
       // @en The first time without padding, the second time and later need to add padding in order to seamlessly slide in from the right edge of the container
-
       timerRef.current = window.setTimeout(function () {
         // 这里暂时把animate类去掉，准备下一次从头开始
         // @en Temporarily remove the animate classname, and prepare to start from scratch next time
@@ -147,14 +131,12 @@ var NoticeBar = /*#__PURE__*/forwardRef(function (props, ref) {
       }, duration * 1000);
     }
   }
-
   function clear() {
     if (timerRef.current) {
       clearTimeout(timerRef.current);
       timerRef.current = null;
     }
   }
-
   function renderNoticeBar(prefix) {
     return visible ? /*#__PURE__*/React.createElement("div", {
       className: cls(prefix, className, extraClass),
@@ -184,7 +166,6 @@ var NoticeBar = /*#__PURE__*/forwardRef(function (props, ref) {
       onClick: handleClose
     }, closeIcon) : null) : null;
   }
-
   return /*#__PURE__*/React.createElement(ContextLayout, null, function (_ref) {
     var prefixCls = _ref.prefixCls;
     return renderNoticeBar(prefixCls + "-notice-bar");

package/esm/notify/index.js

@@ -8,40 +8,36 @@ import { notify } from './methods';
 export * from './type';
 var Notify = /*#__PURE__*/forwardRef(function (props, ref) {
   var _props$className = props.className,
-      className = _props$className === void 0 ? '' : _props$className,
-      style = props.style,
-      _props$visible = props.visible,
-      visible = _props$visible === void 0 ? false : _props$visible,
-      _props$transitionDura = props.transitionDuration,
-      transitionDuration = _props$transitionDura === void 0 ? 300 : _props$transitionDura,
-      content = props.content,
-      _props$duration = props.duration,
-      duration = _props$duration === void 0 ? 3000 : _props$duration,
-      onClose = props.onClose,
-      _props$type = props.type,
-      type = _props$type === void 0 ? 'info' : _props$type,
-      close = props.close,
-      getContainer = props.getContainer;
+    className = _props$className === void 0 ? '' : _props$className,
+    style = props.style,
+    _props$visible = props.visible,
+    visible = _props$visible === void 0 ? false : _props$visible,
+    _props$transitionDura = props.transitionDuration,
+    transitionDuration = _props$transitionDura === void 0 ? 300 : _props$transitionDura,
+    content = props.content,
+    _props$duration = props.duration,
+    duration = _props$duration === void 0 ? 3000 : _props$duration,
+    onClose = props.onClose,
+    _props$type = props.type,
+    type = _props$type === void 0 ? 'info' : _props$type,
+    close = props.close,
+    getContainer = props.getContainer;
   var domRef = useRef(null);
   var innerRef = useRef(null);
   var closeTimerRef = useRef(undefined);
   var onCloseTimeRef = useRef(undefined);
-
   var _useState = useState(!visible),
-      hasTrans = _useState[0],
-      setHasTrans = _useState[1];
-
+    hasTrans = _useState[0],
+    setHasTrans = _useState[1];
   var _useState2 = useState(0),
-      innerHeight = _useState2[0],
-      setInnerHeight = _useState2[1];
-
+    innerHeight = _useState2[0],
+    setInnerHeight = _useState2[1];
   useImperativeHandle(ref, function () {
     return {
       dom: domRef.current,
       updateLayout: updateLayout
     };
   });
-
   function startCloseTimer() {
     if (duration) {
       clearTimeout(closeTimerRef.current);
@@ -50,16 +46,13 @@ var Notify = /*#__PURE__*/forwardRef(function (props, ref) {
       }, duration);
     }
   }
-
   function updateLayout() {
     if (innerRef.current) {
       var _innerRef$current$get = innerRef.current.getBoundingClientRect(),
-          height = _innerRef$current$get.height;
-
+        height = _innerRef$current$get.height;
       setInnerHeight(height);
     }
   }
-
   useEffect(function () {
     visible && updateLayout();
     visible && startCloseTimer();
@@ -82,7 +75,6 @@ var Notify = /*#__PURE__*/forwardRef(function (props, ref) {
       clearTimeout(onCloseTimeRef.current);
     };
   }, []);
-
   function renderComponent(prefixClass) {
     return content ? /*#__PURE__*/React.createElement("div", {
       className: prefixClass + "-content " + (visible ? prefixClass + "-content-transition-Y0" : prefixClass + "-content-transition-Y100"),
@@ -92,7 +84,6 @@ var Notify = /*#__PURE__*/forwardRef(function (props, ref) {
       }) : {})
     }, content) : null;
   }
-
   var render = function render(prefixCls) {
     return /*#__PURE__*/React.createElement("div", {
       className: prefixCls + "-notify " + prefixCls + "-notify-" + type + " " + className,
@@ -104,7 +95,6 @@ var Notify = /*#__PURE__*/forwardRef(function (props, ref) {
       ref: domRef
     }, renderComponent(prefixCls + "-notify"));
   };
-
   return /*#__PURE__*/React.createElement(ContextLayout, null, function (_ref) {
     var prefixCls = _ref.prefixCls;
     return getContainer ? /*#__PURE__*/ReactDOM.createPortal(render(prefixCls), getContainer()) : render(prefixCls);
@@ -119,7 +109,6 @@ export function methodsGenerator(Comp) {
      * @returns {{ update: (config: NotifyProps) => void; close: () => void }}
      */
     info: notify(Comp),
-
     /**
      * 展示成功通知
      * @desc {en} Show success notification
@@ -127,7 +116,6 @@ export function methodsGenerator(Comp) {
      * @returns {{ update: (config: NotifyProps) => void; close: () => void }}
      */
     success: notify(Comp, 'success'),
-
     /**
      * 展示错误的通知
      * @desc {en} Show error notification
@@ -135,7 +123,6 @@ export function methodsGenerator(Comp) {
      * @returns {{ update: (config: NotifyProps) => void; close: () => void }}
      */
     error: notify(Comp, 'error'),
-
     /**
      * 展示警告的通知
      * @desc {en} Show warning notification
@@ -146,6 +133,7 @@ export function methodsGenerator(Comp) {
   };
 }
 var NotifyWithGlobalContext = CompWithGlobalContext(Notify);
+
 /**
  * 主动操作后显示的反馈信息横条，可采用方法调用或者组件调用的方式
  * @en The feedback information bar displayed after active operation can be called by method or by component.
@@ -154,5 +142,4 @@ var NotifyWithGlobalContext = CompWithGlobalContext(Notify);
  * @name 消息通知
  * @name_en Notify
  */
-
 export default componentWrapper(Notify, methodsGenerator(NotifyWithGlobalContext));

package/esm/notify/methods.js

@@ -7,34 +7,27 @@ export function notify(Component, type) {
       content: originConfig,
       type: 'info'
     } : originConfig;
-
     if (type !== void 0) {
       config.type = type;
     }
-
     var div = document.createElement('div');
     var getContainer = config.getContainer;
-
     if (getContainer) {
       getContainer().appendChild(div);
     } else {
       document.body.appendChild(div);
     }
-
     var _ReactDOMRender = new ReactDOMRender(Component, div, context),
-        render = _ReactDOMRender.render,
-        unmount = _ReactDOMRender.unmount;
-
+      render = _ReactDOMRender.render,
+      unmount = _ReactDOMRender.unmount;
     function destroy() {
       var onClose = config.onClose;
       onClose && onClose();
       unmount();
-
       if (div.parentNode) {
         div.parentNode.removeChild(div);
       }
     }
-
     var dynamicProps = _extends({}, config, {
       close: close,
       onClose: destroy,
@@ -43,20 +36,16 @@ export function notify(Component, type) {
       },
       visible: false
     });
-
     var leaving = false;
-
     function update(newConfig) {
       dynamicProps = _extends({}, dynamicProps, newConfig);
       render(dynamicProps);
     }
-
     function close() {
       leaving = true;
       dynamicProps.visible = false;
       render(dynamicProps);
     }
-
     render(dynamicProps);
     nextTick(function () {
       if (leaving) return;