@arco-design/mobile-react 2.19.0

package/cjs/masking/index.d.ts

@@ -0,0 +1,225 @@
+import React, { ReactNode, CSSProperties } from 'react';
+import { TransitionProps } from '../transition';
+import { OpenBaseProps } from './methods';
+export * from './methods';
+export interface MaskingCommonProps {
+    /**
+     * 自定义类名
+     * @en Custom classname
+     */
+    className?: string;
+    /**
+     * 自定义蒙层类名
+     * @en Custom mask classname
+     */
+    maskClass?: string;
+    /**
+     * 自定义蒙层样式
+     * @en Custom mask stylesheet
+     */
+    maskStyle?: CSSProperties;
+    /**
+     * 自定义内容类名
+     * @en Custom content classname
+     */
+    contentClass?: string;
+    /**
+     * 自定义内容样式
+     * @en Custom content stylesheet
+     */
+    contentStyle?: CSSProperties;
+    /**
+     * 是否展示菜单（受控）
+     * @en Whether to display the menu (controlled)
+     */
+    visible: boolean;
+    /**
+     * 关闭菜单方法
+     * @en Close menu method
+     */
+    close: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    /**
+     * 蒙层过渡动画类名
+     * @en Mask transition animation classname
+     * @default "fade"
+     */
+    maskTransitionType?: string;
+    /**
+     * 内容过渡动画类名
+     * @en Content transition animation classname
+     * @default "fade"
+     */
+    contentTransitionType?: string;
+    /**
+     * 菜单内部内容
+     * @en Contents of menu
+     */
+    children?: ReactNode;
+    /**
+     * 蒙层动画时长
+     * @en Mask animation duration
+     * @default 300
+     */
+    maskTransitionTimeout?: TransitionProps['timeout'];
+    /**
+     * 内容动画时长
+     * @en Content animation duration
+     * @default 300
+     */
+    contentTransitionTimeout?: TransitionProps['timeout'];
+    /**
+     * 点击蒙层是否关闭菜单
+     * @en Whether to click the mask to close the menu
+     * @default true
+     */
+    maskClosable?: boolean;
+    /**
+     * 执行进场动画时点击蒙层是否可关闭菜单
+     * @en Whether the menu can be closed by clicking on the mask when performing the entry animation
+     * @default false
+     */
+    animatingClosable?: boolean;
+    /**
+     * 是否在打开菜单时再加载内容
+     * @en Whether to reload content when the menu is opened
+     * @default true
+     */
+    mountOnEnter?: boolean;
+    /**
+     * 是否在退出时卸载内容
+     * @en Whether to unmount content on exit
+     * @default true
+     */
+    unmountOnExit?: boolean;
+    /**
+     * transform方向，用于通过transform模拟横屏的情况
+     * @en The transform direction, used to simulate the situation of horizontal screen through transform
+     * @default "top"
+     */
+    orientationDirection?: 'top' | 'bottom' | 'left' | 'right';
+    /**
+     * 弹窗打开时是否禁止body的滚动
+     * @en Whether to prohibit the scrolling of the body when the popup is opened
+     * @default true
+     */
+    preventBodyScroll?: boolean;
+    /**
+     * 页面初始 overflow 状态，即关闭弹窗时 overflow 应该还原的状态
+     * @en The initial overflow state of the page, that is, the state in which overflow should be restored when the popup is closed
+     * @default 第一个全屏组件（弹窗、toast等）打开时页面overflow值
+     * @default_en The page overflow value when the first fullscreen component (popup, toast, etc.) is opened
+     */
+    initialBodyOverflow?: string;
+    /**
+     * 是否禁用滚动容器手势判断，禁用后交给业务方自己判断
+     * @en Whether to disable the scrolling container gesture judgment, leave it to users to judge
+     * @default false
+     */
+    gestureOutOfControl?: boolean;
+    /**
+     * 关闭后回调（动画执行完毕）
+     * @en Callback after closing (animation is completed)
+     */
+    onClose?: (scene?: string) => void;
+    /**
+     * 打开后回调（动画执行完毕）
+     * @en Callback after opening (animation is completed)
+     */
+    onOpen?: () => void;
+    /**
+     * 点击蒙层回调，maskClosable=false时也会触发
+     * @en Callback when clicking the mask , also triggered when maskClosable=false
+     */
+    onMaskClick?: () => void;
+    /**
+     * 弹窗的touchmove回调
+     * @en Touch event callbacks for masking
+     */
+    onTouchMove?: (e: TouchEvent, prevented: boolean, direction: 'x' | 'y') => void;
+    /**
+     * 非滚动区域或滚动到顶部及底部时的触摸事件回调
+     * @en Touch event callbacks for non-scrolling areas or when scrolling to the top and bottom
+     */
+    onPreventTouchMove?: (e: TouchEvent, direction: 'x' | 'y') => void;
+    /**
+     * 获取挂载容器
+     * @en Get mounted container
+     */
+    getContainer?: () => HTMLElement;
+    /**
+     * 内容内部滚动区域容器，在该容器中未滚动到顶部或底部时会释放滚动
+     * @en Container of inner scroll area in content, scroll is released when not scrolled to the top or bottom in this container
+     */
+    getScrollContainer?: () => HTMLElement[] | HTMLElement | null;
+}
+export interface MaskingProps extends MaskingCommonProps {
+    /**
+     * 弹窗内容是否居中
+     * @en Whether the content of the popup window is centered
+     * @default false
+     */
+    contentAtCenter?: boolean;
+}
+export interface MaskingRef {
+    /**
+     * 最外层元素 DOM
+     * @en The outermost element DOM
+     */
+    dom: HTMLDivElement | null;
+    /**
+     * 蒙层 DOM
+     * @en Mask DOM
+     */
+    mask: HTMLDivElement | null;
+    /**
+     * 内容 DOM
+     * @en Content DOM
+     */
+    content: HTMLDivElement | null;
+    /**
+     * 在关闭弹窗前修改 onClose 的 scene 参数值
+     * @en Modify the scene of onClose before closing the popup
+     */
+    setCloseScene: (scene: string) => void;
+}
+export declare function methodsGenerator<P extends OpenBaseProps>(Comp: React.FunctionComponent<P>): {
+    /**
+     * 打开模态弹窗
+     * @desc {en} Open a Masking
+     * @param {MaskingProps} config Configuration
+     * @returns {{ close: () => void; update: (newConfig: MaskingProps) => 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<MaskingProps & React.RefAttributes<MaskingRef>> & {
+    /**
+     * 打开模态弹窗
+     * @desc {en} Open a Masking
+     * @param {MaskingProps} config Configuration
+     * @returns {{ close: () => void; update: (newConfig: MaskingProps) => void; }}
+     */
+    open: (config: Pick<MaskingProps & React.RefAttributes<MaskingRef>, "ref" | "children" | "key" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "className" | "onClose" | "contentAtCenter" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onTouchMove" | "onPreventTouchMove" | "getScrollContainer"> & {
+        key?: string | undefined;
+    }) => {
+        close: () => void;
+        update: (newConfig: Pick<MaskingProps & React.RefAttributes<MaskingRef>, "ref" | "children" | "key" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "className" | "onClose" | "contentAtCenter" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onTouchMove" | "onPreventTouchMove" | "getScrollContainer"> & {
+            key?: string | undefined;
+        }) => void;
+    };
+};
+/**
+ * 通用模态弹窗，内部内容自定义。默认做了防滚动穿透处理，如果弹层内容中需要滚动，则需将滚动容器传入`getScrollContainer`属性以在未滚动到顶部或底部时释放滚动。
+ * @en Generic modal popup with custom internal content. By default, anti-scroll penetration processing is performed. If scrolling is required in the content of the bullet layer, need to pass the scroll container to the `getScrollContainer` to release scrolling when it is not scrolled to the top or bottom.
+ * @type 反馈
+ * @type_en Feedback
+ * @name 模态弹窗
+ * @name_en Masking
+ */
+export default _default;

