pick

packages/editor-setters/src/icon-setter/index.tsx

@@ -64,44 +64,59 @@ const icons = [
 ];
 interface IconSetterProps {
   value: string;
+  type: string;
   defaultValue: string;
   placeholder: string;
   hasClear: boolean;
-  onChange: (icon: string) => undefined;
+  onChange: (icon: string | object) => undefined;
   icons: string[];
 }
 export default class IconSetter extends PureComponent<IconSetterProps, {}> {
   static defaultProps = {
     value: undefined,
+    type: 'string',
     defaultValue: '',
     hasClear: true,
     icons: icons,
     placeholder: '请点击选择 Icon',
-    onChange: (icon: string) => undefined,
+    onChange: (icon: string | object) => undefined,
   };
 
   state = {
     firstLoad: true,
   };
 
-  onInputChange = (icon: string) => {
+  _onChange = (icon: string) => {
-    const { onChange } = this.props;
+    const { onChange, type } = this.props;
+    if (type === 'string') {
       onChange(icon);
+    } else if (type === 'node') {
+      onChange({
+        componentName: 'Icon',
+        props: {
+          type: icon,
+        },
+      });
+    }
+  };
+
+  onInputChange = (icon: string) => {
+    this._onChange(icon);
   };
 
   onSelectIcon = (icon: string) => {
-    const { onChange } = this.props;
+    this._onChange(icon);
-    onChange(icon);
   };
 
   render() {
-    const { icons, value, defaultValue, onChange, placeholder, hasClear } = this.props;
+    const { icons, value, defaultValue, onChange, placeholder, hasClear, type } = this.props;
     const { firstLoad } = this.state;
+    const _value = typeof value === 'object' ? value?.props?.type : value;
     if (firstLoad && defaultValue && typeof value === 'undefined') onChange(defaultValue);
     this.setState({
       firstLoad: false,
     });
-    const currentIcon = <Icon size="xs" type={value} />;
+    const currentIcon = <Icon size="xs" type={_value} />;
     const clearIcon = hasClear && (
       <Icon
         size="xs"
@@ -121,7 +136,7 @@ export default class IconSetter extends PureComponent<IconSetterProps, {}> {
           placeholder={placeholder}
           addonTextBefore={currentIcon}
           onChange={this.onInputChange}
-          value={value}
+          value={_value}
           defaultValue={defaultValue}
           readOnly
           addonTextAfter={clearIcon}

packages/editor-setters/src/index.tsx

@@ -15,6 +15,10 @@ export const StringSetter = {
   defaultProps: { placeholder: '请输入', style: { maxWidth: 180 } },
   title: 'StringSetter',
   recommend: true,
+  condition: (field: any) => {
+    const v = field.getValue();
+    return typeof v === 'string';
+  },
 };
 export const NumberSetter = NumberPicker;
 export class BoolSetter extends Component {
@@ -38,6 +42,10 @@ export const TextAreaSetter = {
   defaultProps: { placeholder: '请输入', style: { maxWidth: 180 } },
   title: 'TextAreaSetter',
   recommend: true,
+  condition: (field: any) => {
+    const v = field.getValue();
+    return typeof v === 'string';
+  },
 };
 export const DateSetter = DatePicker;
 export const DateYearSetter = DatePicker.YearPicker;

packages/editor-skeleton/src/layouts/workbench.less

@@ -13,7 +13,7 @@
   --popup-border-radius: @popup-border-radius;
 
   --left-area-width: 48px;
-  --right-area-width: 280px;
+  --right-area-width: 300px;
   --top-area-height: 48px;
   --toolbar-height: 36px;
   --dock-pane-width: 280px;

packages/editor-skeleton/src/transducers/parse-props.ts

@@ -89,7 +89,7 @@ function propTypeToSetter(propType: PropType): SetterType {
           value,
         };
       });
-      const componentName = dataSource.length > 4 ? 'SelectSetter' : 'RadioGroupSetter';
+      const componentName = dataSource.length >= 4 ? 'SelectSetter' : 'RadioGroupSetter';
       return {
         componentName,
         props: { dataSource },

packages/react-simulator-renderer/src/renderer-view.tsx

@@ -109,20 +109,29 @@ class Renderer extends Component<{ renderer: SimulatorRenderer }> {
           viewProps._leaf = leaf;
           viewProps._componentName = leaf?.componentName;
           // 如果是容器 && 无children && 高宽为空 增加一个占位容器，方便拖动
-          if (leaf?.isContainer() && (children == null || (Array.isArray(children) && !children.length)) && (!viewProps.style || Object.keys(viewProps.style).length == 0)){
+          if (
-            children = <div style={{
+            !viewProps.dataSource &&
-              height:'66px',
+            leaf?.isContainer() &&
-              backgroundColor:'#f0f0f0',
+            (children == null || (Array.isArray(children) && !children.length)) &&
-              borderColor:'#a7b1bd',
+            (!viewProps.style || Object.keys(viewProps.style).length === 0)
+          ) {
+            children = (
+              <div
+                style={{
+                  height: '66px',
+                  backgroundColor: '#f0f0f0',
+                  borderColor: '#a7b1bd',
                   border: '1px dotted',
-              color:'#a7b1bd',
+                  color: '#a7b1bd',
-              textAlign:'center',
+                  textAlign: 'center',
-              lineHeight:'66px'
+                  lineHeight: '66px',
-            }}>
+                }}
-              拖拽组件或模板到这里
+              >
+                {viewProps.placeholder || '拖拽组件或模板到这里'}
               </div>
+            );
           }
-
+          // FIXME: 渲染仍有问题
           if (viewProps._componentName === 'Menu') {
             Object.assign(viewProps, {
               _componentName: 'Menu',