@cloudbase/framework-plugin-low-code 1.0.3-beta.7 → 1.0.3

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

@@ -1,536 +0,0 @@
-import * as React from 'react';
-import { useContext, useCallback, createContext, useRef } from 'react';
-import { observer } from 'mobx-react-lite';
-import { emitEvent } from '../actionHandler/utils';
-import { translateStyleToRem } from '@tcwd/weapps-core';
-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';
-
-export const ForContext = createContext({});
-
-function generateSlotMap(slots, forContext = undefined) {
-  let map = {};
-  Object.keys(slots).forEach((slotProp) => {
-    let meta = slots[slotProp];
-    if (meta.type === 'HOC') {
-      set(map, slotProp, meta.node);
-    } else {
-      const Element = meta.node;
-      if (forContext) {
-        set(
-          map,
-          slotProp,
-          <ForContext.Provider value={forContext}>
-            <Element />
-          </ForContext.Provider>,
-        );
-      } else {
-        set(map, slotProp, <Element />);
-      }
-    }
-  });
-  return map;
-}
-
-function getSafeComponentProps({ style, classNameList }) {
-  const componentProps = {};
-
-  if (classNameList.length) {
-    componentProps.className = classNameList.join(' ');
-  }
-
-  if (style && Object.keys(style).length) {
-    componentProps.style = style;
-  }
-  return componentProps;
-}
-
-// 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] = '';
-        }
-      }
-    }
-  }
-
-  // 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);
-
-  // bindClassList
-  const bindClassList = fieldData.classList || [];
-  const finalClassNameList = getFinalClassNameList(classNameList, bindClassList);
-
-  // 当前在复合组件中，且当前节点为根节点
-  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];
-        }
-      });
-    }
-  }
-
-  // 防止渲染时 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;
-
-  try {
-    // 绑定了 for 变量，但计算值错误时，应当空数组兜底
-    forList = dataBinds && dataBinds._waFor && (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;
-}
-
-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 instanceRef = 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);
-          },
-        });
-      }
-
-      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,
-          {
-            event,
-            customEventData: event,
-            forItems,
-            domEvent,
-          },
-          scopeContext,
-          dataContext,
-        );
-      }
-    },
-    [widgetsData],
-  );
-
-  const currentWidget = Array.isArray(widgetsData) ? get(widgetsData, forIndexes) : widgetsData;
-
-  React.useLayoutEffect(() => {
-    return () => {
-      instanceRef.current = undefined;
-    };
-  }, []);
-
-  React.useLayoutEffect(() => {
-    currentWidget._getInstanceRef = () => instanceRef;
-  }, [currentWidget, instanceRef]);
-
-  if (!Array.isArray(staticResourceAttribute)) {
-    staticResourceAttribute = [];
-  }
-
-  // 判断为容器组件，则增加一个onDataChange事件
-  if (componentSchema?.compConfig?.isDataContainer && !events?.includes('onDataChange')) {
-    events.push('onDataChange');
-  }
-
-  return (
-    <Field
-      ref={instanceRef}
-      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>
-  );
-}
-
-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;
-  }
-
-  // 单个组件的 slot 属性
-  const slotMap = generateSlotMap(
-    generateSlotMetaMap(
-      componentSchema,
-      {
-        ..._context,
-        virtualFields,
-        updateContext,
-      },
-      {
-        renderSlot,
-      },
-    ),
-  );
-
-  return (
-    <FieldWrapper
-      key={key}
-      Field={Field}
-      componentSchema={componentSchema}
-      context={{
-        ..._context,
-        forIndexes: forIndexes,
-        widgetsData,
-      }}
-      id={compId}
-      updateContext={updateContext}
-      data={{
-        ...fieldData,
-        ...slotMap,
-      }}
-      {...getSafeComponentProps({
-        style: finalStyle,
-        classNameList: finalClassNameList,
-      })}
-      events={emitEvents}
-      compositeParent={codeContext}
-    >
-      {getComponentChildren(componentSchema, {
-        ..._context,
-        virtualFields,
-        updateContext,
-      })}
-    </FieldWrapper>
-  );
-}
-
-export function getFinalStyle(commonStyle = {}, bindStyle = {}, widgetStyle = {}) {
-  const remBindStyle = typeof bindStyle === 'object' ? translateStyleToRem(bindStyle) : {};
-
-  return {
-    ...(translateStyleToRem(commonStyle) || {}),
-    ...(translateStyleToRem(widgetStyle) || {}),
-    ...remBindStyle,
-  };
-}
-
-export function getFinalClassNameList(classNameList = [], bindClassList = [], widgetClassList = []) {
-  return [].concat(classNameList, bindClassList, widgetClassList);
-}
-
-// HACK: 从后向前保证循环的深度与 forIndexes 一致
-// 后续需要将 For 循环迁移到外层
-function getForIndexes(parentForItems, widgetsData) {
-  return Array.isArray(widgetsData) && widgetsData.length > 0
-    ? (parentForItems.forIndexes || []).slice(0 - getDeepArrLen(widgetsData))
-    : undefined;
-}
-
-function getDeepArrLen(arr, len = 0) {
-  if (Array.isArray(arr)) {
-    return getDeepArrLen(arr[0], len + 1);
-  } else {
-    return len;
-  }
-}
-
-function setGetDomApi(currentWidget, props) {
-  if (!currentWidget) return React.createRef();
-  const isComposite = !currentWidget.widgetType.startsWith('gsd-h5-react');
-  const isInComposite = !!props.codeContext;
-
-  // 如果当前是复合组件，不做 getDom 的挂载
-  if (!isComposite) {
-    if (!currentWidget.domRef) {
-      currentWidget.domRef = React.createRef();
-    }
-    if (!currentWidget.getDom) {
-      currentWidget.getDom = (options) => getDom(currentWidget.domRef.current, options);
-    }
-
-    if (
-      isInComposite && // 当前在复合组件内
-      !currentWidget.parent && // 当前节点为复合组件的根节点
-      props.codeContext.node && // 复合组件的 node 已经创建
-      !props.codeContext.node.getDom // 复合组件的 node 未挂载 getDom 方法
-    ) {
-      props.codeContext.node.domRef = currentWidget.domRef;
-      props.codeContext.node.getDom = currentWidget.getDom;
-    }
-  }
-
-  return currentWidget.domRef;
-}

package/template/src/handlers/HotAreas.js

@@ -1,36 +0,0 @@
-import * as React from 'react';
-import { HotAreaActionHandler } from './actionHandler';
-
-function percent(p) {
-  return `${p}%`;
-}
-
-export function HotAreas({ instance, global, meta }) {
-  const { hotAreas } = instance.data;
-  if (!hotAreas || !hotAreas.length) {
-    return null;
-  }
-
-  return hotAreas.map((hotArea, index) => {
-    const { size, position } = hotArea;
-
-    return (
-      <HotAreaActionHandler
-        key={index}  // eslint-disable-line
-        instance={instance}
-        hotArea={hotArea}
-        meta={meta}
-        global={global}
-        style={{
-          width: percent(size.width),
-          height: percent(size.height),
-          left: percent(position.x),
-          top: percent(position.y),
-          cursor: 'pointer',
-          position: 'absolute',
-          zIndex: 20,
-        }}
-      />
-    );
-  });
-}

package/template/src/handlers/PositionHandler.jsx

@@ -1,8 +0,0 @@
-/*
-eslint-disable
- */
-import * as React from 'react';
-
-export function PositionHandler({ positionStyle, children }) {
-  return <div style={{ ...positionStyle, width: '100%', zIndex: 999 }}>{children}</div>;
-}