feat: 新增 amis-render 组件, 用于渲染数据里的 amis 配置 (#7586)

* feat: 新增 amis-render 组件, 用于渲染数据里的 amis 配置

* type 改名为 amis

* 更新 snapshot

* 修复 snapshot 报错

* fix:input-table删除行记录动作问题

* feat: 范围类组件支持 extraName 拆成两个字段 (#7583)

* style: tr 的active 样式调整 close: #7585

* docs: 更新 React 官网链接

* docs: 添加 position 默认值示意 (#7592)

* chore:调用组件动作时找不到则throw Error

* feat: 新增 amis render 渲染组件

---------

Co-authored-by: lvxiaojiao <lvxiaojiao@baidu.com>
Co-authored-by: liaoxuezhi <2betop.cn@gmail.com>
Co-authored-by: liaoxuezhi <liaoxuezhi@icloud.com>
Co-authored-by: YangQi <yangfong2022@qq.com>
Co-authored-by: Allen <yupeng.fe@qq.com>

docs/zh-CN/components/amis.md

@@ -0,0 +1,87 @@
+---
+title: AMIS 渲染器
+description:
+type: 0
+group: ⚙ 组件
+menuName: AMIS 渲染器
+icon:
+order: 28
+---
+
+用于渲染数据中的 amis 配置
+
+## 基本使用
+
+只需要设置 schema 或 name，值可以是 JSON 对象或字符串的 JSON
+
+```schema: scope="body"
+{
+  "type": "amis",
+  "schema": {
+    "type": "tpl",
+    "tpl": "amis render"
+  }
+}
+```
+
+## 通过 name 绑定动态数据
+
+可以用在表单或 CRUD 中，下面示例演示了编辑后实时渲染的效果，因为使用了相同 的 name
+
+```schema: scope="body"
+{
+    "type": "form",
+    "api": "/api/mock2/form/saveForm",
+    "title": "实时测试 amis 渲染效果",
+    "body": [
+        {
+            "type": "group",
+            "body": [
+                {
+                    "type": "editor",
+                    "name": "amis",
+                    "language": "json",
+                    "value": {
+                      "label": "弹框",
+                      "type": "button",
+                      "actionType": "dialog",
+                      "dialog": {
+                        "title": "弹框",
+                        "body": "这是个简单的弹框。"
+                      }
+                    }
+                },
+                {
+                    "type": "amis",
+                    "name": "amis"
+                }
+            ]
+        }
+
+    ]
+}
+```
+
+## 向下传递 props
+
+通过设置 props 向下传递，这个 props 会作为默认值
+
+```schema: scope="body"
+{
+  "type": "amis",
+  "props": {
+    "tpl": "amis render"
+  },
+  "value": {
+    "type": "tpl"
+  }
+}
+```
+
+## 属性表
+
+| 属性名 | 类型     | 默认值   | 说明               |
+| ------ | -------- | -------- | ------------------ |
+| type   | `string` | `"amis"` | 指定为 amis 渲染器 |
+| name   | `string` |          | 绑定上下文变量名   |
+| props  | `object` |          | 向下传递的 props   |

examples/components/Components.tsx

@@ -1170,6 +1170,13 @@ export const components = [
         component: React.lazy(() =>
           import('../../docs/zh-CN/components/web-component.md').then(wrapDoc)
         )
+      },
+      {
+        label: 'amis 渲染器',
+        path: '/zh-CN/components/amis',
+        component: React.lazy(() =>
+          import('../../docs/zh-CN/components/amis.md').then(wrapDoc)
+        )
       }
     ]
   }

packages/amis/__tests__/renderers/AMISRender.test.tsx

@@ -0,0 +1,22 @@
+import React = require('react');
+import {render} from '@testing-library/react';
+import '../../src';
+import {render as amisRender} from '../../src';
+import {makeEnv} from '../helper';
+
+test('Renderer:amisRender test', () => {
+  const {container} = render(
+    amisRender(
+      {
+        type: 'amis',
+        value: {
+          type: 'tpl',
+          tpl: 'hello world'
+        }
+      },
+      {},
+      makeEnv({})
+    )
+  );
+  expect(container).toMatchSnapshot();
+});

packages/amis/__tests__/renderers/__snapshots__/AMISRender.test.tsx.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Renderer:amisRender test 1`] = `
+<div>
+  <span
+    class="cxd-TplField"
+  >
+    <span>
+      hello world
+    </span>
+  </span>
+</div>
+`;

packages/amis/src/Schema.ts

@@ -350,6 +350,7 @@ export type SchemaType =
   | 'words'
   | 'password'
   | 'multiline-text'
+  | 'amis'
 
   // 原生 input 类型
   | 'native-date'

packages/amis/src/index.tsx

@@ -152,6 +152,7 @@ import './renderers/Password';
 import './renderers/DateRange';
 import './renderers/MultilineText';
 import './renderers/OfficeViewer';
+import './renderers/AMIS';
 
 import './compat';
 import './schemaExtend';

packages/amis/src/renderers/AMIS.tsx

@@ -0,0 +1,50 @@
+import {
+  Renderer,
+  RendererProps,
+  SchemaClassName,
+  getPropValue
+} from 'amis-core';
+import React from 'react';
+import {
+  BaseSchema,
+  SchemaObject,
+  SchemaCollection,
+  SchemaIcon
+} from '../Schema';
+import {isPureVariable, resolveVariableAndFilter} from 'amis-core';
+
+/**
+ * 渲染数据里的 amis schema
+ * 文档：https://aisuda.bce.baidu.com/amis/zh-CN/components/amis
+ */
+export interface AIMSRenderSchema extends BaseSchema {
+  /**
+   * 指定类型
+   */
+  type: 'amis';
+
+  /**
+   * 类名
+   */
+  className?: SchemaClassName;
+}
+
+@Renderer({
+  type: 'amis'
+})
+export class AMISRenderer extends React.Component<RendererProps> {
+  render() {
+    const {render, props, schema} = this.props;
+    let value = getPropValue(this.props) || schema;
+    if (typeof value === 'string') {
+      try {
+        value = JSON.parse(value);
+      } catch (e) {
+        console.warn('amis value must be json string', e);
+        value = null;
+      }
+    }
+
+    return render('amis', value, props);
+  }
+}