@steedos/service-plugin-amis 2.3.0-beta.8 → 2.3.0

package/main/default/client/amis.render.client.js

@@ -5,17 +5,23 @@
  */
 
 ; (function () {
-        
+
+  const loadCss = (href)=>{
     try {
-        // 加载Amis css
+      // 加载Amis css
         let amisStyle = document.createElement("link");
         amisStyle.setAttribute("rel", "stylesheet");
         amisStyle.setAttribute("type", "text/css");
-        amisStyle.setAttribute("href", Steedos.absoluteUrl("/amis/amis.css"));
+        amisStyle.setAttribute("href", href);
         document.getElementsByTagName("head")[0].appendChild(amisStyle);
     } catch (error) {
         console.error(error)
     };
+  }
+  // loadCss(Steedos.absoluteUrl("/unpkg.com/amis/sdk/sdk.css"))
+  loadCss(Steedos.absoluteUrl("/unpkg.com/amis/sdk/helper.css"))
+  loadCss(Steedos.absoluteUrl("/unpkg.com/amis/sdk/iconfont.css"))
+  loadCss(Steedos.absoluteUrl("/amis/amis.css"))
     
     try {
         window['attrAccept'] = function (file, acceptedFiles) {
@@ -41,16 +47,16 @@
             return true;
           }
 
-        // 加载Amis SDK: 如果直接放到body中会导致meteor 编译后的 cordova.js 加载报错
+        // 加载Amis SDK: 如果直接放到body中会导致 meteor 编译后的 cordova.js 加载报错
         let amisSDKScript = document.createElement("script");
-        amisSDKScript.setAttribute("src", Steedos.absoluteUrl('/unpkg.com/@steedos-ui/amis@2.2.26/dist/amis-sdk.umd.min.js'));
+        amisSDKScript.setAttribute("src", Steedos.absoluteUrl('/unpkg.com/amis/sdk/sdk.js'));
         document.getElementsByTagName("head")[0].appendChild(amisSDKScript);
     } catch (error) {
         console.error(error)
     };
 
     const getAmisLng = ()=>{
-        locale = Creator.USER_CONTEXT.user.language
+        locale = Creator.USER_CONTEXT?.user?.language
         if(locale){
             locale = locale.replace('_', '-');
             locale = locale === 'en' ? 'en-US' : locale;
@@ -63,12 +69,12 @@
 
     // 此处不能使用import, client js 编译时会将import 转为require, 导致加载失败
     // import('/unpkg.com/@steedos-ui/amis/dist/amis-sdk.umd.min.js').then(() => {
-
         Promise.all([
             waitForThing(window, 'assetsLoaded'),
-            waitForThing(window, 'AmisSDK'),
+            waitForThing(window, 'amis'),
         ]).then(()=>{
-
+            window.React = window.__React;
+            window.ReactDOM = window.__ReactDOM;
             const AmisRenderers = [];
 
             const amisComps = lodash.filter(Builder.registry['meta-components'], function(item){ return item.componentName && item.amis?.render});
@@ -77,14 +83,33 @@
                 const Component = Builder.components.find(item => item.name === comp.componentName);
                 if (Component && !AmisRenderers.includes(comp.amis?.render.type)){
                     try {
+                        let AmisWrapper = Component.class
                         AmisRenderers.push(comp.amis?.render.type);
-                        AmisSDK.amis.Renderer(
+                        if(comp.componentType === 'amisSchema'){
+                            let amisReact = amisRequire('react');
+                            AmisWrapper = function(props){
+                              const { body, render } = props
+                              const [schema, setSchema] = amisReact.useState(null);
+                              amisReact.useEffect(()=>{
+                                const result = Component.class(props);
+                                if(result.then && typeof result.then === 'function'){
+                                  result.then((data)=>{
+                                    setSchema(data);
+                                  })
+                                }else{
+                                  setSchema(result)
+                                }
+                              }, [])
+                              return amisReact.createElement(amisReact.Fragment, null, amisReact.createElement(amisReact.Fragment, null, schema && render ? render('body', schema) : ''), amisReact.createElement(amisReact.Fragment, null, render ? render('body', body) : ''));
+                            }
+                          }
+                        amisRequire("amis").Renderer(
                             {
                                 type: comp.amis?.render.type,
                                 weight: comp.amis?.render.weight,
                                 autoVar: true,
                             }
-                        )(Component.class);
+                        )(AmisWrapper);
                     } catch(e){console.error(e)}
                 }
             });
@@ -178,7 +203,29 @@
                         }
                     }, env);
                 }
