From dba21edfad1a6f85b7ff1f7958aa1608f1a6b450 Mon Sep 17 00:00:00 2001
From: kangwei <bingbing.yb@alibaba-inc.com>
Date: Mon, 16 Mar 2020 20:59:17 +0800
Subject: [PATCH 1/3] fix multi select

---
 packages/plugin-settings/src/index.tsx | 4 ++--
 packages/plugin-settings/src/main.ts   | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/plugin-settings/src/index.tsx b/packages/plugin-settings/src/index.tsx
index c7ebbf33a..d1edcc926 100644
--- a/packages/plugin-settings/src/index.tsx
+++ b/packages/plugin-settings/src/index.tsx
@@ -42,10 +42,10 @@ export default class SettingsMainView extends Component {
 
     let node: Node | null = this.main.nodes[0]!;
     const items = [];
-    let l = 4;
+    let l = 3;
     while (l-- > 0 && node) {
       const props =
-        l === 3
+        l === 2
           ? {}
           : {
               onMouseOver: hoverNode.bind(null, node, true),
diff --git a/packages/plugin-settings/src/main.ts b/packages/plugin-settings/src/main.ts
index 84a4d67b7..7c07e91f2 100644
--- a/packages/plugin-settings/src/main.ts
+++ b/packages/plugin-settings/src/main.ts
@@ -535,7 +535,7 @@ export class SettingsMain implements SettingTarget {
     let theSame = true;
     for (let i = 1; i < l; i++) {
       const other = this.nodes[i];
-      if ((other as any).componentType !== meta) {
+      if (other.componentMeta !== meta) {
         theSame = false;
         break;
       }

From c817d2424a7c3a8db2135663f75de2f899044966 Mon Sep 17 00:00:00 2001
From: kangwei <bingbing.yb@alibaba-inc.com>
Date: Mon, 16 Mar 2020 22:32:28 +0800
Subject: [PATCH 2/3] read lifecycle

---
 .../builtins/simulator/renderer/renderer.ts   |   5 +-
 packages/editor/src/config/assets.js          |  85 +++++++++++++-
 packages/plugin-settings/src/index.tsx        |   2 +
 .../src/register-transducer.ts                | 109 +++++++++---------
 packages/plugin-settings/src/title/index.tsx  |   9 +-
 packages/plugin-settings/src/title/title.less |   7 ++
 6 files changed, 157 insertions(+), 60 deletions(-)

diff --git a/packages/designer/src/builtins/simulator/renderer/renderer.ts b/packages/designer/src/builtins/simulator/renderer/renderer.ts
index 08298fc08..40cb6647d 100644
--- a/packages/designer/src/builtins/simulator/renderer/renderer.ts
+++ b/packages/designer/src/builtins/simulator/renderer/renderer.ts
@@ -314,7 +314,10 @@ export interface LibraryMap {
 function buildComponents(libraryMap: LibraryMap, componentsMap: { [componentName: string]: NpmInfo }) {
   const components: any = {};
   Object.keys(componentsMap).forEach(componentName => {
-    components[componentName] = findComponent(libraryMap, componentName, componentsMap[componentName]);
+    const component = findComponent(libraryMap, componentName, componentsMap[componentName]);
+    if (component) {
+      components[componentName] = component;
+    }
   });
   return components;
 }
diff --git a/packages/editor/src/config/assets.js b/packages/editor/src/config/assets.js
index 4a6193df6..02a2d80e3 100644
--- a/packages/editor/src/config/assets.js
+++ b/packages/editor/src/config/assets.js
@@ -13,6 +13,44 @@ export default {
     }
   },
   components: {
+    Page: {
+      componentName: 'Page',
+      title: '页面',
+      configure: {
+        events: {
+          supportedLifecycles: [
+            {
+              description: '初始化时',
+              name: 'constructor',
+            },
+            {
+              description: '装载后',
+              name: 'componentDidMount',
+            },
+            {
+              description: '更新时',
+              name: 'componentDidMount',
+            },
+            {
+              description: '卸载时',
+              name: 'componentWillUnmount',
+            },
+          ]
+        },
+        component: {
+          isContainer: true,
+        }
+      }
+    },
+    Div: {
+      componentName: 'Div',
+      title: '容器',
+      configure: {
+        component: {
+          isContainer: true,
+        }
+      }
+    },
     Button: {
       componentName: 'Button',
       title: '按钮',
@@ -165,7 +203,15 @@ export default {
           name: 'children',
           propType: 'node'
         }
-      ]
+      ],
+      configure: {
+        component: {
+          isContainer: true,
+          nestingRule: {
+            childWhitelist: 'Button'
+          }
+        }
+      }
     },
     Input: {
       componentName: 'Input',
@@ -450,7 +496,12 @@ export default {
           propType: 'bool',
           description: '是否开启预览态'
         }
-      ]
+      ],
+      configure: {
+        component: {
+          isContainer: true,
+        }
+      }
     },
     'Form.Item': {
       componentName: 'Form.Item',
@@ -747,7 +798,15 @@ export default {
           propType: 'func',
           description: '预览态模式下渲染的内容\n@param {any} value 根据包裹的组件的 value 类型而决定'
         }
-      ]
+      ],
+      configure: {
+        component: {
+          isContainer: true,
+          nestingRule: {
+            parentWhitelist: 'Form'
+          }
+        }
+      }
     },
     NumberPicker: {
       componentName: 'NumberPicker',
@@ -1142,7 +1201,15 @@ export default {
           propType: 'object',
           defaultValue: 'zhCN.Select'
         }
-      ]
+      ],
+      configure: {
+        component: {
+          isContainer: true,
+          nestingRule: {
+            childWhitelist: 'Select.Option'
+          }
+        }
+      }
     },
     'Select.Option': {
       componentName: 'Select.Option',
@@ -1173,7 +1240,15 @@ export default {
           name: 'children',
           propType: 'any'
         }
-      ]
+      ],
+      configure: {
+        component: {
+          isContainer: true,
+          nestingRule: {
+            parentWhitelist: 'Select'
+          }
+        }
+      }
     }
   },
   componentList: [
diff --git a/packages/plugin-settings/src/index.tsx b/packages/plugin-settings/src/index.tsx
index d1edcc926..36f6fc754 100644
--- a/packages/plugin-settings/src/index.tsx
+++ b/packages/plugin-settings/src/index.tsx
@@ -8,6 +8,7 @@ import Node from '../../designer/src/designer/document/node/node';
 import ArraySetter from './builtin-setters/array-setter';
 import ObjectSetter from './builtin-setters/object-setter';
 import './register-transducer';
+import { TipContainer } from './tip';
 
 export default class SettingsMainView extends Component {
   private main: SettingsMain;
@@ -101,6 +102,7 @@ export default class SettingsMainView extends Component {
 
     return (
       <div className="lc-settings-main">
+        <TipContainer />
         <Tab
           navClassName="lc-settings-tabs"
           animation={false}
diff --git a/packages/plugin-settings/src/register-transducer.ts b/packages/plugin-settings/src/register-transducer.ts
index 01732b253..aa2a14dcb 100644
--- a/packages/plugin-settings/src/register-transducer.ts
+++ b/packages/plugin-settings/src/register-transducer.ts
@@ -11,7 +11,13 @@ import { SetterType, FieldConfig, SettingField } from './main';
 import { registerMetadataTransducer } from '../../designer/src/designer/component-meta';
 
 export function propConfigToFieldConfig(propConfig: PropConfig): FieldConfig {
+  const { name, description } = propConfig;
+  const title = {
+    label: description?.slice(0, 10) || name,
+    tip: description ? `${name} | ${description}` : undefined,
+  };
   return {
+    title,
     ...propConfig,
     setter: propTypeToSetter(propConfig.propType),
   };
@@ -163,21 +169,23 @@ registerMetadataTransducer(metadata => {
       return metadata as any;
     }
   }
+
+  const { configure = {} } = metadata;
+
   if (!metadata.props) {
     return {
       ...metadata,
       configure: {
-        props: metadata.configure && Array.isArray(metadata.configure) ? metadata.configure : [],
+        ...configure,
+        props: [],
       },
     };
   }
-
-  const { configure = {} } = metadata;
   const { props = [], component = {}, events = {}, styles = {} } = configure;
-  const supportEvents: string[] | null = (events as any).supportEvents ? null : [];
+  const supportedEvents: any[] | null = (events as any).supportedEvents ? null : [];
 
   metadata.props.forEach(prop => {
-    const { name, propType } = prop;
+    const { name, propType, description } = prop;
     if (
       name === 'children' &&
       (component.isContainer || propType === 'node' || propType === 'element' || propType === 'any')
@@ -189,9 +197,12 @@ registerMetadataTransducer(metadata => {
     }
 
     if (EVENT_RE.test(name) && (propType === 'func' || propType === 'any')) {
-      if (supportEvents) {
-        supportEvents.push(name);
-        (events as any).supportEvents = supportEvents;
+      if (supportedEvents) {
+        supportedEvents.push({
+          name,
+          description,
+        });
+        (events as any).supportedEvents = supportedEvents;
       }
       return;
     }
@@ -304,44 +315,40 @@ registerMetadataTransducer(metadata => {
     };
   }
 
-  const { props, events, styles } = configure as any;
-  let eventsDefinition: any;
-  let isRoot: boolean = false;
-  if (componentName === 'Page' || componentName === 'Component') {
-    isRoot = true;
-    // 平台配置的，一般只有根节点才会配置
-    eventsDefinition = [
-      {
-        type: 'lifeCycleEvent',
-        title: '生命周期',
-        list: [
-          {
-            description: '初始化时',
-            name: 'constructor',
-          },
-          {
-            description: '装载后',
-            name: 'componentDidMount',
-          },
-          {
-            description: '更新时',
-            name: 'componentDidMount',
-          },
-          {
-            description: '卸载时',
-            name: 'componentWillUnmount',
-          },
-        ],
-      },
-    ];
-  } else {
-    eventsDefinition = [
-      {
-        type: 'events',
-        title: '事件',
-        list: (events?.supportEvents || []).map((event: any) => (typeof event === 'string' ? { name: event } : event)),
-      },
-    ];
+  const { props, events = {}, styles } = configure as any;
+  const isRoot: boolean = componentName === 'Page' || componentName === 'Component';
+  const eventsDefinition: any[] = [];
+  const supportedLifecycles = events.supportedLifecycles || (isRoot ? [
+    {
+      description: '初始化时',
+      name: 'constructor',
+    },
+    {
+      description: '装载后',
+      name: 'componentDidMount',
+    },
+    {
+      description: '更新时',
+      name: 'componentDidMount',
+    },
+    {
+      description: '卸载时',
+      name: 'componentWillUnmount',
+    },
+  ] : null);
+  if (supportedLifecycles) {
+    eventsDefinition.push({
+      type: 'lifeCycleEvent',
+      title: '生命周期',
+      list: supportedLifecycles.map((event: any) => (typeof event === 'string' ? { name: event } : event)),
+    });
+  }
+  if (events.supportedEvents) {
+    eventsDefinition.push({
+      type: 'events',
+      title: '事件',
+      list: (events.supportedEvents || []).map((event: any) => (typeof event === 'string' ? { name: event } : event)),
+    });
   }
   //  通用设置
   const propsGroup = props || [];
@@ -402,7 +409,7 @@ registerMetadataTransducer(metadata => {
     });
   }
 
-  if (eventsDefinition) {
+  if (eventsDefinition.length > 0) {
     combined.push({
       name: '#events',
       title: '事件',
@@ -416,15 +423,14 @@ registerMetadataTransducer(metadata => {
               definition: eventsDefinition,
             },
           },
-
-          getValue(field: SettingField, val?:any[]) {
+          getValue(field: SettingField, val?: any[]) {
+            // todo:
             return val;
           },
 
           setValue(field: SettingField, eventDataList: any[]) {
+            // todo:
             return;
-            // console.info(eventDataList);
-            // field.parent.setPropValue('eventDataList', eventDataList);
           },
         },
       ],
@@ -432,7 +438,6 @@ registerMetadataTransducer(metadata => {
   }
 
   if (isRoot) {
-    // todo...
     combined.push({
       name: '#advanced',
       title: '高级',
diff --git a/packages/plugin-settings/src/title/index.tsx b/packages/plugin-settings/src/title/index.tsx
index 00963ec46..266a947de 100644
--- a/packages/plugin-settings/src/title/index.tsx
+++ b/packages/plugin-settings/src/title/index.tsx
@@ -6,7 +6,7 @@ import './title.less';
 
 export interface IconConfig {
   type: string;
-  size?: number | "small" | "xxs" | "xs" | "medium" | "large" | "xl" | "xxl" | "xxxl" | "inherit";
+  size?: number | 'small' | 'xxs' | 'xs' | 'medium' | 'large' | 'xl' | 'xxl' | 'xxxl' | 'inherit';
   className?: string;
 }
 
@@ -51,7 +51,12 @@ export default class Title extends Component<{ title: TitleContent; onClick?: ()
     }
 
     return (
-      <div className={classNames('lc-title', title.className)} onClick={this.props.onClick}>
+      <div
+        className={classNames('lc-title', title.className, {
+          'has-tip': !!tip,
+        })}
+        onClick={this.props.onClick}
+      >
         {icon ? <div className="lc-title-icon">{icon}</div> : null}
         {title.label ? <span className="lc-title-label">{title.label}</span> : null}
         {tip}
diff --git a/packages/plugin-settings/src/title/title.less b/packages/plugin-settings/src/title/title.less
index 3563331df..049626e6c 100644
--- a/packages/plugin-settings/src/title/title.less
+++ b/packages/plugin-settings/src/title/title.less
@@ -7,6 +7,13 @@
     align-items: center;
     margin-right: 4px;
   }
+  &.has-tip {
+    cursor: help;
+    text-decoration-line: underline;
+    text-decoration-style: dashed;
+    text-decoration-color: rgba(31, 56, 88, .3);
+  }
+  padding: 2px 0;
 }
 
 .actived .lc-title {

From 8315bc112487bf3fd1a401f4c6699e35402b2519 Mon Sep 17 00:00:00 2001
From: kangwei <bingbing.yb@alibaba-inc.com>
Date: Mon, 16 Mar 2020 23:15:15 +0800
Subject: [PATCH 3/3] joint setters

---
 packages/editor/src/config/setters.ts         | 22 ++++++++++---------
 .../src}/events-setter/event-dialog.tsx       |  0
 .../src}/events-setter/index.tsx              |  0
 .../src}/events-setter/native-events.ts       |  0
 .../src}/events-setter/style.less             |  0
 packages/plugin-setters/src/mixin-setter.tsx  |  3 ++-
 .../src/register-transducer.ts                |  9 +++++---
 7 files changed, 20 insertions(+), 14 deletions(-)
 rename packages/{plugin-settings/src/builtin-setters => plugin-setters/src}/events-setter/event-dialog.tsx (100%)
 rename packages/{plugin-settings/src/builtin-setters => plugin-setters/src}/events-setter/index.tsx (100%)
 rename packages/{plugin-settings/src/builtin-setters => plugin-setters/src}/events-setter/native-events.ts (100%)
 rename packages/{plugin-settings/src/builtin-setters => plugin-setters/src}/events-setter/style.less (100%)

diff --git a/packages/editor/src/config/setters.ts b/packages/editor/src/config/setters.ts
index 46f762ff0..32a404a41 100644
--- a/packages/editor/src/config/setters.ts
+++ b/packages/editor/src/config/setters.ts
@@ -1,8 +1,7 @@
-import { DatePicker, Input, Radio, Select, Switch } from '@alifd/next';
-import NumberSetter from '../../../plugin-setters/src/number-setter';
+import { DatePicker, Input, Radio, Select, Switch, NumberPicker } from '@alifd/next';
 import ExpressionSetter from '../../../plugin-setters/src/expression-setter';
 import MixinSetter from '../../../plugin-setters/src/mixin-setter';
-import EventsSetter from '../../../plugin-settings/src/builtin-setters/events-setter'
+import EventsSetter from '../../../plugin-setters/src/events-setter';
 import { registerSetter } from '../../../plugin-settings/src';
 import { createElement } from 'react';
 
@@ -17,17 +16,20 @@ registerSetter('ClassNameSetter', () => {
 });
 
 registerSetter('EventsSetter', EventsSetter);
-
-registerSetter('StringSetter', { component: Input, props: { placeholder: '请输入' } });
-
-registerSetter('NumberSetter', NumberSetter as any);
-
-registerSetter('StringSetter', { component: Input, props: { placeholder: '请输入' } });
+registerSetter('StringSetter', { component: Input, defaultProps: { placeholder: '请输入' } });
+registerSetter('NumberSetter', NumberPicker);
 registerSetter('ExpressionSetter', ExpressionSetter);
 registerSetter('MixinSetter', MixinSetter);
 registerSetter('BoolSetter', Switch);
-registerSetter('RadioGroupSetter', Radio.RadioGroup);
+registerSetter('RadioGroupSetter', {
+  component: Radio.Group,
+  defaultProps: {
+    shape: 'button'
+  }
+});
 registerSetter('SelectSetter', Select);
+
+// suggest: 做成 StringSetter 的一个参数，
 registerSetter('TextAreaSetter', Input.TextArea);
 registerSetter('DateSetter', DatePicker);
 registerSetter('DateYearSetter', DatePicker.YearPicker);
diff --git a/packages/plugin-settings/src/builtin-setters/events-setter/event-dialog.tsx b/packages/plugin-setters/src/events-setter/event-dialog.tsx
similarity index 100%
rename from packages/plugin-settings/src/builtin-setters/events-setter/event-dialog.tsx
rename to packages/plugin-setters/src/events-setter/event-dialog.tsx
diff --git a/packages/plugin-settings/src/builtin-setters/events-setter/index.tsx b/packages/plugin-setters/src/events-setter/index.tsx
similarity index 100%
rename from packages/plugin-settings/src/builtin-setters/events-setter/index.tsx
rename to packages/plugin-setters/src/events-setter/index.tsx
diff --git a/packages/plugin-settings/src/builtin-setters/events-setter/native-events.ts b/packages/plugin-setters/src/events-setter/native-events.ts
similarity index 100%
rename from packages/plugin-settings/src/builtin-setters/events-setter/native-events.ts
rename to packages/plugin-setters/src/events-setter/native-events.ts
diff --git a/packages/plugin-settings/src/builtin-setters/events-setter/style.less b/packages/plugin-setters/src/events-setter/style.less
similarity index 100%
rename from packages/plugin-settings/src/builtin-setters/events-setter/style.less
rename to packages/plugin-setters/src/events-setter/style.less
diff --git a/packages/plugin-setters/src/mixin-setter.tsx b/packages/plugin-setters/src/mixin-setter.tsx
index f23744697..5371d7800 100644
--- a/packages/plugin-setters/src/mixin-setter.tsx
+++ b/packages/plugin-setters/src/mixin-setter.tsx
@@ -34,7 +34,8 @@ export default class Mixin extends PureComponent {
   };
   static defaultProps = {
     locale: 'zh-CN',
-    messages: zhCN
+    messages: zhCN,
+    types: ['StringSetter', 'ExpressionSetter', 'NumberSetter', 'BoolSetter', 'SelectSetter', 'RadioGroupSetter'],
   };
   constructor(props) {
     super(props);
diff --git a/packages/plugin-settings/src/register-transducer.ts b/packages/plugin-settings/src/register-transducer.ts
index aa2a14dcb..8229a62b3 100644
--- a/packages/plugin-settings/src/register-transducer.ts
+++ b/packages/plugin-settings/src/register-transducer.ts
@@ -61,7 +61,7 @@ export function propTypeToSetter(propType: PropType): SetterType {
           value,
         };
       });
-      const componentName = dataSource.length > 4 ? 'SelectSetter' : 'RadioSetter';
+      const componentName = dataSource.length > 4 ? 'SelectSetter' : 'RadioGroupSetter';
       return {
         componentName,
         props: { dataSource },
@@ -141,7 +141,8 @@ export function propTypeToSetter(propType: PropType): SetterType {
       return {
         componentName: 'MixinSetter',
         props: {
-          setters: (propType as OneOfType).value.map(item => propTypeToSetter(item)),
+          // TODO:
+          // setters: (propType as OneOfType).value.map(item => propTypeToSetter(item)),
         },
         isRequired,
       };
@@ -290,11 +291,12 @@ registerMetadataTransducer(metadata => {
             setter: {
               componentName: 'MixinSetter',
               props: {
+                // TODO:
                 setters: [
                   {
                     componentName: 'StringSetter',
                     props: {
-                      // todo:
+                      // TODO: textarea mode
                       multiline: true,
                     },
                     initialValue: '',
@@ -463,6 +465,7 @@ registerMetadataTransducer(metadata => {
               setter: {
                 componentName: 'MixinSetter',
                 props: {
+                  // TODO:
                   setters: [
                     {
                       componentName: 'JSONSetter',