@arco-design/mobile-react 2.19.0

package/cjs/sticky/index.d.ts

@@ -0,0 +1,136 @@
+import React, { CSSProperties, ReactNode } from 'react';
+export interface StickyRef {
+    /**
+     * 最外层元素 DOM
+     * @en The outermost element DOM
+     */
+    dom: HTMLDivElement | null;
+    /**
+     * 局部滚动模式下，如果容器外部还有嵌套滚动，可主动调用此方法，让 sticky 的元素主动更新 fixed 位置
+     * @en In the local scrolling mode, if there is nested scrolling outside the container, this method can be actively called to make the sticky element actively update the fixed position
+     */
+    recalculatePosition: () => void;
+}
+export interface StickyEventPayload {
+    /**
+     * 当前是否为吸顶/吸底状态
+     * @en Whether it is currently in the top/bottom suction state
+     */
+    isSticky: boolean;
+    /**
+     * 前一个状态是否为吸顶/吸底状态
+     * @en Whether the previous state is ceiling / bottom suction state
+     */
+    wasSticky: boolean;
+    /** 当前是否为吸顶状态 */
+    isTopSticky: boolean;
+    /** 当前是否为吸底状态 */
+    isBottomSticky: boolean;
+}
+export interface StickyProps {
+    /**
+     * 吸附位置，top 表示吸顶，bottom 表示吸底，both 表示既吸顶又吸底
+     * @en Adsorption position, top means fixed top, bottom means fixed bottom, both means both top and bottom
+     * @default "top"
+     */
+    position?: 'top' | 'bottom' | 'both';
+    /**
+     * 当距离容器顶部距离为该值时吸顶
+     * @en Fixed top when the distance from the top of the container is this value
+     * @default 0
+     */
+    topOffset?: number;
+    /**
+     * 当距离容器底部距离为该值时吸底
+     * @en Fixed bottom when the distance from the bottom of the container is this value
+     * @default 0
+     */
+    bottomOffset?: number;
+    /**
+     * 当sticky元素需要跟随依附容器离开视口时距离依附容器边缘的距离
+     * @en The distance from the edge of the attached container when the sticky element needs to follow the attached container to leave the viewport
+     * @default 0
+     */
+    followOffset?: number;
+    /**
+     * 自定义类名
+     * @en Custom classname
+     */
+    className?: string;
+    /**
+     * 自定义样式
+     * @en Custom stylesheet
+     */
+    style?: CSSProperties;
+    /**
+     * 组件内部内容
+     * @en Children elements of the component
+     */
+    children?: ReactNode;
+    /**
+     * 层级指数，z-index的值
+     * @en z-index
+     * @default 100
+     */
+    zIndex?: number;
+    /**
+     * 在处于sticky状态时是否portal
+     * @en Whether it is portal in sticky state
+     * @default false
+     */
+    portalWhenSticky?: boolean;
+    /**
+     * 处于sticky状态时，元素固定样式。推荐用fixed，如果为absolute则需自行为滚动容器的父容器设置 position: relative
+     * @en When in the sticky state, the fixed style of the element. Fixed is recommended. If absolute, need to set position: relative for the parent container of the scrolling container.
+     * @default "fixed"
+     */
+    stickyStyle?: 'fixed' | 'absolute';
+    /**
+     * 处于sticky状态时的自定义样式
+     * @en Custom style when in sticky state
+     */
+    stickyCssStyle?: CSSProperties;
+    /**
+     * 被portal时挂载的容器
+     * @en Container mounted when being portaled
+     * @default () => document.body
+     */
+    getPortalContainer?: () => HTMLElement;
+    /**
+     * 吸顶状态切换时触发
+     * payload.isSticky: 当前是否为吸顶/吸底状态
+     * payload.wasSticky: 前一个状态是否为吸顶/吸底状态
+     * @en Triggered when the sticky state is switched
+     * @en isSticky: Whether it is currently in the top/bottom state
+     * @en Whether the previous state is the top/bottom state
+     */
+    onStickyStateChange?: (payload: StickyEventPayload) => void;
+    /**
+     * 滚动时top变化回调，参数为元素距离容器顶部减去topOffset的距离
+     * @en The top change callback when scrolling, the parameter is the distance of the element from the top of the container minus topOffset
+     */
+    onTopChange?: (top: number) => void;
+    /**
+     * 指定sticky元素的依附容器，sticky元素不会超出容器，在容器离开视口时会跟随
+     * 如果返回string则使用querySelector选取容器
+     * @en Specifies the attachment container of the sticky element. The sticky element will not exceed the container and will follow when the container leaves the viewport
+     * @en If a string is returned, use querySelector to select the container
+     */
+    getContainer?: () => HTMLElement | string;
+    /**
+     * 指定滚动容器，如果指定该值则relative属性始终认定为false；如果返回string则使用querySelector选取容器
+     * @en Specifies the scrolling container. If this value is specified, the relative property is always regarded as false; if a string is input, use querySelector to select the container
+     * @default () => window
+     */
+    getScrollContainer?: () => HTMLElement | Window | string;
+}
+/**
+ * 粘性布局组件，元素相对于窗口或指定容器的吸顶效果。
+ * @en Sticky layout component, The sticky-to-top effect of the element relative to the window or specified container
+ * @type 布局
+ * @type_en Layout
+ * @name 粘性布局
+ * @name_en Sticky
+ */
+declare const Sticky: React.ForwardRefExoticComponent<StickyProps & React.RefAttributes<StickyRef>>;
+export default Sticky;

