amis 1.4.0 → 1.4.2-beta.12

package/src/renderers/IFrame.tsx

@@ -6,7 +6,7 @@ import {ScopedContext, IScopedContext} from '../Scoped';
 import {buildApi, isApiOutdated} from '../utils/api';
 import {BaseSchema, SchemaUrlPath} from '../Schema';
 import {ActionSchema} from './Action';
-import {isPureVariable, resolveVariableAndFilter} from '../utils/tpl-builtin';
+import {dataMapping} from '../utils/tpl-builtin';
 
 /**
  * IFrame 渲染器
@@ -149,7 +149,7 @@ export default class IFrame extends React.Component<IFrameProps, object> {
 
   render() {
     const {width, height} = this.state;
-    let {className, src, frameBorder, data, style} = this.props;
+    let {className, src, name, frameBorder, data, style} = this.props;
 
     let tempStyle: any = {};
 
@@ -161,9 +161,7 @@ export default class IFrame extends React.Component<IFrameProps, object> {
       ...style
     };
 
-    if (isPureVariable(src)) {
-      src = resolveVariableAndFilter(src, data, '| raw');
-    }
+    src = dataMapping(src, data);
 
     const finalSrc = src ? buildApi(src, data).url : undefined;
 
@@ -177,6 +175,7 @@ export default class IFrame extends React.Component<IFrameProps, object> {
 
     return (
       <iframe
+        name={name}
         className={className}
         frameBorder={frameBorder}
         style={style}

package/src/renderers/Image.tsx

@@ -7,6 +7,7 @@ import {Icon} from '../components/icons';
 import {LocaleProps, localeable} from '../locale';
 import {BaseSchema, SchemaClassName, SchemaTpl, SchemaUrlPath} from '../Schema';
 import {resolveVariable} from '../utils/tpl-builtin';
+import handleAction from '../utils/handleAction';
 
 /**
  * 图片展示控件。
@@ -322,6 +323,14 @@ export class ImageField extends React.Component<ImageFieldProps, object> {
       );
   }
 
+  @autobind
+  handleClick(e: React.MouseEvent<HTMLElement>) {
+    const clickAction = this.props.clickAction;
+    if (clickAction) {
+      handleAction(e, clickAction, this.props);
+    }
+  }
+
   render() {
     const {
       className,
@@ -359,6 +368,7 @@ export class ImageField extends React.Component<ImageFieldProps, object> {
             : 'ImageField--thumb',
           className
         )}
+        onClick={this.handleClick}
       >
         {value ? (
           <ThemedImageThumb

package/src/renderers/Json.tsx

@@ -29,6 +29,11 @@ export interface JsonSchema extends BaseSchema {
    * 是否可修改
    */
   mutable?: boolean;
