amis 1.6.0 → 1.6.1-beta.0

package/src/RootRenderer.tsx

@@ -1,4 +1,5 @@
 import {observer} from 'mobx-react';
+import {getEnv} from 'mobx-state-tree';
 import React from 'react';
 import Alert from './components/Alert2';
 import Spinner from './components/Spinner';
@@ -39,10 +40,18 @@ export class RootRenderer extends React.Component<RootRendererProps> {
       'handleDialogConfirm',
       'handleDialogClose',
       'handleDrawerConfirm',
-      'handleDrawerClose'
+      'handleDrawerClose',
+      'handlePageVisibilityChange'
     ]);
   }
 
+  componentDidMount() {
+    document.addEventListener(
+      'visibilitychange',
+      this.handlePageVisibilityChange
+    );
+  }
+
   componentDidUpdate(prevProps: RootRendererProps) {
     const props = this.props;
 
@@ -61,6 +70,23 @@ export class RootRenderer extends React.Component<RootRendererProps> {
 
   componentWillUnmount() {
     this.props.rootStore.removeStore(this.store);
+    document.removeEventListener(
+      'visibilitychange',
+      this.handlePageVisibilityChange
+    );
+  }
+
+  handlePageVisibilityChange() {
+    const env = this.props.env;
+    if (document.visibilityState === 'hidden') {
+      env?.tracker({
+        eventType: 'pageHidden'
+      });
+    } else if (document.visibilityState === 'visible') {
+      env?.tracker({
+        eventType: 'pageVisible'
+      });
+    }
   }
 
   handleAction(

package/src/SchemaRenderer.tsx

@@ -5,6 +5,7 @@ import LazyComponent from './components/LazyComponent';
 import {
   filterSchema,
   loadRenderer,
+  RendererComponent,
   RendererConfig,
   RendererEnv,
   RendererProps,
@@ -12,9 +13,12 @@ import {
 } from './factory';
 import {asFormItem} from './renderers/Form/Item';
 import {renderChild, renderChildren} from './Root';
+import {IScopedContext, ScopedContext} from './Scoped';
 import {Schema, SchemaNode} from './types';
+import {DebugWrapper, enableAMISDebug} from './utils/debug';
 import getExprProperties from './utils/filter-schema';
-import {anyChanged, chainEvents} from './utils/helper';
+import {anyChanged, chainEvents, autobind} from './utils/helper';
+import {RendererEvent} from './utils/renderer-event';
 import {SimpleMap} from './utils/SimpleMap';
 
 interface SchemaRendererProps extends Partial<RendererProps> {
@@ -23,6 +27,10 @@ interface SchemaRendererProps extends Partial<RendererProps> {
   env: RendererEnv;
 }
 
+interface BroadcastCmptProps extends RendererProps {
+  component: RendererComponent;
+}
+
 const defaultOmitList = [
   'type',
   'name',
@@ -50,6 +58,58 @@ const defaultOmitList = [
 
 const componentCache: SimpleMap = new SimpleMap();
 
+class BroadcastCmpt extends React.Component<BroadcastCmptProps> {
+  ref: any;
+  unbindEvent: (() => void) | undefined = undefined;
+  static contextType = ScopedContext;
+
+  constructor(props: BroadcastCmptProps, context: IScopedContext) {
+    super(props);
+    this.triggerEvent = this.triggerEvent.bind(this);
+  }
+
+  componentDidMount() {
+    const {env} = this.props;
+    this.unbindEvent = env.bindEvent(this.ref);
+  }
+
+  componentWillUnmount() {
+    this.unbindEvent?.();
+  }
+
+  getWrappedInstance() {
+    return this.ref;
+  }
+
+  async triggerEvent(
+    e: React.MouseEvent<any>,
+    data: any
+  ): Promise<RendererEvent<any> | undefined> {
+    return await this.props.env.dispatchEvent(e, this.ref, data);
+  }
+
+  @autobind
+  childRef(ref: any) {
+    while (ref && ref.getWrappedInstance) {
+      ref = ref.getWrappedInstance();
+    }
+
+    this.ref = ref;
+  }
+
+  render() {
+    const {component: Component, ...rest} = this.props;
+    return (
+      <Component
+        ref={this.childRef}
+        {...rest}
+        scoped={this.context}
+        dispatchEvent={this.triggerEvent}
+      />
+    );
+  }
+}
+
 export class SchemaRenderer extends React.Component<SchemaRendererProps, any> {
   static displayName: string = 'Renderer';
 
@@ -300,7 +360,6 @@ export class SchemaRenderer extends React.Component<SchemaRendererProps, any> {
       ...restSchema
     } = schema;
     const Component = renderer.component;
-
     // 原来表单项的 visible: false 和 hidden: true 表单项的值和验证是有效的
     // 而 visibleOn 和 hiddenOn 是无效的，
     // 这个本来就是个bug，但是已经被广泛使用了
@@ -315,8 +374,8 @@ export class SchemaRenderer extends React.Component<SchemaRendererProps, any> {
       return null;
     }
 
-    return (
-      <Component
+    const component = (
+      <BroadcastCmpt
         {...theme.getRendererConfig(renderer.name)}
         {...restSchema}
         {...chainEvents(rest, restSchema)}
@@ -329,8 +388,15 @@ export class SchemaRenderer extends React.Component<SchemaRendererProps, any> {
         $schema={{...schema, ...exprProps}}
         ref={this.refFn}
         render={this.renderChild}
+        component={Component}
       />
     );
+
+    return enableAMISDebug ? (
+      <DebugWrapper renderer={renderer}>{component}</DebugWrapper>
+    ) : (
+      component
+    );
   }
 }
 

package/src/Scoped.tsx

@@ -8,7 +8,15 @@ import find from 'lodash/find';
 import hoistNonReactStatic from 'hoist-non-react-statics';
 import {dataMapping} from './utils/tpl-builtin';
 import {RendererEnv, RendererProps} from './factory';
-import {noop, autobind, qsstringify, qsparse} from './utils/helper';
+import {
+  noop,
+  autobind,
+  qsstringify,
+  qsparse,
+  createObject,
+  findTree,
+  TreeItem
+} from './utils/helper';
 import {RendererData, Action} from './types';
 
 export interface ScopedComponentType extends React.Component<RendererProps> {
@@ -29,9 +37,11 @@ export interface ScopedComponentType extends React.Component<RendererProps> {
 
 export interface IScopedContext {
   parent?: AliasIScopedContext;
+  children?: AliasIScopedContext[];
   registerComponent: (component: ScopedComponentType) => void;
   unRegisterComponent: (component: ScopedComponentType) => void;
   getComponentByName: (name: string) => ScopedComponentType;
+  getComponentById: (id: string) => ScopedComponentType | undefined;
   getComponents: () => Array<ScopedComponentType>;
   reload: (target: string, ctx: RendererData) => void;
   send: (target: string, ctx: RendererData) => void;
@@ -46,8 +56,7 @@ function createScopedTools(
   env?: RendererEnv
 ): IScopedContext {
   const components: Array<ScopedComponentType> = [];
-
-  return {
+  const self = {
     parent,
     registerComponent(component: ScopedComponentType) {
       // 不要把自己注册在自己的 Scoped 上，自己的 Scoped 是给子节点们注册的。
@@ -80,7 +89,7 @@ function createScopedTools(
 
         return paths.reduce((scope, name, idx) => {
           if (scope && scope.getComponentByName) {
-            const result = scope.getComponentByName(name);
+            const result: ScopedComponentType = scope.getComponentByName(name);
             return result && idx < len - 1 ? result.context : result;
           }
 
@@ -96,6 +105,27 @@ function createScopedTools(
       return resolved || (parent && parent.getComponentByName(name));
     },
 
+    getComponentById(id: string) {
+      let root: AliasIScopedContext = this;
+      // 找到顶端scoped
+      while (root.parent) {
+        root = root.parent;
+      }
+
+      // 向下查找
+      let component = undefined;
+      findTree([root], (item: TreeItem) =>
+        item.getComponents().find((cmpt: ScopedComponentType) => {
+          if (cmpt.props.id === id) {
+            component = cmpt;
+            return true;
+          }
+          return false;
+        })
+      ) as ScopedComponentType | undefined;
+      return component;
+    },
+
     getComponents() {
       return components.concat();
     },
@@ -208,6 +238,17 @@ function createScopedTools(
       }
     }
   };
+
+  if (!parent) {
+    return self;
+  }
+
+  !parent.children && (parent.children = []);
+
+  // 把孩子带上
+  parent.children!.push(self);
+
+  return self;
 }
 
 function closeDialog(component: ScopedComponentType) {
@@ -257,6 +298,7 @@ export function HocScoped<
         context,
         this.props.env
       );
+
       const scopeRef = props.scopeRef;
       scopeRef && scopeRef(this.scoped);
     }

package/src/actions/Action.ts

@@ -0,0 +1,138 @@
+import {extendObject} from '../utils/helper';
+import {RendererEvent} from '../utils/renderer-event';
+import {evalExpression} from '../utils/tpl';
+import {dataMapping} from '../utils/tpl-builtin';
+
+// 逻辑动作类型，支持并行、排他（switch）、循环（支持continue和break）
+type LogicActionType = 'parallel' | 'switch' | 'loop' | 'continue' | 'break';
+
+// 循环动作执行状态
+export enum LoopStatus {
+  NORMAL,
+  BREAK,
+  CONTINUE
+}
+
+// 监听器动作定义
+export interface ListenerAction {
+  actionType: 'broadcast' | LogicActionType | 'custom' | string; // 动作类型 逻辑动作|自定义（脚本支撑）|reload|url|ajax|dialog|drawer 其他扩充的组件动作
+  eventName?: string; // 事件名称，actionType: broadcast
+  description?: string; // 事件描述，actionType: broadcast
+  componentId?: string; // 组件ID，用于直接执行指定组件的动作
+  args?: any; // 参数，可以配置数据映射
+  preventDefault?: boolean; // 阻止原有组件的动作行为
+  stopPropagation?: boolean; // 阻止后续的事件处理器执行
+  execOn?: string; // 执行条件
+  script?: string; // 自定义JS，actionType: custom
+  [propName: string]: any; // 扩展各种Action
+}
+
+export interface LogicAction extends ListenerAction {
+  children?: ListenerAction[]; // 子动作
+}
+
+export interface ListenerContext {
+  [propName: string]: any;
+}
+
+// Action 基础接口
+export interface Action {
+  // 运行这个 Action，每个类型的 Action 都只有一个实例，run 函数是个可重入的函数
+  run: (
+    action: ListenerAction,
+    renderer: ListenerContext,
+    event: RendererEvent<any>,
+    mergeData?: any // 有些Action内部需要通过上下文数据处理专有逻辑，这里的数据是事件数据+渲染器数据
+  ) => Promise<void>;
+}
+
+// 存储 Action 和类型的映射关系，用于后续查找
+const ActionTypeMap: {[key: string]: Action} = {};
+
+// 注册 Action
+export const registerAction = (type: string, action: Action) => {
+  ActionTypeMap[type] = action;
+};
+
+// 通过类型获取 Action 实例
+export const getActionByType = (type: string) => {
+  return ActionTypeMap[type];
+};
+
+export const runActions = async (
+  actions: ListenerAction | ListenerAction[],
+  renderer: ListenerContext,
+  event: any
+) => {
+  if (!Array.isArray(actions)) {
+    actions = [actions];
+  }
+
+  for (const actionConfig of actions) {
+    let actionInstrance = getActionByType(actionConfig.actionType);
+
+    // 如果存在指定组件ID，说明是组件专有动作
+    if (actionConfig.componentId) {
+      actionInstrance = getActionByType('component');
+    } else if (
+      actionConfig.actionType === 'url' ||
+      actionConfig.actionType === 'link' ||
+      actionConfig.actionType === 'jump'
+    ) {
+      // 打开页面动作
+      actionInstrance = getActionByType('openpage');
+    }
+
+    // 找不到就通过组件专有动作完成
+    if (!actionInstrance) {
+      actionInstrance = getActionByType('component');
+    }
+
+    // 这些节点的子节点运行逻辑由节点内部实现
+    await runAction(actionInstrance, actionConfig, renderer, event);
+
+    if (event.stoped) {
+      break;
+    }
+  }
+};
+
+// 执行动作，与原有动作处理打通
+export const runAction = async (
+  actionInstrance: Action,
+  actionConfig: ListenerAction,
+  renderer: ListenerContext,
+  event: any
+) => {
+  // 用户可能，需要用到事件数据和当前域的数据，因此merge事件数据和当前渲染器数据
+  // 需要保持渲染器数据链完整
+  const mergeData = extendObject(renderer.props.data, {
+    event
+  });
+
+  if (actionConfig.execOn && !evalExpression(actionConfig.execOn, mergeData)) {
+    return;
+  }
+
+  // 修正参数，处理数据映射
+  let args = event.data;
+
+  if (actionConfig.args) {
+    args = dataMapping(actionConfig.args, mergeData);
+  }
+
+  await actionInstrance.run(
+    {
+      ...actionConfig,
+      args
+    },
+    renderer,
+    event,
+    mergeData
+  );
+
+  // 阻止原有动作执行
+  actionConfig.preventDefault && event.preventDefault();
+  // 阻止后续动作执行
+  actionConfig.stopPropagation && event.stopPropagation();
+};

package/src/actions/AjaxAction.ts

@@ -0,0 +1,58 @@
+import {IRootStore} from '../store/root';
+import {isVisible} from '../utils/helper';
+import {RendererEvent} from '../utils/renderer-event';
+import {filter} from '../utils/tpl';
+import {
+  Action,
+  ListenerAction,
+  ListenerContext,
+  registerAction
+} from './Action';
+
+/**
+ * 发送请求动作
+ *
+ * @export
+ * @class AjaxAction
+ * @implements {Action}
+ */
+export class AjaxAction implements Action {
+  async run(
+    action: ListenerAction,
+    renderer: ListenerContext,
+    event: RendererEvent<any>
+  ) {
+    const store = renderer.props.store;
+
+    store.setCurrentAction(action);
+    store
+      .saveRemote(action.api as string, action.args, {
+        successMessage: action.messages && action.messages.success,
+        errorMessage: action.messages && action.messages.failed
+      })
+      .then(async () => {
+        if (action.feedback && isVisible(action.feedback, store.data)) {
+          await this.openFeedback(action.feedback, store);
+        }
+
+        const redirect = action.redirect && filter(action.redirect, store.data);
+        redirect && renderer.env.jumpTo(redirect, action);
+      })
+      .catch(() => {});
+  }
+
+  openFeedback(dialog: any, store: IRootStore) {
+    return new Promise(resolve => {
+      store.setCurrentAction({
+        type: 'button',
+        actionType: 'dialog',
+        dialog: dialog
+      });
+      store.openDialog(store.data, undefined, confirmed => {
+        resolve(confirmed);
+      });
+    });
+  }
+}
+
+registerAction('ajax', new AjaxAction());

package/src/actions/BreakAction.ts

@@ -0,0 +1,27 @@
+import {RendererEvent} from '../utils/renderer-event';
+import {
+  Action,
+  ListenerAction,
+  ListenerContext,
+  LoopStatus,
+  registerAction
+} from './Action';
+
+/**
+ * breach
+ *
+ * @export
+ * @class BreakAction
+ * @implements {Action}
+ */
+export class BreakAction implements Action {
+  async run(
+    action: ListenerAction,
+    renderer: ListenerContext,
+    event: RendererEvent<any>
+  ) {
+    renderer.loopStatus = LoopStatus.BREAK;
+  }
+}
+
+registerAction('break', new BreakAction());

package/src/actions/BroadcastAction.ts

@@ -0,0 +1,41 @@
+import {createObject} from '../utils/helper';
+import {RendererEvent} from '../utils/renderer-event';
+import {
+  Action,
+  ListenerAction,
+  ListenerContext,
+  registerAction
+} from './Action';
+
+/**
+ * broadcast
+ *
+ * @export
+ * @class BroadcastAction
+ * @implements {Action}
+ */
+export class BroadcastAction implements Action {
+  async run(
+    action: ListenerAction,
+    renderer: ListenerContext,
+    event: RendererEvent<any>
+  ) {
+    if (!action.eventName) {
+      console.warn('eventName 未定义，请定义事件名称');
+      return;
+    }
+
+    // 作为一个新的事件，需要把广播动作的args参数追加到事件数据中
+    event.setData(createObject(event.data, action.args));
+
+    // 直接触发对应的动作
+    return await event.context.env.dispatchEvent(
+      action.eventName,
+      renderer,
+      action.args,
+      event
+    );
+  }
+}
+
+registerAction('broadcast', new BroadcastAction());

package/src/actions/CmptAction.ts

@@ -0,0 +1,36 @@
+import {RendererEvent} from '../utils/renderer-event';
+import {dataMapping} from '../utils/tpl-builtin';
+import {
+  Action,
+  ListenerAction,
+  ListenerContext,
+  LoopStatus,
+  registerAction
+} from './Action';
+
+/**
+ * 组件动作
+ *
+ * @export
+ * @class CmptAction
+ * @implements {Action}
+ */
+export class CmptAction implements Action {
+  async run(
+    action: ListenerAction,
+    renderer: ListenerContext,
+    event: RendererEvent<any>
+  ) {
+    // 根据唯一ID查找指定组件
+    const component =
+      renderer.props.$schema.id !== action.componentId
+        ? renderer.props.scoped?.getComponentById(action.componentId)
+        : renderer;
+
+    // 执行组件动作
+    (await component.props.onAction?.(event, action, action.args)) ||
+      component.doAction?.(action, action.args);
+  }
+}
+
+registerAction('component', new CmptAction());

package/src/actions/ContinueAction.ts

@@ -0,0 +1,27 @@
+import {RendererEvent} from '../utils/renderer-event';
+import {
+  Action,
+  ListenerAction,
+  ListenerContext,
+  LoopStatus,
+  registerAction
+} from './Action';
+
+/**
+ * continue
+ *
+ * @export
+ * @class ContinueAction
+ * @implements {Action}
+ */
+export class ContinueAction implements Action {
+  async run(
+    action: ListenerAction,
+    renderer: ListenerContext,
+    event: RendererEvent<any>
+  ) {
+    renderer.loopStatus = LoopStatus.CONTINUE;
+  }
+}
+
+registerAction('continue', new ContinueAction());

package/src/actions/CopyAction.ts

@@ -0,0 +1,41 @@
+import {RendererEvent} from '../utils/renderer-event';
+import {dataMapping} from '../utils/tpl-builtin';
+import {filter} from '../utils/tpl';
+import pick from 'lodash/pick';
+import mapValues from 'lodash/mapValues';
+import qs from 'qs';
+import {
+  Action,
+  ListenerAction,
+  ListenerContext,
+  LoopStatus,
+  registerAction
+} from './Action';
+import {isVisible} from '../utils/helper';
+
+/**
+ * 复制动作
+ *
+ * @export
+ * @class CopyAction
+ * @implements {Action}
+ */
+export class CopyAction implements Action {
+  async run(
+    action: ListenerAction,
+    renderer: ListenerContext,
+    event: RendererEvent<any>
+  ) {
+    debugger;
+    if (action.content || action.copy) {
+      renderer.props.env.copy?.(
+        filter(action.content || action.copy, action.args, '| raw'),
+        {
+          format: action.copyFormat
+        }
+      );
+    }
+  }
+}
+
+registerAction('copy', new CopyAction());

package/src/actions/CustomAction.ts

@@ -0,0 +1,46 @@
+import {RendererEvent} from '../utils/renderer-event';
+import {
+  Action,
+  ListenerAction,
+  ListenerContext,
+  LoopStatus,
+  registerAction
+} from './Action';
+
+/**
+ * 自定义动作，JS脚本
+ *
+ * @export
+ * @class CustomAction
+ * @implements {Action}
+ */
+export class CustomAction implements Action {
+  async run(
+    action: ListenerAction,
+    renderer: ListenerContext,
+    event: RendererEvent<any>
+  ) {
+    // 执行自定义编排脚本
+    let scriptFunc = action.script;
+
+    if (typeof scriptFunc === 'string') {
+      scriptFunc = new Function(
+        'context',
+        'doAction',
+        'event',
+        scriptFunc
+      ) as any;
+    }
+
+    // 外部可以直接调用doAction来完成动作调用
+    // 可以通过上下文直接编排动作调用，通过event来进行动作干预
+    await (scriptFunc as any)?.call(
+      null,
+      renderer,
+      renderer.doAction.bind(renderer),
+      event
+    );
+  }
+}
+
+registerAction('custom', new CustomAction());