From 828de7e1325bc8c239e1ce341c602c3521f74e81 Mon Sep 17 00:00:00 2001
From: 2betop <2betop.cn@gmail.com>
Date: Thu, 20 Aug 2020 12:04:14 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=20form=20=E5=BA=95=E4=B8=8B?=
 =?UTF-8?q?=E7=9A=84=20schemaApi=20=E6=9B=B4=E6=96=B0=E5=80=BC=E7=9A=84?=
 =?UTF-8?q?=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 examples/components/DocSearch.jsx | 16 +++---
 examples/index.html               |  5 --
 mock/service/form.js              | 84 +++++++++++++++----------------
 src/renderers/Form/Service.tsx    | 18 +++++++
 src/renderers/Service.tsx         | 19 ++++---
 src/store/service.ts              |  1 +
 6 files changed, 82 insertions(+), 61 deletions(-)
diff --git a/examples/components/DocSearch.jsx b/examples/components/DocSearch.jsx
index 5cf3cc01..117f96f2 100644
--- a/examples/components/DocSearch.jsx
+++ b/examples/components/DocSearch.jsx
@@ -31,14 +31,14 @@ const FormComponent = makeSchemaRenderer({
 
 export default class DocSearch extends React.Component {
   componentDidMount() {
-    const inputSelector = 'input[name="docsearch"]';
-    docsearch({
-      appId: 'S08MJHBHFJ',
-      apiKey: '5fba814bb773d08b5d2a3f6074f926a5',
-      indexName: 'gh_pages',
-      inputSelector,
-      debug: false
-    });
+    // const inputSelector = 'input[name="docsearch"]';
+    // docsearch({
+    //   appId: 'S08MJHBHFJ',
+    //   apiKey: '5fba814bb773d08b5d2a3f6074f926a5',
+    //   indexName: 'gh_pages',
+    //   inputSelector,
+    //   debug: false
+    // });
   }
 
   render() {
diff --git a/examples/index.html b/examples/index.html
index c1775cfc..96fea22a 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -18,10 +18,6 @@
     <link rel="stylesheet" href="bootstrap/dist/css/bootstrap.css" />
     <link rel="stylesheet" href="animate.css/animate.css" />
     <link rel="stylesheet" href="prismjs/themes/prism.css" />
-    <link
-      rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css"
-    />
     <!--DEPENDENCIES_INJECT_PLACEHOLDER-->
     <link rel="stylesheet" href="./doc.css" />
     <link rel="stylesheet" title="default" href="../scss/themes/default.scss" />
@@ -50,7 +46,6 @@
   <body>
     <div id="root" class="app-wrapper"></div>
     <script src="./mod.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
     <script type="text/javascript">
       var _hmt = _hmt || [];
 
diff --git a/mock/service/form.js b/mock/service/form.js
index 6e58a2eb..c7015f5e 100644
--- a/mock/service/form.js
+++ b/mock/service/form.js
@@ -1,49 +1,49 @@
-
 const predefined = {
-    tpl1: {
-        controls: [
-            {
-                type: 'text',
-                label: '动态字段1',
-                name: 'dy_1',
-                required: true
-            },
-
-            {
-                type: 'text',
-                label: '动态字段2',
-                name: 'dy_2'
-            }
-        ]
+  tpl1: {
+    data: {
+      dy_1: '还可以更新值'
     },
+    controls: [
+      {
+        type: 'text',
+        label: '动态字段1',
+        name: 'dy_1',
+        required: true
+      },
 
-    tpl2: {
-        type: 'panel',
-        title: '不是非得是 controls',
-        body: '也可以是其他渲染器'
-    },
+      {
+        type: 'text',
+        label: '动态字段2',
+        name: 'dy_2'
+      }
+    ]
+  },
 
-    tpl3: {
-        type: 'tpl',
-        tpl: '简单点好。'
-    },
+  tpl2: {
+    type: 'panel',
+    title: '不是非得是 controls',
+    body: '也可以是其他渲染器'
+  },
+
+  tpl3: {
+    type: 'tpl',
+    tpl: '简单点好。'
+  }
 };
 
-module.exports = function(req, res) {
-    const tpl = req.query.tpl;
+module.exports = function (req, res) {
+  const tpl = req.query.tpl;
 
-    if (predefined[tpl]) {
-        return res.json({
-            status: 0,
-            msg: '',
-            data: predefined[tpl]
-        });
-    }
-
-    else {
-        return res.json({
-            status: 404,
-            msg: 'Not Found'
-        });
-    }
-}
\ No newline at end of file
+  if (predefined[tpl]) {
+    return res.json({
+      status: 0,
+      msg: '',
+      data: predefined[tpl]
+    });
+  } else {
+    return res.json({
+      status: 404,
+      msg: 'Not Found'
+    });
+  }
+};
diff --git a/src/renderers/Form/Service.tsx b/src/renderers/Form/Service.tsx
index 3226fc42..f0142ded 100644
--- a/src/renderers/Form/Service.tsx
+++ b/src/renderers/Form/Service.tsx
@@ -71,6 +71,24 @@ export class ServiceRenderer extends BasicService {
     return super.afterDataFetch(payload);
   }
 
+  // schema 接口可能会返回数据，需要把它同步到表单上，否则会没用。
+  afterSchemaFetch(schema: any) {
+    const formStore: IFormStore = this.props.formStore;
+    const onChange = this.props.onChange;
+
+    // 有可能有很多层 serivce，这里需要注意。
+    if (formStore && this.isFormMode()) {
+      const keys = isObject(schema?.data) ? Object.keys(schema.data) : [];
+
+      if (keys.length) {
+        formStore.setValues(schema.data);
+        onChange(schema.data[keys[0]], keys[0]);
+      }
+    }
+
+    return super.afterSchemaFetch(schema);
+  }
+
   isFormMode() {
     const {
       store,
diff --git a/src/renderers/Service.tsx b/src/renderers/Service.tsx
index 0565a92a..3e523cb9 100644
--- a/src/renderers/Service.tsx
+++ b/src/renderers/Service.tsx
@@ -48,6 +48,7 @@ export default class Service extends React.Component<ServiceProps> {
     this.silentReload = this.silentReload.bind(this);
     this.initInterval = this.initInterval.bind(this);
     this.afterDataFetch = this.afterDataFetch.bind(this);
+    this.afterSchemaFetch = this.afterSchemaFetch.bind(this);
   }
 
   componentDidMount() {
@@ -82,7 +83,7 @@ export default class Service extends React.Component<ServiceProps> {
           successMessage: fetchSuccess,
           errorMessage: fetchFailed
         })
-        .then(this.initInterval);
+        .then(this.afterSchemaFetch);
   }
 
   componentWillUnmount() {
@@ -103,10 +104,12 @@ export default class Service extends React.Component<ServiceProps> {
     } = this.props;
 
     if (isEffectiveApi(schemaApi, store.data, initFetchSchema)) {
-      store.fetchSchema(schemaApi, store.data, {
-        successMessage: fetchSuccess,
-        errorMessage: fetchFailed
-      });
+      store
+        .fetchSchema(schemaApi, store.data, {
+          successMessage: fetchSuccess,
+          errorMessage: fetchFailed
+        })
+        .then(this.afterSchemaFetch);
     }
 
     if (isEffectiveApi(api, store.data, initFetch, initFetchOn)) {
@@ -123,6 +126,10 @@ export default class Service extends React.Component<ServiceProps> {
     this.initInterval(data);
   }
 
+  afterSchemaFetch(schema: any) {
+    this.initInterval(schema);
+  }
+
   initInterval(value: any) {
     const {interval, silentPolling, stopAutoRefreshWhen, data} = this.props;
 
@@ -161,7 +168,7 @@ export default class Service extends React.Component<ServiceProps> {
           successMessage: fetchSuccess,
           errorMessage: fetchFailed
         })
-        .then(this.initInterval);
+        .then(this.afterSchemaFetch);
     }
 
     if (isEffectiveApi(api, store.data)) {
diff --git a/src/store/service.ts b/src/store/service.ts
index 9e03815e..1df1b154 100644
--- a/src/store/service.ts
+++ b/src/store/service.ts
@@ -407,6 +407,7 @@ export const ServiceStore = iRendererStore
         }
 
         self.initializing = false;
+        return json.data;
       } catch (e) {
         const root = getRoot(self) as IRendererStore;
         if (!isAlive(root) || root.storeType !== 'RendererStore') {
