@arco-design/mobile-react 2.19.0

package/cjs/popup/index.js

@@ -0,0 +1,112 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+var _exportNames = {
+  methodsGenerator: true
+};
+exports.default = void 0;
+exports.methodsGenerator = methodsGenerator;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _mobileUtils = require("@arco-design/mobile-utils");
+
+var _contextProvider = require("../context-provider");
+
+var _masking = _interopRequireDefault(require("../masking"));
+
+var _methods = require("./methods");
+
+Object.keys(_methods).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _methods[key]) return;
+  exports[key] = _methods[key];
+});
+var _excluded = ["children", "maskClass", "contentClass", "contentTransitionType", "className", "direction", "needBottomOffset", "translateZ", "maskTransitionTimeout", "contentTransitionTimeout"];
+
+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; }
+
+var Popup = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var children = props.children,
+      maskClass = props.maskClass,
+      contentClass = props.contentClass,
+      contentTransitionType = props.contentTransitionType,
+      className = props.className,
+      _props$direction = props.direction,
+      direction = _props$direction === void 0 ? 'bottom' : _props$direction,
+      _props$needBottomOffs = props.needBottomOffset,
+      needBottomOffset = _props$needBottomOffs === void 0 ? false : _props$needBottomOffs,
+      _props$translateZ = props.translateZ,
+      translateZ = _props$translateZ === void 0 ? false : _props$translateZ,
+      _props$maskTransition = props.maskTransitionTimeout,
+      maskTransitionTimeout = _props$maskTransition === void 0 ? {
+    enter: 450,
+    exit: 240
+  } : _props$maskTransition,
+      _props$contentTransit = props.contentTransitionTimeout,
+      contentTransitionTimeout = _props$contentTransit === void 0 ? {
+    enter: 450,
+    exit: 240
+  } : _props$contentTransit,
+      restProps = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  var maskingRef = (0, _react.useRef)(null);
+  (0, _react.useImperativeHandle)(ref, function () {
+    return maskingRef.current;
+  });
+
+  function renderPopup(_ref) {
+    var prefixCls = _ref.prefixCls;
+    var prefix = prefixCls + "-popup";
+    return /*#__PURE__*/_react.default.createElement(_masking.default, (0, _extends2.default)({
+      className: (0, _mobileUtils.cls)(prefix, className),
+      ref: maskingRef,
+      maskClass: (0, _mobileUtils.cls)(prefix + "-mask", {
+        translateZ: translateZ
+      }, maskClass),
+      contentTransitionType: contentTransitionType || "slide-from-" + direction,
+      contentClass: (0, _mobileUtils.cls)(prefix + "-content", direction, {
+        'need-bottom-offset': needBottomOffset
+      }, {
+        translateZ: translateZ
+      }, contentClass),
+      maskTransitionTimeout: maskTransitionTimeout,
+      contentTransitionTimeout: contentTransitionTimeout
+    }, restProps), children);
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_contextProvider.ContextLayout, null, renderPopup);
+});
+
+function methodsGenerator(Comp) {
+  return {
+    /**
+     * 打开弹出层
+     * @desc {en} Open the popup
+     * @param {PopupProps} config Configuration
+     * @returns {{ close: () => void; update: (newConfig: PopupProps) => void; }}
+     */
+    open: (0, _methods.open)(Comp)
+  };
+}
+/**
+ * 基于模态弹窗的的全屏菜单，支持各个方向。默认做了防滚动穿透处理，如果弹层内容中需要滚动，则需将滚动容器传入`getScrollContainer`属性以在未滚动到顶部或底部时释放滚动。
+ * @en A full-screen menu based on a modal popup, supporting all directions. By default, anti-scroll penetration processing is performed. If scrolling is required in the content of the popup layer, you need to pass the scroll container to the `getScrollContainer` property to release scrolling when it is not scrolled to the top or bottom.
+ * @type 反馈
+ * @type_en Feedback
+ * @name 弹出层
+ * @name_en Popup
+ */
+
+
+var _default = (0, _mobileUtils.componentWrapper)(Popup, methodsGenerator(Popup));
+
+exports.default = _default;

package/cjs/popup/methods.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { OpenBaseProps } from '../masking/methods';
+export declare function open<P extends OpenBaseProps>(Component: React.FunctionComponent<P>): (config: Pick<P, Exclude<keyof P, "visible" | "close">> & {
+    key?: string | undefined;
+}) => {
+    close: () => void;
+    update: (newConfig: Pick<P, Exclude<keyof P, "visible" | "close">> & {
+        key?: string | undefined;
+    }) => void;
+};

package/cjs/popup/methods.js

