amis 1.5.6-beta.5 → 1.6.0

package/src/Schema.ts

@@ -56,6 +56,7 @@ import {PaginationSchema} from './renderers/Pagination';
 import {AnchorNavSchema} from './renderers/AnchorNav';
 import {AvatarSchema} from './renderers/Avatar';
 import {StepsSchema} from './renderers/Steps';
+import {TimelineSchema} from './renderers/Timeline';
 import {ArrayControlSchema} from './renderers/Form/InputArray';
 import {ButtonGroupControlSchema} from './renderers/Form/ButtonGroupSelect';
 import {ChainedSelectControlSchema} from './renderers/Form/ChainedSelect';
@@ -201,6 +202,7 @@ export type SchemaType =
   | 'web-component'
   | 'anchor-nav'
   | 'steps'
+  | 'timeline'
   | 'control'
   | 'input-array'
   | 'button'
@@ -387,6 +389,7 @@ export type SchemaObject =
   | AnchorNavSchema
   | StepsSchema
   | PortletSchema
+  | TimelineSchema
 
   // 表单项
   | FormControlSchema

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