amis 1.5.6 → 1.6.1-beta.0

package/src/actions/CustomAction.ts

@@ -0,0 +1,46 @@
+import {RendererEvent} from '../utils/renderer-event';
+import {
+  Action,
+  ListenerAction,
+  ListenerContext,
+  LoopStatus,
+  registerAction
+} from './Action';
+
+/**
+ * 自定义动作，JS脚本
+ *
+ * @export
+ * @class CustomAction
+ * @implements {Action}
+ */
+export class CustomAction implements Action {
+  async run(
+    action: ListenerAction,
+    renderer: ListenerContext,
+    event: RendererEvent<any>
+  ) {
+    // 执行自定义编排脚本
+    let scriptFunc = action.script;
+
+    if (typeof scriptFunc === 'string') {
+      scriptFunc = new Function(
+        'context',
+        'doAction',
+        'event',
+        scriptFunc
+      ) as any;
+    }
+
+    // 外部可以直接调用doAction来完成动作调用
+    // 可以通过上下文直接编排动作调用，通过event来进行动作干预
+    await (scriptFunc as any)?.call(
+      null,
+      renderer,
+      renderer.doAction.bind(renderer),
+      event
+    );
+  }
+}
+
+registerAction('custom', new CustomAction());

package/src/actions/DialogAction.ts

@@ -0,0 +1,28 @@
+import {RendererEvent} from '../utils/renderer-event';
+import {
+  Action,
+  ListenerAction,
+  ListenerContext,
+  registerAction
+} from './Action';
+
+/**
+ * 打开弹窗动作
+ *
+ * @export
+ * @class DialogAction
+ * @implements {Action}
+ */
+export class DialogAction implements Action {
+  async run(
+    action: ListenerAction,
+    renderer: ListenerContext,
+    event: RendererEvent<any>
+  ) {
+    const store = renderer.props.store;
+    store.setCurrentAction(action);
+    store.openDialog(action.args);
+  }
+}
+
+registerAction('dialog', new DialogAction());

package/src/actions/DrawerAction.ts

@@ -0,0 +1,28 @@
+import {RendererEvent} from '../utils/renderer-event';
+import {
+  Action,
+  ListenerAction,
+  ListenerContext,
+  registerAction
+} from './Action';
+
+/**
+ * 打开抽屉动作
+ *
+ * @export
+ * @class DrawerAction
+ * @implements {Action}
+ */
+export class DrawerAction implements Action {
+  async run(
+    action: ListenerAction,
+    renderer: ListenerContext,
+    event: RendererEvent<any>
+  ) {
+    const store = renderer.props.store;
+    store.setCurrentAction(action);
+    store.openDrawer(action.args);
+  }
+}
+
+registerAction('drawer', new DrawerAction());

package/src/actions/EmailAction.ts

@@ -0,0 +1,38 @@
+import {RendererEvent} from '../utils/renderer-event';
+import {filter} from '../utils/tpl';
+import pick from 'lodash/pick';
+import mapValues from 'lodash/mapValues';
+import qs from 'qs';
+import {
+  Action,
+  ListenerAction,
+  ListenerContext,
+  registerAction
+} from './Action';
+
+/**
+ * 邮件动作
+ *
+ * @export
+ * @class EmailAction
+ * @implements {Action}
+ */
+export class EmailAction implements Action {
+  async run(
+    action: ListenerAction,
+    renderer: ListenerContext,
+    event: RendererEvent<any>
+  ) {
+    const mailTo = filter(action.to, action.args);
+    const mailInfo = mapValues(
+      pick(action, 'to', 'cc', 'bcc', 'subject', 'body'),
+      val => filter(val, action.args)
+    );
+    const mailStr = qs.stringify(mailInfo);
+    const mailto = `mailto:${mailTo}?${mailStr}`;
+
+    window.open(mailto);
+  }
+}
+
+registerAction('email', new EmailAction());

package/src/actions/LoopAction.ts

