Combo 添加 lazyLoad 模式

src/components/LazyComponent.tsx

@@ -6,6 +6,7 @@
 
 import React from 'react';
 import VisibilitySensor = require('react-visibility-sensor');
+import Spinner from './Spinner';
 
 export interface LazyComponentProps {
   component?: React.ReactType;
@@ -27,7 +28,7 @@ export default class LazyComponent extends React.Component<
   LazyComponentState
 > {
   static defaultProps = {
-    placeholder: '加载中...',
+    placeholder: <Spinner />,
     unMountOnHidden: false,
     partialVisibility: true
   };
@@ -89,6 +90,7 @@ export default class LazyComponent extends React.Component<
       childProps,
       visiblilityProps,
       partialVisibility,
+      children,
       ...rest
     } = this.props;
 
@@ -105,6 +107,8 @@ export default class LazyComponent extends React.Component<
           <div className="visibility-sensor">
             {Component && visible ? (
               <Component {...rest} {...childProps} />
+            ) : children && visible ? (
+              children
             ) : (
               placeholder
             )}
@@ -126,6 +130,8 @@ export default class LazyComponent extends React.Component<
     } else if (Component) {
       // 只监听不可见到可见，一旦可见了，就销毁检查。
       return <Component {...rest} {...childProps} />;
+    } else if (children) {
+      return children;
     }
 
     return <div>{placeholder}</div>;

src/renderers/Form/Combo.tsx

@@ -73,6 +73,7 @@ export interface ComboProps extends FormControlProps {
   tabsMode: boolean;
   tabsStyle: '' | 'line' | 'card' | 'radio';
   tabsLabelTpl?: string;
+  lazyLoad?: boolean;
   messages?: {
     validateFailed?: string;
     minLengthValidateFailed?: string;
@@ -116,7 +117,8 @@ export default class ComboControl extends React.Component<ComboProps> {
     'noBorder',
     'conditions',
     'tabsMode',
-    'tabsStyle'
+    'tabsStyle',
+    'lazyLoad'
   ];
 
   subForms: Array<any> = [];
@@ -818,7 +820,8 @@ export default class ComboControl extends React.Component<ComboProps> {
       dragIcon,
       deleteIcon,
       noBorder,
-      conditions
+      conditions,
+      lazyLoad
     } = this.props;
 
     let controls = this.props.controls;
@@ -943,6 +946,7 @@ export default class ComboControl extends React.Component<ComboProps> {
                             onInit: this.handleFormInit,
                             onAction: this.handleAction,
                             ref: this.makeFormRef(index),
+                            lazyLoad,
                             canAccessSuperData,
                             value: undefined,
                             formItemValue: undefined

src/renderers/Form/index.tsx

@@ -31,6 +31,7 @@ import qs = require('qs');
 import {dataMapping} from '../../utils/tpl-builtin';
 import {isApiOutdated, isEffectiveApi} from '../../utils/api';
 import Spinner from '../../components/Spinner';
+import {LazyComponent} from '../../components';
 export type FormGroup = FormSchema & {
   title?: string;
   className?: string;
@@ -88,6 +89,7 @@ export interface FormProps extends RendererProps, FormSchema {
   persistData: boolean; // 开启本地缓存
   clearPersistDataAfterSubmit: boolean; // 提交成功后清空本地缓存
   trimValues?: boolean;
+  lazyLoad?: boolean;
   onInit?: (values: object, props: any) => any;
   onReset?: (values: object) => void;
   onSubmit?: (values: object, action: any) => any;
@@ -155,7 +157,8 @@ export default class Form extends React.Component<FormProps, object> {
     'onFinished',
     'canAccessSuperData',
     'lazyChange',
-    'formLazyChange'
+    'formLazyChange',
+    'lazyLoad'
   ];
 
   hooks: {
@@ -1058,7 +1061,8 @@ export default class Form extends React.Component<FormProps, object> {
       actionsClassName,
       bodyClassName,
       classnames: cx,
-      affixFooter
+      affixFooter,
+      lazyLoad
     } = this.props;
 
     let body: JSX.Element = this.renderBody();
@@ -1086,6 +1090,10 @@ export default class Form extends React.Component<FormProps, object> {
       ) as JSX.Element;
     }
 
+    if (lazyLoad) {
+      body = <LazyComponent>{body}</LazyComponent>;
+    }
+
     return body;
   }
 }

src/store/iRenderer.ts

@@ -1,4 +1,4 @@
-import {types, getRoot, Instance, destroy} from 'mobx-state-tree';
+import {types, getRoot, Instance, destroy, isAlive} from 'mobx-state-tree';
 import {extendObject, createObject} from '../utils/helper';
 import {IRendererStore} from './index';
 import {dataMapping} from '../utils/tpl-builtin';
@@ -26,7 +26,8 @@ export const iRendererStore = types
     return {
       // todo 不能自己引用自己
       get parentStore(): any {
-        return self.parentId &&
+        return isAlive(self) &&
+          self.parentId &&
           getRoot(self) &&
           (getRoot(self) as IRendererStore).storeType === 'RendererStore'
           ? (getRoot(self) as IRendererStore).stores.get(self.parentId)