package/cjs/masking/index.js

@@ -0,0 +1,234 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+var _exportNames = {
+  methodsGenerator: true
+};
+exports.default = void 0;
+exports.methodsGenerator = methodsGenerator;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _mobileUtils = require("@arco-design/mobile-utils");
+
+var _contextProvider = require("../context-provider");
+
+var _portal = _interopRequireDefault(require("../portal"));
+
+var _transition = _interopRequireDefault(require("../transition"));
+
+var _helpers = require("../_helpers");
+
+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];
+});
+
+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 Masking = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var className = props.className,
+      _props$visible = props.visible,
+      visible = _props$visible === void 0 ? false : _props$visible,
+      maskClass = props.maskClass,
+      maskStyle = props.maskStyle,
+      contentClass = props.contentClass,
+      contentStyle = props.contentStyle,
+      close = props.close,
+      onClose = props.onClose,
+      onOpen = props.onOpen,
+      onMaskClick = props.onMaskClick,
+      children = props.children,
+      _props$maskTransition = props.maskTransitionType,
+      maskTransitionType = _props$maskTransition === void 0 ? 'fade' : _props$maskTransition,
+      _props$contentTransit = props.contentTransitionType,
+      contentTransitionType = _props$contentTransit === void 0 ? 'fade' : _props$contentTransit,
+      _props$maskTransition2 = props.maskTransitionTimeout,
+      maskTransitionTimeout = _props$maskTransition2 === void 0 ? 300 : _props$maskTransition2,
+      _props$contentTransit2 = props.contentTransitionTimeout,
+      contentTransitionTimeout = _props$contentTransit2 === void 0 ? 300 : _props$contentTransit2,
+      _props$maskClosable = props.maskClosable,
+      maskClosable = _props$maskClosable === void 0 ? true : _props$maskClosable,
+      animatingClosable = props.animatingClosable,
+      _props$mountOnEnter = props.mountOnEnter,
+      mountOnEnter = _props$mountOnEnter === void 0 ? true : _props$mountOnEnter,
+      _props$unmountOnExit = props.unmountOnExit,
+      unmountOnExit = _props$unmountOnExit === void 0 ? true : _props$unmountOnExit,
+      _props$orientationDir = props.orientationDirection,
+      orientationDirection = _props$orientationDir === void 0 ? 'top' : _props$orientationDir,
+      _props$preventBodyScr = props.preventBodyScroll,
+      preventBodyScroll = _props$preventBodyScr === void 0 ? true : _props$preventBodyScr,
+      initialBodyOverflow = props.initialBodyOverflow,
+      _props$contentAtCente = props.contentAtCenter,
+      contentAtCenter = _props$contentAtCente === void 0 ? false : _props$contentAtCente,
+      _props$gestureOutOfCo = props.gestureOutOfControl,
+      gestureOutOfControl = _props$gestureOutOfCo === void 0 ? false : _props$gestureOutOfCo,
+      getContainer = props.getContainer,
+      getScrollContainer = props.getScrollContainer,
+      onPreventTouchMove = props.onPreventTouchMove,
+      onTouchMove = props.onTouchMove;
+  var domRef = (0, _react.useRef)(null);
+  var maskRef = (0, _react.useRef)(null);
+  var contentRef = (0, _react.useRef)(null);
+  var timerRef = (0, _react.useRef)(-1);
+  var isInitialMount = (0, _react.useRef)(false);
+  var isAnimating = (0, _react.useRef)(false);
+  var closeScene = (0, _react.useRef)('');
+
+  var _useState = (0, _react.useState)(visible),
+      innerVisible = _useState[0],
+      setInnerVisible = _useState[1];
+
+  var _useState2 = (0, _react.useState)(visible),
+      outerVisible = _useState2[0],
+      setOuterVisible = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(''),
+      extraClass = _useState3[0],
+      setExtraClass = _useState3[1];
+
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      dom: domRef.current,
+      mask: maskRef.current,
+      content: contentRef.current,
+      setCloseScene: setCloseScene
+    };
+  });
+  (0, _helpers.usePopupScroll)(innerVisible, domRef.current, getScrollContainer, orientationDirection, onPreventTouchMove, onTouchMove, gestureOutOfControl);
+  (0, _helpers.usePreventBodyScroll)(visible, preventBodyScroll, initialBodyOverflow);
+  (0, _react.useEffect)(function () {
+    if (timerRef.current >= 0) {
+      clearTimeout(timerRef.current);
+    }
+
+    var mounted = isInitialMount.current;
+
+    if (mounted) {
+      isAnimating.current = true;
+    }
+
+    if (!mounted && !visible && !mountOnEnter) {
+      setExtraClass('pre-mount');
+    }
+
+    if (visible) {
+      setOuterVisible(true);
+      (0, _mobileUtils.nextTick)(function () {
+        setInnerVisible(true);
+        execAfterOpen(function () {
+          isAnimating.current = false;
+          setExtraClass('');
+          mounted && (onOpen == null ? void 0 : onOpen());
+        });
+      });
+    } else {
+      setInnerVisible(false);
+      timerRef.current = execAfterClose(function () {
+        isAnimating.current = false;
+        setOuterVisible(false);
+        mounted && (onClose == null ? void 0 : onClose(closeScene.current || void 0));
+        closeScene.current = '';
+      });
+    }
+
+    isInitialMount.current = true;
+  }, [visible]);
+
+  function setCloseScene(scene) {
+    closeScene.current = scene;
+  }
+
+  function execAfterClose(callback) {
+    return window.setTimeout(callback, Math.max(getMaxTimeout(maskTransitionTimeout, 'exit'), getMaxTimeout(contentTransitionTimeout, 'exit')));
+  }
+
+  function execAfterOpen(callback) {
+    return window.setTimeout(callback, Math.max(getMaxTimeout(maskTransitionTimeout, 'enter'), getMaxTimeout(contentTransitionTimeout, 'enter')));
+  }
+
+  function getMaxTimeout(timeout, type) {
+    return typeof timeout === 'number' ? timeout : timeout[type] || 0;
+  }
+
+  function handleMaskAction(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    onMaskClick == null ? void 0 : onMaskClick();
+
+    if (!maskClosable || !animatingClosable && isAnimating.current) {
+      return;
+    }
+
+    closeScene.current = 'mask';
+    close == null ? void 0 : close(e);
+  }
+
+  function renderMasking(_ref) {
+    var prefixCls = _ref.prefixCls;
+    return !mountOnEnter || outerVisible || !unmountOnExit ? /*#__PURE__*/_react.default.createElement(_portal.default, {
+      getContainer: getContainer
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _mobileUtils.cls)(prefixCls + "-masking", 'all-border-box', className),
+      ref: domRef
+    }, /*#__PURE__*/_react.default.createElement(_transition.default, {
+      in: innerVisible,
+      timeout: maskTransitionTimeout,
+      type: maskTransitionType,
+      mountOnEnter: mountOnEnter,
+      unmountOnExit: unmountOnExit
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      ref: maskRef,
+      className: (0, _mobileUtils.cls)(prefixCls + "-masking-mask", extraClass, maskClass),
+      onClick: handleMaskAction,
+      style: maskStyle
+    })), /*#__PURE__*/_react.default.createElement(_transition.default, {
+      in: innerVisible,
+      timeout: contentTransitionTimeout,
+      type: contentTransitionType,
+      mountOnEnter: mountOnEnter,
+      unmountOnExit: unmountOnExit
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      ref: contentRef,
+      className: (0, _mobileUtils.cls)(prefixCls + "-masking-content", {
+        'at-center': contentAtCenter
+      }, extraClass, contentClass),
+      style: contentStyle
+    }, children)))) : null;
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_contextProvider.ContextLayout, null, renderMasking);
+});
+
+function methodsGenerator(Comp) {
+  return {
+    /**
+     * 打开模态弹窗
+     * @desc {en} Open a Masking
+     * @param {MaskingProps} config Configuration
+     * @returns {{ close: () => void; update: (newConfig: MaskingProps) => void; }}
+     */
+    open: (0, _methods.open)(Comp)
+  };
+}
+/**
+ * 通用模态弹窗，内部内容自定义。默认做了防滚动穿透处理，如果弹层内容中需要滚动，则需将滚动容器传入`getScrollContainer`属性以在未滚动到顶部或底部时释放滚动。
+ * @en Generic modal popup with custom internal content. By default, anti-scroll penetration processing is performed. If scrolling is required in the content of the bullet layer, need to pass the scroll container to the `getScrollContainer` to release scrolling when it is not scrolled to the top or bottom.
+ * @type 反馈
+ * @type_en Feedback
+ * @name 模态弹窗
+ * @name_en Masking
+ */
+
+
+var _default = (0, _mobileUtils.componentWrapper)(Masking, methodsGenerator(Masking));
+
+exports.default = _default;

