amis 1.9.0 → 1.9.1-beta.3

package/src/renderers/Form/index.tsx

@@ -663,7 +663,7 @@ export default class Form extends React.Component<FormProps, object> {
     }
 
     // 派发init事件，参数为初始化数据
-    const dispatcher = dispatchEvent(
+    const dispatcher = await dispatchEvent(
       'inited',
       createObject(this.props.data, data)
     );
@@ -767,7 +767,7 @@ export default class Form extends React.Component<FormProps, object> {
         if (result) {
           dispatchEvent('validateSucc', data);
         } else {
-          dispatchEvent('validateFail', data);
+          dispatchEvent('validateError', data);
         }
         return result;
       });
@@ -794,9 +794,7 @@ export default class Form extends React.Component<FormProps, object> {
   submit(fn?: (values: object) => Promise<any>): Promise<any> {
     const {store, messages, translate: __, dispatchEvent, data} = this.props;
     this.flush();
-    const validateErrCb = () => {
-      dispatchEvent('validateFail', data);
-    };
+    const validateErrCb = () => dispatchEvent('validateError', data);
     return store.submit(
       fn,
       this.hooks['validate'] || [],
@@ -871,13 +869,13 @@ export default class Form extends React.Component<FormProps, object> {
     };
   }
 
-  emitChange(submit: boolean) {
+  async emitChange(submit: boolean) {
     const {onChange, store, submitOnChange, dispatchEvent, data} = this.props;
 
     if (!isAlive(store)) {
       return;
     }
-    const dispatcher = dispatchEvent('change', createObject(data, store.data));
+    const dispatcher = await dispatchEvent('change', createObject(data, store.data));
     if (!dispatcher?.prevented) {
       onChange &&
         onChange(
@@ -980,10 +978,12 @@ export default class Form extends React.Component<FormProps, object> {
       data = store.data;
     }
     if (Array.isArray(action.required) && action.required.length) {
-      return store.validateFields(action.required).then(result => {
+      return store.validateFields(action.required).then(async result => {
         if (!result) {
-          dispatchEvent('validateError', this.props.data);
-          env.notify('error', __('Form.validateFailed'));
+          const dispatcher = await dispatchEvent('validateError', this.props.data);
+          if (!dispatcher?.prevented) {
+            env.notify('error', __('Form.validateFailed'));
+          }
         } else {
           dispatchEvent('validateSucc', this.props.data);
           this.handleAction(
@@ -1039,9 +1039,9 @@ export default class Form extends React.Component<FormProps, object> {
             .saveRemote(action.api || (api as Api), values, {
               successMessage: saveSuccess,
               errorMessage: saveFailed,
-              onSuccess: (result: Payload) => {
+              onSuccess: async (result: Payload) => {
                 // result为提交接口返回的内容
-                dispatchEvent(
+                const dispatcher = await dispatchEvent(
                   'submitSucc',
                   createObject(this.props.data, {result})
                 );
@@ -1049,20 +1049,30 @@ export default class Form extends React.Component<FormProps, object> {
                   !isEffectiveApi(finnalAsyncApi, store.data) ||
                   store.data[finishedField || 'finished']
                 ) {
-                  return;
+                  return {
+                    cbResult: null,
+                    dispatcher
+                  };
                 }
-                return until(
+                const cbResult = until(
                   () => store.checkRemote(finnalAsyncApi as Api, store.data),
                   (ret: any) => ret && ret[finishedField || 'finished'],
                   cancel => (this.asyncCancel = cancel),
                   checkInterval
-                );
+                )
+                return {
+                  cbResult,
+                  dispatcher
+                };
               },
-              onFailed: (result: Payload) => {
-                dispatchEvent(
+              onFailed: async (result: Payload) => {
+                const dispatcher = await dispatchEvent(
                   'submitFail',
                   createObject(this.props.data, {error: result})
                 );
+                return {
+                  dispatcher
+                };
               }
             })
             .then(async response => {
@@ -1183,7 +1193,7 @@ export default class Form extends React.Component<FormProps, object> {
         })
         .catch(e => {
           onFailed && onFailed(e, store.errors);
-          if (throwErrors) {
+          if (throwErrors || action.countDown) {
             throw e;
           }
         });

package/src/renderers/Link.tsx

@@ -63,8 +63,10 @@ export class LinkCmpt extends React.Component<LinkProps, object> {
     htmlTarget: ''
   };
 
-  async handleClick(href: string) {
-    const {env, blank, body, dispatchEvent, data} = this.props;
+  @autobind
+  handleClick(e: React.MouseEvent<any>) {
+    const {env, href, blank, body} = this.props;
+
     env?.tracker(
       {
         eventType: 'url',
@@ -73,21 +75,6 @@ export class LinkCmpt extends React.Component<LinkProps, object> {
       },
       this.props
     );
-    // 触发渲染器事件
-    const rendererEvent = await dispatchEvent(
-      'click',
-      createObject(data, {
-        // 注意：每个组件都必须把数据链带上
-        url: href,
-        blank,
-        label: body
-      })
-    );
-
-    // 阻止原有动作执行
-    if (rendererEvent?.prevented) {
-      return;
-    }
   }
 
   getHref() {}
@@ -123,6 +110,7 @@ export class LinkCmpt extends React.Component<LinkProps, object> {
         htmlTarget={htmlTarget || (blank ? '_blank' : '_self')}
         icon={icon}
         rightIcon={rightIcon}
+        onClick={this.handleClick}
       >
         {body ? render('body', body) : value || __('link')}
       </Link>

package/src/renderers/Log.tsx

@@ -3,10 +3,22 @@
  */
 import React from 'react';
 import {Renderer, RendererProps} from '../factory';
-import {BaseSchema, SchemaTpl} from '../Schema';
+import {BaseSchema} from '../Schema';
 import Ansi from 'ansi-to-react';
-import {filter} from '../utils/tpl';
 import {buildApi, isApiOutdated} from '../utils/api';
+import VirtualList from '../components/virtual-list';
+import Button from '../components/Button';
+import {
+  InputClearIcon,
+  LeftArrowIcon,
+  MinusIcon,
+  PauseIcon,
+  PlusIcon,
+  ReloadIcon,
+  RightArrowIcon
+} from '../components/icons';
+
+export type LogOperation = 'stop' | 'restart' | 'showLineNumber' | 'clear';
 
 /**
  * 日志展示组件
@@ -42,6 +54,26 @@ export interface LogSchema extends BaseSchema {
    * 返回内容字符编码
    */
   encoding?: string;
+
+  /**
+   * 限制最大日志数量
+   */
+  maxLength?: number;
+
+  /**
+   * 每行高度
+   */
+  rowHeight?: number;
+
+  /**
+   * 关闭 ANSI 颜色支持
+   */
+  disableColor?: boolean;
+
+  /**
+   * 一些可操作选项
+   */
+  operation?: Array<LogOperation>;
 }
 
 export interface LogProps
@@ -51,6 +83,9 @@ export interface LogProps
 export interface LogState {
   lastLine: string;
   logs: string[];
+  refresh: boolean;
+  showLineNumber: boolean;
+  showOperation: boolean;
 }
 
 export class Log extends React.Component<LogProps, LogState> {
@@ -69,7 +104,10 @@ export class Log extends React.Component<LogProps, LogState> {
 
   state: LogState = {
     lastLine: '',
-    logs: []
+    logs: [],
+    refresh: true,
+    showLineNumber: false,
+    showOperation: false
   };
 
   constructor(props: LogProps) {
@@ -124,8 +162,38 @@ export class Log extends React.Component<LogProps, LogState> {
     }
   }
 
+  refresh = () => {
+    let origin = this.state.refresh;
+    this.setState({
+      refresh: !origin
+    });
+    if (!origin) {
+      this.clear();
+      this.loadLogs();
+    }
+  };
+
+  clear = () => {
+    this.setState({
+      logs: [],
+      lastLine: ''
+    });
+  };
+
+  changeShowLineNumber = () => {
+    this.setState({
+      showLineNumber: !this.state.showLineNumber
+    });
+  };
+
+  changeShowOperation = () => {
+    this.setState({
+      showOperation: !this.state.showOperation
+    });
+  };
+
   async loadLogs() {
-    const {source, data, env, translate: __, encoding} = this.props;
+    const {source, data, env, translate: __, encoding, maxLength} = this.props;
     // 因为这里返回结果是流式的，和普通 api 请求不一样，如果直接用 fetcher 经过 responseAdaptor 可能会导致出错，所以就直接 fetch 了
     const api = buildApi(source, data);
     if (!api.url) {
@@ -146,6 +214,12 @@ export class Log extends React.Component<LogProps, LogState> {
       let lastline = '';
       let logs: string[] = [];
       for (;;) {
+        if (!this.state.refresh) {
+          await reader.cancel('click cancel button').then(() => {
+            this.props.env.notify('success', '日志已经停止刷新');
+            return;
+          });
+        }
         let {done, value} = await reader.read();
         if (value) {
           let text = new TextDecoder(encoding).decode(value, {stream: true});
@@ -162,6 +236,11 @@ export class Log extends React.Component<LogProps, LogState> {
             lines[0] = lastline + lines[0];
             // 最后一个要么是空，要么是下一行的数据
             lastline = lines.pop() || '';
+            if (maxLength) {
+              if (logs.length + lines.length > maxLength) {
+                logs.splice(0, logs.length + lines.length - maxLength);
+              }
+            }
             logs = logs.concat(lines);
             this.setState({
               logs: logs,
@@ -180,6 +259,21 @@ export class Log extends React.Component<LogProps, LogState> {
     }
   }
 
+  /**
+   * 渲染某一行
+   */
+  renderLine(index: number, line: string, showLineNumber: boolean) {
+    const {classnames: cx, disableColor} = this.props;
+    return (
+      <div className={cx('Log-line')} key={index}>
+        {showLineNumber && (
+          <span className={cx('Log-line-number')}>{index + 1} </span>
+        )}
+        {disableColor ? line : <Ansi useClasses>{line}</Ansi>}
+      </div>
+    );
+  }
+
   render() {
     const {
       source,
@@ -187,32 +281,132 @@ export class Log extends React.Component<LogProps, LogState> {
       classnames: cx,
       placeholder,
       height,
-      translate: __
+      rowHeight,
+      disableColor,
+      translate: __,
+      operation,
+      env
     } = this.props;
 
+    const {refresh, showLineNumber, showOperation} = this.state;
+
     let loading = __(placeholder);
 
     if (!source) {
       loading = __('Log.mustHaveSource');
     }
+    let lines: any;
 
-    const lines = this.state.logs.map((line, index) => {
-      return (
-        <div className={cx('Log-line')} key={index}>
-          <Ansi useClasses>{line}</Ansi>
-        </div>
+    const logs = this.state.lastLine
+      ? this.state.logs.concat([this.state.lastLine])
+      : this.state.logs;
+
+    // 如果设置 rowHeight 就开启延迟渲染
+    const useVirtualRender = rowHeight;
+
+    if (useVirtualRender) {
+      lines = (
+        <VirtualList
+          height={height as number}
+          itemCount={logs.length}
+          itemSize={rowHeight}
+          renderItem={({index, style}) => (
+            <div
+              className={cx('Log-line')}
+              key={index}
+              style={{...style, whiteSpace: 'nowrap'}}
+            >
+              {showLineNumber && (
+                <span className={cx('Log-line-number')}>{index + 1} </span>
+              )}
+              {disableColor ? (
+                logs[index]
+              ) : (
+                <Ansi useClasses>{logs[index]}</Ansi>
+              )}
+            </div>
+          )}
+        />
       );
-    });
+    } else {
+      lines = logs.map((line, index) => {
+        return this.renderLine(index, line, showLineNumber);
+      });
+    }
 
     return (
-      <div
-        ref={this.logRef}
-        className={cx('Log', className)}
-        style={{height: height}}
-      >
-        {lines.length ? lines : loading}
-        <div className={cx('Log-line')} key="last">
-          <code>{this.state.lastLine}</code>
+      <div className={cx('Log', className)}>
+        <div
+          ref={this.logRef}
+          className={cx('Log-body')}
+          style={{height: useVirtualRender ? 'auto' : height}}
+        >
+          {useVirtualRender ? lines : lines.length ? lines : loading}
+        </div>
+        <div className={cx('Log-operation')}>
+          {operation &&
+            operation?.length > 0 &&
+            (showOperation ? (
+              <>
+                {operation.includes('stop') && (
+                  <Button
+                    size="sm"
+                    title="__('stop')"
+                    disabled={!refresh}
+                    onClick={this.refresh}
+                  >
+                    <PauseIcon />
+                  </Button>
+                )}
+
+                {operation.includes('restart') && (
+                  <Button
+                    size="sm"
+                    title={__('reload')}
+                    disabled={refresh}
+                    onClick={this.refresh}
+                  >
+                    <ReloadIcon />
+                  </Button>
+                )}
+
+                {operation.includes('showLineNumber') && (
+                  <Button
+                    size="sm"
+                    title={
+                      showLineNumber
+                        ? __('Log.notShowLineNumber')
+                        : __('Log.showLineNumber')
+                    }
+                    onClick={this.changeShowLineNumber}
+                  >
+                    {showLineNumber ? <MinusIcon /> : <PlusIcon />}
+                  </Button>
+                )}
+
+                {operation.includes('clear') && (
+                  <Button size="sm" title={__('clear')} onClick={this.clear}>
+                    <InputClearIcon />
+                  </Button>
+                )}
+
+                <Button
+                  size="sm"
+                  title={__('Log.collapse')}
+                  onClick={this.changeShowOperation}
+                >
+                  <LeftArrowIcon />
+                </Button>
+              </>
+            ) : (
+              <div
+                title={__('Log.expand')}
+                className={cx('Log-operation-hidden')}
+                onClick={this.changeShowOperation}
+              >
+                <RightArrowIcon />
+              </div>
+            ))}
         </div>
       </div>
     );

package/src/renderers/Page.tsx

@@ -467,6 +467,7 @@ export default class Page extends React.Component<PageProps> {
       store.openDrawer(ctx);
     } else if (action.actionType === 'ajax') {
       store.setCurrentAction(action);
+
       return store
         .saveRemote(action.api as string, ctx, {
           successMessage:
@@ -486,7 +487,11 @@ export default class Page extends React.Component<PageProps> {
           redirect && env.jumpTo(redirect, action);
           action.reload && this.reloadTarget(action.reload, store.data);
         })
-        .catch(() => {});
+        .catch((e) => {
+          if (throwErrors || action.countDown) {
+            throw e;
+          }
+        });
     } else {
       return onAction(e, action, ctx, throwErrors, delegate || this.context);
     }

package/src/renderers/Service.tsx

@@ -523,7 +523,11 @@ export default class Service extends React.Component<ServiceProps> {
           redirect && env.jumpTo(redirect, action);
           action.reload && this.reloadTarget(action.reload, store.data);
         })
-        .catch(() => {});
+        .catch((e) => {
+          if (throwErrors || action.countDown) {
+            throw e;
+          }
+        });
     } else {
       onAction(e, action, data, throwErrors, delegate || this.context);
     }

package/src/renderers/Wizard.tsx

@@ -718,23 +718,41 @@ export default class Wizard extends React.Component<WizardProps, WizardState> {
 
       formStore
         .saveRemote(action.api || step.api || api!, store.data, {
-          onSuccess: () => {
-            this.dispatchEvent('submitSucc', store.data);
+          onSuccess: async (result: any) => {
+            const dispatcher = await this.dispatchEvent(
+              'submitSucc',
+              createObject(this.props.data, {result})
+            );
 
             if (
               !isEffectiveApi(finnalAsyncApi, store.data) ||
               store.data[finishedField || 'finished']
             ) {
-              return;
+              return {
+                cbResult: null,
+                dispatcher
+              };
             }
 
-            return until(
+            const cbResult = until(
               () => store.checkRemote(finnalAsyncApi as Api, store.data),
               (ret: any) => ret && ret[finishedField || 'finished'],
               cancel => (this.asyncCancel = cancel)
             );
+            return {
+              cbResult,
+              dispatcher
+            };
           },
-          onFailed: error => this.dispatchEvent('submitFail', {error})
+          onFailed: async (error: any) => {
+            const dispatcher = await this.dispatchEvent(
+              'submitFail',
+              createObject(this.props.data, {error})
+            );
+            return {
+              dispatcher
+            };
+          }
         })
         .then(async value => {
           const feedback = action.feedback;
@@ -778,11 +796,7 @@ export default class Wizard extends React.Component<WizardProps, WizardState> {
 
           return value;
         })
-        .catch(error => {
-          this.dispatchEvent('submitFail', {error});
-          store.markSaving(false);
-          console.error(error);
-        });
+        .catch(error => {});
     } else {
       onFinished && onFinished(store.data, action);
       this.setState({completeStep: steps.length});

package/src/store/form.ts

@@ -326,10 +326,7 @@ export const FormStore = ServiceStore.named('FormStore')
         }
 
         if (!json.ok) {
-          // 验证错误
-          if (options && options.onFailed) {
-            options.onFailed(json);
-          }
+
           if (json.status === 422 && json.errors) {
             setFormItemErrors(json.errors);
 
@@ -349,18 +346,19 @@ export const FormStore = ServiceStore.named('FormStore')
           throw new ServerError(self.msg, json);
         } else {
           updateSavedData();
-          if (options && options.onSuccess) {
-            const ret = options.onSuccess(json);
-
-            if (ret && ret.then) {
-              yield ret;
-            }
+          let ret = options && options.onSuccess && options.onSuccess(json);
+          if (ret?.then) {
+            ret = yield ret;
+          }
+          if (ret?.cbResult?.then) {
+            yield ret.cbResult;
           }
           self.markSaving(false);
           self.updateMessage(
             json.msg ?? self.__(options && options.successMessage)
           );
-          self.msg &&
+          if (!ret?.dispatcher?.prevented) {
+            self.msg &&
             getEnv(self).notify(
               'success',
               self.msg,
@@ -371,15 +369,21 @@ export const FormStore = ServiceStore.named('FormStore')
                   }
                 : undefined
             );
+          }
           return json.data;
         }
       } catch (e) {
         self.markSaving(false);
-
+        let ret = options && options.onFailed && options.onFailed(e.response || {});
+        if (ret?.then) {
+          ret = yield ret;
+        }
         if (!isAlive(self) || self.disposed) {
           return;
         }
-
+        if (ret?.dispatcher?.prevented) {
+          return;
+        }
         if (e.type === 'ServerError') {
           const result = (e as ServerError).response;
           getEnv(self).notify(
@@ -395,7 +399,6 @@ export const FormStore = ServiceStore.named('FormStore')
         } else {
           getEnv(self).notify('error', e.message);
         }
-
         throw e;
       }
     });
@@ -479,9 +482,13 @@ export const FormStore = ServiceStore.named('FormStore')
         ) {
           let msg = failedMessage ?? self.__('Form.validateFailed');
           const env = getEnv(self);
-
-          msg && env.notify('error', msg);
-          validateErrCb && validateErrCb();
+          let dispatcher: any = validateErrCb && validateErrCb();
+          if (dispatcher?.then) {
+            dispatcher = yield dispatcher;
+          }
+          if (!dispatcher?.prevented){
+            msg && env.notify('error', msg);
+          }
           throw new Error(msg);
         }
 

package/src/utils/api.ts

@@ -307,7 +307,7 @@ export function responseAdaptor(ret: fetcherResult, api: ApiObject) {
   if (data.hasOwnProperty('errorCode')) {
     // 阿里 Java 规范
     data.status = data.errorCode;
-    data.msg = data.errorMessage;
+    data.msg = data.errorMessage || data.errorMsg;
   } else if (data.hasOwnProperty('errno')) {
     data.status = data.errno;
     data.msg = data.errmsg || data.errstr || data.msg;

package/src/utils/renderer-event.ts

@@ -138,7 +138,6 @@ export async function dispatchEvent(
 
     unbindEvent = bindEvent(renderer);
   }
-
   // 没有可处理的监听
   if (!rendererEventListeners.length) {
     return Promise.resolve();
@@ -152,7 +151,6 @@ export async function dispatchEvent(
       data,
       scoped
     });
-
   // 过滤&排序
   const listeners = rendererEventListeners
     .filter(