@arco-design/mobile-react 2.19.0

package/umd/sticky/index.js

@@ -0,0 +1,221 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "@babel/runtime/helpers/extends", "react", "@arco-design/mobile-utils", "../context-provider", "../_helpers", "../portal"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("@babel/runtime/helpers/extends"), require("react"), require("@arco-design/mobile-utils"), require("../context-provider"), require("../_helpers"), require("../portal"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global._extends, global.react, global.mobileUtils, global.contextProvider, global._helpers, global.portal);
+    global.index = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _extends2, _react, _mobileUtils, _contextProvider, _helpers, _portal) {
+  "use strict";
+
+  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+  _exports.__esModule = true;
+  _exports.default = void 0;
+  _extends2 = _interopRequireDefault(_extends2);
+  _react = _interopRequireWildcard(_react);
+  _portal = _interopRequireDefault(_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/umd/sticky/style/css/index.d.ts

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

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

@@ -0,0 +1,15 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["../../../../style/css/public.css", "./index.css"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(require("../../../../style/css/public.css"), require("./index.css"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(global._public, global.index);
+    global.index = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_public, _index) {
+  "use strict";
+});

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

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

package/umd/sticky/style/index.js

@@ -0,0 +1,15 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["../../../style/public.less", "./index.less"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(require("../../../style/public.less"), require("./index.less"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(global._public, global.index);
+    global.index = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_public, _index) {
+  "use strict";
+});

package/umd/sticky/style/index.less

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

package/umd/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/umd/style.js

@@ -0,0 +1,15 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["../style/public.less", "./action-sheet/style", "./cell/style", "./loading/style", "./badge/style", "./avatar/style", "./button/style", "./carousel/style", "./toast/style", "./switch/style", "./checkbox/style", "./circle-progress/style", "./collapse/style", "./tabs/style", "./context-provider/style", "./dialog/style", "./count-down/style", "./date-picker/style", "./dropdown/style", "./dropdown-menu/style", "./ellipsis/style", "./grid/style", "./image/style", "./show-monitor/style", "./image-preview/style", "./input/style", "./load-more/style", "./masking/style", "./nav-bar/style", "./notice-bar/style", "./notify/style", "./pagination/style", "./picker/style", "./picker-view/style", "./popover/style", "./popup/style", "./popup-swiper/style", "./portal/style", "./progress/style", "./pull-refresh/style", "./radio/style", "./rate/style", "./slider/style", "./steps/style", "./sticky/style", "./swipe-load/style", "./tab-bar/style", "./tag/style", "./textarea/style", "./transition/style"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(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"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(global._public, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style);
+    global.style = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_public, _style, _style2, _style3, _style4, _style5, _style6, _style7, _style8, _style9, _style10, _style11, _style12, _style13, _style14, _style15, _style16, _style17, _style18, _style19, _style20, _style21, _style22, _style23, _style24, _style25, _style26, _style27, _style28, _style29, _style30, _style31, _style32, _style33, _style34, _style35, _style36, _style37, _style38, _style39, _style40, _style41, _style42, _style43, _style44, _style45, _style46, _style47, _style48, _style49) {
+  "use strict";
+});

package/umd/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/umd/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/umd/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;