@@ -0,0 +1,10 @@
+"use strict";
+
+exports.__esModule = true;
+exports.open = open;
+
+var _methods = require("../masking/methods");
+
+function open(Component) {
+  return (0, _methods.open)(Component, 'ARCO_POPUP');
+}

package/cjs/popup/style/css/index.css

@@ -0,0 +1,109 @@
+.arco-popup .arco-slide-from-left-enter,
+.arco-popup .arco-slide-from-left-exit-active,
+.arco-popup .arco-slide-from-left-exit-done {
+  -webkit-transform: translate(-100%, 0);
+          transform: translate(-100%, 0);
+}
+.arco-popup .arco-slide-from-left-enter.translateZ,
+.arco-popup .arco-slide-from-left-exit-active.translateZ,
+.arco-popup .arco-slide-from-left-exit-done.translateZ {
+  -webkit-transform: translate(-100%, 0) translateZ(2PX);
+          transform: translate(-100%, 0) translateZ(2PX);
+}
+.arco-popup .arco-slide-from-right-enter,
+.arco-popup .arco-slide-from-right-exit-active,
+.arco-popup .arco-slide-from-right-exit-done {
+  -webkit-transform: translate(100%, 0);
+          transform: translate(100%, 0);
+}
+.arco-popup .arco-slide-from-right-enter.translateZ,
+.arco-popup .arco-slide-from-right-exit-active.translateZ,
+.arco-popup .arco-slide-from-right-exit-done.translateZ {
+  -webkit-transform: translate(100%, 0) translateZ(2PX);
+          transform: translate(100%, 0) translateZ(2PX);
+}
+.arco-popup .arco-slide-from-top-enter,
+.arco-popup .arco-slide-from-top-exit-active,
+.arco-popup .arco-slide-from-top-exit-done {
+  -webkit-transform: translate(0, -100%);
+          transform: translate(0, -100%);
+}
+.arco-popup .arco-slide-from-top-enter.translateZ,
+.arco-popup .arco-slide-from-top-exit-active.translateZ,
+.arco-popup .arco-slide-from-top-exit-done.translateZ {
+  -webkit-transform: translate(0, -100%) translateZ(2PX);
+          transform: translate(0, -100%) translateZ(2PX);
+}
+.arco-popup .arco-slide-from-bottom-enter,
+.arco-popup .arco-slide-from-bottom-exit-active,
+.arco-popup .arco-slide-from-bottom-exit-done {
+  -webkit-transform: translate(0, 100%);
+          transform: translate(0, 100%);
+}
+.arco-popup .arco-slide-from-bottom-enter.translateZ,
+.arco-popup .arco-slide-from-bottom-exit-active.translateZ,
+.arco-popup .arco-slide-from-bottom-exit-done.translateZ {
+  -webkit-transform: translate(0, 100%) translateZ(2PX);
+          transform: translate(0, 100%) translateZ(2PX);
+}
+.arco-popup-content[class*="-enter-active"],
+.arco-popup-mask[class*="-enter-active"] {
+  -webkit-transform: translate(0, 0);
+          transform: translate(0, 0);
+  -webkit-transition:  all 450ms cubic-bezier(0.34, 0.69, 0.1, 1) ;
+  transition:  all 450ms cubic-bezier(0.34, 0.69, 0.1, 1) ;
+}
+.arco-popup-content[class*="-enter-active"].translateZ,
+.arco-popup-mask[class*="-enter-active"].translateZ {
+  -webkit-transform: translateZ(2PX);
+          transform: translateZ(2PX);
+}
+.arco-popup [class*="-exit-active"] {
+  -webkit-transition:  all 240ms cubic-bezier(0.34, 0.69, 0.1, 1) ;
+  transition:  all 240ms cubic-bezier(0.34, 0.69, 0.1, 1) ;
+}
+.arco-popup-content {
+  background:  #ffffff ;
+  position: fixed;
+  z-index: 1001;
+}
+.arco-popup-content.need-bottom-offset {
+  padding-bottom: env(safe-area-inset-bottom);
+}
+.arco-popup-content.left {
+  left: 0;
+  top: 0;
+  height: 100%;
+}
+.arco-popup-content.top {
+  left: 0;
+  top: 0;
+  width: 100%;
+}
+.arco-popup-content.right {
+  right: 0;
+  top: 0;
+  height: 100%;
+}
+.arco-popup-content.bottom {
+  left: 0;
+  bottom: 0;
+  width: 100%;
+}
+.arco-popup-content.translateZ {
+  -webkit-transform: translateZ(2PX);
+          transform: translateZ(2PX);
+}
+.arco-popup-mask {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  z-index: 1000;
+  background:  rgba(0, 0, 0, 0.6) ;
+}
+.arco-popup-mask.translateZ {
+  -webkit-transform: translateZ(1PX);
+          transform: translateZ(1PX);
+}

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

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

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

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

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

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

