amis 1.8.0-beta.1 → 1.8.0-beta.2

package/src/SchemaRenderer.tsx

@@ -21,6 +21,8 @@ import {anyChanged, chainEvents, autobind} from './utils/helper';
 import {SimpleMap} from './utils/SimpleMap';
 
 import type {RendererEvent} from './utils/renderer-event';
+import {observer} from 'mobx-react';
+import {isAlive} from 'mobx-state-tree';
 
 interface SchemaRendererProps extends Partial<RendererProps> {
   schema: Schema;
@@ -59,6 +61,7 @@ const defaultOmitList = [
 
 const componentCache: SimpleMap = new SimpleMap();
 
+@observer
 class BroadcastCmpt extends React.Component<BroadcastCmptProps> {
   ref: any;
   unbindEvent: (() => void) | undefined = undefined;
@@ -99,21 +102,36 @@ class BroadcastCmpt extends React.Component<BroadcastCmptProps> {
   }
 
   render() {
-    const {component: Component, ...rest} = this.props;
-
+    const {component: Component, rootStore, ...rest} = this.props;
+    const visible = isAlive(rootStore)
+      ? rootStore.visibleState[rest.$schema.id || rest.$path]
+      : true;
+    const disable = isAlive(rootStore)
+      ? rootStore.disableState[rest.$schema.id || rest.$path]
+      : false;
     const isClassComponent = Component.prototype?.isReactComponent;
 
-    // 函数组件不支持 ref https://reactjs.org/docs/refs-and-the-dom.html#refs-and-function-components
+    if (disable) {
+      (rest as any).disabled = true;
+    }
 
-    return isClassComponent ? (
-      <Component
-        ref={this.childRef}
-        {...rest}
-        dispatchEvent={this.dispatchEvent}
-      />
-    ) : (
-      <Component {...rest} dispatchEvent={this.dispatchEvent} />
-    );
+    // 函数组件不支持 ref https://reactjs.org/docs/refs-and-the-dom.html#refs-and-function-components
+    return visible !== false ? (
+      isClassComponent ? (
+        <Component
+          ref={this.childRef}
+          {...rest}
+          rootStore={rootStore}
+          dispatchEvent={this.dispatchEvent}
+        />
+      ) : (
+        <Component
+          {...rest}
+          rootStore={rootStore}
+          dispatchEvent={this.dispatchEvent}
+        />
+      )
+    ) : null;
   }
 }
 

package/src/WithStore.tsx

@@ -1,5 +1,6 @@
 import hoistNonReactStatic from 'hoist-non-react-statics';
 import {observer} from 'mobx-react';
+import {isAlive} from 'mobx-state-tree';
 import React from 'react';
 import {RendererProps} from './factory';
 import {IIRendererStore, IRendererStore} from './store';
@@ -257,7 +258,8 @@ export function HocStoreFactory(renderer: {
       componentWillUnmount() {
         const rootStore = this.context as IRendererStore;
         const store = this.store;
-        rootStore.removeStore(store);
+
+        isAlive(store) && rootStore.removeStore(store);
 
         // @ts-ignore
         delete this.store;

package/src/actions/CmptAction.ts

@@ -21,6 +21,19 @@ export class CmptAction implements Action {
     renderer: ListenerContext,
     event: RendererEvent<any>
   ) {
+    // 显隐&状态控制
+    if (['show', 'hidden'].includes(action.actionType)) {
+      return renderer.props.rootStore.setVisible(
+        action.componentId,
+        action.actionType === 'show'
+      );
+    } else if (['enabled', 'disabled'].includes(action.actionType)) {
+      return renderer.props.rootStore.setDisable(
+        action.componentId,
+        action.actionType === 'disabled'
+      );
+    }
+
     /**
      * 根据唯一ID查找指定组件
      * 触发组件未指定id或未指定响应组件componentId，则使用触发组件响应
@@ -30,6 +43,11 @@ export class CmptAction implements Action {
         ? event.context.scoped?.getComponentById(action.componentId)
         : renderer;
 
+    // 刷新
+    if (action.actionType === 'reload') {
+      return component.reload?.(undefined, action.args);
+    }
+
     // 执行组件动作
     return component.doAction?.(action, action.args);
   }

package/src/renderers/Action.tsx

@@ -753,6 +753,8 @@ export class Action extends React.Component<ActionProps, ActionState> {
       loading,
       body,
       render,
+      onMouseEnter,
+      onMouseLeave,
       classnames: cx,
       classPrefix: ns
     } = this.props;
@@ -768,7 +770,12 @@ export class Action extends React.Component<ActionProps, ActionState> {
           trigger={tooltipTrigger}
           rootClose={tooltipRootClose}
         >
-          <div className={cx('Action', className)} onClick={this.handleAction}>
+          <div
+            className={cx('Action', className)}
+            onClick={this.handleAction}
+            onMouseEnter={onMouseEnter}
+            onMouseLeave={onMouseLeave}
+          >
             {render('body', body) as JSX.Element}
           </div>
         </TooltipWrapper>
@@ -814,6 +821,8 @@ export class Action extends React.Component<ActionProps, ActionState> {
         loadingClassName={loadingClassName}
         loading={loading}
         onClick={this.handleAction}
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
         type={type && ~allowedType.indexOf(type) ? type : 'button'}
         disabled={disabled}
         componentClass={isMenuItem ? 'a' : componentClass}
@@ -877,6 +886,16 @@ export class ActionRenderer extends React.Component<
     }
   }
 
+  @autobind
+  handleMouseEnter(e: React.MouseEvent<any>) {
+    this.props.dispatchEvent(e, this.props.data);
+  }
+
+  @autobind
+  handleMouseLeave(e: React.MouseEvent<any>) {
+    this.props.dispatchEvent(e, this.props.data);
+  }
+
   @autobind
   isCurrentAction(link: string) {
     const {env, data} = this.props;
@@ -892,6 +911,8 @@ export class ActionRenderer extends React.Component<
         env={env}
         disabled={disabled || btnDisabled}
         onAction={this.handleAction}
+        onMouseEnter={this.handleMouseEnter}
+        onMouseLeave={this.handleMouseLeave}
         loading={loading}
         isCurrentUrl={this.isCurrentAction}
         tooltipContainer={

package/src/renderers/Form/Combo.tsx

@@ -642,7 +642,8 @@ export default class ComboControl extends React.Component<ComboProps> {
 
     if (
       syncDefaultValue === false ||
-      this.subFormDefaultValues.length !== this.subForms.length
+      this.subFormDefaultValues.length !==
+        this.subForms.filter(item => item !== undefined).length
     ) {
       return;
     }
@@ -1372,9 +1373,7 @@ export default class ComboControl extends React.Component<ComboProps> {
                 )
               ) : (
                 <Button
-                  level="default"
                   className={cx(`Combo-addBtn`, addButtonClassName)}
-                  block
                   tooltip={__('Combo.add')}
                   onClick={this.addItem}
                 >

package/src/renderers/Form/index.tsx

@@ -1410,7 +1410,7 @@ export default class Form extends React.Component<FormProps, object> {
       formHorizontal: horizontal,
       controlWidth,
       disabled: disabled || (control as Schema).disabled || form.loading,
-      btnDisabled: form.loading || form.validating,
+      btnDisabled: disabled || form.loading || form.validating,
       onAction: this.handleAction,
       onQuery: this.handleQuery,
       onChange: this.handleChange,

package/src/renderers/Form/wrapControl.tsx

@@ -353,7 +353,7 @@ export function wrapControl<
               this.model.clearValueOnHidden &&
                 this.model.form?.deleteValueByName(this.model.name);
 
-              rootStore.removeStore(this.model);
+              isAlive(rootStore) && rootStore.removeStore(this.model);
             }
             delete this.model;
           }

package/src/renderers/Tabs.tsx

@@ -264,7 +264,11 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
 
   // 初始化 tabs 数组，当从 source 获取数据源时
   @autobind
-  initTabArray(tabs: Array<TabSource>, source?: string, data?: any): [Array<TabSource>, boolean] {
+  initTabArray(
+    tabs: Array<TabSource>,
+    source?: string,
+    data?: any
+  ): [Array<TabSource>, boolean] {
     if (!tabs) {
       return [[], false];
     }
@@ -325,16 +329,28 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
     let localTabs = this.state.localTabs;
 
     // 响应外部修改 tabs
-    const isTabsModified = isObjectShallowModified({
-      tabs: props.tabs,
-      source: resolveVariableAndFilter(props.source, props.data, '| raw')
-    }, {
-      tabs: preProps.tabs,
-      source: resolveVariableAndFilter(preProps.source, preProps.data, '| raw')
-    }, false);
+    const isTabsModified = isObjectShallowModified(
+      {
+        tabs: props.tabs,
+        source: resolveVariableAndFilter(props.source, props.data, '| raw')
+      },
+      {
+        tabs: preProps.tabs,
+        source: resolveVariableAndFilter(
+          preProps.source,
+          preProps.data,
+          '| raw'
+        )
+      },
+      false
+    );
 
     if (isTabsModified) {
-      const [newLocalTabs, isFromSource] = this.initTabArray(props.tabs, props.source, props.data);
+      const [newLocalTabs, isFromSource] = this.initTabArray(
+        props.tabs,
+        props.source,
+        props.data
+      );
 
       this.setState({
         localTabs: newLocalTabs,
@@ -343,7 +359,11 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
       localTabs = newLocalTabs;
     }
 
-    if (props.location && preProps.location && props.location.hash !== preProps.location.hash) {
+    if (
+      props.location &&
+      preProps.location &&
+      props.location.hash !== preProps.location.hash
+    ) {
       const hash = props.location.hash.substring(1);
       if (!hash) {
         return;
@@ -464,7 +484,10 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
       tab.hash ? tab.hash === key : index === key
     );
 
-    if (localTabs[tabIndex] && !isVisible(localTabs[tabIndex], this.props.data)) {
+    if (
+      localTabs[tabIndex] &&
+      !isVisible(localTabs[tabIndex], this.props.data)
+    ) {
       let len = localTabs.length;
       let i = tabIndex - 1 + len;
       let tries = len - 1;
@@ -491,11 +514,14 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
       body: '新增tab 内容'
     } as TabSource);
 
-    this.setState({
-      localTabs: localTabs
-    }, () => {
-      this.switchTo(this.state.localTabs.length - 1);
-    });
+    this.setState(
+      {
+        localTabs: localTabs
+      },
+      () => {
+        this.switchTo(this.state.localTabs.length - 1);
+      }
+    );
   }
 
   @autobind
@@ -520,20 +546,23 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
   }
 
   @autobind
-  async handleDragChange(e: any){
+  async handleDragChange(e: any) {
     const activeTab = this.resolveTabByKey(this.activeKey);
     const originTabs: TabSource[] = this.state.localTabs.concat();
 
     originTabs.splice(e.newIndex, 0, originTabs.splice(e.oldIndex, 1)[0]);
 
-    this.setState({
-      localTabs: originTabs
-    }, () => {
-      if (activeTab) {
-        const newActiveTabIndex = originTabs.indexOf(activeTab);
-        this.switchTo(newActiveTabIndex);
+    this.setState(
+      {
+        localTabs: originTabs
+      },
+      () => {
+        if (activeTab) {
+          const newActiveTabIndex = originTabs.indexOf(activeTab);
+          this.switchTo(newActiveTabIndex);
+        }
       }
-    });
+    );
   }
 
   @autobind
@@ -571,9 +600,12 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
   @autobind
   async handleChange(key: any, name: any) {
     const {dispatchEvent, data, onChange} = this.props;
-    const rendererEvent = await dispatchEvent('change', createObject(data, {
-      value: key,
-    }));
+    const rendererEvent = await dispatchEvent(
+      'change',
+      createObject(data, {
+        value: key
+      })
+    );
     if (rendererEvent?.prevented) {
       return;
     }
@@ -772,4 +804,19 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
 @Renderer({
   type: 'tabs'
 })
-export class TabsRenderer extends Tabs {}
+export class TabsRenderer extends Tabs {
+  static contextType = ScopedContext;
+
+  constructor(props: TabsProps, context: IScopedContext) {
+    super(props);
+
+    const scoped = context;
+    scoped.registerComponent(this);
+  }
+
+  componentWillUnmount() {
+    super.componentWillUnmount?.();
+    const scoped = this.context as IScopedContext;
+    scoped.unRegisterComponent(this);
+  }
+}