@arco-design/mobile-react 2.19.0

package/cjs/nav-bar/demo/style/css/mobile.css

@@ -0,0 +1,10 @@
+#demo-nav-bar .arcodesign-mobile-demo-content {
+  padding: 0;
+}
+#demo-nav-bar .gap-line {
+  height: 20px;
+  background: #fafafa;
+}
+#demo-nav-bar .immersive-navbar {
+  padding-bottom: 126px;
+}

package/cjs/nav-bar/demo/style/mobile.less

@@ -0,0 +1,14 @@
+@import '../../../../style/mixin.less';
+
+#demo-nav-bar {
+    .arcodesign-mobile-demo-content {
+        padding: 0;
+    }
+    .gap-line {
+        height: 20px;
+        background: #fafafa;
+    }
+    .immersive-navbar {
+        padding-bottom: 126px;
+    }
+}

package/cjs/nav-bar/index.d.ts

@@ -0,0 +1,118 @@
+import React, { CSSProperties, ReactNode } from 'react';
+export interface NavBarRef {
+    /** @deprecated */
+    navBar: HTMLDivElement | null;
+    /**
+     * 最外层元素DOM
+     * @en The outermost element DOM
+     */
+    dom: HTMLDivElement | null;
+}
+export interface NavBarProps {
+    /**
+     * 导航栏中间文字，带居中和溢出省略效果
+     * @en Navigation bar middle text, with centering and overflow omitting effects
+     */
+    title?: React.ReactNode;
+    /**
+     * 自定义导航栏主内容，当导航栏内容为Tabs等非居中文字样式时可用
+     * @en Customize the main content of the navigation bar, available when the content of the navigation bar is a non-centered text style such as Tabs
+     */
+    children?: React.ReactNode;
+    /**
+     * 导航栏左侧内容
+     * @en Navigation bar left content
+     * @default 返回按钮
+     * @default_en Back button
+     */
+    leftContent?: React.ReactNode;
+    /**
+     * 导航栏右侧内容
+     * @en Content on the right side of the navigation bar
+     */
+    rightContent?: React.ReactNode;
+    /**
+     * 自定义样式，背景和文字颜色可在此定义
+     * @en Custom stylesheet, background and text colors can be defined here
+     */
+    style?: React.CSSProperties;
+    /**
+     * 自定义类名
+     * @en Custom classname
+     */
+    className?: string;
+    /**
+     * 最外层元素自定义类名
+     * @en Outermost element custom classname
+     */
+    wrapClass?: string;
+    /**
+     * 是否吸顶
+     * @en Whether to fix
+     */
+    fixed?: boolean;
+    /**
+     * 沉浸式状态栏高度
+     * @en Immersive status bar height
+     * @default 0
+     */
+    statusBarHeight?: number;
+    /**
+     * 是否有底边框
+     * @en Whether there is a bottom border
+     * @default true
+     */
+    hasBottomLine?: boolean;
+    /**
+     * 点击左侧内容回调
+     * @en Callback when clicking the content on the left
+     */
+    onClickLeft?: (e: React.MouseEvent) => void;
+    /**
+     * 点击右侧内容回调
+     * @en Callback when clicking the content on the right
+     */
+    onClickRight?: (e: React.MouseEvent) => void;
+    /**
+     * 展示nav-bar的offset值，当scrollTop值小于该值时，将隐藏主内容和右侧内容，左侧内容保留
+     * @en Display the offset value of nav-bar. When the scrollTop value is less than this value, the main content and the right content will be hidden, and the left content will remain
+     * @default 0
+     */
+    showOffset?: number;
+    /**
+     * 设置showOffset后，当内容显示状态发生变化后触发
+     * @en After setting showOffset, triggered when the content display state changes
+     */
+    onShowChange?: (show: boolean) => void;
+    /**
+     * 设置fixed=true时，导航栏原本的位置是否要占住
+     * @en When fixed=true is set, whether the original position of the navigation bar should be occupied
+     * @default true
+     */
+    placeholder?: boolean;
+    /**
+     * 额外渲染元素，与inner平级
+     * @en Additional render elements, level with inner
+     */
+    extra?: ReactNode;
+    /**
+     * 自定义滚动元素，不传默认是window
+     * @en Custom scrolling element, default is window if not input
+     */
+    getScrollContainer?: () => HTMLElement | Window | null;
+    /**
+     * 根据滚动offset值设置自定义style，设置该属性后将监听滚动容器的滚动事件
+     * @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;
+}
+/**
+ * 导航栏组件，支持吸顶和沉浸式，支持在指定滚动位置展示，支持根据滚动位置实时更新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.
+ * @type 导航
+ * @type_en Navigation
+ * @name 导航栏
+ * @name_en NavBar
+ */
+declare const NavBar: React.ForwardRefExoticComponent<NavBarProps & React.RefAttributes<NavBarRef>>;
+export default NavBar;

package/cjs/nav-bar/index.js

@@ -0,0 +1,163 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _mobileUtils = require("@arco-design/mobile-utils");
+
+var _contextProvider = require("../context-provider");
+
+var _backIcon = _interopRequireDefault(require("./back-icon"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+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; }
+
+/**
+ * 导航栏组件，支持吸顶和沉浸式，支持在指定滚动位置展示，支持根据滚动位置实时更新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.
+ * @type 导航
+ * @type_en Navigation
+ * @name 导航栏
+ * @name_en NavBar
+ */
+var NavBar = /*#__PURE__*/(0, _react.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.default.createElement(_backIcon.default, 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,
+      getComputedStyleByScroll = props.getComputedStyleByScroll;
+  var navBarRef = (0, _react.useRef)(null);
+
+  var _useState = (0, _react.useState)(showOffset > 0),
+      scrollToggleHide = _useState[0],
+      setScrollToggleHide = _useState[1];
+
+  var relBackground = scrollToggleHide ? 'transparent' : '';
+
+  var _useState2 = (0, _react.useState)({}),
+      customStyle = _useState2[0],
+      setCustomStyle = _useState2[1];
+
+  var onElementScroll = function onElementScroll(curOffset) {
+    setScrollToggleHide(curOffset <= showOffset);
+
+    if (getComputedStyleByScroll) {
+      var cstyle = getComputedStyleByScroll(curOffset);
+      setCustomStyle(cstyle);
+    }
+  };
+
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      navBar: navBarRef.current,
+      dom: navBarRef.current
+    };
+  });
+  (0, _react.useEffect)(function () {
+    onShowChange == null ? void 0 : onShowChange(!scrollToggleHide);
+  }, [scrollToggleHide]);
+
+  var handleEleScroll = function handleEleScroll() {
+    var top = (0, _mobileUtils.getScrollContainerAttribute)('scrollTop', getScrollContainer) || 0;
+    onElementScroll(top);
+  };
+
+  (0, _react.useEffect)(function () {
+    var needBind = showOffset || getComputedStyleByScroll;
+    var container = (0, _mobileUtils.getValidScrollContainer)(getScrollContainer);
+
+    if (needBind && container) {
+      container.addEventListener('scroll', handleEleScroll, false);
+    }
+
+    return function () {
+      if (needBind && container) {
+        container.removeEventListener('scroll', handleEleScroll, false);
+      }
+    };
+  }, [showOffset, getComputedStyleByScroll, getScrollContainer]);
+
+  function handleClickLeft(e) {
+    if (onClickLeft) {
+      onClickLeft(e);
+    }
+  }
+
+  function handleClickRight(e) {
+    if (onClickRight) {
+      onClickRight(e);
+    }
+  } // 最外层div是为了fixed时占位
+  // @en The outermost div is a placeholder for fixed
+  // 第二层div是为了沉浸式paddingTop
+  // @en The second layer of div is for immersive paddingTop
+  // 第三层是为了保证内容高度始终是44px
+  // @en The third layer is to ensure that the content height is always 44px
+  // 背景色放到wrapper层是为了兼容iOS下拉回弹的背景色
+  // @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.default.createElement(_contextProvider.ContextLayout, null, function (_ref) {
+    var _cls, _cls2;
+
+    var prefixCls = _ref.prefixCls;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      ref: navBarRef,
+      className: (0, _mobileUtils.cls)(wrapClass, prefixCls + "-nav-bar", (_cls = {}, _cls[prefixCls + "-nav-bar-fixed"] = fixed, _cls[prefixCls + "-nav-bar-float"] = !placeholder, _cls[prefixCls + "-nav-bar-hide"] = scrollToggleHide, _cls)),
+      style: (0, _extends2.default)({
+        paddingTop: fixed && statusBarHeight ? statusBarHeight + "px" : ''
+      }, style || {}, relBackground ? {
+        background: relBackground
+      } : {})
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _mobileUtils.cls)(className, prefixCls + "-nav-bar-wrapper", (_cls2 = {}, _cls2[prefixCls + "-nav-bar-wrapper-fixed"] = fixed, _cls2[prefixCls + "-nav-bar-wrapper-border"] = hasBottomLine, _cls2)),
+      style: (0, _extends2.default)({
+        paddingTop: statusBarHeight ? statusBarHeight + "px" : ''
+      }, customStyle)
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: prefixCls + "-nav-bar-inner all-border-box"
+    }, leftContent ? /*#__PURE__*/_react.default.createElement("div", {
+      className: prefixCls + "-nav-bar-left",
+      onClick: handleClickLeft
+    }, leftContent) : null, children || /*#__PURE__*/_react.default.createElement("div", {
+      className: prefixCls + "-nav-bar-title"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: prefixCls + "-nav-bar-title-text"
+    }, title)), rightContent ? /*#__PURE__*/_react.default.createElement("div", {
+      className: prefixCls + "-nav-bar-right",
+      onClick: handleClickRight
+    }, rightContent) : null), extra));
+  });
+});
+var _default = NavBar;
+exports.default = _default;

