fix: 修复modal微信端无动效问题

Author: rayhomie

compiled/alipay/src/Modal/props.ts

@@ -37,6 +37,14 @@ export interface IModalProps extends IBaseProps {
    * @description 过渡动画时长，单位毫秒
    */
   duration: number;
+  /**
+   * @description 是否开启过渡动画
+   */
+  animation: boolean;
+  /**
+   * @description 弹窗层级
+   */
+  zIndex: number;
   /**
    * @description 标题
    */
@@ -103,6 +111,8 @@ export const ModalDefaultProps: Partial<IModalProps> = {
   closable: true,
   type: 'default',
   duration: 200,
+  animation: true,
+  zIndex: 998,
 };
 
 export const ModalFunctionalProps: Partial<IModalProps> = {
@@ -114,6 +124,8 @@ export const ModalFunctionalProps: Partial<IModalProps> = {
   type: 'default',
   closable: true,
   duration: 200,
+  animation: true,
+  zIndex: 998,
   title: '',
   content: '',
   visible: false,

compiled/wechat/src/Modal/props.js

@@ -4,6 +4,8 @@ export var ModalDefaultProps = {
     closable: true,
     type: 'default',
     duration: 200,
+    animation: true,
+    zIndex: 998,
 };
 export var ModalFunctionalProps = {
     bodyClassName: '',
@@ -14,6 +16,8 @@ export var ModalFunctionalProps = {
     type: 'default',
     closable: true,
     duration: 200,
+    animation: true,
+    zIndex: 998,
     title: '',
     content: '',
     visible: false,

src/Modal/index.axml.tsx

@@ -3,34 +3,32 @@ import AntPopup from '../Popup/index.axml';
 import AntButton from '../Button/index.axml';
 import AntIcon from '../Icon/index.axml';
 import { IModalProps } from './props';
-import { TSXMLProps, InternalData } from 'tsxml';
+import { TSXMLProps } from 'tsxml';
 import utils from './index.sjs';
 
-export default (
-  {
-    className,
-    style,
-    maskClassName,
-    maskStyle,
-    visible,
-    duration,
-    destroyOnClose,
-    bodyClassName,
-    bodyStyle,
-    title,
-    content,
-    type,
-    primaryButtonText,
-    primaryButtonStyle,
-    secondaryButtonText,
-    secondaryButtonStyle,
-    cancelButtonText,
-    cancelButtonStyle,
-    closable,
-  }: TSXMLProps<IModalProps>,
-
-  { animation, zIndex }: InternalData
-) => (
+export default ({
+  className,
+  style,
+  maskClassName,
+  maskStyle,
+  visible,
+  duration,
+  destroyOnClose,
+  bodyClassName,
+  bodyStyle,
+  title,
+  content,
+  type,
+  primaryButtonText,
+  primaryButtonStyle,
+  secondaryButtonText,
+  secondaryButtonStyle,
+  cancelButtonText,
+  cancelButtonStyle,
+  closable,
+  animation,
+  zIndex,
+}: TSXMLProps<IModalProps>) => (
   <Component>
     <AntPopup
       className={`ant-modal ${className || ''}`}

src/Modal/props.ts

@@ -37,6 +37,14 @@ export interface IModalProps extends IBaseProps {
    * @description 过渡动画时长，单位毫秒
    */
   duration: number;
+  /**
+   * @description 是否开启过渡动画
+   */
+  animation: boolean;
+  /**
+   * @description 弹窗层级
+   */
+  zIndex: number;
   /**
    * @description 标题
    */
@@ -103,6 +111,8 @@ export const ModalDefaultProps: Partial<IModalProps> = {
   closable: true,
   type: 'default',
   duration: 200,
+  animation: true,
+  zIndex: 998,
 };
 
 export const ModalFunctionalProps: Partial<IModalProps> = {
@@ -114,6 +124,8 @@ export const ModalFunctionalProps: Partial<IModalProps> = {
   type: 'default',
   closable: true,
   duration: 200,
+  animation: true,
+  zIndex: 998,
   title: '',
   content: '',
   visible: false,

tests/alipay/Modal/__tests__/index.test.ts

@@ -1,6 +1,57 @@
 import { getInstance } from 'tests/utils';
 import { describe, it, expect, vi } from 'vitest';
 
+describe('init', () => {
+  it('测试默认值', () => {
+    const instance = getInstance('Modal', {});
+
+    const {
+      bodyClassName,
+      bodyStyle,
+      maskClassName,
+      maskStyle,
+      maskClosable,
+      type,
+      closable,
+      duration,
+      animation,
+      zIndex,
+      title,
+      content,
+      visible,
+      destroyOnClose,
+      primaryButtonText,
+      secondaryButtonText,
+      cancelButtonText,
+      primaryButtonStyle,
+      secondaryButtonStyle,
+      cancelButtonStyle,
+    } = instance.getConfig().props;
+    expect({
+      bodyClassName,
+      bodyStyle,
+      maskClassName,
+      maskStyle,
+      maskClosable,
+      type,
+      closable,
+      duration,
+      animation,
+      zIndex,
+      title,
+      content,
+      visible,
+      destroyOnClose,
+      primaryButtonText,
+      secondaryButtonText,
+      cancelButtonText,
+      primaryButtonStyle,
+      secondaryButtonStyle,
+      cancelButtonStyle,
+    }).toMatchFileSnapshot('snapshot/alipay_config_props.txt');
+  });
+});
+
 describe('modal onClose', () => {
   it('modal onClose', () => {
     const onClose = vi.fn();

tests/alipay/Modal/__tests__/snapshot/alipay_config_props.txt

@@ -0,0 +1,22 @@
+{
+  "animation": true,
+  "bodyClassName": "",
+  "bodyStyle": "",
+  "cancelButtonStyle": "",
+  "cancelButtonText": "",
+  "closable": true,
+  "content": "",
+  "destroyOnClose": false,
+  "duration": 200,
+  "maskClassName": "",
+  "maskClosable": true,
+  "maskStyle": "",
+  "primaryButtonStyle": "",
+  "primaryButtonText": "",
+  "secondaryButtonStyle": "",
+  "secondaryButtonText": "",
+  "title": "",
+  "type": "default",
+  "visible": false,
+  "zIndex": 998,
+}