read lifecycle

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;
 }

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: [

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}

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) {
+      if (supportedEvents) {
-        supportEvents.push(name);
+        supportedEvents.push({
-        (events as any).supportEvents = supportEvents;
+          name,
+          description,
+        });
+        (events as any).supportedEvents = supportedEvents;
       }
       return;
     }
@@ -304,44 +315,40 @@ registerMetadataTransducer(metadata => {
     };
   }
 
-  const { props, events, styles } = configure as any;
+  const { props, events = {}, styles } = configure as any;
-  let eventsDefinition: any;
+  const isRoot: boolean = componentName === 'Page' || componentName === 'Component';
-  let isRoot: boolean = false;
+  const eventsDefinition: any[] = [];
-  if (componentName === 'Page' || componentName === 'Component') {
+  const supportedLifecycles = events.supportedLifecycles || (isRoot ? [
-    isRoot = true;
+    {
-    // 平台配置的，一般只有根节点才会配置
+      description: '初始化时',
-    eventsDefinition = [
+      name: 'constructor',
-      {
+    },
-        type: 'lifeCycleEvent',
+    {
-        title: '生命周期',
+      description: '装载后',
-        list: [
+      name: 'componentDidMount',
-          {
+    },
-            description: '初始化时',
+    {
-            name: 'constructor',
+      description: '更新时',
-          },
+      name: 'componentDidMount',
-          {
+    },
-            description: '装载后',
+    {
-            name: 'componentDidMount',
+      description: '卸载时',
-          },
+      name: 'componentWillUnmount',
-          {
+    },
-            description: '更新时',
+  ] : null);
-            name: 'componentDidMount',
+  if (supportedLifecycles) {
-          },
+    eventsDefinition.push({
-          {
+      type: 'lifeCycleEvent',
-            description: '卸载时',
+      title: '生命周期',
-            name: 'componentWillUnmount',
+      list: supportedLifecycles.map((event: any) => (typeof event === 'string' ? { name: event } : event)),
-          },
+    });
-        ],
+  }
-      },
+  if (events.supportedEvents) {
-    ];
+    eventsDefinition.push({
-  } else {
+      type: 'events',
-    eventsDefinition = [
+      title: '事件',
-      {
+      list: (events.supportedEvents || []).map((event: any) => (typeof event === 'string' ? { name: event } : event)),
-        type: 'events',
+    });
-        title: '事件',
-        list: (events?.supportEvents || []).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: '高级',

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}

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 {