package/cjs/nav-bar/style/css/index.css

@@ -0,0 +1,141 @@
+.arco-nav-bar {
+  position: relative;
+  width: 100%;
+  box-sizing: content-box;
+  color:  #1d2129 ;
+  background:  #ffffff ;
+}
+.arco-nav-bar.arco-nav-bar-fixed {
+  height:  0.88rem ;
+}
+.arco-nav-bar.arco-nav-bar-float {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+}
+.arco-nav-bar.arco-nav-bar-float:not(.arco-nav-bar-hide) .arco-nav-bar-wrapper-fixed {
+  position: absolute;
+}
+.arco-nav-bar.arco-nav-bar-hide .arco-nav-bar-title,
+.arco-nav-bar.arco-nav-bar-hide .arco-nav-bar-right {
+  visibility: hidden;
+}
+.arco-nav-bar.arco-nav-bar-hide .arco-nav-bar-wrapper-border::after {
+  border-color: transparent;
+}
+.arco-nav-bar-wrapper {
+  background: inherit;
+  height:  0.88rem ;
+  box-sizing: content-box;
+  width: 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  -webkit-transition: all 0.1s linear;
+  transition: all 0.1s linear;
+}
+.arco-nav-bar-wrapper.arco-nav-bar-wrapper-border {
+  position: relative;
+  border-width: 0;
+}
+.arco-nav-bar-wrapper.arco-nav-bar-wrapper-border::after {
+  content: '';
+  width: 100%;
+  height: 1PX;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  z-index: 1;
+  border-bottom-style: solid;
+  border-bottom-width: 1PX;
+  border-bottom-color: #e5e6eb;
+  box-sizing: border-box;
+  transform-origin: left bottom;
+  -webkit-transform-origin: left bottom;
+  pointer-events: none;
+  border-radius: 0;
+}
+@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
+  .arco-nav-bar-wrapper.arco-nav-bar-wrapper-border::after {
+    transform: scaleY(0.5);
+    -webkit-transform: scaleY(0.5);
+    border-radius: 0;
+  }
+}
+@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
+  .arco-nav-bar-wrapper.arco-nav-bar-wrapper-border::after {
+    transform: scaleY(0.33333333);
+    -webkit-transform: scaleY(0.33333333);
+    border-radius: 0;
+  }
+}
+.arco-nav-bar-wrapper.arco-nav-bar-wrapper-fixed {
+  position: fixed !important;
+  top: 0;
+  left: 0;
+  z-index: 100;
+}
+.arco-nav-bar-inner {
+  position: relative;
+  height: 100%;
+}
+.arco-nav-bar-left,
+.arco-nav-bar-title,
+.arco-nav-bar-right {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+          justify-content: center;
+}
+.arco-nav-bar-left,
+.arco-nav-bar-right {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  font-size:  0.32rem ;
+  padding:  0 0.32rem ;
+  position: absolute;
+  top: 0;
+  height: 100%;
+  color: inherit;
+}
+.arco-nav-bar-left {
+  left: 0;
+}
+.arco-nav-bar-title {
+  font-size:  0.34rem ;
+  padding:  0 0.92rem ;
+  width: 100%;
+  height: 100%;
+  color: inherit;
+  text-align: center;
+}
+.arco-nav-bar-title-text {
+  font-size:  0.34rem ;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  -webkit-touch-callout: none;
+  /* iOS Safari */
+  -webkit-user-select: none;
+  /* Chrome/Safari/Opera */
+  /* Konqueror */
+  /* Firefox */
+  /* Internet Explorer/Edge */
+  user-select: none;
+  /* Non-prefixed version, currently*/
+  font-weight: bold;
+}
+.arco-nav-bar-right {
+  right: 0;
+}
+.arco-nav-bar .nav-bar-back {
+  height:  0.32rem ;
+  font-size: 0;
+}