+
+  /**
+   * 是否显示数据类型
+   */
+  displayDataTypes?: boolean;
 }
 
 export interface JSONProps extends RendererProps, JsonSchema {
@@ -44,7 +49,8 @@ export class JSONField extends React.Component<JSONProps, object> {
   static defaultProps: Partial<JSONProps> = {
     placeholder: '-',
     levelExpand: 1,
-    source: ''
+    source: '',
+    displayDataTypes: false
   };
 
   @autobind
@@ -79,6 +85,7 @@ export class JSONField extends React.Component<JSONProps, object> {
       source,
       levelExpand,
       mutable,
+      displayDataTypes,
       name
     } = this.props;
 
@@ -87,14 +94,6 @@ export class JSONField extends React.Component<JSONProps, object> {
     let data = value;
     if (source !== undefined && isPureVariable(source)) {
       data = resolveVariableAndFilter(source, this.props.data, '| raw');
-    } else if (typeof value === 'string') {
-      try {
-        data = JSON.parse(value);
-      } catch (e) {
-        data = {
-          error: e.message
-        };
-      }
     }
 
     let jsonThemeValue = jsonTheme;
@@ -124,6 +123,7 @@ export class JSONField extends React.Component<JSONProps, object> {
             theme={(jsonThemeValue as any) ?? 'rjv-default'}
             shouldCollapse={this.shouldExpandNode}
             enableClipboard={false}
+            displayDataTypes={displayDataTypes}
             iconStyle="square"
             onEdit={name && mutable ? this.emitChange : false}
             onDelete={name && mutable ? this.emitChange : false}

package/src/renderers/Link.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import {Renderer, RendererProps} from '../factory';
 import {BaseSchema, SchemaTpl} from '../Schema';
-import {getPropValue} from '../utils/helper';
+import {autobind, getPropValue} from '../utils/helper';
 import {filter} from '../utils/tpl';
 import {BadgeSchema, withBadge} from '../components/Badge';
+import Link from '../components/Link';
 
 /**
  * Link 链接展示控件。
@@ -29,18 +30,48 @@ export interface LinkSchema extends BaseSchema {
    * 角标
    */
   badge?: BadgeSchema;
+
+  /**
+   * a标签原生target属性
+   */
+  htmlTarget?: string;
+
+  /**
+   * 图标
+   */
+  icon?: string;
+
+  /**
+   * 右侧图标
+   */
+  rightIcon?: string;
 }
 
 export interface LinkProps
   extends RendererProps,
     Omit<LinkSchema, 'type' | 'className'> {}
 
-export class LinkField extends React.Component<LinkProps, object> {
+export class LinkCmpt extends React.Component<LinkProps, object> {
   static defaultProps = {
-    className: '',
-    blank: false
+    blank: true,
+    disabled: false,
+    htmlTarget: ''
   };
 
+  handleClick(href: string) {
+    const {env, blank, body} = this.props;
+    env?.tracker(
+      {
+        eventType: 'url',
+        // 需要和 action 里命名一致方便后续分析
+        eventData: {url: href, blank, label: body}
+      },
+      this.props
+    );
+  }
+
+  getHref() {}
+
   render() {
     const {
       className,
@@ -48,25 +79,33 @@ export class LinkField extends React.Component<LinkProps, object> {
       href,
       classnames: cx,
       blank,
+      disabled,
       htmlTarget,
       data,
       render,
       translate: __,
-      title
+      title,
+      icon,
+      rightIcon
     } = this.props;
 
-    let value = getPropValue(this.props);
-    const finnalHref = href ? filter(href, data, '| raw') : '';
+    let value =
+      (typeof href === 'string' && href
+        ? filter(href, data, '| raw')
+        : undefined) || getPropValue(this.props);
 
     return (
-      <a
-        href={finnalHref || value}
-        target={htmlTarget || (blank ? '_blank' : '_self')}
-        className={cx('Link', className)}
+      <Link
+        className={className}
+        href={value}
+        disabled={disabled}
         title={title}
+        htmlTarget={htmlTarget || (blank ? '_blank' : '_self')}
+        icon={icon}
+        rightIcon={rightIcon}
       >
-        {body ? render('body', body) : finnalHref || value || __('link')}
-      </a>
+        {body ? render('body', body) : value || __('link')}
+      </Link>
     );
   }
 }
@@ -76,4 +115,4 @@ export class LinkField extends React.Component<LinkProps, object> {
 })
 // @ts-ignore 类型没搞定
 @withBadge
-export class LinkFieldRenderer extends LinkField {}
+export class LinkFieldRenderer extends LinkCmpt {}

package/src/renderers/List.tsx

@@ -1189,7 +1189,7 @@ export class ListItem extends React.Component<ListItemProps> {
   }
 
   renderFeild(region: string, field: any, key: any, props: any) {
-    const render = props.render || this.props.render;
+    const render = props?.render || this.props.render;
     const data = this.props.data;
     const cx = this.props.classnames;
     const itemIndex = this.props.itemIndex;

package/src/renderers/Log.tsx

@@ -6,7 +6,7 @@ import {Renderer, RendererProps} from '../factory';
 import {BaseSchema, SchemaTpl} from '../Schema';
 import Ansi from 'ansi-to-react';
 import {filter} from '../utils/tpl';
-import {buildApi} from '../utils/api';
+import {buildApi, isApiOutdated} from '../utils/api';
 
 /**
  * 日志展示组件
@@ -14,7 +14,7 @@ import {buildApi} from '../utils/api';
  */
 export interface LogSchema extends BaseSchema {
   /**
-   * 指定为 link 链接展示控件
+   * 指定为 log 链接展示控件
    */
   type: 'log';
 
@@ -100,10 +100,20 @@ export class Log extends React.Component<LogProps, LogState> {
     }
   }
 
-  componentDidUpdate() {
+  componentDidUpdate(prevProps: LogProps) {
     if (this.autoScroll && this.logRef && this.logRef.current) {
       this.logRef.current.scrollTop = this.logRef.current.scrollHeight;
     }
+    if (
+      isApiOutdated(
+        prevProps.source,
+        this.props.source,
+        prevProps.data,
+        this.props.data
+      )
+    ) {
+      this.loadLogs();
+    }
   }
 
   // 如果向上滚动就停止自动滚动，除非滚到底部
@@ -118,6 +128,9 @@ export class Log extends React.Component<LogProps, LogState> {
     const {source, data, env, translate: __, encoding} = this.props;
     // 因为这里返回结果是流式的，和普通 api 请求不一样，如果直接用 fetcher 经过 responseAdaptor 可能会导致出错，所以就直接 fetch 了
     const api = buildApi(source, data);
+    if (!api.url) {
+      return;
+    }
     const res = await fetch(api.url);
     if (res.status === 200) {
       const body = res.body;

package/src/renderers/Mapping.tsx

@@ -20,7 +20,8 @@ import {
   buildApi,
   isApiOutdated,
   isEffectiveApi,
-  normalizeApi
+  normalizeApi,
+  normalizeApiResponseData
 } from '../utils/api';
 
 /**
@@ -72,7 +73,7 @@ export const Store = StoreNode.named('MappingStore')
           const ret: Payload = yield env.fetcher(api, data);
 
           if (ret.ok) {
-            const data = ret.data || {};
+            const data = normalizeApiResponseData(ret.data);
             (self as any).setMap(data);
           } else {
             throw new Error(ret.msg || 'fetch error');
@@ -175,7 +176,7 @@ export const MappingField = withStore(props =>
       }
     }
 
-    render() {
+    renderSingleValue(key: any, reactKey?: number) {
       const {
         className,
         placeholder,
@@ -185,17 +186,13 @@ export const MappingField = withStore(props =>
         data,
         store
       } = this.props;
-      const map = store.map;
-
-      let key = getPropValue(this.props);
-
       let viewValue: React.ReactNode = (
         <span className="text-muted">{placeholder}</span>
       );
-
-      key = typeof key === 'string' ? key.trim() : key; // trim 一下，干掉一些空白字符。
+      const map = store.map;
       let value: any = undefined;
-
+      // trim 一下，干掉一些空白字符。
+      key = typeof key === 'string' ? key.trim() : key;
       if (
         typeof key !== 'undefined' &&
         map &&
@@ -210,7 +207,26 @@ export const MappingField = withStore(props =>
         viewValue = render('tpl', value);
       }
 
-      return <span className={cx('MappingField', className)}>{viewValue}</span>;
+      return (
+        <span key={`map-${reactKey}`} className={cx('MappingField', className)}>
+          {viewValue}
+        </span>
+      );
+    }
+
+    render() {
+      const mapKey = getPropValue(this.props);
+      if (Array.isArray(mapKey)) {
+        return (
+          <span>
+            {mapKey.map((singleKey: string, index: number) =>
+              this.renderSingleValue(singleKey, index)
+            )}
+          </span>
+        );
+      } else {
+        return this.renderSingleValue(mapKey, 0);
+      }
     }
   }
 );