@arco-design/mobile-react 2.19.0

package/esm/dialog/index.d.ts

@@ -0,0 +1,213 @@
+import React, { ReactNode } from 'react';
+import { ILocale } from '@arco-design/mobile-utils';
+import { MaskingCommonProps, MaskingRef, OpenBaseProps } from '../masking';
+export * from './methods';
+export interface FooterButtonOptions {
+    /**
+     * 按钮内容
+     * @en Button content
+     */
+    content: ReactNode | ((locale: ILocale) => ReactNode);
+    /**
+     * 按钮类名
+     * @en Button classname
+     *  */
+    className?: string;
+    /**
+     * 是否禁用按钮
+     * @en Whether to disable button
+     *  */
+    disabled?: boolean;
+    /**
+     * 点击按钮事件，返回值为true时可以阻止dialog关闭
+     * @en Button clicking event, when the return value is true, the dialog can be prevented from closing
+     *  */
+    onClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => (void | boolean) | Promise<void | boolean>;
+}
+export interface DialogProps extends MaskingCommonProps {
+    /**
+     * 弹窗标题
+     * @en Dialog title
+     * */
+    title?: ReactNode;
+    /**
+     * 底部按钮配置
+     * @en Bottom button configuration
+     * @default []
+     */
+    footer?: FooterButtonOptions[];
+    /**
+     * 底部按钮样式，grid表示通栏样式，button表示按钮样式，platform=ios时有效
+     * @en Bottom button style, grid indicates the banner style, button indicates the button style, valid when platform = ios
+     * @default "grid"
+     */
+    footerType?: 'grid' | 'button';
+    /**
+     * 自定义渲染footer
+     * @en Custom rendering footer
+     * */
+    renderFooter?: () => ReactNode;
+    /**
+     * 底部按钮大于等于多少个时竖向排布
+     * @en Vertical arrangement when the number of buttons at the bottom is greater than or equal to the set value
+     * @default 3
+     */
+    footerCollapseCount?: number;
+    /**
+     * 标题对齐方向
+     * @en Title alignment
+     * @default platform=android 时为"left"，否则为"center"
+     * @default_en "left" when platform=android, "center" otherwise
+     */
+    titleAlign?: 'left' | 'center' | 'right';
+    /**
+     * 内容对齐方向
+     * @en Content alignment
+     * @default platform=android 时为"left"，否则为"center"
+     * @default_en "left" when platform=android, "center" otherwise
+     */
+    contentAlign?: 'left' | 'center' | 'right';
+    /**
+     * 当前所在操作系统，对应不同样式
+     * @en The current operating system, corresponding to different styles
+     * @default 跟随当前所在系统
+     * @default_en Follow the system
+     */
+    platform?: 'ios' | 'android';
+    /**
+     * 弹窗中的其他元素，比如关闭按钮等
+     * @en Other elements in the dialog, such as the close button, etc.
+     * */
+    extra?: ReactNode;
+    /**
+     * 内容过渡动画类名
+     * @en Content transition animation classname
+     * @default platform=android 时为"fade"，否则为"fade-scale"
+     * @default_en "fade" when platform=android, "fade-scale" otherwise
+     */
+    contentTransitionType?: MaskingCommonProps['contentTransitionType'];
+    /**
+     * 蒙层动画时长
+     * @en Mask animation duration
+     * @default 300
+     */
+    maskTransitionTimeout?: MaskingCommonProps['maskTransitionTimeout'];
+    /**
+     * 弹窗内容动画时长
+     * @en Dialog content animation duration
+     * @default 450
+     */
+    contentTransitionTimeout?: MaskingCommonProps['contentTransitionTimeout'];
+}
+export interface DialogRef extends MaskingRef {
+}
+export interface AlertOptions extends Omit<DialogProps, 'visible' | 'close'> {
+    /**
+     * 组件挂载容器id区分
+     * @en Component mount container id distinction
+     * */
+    key?: string;
+    /**
+     * 点击确认按钮回调
+     * @en Callback when clicking OK button
+     * */
+    onOk?: FooterButtonOptions['onClick'];
+    /**
+     * 确认按钮文字
+     * @en Ok button text
+     * */
+    okText?: ReactNode;
+}
+export interface ConfirmOptions extends AlertOptions {
+    /**
+     * 点击取消按钮回调
+     * @en Callback when clicking cancel button
+     * */
+    onCancel?: FooterButtonOptions['onClick'];
+    /**
+     * 取消按钮文字
+     * @en Cancel button text
+     * */
+    cancelText?: ReactNode;
+}
+export declare function methodsGenerator<P extends OpenBaseProps, A = AlertOptions, C = ConfirmOptions>(Comp: React.FunctionComponent<P>): {
+    /**
+     * 打开确认框(含一个确认按钮)
+     * @desc {en} Open a confirmation dialog (with a confirmation button)
+     * @param {AlertOptions & DialogProps} config Configuration
+     * @returns {{ close: () => void; update: (newConfig: AlertOptions & DialogProps) => void; }}
+     */
+    alert: (config: A) => {
+        close: () => void;
+        update: (newConfig: A) => void;
+    };
+    /**
+     * 打开提示框(含一个确认按钮和一个取消按钮)
+     * @desc {en} Open a prompt dialog (with a confirm button and a cancel button)
+     * @param {ConfirmOptions & AlertOptions} config Configuration
+     * @returns {{ close: () => void; update: (newConfig: ConfirmOptions & AlertOptions) => void; }}
+     */
+    confirm: (config: C) => {
+        close: () => void;
+        update: (newConfig: C) => void;
+    };
+    /**
+     * 打开常规对话框
+     * @desc {en} Open the general dialog
+     * @param {DialogProps} config Configuration
+     * @returns {{ close: () => void; update: (newConfig: DialogProps) => 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<DialogProps & React.RefAttributes<DialogRef>> & {
+    /**
+     * 打开确认框(含一个确认按钮)
+     * @desc {en} Open a confirmation dialog (with a confirmation button)
+     * @param {AlertOptions & DialogProps} config Configuration
+     * @returns {{ close: () => void; update: (newConfig: AlertOptions & DialogProps) => void; }}
+     */
+    alert: (config: AlertOptions) => {
+        close: () => void;
+        update: (newConfig: AlertOptions) => void;
+    };
+    /**
+     * 打开提示框(含一个确认按钮和一个取消按钮)
+     * @desc {en} Open a prompt dialog (with a confirm button and a cancel button)
+     * @param {ConfirmOptions & AlertOptions} config Configuration
+     * @returns {{ close: () => void; update: (newConfig: ConfirmOptions & AlertOptions) => void; }}
+     */
+    confirm: (config: ConfirmOptions) => {
+        close: () => void;
+        update: (newConfig: ConfirmOptions) => void;
+    };
+    /**
+     * 打开常规对话框
+     * @desc {en} Open the general dialog
+     * @param {DialogProps} config Configuration
+     * @returns {{ close: () => void; update: (newConfig: DialogProps) => void; }}
+     */
+    open: (config: Pick<DialogProps & React.RefAttributes<DialogRef>, "platform" | "footer" | "title" | "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" | "footerType" | "renderFooter" | "footerCollapseCount" | "titleAlign" | "contentAlign" | "extra"> & {
+        key?: string | undefined;
+    }) => {
+        close: () => void;
+        update: (newConfig: Pick<DialogProps & React.RefAttributes<DialogRef>, "platform" | "footer" | "title" | "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" | "footerType" | "renderFooter" | "footerCollapseCount" | "titleAlign" | "contentAlign" | "extra"> & {
+            key?: string | undefined;
+        }) => void;
+    };
+};
+/**
+ * 模态对话框，在浮层中显示，引导用户进行相关操作。默认做了防滚动穿透处理，如果弹层内容中需要滚动，则需将滚动容器传入`getScrollContainer`属性以在未滚动到顶部或底部时释放滚动。
+ * @en A modal dialog, displayed in a floating layer, guides the user to perform related operations. By default, anti-scroll penetration processing is performed. If scrolling is required in the content of the bullet layer, you need to pass the scroll container to `getScrollContainer` to release scrolling when it is not scrolled to the top or bottom.
+ * @type 反馈
+ * @type_en FeedBack
+ * @name 对话框
+ * @name_en Dialog
+ */
+export default _default;

