amis 1.3.4 → 1.4.0

package/src/renderers/Service.tsx

@@ -7,7 +7,12 @@ import {filter, evalExpression} from '../utils/tpl';
 import cx from 'classnames';
 import Scoped, {ScopedContext, IScopedContext} from '../Scoped';
 import {observer} from 'mobx-react';
-import {isApiOutdated, isEffectiveApi} from '../utils/api';
+import {
+  buildApi,
+  isApiOutdated,
+  isEffectiveApi,
+  str2AsyncFunction
+} from '../utils/api';
 import {Spinner} from '../components';
 import {autobind, isEmpty, isVisible, qsstringify} from '../utils/helper';
 import {
@@ -40,6 +45,11 @@ export interface ServiceSchema extends BaseSchema {
    */
   ws?: string;
 
+  /**
+   * 通过调用外部函数来获取数据
+   */
+  dataProvider?: string | Function;
+
   /**
    * 内容区域
    */
@@ -111,6 +121,8 @@ export default class Service extends React.Component<ServiceProps> {
   // 主要是用于关闭 socket
   socket: any;
 
+  dataProviderUnsubscribe?: Function;
+
   static defaultProps: Partial<ServiceProps> = {
     messages: {
       fetchFailed: 'fetchFailed'
@@ -130,6 +142,8 @@ export default class Service extends React.Component<ServiceProps> {
     this.initInterval = this.initInterval.bind(this);
     this.afterDataFetch = this.afterDataFetch.bind(this);
     this.afterSchemaFetch = this.afterSchemaFetch.bind(this);
+    this.runDataProvider = this.runDataProvider.bind(this);
+    this.dataProviderSetData = this.dataProviderSetData.bind(this);
   }
 
   componentDidMount() {
@@ -168,12 +182,21 @@ export default class Service extends React.Component<ServiceProps> {
       if (this.socket) {
         this.socket.close();
       }
-      this.socket = store.fetchWSData(props.ws, this.afterDataFetch);
+      this.socket = this.fetchWSData(props.ws, store.data);
+    }
+
+    if (props.defaultData !== prevProps.defaultData) {
+      store.reInitData(props.defaultData);
+    }
+
+    if (props.dataProvider !== prevProps.dataProvider) {
+      this.runDataProvider();
     }
   }
 
   componentWillUnmount() {
     this.mounted = false;
+    this.runDataProviderUnsubscribe();
     clearTimeout(this.timer);
     if (this.socket && this.socket.close) {
       this.socket.close();
@@ -189,6 +212,7 @@ export default class Service extends React.Component<ServiceProps> {
       ws,
       initFetch,
       initFetchOn,
+      dataProvider,
       store,
       messages: {fetchSuccess, fetchFailed}
     } = this.props;
@@ -212,8 +236,82 @@ export default class Service extends React.Component<ServiceProps> {
     }
 
     if (ws) {
-      this.socket = store.fetchWSData(ws, this.afterDataFetch);
+      this.socket = this.fetchWSData(ws, store.data);
     }
+
+    if (dataProvider) {
+      this.runDataProvider();
+    }
+  }
+
+  // 使用外部函数获取数据
+  async runDataProvider() {
+    this.runDataProviderUnsubscribe();
+    const {dataProvider, store} = this.props;
+    let dataProviderFunc = dataProvider;
+
+    if (typeof dataProvider === 'string' && dataProvider) {
+      dataProviderFunc = str2AsyncFunction(dataProvider, 'data', 'setData')!;
+    }
+    if (typeof dataProviderFunc === 'function') {
+      const unsubscribe = await dataProviderFunc(
+        store.data,
+        this.dataProviderSetData
+      );
+      if (typeof unsubscribe === 'function') {
+        this.dataProviderUnsubscribe = unsubscribe;
+      }
+    }
+  }
+
+  // 运行销毁外部函数的方法
+  runDataProviderUnsubscribe() {
+    if (typeof this.dataProviderUnsubscribe === 'function') {
+      try {
+        this.dataProviderUnsubscribe();
+      } catch (error) {
+        console.error(error);
+      }
+    }
+  }
+
+  // 外部函数回调更新数据
+  dataProviderSetData(data: any) {
+    if (!this.mounted) {
+      return;
+    }
+    const {store} = this.props;
+    store.updateData(data, undefined, false);
+    store.setHasRemoteData();
+  }
+
+  // 使用 websocket 获取使用，因为有异步所以放这里而不是 store 实现
+  fetchWSData(ws: string | Api, data: any) {
+    const {env, store} = this.props;
+    const wsApi = buildApi(ws, data);
+
+    env.wsFetcher(
+      wsApi,
+      (data: any) => {
+        let returndata = data;
+        if ('status' in data && 'data' in data) {
+          returndata = data.data;
+          if (data.status !== 0) {
+            store.updateMessage(data.msg, true);
+            env.notify('error', data.msg);
+            return;
+          }
+        }
+        store.updateData(returndata, undefined, false);
+        store.setHasRemoteData();
+        // 因为 WebSocket 只会获取纯数据，所以没有 msg 之类的
+        this.afterDataFetch({ok: true, data: returndata});
+      },
+      (error: any) => {
+        store.updateMessage(error, true);
+        env.notify('error', error);
+      }
+    );
   }
 
   afterDataFetch(result: any) {

package/src/renderers/Steps.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import {Renderer, RendererProps} from '../factory';
-import {BaseSchema} from '../Schema';
+import {BaseSchema, SchemaCollection} from '../Schema';
 import Steps, {StepStatus} from '../components/Steps';
 import {
   RemoteOptionsProps,
@@ -14,12 +14,12 @@ export type StepSchema = {
   /**
    * 标题
    */
-  title: string;
+  title: string | SchemaCollection;
 
   /**
    * 子标题
    */
-  subTitle?: string;
+  subTitle?: string | SchemaCollection;
 
   /**
    * 图标
@@ -31,7 +31,7 @@ export type StepSchema = {
   /**
    * 描述
    */
-  description?: string;
+  description?: string | SchemaCollection;
 } & Omit<BaseSchema, 'type'>;
 
 export interface StepsSchema extends BaseSchema {
@@ -82,7 +82,8 @@ export function StepsCmpt(props: StepsProps) {
     mode,
     data,
     source,
-    config
+    config,
+    render
   } = props;
   
   const stepsRow =
@@ -90,7 +91,9 @@ export function StepsCmpt(props: StepsProps) {
     config ||
     steps ||
     [];
-
+  const resolveRender = (val?: string | SchemaCollection) => typeof val === 'string'
+    ? filter(val, data)
+    : val && render('inner', val);
   const value = getPropValue(props) ?? 0;
   const resolveValue =
     typeof value === 'string' && isNaN(+value)
@@ -105,9 +108,9 @@ export function StepsCmpt(props: StepsProps) {
     return {
       ...step,
       status: stepStatus,
-      title: filter(step.title, data),
-      subTitle: filter(step.subTitle || step.value, data),
-      description: filter(step.description, data)
+      title: resolveRender(step.title),
+      subTitle: resolveRender(step.subTitle),
+      description: resolveRender(step.description)
     }
   });
 

package/src/renderers/Table/TableBody.tsx

@@ -8,6 +8,7 @@ import {observer} from 'mobx-react';
 import {trace, reaction} from 'mobx';
 import {createObject, flattenTree} from '../../utils/helper';
 import {LocaleProps} from '../../locale';
+import {ActionSchema} from '../Action';
 
 export interface TableBodyProps extends LocaleProps {
   className?: string;
@@ -23,7 +24,7 @@ export interface TableBodyProps extends LocaleProps {
     item: IRow,
     props: any
   ) => React.ReactNode;
-  onCheck: (item: IRow) => void;
+  onCheck: (item: IRow, value: boolean, shift?: boolean) => void;
   onQuickChange?: (
     item: IRow,
     values: object,
@@ -41,8 +42,10 @@ export interface TableBodyProps extends LocaleProps {
   data?: any;
   prefixRow?: Array<any>;
   affixRow?: Array<any>;
+  itemAction?: ActionSchema;
 }
 
+@observer
 export class TableBody extends React.Component<TableBodyProps> {
   renderRows(
     rows: Array<any>,
@@ -62,7 +65,8 @@ export class TableBody extends React.Component<TableBodyProps> {
       onQuickChange,
       footable,
       ignoreFootableContent,
-      footableColumns
+      footableColumns,
+      itemAction
     } = this.props;
 
     return rows.map((item: IRow, rowIndex: number) => {
@@ -71,6 +75,7 @@ export class TableBody extends React.Component<TableBodyProps> {
       const doms = [
         <TableRow
           {...itemProps}
+          itemAction={itemAction}
           classnames={cx}
           checkOnItemClick={checkOnItemClick}
           key={item.id}
@@ -100,6 +105,7 @@ export class TableBody extends React.Component<TableBodyProps> {
           doms.push(
             <TableRow
               {...itemProps}
+              itemAction={itemAction}
               classnames={cx}
               checkOnItemClick={checkOnItemClick}
               key={`foot-${item.id}`}
@@ -123,7 +129,7 @@ export class TableBody extends React.Component<TableBodyProps> {
             />
           );
         }
-      } else if (item.children.length) {
+      } else if (item.children.length && item.expanded) {
         // 嵌套表格
         doms.push(
           ...this.renderRows(item.children, columns, {
@@ -136,7 +142,11 @@ export class TableBody extends React.Component<TableBodyProps> {
     });
   }
 
-  renderSummaryRow(items?: Array<any>) {
+  renderSummaryRow(
+    position: 'prefix' | 'affix',
+    items?: Array<any>,
+    rowIndex?: number
+  ) {
     const {columns, render, data, classnames: cx, rows} = this.props;
 
     if (!(Array.isArray(items) && items.length)) {
@@ -177,7 +187,10 @@ export class TableBody extends React.Component<TableBodyProps> {
     });
 
     return (
-      <tr className={cx('Table-tr', 'is-summary')}>
+      <tr
+        className={cx('Table-tr', 'is-summary')}
+        key={`summary-${position}-${rowIndex || 0}`}
+      >
         {result.map((item, index) => {
           const Com = item.isHead ? 'th' : 'td';
           return (
@@ -196,11 +209,17 @@ export class TableBody extends React.Component<TableBodyProps> {
     );
   }
 
-  renderSummary(items?: Array<any>) {
+  renderSummary(position: 'prefix' | 'affix', items?: Array<any>) {
     return Array.isArray(items)
       ? items.some(i => Array.isArray(i))
-        ? items.map(i => this.renderSummaryRow(Array.isArray(i) ? i : [i]))
-        : this.renderSummaryRow(items)
+        ? items.map((i, rowIndex) =>
+            this.renderSummaryRow(
+              position,
+              Array.isArray(i) ? i : [i],
+              rowIndex
+            )
+          )
+        : this.renderSummaryRow(position, items)
       : null;
   }
 
@@ -221,9 +240,9 @@ export class TableBody extends React.Component<TableBodyProps> {
       <tbody className={className}>
         {rows.length ? (
           <>
-            {this.renderSummary(prefixRow)}
+            {this.renderSummary('prefix', prefixRow)}
             {this.renderRows(rows, columns, rowsProps)}
-            {this.renderSummary(affixRow)}
+            {this.renderSummary('affix', affixRow)}
           </>
         ) : null}
       </tbody>

package/src/renderers/Table/TableCell.tsx

@@ -5,6 +5,7 @@ import Copyable from '../Copyable';
 import PopOverable from '../PopOver';
 import {observer} from 'mobx-react';
 import omit = require('lodash/omit');
+import {filter} from '../../utils/tpl';
 
 export interface TableCellProps extends RendererProps {
   wrapperComponent?: React.ReactType;
@@ -27,7 +28,9 @@ export class TableCell extends React.Component<RendererProps> {
 
   render() {
     let {
+      classnames: cx,
       className,
+      classNameExpr,
       render,
       style,
       wrapperComponent: Component,
@@ -36,6 +39,7 @@ export class TableCell extends React.Component<RendererProps> {
       data,
       children,
       width,
+      align,
       innerClassName,
       label,
       tabIndex,
@@ -90,6 +94,13 @@ export class TableCell extends React.Component<RendererProps> {
       }
     }
 
+    if (align) {
+      style = {
+        ...style,
+        textAlign: align
+      };
+    }
+
     if (!Component) {
       return body as JSX.Element;
     }
@@ -102,7 +113,10 @@ export class TableCell extends React.Component<RendererProps> {
       <Component
         rowSpan={rowSpan > 1 ? rowSpan : undefined}
         style={style}
-        className={className}
+        className={cx(
+          className,
+          column.classNameExpr ? filter(column.classNameExpr, data) : null
+        )}
         tabIndex={tabIndex}
         onKeyUp={onKeyUp}
       >

package/src/renderers/Table/TableContent.tsx

@@ -4,6 +4,8 @@ import {IColumn, IRow} from '../../store/table';
 import {SchemaNode, Action} from '../../types';
 import {TableBody} from './TableBody';
 import {LocaleProps} from '../../locale';
+import {observer} from 'mobx-react';
+import {ActionSchema} from '../Action';
 
 export interface TableContentProps extends LocaleProps {
   className?: string;
@@ -30,7 +32,7 @@ export interface TableContentProps extends LocaleProps {
     item: IRow,
     props: any
   ) => React.ReactNode;
-  onCheck: (item: IRow) => void;
+  onCheck: (item: IRow, value: boolean, shift?: boolean) => void;
   onQuickChange?: (
     item: IRow,
     values: object,
@@ -47,8 +49,10 @@ export interface TableContentProps extends LocaleProps {
   data?: any;
   prefixRow?: Array<any>;
   affixRow?: Array<any>;
+  itemAction?: ActionSchema;
 }
 
+@observer
 export class TableContent extends React.Component<TableContentProps> {
   render() {
     const {
@@ -77,6 +81,7 @@ export class TableContent extends React.Component<TableContentProps> {
       prefixRow,
       locale,
       translate,
+      itemAction,
       affixRow
     } = this.props;
 
@@ -130,6 +135,7 @@ export class TableContent extends React.Component<TableContentProps> {
             </tbody>
           ) : (
             <TableBody
+              itemAction={itemAction}
               classnames={cx}
               render={render}
               renderCell={renderCell}

package/src/renderers/Table/TableRow.tsx

@@ -4,6 +4,7 @@ import {IRow, IColumn} from '../../store/table';
 import {RendererProps} from '../../factory';
 import {Action} from '../Action';
 import {reaction} from 'mobx';
+import {isClickOnInput} from '../../utils/helper';
 
 interface TableRowProps extends Pick<RendererProps, 'render'> {
   onCheck: (item: IRow) => void;
@@ -33,23 +34,18 @@ export class TableRow extends React.Component<TableRowProps> {
     this.handleAction = this.handleAction.bind(this);
     this.handleQuickChange = this.handleQuickChange.bind(this);
     this.handleChange = this.handleChange.bind(this);
-    this.handleClick = this.handleClick.bind(this);
+    this.handleItemClick = this.handleItemClick.bind(this);
   }
 
-  handleClick(e: React.MouseEvent<HTMLTableRowElement>) {
-    const target: HTMLElement = e.target as HTMLElement;
-    const ns = this.props.classPrefix;
-    let formItem;
-
-    if (
-      !e.currentTarget.contains(target) ||
-      ~['INPUT', 'TEXTAREA'].indexOf(target.tagName) ||
-      ((formItem = target.closest(`button, a, [data-role="form-item"]`)) &&
-        e.currentTarget.contains(formItem))
-    ) {
+  // 定义点击一行的行为，通过 itemAction配置
+  handleItemClick(e: React.MouseEvent<HTMLTableRowElement>) {
+    if (isClickOnInput(e)) {
       return;
     }
-
+    const {itemAction, onAction, item} = this.props;
+    if (itemAction) {
+      onAction && onAction(e, itemAction, item?.data);
+    }
     this.props.onCheck(this.props.item);
   }
 
@@ -108,11 +104,10 @@ export class TableRow extends React.Component<TableRowProps> {
       render,
       classnames: cx,
       parent,
+      itemAction,
       ...rest
     } = this.props;
 
-    // console.log('TableRow');
-
     if (footableMode) {
       if (!item.expanded) {
         return null;
@@ -122,12 +117,15 @@ export class TableRow extends React.Component<TableRowProps> {
         <tr
           data-id={item.id}
           data-index={item.newIndex}
-          onClick={checkOnItemClick ? this.handleClick : undefined}
+          onClick={
+            checkOnItemClick || itemAction ? this.handleItemClick : undefined
+          }
           className={cx(itemClassName, {
             'is-hovered': item.isHover,
             'is-checked': item.checked,
             'is-modified': item.modified,
             'is-moved': item.moved,
+            [`Table-tr--hasItemAction`]: itemAction, // 就是为了加鼠标效果
             [`Table-tr--odd`]: itemIndex % 2 === 0,
             [`Table-tr--even`]: itemIndex % 2 === 1
           })}
@@ -183,7 +181,9 @@ export class TableRow extends React.Component<TableRowProps> {
 
     return (
       <tr
-        onClick={checkOnItemClick ? this.handleClick : undefined}
+        onClick={
+          checkOnItemClick || itemAction ? this.handleItemClick : undefined
+        }
         data-index={item.depth === 1 ? item.newIndex : undefined}
         data-id={item.id}
         className={cx(
@@ -195,6 +195,7 @@ export class TableRow extends React.Component<TableRowProps> {
             'is-moved': item.moved,
             'is-expanded': item.expanded,
             'is-expandable': item.expandable,
+            [`Table-tr--hasItemAction`]: itemAction,
             [`Table-tr--odd`]: itemIndex % 2 === 0,
             [`Table-tr--even`]: itemIndex % 2 === 1
           },