amis 1.9.0-beta.12 → 1.9.0-beta.15

package/src/utils/DataSchema.ts

@@ -0,0 +1,131 @@
+import {DataScope} from './DataScope';
+import type {JSONSchema} from './DataScope';
+import {guid} from './helper';
+
+/**
+ * 用来定义数据本身的数据结构，比如有类型是什么，有哪些属性。
+ */
+export class DataSchema {
+  // 指向顶级数据作用域
+  readonly root: DataScope;
+
+  readonly idMap: {
+    [propName: string]: DataScope;
+  } = {};
+
+  // 这个经常变动，游离于整个链中
+  current: DataScope;
+
+  constructor(schema: JSONSchema | Array<JSONSchema>) {
+    this.root = new DataScope(schema, 'root');
+    this.idMap['root'] = this.root;
+    this.current = this.root;
+  }
+
+  setSchema(schemas: Array<JSONSchema>) {
+    this.current.setSchemas(schemas);
+    return this;
+  }
+
+  addSchema(schema: JSONSchema) {
+    this.current.addSchema(schema);
+    return this;
+  }
+
+  removeSchema(id: string) {
+    this.current.removeSchema(id);
+    delete this.idMap[id];
+    return this;
+  }
+
+  getSchemas() {
+    const schemas: Array<JSONSchema> = [];
+    let current: DataScope | void = this.current;
+
+    while (current) {
+      schemas.push(...current.schemas);
+      current = current.parent;
+    }
+
+    return schemas;
+  }
+
+  addScope(schema?: JSONSchema | Array<JSONSchema>, id: string = guid()) {
+    if (this.idMap[id]) {
+      throw new Error('scope id `' + id + '` already exists');
+    }
+
+    this.current = this.current.addChild(id, schema);
+    this.idMap[id] = this.current;
+    return this;
+  }
+
+  removeScope(idOrScope: string | DataScope) {
+    const scope = this.getScope(idOrScope);
+
+    if (!scope.parent) {
+      throw new Error('cannot remove root scope');
+    }
+
+    if (scope.contains(this.current)) {
+      this.current = scope.parent!;
+    }
+
+    scope.parent?.removeChild(scope);
+    return this;
+  }
+
+  hasScope(idOrScope: string | DataScope): idOrScope is string | DataScope {
+    const id = typeof idOrScope === 'string' ? idOrScope : idOrScope.id;
+    const scope = this.idMap[id];
+    return !!scope;
+  }
+
+  getScope(idOrScope: string | DataScope) {
+    const id = typeof idOrScope === 'string' ? idOrScope : idOrScope.id;
+    const scope = this.idMap[id];
+
+    if (!scope) {
+      throw new Error('scope not found!');
+    }
+
+    return scope;
+  }
+
+  switchToRoot() {
+    this.current = this.root;
+    return this;
+  }
+
+  switchTo(idOrScope: string | DataScope) {
+    const scope = this.getScope(idOrScope);
+    this.current = scope;
+    return this;
+  }
+
+  getDataPropsAsOptions() {
+    const variables: Array<any> = [];
+    let current: DataScope | void = this.current;
+
+    while (current) {
+      variables.push(...current.getDataPropsAsOptions());
+      current = current.parent;
+    }
+
+    return variables;
+  }
+
+  getSchemaByPath(path: string) {
+    let current: DataScope | void = this.current;
+
+    while (current) {
+      const schema = current.getSchemaByPath(path);
+      if (schema) {
+        return schema;
+      }
+      current = current.parent;
+    }
+
+    return null;
+  }
+}

package/src/utils/DataScope.ts