package/esm/dialog/index.js

@@ -0,0 +1,155 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["close", "children", "title", "footer", "footerType", "renderFooter", "footerCollapseCount", "titleAlign", "contentAlign", "className", "maskClass", "contentClass", "contentStyle", "contentTransitionType", "maskTransitionTimeout", "contentTransitionTimeout", "extra"];
+import React, { forwardRef, useImperativeHandle, useRef } from 'react';
+import { cls, componentWrapper } from '@arco-design/mobile-utils';
+import { ContextLayout } from '../context-provider';
+import Masking from '../masking';
+import { alert, confirm, open } from './methods';
+import { useSystem } from '../_helpers';
+export * from './methods';
+var Dialog = /*#__PURE__*/forwardRef(function (props, ref) {
+  var system = useSystem();
+  var nowSystem = props.platform || system;
+
+  var _props$close = props.close,
+      close = _props$close === void 0 ? function () {} : _props$close,
+      children = props.children,
+      title = props.title,
+      _props$footer = props.footer,
+      footer = _props$footer === void 0 ? [] : _props$footer,
+      _props$footerType = props.footerType,
+      footerType = _props$footerType === void 0 ? 'grid' : _props$footerType,
+      renderFooter = props.renderFooter,
+      _props$footerCollapse = props.footerCollapseCount,
+      footerCollapseCount = _props$footerCollapse === void 0 ? 3 : _props$footerCollapse,
+      _props$titleAlign = props.titleAlign,
+      titleAlign = _props$titleAlign === void 0 ? nowSystem === 'android' ? 'left' : 'center' : _props$titleAlign,
+      _props$contentAlign = props.contentAlign,
+      contentAlign = _props$contentAlign === void 0 ? nowSystem === 'android' ? 'left' : 'center' : _props$contentAlign,
+      className = props.className,
+      maskClass = props.maskClass,
+      contentClass = props.contentClass,
+      contentStyle = props.contentStyle,
+      _props$contentTransit = props.contentTransitionType,
+      contentTransitionType = _props$contentTransit === void 0 ? nowSystem === 'android' ? 'fade' : 'fade-scale' : _props$contentTransit,
+      _props$maskTransition = props.maskTransitionTimeout,
+      maskTransitionTimeout = _props$maskTransition === void 0 ? 300 : _props$maskTransition,
+      _props$contentTransit2 = props.contentTransitionTimeout,
+      contentTransitionTimeout = _props$contentTransit2 === void 0 ? 450 : _props$contentTransit2,
+      extra = props.extra,
+      restProps = _objectWithoutPropertiesLoose(props, _excluded);
+
+  var maskingRef = useRef(null);
+  var contentRef = useRef(null);
+  useImperativeHandle(ref, function () {
+    var _maskingRef$current, _maskingRef$current2, _maskingRef$current3;
+
+    return {
+      dom: ((_maskingRef$current = maskingRef.current) == null ? void 0 : _maskingRef$current.dom) || null,
+      mask: ((_maskingRef$current2 = maskingRef.current) == null ? void 0 : _maskingRef$current2.mask) || null,
+      content: contentRef.current,
+      setCloseScene: ((_maskingRef$current3 = maskingRef.current) == null ? void 0 : _maskingRef$current3.setCloseScene) || function () {}
+    };
+  });
+
+  function handleFooterBtnClick(e, btn) {
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (btn.disabled) {
+      return;
+    }
+
+    var result = btn.onClick ? btn.onClick(e) : null;
+
+    if (!result || typeof result === 'boolean') {
+      !result && close(e);
+    } else if (result && result.then) {
+      result.then(function (res) {
+        return !res && close(e);
+      });
+    }
+  }
+
+  function renderDialog(_ref) {
+    var prefixCls = _ref.prefixCls,
+        locale = _ref.locale;
+    var prefix = prefixCls + "-dialog";
+    return /*#__PURE__*/React.createElement(Masking, _extends({
+      close: close,
+      className: cls(prefix, nowSystem, className),
+      ref: maskingRef,
+      maskClass: cls(prefix + "-mask", maskClass),
+      contentTransitionType: contentTransitionType,
+      contentClass: cls(prefix + "-container"),
+      maskTransitionTimeout: maskTransitionTimeout,
+      contentTransitionTimeout: contentTransitionTimeout
+    }, restProps), /*#__PURE__*/React.createElement("div", {
+      className: cls(prefix + "-content", prefix + "-part", nowSystem, contentClass),
+      style: contentStyle,
+      ref: contentRef
+    }, title ? /*#__PURE__*/React.createElement("div", {
+      className: cls(prefix + "-header", prefix + "-part", titleAlign, nowSystem, "system-" + system, {
+        'only-title': !children
+      })
+    }, title) : null, children ? /*#__PURE__*/React.createElement("div", {
+      className: cls(prefix + "-body", prefix + "-part", contentAlign, nowSystem, {
+        'sub-title': !title
+      })
+    }, children) : null, renderFooter || footer.length ? /*#__PURE__*/React.createElement("div", {
+      className: cls(prefix + "-footer", prefix + "-part", nowSystem, "type-" + footerType, {
+        collapsed: footer.length >= footerCollapseCount
+      })
+    }, renderFooter ? renderFooter() : footer.map(function (btn, index) {
+      return /*#__PURE__*/React.createElement("div", {
+        key: index,
+        className: cls('dialog-footer-button', btn.className, "system-" + system, {
+          disabled: btn.disabled
+        }),
+        onClick: function onClick(e) {
+          return handleFooterBtnClick(e, btn);
+        }
+      }, typeof btn.content === 'function' ? btn.content(locale) : btn.content);
+    })) : null, extra ? /*#__PURE__*/React.createElement("section", null, extra) : null));
+  }
+
+  return /*#__PURE__*/React.createElement(ContextLayout, null, renderDialog);
+});
+export function methodsGenerator(Comp) {
+  return {
+    /**
+     * 打开确认框(含一个确认按钮)
+     * @desc {en} Open a confirmation dialog (with a confirmation button)
+     * @param {AlertOptions & DialogProps} config Configuration
+     * @returns {{ close: () => void; update: (newConfig: AlertOptions & DialogProps) => void; }}
+     */
+    alert: alert(Comp),
+
+    /**
+     * 打开提示框(含一个确认按钮和一个取消按钮)
+     * @desc {en} Open a prompt dialog (with a confirm button and a cancel button)
+     * @param {ConfirmOptions & AlertOptions} config Configuration
+     * @returns {{ close: () => void; update: (newConfig: ConfirmOptions & AlertOptions) => void; }}
+     */
+    confirm: confirm(Comp),
+
+    /**
+     * 打开常规对话框
+     * @desc {en} Open the general dialog
+     * @param {DialogProps} config Configuration
+     * @returns {{ close: () => void; update: (newConfig: DialogProps) => void; }}
+     */
+    open: open(Comp)
+  };
+}
+/**
+ * 模态对话框，在浮层中显示，引导用户进行相关操作。默认做了防滚动穿透处理，如果弹层内容中需要滚动，则需将滚动容器传入`getScrollContainer`属性以在未滚动到顶部或底部时释放滚动。
+ * @en A modal dialog, displayed in a floating layer, guides the user to perform related operations. By default, anti-scroll penetration processing is performed. If scrolling is required in the content of the bullet layer, you need to pass the scroll container to `getScrollContainer` to release scrolling when it is not scrolled to the top or bottom.
+ * @type 反馈
+ * @type_en FeedBack
+ * @name 对话框
+ * @name_en Dialog
+ */
+
+export default componentWrapper(Dialog, methodsGenerator(Dialog));

