@cloudbase/framework-plugin-low-code 0.7.0 → 0.7.2-beta.1

package/template/src/handlers/FieldMiddleware/renderer.jsx

@@ -7,7 +7,7 @@ import { get, set } from 'lodash';
 import { $page } from '../../app/global-api';
 import { getDom } from '../utils/widgets';
 import { checkVisible } from '../../utils/index';
-import { generateSlotMetaMap } from '../render';
+import { getComponentChildren, generateSlotMetaMap } from '../render';
 
 export const ForContext = createContext({});
 
@@ -35,275 +35,434 @@ function generateSlotMap(slots, forContext = undefined) {
   return map;
 }
 
-export const CompRenderer = observer(function (props) {
-  const {
-    id: compId,
-    xProps,
-    virtualFields,
-    renderSlot,
-    codeContext,
-    scopeContext,
-    context = {},
-    updateContext,
-    emitEvents = [],
-    componentSchema = {},
-  } = props;
-
-  const indexRef = useRef();
-  const typeRef = useRef();
+function getSafeComponentProps({ style, classNameList }) {
+  const componentProps = {};
 
-  const isInComposite = !!props.codeContext;
-  // 判断 widgets 是从 page 来的，还是组件来的
-  const widgetsData = !isInComposite
-    ? $page.widgets[compId]
-    : codeContext.$WEAPPS_COMP.widgets[compId];
-
-  if (!xProps) {
-    return props.children;
+  if (classNameList.length) {
+    componentProps.className = classNameList.join(' ');
   }
 
-  const {
-    commonStyle = {},
-    sourceKey,
-    data = {},
-    dataBinds,
-    listenerInstances,
-    styleBind,
-    classNameList = [],
-    classNameListBind,
-    staticResourceAttribute = [],
-  } = xProps;
-  const Field = virtualFields[sourceKey];
-  const parentForItems = useContext(ForContext);
-
-  const _context = {
-    scopeContext,
-    forContext: parentForItems,
-    codeContext,
-    dataContext: context,
-  };
+  if (style && Object.keys(style).length) {
+    componentProps.style = style;
+  }
+  return componentProps;
+}
 
-  // 组件最终用于执行的事件函数
-  const emit = useCallback(
-    (trigger, eventDetail, forItems, scopeContext) => {
-      const listeners = listenerInstances || [];
-
-      // 如果是数据容器，则将传过来的data，赋值给容器上下文context
-      if (
-        componentSchema?.compConfig?.isDataContainer &&
-        !listeners?.some((listener) => listener.trigger === 'onDataChange')
-      ) {
-        listeners?.push({
-          key: `wa${Date.now().toString().slice(-8)}`,
-          trigger: 'onDataChange',
-          isCapturePhase: false,
-          data: {},
-          dataBinds: {},
-          instanceFunction: ({ event }) => {
-            return updateContext(compId, event?.detail?.data);
-          },
-        });
+// TODO: 需要不断移除 dataBinds(style/classList)
+function getBindData({
+  widgetData,
+  forItems,
+  scopeContext,
+  codeContext,
+  commonStyle = {},
+  classNameList = [],
+}) {
+  // bindData
+  if (Array.isArray(widgetData)) {
+    widgetData =
+      forItems.forIndexes === void 0 || widgetData.length === 0
+        ? {}
+        : get(widgetData, getForIndexes(forItems, widgetData));
+  }
+  widgetData = widgetData || {};
+  const fieldData = { ...widgetData };
+
+  const isRootNode = widgetData && !widgetData.parent;
+  const isInComposite = !!codeContext;
+
+  // 再次计算 scope value
+  for (let key in fieldData) {
+    if (Object.prototype.hasOwnProperty.call(fieldData, key)) {
+      const value = fieldData[key];
+      if (value && value.__type === 'scopedValue') {
+        try {
+          fieldData[key] = value.getValue(scopeContext);
+        } catch (e) {
+          console.warn(`Error computing data bind '${key}' error:`, e);
+          fieldData[key] = '';
+        }
       }
+    }
+  }
 
-      let event = { detail: eventDetail, name: trigger };
-      forItems = {
-        ...forItems,
-        forIndexes: getForIndexes(forItems, widgetsData),
-      };
-      emitEvent(
-        trigger,
-        listeners,
-        {
-          event,
-          customEventData: event,
-          forItems,
-        },
-        scopeContext,
-        context
-      );
-    },
-    [props]
-  );
-
-  // 选区最终用于执行的事件函数
-  const emitSB = useCallback(
-    (trigger, eventDetail, forItems, scopeContext, fieldData) => {
-      const listeners =
-        indexRef?.current !== undefined &&
-        typeRef?.current &&
-        fieldData?.[typeRef.current]?.[indexRef.current]?.selectableBlock?.[
-          'x-props'
-        ]?.listenerInstances;
-      let event = { detail: eventDetail, name: trigger };
-      forItems = {
-        ...forItems,
-        forIndexes: getForIndexes(forItems, widgetsData),
-      };
-      emitEvent(
-        trigger,
-        listeners,
-        {
-          event,
-          customEventData: event,
-          forItems,
-        },
-        scopeContext,
-        context
-      );
-    },
-    [props]
-  );
+  // bindStyle
+  let bindStyle = fieldData.style || {};
+  // 复合组件第一层需要将最外层样式 style 挂到节点上
+  let cssStyle = commonStyle || {};
+  if (isInComposite && isRootNode) {
+    cssStyle = {
+      ...cssStyle,
+      ...(codeContext.$WEAPPS_COMP.props?.style || {}),
+    };
+    bindStyle = {
+      ...bindStyle,
+      ...(codeContext.$WEAPPS_COMP.props?.style || {}),
+    };
+  }
+  const finalStyle = getFinalStyle(cssStyle, bindStyle);
 
-  function getSafeComponentProps({
-    style,
+  // bindClassList
+  const bindClassList = fieldData.classList || [];
+  const finalClassNameList = getFinalClassNameList(
     classNameList,
-    staticResourceAttribute,
-  }) {
-    const componentProps = {};
-    if (classNameList.length) {
-      componentProps.className = classNameList.join(' ');
-    }
+    bindClassList
+  );
 
-    if (style && Object.keys(style).length) {
-      componentProps.style = style;
-    }
-    if (staticResourceAttribute && staticResourceAttribute.length > 0) {
-      componentProps.staticResourceAttribute = staticResourceAttribute;
+  // 当前在复合组件中，且当前节点为根节点
+  if (isInComposite && isRootNode) {
+    if (widgetData.ownerWidget) {
+      Object.keys(widgetData.ownerWidget).forEach((propName) => {
+        if (
+          propName === 'role' ||
+          ['aria-', 'data-'].some((prefix) => propName.startsWith(prefix))
+        ) {
+          widgetData[propName] = widgetData.ownerWidget[propName];
+        }
+      });
     }
-    return componentProps;
   }
 
-  // 选区的预览的click事件
-  const onCustomEvent = ({ order: index, blockKey }) => {
-    if (index !== undefined) {
-      indexRef.current = index;
-      typeRef.current = blockKey;
-    }
+  // 防止渲染时 data 的 style 与实际的 style 冲突
+  delete fieldData.style;
+
+  return {
+    fieldData,
+    finalStyle,
+    finalClassNameList: Array.from(new Set(finalClassNameList)),
   };
+}
+
+function getForList(compId, dataBinds, parentForItems, dataContext) {
+  /**
+   * For循环渲染
+   * @important
+   * @default undfined // 代表没有进行for循环绑定
+   */
+  let forList = undefined;
 
-  // For循环渲染
-  let forList;
   try {
     // 绑定了 for 变量，但计算值错误时，应当空数组兜底
     forList =
       dataBinds &&
       dataBinds._waFor &&
-      (dataBinds._waFor(parentForItems, undefined, context) || []);
+      (dataBinds._waFor(parentForItems, undefined, dataContext) || []);
   } catch (e) {
     // 计算值出错则使用空数组兜底
     forList = [];
     console.warn('_waFor data', e);
   }
+
+  // 绑定了for 并且计算了值，但是不是数组类型，应该进行兜底
   if (forList) {
     if (!Array.isArray(forList)) {
       console.warn(`${compId}循环绑定非数组值：`, forList);
       forList = [];
     }
-    return forList.map((item, index) => {
-      const forItemsIndexes = (parentForItems.forIndexes || []).concat(index);
-      const forItems = {
-        ...parentForItems,
-        [compId]: item,
-        forIndexes: forItemsIndexes,
-      };
-      const {
-        fieldData: forItemData,
-        finalStyle: forItemStyle,
-        finalClassNameList: forItemClassNameList,
-      } = getBindData(forItems, scopeContext);
-      if (!checkVisible(forItemData)) {
-        return null;
+  }
+
+  return forList;
+}
+
+function FieldWrapper({
+  Field,
+  componentSchema,
+  id,
+  data,
+  style = {},
+  className = '',
+  events,
+  compositeParent,
+  context,
+  children,
+  updateContext,
+}) {
+  const {
+    scopeContext,
+    forContext,
+    forIndexes,
+    widgetsData,
+    codeContext,
+    dataContext,
+  } = context;
+
+  const injectContext = {};
+  const indexRef = React.useRef();
+  const typeRef = React.useRef();
+  const { 'x-props': xProps } = componentSchema;
+  let { staticResourceAttribute = [], listenerInstances = [] } = xProps;
+
+  // 组件最终用于执行的事件函数
+  const emit = React.useCallback(
+    (trigger, listeners, eventData, forItems, domEvent, scopeContext) => {
+      // 当组件是数据容器并且listeners未含有onDataChange事件时，增加一个onDataChange事件
+      if (componentSchema?.compConfig?.isDataContainer) {
+        listeners = listeners.concat({
+          key: `wa${Date.now().toString().slice(-8)}`,
+          trigger: 'onDataChange',
+          isCapturePhase: false,
+          data: {},
+          dataBinds: {},
+          instanceFunction: ({ event }) => {
+            return updateContext(id, event?.detail?.data);
+          },
+        });
       }
 
-      const slotMap = generateSlotMap(
-        generateSlotMetaMap(
-          componentSchema,
+      if (injectContext?.emit) {
+        return injectContext.emit(
+          trigger,
+          listeners,
+          eventData,
+          forItems,
+          domEvent,
+          scopeContext
+        );
+      } else {
+        const event = {
+          detail: eventData,
+          name: trigger,
+          target: widgetsData,
+          currentTarget: widgetsData,
+          domEvent,
+        };
+        forItems = {
+          ...forItems,
+          forIndexes: getForIndexes(forItems, widgetsData),
+        };
+        emitEvent(
+          trigger,
+          listeners,
           {
-            ..._context,
-            forContext: forItems,
-            virtualFields,
-            updateContext,
+            event,
+            customEventData: event,
+            forItems,
+            domEvent,
           },
-          {
-            renderSlot,
-          }
-        )
-      );
-
-      const emitWithForItems = (trigger, evt) =>
-        emit(trigger, evt, forItems, scopeContext);
-
-      const _selectableBlockEventsForItems = {
-        onCustomEvent,
-        events:
-          componentSchema?.selectableBlock?.events.map((item) => item.name) ||
-          [],
-        emit: (trigger, evt) =>
-          emitSB(trigger, evt, forItems, scopeContext, forItemData),
-      };
-
-      delete forItemData.style;
-
-      // 获取当前元素的 ref
-      const currentWidget = Array.isArray(widgetsData)
-        ? get(widgetsData, forItemsIndexes)
-        : widgetsData;
-      const domRef = setGetDomApi(currentWidget, isInComposite);
-
-      const componentProps = getSafeComponentProps({
-        style: forItemStyle,
-        classNameList: forItemClassNameList,
-        staticResourceAttribute,
-      });
-
-      // 判断为容器组件，则增加一个onDataChange事件
-      if (
-        componentSchema?.compConfig?.isDataContainer &&
-        !emitEvents?.includes('onDataChange')
-      ) {
-        emitEvents.push('onDataChange');
+          scopeContext,
+          dataContext
+        );
       }
+    },
+    [widgetsData]
+  );
 
-      return (
-        <ForContext.Provider key={index} value={forItems}>
-          <Field
-            data={{
-              ...forItemData,
-              ...slotMap,
-              _selectableBlockEvents: _selectableBlockEventsForItems,
-            }}
-            id={compId}
-            {...componentProps}
-            emit={emitWithForItems}
-            events={emitEvents}
-            compositeParent={codeContext}
-            forIndexes={forItemsIndexes}
-            $node={currentWidget}
-            domRef={domRef}
-          >
-            {props.children}
-          </Field>
-        </ForContext.Provider>
-      );
-    });
+  const currentWidget = Array.isArray(widgetsData)
+    ? get(widgetsData, forIndexes)
+    : widgetsData;
+
+  if (!Array.isArray(staticResourceAttribute)) {
+    staticResourceAttribute = [];
   }
 
-  // 单节点渲染
-  const { fieldData, finalClassNameList, finalStyle } = getBindData(
-    parentForItems,
-    scopeContext
+  // 判断为容器组件，则增加一个onDataChange事件
+  if (
+    componentSchema?.compConfig?.isDataContainer &&
+    !events?.includes('onDataChange')
+  ) {
+    events.push('onDataChange');
+  }
+
+  return (
+    <Field
+      data={{
+        ...data,
+        _selectableBlockEvents: {
+          onCustomEvent: ({ order: index, blockKey }) => {
+            if (index !== undefined) {
+              indexRef.current = index;
+              typeRef.current = blockKey;
+            }
+          },
+          events:
+            componentSchema?.selectableBlock?.events.map((item) => item.name) ||
+            [],
+          emit: (trigger, evt, domEvent) =>
+            emit(
+              trigger,
+              indexRef?.current !== undefined &&
+                typeRef?.current &&
+                data?.[typeRef.current]?.[indexRef.current]?.selectableBlock?.[
+                  'x-props'
+                ]?.listenerInstances,
+              evt,
+              forContext,
+              domEvent,
+              scopeContext
+            ),
+        },
+      }}
+      id={id}
+      emit={(trigger, eventData, domEvent) =>
+        emit(
+          trigger,
+          listenerInstances,
+          eventData,
+          forContext,
+          domEvent,
+          scopeContext
+        )
+      }
+      events={events}
+      compositeParent={compositeParent}
+      forIndexes={forIndexes}
+      $node={currentWidget}
+      domRef={setGetDomApi(currentWidget, { codeContext })}
+      style={style}
+      className={className}
+      staticResourceAttribute={staticResourceAttribute}
+    >
+      {children}
+    </Field>
   );
-  const emitWithForItems = (trigger, evt) =>
-    emit(trigger, evt, parentForItems, scopeContext);
-
-  const _selectableBlockEventsWithItem = {
-    onCustomEvent,
-    events:
-      componentSchema?.selectableBlock?.events.map((item) => item.name) || [],
-    emit: (trigger, evt) =>
-      emitSB(trigger, evt, parentForItems, scopeContext, fieldData),
+}
+
+export const CompRenderer = observer(function (props) {
+  return getComponentRenderList({
+    ...props,
+    forContext: React.createContext(ForContext),
+    injectContext: {},
+  });
+});
+
+export function getComponentRenderList(props) {
+  const {
+    key = undefined,
+    id: compId,
+    xProps,
+    virtualFields,
+    renderSlot,
+    codeContext,
+    scopeContext,
+    context = {},
+    updateContext,
+    emitEvents = [],
+    componentSchema = {},
+    forContext: parentForItems = {},
+  } = props;
+
+  const _context = {
+    scopeContext,
+    forContext: parentForItems,
+    codeContext,
+    dataContext: context,
   };
 
+  const isInComposite = !!codeContext;
+  // 判断 widgets 是从 page 来的，还是组件来的
+  const widgetsData = !isInComposite
+    ? $page.widgets[compId]
+    : codeContext.$WEAPPS_COMP.widgets[compId];
+
+  if (!xProps) {
+    return (
+      <>
+        {getComponentChildren(componentSchema, {
+          ..._context,
+          virtualFields,
+          updateContext,
+        })}
+      </>
+    );
+  }
+
+  const { commonStyle = {}, sourceKey, dataBinds, classNameList = [] } = xProps;
+  const Field = virtualFields[sourceKey];
+
+  // For循环渲染
+  let forList = getForList(compId, dataBinds, parentForItems, context);
+
+  if (forList) {
+    return forList
+      .map((item, index) => {
+        const forItemsIndexes = (parentForItems['forIndexes'] || []).concat(
+          index
+        );
+        const forItems = {
+          ...parentForItems,
+          [compId]: item,
+          forIndexes: forItemsIndexes,
+        };
+        const {
+          fieldData: forItemData,
+          finalStyle: forItemStyle,
+          finalClassNameList: forItemClassNameList,
+        } = getBindData({
+          widgetData: widgetsData,
+          forItems,
+          scopeContext,
+          codeContext,
+          commonStyle,
+          classNameList,
+        });
+        if (!checkVisible(forItemData)) {
+          return null;
+        }
+
+        const slotMap = generateSlotMap(
+          generateSlotMetaMap(
+            componentSchema,
+            {
+              ..._context,
+              forContext: forItems,
+              virtualFields,
+              updateContext,
+            },
+            {
+              renderSlot,
+            }
+          )
+        );
+
+        return (
+          <ForContext.Provider key={index} value={forItems}>
+            <FieldWrapper
+              Field={Field}
+              componentSchema={componentSchema}
+              context={{
+                ..._context,
+                widgetsData,
+                forContext: forItems,
+                forIndexes: forItemsIndexes,
+              }}
+              id={compId}
+              updateContext={updateContext}
+              data={{
+                ...forItemData,
+                ...slotMap,
+              }}
+              {...getSafeComponentProps({
+                style: forItemStyle,
+                classNameList: forItemClassNameList,
+              })}
+              events={emitEvents}
+              compositeParent={codeContext}
+            >
+              {getComponentChildren(componentSchema, {
+                ..._context,
+                forContext: forItems,
+                virtualFields,
+                updateContext,
+              })}
+            </FieldWrapper>
+          </ForContext.Provider>
+        );
+      })
+      .filter((item) => !!item);
+  }
+
+  // 修正 forIndexes
+  const forIndexes = getForIndexes(parentForItems, widgetsData);
+
+  // 单节点渲染
+  const { fieldData, finalClassNameList, finalStyle } = getBindData({
+    widgetData: widgetsData,
+    forItems: parentForItems,
+    scopeContext,
+    codeContext,
+    commonStyle,
+    classNameList,
+  });
+
   // false 或空字符串时
   if (!checkVisible(fieldData)) {
     return null;
@@ -324,106 +483,37 @@ export const CompRenderer = observer(function (props) {
     )
   );
 
-  // 防止渲染时 data 的 style 与实际的 style 冲突
-  delete fieldData.style;
-
-  // 修正 forIndexes
-  const forIndexes = getForIndexes(parentForItems, widgetsData);
-
-  // 获取 Element Ref
-  const currentWidget = Array.isArray(widgetsData)
-    ? get(widgetsData, forIndexes)
-    : widgetsData;
-  const domRef = setGetDomApi(currentWidget, props);
-
-  const componentProps = getSafeComponentProps({
-    style: finalStyle,
-    classNameList: finalClassNameList,
-    staticResourceAttribute,
-  });
-
-  // 判断为容器组件，则增加一个onDataChange事件
-  if (
-    componentSchema?.compConfig?.isDataContainer &&
-    !emitEvents?.includes('onDataChange')
-  ) {
-    emitEvents.push('onDataChange');
-  }
-
   return (
-    <Field
+    <FieldWrapper
+      key={key}
+      Field={Field}
+      componentSchema={componentSchema}
+      context={{
+        ..._context,
+        forIndexes: forIndexes,
+        widgetsData,
+      }}
+      id={compId}
+      updateContext={updateContext}
       data={{
         ...fieldData,
         ...slotMap,
-        _selectableBlockEvents: _selectableBlockEventsWithItem,
       }}
-      id={compId}
-      {...componentProps}
-      emit={emitWithForItems}
+      {...getSafeComponentProps({
+        style: finalStyle,
+        classNameList: finalClassNameList,
+      })}
       events={emitEvents}
       compositeParent={codeContext}
-      forIndexes={forIndexes}
-      $node={currentWidget}
-      domRef={domRef}
     >
-      {props.children}
-    </Field>
+      {getComponentChildren(componentSchema, {
+        ..._context,
+        virtualFields,
+        updateContext,
+      })}
+    </FieldWrapper>
   );
-
-  // TODO: 需要不断移除 dataBinds(style/classList)
-  function getBindData(forItems, scopeContext) {
-    // bindData
-    let wData = widgetsData;
-    if (Array.isArray(wData)) {
-      wData =
-        forItems.forIndexes === void 0 || wData.length === 0
-          ? {}
-          : get(wData, getForIndexes(forItems, wData));
-    }
-    wData = wData || {};
-    const fieldData = { ...wData };
-
-    // 再次计算 scope value
-    for (let key in fieldData) {
-      if (Object.prototype.hasOwnProperty.call(fieldData, key)) {
-        const value = fieldData[key];
-        if (value && value.__type === 'scopedValue') {
-          try {
-            fieldData[key] = value.getValue(scopeContext);
-          } catch (e) {
-            console.warn(`Error computing data bind '${key}' error:`, e);
-            fieldData[key] = '';
-          }
-        }
-      }
-    }
-
-    // bindStyle
-    let bindStyle = fieldData.style || {};
-    // 复合组件第一层需要将最外层样式 style 挂到节点上
-    let cssStyle = commonStyle;
-    if (isInComposite && wData && !wData.parent) {
-      cssStyle = {
-        ...cssStyle,
-        ...(codeContext.$WEAPPS_COMP.props?.style || {}),
-      };
-      bindStyle = {
-        ...bindStyle,
-        ...(codeContext.$WEAPPS_COMP.props?.style || {}),
-      };
-    }
-    const finalStyle = getFinalStyle(cssStyle, bindStyle);
-
-    // bindClassList
-    const bindClassList = fieldData.classList || [];
-    const finalClassNameList = getFinalClassNameList(
-      classNameList,
-      bindClassList
-    );
-
-    return { fieldData, finalStyle, finalClassNameList };
-  }
-});
+}
 
 export function getFinalStyle(
   commonStyle = {},