package/cjs/masking/methods.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+export interface OpenBaseProps {
+    unmountOnExit?: boolean;
+    getContainer?: () => HTMLElement;
+    onClose?: (scene?: string) => void;
+    visible: boolean;
+    close: (e: any) => void;
+}
+export declare function getOpenMethod<T extends {
+    key?: string;
+}, P extends OpenBaseProps>(Component: React.FunctionComponent<P>, containerId?: string, normalize?: (config: T) => P): (config: T) => {
+    close: () => void;
+    update: (newConfig: T) => void;
+};
+export declare function open<P extends OpenBaseProps>(Component: React.FunctionComponent<P>, containerId?: string): (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/masking/methods.js

@@ -0,0 +1,84 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.getOpenMethod = getOpenMethod;
+exports.open = open;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
+var _mobileUtils = require("@arco-design/mobile-utils");
+
+function getOpenMethod(Component, containerId, normalize) {
+  if (normalize === void 0) {
+    normalize = function normalize(config) {
+      return config;
+    };
+  }
+
+  return function (config) {
+    var baseProps = (0, _extends2.default)({
+      unmountOnExit: true
+    }, normalize(config), {
+      visible: false,
+      close: function close() {}
+    });
+    var dynamicProps = (0, _extends2.default)({}, baseProps); // 不同的key用不同的容器挂载
+
+    var id = "_" + (containerId || 'ARCO_MASKING') + "_DIV_" + (config.key || '') + "_";
+
+    var _appendElementById = (0, _mobileUtils.appendElementById)(id, baseProps.getContainer),
+        div = _appendElementById.child;
+
+    var leaving = false;
+
+    function render(props) {
+      _reactDom.default.render( /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, props, {
+        getContainer: function getContainer() {
+          return div;
+        }
+      })), div);
+    }
+
+    function update(newConfig) {
+      dynamicProps = (0, _extends2.default)({}, dynamicProps, normalize(newConfig));
+      render(dynamicProps);
+    }
+
+    function close() {
+      leaving = true;
+      dynamicProps.visible = false;
+      render(dynamicProps);
+    }
+
+    dynamicProps.close = close;
+
+    dynamicProps.onClose = function (scene) {
+      baseProps.onClose && baseProps.onClose(scene);
+
+      if (baseProps.unmountOnExit) {
+        (0, _mobileUtils.removeElement)(div);
+      }
+    };
+
+    render(dynamicProps);
+    (0, _mobileUtils.nextTick)(function () {
+      if (leaving) return;
+      dynamicProps.visible = true;
+      render(dynamicProps);
+    });
+    return {
+      close: close,
+      update: update
+    };
+  };
+}
+
+function open(Component, containerId) {
+  return getOpenMethod(Component, containerId);
+}