package/esm/dialog/methods.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { OpenBaseProps } from '../masking/methods';
+export declare function normalizeAlert<AlertOptions, P>(config: AlertOptions): P;
+export declare function normalizeConfirm<ConfirmOptions, P>(config: ConfirmOptions): P;
+export declare function alert<AlertOptions, P extends OpenBaseProps>(Component: React.FunctionComponent<P>, normalize?: <T, Props>(config: T) => Props): (config: AlertOptions) => {
+    close: () => void;
+    update: (newConfig: AlertOptions) => void;
+};
+export declare function confirm<ConfirmOptions, P extends OpenBaseProps>(Component: React.FunctionComponent<P>, normalize?: <T, Props>(config: T) => Props): (config: ConfirmOptions) => {
+    close: () => void;
+    update: (newConfig: ConfirmOptions) => void;
+};
+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/esm/dialog/methods.js

@@ -0,0 +1,55 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["onOk", "okText"],
+    _excluded2 = ["onOk", "okText", "onCancel", "cancelText"];
+import { getOpenMethod, open as maskingOpen } from '../masking/methods';
+export function normalizeAlert(config) {
+  var _ref = config || {},
+      onOk = _ref.onOk,
+      okText = _ref.okText,
+      restConfig = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  return _extends({
+    footer: [{
+      content: okText || function (locale) {
+        return locale.Dialog.okText;
+      },
+      className: 'confirm',
+      onClick: onOk
+    }]
+  }, restConfig);
+}
+export function normalizeConfirm(config) {
+  var _ref2 = config || {},
+      onOk = _ref2.onOk,
+      okText = _ref2.okText,
+      onCancel = _ref2.onCancel,
+      cancelText = _ref2.cancelText,
+      restConfig = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+
+  return _extends({
+    footer: [{
+      content: cancelText || function (locale) {
+        return locale.Dialog.cancelText;
+      },
+      className: 'cancel',
+      onClick: onCancel
+    }, {
+      content: okText || function (locale) {
+        return locale.Dialog.okText;
+      },
+      className: 'confirm',
+      onClick: onOk
+    }]
+  }, restConfig);
+}
+var dialogId = 'ARCO_DIALOG';
+export function alert(Component, normalize) {
+  return getOpenMethod(Component, dialogId, normalize || normalizeAlert);
+}
+export function confirm(Component, normalize) {
+  return getOpenMethod(Component, dialogId, normalize || normalizeConfirm);
+}
+export function open(Component) {
+  return maskingOpen(Component, dialogId);
+}