package/cjs/nav-bar/style/css/index.d.ts

@@ -0,0 +1,2 @@
+import '../../../../style/css/public.css';
+import './index.css';

package/cjs/nav-bar/style/css/index.js

@@ -0,0 +1,5 @@
+"use strict";
+
+require("../../../../style/css/public.css");
+
+require("./index.css");

package/cjs/nav-bar/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../../style/public.less';
+import './index.less';

package/cjs/nav-bar/style/index.js

@@ -0,0 +1,5 @@
+"use strict";
+
+require("../../../style/public.less");
+
+require("./index.less");

package/cjs/nav-bar/style/index.less

@@ -0,0 +1,112 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-nav-bar {
+    position: relative;
+    width: 100%;
+    box-sizing: content-box;
+    .use-var(color, nav-bar-font-color);
+    .use-var(background, nav-bar-background);
+
+    &&-fixed {
+        .use-var(height, nav-bar-height);
+    }
+
+    &&-float {
+        position: fixed;
+        top: 0;
+        left: 0;
+        z-index: @full-screen-z-index;
+    }
+
+    &&-float:not(&-hide) &-wrapper-fixed {
+        // 部分安卓4机型在有两层fixed时会疯狂抖动，因此外层fixed时内层不再fixed
+        // 辣鸡安卓4机型在设置为absolute的时候快速回到顶部时又有残影，所以在hide状态还是fixed
+        position: absolute;
+    }
+
+    &&-hide {
+        .@{prefix}-nav-bar-title, .@{prefix}-nav-bar-right {
+            visibility: hidden;
+        }
+    }
+
+    &&-hide &-wrapper-border::after {
+        border-color: transparent;
+    }
+
+    &-wrapper {
+        background: inherit;
+        .use-var(height, nav-bar-height);
+        box-sizing: content-box;
+        width: 100%;
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        transition: all .1s linear;
+
+        &&-border {
+            .onepx-border-var(bottom, nav-bar-bottom-border-color);
+        }
+
+        &&-fixed {
+            // onepx-border mixin 会加上position relative，暗黑模式下优先级会高于这条优先级，所以加上important声明
+            position: fixed !important;
+            top: 0;
+            left: 0;
+            z-index: @fixed-z-index;
+        }
+    }
+
+    &-inner {
+        position: relative;
+        height: 100%;
+    }
+
+    &-left,
+    &-title,
+    &-right {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    &-left,
+    &-right {
+        .text-overflow();
+        .use-var(font-size, nav-bar-two-sides-font-size);
+        .use-var(padding, nav-bar-two-sides-padding);
+        position: absolute;
+        top: 0;
+        height: 100%;
+        color: inherit;
+    }
+
+    &-left {
+        left: 0;
+    }
+
+    &-title {
+        .use-var(font-size, nav-bar-title-font-size);
+        .use-var(padding, nav-bar-title-padding);
+        width: 100%;
+        height: 100%;
+        color: inherit;
+        text-align: center;
+
+        &-text {
+            .use-var(font-size, nav-bar-title-text-font-size);
+            .text-overflow();
+            .noselect();
+            font-weight: bold;
+        }
+    }
+
+    &-right {
+        right: 0;
+    }
+
+    .nav-bar-back {
+        .use-var(height, nav-bar-back-icon-height);
+        font-size: 0;
+    }
+}

package/cjs/notice-bar/demo/style/css/mobile.css

@@ -0,0 +1,4 @@
+#demo-notice-bar .arcodesign-mobile-demo-content {
+  padding-left: 0;
+  padding-right: 0;
+}

package/cjs/notice-bar/demo/style/mobile.less

@@ -0,0 +1,6 @@
+#demo-notice-bar {
+    .arcodesign-mobile-demo-content {
+        padding-left: 0;
+        padding-right: 0;
+    }
+}