amis 1.4.2-beta.6 → 1.5.0

package/src/renderers/GridNav.tsx

@@ -0,0 +1,204 @@
+import React from 'react';
+import {Renderer, RendererProps} from '../factory';
+import {autobind, getPropValue} from '../utils/helper';
+import {isPureVariable, resolveVariableAndFilter} from '../utils/tpl-builtin';
+import {
+  BaseSchema,
+  SchemaTokenizeableString,
+  SchemaTpl,
+  SchemaUrlPath
+} from '../Schema';
+import {ActionSchema} from './Action';
+import GridNav, {GridNavDirection, GridNavItem} from '../components/GridNav';
+import {BadgeSchema} from '../components/Badge';
+import handleAction from '../utils/handleAction';
+import {validations} from '../utils/validations';
+
+export interface ListItemSchema extends Omit<BaseSchema, 'type'> {
+  /**
+   * 单项点击事件
+   */
+  clickAction?: ActionSchema;
+
+  /**
+   * 跳转地址
+   */
+  link?: string;
+
+  /**
+   * 打开方式
+   */
+  blank?: string;
+
+  /**
+   * 图片地址
+   */
+  icon?: SchemaUrlPath;
+
+  /**
+   * 描述
+   */
+  text?: SchemaTpl;
+
+  /**
+   * 图标最大宽度比例 0-100
+   */
+  iconRatio?: number;
+
+  /**
+   * 角标
+   */
+  badge?: BadgeSchema;
+}
+
+/**
+ * List 列表展示控件。
+ * 文档：https://baidu.gitee.io/amis/docs/components/card
+ */
+export interface ListSchema extends BaseSchema {
+  /**
+   * 指定为 List 列表展示控件。
+   */
+  type: 'grid-nav';
+
+  /**
+   * 列表项类名
+   */
+  itemClassName?: string;
+
+  /**
+   * 静态图片列表配置
+   */
+  options?: Array<ListItemSchema>;
+
+  /**
+   * 是否将列表项固定为正方形
+   */
+  square?: boolean;
+
+  /**
+   * 是否将列表项内容居中显示
+   */
+  center?: boolean;
+
+  /**
+   * 是否显示列表项边框
+   */
+  border?: boolean;
+
+  /**
+   * 列表项之间的间距，默认单位为px
+   */
+  gutter?: number;
+
+  /**
+   * 图标宽度占比, 1-100
+   */
+  iconRatio?: number;
+
+  /**
+   * 列表项内容排列的方向，可选值为 horizontal 、vertical
+   */
+  direction?: GridNavDirection;
+
+  /**
+   * 列数
+   */
+  columnNum?: number;
+
+  /**
+   * 数据源: 绑定当前环境变量
+   *
+   * @default ${items}
+   */
+  source?: SchemaTokenizeableString;
+}
+
+export interface Column {
+  type: string;
+  [propName: string]: any;
+}
+
+export interface ListProps
+  extends RendererProps,
+    Omit<ListSchema, 'type' | 'className'> {
+  handleClick: (item?: ListItemSchema) => void;
+}
+
+@Renderer({
+  type: 'grid-nav'
+})
+export default class List extends React.Component<ListProps, object> {
+  @autobind
+  handleClick(item: ListItemSchema) {
+    return (e: React.MouseEvent) => {
+      let action;
+      if (item.link) {
+        action = validations.isUrl({}, item.link)
+          ? {
+              type: 'button',
+              actionType: 'url',
+              url: item.link,
+              blank: item.blank
+            }
+          : {
+              type: 'button',
+              actionType: 'link',
+              link: item.link
+            };
+      } else {
+        action = item.clickAction!;
+      }
+      handleAction(e, action as ActionSchema, this.props);
+    };
+  }
+
+  render() {
+    const {itemClassName, source, data, options, classnames} = this.props;
+
+    let value = getPropValue(this.props);
+    let list: any = [];
+
+    if (typeof source === 'string' && isPureVariable(source)) {
+      list = resolveVariableAndFilter(source, data, '| raw') || undefined;
+    } else if (Array.isArray(value)) {
+      list = value;
+    } else if (Array.isArray(options)) {
+      list = options;
+    }
+
+    if (list && !Array.isArray(list)) {
+      list = [list];
+    }
+
+    if (!list?.length) {
+      return null;
+    }
+
+    return (
+      <GridNav {...this.props}>
+        {list.map((item: ListItemSchema, index: number) => (
+          <GridNavItem
+            key={index}
+            onClick={
+              item.clickAction || item.link ? this.handleClick(item) : undefined
+            }
+            className={itemClassName}
+            text={item.text}
+            icon={item.icon}
+            classnames={classnames}
+            badge={
+              item.badge
+                ? {
+                    badge: item.badge,
+                    data: data,
+                    classnames
+                  }
+                : undefined
+            }
+          />
+        ))}
+      </GridNav>
+    );
+  }
+}

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 渲染器
@@ -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;
 

