修复动作状态控制 (#4762)

* 修复动作状态控制

* 修复动作状态控制用例更新

packages/amis-core/src/RootRenderer.tsx

@@ -320,6 +320,7 @@ export class RootRenderer extends React.Component<RootRendererProps> {
         },
         {
           ...rest,
+          topStore: this.store,
           body: (
             <>
               <h3>{this.store.runtimeError?.toString()}</h3>
@@ -337,6 +338,7 @@ export class RootRenderer extends React.Component<RootRendererProps> {
         {
           render(pathPrefix!, schema, {
             ...rest,
+            topStore: this.store,
             data: this.store.downStream,
             onAction: this.handleAction
           }) as JSX.Element
@@ -349,6 +351,7 @@ export class RootRenderer extends React.Component<RootRendererProps> {
           },
           {
             ...rest,
+            topStore: this.store,
             show: store.loading
           }
         )}
@@ -361,6 +364,7 @@ export class RootRenderer extends React.Component<RootRendererProps> {
               },
               {
                 ...rest,
+                topStore: this.store,
                 body: store.msg,
                 showCloseButton: true,
                 onClose: store.clearMessage
@@ -378,6 +382,7 @@ export class RootRenderer extends React.Component<RootRendererProps> {
           {
             ...rest,
             key: 'dialog',
+            topStore: this.store,
             data: store.dialogData,
             onConfirm: this.handleDialogConfirm,
             onClose: this.handleDialogClose,
@@ -396,6 +401,7 @@ export class RootRenderer extends React.Component<RootRendererProps> {
           {
             ...rest,
             key: 'drawer',
+            topStore: this.store,
             data: store.drawerData,
             onConfirm: this.handleDrawerConfirm,
             onClose: this.handleDrawerClose,

packages/amis-core/src/SchemaRenderer.tsx

@@ -81,11 +81,11 @@ export class SchemaRenderer extends React.Component<SchemaRendererProps, any> {
 
     this.dispatchEvent = this.dispatchEvent.bind(this);
 
-    // 监听rootStore更新
+    // 监听topStore更新
     this.reaction = reaction(
       () =>
-        `${props.rootStore.visibleState[props.schema.id || props.$path]}${
-          props.rootStore.disableState[props.schema.id || props.$path]
+        `${props.topStore.visibleState[props.schema.id || props.$path]}${
+          props.topStore.disableState[props.schema.id || props.$path]
         }`,
       () => this.forceUpdate()
     );
@@ -240,7 +240,14 @@ export class SchemaRenderer extends React.Component<SchemaRendererProps, any> {
   }
 
   render(): JSX.Element | null {
-    let {$path: _, schema: __, rootStore, render, ...rest} = this.props;
+    let {
+      $path: _,
+      schema: __,
+      rootStore,
+      topStore,
+      render,
+      ...rest
+    } = this.props;
 
     if (__ == null) {
       return null;
@@ -261,11 +268,11 @@ export class SchemaRenderer extends React.Component<SchemaRendererProps, any> {
       : {};
 
     // 控制显隐
-    const visible = isAlive(rootStore)
-      ? rootStore.visibleState[schema.id || $path]
+    const visible = isAlive(topStore)
+      ? topStore.visibleState[schema.id || $path]
       : undefined;
-    const disable = isAlive(rootStore)
-      ? rootStore.disableState[schema.id || $path]
+    const disable = isAlive(topStore)
+      ? topStore.disableState[schema.id || $path]
       : undefined;
 
     if (
@@ -294,7 +301,8 @@ export class SchemaRenderer extends React.Component<SchemaRendererProps, any> {
             $schema: schema,
             render: this.renderChild,
             forwardedRef: this.refFn,
-            rootStore: rootStore,
+            rootStore,
+            topStore,
             dispatchEvent: this.dispatchEvent
           });
     } else if (typeof schema.component === 'function') {
@@ -322,7 +330,8 @@ export class SchemaRenderer extends React.Component<SchemaRendererProps, any> {
             ref: isSFC ? undefined : this.refFn,
             forwardedRef: isSFC ? this.refFn : undefined,
             render: this.renderChild,
-            rootStore: rootStore,
+            rootStore,
+            topStore,
             dispatchEvent: this.dispatchEvent
           });
     } else if (Object.keys(schema).length === 0) {
@@ -351,6 +360,7 @@ export class SchemaRenderer extends React.Component<SchemaRendererProps, any> {
           $schema={schema}
           retry={this.reRender}
           rootStore={rootStore}
+          topStore={topStore}
           dispatchEvent={this.dispatchEvent}
         />
       );
@@ -397,7 +407,8 @@ export class SchemaRenderer extends React.Component<SchemaRendererProps, any> {
       $schema: $schema,
       ref: this.refFn,
       render: this.renderChild,
-      rootStore: rootStore,
+      rootStore,
+      topStore,
       dispatchEvent: this.dispatchEvent
     };
 

packages/amis-core/src/actions/CmptAction.ts

@@ -44,12 +44,12 @@ export class CmptAction implements RendererAction {
 
     // 显隐&状态控制
     if (['show', 'hidden'].includes(action.actionType)) {
-      return renderer.props.rootStore.setVisible(
+      return renderer.props.topStore.setVisible(
         action.componentId,
         action.actionType === 'show'
       );
     } else if (['enabled', 'disabled'].includes(action.actionType)) {
-      return renderer.props.rootStore.setDisable(
+      return renderer.props.topStore.setDisable(
         action.componentId,
         action.actionType === 'disabled'
       );

packages/amis-core/src/store/index.ts

@@ -46,10 +46,6 @@ export const RendererStore = types
   .model('RendererStore', {
     storeType: 'RendererStore'
   })
-  .props({
-    visibleState: types.optional(types.frozen(), {}),
-    disableState: types.optional(types.frozen(), {})
-  })
   .views(self => ({
     get fetcher() {
       return getEnv(self).fetcher;
@@ -97,22 +93,6 @@ export const RendererStore = types
     removeStore(store: IStoreNode) {
       // store.dispose();
       removeStore(store);
-    },
-
-    setVisible(id: string, value: boolean) {
-      const state = {
-        ...self.visibleState,
-        [id]: value
-      };
-      self.visibleState = state;
-    },
-
-    setDisable(id: string, value: boolean) {
-      const state = {
-        ...self.disableState,
-        [id]: value
-      };
-      self.disableState = state;
     }
   }));
 

packages/amis-core/src/store/root.ts

@@ -6,7 +6,9 @@ export const RootStore = ServiceStore.named('RootStore')
   .props({
     runtimeError: types.frozen(),
     runtimeErrorStack: types.frozen(),
-    query: types.frozen()
+    query: types.frozen(),
+    visibleState: types.optional(types.frozen(), {}),
+    disableState: types.optional(types.frozen(), {})
   })
   .views(self => ({
     get downStream() {
@@ -37,6 +39,20 @@ export const RootStore = ServiceStore.named('RootStore')
           qsparse(window.location.search.substring(1)));
 
       self.query = query;
+    },
+    setVisible(id: string, value: boolean) {
+      const state = {
+        ...self.visibleState,
+        [id]: value
+      };
+      self.visibleState = state;
+    },
+    setDisable(id: string, value: boolean) {
+      const state = {
+        ...self.disableState,
+        [id]: value
+      };
+      self.disableState = state;
     }
   }));
 

packages/amis/__tests__/stores/__snapshots__/index.test.ts.snap

@@ -2,32 +2,24 @@
 
 exports[`store:index 1`] = `
 Object {
-  "disableState": Object {},
   "storeType": "RendererStore",
-  "visibleState": Object {},
 }
 `;
 
 exports[`store:index 2`] = `
 Object {
-  "disableState": Object {},
   "storeType": "RendererStore",
-  "visibleState": Object {},
 }
 `;
 
 exports[`store:index 3`] = `
 Object {
-  "disableState": Object {},
   "storeType": "RendererStore",
-  "visibleState": Object {},
 }
 `;
 
 exports[`store:index 4`] = `
 Object {
-  "disableState": Object {},
   "storeType": "RendererStore",
-  "visibleState": Object {},
 }
 `;