From 18f149e0e8b336b2608e2c55f26ba0b796ceab59 Mon Sep 17 00:00:00 2001
From: "wuji.xwt" <wuji.xwt@alibaba-inc.com>
Date: Tue, 28 Jul 2020 14:08:34 +0800
Subject: [PATCH 1/3] feat: plugin preview

---
 packages/plugin-sample-preview/demo/usage.md | 24 ++++++++++
 packages/plugin-sample-preview/package.json  |  4 +-
 packages/plugin-sample-preview/src/index.tsx | 46 ++++++++++++--------
 3 files changed, 55 insertions(+), 19 deletions(-)
 create mode 100644 packages/plugin-sample-preview/demo/usage.md

diff --git a/packages/plugin-sample-preview/demo/usage.md b/packages/plugin-sample-preview/demo/usage.md
new file mode 100644
index 000000000..d053100a0
--- /dev/null
+++ b/packages/plugin-sample-preview/demo/usage.md
@@ -0,0 +1,24 @@
+---
+title: 基本使用
+order: 1
+---
+
+````jsx
+import React, { PureComponent } from 'react';
+import ReactDOM from 'react-dom';
+import SamplePreview from '@ali/lowcode-plugin-sample-preview';
+
+class Demo extends PureComponent {
+  render() {
+    return (
+      <div>
+         <SamplePreview />
+      </div>
+    )
+  }
+}
+
+ReactDOM.render((
+  <Demo />
+), mountNode);
+````
\ No newline at end of file
diff --git a/packages/plugin-sample-preview/package.json b/packages/plugin-sample-preview/package.json
index 66edd7417..e02b421b7 100644
--- a/packages/plugin-sample-preview/package.json
+++ b/packages/plugin-sample-preview/package.json
@@ -9,6 +9,7 @@
   "main": "lib/index.js",
   "module": "es/index.js",
   "scripts": {
+    "start": "build-scripts start",
     "build": "build-scripts build --skip-demo",
     "test": "ava",
     "test:snapshot": "ava --update-snapshots"
@@ -29,7 +30,8 @@
     "@types/react-dom": "^16.9.4",
     "build-plugin-component": "^0.2.11",
     "build-plugin-fusion": "^0.1.0",
-    "build-plugin-moment-locales": "^0.1.0"
+    "build-plugin-moment-locales": "^0.1.0",
+    "@ali/lowcode-react-renderer": "^0.8.0"
   },
   "publishConfig": {
     "registry": "https://registry.npm.alibaba-inc.com"
diff --git a/packages/plugin-sample-preview/src/index.tsx b/packages/plugin-sample-preview/src/index.tsx
index df10c5466..d3b6113b8 100644
--- a/packages/plugin-sample-preview/src/index.tsx
+++ b/packages/plugin-sample-preview/src/index.tsx
@@ -1,35 +1,45 @@
-import React from 'react';
-import { Button } from '@alifd/next';
-import { PluginProps } from '@ali/lowcode-types';
-import { Designer } from '@ali/lowcode-designer';
+import React, { useState } from 'react';
+import { Button, Dialog } from '@alifd/next';
+// import { PluginProps } from '@ali/lowcode-types';
+// import { Designer } from '@ali/lowcode-designer';
+// import ReactRenderer from '@ali/lowcode-react-renderer';
 import './index.scss';
 
 const SamplePreview = ({ editor }: PluginProps) => {
-  const handleClick = () => {
+  const [data, setData] = useState({});
+  const [visible, setVisible] = useState(false);
+  const handleClick = async () => {
+    if (!editor) {
+      return;
+    }
     const designer = editor.get(Designer);
     if (designer) {
       console.info('save schema:', designer.schema);
-      localStorage.setItem('lce-dev-store', JSON.stringify(designer.schema));
-      fetch('http://30.5.157.206:3000/legao/save.json', {
-        method: 'POST',
-        body: JSON.stringify(designer.schema),
-        headers: new Headers({
-          'Content-Type': 'application/json',
-        }),
-        mode: 'cors',
-      })
-        .then((res) => res.json())
-        .then(() => {
-          window.open('http://30.5.157.206:3333/', 'preview');
-        });
+
+      const { components } = await editor.get('assets');
+      setData({
+        schema: designer.schema,
+        components,
+      });
+      setVisible(true);
     }
   };
 
+  const { schema, components } = data;
   return (
     <div className="lowcode-plugin-sample-preview">
       <Button type="primary" onClick={handleClick}>
         预览
       </Button>
+      <Dialog
+        visible={visible}
+        footer={false}
+      >
+        <ReactRenderer 
+          schema={schema}
+          components={components}
+        />
+      </Dialog>
     </div>
   );
 };

From 9035a8554cdd966ca7cde024d8ee8e4303caa619 Mon Sep 17 00:00:00 2001
From: "wuji.xwt" <wuji.xwt@alibaba-inc.com>
Date: Tue, 28 Jul 2020 14:14:32 +0800
Subject: [PATCH 2/3] chore: import packages

---
 packages/plugin-sample-preview/src/index.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/plugin-sample-preview/src/index.tsx b/packages/plugin-sample-preview/src/index.tsx
index d3b6113b8..3060b69d0 100644
--- a/packages/plugin-sample-preview/src/index.tsx
+++ b/packages/plugin-sample-preview/src/index.tsx
@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
 import { Button, Dialog } from '@alifd/next';
-// import { PluginProps } from '@ali/lowcode-types';
-// import { Designer } from '@ali/lowcode-designer';
-// import ReactRenderer from '@ali/lowcode-react-renderer';
+import { PluginProps } from '@ali/lowcode-types';
+import { Designer } from '@ali/lowcode-designer';
+import ReactRenderer from '@ali/lowcode-react-renderer';
 import './index.scss';
 
 const SamplePreview = ({ editor }: PluginProps) => {

From 69a2a8998f340d8568705262da79c6c865bd0dd5 Mon Sep 17 00:00:00 2001
From: "wuji.xwt" <wuji.xwt@alibaba-inc.com>
Date: Tue, 28 Jul 2020 14:21:27 +0800
Subject: [PATCH 3/3] fix: schema should be componentsTree

---
 packages/plugin-sample-preview/src/index.tsx | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/plugin-sample-preview/src/index.tsx b/packages/plugin-sample-preview/src/index.tsx
index 3060b69d0..c6c6c38c5 100644
--- a/packages/plugin-sample-preview/src/index.tsx
+++ b/packages/plugin-sample-preview/src/index.tsx
@@ -8,7 +8,7 @@ import './index.scss';
 const SamplePreview = ({ editor }: PluginProps) => {
   const [data, setData] = useState({});
   const [visible, setVisible] = useState(false);
-  const handleClick = async () => {
+  async function handleClick() {
     if (!editor) {
       return;
     }
@@ -25,6 +25,10 @@ const SamplePreview = ({ editor }: PluginProps) => {
     }
   };
 
+  function handleClose() {
+    setVisible(false);
+  }
+
   const { schema, components } = data;
   return (
     <div className="lowcode-plugin-sample-preview">
@@ -34,11 +38,12 @@ const SamplePreview = ({ editor }: PluginProps) => {
       <Dialog
         visible={visible}
         footer={false}
+        onClose={handleClose}
       >
-        <ReactRenderer 
-          schema={schema}
+        {visible && <ReactRenderer 
+          schema={schema.componentsTree[0]}
           components={components}
-        />
+        />}
       </Dialog>
     </div>
   );