package/cjs/popup/style/index.js

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

package/cjs/popup/style/index.less

@@ -0,0 +1,82 @@
+@import '../../../style/mixin.less';
+
+.set-popup-transform(@transform) {
+    &-enter, &-exit-active, &-exit-done {
+        transform: @transform;
+        &.translateZ {
+            transform: @transform translateZ(2PX);
+        }
+    }
+}
+
+.@{prefix}-popup {
+    .@{prefix}-slide-from {
+        &-left {
+            .set-popup-transform(translate(-100%, 0));
+        }
+        &-right {
+            .set-popup-transform(translate(100%, 0));
+        }
+        &-top {
+            .set-popup-transform(translate(0, -100%));
+        }
+        &-bottom {
+            .set-popup-transform(translate(0, 100%));
+        }
+    }
+    &-content, &-mask {
+        &[class*="-enter-active"] {
+            &.translateZ {
+                transform: translateZ(2PX);
+            }
+            transform: translate(0, 0);
+            .use-var(transition, popup-enter-transition);
+        }
+    }
+    [class*="-exit-active"] {
+        .use-var(transition, popup-exit-transition);
+    }
+    &-content {
+        &.need-bottom-offset {
+            padding-bottom: env(safe-area-inset-bottom);
+        }
+        &.left {
+            left: 0;
+            top: 0;
+            height: 100%;
+        }
+        &.top {
+            left: 0;
+            top: 0;
+            width: 100%;
+        }
+        &.right {
+            right: 0;
+            top: 0;
+            height: 100%;
+        }
+        &.bottom {
+            left: 0;
+            bottom: 0;
+            width: 100%;
+        }
+        &.translateZ {
+            transform: translateZ(2PX);
+        }
+        .use-var(background, popup-content-background);
+        position: fixed;
+        z-index: @full-screen-z-index + 1;
+    }
+    &-mask {
+        &.translateZ {
+            transform: translateZ(1PX);
+        }
+        position: fixed;
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+        z-index: @full-screen-z-index;
+        .use-var(background, popup-mask-background);
+    }
+}

package/cjs/popup-swiper/demo/style/css/mobile.css

@@ -0,0 +1,23 @@
+#demo-popup-swiper {
+  padding-bottom: 0.54rem;
+}
+#demo-popup-swiper .arcodesign-mobile-demo-content {
+  padding: 0;
+  background: transparent;
+  margin: 0 0.24rem;
+  border-radius: 0.16rem;
+  overflow: hidden;
+}
+.popup-demo-title {
+  line-height: 0.88rem;
+  font-size: 0.36rem;
+  color:  #1d2129 ;
+  font-weight: bold;
+  padding: 0 0.32rem;
+}
+.popup-demo-content {
+  color:  #1d2129 ;
+  font-size: 0.32rem;
+  color:  #86909c ;
+  padding: 0.4rem 0.32rem;
+}

package/cjs/popup-swiper/demo/style/mobile.less

@@ -0,0 +1,28 @@
+@import '../../../../style/mixin.less';
+
+#demo-popup-swiper {
+    .rem(padding-bottom, 27);
+    .arcodesign-mobile-demo-content {
+        padding: 0;
+        background: transparent;
+        .rem(margin, 0, 12);
+        .rem(border-radius, 8);
+        overflow: hidden;
+    }
+}
+
+.popup-demo {
+    &-title {
+        .rem(line-height, 44);
+        .rem(font-size, 18);
+        .use-var(color, font-color);
+        font-weight: bold;
+        .rem(padding, 0, 16);
+    }
+    &-content {
+        .use-var(color, font-color);
+        .rem(font-size, 16);
+        .use-var(color, sub-info-font-color);
+        .rem(padding, 20, 16);
+    }
+}

package/cjs/popup-swiper/index.d.ts