package/cjs/sticky/index.js

@@ -0,0 +1,216 @@
+"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 _helpers = require("../_helpers");
+
+var _portal = _interopRequireDefault(require("../portal"));
+
+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; }
+
+/**
+ * 粘性布局组件，元素相对于窗口或指定容器的吸顶效果。
+ * @en Sticky layout component, The sticky-to-top effect of the element relative to the window or specified container
+ * @type 布局
+ * @type_en Layout
+ * @name 粘性布局
+ * @name_en Sticky
+ */
+var Sticky = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var _props$position = props.position,
+      position = _props$position === void 0 ? 'top' : _props$position,
+      _props$topOffset = props.topOffset,
+      topOffset = _props$topOffset === void 0 ? 0 : _props$topOffset,
+      _props$bottomOffset = props.bottomOffset,
+      bottomOffset = _props$bottomOffset === void 0 ? 0 : _props$bottomOffset,
+      _props$followOffset = props.followOffset,
+      followOffset = _props$followOffset === void 0 ? 0 : _props$followOffset,
+      children = props.children,
+      className = props.className,
+      style = props.style,
+      _props$zIndex = props.zIndex,
+      zIndex = _props$zIndex === void 0 ? 100 : _props$zIndex,
+      _props$portalWhenStic = props.portalWhenSticky,
+      portalWhenSticky = _props$portalWhenStic === void 0 ? false : _props$portalWhenStic,
+      _props$stickyStyle = props.stickyStyle,
+      stickyStyle = _props$stickyStyle === void 0 ? 'fixed' : _props$stickyStyle,
+      userSetStickyCssStyle = props.stickyCssStyle,
+      getPortalContainer = props.getPortalContainer,
+      getContainer = props.getContainer,
+      getScrollContainer = props.getScrollContainer,
+      onStickyStateChange = props.onStickyStateChange,
+      onTopChange = props.onTopChange;
+
+  var _useRefState = (0, _helpers.useRefState)(false),
+      isSticky = _useRefState[0],
+      isStickyRef = _useRefState[1],
+      setIsSticky = _useRefState[2];
+
+  var _useRefState2 = (0, _helpers.useRefState)(false),
+      wasSticky = _useRefState2[0],
+      wasStickyRef = _useRefState2[1],
+      setWasSticky = _useRefState2[2];
+
+  var _useState = (0, _react.useState)({}),
+      stickyStateStyle = _useState[0],
+      setStickyStateStyle = _useState[1];
+
+  var contentRef = (0, _react.useRef)(null);
+  var placeholderRef = (0, _react.useRef)(null);
+  var contentCalculateHeightRef = (0, _react.useRef)(0);
+  var containerRef = (0, _react.useRef)(null);
+  var scrollContainerRef = (0, _react.useRef)(null);
+  var framePendingRef = (0, _react.useRef)(false);
+  var containerEventHandler = (0, _react.useCallback)(function (_ref) {
+    var followTop = _ref.followTop,
+        followBottom = _ref.followBottom;
+
+    if (!contentRef.current) {
+      return;
+    }
+
+    var needTop = position === 'top' || position === 'both';
+    var needBottom = position === 'bottom' || position === 'both';
+    var placeholderClientRect = placeholderRef.current.getBoundingClientRect();
+    var contentClientRect = contentRef.current.getBoundingClientRect();
+    var calculatedHeight = contentClientRect.height;
+    contentCalculateHeightRef.current = contentClientRect.height;
+
+    var _getScrollContainerRe = (0, _mobileUtils.getScrollContainerRect)(scrollContainerRef.current),
+        containerRect = _getScrollContainerRe.containerRect;
+
+    var containerTop = containerRect.top,
+        containerBottom = containerRect.bottom,
+        containerHeight = containerRect.height;
+    var disFromTop = placeholderClientRect.top - containerTop;
+    var disFromBottom = placeholderClientRect.top + calculatedHeight - containerBottom;
+    var topFollowDifference = followBottom - followOffset - calculatedHeight - topOffset - containerTop;
+    var bottomFollowDifference = containerHeight - followTop - followOffset - calculatedHeight - bottomOffset;
+    setWasSticky(Boolean(isStickyRef.current));
+    var isTopSticky = needTop ? disFromTop <= topOffset && followBottom > containerTop + followOffset : false;
+    var isBottomSticky = needBottom ? disFromBottom >= -bottomOffset && followTop < containerBottom - followOffset : false;
+    var newStickyState = isTopSticky || isBottomSticky;
+    var cssTop = (stickyStyle === 'absolute' ? 0 : containerTop) + topOffset;
+    var cssBottom = (stickyStyle === 'absolute' ? 0 : window.innerHeight - containerBottom) + bottomOffset;
+    var stickyCssStyle = {};
+
+    if (newStickyState) {
+      stickyCssStyle = (0, _extends2.default)({
+        transform: 'translateZ(0)',
+        WebkitTransform: 'translateZ(0)',
+        position: stickyStyle === 'absolute' ? 'absolute' : 'fixed',
+        zIndex: zIndex
+      }, isTopSticky ? {
+        top: topFollowDifference > 0 ? cssTop : cssTop + topFollowDifference
+      } : {}, isBottomSticky ? {
+        bottom: bottomFollowDifference > 0 ? cssBottom : cssBottom + bottomFollowDifference
+      } : {}, {
+        left: placeholderClientRect.left,
+        width: placeholderClientRect.width
+      }, userSetStickyCssStyle || {});
+    }
+
+    onTopChange == null ? void 0 : onTopChange(Math.max(0, contentClientRect.top - containerTop - topOffset));
+    setIsSticky(newStickyState);
+    setStickyStateStyle(stickyCssStyle);
+
+    if (newStickyState !== wasStickyRef.current) {
+      onStickyStateChange && onStickyStateChange({
+        isTopSticky: isTopSticky,
+        isBottomSticky: isBottomSticky,
+        isSticky: newStickyState,
+        wasSticky: wasStickyRef.current
+      });
+    }
+  }, [position, topOffset, bottomOffset, followOffset, zIndex, stickyStyle, onStickyStateChange, onTopChange]);
+  var recalculatePosition = (0, _react.useCallback)(function () {
+    if (framePendingRef.current) {
+      return;
+    }
+
+    (0, _mobileUtils.execRAF)(function () {
+      framePendingRef.current = false;
+
+      if (containerRef.current) {
+        var _containerRef$current = containerRef.current.getBoundingClientRect(),
+            _top = _containerRef$current.top,
+            bottom = _containerRef$current.bottom;
+
+        containerEventHandler({
+          followTop: _top,
+          followBottom: bottom
+        });
+      }
+    });
+    framePendingRef.current = true;
+  }, [containerEventHandler]);
+  (0, _react.useEffect)(function () {
+    var containerEle = (0, _mobileUtils.getActualContainer)(getContainer);
+    containerRef.current = containerEle || document.body;
+    var eventTarget = getScrollContainer ? (0, _mobileUtils.getActualContainer)(getScrollContainer) : window;
+    if (!eventTarget) return;
+    scrollContainerRef.current = eventTarget;
+
+    var attachEventListeners = function attachEventListeners(target) {
+      target.addEventListener('scroll', recalculatePosition);
+    };
+
+    var removeEventListeners = function removeEventListeners(target) {
+      target.removeEventListener('scroll', recalculatePosition);
+    };
+
+    attachEventListeners(eventTarget);
+    recalculatePosition();
+    return function () {
+      removeEventListeners(eventTarget);
+    };
+  }, [getContainer, getScrollContainer, recalculatePosition]);
+  (0, _react.useEffect)(function () {
+    if (placeholderRef.current) {
+      // 当元素吸顶时，默认有一个占位的元素占住该元素的位置，避免布局产生抖动
+      // @en When an element is sticky to the top, a placeholder element occupies the element's position by default to avoid jitter in the layout
+      placeholderRef.current.style.height = (isStickyRef.current ? contentCalculateHeightRef.current : 0) + "px";
+    }
+  }, [isSticky, wasSticky]);
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      dom: contentRef.current,
+      recalculatePosition: recalculatePosition
+    };
+  }, [recalculatePosition]);
+  var computedStyle = (0, _react.useMemo)(function () {
+    return (0, _extends2.default)({}, style || {}, stickyStateStyle);
+  }, [stickyStateStyle, style]);
+
+  function renderSticky(prefixCls) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _mobileUtils.cls)(prefixCls + "-sticky", className),
+      ref: contentRef,
+      style: computedStyle
+    }, children);
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_contextProvider.ContextLayout, null, function (_ref2) {
+    var prefixCls = _ref2.prefixCls;
+    return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+      ref: placeholderRef
+    }), portalWhenSticky && isSticky ? /*#__PURE__*/_react.default.createElement(_portal.default, {
+      getContainer: getPortalContainer
+    }, renderSticky(prefixCls)) : renderSticky(prefixCls));
+  });
+});
+var _default = Sticky;
+exports.default = _default;