@@ -0,0 +1,77 @@
+import {RendererEvent} from '../utils/renderer-event';
+import {createObject} from '../utils/helper';
+import {
+  Action,
+  ListenerContext,
+  LogicAction,
+  LoopStatus,
+  registerAction,
+  runAction,
+  runActions
+} from './Action';
+import {resolveVariable} from '../utils/tpl-builtin';
+
+/**
+ * 循环动作
+ *
+ * @export
+ * @class LoopAction
+ * @implements {Action}
+ */
+export class LoopAction implements Action {
+  async run(
+    action: LogicAction,
+    renderer: ListenerContext,
+    event: RendererEvent<any>,
+    mergeData: any
+  ) {
+    if (typeof action.loopName !== 'string') {
+      console.warn('loopName 必须是字符串类型');
+      return;
+    }
+
+    const loopData = resolveVariable(action.loopName, mergeData) || [];
+
+    // 必须是数组
+    if (!loopData) {
+      console.warn(`没有找到数据 ${action.loopName}`);
+    } else if (!Array.isArray(loopData)) {
+      console.warn(`${action.loopName} 数据不是数组`);
+    } else if (action.children?.length) {
+      // 暂存一下
+      const protoData = event.data;
+
+      for (const data of loopData) {
+        renderer.loopStatus = LoopStatus.NORMAL;
+        // 追加逻辑处理中的数据，事件数据优先，用完还要还原
+        event.setData(createObject(event.data, data));
+
+        for (const subAction of action.children) {
+          // @ts-ignore
+          if (renderer.loopStatus === LoopStatus.CONTINUE) {
+            continue;
+          }
+          await runActions(subAction, renderer, event);
+
+          // @ts-ignore
+          if (renderer.loopStatus === LoopStatus.BREAK || event.stoped) {
+            // 还原事件数据
+            event.setData(protoData);
+            break;
+          }
+        }
+
+        if (event.stoped) {
+          // 还原事件数据
+          event.setData(protoData);
+          break;
+        }
+      }
+
+      renderer.loopStatus = LoopStatus.NORMAL;
+      event.setData(protoData);
+    }
+  }
+}
+
+registerAction('loop', new LoopAction());

package/src/actions/OpenPageAction.ts

@@ -0,0 +1,39 @@
+import {RendererEvent} from '../utils/renderer-event';
+import {filter} from '../utils/tpl';
+import {
+  Action,
+  ListenerAction,
+  ListenerContext,
+  registerAction
+} from './Action';
+
+/**
+ * 打开页面动作
+ *
+ * @export
+ * @class OpenPageAction
+ * @implements {Action}
+ */
+export class OpenPageAction implements Action {
+  async run(
+    action: ListenerAction,
+    renderer: ListenerContext,
+    event: RendererEvent<any>
+  ) {
+    if (!renderer.props.env?.jumpTo) {
+      throw new Error('env.jumpTo is required!');
+    }
+
+    renderer.props.env.jumpTo(
+      filter(
+        (action.to || action.url || action.link) as string,
+        action.args,
+        '| raw'
+      ),
+      action,
+      action.args
+    );
+  }
+}
+
+registerAction('openpage', new OpenPageAction());

package/src/actions/ParallelAction.ts

@@ -0,0 +1,26 @@
+import {RendererEvent} from '../utils/renderer-event';
+import {
+  Action,
+  ListenerContext,
+  LogicAction,
+  registerAction,
+  runActions
+} from './Action';
+
+export class ParallelAction implements Action {
+  async run(
+    action: LogicAction,
+    renderer: ListenerContext,
+    event: RendererEvent<any>
+  ) {
+    if (action.children && action.children.length) {
+      const childActions = action.children.map((child: LogicAction) => {
+        // 并行动作互不干扰，但不管哪个存在干预都对后续动作生效
+        return runActions(child, renderer, event);
+      });
+      await Promise.all(childActions);
+    }
+  }
+}
+
+registerAction('parallel', new ParallelAction());

package/src/actions/SwitchAction.ts

@@ -0,0 +1,35 @@
+import {RendererEvent} from '../utils/renderer-event';
+import {evalExpression} from '../utils/tpl';
+import {
+  Action,
+  ListenerContext,
+  LogicAction,
+  registerAction,
+  runActions
+} from './Action';
+
+/**
+ * 排他动作
+ */
+export class SwitchAction implements Action {
+  async run(
+    action: LogicAction,
+    renderer: ListenerContext,
+    event: RendererEvent<any>,
+    mergeData: any
+  ) {
+    for (const branch of action.children || []) {
+      if (!branch.expression) {
+        continue;
+      }
+
+      if (evalExpression(branch.expression, mergeData)) {
+        await runActions(branch, renderer, event);
+        // 去掉runAllMatch，这里只做排他，多个可以直接通过execOn
+        break;
+      }
+    }
+  }
+}
+
+registerAction('switch', new SwitchAction());

package/src/actions/index.ts

@@ -0,0 +1,20 @@
+/**
+ * @file 导入所有动作
+ */
+
+import './LoopAction';
+import './BreakAction';
+import './ContinueAction';
+import './SwitchAction';
+import './ParallelAction';
+import './CustomAction';
+import './BroadcastAction';
+import './CmptAction';
+import './AjaxAction';
+import './CopyAction';
+import './DialogAction';
+import './DrawerAction';
+import './EmailAction';
+import './OpenPageAction';
+
+export * from './Action';

package/src/components/AssociatedSelection.tsx

@@ -106,7 +106,8 @@ export class AssociatedSelection extends BaseSelection<
       leftMode,
       cellRender,
       multiple,