@@ -0,0 +1,190 @@
+import type {JSONSchema7} from 'json-schema';
+import {guid, keyToPath} from './helper';
+
+// 先只支持 JSONSchema draft07 好了
+// https://json-schema.org/draft-07/json-schema-release-notes.html
+export type JSONSchema = JSONSchema7;
+
+export class DataScope {
+  // 指向父级
+  parent?: DataScope;
+  readonly children: Array<DataScope> = [];
+
+  // 全局不能重复，用来快速定位
+  readonly id: string;
+
+  // todo 如果想要跨过层级直接获取某一层的数据域，用这个字段
+  ref?: string;
+
+  // scope 的名字，同一个层级不允许重名
+  name?: string;
+
+  // scope 分类
+  tag?: string;
+
+  // scope 的描述信息
+  description?: string;
+
+  readonly schemas: Array<JSONSchema> = [];
+
+  constructor(schemas: JSONSchema | Array<JSONSchema>, id: string) {
+    this.setSchemas(Array.isArray(schemas) ? schemas : [schemas]);
+    this.id = id;
+  }
+
+  addChild(id: string, schema?: JSONSchema | Array<JSONSchema>): DataScope {
+    const child = new DataScope(
+      schema || {
+        type: 'object',
+        properties: {}
+      },
+      id
+    );
+
+    this.children.push(child);
+    child.parent = this;
+    return child;
+  }
+
+  removeChild(idOrScope: string | DataScope) {
+    const idx = this.children.findIndex(item =>
+      typeof idOrScope === 'string'
+        ? idOrScope === item.id
+        : idOrScope === idOrScope
+    );
+
+    if (~idx) {
+      const scope = this.children[idx];
+      delete scope.parent;
+      this.children.splice(idx, 1);
+    }
+  }
+
+  setSchemas(schemas: Array<JSONSchema>) {
+    this.schemas.splice(0, this.schemas.length);
+
+    for (let schema of schemas) {
+      if (schema.type !== 'object') {
+        throw new TypeError('data scope accept only object');
+      }
+      this.schemas.push({
+        $id: guid(),
+        ...schema
+      });
+    }
+    return this;
+  }
+
+  addSchema(schema: JSONSchema) {
+    schema = {
+      $id: guid(),
+      ...schema
+    };
+    this.schemas.push(schema);
+    return this;
+  }
+
+  removeSchema(id: string) {
+    const idx = this.schemas.findIndex(schema => schema.$id === id);
+    if (~idx) {
+      this.schemas.splice(idx, 1);
+    }
+    return this;
+  }
+
+  contains(scope: DataScope) {
+    let from: DataScope | undefined = scope;
+    while (from) {
+      if (this === from) {
+        return true;
+      }
+      from = from.parent;
+    }
+    return false;
+  }
+
+  getMergedSchema() {
+    const mergedSchema: any = {
+      type: 'object',
+      properties: {}
+    };
+
+    // todo 以后再来细化这一块，先粗略的写个大概
+    this.schemas.forEach(schema => {
+      const properties: any = schema.properties || {};
+      Object.keys(properties).forEach(key => {
+        const value = properties[key];
+        if (mergedSchema.properties[key]) {
+          if (Array.isArray(mergedSchema.properties[key].oneOf)) {
+            mergedSchema.properties[key].oneOf.push();
+          } else if (
+            mergedSchema.properties[key].type &&
+            mergedSchema.properties[key].type !== value.type
+          ) {
+            mergedSchema.properties[key] = {
+              oneOf: [mergedSchema.properties[key], value]
+            };
+          }
+        } else {
+          mergedSchema.properties[key] = value;
+        }
+      });
+    });
+
+    return mergedSchema;
+  }
+
+  protected buildOptions(
+    options: Array<any>,
+    schema: JSONSchema,
+    path: string
+  ) {
+    if (schema.type === 'object' && schema.properties) {
+      const keys = Object.keys(schema.properties);
+
+      keys.forEach(key => {
+        const child: any = schema.properties![key];
+
+        // todo 支持 oneOf, anyOf
+        const option: any = {
+          label: child.title || key,
+          value: path + key,
+          type: child.type,
+          description: child.description
+        };
+
+        if (child.type === 'object') {
+          option.children = [];
+          this.buildOptions(option.children, child, path + key + '.');
+        }
+
+        options.push(option);
+      });
+    }
+  }
+
+  getDataPropsAsOptions() {
+    const variables: Array<any> = [];
+    this.buildOptions(variables, this.getMergedSchema(), '');
+    return variables;
+  }
+
+  getSchemaByPath(path: string) {
+    const parts = keyToPath(path);
+
+    for (let schema of this.schemas) {
+      const result = parts.reduce((schema: JSONSchema, key: string) => {
+        if (schema && schema.type === 'object' && schema.properties) {
+          return schema.properties[key] as JSONSchema;
+        }
+
+        return null;
+      }, schema);
+
+      if (result) {
+        return result;
+      }
+    }
+    return null;
+  }
+}