package/cjs/sticky/style/css/index.d.ts

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

package/cjs/sticky/style/css/index.js

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

package/cjs/sticky/style/index.d.ts

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

package/cjs/sticky/style/index.js

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

package/cjs/sticky/style/index.less

@@ -0,0 +1,5 @@
+@import '../../../style/mixin.less';
+
+.@{prefix}-sticky {
+
+}

package/cjs/style.d.ts

@@ -0,0 +1,50 @@
+import '../style/public.less';
+import './action-sheet/style';
+import './cell/style';
+import './loading/style';
+import './badge/style';
+import './avatar/style';
+import './button/style';
+import './carousel/style';
+import './toast/style';
+import './switch/style';
+import './checkbox/style';
+import './circle-progress/style';
+import './collapse/style';
+import './tabs/style';
+import './context-provider/style';
+import './dialog/style';
+import './count-down/style';
+import './date-picker/style';
+import './dropdown/style';
+import './dropdown-menu/style';
+import './ellipsis/style';
+import './grid/style';
+import './image/style';
+import './show-monitor/style';
+import './image-preview/style';
+import './input/style';
+import './load-more/style';
+import './masking/style';
+import './nav-bar/style';
+import './notice-bar/style';
+import './notify/style';
+import './pagination/style';
+import './picker/style';
+import './picker-view/style';
+import './popover/style';
+import './popup/style';
+import './popup-swiper/style';
+import './portal/style';
+import './progress/style';
+import './pull-refresh/style';
+import './radio/style';
+import './rate/style';
+import './slider/style';
+import './steps/style';
+import './sticky/style';
+import './swipe-load/style';
+import './tab-bar/style';
+import './tag/style';
+import './textarea/style';
+import './transition/style';