-                return (React.createElement("div", { className: "amis-scope" }, AmisSDK.AmisRender(schema, {data, name, locale: getAmisLng()}, Object.assign({}, AmisEnv, env))));
+                schema.scopeRef = (ref) => {
+                    try {
+                      if(!window.amisScopes){
+                        window.amisScopes = {};
+                      }
+                      if(name){
+                        window.amisScopes[name] = ref; 
+                      }
+                    } catch (error) {
+                      console.error('error', error)
+                    }
+                    
+                    return scoped = ref
+                  }
+
+                React.useEffect(()=>{
+                    amisRequire('amis/embed').embed(`.steedos-amis-render-scope-${name}`,schema, {data, name, locale: getAmisLng()}, Object.assign({}, AmisEnv, env))
+                  }, [])
+                return React.createElement("div", {
+                    className: "amis-scope"
+                  }, React.createElement("div", {
+                    className: `steedos-amis-render-scope-${name}`
+                  }));
             };
 
             const initMonaco = ()=>{
@@ -199,14 +246,13 @@
                     return Builder.initMonaco()
                 }
             }
-
             //Amis SDK 中已清理了monaco, 所以这里需要提前注册,否则会导致amis code类型报错
             initMonaco().catch((err)=>{
                 console.error(`Builder.initMonaco error: ${err}`);
             }).finally(()=>{
                 const language = getAmisLng()
                 axios.get(`/translations/amis/${language}.json`).then((res)=>{
-                    AmisSDK.amis.registerLocale(`${language}`, res.data)
+                    amisRequire("amis").registerLocale(`${language}`, res.data)
                     Builder.registerComponent(AmisRender, {
                         name: 'Amis',
                         inputs: [

package/main/default/client/creator.function.client.js

@@ -2,14 +2,14 @@
  * @Author: baozhoutao@steedos.com
  * @Date: 2022-05-20 17:42:20
  * @LastEditors: baozhoutao@steedos.com
- * @LastEditTime: 2022-07-26 16:52:16
+ * @LastEditTime: 2022-10-28 11:01:51
  * @Description: 提供辅助函数
  */
 (function(){
     const filtersAmisSchema = {
         "type": "page",
         "title": t("creator_filters"),
-        "name": "steedos-filters",
+        "name": "steedosFiltersPage",
         "body": [
           {
             "type": "form",
@@ -30,6 +30,7 @@
               }
             ],
             "id": "filtersForm",
+            "name": "filtersForm",
             "wrapWithPanel": false
           }
         ],
@@ -90,16 +91,16 @@
                 mask: false,
                 width: 550,
                 style: null,
-                extra: React.createElement(
+                extra: React17.createElement(
                     SteedosUI.components.Space, 
                     {}, 
                     [
-                        React.createElement(SteedosUI.components.Button, {
+                      React17.createElement(SteedosUI.components.Button, {
                             onClick: function(){
                                 SteedosUI.getRef(pageName)?.close();
                             }
                         } , t('cancel')), 
-                        React.createElement(SteedosUI.components.Button, {
+                        React17.createElement(SteedosUI.components.Button, {
                             onClick: canSave ? function(){
 
                                 const formValues = window.amisScopes[pageName].getComponentById("filtersForm").getValues()
@@ -137,7 +138,7 @@
                                 });
                                 }
                             } : function(){
-                                const formValues = window.amisScopes[pageName].getComponentById("filtersForm").getValues()
+                                const formValues = window.amisScopes[pageName].getComponentByName("filtersForm").getValues();
                                 const filters = window.amisConvert.conditionsToFilters(formValues.filters);
                                 Session.set("filter_items", filters);
                                 SteedosUI.getRef(pageName)?.close();

package/main/default/client/load.assets.client.js

@@ -0,0 +1,19 @@
+// 解决多个react 问题. 注册组件时, 使用 amis 自带的 react , 运行 steedos 相关组件时, 使用 全局 react
+window.addEventListener('message', function (event) {
+    const { data } = event;
+    if (data.type === 'Builder.loaded') {
+        if(Meteor.settings.public.page && Meteor.settings.public.page.assetUrls){
+            const defaultAssetsUrls = Meteor.settings.public.page.assetUrls.split(',')
+            Promise.all([
+                waitForThing(window, 'amis'),
+            ]).then(()=>{
+                window.__React = window.React;
+                window.__ReactDOM = window.ReactDOM;
+                window.React = amisRequire('react');
+                window.ReactDOM = amisRequire('react-dom');
+                window.ReactDom = window.ReactDOM;
+                Builder.registerRemoteAssets(defaultAssetsUrls);
+            })
+        } 
+    }
+})