@cloudbase/framework-plugin-low-code 0.7.0 → 0.7.1

package/template/src/handlers/render.jsx

@@ -1,17 +1,117 @@
 import * as React from 'react';
-import { useRef } from 'react';
 import * as _ from 'lodash';
-import { CompRenderer, ForContext } from './FieldMiddleware/renderer';
+import { ForContext, getComponentRenderList } from './FieldMiddleware/renderer';
 import { isScopeSlot } from '../utils/index';
+import { observer } from 'mobx-react-lite';
 
-function getComponentChildren(component) {
+export function getComponentChildren(component, context = {}) {
   const { properties } = component;
   if (!properties) {
     return [];
   }
-  return Object.values(properties).sort(
+  const list = Object.values(properties).sort(
     (a, b) => (a['x-index'] || 0) - (b['x-index'] || 0)
   );
+  const {
+    virtualFields,
+    codeContext,
+    scopeContext,
+    forContext,
+    injectContext = {},
+    dataContext,
+    updateContext,
+  } = context;
+
+  return list.map((schema) => {
+    return getRenderList({
+      key: schema.key,
+      componentSchema: schema,
+      rootNode: false,
+      renderSlot: false,
+      virtualFields,
+      codeContext,
+      scopeContext,
+      forContext,
+      injectContext,
+      context: dataContext,
+      updateContext,
+    });
+  });
+}
+
+function getRenderList(props) {
+  const {
+    key = '',
+    className,
+    virtualFields,
+    componentSchema,
+    renderSlot,
+    rootNode = true,
+    codeContext,
+    scopeContext = {},
+    context = {},
+    updateContext,
+    forContext = {},
+  } = props;
+
+  const { 'x-props': xProps, properties = {} } = componentSchema;
+
+  // 判断是否为 slot
+  const isSlot = !xProps;
+  if (isSlot && !(renderSlot || rootNode)) {
+    return null;
+  }
+
+  // const preClassName = useRef();
+
+  // wrapperClass
+  const containerEl = Object.values(properties)[0];
+  if (containerEl && containerEl['x-props'] && className) {
+    let { classNameList = [] } = containerEl['x-props'];
+
+    // 先替换掉先前计算出来的className部分
+    // if (preClassName.current) {
+    //   if (preClassName.current !== className) {
+    //     classNameList = classNameList.filter(
+    //       (clsName) => clsName !== preClassName.current
+    //     );
+    //     preClassName.current = className;
+    //   }
+    // } else {
+    //   preClassName.current = className;
+    // }
+
+    containerEl['x-props'].classNameList = Array.from(
+      new Set([className, ...classNameList])
+    );
+  }
+
+  if (xProps && xProps.sourceKey) {
+    const { sourceKey } = xProps;
+    const Field = virtualFields[sourceKey];
+    if (!Field) {
+      return (
+        <div style={{ color: 'red' }}>
+          组件<em>{sourceKey}</em>未找到
+        </div>
+      );
+    }
+  }
+
+  return getComponentRenderList({
+    key,
+    componentSchema,
+    id: componentSchema.key,
+    xProps,
+    emitEvents: componentSchema.emitEvents || [],
+    virtualFields,
+    renderSlot,
+    codeContext,
+    scopeContext,
+    forContext,
+    context,
+    updateContext,
+  });
 }
 
 export function generateSlotMetaMap(componentSchema, context, options = {}) {
@@ -36,14 +136,10 @@ export function generateSlotMetaMap(componentSchema, context, options = {}) {
         node: isHOC
           ? (props) => {
               let clonedScopeContext = _.cloneDeep(scopeContext);
-              _.set(
-                clonedScopeContext,
-                `${componentSchema.key}.${child.key}`,
-                props
-              );
+              _.set(clonedScopeContext, `${componentSchema.key}.${key}`, props);
               return (
                 <AppRender
-                  key={child.key}
+                  key={key}
                   componentSchema={child}
                   renderSlot={options?.renderSlot}
                   virtualFields={virtualFields}
@@ -58,7 +154,7 @@ export function generateSlotMetaMap(componentSchema, context, options = {}) {
               return (
                 <ForContext.Provider value={forContext}>
                   <AppRender
-                    key={child.key}
+                    key={key}
                     componentSchema={child}
                     renderSlot={options?.renderSlot}
                     virtualFields={virtualFields}
@@ -76,89 +172,10 @@ export function generateSlotMetaMap(componentSchema, context, options = {}) {
   return slots;
 }
 
-export function AppRender(props) {
-  const {
-    className,
-    virtualFields,
-    componentSchema,
-    renderSlot,
-    rootNode = true,
-    codeContext,
-    scopeContext = {},
-    context = {},
-    updateContext,
-  } = props;
-
-  const { 'x-props': xProps, properties = {} } = componentSchema;
-
-  // 判断是否为 slot
-  const isSlot = !xProps;
-  if (isSlot && !(renderSlot || rootNode)) {
-    return null;
-  }
-
-  const preClassName = useRef();
-
-  // wrapperClass
-  const containerEl = Object.values(properties)[0];
-  if (containerEl && containerEl['x-props'] && className) {
-    let { classNameList = [] } = containerEl['x-props'];
-
-    // 先替换掉先前计算出来的className部分
-    if (preClassName.current) {
-      if (preClassName.current !== className) {
-        classNameList = classNameList.filter(
-          (clsName) => clsName !== preClassName.current
-        );
-        preClassName.current = className;
-      }
-    } else {
-      preClassName.current = className;
-    }
-
-    containerEl['x-props'].classNameList = [className, ...classNameList];
-  }
-
-  if (xProps && xProps.sourceKey) {
-    const { sourceKey } = xProps;
-    const Field = virtualFields[sourceKey];
-    if (!Field) {
-      return (
-        <div style={{ color: 'red' }}>
-          组件<em>{sourceKey}</em>未找到
-        </div>
-      );
-    }
-  }
-
-  const children = getComponentChildren(componentSchema);
-
-  return (
-    <CompRenderer
-      id={componentSchema.key}
-      xProps={xProps}
-      emitEvents={componentSchema.emitEvents || []}
-      componentSchema={componentSchema}
-      virtualFields={virtualFields}
-      renderSlot={renderSlot}
-      codeContext={codeContext}
-      scopeContext={scopeContext}
-      context={context}
-      updateContext={updateContext}
-    >
-      {children.map((comp) => (
-        <AppRender
-          key={comp.key}
-          componentSchema={comp}
-          rootNode={false}
-          renderSlot={false}
-          virtualFields={virtualFields}
-          codeContext={codeContext}
-          scopeContext={scopeContext}
-          context={context}
-          updateContext={updateContext}
-        />
-      ))}
-    </CompRenderer>
-  );
-}
+export const AppRender = observer(function (props) {
+  return getRenderList({
+    ...props,
+    forContext: React.useContext(ForContext),
+    injectContext: {},
+  });
+});

package/template/src/handlers/utils/common.js

@@ -84,7 +84,7 @@ export function resolveComponentProps(props, isPlainProps) {
       ...props,
     };
   }
-  const { data = {}, events = [], ...restProps } = props;
+  const { data = {}, events = [], $node, ...restProps } = props;
   const customProps = { ...data };
   const builtinProps = [
     // react 保留字

package/template/src/pages/app.tpl

@@ -78,37 +78,19 @@ initLifeCycle({
 export default function App() {
   // 检查权限
   const [weDaHasLogin, setWeDaHasLogin] = React.useState(false);
-  const context = React.useRef(observable({})).current;
+  const dataContextRef =  React.useRef(observable({}))
+  const context = dataContextRef.current;
   const containerRef = React.useRef(null);
   const microApp = React.useRef(null);
   const pureSrc = '<%= pageSource %>';
   const isPure = !!pureSrc;
 
-  /**
-   * 更新数据容器的上下文的方法
-   * 会传递到事件emit的地方，将从组件获取到的数据data赋值给上下文
-   * 当组件卸载时，传过来的data为undefined即可
-   * {
-   *   id1: [{...}],
-   *   id2: {...},
-   *   id3: undefined,
-   *   id4: null,
-   *   ...
-   * }
-   * @param id
-   * @param data
-   */
-  const updateContext = (id, data) => {
-    if (id) {
-      context[id] = { data };
-    }
-  }
-
   React.useEffect(() => {
     Object.assign($page, {
       id: '<%= pageName %>',
       state: observable(initPageState),
       computed: createComputed(computed),
+      // _context: context,
       handler,
     });
 
@@ -134,10 +116,10 @@ export default function App() {
   }, []);
 
   React.useEffect(() => {
-    $page.widgets = createWidgets(widgetsContext, dataBinds, {}, context);
+    $page.widgets = createWidgets(widgetsContext, dataBinds, {}, dataContextRef.current);
     // widgets 内的 dataBinds 可能需要关联 widgets，需要重新执行 dataBinds
     retryDataBinds();
-  }, [context]);
+  }, [dataContextRef.current]);
 
   // Web 环境页面级别生命周期
   if (!process.env.isMiniprogram) {
@@ -179,8 +161,27 @@ export default function App() {
         <AppRender pageListenerInstances={pageListenerInstances}
           virtualFields={virtualFields}
           componentSchema={componentSchema}
-          context={context}
-          updateContext={updateContext}
+          context={dataContextRef.current}
+           /**
+            * 更新数据容器的上下文的方法
+            * 会传递到事件emit的地方，将从组件获取到的数据data赋值给上下文
+            * 当组件卸载时，传过来的data为undefined即可
+            * {
+            *   id1: [{...}],
+            *   id2: {...},
+            *   id3: undefined,
+            *   id4: null,
+            *   ...
+            * }
+            * @param id
+            * @param data
+            */
+          updateContext={(id, data) => {
+            if (id) {
+              dataContextRef.current[id] = { data };
+              // console.log('111', context[id])
+            }
+          }}
         />
       )}
     </div>

package/template/src/utils/formatEnum.js

@@ -0,0 +1,42 @@
+import { observable } from 'mobx';
+let loading = {};
+export let enumOptions = observable({});
+export function formatEnum(path, optionname) {
+  // 判断是单选还是多选
+  let isSingle = Array.isArray(path);
+  // 获取到options
+  let parseOptions = getEnumOptions(optionname);
+  if (parseOptions === '') {
+    return !isSingle ? path : path.join(',');
+  }
+  let multiTmp = [];
+  let value = !isSingle
+    ? JSON.parse(parseOptions)?.find((item) => item?.key === path)?.value
+    : JSON.parse(parseOptions)
+        ?.filter((item) => path.some((pathValue) => item?.key === pathValue))
+        .map((item) => multiTmp.push(item?.value));
+  // 对多选或者单选有不同处理
+  return !isSingle ? value : multiTmp?.join(',');
+}
+function getEnumOptions(optionName) {
+  if (enumOptions[optionName]) {
+    return enumOptions[optionName];
+  }
+  if (!loading[optionName]) {
+    loading[optionName] = true;
+    getGeneralOptions(optionName).then((data) => {
+      enumOptions[optionName] = data?.Items[0]?.Config;
+    });
+  }
+  return '';
+}
+export async function getGeneralOptions(optionName) {
+  return app.cloud.callWedaApi({
+    action: 'DescribeGeneralOptionsDetailList',
+    data: {
+      PageSize: 1,
+      PageIndex: 1,
+      LikeNameOrTitle: optionName,
+    },
+  });
+}