package/cjs/style.js

@@ -0,0 +1,101 @@
+"use strict";
+
+require("../style/public.less");
+
+require("./action-sheet/style");
+
+require("./cell/style");
+
+require("./loading/style");
+
+require("./badge/style");
+
+require("./avatar/style");
+
+require("./button/style");
+
+require("./carousel/style");
+
+require("./toast/style");
+
+require("./switch/style");
+
+require("./checkbox/style");
+
+require("./circle-progress/style");
+
+require("./collapse/style");
+
+require("./tabs/style");
+
+require("./context-provider/style");
+
+require("./dialog/style");
+
+require("./count-down/style");
+
+require("./date-picker/style");
+
+require("./dropdown/style");
+
+require("./dropdown-menu/style");
+
+require("./ellipsis/style");
+
+require("./grid/style");
+
+require("./image/style");
+
+require("./show-monitor/style");
+
+require("./image-preview/style");
+
+require("./input/style");
+
+require("./load-more/style");
+
+require("./masking/style");
+
+require("./nav-bar/style");
+
+require("./notice-bar/style");
+
+require("./notify/style");
+
+require("./pagination/style");
+
+require("./picker/style");
+
+require("./picker-view/style");
+
+require("./popover/style");
+
+require("./popup/style");
+
+require("./popup-swiper/style");
+
+require("./portal/style");
+
+require("./progress/style");
+
+require("./pull-refresh/style");
+
+require("./radio/style");
+
+require("./rate/style");
+
+require("./slider/style");
+
+require("./steps/style");
+
+require("./sticky/style");
+
+require("./swipe-load/style");
+
+require("./tab-bar/style");
+
+require("./tag/style");
+
+require("./textarea/style");
+
+require("./transition/style");

