@arco-design/mobile-react 2.19.0

package/umd/picker-view/type.js

@@ -0,0 +1,17 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports);
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports);
+    global.type = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports) {
+  "use strict";
+
+  _exports.__esModule = true;
+});

package/umd/popover/demo/style/css/mobile.css

@@ -0,0 +1,135 @@
+#demo-popover {
+  padding-bottom: 200px;
+}
+#demo-popover .base-demo-wrapper {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-flex-wrap: wrap;
+          flex-wrap: wrap;
+  margin-top: -24px;
+}
+#demo-popover .base-demo-wrapper .popover-item {
+  -webkit-box-flex: 0;
+  -webkit-flex: 0 0  50%;
+          flex: 0 0  50%;
+  text-align: center;
+  margin-top: 24px;
+}
+#demo-popover .popover-base-demo-wrapper {
+  height: 100px;
+  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;
+}
+#demo-popover .popover-base-demo-wrapper .base-item:first-child {
+  margin-right: 66px;
+}
+#demo-popover .popover-base-demo-wrapper .arco-button {
+  width: 124px;
+}
+#demo-popover .direction-demo-wrapper {
+  height: 190px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-flex-wrap: wrap;
+          flex-wrap: wrap;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+          justify-content: center;
+}
+#demo-popover .direction-demo-wrapper .direction-item {
+  margin: 14px 0;
+}
+#demo-popover .direction-demo-wrapper .direction-item:nth-child(2n+1) {
+  margin-right: 59px;
+}
+#demo-popover .direction-demo-wrapper .arco-button {
+  width: 124px;
+}
+#demo-popover .direction-demo-wrapper .arco-button.size-large {
+  padding: 0;
+}
+#demo-popover .white-theme-mask-demo-wrapper {
+  height: 100px;
+  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;
+}
+#demo-popover .menu-demo-wrapper {
+  height: 100px;
+  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;
+}
+#demo-popover .menu-demo-wrapper .arco-button {
+  width: 124px;
+}
+#demo-popover .suffix-demo-wrapper {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-flex-wrap: wrap;
+          flex-wrap: wrap;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+          justify-content: space-between;
+}
+#demo-popover .suffix-demo-wrapper .arco-button {
+  margin: 14px 0;
+}
+#demo-popover .suffix-demo-wrapper .custom-suffix-btn {
+  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;
+  width: 64px;
+  height: 24px;
+  background: #fff;
+  border-radius: 40px;
+  color: #1d2129;
+  font-size: 12px;
+}
+#demo-popover .custom-demo-wrapper {
+  height: 100px;
+  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;
+}
+#demo-popover .custom-popover .arco-popover-inner .popover-bg {
+  background: -webkit-linear-gradient(171.3deg, #0578FF 5.08%, #15D5FF 108.09%);
+  background: linear-gradient(278.7deg, #0578FF 5.08%, #15D5FF 108.09%);
+}
+#demo-popover .custom-popover .arco-popover-inner .popover-arrow {
+  background-color: #2db1f8;
+}

package/umd/popover/demo/style/mobile.less

