From d4ab19a671964e00c32785177fcbb8115925bd7b Mon Sep 17 00:00:00 2001
From: "wuji.xwt" <wuji.xwt@alibaba-inc.com>
Date: Thu, 3 Sep 2020 10:20:35 +0800
Subject: [PATCH] docs: i18n/dataSource demo for React Renderer

Link: https://code.aone.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/codereview/3642343

* docs: add dataSource demo

* docs: i18n demo
---
 packages/react-renderer/demo/config/utils.js  |  3 +-
 packages/react-renderer/demo/dataSource.md    | 37 +++++++++++++
 packages/react-renderer/demo/i18n.md          | 42 +++++++++++++++
 .../react-renderer/demo/schemas/compose.js    | 54 ++++++++++++++-----
 .../react-renderer/demo/schemas/dataSource.js | 37 +++++++++++++
 packages/react-renderer/demo/schemas/i18n.js  | 20 +++++++
 6 files changed, 178 insertions(+), 15 deletions(-)
 create mode 100644 packages/react-renderer/demo/dataSource.md
 create mode 100644 packages/react-renderer/demo/i18n.md
 create mode 100644 packages/react-renderer/demo/schemas/dataSource.js
 create mode 100644 packages/react-renderer/demo/schemas/i18n.js

diff --git a/packages/react-renderer/demo/config/utils.js b/packages/react-renderer/demo/config/utils.js
index 86c804851..ca179e9d2 100644
--- a/packages/react-renderer/demo/config/utils.js
+++ b/packages/react-renderer/demo/config/utils.js
@@ -1,9 +1,8 @@
-import { Message, Dialog } from '@alifd/next';
+import { Message } from '@alifd/next';
 import moment from 'moment';
 
 export default {
   Message,
-  Dialog,
   moment,
   test: function(msg) {
     this.Message.notice(msg);
diff --git a/packages/react-renderer/demo/dataSource.md b/packages/react-renderer/demo/dataSource.md
new file mode 100644
index 000000000..7167c8025
--- /dev/null
+++ b/packages/react-renderer/demo/dataSource.md
@@ -0,0 +1,37 @@
+---
+title: 数据源使用
+order: 4
+---
+
+````jsx
+import React, { PureComponent } from 'react';
+import ReactDOM from 'react-dom';
+import ReactRenderer from '@ali/lowcode-react-renderer';
+import schema from './schemas/dataSource';
+import components from './config/components/index';
+import utils from './config/utils';
+import constants from './config/constants';
+
+class Demo extends PureComponent {
+  static displayName = 'renderer-demo';
+  render() {
+    return (
+      <div className="demo">
+        <ReactRenderer
+          key={schema.fileName}
+          schema={schema}
+          components={components}
+          appHelper={{
+            utils,
+            constants
+          }}
+        />
+      </div>
+    );
+  }
+}
+
+ReactDOM.render((
+  <Demo />
+), mountNode);
+````
diff --git a/packages/react-renderer/demo/i18n.md b/packages/react-renderer/demo/i18n.md
new file mode 100644
index 000000000..ebca94fae
--- /dev/null
+++ b/packages/react-renderer/demo/i18n.md
@@ -0,0 +1,42 @@
+---
+title: 国际化
+order: 5
+---
+
+````jsx
+import React, { PureComponent } from 'react';
+import ReactDOM from 'react-dom';
+import ReactRenderer from '@ali/lowcode-react-renderer';
+import schema from './schemas/i18n';
+import components from './config/components/index';
+import utils from './config/utils';
+import constants from './config/constants';
+
+class Demo extends PureComponent {
+  static displayName = 'renderer-demo';
+  render() {
+    return (
+      <div className="demo">
+        <ReactRenderer
+          key={schema.fileName}
+          schema={schema}
+          components={components}
+          appHelper={{
+            utils,
+            constants
+          }}
+          locale="zh-CN"
+          messages={{
+            "hello": "你好",
+            "china": "中国"
+          }}
+        />
+      </div>
+    );
+  }
+}
+
+ReactDOM.render((
+  <Demo />
+), mountNode);
+````
diff --git a/packages/react-renderer/demo/schemas/compose.js b/packages/react-renderer/demo/schemas/compose.js
index 213362d25..9cd6f60ec 100644
--- a/packages/react-renderer/demo/schemas/compose.js
+++ b/packages/react-renderer/demo/schemas/compose.js
@@ -7,8 +7,33 @@ export default {
   children: [
     {
       "componentName": "Dropdown",
-      "props": {  "trigger": [{    "componentName": "Button",    "props": {      "type": "primary"    },    "children": "确定"  }],  "triggerType": "click"},
-      "children": [{  "componentName": "Menu",  "props": {    "style": {      "width": 200    }  },  "children": [{    "componentName": "MenuItem",    "props": {},    "children": "Option 1"  }, {    "componentName": "MenuItem",    "props": {      "disabled": false    },    "children": "option 2"  }, {    "componentName": "MenuItem",    "props": {      "disabled": false    },    "children": "option 3"  }]}]
+      "props": {
+        "trigger": [
+          {
+            "componentName": "Button",
+            "props": {
+              "type": "primary"
+            },
+            "children": "确定"  
+          }
+        ],  
+        "triggerType": "click"
+      },
+      "children": [
+        {
+          "componentName": "Menu",
+          "props": {
+            "style": {
+              "width": 200
+            }  
+          },
+          "children": [
+            { "componentName": "MenuItem", "props": {}, "children": "Option 1"  },
+            { "componentName": "MenuItem", "props": { "disabled": false }, "children": "option 2" },
+            { "componentName": "MenuItem", "props": { "disabled": false }, "children": "option 3" }
+          ]
+        }
+      ]
     },
     {
       "componentName": "Menu",
@@ -17,17 +42,20 @@ export default {
           "width": 200
         }
       },
-      "children": [{
-        "componentName": "MenuItem",
-        "props": {
-        },
-        "children": "Option 1"
-      }, {
-        "componentName": "MenuItem",
-        "props": {
-        },
-        "children": "Option 2"
-      }]
+      "children": [
+        {
+          "componentName": "MenuItem",
+          "props": {
+          },
+          "children": "Option 1"
+        }, 
+        {
+          "componentName": "MenuItem",
+          "props": {
+          },
+          "children": "Option 2"
+        }
+      ]
     }
   ]
 };
diff --git a/packages/react-renderer/demo/schemas/dataSource.js b/packages/react-renderer/demo/schemas/dataSource.js
new file mode 100644
index 000000000..65f609aa1
--- /dev/null
+++ b/packages/react-renderer/demo/schemas/dataSource.js
@@ -0,0 +1,37 @@
+export default {
+  "componentName": "Page",
+  "fileName": "dataSource",
+  "props": {},
+  "children": [{
+    "componentName": "Div",
+    "props": {},
+    "children": [{
+      "componentName": "Text",
+      "props": {
+        "text": "{{this.item.title}}"
+      }
+    }, {
+      "componentName": "Switch",
+      "props": {
+        "checkedChildren": "开",
+        "unCheckedChildren": "关",
+        "checked": "{{this.item.done}}"
+      }
+    }],
+    "loop": "{{this.dataSourceMap.todos.data}}"
+  }],
+  "dataSource": {
+    "list": [{
+      "id": "todos",
+      "isInit": true,
+      "type": "jsonp",
+      "options": {
+        "method": "GET",
+        "uri": "https://mocks.alibaba-inc.com/mock/D8iUX7zB/todo_getAll"
+      },
+      "dataHandler": function dataHandler(data) {
+        return data.data;
+      }
+    }]
+  }
+}
\ No newline at end of file
diff --git a/packages/react-renderer/demo/schemas/i18n.js b/packages/react-renderer/demo/schemas/i18n.js
new file mode 100644
index 000000000..6e70aa098
--- /dev/null
+++ b/packages/react-renderer/demo/schemas/i18n.js
@@ -0,0 +1,20 @@
+export default {
+  "componentName": "Page",
+  "fileName": "i18n",
+  "props": {},
+  "children": [{
+    "componentName": "Div",
+    "props": {},
+    "children": [{
+      "componentName": "Text",
+      "props": {
+        "text": "{{this.i18n('hello')}}"
+      }
+    }, {
+      "componentName": "Text",
+      "props": {
+        "text": "{{this.i18n('china')}}"
+      }
+    }]
+  }]
+}
\ No newline at end of file