@easy-editor/react-renderer 0.0.17 → 1.0.0

package/dist/index.js

@@ -1,261 +1,8 @@
-import { observer } from 'mobx-react';
-import { createContext, useContext, useMemo, Component, forwardRef, createElement, PureComponent } from 'react';
-import { isSetterConfig, createLogger, isJSExpression, DESIGNER_EVENT, TRANSFORM_STAGE, isJSFunction, logger as logger$1 } from '@easy-editor/core';
+import { DESIGNER_EVENT, TRANSFORM_STAGE, isJSExpression, isJSFunction, isSetterConfig } from '@easy-editor/core';
+import { logger, isSchema, getValue as getValue$1, parseExpression, parseData, DataHelper, isUseLoop, transformArrayToMap, transformStringToFunction, classnames, getFileCssName, checkPropTypes } from '@easy-editor/renderer-core';
+import { createContext, useContext, forwardRef, createElement, Component, PureComponent, useMemo } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-
-const SettingRendererContext = /*#__PURE__*/createContext({});
-const useSettingRendererContext = () => {
-  try {
-    return useContext(SettingRendererContext);
-  } catch (error) {
-    console.warn('useSettingRendererContext must be used within a SettingRendererContextProvider');
-  }
-  return {};
-};
-
-const getSetterInfo = field => {
-  const {
-    extraProps,
-    setter
-  } = field;
-  const {
-    defaultValue
-  } = extraProps;
-  let setterProps = {};
-  let setterType;
-  let initialValue = null;
-  if (isSetterConfig(setter)) {
-    setterType = setter.componentName;
-    if (setter.props) {
-      setterProps = setter.props;
-      if (typeof setterProps === 'function') {
-        setterProps = setterProps(field);
-      }
-    }
-    if (setter.defaultValue != null) {
-      initialValue = setter.defaultValue;
-    }
-  } else if (setter) {
-    setterType = setter;
-  }
-  if (defaultValue != null && !('defaultValue' in setterProps)) {
-    setterProps.defaultValue = defaultValue;
-    if (initialValue == null) {
-      initialValue = defaultValue;
-    }
-  }
-  if (field.valueState === -1) {
-    setterProps.multiValue = true;
-  }
-
-  // 根据是否支持变量配置做相应的更改
-  const supportVariable = field.extraProps?.supportVariable;
-  const isUseVariableSetter = supportVariable;
-  if (isUseVariableSetter === false) {
-    return {
-      setterProps,
-      initialValue,
-      setterType
-    };
-  }
-  return {
-    setterProps,
-    setterType,
-    initialValue
-  };
-};
-const SettingSetter = observer(({
-  field,
-  children
-}) => {
-  const {
-    setterManager
-  } = useSettingRendererContext();
-  const {
-    extraProps
-  } = field;
-  const visible = extraProps?.condition && typeof extraProps.condition === 'function' ? extraProps.condition(field) !== false : true;
-  if (!visible) {
-    return null;
-  }
-  const {
-    setterProps = {},
-    setterType,
-    initialValue = null
-  } = getSetterInfo(field);
-  const onChange = extraProps?.onChange;
-  const value = field.valueState === -1 ? null : field.getValue();
-  const {
-    component: SetterComponent,
-    props: mixedSetterProps
-  } = setterManager.createSetterContent(setterType, setterProps);
-  return /*#__PURE__*/jsx(SetterComponent, {
-    field: field,
-    selected: field.top?.getNode(),
-    initialValue: initialValue,
-    value: value,
-    onChange: newVal => {
-      field.setValue(newVal);
-      onChange?.(field, newVal);
-    },
-    onInitial: () => {
-      if (initialValue == null) {
-        return;
-      }
-      const value = typeof initialValue === 'function' ? initialValue(field) : initialValue;
-      field.setValue(value, true);
-    },
-    removeProp: () => {
-      if (field.name) {
-        field.parent.clearPropValue(field.name);
-      }
-    },
-    ...mixedSetterProps,
-    children: children
-  }, field.id);
-});
-
-const SettingFieldItem = observer(({
-  field
-}) => {
-  const {
-    customFieldItem
-  } = useSettingRendererContext();
-  if (customFieldItem) {
-    return customFieldItem(field, /*#__PURE__*/jsx(SettingSetter, {
-      field: field
-    }));
-  }
-  return /*#__PURE__*/jsxs("div", {
-    className: "space-y-2",
-    children: [/*#__PURE__*/jsx("label", {
-      htmlFor: field.id,
-      className: "block text-sm font-medium text-gray-700",
-      children: field.title
-    }), /*#__PURE__*/jsx(SettingSetter, {
-      field: field
-    })]
-  });
-});
-const SettingFieldGroup = observer(({
-  field
-}) => {
-  const {
-    customFieldGroup
-  } = useSettingRendererContext();
-  if (customFieldGroup) {
-    return customFieldGroup(field, /*#__PURE__*/jsx(SettingSetter, {
-      field: field,
-      children: field.items?.map(item => /*#__PURE__*/jsx(SettingFieldView, {
-        field: item
-      }, item.id))
-    }));
-  }
-
-  // 如果 field 没有 setter，则理解为其 父级 field 的 items 数据
-  if (!field.setter) {
-    return field.items?.map(item => /*#__PURE__*/jsx(SettingFieldView, {
-      field: item
-    }, item.id));
-  }
-  return /*#__PURE__*/jsx(SettingSetter, {
-    field: field,
-    children: field.items?.map(item => /*#__PURE__*/jsx(SettingFieldView, {
-      field: item
-    }, item.id))
-  });
-});
-const SettingFieldView = ({
-  field
-}) => {
-  if (field.isGroup) {
-    return /*#__PURE__*/jsx(SettingFieldGroup, {
-      field: field
-    }, field.id);
-  } else {
-    return /*#__PURE__*/jsx(SettingFieldItem, {
-      field: field
-    }, field.id);
-  }
-};
-const SettingRender = observer(props => {
-  const {
-    editor,
-    customFieldItem,
-    customFieldGroup
-  } = props;
-  const designer = editor.get('designer');
-  const setterManager = editor.get('setterManager');
-  const {
-    settingsManager
-  } = designer;
-  const {
-    settings
-  } = settingsManager;
-  const items = settings?.items;
-  const ctx = useMemo(() => {
-    const ctx = {};
-    ctx.setterManager = setterManager;
-    ctx.settingsManager = settingsManager;
-    ctx.customFieldItem = customFieldItem;
-    ctx.customFieldGroup = customFieldGroup;
-    return ctx;
-  }, [setterManager, settingsManager, customFieldItem, customFieldGroup]);
-  if (!settings) {
-    // 未选中节点，提示选中 或者 显示根节点设置
-    return /*#__PURE__*/jsx("div", {
-      className: "lc-settings-main",
-      children: /*#__PURE__*/jsx("div", {
-        className: "lc-settings-notice",
-        children: /*#__PURE__*/jsx("p", {
-          children: "Please select a node in canvas"
-        })
-      })
-    });
-  }
-
-  // 当节点被锁定，且未开启锁定后容器可设置属性
-  if (settings.isLocked) {
-    return /*#__PURE__*/jsx("div", {
-      className: "lc-settings-main",
-      children: /*#__PURE__*/jsx("div", {
-        className: "lc-settings-notice",
-        children: /*#__PURE__*/jsx("p", {
-          children: "Current node is locked"
-        })
-      })
-    });
-  }
-  if (Array.isArray(settings.items) && settings.items.length === 0) {
-    return /*#__PURE__*/jsx("div", {
-      className: "lc-settings-main",
-      children: /*#__PURE__*/jsx("div", {
-        className: "lc-settings-notice",
-        children: /*#__PURE__*/jsx("p", {
-          children: "No config found for this type of component"
-        })
-      })
-    });
-  }
-  if (!settings.isSameComponent) {
-    // TODO: future support 获取设置项交集编辑
-    return /*#__PURE__*/jsx("div", {
-      className: "lc-settings-main",
-      children: /*#__PURE__*/jsx("div", {
-        className: "lc-settings-notice",
-        children: /*#__PURE__*/jsx("p", {
-          children: "Please select same kind of components"
-        })
-      })
-    });
-  }
-  return /*#__PURE__*/jsx(SettingRendererContext.Provider, {
-    value: ctx,
-    children: items?.map(item => /*#__PURE__*/jsx(SettingFieldView, {
-      field: item
-    }, item.id))
-  });
-});
+import { observer } from 'mobx-react';
 
 class Adapter {
   renderers = {};
@@ -429,12 +176,12 @@ function baseIsNative(value) {
   return pattern.test(toSource(value));
 }
 
-function getValue$1(object, key) {
+function getValue(object, key) {
   return object == null ? undefined : object[key];
 }
 
 function getNative(object, key) {
-  var value = getValue$1(object, key);
+  var value = getValue(object, key);
   return baseIsNative(value) ? value : undefined;
 }
 
@@ -855,195 +602,6 @@ function contextFactory() {
   return context;
 }
 
-const classnames = (...args) => {
-  return args.filter(Boolean).join(' ');
-};
-
-const logger = createLogger('Renderer');
-
-const PropTypes2 = true;
-function inSameDomain() {
-  try {
-    return window.parent !== window && window.parent.location.host === window.location.host;
-  } catch (e) {
-    return false;
-  }
-}
-function getFileCssName(fileName) {
-  if (!fileName) {
-    return;
-  }
-  const name = fileName.replace(/([A-Z])/g, '-$1').toLowerCase();
-  return `lce-${name}`.split('-').filter(p => !!p).join('-');
-}
-const isSchema = schema => {
-  if (!schema) {
-    return false;
-  }
-  if (schema.componentName === 'Leaf' || schema.componentName === 'Slot') {
-    return true;
-  }
-  if (Array.isArray(schema)) {
-    return schema.every(item => isSchema(item));
-  }
-  const isValidProps = props => {
-    if (!props) {
-      return false;
-    }
-    return typeof schema.props === 'object' && !Array.isArray(props);
-  };
-  return !!(schema.componentName && isValidProps(schema.props));
-};
-const getValue = (obj, path, defaultValue = {}) => {
-  if (Array.isArray(obj)) {
-    return defaultValue;
-  }
-  if (!obj || typeof obj !== 'object') {
-    return defaultValue;
-  }
-  const res = path.split('.').reduce((pre, cur) => {
-    return pre && pre[cur];
-  }, obj);
-  if (res === undefined) {
-    return defaultValue;
-  }
-  return res;
-};
-function transformArrayToMap(arr, key, overwrite = true) {
-  if (!arr || !Array.isArray(arr)) {
-    return {};
-  }
-  const res = {};
-  arr.forEach(item => {
-    const curKey = item[key];
-    if (item[key] === undefined) {
-      return;
-    }
-    if (res[curKey] && !overwrite) {
-      return;
-    }
-    res[curKey] = item;
-  });
-  return res;
-}
-const parseData = (schema, self, options = {}) => {
-  if (isJSExpression(schema)) {
-    return parseExpression({
-      str: schema,
-      self,
-      thisRequired: true,
-      logScope: options.logScope
-    });
-  }
-  if (typeof schema === 'string') {
-    return schema.trim();
-  } else if (Array.isArray(schema)) {
-    return schema.map(item => parseData(item, self, options));
-  } else if (typeof schema === 'function') {
-    return schema.bind(self);
-  } else if (typeof schema === 'object') {
-    if (!schema) {
-      return schema;
-    }
-    const res = {};
-    Object.entries(schema).forEach(([key, val]) => {
-      if (key.startsWith('__')) {
-        return;
-      }
-      res[key] = parseData(val, self, options);
-    });
-    return res;
-  }
-  return schema;
-};
-const isUseLoop = (loop, isDesignMode) => {
-  if (!isDesignMode) {
-    return true;
-  }
-  if (!Array.isArray(loop)) {
-    return false;
-  }
-  return loop.length > 0;
-};
-function checkPropTypes(value, name, rule, componentName) {
-  let ruleFunction = rule;
-  if (typeof rule === 'string') {
-    ruleFunction = new Function(`"use strict"; const PropTypes = arguments[0]; return ${rule}`)(PropTypes2);
-  }
-  if (!ruleFunction || typeof ruleFunction !== 'function') {
-    logger.warn('checkPropTypes should have a function type rule argument');
-    return true;
-  }
-  const err = ruleFunction({
-    [name]: value
-  }, name, componentName, 'prop', null
-  );
-  if (err) {
-    logger.warn(err);
-  }
-  return !err;
-}
-function transformStringToFunction(str) {
-  if (typeof str !== 'string') {
-    return str;
-  }
-  if (inSameDomain() && window.parent.__newFunc) {
-    return window.parent.__newFunc(`"use strict"; return ${str}`)();
-  } else {
-    return new Function(`"use strict"; return ${str}`)();
-  }
-}
-function parseExpression(a, b, c = false) {
-  let str;
-  let self;
-  let thisRequired;
-  let logScope;
-  if (typeof a === 'object' && b === undefined) {
-    str = a.str;
-    self = a.self;
-    thisRequired = a.thisRequired;
-    logScope = a.logScope;
-  } else {
-    str = a;
-    self = b;
-    thisRequired = c;
-  }
-  try {
-    const contextArr = ['"use strict";', 'var __self = arguments[0];'];
-    contextArr.push('return ');
-    let tarStr;
-    tarStr = (str.value || '').trim();
-    tarStr = tarStr.replace(/this(\W|$)/g, (_a, b) => `__self${b}`);
-    tarStr = contextArr.join('\n') + tarStr;
-    if (inSameDomain() && window.parent.__newFunc) {
-      return window.parent.__newFunc(tarStr)(self);
-    }
-    const code = `with(${thisRequired ? '{}' : '$scope || {}'}) { ${tarStr} }`;
-    return new Function('$scope', code)(self);
-  } catch (err) {
-    logger.error(`${logScope || ''} parseExpression.error`, err, str, self?.__self ?? self);
-    return undefined;
-  }
-}
-function parseThisRequiredExpression(str, self) {
-  return parseExpression(str, self, true);
-}
-function isString(str) {
-  return {}.toString.call(str) === '[object String]';
-}
-function capitalizeFirstLetter(word) {
-  if (!word || !isString(word) || word.length === 0) {
-    return word;
-  }
-  return word[0].toUpperCase() + word.slice(1);
-}
-const isReactClass = obj => {
-  return obj && obj.prototype && (obj.prototype.isReactComponent || obj.prototype instanceof Component);
-};
-function isReactComponent(obj) {
-  return obj && (isReactClass(obj) || typeof obj === 'function');
-}
-
 const excludePropertyNames = ['$$typeof', 'render', 'defaultProps', 'props', 'length', 'prototype', 'name', 'caller', 'callee', 'arguments'];
 const cloneEnumerableProperty = (target, origin, excludes = excludePropertyNames) => {
   const compExtraPropertyNames = Object.keys(origin).filter(d => !excludes.includes(d));
@@ -1063,6 +621,13 @@ const createForwardRefHocElement = (Wrapper, Comp) => {
   return WrapperComponent;
 };
 
+const isReactClass = obj => {
+  return obj && obj.prototype && (obj.prototype.isReactComponent || obj.prototype instanceof Component);
+};
+const isReactComponent = obj => {
+  return obj && (isReactClass(obj) || typeof obj === 'function');
+};
+
 const patchDidCatch = (Comp, {
   baseRenderer
 }) => {
@@ -1592,7 +1157,7 @@ const leafWrapper = (Comp, {
         __id: this.leaf?.id,
         ref: forwardRef
       };
-      delete compProps.__inner__;
+      compProps.__inner__ = undefined;
       if (this.hasChildren) {
         return engine.createElement(Comp, compProps, this.children);
       }
@@ -1607,11 +1172,14 @@ const leafWrapper = (Comp, {
   return LeafWrapper;
 };
 
+/**
+ * execute method in schema.lifeCycles with context
+ */
 function executeLifeCycleMethod(context, schema, method, args) {
   if (!context || !isSchema(schema) || !method) {
     return;
   }
-  const lifeCycleMethods = getValue(schema, 'lifeCycles', {});
+  const lifeCycleMethods = getValue$1(schema, 'lifeCycles', {});
   let fn = lifeCycleMethods[method];
   if (!fn) {
     return;
@@ -1832,60 +1400,49 @@ function baseRendererFactory() {
       if (!props) {
         return;
       }
-      // TODO: 数据源引擎方案
-      // const schema = props.__schema || {}
-      // const defaultDataSource: DataSource = {
-      //   list: [],
-      // }
-      // const dataSource = schema.dataSource || defaultDataSource
-      // // requestHandlersMap 存在才走数据源引擎方案
-      // // TODO: 下面if else 抽成独立函数
-      // const useDataSourceEngine = !!props.__appHelper?.requestHandlersMap
-      // if (useDataSourceEngine) {
-      //   this.__dataHelper = {
-      //     updateConfig: (updateDataSource: any) => {
-      //       const { dataSourceMap, reloadDataSource } = createDataSourceEngine(
-      //         updateDataSource ?? {},
-      //         this,
-      //         props.__appHelper.requestHandlersMap
-      //           ? { requestHandlersMap: props.__appHelper.requestHandlersMap }
-      //           : undefined,
-      //       )
-
-      //       this.reloadDataSource = () =>
-      //         new Promise(resolve => {
-      //           logger.log('reload data source')
-      //           reloadDataSource().then(() => {
-      //             resolve({})
-      //           })
-      //         })
-      //       return dataSourceMap
-      //     },
-      //   }
-      //   this.dataSourceMap = this.__dataHelper.updateConfig(dataSource)
-      // } else {
-      //   const appHelper = props.__appHelper
-      //   this.__dataHelper = new DataHelper(this, dataSource, appHelper, (config: any) => this.__parseData(config))
-      //   this.dataSourceMap = this.__dataHelper.dataSourceMap
-      //   this.reloadDataSource = () =>
-      //     new Promise((resolve, reject) => {
-      //       logger.log('reload data source')
-      //       if (!this.__dataHelper) {
-      //         return resolve({})
-      //       }
-      //       this.__dataHelper
-      //         .getInitData()
-      //         .then((res: any) => {
-      //           if (isEmpty(res)) {
-      //             return resolve({})
-      //           }
-      //           this.setState(res, resolve as () => void)
-      //         })
-      //         .catch((err: Error) => {
-      //           reject(err)
-      //         })
-      //     })
-      // }
+      const schema = props.__schema || {};
+      const defaultDataSource = {
+        list: []
+      };
+      const dataSource = schema.dataSource || defaultDataSource;
+      const useDataSourceEngine = !!props.__appHelper?.dataSourceEngine;
+      if (useDataSourceEngine) {
+        const dataSourceEngine = props.__appHelper?.dataSourceEngine;
+        // TODO: 优化
+        if (!dataSourceEngine || !dataSourceEngine.createDataSourceEngine) {
+          logger.error('dataSourceEngine is not found in appHelper, please check your configuration');
+          return;
+        }
+        const {
+          createDataSourceEngine
+        } = dataSourceEngine;
+        this.__dataHelper = {
+          updateConfig: updateDataSource => {
+            const {
+              dataSourceMap,
+              reloadDataSource
+            } = createDataSourceEngine(updateDataSource ?? {}, this);
+            this.reloadDataSource = () => new Promise(resolve => {
+              logger.log('reload data source');
+              reloadDataSource().then(() => {
+                resolve({});
+              });
+            });
+            return dataSourceMap;
+          }
+        };
+        this.dataSourceMap = this.__dataHelper.updateConfig(dataSource);
+      } else {
+        const appHelper = props.__appHelper || {};
+        this.__dataHelper = new DataHelper(this, dataSource, appHelper, config => this.__parseData(config));
+        this.dataSourceMap = this.__dataHelper.dataSourceMap;
+        this.reloadDataSource = () => new Promise(resolve => {
+          logger.log('reload data source');
+          this.__dataHelper.reloadDataSource().then(() => {
+            resolve({});
+          });
+        });
+      }
     };
 
     /**
@@ -1894,7 +1451,7 @@ function baseRendererFactory() {
      * @PRIVATE
      */
     __writeCss = props => {
-      const css = getValue(props.__schema, 'css', '');
+      const css = getValue$1(props.__schema, 'css', '');
       logger.log('create this.styleElement with css', css);
       let style = this.__styleElement;
       if (!this.__styleElement) {
@@ -2237,7 +1794,7 @@ function baseRendererFactory() {
         Comp,
         componentInfo = {}
       } = info;
-      const propInfo = getValue(componentInfo.props, path);
+      const propInfo = getValue$1(componentInfo.props, path);
       // FIXME: 将这行逻辑外置，解耦，线上环境不要验证参数，调试环境可以有，通过传参自定义
       const propType = propInfo?.extra?.propType;
       const checkProps = value => {
@@ -2426,8 +1983,8 @@ function baseRendererFactory() {
     get appHelper() {
       return this.props.__appHelper;
     }
-    get requestHandlersMap() {
-      return this.appHelper?.requestHandlersMap;
+    get dataSourceEngine() {
+      return this.appHelper?.dataSourceEngine;
     }
     get utils() {
       return this.appHelper?.utils;
@@ -2608,16 +2165,16 @@ function rendererFactory() {
     constructor(props) {
       super(props);
       this.state = {};
-      logger$1.log(`entry.constructor - ${props?.schema?.componentName}`);
+      logger.log(`entry.constructor - ${props?.schema?.componentName}`);
     }
     async componentDidMount() {
-      logger$1.log(`entry.componentDidMount - ${this.props.schema && this.props.schema.componentName}`);
+      logger.log(`entry.componentDidMount - ${this.props.schema && this.props.schema.componentName}`);
     }
     async componentDidUpdate() {
-      logger$1.log(`entry.componentDidUpdate - ${this.props?.schema?.componentName}`);
+      logger.log(`entry.componentDidUpdate - ${this.props?.schema?.componentName}`);
     }
     async componentWillUnmount() {
-      logger$1.log(`entry.componentWillUnmount - ${this.props?.schema?.componentName}`);
+      logger.log(`entry.componentWillUnmount - ${this.props?.schema?.componentName}`);
     }
     componentDidCatch(error) {
       this.state.engineRenderError = true;
@@ -2655,10 +2212,10 @@ function rendererFactory() {
         return null;
       }
       if (!isSchema(schema)) {
-        logger$1.error('The root component name needs to be one of Page、Block、Component, please check the schema: ', schema);
+        logger.error('The root component name needs to be one of Page、Block、Component, please check the schema: ', schema);
         return '模型结构异常';
       }
-      logger$1.log('entry.render');
+      logger.log('entry.render');
       const allComponents = {
         ...components,
         ...RENDERER_COMPS
@@ -2693,6 +2250,257 @@ function rendererFactory() {
   };
 }
 
-const DEV = '_EASY_EDITOR_DEV_';
+const SettingRendererContext = /*#__PURE__*/createContext({});
+const useSettingRendererContext = () => {
+  try {
+    return useContext(SettingRendererContext);
+  } catch (error) {
+    console.warn('useSettingRendererContext must be used within a SettingRendererContextProvider');
+  }
+  return {};
+};
+
+const getSetterInfo = field => {
+  const {
+    extraProps,
+    setter
+  } = field;
+  const {
+    defaultValue
+  } = extraProps;
+  let setterProps = {};
+  let setterType;
+  let initialValue = null;
+  if (isSetterConfig(setter)) {
+    setterType = setter.componentName;
+    if (setter.props) {
+      setterProps = setter.props;
+      if (typeof setterProps === 'function') {
+        setterProps = setterProps(field);
+      }
+    }
+    if (setter.defaultValue != null) {
+      initialValue = setter.defaultValue;
+    }
+  } else if (setter) {
+    setterType = setter;
+  }
+  if (defaultValue != null && !('defaultValue' in setterProps)) {
+    setterProps.defaultValue = defaultValue;
+    if (initialValue == null) {
+      initialValue = defaultValue;
+    }
+  }
+  if (field.valueState === -1) {
+    setterProps.multiValue = true;
+  }
+
+  // 根据是否支持变量配置做相应的更改
+  const supportVariable = field.extraProps?.supportVariable;
+  const isUseVariableSetter = supportVariable;
+  if (isUseVariableSetter === false) {
+    return {
+      setterProps,
+      initialValue,
+      setterType
+    };
+  }
+  return {
+    setterProps,
+    setterType,
+    initialValue
+  };
+};
+const SettingSetter = observer(({
+  field,
+  children
+}) => {
+  const {
+    setters
+  } = useSettingRendererContext();
+  const {
+    extraProps
+  } = field;
+  const visible = extraProps?.condition && typeof extraProps.condition === 'function' ? extraProps.condition(field) !== false : true;
+  if (!visible) {
+    return null;
+  }
+  const {
+    setterProps = {},
+    setterType,
+    initialValue = null
+  } = getSetterInfo(field);
+  const onChange = extraProps?.onChange;
+  const value = field.valueState === -1 ? null : field.getValue();
+  const {
+    component: SetterComponent,
+    props: mixedSetterProps
+  } = setters.createSetterContent(setterType, setterProps);
+  return /*#__PURE__*/jsx(SetterComponent, {
+    field: field,
+    selected: field.top?.getNode(),
+    initialValue: initialValue,
+    value: value,
+    onChange: newVal => {
+      field.setValue(newVal);
+      onChange?.(field, newVal);
+    },
+    onInitial: () => {
+      if (initialValue == null) {
+        return;
+      }
+      const value = typeof initialValue === 'function' ? initialValue(field) : initialValue;
+      field.setValue(value, true);
+    },
+    removeProp: () => {
+      if (field.name) {
+        field.parent.clearPropValue(field.name);
+      }
+    },
+    ...mixedSetterProps,
+    children: children
+  }, field.id);
+});
+
+const SettingFieldItem = observer(({
+  field
+}) => {
+  const {
+    customFieldItem
+  } = useSettingRendererContext();
+  if (customFieldItem) {
+    return customFieldItem(field, /*#__PURE__*/jsx(SettingSetter, {
+      field: field
+    }));
+  }
+  return /*#__PURE__*/jsxs("div", {
+    className: "space-y-2",
+    children: [/*#__PURE__*/jsx("label", {
+      htmlFor: field.id,
+      className: "block text-sm font-medium text-gray-700",
+      children: field.title
+    }), /*#__PURE__*/jsx(SettingSetter, {
+      field: field
+    })]
+  });
+});
+const SettingFieldGroup = observer(({
+  field
+}) => {
+  const {
+    customFieldGroup
+  } = useSettingRendererContext();
+  if (customFieldGroup) {
+    return customFieldGroup(field, /*#__PURE__*/jsx(SettingSetter, {
+      field: field,
+      children: field.items?.map(item => /*#__PURE__*/jsx(SettingFieldView, {
+        field: item
+      }, item.id))
+    }));
+  }
+
+  // 如果 field 没有 setter，则理解为其 父级 field 的 items 数据
+  if (!field.setter) {
+    return field.items?.map(item => /*#__PURE__*/jsx(SettingFieldView, {
+      field: item
+    }, item.id));
+  }
+  return /*#__PURE__*/jsx(SettingSetter, {
+    field: field,
+    children: field.items?.map(item => /*#__PURE__*/jsx(SettingFieldView, {
+      field: item
+    }, item.id))
+  });
+});
+const SettingFieldView = ({
+  field
+}) => {
+  if (field.isGroup) {
+    return /*#__PURE__*/jsx(SettingFieldGroup, {
+      field: field
+    }, field.id);
+  } else {
+    return /*#__PURE__*/jsx(SettingFieldItem, {
+      field: field
+    }, field.id);
+  }
+};
+const SettingRenderer = observer(props => {
+  const {
+    designer,
+    customFieldItem,
+    customFieldGroup
+  } = props;
+  const setters = designer.editor.get('setters');
+  const {
+    settingsManager
+  } = designer;
+  const {
+    settings
+  } = settingsManager;
+  const items = settings?.items;
+  const ctx = useMemo(() => {
+    const ctx = {};
+    ctx.setters = setters;
+    ctx.settingsManager = settingsManager;
+    ctx.customFieldItem = customFieldItem;
+    ctx.customFieldGroup = customFieldGroup;
+    return ctx;
+  }, [setters, settingsManager, customFieldItem, customFieldGroup]);
+  if (!settings) {
+    // 未选中节点，提示选中 或者 显示根节点设置
+    return /*#__PURE__*/jsx("div", {
+      className: "lc-settings-main",
+      children: /*#__PURE__*/jsx("div", {
+        className: "lc-settings-notice",
+        children: /*#__PURE__*/jsx("p", {
+          children: "Please select a node in canvas"
+        })
+      })
+    });
+  }
+
+  // 当节点被锁定，且未开启锁定后容器可设置属性
+  if (settings.isLocked) {
+    return /*#__PURE__*/jsx("div", {
+      className: "lc-settings-main",
+      children: /*#__PURE__*/jsx("div", {
+        className: "lc-settings-notice",
+        children: /*#__PURE__*/jsx("p", {
+          children: "Current node is locked"
+        })
+      })
+    });
+  }
+  if (Array.isArray(settings.items) && settings.items.length === 0) {
+    return /*#__PURE__*/jsx("div", {
+      className: "lc-settings-main",
+      children: /*#__PURE__*/jsx("div", {
+        className: "lc-settings-notice",
+        children: /*#__PURE__*/jsx("p", {
+          children: "No config found for this type of component"
+        })
+      })
+    });
+  }
+  if (!settings.isSameComponent) {
+    // TODO: future support 获取设置项交集编辑
+    return /*#__PURE__*/jsx("div", {
+      className: "lc-settings-main",
+      children: /*#__PURE__*/jsx("div", {
+        className: "lc-settings-notice",
+        children: /*#__PURE__*/jsx("p", {
+          children: "Please select same kind of components"
+        })
+      })
+    });
+  }
+  return /*#__PURE__*/jsx(SettingRendererContext.Provider, {
+    value: ctx,
+    children: items?.map(item => /*#__PURE__*/jsx(SettingFieldView, {
+      field: item
+    }, item.id))
+  });
+});
 
-export { DEV, RendererContext, SettingFieldView, SettingRender, adapter, baseRendererFactory, capitalizeFirstLetter, checkPropTypes, classnames, cloneEnumerableProperty, compWrapper, componentRendererFactory, contextFactory, createForwardRefHocElement, executeLifeCycleMethod, getFileCssName, getSchemaChildren, getValue, inSameDomain, isReactClass, isReactComponent, isSchema, isString, isUseLoop, leafWrapper, logger, pageRendererFactory, parseData, parseExpression, parseThisRequiredExpression, rendererFactory, transformArrayToMap, transformStringToFunction, useRendererContext };
+export { RendererContext, SettingFieldView, SettingRenderer, adapter, baseRendererFactory, cloneEnumerableProperty, compWrapper, componentRendererFactory, contextFactory, createForwardRefHocElement, executeLifeCycleMethod, getSchemaChildren, isReactClass, isReactComponent, leafWrapper, pageRendererFactory, rendererFactory, useRendererContext };