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

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 { getComponentChildren, generateSlotMetaMap } from '../render';
+import { generateSlotMetaMap } from '../render';
 
 export const ForContext = createContext({});
 
@@ -35,433 +35,274 @@ function generateSlotMap(slots, forContext = undefined) {
   return map;
 }
 
-function getSafeComponentProps({ style, classNameList }) {
-  const componentProps = {};
+export const CompRenderer = observer(function (props) {
+  const {
+    id: compId,
+    xProps,
+    virtualFields,
+    renderSlot,
+    codeContext,
+    scopeContext,
+    context = {},
+    updateContext,
+    emitEvents = [],
+    componentSchema = {},
+  } = props;
 
-  if (classNameList.length) {
-    componentProps.className = classNameList.join(' ');
-  }
+  const indexRef = useRef();
+  const typeRef = useRef();
 
-  if (style && Object.keys(style).length) {
-    componentProps.style = style;
-  }
-  return componentProps;
-}
+  const isInComposite = !!props.codeContext;
+  // 判断 widgets 是从 page 来的，还是组件来的
+  const widgetsData = !isInComposite
+    ? $page.widgets[compId]
+    : codeContext.$WEAPPS_COMP.widgets[compId];
 
-// 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));
+  if (!xProps) {
+    return props.children;
   }
-  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] = '';
-        }
+
+  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,
+  };
+
+  // 组件最终用于执行的事件函数
+  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);
+          },
+        });
       }
-    }
-  }
 
-  // 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);
+      let event = { detail: eventDetail, name: trigger };
+      forItems = {
+        ...forItems,
+        forIndexes: getForIndexes(forItems, widgetsData),
+      };
+      emitEvent(
+        trigger,
+        listeners,
+        {
+          event,
+          customEventData: event,
+          forItems,
+        },
+        scopeContext,
+        context
+      );
+    },
+    [props]
+  );
 
-  // bindClassList
-  const bindClassList = fieldData.classList || [];
-  const finalClassNameList = getFinalClassNameList(
-    classNameList,
-    bindClassList
+  // 选区最终用于执行的事件函数
+  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]
   );
 
-  // 当前在复合组件中，且当前节点为根节点
-  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];
-        }
-      });
+  function getSafeComponentProps({
+    style,
+    classNameList,
+    staticResourceAttribute,
+  }) {
+    const componentProps = {};
+    if (classNameList.length) {
+      componentProps.className = classNameList.join(' ');
     }
-  }
 
-  // 防止渲染时 data 的 style 与实际的 style 冲突
-  delete fieldData.style;
+    if (style && Object.keys(style).length) {
+      componentProps.style = style;
+    }
+    if (staticResourceAttribute && staticResourceAttribute.length > 0) {
+      componentProps.staticResourceAttribute = staticResourceAttribute;
+    }
+    return componentProps;
+  }
 
-  return {
-    fieldData,
-    finalStyle,
-    finalClassNameList: Array.from(new Set(finalClassNameList)),
+  // 选区的预览的click事件
+  const onCustomEvent = ({ order: index, blockKey }) => {
+    if (index !== undefined) {
+      indexRef.current = index;
+      typeRef.current = blockKey;
+    }
   };
-}
-
-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, dataContext) || []);
+      (dataBinds._waFor(parentForItems, undefined, context) || []);
   } catch (e) {
     // 计算值出错则使用空数组兜底
     forList = [];
     console.warn('_waFor data', e);
   }
-
-  // 绑定了for 并且计算了值，但是不是数组类型，应该进行兜底
   if (forList) {
     if (!Array.isArray(forList)) {
       console.warn(`${compId}循环绑定非数组值：`, forList);
       forList = [];
     }
-  }
-
-  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);
-          },
-        });
+    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;
       }
 
-      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,
+      const slotMap = generateSlotMap(
+        generateSlotMetaMap(
+          componentSchema,
           {
-            event,
-            customEventData: event,
-            forItems,
-            domEvent,
-          },
-          scopeContext,
-          dataContext
-        );
-      }
-    },
-    [widgetsData]
-  );
-
-  const currentWidget = Array.isArray(widgetsData)
-    ? get(widgetsData, forIndexes)
-    : widgetsData;
-
-  if (!Array.isArray(staticResourceAttribute)) {
-    staticResourceAttribute = [];
-  }
-
-  // 判断为容器组件，则增加一个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;
-            }
+            ..._context,
+            forContext: forItems,
+            virtualFields,
+            updateContext,
           },
-          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
+          {
+            renderSlot,
+          }
         )
-      }
-      events={events}
-      compositeParent={compositeParent}
-      forIndexes={forIndexes}
-      $node={currentWidget}
-      domRef={setGetDomApi(currentWidget, { codeContext })}
-      style={style}
-      className={className}
-      staticResourceAttribute={staticResourceAttribute}
-    >
-      {children}
-    </Field>
-  );
-}
-
-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 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,
+      });
 
-        const slotMap = generateSlotMap(
-          generateSlotMetaMap(
-            componentSchema,
-            {
-              ..._context,
-              forContext: forItems,
-              virtualFields,
-              updateContext,
-            },
-            {
-              renderSlot,
-            }
-          )
-        );
+      // 判断为容器组件，则增加一个onDataChange事件
+      if (
+        componentSchema?.compConfig?.isDataContainer &&
+        !emitEvents?.includes('onDataChange')
+      ) {
+        emitEvents.push('onDataChange');
+      }
 
-        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);
+      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>
+      );
+    });
   }
 
-  // 修正 forIndexes
-  const forIndexes = getForIndexes(parentForItems, widgetsData);
-
   // 单节点渲染
-  const { fieldData, finalClassNameList, finalStyle } = getBindData({
-    widgetData: widgetsData,
-    forItems: parentForItems,
-    scopeContext,
-    codeContext,
-    commonStyle,
-    classNameList,
-  });
+  const { fieldData, finalClassNameList, finalStyle } = getBindData(
+    parentForItems,
+    scopeContext
+  );
+  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),
+  };
 
   // false 或空字符串时
   if (!checkVisible(fieldData)) {
@@ -483,37 +324,106 @@ export function getComponentRenderList(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 (
-    <FieldWrapper
-      key={key}
-      Field={Field}
-      componentSchema={componentSchema}
-      context={{
-        ..._context,
-        forIndexes: forIndexes,
-        widgetsData,
-      }}
-      id={compId}
-      updateContext={updateContext}
+    <Field
       data={{
         ...fieldData,
         ...slotMap,
+        _selectableBlockEvents: _selectableBlockEventsWithItem,
       }}
-      {...getSafeComponentProps({
-        style: finalStyle,
-        classNameList: finalClassNameList,
-      })}
+      id={compId}
+      {...componentProps}
+      emit={emitWithForItems}
       events={emitEvents}
       compositeParent={codeContext}
+      forIndexes={forIndexes}
+      $node={currentWidget}
+      domRef={domRef}
     >
-      {getComponentChildren(componentSchema, {
-        ..._context,
-        virtualFields,
-        updateContext,
-      })}
-    </FieldWrapper>
+      {props.children}
+    </Field>
   );
-}
+
+  // 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 = {},