package/src/utils/handleAction.ts

@@ -13,7 +13,7 @@ export default function handleAction(
   data?: any
 ) {
   // https://reactjs.org/docs/legacy-event-pooling.html
-  e.persist();
+  // e.persist(); // react 17之后去掉 event pooling 了，这个应该没用了
 
   const onAction = props.onAction;
   let onClick: any = action.onClick;

package/src/utils/renderer-event.ts

@@ -1,4 +1,6 @@
-import {ListenerAction, ListenerContext} from '../actions/Action';
+import {ListenerAction, ListenerContext, runActions} from '../actions/Action';
+import {RendererProps} from '../factory';
+import {IScopedContext} from '../Scoped';
 
 // 事件监听器
 export interface EventListeners {
@@ -20,7 +22,7 @@ export interface OnEventProps {
 
 // 渲染器事件监听器
 export interface RendererEventListener {
-  renderer: ListenerContext;
+  renderer: React.Component<RendererProps>;
   type: string;
   weight: number;
   actions: ListenerAction[];
@@ -43,6 +45,8 @@ export interface RendererEventContext {
   [propName: string]: any;
 }
 
+let rendererEventListeners: RendererEventListener[] = [];
+
 // 创建渲染器事件对象
 export function createRendererEvent<T extends RendererEventContext>(
   type: string,
@@ -72,4 +76,111 @@ export function createRendererEvent<T extends RendererEventContext>(
   return rendererEvent;
 }
 
+// 绑定事件
+export const bindEvent = (renderer: any) => {
+  if (!renderer) {
+    return undefined;
+  }
+  const listeners: EventListeners = renderer.props.$schema.onEvent;
+  if (listeners) {
+    // 暂存
+    for (let key of Object.keys(listeners)) {
+      const listener = rendererEventListeners.some(
+        (item: RendererEventListener) =>
+          item.renderer === renderer && item.type === key
+      );
+      if (!listener) {
+        rendererEventListeners.push({
+          renderer,
+          type: key,
+          weight: listeners[key].weight || 0,
+          actions: listeners[key].actions
+        });
+      }
+    }
+
+    return () => {
+      rendererEventListeners = rendererEventListeners.filter(
+        (item: RendererEventListener) => item.renderer !== renderer
+      );
+    };
+  }
+
+  return undefined;
+};
+
+// 触发事件
+export async function dispatchEvent(
+  e: string | React.MouseEvent<any>,
+  renderer: React.Component<RendererProps>,
+  scoped: IScopedContext,
+  data: any,
+  broadcast?: RendererEvent<any>
+): Promise<RendererEvent<any> | void> {
+  let unbindEvent = null;
+  const eventName = typeof e === 'string' ? e : e.type;
+
+  renderer?.props?.env?.beforeDispatchEvent?.(
+    e,
+    renderer,
+    scoped,
+    data,
+    broadcast
+  );
+
+  if (!broadcast) {
+    const eventConfig = renderer?.props?.onEvent?.[eventName];
+
+    if (!eventConfig) {
+      // 没命中也没关系
+      return Promise.resolve();
+    }
+
+    unbindEvent = bindEvent(renderer);
+  }
+
+  // 没有可处理的监听
+  if (!rendererEventListeners.length) {
+    return Promise.resolve();
+  }
+  // 如果是广播动作，就直接复用
+  const rendererEvent =
+    broadcast ||
+    createRendererEvent(eventName, {
+      env: renderer?.props?.env,
+      nativeEvent: e,
+      data,
+      scoped
+    });
+
+  // 过滤&排序
+  const listeners = rendererEventListeners
+    .filter(
+      (item: RendererEventListener) =>
+        item.type === eventName &&
+        (broadcast ? true : item.renderer === renderer)
+    )
+    .sort(
+      (prev: RendererEventListener, next: RendererEventListener) =>
+        next.weight - prev.weight
+    );
+
+  for (let listener of listeners) {
+    await runActions(listener.actions, listener.renderer, rendererEvent);
+
+    // 停止后续监听器执行
+    if (rendererEvent.stoped) {
+      break;
+    }
+  }
+
+  unbindEvent?.();
+
+  return Promise.resolve(rendererEvent);
+}
+
+export const getRendererEventListeners = () => {
+  return rendererEventListeners;
+};
+
 export default {};