package/cjs/swipe-load/demo/style/css/mobile.css

@@ -0,0 +1,43 @@
+#demo-swipe-load .list-container {
+  width: 100%;
+  background:  #e5e6eb ;
+}
+#demo-swipe-load .course-list {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: inline-flex;
+  -webkit-box-align: start;
+  -webkit-align-items: flex-start;
+          align-items: flex-start;
+  padding: 12px 0;
+}
+#demo-swipe-load .list-item,
+#demo-swipe-load .list-item-color {
+  height: 72px;
+  margin-right: 10px;
+  background:  #ffffff ;
+}
+#demo-swipe-load .list-item-color {
+  background:  #94bfff ;
+}
+#demo-swipe-load .mylabel-start,
+#demo-swipe-load .mylabel-end {
+  width: 100px;
+  height: 96px;
+  -webkit-transition: background 0.2s;
+  transition: background 0.2s;
+  background:  #ffffff ;
+}
+#demo-swipe-load .mylabel-start.end,
+#demo-swipe-load .mylabel-end.end {
+  background:  #e5e6eb ;
+}
+#demo-swipe-load .mylabel-single {
+  width: 100px;
+  height: 88px;
+  background:  #94bfff ;
+}
+#demo-swipe-load .single-element {
+  height: 88px;
+  background:  #94bfff ;
+}

package/cjs/swipe-load/demo/style/mobile.less

@@ -0,0 +1,41 @@
+@import '../../../../style/mixin.less';
+
+#demo-swipe-load {
+    .list-container {
+        width: 100%;
+        .use-var(background, line-color);
+    }
+    .course-list {
+        display: inline-flex;
+        align-items: flex-start;
+        padding: 12px 0;
+    }
+    .list-item,
+    .list-item-color {
+        height: 72px;
+        margin-right: 10px;
+        .use-var(background, background-color);
+    }
+    .list-item-color {
+        .use-var(background, primary-disabled-color);
+    }
+    .mylabel-start,
+    .mylabel-end {
+        width: 100px;
+        height: 96px;
+        transition: background 0.2s;
+        .use-var(background, background-color);
+        &.end {
+            .use-var(background, line-color);
+        }
+    }
+    .mylabel-single {
+        width: 100px;
+        height: 88px;
+        .use-var(background, primary-disabled-color);
+    }
+    .single-element {
+        height: 88px;
+        .use-var(background, primary-disabled-color);
+    }
+}

package/cjs/swipe-load/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { SwipeLoadProps, SwipeLoadRef } from './type';
+export * from './type';
+/**
+ * 向左滑动到达屏幕边缘后，超过一定距离时触发加载，常用于横划展示少量的元素，滑动到底后跳转至另外界面的场景
+ * @en After swiping to the left to reach the edge of the screen, the loading is triggered when the distance exceeds a certain distance. It is often used to display a small number of elements horizontally, and then jump to another interface after swiping to the end.
+ * @type 反馈
+ * @type_en FeedBack
+ * @name 左滑加载
+ * @name_en SwipeLoad
+ */
+declare const SwipeLoad: React.ForwardRefExoticComponent<SwipeLoadProps & React.RefAttributes<SwipeLoadRef>>;
+export default SwipeLoad;