package/cjs/masking/style/css/index.css

@@ -0,0 +1,26 @@
+.arco-masking-mask.pre-mount:not([class*="-enter"]):not([class*="-exit"]),
+.arco-masking-content.pre-mount:not([class*="-enter"]):not([class*="-exit"]),
+.arco-masking-mask[class*="-exit-done"],
+.arco-masking-content[class*="-exit-done"] {
+  opacity: 0;
+  pointer-events: none;
+}
+.arco-masking-mask {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  z-index: 1000;
+  background:  rgba(0, 0, 0, 0.6) ;
+}
+.arco-masking-content {
+  position: fixed;
+  z-index: 1001;
+}
+.arco-masking-content.at-center {
+  left: 50%;
+  top: 50%;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+}

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

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

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

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

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

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

package/cjs/masking/style/index.js

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

package/cjs/masking/style/index.less

@@ -0,0 +1,30 @@
+@import '../../../style/mixin.less';
+
+.@{prefix}-masking {
+    &-mask,
+    &-content {
+        &.pre-mount:not([class*="-enter"]):not([class*="-exit"]),
+        &[class*="-exit-done"] {
+            opacity: 0;
+            pointer-events: none;
+        }
+    }
+    &-mask {
+        position: fixed;
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+        z-index: @full-screen-z-index;
+        .use-var(background, mask-background);
+    }
+    &-content {
+        position: fixed;
+        z-index: @full-screen-z-index + 1;
+        &.at-center {
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+        }
+    }
+}

package/cjs/nav-bar/back-icon.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+declare const BackArrow: ({ color }: {
+    color?: string | undefined;
+}) => JSX.Element;
+export default BackArrow;

package/cjs/nav-bar/back-icon.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var BackArrow = function BackArrow(_ref) {
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'currentColor' : _ref$color;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "c-svg-arrow nav-bar-back"
+  }, /*#__PURE__*/_react.default.createElement("svg", {
+    height: "100%",
+    viewBox: "0 0 16 16"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    id: "path-1_1_",
+    d: "M2.1,8l5.4,5.4c0.1,0.1,0.1,0.3,0,0.5L7,14.4c-0.1,0.1-0.3,0.1-0.5,0L0.7,8.5c-0.3-0.3-0.3-0.7,0-0.9 l5.9-5.9c0.1-0.1,0.3-0.1,0.5,0l0.5,0.5c0.1,0.1,0.1,0.3,0,0.5L2.1,8z",
+    fill: color
+  })));
+};
+
+var _default = BackArrow;
+exports.default = _default;