package/src/renderers/Image.tsx

@@ -163,6 +163,23 @@ export class ImageThumb extends React.Component<ImageThumbProps> {
       imageMode
     } = this.props;
 
+    const enlarge =
+      enlargeAble || overlays ? (
+        <div key="overlay" className={cx('Image-overlay')}>
+          {enlargeAble ? (
+            <a
+              data-tooltip={__('Image.zoomIn')}
+              data-position="bottom"
+              target="_blank"
+              onClick={this.handleEnlarge}
+            >
+              <Icon icon="view" className="icon" />
+            </a>
+          ) : null}
+          {overlays}
+        </div>
+      ) : null;
+
     let image = (
       <div
         className={cx(
@@ -185,6 +202,7 @@ export class ImageThumb extends React.Component<ImageThumbProps> {
               src={src}
               alt={alt}
             />
+            {enlarge}
           </div>
         ) : (
           <div className={cx('Image-thumbWrap')}>
@@ -206,21 +224,7 @@ export class ImageThumb extends React.Component<ImageThumbProps> {
                 alt={alt}
               />
             </div>
-            {enlargeAble || overlays ? (
-              <div key="overlay" className={cx('Image-overlay')}>
-                {enlargeAble ? (
-                  <a
-                    data-tooltip={__('Image.zoomIn')}
-                    data-position="bottom"
-                    target="_blank"
-                    onClick={this.handleEnlarge}
-                  >
-                    <Icon icon="view" className="icon" />
-                  </a>
-                ) : null}
-                {overlays}
-              </div>
-            ) : null}
+            {enlarge}
           </div>
         )}
 

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,7 +1,7 @@
 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';
@@ -42,9 +42,9 @@ export interface LinkSchema extends BaseSchema {
   icon?: string;
 
   /**
-   * 图标位置
+   * 右侧图标
    */
-  position?: string;
+  rightIcon?: string;
 }
 
 export interface LinkProps
@@ -55,9 +55,23 @@ export class LinkCmpt extends React.Component<LinkProps, object> {
   static defaultProps = {
     blank: true,
     disabled: false,
-    htmlTarget: '_self'
+    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,
@@ -72,27 +86,26 @@ export class LinkCmpt extends React.Component<LinkProps, object> {
       translate: __,
       title,
       icon,
-      position
+      rightIcon
     } = this.props;
 
-    let value = getPropValue(this.props);
-    const finnalHref = href ? filter(href, data, '| raw') : '';
-    const text = body
-      ? render('body', body)
-      : finnalHref || value || __('link');
+    let value =
+      (typeof href === 'string' && href
+        ? filter(href, data, '| raw')
+        : undefined) || getPropValue(this.props);
 
     return (
       <Link
         className={className}
-        href={finnalHref}
-        body={text}
-        blank={blank}
+        href={value}
         disabled={disabled}
         title={title}
-        htmlTarget={htmlTarget}
+        htmlTarget={htmlTarget || (blank ? '_blank' : '_self')}
         icon={icon}
-        position={position}
-      ></Link>
+        rightIcon={rightIcon}
+      >
+        {body ? render('body', body) : value || __('link')}
+      </Link>
     );
   }
 }

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;