-      onDeferLoad
+      onDeferLoad,
+      itemRender
     } = this.props;
 
     const selectdOption = BaseSelection.resolveSelected(
@@ -186,6 +187,7 @@ export class AssociatedSelection extends BaseSelection<
                   onChange={onChange}
                   option2value={option2value}
                   multiple={multiple}
+                  itemRender={itemRender}
                 />
               ) : rightMode === 'chained' ? (
                 <ChainedSelection
@@ -195,6 +197,7 @@ export class AssociatedSelection extends BaseSelection<
                   onChange={onChange}
                   option2value={option2value}
                   multiple={multiple}
+                  itemRender={itemRender}
                 />
               ) : (
                 <GroupedSelection
@@ -204,6 +207,7 @@ export class AssociatedSelection extends BaseSelection<
                   onChange={onChange}
                   option2value={option2value}
                   multiple={multiple}
+                  itemRender={itemRender}
                 />
               )
             ) : (

package/src/components/Avatar.tsx

@@ -0,0 +1,253 @@
+import * as React from 'react';
+import {ClassNamesFn, themeable, ThemeProps} from '../theme';
+
+/**
+ * Avatar 属性
+ */
+interface AvatarCmptProps extends ThemeProps {
+  style?: {
+    [prop: string]: any
+  };
+  className?: string;
+  classnames: ClassNamesFn;
+
+  /**
+   * 图片地址
+   */
+  src?: string | React.ReactNode;
+
+  /**
+   * 图标
+   */
+  icon?: string | React.ReactNode;
+
+  /**
+   * 图片相对于容器的缩放方式
+   */
+  fit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
+
+  /**
+   * 形状
+   */
+  shape?: 'circle' | 'square' | 'rounded';
+
+  /**
+   * 大小
+   */
+  size?: number | 'small' | 'default' | 'large';
+
+  /**
+   * 文本
+   */
+  text?: string;
+
+  /**
+   * 字符类型距离左右两侧边界单位像素
+   */
+  gap?: number;
+
+  /**
+   * 图片无法显示时的替换文字地址
+   */
+  alt?: string;
+
+  /**
+   * 图片是否允许拖动
+   */
+  draggable?: boolean;
+
+  /**
+   * 图片CORS属性
+   */
+  crossOrigin?: 'anonymous' | 'use-credentials' | '';
+
+  /**
+   * 图片加载失败的事件，返回 false 会关闭组件默认的
+   */
+  onError?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => boolean;
+
+  /**
+   * 
+   */
+  children?: JSX.Element | ((props?: any) => JSX.Element)
+}
+
+const prefix = 'Avatar--';
+const childPrefix = prefix + 'text';
+
+export interface AvatarState {
+  scale: number;
+  hasImg: boolean;
+}
+
+export class Avatar extends React.Component<AvatarCmptProps, AvatarState> {
+  static defaultProps: Partial<AvatarCmptProps> = {
+    shape: 'circle',
+    size: 'default',
+    fit: 'cover',
+    gap: 4
+  };
+
+  state: AvatarState = {
+    scale: 1,
+    hasImg: true
+  };
+
+  avatarChildrenRef: React.RefObject<HTMLElement>;
+  avatarRef: React.RefObject<HTMLElement>;
+
+  constructor(props: AvatarCmptProps) {
+    super(props);
+    
+    this.avatarChildrenRef = React.createRef();
+    this.avatarRef = React.createRef();
+
+    this.handleImageLoadError = this.handleImageLoadError.bind(this);
+  }
+
+  componentDidMount() {
+    this.setScaleByGap();
+  }
+
+  componentDidUpdate(prevProps: AvatarCmptProps, prevState: AvatarState) {
+    const {src, gap, text, children} = this.props;
+    const {hasImg} = this.state;
+    if (prevProps.src !== src) {
+      this.setState({
+        hasImg: !!src
+      });
+    }
+    if ((prevState.hasImg && !hasImg)
+      || (prevProps.text !== text)
+      || (prevProps.children !== children)
+      || (prevProps.gap !== gap)) {
+      this.setScaleByGap();
+    }
+  }
+
+  handleImageLoadError(event: React.SyntheticEvent<HTMLImageElement, Event>) {
+    const {onError} = this.props;
+    this.setState({
+      hasImg: onError ? !onError(event) : false
+    });
+  }
+
+  setScaleByGap() {
+    const {gap = 4} = this.props;
+    if (!this.avatarChildrenRef.current || !this.avatarRef.current) {
+      return;
+    }
+    const childrenWidth = this.avatarChildrenRef.current.offsetWidth;
+    const nodeWidth = this.avatarRef.current.offsetWidth;
+    if (childrenWidth && nodeWidth) {
+      if (gap * 2 < nodeWidth) {
+        const diff = nodeWidth - gap * 2;
+        this.setState({
+          scale: diff < childrenWidth ? diff / childrenWidth : 1
+        });
+      }
+    }
+  };
+
+  render() {
+    let {
+      style = {},
+      className,
+      shape,
+      size,
+      src,
+      icon,
+      alt,
+      draggable,
+      crossOrigin,
+      fit,
+      text,
+      children,
+      classnames: cx
+    } = this.props;
+
+    const {scale, hasImg} = this.state;
+  
+    const isImgRender = React.isValidElement(src);
+    const isIconRender = React.isValidElement(icon);
+  
+    let childrenRender;
+  
+    let sizeStyle = {};
+    let sizeClass = '';
+  
+    if (typeof size === 'number') {
+      sizeStyle = {
+        height: size,
+        width: size,
+        lineHeight: size + 'px'
+      };
+    }
+    else if (typeof size === 'string') {
+      sizeClass = size === 'large'
+        ? `${prefix}lg` 
+        : size === 'small' ? `${prefix}sm` : '';
+    }
+  
+    const scaleX = `scale(${scale}) translateX(-50%)`;
+    const scaleStyle = {
+      msTransform: scaleX,
+      WebkitTransform: scaleX,
+      transform: scaleX
+    };
+  
+    if (typeof src === 'string' && hasImg) {
+      const imgStyle = fit ? {objectFit: fit} : {};
+      childrenRender = (
+        <img
+          style={imgStyle}
+          src={src}
+          alt={alt}
+          draggable={draggable}
+          onError={this.handleImageLoadError}
+          crossOrigin={crossOrigin}
+        />
+      );
+    }
+    else if (isImgRender) {
+      childrenRender = src;
+    }
+    else if (typeof text === 'string' || typeof text === 'number') {
+      childrenRender = (
+        <span
+          className={cx(childPrefix)}
+          ref={this.avatarChildrenRef}
+          style={scaleStyle}>
+          {text}
+        </span>
+      );
+    }
+    else if (typeof icon === 'string') {
+      childrenRender = (<i className={icon} />);
+    }
+    else if (isIconRender) {
+      childrenRender = icon;
+    }
+    else {
+      childrenRender = (
+        <span
+          className={cx(childPrefix)}
+          ref={this.avatarChildrenRef}
+          style={scaleStyle}>
+          {children}
+        </span>
+      );
+    }
+  
+    return (
+      <span
+        className={cx(`Avatar`, className, prefix + shape, sizeClass)}
+        style={{...sizeStyle, ...style}}
+        ref={this.avatarRef}>
+        {childrenRender}
+      </span>
+    );
+  }  
+}
+
+export default themeable(Avatar);

package/src/components/BaiduMapPicker.tsx

@@ -120,7 +120,11 @@ export class BaiduMapPicker extends React.Component<
       ? new BMap.Point(value.lng, value.lat)
       : new BMap.Point(116.404, 39.915);
     if (this.props.coordinatesType == 'gcj02') {
-      point = await this.covertPoint(point, COORDINATES_GCJ02, COORDINATES_BD09);
+      point = await this.covertPoint(
+        point,
+        COORDINATES_GCJ02,
+        COORDINATES_BD09
+      );
       map.centerAndZoom(point, 15);
     } else {
       map.centerAndZoom(point, 15);
@@ -269,27 +273,29 @@ export class BaiduMapPicker extends React.Component<
 
   covertPoint(point: any, from: number, to: number) {
     return new Promise((resolve, reject) => {
-      this.convertor.translate([point], from, to, (res:any)=> {
+      this.convertor.translate([point], from, to, (res: any) => {
         if (res.status === 0 && res.points.length) {
           resolve(new BMap.Point(res.points[0].lng, res.points[0].lat));
-        } else  {
+        } else {
           reject();
         }
-      })
-    })
+      });
+    });
   }
 
   triggerOnChange(loc: LocationItem) {
     const point = new BMap.Point(loc.lng, loc.lat);
     if (this.props.coordinatesType == 'gcj02') {
-      this.covertPoint(point, COORDINATES_BD09, COORDINATES_GCJ02).then((convertedPoint:any)=>{
-        this.props?.onChange({
-          address: loc.address.trim() || loc.title,
-          lat: convertedPoint.lat,
-          lng: convertedPoint.lng,
-          city: loc.city
-        });
-      })
+      this.covertPoint(point, COORDINATES_BD09, COORDINATES_GCJ02).then(
+        (convertedPoint: any) => {
+          this.props?.onChange({
+            address: loc.address.trim() || loc.title,
+            lat: convertedPoint.lat,
+            lng: convertedPoint.lng,
+            city: loc.city
+          });
+        }
+      );
     } else {
       this.props?.onChange({
         address: loc.address.trim() || loc.title,
@@ -298,7 +304,6 @@ export class BaiduMapPicker extends React.Component<
         city: loc.city
       });
     }
-
   }
 
   @autobind