@@ -0,0 +1,100 @@
+
+@import '../../../../style/mixin.less';
+
+.center-box(@height: 100px) {
+    height: @height;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+#demo-popover {
+    padding-bottom: 200px;
+    .base-demo-wrapper {
+        display: flex;
+        flex-wrap: wrap;
+        margin-top: -24px;
+        .popover-item {
+            flex: 0 0  50%;
+            text-align: center;
+            margin-top: 24px;
+        }
+    }
+
+    .popover-base-demo-wrapper {
+        .center-box();
+        .base-item {
+            &:first-child {
+                margin-right: 66px;
+            }
+        }
+        .@{prefix}-button {
+            width: 124px;
+        }
+    }
+
+    .direction-demo-wrapper {
+        height: 190px;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        .direction-item {
+            margin: 14px 0;
+            &:nth-child(2n+1) {
+                margin-right: 59px;
+            }
+        }
+
+        .@{prefix}-button {
+            width: 124px;
+            &.size-large {
+                padding: 0;
+            }
+        }
+    }
+
+    .white-theme-mask-demo-wrapper {
+        .center-box();
+    }
+
+    .menu-demo-wrapper {
+        .center-box();
+        .@{prefix}-button {
+            width: 124px;
+        }
+    }
+
+    .suffix-demo-wrapper {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        .@{prefix}-button {
+            margin: 14px 0;
+        }
+
+        .custom-suffix-btn {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 64px;
+            height: 24px;
+            background: #fff;
+            border-radius: 40px;
+            color: #1d2129;
+            font-size: 12px;
+        }
+    }
+
+    .custom-demo-wrapper {
+        .center-box();
+    }
+
+    .custom-popover {
+        .@{prefix}-popover-inner .popover-bg {
+            background: linear-gradient(278.7deg, #0578FF 5.08%, #15D5FF 108.09%);
+        }
+        .@{prefix}-popover-inner .popover-arrow {
+            background-color: #2db1f8;
+        }
+    }
+}

package/umd/popover/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export * from './usePosition';
+export * from './useEvent';

package/umd/popover/hooks/index.js

@@ -0,0 +1,27 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "./usePosition", "./useEvent"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("./usePosition"), require("./useEvent"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.usePosition, global.useEvent);
+    global.index = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _usePosition, _useEvent) {
+  "use strict";
+
+  _exports.__esModule = true;
+  Object.keys(_usePosition).forEach(function (key) {
+    if (key === "default" || key === "__esModule") return;
+    if (key in _exports && _exports[key] === _usePosition[key]) return;
+    _exports[key] = _usePosition[key];
+  });
+  Object.keys(_useEvent).forEach(function (key) {
+    if (key === "default" || key === "__esModule") return;
+    if (key in _exports && _exports[key] === _useEvent[key]) return;
+    _exports[key] = _useEvent[key];
+  });
+});

package/umd/popover/hooks/useEvent.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { PopoverProps, PopoverInnerRef } from '../type';
+export declare const useEvent: (props: PopoverProps, wrapperRef: React.MutableRefObject<HTMLDivElement | null>, popoverInnerRef: React.MutableRefObject<PopoverInnerRef | null>, visibleRef: React.MutableRefObject<boolean>, onVisibleChange: (visible: boolean) => void, adjustVerticalDirection: () => void) => {
+    popoverDisappear: () => void;
+    mayRemoveEventListenerOnBody: () => void;
+    startCloseTimer: () => void;
+    mayAddEventOnBody: () => void;
+};

package/umd/popover/hooks/useEvent.js