@@ -0,0 +1,93 @@
+import React from 'react';
+import { OpenBaseProps } from '../masking';
+import { DirectionType, PopupProps, PopupRef } from '../popup';
+export interface PopupSwiperProps extends PopupProps {
+    /**
+     * 滑动超过内容的百分之多少时关闭弹窗，范围为[0, 1]，如果该属性和`distanceToClose`属性均设置，则实际计算结果更大的生效
+     * @en Close the popup when sliding more than the percentage of the content, the range is [0, 1]. If both this property and the `distanceToClose` property are set, the larger the actual calculation result takes effect
+     * @default 0.3
+     */
+    percentToClose?: number;
+    /**
+     * 滑动超过多少px时关闭弹窗，如果该属性和`percentToClose`属性均设置，则实际计算结果更大的生效
+     * @en Close the popup when sliding more than px, if this property and the `percentToClose` property are both set, the larger the actual calculation result takes effect.
+     * @default 10
+     */
+    distanceToClose?: number;
+    /**
+     * 手指从按下到抬起之间的滑动速度超过多少时关闭弹窗(单位为px/s)，与滑动关闭距离阈值同时设置时，满足其中一个即生效
+     * @en Close the popup when the finger slides between pressing and lifting (unit: px/s). When it is set at the same time as the sliding closing distance threshold, it will take effect if one of them is satisfied.
+     * @default 200
+     */
+    speedToClose?: number;
+    /**
+     * 自定义可手势滑动退出的方向，可指定多个方向
+     * @en Custom direction of the gesture swipe exit, you can specify multiple directions
+     * @default direction 属性指定的方向性
+     * @default_en The value of direction property
+     */
+    allowSwipeDirections: DirectionType[];
+    /**
+     * 固定弹窗退出方向，默认跟随手势滑动方向
+     * @en Fixed the exit direction of the pop-up window, and the default sliding direction follows the gesture
+     */
+    exitDirection?: DirectionType;
+    /**
+     * 内容面板 touchstart 事件，返回true时表示阻止本组件内部处理事件
+     * @en The touchstart callback of content panel. When it returns true, it means that the event is prevented from being processed inside the component
+     */
+    onTouchStart?: (e: TouchEvent) => void | boolean;
+    /**
+     * 内容面板 touchmove 事件，返回true时表示阻止本组件内部处理事件
+     * @en The touchmove callback of content panel. When it returns true, it means that the event is prevented from being processed inside the component
+     */
+    onTouchMove?: (e: TouchEvent, prevented: boolean, direction: 'x' | 'y') => void | boolean;
+    /**
+     * 内容面板 touchend / touchcancel 事件，返回true时表示阻止本组件内部处理事件
+     * @en The touchend / touchcancel callback of content panel. When it returns true, it means that the event is prevented from being processed inside the component
+     */
+    onTouchEnd?: (e: TouchEvent) => void | boolean;
+}
+export interface PopupSwiperRef extends PopupRef {
+}
+export declare function methodsGenerator<P extends OpenBaseProps>(Comp: React.FunctionComponent<P>): {
+    /**
+     * 打开弹出层
+     * @desc {en} Open the PopupSwiper
+     * @param {string | PopupSwiperProps} config Configuration
+     * @returns {{ close: () => void; update: (newConfig: PopupSwiperProps) => void; }}
+     */
+    open: (config: Pick<P, Exclude<keyof P, "visible" | "close">> & {
+        key?: string | undefined;
+    }) => {
+        close: () => void;
+        update: (newConfig: Pick<P, Exclude<keyof P, "visible" | "close">> & {
+            key?: string | undefined;
+        }) => void;
+    };
+};
+declare const _default: React.ForwardRefExoticComponent<PopupSwiperProps & React.RefAttributes<PopupSwiperRef>> & {
+    /**
+     * 打开弹出层
+     * @desc {en} Open the PopupSwiper
+     * @param {string | PopupSwiperProps} config Configuration
+     * @returns {{ close: () => void; update: (newConfig: PopupSwiperProps) => void; }}
+     */
+    open: (config: Pick<PopupSwiperProps & React.RefAttributes<PopupSwiperRef>, "direction" | "ref" | "children" | "key" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "className" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onTouchMove" | "onPreventTouchMove" | "getScrollContainer" | "needBottomOffset" | "translateZ" | "onTouchEnd" | "onTouchStart" | "percentToClose" | "distanceToClose" | "speedToClose" | "allowSwipeDirections" | "exitDirection"> & {
+        key?: string | undefined;
+    }) => {
+        close: () => void;
+        update: (newConfig: Pick<PopupSwiperProps & React.RefAttributes<PopupSwiperRef>, "direction" | "ref" | "children" | "key" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "className" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onTouchMove" | "onPreventTouchMove" | "getScrollContainer" | "needBottomOffset" | "translateZ" | "onTouchEnd" | "onTouchStart" | "percentToClose" | "distanceToClose" | "speedToClose" | "allowSwipeDirections" | "exitDirection"> & {
+            key?: string | undefined;
+        }) => void;
+    };
+};
+/**
+ * 基于弹出层(Popup)封装的具有手势关闭功能的弹出层组件，拥有 Popup 组件的其他能力。
+ * @en The popup with gesture closing function based on the popup encapsulation, has other capabilities of the Popup component.
+ * @type 反馈
+ * @type_en Feedback
+ * @name 可滑动弹出层
+ * @name_en PopupSwiper
+ */
+export default _default;