feat: 新增 Modal 组件 (#1133)

* portal

* portal

* rename React to react

* update test snapshot

* make codecov happy

* 补充文档

* Update docs/api/remax-one/components.md

Co-authored-by: Wei Zhu <[email protected]>

docs/api/remax-one/components.md

@@ -135,6 +135,8 @@ Text 组件
 import { Text } from 'remax/one';
 ```
 
+属性
+
 | 名称 | 类型 | 描述 |
 | ---------- | ------------------------------------------------------------ | ----------------- |
 | id | string | 节点 id |
@@ -212,10 +214,37 @@ WebView 组件
 import { WebView } from 'remax/one';
 ```
 
+属性
+
 | 名称 | 类型 | 描述 |
 | --------- | ---------------------------------------------------- | ----------------- |
 | id | string | 节点 id |
 | className | string | 节点样式类 |
 | style | React.CssProperties | 节点 inline style |
 | src | string | 地址 |
 | onMessage | (event: [Event](/api/remax-one/event#event)) => void | 通信回调 |
+
+## Modal
+
+> turboPages 暂不支持使用 Modal
+
+Modal 组件是一种简单的覆盖在其他视图之上显示内容的方式。
+
+```jsx
+import { Modal, View } from 'remax/one';
+
+export default function PageIndex() {
+ return (
+ <View>
+ <Modal>
+ <View> modal </View>
+ </Modal>
+ <View>Page Index</View>
+ </View>
+ );
+}
+```
+
+属性
+
+无。

e2e/dummy/src/app.config.js

@@ -1,4 +1,4 @@
-const pages = ['pages/one/index', 'pages/two/index', 'pages/query/index'];
+const pages = ['pages/one/index', 'pages/two/index', 'pages/query/index', 'pages/modal/index'];
 
 module.exports.ali = {
  pages,

e2e/dummy/src/pages/modal/index.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { View, Modal } from 'remax/one';
+
+export default () => {
+ return (
+ <View id="page">
+ <Modal>
+ <View id="modal">modal component</View>
+ </Modal>
+ page modal
+ </View>
+ );
+};

e2e/dummy/tests/index.test.js

@@ -40,4 +40,10 @@ describe('works', () => {
  await expect(page).toMatch('query from props: foo');
  await expect(page).toMatch('query from hook: foo');
  });
+
+ it('renders modal component', async () => {
+ await goTo('/pages/modal/index');
+
+ await expect(page).toMatch('modal component');
+ });
 });

e2e/mini/src/app.config.js

@@ -7,6 +7,7 @@ module.exports = {
  'pages/native-component/commonChunk1',
  'pages/native-component/commonChunk2',
  'pages/turbo-page/index',
+ 'pages/modal/index',
  ],
  window: {
  defaultTitle: 'Alipay App',

e2e/mini/src/pages/modal/index.css

@@ -0,0 +1,12 @@
+.cat-image {
+ width: 100px;
+ height: 100px;
+}
+
+.dog-image {
+ background-image: url('~@/assets/images/dog.jpg');
+ background-size: cover;
+ background-position: center;
+ width: 100px;
+ height: 100px;
+}

e2e/mini/src/pages/modal/index.js

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { View, Modal } from 'remax/one';
+
+export default () => {
+ return (
+ <View>
+ <Modal>
+ <View id="modal">modal</View>
+ </Modal>
+ </View>
+ );
+};

e2e/mini/test/modal.test.ts

@@ -0,0 +1,9 @@
+import { launchApp } from './helpers';
+
+describe('modal', () => {
+ it('正常渲染', async () => {
+ const app = await launchApp('/pages/modal/index');
+
+ await expect(app).toMatchElement('#modal', { text: 'modal' });
+ });
+});

packages/remax-ali/templates/default/page.ejs

@@ -1,5 +1,3 @@
-<template is="REMAX_TPL" data="{{ root: root }}" />
-
 <template name="REMAX_TPL">
  <block a:for="{{root.children}}" a:key="{{item.id}}">
  <template is="REMAX_TPL_1_CONTAINER" data="{{item: item}}" />
@@ -22,3 +20,6 @@
 <template name="REMAX_TPL_1_CONTAINER">
  <template is="{{'REMAX_TPL_1_' + item.type}}" data="{{item: item}}" />
 </template>
+
+<template is="REMAX_TPL" data="{{ root: root }}" />
+<template is="REMAX_TPL" data="{{ root: modalRoot }}" />