amis 1.9.1-beta.0 → 1.9.1-beta.4

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/Form/wrapControl.tsx

@@ -657,7 +657,6 @@ export function wrapControl<
               defaultValue: control.value,
               formItemValue: value, // 为了兼容老版本的自定义组件
               onChange: this.handleChange,
-
               onBlur: this.handleBlur,
               setValue: this.setValue,
               getValue: this.getValue,

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/Table-v2/index.tsx

@@ -113,6 +113,21 @@ export interface ColumnSchema {
    * 当前列是否展示
    */
   toggled?: boolean;
+
+  /**
+   * 列样式
+   */
+  className?: string;
+  
+  /**
+   * 表头单元格样式
+   */
+  titleClassName?: string;
+
+  /**
+   * 单元格样式
+   */
+  classNameExpr?: string;
 }
 
 export interface RowSelectionOptionsSchema {
@@ -156,7 +171,7 @@ export interface RowSelectionSchema {
   /**
    * 已选择的key值表达式
    */
-  selectedRowKeysExpr: string;
+  selectedRowKeysExpr?: string;
 
   /**
    * 已选择的key值表达式
@@ -583,7 +598,12 @@ export default class TableRenderer extends React.Component<
           }
 
           return (
-            <div className={cx('Table-head-cell-wrapper')}>
+            <div
+              key={col}
+              className={cx('Table-head-cell-wrapper', {
+              [`${column.className}`]: !!column.className,
+              [`${column.titleClassName}`]: !!column.titleClassName
+            })}>
               {content}
               {remark}
               {children}
@@ -686,6 +706,14 @@ export default class TableRenderer extends React.Component<
           });
         }
 
+        // 设置了单元格样式
+        if (column.classNameExpr) {
+          clone.className = (record: any, rowIndex: number) => {
+            const className = filter(column.classNameExpr, {record, rowIndex});
+            return `${className}${column.className ? ` ${column.className}` : ''}`;
+          };
+        }
+
         // 设置了列搜索
         if (column.searchable) {
           clone.filterDropdown = (
@@ -1129,6 +1157,7 @@ export default class TableRenderer extends React.Component<
       classnames: cx,
       placeholder,
       rowClassNameExpr,
+      itemActions,
       store,
       ...rest
     } = this.props;
@@ -1233,6 +1262,39 @@ export default class TableRenderer extends React.Component<
       };
     }
 
+    let itemActionsConfig = undefined;
+    if (itemActions) {
+      const finalActions = Array.isArray(itemActions)
+      ? itemActions.filter(action => !action.hiddenOnHover)
+      : [];
+
+      if (!finalActions.length) {
+        return null;
+      }
+
+      itemActionsConfig = (record: any, rowIndex: number) => {
+        return (
+          <div className={cx('Table-itemActions')}>
+            {finalActions.map((action, index) =>
+              render(
+                `itemAction/${index}`,
+                {
+                  ...(action as any),
+                  isMenuItem: true
+                },
+                {
+                  key: index,
+                  item: record,
+                  data: record,
+                  rowIndex
+                }
+              )
+            )}
+          </div>
+        );
+      };
+    }
+
     return (
       <Table
         {...rest}
@@ -1252,6 +1314,7 @@ export default class TableRenderer extends React.Component<
         onSort={this.handleSort}
         onFilter={this.handleFilter}
         onDrag={this.handleDragOver}
+        itemActions={itemActionsConfig}
       ></Table>
     );
   }

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});