@@ -0,0 +1,195 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "react", "@arco-design/mobile-utils", "lodash.throttle", "../../_helpers", "./usePosition"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("react"), require("@arco-design/mobile-utils"), require("lodash.throttle"), require("../../_helpers"), require("./usePosition"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.react, global.mobileUtils, global.lodash, global._helpers, global.usePosition);
+    global.useEvent = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _react, _mobileUtils, _lodash, _helpers, _usePosition) {
+  "use strict";
+
+  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+  _exports.__esModule = true;
+  _exports.useEvent = void 0;
+  _lodash = _interopRequireDefault(_lodash);
+
+  /**
+   * 阻止最近一次点击事件计时器
+   * @en Block last click event timer
+   */
+  var preventRecentClickTimer = 0;
+
+  var useEvent = function useEvent(props, wrapperRef, popoverInnerRef, visibleRef, onVisibleChange, adjustVerticalDirection) {
+    var _props$clickOtherToCl = props.clickOtherToClose,
+        clickOtherToClose = _props$clickOtherToCl === void 0 ? true : _props$clickOtherToCl,
+        _props$touchOtherToCl = props.touchOtherToClose,
+        touchOtherToClose = _props$touchOtherToCl === void 0 ? props.touchToClose === void 0 ? false : props.touchToClose : _props$touchOtherToCl,
+        _props$duration = props.duration,
+        duration = _props$duration === void 0 ? 0 : _props$duration,
+        _props$useAutoDirecti = props.useAutoDirection,
+        useAutoDirection = _props$useAutoDirecti === void 0 ? true : _props$useAutoDirecti,
+        _props$verticalScroll = props.verticalScrollThrottle,
+        verticalScrollThrottle = _props$verticalScroll === void 0 ? 100 : _props$verticalScroll,
+        _props$preventBodyCli = props.preventBodyClick,
+        preventBodyClick = _props$preventBodyCli === void 0 ? false : _props$preventBodyCli,
+        _props$getVerticalScr = props.getVerticalScrollContainer,
+        getVerticalScrollContainer = _props$getVerticalScr === void 0 ? function () {
+      return document;
+    } : _props$getVerticalScr;
+    /**
+     * 浮窗消失计时器
+     * @en Popup disappearing timer
+     */
+
+    var closeTimer = (0, _react.useRef)(0);
+    /** 垂直方向自适应 */
+
+    var autoVerticalDirection = (0, _helpers.getDefaultValue)((0, _mobileUtils.isObject)(useAutoDirection) ? useAutoDirection.vertical : useAutoDirection, _usePosition.defaultAutoDirection);
+
+    var popoverDisappear = function popoverDisappear() {
+      onVisibleChange(false);
+      window.clearTimeout(closeTimer.current);
+      closeTimer.current = 0;
+    };
+
+    var throttleHandleVerticalScroll = (0, _react.useMemo)(function () {
+      return (0, _lodash.default)(adjustVerticalDirection, verticalScrollThrottle);
+    }, [adjustVerticalDirection, verticalScrollThrottle]);
+    (0, _react.useEffect)(function () {
+      var verticalScrollEl = getVerticalScrollContainer();
+
+      if (visibleRef.current && verticalScrollEl && autoVerticalDirection) {
+        verticalScrollEl.addEventListener('scroll', throttleHandleVerticalScroll);
+      }
+
+      return function () {
+        if (verticalScrollEl) {
+          verticalScrollEl.removeEventListener('scroll', throttleHandleVerticalScroll);
+        }
+      };
+    }, [throttleHandleVerticalScroll, getVerticalScrollContainer, autoVerticalDirection, visibleRef]);
+    var mayRemoveEventListenerOnBody = (0, _react.useCallback)(function () {
+      document.body.removeEventListener('click', handleClickBody);
+      document.body.removeEventListener('touchstart', handleTouchBody);
+      var el = getVerticalScrollContainer();
+
+      if (el) {
+        el.removeEventListener('scroll', throttleHandleVerticalScroll);
+        el.removeEventListener('scroll', handleScrollBody);
+      }
+    }, [throttleHandleVerticalScroll]);
+    var handleClickBody = (0, _react.useCallback)(function (e) {
+      var _popoverInnerRef$curr;
+
+      // 仅处理子元素和气泡元素外的点击事件
+      // @en Only handle click events outside of children elements and bubble elements
+      if (!(0, _mobileUtils.isContains)(wrapperRef.current, e.target) && !(0, _mobileUtils.isContains)(((_popoverInnerRef$curr = popoverInnerRef.current) == null ? void 0 : _popoverInnerRef$curr.dom) || null, e.target)) {
+        // TODO: 这里仅阻止了react事件，react 18 将不再在document上挂事件，这里的stop会失效
+        if (preventBodyClick) {
+          e.stopPropagation();
+          e.preventDefault();
+        }
+
+        popoverDisappear();
+      }
+    }, [preventBodyClick]);
+    /**
+     * UE要求气泡出现后，点击页面任意元素只隐藏气泡，不响应点击事件
+     * @en UE requires that after the bubble appears, clicking any element on the page only hides the bubble and does not respond to the click event
+     * 由于touchstart不能取消点击事件
+     * @en It can't cancel click event due to touchstart
+     * 监听body的最近一次click事件进行取消
+     * @en Listen to the body's latest click event to cancel
+     * 如果500ms内没有点击事件，用户可能是通过滑动页面触发的touchstart，此时移除click监听
+     * @en If there is no click event within 500ms, the user may have triggered the touchstart by sliding the page, and the click listener will be removed at this time.
+     */
+
+    var preventRecentClick = function preventRecentClick() {
+      clearTimeout(preventRecentClickTimer);
+
+      var handle = function handle(e) {
+        e.stopPropagation();
+        e.preventDefault();
+        document.body.removeEventListener('click', handle);
+        clearTimeout(preventRecentClickTimer);
+      };
+
+      document.body.addEventListener('click', handle);
+      preventRecentClickTimer = window.setTimeout(function () {
+        document.body.removeEventListener('click', handle);
+      }, 500);
+    };
+
+    var handleTouchBody = (0, _react.useCallback)(function (e) {
+      var _e$targetTouches$, _popoverInnerRef$curr2, _e$targetTouches$2, _e$targetTouches$3;
+
+      if (!((_e$targetTouches$ = e.targetTouches[0]) != null && _e$targetTouches$.target) || !wrapperRef.current || !((_popoverInnerRef$curr2 = popoverInnerRef.current) != null && _popoverInnerRef$curr2.dom) || !visibleRef.current) {
+        return;
+      } // 判断元素是否非子元素和气泡元素，内部的事件交给组件内部自行处理
+      // @en Determine whether the element is not a child element and a bubble element, and the internal events are handed over to the component to handle it by itself
+
+
+      if (!(0, _mobileUtils.isContains)(wrapperRef.current, (_e$targetTouches$2 = e.targetTouches[0]) == null ? void 0 : _e$targetTouches$2.target) && !(0, _mobileUtils.isContains)(popoverInnerRef.current.dom, (_e$targetTouches$3 = e.targetTouches[0]) == null ? void 0 : _e$targetTouches$3.target)) {
+        preventBodyClick && preventRecentClick();
+        popoverDisappear();
+      }
+    }, [preventBodyClick]);
+    var handleScrollBody = (0, _react.useCallback)(function () {
+      if (visibleRef.current && touchOtherToClose) {
+        popoverDisappear();
+      }
+    }, [touchOtherToClose]);
+    (0, _react.useEffect)(function () {
+      var el = getVerticalScrollContainer();
+
+      if (el && touchOtherToClose && visibleRef.current) {
+        el.addEventListener('scroll', handleScrollBody);
+      }
+
+      return function () {
+        el && el.removeEventListener('scroll', handleScrollBody);
+      };
+    }, [handleScrollBody, touchOtherToClose]);
+
+    var mayAddEventOnBody = function mayAddEventOnBody() {
+      if (touchOtherToClose) {
+        document.body.addEventListener('touchstart', handleTouchBody); // FIXME: 解决按住气泡元素后上下滚动页面，气泡未消失的问题
+        // @en FIXME: solve the problem that the bubble does not disappear after scrolling the page up and down after pressing the bubble element
+
+        var el = getVerticalScrollContainer();
+        el && el.addEventListener('scroll', handleScrollBody);
+      } else if (clickOtherToClose) {
+        document.body.addEventListener('click', handleClickBody);
+      }
+    };
+    /**
+     * 气泡自动关闭的场景下，计时关闭气泡
+     * @en In the scene where the bubbles are automatically closed, time to close the bubbles
+     */
+
+
+    var startCloseTimer = function startCloseTimer() {
+      if (duration !== 0) {
+        closeTimer.current = window.setTimeout(function () {
+          onVisibleChange(false);
+          mayRemoveEventListenerOnBody();
+        }, duration);
+      }
+    };
+
+    return {
+      popoverDisappear: popoverDisappear,
+      mayRemoveEventListenerOnBody: mayRemoveEventListenerOnBody,
+      startCloseTimer: startCloseTimer,
+      mayAddEventOnBody: mayAddEventOnBody
+    };
+  };
+
+  _exports.useEvent = useEvent;
+});

package/umd/popover/hooks/usePosition.d.ts

@@ -0,0 +1,18 @@
+import { MutableRefObject } from 'react';
+import { PopoverProps, PopoverPosition, PopoverTransformOrigin, PopoverInnerRef, Direction } from '../type';
+/**
+ * 自适应默认值
+ * @en Default autoDirection
+ */
+export declare const defaultAutoDirection = true;
+export declare const usePosition: (props: PopoverProps, popoverRef: MutableRefObject<PopoverInnerRef | null>, childRef: MutableRefObject<HTMLDivElement | null>, wrapperRef: MutableRefObject<HTMLDivElement | null>) => {
+    direction: Direction;
+    position: PopoverPosition;
+    isCalcPosition: boolean;
+    arrowWidth: number;
+    transformOrigin: PopoverTransformOrigin;
+    computedChildAndPopoverOffset: () => void;
+    resetPosition: () => void;
+    onAdjustDirection: (vertical: 'top' | 'bottom') => void;
+    adjustVerticalDirection: () => void;
+};